/* PokéAtlas, edição Pokémon — o site é um aparelho de Pokédex.
 * O fundo da página é o corpo vermelho do aparelho; o conteúdo fica na tela, com moldura escura e o canto
 * cortado. O cabeçalho é o alto do aparelho (lente azul, três luzes, o degrau), e o rodapé, a parte de baixo.
 * M PLUS Rounded 1c é a letra do aparelho; DotGothic16, a dos números e das leituras da tela.
 * A edição Cobblemon tem a sua própria folha (estilo.css) e não lê este arquivo. */

@font-face { font-family: "M PLUS Rounded 1c"; src: url("/fontes/mplus-500.woff2") format("woff2"); font-weight: 400 599; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("/fontes/mplus-700.woff2") format("woff2"); font-weight: 600 749; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("/fontes/mplus-800.woff2") format("woff2"); font-weight: 750 900; font-display: swap; }
@font-face { font-family: "DotGothic16"; src: url("/fontes/dotgothic.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* o aparelho */
  --vermelho: #DC0A2D;
  --vermelho-fundo: #9C0A22;
  --lente: #29AAFD;
  --amarelo: #FFCB05;
  --azul: #2F6FDB;
  --verde: #2E9E4F;

  /* a tela */
  --tela: #F1F5EA;
  --tela-funda: #E3EAD9;
  --tela-linha: #B9C4AC;
  --noite: #171A21;
  --branco: #FFFFFF;
  --tinta: #20232B;
  --tinta-suave: #575D69;

  /* a barra de vida: do vermelho de quem está por um fio ao verde de quem está inteiro (notas de 1 a 5) */
  --nivel-1: #E5484D;
  --nivel-2: #F08A3C;
  --nivel-3: #F2B82D;
  --nivel-4: #A6CE39;
  --nivel-5: #45B25D;

  /* as cartas das regiões: mar e terra, como no mapa dos jogos (as mesmas cores de scripts/cenario.mjs) */
  --agua: #BFE3F5;
  --terra-1: #A8D98A;
  --terra-2: #CDE39A;
  --terra-3: #F0E29C;
  --terra-4: #E3B873;
  --terra-5: #C08A5C;

  /* as três séries da comparação: água, fogo e planta */
  --serie-a: var(--azul);
  --serie-b: var(--vermelho);
  --serie-c: var(--verde);

  --letra: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Nunito", system-ui, sans-serif;
  --ponto: "DotGothic16", "M PLUS Rounded 1c", ui-monospace, monospace;

  /* escala tipográfica: 14 / 15 / 17 / 20 / 26 / 36 / 52 */
  --t-menor: 0.875rem;
  --t-pequeno: 0.9375rem;
  --t-texto: 1.0625rem;
  --t-destaque: 1.25rem;
  --t-subtitulo: 1.625rem;
  --t-titulo: clamp(1.9rem, 4vw, 3.3rem);
  --t-pagina: clamp(2.7rem, 7.4vw, 6.6rem);

  /* espaçamento: 8 / 16 / 24 / 40 / 64 / 104 / 168 */
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 40px; --e5: 64px; --e6: 104px;
  --e7: clamp(104px, 13vw, 168px);
  --margem: clamp(18px, 4.2vw, 64px);
  --suave: cubic-bezier(0.22, 1, 0.36, 1);

  /* as medidas do aparelho: a altura do alto, a folga do corpo em volta da tela, a moldura e o degrau */
  --topo: 64px;
  --degrau: 16px;
  --corpo: clamp(6px, 1.3vw, 20px);
  --moldura: clamp(5px, 0.7vw, 9px);
  --raio-tela: clamp(12px, 1.7vw, 24px);
  --raio: 14px;
  --traco: 2.5px;
}

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

html {
  background: var(--vermelho);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + var(--degrau) + 12px);
}
body {
  margin: 0;
  font-size: var(--t-texto);
  font-weight: 500;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--vermelho); }
button { font: inherit; color: inherit; }
strong, b { font-weight: 800; }
:focus-visible { outline: 3px solid var(--foco, var(--azul)); outline-offset: 3px; }
::selection { background: var(--amarelo); color: var(--tinta); }

h1, h2, h3 { font-weight: 800; line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: var(--t-titulo); }
h3 { font-size: var(--t-subtitulo); letter-spacing: -0.005em; }

.prosa { font-size: 1.14rem; line-height: 1.62; max-width: 60ch; }
.prosa p + p { margin-top: 0.9em; }
.nota-editorial { font-size: var(--t-menor); color: var(--tinta-suave); }

.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular {
  position: fixed; left: var(--e2); top: var(--e2); z-index: 100;
  padding: 10px 14px; background: var(--amarelo); color: var(--tinta); font-weight: 800;
  border: var(--traco) solid var(--tinta); border-radius: var(--raio);
  transform: translateY(-300%);
}
.pular:focus { transform: none; }

/* ---------- a tela ---------- */

main {
  position: relative;
  margin: calc(var(--topo) + var(--degrau)) var(--corpo) 0;
  color: var(--tinta-viva, var(--tinta));
  background-color: var(--fundo-vivo, var(--tela));
  /* a trama de pontos de uma tela de cristal líquido */
  background-image: radial-gradient(rgb(32 35 43 / 0.055) 1px, transparent 1.5px);
  background-size: 7px 7px;
  border: var(--moldura) solid var(--tinta);
  border-radius: var(--raio-tela);
  transition: background-color 0.7s ease, color 0.7s ease;
}
/* o canto cortado da tela, embaixo à esquerda */
main::after {
  content: ""; position: absolute; left: calc(var(--moldura) * -1); bottom: calc(var(--moldura) * -1);
  width: clamp(30px, 4.6vw, 62px); aspect-ratio: 1; pointer-events: none;
  background: linear-gradient(to top right, var(--vermelho) calc(50% - var(--moldura) * 0.7), var(--tinta) calc(50% - var(--moldura) * 0.7) calc(50% + var(--moldura) * 0.3), transparent calc(50% + var(--moldura) * 0.3));
}

/* ---------- rolagem (o que src/js/rolagem.js anima) ---------- */

/* o estado "escondido" só vale com JavaScript: sem ele, tudo já aparece */
.js [data-entra="surgir"] { opacity: 0; transition: opacity 0.9s var(--suave); }
.js [data-entra="surgir"].entrou { opacity: 1; }
.js [data-entra="palavras"] .palavra {
  display: inline-block; opacity: 0; transform: translateY(0.6em);
  transition: opacity 0.55s ease-out, transform 0.55s var(--suave);
  transition-delay: calc(var(--i) * var(--passo, 60ms));
}
.js [data-entra="palavras"].entrou .palavra { opacity: 1; transform: none; }
[data-entra="contar"] { font-variant-numeric: tabular-nums; }
.js [data-entra="contar"]:not(.entrou) { opacity: 0; }

[data-cena] { position: relative; }
.palco { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
[data-trilho] { display: flex; flex-wrap: nowrap; will-change: transform; }
html:not(.js) [data-trilho] { flex-wrap: wrap; }
[data-deriva] { will-change: transform; }
[data-segue] { transition: transform 0.25s ease-out; }

/* movimento reduzido: as cenas viram seções comuns e nada espera para aparecer */
.sem-movimento [data-entra], .sem-movimento [data-entra] .palavra { opacity: 1 !important; transform: none !important; transition: none !important; }
.sem-movimento .palco { position: static; height: auto; overflow: visible; }
.sem-movimento [data-trilho] { flex-wrap: wrap; transform: none !important; }

/* ---------- botões, fichas e selos ---------- */

/* O botão é uma tecla do aparelho: amarela, com a sombra dura de quem tem altura, e afunda ao toque. */
.botao {
  display: inline-block;
  padding: 12px 22px 13px;
  background: var(--amarelo); color: var(--tinta);
  font-weight: 800; font-size: var(--t-texto); line-height: 1.15;
  text-decoration: none;
  border: var(--traco) solid var(--tinta); border-radius: var(--raio);
  box-shadow: 0 4px 0 var(--tinta);
  cursor: pointer;
  transition: transform 0.18s var(--suave), box-shadow 0.18s var(--suave), background-color 0.2s, color 0.2s;
}
.botao:hover { background: #FFD93D; transform: translateY(-2px); box-shadow: 0 6px 0 var(--tinta); }
.botao:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.botao-contorno { background: var(--branco); }
.botao-contorno:hover { background: var(--tinta); color: var(--branco); }
.botao-pequeno { padding: 8px 15px 9px; font-size: var(--t-pequeno); border-radius: 12px; box-shadow: 0 3px 0 var(--tinta); }
.botao-grande { padding: 18px 34px 20px; font-size: var(--t-destaque); border-radius: 18px; box-shadow: 0 6px 0 var(--tinta); }
.botao-grande:hover { box-shadow: 0 8px 0 var(--tinta); }

.ligacao {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-size: var(--t-pequeno); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em;
}
.ligacao:hover { text-decoration-color: var(--vermelho); }

.ficha {
  padding: 6px 14px 7px;
  font-size: var(--t-pequeno); font-weight: 700; line-height: 1.2; white-space: nowrap;
  background: var(--branco); color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.2s var(--suave);
}
.ficha:hover { transform: translateY(-2px); }
.ficha[aria-pressed="true"] { background: var(--tinta); color: var(--amarelo); }

/* O selo de um tipo, na cor dele. As cores são as que os jogos usam; a letra clara entra nas mais escuras. */
[data-tipo] { --cor: #A8A77A; --letra-do-tipo: var(--tinta); }
[data-tipo="fogo"] { --cor: #EE8130; }
[data-tipo="agua"] { --cor: #6390F0; }
[data-tipo="planta"] { --cor: #7AC74C; }
[data-tipo="eletrico"] { --cor: #F7D02C; }
[data-tipo="gelo"] { --cor: #96D9D6; }
[data-tipo="lutador"] { --cor: #C22E28; --letra-do-tipo: #fff; }
[data-tipo="venenoso"] { --cor: #A33EA1; --letra-do-tipo: #fff; }
[data-tipo="terrestre"] { --cor: #E2BF65; }
[data-tipo="voador"] { --cor: #A98FF3; }
[data-tipo="psiquico"] { --cor: #F95587; }
[data-tipo="inseto"] { --cor: #A6B91A; }
[data-tipo="pedra"] { --cor: #B6A136; }
[data-tipo="fantasma"] { --cor: #735797; --letra-do-tipo: #fff; }
[data-tipo="dragao"] { --cor: #6F35FC; --letra-do-tipo: #fff; }
[data-tipo="sombrio"] { --cor: #705746; --letra-do-tipo: #fff; }
[data-tipo="aco"] { --cor: #B7B7CE; }
[data-tipo="fada"] { --cor: #D685AD; }
.tipo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 11px 3px;
  background: var(--cor); color: var(--letra-do-tipo);
  font-size: var(--t-menor); font-weight: 800; line-height: 1.25; white-space: nowrap; text-decoration: none;
  border: 2px solid var(--tinta); border-radius: 999px;
}
a.tipo { transition: transform 0.2s var(--suave); }
a.tipo:hover { transform: translateY(-2px); }
/* a contagem que acompanha um selo (quantos do time) */
.tipo b { margin-right: -7px; min-width: 1.5em; padding: 0 5px; text-align: center; font-family: var(--ponto); font-weight: 400; background: var(--tinta); color: #fff; border-radius: 999px; }
/* como filtro, o selo fica apagado até ser escolhido */
.ficha-tipo { padding: 4px 12px 5px 9px; font-size: var(--t-menor); display: inline-flex; align-items: center; gap: 7px; }
.ficha-tipo::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--cor); border: 2px solid var(--tinta); }
.ficha-tipo[aria-pressed="true"] { background: var(--cor); color: var(--letra-do-tipo); }
.ficha-tipo[aria-pressed="true"]::before { background: var(--branco); }

/* A caixa de texto dos jogos: branca, de borda escura, com a sombra dura. É onde o atlas fala. */
.painel, .veredito, .folha, .regioes-chave, .diario-nova, .diario-captura, .roleta-resultado, .time-grupo, .time-vaga, .abertura-visor, .roda-grupo, .desenhar-hex {
  background: var(--branco); color: var(--tinta);
  border: var(--traco) solid var(--tinta); border-radius: 18px;
  box-shadow: 5px 5px 0 var(--tinta);
}
.painel { padding: var(--e3); }

/* ---------- o alto do aparelho ---------- */

.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--topo);
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px);
  padding: 0 calc(var(--corpo) + var(--moldura) + 4px);
  color: #fff; --foco: #fff;
}
.topo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--vermelho); border-bottom: 3px solid var(--vermelho-fundo); }
/* o degrau: sob a lente o corpo desce um pouco mais, e a linha sobe em diagonal */
.topo::after {
  content: ""; position: absolute; z-index: -1; left: 0; top: calc(100% - 3px);
  width: clamp(150px, 27vw, 400px); height: calc(var(--degrau) + 3px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 19' preserveAspectRatio='none'%3E%3Cpath d='M0 0H38L22 16H0Z' fill='%23DC0A2D'/%3E%3Cpath d='M0 17.5H22.6L38.6 1.5' fill='none' stroke='%239C0A22' stroke-width='3'/%3E%3C/svg%3E") right top / 38px 100% no-repeat,
    linear-gradient(var(--vermelho) var(--degrau), var(--vermelho-fundo) var(--degrau)) left top / calc(100% - 38px) 100% no-repeat;
}
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.32rem; letter-spacing: -0.015em; line-height: 1; text-decoration: none; white-space: nowrap; }
/* a lente */
.topo .marca::before {
  content: ""; flex: none; width: 38px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #EAF8FF 0 10%, transparent 11%), radial-gradient(circle, #62C6FF 0 30%, var(--lente) 31% 60%, #1672C2 61%);
  border: 3px solid #fff; box-shadow: 0 0 0 var(--traco) var(--tinta);
  transition: filter 0.3s;
}
.topo .marca:hover::before { filter: brightness(1.18); }
/* as três luzes: cada uma tem a cor numa variável, para acender sozinha com a música (src/js/som.js) */
.topo .marca::after {
  content: ""; flex: none; align-self: flex-start; width: 46px; height: 12px; margin: 2px 0 0 2px;
  background:
    radial-gradient(circle at 6px 6px, var(--brilho-1, #FFB3B3) 0 1.5px, var(--luz-1, #B8001F) 2px 4px, var(--tinta) 4.4px 5.6px, transparent 6px),
    radial-gradient(circle at 23px 6px, var(--brilho-2, #FFF6C2) 0 1.5px, var(--luz-2, #D9A900) 2px 4px, var(--tinta) 4.4px 5.6px, transparent 6px),
    radial-gradient(circle at 40px 6px, var(--brilho-3, #D2F7DA) 0 1.5px, var(--luz-3, #2F9A47) 2px 4px, var(--tinta) 4.4px 5.6px, transparent 6px);
}
.luz-1 .topo .marca { --luz-1: #FF8A96; --brilho-1: #fff; }
.luz-2 .topo .marca { --luz-2: #FFF07A; --brilho-2: #fff; }
.luz-3 .topo .marca { --luz-3: #8CF0A3; --brilho-3: #fff; }
/* enquanto um grito soa, as três piscam juntas; enquanto a Pokédex fala, a lente pulsa */
.tocando-grito .topo .marca::after { animation: luzes 0.28s steps(2, jump-none) infinite; }
@keyframes luzes { to { filter: brightness(1.9) saturate(1.3); } }
.falando .topo .marca::before { animation: lente 0.55s ease-in-out infinite alternate; }
@keyframes lente { to { filter: brightness(1.45); box-shadow: 0 0 0 var(--traco) var(--tinta), 0 0 14px 4px rgb(255 255 255 / 0.55); } }
.topo-nav { display: flex; align-items: center; gap: clamp(4px, 0.8vw, 14px); }
.topo-nav a:not(.botao) { padding: 6px 10px 7px; font-size: var(--t-pequeno); font-weight: 700; line-height: 1.2; text-decoration: none; border-radius: 999px; white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.topo-nav a:not(.botao):hover { background: rgb(255 255 255 / 0.2); }
.topo-nav a[aria-current="page"]:not(.botao) { background: #fff; color: var(--vermelho-fundo); }
.topo-nav .botao { margin-left: 6px; white-space: nowrap; }
/* o link para a mesma página na outra língua */
.topo-nav a.topo-lingua { box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.75); }
.topo-nav a.topo-lingua:hover { background: #fff; color: var(--vermelho-fundo); }
.topo-menu { display: none; }

/* seletor de edição: Pokémon ou Cobblemon */
.edicoes { display: inline-flex; margin-right: auto; padding: 3px; background: var(--vermelho-fundo); border-radius: 999px; }
.edicoes a { padding: 4px 11px 5px; font-size: var(--t-menor); font-weight: 700; line-height: 1.2; text-decoration: none; border-radius: 999px; }
.edicoes a[aria-current] { background: #fff; color: var(--vermelho-fundo); }
.edicoes a:not([aria-current]):hover { background: rgb(255 255 255 / 0.18); }

.topo-busca, .topo-menu { padding: 6px 13px 7px; font: inherit; font-size: var(--t-pequeno); font-weight: 700; line-height: 1.2; color: inherit; background: transparent; border: 2px solid #fff; border-radius: 999px; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.topo-busca:hover, .topo-menu:hover { background: #fff; color: var(--vermelho-fundo); }
html:not(.js) :is(.topo-busca, .topo-som, .especie-grito, [data-acaso]) { display: none; }
[data-falar][hidden] { display: none; }
/* o número digitado em qualquer página: o aparelho mostra a espécie daquele número antes de abri-la */
.visor-numero { position: fixed; left: 50%; bottom: clamp(16px, 5vh, 44px); z-index: 60; translate: -50% 0; display: flex; align-items: baseline; gap: 14px; margin: 0; padding: 10px 20px 12px; white-space: nowrap; color: var(--tela); background: var(--noite); border: 3px solid var(--tinta); border-radius: 16px; box-shadow: 0 0 0 3px var(--amarelo), 6px 8px 0 3px var(--tinta); }
.visor-numero[hidden] { display: none; }
.visor-numero span { font-family: var(--ponto); font-size: 1.5rem; line-height: 1; color: var(--amarelo); }
.visor-numero strong { font-size: 1.3rem; line-height: 1.1; }
.visor-numero.sem-registro strong { font-family: var(--ponto); font-weight: 400; color: #8C93A3; }
.topo-nav-busca, .topo-nav-som { display: none; }
/* o botão de som: um alto-falante redondo, que acende quando o som está ligado */
.topo-som { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: #fff; background: transparent; border: 2px solid #fff; border-radius: 50%; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.topo-som:hover { background: rgb(255 255 255 / 0.2); }
.topo-som[data-ligado="true"] { background: var(--amarelo); color: var(--tinta); border-color: var(--tinta); }
.topo-som svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topo-som .som-caixa { fill: currentColor; }
[data-ligado="true"] .som-mudo, [data-ligado="false"] .som-ondas { display: none; }
/* o painel de som: a chave e os dois volumes, numa caixa de texto presa ao canto do alto */
.som-painel { width: min(92vw, 21rem); margin: calc(var(--topo) + var(--degrau) + 8px) clamp(12px, 3vw, 40px) auto auto; padding: var(--e3); color: var(--tinta); background: var(--branco); border: 3px solid var(--tinta); border-radius: 20px; box-shadow: 8px 8px 0 var(--tinta); }
.som-painel[open] { display: grid; gap: var(--e2); }
.som-painel::backdrop { background: rgb(23 26 33 / 0.35); }
.som-painel h2 { font-size: var(--t-subtitulo); }
.som-painel .botao { justify-self: start; }
.som-volume { display: grid; gap: 4px; font-size: var(--t-pequeno); font-weight: 800; }
.som-volume input { width: 100%; height: 28px; margin: 0; accent-color: var(--vermelho); cursor: pointer; }
.som-painel .ligacao { justify-self: start; }
@media (max-width: 600px) { .som-painel { margin-inline: auto; } }

/* Em telas médias a chamada principal sai do alto (continua no rodapé e nas páginas);
 * abaixo de 1280px as abas vão para o botão Menu, e em telas estreitas as luzes somem. */
@media (max-width: 1400px) { .topo-nav .botao { display: none; } }
@media (max-width: 1280px) {
  .js .topo-nav .botao { display: block; }
  .js .topo-menu { display: inline-block; }
  .js .topo-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: var(--e2) calc(var(--corpo) + var(--moldura) + 4px) var(--e3);
    background: var(--vermelho);
    border-bottom: 3px solid var(--vermelho-fundo); border-radius: 0 0 var(--raio-tela) var(--raio-tela);
    box-shadow: 0 18px 30px rgb(0 0 0 / 0.25);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.25s var(--suave), visibility 0.25s;
  }
  .js .topo-nav.aberto { visibility: visible; opacity: 1; transform: none; }
  .js .topo-nav a:not(.botao) { padding: 12px 14px; font-size: var(--t-destaque); border-radius: 12px; }
  .js .topo-nav .botao { margin: var(--e2) 0 0; text-align: center; }
  html:not(.js) .topo { height: auto; min-height: var(--topo); flex-wrap: wrap; padding-block: 8px; }
  html:not(.js) .topo-nav { flex-wrap: wrap; }
}
/* em tela estreita não cabem logotipo, seletor, busca e menu na mesma linha: a busca vai para dentro do menu */
@media (max-width: 600px) {
  :root { --topo: 56px; --degrau: 12px; }
  .topo { gap: 8px; }
  .topo .marca { font-size: 1.12rem; gap: 7px; }
  .topo .marca::before { width: 30px; border-width: 2.5px; }
  .topo .marca::after { display: none; }
  .edicoes a { padding: 4px 8px 5px; font-size: 0.8rem; }
  .topo-busca { display: none; }
  .topo-som { display: none; }
  .js :is(.topo-nav-busca, .topo-nav-som) { display: block; width: 100%; margin-bottom: 6px; padding: 12px; font: inherit; font-size: var(--t-destaque); font-weight: 700; color: inherit; background: transparent; border: 2px solid #fff; border-radius: 12px; cursor: pointer; }
  .js .topo-nav-som::after { content: " desligados"; font-weight: 500; }
  .js .topo-nav-som[data-ligado="true"] { background: var(--amarelo); color: var(--tinta); border-color: var(--tinta); }
  .js .topo-nav-som[data-ligado="true"]::after { content: " ligados"; }
  .js .topo-nav-som:lang(en)::after { content: ": off"; }
  .js .topo-nav-som:lang(en)[data-ligado="true"]::after { content: ": on"; }
}
@media (max-width: 380px) { .topo .marca { font-size: 0; gap: 0; } }

/* ---------- a parte de baixo do aparelho ---------- */

.rodape { position: relative; padding: 150px calc(var(--corpo) + var(--margem)) var(--e4); color: #fff; font-size: var(--t-pequeno); --foco: #fff; }
/* o direcional e a grade do alto-falante */
.direcional {
  position: absolute; left: calc(var(--corpo) + var(--margem)); top: 34px; width: 90px; aspect-ratio: 1;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  background: radial-gradient(circle, #3A3F4B 0 8px, var(--tinta) 9px) center / 34% 34% no-repeat;
  filter: drop-shadow(0 4px 0 var(--vermelho-fundo));
}
.direcional > * { display: grid; place-items: center; padding: 0; background: var(--tinta); border: 0; cursor: pointer; transition: background-color 0.15s; }
.direcional > *::before { content: ""; border: 6px solid transparent; border-top: 0; border-bottom: 8px solid #8C93A3; transition: border-color 0.15s; }
.direcional > *:is(:hover, :focus-visible) { background: #3A3F4B; }
.direcional > *:is(:hover, :focus-visible)::before { border-bottom-color: var(--amarelo); }
.direcional > *:active { background: #000; }
.direcional-cima { grid-area: 1 / 2; border-radius: 6px 6px 0 0; }
.direcional-esquerda { grid-area: 2 / 1; border-radius: 6px 0 0 6px; }
.direcional-esquerda::before { rotate: -90deg; }
.direcional-direita { grid-area: 2 / 3; border-radius: 0 6px 6px 0; }
.direcional-direita::before { rotate: 90deg; }
.direcional-baixo { grid-area: 3 / 2; border-radius: 0 0 6px 6px; }
.direcional-baixo::before { rotate: 180deg; }
.rodape::after {
  content: ""; position: absolute; right: calc(var(--corpo) + var(--margem) + 12px); top: 48px; width: 132px; height: 62px;
  background: repeating-linear-gradient(to bottom, var(--vermelho-fundo) 0 7px, transparent 7px 18px);
  border-radius: 8px; transform: skewX(-20deg);
}
.rodape-grade { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 6fr); gap: var(--e5); }
.rodape .marca { margin-bottom: var(--e1); font-size: 1.6rem; }
.rodape nav { display: grid; gap: 8px; align-content: start; justify-items: start; }
.rodape nav a { text-decoration: none; font-weight: 700; }
.rodape nav a:hover { text-decoration: underline; text-decoration-color: var(--amarelo); }
.rodape-avisos { display: grid; gap: var(--e2); align-content: start; line-height: 1.55; max-width: 70ch; font-size: var(--t-menor); }
@media (max-width: 820px) {
  .rodape { padding-top: 126px; }
  .direcional { width: 78px; top: 26px; }
  .rodape::after { width: 96px; height: 46px; top: 40px; }
  .rodape-grade { grid-template-columns: 1fr; gap: var(--e4); }
}

/* ---------- hexágonos e pranchas (peças comuns) ---------- */

.hex { width: 100%; }
.hex-item { display: grid; justify-items: center; gap: 2px; text-align: center; text-decoration: none; }
.hex-item .hex { max-width: 240px; transition: transform 0.6s var(--suave); }
.hex-item:hover .hex { transform: scale(1.07) rotate(6deg); }
.hex-nome { display: block; font-weight: 800; line-height: 1.2; }
.hex-item:hover .hex-nome { text-decoration: underline; text-decoration-color: var(--vermelho); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.hex-meta { display: block; font-size: var(--t-menor); font-weight: 700; color: var(--tinta-suave); }

/* A arte de cada espécie aparece primeiro como numa tela de uma cor só; a cor chega com o ponteiro, o toque ou o foco. */
.prancha { width: 100%; cursor: pointer; }
.prancha-arte { position: relative; display: block; aspect-ratio: 1; }
.prancha-tinta {
  position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: var(--arte) center / contain no-repeat;
  mask: var(--arte) center / contain no-repeat;
  transition: opacity 0.5s ease;
}
.prancha-cor {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: scale(0.96);
  transition: opacity 0.5s ease, transform 0.7s var(--suave);
}
.prancha:hover .prancha-cor, .prancha:focus-visible .prancha-cor, .prancha.revelada .prancha-cor { opacity: 1; transform: none; }
.prancha:hover .prancha-tinta, .prancha:focus-visible .prancha-tinta, .prancha.revelada .prancha-tinta { opacity: 0; }
/* na página de cada espécie a gravura é feita na hora, num canvas; até lá, vale a miniatura */
.prancha-rascunho, .prancha-gravura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.5s ease; }
.prancha-gravura { opacity: 0; }
.gravada .prancha-gravura { opacity: 1; }
.gravada .prancha-rascunho { opacity: 0; }
.prancha:hover .prancha-gravura, .prancha:focus-visible .prancha-gravura, .prancha.revelada .prancha-gravura,
.prancha:hover .prancha-rascunho, .prancha:focus-visible .prancha-rascunho, .prancha.revelada .prancha-rascunho { opacity: 0; }
.prancha figcaption { margin-top: 6px; font-size: var(--t-menor); font-weight: 700; line-height: 1.25; text-align: center; }
.prancha-numero { display: block; font-family: var(--ponto); font-size: 1rem; font-weight: 400; line-height: 1.2; color: var(--tinta-suave); }

/* o hexágono vivo, com o nome de cada eixo no seu vértice (página de jogo, comparar, bússola, início) */
.hex-vivo { position: relative; aspect-ratio: 1; width: 100%; }
.hex-vivo > img, .hex-vivo > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hex-vivo > canvas { opacity: 0; transition: opacity 0.4s; }
.hex-vivo.vivo > canvas { opacity: 1; }
.hex-vivo.vivo > img { opacity: 0; }
.hex-eixo {
  position: absolute; transform: translate(-50%, -50%);
  padding: 1px 9px 2px; font-size: var(--t-menor); font-weight: 700; line-height: 1.25; white-space: nowrap;
  background: var(--branco); color: var(--tinta); border: 2px solid var(--tinta); border-radius: 999px;
  pointer-events: none; transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.hex-eixo.ativo { background: var(--amarelo); }

.serie { display: inline-block; width: 24px; height: 0; margin-right: 7px; vertical-align: middle; border-top: 4px solid var(--serie-a); }
.serie-b { border-top-color: var(--serie-b); border-top-style: dashed; }
.serie-c { border-top-color: var(--serie-c); border-top-style: dotted; }

/* a medida de cinco casas (notas dos jogos, dificuldade dos desafios): enche como barra de vida */
.estratos { display: flex; gap: 3px; }
.estrato { width: 24px; height: 13px; background: var(--tela-funda); border: 2px solid var(--tinta); border-radius: 4px; }
.estrato-1 { background: var(--nivel-1); }
.estrato-2 { background: var(--nivel-2); }
.estrato-3 { background: var(--nivel-3); }
.estrato-4 { background: var(--nivel-4); }
.estrato-5 { background: var(--nivel-5); }

/* campos de texto e de escolha */
.dex-busca { display: grid; gap: 6px; max-width: 22rem; }
.dex-busca label, .escolha, .busca-inicio label { font-size: var(--t-pequeno); font-weight: 800; }
.escolha { display: grid; gap: 6px; }
.dex-busca input, .busca-inicio input, .escolha select, .diario :is(input[type="text"], textarea) {
  width: 100%; padding: 10px 14px 11px;
  font: 500 1rem var(--letra); color: var(--tinta);
  background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: var(--raio);
}
.escolha select {
  padding-right: 40px; appearance: none; cursor: pointer;
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2320232B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px no-repeat;
}
:is(.dex-busca, .busca-inicio) input::placeholder { color: var(--tinta-suave); opacity: 1; }

.filtro { border: 0; padding: 0; margin: 0; min-width: 0; }
.filtro-opcoes { display: flex; flex-wrap: wrap; gap: 7px; }
.vazio { padding: var(--e4) 0 0; font-size: 1.3rem; font-weight: 700; }
.migalha { margin-bottom: var(--e3); font-size: var(--t-pequeno); font-weight: 700; }
.migalha a { text-decoration: none; }
.migalha a::before { content: ""; display: inline-block; margin-right: 8px; border: 6px solid transparent; border-left: 0; border-right: 9px solid currentColor; }
.migalha a:hover { text-decoration: underline; text-decoration-color: var(--vermelho); }

/* a estante de jogos (jogos de perfil parecido, jogos de uma região) */
.estante { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(44%, 216px), 1fr)); gap: var(--e5) var(--e3); }
.estante > li { display: grid; justify-items: center; align-content: start; gap: 6px; }
.estante-curta { padding: var(--e3) 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .filtro-opcoes { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--margem) * -1); padding: 4px var(--margem) 8px; scrollbar-width: none; }
  .filtro-opcoes::-webkit-scrollbar { display: none; }
  .ficha { padding: 8px 15px 9px; }
  .ficha-tipo { padding: 6px 13px 7px 10px; }
  .estante { gap: var(--e4) var(--e2); }
  .estante-curta { grid-template-columns: 1fr 1fr; }
}

/* ---------- cabeçalho das páginas internas ---------- */

.cabecalho { padding: clamp(40px, 8vh, 88px) var(--margem) var(--e4); display: grid; gap: var(--e3); }
.cabecalho h1, .bussola-topo h1 { font-size: var(--t-pagina); letter-spacing: -0.03em; line-height: 0.98; }
.cabecalho .migalha { margin-bottom: 0; }
/* página que não existe: a ficha de um Pokémon ainda não visto */
.cabecalho-perdido { min-height: 70svh; align-content: center; }
.cabecalho-perdido::before { content: "Nº ????"; font-family: var(--ponto); font-size: var(--t-subtitulo); color: var(--tinta-suave); }
.cabecalho-perdido h1 { font-size: clamp(2.4rem, 6.4vw, 5.4rem); max-width: 15ch; }

/* ---------- início: o aparelho liga ---------- */

/* A abertura é uma ficha de Pokédex: o espécime à esquerda (o hexágono de um jogo), os dados à direita. */
.abertura {
  position: relative; overflow: hidden;
  min-height: calc(100svh - var(--topo) - var(--degrau) - var(--moldura));
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(28px, 5vw, 88px);
  padding: var(--e4) var(--margem) var(--e5);
  border-radius: calc(var(--raio-tela) - var(--moldura)) calc(var(--raio-tela) - var(--moldura)) 0 0;
}
/* as duas tampas escuras se afastam do meio: a tela acende */
.js .abertura::before, .js .abertura::after {
  content: ""; position: absolute; left: 0; right: 0; height: 50.5%; z-index: 4; pointer-events: none;
  background: var(--noite);
  animation: abrir-tampa 0.85s cubic-bezier(0.7, 0, 0.2, 1) 0.25s both;
}
.js .abertura::before { top: 0; border-bottom: 3px solid var(--amarelo); --para: -102%; }
.js .abertura::after { bottom: 0; border-top: 3px solid var(--amarelo); --para: 102%; }
@keyframes abrir-tampa { to { transform: translateY(var(--para)); } }

.abertura-visor { justify-self: center; width: min(100%, 70svh, 600px); padding: clamp(30px, 4.4vw, 54px) clamp(46px, 6.2vw, 78px) var(--e2); }
.abertura-leitura {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px;
  margin-top: clamp(26px, 3.6vw, 40px); padding-top: 10px; border-top: 2px dashed var(--tela-linha);
  font-family: var(--ponto); font-size: 1rem; line-height: 1.3;
}
.abertura-leitura span:last-child { margin-left: auto; }
.marca-gigante { font-size: clamp(3.3rem, 8vw, 8.4rem); letter-spacing: -0.02em; line-height: 0.92; margin-left: -0.04em; }
.abertura-lema { margin-top: clamp(14px, 2.4vh, 26px); font-size: clamp(1.35rem, 2.3vw, 2.05rem); font-weight: 700; line-height: 1.22; max-width: 22ch; }
.abertura-legenda { margin-top: var(--e3); padding-top: var(--e2); border-top: var(--traco) solid var(--tinta); font-size: var(--t-pequeno); line-height: 1.5; max-width: 40ch; }
.abertura-legenda a { font-weight: 800; }
.abertura-legenda p + p { margin-top: 4px; color: var(--tinta-suave); }
/* o teclado azul do aparelho: cada tecla põe um perfil na tela */
.abertura-teclas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 34rem; margin-top: var(--e3); }
.abertura-teclas button {
  min-height: 3.1rem; padding: 6px 10px 7px; font-size: var(--t-menor); font-weight: 800; line-height: 1.2;
  background: var(--azul); color: #fff; border: var(--traco) solid var(--tinta); border-radius: 12px; box-shadow: 0 4px 0 var(--tinta);
  cursor: pointer; transition: transform 0.18s var(--suave), box-shadow 0.18s var(--suave), background-color 0.2s, color 0.2s;
}
.abertura-teclas button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--tinta); }
.abertura-teclas button[aria-pressed="true"] { background: var(--amarelo); color: var(--tinta); transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
html:not(.js) .abertura-teclas { display: none; }
@media (max-width: 860px) {
  .abertura { grid-template-columns: 1fr; align-content: center; gap: var(--e3); padding-top: var(--e3); }
  .abertura-visor { width: min(100%, 44svh, 400px); padding: 30px 48px 12px; }
  .abertura-leitura { margin-top: 24px; font-size: 0.9rem; }
  .marca-gigante { font-size: clamp(3rem, 15.5vw, 5.4rem); }
  .abertura-teclas { gap: 8px; }
  .abertura-teclas button { min-height: 2.9rem; padding-inline: 6px; font-size: 0.8rem; }
}

/* ---------- início: as regiões, lado a lado ---------- */

.travessia .palco { justify-content: flex-start; }
.trilho { width: 100%; align-items: center; gap: clamp(20px, 3vw, 48px); padding-left: var(--margem); padding-top: calc(var(--topo) + 8px); }
.trilho::after { content: ""; flex: 0 0 var(--margem); }
.folha-intro { flex: 0 0 min(78vw, 440px); }
.folha-intro h2 { margin-bottom: var(--e3); }

/* Cada região é um cartão de duas metades: os dados de um lado, a carta do outro.
 * A carta aparece inteira, na proporção dela; é a largura do cartão que se ajusta. */
.folha {
  --borda: clamp(16px, 2.2vw, 30px);
  --alto: calc(min(74svh, 680px) - 2 * var(--borda));
  flex: 0 0 auto; max-width: 100%;
  height: min(74svh, 680px);
  display: grid; grid-template-columns: clamp(240px, 21vw, 320px) auto; gap: clamp(20px, 2.6vw, 40px);
  align-items: center;
  padding: var(--borda);
  border-radius: 22px; box-shadow: 7px 7px 0 var(--tinta);
}
.folha .carta-caixa { width: min(46vw, 640px, calc(var(--alto) * var(--proporcao))); }
.folha-texto-coluna { display: grid; gap: clamp(10px, 1.8vh, 20px); align-content: center; min-width: 0; }
.folha-geracao { justify-self: start; padding: 1px 11px 2px; font-size: var(--t-menor); font-weight: 800; background: var(--tinta); color: var(--branco); border-radius: 999px; }
.folha-nome { font-size: clamp(2.2rem, 3.5vw, 3.3rem); letter-spacing: -0.02em; line-height: 1; }
.folha-nome a { text-decoration: none; }
.folha-nome a:hover { text-decoration: underline; text-decoration-color: var(--vermelho); text-decoration-thickness: 4px; text-underline-offset: 0.12em; }
.folha-inspiracao { margin-top: 4px; font-weight: 700; }
.folha-texto { font-size: 1.02rem; line-height: 1.5; }
.folha-iniciais { display: flex; gap: 8px; }
.folha-iniciais .prancha { width: 31%; max-width: 96px; }
.folha-jogos { display: grid; gap: 4px; }
.folha-jogos a { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 10px; text-decoration: none; }
.folha-jogos .hex-nome { font-size: var(--t-pequeno); }
.folha-jogos .hex-meta { display: inline; }
.folha-jogos a > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; line-height: 1.2; }
.folha-jogos a:hover .hex-nome { text-decoration: underline; text-decoration-color: var(--vermelho); text-decoration-thickness: 2px; }
.perfil { width: 100%; height: 100%; min-height: 70px; align-self: end; }

/* tela baixa: o parágrafo sai para o resto caber */
@media (max-height: 760px) { .folha-texto { display: none; } }
/* tela estreita: uma coluna só, com a carta logo depois do nome */
@media (max-width: 760px) {
  .folha { flex-basis: 84vw; width: 84vw; grid-template-columns: 1fr; align-content: center; gap: 12px; }
  .folha-texto-coluna { display: contents; }
  .folha-topo { order: 1; }
  .folha .carta-caixa { order: 2; justify-self: center; width: min(100%, calc(27svh * var(--proporcao))); }
  .folha-iniciais { order: 3; }
  .folha-jogos { order: 4; }
  .folha-texto { display: none; }
  .folha-nome { font-size: 2.1rem; }
  .folha-iniciais .prancha { max-width: 78px; }
  .folha-jogos a { grid-template-columns: 38px 1fr; }
}

/* ---------- início: os números e a régua de anos ---------- */

.tempo { padding: var(--e7) var(--margem); }
.tempo-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e5); align-items: start; }
.tempo-texto h2 { margin-bottom: var(--e3); }
.tempo-texto .botao { margin-top: var(--e4); }
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4) var(--e3); }
/* os números são a leitura da tela: letra de pontos, sem enfeite */
.numeros dd { font-family: var(--ponto); font-size: clamp(4rem, 9.2vw, 8.4rem); line-height: 0.86; font-variant-numeric: tabular-nums; }
.numeros dt { margin-top: 12px; font-size: var(--t-pequeno); font-weight: 700; color: var(--tinta-suave); }
.tempo-regua { margin-top: var(--e6); overflow-x: auto; }
.regua { width: 100%; min-width: 720px; height: auto; overflow: visible; }
.regua text { font: 15px var(--ponto); fill: currentColor; }
.regua-chave { margin-top: var(--e2); font-size: var(--t-menor); color: var(--tinta-suave); }
.chave { display: inline-block; width: 12px; height: 12px; margin: 0 6px 0 0; border-radius: 50%; vertical-align: -1px; border: 2px solid var(--tinta); }
.chave-cheia { background: var(--tinta); }
.chave-vazada { margin-left: var(--e2); }
@media (max-width: 820px) { .tempo-grade { grid-template-columns: 1fr; } }

/* ---------- início: o hexágono responde (pico) ---------- */

/* A tela apaga. No meio, o hexágono; em volta, os trinta perfis do atlas. Cada pedido puxa um vértice,
 * acende os jogos que vão longe naquela direção e mostra o perfil do escolhido. */
.pico { --foco: var(--amarelo); }
.pico .palco {
  display: grid; grid-template-columns: minmax(280px, 34%) minmax(0, 1fr); gap: var(--e5);
  align-items: center; justify-content: stretch;
  padding: calc(var(--topo) + var(--degrau) + 14px) var(--margem) 30px;
}
.pico-visor { position: relative; justify-self: center; width: min(100%, 76svh, 760px); aspect-ratio: 1; }
.pico-hex { position: absolute; inset: 21%; width: auto; }
.pico .hex-eixo { background: var(--noite); color: var(--tela); border-color: rgb(241 245 234 / 0.45); }
.pico .hex-eixo.ativo { background: var(--amarelo); color: var(--tinta); border-color: var(--amarelo); }
.pico-jogos li {
  position: absolute; width: 8.4%; aspect-ratio: 1;
  transform: translate(-50%, -50%); opacity: var(--brilho, 0.32);
  transition: opacity 0.5s ease, transform 0.5s var(--suave); will-change: opacity, transform;
}
.pico-jogos li::after { content: ""; position: absolute; inset: -16%; border: 2px solid var(--amarelo); border-radius: 50%; opacity: 0; transition: opacity 0.3s; }
.pico-jogos li.eleito { z-index: 2; transform: translate(-50%, -50%) scale(1.75); }
.pico-jogos li.eleito::after { opacity: 1; }
.pico-jogos span {
  position: absolute; left: 50%; top: 122%; translate: -50% 0; scale: 0.5715;   /* desfaz o aumento do escolhido: o nome não cresce com ele */
  transform-origin: 50% 0; padding: 2px 9px 3px;
  font-size: var(--t-menor); font-weight: 800; line-height: 1.2; white-space: nowrap;
  background: var(--amarelo); color: var(--tinta); border-radius: 999px;
  opacity: 0; transition: opacity 0.3s;
}
.pico-jogos .nome-esquerda span { left: -20%; translate: 0 0; transform-origin: 0 0; }
.pico-jogos .nome-direita span { left: auto; right: -20%; translate: 0 0; transform-origin: 100% 0; }
.pico-jogos .nome-acima span { top: auto; bottom: 122%; transform-origin: 50% 100%; }
.pico-jogos .nome-acima.nome-esquerda span { transform-origin: 0 100%; }
.pico-jogos .nome-acima.nome-direita span { transform-origin: 100% 100%; }
.pico-jogos li.eleito span { opacity: 1; }

.pico-texto { order: -1; position: relative; z-index: 3; }
.pico-texto h2 { margin-bottom: var(--e3); }
.pico-abre { font-size: 1.18rem; line-height: 1.5; max-width: 30ch; }
.pico-pedidos { display: grid; }
.pico-frase, .pico-final p { font-size: clamp(1.6rem, 2.7vw, 2.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.pico-frase { color: var(--amarelo); }
.pico-resposta { margin-top: var(--e2); font-size: var(--t-texto); max-width: 30ch; }
.pico-resposta a { font-weight: 800; text-decoration-color: var(--amarelo); }
.pico-final { display: grid; gap: var(--e3); justify-items: start; }
.pico .botao { box-shadow: 0 4px 0 #000; }

/* com a rolagem ligada, cada pedido aparece na sua vez */
.pico[data-pedido] .pico-abre,
.pico[data-pedido] .pico-pedidos li,
.pico[data-pedido] .pico-final {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.5s var(--suave), visibility 0.4s;
}
.pico[data-pedido] .pico-roteiro { display: grid; }
.pico[data-pedido] .pico-pedidos { grid-area: 1 / 1; }
.pico[data-pedido="0"] .pico-abre,
.pico[data-pedido="1"] .pico-pedidos li:nth-child(1),
.pico[data-pedido="2"] .pico-pedidos li:nth-child(2),
.pico[data-pedido="3"] .pico-pedidos li:nth-child(3),
.pico[data-pedido="4"] .pico-pedidos li:nth-child(4),
.pico[data-pedido="5"] .pico-pedidos li:nth-child(5),
.pico[data-pedido="6"] .pico-pedidos li:nth-child(6),
.pico[data-pedido="7"] .pico-final { opacity: 1; visibility: visible; transform: none; }

/* sem rolagem animada (ou sem JavaScript): os seis pedidos viram uma lista e os trinta perfis ficam acesos */
.pico:not([data-pedido]) .pico-pedidos { gap: var(--e3); margin-block: var(--e3); }
.pico:not([data-pedido]) .pico-frase { font-size: 1.35rem; }
.pico:not([data-pedido]) .pico-resposta { margin-top: 4px; }
.pico:not([data-pedido]) .pico-jogos li { opacity: 1; }
.sem-movimento .pico .palco { padding-block: var(--e6); }

@media (max-width: 860px) {
  .pico .palco { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: var(--e2); padding: calc(var(--topo) + var(--degrau) + 10px) var(--margem) 22px; align-items: start; }
  .pico-texto { min-height: 13.5rem; }
  .pico-texto h2 { font-size: 1.75rem; margin-bottom: var(--e2); }
  .pico-frase, .pico-final p { font-size: 1.45rem; }
  .pico-resposta { margin-top: 10px; }
  .pico-visor { width: min(100%, 48svh); align-self: center; }
  .pico-hex { inset: 24%; }
  .pico .hex-eixo { font-size: 0.72rem; padding: 0 6px 1px; border-width: 1.5px; }
  .pico-jogos span { font-size: 0.74rem; }
  .sem-movimento .pico-visor { width: min(100%, 420px); }
}

/* ---------- início: ferramentas e fechamento ---------- */

.ferramentas { padding: var(--e7) var(--margem) var(--e6); display: grid; gap: var(--e7); }
.ferramenta { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e5); align-items: center; }
.ferramenta-comparar { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.ferramenta-texto h2 { margin-bottom: var(--e3); }
.ferramenta-texto .botao { margin-top: var(--e4); }
.mosaico { position: relative; height: clamp(330px, 42vw, 560px); }
.mosaico-item { position: absolute; }
.mosaico-item:nth-child(1) { left: 0; top: 2%; width: 30%; }
.mosaico-item:nth-child(2) { left: 33%; top: 0; width: 22%; }
.mosaico-item:nth-child(3) { left: 62%; top: 6%; width: 26%; }
.mosaico-item:nth-child(4) { left: 12%; top: 36%; width: 27%; }
.mosaico-item:nth-child(5) { left: 44%; top: 32%; width: 30%; }
.mosaico-item:nth-child(6) { left: 76%; top: 40%; width: 22%; }
.mosaico-item:nth-child(7) { left: 2%; top: 68%; width: 26%; }
.mosaico-item:nth-child(8) { left: 34%; top: 70%; width: 22%; }
.mosaico-item:nth-child(9) { left: 60%; top: 66%; width: 30%; }
.mosaico-item a { display: block; }
.mosaico-item img { width: 100%; transition: transform 0.6s var(--suave); }
.mosaico-item a:hover img { transform: translateY(-8px) scale(1.06); }
.sobreposicao { justify-self: center; width: min(100%, 520px); }
.sobreposicao-hex { position: relative; aspect-ratio: 1; }
.sobreposicao-hex img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sobreposicao figcaption { margin-top: var(--e1); font-size: var(--t-pequeno); font-weight: 700; text-align: center; }
.sobreposicao figcaption .serie-b { margin-left: var(--e3); }

.busca-inicio { margin-top: var(--e4); display: grid; gap: 7px; max-width: 30rem; }
.busca-inicio-linha { display: flex; gap: 10px; align-items: start; }
.busca-inicio input { flex: 1; min-width: 0; padding-block: 12px 13px; font-size: 1.05rem; }
.busca-inicio .botao { margin-top: 0; white-space: nowrap; }

/* o fechamento ocupa a tela inteira em amarelo: uma frase e uma tecla */
.fechamento {
  min-height: 92svh; padding: var(--e6) var(--margem);
  display: grid; place-content: center; justify-items: center; gap: var(--e4); text-align: center;
}
.fechamento h2 { font-size: clamp(2.5rem, 7vw, 6.4rem); letter-spacing: -0.035em; line-height: 0.98; max-width: 15ch; }
.fechamento .prosa { font-weight: 700; }
.fechamento .botao { background: var(--vermelho); color: #fff; }
.fechamento .botao:hover { background: #F01C40; }

@media (max-width: 820px) {
  .ferramenta, .ferramenta-comparar { grid-template-columns: 1fr; }
  .ferramenta-comparar .sobreposicao { order: -1; }
  .busca-inicio-linha { flex-direction: column; align-items: stretch; }
}

/* ---------- página de jogo ---------- */

.jogo { padding: 0 var(--margem) var(--e6); }
.jogo > section + section, .jogo-passos { margin-top: var(--e6); }
.jogo-topo { display: grid; grid-template-columns: minmax(0, 1fr) min(44vw, 560px); gap: var(--e5); align-items: center; padding-top: clamp(36px, 7vh, 80px); }
.jogo-topo h1 { font-size: clamp(2.2rem, 5vw, 4.5rem); letter-spacing: -0.03em; line-height: 1; }
.jogo-chamada { margin-top: var(--e3); font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 700; line-height: 1.3; max-width: 30ch; }
.ficha-tecnica { margin-top: var(--e4); display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--e3) var(--e4); }
.ficha-tecnica dt { font-size: var(--t-menor); font-weight: 700; color: var(--tinta-suave); }
.ficha-tecnica dd { font-weight: 800; }
/* o visor do hexágono: uma caixa branca com folga para os nomes dos eixos */
.jogo-hex, .comparar-hex, .bussola-hex {
  padding: 34px clamp(46px, 5.6vw, 72px) var(--e3);
  background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: 22px; box-shadow: 6px 6px 0 var(--tinta);
}
.jogo-hex { padding-bottom: 34px; }
.hex-do-jogo { view-transition-name: perfil; }

.jogo-leitura h2 { margin-bottom: 6px; }
.leitura-lista { margin-top: var(--e3); border-top: var(--traco) solid currentColor; }
.leitura-lista li {
  display: grid; grid-template-columns: 8.5rem auto 1.6rem minmax(0, 1fr); align-items: center; gap: var(--e3);
  padding: 13px 0; border-bottom: 2px dashed var(--tela-linha);
}
.leitura-eixo { font-weight: 800; }
.leitura-nota { font-family: var(--ponto); font-size: 1.4rem; line-height: 1; }
.leitura-texto { line-height: 1.45; }

.jogo-corpo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e5); align-items: start; }
.jogo-listas { display: grid; gap: var(--e4); }
.jogo-listas h2 { font-size: var(--t-subtitulo); margin-bottom: var(--e2); }
/* cada item tem a sua luz: verde no que conta a favor, vermelha no que pesa contra */
.lista-marcada li { position: relative; padding: 9px 0 9px 28px; border-top: 2px dashed var(--tela-linha); line-height: 1.4; }
.lista-marcada li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 13px; height: 13px; border-radius: 50%; background: var(--nivel-5); border: 2px solid var(--tinta); }
.lista-contra li::before { background: var(--nivel-1); }

.jogo-especimes h2, .jogo-vizinhas h2 { margin-bottom: var(--e3); }
.jogo-regiao { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e5); align-items: center; }
.jogo-regiao .carta-caixa { justify-self: center; width: min(100%, calc(52svh * var(--proporcao))); }
.jogo-regiao h2 { font-size: var(--t-destaque); font-weight: 700; letter-spacing: 0; color: var(--tinta-suave); }
.jogo-regiao-nome { margin: 4px 0 var(--e2); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1; }
.jogo-regiao .botao { margin-top: var(--e3); }
.pranchas { display: flex; flex-wrap: wrap; gap: clamp(16px, 4vw, 56px); }
.pranchas .prancha { width: clamp(140px, 24vw, 260px); }
.pranchas .prancha figcaption { font-size: var(--t-pequeno); }
/* anterior e próximo: duas teclas largas no pé da página */
.jogo-passos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.jogo-passos a { padding: 14px 18px 15px; text-decoration: none; font-weight: 800; line-height: 1.25; background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: var(--raio); box-shadow: 0 4px 0 var(--tinta); transition: transform 0.18s var(--suave), box-shadow 0.18s var(--suave), background-color 0.2s; }
.jogo-passos a:hover { background: var(--amarelo); transform: translateY(-2px); box-shadow: 0 6px 0 var(--tinta); }
.jogo-passos a:last-child { text-align: right; }
.jogo-passos a:only-child:last-child { grid-column: 2; }
.jogo-passos a span { display: block; font-size: var(--t-menor); font-weight: 700; color: var(--tinta-suave); }

@media (max-width: 860px) {
  .jogo-topo { grid-template-columns: 1fr; padding-top: var(--e3); gap: var(--e3); }
  .jogo-hex { order: -1; padding: 28px 50px; max-width: 440px; justify-self: center; width: 100%; }
  .ficha-tecnica { grid-template-columns: repeat(2, auto); }
  .leitura-lista li { grid-template-columns: auto 1.6rem; justify-content: start; gap: 6px var(--e2); }
  .leitura-eixo, .leitura-texto { grid-column: 1 / -1; }
  .jogo-corpo { grid-template-columns: 1fr; }
  .jogo-regiao { grid-template-columns: 1fr; gap: var(--e3); }
}

/* ---------- linha do tempo ---------- */

.filtro-linha { display: block; margin-top: var(--e2); }
.linha { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto; gap: var(--e5); padding: var(--e4) var(--margem) var(--e7); align-items: start; }
.linha-marcador { position: sticky; top: 24vh; display: grid; gap: 10px; }
.linha-marcador-ano { font-family: var(--ponto); font-size: clamp(4.4rem, 9.8vw, 9.8rem); line-height: 0.82; font-variant-numeric: tabular-nums; margin-left: -0.03em; }
.linha-marcador-console { justify-self: start; padding: 2px 13px 3px; font-size: 1.1rem; font-weight: 800; background: var(--amarelo); border: var(--traco) solid var(--tinta); border-radius: 999px; }
.linha-anos { border-left: var(--traco) solid currentColor; }
.linha-ano { position: relative; padding: calc(var(--salto) * 30px + 22px) 0 22px var(--e4); scroll-margin-top: 100px; }
/* cada ano é um nó da linha: aceso se tem jogo */
.linha-ano::before { content: ""; position: absolute; left: -9.5px; top: calc(var(--salto) * 30px + 27px); width: 16px; height: 16px; border-radius: 50%; background: var(--amarelo); border: var(--traco) solid var(--tinta); }
.linha-ano.sem-jogos:not(.linha-horizonte)::before { left: -7.5px; top: calc(var(--salto) * 30px + 29px); width: 12px; height: 12px; background: var(--tela); }
.linha-horizonte::before { background: var(--lente); }
.linha-rotulo { font-family: var(--ponto); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.linha-marco { margin-top: 8px; font-size: 1.14rem; font-weight: 700; line-height: 1.4; max-width: 44ch; }
.linha-estreia { margin-top: 6px; font-size: var(--t-menor); color: var(--tinta-suave); }
.linha-jogos { margin-top: var(--e2); display: grid; gap: var(--e2); }
.linha-jogos li[hidden] { display: none; }
.linha-jogos a { display: grid; grid-template-columns: clamp(84px, 11vw, 132px) minmax(0, 1fr); gap: var(--e3); align-items: center; text-decoration: none; }
.linha-jogos .hex { transition: transform 0.6s var(--suave); }
.linha-jogos a:hover .hex { transform: scale(1.08) rotate(6deg); }
.linha-jogos a:hover .hex-nome { text-decoration: underline; text-decoration-color: var(--vermelho); text-decoration-thickness: 3px; }
.linha-jogos .hex-nome { font-size: var(--t-destaque); }
.linha-chamada { display: block; margin-top: 4px; line-height: 1.45; max-width: 48ch; }
.linha-ano.sem-jogos:not(.linha-horizonte) .linha-rotulo { color: var(--tinta-suave); }
.linha-indice { position: sticky; top: 24vh; display: grid; gap: 1px; font-family: var(--ponto); font-size: 1rem; line-height: 1.15; }
.linha-indice a { padding: 1px 0 1px 16px; text-decoration: none; opacity: 0.7; position: relative; }
.linha-indice a:hover { opacity: 1; }
.linha-indice a.atual { opacity: 1; }
.linha-indice a.atual::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right: 0; border-left: 9px solid var(--vermelho); }

@media (max-width: 860px) {
  .linha { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .linha-marcador { top: calc(var(--topo) + var(--degrau)); z-index: 5; grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--e2); margin-inline: calc(var(--margem) * -1); padding: 8px var(--margem); background: var(--tela); border-bottom: var(--traco) solid currentColor; }
  .linha-marcador-ano { font-size: 2.3rem; line-height: 1; }
  .linha-marcador-console { font-size: 0.95rem; }
  .linha-anos { margin-top: var(--e3); margin-left: 9px; }
  .linha-ano { padding-left: var(--e3); scroll-margin-top: 150px; }
  .linha-indice { display: none; }
  .linha-jogos a { gap: var(--e2); }
}

/* ---------- comparar ---------- */

.comparar { padding: var(--e3) var(--margem) var(--e7); display: grid; gap: var(--e5); }
.comparar-escolha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.comparar-grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e5); align-items: center; }
.comparar-hex { justify-self: center; width: min(100%, 640px); }
.comparar-chave { margin-top: var(--e4); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px var(--e3); font-size: var(--t-pequeno); font-weight: 700; }
.comparar-dados h2 { font-size: var(--t-subtitulo); margin-bottom: var(--e3); }
.hastes { display: grid; }
.haste { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: var(--e2); padding: 12px 0; border-top: 2px dashed var(--tela-linha); }
.haste-eixo { font-weight: 800; font-size: var(--t-pequeno); }
.haste-trilho { position: relative; height: 34px; margin-inline: 10px; }
.haste-trilho::before { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 10px; margin-top: -5px; background: var(--tela-funda); border: 2px solid var(--tela-linha); border-radius: 999px; }
.haste-marca { position: absolute; top: 50%; width: 2px; height: 6px; margin: -3px 0 0 -1px; background: var(--tela-linha); }
.haste-ponto {
  position: absolute; top: 50%; width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px;
  border-radius: 50%; background: var(--cor); border: var(--traco) solid var(--tinta);
  transition: left 0.6s var(--suave), transform 0.6s var(--suave);
}
.haste-ponto[data-serie="b"] { border-radius: 4px; }
.haste-ponto[data-serie="c"] { border-radius: 3px; rotate: 45deg; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.haste-escala { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--e2); font-family: var(--ponto); font-size: 1rem; color: var(--tinta-suave); padding-bottom: 6px; }
.haste-escala div { position: relative; height: 1.3em; margin-inline: 10px; }
.haste-escala div span { position: absolute; transform: translateX(-50%); }
.comparar-dados .nota-editorial { margin-top: var(--e2); }
.comparar-veredito { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e3); }
/* cada veredito traz no alto a faixa da cor da sua série */
.veredito { padding: calc(var(--e3) + 10px) var(--e3) var(--e3); box-shadow: inset 0 12px 0 var(--cor), 5px 5px 0 var(--tinta); }
.veredito h3 { font-size: var(--t-destaque); margin-bottom: 8px; line-height: 1.2; }
.veredito p { line-height: 1.5; }
.veredito a { font-size: var(--t-pequeno); font-weight: 700; display: inline-block; margin-top: var(--e2); }
.comparar-tabela h2 { font-size: var(--t-subtitulo); margin-bottom: var(--e2); }
.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-pequeno); }
th, td { padding: 12px var(--e2) 12px 0; text-align: left; vertical-align: top; border-top: 2px dashed var(--tela-linha); }
thead th { border-top: 0; border-bottom: var(--traco) solid currentColor; font-size: var(--t-texto); font-weight: 800; min-width: 11rem; }
thead + tbody tr:first-child :is(th, td) { border-top: 0; }
tbody th { font-weight: 700; color: var(--tinta-suave); white-space: nowrap; }
td { font-weight: 700; }
td.frase { font-weight: 500; line-height: 1.45; }

@media (max-width: 860px) {
  .comparar-escolha, .comparar-grade { grid-template-columns: 1fr; }
  .comparar-hex { padding: 28px 50px var(--e2); }
  .haste, .haste-escala { grid-template-columns: 6.4rem minmax(0, 1fr); }
}

/* ---------- bússola ---------- */

.bussola {
  display: grid; grid-template-columns: minmax(0, 1fr) min(44vw, 560px); gap: var(--e5); align-items: center;
  min-height: calc(100svh - var(--topo) - var(--degrau) - var(--moldura)); padding: var(--e4) var(--margem) var(--e5);
}
.bussola-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.bussola-topo h1 { font-size: clamp(2.5rem, 5.6vw, 5rem); }
.bussola-passo { padding: 2px 13px 3px; font-size: var(--t-pequeno); font-weight: 800; font-variant-numeric: tabular-nums; background: var(--tinta); color: var(--branco); border-radius: 999px; }
.bussola-pergunta h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.1; margin-bottom: var(--e3); max-width: 20ch; }
.bussola-pergunta h2:focus { outline: none; }
/* as respostas são o menu de escolha dos jogos: a seta aponta a opção sob o ponteiro ou o foco */
.opcoes { display: grid; gap: 10px; max-width: 36rem; }
.opcao {
  position: relative; width: 100%; padding: 13px 18px 14px 44px; text-align: left;
  font-size: 1.1rem; font-weight: 700; line-height: 1.3;
  background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: var(--raio); cursor: pointer;
  transition: background-color 0.2s, transform 0.25s var(--suave);
}
.opcao::before {
  content: ""; position: absolute; left: 17px; top: 50%; margin-top: -8px;
  border: 8px solid transparent; border-right: 0; border-left: 12px solid var(--tinta);
  opacity: 0; transform: translateX(-7px); transition: opacity 0.15s, transform 0.25s var(--suave);
}
.opcao:is(:hover, :focus-visible, [aria-pressed="true"])::before { opacity: 1; transform: none; }
.opcao:hover { background: #FFF6CC; transform: translateX(4px); }
.opcao[aria-pressed="true"] { background: var(--amarelo); }
.bussola-pergunta.saindo { opacity: 0; transform: translateY(-10px); transition: opacity 0.2s, transform 0.2s; }
.bussola-pergunta.entrando { animation: entrar 0.45s var(--suave); }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } }
.bussola-acoes { margin-top: var(--e3); min-height: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--e3); }
.bussola[data-estado="resultado"] .bussola-atalho { display: none; }
.bussola-hex figcaption { margin-top: var(--e4); padding-top: 10px; border-top: 2px dashed var(--tela-linha); font-size: 1.02rem; font-weight: 700; text-align: center; min-height: 3.4em; }

.resultado { padding: var(--e5) var(--margem) var(--e7); }
.resultado h2 { font-size: clamp(2.2rem, 5.6vw, 5rem); letter-spacing: -0.03em; line-height: 0.98; margin-bottom: var(--e3); }
.resultado h2:focus { outline: none; }
.resultado-lista { margin-top: var(--e5); display: grid; gap: var(--e5); }
.resultado-lista > li { display: grid; grid-template-columns: min(34vw, 340px) minmax(0, 1fr); gap: var(--e5); align-items: center; padding-top: var(--e4); border-top: var(--traco) solid currentColor; }
.resultado-ordem { display: inline-block; padding: 1px 12px 2px; font-size: var(--t-pequeno); font-weight: 800; background: var(--tinta); color: var(--branco); border-radius: 999px; }
.resultado-lista > li:first-child .resultado-ordem { background: var(--amarelo); color: var(--tinta); box-shadow: 0 0 0 var(--traco) var(--tinta); }
.resultado-lista h3 { font-size: clamp(1.7rem, 3.4vw, 2.8rem); letter-spacing: -0.025em; margin: 10px 0; }
.resultado-lista h3 a { text-decoration: none; }
.resultado-lista h3 a:hover { text-decoration: underline; text-decoration-color: var(--vermelho); text-decoration-thickness: 4px; }
.resultado-chamada { font-size: 1.2rem; font-weight: 700; line-height: 1.35; max-width: 44ch; }
.resultado-porque { margin-top: var(--e3); max-width: 60ch; }
.resultado-porque h4 { margin: 0 0 4px; font-size: var(--t-pequeno); font-weight: 800; }
.resultado-atencao { margin-top: var(--e2); line-height: 1.5; max-width: 58ch; }
.resultado-atencao strong { font-size: var(--t-pequeno); }
.resultado-ligacoes { margin-top: var(--e3); display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center; }
.resultado-chave { margin-top: 14px; font-size: var(--t-menor); text-align: center; color: var(--tinta-suave); }
.resultado-chave .serie { border-top-color: var(--vermelho); width: 20px; }
.resultado-acoes { margin-top: var(--e5); display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.resultado-lista .hex-vivo { padding: 0; }

@media (max-width: 860px) {
  .bussola { grid-template-columns: 1fr; gap: var(--e3); padding-top: var(--e3); align-items: start; }
  .bussola-hex { order: -1; max-width: 330px; width: 100%; justify-self: center; padding: 26px 48px 10px; }
  .bussola-hex figcaption { margin-top: 22px; font-size: 0.95rem; min-height: 3.2em; }
  .bussola-topo { margin-bottom: var(--e2); }
  .bussola-topo h1 { font-size: 2rem; }
  .resultado-lista > li { grid-template-columns: 1fr; gap: var(--e3); }
  .resultado-lista .hex-vivo { max-width: 280px; margin-inline: auto; }
}

/* ---------- Pokédex: a gaveta de espécies (na página de jogo e na lista geral) ---------- */

.jogo-pokedex h2 { margin-bottom: 6px; }
.jogo-pokedex .nota-editorial { max-width: 78ch; }
.dex-controles { display: grid; gap: 12px; margin-top: var(--e3); padding-bottom: var(--e2); border-bottom: var(--traco) solid currentColor; }
.dex-conta { font-weight: 500; opacity: 0.8; font-variant-numeric: tabular-nums; }
.dex-resumo { display: flex; align-items: baseline; gap: var(--e3); }
.dex-resumo strong { font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }

.gaveta { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--e3) 6px; margin-top: var(--e4); }
.gaveta[hidden], .gaveta li[hidden] { display: none; }
.gaveta a { display: grid; justify-items: center; text-align: center; text-decoration: none; line-height: 1.2; }
.dex-arte { position: relative; width: 92px; height: 92px; }
.dex-arte img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.35s ease, transform 0.5s var(--suave); }
.dex-arte .cor { opacity: 0; }
.gaveta a:hover .cor, .gaveta a:focus-visible .cor { opacity: 1; transform: scale(1.1); }
/* quem recebe o ponteiro dá um pulinho: o desenho da tela vira bicho */
.gaveta a:is(:hover, :focus-visible) .dex-arte, .elenco a:is(:hover, :focus-visible) img { animation: pulinho 0.6s var(--suave) 1; }
@keyframes pulinho { 0%, 100% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 -11%; rotate: -3deg; } 55% { translate: 0 0; rotate: 1.5deg; } 74% { translate: 0 -4%; rotate: 0deg; } }
.gaveta a:hover img:not(.cor), .gaveta a:focus-visible img:not(.cor) { opacity: 0; }
.dex-numero { margin-top: 4px; font-family: var(--ponto); font-size: 1rem; line-height: 1.1; color: var(--tinta-suave); }
.dex-nome { font-size: var(--t-menor); font-weight: 800; overflow-wrap: anywhere; }
.gaveta a:hover .dex-nome { text-decoration: underline; text-decoration-color: var(--vermelho); text-decoration-thickness: 2px; }
.dex-tipos { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 4px; }
.dex-tipos .tipo { padding: 0 7px 1px; font-size: 0.68rem; border-width: 1.5px; }
.dex-forma { font-size: 0.74rem; color: var(--tinta-suave); }
/* a lista abre recolhida: três fileiras no computador, seis no celular */
.recolhida .gaveta li:nth-child(n + 34) { display: none; }
.dex-mais { margin-top: var(--e4); }

@media (max-width: 720px) {
  .gaveta { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--e2) 2px; }
  .dex-arte { width: 80px; height: 80px; }
  .recolhida .gaveta li:nth-child(n + 19) { display: none; }
  .dex-controles .filtro-opcoes { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--margem) * -1); padding: 4px var(--margem) 8px; scrollbar-width: none; }
}

.pokedex-geral { padding: var(--e3) var(--margem) var(--e7); }
.pokedex-geral .dex-controles { margin-top: 0; }
.dex-geracao { margin-top: var(--e6); }
.dex-geracao[hidden] { display: none; }
.dex-geracao h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--e3); font-size: var(--t-subtitulo); }
.dex-geracao h2 span { font-size: var(--t-pequeno); font-weight: 700; letter-spacing: 0; color: var(--tinta-suave); }
.dex-geracao .gaveta { margin-top: var(--e3); }

/* ---------- regiões ---------- */

.regioes { padding: var(--e3) var(--margem) var(--e7); }
/* Cada caixa tem a forma da própria carta; a grade só alinha as legendas pela base. */
.regioes-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5) var(--e4); align-items: end; }
.regioes-lista > li { display: grid; gap: 4px; justify-items: start; }
.regioes-lista .carta-caixa { --teto: clamp(220px, 23vw, 330px); width: min(100%, calc(var(--teto) * var(--proporcao))); margin-bottom: var(--e1); }
.regioes-alta { grid-row: span 2; }
.regioes-alta .carta-caixa { --teto: clamp(480px, 50vw, 720px); }
.regioes-nome { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; text-decoration: none; }
.regioes-nome:hover { text-decoration: underline; text-decoration-color: var(--vermelho); text-decoration-thickness: 4px; text-underline-offset: 0.12em; }
.regioes-chave { align-self: stretch; align-content: center; gap: var(--e2); padding: var(--e3); }
.regioes-chave h2 { font-size: var(--t-destaque); letter-spacing: 0; }
.regioes-chave dl { display: grid; gap: 10px; width: 100%; }
.regioes-chave dl div { display: grid; grid-template-columns: 76px 1fr; gap: var(--e2); align-items: center; }
.regioes-chave dd { font-size: var(--t-pequeno); font-weight: 700; }
.regioes-chave svg { width: 44px; height: 14px; overflow: visible; }
.regioes-chave p { font-size: var(--t-menor); color: var(--tinta-suave); }
.chave-faixas { display: flex; width: 70px; height: 14px; border: 2px solid var(--tinta); border-radius: 4px; overflow: hidden; }
.chave-faixas span { flex: 1; }
.chave-rota { fill: none; stroke: var(--vermelho); stroke-width: 2.5; stroke-dasharray: 6 4; stroke-linecap: round; }
.chave-cidade { fill: var(--branco); stroke: var(--tinta); stroke-width: 2.5; }
.chave-marco { fill: var(--tinta); }
@media (max-width: 1000px) { .regioes-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .regioes-lista { grid-template-columns: 1fr; }
  .regioes-alta { grid-row: auto; }
  .regioes-lista .carta-caixa { --teto: 62svh; }
  .regioes-alta .carta-caixa { --teto: 66svh; }
}

.regiao { padding-bottom: var(--e6); }
.regiao > section, .regiao > .jogo-passos { margin: var(--e6) var(--margem) 0; }
.regiao .cabecalho { gap: var(--e2); }
.regiao-meta { font-size: 1.3rem; font-weight: 700; }
.regiao > .regiao-carta { margin-top: var(--e3); }

.carta-grande { width: 100%; max-width: calc(88svh * var(--proporcao)); margin-inline: auto; overflow: visible; }
.carta-grande .t-rotas path { stroke-width: 4px; stroke-dasharray: 12 7; transition: stroke 0.2s, stroke-width 0.2s; }
.carta-grande .t-rotas path.ativo { stroke: var(--tinta); stroke-width: 7px; stroke-dasharray: none; }
.carta figcaption { margin: var(--e2) auto 0; max-width: 78ch; font-size: var(--t-menor); color: var(--tinta-suave); text-align: center; }
.carta-pontos { position: absolute; inset: 0; }
.ponto { position: absolute; width: 0; height: 0; }
.ponto-marca {
  position: absolute; left: -11px; top: -11px; width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--branco); color: var(--tinta); border: 2px solid var(--tinta); border-radius: 50%;
}
.ponto-marco .ponto-marca, .legenda-marco .ponto-marca { background: var(--tinta); color: var(--branco); border-radius: 5px; }
.ponto-nome {
  position: absolute; white-space: nowrap;
  font-size: 0.86rem; font-weight: 800; line-height: 1;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff, 0 0 1px #fff;
}
.ponto-marco .ponto-nome { font-weight: 700; }
.lado-d .ponto-nome { left: 16px; top: -0.5em; }
.lado-e .ponto-nome { right: 16px; top: -0.5em; }
.lado-c .ponto-nome { left: 0; bottom: 15px; transform: translateX(-50%); }
.lado-b .ponto-nome { left: 0; top: 15px; transform: translateX(-50%); }
.ponto-area {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--ponto); font-size: 1.06rem; letter-spacing: 0.06em; color: var(--tinta);
  text-shadow: 0 0 4px #fff, 0 0 4px #fff;
}
.rota-numero {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 0 6px 1px; font-size: 0.7rem; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums;
  color: var(--vermelho-fundo); background: var(--branco); border: 2px solid var(--vermelho); border-radius: 999px;
}
.rota-numero, .ponto-marca { cursor: default; transition: transform 0.25s var(--suave), background-color 0.2s, color 0.2s; }
.rota-numero.ativo { background: var(--vermelho); color: #fff; transform: translate(-50%, -50%) scale(1.25); z-index: 4; }
.ponto.ativo { z-index: 5; }
.ponto.ativo .ponto-marca { transform: scale(1.35); background: var(--amarelo); color: var(--tinta); }
.ponto.ativo .ponto-nome { display: block; background: var(--branco); padding: 3px 7px; border-radius: 6px; box-shadow: 0 0 0 2px var(--tinta); text-shadow: none; }
.legenda-lista li, .rotas-lista li { transition: background-color 0.2s; }
.legenda-lista li.ativo, .rotas-lista li.ativo { background: var(--amarelo); }
.legenda-rotas { margin-top: var(--e5); }
.rotas-lista { columns: 3 16rem; column-gap: var(--e4); }
.rotas-lista li { break-inside: avoid; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: var(--e2); align-items: baseline; padding: 7px 4px; border-top: 2px dashed var(--tela-linha); }
.rota-n { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--vermelho-fundo); }
.rota-sem { font-size: var(--t-menor); color: var(--tinta-suave); }
.carta-legenda { margin-top: var(--e5); }
.carta-legenda h2 { font-size: var(--t-subtitulo); margin-bottom: var(--e2); }
.carta-legenda .prosa { margin-top: var(--e1); }
.carta-legenda .nota-editorial { margin-top: var(--e2); }
.legenda-lista { columns: 4 12rem; column-gap: var(--e4); }
.legenda-lista li { position: relative; break-inside: avoid; padding: 7px 4px 7px 34px; font-weight: 700; border-top: 2px dashed var(--tela-linha); }
.legenda-lista .ponto-marca { left: 4px; top: 8px; }
.legenda-marco { font-weight: 500; }

.regiao-iniciais h2, .regiao-jogos h2 { margin-bottom: var(--e3); }
.regiao-jogos .estante-curta { padding-top: var(--e2); }
.regiao-perfil { margin-top: var(--e6); height: clamp(110px, 16vw, 220px); }
.regiao-perfil .perfil { min-height: 0; }

/* carta mais alta que larga (Galar): carta e lista lado a lado */
@media (min-width: 900px) {
  .regiao-alta .regiao-carta { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: var(--e5); align-items: start; }
  .regiao-alta .carta-grande { max-width: none; }
  .regiao-alta .carta-legenda { margin-top: 0; }
  .regiao-alta .legenda-lista { columns: 2 11rem; }
  .regiao-alta .rotas-lista { columns: 1; }
}
/* em tela estreita os nomes saem da carta: ficam os números, e a lista logo abaixo */
@media (max-width: 900px) {
  .ponto-nome, .rota-numero { display: none; }
  .ponto-marca { left: -9px; top: -9px; width: 18px; height: 18px; font-size: 0.62rem; border-width: 1.5px; }
  .ponto-area { font-size: 0.84rem; letter-spacing: 0.03em; }
  .legenda-lista .ponto-marca { left: 4px; top: 8px; width: 22px; height: 22px; font-size: 0.7rem; }
  .regiao-meta { font-size: 1.15rem; }
}

/* ---------- a carta de uma região (peça comum) ---------- */

/* A caixa tem sempre a proporção da carta: a página dá a largura e a altura acompanha. É a tela do mapa. */
.carta-caixa { position: relative; display: block; aspect-ratio: var(--proporcao); overflow: hidden; background: var(--agua); border: var(--traco) solid var(--tinta); border-radius: var(--raio); }
.carta-terreno { position: absolute; inset: 0; width: 100%; height: 100%; }
.carta-tracos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* a espessura dos traços é medida na tela, não na carta: fica igual do selo pequeno à carta grande */
.t-rotas path { fill: none; stroke: var(--vermelho); stroke-width: 2.4px; stroke-dasharray: 7 4.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.t-revela { fill: none; stroke: #fff; stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.t-cidade { fill: var(--branco); stroke: var(--tinta); stroke-width: 1.8px; vector-effect: non-scaling-stroke; }
.t-marco { fill: var(--tinta); }
.t-cidade, .t-marco { transform-box: fill-box; transform-origin: center; }
a.carta-caixa .carta-terreno, a.carta-caixa .carta-tracos { transition: transform 0.9s var(--suave); }
a.carta-caixa:hover .carta-terreno, a.carta-caixa:hover .carta-tracos { transform: scale(1.035); }

/* A carta se desenha quando entra na tela: as rotas correm pelo traçado e os lugares surgem um a um.
 * Sem JavaScript, ou com movimento reduzido, ela já aparece pronta. */
.js .carta-caixa:not(.desenhada) .t-revela { stroke-dashoffset: 1; }
.js .carta-caixa:not(.desenhada) .t-lugares > * { opacity: 0; transform: scale(0.2); }
.carta-caixa.desenhada .t-revela { transition: stroke-dashoffset 2.4s cubic-bezier(0.3, 0.1, 0.2, 1) 0.15s; }
.carta-caixa.desenhada .t-lugares > * { transition: opacity 0.35s ease, transform 0.6s var(--suave); transition-delay: calc(0.5s + var(--i) * 45ms); }

/* ---------- Pokédex: a página de uma espécie ---------- */

.especie { padding: 0 var(--margem) var(--e6); }
.especie > section + section, .especie > .jogo-passos { margin-top: var(--e6); }
.especie h2 { margin-bottom: 6px; }
.especie-topo { display: grid; grid-template-columns: minmax(0, 1fr) min(40vw, 460px); gap: var(--e5); align-items: center; padding-top: clamp(36px, 7vh, 80px); }
.especie-numero { font-family: var(--ponto); font-size: var(--t-subtitulo); line-height: 1.1; color: var(--tinta-suave); }
.especie-topo h1 { margin-left: -0.03em; font-size: clamp(2.7rem, 7.6vw, 6.6rem); letter-spacing: -0.035em; line-height: 0.98; overflow-wrap: anywhere; }
.especie-categoria { margin-top: var(--e2); font-size: clamp(1.2rem, 1.9vw, 1.6rem); font-weight: 700; }
.especie-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--e3); }
.especie-tipos .tipo { padding: 5px 18px 6px; font-size: var(--t-texto); border-width: var(--traco); }
.especie-grito { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--e2); margin-top: var(--e3); }
/* enquanto o grito toca, a tecla fica afundada e acesa */
[data-grito].tocando { background: var(--amarelo); transform: translateY(3px); box-shadow: 0 0 0 var(--tinta); }
.especie-prancha .prancha-arte { view-transition-name: especie; }
/* A prancha da espécie: o desenho em uma cor é impresso na chegada, seguindo o ângulo da trama; depois o
 * espécime flutua devagar sobre a sua base, como em campo, e se inclina para o ponteiro. */
@property --impressa { syntax: "<percentage>"; inherits: false; initial-value: 130%; }
.especie-prancha .prancha-gravura { -webkit-mask-image: linear-gradient(128deg, #000 calc(var(--impressa) - 14%), transparent var(--impressa)); mask-image: linear-gradient(128deg, #000 calc(var(--impressa) - 14%), transparent var(--impressa)); }
.especie-prancha .gravada .prancha-gravura { animation: imprimir 1.25s cubic-bezier(0.3, 0, 0.2, 1) 1 both; }
/* até o desenho chegar, a miniatura faz as vezes de esboço */
.js .especie-prancha .prancha-rascunho { opacity: 0.4; }
.js .especie-prancha .gravada .prancha-rascunho { opacity: 0; transition: opacity 0.5s ease 0.8s; }
.js .especie-prancha:is(:hover, :focus-visible, .revelada) .prancha-rascunho { opacity: 0; transition-delay: 0s; }
@keyframes imprimir { from { --impressa: 0%; } to { --impressa: 130%; } }
.especie-prancha { position: relative; isolation: isolate; perspective: 900px; }
.especie-prancha::before { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: 5%; height: 15%; border-radius: 50%; background: var(--tela-funda); border: 2px solid var(--tela-linha); }
.especie-prancha .prancha-arte { animation: flutuar 6.5s ease-in-out infinite; transform: rotateY(calc(var(--ix, 0) * 9deg)) rotateX(calc(var(--iy, 0) * -9deg)); transform-style: preserve-3d; transition: transform 0.5s var(--suave); }
.especie-prancha .prancha-cor { translate: calc(var(--ix, 0) * 10px) calc(var(--iy, 0) * 10px); }
@keyframes flutuar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.8%; } }

/* os atributos são barras de vida: o trilho fundo, a barra na cor da faixa em que o valor cai */
.atributos-lista { margin-top: var(--e3); max-width: 54rem; border-top: var(--traco) solid currentColor; }
.atributos-lista li { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr) 3.2rem; align-items: center; gap: var(--e3); padding: 11px 0; border-bottom: 2px dashed var(--tela-linha); }
.atributo-nome { font-weight: 800; }
.atributo-trilho { height: 17px; padding: 2px; background: var(--tela-funda); border: 2px solid var(--tinta); border-radius: 999px; }
.atributo-barra { display: block; height: 100%; min-width: 8px; border-radius: 999px; }
.faixa-1 { background: var(--nivel-1); }
.faixa-2 { background: var(--nivel-2); }
.faixa-3 { background: var(--nivel-3); }
.faixa-4 { background: var(--nivel-4); }
.faixa-5 { background: var(--nivel-5); }
.atributo-valor { text-align: right; font-family: var(--ponto); font-size: 1.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.atributo-total { border-bottom: 0; }
.atributos-mais { margin-top: var(--e3); }

.ficha-larga { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); justify-content: stretch; margin-top: var(--e3); }
.especie-ficha .nota-editorial { margin-top: var(--e3); }

.evolucao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); margin-top: var(--e3); }
.estagio { position: relative; }
.estagio + .estagio::before { content: ""; position: absolute; left: calc(var(--e5) * -0.5 - 6px); top: 50%; margin-top: -9px; border: 9px solid transparent; border-left: 13px solid var(--tinta); border-right: 0; }
.estagio ul { display: flex; flex-wrap: wrap; gap: var(--e2) 4px; max-width: 30rem; }
.evolucao-item { display: grid; justify-items: center; width: 116px; text-align: center; text-decoration: none; line-height: 1.2; }
.evolucao-item .dex-nome { margin-top: 4px; }
a.evolucao-item:hover .dex-nome { text-decoration: underline; text-decoration-color: var(--vermelho); text-decoration-thickness: 2px; }
.evolucao-item[aria-current] .dex-nome { padding: 0 9px 1px; background: var(--amarelo); border: 2px solid var(--tinta); border-radius: 999px; }
.evolucao-como { font-size: 0.86rem; color: var(--tinta-suave); }
a.evolucao-item:hover .cor { opacity: 1; }
a.evolucao-item:hover img:not(.cor) { opacity: 0; }

.especie-curiosidades .lista-marcada { max-width: 54rem; margin-top: var(--e3); font-size: 1.1rem; }
.especie-curiosidades .lista-marcada li::before { background: var(--amarelo); }
.especie-curiosidades .nota-editorial { margin-top: var(--e2); }
/* a entrada da Pokédex vem na caixa de texto dos jogos, com a setinha de "continua" no canto */
.entrada { position: relative; max-width: 46rem; margin-top: var(--e4); padding: var(--e3) var(--e4) var(--e3) var(--e3); background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: 18px; box-shadow: 5px 5px 0 var(--tinta); }
.entrada::after { content: ""; position: absolute; right: 16px; bottom: 14px; border: 7px solid transparent; border-bottom: 0; border-top: 10px solid var(--vermelho); animation: piscar 1.1s steps(2, jump-none) infinite; }
@keyframes piscar { to { translate: 0 4px; } }
.entrada blockquote { margin: 0; font-size: 1.24rem; font-weight: 700; line-height: 1.45; }
.entrada figcaption { margin-top: 8px; font-size: var(--t-menor); font-weight: 700; color: var(--tinta-suave); }

.jogos-da-especie { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0 var(--e4); margin-top: var(--e3); }
.jogos-da-especie a { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 12px; padding: 6px 0; text-decoration: none; border-top: 2px dashed var(--tela-linha); }
.jogos-da-especie a:hover .hex-nome { text-decoration: underline; text-decoration-color: var(--vermelho); text-decoration-thickness: 2px; }

@media (max-width: 860px) {
  .especie-topo { grid-template-columns: 1fr; gap: var(--e3); padding-top: var(--e3); }
  .especie-prancha { order: -1; max-width: 290px; justify-self: center; }
  .atributos-lista li { grid-template-columns: 6.4rem minmax(0, 1fr) 2.8rem; gap: var(--e2); }
  .atributo-nome { font-size: var(--t-pequeno); }
  .ficha-larga { grid-template-columns: 1fr 1fr; }
  .estagio + .estagio::before { display: none; }
  .evolucao { gap: var(--e3); }
  .evolucao-item { width: 104px; }
}

/* ---------- formas especiais (página de uma espécie) ---------- */

.formas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr)); gap: var(--e4) var(--e5); margin-top: var(--e3); }
.forma { display: grid; grid-template-columns: clamp(110px, 30%, 170px) minmax(0, 1fr); gap: var(--e3); align-items: center; padding-top: var(--e3); border-top: 2px dashed var(--tela-linha); }
html:not(.js) .forma-prancha .prancha-cor { opacity: 1; transform: none; }
.forma-classe { font-size: var(--t-menor); font-weight: 700; color: var(--tinta-suave); }
.forma h3 { margin: 2px 0 6px; font-size: var(--t-destaque); line-height: 1.15; }
.forma-tipos { display: flex; flex-wrap: wrap; gap: 4px; }
.forma-atributos { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-variant-numeric: tabular-nums; }
.forma-atributos div { display: grid; justify-items: start; }
.forma-atributos dt { font-size: 0.72rem; color: var(--tinta-suave); }
.forma-atributos dd { font-family: var(--ponto); font-size: 1.05rem; line-height: 1.2; }
.forma-atributos .mudou dd { padding: 0 5px; background: var(--amarelo); border-radius: 5px; }
.forma-total { padding-left: 12px; border-left: 2px solid var(--tela-linha); }
.forma-nota { margin-top: 6px; font-size: var(--t-menor); color: var(--tinta-suave); line-height: 1.45; }
.forma-dynamax { margin-top: var(--e4); padding: var(--e2) var(--e3); background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: var(--raio); font-size: 1.1rem; }
.especie-cobblemon { margin-top: var(--e3); font-size: var(--t-pequeno); }

/* ---------- desafios ---------- */

.medida { display: inline-flex; align-items: center; gap: 8px; }
.medida-rotulo { font-size: var(--t-menor); font-weight: 700; }
.medida .estrato { width: 15px; height: 11px; border-width: 1.5px; border-radius: 3px; }
.desafio-medidas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--e3); }
.desafio-regiao { font-weight: 800; }
.desafio-tema { font-size: 1.08rem; font-weight: 700; line-height: 1.35; }

.desafios { padding: var(--e4) var(--margem) var(--e6); }
.desafios-topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e3); }
.desafios-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--e3); margin-top: var(--e4); }
.desafio-cartao { display: grid; align-content: start; gap: 10px; transition: transform 0.25s var(--suave), box-shadow 0.25s var(--suave); }
.desafio-cartao:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--tinta); }
.desafio-cartao h3 { font-size: var(--t-subtitulo); line-height: 1.1; }
.desafio-cartao h3 a { text-decoration: none; }
.desafio-cartao h3 a:hover { text-decoration: underline; text-decoration-color: var(--vermelho); text-decoration-thickness: 3px; }
.desafio-cartao .desafio-medidas { margin-top: auto; padding-top: 6px; }
.elenco { display: flex; align-items: end; }
.elenco a { display: block; }
.elenco a + a { margin-left: -14px; }
.elenco img { display: block; transition: transform 0.5s var(--suave); }
.elenco a:hover img { transform: translateY(-6px); }

.roleta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e5); align-items: start; padding: var(--e6) var(--margem) var(--e7); scroll-margin-top: 90px; }
.roleta h2 { margin-bottom: var(--e3); }
.roleta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-top: var(--e4); }
.roleta-resultado { min-height: 20rem; display: grid; align-content: start; gap: var(--e2); padding: var(--e4); }
.roleta-resultado h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.02em; line-height: 1.05; }
.roleta-vazio { align-self: center; font-size: 1.16rem; font-weight: 700; color: var(--tinta-suave); }
.roleta-pecas { display: grid; gap: 0; margin-top: var(--e1); }
.roleta-pecas div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--e2); padding: 11px 0; border-top: 2px dashed var(--tela-linha); }
.roleta-pecas dt { font-size: var(--t-pequeno); font-weight: 800; }
.roleta-pecas dd { line-height: 1.5; }
.roleta-resultado.girou > * { animation: cair 0.5s var(--suave) backwards; }
.roleta-resultado.girou > :nth-child(2) { animation-delay: 70ms; }
.roleta-resultado.girou > :nth-child(3) { animation-delay: 140ms; }
@keyframes cair { from { opacity: 0; transform: translateY(-14px); } }
.roleta-diario { margin-top: var(--e3); }

.desafio { padding: 0 var(--margem) var(--e6); }
.desafio > section, .desafio > .jogo-passos { margin-top: var(--e6); }
.desafio-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e5); align-items: center; padding-top: clamp(36px, 7vh, 80px); }
.desafio-topo h1 { font-size: clamp(2.5rem, 6.8vw, 5.8rem); letter-spacing: -0.035em; line-height: 0.98; margin: 0 0 var(--e3) -0.03em; }
.desafio-topo .desafio-tema { font-size: clamp(1.2rem, 1.9vw, 1.6rem); }
.desafio-ficha { grid-template-columns: repeat(2, auto); }
.desafio-ficha .medida-rotulo { display: none; }
.desafio-sinopse .prosa { margin-top: var(--e3); font-size: 1.2rem; }
.desafio-sinopse .prosa p + p { margin-top: 0.75em; }
/* o objetivo vem na caixa de texto, como a fala que abre uma missão */
.desafio-objetivo { max-width: 40rem; margin-top: var(--e5); padding: var(--e3) var(--e4); font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.18; background: var(--amarelo); border: var(--traco) solid var(--tinta); border-radius: 18px; box-shadow: 5px 5px 0 var(--tinta); }
.desafio h2 { margin-bottom: var(--e3); font-size: clamp(1.7rem, 3vw, 2.5rem); }
.desafio-regras { max-width: 52rem; counter-reset: regra; border-top: var(--traco) solid currentColor; }
.desafio-regras li { counter-increment: regra; display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: start; padding: 13px 0; border-bottom: 2px dashed var(--tela-linha); font-size: 1.12rem; line-height: 1.5; }
.desafio-regras li::before { content: counter(regra); width: 2rem; height: 2rem; display: grid; place-items: center; font-family: var(--ponto); font-size: 1.1rem; line-height: 1; background: var(--tinta); color: var(--branco); border-radius: 50%; }
.desafio-fim dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--e3); }
.desafio-fim dt { margin-bottom: 6px; font-weight: 800; font-size: var(--t-destaque); }
.desafio-fim dd { line-height: 1.5; }
.desafio-outro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); padding-top: var(--e4); border-top: var(--traco) solid currentColor; }

@media (max-width: 860px) {
  .roleta, .desafio-topo { grid-template-columns: 1fr; }
  .desafio-topo { gap: var(--e3); padding-top: var(--e3); }
  .desafio-elenco { order: -1; }
  .desafio-elenco .elenco img { width: 104px; height: 104px; }
  .roleta-pecas div { grid-template-columns: 1fr; gap: 2px; }
  .forma { grid-template-columns: 96px minmax(0, 1fr); gap: var(--e2); }
}

/* ---------- transições entre páginas ---------- */

@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: var(--suave); }
/* durante a animação a página continua clicável: um segundo filtro não se perde */
::view-transition { pointer-events: none; }

/* ---------- comparar dois Pokémon ---------- */

.duelo { padding: var(--e3) var(--margem) var(--e7); }
.duelo-campos { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e3) var(--e4); }
.duelo-campos .dex-busca { flex: 1 1 14rem; }
.duelo-palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--e4); align-items: center; margin-top: var(--e5); padding-top: var(--e4); border-top: var(--traco) solid currentColor; }
.duelo-lado { display: grid; justify-items: center; gap: 8px; text-align: center; }
.duelo-lado a { display: grid; justify-items: center; text-decoration: none; }
.duelo-lado .dex-arte { width: min(100%, 184px); height: auto; aspect-ratio: 1; }
.duelo-lado a:is(:hover, :focus-visible) .cor { opacity: 1; }
.duelo-lado a:is(:hover, :focus-visible) img:not(.cor) { opacity: 0; }
.duelo-lado h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.05; overflow-wrap: anywhere; }
.duelo-lado a:hover h2 { text-decoration: underline; text-decoration-color: var(--vermelho); text-decoration-thickness: 3px; text-underline-offset: 0.16em; }
.duelo-tipos { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.duelo-ficha { display: grid; gap: 2px; font-size: var(--t-pequeno); }
.duelo-ficha div { display: flex; justify-content: center; gap: 6px; }
.duelo-ficha dt { color: var(--tinta-suave); }
.duelo-ficha dd { font-weight: 700; }
.duelo-vazio { font-size: 1.14rem; font-weight: 700; }
.duelo-atributos li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 8.6rem minmax(0, 1fr) 3rem; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 2px dashed var(--tela-linha); }
.duelo-nome { text-align: center; font-size: var(--t-pequeno); font-weight: 800; }
.duelo-valor { justify-self: start; padding: 1px 6px 2px; font-family: var(--ponto); font-size: 1.3rem; line-height: 1; font-variant-numeric: tabular-nums; border-radius: 6px; }
.duelo-valor[data-valor="a"] { justify-self: end; }
/* quem leva o atributo fica com o número aceso e a barra verde */
.duelo-valor.maior { background: var(--amarelo); box-shadow: 0 0 0 2px var(--tinta); }
.duelo-trilho { display: flex; height: 17px; padding: 2px; background: var(--tela-funda); border: 2px solid var(--tinta); border-radius: 999px; }
.duelo-trilho-a { justify-content: flex-end; }
.duelo-barra { display: block; height: 100%; background: var(--tela-linha); border-radius: 999px; transition: width 0.5s var(--suave), background-color 0.3s; }
.duelo-barra.maior { background: var(--nivel-5); }
.duelo-total { border-bottom: 0; }
@media (max-width: 760px) {
  .duelo-palco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .duelo-atributos { grid-column: 1 / -1; order: 3; }
  .duelo-atributos li { grid-template-columns: 2.6rem minmax(0, 1fr) 5.2rem minmax(0, 1fr) 2.6rem; gap: 6px; }
  .duelo-nome { font-size: 0.78rem; }
  .duelo-valor { font-size: 1.1rem; padding-inline: 3px; }
}

/* ---------- montador de time: a tela de equipe ---------- */

.time { padding: var(--e3) var(--margem) var(--e7); }
.time-controles { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e3); }
.time-controles .dex-busca { flex: 1 1 14rem; }
.time-controles [hidden] { display: none; }
.time-aviso { flex-basis: 100%; min-height: 1.5em; font-size: var(--t-pequeno); font-weight: 800; color: var(--vermelho-fundo); }
/* O campo azul do menu de equipe, com as seis vagas em duas colunas; a da direita fica um pouco mais baixa,
 * como nos jogos. Cada vaga é uma caixa com o Pokémon e o que ele sofre. */
.time-vagas {
  --desnivel: 26px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3) clamp(20px, 3vw, 40px); align-items: start;
  margin-top: var(--e2); padding: var(--e4) clamp(18px, 3.2vw, 44px) calc(var(--e4) + var(--desnivel));
  background-color: var(--azul);
  background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.07) 0 14px, transparent 14px 28px);
  border: var(--traco) solid var(--tinta); border-radius: 24px;
}
.time-vaga { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; padding: 14px 16px 16px; }
.time-vaga:nth-child(even) { translate: 0 var(--desnivel); }
.vaga-ordem { position: absolute; left: -13px; top: -13px; width: 32px; height: 32px; display: grid; place-items: center; font-family: var(--ponto); font-size: 1.05rem; line-height: 1; background: var(--amarelo); color: var(--tinta); border: var(--traco) solid var(--tinta); border-radius: 50%; }
.time-vaga-vazia { min-height: 7.5rem; place-content: center; text-align: center; font-weight: 700; color: #fff; background: rgb(255 255 255 / 0.1); border: var(--traco) dashed rgb(255 255 255 / 0.8); box-shadow: none; }
.time-vaga-vazia .vaga-ordem { background: var(--branco); }
.vaga-topo { display: flex; align-items: flex-start; gap: 12px; }
.vaga-quem { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.vaga-quem .dex-arte { flex: none; width: 72px; height: 72px; }
.vaga-dados { display: grid; gap: 6px; min-width: 0; }
.vaga-quem .dex-nome { font-size: var(--t-destaque); line-height: 1.15; }
.vaga-quem:is(:hover, :focus-visible) .cor { opacity: 1; }
.vaga-quem:is(:hover, :focus-visible) img:not(.cor) { opacity: 0; }
.vaga-quem:hover .dex-nome { text-decoration: underline; text-decoration-color: var(--vermelho); text-decoration-thickness: 3px; }
.vaga-tipos { display: flex; flex-wrap: wrap; gap: 4px; }
.vaga-tirar { flex: none; padding: 3px 11px 4px; font-size: var(--t-menor); font-weight: 700; line-height: 1.2; background: var(--branco); border: 2px solid var(--tinta); border-radius: 999px; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.vaga-tirar:hover { background: var(--tinta); color: var(--branco); }
.time-fora { padding: 4px 10px 5px; font-size: var(--t-menor); font-weight: 700; line-height: 1.3; background: #FFE3E7; color: var(--vermelho-fundo); border-radius: 8px; }
.vaga-sofre { display: grid; gap: 7px; padding-top: 11px; border-top: 2px dashed var(--tela-linha); }
.vaga-sofre div { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 8px; align-items: start; }
.vaga-sofre dt { display: flex; align-items: center; gap: 7px; padding-top: 1px; font-size: 0.82rem; font-weight: 800; line-height: 1.3; white-space: nowrap; }
/* a luz ao lado de cada linha diz a gravidade: do vermelho de quem apanha em quádruplo ao verde de quem resiste */
.vaga-sofre dt::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--luz); border: 2px solid var(--tinta); }
.vaga-sofre [data-fator="4"] { --luz: var(--nivel-1); }
.vaga-sofre [data-fator="2"] { --luz: var(--nivel-2); }
.vaga-sofre [data-fator="0.5"] { --luz: var(--nivel-4); }
.vaga-sofre [data-fator="0.25"] { --luz: var(--nivel-5); }
.vaga-sofre [data-fator="0"] { --luz: var(--tinta); }
.time-selos { display: flex; flex-wrap: wrap; gap: 5px; }
.time-vaga .tipo { padding: 0 8px 1px; font-size: 0.76rem; border-width: 1.5px; }
.time-leitura { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--e3); margin-top: var(--e4); }
.time-grupo { display: grid; align-content: start; gap: 8px; padding: var(--e3); }
.time-grupo h2 { font-size: var(--t-destaque); letter-spacing: 0; }
.time-grupo p { font-size: var(--t-pequeno); line-height: 1.45; }
.time-grupo .time-selos { margin-top: 6px; gap: 7px; }
/* os buracos são o alerta do time: faixa vermelha no alto da caixa */
.time-buracos { padding-top: calc(var(--e3) + 10px); box-shadow: inset 0 12px 0 var(--vermelho), 5px 5px 0 var(--tinta); }
.time-vazio { grid-column: 1 / -1; font-size: 1.2rem; font-weight: 700; }
.time .nota-editorial { margin-top: var(--e3); max-width: 70ch; }
@media (max-width: 860px) {
  .time-vagas { --desnivel: 0px; grid-template-columns: minmax(0, 1fr); padding: var(--e3) 14px var(--e3) 20px; }
  .time-vaga-vazia { min-height: 4.6rem; }
  .vaga-sofre div { grid-template-columns: 6.2rem minmax(0, 1fr); }
}

/* ---------- roda de tipos ---------- */

.roda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--e4) var(--e5); align-items: start; padding: var(--e3) var(--margem) var(--e7); }
.roda [hidden] { display: none; }
/* Os 18 tipos em círculo. O escolhido fica aceso; quem não tem relação forte com ele apaga. */
.roda-disco { position: relative; justify-self: center; width: min(100%, 78svh, 640px); aspect-ratio: 1; }
.roda-linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.roda-linha { fill: none; stroke-width: 0.9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: riscar 0.45s var(--suave) forwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes riscar { to { stroke-dashoffset: 0; } }
.roda-linha-atinge { stroke: var(--tinta); marker-end: url(#roda-seta); }
/* a tracejada é a que chega: vermelha, pontilhada depois de riscada */
.roda-linha-apanha { stroke: var(--vermelho); stroke-dasharray: 0.035 0.03; stroke-dashoffset: 0; marker-end: url(#roda-seta); opacity: 0; animation-name: surgir-linha; }
@keyframes surgir-linha { to { opacity: 1; } }
#roda-seta path { fill: context-stroke; }
.roda-tipos li { position: absolute; translate: -50% -50%; }
.roda-tipo { padding: 4px 11px 5px; font-size: var(--t-menor); cursor: pointer; transition: transform 0.25s var(--suave), opacity 0.25s, box-shadow 0.2s; }
.roda-tipo:hover { transform: scale(1.08); }
.roda-tipo[aria-pressed="true"] { transform: scale(1.22); box-shadow: 0 0 0 3px var(--amarelo), 0 0 0 5.5px var(--tinta); z-index: 2; }
.roda-tipo.fora { opacity: 0.32; }
.roda-tipo.atacante { box-shadow: 0 0 0 3px var(--vermelho); }
.roda-sigla { display: none; }
.roda-centro { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 2px; margin: 0; padding: 12px 20px 14px; text-align: center; background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: 18px; box-shadow: 4px 4px 0 var(--tinta); pointer-events: none; }
.roda-centro strong { font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.1; }
.roda-centro span { font-family: var(--ponto); font-size: 1rem; line-height: 1.25; }
.roda-leitura { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.roda-grupo { display: grid; align-content: start; gap: 8px; padding: var(--e2) 18px 18px; }
.roda-grupo h2 { font-size: var(--t-texto); letter-spacing: 0; }
.roda-selos { display: flex; flex-wrap: wrap; gap: 5px; }
.roda-chave { grid-column: 1 / -1; }
.roda-traco { display: inline-block; width: 26px; height: 0; margin: 0 7px 0 0; vertical-align: middle; border-top: 3px solid var(--tinta); }
.roda-traco-tracejado { margin-left: var(--e3); border-top: 3px dashed var(--vermelho); }
@media (max-width: 980px) { .roda { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  /* na tela estreita os nomes não cabem em volta: cada tipo vira uma ficha redonda com as três primeiras letras */
  .roda-nome { display: none; }
  .roda-sigla { display: block; }
  .roda-tipo { width: 42px; height: 42px; padding: 0; justify-content: center; font-size: 0.7rem; border-radius: 50%; }
  .roda-tipo[aria-pressed="true"] { transform: scale(1.15); }
  .roda-centro { padding: 8px 12px 10px; border-radius: 14px; }
  .roda-centro span { font-size: 0.9rem; }
  .roda-leitura { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- desenhe o seu perfil ---------- */

.desenhar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e4) var(--e5); align-items: start; padding: var(--e3) var(--margem) var(--e7); }
.desenhar-hex { justify-self: center; width: min(100%, 600px); padding: 38px clamp(50px, 6vw, 78px) var(--e3); border-radius: 22px; box-shadow: 6px 6px 0 var(--tinta); }
.desenhar-hex figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--e3); margin-top: clamp(30px, 4vw, 44px); padding-top: var(--e2); border-top: 2px dashed var(--tela-linha); }
/* A alça de cada vértice: uma tecla redonda que se arrasta ao longo do seu eixo. */
.hex-pega {
  position: absolute; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0;
  background: var(--amarelo); border: 3px solid var(--tinta); border-radius: 50%; box-shadow: 0 3px 0 var(--tinta);
  cursor: grab; touch-action: none; transition: scale 0.2s var(--suave), background-color 0.2s;
}
.hex-pega::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--tinta); }
.hex-pega:hover, .hex-pega:focus-visible { scale: 1.15; background: #FFE066; }
.hex-pega.arrastando { cursor: grabbing; scale: 1.25; background: var(--branco); }
.desenhar-lista h2 { font-size: var(--t-subtitulo); margin-bottom: 4px; }
.desenhar-lista ol { counter-reset: lugar; margin: var(--e2) 0 var(--e2); border-top: var(--traco) solid currentColor; }
.desenhar-lista li { counter-increment: lugar; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) clamp(6.5rem, 22%, 10rem); align-items: center; gap: 12px; padding: 8px 0; border-bottom: 2px dashed var(--tela-linha); background: var(--tela); }
.desenhar-lista li::before { content: counter(lugar); justify-self: center; font-family: var(--ponto); font-size: 1.3rem; line-height: 1; }
/* a lista mostra os oito primeiros; o botão abre os trinta */
.desenhar-lista ol:not(.inteira) li:nth-child(n + 9) { display: none; }
.desenhar-lista li:first-child { background: #FFF6CC; }
.desenhar-lista a { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; text-decoration: none; }
.desenhar-lista a:hover .hex-nome { text-decoration: underline; text-decoration-color: var(--vermelho); text-decoration-thickness: 3px; }
.desenhar-jogo { display: grid; gap: 1px; min-width: 0; }
.desenhar-jogo .hex-meta { font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desenhar-afinidade { display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem; align-items: center; gap: 8px; }
.desenhar-afinidade b { text-align: right; font-family: var(--ponto); font-weight: 400; font-size: 1.15rem; line-height: 1; }
.desenhar-trilho { height: 15px; padding: 2px; background: var(--tela-funda); border: 2px solid var(--tinta); border-radius: 999px; }
.desenhar-trilho span { display: block; height: 100%; min-width: 6px; background: var(--nivel-5); border-radius: 999px; transition: width 0.3s var(--suave); }
@media (max-width: 980px) { .desenhar { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .desenhar-hex { padding: 34px 56px var(--e2); }
  .hex-pega { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  .hex-pega::after { inset: 6px; }
  .desenhar-lista li { grid-template-columns: 1.8rem minmax(0, 1fr); row-gap: 4px; }
  .desenhar-afinidade { grid-column: 2; }
  .desenhar-lista a { grid-template-columns: 44px minmax(0, 1fr); }
}

/* ---------- diário de desafio ---------- */

.diario { padding: var(--e3) var(--margem) var(--e7); max-width: 76rem; }
.diario [hidden] { display: none; }
.diario-barra { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e3) var(--e4); padding-bottom: var(--e3); border-bottom: var(--traco) solid currentColor; }
.diario-importar { cursor: pointer; }
.diario-importar:focus-within { outline: 3px solid var(--azul); outline-offset: 3px; }
.diario-alerta { margin-bottom: var(--e3); padding: var(--e2) var(--e3); background: #FFE3E7; border: var(--traco) solid var(--vermelho-fundo); border-radius: var(--raio); font-size: var(--t-pequeno); font-weight: 700; }
.diario-nova { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); margin-top: var(--e4); padding: var(--e4); }
.diario-nova h2, .diario-regras, .diario-botoes { grid-column: 1 / -1; }
.diario-nova h2, .diario-campanha h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.02em; line-height: 1.1; }
.diario :is(input[type="text"], textarea) { font-size: var(--t-texto); }
.diario-botoes { display: flex; align-items: center; gap: var(--e3); }
.diario-campanha { margin-top: var(--e4); }
.diario-campanha > header p { margin-top: 4px; }
.diario-regras-lidas { margin-top: var(--e3); max-width: 70ch; }
.diario-regras-lidas summary { cursor: pointer; font-weight: 800; }
.diario-regras-lidas p { margin-top: var(--e2); line-height: 1.55; }
/* o placar é a leitura do aparelho: rótulos pequenos, números em letra de pontos */
.diario-placar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e5); margin-top: var(--e4); padding: var(--e3) 0; border-block: var(--traco) solid currentColor; font-size: var(--t-pequeno); font-weight: 700; }
.diario-numero { font-family: var(--ponto); font-size: 2rem; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.diario-placar .botao { min-width: 2.4rem; }
.diario-captura { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: end; gap: var(--e3); margin-top: var(--e4); padding: var(--e3); }
.diario-captura h3 { grid-column: 1 / -1; font-size: var(--t-destaque); }
.diario-captura .dex-busca { max-width: none; }
.diario-encontros { grid-column: 1 / -1; display: grid; gap: 8px; font-size: var(--t-pequeno); }
.diario-encontros:empty { display: none; }
.diario-encontros p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.diario-encontros p > span { min-width: 7.5rem; font-weight: 800; }
.diario-encontros .ficha { cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 700; padding: 3px 10px 4px; }
.diario-encontros .ficha:hover { background: var(--amarelo); }
.diario-encontros-nota { color: var(--tinta-suave); }
.diario-grupo { margin-top: var(--e5); }
.diario-grupo h3 { font-size: var(--t-destaque); }
.diario-vazio { margin-top: var(--e2); font-size: 1.06rem; font-weight: 700; color: var(--tinta-suave); }
.diario-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 0 var(--e4); margin-top: var(--e2); }
.diario-cartao { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px var(--e2); align-items: center; padding: 12px 0; border-top: 2px dashed var(--tela-linha); }
.diario-cartao > div { display: grid; gap: 1px; line-height: 1.25; }
.diario-cartao strong { overflow-wrap: anywhere; }
.diario-cartao span { font-size: var(--t-pequeno); color: var(--tinta-suave); }
.diario-cartao.caiu img { opacity: 0.45; }
.diario-cartao.caiu strong { text-decoration: line-through; text-decoration-color: var(--vermelho); text-decoration-thickness: 3px; }
.diario-nota input { margin-top: 4px; padding: 6px 10px !important; font-size: var(--t-pequeno) !important; }
.diario-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--e3); font-size: var(--t-pequeno); }
.diario-fim { margin-top: var(--e6); font-size: var(--t-pequeno); }
@media (max-width: 620px) { .diario-nova { grid-template-columns: minmax(0, 1fr); padding: var(--e3); } }

/* ---------- busca global ---------- */

.busca { width: min(92vw, 40rem); max-height: min(80vh, 44rem); margin-top: 9vh; padding: 0; overflow: hidden; color: var(--tinta); background: var(--branco); border: 3px solid var(--tinta); border-radius: 20px; box-shadow: 8px 8px 0 var(--tinta); }
.busca[open] { display: flex; flex-direction: column; }
.busca::backdrop { background: rgb(23 26 33 / 0.55); }
.busca-campo { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); border-bottom: var(--traco) solid currentColor; }
.busca-campo input { flex: 1; min-width: 0; padding: 10px 0; font: inherit; font-size: 1.2rem; font-weight: 700; color: inherit; background: transparent; border: 0; outline: 0; }
.busca-resultados { overflow-y: auto; overscroll-behavior: contain; }
.busca-resultados a { position: relative; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--e2); align-items: baseline; padding: 9px var(--e3) 9px calc(var(--e3) + 20px); text-decoration: none; }
/* a seta do menu aponta o resultado escolhido */
.busca-resultados li[aria-selected="true"] a, .busca-resultados a:hover { background: var(--amarelo); }
.busca-resultados li[aria-selected="true"] a::before, .busca-resultados a:hover::before { content: ""; position: absolute; left: var(--e3); top: 50%; margin-top: -7px; border: 7px solid transparent; border-right: 0; border-left: 10px solid var(--tinta); }
.busca-tipo { font-size: 0.8rem; font-weight: 700; color: var(--tinta-suave); }
.busca-nome { font-weight: 800; overflow-wrap: anywhere; }
.busca-dica { padding: var(--e2) var(--e3) var(--e3); font-size: var(--t-pequeno); color: var(--tinta-suave); }
.busca-dica:empty { display: none; }
@media (max-width: 520px) { .busca-resultados a { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  @view-transition { navigation: none; }
  .js .abertura::before, .js .abertura::after { display: none; }
  .entrada::after { animation: none; }
  .roda-linha { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .folha { height: auto; }
  .trilho { padding-block: var(--e5); row-gap: var(--e4); padding-right: var(--margem); }
  .trilho::after { display: none; }
  .folha-intro { flex-basis: 100%; }
}