/* Guia AION 2 — a folha do app. Usa os tokens e componentes de ui/ (vendor/ui)
 * e não redefine nenhum: espaçamento e raio só da escala, cor só de token ou
 * das cores próprias do jogo declaradas aqui embaixo. Prefixo g- em tudo que é
 * do guia, para não colidir com a base. */

@layer telas {
  /* As cores que são do JOGO, não da casa: as fases do Daevanion (as mesmas
     do guia original, para o número no tabuleiro bater com o que o jogador já
     conhece), o canto laranja do tabuleiro e a tinta escura sobre elas. */
  :root {
    --g-canto: #e07a4f;
    --g-tinta: #10141b;
    --g-topo: 52px;
  }

  /* ---------- tema: o visual do aion2hub (pedido do Gabriel) ----------
     Só o guia muda: os tokens da base são redefinidos aqui, por cima, e ui/
     continua igual para o painel e o ledger. Fundo quase preto arroxeado com
     brilhos, títulos em Cinzel com degradê dourado, rótulos em Cinzel
     espaçado, cartões translúcidos de borda dourada, botão principal dourado.
     Medido no aion2hub.com em 09/10/2026. */
  :root {
    --canvas:#06060c; --surface:#10101a; --raised:#171724; --fundo-cab:#0a0a13; --hover:#141420;
    --rule:#2b2217; --rule-fraca:#1f1914;
    --ink:#eceef4; --muted:#b4b7c6; --faint:#8b8d9e;
    --accent:#e3bd6e; --accent-texto:#f0d595;
    --marca:#c79338; --marca-hover:#b27f30;
    --r-painel:14px;
    --g-fonte-titulo:"Cinzel", Georgia, serif;
    --rotulo:700 10.5px var(--g-fonte-titulo); --rotulo-tracking:.16em;
    --g-ouro:linear-gradient(180deg, #fbf3dd 0%, #e3bd6e 52%, #b27f30 100%);
    --g-ouro-botao:linear-gradient(180deg, #f7e7bd, #e3bd6e 55%, #c79338);
    --g-borda-ouro:rgba(210, 161, 74, .2);
    --g-cartao:linear-gradient(180deg, rgba(20, 20, 34, .72), rgba(10, 10, 20, .55));
  }
  body {
    background:
      radial-gradient(120% 80% at 50% -10%, rgba(210, 161, 74, .12), transparent 60%),
      radial-gradient(90% 60% at 84% 12%, rgba(95, 216, 203, .08), transparent 55%),
      radial-gradient(100% 70% at 8% 92%, rgba(111, 69, 232, .14), transparent 60%),
      var(--canvas);
    background-attachment:fixed;
  }
  ::selection { background:rgba(227, 189, 110, .35); color:var(--ink); }

  /* títulos e rótulos */
  .app .cabecalho h1 { font-family:var(--g-fonte-titulo); font-weight:700; letter-spacing:-.01em; background:var(--g-ouro); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .app .painel-cab h2, .app .g-h2, .app .g-texto h3, .app .g-detalhes > summary, .app .g-ajuda > summary { font-family:var(--g-fonte-titulo); font-weight:700; letter-spacing:.02em; color:var(--accent-texto); }
  .app .kpi-valor, .app .g-pontos b { font-family:var(--g-fonte-titulo); }

  /* menu lateral */
  .app .nav { border-right-color:var(--g-borda-ouro); background:linear-gradient(180deg, rgba(14, 12, 24, .92), rgba(8, 8, 16, .92)); backdrop-filter:blur(10px); }
  .app .marca-selo { background:var(--g-ouro-botao); color:#1a1206; font-family:var(--g-fonte-titulo); box-shadow:0 0 18px -6px rgba(210, 161, 74, .7); }
  .app .marca strong { font-family:var(--g-fonte-titulo); font-weight:700; background:var(--g-ouro); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .app .nav-grupo { color:var(--accent-texto); opacity:.8; }
  .app .nav-item[aria-current="page"] { border-left-color:var(--accent); background:linear-gradient(90deg, rgba(227, 189, 110, .14), transparent); }

  /* cartões e faixas */
  .app .painel, .app .kpi { border-color:var(--g-borda-ouro); background:var(--g-cartao); box-shadow:inset 0 1px 0 rgba(247, 231, 189, .07), 0 24px 60px -30px rgba(0, 0, 0, .85); }
  .app .faixa { border-color:var(--g-borda-ouro); background:var(--g-cartao); }
  .app .g-detalhes, .app .g-ajuda { border-color:var(--g-borda-ouro); background:var(--g-cartao); }

  /* botões */
  .app .btn { border-color:var(--rule); }
  .app .btn:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--rule)); }
  .app .btn[data-tom="accent"] { border-color:transparent; background:var(--g-ouro-botao); color:#1a1206; box-shadow:inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px rgba(210, 161, 74, .5), 0 0 22px -8px rgba(210, 161, 74, .55); }
  .app .btn[data-tom="accent"]:hover { filter:brightness(1.06); }
  [data-cor="0"] { --cor: #f2b84b; } [data-cor="1"] { --cor: #3fd0c9; } [data-cor="2"] { --cor: #6aa7ff; }
  [data-cor="3"] { --cor: #ff8a4c; } [data-cor="4"] { --cor: #5fd47a; } [data-cor="5"] { --cor: #e8e15a; }
  [data-cor="d0"] { --cor: #b48cff; } [data-cor="d1"] { --cor: #ff7eb6; } [data-cor="d2"] { --cor: #c6e05a; }
  [data-cor="d3"] { --cor: #6fd8ff; } [data-cor="d4"] { --cor: #d9b98a; } [data-cor="d5"] { --cor: #f08080; }
  [data-cor="t0"] { --cor: #f2b84b; } [data-cor="t1"] { --cor: #3fd0c9; } [data-cor="t2"] { --cor: #6aa7ff; }
  [data-cor="t3"] { --cor: #b48cff; } [data-cor="t4"] { --cor: #7d8ba1; }

  [hidden] { display:none !important; }
  /* O sprite vem com style="display:none", e a CSP da casa ignora estilo inline. */
  body > svg[aria-hidden="true"] { display:none; }
  body[data-carregando] .g-acoes-fixas { display:none; }

  .g-pular { position:fixed; left:var(--s4); top:var(--s4); z-index:60; padding:var(--s3); border-radius:var(--r-ctl); background:var(--surface); transform:translateY(-200%); }
  .g-pular:focus { transform:none; }
  .g-noscript { padding:var(--s5); }

  /* ---------- shell ---------- */
  .g-busca-nav { display:flex; align-items:center; gap:var(--s2); width:calc(100% - var(--s4) * 2); margin:0 var(--s4) var(--s3); padding:var(--s2) var(--s3); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--surface); color:var(--faint); font-size:13px; }
  .g-busca-nav:hover { border-color:var(--accent); color:var(--ink); }
  .g-busca-nav .tecla { margin-left:auto; }
  /* Nome de classe e de página é longo ("Espiritualista (Spiritmaster)"): a
     base fixa 36px de altura no item, e o texto quebrado vazava. */
  #nav-itens .nav-item { height:auto; min-height:36px; padding-top:var(--s2); padding-bottom:var(--s2); line-height:1.25; }
  .g-busca-nav span { white-space:nowrap; }
  .g-nav-ico { width:22px; height:22px; flex:none; border:1px solid var(--rule); border-radius:var(--r-min); }
  .g-fundo-menu { position:fixed; inset:0; z-index:25; border:0; background:color-mix(in srgb, var(--canvas) 65%, transparent); }

  .g-topo { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:var(--s3); min-height:var(--g-topo); padding:0 var(--s5); border-bottom:1px solid var(--g-borda-ouro); background:color-mix(in srgb, var(--fundo-cab) 80%, transparent); backdrop-filter:blur(10px); }
  .g-trilha { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 12.5px var(--mono); color:var(--muted); }
  .g-icone-btn { justify-content:center; width:36px; padding:0; }
  .g-icone-btn svg { width:16px; height:16px; }
  .g-chip-link:hover { color:var(--ink); }

  .g-corpo { max-width:1240px; }
  /* O app foca o conteúdo ao trocar de tela (leitor de tela começa nele). Sem
   * clique antes, o Chrome conta esse foco como de teclado e desenhava o
   * contorno dourado em volta da área inteira. Não é algo clicável: sem anel. */
  .g-corpo:focus { outline:none; }
  body[data-com-acoes] .g-corpo { padding-bottom:calc(var(--s6) * 3); }
  .g-carregando { display:flex; align-items:center; gap:var(--s2); color:var(--faint); }

  /* ---------- tipografia ---------- */
  .g-sobre { margin-bottom:var(--s1); font:var(--rotulo); letter-spacing:var(--rotulo-tracking); color:var(--faint); }
  .g-sub { margin-top:var(--s1); color:var(--muted); font-size:13.5px; }
  .g-h2 { font-size:17px; font-weight:600; letter-spacing:-.01em; }
  .g-nota { color:var(--faint); font-size:13px; }
  .g-secao { display:flex; flex-direction:column; gap:var(--s3); min-width:0; }
  .g-lista-lead { margin:0; padding-left:var(--s5); max-width:75ch; }
  .g-lista-lead li { margin:var(--s1) 0; }
  .g-rotulo-campo { font:var(--rotulo); letter-spacing:var(--rotulo-tracking); color:var(--faint); text-transform:uppercase; }
  .g-en { display:block; color:var(--faint); font-size:12px; line-height:1.25; }
  .g-mini { width:26px; height:26px; border-radius:var(--r-min); vertical-align:middle; }

  /* ---------- classe ---------- */
  .g-cab-classe { gap:var(--s4); }
  .g-cab-ico { width:52px; height:52px; border:1px solid var(--rule); border-radius:var(--r-ctl); }
  .g-abas { position:sticky; top:var(--g-topo); z-index:10; display:flex; gap:var(--s1); overflow-x:auto; margin:0 calc(var(--s5) * -1); padding:0 var(--s5); border-bottom:1px solid var(--g-borda-ouro); background:color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter:blur(10px); scrollbar-width:none; }
  .g-aba { flex:none; padding:var(--s3); border-bottom:2px solid transparent; margin-bottom:-1px; color:var(--muted); font-family:var(--g-fonte-titulo); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
  .g-aba:hover { color:var(--ink); }
  .g-aba[aria-current="page"] { border-bottom-color:var(--accent); color:var(--accent-texto); }

  .g-sk { display:inline-flex; align-items:center; gap:var(--s2); vertical-align:middle; min-width:0; }
  .g-sk img { width:36px; height:36px; flex:none; border:1px solid var(--rule); border-radius:var(--r-min); }
  .g-sk b { font-weight:600; }
  .g-sk-p img { width:24px; height:24px; }
  .g-linha-sk { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s1) 0; }
  .g-caixa { padding:var(--s2) var(--s3); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--surface); }
  .g-grade-meta { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--s2); }
  .g-grade-resumo .painel-corpo { display:flex; flex-direction:column; gap:var(--s1); }
  .g-chips { display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s3); }
  .chip[data-tipo="ativa"], .g-tipo[data-tipo="opt"] { background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent-texto); }
  .g-tipo[data-tipo="must"] { background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn-texto); }

  .g-cartoes { display:grid; gap:var(--s2); }
  .g-cartao { display:grid; grid-template-columns:48px minmax(0,1fr); gap:var(--s3); align-items:start; padding:var(--s3); border:1px solid var(--rule); border-radius:var(--r-painel); background:var(--surface); }
  .g-cartao[data-tipo="skip"] { opacity:.55; }
  .g-cartao > img { width:48px; height:48px; border:1px solid var(--rule); border-radius:var(--r-ctl); }
  .g-cartao-corpo { min-width:0; }
  .g-cartao-topo { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2); }
  .g-cartao-topo b { font-size:15px; }
  .g-cartao-topo .g-en { display:inline; }
  .g-cartao-txt { max-width:80ch; margin-top:var(--s1); color:var(--muted); font-size:13.5px; }
  .g-origem { margin-right:var(--s2); padding:0 var(--s1); border:1px solid var(--rule); border-radius:var(--r-min); color:var(--faint); font:600 10px var(--mono); font-style:normal; }
  .g-specs { display:flex; flex-wrap:wrap; gap:var(--s1); margin:var(--s2) 0 0; padding:0; list-style:none; }
  .g-specs li { padding:2px var(--s2); border:1px solid var(--rule); border-radius:var(--r-min); background:var(--raised); font-size:12.5px; }
  .g-specs b { margin-right:var(--s1); color:var(--warn-texto); }

  /* Estigmas: mesma grade e card da aba Skills; o que muda é a marca do slot. */
  .g-lad-slot { position:absolute; top:2px; right:3px; display:grid; place-items:center; min-width:16px; height:16px; padding:0 var(--s1); border-radius:var(--r-pilula); background:var(--accent); color:var(--g-tinta); font-size:10px; font-weight:800; }
  .g-legenda-est .g-lad-slot, .g-legenda-est .g-lad-rec { position:static; display:inline-grid; transform:none; vertical-align:middle; }
  .g-legenda-est { margin-top:var(--s3); }
  .g-ladrilho[data-fora] { opacity:.55; }
  .g-ladrilho[data-fora][aria-pressed="true"] { opacity:1; }
  .g-est-progresso { display:flex; flex-direction:column; gap:var(--s1); }
  .g-est-progresso .g-barra { max-width:none; }

  /* Barra e macro: colunas como as do jogo, fileira 0 embaixo e dourada. */
  .g-barra-abas { margin-bottom:var(--s4); }
  .g-barra-abas .g-tab-btn { flex:1 1 200px; }
  .g-barra-jogo .painel-cab { flex-wrap:wrap; }
  .g-barra-jogo .painel-cab > div { flex:1 1 260px; min-width:0; }
  .g-barra-jogo .painel-cab .g-nota { margin:2px 0 0; }
  .g-hotbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s3); }
  /* Cada grupo cresce na proporção dos slots dele e só quebra linha quando nem
   * 52 px por slot cabem (--colunas vem de data-colunas, pelo CSSOM). */
  .g-hot-grupo { display:grid; grid-template-columns:repeat(var(--colunas, 4), minmax(0, 1fr)); flex:var(--colunas, 4) 1 0; min-width:calc(var(--colunas, 4) * 52px + var(--s2) * 2 + 2px); max-width:calc(var(--colunas, 4) * 80px + var(--s2) * 2 + 2px); gap:var(--s1); padding:var(--s2); border:1px solid var(--rule); border-radius:var(--r-painel); background:var(--fundo-cab); }
  .g-hot-grupo[data-livre] { display:flex; flex:0 1 auto; flex-wrap:wrap; min-width:0; max-width:100%; }
  .g-hot-grupo[data-livre] .g-hot-slot { width:76px; }
  .g-hot-slot { display:flex; flex-direction:column; align-items:stretch; gap:var(--s1); min-width:0; }
  .g-hot-rotulo { display:flex; align-items:flex-end; justify-content:center; min-height:26px; color:var(--accent-texto); font:700 9.5px/1.2 var(--mono); letter-spacing:.04em; text-align:center; text-transform:uppercase; overflow-wrap:anywhere; }
  .g-hot-pilha { display:flex; flex-direction:column-reverse; gap:var(--s1); margin:0; padding:0; list-style:none; }
  .g-hot-cel { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; height:78px; padding:var(--s1) 2px 2px; border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--surface); }
  .g-hot-cel img { width:min(40px, 100%); height:auto; aspect-ratio:1 / 1; border-radius:var(--r-min); }
  .g-hot-cel span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; width:100%; font-size:10.5px; line-height:1.15; text-align:center; overflow-wrap:anywhere; hyphens:auto; }
  .g-hot-cel em { position:absolute; top:1px; left:var(--s1); color:var(--faint); font:700 10px var(--mono); font-style:normal; }
  .g-hot-cel[data-primeira] { border-color:var(--warn); box-shadow:0 0 0 1px var(--warn), 0 0 10px color-mix(in srgb, var(--warn) 30%, transparent); }
  .g-hot-cel[data-primeira] em { color:var(--warn-texto); }
  .g-hot-cel[data-opcional] { border-style:dashed; opacity:.75; }
  .g-hot-cel[data-vazia] { border-style:dashed; border-color:var(--rule-fraca); background:transparent; }
  .g-hot-slot[data-vazio] .g-hot-cel { opacity:.6; }
  .g-hot-tecla { align-self:center; min-width:28px; padding:2px var(--s2); border:1px solid var(--rule); border-bottom-width:2px; border-radius:var(--r-min); background:var(--surface); color:var(--ink); font:700 11.5px var(--mono); text-align:center; white-space:nowrap; }
  .g-hot-slot[data-vazio] .g-hot-tecla { color:var(--faint); }
  .g-hot-notas { display:flex; flex-direction:column; gap:var(--s2); margin:var(--s4) 0 0; padding-left:var(--s4); color:var(--muted); font-size:13px; line-height:1.45; }
  .g-combate .g-hot-notas { margin:0; color:var(--ink); }
  .g-barra-info { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr); gap:var(--s4); align-items:start; margin-top:var(--s4); }
  .g-teclas { display:flex; flex-direction:column; gap:var(--s2); margin:0 0 var(--s3); }
  .g-teclas div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s2); padding-bottom:var(--s2); border-bottom:1px solid var(--rule-fraca); }
  .g-teclas dt { color:var(--faint); font-size:12.5px; }
  .g-teclas dd { margin:0; font-size:13px; font-weight:600; }
  .g-macro { display:flex; flex-direction:column; gap:var(--s2); margin:0 0 var(--s3); padding:0; list-style:none; }
  .g-macro li { display:flex; align-items:center; gap:var(--s2); padding:var(--s2); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--fundo-cab); }
  .g-macro img { width:32px; height:32px; border-radius:var(--r-min); }
  .g-macro-n { display:grid; place-items:center; flex:none; width:22px; height:22px; border-radius:var(--r-pilula); background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn-texto); font-size:12px; }
  .g-macro-nome { flex:1; min-width:0; font-size:13px; font-weight:600; }

  /* ---------- listas com caixa de marcar ---------- */
  .g-itens { display:grid; gap:var(--s2); max-width:900px; margin:0; padding:0; list-style:none; }
  .g-item { border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--surface); }
  .g-item:hover { border-color:color-mix(in srgb, var(--accent) 50%, var(--rule)); }
  .g-item[data-feito] { opacity:.55; }
  .g-item[data-proximo] { border-color:var(--warn); box-shadow:0 0 0 1px var(--warn), 0 0 12px color-mix(in srgb, var(--warn) 35%, transparent); opacity:1; }
  .g-item-rotulo { display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:var(--s3); align-items:start; padding:var(--s2) var(--s3); cursor:pointer; }
  .g-item-rotulo input { width:20px; height:20px; margin:2px 0 0; accent-color:var(--ok); }
  .g-item-nivel { min-width:3ch; color:var(--warn-texto); font-weight:700; white-space:nowrap; }
  .g-item-corpo { display:flex; flex-direction:column; gap:var(--s1); min-width:0; }

  /* ---------- tabelas ---------- */
  .g-rolagem { overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
  .g-tabela, .g-texto table.t { width:100%; border-collapse:collapse; font-size:13.5px; }
  .g-tabela th, .g-texto table.t th { padding:var(--s2) var(--s3); border-bottom:1px solid var(--rule); font:var(--rotulo); letter-spacing:var(--rotulo-tracking); color:var(--faint); text-align:left; text-transform:uppercase; white-space:nowrap; }
  .g-tabela td, .g-texto table.t td { padding:var(--s2) var(--s3); border-bottom:1px solid var(--rule-fraca); vertical-align:top; }
  .g-tabela tr[data-feito] { opacity:.5; }
  .g-tabela tr[data-agora] td { background:color-mix(in srgb, var(--warn) 8%, transparent); }
  .g-tabela-limite { min-width:760px; }
  .g-tabela-limite th, .g-tabela-limite td { text-align:center; }
  .g-tabela-limite td:nth-child(2), .g-tabela-limite th:nth-child(2) { text-align:left; }
  .g-tabela-limite [data-destaque] { background:color-mix(in srgb, var(--warn) 14%, transparent); color:var(--warn-texto); font-weight:700; }
  .g-pos { color:var(--warn-texto); font-weight:700; }

  /* ---------- controles ---------- */
  .g-acoes { display:flex; flex-wrap:wrap; gap:var(--s2); }
  .g-passo { display:inline-flex; align-items:center; gap:var(--s1); }
  .g-passo-btn { justify-content:center; min-width:32px; padding:0 var(--s2); font-size:15px; }
  .g-passo output { min-width:34px; font-size:16px; font-weight:600; text-align:center; }
  .g-barra { width:100%; max-width:220px; }
  .g-barra > i { background:var(--accent); }
  .g-barra > i[data-cheia] { background:var(--ok); }
  .g-barra-ctl, .g-campos { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s5); }
  .g-campo { display:flex; align-items:center; gap:var(--s2); }
  .g-pontos { font-size:15px; }
  .g-pontos b { color:var(--warn-texto); font-size:22px; }
  .g-status { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s5); min-height:46px; padding:var(--s2) var(--s3); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--surface); }
  .g-pilula { display:inline-block; min-width:26px; padding:0 var(--s2); border-radius:var(--r-pilula); background:var(--cor, var(--warn)); color:var(--g-tinta); font-size:13px; font-weight:700; line-height:20px; text-align:center; }
  .g-link-btn { padding:0; color:var(--accent-texto); font-weight:600; }
  .g-link-btn:hover { text-decoration:underline; }
  .g-arquivo { position:relative; cursor:pointer; }
  .g-arquivo input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
  .g-arquivo:focus-within { outline:2px solid var(--accent); outline-offset:2px; }

  .g-detalhes, .g-ajuda { border:1px solid var(--rule); border-radius:var(--r-painel); background:var(--surface); }
  .g-detalhes > summary, .g-ajuda > summary { padding:var(--s3) var(--s4); color:var(--accent-texto); font-weight:600; cursor:pointer; }
  .g-detalhes[open] { display:flex; flex-direction:column; gap:var(--s3); padding-bottom:var(--s4); }
  .g-detalhes[open] > :not(summary) { margin:0 var(--s4); }
  .g-saiba { margin-top:var(--s4); }
  .g-ajuda { border-color:color-mix(in srgb, var(--accent) 30%, var(--rule)); background:color-mix(in srgb, var(--accent) 5%, var(--surface)); }
  .g-ajuda > summary { font-size:13px; }
  .g-ajuda-corpo { padding:0 var(--s4) var(--s3); color:var(--muted); font-size:13.5px; line-height:1.6; }

  /* ---------- Daevanion ---------- */
  .g-daev { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,320px); gap:var(--s4); align-items:start; }
  .g-daev-tabuleiro { display:flex; flex-direction:column; gap:var(--s2); min-width:0; }
  .g-daev-lado { position:sticky; top:calc(var(--g-topo) + var(--s6) + var(--s4)); display:flex; flex-direction:column; gap:var(--s3); }
  .g-daev-lado .g-acoes { display:grid; grid-template-columns:1fr 1fr; }
  .g-daev-lado .g-acoes .btn { justify-content:center; min-height:40px; }
  .g-daev-lado .g-tabs { flex-direction:column; }
  .g-daev-lado .g-tab-btn { width:100%; }
  .g-daev-status { flex-direction:column; align-items:stretch; gap:var(--s2); }
  .g-daev-cristais { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2); }
  .g-daev-cristais b { color:var(--warn-texto); font-size:20px; }
  .g-tabs { display:flex; flex-wrap:wrap; gap:var(--s2); }
  .g-tab-btn { padding:var(--s2) var(--s3); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--surface); text-align:left; }
  .g-tab-btn:hover { border-color:var(--accent); }
  .g-tab-btn[aria-selected="true"] { border-color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); }
  .g-tab-nome { display:flex; align-items:center; gap:var(--s2); font-size:14px; font-weight:600; }
  .g-tab-sub { display:block; color:var(--faint); font-size:12px; }
  .g-zoom { display:flex; align-items:center; gap:var(--s1); }
  .g-zoom .g-rotulo-campo { margin-right:auto; }
  .g-zoom-btn[aria-pressed="true"] { border-color:var(--accent); color:var(--accent-texto); }
  /* position:relative faz o offsetLeft dos nós contar a partir desta caixa: é
     o que app.js usa para centralizar o próximo nó. */
  .g-tabuleiro-rolagem { position:relative; max-height:min(82vh, 980px); overflow:auto; overscroll-behavior:contain; }
  .g-tabuleiro { --g-celula:52px; --colunas:16; display:grid; grid-template-columns:repeat(var(--colunas), var(--g-celula)); grid-auto-rows:var(--g-celula); gap:var(--s1); width:max-content; padding:var(--s3); border:1px solid var(--rule); border-radius:var(--r-painel); background:var(--fundo-cab); }
  .g-tabuleiro[data-zoom="p"] { --g-celula:38px; }
  .g-tabuleiro[data-zoom="m"] { --g-celula:52px; }
  .g-tabuleiro[data-zoom="g"] { --g-celula:64px; }
  .g-no { position:relative; display:grid; place-items:center; width:var(--g-celula); height:var(--g-celula); padding:0; overflow:hidden; border:1px solid var(--rule); border-radius:var(--r-min); background:var(--raised); }
  .g-no img { width:100%; height:100%; object-fit:cover; }
  .g-no[data-t="k"] { border-color:var(--accent); }
  .g-no[data-passiva] { border-color:var(--ok); }
  .g-no[data-canto] { border-color:var(--g-canto); background:color-mix(in srgb, var(--g-canto) 22%, var(--surface)); }
  .g-no[data-t="o"] { border-color:var(--ok); background:color-mix(in srgb, var(--ok) 16%, var(--surface)); cursor:default; }
  .g-no-rotulo { padding:2px; color:var(--muted); font-size:10px; font-weight:700; line-height:1.05; text-align:center; }
  .g-no-num { position:absolute; bottom:2px; left:50%; padding:0 var(--s1); transform:translateX(-50%); border-radius:var(--r-pilula); background:var(--cor); color:var(--g-tinta); font-size:11px; font-weight:800; line-height:15px; }
  .g-no[data-pular] { opacity:.16; filter:grayscale(1); }
  .g-no[data-pular][data-pego] { opacity:.5; }
  .g-no[data-pego]:not([data-t="o"]) { border:2px solid var(--ok); background:color-mix(in srgb, var(--ok) 24%, var(--surface)); }
  .g-no[data-pego]:not([data-t="o"]) img { opacity:.5; }
  .g-no[data-pego]:not([data-t="o"]) .g-no-num { filter:saturate(.4) brightness(.85); }
  .g-no[data-pego]:not([data-t="o"])::after { position:absolute; top:0; right:3px; color:var(--ok-texto); font-size:15px; font-weight:800; text-shadow:0 0 4px var(--canvas); content:"✓"; }
  .g-no[data-proximo] { z-index:2; outline:3px solid var(--warn); outline-offset:1px; box-shadow:0 0 16px 4px color-mix(in srgb, var(--warn) 55%, transparent); }
  .g-no:focus-visible { z-index:3; outline:3px solid var(--accent); outline-offset:2px; }
  .g-fases { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s2); }
  .g-fase { padding:var(--s2) var(--s3); border:1px solid var(--rule); border-left:6px solid var(--cor); border-radius:var(--r-ctl); background:var(--surface); font-size:13.5px; }
  .g-fase .g-pilula { margin-right:var(--s2); }
  .g-fase small { display:block; color:var(--faint); }

  /* ---------- Skills ---------- */
  .g-sim { gap:var(--s4); padding:var(--s4); }
  /* Skills: a sequência de passos (telas/skills.js). */
  .g-seq-linha { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); }
  .g-seq-linha .g-status { flex:1 1 380px; }
  .g-sim > .g-barra { max-width:none; }
  .g-passos td { vertical-align:middle; }
  .g-passos .g-quando { color:var(--muted); white-space:nowrap; }
  .g-estado-passo { text-align:right; white-space:nowrap; }
  .g-ate { height:26px; padding:0 var(--s2); font-size:12px; }
  .g-oculto { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .g-sim-topo { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s5); }
  .g-pontos { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:baseline; gap:var(--s1) var(--s2); margin-left:auto; font-size:15px; }
  .g-pontos b { color:var(--warn-texto); font-size:24px; }
  .g-pontos small { flex-basis:100%; color:var(--faint); font-size:12px; text-align:right; }
  /* Os dois lados terminam na mesma linha: o card estica até o pé das grades e,
   * se ele for o mais alto, a última grade estica até o pé dele. */
  .g-skills { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,420px); gap:var(--s4); align-items:stretch; }
  .g-ladrilhos { display:flex; flex-direction:column; gap:var(--s4); min-width:0; }
  .g-grupo-lad:last-child { flex:1; }
  .g-grupo-lad { padding:var(--s3); border:1px solid var(--rule-fraca); border-radius:var(--r-painel); background:var(--fundo-cab); }
  .g-rotulo-grade { margin:0 0 var(--s3); padding:var(--s1); border-radius:var(--r-min); background:var(--raised); font-size:13px; font-weight:600; text-align:center; }
  /* 5 por linha, como a janela Habilidade do jogo. */
  .g-grade-lad { display:grid; grid-template-columns:repeat(5,minmax(0,72px)); justify-content:center; gap:var(--s3) var(--s2); }
  .g-ladrilho { position:relative; width:100%; aspect-ratio:1 / 1; padding:0; border:2px solid color-mix(in srgb, var(--ok) 45%, transparent); border-radius:var(--r-ctl); background:var(--fundo-cab); }
  .g-ladrilho img { display:block; width:100%; height:100%; object-fit:cover; border-radius:var(--r-min); }
  .g-ladrilho:hover { border-color:var(--ok); }
  .g-ladrilho[data-travada] img { filter:grayscale(1) brightness(.4); }
  .g-ladrilho[aria-pressed="true"] { border-color:var(--ink); box-shadow:0 0 0 2px var(--ink); }
  .g-ladrilho[data-rec] { border-color:var(--warn); box-shadow:0 0 14px 3px color-mix(in srgb, var(--warn) 60%, transparent); }
  .g-lad-nivel { position:absolute; right:3px; bottom:2px; color:var(--ink); font-size:12px; font-weight:800; text-shadow:0 0 3px var(--canvas), 0 0 3px var(--canvas); }
  .g-ladrilho[data-travada] .g-lad-nivel { color:var(--crit-texto); }
  .g-lad-rec { position:absolute; top:-9px; left:50%; padding:0 var(--s1); transform:translateX(-50%); border-radius:var(--r-min); background:var(--warn); color:var(--g-tinta); font:800 9px var(--mono); white-space:nowrap; }
  /* O número do próximo passo da skill, como o número dos nós do Daevanion. */
  .g-lad-passo { position:absolute; top:2px; right:3px; min-width:20px; padding:0 var(--s1); border-radius:var(--r-pilula); background:var(--warn); color:var(--g-tinta); font:800 10px/16px var(--mono); text-align:center; }
  .g-lad-max { position:absolute; top:2px; left:3px; color:var(--ok-texto); font:800 10px var(--mono); text-shadow:0 0 3px var(--canvas); }

  /* O card da skill escolhida, ao lado da grade. */
  .g-card-skill { gap:var(--s3); padding:var(--s4); border-color:color-mix(in srgb, var(--accent) 45%, var(--rule)); }
  .g-card-cab { display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:var(--s3); align-items:center; }
  .g-card-cab > img { width:56px; height:56px; border:1px solid var(--rule); border-radius:var(--r-ctl); }
  .g-card-titulo h3 { font-size:18px; font-weight:600; line-height:1.2; }
  .g-card-skill .chip .g-pilula { min-width:20px; margin-right:var(--s1); line-height:16px; font-size:11px; }
  /* A soma do card: do plano + Daevanion = no jogo (só informação). */
  .g-soma { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:0; overflow:hidden; border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--rule); }
  .g-soma > div { display:flex; flex-direction:column; gap:var(--s1); padding:var(--s2); background:var(--fundo-cab); }
  .g-soma > div[data-total] { background:color-mix(in srgb, var(--warn) 10%, var(--fundo-cab)); }
  .g-soma dt { font:var(--rotulo); letter-spacing:var(--rotulo-tracking); color:var(--faint); text-transform:uppercase; }
  .g-soma dd { display:flex; flex-direction:column; gap:2px; margin:0; font-size:18px; font-weight:600; }
  .g-soma dd small { color:var(--faint); font-size:11px; font-weight:400; }
  .g-card-nivel { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
  .g-card-nivel b { color:var(--warn-texto); font-size:34px; line-height:1; }
  /* A soma do nível, como o jogo mostra: pontos + Daevanion + outros. */
  .g-det-txt { color:var(--muted); font-size:13.5px; }
  .g-det-botoes { display:grid; grid-template-columns:52px 1fr; gap:var(--s2); }
  .g-det-botoes .btn { justify-content:center; height:42px; font-size:14px; }
  .g-espec { display:grid; gap:var(--s1); margin:0; padding:0; list-style:none; }
  .g-espec li { display:flex; align-items:center; gap:var(--s2); padding:var(--s1) var(--s2); border:1px solid var(--rule); border-radius:var(--r-min); background:var(--fundo-cab); color:var(--faint); font-size:12.5px; }
  .g-espec li > span:first-of-type { flex:1; }
  .g-espec li b { min-width:2ch; }
  .g-espec li[data-ativa] { border-color:var(--ok); color:var(--ink); }
  .g-espec li[data-ativa] b { color:var(--ok-texto); }
  .g-espec li[data-recomendada]:not([data-ativa]) { border-color:color-mix(in srgb, var(--warn) 45%, var(--rule)); }

  /* ---------- rotina ---------- */
  .g-fenda { margin-bottom:var(--s4); }
  .g-fenda-estado { margin:0; font-size:15px; }
  .g-fenda-aberta { color:var(--ok-texto); }
  .g-fenda-horas { display:flex; flex-wrap:wrap; gap:var(--s1); margin:var(--s3) 0; }
  .g-rotina-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-rotina-grade { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:var(--s4); align-items:start; }
  .g-lista-rotina { display:flex; flex-direction:column; gap:var(--s2); margin:0; list-style:none; }
  .g-tarefa-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .g-tarefa-txt b { font-size:14px; }
  .g-tarefa-txt small { color:var(--faint); font-size:12.5px; line-height:1.4; }
  .g-tarefa-txt .g-tarefa-limite { color:var(--accent-texto); opacity:.85; }
  .g-rotina-fonte { margin:0; padding:0 var(--s4) var(--s3); }
  .g-tarefa-dia { display:grid; grid-template-columns:28px minmax(0,1fr); gap:var(--s3); align-items:start; padding:var(--s3); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--fundo-cab); cursor:pointer; }
  .g-tarefa-dia:hover { border-color:color-mix(in srgb, var(--ok) 55%, var(--rule)); }
  .g-tarefa-dia input { position:absolute; opacity:0; pointer-events:none; }
  .g-tarefa-dia:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
  .g-marca { display:grid; place-items:center; width:26px; height:26px; border:2px solid var(--rule); border-radius:var(--r-ctl); color:var(--g-tinta); font-weight:800; }
  .g-tarefa-dia[data-feito] { opacity:.55; }
  .g-tarefa-dia[data-feito] .g-marca { border-color:var(--ok); background:var(--ok); }
  .g-tarefa-dia[data-feito] b { text-decoration:line-through; text-decoration-color:var(--faint); }
  .g-tarefa-sem { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s3); align-items:center; padding:var(--s3); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--fundo-cab); }
  .g-tarefa-sem[data-feito] { opacity:.55; }
  .g-tarefa-ctl { display:flex; flex-direction:column; align-items:flex-end; gap:var(--s1); }
  .g-tarefa-conta { color:var(--faint); font-size:13px; font-weight:700; }
  .g-tarefa-sem[data-feito] .g-tarefa-conta { color:var(--ok-texto); }
  .g-pips { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--s1); max-width:200px; }
  .g-pip { width:22px; height:22px; border:2px solid var(--rule); border-radius:var(--r-pilula); background:var(--surface); }
  .g-pip:hover { border-color:var(--ok); }
  .g-pip[data-cheia] { border-color:var(--ok); background:var(--ok); }
  .g-checagem { display:flex; flex-direction:column; gap:var(--s4); }

  /* ---------- progressão no 45 do personagem ---------- */
  .g-prog-topo .g-passo { flex-wrap:wrap; }
  .g-prog-ilvl { width:84px; text-align:center; }
  .g-prog-grade { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:var(--s4); align-items:start; margin:var(--s4) 0; }
  .g-prog-faixas { display:flex; flex-direction:column; gap:var(--s2); margin:0; padding:0; list-style:none; }
  .g-prog-faixa { display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--s3); align-items:start; padding:var(--s3); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--fundo-cab); }
  .g-prog-faixa[data-estado="feita"] { opacity:.6; }
  .g-prog-faixa[data-estado="atual"] { border-color:var(--ok); box-shadow:0 0 0 1px var(--ok); }
  .g-prog-faixa[data-estado="proxima"] { border-color:var(--warn); }
  .g-prog-faixa[data-estado="futura"] { opacity:.75; }
  .g-prog-nivel { color:var(--warn-texto); font-size:18px; font-weight:700; line-height:1.2; }
  .g-prog-faixa[data-estado="atual"] .g-prog-nivel, .g-prog-faixa[data-estado="feita"] .g-prog-nivel { color:var(--ok-texto); }
  .g-prog-txt { display:flex; flex-direction:column; gap:var(--s1); min-width:0; }
  .g-prog-txt b { font-size:14px; }
  .g-prog-txt .chip, .g-prog-txt .g-lad-rec { position:static; align-self:flex-start; transform:none; }
  .g-prog-txt small { color:var(--muted); font-size:12.5px; line-height:1.45; }

  /* ---------- títulos do personagem ---------- */
  .g-tit-resumo { margin:0 0 var(--s4); }
  .g-tit-grade { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); align-items:stretch; margin-bottom:var(--s4); }
  .g-tit-espaco, .g-tit-colecao { min-width:0; }
  .g-tit-colecao { margin-bottom:var(--s4); }
  .g-tit-agora { display:flex; flex-direction:column; gap:2px; margin-bottom:var(--s3); padding:var(--s3); border:1px dashed var(--rule); border-radius:var(--r-ctl); }
  .g-tit-agora[data-tem] { border-style:solid; border-color:var(--ok); background:color-mix(in srgb, var(--ok) 8%, transparent); }
  .g-tit-agora b { font-size:15px; }
  .g-tit-agora small { color:var(--muted); font-size:12.5px; }
  .g-tit-escada { display:flex; flex-direction:column; gap:var(--s2); margin:0; padding:0; list-style:none; }
  .g-tit { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s2) var(--s3); align-items:center; padding:var(--s3); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--fundo-cab); }
  .g-tit[data-tenho] { border-color:color-mix(in srgb, var(--ok) 55%, var(--rule)); }
  .g-tit-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .g-tit-txt b { font-size:14px; }
  .g-tit-txt .chip, .g-tit-txt .g-lad-rec { position:static; align-self:flex-start; transform:none; }
  .g-tit-txt span { font-size:13px; }
  .g-tit-txt small { color:var(--faint); font-size:12px; line-height:1.4; }
  .g-tit-txt .g-tit-guia { margin-top:-2px; font-size:11.5px; }
  .g-tit-tenho { white-space:nowrap; }
  .g-tit-tenho[aria-pressed="true"] { border-color:var(--ok); color:var(--ok-texto); }

  /* ---------- personagens: de quem é o progresso ---------- */
  /* A versão, logo acima da conta: empurrada para o fim do menu junto com ela. */
  .g-versao { margin:auto var(--s4) 0; padding-top:var(--s3); color:var(--faint); font:500 11px var(--mono); text-decoration:none; }
  .g-versao:hover, .g-versao[aria-current="page"] { color:var(--accent); }
  .g-versao + .nav-pe { margin-top:var(--s2); }
  .g-novidades ul { display:flex; flex-direction:column; gap:var(--s2); margin:0; padding-left:calc(var(--s4) + 1.2em); font-size:14px; line-height:1.5; }
  /* A conta no rodapé do menu: quem entrou e como está a sincronia. */
  .g-conta-pe { color:inherit; text-decoration:none; }
  .g-conta-pe:hover strong, .g-conta-pe[aria-current="page"] strong { color:var(--ink); }
  .g-conta-pe-txt { min-width:0; }
  .g-conta-pe-txt strong, .g-conta-pe-txt small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .g-conta-selo { display:grid; flex:none; place-items:center; width:30px; height:30px; border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--fundo-cab); color:var(--accent); font:700 14px/1 var(--g-fonte-titulo); }
  .g-conta-pe[data-sem-login] .g-conta-selo { border-color:transparent; background:var(--g-ouro-botao); color:#1a1206; }
  .g-conta-pe[data-sem-login] strong { color:var(--accent); }
  .g-nav-pers { height:auto; min-height:40px; padding-top:var(--s1); padding-bottom:var(--s1); }
  .g-nav-pers-txt { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
  .g-nav-pers-txt b { overflow:hidden; color:var(--ink); font-size:13.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
  .g-nav-pers-txt small { color:var(--faint); font-size:11.5px; }
  .g-nav-novo { color:var(--accent-texto); font-size:12.5px; }
  .g-personagem-nome { color:var(--ink); }
  .g-personagem-nome:hover { color:var(--accent-texto); }
  .g-nav-meu { flex:none; width:8px; height:8px; margin-left:auto; border-radius:var(--r-pilula); background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
  .g-chip-link[hidden] { display:none; }
  .g-personagens { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%, 420px),1fr)); gap:var(--s3); margin:0 0 var(--s5); padding:0; list-style:none; }
  .g-personagem { display:grid; grid-template-columns:52px minmax(0,1fr); gap:var(--s2) var(--s3); align-items:center; padding:var(--s3); border:1px solid var(--rule); border-radius:var(--r-painel); background:var(--surface); }
  .g-personagem[data-atual] { border-color:var(--ok); box-shadow:0 0 0 1px var(--ok); }
  .g-personagem img { width:52px; height:52px; border-radius:var(--r-ctl); }
  .g-personagem-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .g-personagem-txt b { font-size:16px; }
  .g-personagem-txt small { color:var(--faint); font-size:12.5px; }
  .g-personagem .g-acoes { grid-column:1 / -1; justify-content:flex-end; }
  .g-form-linha { display:flex; flex-wrap:wrap; gap:var(--s2); }
  .g-entrada { min-width:0; height:36px; padding:0 var(--s3); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--canvas); color:var(--ink); font:14px var(--sans); }
  .g-entrada:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
  .g-form-linha .g-entrada { flex:1 1 180px; }
  .g-novo-personagem form, .g-form-conta { display:flex; flex-direction:column; gap:var(--s4); }
  .g-form-conta .g-campo-texto > .g-nota { font-size:12.5px; }
  /* As regras embaixo de cada campo da conta: apagadas, verdes ou vermelhas. */
  .g-regras { display:flex; flex-direction:column; gap:2px; margin:var(--s1) 0 0; padding:0; list-style:none; color:var(--faint); font-size:12.5px; }
  .g-regras li::before { display:inline-block; width:1.3em; content:"○"; }
  .g-regras li[data-ok="sim"] { color:var(--ok-texto); }
  .g-regras li[data-ok="sim"]::before { content:"✓"; }
  .g-regras li[data-ok="nao"] { color:var(--crit-texto); }
  .g-regras li[data-ok="nao"]::before { content:"✗"; }
  /* Sugestões: o texto, as miniaturas dos prints e a lista das já mandadas. */
  .g-campo-largo { max-width:none; }
  .g-campo-largo .g-entrada { width:100%; }
  .g-entrada.g-texto-longo { height:auto; min-height:120px; padding:var(--s2) var(--s3); line-height:1.5; resize:vertical; }
  .g-prints { display:flex; flex-direction:column; gap:var(--s2); }
  .g-prints-lista { display:flex; flex-wrap:wrap; gap:var(--s2); margin:0; padding:0; list-style:none; }
  .g-prints-lista:empty { display:none; }
  .g-prints-lista li { position:relative; }
  .g-prints-lista img { display:block; width:120px; height:90px; object-fit:cover; border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--canvas); }
  .btn.g-prints-tirar { position:absolute; top:var(--s1); right:var(--s1); width:26px; height:26px; padding:0; justify-content:center; }
  .g-sug-lista { display:flex; flex-direction:column; gap:var(--s3); margin:0; padding:0; list-style:none; }
  .g-sug { display:flex; flex-direction:column; gap:var(--s2); padding:var(--s3); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--fundo-cab); }
  .g-sug-cab { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); }
  .g-sug-texto { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
  .g-sug-resposta { margin:0; padding:var(--s2) var(--s3); border-left:3px solid var(--accent); background:color-mix(in srgb, var(--accent) 6%, transparent); white-space:pre-wrap; }
  .g-erro-form { margin:0; padding:var(--s2) var(--s3); border:1px solid color-mix(in srgb, var(--crit) 34%, transparent); border-radius:var(--r-ctl); background:color-mix(in srgb, var(--crit) 8%, transparent); color:var(--crit-texto); font-size:13.5px; }
  .g-campo-texto { display:flex; flex-direction:column; gap:var(--s1); max-width:420px; }
  .g-classes-escolha { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--s2); margin:0; padding:0; border:0; }
  .g-classes-escolha legend { margin-bottom:var(--s2); padding:0; }
  .g-classe-op { position:relative; display:flex; align-items:center; gap:var(--s2); padding:var(--s2); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--fundo-cab); font-size:13px; cursor:pointer; }
  .g-classe-op:hover { border-color:var(--accent); }
  .g-classe-op input { position:absolute; opacity:0; pointer-events:none; }
  .g-classe-op:has(input:checked) { border-color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); color:var(--ink); }
  .g-classe-op:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
  .g-classe-op img { width:32px; height:32px; border-radius:var(--r-min); }
  .g-faixa-leitura { margin-bottom:var(--s4); }

  /* Só leitura (a tela não é do personagem escolhido, ou não há personagem):
     some o que serve para marcar; o que só mostra continua. As ações também
     recusam (app.js), para o teclado não passar por baixo. */
  body[data-leitura] :is(.g-so-registro, .g-sim, .g-det-botoes, .g-est-progresso, .g-checagem > .g-acoes, .g-daev-lado .g-acoes, .g-item-rotulo input) { display:none; }
  body[data-leitura] :is(.g-no, .g-pip, .g-tarefa-dia, .g-item-rotulo) { pointer-events:none; }

  /* ---------- extração: a janela Extração de Essência do jogo ---------- */
  .g-ext-topo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
  .g-ext-prox { display:flex; flex-direction:column; gap:var(--s2); min-width:0; }
  .g-ext-prox .g-status { flex:1; align-items:flex-start; }
  .g-ext-custo { display:block; margin-top:2px; }
  .g-ext { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:var(--s4); align-items:stretch; margin:var(--s4) 0; }
  .g-ext-comuns, .g-ext-esp { min-width:0; }
  .g-ext-habs { display:flex; flex-direction:column; gap:var(--s3); margin:0; list-style:none; }
  .g-ext-hab { display:flex; flex-direction:column; gap:var(--s2); padding:var(--s3); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--fundo-cab); }
  .g-ext-hab[data-ok] { border-color:color-mix(in srgb, var(--ok) 55%, var(--rule)); }
  .g-ext-hab[data-proximo] { border-color:var(--warn); box-shadow:0 0 0 1px var(--warn); }
  .g-ext-hab-cab { display:flex; align-items:center; gap:var(--s2); }
  .g-ext-hab-cab .g-lad-rec { position:static; transform:none; }
  .g-ext-nv { margin-left:auto; color:var(--warn-texto); font-size:22px; font-weight:700; line-height:1; }
  .g-ext-nv small { color:var(--faint); font-size:13px; }
  .g-ext-hab[data-ok] .g-ext-nv { color:var(--ok-texto); }
  .g-ext-pips { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s3); }
  .g-ext-faixa { display:flex; align-items:center; gap:var(--s1); }
  .g-ext-grau { margin:0 var(--s1); color:var(--faint); font:700 9px var(--mono); letter-spacing:.04em; }
  .g-pip[data-trava]:not([data-cheia]) { border-style:dashed; opacity:.6; }
  .g-pip[data-alem]:not([data-cheia]) { border-style:dotted; opacity:.45; }
  .g-ext-hab-cab .chip { margin-left:var(--s1); }
  .g-ext-pe { margin:0; padding:0 var(--s4) var(--s4); }
  .g-ext-tabela { width:100%; border-collapse:separate; border-spacing:0 var(--s2); }
  .g-ext-tabela th, .g-ext-tabela td { position:relative; padding:var(--s2); text-align:center; vertical-align:middle; }
  .g-ext-tabela thead th { color:var(--faint); font-size:12px; font-weight:600; line-height:1.2; }
  .g-ext-tabela thead small { display:block; font:500 11px var(--mono); }
  .g-ext-tabela tbody th { text-align:left; }
  .g-ext-tabela tbody tr { background:var(--fundo-cab); }
  .g-ext-tabela tbody tr > :first-child { border-radius:var(--r-ctl) 0 0 var(--r-ctl); }
  .g-ext-tabela tbody tr > :last-child { border-radius:0 var(--r-ctl) var(--r-ctl) 0; }
  .g-ext-tabela tbody tr:not([data-foco]) { opacity:.5; }
  .g-ext-linha { display:block; margin-bottom:2px; font-size:14px; font-weight:600; }
  .g-ext-no { display:inline-flex; gap:var(--s1); padding:var(--s1); border:1px solid transparent; border-radius:var(--r-pilula); }
  .g-ext-no .g-pip { width:20px; height:20px; }
  td[data-proximo] .g-ext-no { border-color:var(--warn); box-shadow:0 0 0 2px color-mix(in srgb, var(--warn) 30%, transparent); }
  .g-ext-no-nv { display:block; margin-top:2px; color:var(--faint); font-size:10.5px; font-weight:700; }
  td[data-max] .g-ext-no-nv { color:var(--ok-texto); }
  .g-ext-fora { color:var(--faint); }
  .g-ext-tabela td .g-lad-rec { top:-2px; }

  /* ---------- páginas de texto (conteudo/paginas) ---------- */
  .g-texto { display:flex; flex-direction:column; gap:var(--s3); max-width:1100px; font-size:14.5px; line-height:1.6; }
  .g-texto > p, .g-texto li { max-width:78ch; }
  .g-texto h3 { margin-top:var(--s3); font-size:16px; font-weight:600; }
  .g-texto h4 { margin:0; color:var(--muted); font-size:13px; }
  .g-texto ul:not([class]), .g-texto ol:not([class]), .g-texto ol.steps { margin:0; padding-left:var(--s5); }
  .g-texto ol.steps li { margin:var(--s2) 0; }
  .g-texto .note { color:var(--faint); font-size:13px; }
  .g-texto .panel { padding:var(--s4); border:1px solid var(--rule); border-radius:var(--r-painel); background:var(--surface); }
  .g-texto .callout { border-color:color-mix(in srgb, var(--warn) 45%, var(--rule)); box-shadow:inset 3px 0 0 var(--warn); }
  .g-texto .panel > h3:first-child { margin-top:0; }
  .g-texto .grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s4); }
  .g-texto code { padding:0 var(--s1); border-radius:var(--r-min); background:var(--raised); }
  .g-texto a { color:var(--accent-texto); font-weight:600; }
  .g-realce { border-radius:var(--r-min); background:color-mix(in srgb, var(--warn) 40%, transparent); color:var(--ink); }

  /* ---------- início e progresso ---------- */
  .g-grade-classes { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--s3); }
  .g-classe { display:flex; align-items:center; gap:var(--s3); padding:var(--s3); border:1px solid var(--rule); border-radius:var(--r-painel); background:var(--surface); }
  .g-classe:hover { border-color:var(--accent); }
  .g-classe img { width:46px; height:46px; flex:none; border-radius:var(--r-ctl); }
  .g-classe-txt { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
  .g-classe-txt small { color:var(--faint); font-size:12.5px; }
  .g-classe-pct { display:flex; align-items:center; gap:var(--s2); color:var(--ok-texto); font-size:12px; }
  .g-grade-paginas { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--s2); }
  .g-pagina { padding:var(--s3) var(--s4); border:1px solid var(--rule); border-radius:var(--r-ctl); background:var(--surface); font-weight:600; }
  .g-pagina:hover { border-color:var(--accent); }
  .g-continuar .fato { align-items:center; }

  /* ---------- busca, diálogo e avisos ---------- */
  .g-busca { width:min(640px, 94vw); margin-top:10vh; }
  .g-busca ul { max-height:min(56vh, 460px); }
  .g-busca-txt { display:flex; flex-direction:column; min-width:0; }
  .g-busca-txt .g-nota { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
  .g-busca-vazio { color:var(--faint); cursor:default; }
  .g-busca-pe { display:flex; align-items:center; gap:var(--s1); padding:var(--s2) var(--s4); border-top:1px solid var(--rule); color:var(--faint); font-size:12px; }
  .g-dialogo { width:min(520px, 92vw); padding:var(--s5); border:1px solid var(--rule); border-radius:var(--r-painel); background:var(--surface); box-shadow:var(--sombra); color:var(--ink); }
  .g-dialogo::backdrop { background:color-mix(in srgb, var(--canvas) 70%, transparent); }
  .g-dialogo h2 { margin-bottom:var(--s3); font-size:17px; font-weight:600; }
  .g-dialogo-acoes { justify-content:flex-end; margin-top:var(--s4); }
  .g-novidade { position:fixed; right:var(--s4); bottom:var(--s4); z-index:40; display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); border:1px solid var(--accent); border-radius:var(--r-painel); background:var(--raised); box-shadow:var(--sombra); }
  .g-acoes-fixas { display:none; }

  /* ---------- celular ---------- */
  @media (max-width: 1100px) {
    .g-topo { padding:0 var(--s4); }
  }
  @media (max-width: 1100px) {
    .g-skills, .g-daev, .g-rotina-grade, .g-ext, .g-tit-grade, .g-prog-grade { grid-template-columns:1fr; }
    .g-barra-info { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .g-combate { grid-column:1 / -1; }
    .g-daev-lado { position:static; }
    .g-daev-lado { order:-1; }
    .g-daev-lado .g-tabs { flex-direction:row; flex-wrap:wrap; }
    .g-daev-lado .g-tab-btn { width:auto; flex:1 1 140px; }
  }
  @media (max-width: 760px) {
    .g-acoes-fixas:not([hidden]) { position:fixed; right:0; bottom:0; left:0; z-index:20; display:flex; gap:var(--s2); padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom)); border-top:1px solid var(--rule); background:var(--fundo-cab); }
    .g-acoes-fixas .btn { justify-content:center; height:48px; font-size:14px; }
    .g-acoes-fixas .btn:first-child { flex:none; width:52px; }
    .g-acoes-fixas .btn:last-child { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    body[data-com-acoes] .g-novidade { bottom:calc(var(--s6) * 2 + var(--s4)); }
    .g-acoes { display:grid; grid-template-columns:1fr 1fr; }
    .g-acoes .btn { justify-content:center; min-height:40px; }
    .g-tarefa-sem { grid-template-columns:1fr; }
    .g-tarefa-ctl { flex-direction:row; align-items:center; justify-content:space-between; }
    .g-pips { justify-content:flex-start; max-width:none; }
    .g-barra-info { grid-template-columns:1fr; }
    .g-ext-topo { grid-template-columns:1fr; }
    .g-ext-no .g-pip { width:18px; height:18px; }
    .g-ext-tabela th, .g-ext-tabela td { padding:var(--s1); }
    .g-ext-tabela thead th { font-size:11px; overflow-wrap:anywhere; hyphens:auto; }
    .g-ext-tabela tbody th .chip { white-space:normal; }
    .g-ext-linha { font-size:13px; }
    .g-tabuleiro { --g-celula:44px; }
    .g-pontos { justify-content:flex-start; margin-left:0; }
    .g-pontos small { text-align:left; }
    .g-busca { margin-top:var(--s3); }
  }
  @media (max-width: 640px) {
    .g-topo { padding:0 var(--s3); }
    .g-abas { margin:0 calc(var(--s3) * -1); padding:0 var(--s3); }
    .g-cab-ico { width:44px; height:44px; }
    .g-novidade { right:var(--s3); left:var(--s3); }
  }
  @media (pointer: coarse) {
    .g-pip { width:30px; height:30px; }
    .g-ext-no .g-pip { width:24px; height:24px; }
    .g-passo-btn { min-width:44px; height:44px; }
    .g-item-rotulo { min-height:48px; }
    .g-aba { padding:var(--s3) var(--s4); }
  }
  @media (prefers-reduced-motion: reduce) {
    * { scroll-behavior:auto !important; transition:none !important; }
  }
}