/* PokéAtlas, edição Cobblemon — o atlas em blocos.
 * A primeira parte é a base que esta edição herdou do primeiro atlas (as medidas, a rolagem, os botões,
 * o topo, as peças comuns); o bloco "Edição Cobblemon", mais abaixo, veste tudo de mapa de Minecraft.
 * Archivo é a letra de apoio, Alegreya a do texto corrido e Pixelify Sans a dos títulos.
 * A edição Pokémon tem a sua própria folha (pokedex.css) e não lê este arquivo. */

@font-face {
  font-family: "Archivo";
  src: url("/fontes/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fontes/alegreya.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fontes/alegreya-italico.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Pixelify Sans";
  src: url("/fontes/pixelify.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --mar: #D2E1DF;
  --mar-raso: #E7F0EC;
  --noite: #0C2733;
  --papel: #F1E8CF;
  --papel-claro: #F8F2E2;
  --tinta: #0F2A3A;
  --tinta-suave: #44606C;
  --rota: #C4391F;
  --rota-noite: #F0694A;

  --altitude-1: #BFD4A4;
  --altitude-2: #DADFA9;
  --altitude-3: #EEDDA6;
  --altitude-4: #E0BC7C;
  --altitude-5: #C4905F;

  --serie-a: #1F7BA6;
  --serie-b: #C4391F;
  --serie-c: #6D4BA0;

  --mapa: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --caderno: "Alegreya", Georgia, "Times New Roman", serif;

  /* 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(2rem, 4.4vw, 3.6rem);
  --t-pagina: clamp(3rem, 9.4vw, 8.5rem);

  /* 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(20px, 4.4vw, 68px);
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  background: var(--mar);
  color: var(--tinta);
  font-family: var(--mapa);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-size: var(--t-texto);
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--rota); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--rota); outline-offset: 3px; }
::selection { background: var(--tinta); color: var(--mar); }

h1, h2, h3 { font-family: var(--mapa); line-height: 1; text-wrap: balance; }
h2 { font-size: var(--t-titulo); font-weight: 760; font-stretch: 112%; letter-spacing: -0.022em; }
h3 { font-size: var(--t-subtitulo); font-weight: 680; font-stretch: 106%; letter-spacing: -0.01em; }

.prosa {
  font-family: var(--caderno);
  font-size: 1.22rem;
  line-height: 1.52;
  max-width: 62ch;
}
.prosa p + p { margin-top: 0.9em; }

.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(--tinta); color: var(--mar);
  transform: translateY(-200%);
}
.pular:focus { transform: none; }

/* ---------- 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; }
.fundo-vivo body { background: var(--fundo-vivo, inherit); color: var(--tinta-viva, inherit); transition: background-color 0.7s ease, color 0.7s ease; }
[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 ligações ---------- */

.botao {
  display: inline-block;
  padding: 14px 22px;
  background: var(--rota);
  color: #fff;
  font-weight: 640;
  font-stretch: 106%;
  font-size: var(--t-texto);
  line-height: 1.1;
  text-decoration: none;
  border: 1.5px solid var(--rota);
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.35s var(--suave), background-color 0.2s;
}
.botao:hover { background: #A92F18; border-color: #A92F18; transform: translateY(-2px); }
.botao-contorno { background: transparent; color: inherit; border-color: currentColor; }
.botao-contorno:hover { background: var(--tinta); color: var(--mar); border-color: var(--tinta); }
.botao-pequeno { padding: 10px 15px; font-size: var(--t-pequeno); }
.botao-grande { padding: 20px 34px; font-size: var(--t-destaque); }

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

.ficha {
  padding: 8px 13px;
  font-size: var(--t-pequeno);
  font-weight: 540;
  line-height: 1.2;
  white-space: nowrap;
  background: transparent;
  border: 1.5px solid color-mix(in srgb, currentColor 42%, transparent);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.ficha:hover { border-color: currentColor; }
.ficha[aria-pressed="true"] { background: var(--tinta); color: var(--mar); border-color: var(--tinta); }

/* ---------- topo ---------- */

.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: 14px var(--margem) 30px;
}
.topo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--fundo-vivo, var(--mar)) 64%, transparent);
}
.marca {
  font-weight: 800; font-stretch: 118%; font-size: 1.3rem; letter-spacing: -0.03em;
  text-decoration: none;
}
.topo-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
.topo-nav a:not(.botao) { font-size: var(--t-pequeno); font-weight: 560; text-decoration: none; padding: 6px 0; }
.topo-nav a:not(.botao):hover, .topo-nav a[aria-current="page"]:not(.botao) {
  text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--rota); text-underline-offset: 0.35em;
}
.topo-menu { display: none; }

/* seletor de edição: Pokémon ou Cobblemon */
.edicoes { display: inline-flex; margin-right: auto; border: 1.5px solid currentColor; border-radius: 2px; }
.edicoes a { padding: 6px 11px; font-size: var(--t-menor); font-weight: 600; line-height: 1.2; text-decoration: none; }
.edicoes a + a { border-left: 1.5px solid currentColor; }
.edicoes a[aria-current] { background: var(--tinta); color: var(--mar); }
.edicoes a:not([aria-current]):hover { background: color-mix(in srgb, currentColor 14%, transparent); }
/* no início o cabeçalho troca de tinta com a rolagem: a edição marcada usa a tinta da vez como fundo e o fundo da vez como letra */

/* Com a busca e as ferramentas, o cabeçalho ficou mais cheio: em telas médias a chamada principal sai dele
 * (continua no rodapé e nas páginas) e, abaixo de 1200px, as abas vão para o botão Menu. */
@media (max-width: 1440px) {
  .topo-nav { gap: clamp(12px, 1.5vw, 26px); }
  .topo-nav .botao { display: none; }
}
@media (max-width: 1200px) {
  .js .topo-nav .botao { display: inline-flex; }
  .topo { padding-block: 10px 24px; }
  .js .topo-menu {
    display: inline-block; padding: 9px 13px; background: none;
    border: 1.5px solid currentColor; border-radius: 2px; font-size: var(--t-pequeno); font-weight: 600; cursor: pointer;
  }
  .js .topo-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--e1) var(--margem) var(--e3);
    background: var(--fundo-vivo, var(--mar));
    border-bottom: 1.5px solid currentColor;
    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; }
  .topo { gap: 10px; }
  .edicoes { margin-right: auto; }
  .js .topo-nav a:not(.botao) { padding: 14px 0; font-size: var(--t-destaque); border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
  .js .topo-nav .botao { margin-top: var(--e2); text-align: center; }
  html:not(.js) .topo { flex-wrap: wrap; }
  html:not(.js) .topo-nav { flex-wrap: wrap; gap: 12px; }
}

/* ---------- peças comuns ---------- */

.prancha { width: 100%; cursor: pointer; }

.prancha figcaption { margin-top: 6px; font-size: var(--t-menor); font-weight: 600; line-height: 1.25; text-align: center; }

.nota-editorial { font-size: var(--t-menor); color: var(--tinta-suave); }

.perfil { width: 100%; height: 100%; min-height: 70px; align-self: end; }

/* ---------- início: os números ---------- */

.tempo { padding: var(--e7) var(--margem); }

.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4) var(--e3); }
.numeros dd {
  font-size: clamp(3.6rem, 8.6vw, 8rem); font-weight: 820; font-stretch: 125%;
  letter-spacing: -0.045em; line-height: 0.82; font-variant-numeric: tabular-nums;
}
.numeros dt { margin-top: 10px; font-size: var(--t-pequeno); color: var(--tinta-suave); }

/* ---------- rodapé ---------- */

.rodape { padding: var(--e5) var(--margem) var(--e4); border-top: 1.5px solid currentColor; font-size: var(--t-pequeno); }
.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); }
.rodape nav { display: grid; gap: 8px; align-content: start; }
.rodape nav a { text-decoration: none; font-weight: 560; }
.rodape nav a:hover { text-decoration: underline; text-decoration-color: var(--rota); }
.rodape-avisos { display: grid; gap: var(--e2); color: var(--tinta-suave); line-height: 1.5; max-width: 70ch; }

@media (max-width: 820px) { .rodape-grade { grid-template-columns: 1fr; gap: var(--e4); } }

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

.cabecalho { padding: clamp(120px, 17vh, 176px) var(--margem) var(--e4); display: grid; gap: var(--e3); }
.cabecalho h1 {
  font-size: var(--t-pagina); font-weight: 820; font-stretch: 125%;
  letter-spacing: -0.045em; line-height: 0.84; margin-left: -0.04em;
}

/* ---------- fichas de filtro e arquipélago de jogos ---------- */

.filtro-opcoes { display: flex; flex-wrap: wrap; gap: 7px; }

.vazio { padding: var(--e4) 0 0; font-family: var(--caderno); font-style: italic; font-size: 1.4rem; }

@media (max-width: 720px) {
  .filtro-opcoes { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--margem) * -1); padding: 2px var(--margem) 6px; scrollbar-width: none; }
  .filtro-opcoes::-webkit-scrollbar { display: none; }
  .ficha { padding: 10px 14px; }
}

/* ---------- fichas, medidas e listas (páginas de espécie e de desafio) ---------- */

.jogo { padding: 0 var(--margem) var(--e6); }
.jogo > section + section, .jogo-passos { margin-top: var(--e6); }

.migalha { font-size: var(--t-pequeno); font-weight: 560; margin-bottom: var(--e3); }

.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); color: var(--tinta-suave); }
.ficha-tecnica dd { font-weight: 640; }

.estratos { display: flex; gap: 2px; }
.estrato { width: 26px; height: 15px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 0 4px 4px 0; }
.estrato:not(:last-child) { border-radius: 0; }
.estrato-1 { background: var(--altitude-1); border-color: var(--tinta); }
.estrato-2 { background: var(--altitude-2); border-color: var(--tinta); }
.estrato-3 { background: var(--altitude-3); border-color: var(--tinta); }
.estrato-4 { background: var(--altitude-4); border-color: var(--tinta); }
.estrato-5 { background: var(--altitude-5); border-color: var(--tinta); }

.lista-marcada li { position: relative; padding: 9px 0 9px 28px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); line-height: 1.35; }
.lista-marcada li::before { content: ""; position: absolute; left: 3px; top: 15px; border: 6px solid transparent; border-bottom: 10px solid var(--tinta); border-top: 0; }

.jogo-passos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); padding-top: var(--e3); border-top: 1.5px solid currentColor; }
.jogo-passos a { text-decoration: none; font-weight: 660; }
.jogo-passos a:last-child { text-align: right; }
.jogo-passos a span { display: block; font-size: var(--t-menor); font-weight: 440; color: var(--tinta-suave); }
.jogo-passos a:hover { text-decoration: underline; text-decoration-color: var(--rota); }

@media (max-width: 860px) {
  .ficha-tecnica { grid-template-columns: repeat(2, auto); }
}

/* ---------- tabelas ---------- */

.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: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
thead th { border-top: 1.5px solid currentColor; font-size: var(--t-texto); font-weight: 700; min-width: 11rem; }
tbody th { font-weight: 440; color: var(--tinta-suave); white-space: nowrap; }
td { font-weight: 560; }

/* ---------- a gaveta de espécies ---------- */

.dex-controles { display: grid; gap: 12px; margin-top: var(--e3); padding-bottom: var(--e2); border-bottom: 1.5px solid currentColor; }
.dex-busca { display: grid; gap: 6px; max-width: 22rem; }
.dex-busca label { font-size: var(--t-pequeno); font-weight: 660; }
.dex-busca input {
  width: 100%; padding: 11px 12px;
  font: 540 1rem var(--mapa); color: var(--tinta);
  background: var(--papel-claro); border: 1.5px solid var(--tinta); border-radius: 2px;
}
.dex-busca input::placeholder { color: var(--tinta-suave); opacity: 1; }
.dex-conta { font-weight: 440; opacity: 0.75; font-variant-numeric: tabular-nums; }
.ficha-tipo { padding: 6px 10px; font-size: var(--t-menor); }
.dex-resumo strong { font-weight: 800; font-stretch: 118%; font-size: 1.5rem; font-variant-numeric: tabular-nums; }

.gaveta {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 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: a gravura vira bicho */
.gaveta a:is(:hover, :focus-visible) .dex-arte { 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-size: 0.78rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.dex-nome { font-size: var(--t-menor); font-weight: 660; overflow-wrap: anywhere; }
.gaveta a:hover .dex-nome { text-decoration: underline; text-decoration-color: var(--rota); text-decoration-thickness: 2px; }
.dex-tipos { font-size: 0.78rem; color: var(--tinta-suave); }
/* a lista abre recolhida: três fileiras no computador, seis no celular */

@media (max-width: 720px) {
  .gaveta { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--e2) 2px; }
  .dex-arte { width: 80px; height: 80px; }
  .dex-controles .filtro-opcoes { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--margem) * -1); padding: 2px var(--margem) 6px; scrollbar-width: none; }
}

/* ---------- 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. */
.carta-caixa { position: relative; display: block; aspect-ratio: var(--proporcao); overflow: hidden; background: var(--mar); border: 1.5px solid var(--tinta); }

/* ---------- a lista de Pokémon ---------- */

.pokedex-geral { padding: var(--e3) var(--margem) var(--e7); }
.pokedex-geral .dex-controles { margin-top: 0; }
.dex-resumo { display: flex; align-items: baseline; gap: var(--e3); }

/* ---------- 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(104px, 14vh, 150px); }
.especie-numero { font-size: var(--t-destaque); font-weight: 640; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.especie-topo h1 { margin-left: -0.04em; font-size: clamp(2.7rem, 8vw, 7rem); font-weight: 820; font-stretch: 122%; letter-spacing: -0.04em; line-height: 0.9; overflow-wrap: anywhere; }

.especie-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--e3); }
.especie-tipos .ficha { display: inline-block; text-decoration: none; }

/* A prancha da espécie: a gravura é impressa na chegada, seguindo o ângulo da trama; depois o
 * espécime flutua devagar e se inclina para o ponteiro, com a cor um pouco à frente do traço. */
@property --impressa { syntax: "<percentage>"; inherits: false; initial-value: 130%; }

/* até a tinta chegar, a miniatura faz as vezes de esboço a lápis */

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

@media (max-width: 860px) {
  .especie-topo { grid-template-columns: 1fr; gap: var(--e3); padding-top: 92px; }
  .ficha-larga { grid-template-columns: 1fr 1fr; }
}

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

.medida { display: inline-flex; align-items: center; gap: 8px; }
.medida-rotulo { font-size: var(--t-menor); font-weight: 600; }
.medida .estrato { width: 16px; height: 12px; }
.desafio-medidas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--e3); }

.desafio-tema { font-family: var(--caderno); font-style: italic; font-size: 1.16rem; line-height: 1.3; }

.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; }
.desafio-cartao h3 { font-size: var(--t-subtitulo); line-height: 1.05; }
.desafio-cartao h3 a { text-decoration: none; }
.desafio-cartao h3 a:hover { text-decoration: underline; text-decoration-color: var(--rota); text-decoration-thickness: 3px; }
.desafio-cartao .desafio-medidas { margin-top: auto; padding-top: 6px; }

.painel { padding: var(--e3); background: var(--papel); border: 1.5px solid var(--tinta); }

.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: 70px; }
.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.4rem); font-weight: 800; font-stretch: 116%; letter-spacing: -0.02em; line-height: 1; }
.roleta-vazio { align-self: center; font-family: var(--caderno); font-style: italic; font-size: 1.24rem; 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: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.roleta-pecas dt { font-size: var(--t-pequeno); font-weight: 660; }
.roleta-pecas dd { font-family: var(--caderno); font-size: 1.16rem; line-height: 1.38; }
.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); } }

.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(104px, 14vh, 150px); }
.desafio-topo h1 { font-size: clamp(2.6rem, 7.4vw, 6.4rem); font-weight: 820; font-stretch: 120%; letter-spacing: -0.04em; line-height: 0.9; margin: 0 0 var(--e3) -0.04em; }
.desafio-topo .desafio-tema { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.desafio-ficha { grid-template-columns: repeat(2, auto); }
.desafio-ficha .medida-rotulo { display: none; }
.desafio-sinopse .prosa { margin-top: var(--e3); font-size: 1.32rem; }
.desafio-sinopse .prosa p + p { margin-top: 0.75em; }
.desafio-objetivo { max-width: 34ch; margin-top: var(--e5); font-size: clamp(1.5rem, 2.8vw, 2.3rem); font-weight: 760; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.08; }
.desafio h2 { margin-bottom: var(--e3); font-size: clamp(1.7rem, 3vw, 2.6rem); }
.desafio-regras { max-width: 52rem; counter-reset: regra; border-top: 1.5px solid currentColor; }
.desafio-regras li { counter-increment: regra; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-family: var(--caderno); font-size: 1.24rem; line-height: 1.4; }
.desafio-regras li::before { content: counter(regra); font-family: var(--mapa); font-weight: 800; font-stretch: 118%; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.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: 760; font-stretch: 112%; font-size: var(--t-destaque); }
.desafio-fim dd { font-family: var(--caderno); font-size: 1.18rem; line-height: 1.4; }
.desafio-outro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); padding-top: var(--e4); border-top: 1.5px solid currentColor; }

@media (max-width: 860px) {
  .roleta, .desafio-topo { grid-template-columns: 1fr; }
  .desafio-topo { gap: var(--e3); padding-top: 92px; }
  .desafio-elenco { order: -1; }
  .roleta-pecas div { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   Edição Cobblemon: o atlas em blocos.
   Pergaminho de mapa no fundo, painéis de inventário, títulos
   em letra de pixel e grama como cor de ação. O texto corrido
   continua na letra do caderno.
   ============================================================ */

html:has(.edicao-cobblemon) { background: #DCCB9F; }
.edicao-cobblemon {
  --mar: #DCCB9F;
  --mar-raso: #E9DDBB;
  --papel: #C6C6C6;
  --papel-claro: #E6E6E6;
  --tinta: #231F1A;
  --tinta-suave: #574E42;
  --rota: #3A7421;
  --rota-noite: #86C552;
  --pixel: "Pixelify Sans", "Archivo", system-ui, sans-serif;
  --luz: #F6F6F6;
  --sombra: #6F6F6F;
  --preto: #1B1B1B;
  background: var(--mar); color: var(--tinta);
}
.edicao-cobblemon ::selection { background: var(--rota); color: #fff; }

/* letra de pixel em tudo o que é título, rótulo ou botão */
.edicao-cobblemon :is(h1, h2, h3, .marca, .botao, .ficha, .edicoes a, .topo-nav a, .dex-nome, .numeros dd, .especie-numero, .migalha, dt, th, .jogo-passos a, .rota-n) {
  font-family: var(--pixel); font-stretch: normal; letter-spacing: 0;
}
.edicao-cobblemon :is(h1, h2, h3) { font-weight: 700; line-height: 1; }
.edicao-cobblemon h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); }
.edicao-cobblemon h3 { font-size: 1.5rem; font-weight: 600; }
.edicao-cobblemon .marca { font-size: 1.5rem; font-weight: 700; }
.edicao-cobblemon :is(.cabecalho h1, .especie-topo h1, .desafio-topo h1) { margin-left: 0; font-size: clamp(2.8rem, 8.4vw, 7rem); font-weight: 700; letter-spacing: 0; line-height: 0.92; }
.edicao-cobblemon .dex-nome { font-size: 1rem; font-weight: 600; }
.edicao-cobblemon .numeros dd { font-weight: 700; letter-spacing: 0; line-height: 0.9; }

/* bordas chanfradas: luz em cima e à esquerda, sombra embaixo e à direita */
.edicao-cobblemon :is(.painel, .botao, .ficha, .edicoes, .topo-menu) { border-radius: 0; }
.edicao-cobblemon .painel { background: var(--papel); border: 3px solid var(--preto); box-shadow: inset 3px 3px 0 var(--luz), inset -3px -3px 0 var(--sombra); }
.edicao-cobblemon .botao {
  background: var(--rota); color: #fff; border: 2px solid var(--preto); font-weight: 600; font-size: 1.15rem;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.38), inset -2px -3px 0 rgba(0, 0, 0, 0.32);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.edicao-cobblemon .botao:hover { background: #468A28; border-color: var(--preto); transform: none; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.5), inset -2px -3px 0 rgba(0, 0, 0, 0.32), 0 0 0 2px #fff; }
.edicao-cobblemon .botao-contorno { background: #9A9A9A; color: #fff; }
.edicao-cobblemon .botao-contorno:hover { background: #A8A8A8; color: #fff; }
.edicao-cobblemon .botao-grande { font-size: 1.5rem; }
.edicao-cobblemon .ficha { background: var(--papel); border: 2px solid var(--preto); font-weight: 500; font-size: 1rem; box-shadow: inset 2px 2px 0 var(--luz), inset -2px -2px 0 var(--sombra); }
.edicao-cobblemon .ficha[aria-pressed="true"] { background: var(--rota); color: #fff; border-color: var(--preto); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.3), inset -2px -2px 0 rgba(255, 255, 255, 0.3); }
.edicao-cobblemon a.ficha { text-decoration: none; }
.edicao-cobblemon .ficha-rotulo { background: #E3B84A; cursor: default; }
.edicao-cobblemon .edicoes { border: 2px solid var(--preto); background: var(--papel); }
.edicao-cobblemon .edicoes a { font-size: 1rem; font-weight: 500; }
.edicao-cobblemon .edicoes a + a { border-left: 2px solid var(--preto); }
.edicao-cobblemon .edicoes a[aria-current] { background: var(--rota); color: #fff; }
.edicao-cobblemon .edicoes a[aria-current] span { color: #fff; }
.edicao-cobblemon .topo-nav a:not(.botao) { font-size: 1.1rem; font-weight: 500; }
.edicao-cobblemon .topo::before { background: linear-gradient(to bottom, var(--fundo-vivo, var(--mar)) 64%, transparent); }
.edicao-cobblemon :is(.dex-busca input, .busca-inicio input) { background: var(--papel-claro); border: 2px solid var(--preto); border-radius: 0; box-shadow: inset 2px 2px 0 var(--sombra); }
.edicao-cobblemon :focus-visible { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 5px var(--preto); }

/* o "slot" de inventário, com o Pokémon em pixel dentro */
.slot { display: inline-grid; place-items: center; padding: 4px; background: #8B8B8B; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; line-height: 0; }
a.slot:hover { background: #B4B4D8; }
.slot img { display: block; }
/* Com modelo no mod: a figura fica em tinta de mapa e ganha a cor do modelo quando se aponta.
 * A cor salta para fora do slot e quica em dois quadros, como um sprite parado. As espécies
 * já visitadas ficam em cor de vez (.visto), sem saltar. */
.slot { position: relative; }
.slot .tinta { image-rendering: pixelated; }
.slot .cor { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; opacity: 0; pointer-events: none; transform-origin: 50% 90%; }
:is(.slot.tem-cor:is(:hover, :focus-visible, .visto), a:is(:hover, :focus-visible) .slot.tem-cor) .cor { opacity: 1; }
:is(.slot.tem-cor:is(:hover, :focus-visible, .visto), a:is(:hover, :focus-visible) .slot.tem-cor) .tinta { opacity: 0; }
:is(.slot.tem-cor:is(:hover, :focus-visible), a:is(:hover, :focus-visible) .slot.tem-cor) { z-index: 3; }
:is(.slot.tem-cor:is(:hover, :focus-visible), a:is(:hover, :focus-visible) .slot.tem-cor) .cor {
  scale: 1.5; filter: drop-shadow(0 3px 0 rgb(0 0 0 / 0.3));
  animation: cb-quica 0.62s steps(1) infinite;
}
@keyframes cb-quica { 0%, 49.9% { translate: 0 0; } 50%, 100% { translate: 0 -7%; } }
.fileira a:is(:hover, :focus-visible) .slot.tem-cor .cor, .fileira .slot.tem-cor:is(:hover, :focus-visible) .cor { scale: 1.8; }
.fileira { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fileira-resto { margin-left: 8px; font-size: var(--t-menor); }

/* lista de Pokémon */
.gaveta-cb { margin-top: var(--e4); grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: var(--e3) 4px; }
.gaveta-cb a:hover .slot { background: #B4B4D8; }

/* página de uma espécie */
.cb-especie > section { max-width: 76rem; }
.cb-retrato { position: relative; justify-self: center; width: min(100%, 380px); padding: var(--e3); line-height: 0; }
.cb-retrato img { width: 100%; height: auto; }
.cb-vistos { margin-top: var(--e3); font-family: var(--pixel); font-size: 1.05rem; }
/* O retrato chega em tinta de mapa e a cor entra bloco a bloco, do centro para fora, como os
 * chunks carregando em volta do jogador (src/js/cobblemon-especie.js). Depois ele respira em dois
 * quadros, acompanha o ponteiro e pula quando recebe um clique. */
.cb-revela { position: absolute; inset: var(--e3); width: calc(100% - 2 * var(--e3)); height: auto; aspect-ratio: 1; image-rendering: pixelated; display: none; }
.cb-retrato.revelando:not(.revelado) .cb-revela { display: block; }
.js .cb-retrato[data-retrato]:not(.revelado) .cb-modelo { opacity: 0; animation: cb-garantia 0.01s 4s forwards; }
@keyframes cb-garantia { to { opacity: 1; } }
.cb-retrato[data-retrato] { cursor: pointer; }
/* o modelo em 3D entra no lugar do retrato, no visor das maquetes (src/js/modelo3d.js) */
.cb-retrato .maquete-tela { inset: var(--e3); width: calc(100% - 2 * var(--e3)); height: auto; aspect-ratio: 1; }
.cb-retrato.viva .cb-modelo { visibility: hidden; animation: none; }
.cb-retrato.viva .maquete-girar, .cb-retrato[data-estado="falhou"] .maquete-girar, html:not(.js) .cb-retrato :is(.maquete-girar, .modelo-shiny) { display: none; }
.cb-retrato.viva:not(.girando) .maquete-dica, .cb-retrato[data-estado="falhou"] .maquete-dica { display: block; }
.modelo-shiny { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 6px 10px; font-family: var(--pixel); font-size: 0.95rem; line-height: 1.2; color: var(--preto); background: var(--papel); border: 2px solid var(--preto); box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 var(--sombra); cursor: pointer; }
.modelo-shiny:hover { background: #B4B4D8; }
.modelo-shiny[aria-pressed="true"] { background: #F2D34B; box-shadow: inset 2px 2px 0 #6F6F6F, inset -2px -2px 0 #fff; }
.cb-retrato:fullscreen { width: 100vw; max-width: none; height: 100vh; padding: 0; background: var(--papel); }
.cb-retrato:fullscreen .maquete-tela { inset: 0; width: min(100vw, 100vh); height: min(100vw, 100vh); margin: auto; }
.cb-retrato.revelado .cb-modelo { translate: calc(var(--ix, 0) * 12px) calc(var(--iy, 0) * 6px); transition: translate 0.24s steps(3); animation: cb-respira 1.7s steps(1) infinite; }
@keyframes cb-respira { 0%, 49.9% { transform: none; } 50%, 100% { transform: translateY(-1.4%); } }
.cb-retrato.revelado.pulando .cb-modelo { animation: cb-pulo 0.52s steps(6) 1; }
@keyframes cb-pulo { 0%, 100% { transform: none; } 45% { transform: translateY(-13%); } }
.cb-descricao { max-width: 46ch; margin-top: var(--e3); font-family: var(--caderno); font-size: 1.3rem; line-height: 1.4; }
.cb-tabela { margin-top: var(--e3); background: var(--papel-claro); border: 3px solid var(--preto); }
.cb-tabela :is(th, td) { padding: 10px 14px; border-top: 2px solid #A9A9A9; font-weight: 400; }
.cb-tabela thead th { background: var(--papel); border-top: 0; font-size: 1.05rem; font-weight: 600; min-width: 0; }
.cb-tabela td:first-child, .cb-tabela td:nth-child(4) { white-space: nowrap; }
.cb-tabela td:nth-child(3) { min-width: 9rem; }
.raridade { display: inline-block; padding: 2px 8px; font-family: var(--pixel); font-weight: 600; color: #fff; border: 2px solid var(--preto); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); }
.raridade-common { background: #6A6A6A; }
.raridade-uncommon { background: #3A7421; }
.raridade-rare { background: #2D62B5; }
.raridade-ultra-rare { background: #8A3FB0; }
.cb-forma { display: block; margin-top: 4px; font-size: var(--t-menor); font-style: italic; }
.cb-mais { margin-top: var(--e2); }
.cb-mais summary { cursor: pointer; font-family: var(--pixel); font-size: 1.1rem; font-weight: 600; text-decoration: underline; }
.cb-bandos { margin-top: var(--e3); max-width: 52rem; }
.cb-quedas { max-width: 34rem; margin-top: var(--e3); background: var(--papel-claro); border: 3px solid var(--preto); }
.cb-quedas li { display: flex; justify-content: space-between; gap: var(--e3); padding: 10px 14px; }
.cb-quedas li + li { border-top: 2px solid #A9A9A9; }
.cb-quedas li span:first-child { font-family: var(--pixel); font-size: 1.1rem; font-weight: 600; }
.cb-fatos { max-width: 54rem; margin-top: var(--e3); font-family: var(--caderno); font-size: 1.2rem; }
.cb-ponte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); }
.cb-ponte p { max-width: 46ch; font-family: var(--caderno); font-size: 1.16rem; line-height: 1.4; }

/* itens */
.cb-itens, .cb-estruturas, .cb-guia { padding: var(--e3) var(--margem) var(--e7); }
.cb-grupo { margin-top: var(--e6); scroll-margin-top: 80px; }
.cb-grupo[hidden] { display: none; }
.cb-itens-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0 var(--e4); margin-top: var(--e3); }
.cb-itens-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 11px 0; border-top: 2px solid color-mix(in srgb, currentColor 22%, transparent); }
.cb-itens-lista li[hidden] { display: none; }
.cb-item-texto { display: grid; gap: 2px; align-content: start; }
/* O ícone do item, recortado do atlas. São três camadas da mesma figura, uma atrás da outra,
 * para ele ter espessura quando gira, como o item largado no chão do jogo. */
.slot-item { --lado: 48px; width: 56px; height: 56px; perspective: 260px; }
.item-icone, .item-icone::before, .item-icone::after { background: url("/arte/itens.png") calc(var(--cx) * -1 * var(--lado)) calc(var(--cy) * -1 * var(--lado)) / calc(32 * var(--lado)) auto no-repeat; image-rendering: pixelated; }
.item-icone { position: relative; display: block; width: var(--lado); height: var(--lado); transform-style: preserve-3d; }
.item-icone::before, .item-icone::after { content: ""; position: absolute; inset: 0; }
.item-icone::before { transform: translateZ(-1.5px); }
.item-icone::after { transform: translateZ(1.5px); }
.item-bloco { display: block; width: 48px; height: 48px; }
.cb-itens-lista li:hover .item-bloco { animation: bloco-pula 0.62s steps(1) infinite; }
@keyframes bloco-pula { 0%, 49.9% { translate: 0 0; } 50%, 100% { translate: 0 -4px; } }
.cb-itens-lista li:hover .item-icone { animation: item-gira 2.4s linear infinite; }
@keyframes item-gira { 0% { transform: translateY(0) rotateY(0deg); } 50% { transform: translateY(-4px) rotateY(180deg); } 100% { transform: translateY(0) rotateY(360deg); } }
.cb-itens-lista strong { font-family: var(--pixel); font-size: 1.14rem; font-weight: 600; }
.cb-itens-lista span { font-size: var(--t-pequeno); line-height: 1.4; }
.cb-receita { color: var(--tinta-suave); }
/* A receita como na bancada do jogo: grade 3×3, seta, o que sai. */
.bancada { display: grid; grid-template-columns: auto auto auto; justify-content: start; align-items: center; gap: 8px 10px; margin-top: 8px; padding: 8px; width: fit-content; max-width: 100%; background: var(--papel); border: 2px solid var(--preto); box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 var(--sombra); }
.bancada-grade { display: grid; grid-template-columns: repeat(3, 36px); gap: 2px; }
.bancada-fila { display: flex; gap: 2px; }
.bancada-titulo { grid-column: 1 / -1; font-family: var(--pixel); font-size: 0.95rem !important; line-height: 1.1; }
.bancada-casa { --lado: 32px; width: 36px; height: 36px; padding: 2px; }
.bancada .item-icone::before, .bancada .item-icone::after { display: none; }
.bancada .item-bloco { width: 32px; height: 32px; }
.ing-icone { display: block; width: var(--lado); height: var(--lado); background: url("/arte/ingredientes.png") calc(var(--cx) * -1 * var(--lado)) calc(var(--cy) * -1 * var(--lado)) / calc(16 * var(--lado)) auto no-repeat; image-rendering: pixelated; }

.bancada-seta { width: 30px; height: 22px; background: var(--sombra); clip-path: polygon(0 32%, 58% 32%, 58% 0, 100% 50%, 58% 100%, 58% 68%, 0 68%); }
.bancada-saida { position: relative; }
.bancada-saida .slot-item { --lado: 40px; width: 48px; height: 48px; }
.bancada-rende { position: absolute; right: 3px; bottom: 1px; font-family: var(--pixel); font-size: 1.1rem !important; font-weight: 600; line-height: 1; color: #fff; text-shadow: 2px 2px 0 #3F3F3F; }
.bancada-nota { grid-column: 1 / -1; max-width: 16rem; line-height: 1.3; font-size: 0.78rem !important; color: var(--tinta-suave); }
.cb-itens-lista li:hover .bancada .item-icone, .cb-itens-lista li:hover .bancada .item-bloco { animation: none; }
.cb-cruza { display: grid; gap: 4px; margin-top: 6px; }
.cb-pares { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.cb-par { display: inline-flex; align-items: center; gap: 4px; font-family: var(--pixel); }
.cb-deixado { display: grid; gap: 4px; margin-top: 6px; }
.cb-deixado-rotulo { font-size: 0.78rem; color: var(--tinta-suave); }
.cb-deixado .slot img { width: 40px; height: 40px; }
.cb-grupo-jogo .cb-itens-lista li { grid-template-columns: minmax(0, 1fr); }

/* estruturas */
.cb-estruturas > section + section { margin-top: var(--e6); }
.cb-estruturas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--e3); margin-top: var(--e3); }
.cb-estruturas-lista li { display: grid; align-content: start; gap: 8px; scroll-margin-top: 96px; }
.cb-estruturas-lista li:target { outline: 4px solid var(--rota); outline-offset: 2px; }

/* A maquete de blocos: imagem parada que vira modelo giratório (src/js/maquete.js). */
.maquete { position: relative; display: block; width: 100%; aspect-ratio: 1; background: var(--mar); box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; line-height: 0; overflow: hidden; }
.maquete img, .maquete-tela { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; }
.maquete-tela { cursor: grab; touch-action: pan-y; }
.maquete.girando .maquete-tela { cursor: grabbing; }
.maquete.viva img { visibility: hidden; }
.maquete-girar { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 6px 10px; font-family: var(--pixel); font-size: 0.95rem; line-height: 1.2; color: var(--preto); background: var(--papel); border: 2px solid var(--preto); box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 var(--sombra); cursor: pointer; }
.maquete-girar:hover { background: #B4B4D8; }
.maquete.viva .maquete-girar, .maquete[data-estado="falhou"] .maquete-girar, html:not(.js) .maquete-girar { display: none; }
.maquete:not(.viva):not([data-estado="falhou"]) { cursor: pointer; }
.maquete[data-estado="falhou"] .maquete-dica { display: block; }
.maquete-dica { display: none; position: absolute; left: 8px; bottom: 8px; padding: 4px 7px; font-family: var(--pixel); font-size: 0.85rem; line-height: 1.2; color: #fff; background: rgb(0 0 0 / 0.55); pointer-events: none; }
.maquete.viva:not(.girando) .maquete-dica { display: block; }
.maquete-barra { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 4px; }
.maquete-barra button { min-width: 34px; padding: 5px 9px; font-family: var(--pixel); font-size: 1rem; line-height: 1.2; color: var(--preto); background: var(--papel); border: 2px solid var(--preto); box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 var(--sombra); cursor: pointer; }
.maquete-barra button:hover { background: #B4B4D8; }
.maquete-tela:focus-visible { outline: 3px solid var(--rota); outline-offset: 2px; box-shadow: none; }
.maquete:fullscreen { width: 100vw; max-width: none; height: 100vh; aspect-ratio: auto; }
.maquete:fullscreen .maquete-tela { inset: 0; width: min(100vw, 100vh); height: min(100vw, 100vh); margin: auto; }
.maquete:fullscreen .maquete-barra button, .maquete:fullscreen .maquete-dica { font-size: 1.15rem; }

/* biomas: um ambiente por faixa, maquete de um lado e texto do outro, alternando */
.cb-biomas { display: grid; gap: var(--e7); padding: var(--e4) var(--margem) var(--e6); }
.cb-biomas-indice { margin-top: var(--e3); }
.cb-bioma { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e4) var(--e5); align-items: center; scroll-margin-top: 96px; }
.cb-bioma .maquete { max-width: 560px; justify-self: center; }
.cb-bioma:nth-child(even) > .maquete { order: 2; }
.cb-bioma-texto { display: grid; gap: var(--e2); align-content: center; }
.cb-bioma-conta strong { font-family: var(--pixel); font-size: 1.7rem; font-weight: 600; }
.cb-bioma-grupos summary { cursor: pointer; font-family: var(--pixel); font-size: 1.05rem; }
.cb-bioma-grupos .cb-glossario { margin-top: var(--e2); }
.cb-bioma-estruturas { grid-column: 1 / -1; order: 3; }
.cb-bioma-estruturas ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--e2); }
.cb-bioma-estruturas a { display: grid; justify-items: center; align-content: start; gap: 4px; width: 118px; height: 100%; padding: 6px; font-size: 0.8rem; line-height: 1.2; text-align: center; text-decoration: none; overflow-wrap: anywhere; background: var(--papel); border: 2px solid var(--preto); box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 var(--sombra); }
.cb-bioma-estruturas a:hover { background: #B4B4D8; }
.cb-bioma-estruturas img { width: 96px; height: 96px; }
.pagina-cb-biomas .cb-guia > h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
.pagina-cb-biomas .cb-guia > h2 + .prosa { margin-bottom: var(--e5); }
.pagina-cb-biomas .cb-guia h3 { margin-bottom: var(--e3); font-size: clamp(1.5rem, 3vw, 2.1rem); }
@media (max-width: 860px) {
  .cb-bioma { grid-template-columns: minmax(0, 1fr); }
  .cb-bioma:nth-child(even) > .maquete { order: 0; }
}
.cb-onde { font-size: var(--t-pequeno); line-height: 1.35; }

/* guia */
.cb-guia > section + section { margin-top: var(--e6); }
.cb-guia h2 { margin-bottom: var(--e3); }
.cb-contas dd { font-family: var(--pixel); font-size: 2rem; font-weight: 700; line-height: 1; }
.cb-contas dt { order: 2; }
.cb-contas div { display: grid; }
.cb-fosseis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--e2) var(--e4); }
.cb-fosseis li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.cb-fosseis li > span:last-child { display: grid; }
.cb-fosseis strong { font-family: var(--pixel); font-size: 1.14rem; }
.cb-fosseis span span { font-size: var(--t-pequeno); }
.cb-glossario { columns: 3 17rem; column-gap: var(--e4); margin-top: var(--e3); }
.cb-glossario div { break-inside: avoid; padding: 9px 0; border-top: 2px solid color-mix(in srgb, currentColor 22%, transparent); }
.cb-glossario dt { font-size: 1.1rem; font-weight: 600; }
.cb-glossario dd { font-size: var(--t-menor); line-height: 1.4; color: var(--tinta-suave); }
.cb-versoes { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-versoes li { display: grid; padding: 6px 10px; background: var(--papel); border: 2px solid var(--preto); box-shadow: inset 2px 2px 0 var(--luz), inset -2px -2px 0 var(--sombra); }
.cb-versoes strong { font-family: var(--pixel); font-size: 1.1rem; }
.cb-versoes span { font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* início: o mapa que se revela */
.cb-mapa { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.cb-abertura { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-content: end; justify-items: start; gap: var(--e2); padding: 120px var(--margem) clamp(28px, 5vh, 56px); }
.cb-abertura .cb-mapa { position: absolute; inset: 0; }
.cb-marcador { position: absolute; left: 0; top: 0; width: 16px; height: 20px; margin: -10px 0 0 -8px; background: #fff; clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%); filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000); pointer-events: none; will-change: transform; }
.cb-abertura-texto, .cb-abertura-nota { position: relative; background: var(--mar); border: 3px solid var(--preto); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.28); }
.cb-abertura-texto { padding: clamp(14px, 2.4vw, 30px) clamp(18px, 3vw, 38px); }
.cb-abertura h1 { font-size: clamp(3.2rem, 12vw, 10.5rem); font-weight: 700; line-height: 0.86; }
.cb-lema { margin-top: 10px; font-family: var(--caderno); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 2rem); }
.cb-abertura-nota { max-width: 44ch; padding: 9px 13px; font-size: var(--t-menor); line-height: 1.4; }

.cb-numeros { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e5); align-items: start; padding: var(--e7) var(--margem); }
.cb-numeros h2 { margin-bottom: var(--e3); }

.cb-pico { background: #2B2620; color: #EFE6CF; }
.cb-pico .palco { display: grid; grid-template-columns: minmax(0, 6fr) minmax(280px, 5fr); gap: var(--e5); align-items: center; justify-content: stretch; padding: 92px var(--margem) 36px; }
.cb-pico-mapa { height: min(74svh, 700px); border: 12px solid #6B4A26; box-shadow: inset 0 0 0 3px #3C2913, 0 0 0 3px #3C2913; background: #2B2620; }
.cb-pico-texto h2 { margin-bottom: var(--e3); }
.cb-ambientes { display: grid; }
.cb-ambientes li { display: grid; justify-items: start; gap: 10px; }
.cb-ambientes h3 { font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 700; color: var(--rota-noite); }
.cb-ambientes p { font-family: var(--caderno); font-size: 1.22rem; }
.cb-ambientes .ligacao { font-family: var(--pixel); font-size: 1.1rem; }
/* com a rolagem ligada, um ambiente por vez */
.cb-pico[data-passo] .cb-ambientes li { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.4s var(--suave), visibility 0.3s; }
.cb-pico[data-passo] .cb-ambientes li.ativo { opacity: 1; visibility: visible; transform: none; }
/* sem ela, todos em lista */
.cb-pico:not([data-passo]) .cb-ambientes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--e4); }
.cb-pico:not([data-passo]) .cb-ambientes h3 { font-size: 1.6rem; }
.sem-movimento .cb-pico .palco { grid-template-columns: 1fr; padding-block: var(--e6); }
.sem-movimento .cb-pico-mapa { height: 46vw; max-height: 520px; }

.cb-portas { padding: var(--e7) var(--margem) var(--e5); }
.cb-portas-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--e3); margin-top: var(--e4); }
.cb-portas-lista a { display: grid; align-content: start; gap: 10px; height: 100%; text-decoration: none; }
.cb-portas-lista .painel { padding: var(--e3); }
.cb-portas-lista .painel:hover { box-shadow: inset 3px 3px 0 var(--luz), inset -3px -3px 0 var(--sombra), 0 0 0 3px #fff; }
.cb-portas-lista p { font-size: var(--t-pequeno); line-height: 1.45; }
.cb-fechamento { min-height: 80svh; display: grid; place-content: center; justify-items: center; gap: var(--e4); padding: var(--e6) var(--margem); text-align: center; }
.cb-fechamento h2 { font-size: clamp(2.6rem, 8vw, 7rem); line-height: 0.92; max-width: 14ch; }
.cb-fechamento .prosa { font-style: italic; }

/* desafios e roleta, em blocos */
.edicao-cobblemon .desafio-objetivo { font-family: var(--pixel); font-weight: 600; letter-spacing: 0; }
.edicao-cobblemon .desafio-regras li::before { font-family: var(--pixel); font-size: 1.4rem; }
.edicao-cobblemon .roleta-resultado h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; }
.edicao-cobblemon .desafio-topo h1 { margin-left: 0; }
.edicao-cobblemon .estrato { border-radius: 0; }
.edicao-cobblemon .lista-marcada li::before { border: 0; width: 10px; height: 10px; background: var(--rota); top: 17px; left: 4px; }
.edicao-cobblemon .rodape { border-top: 3px solid var(--preto); }

@media (max-width: 520px) {
  .marca { font-size: 1.08rem; }
  .edicoes a { padding: 6px 7px; font-size: 0.78rem; }
  .topo-menu { padding: 8px 10px !important; }
  .edicao-cobblemon .marca { font-size: 1.15rem; }
  .edicao-cobblemon .edicoes a { padding: 5px 6px; font-size: 0.86rem; }
}
@media (max-width: 860px) {
  .cb-numeros, .cb-pico .palco { grid-template-columns: 1fr; }
  .cb-pico .palco { grid-template-rows: minmax(0, 1fr) auto; gap: var(--e2); padding: 76px var(--margem) 18px; align-items: start; }
  .cb-pico-mapa { height: 100%; min-height: 220px; border-width: 8px; }
  .cb-pico-texto { min-height: 15.5rem; }
  .cb-pico-texto h2 { font-size: 1.7rem; margin-bottom: var(--e2); }
  .cb-ambientes h3 { font-size: 1.7rem; }
  .cb-ambientes .slot img { width: 44px; height: 44px; }
  .cb-retrato { order: -1; max-width: 240px; }
  .cb-tabela :is(th, td) { padding: 8px 10px; font-size: var(--t-menor); }
}

/* ---------- 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; }

/* ---------- montador de time ---------- */

.time { padding: var(--e3) var(--margem) var(--e7); }

.time-aviso { flex-basis: 100%; min-height: 1.4em; font-size: var(--t-pequeno); font-weight: 600; color: var(--rota); }

.time .nota-editorial { margin-top: var(--e3); max-width: 70ch; }

/* ---------- plano de caçada (edição Cobblemon) ---------- */

.cb-cacar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-top: var(--e3); }
.cb-cacar [hidden], .cacada-controles [hidden] { display: none; }
.cacada { padding: var(--e3) var(--margem) var(--e7); }
.cacada-controles { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e3); }
.cacada-controles .dex-busca { flex: 1 1 14rem; }
.cacada-lista { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e2); margin-top: var(--e3); padding: var(--e3) 0; border-block: 3px solid var(--preto); }
.cacada-lista li { display: grid; justify-items: center; gap: 4px; width: 92px; text-align: center; line-height: 1.2; font-family: var(--pixel); }
.cacada-lista .ligacao { font-family: inherit; font-size: 0.85rem; }
.cacada-vazio { margin-top: var(--e3); font-family: var(--caderno); font-style: italic; font-size: 1.3rem; max-width: 46ch; }
.cacada-plano { margin-top: var(--e5); }
.cacada-plano h2 { margin-bottom: var(--e2); }
.cacada-fora { margin-bottom: var(--e4); max-width: 70ch; font-size: var(--t-pequeno); }
.cacada-lugares { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: var(--e3); margin-top: var(--e3); }
.cacada-lugar { display: grid; align-content: start; gap: var(--e2); }
.cacada-conta strong { font-family: var(--pixel); font-size: 1.7rem; font-weight: 600; }
.cacada-lugar ul { display: grid; gap: var(--e2); }
.cacada-lugar ul li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.cacada-lugar ul div { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: var(--t-pequeno); line-height: 1.35; }
.cacada-lugar ul strong { font-family: var(--pixel); font-size: 1.1rem; font-weight: 600; }
.cacada-lugar ul div > span:not(.raridade) { flex-basis: 100%; }
.cacada-mais { color: var(--tinta-suave); }

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

.topo-busca { padding: 7px 12px; font: inherit; font-size: var(--t-pequeno); font-weight: 600; line-height: 1.2; color: inherit; background: transparent; border: 1.5px solid currentColor; border-radius: 2px; cursor: pointer; }
.topo-busca:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
html:not(.js) .topo-busca { display: none; }
/* o botão de som: um alto-falante em bloco, verde quando o som está ligado */
html:not(.js) :is(.topo-som, .especie-grito) { display: none; }
[data-falar][hidden] { display: none; }
/* o número digitado em qualquer página: o atlas 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 18px 12px; white-space: nowrap; font-family: var(--pixel); color: var(--tinta); background: var(--papel); border: 3px solid var(--preto); box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 var(--sombra), 0 12px 30px rgb(0 0 0 / 0.35); }
.visor-numero[hidden] { display: none; }
.visor-numero span { font-size: 1.3rem; line-height: 1; }
.visor-numero strong { font-size: 1.4rem; font-weight: 500; line-height: 1.1; }
.visor-numero.sem-registro strong { opacity: 0.55; }
.topo-som { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: var(--preto); background: var(--papel); border: 2px solid var(--preto); box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 var(--sombra); cursor: pointer; }
.topo-som[data-ligado="true"] { background: var(--rota); color: #fff; box-shadow: inset 2px 2px 0 rgb(255 255 255 / 0.35), inset -2px -2px 0 rgb(0 0 0 / 0.3); }
.topo-som svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.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, num painel de inventário preso ao canto do alto */
.som-painel { width: min(92vw, 21rem); margin: 64px clamp(12px, 3vw, 40px) auto auto; padding: var(--e3); color: var(--tinta); background: var(--papel); border: 3px solid var(--preto); box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 var(--sombra), 0 18px 50px rgb(0 0 0 / 0.35); }
.som-painel[open] { display: grid; gap: var(--e2); }
.som-painel::backdrop { background: rgb(0 0 0 / 0.3); }
.som-painel h2 { font-family: var(--pixel); font-size: var(--t-subtitulo); font-weight: 500; }
.som-painel .botao, .som-painel .ligacao { justify-self: start; }
.som-volume { display: grid; gap: 4px; font-family: var(--pixel); font-size: 1.05rem; }
.som-volume input { width: 100%; height: 28px; margin: 0; accent-color: var(--rota); cursor: pointer; }
@media (max-width: 600px) { .som-painel { margin-inline: auto; } }
.topo-nav-som { display: none; }
.especie-grito { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--e2); margin-top: var(--e3); }
[data-grito].tocando { background: var(--rota); color: #fff; }
/* em tela estreita não cabem logotipo, seletor, busca e menu na mesma linha: a busca vai para dentro do menu */
.topo-nav-busca { display: none; }
@media (max-width: 600px) {
  .topo-busca { display: none; }
  .topo-som { display: none; }
  .js .topo-nav-som { display: block; width: 100%; margin: 0 0 4px; padding: 13px; font-family: var(--pixel); font-size: var(--t-destaque); font-weight: 500; color: inherit; background: var(--papel); border: 2px solid var(--preto); border-radius: 0; cursor: pointer; }
  .js .topo-nav-som::after { content: " desligados"; }
  .js .topo-nav-som[data-ligado="true"] { background: var(--rota); color: #fff; }
  .js .topo-nav-som[data-ligado="true"]::after { content: " ligados"; }
  .js .topo-nav-busca { display: block; width: 100%; margin: var(--e2) 0 4px; padding: 13px; font: inherit; font-size: var(--t-destaque); font-weight: 600; color: inherit; background: transparent; border: 1.5px solid currentColor; border-radius: 2px; cursor: pointer; }
  .edicao-cobblemon.js .topo-nav-busca, .js .edicao-cobblemon .topo-nav-busca { font-family: var(--pixel); border: 2px solid var(--preto); border-radius: 0; background: var(--papel); }
}
.busca { width: min(92vw, 40rem); max-height: min(80vh, 44rem); margin-top: 9vh; padding: 0; color: var(--tinta); background: var(--papel-claro); border: 2px solid var(--tinta); box-shadow: 0 18px 50px rgb(0 0 0 / 0.28); }
.busca[open] { display: flex; flex-direction: column; }
.busca::backdrop { background: rgb(0 0 0 / 0.4); }
.busca-campo { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); border-bottom: 1.5px solid currentColor; }
.busca-campo input { flex: 1; min-width: 0; padding: 10px 0; font: inherit; font-size: 1.2rem; color: inherit; background: transparent; border: 0; outline: 0; }
.busca-resultados { overflow-y: auto; overscroll-behavior: contain; }
.busca-resultados a { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--e2); align-items: baseline; padding: 9px var(--e3); text-decoration: none; }
.busca-resultados li[aria-selected="true"] a, .busca-resultados a:hover { background: var(--tinta); color: var(--mar); }
.busca-tipo { font-size: 0.78rem; opacity: 0.75; }
.busca-nome { font-weight: 660; 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; }
.edicao-cobblemon .topo-busca { font-family: var(--pixel); font-size: 1rem; font-weight: 500; border: 2px solid var(--preto); border-radius: 0; background: var(--papel); box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 var(--sombra); }
.edicao-cobblemon .busca { background: var(--papel); border: 3px solid var(--preto); box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 var(--sombra), 0 18px 50px rgb(0 0 0 / 0.35); }
.edicao-cobblemon .busca-nome { font-family: var(--pixel); font-size: 1.1rem; font-weight: 500; }
.edicao-cobblemon .busca-resultados li[aria-selected="true"] a, .edicao-cobblemon .busca-resultados a:hover { background: var(--rota); color: #fff; }
.cb-itens-lista li { scroll-margin-top: 96px; }
.cb-itens-lista li:target { outline: 4px solid var(--rota); outline-offset: 4px; }
@media (max-width: 520px) {
  .topo-busca { padding: 6px 8px; font-size: 0.8rem; }
  .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; }
}