/* GERADO por tools/site-paleta.js a partir de src/client/direcao.js.
   Não edite à mão: a próxima build apaga. Claro = ficha Diorama,
   escuro = ficha Penumbra. */
:root {
  --ground: #f5ebd9;
  --surface: #fff9e5;
  --surface-2: #e7decf;
  --sunk: #fdf2df;
  --rule: #d4cdc1;
  --ink: #0f1012;
  --ink-muted: #5c5e64;
  --ember: #88621e;
  --cold: #294d9d;
  --veu: rgba(0,0,0,0.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ground: #0b0c0e;
    --surface: #15171b;
    --surface-2: #21232a;
    --sunk: #060708;
    --rule: #2e3039;
    --ink: #fff5d9;
    --ink-muted: #aca39f;
    --ember: #ffb236;
    --cold: #4a89ff;
    --veu: rgba(0,0,0,0.66);
  }
}
:root[data-tema="escuro"] {
  --ground: #0b0c0e;
  --surface: #15171b;
  --surface-2: #21232a;
  --sunk: #060708;
  --rule: #2e3039;
  --ink: #fff5d9;
  --ink-muted: #aca39f;
  --ember: #ffb236;
  --cold: #4a89ff;
  --veu: rgba(0,0,0,0.66);
}

@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(/fontes/cinzel-600.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(/fontes/cinzel-700.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fontes/plex-sans-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fontes/plex-sans-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fontes/plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fontes/plex-mono-500.woff2) format('woff2')}

/* O ESTILO DO SITE.

   O bloco `:root` com as cores NÃO está aqui: ele é escrito pelo gerador a
   partir das fichas de arte do jogo (tools/site-paleta.js). Toda cor abaixo
   sai de uma variável — nenhuma literal, e nenhuma cor definida só dentro de
   um `@media`, que é o jeito clássico de o site ficar ilegível num tema só.

   Tipografia: Cinzel nos títulos, IBM Plex Sans no corpo, IBM Plex Mono nos
   rótulos. São as três do jogo, auto-hospedadas (tools/site-fontes.js).    */

*, *::before, *::after { box-sizing: border-box }

html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.env { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem }
.medida { max-width: 40rem }

a { color: var(--ember); text-underline-offset: .18em; text-decoration-thickness: .06em }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 3px }

h1, h2, h3 { font-family: Cinzel, Georgia, 'Times New Roman', serif; font-weight: 600; text-wrap: balance }
h1 { font-size: clamp(2.3rem, 6.2vw, 4rem); line-height: 1.06; margin: 0; letter-spacing: -.01em }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.16; margin: 0 0 .9rem }
/* 700 existe em Cinzel; quem cai para IBM Plex Sans volta a 600 abaixo,
   porque só 400 e 600 estão auto-hospedados e pedir 700 engorda na marra */
h3 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 .3rem; font-weight: 700 }
p { margin: 0 }
.fluxo > * + * { margin-top: 1rem }

.olho {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: .7rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ember); margin-bottom: .55rem;
}
.mono { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace }
.fraco { color: var(--ink-muted) }
.legenda { font-size: .84rem; color: var(--ink-muted); margin-top: .7rem }

/* ------------------------------- barra ------------------------------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.barra .env { display: flex; align-items: center; gap: 1.5rem; height: 3.5rem }
.marca {
  font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 1.05rem;
  letter-spacing: .04em; color: var(--ink); text-decoration: none; margin-right: auto;
}
.barra nav { display: flex; align-items: center; gap: 1.4rem }
/* `:not(.botao)` não é enfeite: `.barra nav a` vale mais que `.botao` na
   cascata (uma classe e dois tipos contra uma classe só), então o botão da
   alpha ficava com a cor de link apagado — texto quase invisível sobre a
   brasa, nos dois temas, em todas as páginas. Colisão de especificidade não
   quebra nada, não sai no log e nenhum teste a vê: só olhar acha. */
.barra nav a:not(.botao) {
  color: var(--ink-muted); text-decoration: none; font-size: .88rem;
}
.barra nav a:not(.botao):hover { color: var(--ink) }
.barra .idioma {
  font-family: 'IBM Plex Mono', monospace; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 3px; padding: .2rem .5rem;
}
.barra .idioma:hover { color: var(--ink); border-color: var(--ink-muted) }
@media (max-width: 46rem) { .barra nav .oculta-mobile { display: none } }

/* ------------------------------- botões ------------------------------ */
.botao {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'IBM Plex Mono', monospace; font-size: .82rem; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none;
  padding: .72rem 1.35rem; border-radius: 3px; border: 1px solid var(--ember);
  background: var(--ember); color: var(--ground); font-weight: 500;
  transition: transform .12s ease, filter .12s ease;
}
.botao:hover { filter: brightness(1.08); transform: translateY(-1px) }
.botao.vazado { background: transparent; color: var(--ember) }
.botao.vazado:hover { background: color-mix(in srgb, var(--ember) 12%, transparent) }
@media (prefers-reduced-motion: reduce) { .botao { transition: none } .botao:hover { transform: none } }

/* -------------------------------- hero ------------------------------- */
.hero { padding: clamp(3rem, 8vw, 6rem) 0 }
.hero .selo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ember);
  border: 1px solid var(--rule); border-radius: 999px; padding: .28rem .8rem;
  margin-bottom: 1.6rem;
}
.hero .selo::before {
  content: ''; width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--ember);
}
.hero h1 .segunda { color: var(--ember); display: block }
.hero .texto { margin-top: 1.5rem; font-size: 1.1rem; color: var(--ink-muted); max-width: 38rem }
.hero .acoes { margin-top: 2rem; display: flex; gap: .8rem; flex-wrap: wrap }

/* a foto do jogo */
.quadro {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border: 1px solid var(--rule); border-radius: 5px; overflow: hidden;
  background: var(--sunk); box-shadow: 0 24px 60px -30px var(--veu);
}
.quadro img { display: block; width: 100%; height: auto }
.quadro .vazio {
  aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 2rem;
  background: linear-gradient(160deg, var(--surface-2), var(--sunk));
  color: var(--ink-muted); font-family: 'IBM Plex Mono', monospace; font-size: .78rem;
  text-align: center; line-height: 1.8;
}

/* ------------------------------ seções ------------------------------- */
section { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--rule) }
.duas { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start }
@media (min-width: 52rem) { .duas { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) } }

/* ------------------------------- cartas ------------------------------ */
.baralho { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)) }
.carta {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 5px;
  padding: .95rem 1.05rem; box-shadow: 0 2px 10px -6px var(--veu);
  display: flex; flex-direction: column; gap: .35rem;
}
.carta .cab { display: flex; align-items: baseline; gap: .5rem }
.carta .ic { font-size: 1.15rem; line-height: 1 }
.carta h3 { margin: 0; font-family: 'IBM Plex Sans', sans-serif; font-size: .98rem; font-weight: 600 }
.carta p { font-size: .88rem; color: var(--ink-muted) }
.carta .prat {
  margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
  border: 1px solid var(--rule); border-radius: 999px; padding: .1rem .45rem;
}
.carta .gat {
  margin-top: .35rem; font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
  color: var(--ember); display: flex; gap: .4rem; align-items: baseline;
}
.carta .gat span:first-child { color: var(--ink-muted); letter-spacing: .1em; text-transform: uppercase; font-size: .6rem }

/* --------------------------- lista de casos -------------------------- */
.casos { display: grid; gap: .1rem; border: 1px solid var(--rule); border-radius: 5px; overflow: hidden }
.casos > div { background: var(--surface); padding: .9rem 1.1rem; border-bottom: 1px solid var(--rule) }
.casos > div:last-child { border-bottom: 0 }
.casos h3 { font-family: 'IBM Plex Sans', sans-serif; font-size: .95rem; font-weight: 600 }
.casos p { font-size: .89rem; color: var(--ink-muted) }

.recorte {
  font-family: 'IBM Plex Mono', monospace; font-size: .8rem;
  background: var(--sunk); border: 1px dashed var(--rule); border-radius: 4px;
  padding: .7rem .9rem; color: var(--ember); display: inline-block;
}

/* ------------------------------ números ------------------------------ */
.numeros { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  background: var(--rule); border: 1px solid var(--rule); border-radius: 5px; overflow: hidden }
.numeros > div { background: var(--surface); padding: 1.1rem 1rem; text-align: center }
.numeros b {
  display: block; font-family: Cinzel, Georgia, serif; font-size: 2rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.numeros span {
  display: block; margin-top: .35rem; font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted);
}

/* ------------------------------- fecho ------------------------------- */
.fecho { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: 0 20px 50px -34px var(--veu) }
.fecho .acoes { margin-top: 1.6rem; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap }
.fecho .obs { font-size: .82rem; color: var(--ink-muted) }

.marcador { display: inline-block; font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ember); border: 1px solid var(--ember); border-radius: 999px; padding: .18rem .6rem }

/* ------------------------------ rodapé ------------------------------- */
footer { border-top: 1px solid var(--rule); padding: 2.2rem 0 3rem; color: var(--ink-muted); font-size: .85rem }
footer .env { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between }

/* ------------------------- o formulário da lista ---------------------- */
.campo { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem }
.campo input {
  flex: 1 1 14rem; min-width: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 1rem;
  padding: .68rem .85rem; border-radius: 3px;
  border: 1px solid var(--rule); background: var(--sunk); color: var(--ink);
}
.campo input::placeholder { color: var(--ink-muted); opacity: .7 }
.campo input:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; border-color: var(--ember) }
.campo .botao { flex: 0 0 auto; border: 1px solid var(--ember) }

.aviso-form { margin-top: .8rem; font-size: .92rem; min-height: 1.3em }
.aviso-form.bom { color: var(--ember) }
.aviso-form.ruim { color: var(--cold) }

/* O campo-armadilha sai da tela sem `display:none`: robô que lê o CSS pula o
   que está escondido, e este precisa parecer um campo comum. */
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

/* ------------------------------ o Compêndio --------------------------- */
.migalha { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; letter-spacing: .06em;
  color: var(--ink-muted); display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline }
.migalha a { color: var(--ink-muted); text-decoration: none }
.migalha a:hover { color: var(--ember) }
.migalha i { font-style: normal; opacity: .55 }

/* A ficha de números. `dl` porque é isso que ela é — rótulo e valor —, e um
   leitor de tela anuncia o par junto em vez de ler duas colunas soltas. */
/* O fundo é `surface`, não `rule`: com `rule` a última fileira mostrava o vão
   vazio da grade como um bloco claro atravessado, e parecia célula quebrada.
   As divisórias vêm de `outline`, que cai no vão de 1px sem ocupar espaço. */
.ficha { display: grid; gap: 1px; margin: 1.6rem 0 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  background: var(--surface); border: 1px solid var(--rule); border-radius: 5px; overflow: hidden }
.ficha > div { background: var(--surface); padding: .8rem .95rem; outline: 1px solid var(--rule) }
.ficha dt { font-family: 'IBM Plex Mono', monospace; font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted) }
.ficha dd { margin: .25rem 0 0; font-size: 1.02rem; font-variant-numeric: tabular-nums }

.grade { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)) }
.cartao { display: flex; flex-direction: column; gap: .2rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 5px;
  padding: .75rem .9rem; color: var(--ink); transition: border-color .12s ease }
a.cartao:hover { border-color: var(--ember) }
.cartao b { font-size: .97rem; line-height: 1.25 }
.cartao .mono { font-size: .72rem; color: var(--ink-muted); letter-spacing: .04em }
.cartao .fraco { font-size: .82rem; line-height: 1.45 }
.cartao.alto { padding: 1rem 1.1rem; gap: .3rem }
.cartao.alto b { font-family: Cinzel, Georgia, serif; font-size: 1.1rem }
/* No índice a CONTAGEM é a informação, não uma etiqueta: em corpo de rótulo
   ela sumia ao lado do nome da seção. */
.cartao.alto .mono { font-family: Cinzel, Georgia, serif; font-size: 1.5rem;
  color: var(--ember); line-height: 1; font-variant-numeric: tabular-nums }
@media (prefers-reduced-motion: reduce) { .cartao { transition: none } }

.entalhes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem }
.entalhes span { font-size: .68rem; letter-spacing: .04em; color: var(--ink-muted);
  border: 1px solid var(--rule); border-radius: 999px; padding: .1rem .5rem }

/* Numa tabela larga a primeira coluna é a âncora de leitura: ela não quebra. */
.tabela table td:first-child { white-space: nowrap }
@media (max-width: 40rem) { .tabela table td:first-child { white-space: normal } }

/* ------------------------------- tabelas ------------------------------
   Esta folha nasceu sem uma regra de `table` — a vitrine não tem nenhuma —, e
   o Compêndio, que é quase todo tabela, chegou marcando `<div class="tabela">`
   contra um estilo que não existia. Sem `border-collapse` e sem largura, o
   navegador encolhe as colunas ao conteúdo e o bloco sai sem moldura: de longe
   parece descuido de conteúdo, e teste nenhum vê isso. */
.tabela { overflow-x: auto; border: 1px solid var(--rule); border-radius: 5px;
  background: var(--surface); box-shadow: 0 2px 10px -8px var(--veu) }
.tabela table { border-collapse: collapse; width: 100%; font-size: .9rem }
.tabela th, .tabela td { text-align: left; padding: .58rem .85rem;
  border-bottom: 1px solid var(--rule); vertical-align: top }
.tabela tbody tr:last-child td { border-bottom: 0 }
.tabela th { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
  font-weight: 500; background: var(--surface-2); white-space: nowrap }
.tabela td.mono, .tabela .mono { font-variant-numeric: tabular-nums; font-size: .84rem }
.tabela a { color: var(--ember) }

/* ---------------------------- o Diário do Reino ----------------------- */
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 5px; overflow: hidden }
.posts a { display: grid; gap: .3rem; padding: 1.1rem 1.2rem; text-decoration: none;
  background: var(--surface); color: var(--ink) }
.posts a:hover { background: var(--surface-2) }
.posts time { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ember) }
.posts b { font-family: Cinzel, Georgia, serif; font-size: 1.22rem; line-height: 1.2 }
.posts .fraco { font-size: .92rem; line-height: 1.5 }

/* A prosa do post. Medida curta e entrelinha larga: aqui se LÊ, e o resto do
   site se percorre. */
.prosa { font-size: 1.06rem; line-height: 1.72 }
.prosa > * + * { margin-top: 1.1rem }
.prosa h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin-top: 2.6rem; margin-bottom: .2rem }
.prosa h3 { font-size: 1.1rem; margin-top: 2rem; margin-bottom: .1rem }
/* Folga apertada de propósito: com .3em o `código` seguido de ponto final
   parecia ter um espaço antes da pontuação, em todo parágrafo. */
.prosa code { font-size: .86em; background: var(--sunk); border: 1px solid var(--rule);
  border-radius: 3px; padding: .05em .22em }
.prosa pre { background: var(--sunk); border: 1px solid var(--rule); border-radius: 4px;
  padding: .95rem 1.1rem; overflow-x: auto; font-family: 'IBM Plex Mono', monospace;
  font-size: .82rem; line-height: 1.65 }
.prosa pre code { background: none; border: 0; padding: 0; font-size: 1em }
.prosa blockquote { margin: 1.6rem 0; padding: .1rem 0 .1rem 1.2rem;
  border-left: 3px solid var(--ember); color: var(--ink-muted); font-style: italic }
.prosa blockquote p { margin: 0 }
.prosa-lista { padding-left: 1.3rem; display: grid; gap: .45rem }
.prosa-lista li::marker { color: var(--ember-soft) }
.prosa hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4rem 0 }
.prosa .tabela { margin: 1.6rem 0 }

/* --------------------- o hero em fade lento --------------------------- */
/* Três capturas empilhadas; cada uma fica acesa um terço do ciclo. O
   `aspect-ratio` sai das próprias fotos (1760×990) e é declarado aqui porque
   as imagens são absolutas — sem ele o quadro teria altura zero e a página
   pularia quando a primeira carregasse. */
.quadro.fade { position: relative; aspect-ratio: 1760 / 990 }
.quadro.fade img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; animation: revezar 24s infinite;
  animation-delay: calc(var(--i) * 8s) }
@keyframes revezar {
  0%, 2% { opacity: 0 }
  5%, 30% { opacity: 1 }
  33%, 100% { opacity: 0 }
}
/* Quem pediu menos movimento fica com a primeira, parada. */
@media (prefers-reduced-motion: reduce) {
  .quadro.fade img { animation: none; opacity: 0 }
  .quadro.fade img:first-child { opacity: 1 }
}

/* --------------------- o ícone de item do Compêndio ------------------- */
/* 32 px na tela e 64 px de arquivo: os PNG saem no dobro, para tela de 2×.
   `image-rendering: auto` de propósito — a peça é um render suave, não pixel
   art, e o `pixelated` que ficaria bem num sprite estraga a borda desta. */
.ico { flex: 0 0 auto; width: 32px; height: 32px }
.ico.emoji { font-size: 19px; line-height: 32px; text-align: center; opacity: .85 }
/* Ícone e nome lado a lado, e a raridade DEBAIXO DO NOME — não debaixo do
   ícone: alinhada à borda da célula ela parecia legenda de outra coisa. */
.comIcone { display: flex; align-items: center; gap: .5rem }

/* ------------------------ o retrato da criatura ----------------------- */
.retrato { flex: 0 0 auto; display: block; image-rendering: auto }
.comRetrato { display: flex; align-items: center; gap: 1rem }
.comRetrato > div { min-width: 0 }
.cartao.comRetrato { padding: .55rem .8rem; gap: .7rem }
/* O nome e o nível empilham: em linha, "Corvo Carniceiro nv. 2 · perseguidor"
   quebrava no meio e o nível ficava pendurado no fim da primeira linha. */
.cartao.comRetrato > div { display: flex; flex-direction: column; gap: .15rem }
.cartao.comRetrato .retrato { width: 56px; height: 56px }
@media (min-width: 30rem) { .cartao.comRetrato .retrato { width: 72px; height: 72px } }
/* No cabeçalho da ficha o retrato some nas telas estreitas: ali ele disputaria
   com o nome da criatura, e o nome é o que a pessoa veio ler. */
@media (max-width: 34rem) { .hero .comRetrato > .retrato { display: none } }