@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 200 800; font-display: block; src: url('../fonts/Oxanium.ttf') format('truetype'); }

/* Sprites e ícones pixelados devem ser ampliados por vizinho mais próximo em
   qualquer tela do app, inclusive os componentes gerados por JavaScript. */
img[src*="/pokemon/"], img[src*="/items/"], img[src*="/trainers/"],
img[src*="/badges/"], img[class*="sprite"] {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* Utilitário global de visibilidade (usado por .hidden no HTML e no JS) */
.hidden {
    display: none !important;
}

.compare-panel,.recent-pokemon,.pokedex-progress{border:1px solid var(--glass-border);border-radius:12px;background:var(--stat-cell-bg);padding:12px;margin:12px 0 18px}.journey-hub{margin:12px 0 18px}.journey-hub-copy{margin:0 0 14px;color:var(--text-muted)}.journey-hub-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.journey-action{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 12px;border:1px solid var(--card-border);border-radius:10px;background:var(--stat-bar-bg);color:var(--text-color);transition:transform .2s,background .2s,border-color .2s}.journey-action:hover,.journey-action:focus-visible{border-color:var(--primary-color);background:var(--glass-bg);transform:translateY(-2px);outline:none}.recent-pokemon>div{display:flex;gap:10px;overflow-x:auto;margin-top:8px}.recent-pokemon-card{display:grid;min-width:92px;justify-items:center;padding:8px 6px;border:1px solid var(--glass-border);border-radius:12px;background:var(--glass-bg);color:var(--text-color);text-decoration:none;font-size:.68rem}.recent-pokemon-card img{width:58px;height:58px;object-fit:contain}.compare-controls{display:flex;align-items:center;gap:8px}.compare-result{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;margin-top:14px}.compare-card{min-width:0;padding:18px 16px 16px;border:1px solid var(--card-border);border-radius:15px;background:var(--card-bg);box-shadow:var(--card-shadow)}.compare-card-head{display:grid;justify-items:center;gap:8px;margin-bottom:14px}.compare-sprite{width:88px;height:88px;object-fit:contain;filter:drop-shadow(2px 4px 4px rgba(0,0,0,.35))}.compare-identity{display:grid;justify-items:center;gap:8px}.compare-identity>b{font-size:1.2rem;color:var(--text-color)}.compare-types{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}.compare-types .pokemon-type-badge{display:inline-flex;padding:4px 10px;border-width:1px;font-size:.68rem;letter-spacing:.5px;box-shadow:none}.compare-stats{display:grid;gap:4px;padding:10px;border-radius:10px;background:var(--stat-bar-bg)}
#recent-pokemon:empty { display: none; }
.pokemon-section-nav{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:4px 1px 9px}.pokemon-section-nav button,.recent-searches button{flex:0 0 auto;width:auto;height:44px;min-height:44px;padding:8px 12px;border:1px solid var(--glass-border);border-radius:999px;background:var(--glass-bg);color:var(--text-muted);cursor:pointer;font:inherit;font-size:.85rem;font-weight:800;white-space:nowrap}.pokemon-section-nav button:hover,.pokemon-section-nav button:focus-visible,.recent-searches button:hover{border-color:var(--primary-color);background:var(--primary-surface);color:var(--primary-on);outline:none}.recent-searches{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;color:var(--text-muted);font-size:.8rem}
.journey-action b,.journey-action small{display:block}.journey-action small{margin-top:3px;color:var(--text-muted);font-size:.66rem}.pokedex-progress-head{display:flex;justify-content:space-between}.pokedex-progress-track{height:7px;margin-top:8px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.1)}.pokedex-progress-track span{display:block;height:100%;background:linear-gradient(90deg,var(--primary-color),var(--type-electric))}
.compare-result label{display:flex;justify-content:space-between;margin-top:2px;color:var(--text-muted);font-size:.68rem;text-transform:none}.compare-result label b{margin-left:8px;color:var(--text-color)}.compare-result i{display:block;height:5px;overflow:hidden;border-radius:99px;background:var(--glass-border)}.compare-result i em{display:block;height:100%;border-radius:inherit;background:var(--primary-surface)}.compare-result i em.compare-stat-hp{background:#ff5959}.compare-result i em.compare-stat-attack{background:#f5ac78}.compare-result i em.compare-stat-defense{background:#fae078}.compare-result i em.compare-stat-special-attack{background:#9db7f5}.compare-result i em.compare-stat-special-defense{background:#a7db8d}.compare-result i em.compare-stat-special{background:#9db7f5}.compare-result i em.compare-stat-speed{background:#fa92b2}.compare-result>strong{align-self:center;color:var(--primary-color);font-size:1.25rem}
.compare-sprite{width:96px;height:96px;object-fit:contain;image-rendering:pixelated;margin:auto}
.compare-result label{font-weight:600}

/* Blocos da abertura da Pokédex seguem a família de cards de conteúdo. */
.compare-result label.compare-stat-leading { color: var(--text-color); }
.compare-result label.compare-stat-leading b { color: var(--primary-color); }
.compare-types .pokemon-type-badge { font-weight: 900; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.compare-sprite-link { display: inline-flex; border-radius: 12px; }
.compare-sprite-link:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
.compare-result { margin-top: 20px; }
#view-compare > .section-panel > p { margin-bottom: 22px; }
.compare-result .compare-types .badge-normal { color: var(--type-normal-ink); }
.compare-result .compare-types .badge-fire { color: var(--type-fire-ink); }
.compare-result .compare-types .badge-water { color: var(--type-water-ink); }
.compare-result .compare-types .badge-electric { color: var(--type-electric-ink); }
.compare-result .compare-types .badge-grass { color: var(--type-grass-ink); }
.compare-result .compare-types .badge-ice { color: var(--type-ice-ink); }
.compare-result .compare-types .badge-fighting { color: var(--type-fighting-ink); }
.compare-result .compare-types .badge-poison { color: var(--type-poison-ink); }
.compare-result .compare-types .badge-ground { color: var(--type-ground-ink); }
.compare-result .compare-types .badge-flying { color: var(--type-flying-ink); }
.compare-result .compare-types .badge-psychic { color: var(--type-psychic-ink); }
.compare-result .compare-types .badge-bug { color: var(--type-bug-ink); }
.compare-result .compare-types .badge-rock { color: var(--type-rock-ink); }
.compare-result .compare-types .badge-ghost { color: var(--type-ghost-ink); }
.compare-result .compare-types .badge-dragon { color: var(--type-dragon-ink); }
.compare-result .compare-types .badge-dark { color: var(--type-dark-ink); }
.compare-result .compare-types .badge-steel { color: var(--type-steel-ink); }
.pokedex-progress,.recent-pokemon{margin:12px 0 18px}.pokedex-progress-track{height:7px;margin-top:8px;overflow:hidden;border-radius:99px;background:var(--stat-bar-bg)}.pokedex-progress-track span{display:block;height:100%;background:var(--primary-surface)}.recent-pokemon>.recent-pokemon-list{display:flex;gap:10px;overflow-x:auto;margin-top:10px;padding-bottom:2px}.recent-pokemon-card{min-width:92px;background:var(--stat-bar-bg);border-color:var(--card-border)}

.filters-panel{margin:0 0 25px;text-align:left}.filters-panel .filtros-titulo{width:auto;min-height:0;margin:0;padding:0;justify-content:flex-start;color:var(--primary-color);font-size:1.05rem}.filters-panel .filtros-status{justify-content:flex-start}.btn-filter-status{min-height:44px;padding:8px 15px;border:1px solid var(--card-border);border-radius:20px;background:var(--stat-bar-bg);color:var(--text-color);cursor:pointer;transition:transform .2s,background .2s,border-color .2s}.btn-filter-status:hover,.btn-filter-status:focus-visible{border-color:var(--primary-color);transform:translateY(-1px);outline:none}.btn-filter-status.active{background:var(--primary-surface);border-color:var(--primary-surface);color:var(--primary-on)}

.compare-panel{margin:16px 0 0;border-color:var(--card-border);background:var(--card-bg);box-shadow:var(--card-shadow)}.compare-controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:10px}.compare-controls .btn-primary{min-height:44px}.compare-controls input{min-width:0}


@media (max-width: 700px) {
    .compare-result { grid-template-columns: 1fr; }
    .compare-result > strong { display: none; }
    .compare-controls { grid-template-columns:1fr; }
    .compare-controls > span { display:none; }
    .compare-controls .btn-primary { width:100%; }
}

/* ==========================================
   ITENS IMPORTANTES
   ========================================== */
/* Antes: quatro blocos idênticos, tudo em style inline, e cinco itens com
   nome agrupado ("Water / Fire / Leaf Stone") caindo no fallback 📦 porque
   não existia um sprite com esse nome. */
.item-categoria {
    padding: 0;
    overflow: hidden;
}

.item-categoria-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-color);
    font-size: 1.05rem;
}

.item-categoria-contagem {
    padding: 2px 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--jogo-a) 26%, transparent),
        color-mix(in srgb, var(--jogo-b) 26%, transparent));
    color: var(--text-color);
    font-size: 0.78rem;
    font-weight: 700;
}

.item-lista { margin: 0; padding: 0; list-style: none; }

.item-linha {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 18px;
    border-top: 1px solid var(--card-border);
}

.item-linha:first-child { border-top: none; }
.item-lista .item-linha:nth-child(even) { background: var(--stat-cell-bg); }

/* Um sprite, ou a pilha dos agrupados sobreposta em leque */
.item-icones {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding-top: 2px;
}

.item-icones .item-sprite { margin: 0; }
.item-icones--pilha .item-sprite + .item-sprite { margin-left: -13px; }
.item-icones--vazio { font-size: 1.3rem; opacity: 0.7; }

.item-texto { min-width: 0; }
.item-texto h4 { margin: 0 0 3px; color: var(--text-color); font-size: 1rem; overflow-wrap: anywhere; }
.item-texto p { margin: 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.45; }

/* ==========================================
   EXTRAS & CÓDIGOS
   ========================================== */
.extra-card {
    gap: 12px;
    padding: 20px 16px 16px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.extra-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow); }

.extra-topo { display: flex; align-items: center; gap: 14px; }
.extra-sprite { width: 88px; height: 88px; object-fit: contain; flex: 0 0 88px; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.45)); }
.extra-corpo { min-width: 0; flex: 1; }
.extra-corpo h3 { margin: 0 0 6px; font-size: 1.15rem; border-bottom: none; padding-bottom: 0; overflow-wrap: anywhere; }
.extra-tipos { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.extra-tipos .pokemon-type-badge { display: inline-block; font-size: 0.62rem; padding: 3px 7px; letter-spacing: 0.5px; }
.extra-detalhes { display: grid; gap: 2px; font-size: 0.85rem; color: var(--text-color); }
.extra-missao { font-size: 0.85rem; color: var(--text-color); margin: 2px 0 4px; }
.extra-nota-aba { grid-column: 1 / -1; margin: 0; color: var(--text-color); line-height: 1.5; }
.extra-golpes { display: flex; flex-wrap: wrap; gap: 4px; }
.extra-desc { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); }
.extra-desc--rodape { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--card-border); }

/* Card de inobtível carrega só nome, tipo e motivo: sprite ao lado do texto. */
.extra-card--compacto { padding: 18px 14px 14px; }
.extra-card--compacto .extra-topo { align-items: center; }
.extra-card--compacto .extra-sprite { width: 64px; height: 64px; flex-basis: 64px; }
.extra-card--compacto .extra-desc { margin-top: 4px; }

/* Selo de origem: presente do jogo, distribuição de evento, troca, inobtível.
   Fica no fluxo (não mais absoluto): centralizado e separado do texto por uma
   linha, em vez de colado no rodapé do card. */
/* No fluxo, não mais absoluto: `margin-top: auto` encosta o selo na base
   quando a linha do grid estica o card, e o `gap` do .extra-card garante o
   respiro em relação ao texto — antes ele ficava colado, alinhado à esquerda. */
.extra-selo {
    align-self: center;
    margin-top: auto;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: center;
}

.selo-presente { background: color-mix(in srgb, var(--type-grass) 30%, var(--card-bg)); color: var(--text-color); }
.selo-evento { background: color-mix(in srgb, var(--type-psychic) 30%, var(--card-bg)); color: var(--text-color); }
.selo-troca { background: color-mix(in srgb, var(--type-water) 30%, var(--card-bg)); color: var(--text-color); }
.selo-inobtivel { background: color-mix(in srgb, var(--text-muted) 24%, var(--card-bg)); color: var(--text-color); }
.selo-metodo { background: color-mix(in srgb, var(--type-electric) 28%, var(--card-bg)); color: var(--text-color); }
.extra-card--metodo { cursor: default; }

@media (max-width: 480px) {
    .extra-topo { flex-direction: column; text-align: center; }
    .extra-tipos, .extra-detalhes { justify-content: center; }
    .extra-card--compacto { flex-direction: row; }
}

/* Cards que são <a> só para ganhar teclado e foco: precisam continuar com
   cara de card. Sem isto o navegador aplica o azul sublinhado padrão — foi o
   que aconteceu com os times na aba Treinadores. */
a.card-link,
a.team-slot,
a.grid-card,
a.gym-poke,
a.especial-card {
    color: inherit;
    text-decoration: none;
}

a.card-link:hover,
a.card-link:focus-visible { text-decoration: none; }

/* Rótulo visível só para leitor de tela */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:root {
    /* Tema Claro Padrão */
    --bg-color: #f4f5f7; /* Um cinza-azulado muito claro e suave, melhor aos olhos */
    --text-color: #333333;
    --text-muted: #5C5C5C; /* #666 dava 4,39:1 sobre os cards da Pokédex */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.08);
    --input-bg: rgba(255, 255, 255, 1);
    --btn-bg: rgba(255, 255, 255, 1);
    --btn-hover: #e2e6ea;
    --card-bg: #ffffff;
    /* Separação do card em relação ao fundo da página. A sombra de 8% que
       existia funcionava no tema claro e sumia no escuro (#1b1b1b sobre
       #121212 dava 1,09:1), então cada tema tem a sua. */
    --card-shadow: 0 5px 16px rgba(0, 0, 0, 0.12);
    --card-border: rgba(0, 0, 0, 0.16);
    /* Fundo das pastilhas (nomes de Pokémon nos guias). Antes usavam
       --glass-bg, que no claro é branco sobre card branco: 1,00:1. */
    --chip-bg: #eceff4;
    --stat-bar-bg: rgba(0, 0, 0, 0.08);
    --sidebar-solid: #fcfcfd; /* --bg-color sob a camada .glass, para o degradê do menu */

    /* Cor de destaque. Estava sendo usada em 28 lugares sem nunca ter sido
       declarada: como fundo virava transparente e como texto herdava a cor do
       pai (no tema claro o botão "Todos" ficava branco sobre branco).
       São dois papéis diferentes: um valor legível como TEXTO sobre o fundo da
       página e outro como FUNDO de botão, com o par de texto correspondente. */
    --primary-color: #C62828;   /* texto e ícones */
    --primary-surface: #C62828; /* fundo de botão */
    --primary-on: #ffffff;      /* texto sobre --primary-surface */
    --accent-color: #9B1C1C;    /* estado :hover do fundo de botão */

    /* Números do Painel do Treinador, legíveis nos dois temas */
    --stat-catch: #C62828;
    --stat-fav: #A34A08;
    --stat-tm: #7A5600;
    --stat-cell-bg: rgba(0, 0, 0, 0.06);
    /* Relógio de eventos: as cores de tipo (ciano, amarelo) sumiam no claro */
    --event-high-tide: #1565C0;
    --event-low-tide: #00695C;
    
    /* Cores de Tipos (Background) */
    --type-normal: #A8A77A;
    --type-fire: #EE8130;
    --type-water: #6390F0;
    --type-electric: #F7D02C;
    /* Destaque de titulo dentro do cartao. O amarelo e o laranja de tipo
       nasceram para preencher fundo, nao para virar texto: no tema claro
       davam 1,47:1 e 2,64:1 sobre o cartao branco. Estas duas versoes
       escuras ficam em 5,40:1 e 4,94:1; no tema escuro voltam as cores de
       tipo, que la ja passam (10,36:1 e 5,78:1). */
    --destaque-ouro: #8A6200;
    --destaque-quente: #B4530E;
    --destaque-pronto: #2E7D32;
    --type-grass: #7AC74C;
    --type-ice: #96D9D6;
    --type-fighting: #C22E28;
    --type-poison: #A33EA1;
    --type-ground: #E2BF65;
    --type-flying: #A98FF3;
    --type-psychic: #F95587;
    --type-bug: #A6B91A;
    --type-rock: #B6A136;
    --type-ghost: #735797;
    --type-dragon: #6F35FC;
    --type-dark: #705746;
    --type-steel: #B7B7CE;
    --type-fairy: #D685AD;

    /* Cor do texto sobre cada tipo.
       Texto branco sobre Elétrico dava 1,5:1 (o mínimo WCAG AA é 4,5:1);
       Terrestre 1,77 e Metal 1,97. Cada tipo agora usa a tinta que passa. */
    --ink-dark: #1a1a1f;
    --ink-light: #ffffff;
    --type-normal-ink: var(--ink-dark);
    --type-fire-ink: var(--ink-dark);
    --type-water-ink: var(--ink-dark);
    --type-electric-ink: var(--ink-dark);
    --type-grass-ink: var(--ink-dark);
    --type-ice-ink: var(--ink-dark);
    --type-fighting-ink: var(--ink-light);
    --type-poison-ink: var(--ink-light);
    --type-ground-ink: var(--ink-dark);
    --type-flying-ink: var(--ink-dark);
    --type-psychic-ink: var(--ink-dark);
    --type-bug-ink: var(--ink-dark);
    --type-rock-ink: var(--ink-dark);
    --type-ghost-ink: var(--ink-light);
    --type-dragon-ink: var(--ink-light);
    --type-dark-ink: var(--ink-light);
    --type-steel-ink: var(--ink-dark);
    --type-fairy-ink: var(--ink-dark);
}

[data-theme="dark"] {
    /* Tema Escuro */
    --destaque-ouro: #F7D02C;
    --destaque-quente: #EE8130;
    --destaque-pronto: #7AC74C;
    --bg-color: #121212; /* Cor de fundo padrão preta/escura */
    --text-color: #ffffff;
    --text-muted: #dddddd;
    /* 0,62 e não 0,5: sobre o fundo Elétrico ou Gelo da ficha, o texto
       secundário dos cards ficava com ~4:1 (agora ~5,9:1). */
    --glass-bg: rgba(0, 0, 0, 0.62);
    --glass-border: rgba(255, 255, 255, 0.2);
    --input-bg: rgba(0, 0, 0, 0.6);
    --btn-bg: rgba(0, 0, 0, 0.7);
    --btn-hover: rgba(0, 0, 0, 0.9);
    /* #1b1b1b dava 1,09:1 contra a página (#121212): o card não se destacava
       do fundo. #242424 sobe para ~1,3:1 sem clarear a ponto de brilhar. */
    --card-bg: #242424;
    --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    --card-border: rgba(255, 255, 255, 0.16);
    --chip-bg: rgba(255, 255, 255, 0.09);
    --stat-bar-bg: rgba(255, 255, 255, 0.2);
    --sidebar-solid: #090909;
    /* No escuro o vermelho precisa clarear para continuar legível como texto */
    --primary-color: #E85A6A;
    --stat-catch: #FF6B78;
    --stat-fav: #F0913F;
    --stat-tm: #E8C547;
    --stat-cell-bg: rgba(0, 0, 0, 0.25);
    --event-high-tide: #6FB3F2;
    --event-low-tide: #7FD8D2;
}

/* ==========================================
   COR DO JOGO SELECIONADO
   ==========================================
   O acento do site era sempre vermelho, independente do jogo. Agora ele segue
   a versão escolhida: `data-jogo` no <html> é escrito pelo app.

   --jogo-a / --jogo-b são as duas cores do par (Ruby+Sapphire, FireRed+
   LeafGreen) e alimentam a faixa dos cards, que vira degradê. Emerald é um
   jogo só, então as duas são iguais e a faixa fica lisa.

   --primary-color é texto e --primary-surface é fundo de botão: continuam
   sendo dois valores diferentes por tema, como antes, porque nenhum tom único
   passa nos dois papéis. Todos verificados em 4,5:1. */
:root {
    --jogo-a: var(--primary-surface);
    --jogo-b: var(--primary-surface);
}

/* Degradê do par, usado só em faixas decorativas (topo dos cards e heros,
   base da aba ativa, barra do seletor de jogo, marca do menu). Nunca há texto
   por cima dele: o contraste do texto continua vindo de --primary-surface.
   Precisa ser declarado em cada elemento (e não só no :root) para enxergar o
   --jogo-a/--jogo-b do jogo atual. */
* {
    --jogo-degrade: linear-gradient(90deg, var(--jogo-a), var(--jogo-b));
    --jogo-degrade-v: linear-gradient(180deg, var(--jogo-a), var(--jogo-b));
}

/* Geração 1. Red/Blue é par (degradê vermelho → azul); Yellow é jogo único e
   fica liso. O amarelo cheio não serve de fundo para texto branco (1,63:1):
   no tema claro o tom é escurecido até passar, e no escuro só o texto usa o
   amarelo vivo. Contraste medido contra #f4f5f7, #121212 e o branco. */
:root:not([data-theme="dark"])[data-jogo="red-blue"] {
    --primary-color: #B71C1C;   /* 6,02:1 sobre o fundo claro */
    --primary-surface: #B71C1C; /* 6,57:1 com texto branco */
    --accent-color: #8E1414;
    --jogo-a: #D32F2F;
    --jogo-b: #1E4FC2;
}

:root:not([data-theme="dark"])[data-jogo="yellow"] {
    --primary-color: #7A5600;   /* 6,09:1 */
    --primary-surface: #7A5600; /* 6,65:1 com branco */
    --accent-color: #5E4200;
    --jogo-a: #F2C200;
    --jogo-b: #F2C200;
}

[data-theme="dark"][data-jogo="red-blue"] {
    --primary-color: #F26B6B;   /* 6,37:1 sobre o fundo escuro */
    --primary-surface: #B71C1C;
    --accent-color: #D32F2F;
    --jogo-a: #EF5350;
    --jogo-b: #6C8EF0;
}

[data-theme="dark"][data-jogo="yellow"] {
    --primary-color: #F5C518;   /* 11,58:1 */
    --primary-surface: #7A5600;
    --accent-color: #F2C200;
    --jogo-a: #F5C518;
    --jogo-b: #F5C518;
}

/* Geração 2. Gold/Silver é par (degradê ouro → prata); Crystal é jogo único
   e fica liso, no azul do cristal. Ouro, prata e ciano vivos não servem de
   fundo para texto branco (menos de 2:1): no claro os tons escurecem; no
   escuro só o texto usa os vivos. Contraste medido contra #f4f5f7, #121212
   e o branco. */
:root:not([data-theme="dark"])[data-jogo="gold-silver"] {
    --primary-color: #7D5E00;   /* 5,54:1 sobre o fundo claro */
    --primary-surface: #7D5E00; /* 6,05:1 com texto branco */
    --accent-color: #5F6B78;
    --jogo-a: #C9A227;
    --jogo-b: #9AA3AE;
}

:root:not([data-theme="dark"])[data-jogo="crystal"] {
    --primary-color: #006B85;   /* 5,59:1 */
    --primary-surface: #006B85; /* 6,10:1 com branco */
    --accent-color: #00566B;
    --jogo-a: #1FA7C9;
    --jogo-b: #1FA7C9;
}

[data-theme="dark"][data-jogo="gold-silver"] {
    --primary-color: #E0B43A;   /* 9,60:1 sobre o fundo escuro */
    --primary-surface: #7D5E00;
    --accent-color: #C9CED6;
    --jogo-a: #E0B43A;
    --jogo-b: #C9CED6;
}

[data-theme="dark"][data-jogo="crystal"] {
    --primary-color: #56C8E6;   /* 9,63:1 */
    --primary-surface: #006B85;
    --accent-color: #4FC3E0;
    --jogo-a: #56C8E6;
    --jogo-b: #56C8E6;
}

:root:not([data-theme="dark"])[data-jogo="emerald"] {
    --primary-color: #0B7A4B;   /* 4,94:1 sobre o fundo claro */
    --primary-surface: #0B7A4B; /* 5,39:1 com texto branco */
    --accent-color: #095E3A;
    --jogo-a: #0FA968;
    --jogo-b: #0FA968;
}

:root:not([data-theme="dark"])[data-jogo="ruby-sapphire"] {
    --jogo-a: #C62828;
    --jogo-b: #1E56C8;
}

:root:not([data-theme="dark"])[data-jogo="firered-leafgreen"] {
    --primary-color: #C1440E;   /* 4,69:1 */
    --primary-surface: #C1440E; /* 5,12:1 com branco */
    --accent-color: #993408;
    --jogo-a: #E4551C;
    --jogo-b: #2E9E4F;
}

[data-theme="dark"][data-jogo="emerald"] {
    --primary-color: #3FD08A;   /* 9,46:1 sobre o fundo escuro */
    --primary-surface: #0B7A4B;
    --accent-color: #0FA968;
    --jogo-a: #3FD08A;
    --jogo-b: #3FD08A;
}

[data-theme="dark"][data-jogo="ruby-sapphire"] {
    --jogo-a: #E85A6A;
    --jogo-b: #6C9BF0;
}

[data-theme="dark"][data-jogo="firered-leafgreen"] {
    --primary-color: #F0743C;   /* 6,48:1 */
    --primary-surface: #C1440E;
    --accent-color: #E4551C;
    --jogo-a: #F0743C;
    --jogo-b: #4CC072;
}

/* Geração 4. Os cinco jogos mostravam todos o mesmo #C62828 -- o vermelho do
   Ruby --, iguais entre si e emprestados de outra região.

   Diamond+Pearl e HeartGold+SoulSilver são pares, e a faixa vira degradê de um
   para o outro; Platinum é jogo único, como o Emerald, e fica lisa.

   O ouro do HeartGold é o caso difícil: um ouro cheio (#B8860B) dá só 3,25:1
   contra o texto branco e reprova como fundo de botão no tema claro. O tom
   usado aqui é escurecido até passar, e no tema escuro ele volta a ser ouro.
   Todos verificados em 4,5:1, como os da Geração 3. */
:root:not([data-theme="dark"])[data-jogo="diamond-pearl"] {
    --primary-color: #1E4FA8;   /* 7,03:1 sobre o fundo claro */
    --primary-surface: #1E4FA8; /* 7,67:1 com texto branco */
    --accent-color: #163C7F;
    --jogo-a: #2F5BB7;          /* Diamond */
    --jogo-b: #C2185B;          /* Pearl */
}

:root:not([data-theme="dark"])[data-jogo="platinum"] {
    --primary-color: #455A64;   /* 6,64:1 */
    --primary-surface: #455A64; /* 7,24:1 com branco */
    --accent-color: #33444C;
    --jogo-a: #546E7A;
    --jogo-b: #546E7A;
}

:root:not([data-theme="dark"])[data-jogo="heartgold-soulsilver"] {
    --primary-color: #8D6A00;   /* 4,59:1 */
    --primary-surface: #8D6A00; /* 5,01:1 com branco */
    --accent-color: #6B5100;
    --jogo-a: #B8860B;          /* HeartGold */
    --jogo-b: #90A4AE;          /* SoulSilver */
}

[data-theme="dark"][data-jogo="diamond-pearl"] {
    --primary-color: #7FA8F0;   /* 7,82:1 sobre o fundo escuro */
    --primary-surface: #1E4FA8;
    --accent-color: #2F5BB7;
    --jogo-a: #7FA8F0;
    --jogo-b: #F08CB8;
}

[data-theme="dark"][data-jogo="platinum"] {
    --primary-color: #9FB3C0;   /* 8,64:1 */
    --primary-surface: #455A64;
    --accent-color: #78909C;
    --jogo-a: #9FB3C0;
    --jogo-b: #9FB3C0;
}

[data-theme="dark"][data-jogo="heartgold-soulsilver"] {
    --primary-color: #C9A227;   /* 7,74:1 */
    --primary-surface: #8D6A00;
    --accent-color: #B8860B;
    --jogo-a: #C9A227;
    --jogo-b: #B0BEC5;
}

/* Geração 5. Os dois grupos são pares (Black+White, Black 2+White 2) e a faixa
   vira degradê de um para o outro. O branco puro do White sumiria no tema
   claro, então ele entra como cinza; o acento de texto e de botão fica no
   cinza-grafite de B/W e no azul-aço de B2/W2. Contraste conferido no
   navegador (4,5:1 ou mais), como os das outras gerações. */
:root:not([data-theme="dark"])[data-jogo="black-white"] {
    --primary-color: #37474F;
    --primary-surface: #37474F;
    --accent-color: #263238;
    --jogo-a: #212121;          /* Black */
    --jogo-b: #9E9E9E;          /* White */
}

:root:not([data-theme="dark"])[data-jogo="black-2-white-2"] {
    --primary-color: #1F4E79;
    --primary-surface: #1F4E79;
    --accent-color: #173A5A;
    --jogo-a: #1F3A5F;          /* Black 2 */
    --jogo-b: #C0502E;          /* White 2 */
}

[data-theme="dark"][data-jogo="black-white"] {
    --primary-color: #CFD8DC;
    --primary-surface: #37474F;
    --accent-color: #90A4AE;
    --jogo-a: #90A4AE;
    --jogo-b: #ECEFF1;
}

[data-theme="dark"][data-jogo="black-2-white-2"] {
    --primary-color: #8FB8E8;
    --primary-surface: #1F4E79;
    --accent-color: #5B8DC4;
    --jogo-a: #8FB8E8;
    --jogo-b: #F08F6E;
}

/* Geração 6. Os dois grupos são pares e a faixa vira degradê.
   X/Y: o azul do Xerneas é o acento; a faixa vai do azul de X ao vermelho de Y.
   ORAS: o acento é um carmim escuro, para não repetir o #C62828 do Ruby da
   Gen 3; a faixa vai do vermelho de Omega Ruby ao azul de Alpha Sapphire.
   Contraste calculado: claro 6,57:1 (X/Y) e 8,15:1 (ORAS) com texto branco;
   escuro 8,50:1 e 8,32:1 sobre #121212. */
:root:not([data-theme="dark"])[data-jogo="x-y"] {
    --primary-color: #1A5DAB;
    --primary-surface: #1A5DAB;
    --accent-color: #134683;
    --jogo-a: #1F6FC5;          /* X */
    --jogo-b: #B0192E;          /* Y */
}

:root:not([data-theme="dark"])[data-jogo="omega-ruby-alpha-sapphire"] {
    --primary-color: #9A1B32;
    --primary-surface: #9A1B32;
    --accent-color: #741426;
    --jogo-a: #B3122E;          /* Omega Ruby */
    --jogo-b: #1B4FA0;          /* Alpha Sapphire */
}

[data-theme="dark"][data-jogo="x-y"] {
    --primary-color: #7FB2F0;
    --primary-surface: #1A5DAB;
    --accent-color: #3F82D6;
    --jogo-a: #7FB2F0;
    --jogo-b: #F07A86;
}

[data-theme="dark"][data-jogo="omega-ruby-alpha-sapphire"] {
    --primary-color: #FF8A95;
    --primary-surface: #9A1B32;
    --accent-color: #E0485A;
    --jogo-a: #FF6B7A;
    --jogo-b: #6FA2F2;
}

/* Geração 7. Os dois grupos são pares e a faixa vira degradê.
   Sun/Moon: o laranja do Solgaleo é o acento; a faixa vai do laranja de Sun ao
   roxo do Lunala, em Moon.
   Ultra Sun/Ultra Moon: o acento é o violeta do Necrozma, que separa o par do
   original e combina com a luz prismática; a faixa vai do laranja de Ultra Sun
   ao violeta de Ultra Moon.
   Contraste calculado: claro 4,91:1 (SM) e 7,97:1 (USUM) com texto branco;
   escuro 8,87:1 e 8,39:1 sobre #121212. */
:root:not([data-theme="dark"])[data-jogo="sun-moon"] {
    --primary-color: #B4560C;
    --primary-surface: #B4560C;
    --accent-color: #8C4309;
    --jogo-a: #E8791C;          /* Sun */
    --jogo-b: #6A4BC9;          /* Moon */
}

:root:not([data-theme="dark"])[data-jogo="ultra-sun-ultra-moon"] {
    --primary-color: #5B3BA8;
    --primary-surface: #5B3BA8;
    --accent-color: #452C80;
    --jogo-a: #F07C12;          /* Ultra Sun */
    --jogo-b: #7C4DE0;          /* Ultra Moon */
}

[data-theme="dark"][data-jogo="sun-moon"] {
    --primary-color: #F2A057;
    --primary-surface: #B4560C;
    --accent-color: #E8791C;
    --jogo-a: #F6A85A;
    --jogo-b: #9B84F0;
}

[data-theme="dark"][data-jogo="ultra-sun-ultra-moon"] {
    --primary-color: #B9A0F5;
    --primary-surface: #5B3BA8;
    --accent-color: #7C4DE0;
    --jogo-a: #FFA24B;
    --jogo-b: #B49BFF;
}

/* Let's Go, Pikachu!/Let's Go, Eevee!: o amarelo do Pikachu não tem contraste
   com texto branco, então o acento é o marrom do Eevee; a faixa vai do amarelo
   de Let's Go, Pikachu! ao marrom de Let's Go, Eevee! (o anel da marca
   img/logo-lgpe-marca*.png).
   Contraste calculado: claro 5,87:1 com texto branco e 5,38:1 sobre #F5F5F5;
   escuro 11,81:1 sobre #121212. */
:root:not([data-theme="dark"])[data-jogo="lets-go-pikachu-lets-go-eevee"] {
    --primary-color: #8A5A2B;
    --primary-surface: #8A5A2B;
    --accent-color: #6B4520;
    --jogo-a: #F6C828;          /* Pikachu */
    --jogo-b: #A66E3C;          /* Eevee */
}

[data-theme="dark"][data-jogo="lets-go-pikachu-lets-go-eevee"] {
    --primary-color: #F2C94C;
    --primary-surface: #8A5A2B;
    --accent-color: #D9A85A;
    --jogo-a: #F6D04D;
    --jogo-b: #C99A6B;
}

/* Geração 8. Sword/Shield: o acento é o azul do Zacian, o lado de Sword do
   anel da marca; a faixa vai desse azul ao carmim do Zamazenta, em Shield.
   Contraste calculado: claro 6,98:1 com texto branco; escuro 9,06:1 sobre
   #121212. */
:root:not([data-theme="dark"])[data-jogo="sword-shield"] {
    --primary-color: #1D5A9E;
    --primary-surface: #1D5A9E;
    --accent-color: #16457A;
    --jogo-a: #2B7FD4;          /* Sword */
    --jogo-b: #C8204A;          /* Shield */
}

[data-theme="dark"][data-jogo="sword-shield"] {
    --primary-color: #86B8F2;
    --primary-surface: #1D5A9E;
    --accent-color: #2B7FD4;
    --jogo-a: #5AA8F5;
    --jogo-b: #F2647F;
}

/* Brilliant Diamond/Shining Pearl: o acento é um azul-ciano de diamante, para
   não repetir o #1E4FA8 de Diamond/Pearl da Gen 4; a faixa vai do azul de
   Brilliant Diamond ao rosa-perolado de Shining Pearl.
   Contraste calculado: claro 6,16:1 sobre #F5F5F5 e 6,72:1 com texto branco;
   escuro 9,80:1 sobre #121212. */
:root:not([data-theme="dark"])[data-jogo="brilliant-diamond-shining-pearl"] {
    --primary-color: #0A6190;
    --primary-surface: #0A6190;
    --accent-color: #084B70;
    --jogo-a: #2E8BCB;          /* Brilliant Diamond */
    --jogo-b: #D1739E;          /* Shining Pearl */
}

[data-theme="dark"][data-jogo="brilliant-diamond-shining-pearl"] {
    --primary-color: #7CC4EE;
    --primary-surface: #0A6190;
    --accent-color: #2E8BCB;
    --jogo-a: #7CC4EE;
    --jogo-b: #F2A6C8;
}

/* Legends: Arceus: o acento é o dourado de Arceus, envelhecido como o
   pergaminho dos mapas de Hisui; a faixa vai do dourado ao verde-azulado de
   Hisui (o anel da marca img/logo-la-marca*.png).
   Contraste calculado: claro 5,84:1 sobre #F5F5F5 e 6,37:1 com texto branco;
   escuro 9,80:1 sobre #121212. */
:root:not([data-theme="dark"])[data-jogo="legends-arceus"] {
    --primary-color: #7A5A12;
    --primary-surface: #7A5A12;
    --accent-color: #5C430C;
    --jogo-a: #C9A24A;          /* Arceus */
    --jogo-b: #3E7C6B;          /* Hisui */
}

[data-theme="dark"][data-jogo="legends-arceus"] {
    --primary-color: #D9B862;
    --primary-surface: #7A5A12;
    --accent-color: #C9A24A;
    --jogo-a: #D9B862;
    --jogo-b: #7FC2AE;
}

/* Scarlet/Violet: o acento é o vermelho do Koraidon, o lado de Scarlet,
   escurecido para não repetir o #C62828 do Ruby da Gen 3; a faixa vai desse
   vermelho ao roxo do Miraidon, em Violet.
   Contraste calculado: claro 6,53:1 sobre #F5F5F5 e 7,12:1 com texto branco;
   escuro 8,48:1 sobre #121212. */
:root:not([data-theme="dark"])[data-jogo="scarlet-violet"] {
    --primary-color: #A8251E;
    --primary-surface: #A8251E;
    --accent-color: #7E1C17;
    --jogo-a: #D9362B;          /* Scarlet */
    --jogo-b: #7A3FC4;          /* Violet */
}

[data-theme="dark"][data-jogo="scarlet-violet"] {
    --primary-color: #FF8F82;
    --primary-surface: #A8251E;
    --accent-color: #D9362B;
    --jogo-a: #FF7A6B;
    --jogo-b: #B58CF5;
}

/* Legends: Z-A: o acento é o verde do Zygarde, o Z do logo do jogo, escurecido
   para dar contraste; a faixa vai do verde-limão ao magenta do símbolo de Mega
   Evolução (o anel da marca img/logo-za-marca*.png).
   Contraste calculado: claro 5,90:1 sobre #F5F5F5 e 6,43:1 com texto branco;
   escuro 12,24:1 sobre #121212. */
:root:not([data-theme="dark"])[data-jogo="legends-za"] {
    --primary-color: #3D6A0F;
    --primary-surface: #3D6A0F;
    --accent-color: #2E500B;
    --jogo-a: #9BCB1E;          /* Zygarde */
    --jogo-b: #C2185B;          /* Mega Evolução */
}

[data-theme="dark"][data-jogo="legends-za"] {
    --primary-color: #B5E04A;
    --primary-surface: #3D6A0F;
    --accent-color: #9BCB1E;
    --jogo-a: #B5E04A;
    --jogo-b: #F06A9E;
}

/* Champions: o dourado do logo do jogo, escurecido para contraste; a faixa
   vai do dourado ao azul-petróleo da arte do jogo.
   Contraste calculado: claro 5,91:1 sobre #F5F5F5 e 6,45:1 com texto branco;
   escuro 11,0:1 sobre #121212. */
:root:not([data-theme="dark"])[data-jogo="champions"] {
    --primary-color: #7A5900;
    --primary-surface: #7A5900;
    --accent-color: #5C4300;
    --jogo-a: #D9A90F;
    --jogo-b: #1F6F8B;
}

[data-theme="dark"][data-jogo="champions"] {
    --primary-color: #E9C25A;
    --primary-surface: #7A5900;
    --accent-color: #D9A90F;
    --jogo-a: #E9C25A;
    --jogo-b: #4FB3D9;
}

/* ==========================================
   FAIXA DE ACENTO DOS CARDS
   ==========================================
   Um componente só para a barra colorida no topo. Por padrão usa a cor do
   jogo; cards que falam de um Pokémon ou de um golpe sobrescrevem com o tipo
   (e Pokémon de dois tipos ganham degradê de um para o outro). */
.faixa-acento {
    position: relative;
    overflow: hidden;
}

.faixa-acento::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--acento-a, var(--jogo-a)),
        var(--acento-b, var(--jogo-b)));
    pointer-events: none;
    z-index: 1;
}

/* A mesma faixa para tabelas. Aqui ela é background-image em vez de ::before:
   o contêiner rola na horizontal e um filho absoluto rolaria junto, sumindo da
   tela. Com background-attachment padrão a barra fica presa à área visível. */
.tabela-acento {
    overflow-x: auto;
    margin: 16px 0;
    padding-top: 4px;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background-image: linear-gradient(90deg,
        var(--acento-a, var(--jogo-a)),
        var(--acento-b, var(--jogo-b)));
    background-size: 100% 4px;
    background-repeat: no-repeat;
    background-position: top left;
}

.tabela-acento > table { margin: 0; border-radius: 0 0 13px 13px; }
.tabela-acento > table tr:last-child td { border-bottom: none; }

[data-tipo="normal"] { --acento-a: var(--type-normal); --acento-b: var(--type-normal); }
[data-tipo="fire"] { --acento-a: var(--type-fire); --acento-b: var(--type-fire); }
[data-tipo="water"] { --acento-a: var(--type-water); --acento-b: var(--type-water); }
[data-tipo="electric"] { --acento-a: var(--type-electric); --acento-b: var(--type-electric); }
[data-tipo="grass"] { --acento-a: var(--type-grass); --acento-b: var(--type-grass); }
[data-tipo="ice"] { --acento-a: var(--type-ice); --acento-b: var(--type-ice); }
[data-tipo="fighting"] { --acento-a: var(--type-fighting); --acento-b: var(--type-fighting); }
[data-tipo="poison"] { --acento-a: var(--type-poison); --acento-b: var(--type-poison); }
[data-tipo="ground"] { --acento-a: var(--type-ground); --acento-b: var(--type-ground); }
[data-tipo="flying"] { --acento-a: var(--type-flying); --acento-b: var(--type-flying); }
[data-tipo="psychic"] { --acento-a: var(--type-psychic); --acento-b: var(--type-psychic); }
[data-tipo="bug"] { --acento-a: var(--type-bug); --acento-b: var(--type-bug); }
[data-tipo="rock"] { --acento-a: var(--type-rock); --acento-b: var(--type-rock); }
[data-tipo="ghost"] { --acento-a: var(--type-ghost); --acento-b: var(--type-ghost); }
[data-tipo="dragon"] { --acento-a: var(--type-dragon); --acento-b: var(--type-dragon); }
[data-tipo="dark"] { --acento-a: var(--type-dark); --acento-b: var(--type-dark); }
[data-tipo="steel"] { --acento-a: var(--type-steel); --acento-b: var(--type-steel); }

/* segundo tipo: só reescreve o fim do degradê */
[data-tipo2="normal"] { --acento-b: var(--type-normal); }
[data-tipo2="fire"] { --acento-b: var(--type-fire); }
[data-tipo2="water"] { --acento-b: var(--type-water); }
[data-tipo2="electric"] { --acento-b: var(--type-electric); }
[data-tipo2="grass"] { --acento-b: var(--type-grass); }
[data-tipo2="ice"] { --acento-b: var(--type-ice); }
[data-tipo2="fighting"] { --acento-b: var(--type-fighting); }
[data-tipo2="poison"] { --acento-b: var(--type-poison); }
[data-tipo2="ground"] { --acento-b: var(--type-ground); }
[data-tipo2="flying"] { --acento-b: var(--type-flying); }
[data-tipo2="psychic"] { --acento-b: var(--type-psychic); }
[data-tipo2="bug"] { --acento-b: var(--type-bug); }
[data-tipo2="rock"] { --acento-b: var(--type-rock); }
[data-tipo2="ghost"] { --acento-b: var(--type-ghost); }
[data-tipo2="dragon"] { --acento-b: var(--type-dragon); }
[data-tipo2="dark"] { --acento-b: var(--type-dark); }
[data-tipo2="steel"] { --acento-b: var(--type-steel); }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Oxanium', system-ui, sans-serif;
}

body {
    min-height: 100vh;
    background: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    position: relative;
    transition: color 0.3s;
}

/* Background Dinâmico (Fixed) */
#dynamic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Era 0,8s: ao passar de um Pokémon para outro a tela inteira mudava de
       cor devagar, como um piscar (análise de UX de 14/10/2026, item 12).
       Quem pede menos movimento no sistema já não tem transição (regra
       global de prefers-reduced-motion mais abaixo). */
    transition: background-color 0.25s ease-out;
    opacity: 1; /* Cor sólida como solicitado */
}
.bg-default { background-color: var(--bg-color) !important; }
/* Fundo da ficha na cor sólida do tipo; no tema escuro quem escurece é a
   interface por cima dele (menu, cabeçalho e cards), não o fundo. Um véu
   sobre o fundo (14/10/2026) deixava a página quase preta e apagava a cor
   que representa o Pokémon. Ver docs/PADRAO-UI.md, 1.6. */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .content-header {
    background: rgba(10, 10, 12, 0.84);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* App Container */
.app-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Header */
.app-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}
.lang-select {
    width: auto;
    padding: 8px 10px;
    font-size: 0.85rem;
}
.logo {
    font-size: 2.5rem;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    color: var(--text-color);
}

/* Forms e Inputs */
.search-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.search-input-wrapper {
    display: flex;
    gap: 10px;
}
.input-select, .input-search {
    width: 100%;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 600;
    outline: none;
    transition: all 0.3s;
}
/* Botão com o jogo atual, só no celular (js/ui/cabecalho-compacto.js). */
.jogo-atual {
    display: none; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    min-height: 48px; padding: 6px 14px; border: 1px solid var(--glass-border); border-radius: 10px;
    background: var(--input-bg); color: var(--text-color); font: inherit; text-align: left; cursor: pointer;
}
.jogo-atual-texto { display: flex; flex-direction: column; min-width: 0; }
.jogo-atual-nome, .jogo-atual-dex { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jogo-atual-nome { font-size: 0.95rem; }
.jogo-atual-dex { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.jogo-atual-acao { color: var(--primary-color); transition: transform 0.2s ease; }
.jogo-atual.aberto .jogo-atual-acao { transform: rotate(180deg); }
.jogo-atual.aberto { border-color: var(--primary-color); }

/* Alvo de toque de 44px também nos seletores e na busca (mediam 39px). */
.input-select, .input-search { min-height: 44px; }
.input-select option {
    background: var(--glass-bg);
    color: var(--text-color);
}
.input-select:focus, .input-search:focus {
    border-color: var(--primary-color);
}

.btn-icon, .btn-search, .btn-nav {
    background: var(--btn-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-color);
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.btn-search {
    padding: 0 20px;
}
.btn-install {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.3rem;
}
.btn-icon {
    min-width: 45px;
    padding: 0 10px;
    height: 45px;
    font-size: 1.5rem;
    white-space: nowrap;
}
/* Botões da ficha com rótulo visível sob o ícone: no toque não há tooltip,
   e ✨ ou a Poké Ball sozinhos não diziam o que fazem (análise de UX de
   14/10/2026, item 6). */
.btn-acao {
    flex-direction: column;
    gap: 3px;
    min-width: 52px;
    height: auto;
    min-height: 52px;
    padding: 6px 4px 5px;
}
/* Os cinco cabem numa linha em 375px (eram 58px cada e quebravam em duas). */
.bento-hero .image-controls:has(.btn-acao) { gap: 6px; }
.btn-acao .acao-icone { display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 1.35rem; }
.btn-acao .acao-rotulo { font-size: 0.75rem; font-weight: 700; line-height: 1.1; color: var(--text-muted); }
.btn-acao[aria-pressed="true"] .acao-rotulo { color: var(--text-color); }

.btn-icon:hover, .btn-search:hover, .btn-nav:hover {
    background: var(--btn-hover);
    transform: translateY(-2px);
}

/* Glass Card */
.pokemon-card {
    background: var(--glass-bg);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    padding: 25px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
}

/* Loading Overlay */
/* Visível por padrão: o JS controla a exibição adicionando/removendo .hidden. */
.loading-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    z-index: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.3s;
}
.loading-overlay.active {
    opacity: 1;
    pointer-events: all;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--glass-border);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.loading-overlay p {
    margin: 12px 0 0;
    color: var(--text-color);
    font-weight: 700;
}
.offline-indicator { position: fixed; right: 16px; bottom: 16px; z-index: 450; max-width: min(360px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card-bg); color: var(--text-color); box-shadow: var(--card-shadow); font-size: .78rem; font-weight: 700; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* O sprite-placeholder aparece enquanto o carregamento progressivo entra na
   viewport; a animação evita a impressão de card quebrado. */
.grid-card .poke-sprite[src*="miss.png"] {
    opacity: .55;
    animation: sprite-placeholder 1.2s ease-in-out infinite alternate;
}
.grid-card[data-loading="true"] { background-image: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%); background-size: 220% 100%; animation: card-placeholder 1.5s ease-in-out infinite; }
.grid-card:not([data-loading="true"]):nth-child(-n+24) { animation: card-enter .28s ease both; }
.guide-card, .compare-card { transition: transform .2s ease, box-shadow .2s ease; }
.guide-card:hover, .compare-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow), 0 6px 18px rgba(0,0,0,.12); }

@keyframes sprite-placeholder {
    from { opacity: .35; }
    to { opacity: .75; }
}
@keyframes card-placeholder { from { background-position: 180% 0; } to { background-position: -20% 0; } }
@keyframes card-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 1.8s; }
    .grid-card .poke-sprite[src*="miss.png"] { animation: none; }
    .grid-card[data-loading="true"] { animation: none; }
    .grid-card:not([data-loading="true"]):nth-child(-n+24), .guide-card, .compare-card { animation: none; transition: none; }
    .journey-hub { transition: none; }
}

/* Header do Pokémon */
.pokemon-header {
    text-align: center;
}
.pokemon-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-muted);
}
.pokemon-name {
    font-size: 2rem;
    font-weight: 800;
    margin: 5px 0;
}
.pokemon-category {
    font-size: 1rem;
    font-style: italic;
    color: var(--text-muted);
}

/* Sprite Container */
.pokemon-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 200px;
    margin: 10px 0;
}
.pokemon-image {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.4));
    transition: transform 0.3s;
}
.pokemon-image:hover {
    transform: scale(1.1);
}
.image-controls {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Tipos */
.pokemon-types {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.pokemon-type-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    border: 2px solid rgba(255, 255, 255, 0.85); /* Contorno para destacar do fundo */
    display: none;
    letter-spacing: 1px;
}
/* Classes dinâmicas baseadas nas variáveis de tipo que já temos */
.badge-normal,
.type-filter-btn.type-normal { background-color: var(--type-normal); color: var(--type-normal-ink); }
.badge-fire,
.type-filter-btn.type-fire { background-color: var(--type-fire); color: var(--type-fire-ink); }
.badge-water,
.type-filter-btn.type-water { background-color: var(--type-water); color: var(--type-water-ink); }
.badge-electric,
.type-filter-btn.type-electric { background-color: var(--type-electric); color: var(--type-electric-ink); }
.badge-grass,
.type-filter-btn.type-grass { background-color: var(--type-grass); color: var(--type-grass-ink); }
.badge-ice,
.type-filter-btn.type-ice { background-color: var(--type-ice); color: var(--type-ice-ink); }
.badge-fighting,
.type-filter-btn.type-fighting { background-color: var(--type-fighting); color: var(--type-fighting-ink); }
.badge-poison,
.type-filter-btn.type-poison { background-color: var(--type-poison); color: var(--type-poison-ink); }
.badge-ground,
.type-filter-btn.type-ground { background-color: var(--type-ground); color: var(--type-ground-ink); }
.badge-flying,
.type-filter-btn.type-flying { background-color: var(--type-flying); color: var(--type-flying-ink); }
.badge-psychic,
.type-filter-btn.type-psychic { background-color: var(--type-psychic); color: var(--type-psychic-ink); }
.badge-bug,
.type-filter-btn.type-bug { background-color: var(--type-bug); color: var(--type-bug-ink); }
.badge-rock,
.type-filter-btn.type-rock { background-color: var(--type-rock); color: var(--type-rock-ink); }
.badge-ghost,
.type-filter-btn.type-ghost { background-color: var(--type-ghost); color: var(--type-ghost-ink); }
.badge-dragon,
.type-filter-btn.type-dragon { background-color: var(--type-dragon); color: var(--type-dragon-ink); }
.badge-dark,
.type-filter-btn.type-dark { background-color: var(--type-dark); color: var(--type-dark-ink); }
.badge-steel,
.type-filter-btn.type-steel { background-color: var(--type-steel); color: var(--type-steel-ink); }
.badge-fairy,
.type-filter-btn.type-fairy { background-color: var(--type-fairy); color: var(--type-fairy-ink); }

/* Atalhos contextuais da jornada, usando a paleta visual existente. */
/* Cabeçalho, texto e atalhos empilhados: os atalhos usam a largura toda do card.
   Numa grade de duas colunas eles caíam na coluna estreita e o texto espremia. */
.journey-hub { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; padding: 15px; border: 1px solid var(--glass-border); border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.08), var(--glass-bg)); overflow: visible; transition: max-height .28s ease, opacity .2s ease, margin .28s ease, padding .28s ease; }
.journey-hub.busca-ativa { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; pointer-events: none; }
.journey-hub-copy { min-width: 0; margin: 0; color: var(--text-muted); font-size: .85rem; line-height: 1.4; }
.journey-hub-kicker { color: var(--primary-color); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.journey-hub-copy p { margin: 5px 0 0; color: var(--text-muted); font-size: .85rem; line-height: 1.35; }
/* auto-fit: três colunas quando cabem 190px por atalho, senão duas ou uma. */
.journey-hub-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 10px; }
.journey-action { display: flex; gap: 10px; align-items: center; min-width: 0; min-height: 64px; padding: 12px 14px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--stat-cell-bg); color: var(--text-color); text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.journey-action:hover, .journey-action:focus-visible { transform: translateY(-2px); border-color: var(--primary-color); background: var(--glass-bg); outline: none; }
.journey-action > span:first-child { flex: none; font-size: 1.35rem; }
.journey-action > span:last-child { flex: 1; min-width: 0; }
.journey-action b, .journey-action small { display: block; overflow-wrap: break-word; hyphens: auto; }
.journey-action b { font-size: .88rem; line-height: 1.25; }
.journey-action small { margin-top: 3px; color: var(--text-muted); font-size: .74rem; line-height: 1.35; }
.pokemon-section-nav { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; padding: 4px 1px 9px; scrollbar-width: thin; }
.pokemon-section-nav button { flex: 0 0 auto; padding: 8px 11px; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass-bg); color: var(--text-muted); cursor: pointer; font-size: .85rem; font-weight: 800; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.pokemon-section-nav button:hover, .pokemon-section-nav button:focus-visible { border-color: var(--primary-color); background: var(--primary-surface); color: var(--primary-on); outline: none; }
details.bento-locations, details.bento-moves, details.bento-home { padding-top: 14px; }
details.bento-locations > summary, details.bento-moves > summary, details.bento-home > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--text-color); font-size: 1.05rem; font-weight: 800; }
details.bento-locations > summary::-webkit-details-marker, details.bento-moves > summary::-webkit-details-marker, details.bento-home > summary::-webkit-details-marker { display: none; }
details.bento-locations > summary::before, details.bento-moves > summary::before, details.bento-home > summary::before { content: '▸'; color: var(--primary-color); transition: transform .2s ease; }
details.bento-locations[open] > summary::before, details.bento-moves[open] > summary::before, details.bento-home[open] > summary::before { transform: rotate(90deg); }
details.bento-locations > .encounters-container, details.bento-moves > .text-muted, details.bento-moves > .moves-container { margin-top: 12px; }
/* Pokémon HOME (js/views/pokemon-home.js) */
#home-compat { margin-top: 12px; }
.home-legenda, .home-fora { margin: 0 0 8px; color: var(--text-muted); }
.home-jogos { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.home-jogo { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--stat-cell-bg); }
.home-jogo b { display: block; color: var(--text-color); }
.home-jogo small { color: var(--text-muted); }
.home-seta { font-size: 1.3rem; font-weight: 800; color: var(--primary-color); }
.home-notas { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: .9rem; }
details.bento-stats, details.bento-matchups { padding-top: 14px; }
details.bento-stats > summary, details.bento-matchups > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--text-color); font-size: 1.05rem; font-weight: 800; }
details.bento-stats > summary::-webkit-details-marker, details.bento-matchups > summary::-webkit-details-marker { display: none; }
details.bento-stats > summary::before, details.bento-matchups > summary::before { content: '▸'; color: var(--primary-color); transition: transform .2s ease; }
details.bento-stats[open] > summary::before, details.bento-matchups[open] > summary::before { transform: rotate(90deg); }
details.bento-stats > .pokemon-stats, details.bento-matchups > .matchup-legenda, details.bento-matchups > .matchups-container { margin-top: 12px; }
details.bento-pokeathlon { padding-top: 14px; }
details.bento-pokeathlon > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--text-color); font-size: 1.05rem; font-weight: 800; }
details.bento-pokeathlon > summary::-webkit-details-marker { display: none; }
details.bento-pokeathlon > summary::before { content: '▸'; color: var(--primary-color); transition: transform .2s ease; }
details.bento-pokeathlon[open] > summary::before { transform: rotate(90deg); }
.pokeathlon-copy { margin: 12px 0 0; color: var(--text-muted); font-size: .85rem; }
.pokeathlon-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 125px), 1fr)); gap: 9px; margin-top: 12px; }
.pokeathlon-stat { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--stat-cell-bg); }
.pokeathlon-stat span { color: var(--text-muted); font-size: .76rem; font-weight: 700; }
.pokeathlon-stat strong { color: var(--text-color); font-size: 1rem; }
.pokeathlon-stat strong i { color: var(--primary-color); font-style: normal; }
.pokeathlon-stat small { color: var(--text-muted); font-size: .68rem; }
#pokemon-overview, #pokemon-stats, #pokemon-matchups, #pokemon-locations, #pokemon-moves { scroll-margin-top: 18px; }
.pokedex-progress { margin: 12px 0 18px; padding: 11px 13px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--stat-cell-bg); }
.pokedex-progress-head { display: flex; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: .78rem; }
.pokedex-progress-head strong { color: var(--text-color); }
.pokedex-progress-track { height: 7px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.1); }
.pokedex-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary-color), var(--type-electric)); transition: width .35s ease; }
.compare-panel { margin: 0 0 18px; padding: 12px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--stat-cell-bg); }
.compare-controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.compare-controls .input-search { min-width: 0; padding: 8px 10px; }
.compare-result { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; margin-top: 10px; text-align: center; }
.compare-result div { display: grid; gap: 3px; padding: 8px; border-radius: 9px; background: var(--glass-bg); }
.compare-result span { color: var(--primary-color); font-size: .8rem; }.compare-result small { color: var(--text-muted); font-size: .65rem; }
.compare-result label { display: flex; justify-content: space-between; color: var(--text-muted); font-size: .65rem; text-transform: capitalize; }.compare-result label b { color: var(--text-color); }.compare-result i { display: block; height: 4px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.1); }.compare-result i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary-color), var(--type-electric)); }
@media (max-width: 600px) { .compare-controls { flex-wrap: wrap; } .compare-controls .input-search { flex: 1 1 40%; } .compare-result { grid-template-columns: 1fr; } .compare-result > strong { display: none; } }
.recent-searches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; color: var(--text-muted); font-size: .72rem; }
.recent-searches button { border: 1px solid var(--glass-border); border-radius: 999px; padding: 4px 9px; background: var(--glass-bg); color: var(--text-muted); cursor: pointer; font-size: .72rem; }
.recent-searches button:hover { border-color: var(--primary-color); color: var(--text-color); }
.recent-searches .recent-searches-clear { color: var(--primary-color); }
.recent-pokemon { margin: 0 0 18px; padding: 12px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--stat-cell-bg); }.recent-pokemon > strong { color: var(--text-color); font-size: .82rem; }.recent-pokemon > div { display: flex; gap: 10px; overflow-x: auto; margin-top: 8px; }.recent-pokemon-card { display: grid; min-width: 92px; justify-items: center; gap: 4px; padding: 8px 6px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--glass-bg); color: var(--text-color); text-decoration: none; font-size: .68rem; }.recent-pokemon-card:hover { border-color: var(--primary-color); transform: translateY(-2px); }.recent-pokemon-card img { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; }

/* Medidas / Habilidades */
.pokemon-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: var(--stat-bar-bg);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}
.info-item {
    display: flex;
    flex-direction: column;
}
.info-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}
.info-value {
    font-size: 1rem;
    font-weight: 700;
    text-transform: capitalize;
}

/* Descrição */
.pokemon-description {
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
    font-weight: 500;
    padding: 10px 5px;
    /* Gen 2: Gold e Silver, um texto por linha (js/views/pokemon.js). */
    white-space: pre-line;
}

/* Nota da Mega/Primal logo abaixo da descrição da Pokédex */
.pokemon-description-forma {
    display: inline-block;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* Stats */
.pokemon-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stats-title {
    font-size: 1.2rem;
    margin-bottom: 5px;
    text-align: center;
}
.stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.stat-label {
    width: 40px;
    font-weight: 700;
    font-size: 0.85rem;
}
.stat-value {
    width: 35px;
    text-align: right;
    font-weight: 600;
}
.stat-bar {
    flex: 1;
    height: 10px;
    background: var(--stat-bar-bg);
    border-radius: 5px;
    overflow: hidden;
}
.stat-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.8s ease-out;
}
/* Cores Base dos Stats */
.stat-hp { background-color: #FF5959; }
.stat-atk { background-color: #F5AC78; }
.stat-def { background-color: #FAE078; }
.stat-spa { background-color: #9DB7F5; }
.stat-spd { background-color: #A7DB8D; }
.stat-spc { background-color: #9DB7F5; }
.stat-spe { background-color: #FA92B2; }

/* Controles */
.pokemon-controls {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}
.btn-nav {
    flex: 1;
    padding: 15px;
    font-weight: 700;
    font-size: 1.1rem;
}
.btn-random {
    flex: 0.3;
    font-size: 1.5rem;
}

/* Responsividade Mobile Menor */
@media (max-width: 380px) {
    .pokemon-info {
        grid-template-columns: 1fr;
    }
}

/* TABS */
.tabs-container { margin-top: 10px; }
.tabs-header { display: flex; gap: 5px; margin-bottom: 10px; border-bottom: 2px solid var(--glass-border); padding-bottom: 5px; }
.tab-btn { flex: 1; background: transparent; border: none; color: var(--text-muted); font-weight: 700; cursor: pointer; padding: 5px; transition: 0.3s; font-size: 0.9rem; }
.tab-btn:hover { color: var(--text-color); }
.tab-btn.active { color: var(--text-color); border-bottom: 3px solid var(--text-color); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Evoluções */
.evolution-container { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.evolution-chain { display: grid; gap: 10px; width: 100%; }
.evolution-step { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; border: 1px solid var(--card-border); border-radius: 12px; background: var(--stat-bar-bg); }
.evolution-method { display: grid; justify-items: center; gap: 3px; min-width: 84px; color: var(--text-muted); text-align: center; font-weight: 700; }
.evolution-method span { color: var(--primary-color); font-size: 1.25rem; }
.evolution-method small { font-size: .68rem; }
.evo-types { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px; }
.evo-type { display: inline-flex; padding: 2px 6px; border-width: 1px; font-size: .52rem; letter-spacing: .3px; box-shadow: none; }
.evo-condition { max-width: 110px; line-height: 1.2; }
.evolution-container > div { max-width: 100%; box-sizing: border-box; }
.evolution-container .evo-item { min-width: 72px; text-align: center; cursor: pointer; }
/* Tamanhos mínimos de leitura na ficha: 12,5px nos metadados e ~13,5px nos
   nomes e botões (eram 11,2 a 12,5px; análise de UX de 14/10/2026, item 9). */
.evolution-container .evo-name { display: block; max-width: 96px; overflow-wrap: anywhere; font-size: .85rem; }
@media (max-width: 600px) { .evo-linha { gap: 6px; padding: 8px; } .evolution-container .evo-item { min-width: 62px; } .evolution-step { gap: 6px; padding: 8px; } .evolution-method { min-width: 62px; } }
.evo-ramos { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.evo-ramo { display: flex; flex-direction: column; gap: 10px; }
/* So aparece quando a especie tem forma regional: dois ramos na mesma tela. */
.evo-regiao { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.evo-linha { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border-radius: 10px; background: var(--stat-bar-bg); }
.evo-metodo { font-size: 0.8rem; color: var(--text-muted); text-align: center; font-weight: bold; }
.evo-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: 0.3s; }
.evo-item:hover { transform: scale(1.1); }
.evo-img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4)); }
.evo-name { font-size: 0.85rem; font-weight: 700; }
.evo-name--exato { text-transform: none; }
/* Ressalva no metodo de evolucao (ex.: nao acontece em HG/SS). */
.evo-nota { font-weight: 400; font-size: 0.92em; opacity: 0.8; }
.evo-arrow { font-size: 1.5rem; font-weight: bold; color: var(--text-muted); }

/* Type Matchups */
.matchups-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 200px; overflow-y: auto; padding-right: 5px; }
.matchup-item { display: flex; justify-content: space-between; align-items: center; padding: 5px 15px; border-radius: 10px; font-weight: 700; font-size: 0.85rem; }
/* O véu rgba(0,0,0,0.15) escurecia o fundo do tipo sob o texto e deixava o
   "x2" em 4,17:1. Sem preenchimento, o multiplicador herda exatamente o par
   cor/fundo já calibrado da linha; o contorno de currentColor separa. */
.matchup-mult { background: none; color: inherit; padding: 2px 6px; border: 1px solid currentColor; border-radius: 5px; font-weight: 800; }

/* Dois grupos de filtro diferentes (status e tipo), ambos em forma de pílula:
   no celular a linha de status quebra e o tipo começava 13px abaixo, lendo
   como um grupo só. A régua separa. */
.filtros-status {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.filters-panel #type-filters {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--card-border);
}

/* Type Filters na Home */
/* A opacidade de 0.55 compunha fundo e texto juntos em direção à cor da
   página e derrubava o contraste de ~6:1 para 1,7-3,0:1 — 17 dos 18 botões
   reprovavam AA no estado inativo. Só a partir de 0,95 todos passariam, e aí
   o escurecimento nem é perceptível. O estado ativo passa a ser marcado por
   anel e escala, que não mexem na legibilidade. */
.type-filters-container { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0; justify-content: center; }
.type-filter-btn { padding: 8px 14px; min-height: 36px; border: none; border-radius: 18px; font-size: 0.8rem; font-weight: bold; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.type-filter-btn.type-all { background-color: #6b6b78; color: var(--ink-light); }
.type-filter-btn:hover { transform: scale(1.06); box-shadow: 0 2px 5px rgba(0,0,0,0.4); }
.type-filter-btn.active {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px var(--bg-color), 0 0 0 5px var(--text-color), 0 2px 5px rgba(0,0,0,0.4);
}

/* Team Builder */
.team-grid { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin-top: 15px; }
.team-slot { width: 120px; height: 120px; border: 2px dashed rgba(255,255,255,0.3); border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: 0.3s; background: rgba(0,0,0,0.2); text-decoration: none;}
.team-slot:hover { border-color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.1); }
.team-slot img { max-width: 80px; max-height: 80px; }
.team-slot .team-name { font-size: 0.75rem; color: white; margin-top: 5px; font-weight: bold; }
/* O botão era display:none e só aparecia no :hover. Em aparelho de toque não
   existe hover, então não havia como tirar um Pokémon da equipe pelo celular:
   o toque no slot abre a ficha de treinamento. Agora ele existe sempre e só
   fica escondido onde há mouse de verdade. */
.team-slot .remove-btn { position: absolute; top: -5px; right: -5px; background: #e74c3c; color: white; border: none; border-radius: 50%; width: 25px; height: 25px; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 2; }
.team-slot:hover .remove-btn,
.team-slot:focus-within .remove-btn { opacity: 1; pointer-events: auto; }

@media (hover: none) {
    .team-slot .remove-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
        opacity: 1;
        pointer-events: auto;
    }
}
.team-slot.empty::after { content: "+"; font-size: 2rem; color: rgba(255,255,255,0.3); }

.team-matchup-summary { display: grid; grid-template-columns: repeat(3, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 14px 0; padding: 18px 16px 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 15px; box-shadow: var(--card-shadow); }
.team-summary-group { min-width: 0; }
.team-summary-group + .team-summary-group { padding-left: 12px; border-left: 1px solid var(--card-border); }
.team-summary-group h4 { margin: 0 0 9px; color: var(--text-color); font-size: 0.9rem; }
.team-summary-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.team-summary-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; }
.team-summary-pill b { display: inline-grid; place-items: center; min-width: 18px; min-height: 18px; padding: 0 4px; border-radius: 999px; background: color-mix(in srgb, currentColor 18%, transparent); font-size: 0.7rem; }
.team-summary-empty { color: var(--text-muted); font-size: 0.82rem; }
.team-summary-note { grid-column: 1 / -1; margin: 0; padding-top: 10px; border-top: 1px solid var(--card-border); color: var(--text-muted); font-size: .75rem; line-height: 1.4; }
.team-analysis { margin-top: 15px; }
/* Tabela defensiva: tipo atacante × membro. As cores dos multiplicadores são
   misturadas ao fundo do card, e o texto fica na cor normal, para manter 4,5:1
   nos dois temas. */
.team-defense { width: 100%; border-collapse: collapse; background: var(--card-bg); font-size: .82rem; }
.team-defense caption { caption-side: bottom; padding: 8px 10px; color: var(--text-muted); font-size: .75rem; text-align: left; }
.team-defense th, .team-defense td { padding: 4px 6px; border-bottom: 1px solid var(--card-border); text-align: center; color: var(--text-color); }
.team-defense thead th { font-size: .75rem; }
.team-defense thead img { display: block; margin: 0 auto; width: 40px; height: 40px; object-fit: contain; }
.team-defense tbody th { text-align: left; white-space: nowrap; }
/* Com 6 membros a tabela rola dentro do contêiner no celular; a coluna do
   tipo fica presa à esquerda para não perder a referência. */
.team-defense tbody th, .team-defense thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card-bg); }
.team-type-chip { display: inline-block; min-width: 76px; padding: 3px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; text-align: center; }
.team-defense td { min-width: 34px; font-weight: 800; }
.team-defense .mult-fraco { background: color-mix(in srgb, #e5484d 26%, var(--card-bg)); }
.team-defense .mult-resiste { background: color-mix(in srgb, #30a46c 22%, var(--card-bg)); }
.team-defense .mult-imune { background: color-mix(in srgb, #8e8c99 30%, var(--card-bg)); }
.team-defense .team-total { border-left: 1px solid var(--card-border); font-weight: 700; }
.team-defense .team-total-alerta { background: color-mix(in srgb, #e5484d 40%, var(--card-bg)); }
.team-offense tbody th { display: flex; align-items: center; gap: 4px; }
.team-offense tbody th img { width: 32px; height: 32px; object-fit: contain; }
.team-rival-tipo { display: block; font-size: .65rem; font-weight: 600; }
.team-rival-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.team-rival-form .input-search { flex: 1 1 180px; min-width: 0; min-height: 44px; }
.team-rival-form .nav-btn { min-height: 44px; }
.team-rivals { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.team-rival { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 6px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.team-rival img { width: 32px; height: 32px; object-fit: contain; }
.team-rival-remove { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: color-mix(in srgb, currentColor 18%, transparent); color: inherit; font: inherit; cursor: pointer; }
@media (hover: none) { .team-rival-remove { width: 44px; height: 44px; } }
.team-code { max-width: 640px; margin: 20px auto 0; text-align: left; }
.team-code label { display: block; font-weight: 800; }
.team-code-help { margin: 4px 0 8px; color: var(--text-muted); font-size: .8rem; }
.team-code textarea { box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card-bg); color: var(--text-color); font: .78rem/1.4 ui-monospace, monospace; word-break: break-all; resize: vertical; }
.team-code-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.team-code-actions .nav-btn { min-height: 44px; }
.team-saved-form { margin-top: 14px; }
.team-saved-form label { display: block; font-weight: 800; }
.team-saved-form .input-search { flex: 1 1 180px; min-width: 0; min-height: 44px; }
.team-saved-form .nav-btn { min-height: 44px; }
.team-saved-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.team-saved-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card-bg); }
.team-saved-name { flex: 1 1 140px; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.team-saved-item .nav-btn { min-height: 44px; min-width: 44px; }
.team-code-status { min-height: 1.2em; margin: 6px 0 0; color: var(--text-color); font-size: .82rem; }

@media (max-width: 760px) {
    .team-matchup-summary { grid-template-columns: 1fr; }
    .team-summary-group + .team-summary-group { padding: 12px 0 0; border-top: 1px solid var(--card-border); border-left: 0; }
}

/* Gym Leaders */
.gyms-container { display: block; margin-top: 15px; }
.gym-card { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); border-radius: 15px; padding: 15px; text-align: center; color: white; display: flex; flex-direction: column; align-items: center; }
.gym-card h3 { margin: 0; font-size: 1.2rem; }
.gym-card .gym-city { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 10px; }
.gym-badge { font-weight: bold; padding: 3px 10px; border-radius: 10px; font-size: 0.8rem; margin-bottom: 10px; display: inline-block; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }
.gym-sprite { height: 100px; object-fit: contain; margin-bottom: 15px; }
.gym-team { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; width: 100%; }
.gym-poke { display: flex; flex-direction: column; align-items: center; background: rgba(0,0,0,0.4); padding: 5px; border-radius: 10px; cursor: pointer; transition: 0.3s; text-decoration: none; color: white; }
.gym-poke:hover { transform: scale(1.1); background: rgba(255,255,255,0.1); }
.gym-poke img { width: 40px; height: 40px; }
.gym-poke span { font-size: 0.7rem; }

/* Grid Modal */
.grid-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); opacity: 1; transition: opacity 0.3s; }
.grid-modal.hidden { opacity: 0; pointer-events: none; }

/* No celular o navegador pinta o retângulo do botão ao tocar; os botões já
   têm :hover/:active próprios, e o foco por teclado segue no :focus-visible. */
html { -webkit-tap-highlight-color: transparent; }

/* Tooltips (Evolução por Item) */
.tooltip-container .tooltip-bubble {
    visibility: hidden;
    width: max-content;
    max-width: 150px;
    background-color: var(--glass-border);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.7rem;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
}
.tooltip-container .tooltip-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--glass-border) transparent transparent transparent;
}
.tooltip-container:hover .tooltip-bubble {
    visibility: visible;
    opacity: 1;
}
.grid-modal-content { width: 90%; max-width: 800px; height: 85%; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; backdrop-filter: blur(15px); }
.grid-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--glass-border); }
.grid-container { padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 15px; overflow-y: auto; flex: 1; }
#tms-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid-card { position: relative; background: var(--stat-bar-bg); border-radius: 15px; padding: 10px; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: 0.3s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.grid-card:focus:not(:focus-visible) { outline: none; }
.grid-card:active { box-shadow: none; }
.grid-card:hover { background: var(--glass-border); transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

/* Cards de TMs, HMs e tutores. A faixa do topo carrega o tipo do golpe. */
.machine-card {
    align-items: stretch;
    gap: 12px;
    padding: 20px 16px 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    cursor: default;
    font-family: inherit;
}
.machine-card-header,
.machine-card-identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.machine-card-header { justify-content: space-between; }
.machine-card-identity { min-width: 0; }
.machine-code,
.machine-cost {
    color: var(--text-color);
    line-height: 1.2;
    white-space: nowrap;
}
.machine-type-pill.pokemon-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.machine-card-title {
    margin: 0;
    color: var(--text-color);
    font-size: 1.1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.machine-card-description {
    flex: 1;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}
.machine-card-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 7px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--glass-border);
    font-size: 0.8rem;
    line-height: 1.45;
}
.machine-card-meta strong { color: var(--text-color); }
.machine-card-meta span { color: var(--text-muted); }
.tm-checkbox {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    cursor: pointer;
    accent-color: var(--primary-surface);
}
.tutors-container .frontier-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Catch Icon */
.catch-icon { position: absolute; top: 8px; right: 8px; color: var(--text-muted); opacity: 0.3; transition: 0.2s; z-index: 2; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
/* O ícone continua com 18px, mas a área de toque vai a 44x44 (eram 18x18 em
   cada card da Pokédex; análise de UX de 14/10/2026, item 5). */
.catch-icon::before { content: ''; position: absolute; inset: -13px; }
.catch-icon:hover { opacity: 0.8; color: var(--text-color); }
.catch-icon.captured { color: #ff4757; opacity: 1; filter: drop-shadow(0 0 5px rgba(255, 71, 87, 0.5)); }
/* Mapa: card com o ícone de capturado (botão irmão do link, alvo de 44px). */
.map-card { position: relative; display: flex; }
.map-card > .card-link { flex: 1; }
.map-catch { top: 0; right: 0; width: 44px; height: 44px; padding: 13px; background: none; border: 0; cursor: pointer; opacity: 0.55; }
.map-catch svg { width: 18px; height: 18px; }
.map-catch.captured { opacity: 1; }

.catch-profile-btn { color: var(--text-color); transition: 0.3s; }
.catch-profile-btn.captured { color: #ff4757; filter: drop-shadow(0 0 8px rgba(255, 71, 87, 0.8)); }
.grid-card img { width: 60px; height: 60px; object-fit: contain; }
.grid-card-id { font-size: 0.8rem; font-weight: bold; color: var(--text-muted); }
/* Nomes de espécie chegam prontos de js/core/nomes.js: sem text-transform,
   que daria "Jangmo-O" e "Kommo-O". */
.grid-card-name { font-size: 0.9rem; font-weight: 700; text-align: center; word-break: break-word; overflow-wrap: break-word; }

/* Ficha de treinamento */
.training-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.82);
}
.training-card {
    position: relative;
    width: min(100%, 560px);
    max-height: min(90dvh, 760px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 24px;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    background: var(--glass-bg);
}
.training-card.is-shiny {
    border-color: var(--type-electric);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--type-electric) 45%, transparent), 0 0 28px color-mix(in srgb, var(--type-electric) 22%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--type-electric) 10%, var(--glass-bg)), var(--glass-bg));
}
.training-close { position: absolute; top: 12px; right: 14px; color: var(--text-color); font-size: 1.5rem; }
#training-modal-title { margin: 0 44px 20px 0; color: var(--primary-color); }
.training-pokemon-header { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 18px; margin-bottom: 20px; }
.training-sprite-wrap { position: relative; display: grid; place-items: center; min-height: 112px; border-radius: 16px; background: var(--stat-bar-bg); }
#training-modal-img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.training-shiny-badge { position: absolute; right: 6px; bottom: 6px; padding: 3px 7px; border-radius: 999px; background: var(--type-electric); color: #1d1d1d; font-size: .68rem; font-weight: 900; }
.training-pokemon-info { min-width: 0; }
.training-pokemon-info h3 { margin: 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.training-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.training-actions .nav-btn { margin: 0; padding: 7px 11px; font-size: .8rem; }
.training-shiny-toggle[aria-pressed="true"] { background: var(--type-electric); color: #1d1d1d; }
.training-nature-field { margin-bottom: 15px; }
.training-nature-field label { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: .9rem; }
.training-nature-field .input-select { width: 100%; }
.training-ev-panel { padding: 15px; border-radius: 12px; background: rgba(0,0,0,.22); }
.training-ev-panel h4 { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; color: var(--text-color); }
.training-iv-panel,
.training-moves-panel { margin-top: 14px; padding: 15px; border: 1px solid var(--card-border); border-radius: 12px; background: var(--card-bg); }
.training-iv-panel h4,
.training-moves-panel h4 { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; color: var(--text-color); }
.training-iv-panel h4 span,
.training-moves-panel h4 span { color: var(--text-muted); font-size: .8rem; font-weight: 600; }
#iv-inputs-container { display: grid; grid-template-columns: repeat(3, minmax(min(100%, 100px), 1fr)); gap: 8px; }
.training-iv-field { display: grid; gap: 4px; color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.training-iv-field input { width: 100%; min-height: 38px; box-sizing: border-box; border: 1px solid var(--card-border); border-radius: 7px; background: var(--input-bg); color: var(--text-color); text-align: center; font: inherit; }
.training-moves-panel p { margin: -3px 0 10px; color: var(--text-muted); font-size: .78rem; line-height: 1.4; }
#training-moves-container { display: grid; gap: 8px; }
.training-move-select { width: 100%; min-height: 44px; }
#ev-total { color: var(--text-muted); font-size: .8rem; }
#ev-sliders-container { display: flex; flex-direction: column; gap: 10px; }
.training-stat-row { display: grid; grid-template-columns: 64px minmax(70px,1fr) 58px 42px; align-items: center; gap: 8px; font-size: .85rem; }
.training-stat-label { font-weight: 800; }
.training-stat-row input[type="range"] { min-width: 0; width: 100%; }
.training-stat-row .ev-input { width: 100%; box-sizing: border-box; padding: 4px 5px; border: 1px solid var(--glass-border); border-radius: 5px; background: var(--input-bg); color: var(--text-color); text-align: center; }
.calc-stat-display { text-align: right; color: var(--stat-tm); font-weight: 800; }
.training-note { margin: 15px 0 0; color: var(--text-muted); font-size: .75rem; text-align: center; }
.training-dv-derivados { margin: 10px 0 0; font-size: .85rem; color: var(--text-color); }
.training-dv-derivados:empty { display: none; }
.team-slot-shiny {
    /* O destaque shiny deve ser apenas um contorno; as classes badge-* dos
       tipos não podem pintar todo o cartão durante a captura da equipe. */
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--type-electric);
    box-shadow: 0 0 6px rgba(247, 208, 44, 0.12);
}
.deoxys-form-select { margin: 8px auto 0; max-width: 190px; }
.team-shiny-marker { position: absolute; left: 8px; top: 7px; font-size: .9rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }

@media (max-width: 480px) {
    .training-modal { padding: 10px; }
    .training-card { padding: 20px 14px; }
    .training-pokemon-header { grid-template-columns: 96px minmax(0,1fr); gap: 12px; }
    .training-sprite-wrap { min-height: 96px; }
    #training-modal-img { width: 82px; height: 82px; }
    .training-stat-row { grid-template-columns: 58px minmax(60px,1fr) 52px 38px; gap: 6px; }
}

@media (max-width: 400px) {
    #iv-inputs-container { grid-template-columns: repeat(2, minmax(min(100%, 100px), 1fr)); }
}

/* Favorite State */
.btn-fav.active { color: #ff4757; text-shadow: 0 0 10px rgba(255, 71, 87, 0.8); }

/* Compact Mode */
.grid-container.compact {
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 8px;
}
.grid-container.compact .grid-card {
    padding: 5px;
    height: 85px;
    justify-content: flex-start;
}
.grid-container.compact .grid-card img {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    margin-bottom: 2px;
}
.grid-container.compact .grid-card-name {
    display: block;
    font-size: 0.65rem;
    line-height: 1.1;
    word-break: break-all;
    overflow-wrap: break-word;
}
.grid-container.compact .grid-card-id {
    font-size: 0.65rem;
    margin-bottom: 2px;
}

/* Bento Box Gyms / Elite Four / Frontier Styles */
.frontier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 20px;
}

.frontier-facility-card {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.frontier-facility-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.frontier-brain-sprite {
    height: 180px;
    object-fit: contain;
    filter: drop-shadow(4px 6px 8px rgba(0,0,0,0.5));
}

.gym-leader-sprite {
    max-height: 140px !important;
}

.frontier-facility-title {
    flex: 1;
    min-width: 250px;
}

.frontier-facility-title h3 {
    color: var(--destaque-ouro);
    font-size: 1.5rem;
    margin: 0 0 5px 0;
}

.frontier-brain-title {
    color: var(--destaque-quente);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.frontier-desc {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 1rem;
    text-align: justify;
}

.frontier-symbol-box {
    background: var(--stat-bar-bg);
    padding: 10px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

.frontier-symbol-img {
    height: 40px;
    image-rendering: pixelated;
}

.frontier-teams-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.frontier-team-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 15px;
}

.frontier-team-req {
    text-align: center;
    color: var(--destaque-ouro);
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.frontier-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 10px;
}

.frontier-poke-card {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    /* folga no topo para a faixa do tipo */
    padding: 14px 10px 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.frontier-poke-card:hover {
    background: rgba(255,255,255,0.08);
    transform: scale(1.02);
}

.frontier-poke-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.frontier-poke-header img {
    width: 60px;
    height: 60px;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}

.frontier-poke-info {
    flex: 1;
}

.frontier-poke-name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.frontier-poke-level {
    font-size: 0.8rem;
    color: var(--text-color);
    margin-left: 5px;
}

/* Gen 8: quem o treinador Dynamaxa ou Gigantamaxa. */
.frontier-poke-max {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--jogo-a), var(--jogo-b));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}

.frontier-poke-types {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.frontier-poke-types .pokemon-type-badge {
    font-size: 0.65rem;
    padding: 3px 6px;
    margin: 0;
    display: inline-block;
}

.frontier-poke-details {
    background: rgba(0,0,0,0.2);
    padding: 6px;
    border-radius: 6px;
    font-size: 0.85rem;
}

/* No tema claro a mesma faixa preta a 20% escurecia o cartao e derrubava o
   rotulo (--text-muted) para 4,12:1. A 6% o bloco continua marcado e o texto
   sobe para ~5,6:1. */
:root:not([data-theme="dark"]) .frontier-poke-details {
    background: rgba(0,0,0,0.06);
}

.detail-row {
    margin-bottom: 2px;
}
.detail-row:last-child {
    margin-bottom: 0;
}
.detail-row strong {
    color: var(--text-muted);
}

.frontier-poke-moves {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.frontier-move {
    background: rgba(0,0,0,0.2);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
}
/* Botão Voltar ao Topo */
#btn-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    /* Estava em 9999, o mesmo do modal de treinamento, e vinha depois no DOM:
       o botão flutuava por cima do modal, bem onde ficam os sliders de EV. */
    z-index: 400;
    background: var(--primary-surface);
    color: var(--primary-on);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

#btn-back-to-top.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#btn-back-to-top:hover {
    background: var(--accent-color);
    transform: translateY(-5px);
}

@media (max-width: 900px) {
    #btn-back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
}

@media (max-width: 600px) {
    .frontier-facility-header {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
    
    .frontier-facility-title {
        min-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .frontier-desc {
        text-align: center;
    }
}


/* Estado vazio da Pokédex (busca sem resultado ou filtro sem correspondência) */
.grid-empty-state {
    grid-column: 1 / -1;
    margin: 0;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
}

.ui-state-message {
    margin: 0;
    padding: 28px 18px;
    border: 1px dashed var(--card-border);
    border-radius: 12px;
    background: var(--stat-bar-bg);
    color: var(--text-muted);
    text-align: center;
}

.ui-state-message.error {
    border-color: var(--primary-color);
    color: var(--text-color);
}

.ui-state-message {
    margin: 0;
    padding: 28px 18px;
    border: 1px dashed var(--card-border);
    border-radius: 12px;
    background: var(--stat-bar-bg);
    color: var(--text-muted);
    text-align: center;
}

.ui-state-message.error {
    border-color: var(--primary-color);
    color: var(--text-color);
}

/* ==========================================
   PAINEL DO TREINADOR (recolhível)
   ========================================== */
/* Ficava sempre aberto e empurrava a grade de Pokémon para ~832px no desktop
   e ~1545px no mobile. Agora vem recolhido, com um resumo na própria barra. */
.collapsible-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    margin-bottom: 20px;
}

.collapsible-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 18px;
    min-height: 52px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--text-color);
    border-radius: 14px;
}

.collapsible-summary::-webkit-details-marker { display: none; }
/* Barra de progresso da Pokédex no resumo do Painel do Treinador. */
.trainer-progress { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; }
.trainer-progress .pokedex-progress-track { flex: 1; margin-top: 0; }
.trainer-progress #pokedex-progress-label { font-size: 0.8rem; color: var(--text-muted); min-width: 3ch; text-align: right; }
.journey-hub--painel { margin: 0 0 16px; }

.collapsible-summary::before {
    content: '▸';
    display: inline-block;
    transition: transform 0.2s ease;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.collapsible-panel[open] > .collapsible-summary::before {
    transform: rotate(90deg);
}

.collapsible-summary:hover,
.collapsible-summary:focus-visible { background: var(--stat-bar-bg); outline: none; }

.collapsible-digest {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.collapsible-body {
    padding: 14px 18px 8px;
    border-top: 1px solid var(--card-border);
}

/* ==========================================
   ESTATÍSTICAS
   ========================================== */
/* Antes era um flex que virava uma coluna de 4 blocos no mobile (~360px de
   altura). Em grade, o mesmo conteúdo cabe em 2x2. */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-cell {
    text-align: center;
    padding: 12px 8px;
    background: var(--stat-cell-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}

.stat-cell-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-cell-value {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.2;
}

.stat-cell-track {
    width: 100%;
    height: 5px;
    background: var(--stat-bar-bg);
    border-radius: 5px;
    margin-top: 6px;
    overflow: hidden;
}

.stat-cell-fill {
    width: 0%;
    height: 100%;
    background: var(--stat-catch);
    transition: width 0.5s;
}

@media (max-width: 700px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-cell-value { font-size: 1.4rem; }
    .collapsible-digest { margin-left: 0; width: 100%; }
}

/* Alvos de toque dos filtros de tipo no mobile */
@media (max-width: 900px) {
    .type-filter-btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 0.85rem;
    }
}

/* Tabela das lojas da Battle Frontier: com 12px de padding em cada célula, a
   largura mínima do conteúdo passava do card em telas de ~320px. O nome do
   item pode quebrar linha e o padding aperta. */
@media (max-width: 480px) {
    .frontier-shop-table td { padding: 8px 5px !important; font-size: 0.92rem !important; }
    .frontier-shop-table td span { flex-wrap: wrap; }
}

/* ==========================================
   BARRA DE ABAS ROLÁVEL
   ========================================== */
/* A barra dos Guias tem 9 botões: quebrando linha, ocupava 338px de altura no
   celular — 41% da tela antes de qualquer conteúdo. Vira uma pista horizontal,
   como o menu principal. No desktop continua em linha única centralizada. */
.tabs-scroller {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
/* Seletor dos Guias (js/widgets/guias-seletor.js; análise de UX de 14/10/2026,
   item 4): filtro em todas as telas e, no celular, um botão com o guia aberto
   no lugar da faixa de até 25 abas. */
.guias-ferramentas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.guias-filtro { max-width: 280px; }
.guias-atual {
    display: none; flex: 1 1 100%; align-items: center; gap: 6px; min-height: 48px; padding: 10px 14px;
    border: 1px solid var(--card-border); border-radius: 12px; background: var(--card-bg); color: var(--text-color);
    font: inherit; font-weight: 800; text-align: left; cursor: pointer;
}
.guias-atual-nome { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guias-atual-meta { flex: 1; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.frontier-tabs.tabs-scroller .btn-guide-tab.filtro-oculta { display: none !important; }
/* Guias comuns a todas as gerações no fim da lista, com borda tracejada. */
#guide-tabs .btn-guide-tab[data-tab="transferencia"],
#guide-tabs .btn-guide-tab[data-tab="recompensas-pokedex"] { order: 1; border: 1px dashed var(--card-border); }
@media (max-width: 600px) {
    .guias-atual { display: flex; }
    .guias-filtro { display: none; flex: 1 1 100%; max-width: none; }
    #view-guides.guias-aberta .guias-filtro { display: block; }
    #view-guides #guide-tabs.tabs-scroller { display: none !important; }
    #view-guides.guias-aberta #guide-tabs.tabs-scroller {
        display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible !important;
    }
    #view-guides.guias-aberta #guide-tabs .nav-btn { height: auto; white-space: normal; }
}

/* Abas de guia, nativas e editoriais, compartilham a mesma caixa e estados.
   Os links editoriais vivem num wrapper com display:contents na tela de Guias,
   portanto o seletor precisa alcançar descendentes, não apenas filhos diretos. */
.frontier-tabs.tabs-scroller { align-items: center; }
.frontier-tabs.tabs-scroller .nav-btn {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 12px 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--glass-bg);
    color: var(--text-color);
    font-weight: 600;
    transition: background .3s, border-color .3s, color .3s;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}
/* Sem :not(.active), esta regra (0,5,0) vencia a da aba ativa (0,4,0): com o
   ponteiro, ou o toque que fica "em hover" no celular, a aba aberta voltava à
   cor de inativa. */
.frontier-tabs.tabs-scroller .nav-btn:hover:not(:disabled):not(.active) {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}
.frontier-tabs.tabs-scroller .nav-btn.active {
    background: var(--jogo-degrade) bottom / 100% 3px no-repeat, var(--primary-surface);
    border-color: var(--glass-border);
    color: var(--primary-on);
    font-weight: 700;
}

@media (max-width: 900px) {
    .frontier-tabs.tabs-scroller { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto !important; scrollbar-width: none; -ms-overflow-style: none; }
    .frontier-tabs.tabs-scroller::-webkit-scrollbar { display: none; }
    .frontier-tabs.tabs-scroller .nav-btn {
        flex: 0 0 auto !important;
        height: 44px;
        min-height: 44px;
        padding: 0 13px !important;
        font-size: 0.92rem;
        scroll-snap-align: start;
    }
    .tabs-scroller {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }
    .tabs-scroller::-webkit-scrollbar { display: none; }
    .tabs-scroller > .nav-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: 11px 13px;
        font-size: 0.92rem;
    }
}

/* ==========================================
   BOTÕES E SELECTS DAS CONFIGURAÇÕES
   ========================================== */
/* .btn-primary e .custom-select eram usadas em cinco controles da tela de
   Configurações e não tinham nenhuma regra: caíam no visual padrão do
   navegador, com 22px de altura nos botões e 16px no select. */
.btn-primary {
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: var(--btn-bg);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.btn-primary:hover { background: var(--btn-hover); transform: translateY(-2px); }

.custom-select {
    min-height: 44px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
}

.custom-select option { background: var(--glass-bg); color: var(--text-color); }

/* ==========================================
   ALVOS DE TOQUE
   ========================================== */
/* Os checkboxes do checklist diário mediam 13x13px e os filtros de status
   34px de altura — abaixo do mínimo confortável no dedo. */
.daily-task-chk {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    accent-color: var(--primary-surface);
    cursor: pointer;
}

#daily-checklist-container label { min-height: 44px; }

.btn-filter-status {
    min-height: 44px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
}

.filtros-titulo { min-height: 44px; }

/* Selects que dividem a linha com botões ficavam espremidos: no Mapa o nome
   da rota precisava de 172px e sobravam 125px; no perfil, 123px em 75px.
   A linha quebra e o select ocupa a largura toda quando não cabe ao lado. */
.linha-controles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.linha-controles > select { flex: 1 1 12rem; min-width: 0; }
.linha-controles > button { flex: 0 0 auto; }

/* O seletor de versão carrega a cor do jogo escolhido, como os cards. */
#game-version-select {
    border-left: 4px solid transparent;
    background: var(--jogo-degrade-v) left / 4px 100% no-repeat border-box, var(--input-bg) padding-box;
    font-weight: 700;
}

#calc-type-1,
#calc-type-2 { min-width: 0; }

/* ==========================================
   FOCO VISÍVEL (navegação por teclado)
   ========================================== */
/* O projeto não tinha nenhum indicador de foco e ainda zerava o outline nos
   campos, deixando quem navega por Tab sem saber onde está. :focus-visible
   mostra o anel só no teclado, sem sujar o clique do mouse. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.grid-card:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Respeita quem pediu menos animação no sistema */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   CARDS DE TREINADOR
   ========================================== */
/* Layout unificado entre Ginásios, Elite Four, Rivais, Vilões e os
   líderes da Battle Frontier — antes cada aba tinha alturas e alinhamentos
   próprios porque o sprite não tinha tamanho definido. */
.trainer-card .frontier-brain-sprite,
.frontier-facility-card .frontier-brain-sprite {
    height: 160px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    align-self: flex-start;
}

.trainer-portraits {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}

/* Sprite de item ao lado do nome, nos times e nas listas */
.item-sprite {
    vertical-align: middle;
    margin-right: 6px;
    image-rendering: pixelated;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.sem-item { color: var(--text-muted); }

/* Regra do inicial do rival */
.starter-rule,
.battle-list {
    background: var(--stat-cell-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 12px;
    font-size: 0.9rem;
}

.starter-rule p { margin: 4px 0 10px; color: var(--text-muted); }

.starter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
    border-top: 1px solid var(--glass-border);
}
.starter-row:first-of-type { border-top: none; }

.starter-seu { font-weight: 700; min-width: 90px; }
.starter-seta { color: var(--text-muted); }
.starter-rival { font-weight: 700; color: var(--primary-color); min-width: 90px; }
.starter-linha { display: flex; gap: 2px; margin-left: auto; }
.starter-linha img { width: 40px; height: 40px; image-rendering: pixelated; }

.battle-list ol { margin: 6px 0 0 18px; color: var(--text-muted); }
.battle-list li { padding: 2px 0; }

/* Cronologia dos rivais com times que mudam conforme o inicial do jogador */
.rival-battle-guide {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

/* ==========================================
   GUIAS PRÁTICOS
   ========================================== */
.guide-hero {
    display: grid;
    grid-template-columns: minmax(180px, 320px) 1fr;
    align-items: center;
    gap: 22px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    /* Faixa do par no topo, como nos cards (.faixa-acento). */
    background: var(--jogo-degrade) top / 100% 4px no-repeat,
        linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 13%, var(--card-bg)), var(--card-bg));
}
.btn-guide-tab[hidden] { display: none !important; }
.btn-tm-tab[hidden] { display: none !important; }
/* Sub-abas dentro de um guia (Tera Raids por estrela). */
.guide-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.guide-subtabs .guide-subtab {
    min-height: 44px; padding: 8px 16px; border-radius: 999px;
    background: var(--glass-bg); color: var(--text-color); border: 1px solid var(--glass-border);
}
.guide-subtabs .guide-subtab.active { background: var(--jogo-degrade) bottom / 100% 3px no-repeat, var(--primary-surface); color: var(--primary-on); border-color: transparent; }

.guide-hero.compact { grid-template-columns: auto 1fr; }
.guide-hero img { width: 100%; max-height: 230px; object-fit: contain; image-rendering: pixelated; }
.guide-hero h4, .guide-card h4, .guide-section h4 { margin: 0 0 8px; color: var(--primary-color); }
.guide-hero p, .guide-card p { margin: 0 0 8px; }

/* Corpo comum dos guias: largura confortável e texto corrido justificado.
   Títulos, tabelas e blocos de resultado mantêm alinhamento próprio. */
.guide-content {
    max-width: 1100px;
    margin-inline: auto;
    font-size: .95rem;
    line-height: 1.65;
}
.guide-content-title { margin: 0 0 15px; color: var(--text-color); }
.nature-name { font-weight: 700; color: var(--text-color); }
.nature-name.is-neutral { color: var(--text-muted); }
.nature-up { color: var(--type-grass); }
.nature-down { color: #ff4757; }
.nature-fav { color: var(--type-electric); }
.nature-hate { color: var(--type-poison); }
.guides-container { padding: 10px; border-radius: 12px; }
/* A descrição introduz o conteúdo: precisa de respiro antes do primeiro card. */
#view-guides .section-panel > p { margin: 0 0 24px; }

/* O mapa e o marcador são camadas separadas: trocar a arte da região não
   exige alterar a lógica dos pontos nem a animação do app. */
.map-visual {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 980px);
    /* Proporção nativa de emerald-map.png: evita deslocamento do marcador. */
    aspect-ratio: 1286 / 857;
    margin: 0 auto 20px;
}
.map-visual[data-map="kalos"] { aspect-ratio: 1104 / 724; }
.map-visual[data-map="hoenn"] { aspect-ratio: 1314 / 857; }
/* Proporção nativa de frlg_map.png. */
.map-visual[data-map="kanto"] { aspect-ratio: 1142 / 857; }
/* Let's Go: o Town Map do jogo (img/kanto_lgpe_town_map.png, 1212 x 654). */
[data-jogo="lets-go-pikachu-lets-go-eevee"] .map-visual[data-map="kanto"] { aspect-ratio: 1212 / 654; }
.map-visual[data-map="sinnoh"] { aspect-ratio: 864 / 672; }
.map-visual[data-map="johto"] { aspect-ratio: 212 / 145; }
.map-visual[data-map="kanto-hgss"] { aspect-ratio: 192 / 145; }
/* Artes do Pokégear (tools/build_hgss_mapa.py): pixel art, sem suavizar. */
.map-visual[data-map="johto"] img,
.map-visual[data-map="kanto-hgss"] img { image-rendering: pixelated; }
.map-visual[data-map="unova"] { aspect-ratio: 256 / 168; }
.map-visual[data-map="sevii"] {
    width: min(100%, 400px);
    aspect-ratio: 400 / 876;
}
/* Galar é vertical como o Town Map do jogo (img/galar/galar.jpg, 1000x2571):
   estreito no desktop para caber sem virar uma coluna de 2.500 px. */
.map-visual[data-map="galar"] {
    width: min(100%, 380px);
    aspect-ratio: 1000 / 2571;
}
/* Hisui: uma arte por área (img/hisui/*.jpg, 730x560, tools/build_gen8_la_mapa.py). */
.map-visual:is([data-map="obsidian-fieldlands"], [data-map="crimson-mirelands"], [data-map="cobalt-coastlands"],
    [data-map="coronet-highlands"], [data-map="alabaster-icelands"]) {
    width: min(100%, 730px);
    aspect-ratio: 730 / 560;
}
.map-visual[data-map="isle-of-armor"] { aspect-ratio: 960 / 518; }
.map-visual[data-map="crown-tundra"] {
    width: min(100%, 640px);
    aspect-ratio: 1000 / 1045;
}
.map-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 15px;
    background: rgba(0,0,0,.3);
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.map-location-marker {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e53935;
    box-shadow: 0 0 0 3px rgba(110,0,0,.45), 0 0 14px rgba(255,32,32,.95);
    transform: translate(-50%, -50%);
    animation: map-marker-pulse 1s ease-in-out infinite;
    pointer-events: none;
}
@keyframes map-marker-pulse {
    50% { transform: translate(-50%, -50%) scale(1.55); box-shadow: 0 0 0 7px rgba(229,57,53,0), 0 0 18px rgba(255,32,32,.95); }
}
@media (prefers-reduced-motion: reduce) { .map-location-marker { animation: none; } }
.guide-content p,
.guide-content li {
    text-align: justify;
    hyphens: auto;
}
.guide-content p { margin-block: 0 10px; }
.guide-content .matchup-legenda,
.guide-content .matchup-vazio,
.guide-content figcaption { text-align: left; }

.guide-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.guide-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--card-border);
    border-radius: 15px;
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    /* a faixa do topo vem de .faixa-acento: cor do jogo por padrão, do tipo
       quando o card fala de um Pokémon */
    padding-top: 20px;
}

.guide-card ul { margin: 8px 0 0 20px; padding: 0; }

/* Cabeçalho único de todos os cards de guia, no padrão que os Regis já usavam:
   título (ou a pastilha do Pokémon) à esquerda, meta à direita. Antes só os
   Regis tinham isso e as outras abas usavam um <h4> solto. */
.guide-card > h4,
.guide-card-head {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--card-border);
}

.guide-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.guide-card-titulo {
    color: var(--primary-color);
    font-size: 1.05rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.guide-card-meta {
    color: var(--text-muted);
    font-size: .82rem;
    text-align: right;
}

.guide-pokemon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 3px;
    padding: 3px 8px 3px 3px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--text-color);
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
}

/* Nome com nível ou marca embaixo, dentro da mesma pílula. */
.guide-pokemon > span { display: flex; flex-direction: column; line-height: 1.15; }
.guide-pokemon > span > .guide-nivel { font-size: .82em; }

/* As pastilhas viraram links para a ficha do Pokémon, como no resto do app. */
a.guide-pokemon { cursor: pointer; transition: background 0.2s, transform 0.2s; }
a.guide-pokemon:hover { background: var(--btn-hover); transform: translateY(-2px); }

.guide-pokemon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    /* Pixel art: keep browser scaling on nearest-neighbor edges. */
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}
.map-visual[data-map="unova"] img {
    image-rendering: pixelated;
}
.guide-sprite-row, .guide-duo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.guide-duo > span { color: var(--primary-color); font-size: 1.7rem; font-weight: 900; }

/* A mistura de 10% deixava o aviso a 1,01:1 contra a página no tema claro —
   invisível como superfície. Com 22% e uma borda completa ele se lê como
   bloco mesmo quem não percebe a faixa lateral colorida. */
.guide-callout {
    margin: 15px 0;
    padding: 13px 15px;
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--primary-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 22%, var(--card-bg));
}
.guide-callout.warning { border-left-color: #e1a400; background: color-mix(in srgb, #e1a400 22%, var(--card-bg)); }

.guide-steps { list-style: none; counter-reset: guide-step; margin: 16px 0; padding: 0; }
.guide-steps li { position: relative; min-height: 48px; margin: 0 0 12px 20px; padding: 11px 14px 11px 42px; border: 1px solid var(--card-border); border-left: 2px solid var(--primary-color); background: var(--card-bg); border-radius: 0 12px 12px 0; }
/* --primary-color é o token de TEXTO (clareado no escuro): usá-lo como fundo
   com --primary-on por cima dava 3,44:1 no tema escuro. O par de superfície
   é --primary-surface/--primary-on. */
.guide-steps li::before { counter-increment: guide-step; content: counter(guide-step); position: absolute; left: -20px; top: 9px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--primary-surface); color: var(--primary-on); font-weight: 900; }
.guide-steps li > b, .guide-steps li > span { display: block; }
.guide-steps li > span { color: var(--text-muted); margin-top: 3px; }

/* Mapa esquemático (Safari Zone). Desenho em SVG em vez de print do jogo:
   os rótulos ficam em português, escalam sem borrar e acompanham o tema —
   o problema real era ninguém saber onde é "noroeste". */
.mapa-esquema {
    margin: 18px 0;
    padding: 14px;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: var(--stat-cell-bg);
    color: var(--text-color);
}

.mapa-esquema svg { display: block; width: 100%; height: auto; }

.mapa-esquema figcaption {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: center;
}

/* Resultado da tabela de tipos: três blocos, o mesmo recorte dos bentos da
   ficha do Pokémon (fraqueza / resiste / vantagem). */
.calc-resultado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 16px;
    text-align: left;
}

.calc-bloco {
    padding: 16px;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: var(--card-bg);
}

.calc-bloco h4 { margin: 0 0 4px; color: var(--primary-color); font-size: 1rem; }
.calc-grade { display: grid; gap: 8px; }

.calc-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--stat-cell-bg);
}

.calc-mult { font-weight: 800; }

/* Sprite dentro de um guia: pequeno, sem suavização (é pixel art) e junto do
   nome, para caber numa célula de tabela sem esticar a linha. */
.guide-sprite {
    width: 40px;
    height: 40px;
    object-fit: contain;
    image-rendering: pixelated;
    vertical-align: middle;
}

.guide-poke {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: 10px;
    white-space: nowrap;
    font-size: 0.86rem;
}

.guide-poke:last-child { margin-right: 0; }

/* Dentro de tabela o sprite entra menor: em 40px, três alvos numa célula
   quebravam em duas linhas e dobravam a altura de todas as linhas. */
.guide-table .guide-sprite { width: 32px; height: 32px; }
.guide-table .guide-poke { margin-right: 6px; font-size: 0.82rem; }
.guide-sprite, .guide-vitrine img, .guide-sprite-row img {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* Faixa de sprites em destaque (a vitrine de shinies do guia de criação). */
.guide-vitrine {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    /* Acompanha o conteúdo: um Pokémon só não vira uma faixa da largura da
       página. Listas longas continuam quebrando linha no limite da tela. */
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: 14px 0;
    padding: 14px 10px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--stat-bar-bg);
}

.guide-vitrine .guide-sprite { width: 64px; height: 64px; }
.guide-vitrine .guide-poke { flex-direction: column; gap: 0; margin-right: 0; }

/* Variante para listas longas — os moradores de cada área do safári, onde há
   dezenas por bloco e o que importa é reconhecer de relance. */
.guide-vitrine.compacta {
    justify-content: flex-start;
    gap: 4px 8px;
    padding: 10px 8px;
}

/* Uma pílula sozinha (na vitrine ou no topo do card) fica no centro, igual
   em todas as gerações, em vez de colada à esquerda. */
.guide-vitrine:has(> .guide-pokemon:only-child) { margin-inline: auto; justify-content: center; }
.guide-card-head:has(> .guide-pokemon:only-child) { justify-content: center; align-items: center; }

.guide-vitrine.compacta .guide-sprite { width: 48px; height: 48px; }
.guide-vitrine.compacta .guide-poke { width: 82px; font-size: 0.72rem; text-align: center; }

/* O nível fica embaixo do nome, não ao lado. */
.guide-nivel {
    display: block;
    color: var(--text-muted);
    font-size: 0.92em;
    font-weight: 400;
}

/* Rótulo do método de encontro, acima de cada faixa de sprites. */
.guide-metodo {
    margin: 12px 0 4px;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

/* O badge de tipo nasce com display:none e cada contexto o liga. Faltava ligar
   dentro dos guias — a coluna "Tipo" das tabelas ficava em branco. */
.calc-linha .pokemon-type-badge,
.guide-table .pokemon-type-badge {
    display: inline-block;
    padding: 3px 9px;
    border-width: 1px;
    font-size: 0.68rem;
    letter-spacing: 0.5px;
    box-shadow: none;
}

/* Título de seção dentro de um guia (separa blocos longos) */
/* ==========================================
   CONTEUDO QUE SO VALE PARA ALGUNS JOGOS
   ==========================================
   Um guia da Geracao 4 cobre tres jogos, e boa parte do que ele diz vale so
   para um deles: o Great Marsh nao existe em HeartGold/SoulSilver, os tutores
   de shard so existem em Platinum. `data-so-em` lista os grupos de versao a
   que o trecho pertence, e o que nao pertence ao jogo escolhido sai da tela.

   Ha um seletor por grupo de versao porque o CSS nao sabe comparar dois atributos entre si:
   cada linha confere o `data-jogo` do <html> contra a lista do trecho. Vale
   para qualquer elemento -- secao, linha de tabela, celula, item de lista.

   Sendo CSS e nao JS, trocar de jogo ja acerta o conteudo sem re-render. */
:root[data-jogo="red-blue"] [data-so-em]:not([data-so-em~="red-blue"]),
:root[data-jogo="yellow"] [data-so-em]:not([data-so-em~="yellow"]),
:root[data-jogo="gold-silver"] [data-so-em]:not([data-so-em~="gold-silver"]),
:root[data-jogo="crystal"] [data-so-em]:not([data-so-em~="crystal"]),
:root[data-jogo="emerald"] [data-so-em]:not([data-so-em~="emerald"]),
:root[data-jogo="ruby-sapphire"] [data-so-em]:not([data-so-em~="ruby-sapphire"]),
:root[data-jogo="firered-leafgreen"] [data-so-em]:not([data-so-em~="firered-leafgreen"]),
:root[data-jogo="diamond-pearl"] [data-so-em]:not([data-so-em~="diamond-pearl"]),
:root[data-jogo="platinum"] [data-so-em]:not([data-so-em~="platinum"]),
:root[data-jogo="heartgold-soulsilver"] [data-so-em]:not([data-so-em~="heartgold-soulsilver"]),
:root[data-jogo="black-white"] [data-so-em]:not([data-so-em~="black-white"]),
:root[data-jogo="black-2-white-2"] [data-so-em]:not([data-so-em~="black-2-white-2"]),
:root[data-jogo="x-y"] [data-so-em]:not([data-so-em~="x-y"]),
:root[data-jogo="omega-ruby-alpha-sapphire"] [data-so-em]:not([data-so-em~="omega-ruby-alpha-sapphire"]),
:root[data-jogo="sun-moon"] [data-so-em]:not([data-so-em~="sun-moon"]),
:root[data-jogo="ultra-sun-ultra-moon"] [data-so-em]:not([data-so-em~="ultra-sun-ultra-moon"]),
:root[data-jogo="lets-go-pikachu-lets-go-eevee"] [data-so-em]:not([data-so-em~="lets-go-pikachu-lets-go-eevee"]),
:root[data-jogo="sword-shield"] [data-so-em]:not([data-so-em~="sword-shield"]),
:root[data-jogo="brilliant-diamond-shining-pearl"] [data-so-em]:not([data-so-em~="brilliant-diamond-shining-pearl"]),
:root[data-jogo="legends-arceus"] [data-so-em]:not([data-so-em~="legends-arceus"]),
:root[data-jogo="scarlet-violet"] [data-so-em]:not([data-so-em~="scarlet-violet"]),
:root[data-jogo="legends-za"] [data-so-em]:not([data-so-em~="legends-za"]) {
    display: none !important;
}

.guide-secao-titulo {
    margin: 26px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--card-border);
    color: var(--primary-color);
    font-size: 1.15rem;
}

/* Bloco recolhível do guia (times dos chefes da Battle Tower de BDSP). */
.guide-details {
    margin: 8px 0;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 0 12px;
}
.guide-details > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-color);
}
.guide-details[open] > summary { border-bottom: 1px solid var(--card-border); margin-bottom: 8px; }

/* Subseção: mesma faixa, um degrau abaixo. Sem isto o h5 saía do mesmo
   tamanho do h4 e a hierarquia do guia não se lia. */
h5.guide-secao-titulo {
    margin: 20px 0 10px;
    border-bottom-width: 1px;
    font-size: 1rem;
    color: var(--text-color);
    opacity: 0.9;
}

.guide-section { margin: 20px 0; }
.guide-table-wrap { /* ver .tabela-acento */ }
.guide-table { width: 100%; min-width: 760px; border-collapse: collapse; background: var(--card-bg); }
.guide-table th, .guide-table td { padding: 10px 12px; border-bottom: 1px solid var(--glass-border); text-align: left; }
.guide-table th { color: var(--primary-color); background: var(--glass-bg); }
.guide-item-nome { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 700; }
.guide-item-nome .item-sprite { width: 24px; height: 24px; margin: 0; flex-shrink: 0; }
.guide-time .guide-card p { margin: 0; }
.guide-time-dados, .guide-time-golpes { margin: 6px 0; padding: 0; list-style: none; font-size: .88rem; line-height: 1.5; }
.guide-time-golpes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
.guide-time-golpes li::before { content: "• "; color: var(--primary-color); }
.guide-time-golpes-titulo { margin-top: 8px !important; font-size: .88rem; }
.guide-time-bloco { margin: 18px 0; }
.guide-time-titulo { margin: 0 0 8px; font-size: 1rem; color: var(--primary-color); }
.guide-callout a { color: var(--primary-color); font-weight: 700; }
/* Links no texto dos guias e das páginas editoriais: sem cor própria ficavam no
   azul padrão do navegador (#0000ee), com 2:1 de contraste no tema escuro. */
.guide-content a:not(.guide-pokemon), .custom-card-body a:not(.custom-card-link) { color: var(--primary-color); font-weight: 700; text-decoration: underline; }

.guide-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 680px) {
    .guide-hero, .guide-hero.compact { grid-template-columns: 1fr; text-align: center; }
    .guide-hero > img { max-height: 180px; }
    .guide-card-grid { grid-template-columns: 1fr; }
    .guide-card-head { align-items: flex-start; flex-direction: column; }
    .guide-card-head > span:last-child { text-align: left; }
    .guide-pokemon { font-size: .78rem; }
    .guide-pokemon img { width: 36px; height: 36px; }
    .guide-content { font-size: .92rem; line-height: 1.6; }
    /* Tabelas de duas colunas (nome + local) viram blocos em vez de rolar. */
    .guide-table--pilha { min-width: 0; }
    .guide-table--pilha thead { display: none; }
    .guide-table--pilha tr, .guide-table--pilha td { display: block; }
    .guide-table--pilha td { padding: 4px 12px; border-bottom: none; }
    .guide-table--pilha td:first-child { padding-top: 12px; }
    .guide-table--pilha td:last-child { padding-bottom: 12px; border-bottom: 1px solid var(--glass-border); overflow-wrap: anywhere; }
}

.rival-starter-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    background: var(--stat-cell-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}

.rival-starter-picker small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
}

.rival-starter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.rival-starter-btn {
    min-height: 40px;
    padding: 8px 12px;
    color: var(--text-color);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.rival-starter-btn:hover { background: var(--btn-hover); }

.rival-starter-btn.active {
    /* --primary-surface é o token de fundo; --primary-color é para texto e, no
       tema escuro, clareia a ponto de o branco ficar com 2:1 de contraste. */
    color: var(--primary-on);
    background: var(--primary-surface);
    border-color: var(--primary-surface);
}

.rival-battle-timeline {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.rival-battle {
    overflow: hidden;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}

.rival-battle > summary {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 10px 14px;
    color: var(--text-color);
    cursor: pointer;
    list-style: none;
}

.rival-battle > summary::-webkit-details-marker { display: none; }
.rival-battle > summary:hover { background: var(--btn-hover); }

.rival-battle-number {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    color: var(--primary-on);
    background: var(--primary-surface);
    border-radius: 50%;
    font-weight: 800;
}

.rival-battle-heading {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.rival-battle-heading small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.rival-battle > summary::after {
    content: '›';
    color: var(--primary-color);
    font-size: 1.5rem;
    transition: transform 0.2s ease;
}

.rival-battle[open] > summary::after { transform: rotate(90deg); }

.rival-battle-content {
    padding: 0 10px 10px;
    border-top: 1px solid var(--glass-border);
}

.rival-battle-note {
    margin: 10px 4px 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.rival-battle-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 4px 0;
}

.rival-battle-items span {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    background: var(--stat-cell-bg);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    font-size: 0.82rem;
}

.rival-variant-panel > .frontier-team-section {
    margin-top: 10px;
    padding: 10px;
}

@media (max-width: 600px) {
    .trainer-card .frontier-brain-sprite,
    .frontier-facility-card .frontier-brain-sprite { height: 120px; max-width: 110px; }
    .starter-linha { margin-left: 0; width: 100%; }
    .starter-seu, .starter-rival { min-width: 0; }
    .rival-starter-picker { align-items: stretch; flex-direction: column; }
    .rival-starter-buttons { display: grid; grid-template-columns: repeat(3, 1fr); }
    .rival-starter-btn { min-width: 0; padding-inline: 7px; font-size: 0.72rem; }
    .rival-battle > summary { align-items: flex-start; padding-inline: 10px; }
    .rival-battle-heading small { line-height: 1.35; }
    .rival-battle-content { padding-inline: 6px; }
    .rival-variant-panel > .frontier-team-section { padding: 8px; }
}

/* Pokémon especiais da Battle Frontier: grade em vez de lista empilhada */
.frontier-especiais {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    width: 100%;
}

.especial-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    /* folga no topo para a faixa do tipo */
    padding: 22px 16px 18px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.especial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.especial-card img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: var(--stat-bar-bg);
    border-radius: 12px;
}

.especial-card h3 { margin: 0; font-size: 1.15rem; }

.especial-card p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: left;
}

/* Fraquezas / Resiste / Vantagem: três bentos separados */
.matchup-legenda {
    margin: -6px 0 10px;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.matchup-vazio {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.bento-matchups .matchups-container {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    max-height: none;
}

/* Instruções de instalação no iOS (Safari não tem prompt programático) */
.ios-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ios-modal-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.ios-modal-card h3 { margin: 0 0 10px; color: var(--primary-color); }
.ios-modal-card p { margin: 0 0 12px; color: var(--text-muted); line-height: 1.5; }
.ios-modal-card ol { margin: 0 0 12px 20px; line-height: 1.9; }
.ios-modal-card strong { color: var(--text-color); }

.ios-obs {
    font-size: 0.85rem;
    border-top: 1px solid var(--glass-border);
    padding-top: 12px;
}

.ios-icone {
    display: inline-block;
    padding: 0 4px;
}

.ios-modal-fechar {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

/* ==========================================
   PAINEL DE FILTROS
   ========================================== */
/* O título vira botão para reabrir os tipos durante a busca. */
.filtros-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 15px;
    padding: 6px;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.filtros-chevron {
    color: var(--primary-color);
    transition: transform 0.25s ease;
    display: none;
}

.filtro-tipo-resumo { margin-bottom: 12px; }

.filtro-tipo-chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 700;
}

/* O painel de pesquisa fica visualmente equilibrado no card, como os demais
   blocos do dashboard. Em telas estreitas o agrupamento continua quebrando. */
.filters-panel .filtros-titulo,
.filters-panel .filtros-status {
    justify-content: center;
}

/* No celular são 18 botões em ~6 linhas: eles empurravam a grade para baixo
   da dobra (análise de UX de 14/10/2026, item 2) e, durante a busca, os
   resultados para fora da tela. O grupo começa recolhido em telas estreitas
   e recolhe durante a busca; o título do painel abre e fecha
   (js/views/pokedex.js, atualizarPainelDeFiltros). */
@media (max-width: 900px) {
    .filters-panel .filtros-chevron { display: inline-block; }

    .filters-panel #type-filters {
        overflow: hidden;
        /* proximo da altura real (~300px no celular): com um teto muito alto,
           metade da animacao passa sem nada visivel acontecer */
        max-height: 420px;
        opacity: 1;
        transition: max-height 0.28s ease, opacity 0.18s ease, margin 0.28s ease;
    }

    .filters-panel.tipos-recolhidos #type-filters {
        max-height: 0;
        opacity: 0;
        margin: 0;
        /* a régua e o respiro também somem quando o grupo recolhe */
        padding-top: 0;
        border-top-width: 0;
        pointer-events: none;
    }

    .filters-panel.tipos-recolhidos .filtros-chevron {
        transform: rotate(-90deg);
    }

    /* Sem os tipos na tela, o painel inteiro encolhe */
    .filters-panel.tipos-recolhidos {
        padding-bottom: 10px !important;
        margin-bottom: 14px !important;
    }
}
.map-encounter-condition {
    width: 100%;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: .7rem;
    line-height: 1.35;
}

/* Configurações → Uso offline (js/widgets/offline-download.js) */
.offline-nota { color: var(--text-muted); font-size: .85rem; margin: 6px 0 12px; }
.offline-itens { display: grid; gap: 10px; margin-bottom: 12px; }
.offline-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--stat-cell-bg); }
.offline-item > span { min-width: 0; flex: 1 1 200px; }
.offline-item b, .offline-item small { display: block; }
.offline-item small { color: var(--text-muted); font-size: .78rem; margin-top: 3px; }
.offline-item small.offline-marca { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.offline-item small.offline-marca--pronto { color: var(--destaque-pronto); }
.offline-item small.offline-marca--parcial { color: var(--destaque-quente); }
.offline-progresso { width: 100%; height: 10px; accent-color: var(--primary-color); }
.offline-status { font-size: .85rem; margin: 6px 0 10px; }

/* Itens com ícone nas tabelas dos guias */
.guide-item { display: inline-flex; align-items: center; gap: 2px; margin: 0 6px 4px 0; white-space: nowrap; }

/* Título dos TRs dentro da grade de TMs (Sword/Shield). */
.machine-group-title { grid-column: 1 / -1; margin: 18px 0 0; font-size: 1.1rem; }
.machine-group-note { grid-column: 1 / -1; margin: 0 0 6px; color: var(--text-muted); font-size: .85rem; }

/* Buscador de Feebas (guia da Gen 3, js/widgets/feebas-finder.js) */
.fb-painel { margin: 12px 0 20px; }
.fb-resumo { margin: 0 0 10px; }
.fb-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; }
.fb-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.fb-legenda .fb-cel { width: 14px; height: 14px; display: inline-block; }
.fb-rolagem { overflow-x: auto; max-width: 100%; }
/* 16px por quadrado no mínimo: no celular a grade rola para o lado dentro do quadro. */
.fb-grade { display: grid; gap: 2px; max-width: 640px; margin: 0 auto; }
.fb-cel { aspect-ratio: 1; border: 0; padding: 0; border-radius: 2px; background: transparent; }
.fb-agua { background: var(--type-water); opacity: 0.85; cursor: pointer; }
.fb-agua:hover, .fb-agua:focus-visible { opacity: 1; outline: 2px solid var(--text-color); outline-offset: 0; }
.fb-agua.is-x { background: var(--text-muted); opacity: 0.35; }
.fb-agua.is-f { background: var(--type-electric); opacity: 1; box-shadow: 0 0 0 2px var(--type-fire) inset; }
.fb-cachoeira { background: repeating-linear-gradient(180deg, var(--type-water) 0 2px, var(--text-muted) 2px 4px); opacity: 0.6; }
.fb-nunca { background: var(--type-water); opacity: 0.2; }
.fb-dica { font-size: 0.85rem; color: var(--text-muted); margin: 10px 0; }

/* Seletor de idioma PT | EN (js/core/i18n.js). Fica fora do bloco de seletores
   de jogo, que recolhe no celular, para estar sempre à vista. Cada botão diz o
   idioma no próprio idioma; o ativo usa a superfície do acento (PADRAO-UI 1.1). */
.seletor-idioma {
    display: inline-flex;
    flex: 0 0 auto;
    align-self: center;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-bg);
}
.seletor-idioma button {
    min-width: 48px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.seletor-idioma button + button { border-left: 1px solid var(--card-border); }
.seletor-idioma button[aria-pressed="true"] { background: var(--primary-surface); color: var(--primary-on); }
.seletor-idioma button:focus-visible { outline: 3px solid var(--primary-color); outline-offset: -3px; }
.seletor-idioma button:disabled { cursor: progress; }
/* No cabeçalho: seletores de jogo e PT | EN na primeira linha, busca embaixo.
   `.content-header` dá a especificidade para vencer o flex de layout.css. */
.content-header .search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.content-header .search-form > * { grid-column: 1 / -1; }
.content-header .search-form > .seletores-jogo { grid-column: 1; grid-row: 1; }
.content-header .search-form > .seletor-idioma { grid-column: 2; grid-row: 1; justify-self: end; }
/* Versão larga em Configurações: "🇧🇷 Português" e "🇺🇸 English". */
.seletor-idioma--largo { display: flex; width: 100%; margin-top: 12px; }
.seletor-idioma--largo button { flex: 1; }