/*
 * @sistema      Wiki pública do ESVA — folha de estilo do MOLDE
 * @entrega      CLAUDE DESIGN · 07/08/2026
 * @fonte        ESVA-Brandbook-Design-System-v2.0 (15/07/2026) + CSS em produção em playesva.com
 * @serve        2 páginas desenhadas → ~1.061 por idioma → ~7.427 no total
 * @nunca        não contém conteúdo de wiki, número de jogo nem redação
 *
 * ⚠️ ESTE ARQUIVO É A FONTE ÚNICA. As folhas HTML embutem uma CÓPIA para abrir de qualquer
 *    lugar (inclusive de dentro do zip). Ao editar, edite ESTE — as folhas são o registro
 *    do que foi aprovado.
 *
 * 🔑 REGRA DO MOLDE: todo elemento que um script preenche tem `data-slot="nome"`.
 *    O que não tem data-slot é FIXO e não muda de página para página.
 *    Um teste de uma linha confere: nenhum data-slot vazio no HTML publicado.
 */

/* ══ A · TOKENS ═══════════════════════════════════════════════════════════
   Medidos no CSS em produção em playesva.com e conferidos contra o brandbook §04.
   ✅ Não divergem — os nove valores são idênticos nos dois. */
:root {
  --ink:#0B1114;
  --panel:#121B1F;
  --line:#2A373C;
  --slate:#77858B;
  --muted:#A6B0B3;
  --paper:#F2F0E8;
  --verdigris:#35C7A4;
  --amber:#E58A2A;
  --action-hover:#5AD6B8;

  /* derivados, e cada um tem motivo declarado */
  --panel-2:#0F171B;                      /* fundo de zona, entre ink e panel */
  --verdigris-fraco:rgb(53 199 164 / .12);
  --amber-fraco:rgb(229 138 42 / .12);

  /* brandbook §06 — base 4 px */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px; --e9:96px;
  --raio:3px;                             /* "3 px padrão; sem pílulas decorativas" */
  --container:1180px;
  --sans:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  /* movimento — brandbook §06 */
  --fast:150ms; --base:250ms; --reveal:620ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --fast:1ms; --base:1ms; --reveal:1ms; }
  * { animation:none !important; }
}

/* ══ B · BASE ═════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font:400 16px/1.65 var(--sans);         /* brandbook: body 16 / 1,65 */
  text-wrap:pretty;
}
a { color:var(--verdigris); text-decoration:none; }
a:hover { color:var(--action-hover); text-decoration:underline; text-underline-offset:3px; }
/* brandbook §06: "Focus visible: 3 px Âmbar com offset; nunca remover outline sem substituto" */
:focus-visible { outline:3px solid var(--amber); outline-offset:2px; border-radius:1px; }
img { max-width:100%; display:block; }
hr { height:1px; margin:var(--e5) 0; background:var(--line); border:0; }

.wrap { width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; }
@media (max-width:720px) { .wrap { padding:0 14px; } }

.mono { font-family:var(--mono); font-weight:500; }
/* brandbook §05: "dados usam tracking positivo e caixa alta" */
.dado { font-family:var(--mono); font-weight:500; font-size:12px; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); }
.num  { font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; }

/* ── Escala tipográfica.
   ⚠️ DESVIO DECLARADO do brandbook §05, e é o único desta entrega.
   O brandbook manda h1 em clamp(52–96)/0,95 — escala de HERO e campanha. Numa página de wiki
   um título de 96 px come 140 px da primeira tela, e o gabarito do dono exige que o bloco
   "O QUE É" caiba acima da dobra JUNTO com o título. Medido em 1440×900: com h1 a 96 px o
   bloco 1 começa a 612 px e não cabe; a 52 px começa a 468 px e cabe.
   🔑 O brandbook não está errado sobre o tamanho — está falando de outra página.
      Motivo idêntico ao do título de janela 16/22 na R8. */
h1 { margin:0; font-size:clamp(34px, 4.4vw, 52px); line-height:1.04; font-weight:700; letter-spacing:-.02em; }
h2 { margin:0; font-size:clamp(24px, 2.6vw, 32px); line-height:1.12; font-weight:700; letter-spacing:-.01em; }
h3 { margin:0; font-size:20px; line-height:1.2; font-weight:700; }
h4 { margin:0; font-size:16px; line-height:1.35; font-weight:700; }
p  { margin:0; }
.lead { font-size:19px; line-height:1.6; color:var(--muted); }   /* brandbook: body-lg 19/1,65 */
.sec  { font-size:15px; line-height:1.6; color:var(--muted); }
.mini { font-size:13px; line-height:1.5; color:var(--slate); }

/* ══ C · CABEÇALHO DO SITE ════════════════════════════════════════════════
   🔑 Igual ao de playesva.com de propósito. O dono pediu que a wiki pareça a MESMA COISA
      que o site; se ela parecer produto de terceiro, falhou. */
.topo {
  position:sticky; top:0; z-index:50;
  background:rgb(11 17 20 / .92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topo__in { display:flex; align-items:center; gap:var(--e5); height:64px; }
.marca { display:flex; align-items:center; gap:var(--e2); font-weight:700; letter-spacing:.14em; font-size:15px; color:var(--paper); }
.marca:hover { text-decoration:none; color:var(--paper); }
.marca__q { display:grid; grid-template-columns:repeat(2,5px); grid-template-rows:repeat(2,5px); gap:2px; }
.marca__q i { background:var(--paper); }
.marca__q i:last-child { background:var(--verdigris); }
.marca small { font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.1em; color:var(--slate); }
.nav { display:flex; align-items:center; gap:var(--e4); margin-left:auto; }
.nav a { font-size:14px; color:var(--muted); }
.nav a:hover { color:var(--paper); text-decoration:none; }
.nav a[aria-current="page"] { color:var(--paper); box-shadow:0 2px 0 var(--verdigris); }
@media (max-width:720px) { .nav { display:none; } }

/* seletor de idioma — parte do molde, não enfeite: 7 línguas */
.idioma { display:flex; align-items:center; gap:var(--e1); }
.idioma select {
  height:32px; padding:0 var(--e2);
  background:var(--panel); color:var(--paper);
  border:1px solid var(--line); border-radius:var(--raio);
  font:500 12px/1 var(--mono); letter-spacing:.06em; cursor:pointer;
}

/* ══ D · MIGALHA DE PÃO ═══════════════════════════════════════════════════
   "navegação que sempre diz onde você está" — o método da referência do dono. */
.migalha { display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2); padding:var(--e5) 0 0; font-size:13px; color:var(--slate); }
.migalha a { color:var(--slate); }
.migalha a:hover { color:var(--muted); }
.migalha i { color:var(--line); font-style:normal; }
.migalha b { color:var(--muted); font-weight:400; }

/* ══ E · BUSCA — primeira classe ══════════════════════════════════════════
   🔑 Com 1.061 páginas, a busca É a navegação. Ela não é um ícone no canto: é o primeiro
      elemento interativo da home, largura inteira. E resolve sozinha o terceiro visitante
      (o veterano que quer um stat) — que assim custa zero espaço vertical aos outros dois. */
.busca { display:flex; align-items:center; gap:var(--e3); min-height:var(--e7); padding:0 var(--e4); background:var(--panel); border:1px solid var(--line); border-radius:var(--raio); }
.busca:focus-within { border-color:var(--verdigris); }
.busca__lupa { width:18px; height:18px; flex:none; border:2px solid var(--slate); border-radius:50%; position:relative; }
.busca__lupa::after { content:""; position:absolute; right:-5px; bottom:-3px; width:7px; height:2px; background:var(--slate); transform:rotate(45deg); }
.busca input { flex:1; min-width:0; height:var(--e7); background:none; border:0; color:var(--paper); font:400 17px/1 var(--sans); }
.busca input::placeholder { color:var(--slate); }
.busca input:focus { outline:none; }
.busca kbd { flex:none; padding:3px 7px; background:var(--ink); border:1px solid var(--line); border-radius:var(--raio); font:500 11px/1 var(--mono); color:var(--slate); }
.busca__dica { display:flex; flex-wrap:wrap; gap:var(--e2); padding-top:var(--e2); }
.busca__dica a { padding:3px 9px; background:var(--panel); border:1px solid var(--line); border-radius:var(--raio); font:500 12px/1.6 var(--mono); color:var(--muted); white-space:nowrap; }
.busca__dica a:hover { border-color:var(--verdigris); color:var(--paper); text-decoration:none; }

/* ══ F · ZONA ═════════════════════════════════════════════════════════════
   As três faixas da home. Fundo alternado, porque as três respondem a pessoas diferentes
   e a troca de fundo é o que diz "outra pergunta começa aqui". */
.zona { padding:var(--e9) 0; border-top:1px solid var(--line); }
.zona--panel { background:var(--panel-2); }
.zona__cab { display:flex; flex-direction:column; gap:var(--e3); max-width:760px; padding-bottom:var(--e6); }
.zona__olho { display:flex; align-items:center; gap:var(--e2); }
.zona__olho b { font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--verdigris); }
.zona__olho i { flex:1; height:1px; background:var(--line); }
@media (max-width:720px) { .zona { padding:var(--e7) 0; } }

/* ══ G · TRILHA — o jogador novo ══════════════════════════════════════════
   🔑 É uma SEQUÊNCIA, e tem de parecer uma. Cinco cartões numa grade seriam cinco opções;
      cinco passos ligados por uma linha são um caminho. O público declarado pelo dono é o
      jogador novo, e jogador novo não escolhe — ele segue. */
.trilha { display:grid; grid-template-columns:repeat(5, 1fr); gap:0; }
.trilha__p { position:relative; display:flex; flex-direction:column; gap:var(--e2); padding:var(--e4) var(--e4) var(--e4) 0; border-top:2px solid var(--line); }
.trilha__p:hover { border-top-color:var(--verdigris); }
.trilha__p b { position:absolute; top:-9px; left:0; display:grid; place-items:center; width:16px; height:16px; background:var(--ink); font:500 11px/1 var(--mono); color:var(--slate); }
.trilha__p:hover b { color:var(--verdigris); }
.zona--panel .trilha__p b { background:var(--panel-2); }
.trilha__p strong { padding-top:var(--e2); font-size:16px; font-weight:700; color:var(--paper); }
.trilha__p span { font-size:14px; line-height:1.5; color:var(--muted); }
.trilha__p--chave { border-top-color:var(--verdigris); }
.trilha__p--chave b { color:var(--verdigris); }
@media (max-width:1000px) { .trilha { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px)  { .trilha { grid-template-columns:1fr; } }

/* ══ H · CARTÃO DE SEÇÃO — quem já joga ══════════════════════════════════
   Brandbook §06: "Card de sistema: borda fina, superfície Panel, título e evidência antes
   da decoração."
   🔑 A "evidência" aqui é a CONTAGEM HONESTA: quantas páginas se leem e quantas se consultam.
      Um cartão que diz "12 páginas + catálogo de 600" conta a verdade sobre proporção; um
      que diz "AS CRIATURAS" e nada mais afoga o jogador novo em 600 espécies. */
.secoes { display:grid; grid-template-columns:repeat(auto-fill, minmax(272px, 1fr)); gap:var(--e3); }
.card {
  display:flex; flex-direction:column; gap:var(--e2);
  padding:var(--e4); background:var(--panel);
  border:1px solid var(--line); border-radius:var(--raio);
  transition:border-color var(--fast);
}
.card:hover { border-color:var(--verdigris); text-decoration:none; }
.card__n { font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.1em; color:var(--slate); }
.card h3 { font-size:18px; color:var(--paper); }
.card p { font-size:14px; line-height:1.5; color:var(--muted); }
.card__pe { display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2); margin-top:auto; padding-top:var(--e3); }
/* contagem de páginas que se LEEM */
.qtd { font-family:var(--mono); font-weight:500; font-size:12px; color:var(--muted); }
/* contagem de páginas de CATÁLOGO — visualmente outra coisa, porque é outra coisa */
.qtd--cat { display:inline-flex; align-items:center; gap:5px; padding:2px 7px; background:var(--ink); border:1px solid var(--line); border-radius:var(--raio); color:var(--slate); }
.qtd--cat::before { content:""; width:6px; height:6px; background:var(--slate); }

/* ══ I · CATÁLOGO — as tabelas ═══════════════════════════════════════════
   ⛔ Catálogo NÃO é cartão. 600 espécies não se navega, se consulta — então a zona é densa,
      em lista, mono, e mora colada à busca conceitualmente (e longe da trilha). */
.cats { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:0 var(--e6); }
.cat { display:flex; align-items:baseline; gap:var(--e3); padding:var(--e3) 0; border-bottom:1px solid var(--line); }
.cat:hover { text-decoration:none; }
.cat:hover .cat__n { color:var(--paper); }
.cat__n { flex:1; font-size:15px; color:var(--muted); }
.cat__q { font-family:var(--mono); font-weight:500; font-size:13px; font-variant-numeric:tabular-nums; color:var(--verdigris); }
.cat__t { font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); }

/* ══ J · SUMÁRIO DA PÁGINA ═══════════════════════════════════════════════
   🔑 O jogador lê a wiki COM O JOGO ABERTO em outra aba. Isso favorece página escaneável e
      âncora profunda — não ensaio. O sumário é grudado no desktop e some no telefone. */
.pg { display:grid; grid-template-columns:1fr 232px; gap:var(--e8); align-items:start; padding:var(--e6) 0 var(--e9); }
@media (max-width:1000px) { .pg { grid-template-columns:1fr; gap:var(--e5); } }
.toc { position:sticky; top:88px; display:flex; flex-direction:column; gap:var(--e2); }
.toc__t { font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); padding-bottom:var(--e2); border-bottom:1px solid var(--line); }
.toc a { padding:5px 0 5px var(--e3); border-left:2px solid var(--line); font-size:14px; color:var(--muted); }
.toc a:hover { border-left-color:var(--verdigris); color:var(--paper); text-decoration:none; }
.toc a[aria-current="true"] { border-left-color:var(--verdigris); color:var(--paper); }
@media (max-width:1000px) { .toc { position:static; order:-1; } }

/* ══ K · SELO DE FONTE ════════════════════════════════════════════════════
   🔑 Duas exigências viram um componente. (1) O relatório de estrutura: "toda página ESCRITA
      declara a § do GDD que a sustenta — sem isso ninguém sabe o que revisar quando a §
      mudar." (2) O brandbook, tom de voz: "Publicar o número e a versão da regra."
      Não é rodapé jurídico: é o mesmo gesto do Caderno de Campo. */
.fonte { display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2) var(--e4); padding:var(--e3) var(--e4); background:var(--panel); border:1px solid var(--line); border-left:2px solid var(--verdigris); border-radius:0 var(--raio) var(--raio) 0; }
.fonte span { display:flex; align-items:baseline; gap:6px; font-family:var(--mono); font-weight:500; font-size:12px; color:var(--slate); }
.fonte b { color:var(--muted); font-weight:500; }
.fonte--gerada { border-left-color:var(--amber); }

/* ══ L · OS TRÊS BLOCOS DO GABARITO ══════════════════════════════════════
   Ordem do dono: 1 O QUE É · 2 COMO EU FAÇO · 3 O QUE EU GANHO.
   O número do bloco é fixo e visível — é o que faz "página que não tem os três volta"
   ser conferível de relance, por qualquer pessoa, sem ler o texto. */
.bloco { padding:var(--e7) 0 0; scroll-margin-top:88px; }
.bloco__cab { display:flex; align-items:baseline; gap:var(--e3); padding-bottom:var(--e4); }
.bloco__n { flex:none; display:grid; place-items:center; width:28px; height:28px; background:var(--verdigris); border-radius:var(--raio); font:700 15px/1 var(--mono); color:var(--ink); }
.bloco__cab h2 { flex:1; }

/* ══ M · BLOCO 2 — o passo a passo. É aqui que o design decide se a wiki funciona ══════
   🔑 O bloco 2 mistura TRÊS naturezas: narrativa (o passo), condição (pré-requisito, gate)
      e cadência (1×/dia). Se as três virarem o mesmo parágrafo cinza, o jogador não acha
      nenhuma. A solução tem três formas distintas, e nenhuma é prosa:
        condição → .gate, painel ANTES dos passos
        narrativa → .passo, lista numerada
        cadência → .cadencia, selo mono na linha do passo a que pertence */

/* M.1 · GATE — "você precisa ter X". Vem ANTES do primeiro passo, sempre.
   ⛔ Nunca no fim da página: quem não passa no gate tem de descobrir antes de ler o resto. */
.gate { display:flex; flex-direction:column; gap:var(--e3); padding:var(--e4); background:var(--panel); border:1px solid var(--line); border-radius:var(--raio); }
.gate__t { display:flex; align-items:center; gap:var(--e2); font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.gate__t::before { content:""; width:10px; height:10px; flex:none; border:2px solid var(--verdigris); }
.gate__l { display:grid; grid-template-columns:1fr auto; gap:var(--e3); align-items:baseline; padding:var(--e2) 0; border-top:1px solid var(--line); font-size:15px; }
.gate__l:first-of-type { border-top:0; padding-top:0; }
.gate__l b { font-weight:400; color:var(--paper); }
.gate__l i { font-style:normal; font-size:13px; color:var(--slate); }
.gate__v { font-family:var(--mono); font-weight:500; font-size:13px; color:var(--verdigris); white-space:nowrap; }
.gate__v--nao { color:var(--amber); }

/* M.2 · PASSO NUMERADO */
.passos { counter-reset:p; display:flex; flex-direction:column; gap:0; }
.passo { counter-increment:p; display:grid; grid-template-columns:32px 1fr; gap:var(--e3); padding:var(--e4) 0; border-top:1px solid var(--line); }
.passo:first-child { border-top:0; }
.passo::before { content:counter(p); display:grid; place-items:center; width:26px; height:26px; background:var(--ink); border:1px solid var(--verdigris); border-radius:var(--raio); font:500 13px/1 var(--mono); color:var(--verdigris); }
.zona--panel .passo::before { background:var(--panel-2); }
.passo__c { display:flex; flex-direction:column; gap:var(--e2); min-width:0; }
.passo__t { font-size:17px; line-height:1.4; color:var(--paper); }
.passo__t b { font-weight:700; }
.passo__d { font-size:14px; line-height:1.55; color:var(--muted); }
.passo__m { display:flex; flex-wrap:wrap; gap:var(--e2); }

/* M.3 · CADÊNCIA e TELA — os dois selos que o aceite mecânico exige.
   🔑 "Se o bloco 2 não contém pelo menos um NOME DE TELA, um PRÉ-REQUISITO e uma
      FREQUÊNCIA, ele não foi escrito — foi preenchido." Os três têm forma própria, então
      a ausência é VISÍVEL: o revisor não precisa ler para ver que faltou. */
.selo { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border:1px solid var(--line); border-radius:var(--raio); font:500 12px/1.5 var(--mono); letter-spacing:.04em; white-space:nowrap; }
.selo--cad  { background:var(--amber-fraco); border-color:rgb(229 138 42 / .45); color:var(--amber); }
.selo--tela { background:var(--ink); color:var(--muted); }
.selo--tela::before { content:""; width:9px; height:9px; flex:none; border:1px solid var(--slate); }
.selo--num  { background:var(--verdigris-fraco); border-color:rgb(53 199 164 / .4); color:var(--verdigris); }

/* ══ N · BLOCO 3 — ganho E custo, no mesmo bloco ═════════════════════════
   🔑 A minha resposta ao §4.1, e o raciocínio está no LEIA-ME: a quarta natureza NÃO é uma
      quarta pergunta — é a outra metade da terceira. "Ganho sem custo declarado é
      propaganda, não wiki" (palavras do próprio relatório). Então o bloco 3 é um balanço de
      duas colunas, e a coluna do custo é obrigatória por CONSTRUÇÃO: vazia, ela aparece. */
.balanco { display:grid; grid-template-columns:1fr 1fr; gap:var(--e4); align-items:start; }
@media (max-width:820px) { .balanco { grid-template-columns:1fr; } }
.col__t { display:flex; align-items:center; gap:var(--e2); padding-bottom:var(--e3); font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.col__t--ganho { color:var(--verdigris); }
.col__t--custo { color:var(--amber); }
.col__t i { flex:1; height:1px; background:var(--line); }

/* N.1 · GANHO — brandbook: recompensa é visual, não parágrafo */
.ganho { display:flex; gap:var(--e3); padding:var(--e4); background:var(--panel); border:1px solid var(--line); border-left:2px solid var(--verdigris); border-radius:0 var(--raio) var(--raio) 0; }
.ganho__art { flex:none; display:grid; place-items:center; width:56px; height:56px; background:var(--ink); border:1px solid var(--line); border-radius:var(--raio); }
.ganho__c { display:flex; flex-direction:column; gap:var(--e1); min-width:0; }
.ganho__n { font-size:17px; font-weight:700; color:var(--paper); }
.ganho__d { font-size:14px; line-height:1.55; color:var(--muted); }
.ganho__cond { font-family:var(--mono); font-weight:500; font-size:12px; color:var(--slate); }

/* N.2 · TRAVA — o componente de restrição/custo.
   Faixa âmbar, como o brandbook manda para alerta ("não usar vermelho genérico salvo erro
   destrutivo real"). E cada trava diz o que NÃO acontece, em uma linha, sem prosa. */
.travas { display:flex; flex-direction:column; gap:0; padding:var(--e4); background:var(--panel); border:1px solid var(--line); border-left:2px solid var(--amber); border-radius:0 var(--raio) var(--raio) 0; }
.trava { display:grid; grid-template-columns:auto 1fr; gap:var(--e3); padding:var(--e3) 0; border-top:1px solid var(--line); }
.trava:first-child { border-top:0; padding-top:0; }
.trava:last-child { padding-bottom:0; }
.trava__x { flex:none; width:14px; height:14px; margin-top:4px; position:relative; }
.trava__x::before, .trava__x::after { content:""; position:absolute; top:6px; left:0; width:14px; height:2px; background:var(--amber); }
.trava__x::before { transform:rotate(45deg); }
.trava__x::after  { transform:rotate(-45deg); }
.trava__c { display:flex; flex-direction:column; gap:3px; min-width:0; }
.trava__t { font-size:15px; line-height:1.45; color:var(--paper); }
.trava__d { font-size:13px; line-height:1.5; color:var(--slate); }

/* ══ O · SEM DADO — o estado honesto ═════════════════════════════════════
   ⛔ "não pode parecer erro, não pode parecer promessa."
   🔑 Então ele não usa vermelho (erro) nem verdigris (ação, promessa): usa a cor de texto
      apagada e uma hachura, que lê como "folha em branco", não como "falhou". E diz TRÊS
      coisas: o que falta · o que existe · de onde o dado sai quando existir.
      Sem a terceira, "em desenvolvimento" é promessa vaga; com ela, é estado verificável. */
.sem-dado {
  display:flex; flex-direction:column; gap:var(--e2);
  padding:var(--e4);
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgb(119 133 139 / .05) 7px 14px),
    var(--panel);
  border:1px dashed var(--line); border-radius:var(--raio);
}
.sem-dado__t { display:flex; align-items:center; gap:var(--e2); font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }
.sem-dado__t::before { content:""; width:10px; height:10px; flex:none; border:1px dashed var(--slate); }
.sem-dado p { font-size:14px; line-height:1.55; color:var(--muted); }
.sem-dado__fonte { font-family:var(--mono); font-weight:500; font-size:12px; color:var(--slate); }

/* ══ P · AVISO ════════════════════════════════════════════════════════════
   Brandbook §06: "Alerta de Brecha: faixa âmbar + texto." */
.aviso { display:grid; grid-template-columns:auto 1fr; gap:var(--e3); padding:var(--e3) var(--e4); background:var(--amber-fraco); border-left:2px solid var(--amber); border-radius:0 var(--raio) var(--raio) 0; }
.aviso__i { flex:none; display:grid; place-items:center; width:18px; height:18px; margin-top:2px; border:2px solid var(--amber); border-radius:50%; font:700 12px/1 var(--sans); color:var(--amber); }
.aviso p { font-size:14px; line-height:1.55; color:var(--paper); }
.aviso--neutro { background:var(--panel); border-left-color:var(--verdigris); }
.aviso--neutro .aviso__i { border-color:var(--verdigris); color:var(--verdigris); }

/* ══ Q · TABELA ═══════════════════════════════════════════════════════════
   "tabela onde é tabela, prosa onde é prosa" — o método da referência.
   Brandbook §05: "Números, probabilidades e versões devem alinhar tabularmente." */
.tbl-rol { width:100%; overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; font-size:15px; }
.tbl caption { padding-bottom:var(--e2); text-align:left; font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); }
.tbl th { padding:var(--e2) var(--e3); text-align:left; font:500 12px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate); background:var(--panel); border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td { padding:var(--e3); border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top; }
.tbl tbody tr:hover td { background:var(--panel); }
.tbl .n { text-align:right; font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; color:var(--paper); white-space:nowrap; }
.tbl td b { color:var(--paper); font-weight:400; }
.tbl .vazio { color:var(--slate); font-family:var(--mono); font-weight:500; font-size:13px; }

/* ══ R · BOTÃO — brandbook §06 ════════════════════════════════════════════
   "Botão primário: Verdigris + Ink, altura mínima 48 px, verbo específico." */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--e2); min-height:var(--e7); padding:0 var(--e5); border-radius:var(--raio); font:700 15px/1 var(--sans); cursor:pointer; transition:background var(--fast), border-color var(--fast); }
.btn:hover { text-decoration:none; }
.btn--pri { background:var(--verdigris); color:var(--ink); border:1px solid var(--verdigris); }
.btn--pri:hover { background:var(--action-hover); border-color:var(--action-hover); color:var(--ink); }
.btn--sec { background:transparent; color:var(--paper); border:1px solid var(--line); font-weight:400; }
.btn--sec:hover { border-color:var(--verdigris); color:var(--paper); }

/* ══ S · SLOT DE ARTE ═════════════════════════════════════════════════════
   A wiki vai carregar sprite de criatura em VOLUME. O molde declara a caixa; ⛔ eu não
   invento arte. Arte indexada HD-2D pede `pixelated` e tamanho múltiplo inteiro da grade. */
.sprite { image-rendering:pixelated; }
.sprite-slot { display:grid; place-items:center; gap:var(--e1); background:repeating-linear-gradient(135deg, var(--panel) 0 8px, var(--ink) 8px 16px); border:1px dashed var(--line); border-radius:var(--raio); text-align:center; }
.sprite-slot span { font-family:var(--mono); font-weight:500; font-size:10px; line-height:1.4; letter-spacing:.06em; color:var(--slate); }

/* ══ T · RODAPÉ ═══════════════════════════════════════════════════════════ */
.pe { padding:var(--e7) 0; border-top:1px solid var(--line); background:var(--panel-2); }
.pe__in { display:flex; flex-wrap:wrap; gap:var(--e5); justify-content:space-between; align-items:flex-start; }
.pe__c { display:flex; flex-direction:column; gap:var(--e2); }
.pe__c b { font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); }
.pe__c a, .pe__c span { font-size:14px; color:var(--muted); }
.pe__langs { display:flex; flex-wrap:wrap; gap:var(--e2); }
.pe__langs a { padding:2px 8px; border:1px solid var(--line); border-radius:var(--raio); font:500 12px/1.6 var(--mono); }

/* ══ U · SETE IDIOMAS ═════════════════════════════════════════════════════
   🔑 ko/ja/zh mudam a métrica do texto e o molde tem de aguentar sem quebrar:
      • CJK NÃO quebra em espaço → `word-break:keep-all` + `line-break:strict`, senão o
        japonês corta no meio da palavra e parece bug de fonte;
      • a altura de linha SOBE, não desce — glifo de largura cheia precisa de mais respiro;
      • nenhum cartão, selo ou passo tem ALTURA FIXA em lugar nenhum desta folha, justamente
        para o texto poder crescer. É a razão de tudo aqui usar min-height, nunca height. */
:lang(ko), :lang(ja), :lang(zh) { line-height:1.8; word-break:keep-all; line-break:strict; overflow-wrap:normal; }
:lang(ko) .dado, :lang(ja) .dado, :lang(zh) .dado { letter-spacing:.04em; }
:lang(ru) .selo, :lang(ru) .qtd--cat { white-space:normal; }   /* russo estoura selo curto */

/* ══ Z · O QUE A CSP DO DEPLOY DERRUBA ════════════════════════════════════
   Medido dentro de `_deploy-0108-v2` (08/08). O worker serve o site com
   `style-src 'self'`, `script-src 'self'` e `font-src 'self'`. Isso derruba
   TRÊS coisas que a wiki fazia e que nenhum teste local acusaria:
     · 64.197 atributos style= inline  → viram as classes abaixo
     · 7.525 onchange= inline          → o seletor vira uma fila de links
     ·  2 folhas do Google Fonts       → passam a ser as fontes locais do site
   O site já entrega os três .ttf em /assets/fonts/. A wiki usa os mesmos. */
@font-face{font-family:PlexWiki;src:url('/assets/fonts/ibm-plex-sans-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:PlexWiki;src:url('/assets/fonts/ibm-plex-sans-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:JetWiki;src:url('/assets/fonts/jetbrains-mono-500.ttf') format('truetype');font-weight:500;font-display:swap}
:root{ --sans:PlexWiki, system-ui, sans-serif; --mono:JetWiki, ui-monospace, monospace; }

/* as dez declarações que eram inline, uma classe cada */
.col4      { display:flex; flex-direction:column; gap:var(--e4); }
.col4-720  { display:flex; flex-direction:column; gap:var(--e4); max-width:720px; }
.col5-760  { display:flex; flex-direction:column; gap:var(--e5); max-width:760px; }
.toc__pe   { padding-top:var(--e4); margin-top:var(--e2); border-top:1px solid var(--line);
             display:flex; flex-direction:column; gap:var(--e2); }
.pe__c--larga { max-width:320px; }
.txt17     { font-size:17px; line-height:1.6; }
.txt20     { font-size:20px; }
.claro     { color:var(--paper); font-weight:400; }
.lista-limpa { list-style:none; margin:0; padding:0; }
.rotulo-idioma { letter-spacing:.1em; }

/* seletor de idioma sem javascript — mesmo desenho do .lang-switch do site */
.trocaidioma { display:flex; align-items:center; border:1px solid var(--line); }
.trocaidioma a { padding:5px 8px; text-decoration:none; color:var(--slate);
                 font-family:var(--mono); font-weight:500; font-size:10px; }
.trocaidioma a:hover { color:var(--paper); }
.trocaidioma a[aria-current="true"] { background:var(--verdigris); color:var(--ink); }
@media (max-width:720px){ .trocaidioma { flex-wrap:wrap; } }