:root{
  --ink:#161A33; --panel:#1F2447; --panel2:#282E5A; --line:#394180;
  --text:#EEE8D8; --muted:#A3A6C8; --yellow:#F7C548; --grass:#5FB36A; --red:#E4572E;
  --paper:#F4EFE3; --paper-ink:#1C1F3A;
  --display:'Fredoka', 'Atkinson Hyperlegible', system-ui, sans-serif; /* NÚMEROS e botões: arredondada, 2/5/8 bem distintos */
  --body:'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* `--titulo` só existe pra fonte que NÃO pode tocar em número — hoje a 👾 pixelada. Os h1/h2/h3 do jogo são
     nome de Pokémon, de rota e de tela; o nível, o HP, o dano e o ₽ moram em classe própria (.dinheiro, .top-r,
     .codigo, as barras) e seguem no `--display`. Sem definição, cai no `--display` e nada muda: é por isso que
     as outras onze fontes não precisaram saber que esta variável existe. */
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0}
body{background:var(--ink);color:var(--text);font:16px/1.5 var(--body);min-height:100vh;font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit}
/* Base de TODO campo de texto e seletor do jogo. Sem isso o navegador desenha o padrão DELE (fundo branco) e o
   `color:inherit` da linha acima põe texto claro em cima do branco — quase ilegível, e uma faixa branca no meio
   de uma tela escura. Relato do usuário (29/09/2026): "uma faixa branca no meio do colorido", no Equipar item da
   Sala de Raide e na busca de Pokémon da criação. Antes cada tela estilizava o próprio campo à mão (uma dúzia de
   regras), então bastava esquecer uma pra nascer branca de novo — a regra abaixo é o piso pra todas, incluindo
   as telas que ainda nem existem.
   O `:where()` é o detalhe que faz isto ser PISO e não teto: ele NÃO soma especificidade, então a regra toda
   pesa (0,0,1) e qualquer regra por classe ganha dela (as ~13 que já existem, tipo `.search input`, seguem
   mandando na largura/padding delas). Com `:not()` solto pesaria (0,3,1) — MAIS que `.search input` —, e eu
   teria quebrado justamente os campos que já estavam certos.
   Caixa de marcar, rádio e botão de arquivo ficam de fora: têm desenho nativo que não se quer sobrescrever. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file])),select,textarea{
  background:var(--panel2);color:var(--text);border:2px solid var(--line);border-radius:10px;padding:9px 12px}
/* o menu que abre ao tocar num <select>: sem isto, alguns navegadores desenham a lista clara e herdam o texto
   claro do `color` acima, deixando a opção ilegível no exato momento de escolher */
select option{background:var(--panel2);color:var(--text)}
::placeholder{color:var(--muted);opacity:1}
/* microinteração global (pedido do usuário, 28/09/2026 — "mais vivo"): quase todo clicável do jogo É um
   <button> de verdade (o padrão data-act), então uma transição + um "afundar" no clique aqui cobre botão,
   golpe (.mv), carta de Pokémon (.pick/.hall-card), item da mochila etc. de graça, sem enumerar cada classe. */
button{cursor:pointer;transition:filter .15s ease,border-color .15s ease,background-color .15s ease,transform .1s ease}
button:active:not(:disabled){transform:scale(.96)}
button:disabled{cursor:not-allowed;opacity:.45}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
img{max-width:100%}
/* `hidden` tem de ganhar de qualquer `display` de autor: o `[hidden]{display:none}` do navegador é folha de UA e
   perde de uma regra de classe. Foi o bug da busca de desbloqueados na criação (o filtro marcava `hidden` e o
   `.pick{display:grid}` mantinha o botão na tela — "digito o nome e nada acontece"). */
[hidden]{display:none!important}
.muted{color:var(--muted)} .small{font-size:14px}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:2px solid var(--line)}
/* `flex:none`: com muitos botões no topo o navegador encolhia o .brand e a logo virava um risco de 0px de largura
   (o subtítulo quebrava em 3 linhas ao lado) — era o "ícone que não aparece" no celular deitado. */
.brand{display:flex;align-items:center;gap:10px;flex:none}
/* a logo é um botão (data-act="inicio"): leva pra tela inicial. Sem borda/fundo de botão, com foco visível pra teclado */
.brand-logo{background:none;border:0;padding:0;margin:0;cursor:pointer;display:block;border-radius:8px;transition:transform .15s}
.brand-logo:hover{transform:scale(1.04)}
.brand-logo:focus-visible{outline:3px solid var(--accent,#f6c744);outline-offset:3px}
.brand .logo{height:46px;width:auto;display:block} /* img/logo.png (o favicon sai de img/favicon-32.png) */
.brand small{font:500 13px var(--display);color:var(--muted);margin-left:10px}
.top-r{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;justify-content:flex-end;font:700 16px var(--display)}
/* topo: dinheiro sempre visível; botões (#topr + conta) no menu ☰ abaixo de 720px */
.top{position:relative}
/* carteira: pílula com 💰 no topo (fora do menu ☰), o mesmo valor na barra de turno da batalha e na loja */
.dinheiro{color:var(--yellow);white-space:nowrap;position:relative;display:inline-flex;align-items:center;gap:6px;
  background:var(--panel2);border:2px solid var(--line);border-radius:999px;padding:5px 14px;font-size:18px}
.dinheiro b{font-weight:800;letter-spacing:.01em}
.dinheiro:empty{display:none}
/* +₽/−₽ quando o valor muda: some sozinho; sem animação (prefers-reduced-motion) fica invisível — o valor novo já está na pílula */
.dinheiro-delta{position:absolute;right:8px;top:100%;margin-top:2px;font-size:14px;font-weight:800;opacity:0;pointer-events:none;
  text-shadow:0 1px 3px #000c;animation:dinheiro-delta 2.2s ease-out}
.dinheiro-delta.ganho{color:#5FB36A}
.dinheiro-delta.perda{color:#E4572E}
@keyframes dinheiro-delta{0%{opacity:0;transform:translateY(-6px)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(6px)}}
.carteira-mini{color:var(--yellow);font:800 15px var(--display);white-space:nowrap}
.carteira-loja{margin:0 0 10px;padding:8px 14px;background:var(--panel2);border:2px solid var(--line);border-radius:12px;color:var(--yellow);font:600 16px var(--display)}
.carteira-loja b{font-size:20px}
@media(max-width:720px),(orientation:landscape) and (max-height:560px){.dinheiro{font-size:17px;padding:6px 12px;min-height:44px}}
.burger{display:none}
.menu-links{display:contents} /* no computador some da conta: filhos ficam em linha no .top-r */
#topr{flex-wrap:wrap;justify-content:flex-end}
.btn-login{border-radius:999px;padding:8px 18px;box-shadow:0 0 0 3px rgba(247,197,72,.25)}
/* O ☰ também em celular DEITADO (mesmo gatilho de altura do resto do CSS de paisagem): um celular deitado passa
   de 720px de largura e sem isso as ~15 telas abriam em três fileiras de botões, comendo metade da tela. */
@media(max-width:720px),(orientation:landscape) and (max-height:560px){
  .top{padding:10px 14px}
  .brand small{display:none}
  .brand .logo{height:38px}
  .burger{display:grid;place-items:center;width:44px;height:44px;background:var(--panel2);border:2px solid var(--line);border-radius:10px;font-size:20px;line-height:1}
  /* `max-height`+rolagem: o menu é `absolute` (não empurra a página), então numa tela baixa os últimos botões
     ficariam fora da tela sem nenhum jeito de chegar neles. */
  .menu-links{display:none;position:absolute;top:calc(100% + 6px);left:10px;right:10px;z-index:9;flex-direction:column;gap:10px;
    max-height:70vh;max-height:70dvh;overflow:auto;
    background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 14px 34px rgba(0,0,0,.5)}
  .menu-links.open{display:flex}
  .menu-links .top-r,#conta-chip{flex-direction:column;align-items:stretch;gap:8px}
  .menu-links .btn{width:100%;text-align:center;padding:12px 14px;font-size:16px}
  .selo-offline{text-align:center}
}
/* ícone do jogador, amigos, convites */
.icone-mini{width:32px;height:32px;image-rendering:pixelated;vertical-align:middle;margin:-6px 4px -6px -4px}
.icone-grande{width:96px;height:96px;image-rendering:pixelated}
.chip-conta{display:inline-flex;align-items:center;gap:2px;position:relative}
/* ---- eventos semanais (js/evento.js, js/boss.js): caixa do chefe na rota, selo no mapa, barras do chefe e insígnias ---- */
.chefe-box.evento{border-color:#b45cff;background:radial-gradient(120% 160% at 0% 0%,rgba(180,92,255,.28),transparent 60%),var(--panel2);
  box-shadow:0 0 0 1px rgba(180,92,255,.4) inset,0 0 18px rgba(180,92,255,.35);animation:evento-pulso 2.8s ease-in-out infinite}
.chefe-box.evento img{filter:drop-shadow(0 0 8px rgba(180,92,255,.9))}
@keyframes evento-pulso{50%{box-shadow:0 0 0 1px rgba(180,92,255,.6) inset,0 0 28px rgba(180,92,255,.6)}}
.gen-card.evento{border-color:#b45cff;box-shadow:0 0 16px rgba(180,92,255,.55);position:relative}
.gen-card.evento .evento-sprite{filter:drop-shadow(0 0 7px rgba(210,150,255,.95))}
.gen-card .evento-tag{position:absolute;top:6px;right:6px;font-size:10px;font-weight:700;letter-spacing:.06em;background:#b45cff;color:#fff;padding:1px 7px;border-radius:999px}
.chefe-box.evento.em-breve{opacity:.92;animation:none}
button.link{background:none;border:0;padding:0;font:inherit;color:#b45cff;text-decoration:underline;cursor:pointer}
/* ---- Arena do Chefe (js/arena.js), Hall da Fama e ajuda dos chefes ---- */
.ajuda-chefes{margin:10px 0;border:2px solid var(--line);border-radius:12px;background:var(--panel);padding:8px 12px}
.ajuda-chefes summary{cursor:pointer;font-weight:700}
.ajuda-chefes .ajuda-corpo{margin-top:8px;font-size:.95em}
.ajuda-chefes h5{margin:12px 0 4px;color:#b45cff}
.ajuda-tabela-caixa{overflow-x:auto;margin:6px 0}
.ajuda-tabela{border-collapse:collapse;width:100%;font-size:.92em}
.ajuda-tabela th,.ajuda-tabela td{border:1px solid var(--line);padding:6px 8px;vertical-align:top;text-align:left}
.ajuda-tabela th{background:var(--panel2)}
.ajuda-tabela td:first-child{min-width:120px}
.ajuda-chefes ul{margin:4px 0 8px 18px;padding:0}
.ajuda-chefes li{margin:3px 0}
.hall-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}
.hall-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border-radius:12px;border:2px solid var(--line);background:var(--panel2);color:inherit;cursor:pointer;text-align:center}
.hall-card img{width:72px;height:72px;image-rendering:pixelated}
.hall-card.on{border-color:#b45cff;box-shadow:0 0 14px rgba(180,92,255,.6)}
.hall-card:disabled{opacity:.45;cursor:not-allowed}
.perfil-cab{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.perfil-cab h2{margin:0}
.runs-perfil{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.run-perfil{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;border:2px solid var(--line);background:var(--panel2)}
.run-perfil img{width:56px;height:56px;image-rendering:pixelated}
.run-perfil small{display:block}
.raide-lista{list-style:none;padding:0;margin:6px 0;display:flex;flex-wrap:wrap;gap:8px}
.raide-lista li{padding:4px 10px;border-radius:999px;border:2px solid var(--line);background:var(--panel2);display:flex;align-items:center;gap:8px}
/* "Equipar item": cada Pokémon numa linha só (nome + seletor). Era um flex solto sem moldura, o que deixava o
   seletor boiando no meio do painel — com o fundo branco padrão do navegador em cima disso, virou "uma faixa
   branca no meio do colorido" (relato do usuário, 29/09/2026). Agora cada linha é um cartão com a MESMA moldura
   dos outros da tela (.hall-card / .raide-lista li), e o seletor ocupa o espaço que sobra em vez de esticar. */
.equip-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 10px;
  border:2px solid var(--line);border-radius:12px;background:var(--panel2);font-weight:700}
.equip-linha select{flex:1;min-width:0;max-width:62%;background:var(--panel);font-weight:400}
.agenda-evento{margin:12px 0;padding:12px 14px;border-radius:12px;border:2px solid #b45cff;background:var(--panel)}
.agenda-evento h4{margin:0 0 6px}
.agenda-aviso{margin:6px 0 10px;padding:8px 10px;border-radius:10px;background:rgba(180,92,255,.18);border:1px solid #b45cff}
.agenda-lista{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px}
.agenda-lista li{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;border:2px solid var(--line)}
.agenda-lista li.atual{border-color:#b45cff;box-shadow:0 0 12px rgba(180,92,255,.5)}
.agenda-lista img{width:56px;height:56px;image-rendering:pixelated;filter:drop-shadow(0 0 5px rgba(180,92,255,.7))}
.agenda-lista small{display:block}
.agenda-ano{margin:0 0 8px}
.agenda-ano ol{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:3px;font-size:.92em}
.agenda-ano li.atual{color:#d9b3ff}
.boss-fraco{margin-top:4px;font-size:12px;font-weight:700}
.boss-info{margin-top:6px}
.boss-coura .fill{background:linear-gradient(90deg,#7bd0ff,#b45cff)}
.boss-coura.exposto .fill{background:#e4572e}
.boss-fase{font-size:12px;font-weight:700;color:#8a3fd8;margin-top:2px}
.boss-carga{margin-top:5px;padding:5px 7px;border-radius:8px;background:#fff1cf;color:#7a3a00;font-size:12px;border:2px solid #f0a020;animation:evento-pulso 1.2s ease-in-out infinite}
.badge-nome{margin-left:6px;font-size:1.05em;filter:drop-shadow(0 0 3px rgba(180,92,255,.8))}
.insignias{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.insignia{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--panel)}
.insignia.ganha{border-color:#b45cff}.insignia.bloqueada{opacity:.6}.insignia.exibida{box-shadow:0 0 14px rgba(180,92,255,.55)}
.insignia-icone{font-size:2rem}
@media(max-width:520px){.insignia{grid-template-columns:auto 1fr}.insignia .btn{grid-column:1/-1}}
/* ---- insígnia Alpha (js/alpha.js): medalha dourada com uma Poké Ball; raios girando devagar e estrelas cintilando ---- */
.alpha-svg{display:block;width:120px;height:120px;filter:drop-shadow(0 4px 10px rgba(246,199,68,.45))}
.alpha-svg.compacto{width:22px;height:22px;filter:drop-shadow(0 0 3px rgba(246,199,68,.7))}
.alpha-mini{display:inline-flex;margin-left:6px;vertical-align:middle}
.alpha-raios{transform-origin:60px 60px;animation:alpha-gira 40s linear infinite}
.alpha-estrelas{animation:alpha-brilha 2.6s ease-in-out infinite}
@keyframes alpha-gira{to{transform:rotate(360deg)}}
@keyframes alpha-brilha{0%,100%{opacity:1}50%{opacity:.35}}
.alpha-card{display:flex;align-items:center;gap:20px;flex-wrap:wrap;border:2px solid #f6c744;
  background:radial-gradient(120% 140% at 0% 0%,rgba(246,199,68,.22),transparent 55%),linear-gradient(135deg,#1b1f45,#12142e);
  box-shadow:0 0 0 1px rgba(246,199,68,.25) inset,0 6px 22px rgba(246,199,68,.18)}
.alpha-card .alpha-medalha{flex:0 0 auto}
.alpha-card .alpha-texto{flex:1 1 220px;min-width:0}
.alpha-card h3{margin:2px 0 6px;color:#ffe27a;font-size:1.3rem;letter-spacing:.02em}
.alpha-card p{margin:4px 0}
.alpha-selo{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#3a2404;
  background:linear-gradient(135deg,#fff4b8,#f6c744 55%,#c98a1a);padding:2px 10px;border-radius:999px}
@media(max-width:520px){.alpha-card{justify-content:center;text-align:center}}
.bolinha{background:var(--red);color:#fff;border-radius:999px;font-size:11px;min-width:18px;height:18px;display:inline-grid;place-items:center;margin-left:4px}
.icone-editor{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
@media(max-width:520px){.icone-editor{grid-template-columns:1fr}}
.icone-preview{display:grid;place-items:center;background:var(--panel2);border-radius:14px;padding:8px 14px;font:600 14px var(--display)}
.icone-controles{display:grid;gap:10px}
.icone-controles input,#amigo-codigo{flex:1;min-width:0;background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--text)}
.pv.conta + .pv.conta{margin-top:16px}
ul.amigos{list-style:none;margin:6px 0 12px;padding:0;display:grid;gap:6px}
ul.amigos li{display:flex;align-items:center;gap:8px;background:var(--panel2);border-radius:10px;padding:6px 10px}
ul.amigos li b{flex:1}
ul.amigos .subrow{width:auto}
.codigo{font-family:var(--display);letter-spacing:.12em;background:var(--yellow);color:#1b1b2f;border-radius:8px;padding:0 10px}
.mp-convites{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%}
.mp-nome{display:flex;align-items:center}
table.ranking td.jogador{white-space:nowrap}
#toasts{position:fixed;right:14px;bottom:14px;z-index:20;display:grid;gap:8px;max-width:min(380px,calc(100vw - 28px))}
.toast{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;background:var(--panel);border:2px solid var(--yellow);border-radius:14px;padding:12px 14px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.toast-x{background:none;border:0;color:var(--muted);font-size:16px}
/* banner de consentimento de cookies/anúncio (js/ads.js) — rodapé fixo, não bloqueia o jogo */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;background:var(--panel);border-top:2px solid var(--yellow);padding:12px 16px;box-shadow:0 -8px 24px rgba(0,0,0,.4)}
.cookie-banner p{margin:0;font-size:14px;color:var(--text);max-width:640px}
.cookie-banner .link{background:none;border:0;color:var(--yellow);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.cookie-banner .choices{display:flex;gap:8px;flex:none}
.ads-slot{margin:24px 0 0;min-height:90px;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* bugs e sugestões */
.relato-card{max-width:640px}
.relato-card textarea{background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;resize:vertical}
.relato-card .campo input{background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text)}
.rel-tipos{grid-template-columns:1fr 1fr}
@media(max-width:520px){.rel-tipos{grid-template-columns:1fr}}
/* imagens do relato: miniaturas com botão de tirar (visível sempre — nada de "só no hover") */
.rel-imagens{display:flex;flex-direction:column;gap:8px}
.rel-thumbs{display:flex;flex-wrap:wrap;gap:10px}
.rel-thumb{margin:0;display:flex;flex-direction:column;gap:4px;width:150px;background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:6px}
.rel-thumb img{width:100%;height:100px;object-fit:cover;border-radius:6px;background:var(--ink)}
.rel-thumb figcaption{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rel-add{align-self:flex-start;cursor:pointer}
@media(max-width:520px){.rel-thumb{width:calc(50% - 5px)}}
.rel-ctx{max-height:220px;overflow:auto;background:var(--ink);border-radius:8px;padding:8px;font-size:12px;white-space:pre-wrap}
/* "Seus relatos": a situação de cada um (dados.STATUS_RELATO). A cor é reforço, não a informação — o rótulo já
   diz "Atendido"/"Aguardando" por escrito, porque quem não distingue verde de amarelo tem de conseguir ler. */
ul.rel-meus{list-style:none;margin:6px 0 12px;padding:0;display:grid;gap:8px}
ul.rel-meus li{background:var(--panel2);border:2px solid var(--line);border-left-width:5px;border-radius:10px;padding:8px 12px;display:grid;gap:3px}
.rel-meu-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
.rel-situacao{font:600 13px var(--body);white-space:nowrap}
ul.rel-meus li.atendido{border-left-color:var(--grass)}
ul.rel-meus li.aguardando{border-left-color:var(--yellow)}
ul.rel-meus li.analise{border-left-color:var(--muted)}
ul.rel-meus li.arquivado{border-left-color:var(--line)}
.rel-situacao.atendido{color:var(--grass)}
.rel-situacao.aguardando{color:var(--yellow)}
.rel-resposta{display:block;margin-top:2px;padding-top:4px;border-top:1px solid var(--line)}
.rel-sem-conta{background:var(--panel2);border:2px dashed var(--line);border-radius:10px;padding:10px 12px}
/* tela de login */
.login-card{max-width:460px;background:var(--panel);border:2px solid var(--line);border-radius:18px;padding:24px;display:grid;gap:12px}
.login-card h2{margin:0;font:700 24px var(--titulo,var(--display))}
.login-card p{margin:0}
.btn-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;background:#fff;color:#1f1f1f;border:1px solid #747775;border-radius:999px;padding:12px 18px;font:600 16px var(--body)}
.btn-google:hover{background:#f2f2f2}
.login-ou{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.login-ou::before,.login-ou::after{content:'';flex:1;height:2px;background:var(--line)}
.login-card input{flex:1;min-width:0;background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--text)}
.login-card .subrow{flex-wrap:nowrap}
@media(max-width:420px){.login-card .subrow{flex-wrap:wrap}.login-card .subrow .btn{width:100%}}

.btn{background:var(--yellow);color:#1b1b2f;border:0;border-radius:8px;padding:10px 16px;font-weight:700}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--text);border:2px solid var(--line)}
.btn.ghost:hover:not(:disabled){border-color:var(--yellow)}
.btn.big{padding:14px 22px;font-size:17px}
.btn.sm{padding:5px 10px;font-size:14px}

.ty{display:inline-block;padding:1px 10px;border-radius:999px;font:700 12px/1.6 var(--display);background:var(--c);color:var(--tc)}
.types{display:flex;gap:6px;flex-wrap:wrap}

/* Transição de tela (pedido do usuário, 28/09/2026 — "mais vivo"): toda troca de tela reescreve #app inteiro
   (sem diffing, ver o topo de render.js), então uma animação na entrada de `.create`/`.game` — os DOIS
   contêineres de topo que TODA tela usa (ver `casca()` de ranking.js/perfil-amigo.js e a lista de `$('#app').
   innerHTML =` em cada arquivo de tela) — cobre toda navegação do jogo de graça, sem mexer em cada tela
   individualmente. Telas que se redesenham em etapas (ranking/perfil: "carregando…" → conteúdo) reanimam a
   cada etapa, o que é o comportamento certo (cada etapa É uma tela nova pro jogador). */
@keyframes tela-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.create,.game{animation:tela-entra .18s ease-out}

/* criação */
.create{max-width:1100px;margin:0 auto;padding:32px 20px 60px}
.create h1{font:700 clamp(34px,5.5vw,60px)/1.02 var(--titulo,var(--display));margin:0 0 12px;color:var(--yellow);max-width:14ch}
.create .lead{max-width:62ch;color:var(--muted);margin:0}
.online-marcador{color:var(--muted);font-size:14px;margin:2px 0 8px}
.dot-viva{display:inline-block;animation:pulso-status 1.8s ease-in-out infinite}
.rodape-creditos{margin:40px 0 0;text-align:center}
.rodape-creditos a{color:inherit}

/* Páginas de texto corrido (privacidade, termos, sobre, guia — a tela do jogo e o .html estático gerado por
   ferramentas/gerar-paginas.mjs usam a MESMA marcação). Larguras de leitura: linha longa demais faz o olho
   perder a volta, e estas páginas são as únicas do projeto com parágrafos de verdade. */
.pagina h2{font:700 22px var(--titulo,var(--display));color:var(--yellow);margin:32px 0 10px;max-width:40ch}
.pagina h2.passo{color:var(--text)}  /* o numerado já tem a bolinha amarela; dois amarelos brigam */
.pagina p,.pagina ul,.pagina ol{max-width:72ch}
.pagina li{margin:4px 0}
.pagina a{color:var(--yellow)}
.pagina h3{font:700 17px var(--titulo,var(--display));color:var(--text);margin:24px 0 6px}
/* Índice do guia (guia.html e o pé de cada capítulo): são links de navegação, não itens de texto corrido, então
   viram cartão em vez de lista com marcador — num celular o alvo de toque fica do tamanho do cartão. */
.pagina ul.indice{list-style:none;padding:0;display:grid;gap:10px}
.pagina ul.indice li{margin:0;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:var(--panel)}
.pagina ul.indice a{display:block;font:700 18px var(--display);text-decoration:none}
.pagina ul.indice a:hover{text-decoration:underline}
/* Nas páginas estáticas não há JS pra tratar clique, então o "▶ Jogar" do topo é um link de verdade usando
   .btn — que foi escrito pra <button> e não traz nem display de bloco nem o sublinhado desligado. */
a.btn{display:inline-block;text-decoration:none}

/* Rodapé do site: os links legais (privacidade, termos, contato) precisam estar em toda página — é o que a
   revisão do AdSense procura e o que um visitante perdido usa. Dentro do JOGO ele some: ver .game abaixo. */
.rodape-site{max-width:1100px;margin:48px auto 0;padding:20px;border-top:2px solid var(--line);text-align:center}
.rodape-site nav{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-bottom:12px}
.rodape-site a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.rodape-site a:hover{color:var(--yellow);border-bottom-color:currentColor}
.rodape-site p{max-width:80ch;margin:6px auto 0}
/* Em batalha o rodapé só atrapalha: cria rolagem embaixo dos painéis e põe link de "Termos" ao lado do botão de
   atacar. `:has()` resolve sem JS — quem desenha a tela não precisa lembrar de nada. */
#app:has(> .game) ~ .rodape-site{display:none}
.passo{display:flex;align-items:center;gap:10px;font:700 20px var(--display);color:var(--text);margin:30px 0 12px}
.passo > span:first-child{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--yellow);color:#1b1b2f;font-size:16px}
.difs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
#rnd{margin-top:4px}
.search{display:flex;gap:10px;margin:26px 0 16px;flex-wrap:wrap}
.search input{flex:1;min-width:220px;background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:12px 14px;font-size:17px}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
.pick{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:2px 2px 6px;display:grid;place-items:center;font-size:12px;color:var(--muted);transition:transform .12s ease}
.pick:hover{border-color:var(--yellow);color:var(--text);transform:translateY(-3px)}
.pick.on{border-color:var(--yellow);color:var(--text);background:var(--panel2)}
.pick img{width:72px;height:72px;image-rendering:pixelated}
.notice{background:#3a1f2a;border:2px solid var(--red);border-radius:12px;padding:14px 16px;margin-top:18px}
.loading{font:500 16px var(--display);color:var(--muted)}
.err{color:#ff9b82}

/* ===== tutorial (js/tela-tutorial.js): tour guiado + demonstração ===== */
.tut-passos{display:flex;gap:6px;margin-bottom:18px}
.tut-ponto{width:10px;height:10px;border-radius:50%;background:var(--panel2);border:2px solid var(--line)}
.tut-ponto.on{background:var(--yellow);border-color:var(--yellow)}
.tut-ponto.feito{background:var(--grass);border-color:var(--grass)}
.tut-mon{display:flex;align-items:center;gap:12px;background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:10px 14px;margin-top:16px;max-width:420px}
.tut-mon img{width:56px;height:56px;image-rendering:pixelated;flex:none}
.tut-mon .hp{margin-top:4px}
.tut-duelo{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.tut-nav{margin-top:22px}

.pv{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:28px;margin-top:28px;background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:24px}
@media(max-width:760px){.pv{grid-template-columns:1fr}}
.pv-art{background:var(--panel2);border-radius:14px;display:grid;place-items:center;padding:10px;align-self:start}
.pv-art img{width:100%;aspect-ratio:1;object-fit:contain;animation:flutuar 3.2s ease-in-out infinite}
/* o Pokémon escolhido "flutua" na prévia (o único sprite grande e sozinho da tela inicial — um grid inteiro
   flutuando ao mesmo tempo ficaria ocupado demais; aqui, sozinho, é só vida) */
@keyframes flutuar{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.dexno{font:500 14px var(--display);color:var(--muted);margin:0}
.pv h2{font:700 40px/1.1 var(--titulo,var(--display));margin:2px 0 10px}
.pv h3{font:700 16px var(--titulo,var(--display));color:var(--yellow);margin:20px 0 8px}
.bs{display:grid;grid-template-columns:90px 38px 1fr;align-items:center;gap:8px;font-size:14px}
.bs span{color:var(--muted)} .bs b{text-align:right;font-family:var(--display)}
.bs i{display:block;height:8px;border-radius:4px;background:var(--yellow)}
.bs.total i{background:none}
.basestats{display:grid;gap:3px;margin-top:16px}
.abils{display:grid;gap:8px}
.abil{text-align:left;background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:10px 12px}
.abil.on{border-color:var(--yellow)}
.abil em{font-style:normal;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 6px;margin-left:6px}
.abil small{display:block;color:var(--muted);margin-top:2px}
.impl{font-size:12px;color:var(--grass);margin-left:6px}
.impl-futura{font-size:12px;color:var(--muted);font-style:italic;margin-left:6px}
.abil .impl-futura{display:block;margin:2px 0 0}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
@media(max-width:560px){.row3{grid-template-columns:1fr}}
.row3 label{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.row3 select,.row3 input{background:var(--panel2);border:2px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--text)}
.pv .btn.big{margin-top:18px}

/* jogo */
/* tela do jogo: coluna esq · divisória · centro (cena fixa + zona + ações) · divisória · coluna dir.
   Larguras vêm de --larg-esq/--larg-dir (paineis.js, arrastando a divisória). */
.game{display:grid;grid-template-columns:var(--larg-esq,340px) 10px minmax(420px,1fr) 10px var(--larg-dir,340px);gap:0 6px;padding:20px;max-width:1800px;margin:0 auto;align-items:start}
.stage{display:grid;gap:14px;min-width:0}
.zona{display:grid;gap:14px;align-content:start;min-width:0;min-height:60px;border-radius:14px}
.zona.vazia{border:2px dashed var(--line);display:grid;place-items:center}
.zona.vazia::before{content:'Arraste um painel pra cá';color:var(--muted);font-size:14px}
.divisor{cursor:col-resize;align-self:stretch;border-radius:5px;touch-action:none}
.divisor:hover,.divisor.ativo{background:var(--line)}
/* painel */
.painel{background:var(--panel);border:2px solid var(--line);border-radius:14px;min-width:0}
.painel.arrastando{opacity:.4}
.painel-cab{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-bottom:2px solid var(--line);cursor:grab}
.painel.recolhido .painel-cab{border-bottom:0}
.painel-cab .alca{color:var(--muted);font-size:18px;line-height:1}
.painel-titulo{flex:1;min-width:0;margin:0;font:700 15px var(--display);color:var(--yellow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.painel-botoes{display:flex;gap:2px}
.painel-botoes button{background:none;border:0;color:var(--muted);border-radius:6px;padding:2px 6px;font-size:13px}
.painel-botoes button:hover{background:var(--panel2);color:var(--text)}
.painel-corpo{padding:14px 16px;overflow:auto;resize:vertical;min-height:60px}
.painel-marcador{height:6px;border-radius:3px;background:var(--yellow)}
.painel[data-painel="log"] .painel-corpo{padding:8px;display:flex}
.painel[data-painel="log"] .textbox{margin:0;flex:1;display:flex;min-height:0}
.painel[data-painel="log"] .log{height:auto;flex:1;min-height:0}
/* celular: uma coluna, cena primeiro; reordenar pelos botões ▲▼⇄ (arrastar no toque é ruim) */
/* ==================== celular / tela estreita ====================
   Uma coluna só. Na batalha, apenas a CENA fica presa no topo (compacta), então dá pra ver o Pokémon enquanto
   escolhe o golpe; golpes, registro e painéis rolam por baixo, todos alcançáveis. Nada é escondido — as abas que
   trocavam o que aparecia no meio foram removidas (ver paineis.js).
   Também entra aqui um celular DEITADO: as 3 colunas do desktop (`--larg-esq` 340px + centro 420px + `--larg-dir`
   340px, mais de 1100px no total) não cabem numa tela baixa e um pouco mais larga que 880px — sem isso o jogo
   ficava cortado/com rolagem lateral fora da batalha. O tratamento ESPECIAL da batalha em paisagem (cena FIXA na
   lateral, não presa no topo) está no bloco "celular deitado" logo abaixo — mesmo gatilho de altura (560px, que
   cobre o celular de 540px de altura deitado), pra não existir faixa de tela que caia só num dos dois. */
@media(max-width:880px),(orientation:landscape) and (max-height:560px){
  .game{grid-template-columns:1fr;gap:14px}
  .stage{order:-1}
  .divisor{display:none}
  .painel-cab{cursor:default}
  .painel-cab .alca{display:none}
  .painel-corpo{resize:none}
  .zona.vazia{display:none}
  /* fora da batalha: o botão de explorar/centro/loja acompanha a rolagem */
  #actions{position:sticky;bottom:0;z-index:7;background:var(--ink);padding:10px 0 calc(10px + env(safe-area-inset-bottom));margin-top:-4px}
  .dexr-grade{max-height:46vh;overflow:auto}
  /* a descrição de cada item vira duas linhas (o texto inteiro continua no toque longo, pelo `title`): com 40
     itens na mochila, era ela que fazia a lista crescer sem fim */
  ul.bag small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tag-evo{white-space:normal}

  /* ---- batalha: só a CENA fica presa no topo; o resto da página rola normalmente por baixo ----
     Antes a .stage inteira (cena + golpes + ações) era sticky e umas abas escolhiam o que aparecia no meio; isso
     escondia os painéis (ficha dos aliados, missões, mochila) e comia uma faixa de tela. Hoje nada é escondido:
     a cena acompanha a rolagem, em no máximo 38vh, e você chega em tudo descendo a página. */
  body.em-batalha .game{padding:10px;gap:10px}
  body.em-batalha #actions{position:static;padding:0;margin:0}
  body.em-batalha .scene.battle{position:sticky;top:0;z-index:8;max-height:38vh;overflow:auto;min-height:0;padding:10px 12px;gap:4px;box-shadow:0 6px 12px -8px #0008}
  body.em-batalha .mon{width:112px;height:92px}
  body.em-batalha .spr{width:92px;height:92px}
  body.em-batalha .spr.back{width:104px;height:104px}
  body.em-batalha .mon.mini{width:56px;height:56px;margin-left:-8px}
  body.em-batalha .mon.mini .spr{width:52px;height:52px}
  body.em-batalha .plate{padding:6px 9px}
  body.em-batalha .pl-top{font-size:14px}
  body.em-batalha .turno-bar{padding:4px 8px;font-size:12px}
  body.em-batalha .carteira-mini{font-size:13px}
  body.em-batalha .mv{padding:7px 10px}
  body.em-batalha .mv b{font-size:15px}
  body.em-batalha .mv small{display:none}          /* a descrição fica no toque longo (title); aqui o espaço é curto */
  body.em-batalha .bag-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  body.em-batalha .painel-corpo{height:auto}
  body.em-batalha .painel[data-painel="log"] .painel-corpo{max-height:40vh}
}
@media(max-width:420px){
  body.em-batalha .mon{width:96px;height:80px}
  body.em-batalha .spr{width:80px;height:80px}
  body.em-batalha .spr.back{width:92px;height:92px}
  body.em-batalha .painel[data-painel="log"] .painel-corpo{max-height:32vh}
}
/* ==================== celular deitado (paisagem) ====================
   O bloco "celular" acima foi pensado pra RETRATO (tela alta e estreita: cena presa no topo, resto rola embaixo).
   Paisagem é o oposto — larga e baixa — e presa no topo ali sobraria pouquíssima altura pro resto. Aqui a cena
   fica FIXA na lateral esquerda (a altura toda da tela) e tudo mais (golpes, log, painéis) numa coluna à direita
   que rola. Gatilho por ALTURA (`max-height`), não largura: um celular deitado pode passar de 880px de largura
   (o limiar do bloco retrato) e continuar sendo um celular deitado, baixo o bastante pra precisar do mesmo
   tratamento — só telas realmente baixas entram aqui, então tablet/desktop landscape (bem mais altos) não são
   afetados.
   `position:fixed` na cena, e NÃO uma coluna do grid: como `#scene` é irmã das zonas (via `.stage{display:contents}`)
   ela entrava na auto-colocação DEPOIS dos itens da coluna 2 (#actions, zonas), e o cursor do grid nunca anda pra
   trás — a cena era jogada pra 4ª linha e a batalha só aparecia ROLANDO a página (o bug relatado em 02/10/2026).
   Fixa, ela está sempre visível; o `padding-left` do `.game` reserva o espaço e o resto rola por baixo dela.
   A logo do topo é a única coisa que ficaria atrás do cartão, então sai de vista enquanto durar a luta. */
@media(orientation:landscape) and (max-height:560px){
  /* MÃO DIREITA: deitado, a cena da luta toma a esquerda e quem age é o polegar direito. Saindo da batalha, o
     "Explorar" tem de cair no mesmo canto — senão a mão vai no lugar onde estavam os golpes e não acha nada.
     `row-reverse` leva o primeiro botão do DOM (o principal) pra borda direita sem mexer na ordem de leitura
     nem na tabulação. Só fora da luta: em batalha os golpes já nascem na coluna da direita. */
  body:not(.em-batalha) #actions{flex-direction:row-reverse}
  body.em-batalha .game{--cena:min(36vw,320px);grid-template-columns:1fr;gap:10px;padding:8px 8px 8px calc(var(--cena) + 16px)}
  body.em-batalha .stage{display:contents}
  body.em-batalha .divisor{display:none}
  body.em-batalha .brand{visibility:hidden}
  body.em-batalha .scene.battle{position:fixed;left:8px;top:8px;z-index:8;width:var(--cena);
    height:calc(100vh - 16px);height:calc(100dvh - 16px);max-height:none;overflow:auto;gap:4px;padding:8px 10px}
  /* ordem na coluna direita: golpes primeiro (é o que se usa a cada turno), depois painel central (se algo
     estiver ancorado lá), depois ficha/log/mochila/etc. — sem isso a ordem do DOM enterraria os golpes embaixo
     dos painéis da esquerda */
  body.em-batalha #actions{order:-2}
  body.em-batalha .zona[data-zona="centro"]{order:-1}
  /* golpes menores e SEMPRE 2 em cima / 2 embaixo: na altura de um celular deitado, botão alto empurra o
     resto pra fora da tela (o `max-width:420px` lá embaixo nem pega aqui — em paisagem a largura é grande) */
  body.em-batalha .moves{grid-template-columns:1fr 1fr;gap:6px}
  body.em-batalha .mv{padding:5px 9px}
  body.em-batalha .mv b{font-size:14px}
  body.em-batalha .mon{width:88px;height:74px}
  body.em-batalha .spr{width:72px;height:72px}
  body.em-batalha .spr.back{width:82px;height:82px}
  body.em-batalha .mon.mini{width:48px;height:48px;margin-left:-6px}
  body.em-batalha .mon.mini .spr{width:44px;height:44px}
  body.em-batalha .painel[data-painel="log"] .painel-corpo{max-height:26vh}
}
/* `ficha-me`, não `me`: a cena da luta tem `<div class="side me">` e a sala tem `<div class="mp-fila me">`, e o
   `.me img` daqui pegava TAMBÉM o Pokémon em campo — era dele o retângulo escuro atrás do seu sprite na batalha. */
.ficha-me{display:flex;gap:12px;align-items:center}
.ficha-me img{width:96px;height:96px;image-rendering:pixelated;object-fit:contain;background:var(--panel2);border-radius:12px;flex:none}
.ficha-me h2{margin:0;font:700 26px/1.1 var(--titulo,var(--display))}
.ficha-me .sub{color:var(--muted);font-size:14px;margin:2px 0 6px}
.bars{margin:14px 0 6px;display:grid;gap:6px}
.hp{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;font:700 12px var(--display)}
.bar{height:10px;border-radius:5px;background:#0f1230;overflow:hidden}
.fill{height:100%;border-radius:5px;transition:width .45s ease}
.xp .fill{background:#6fa8ff}
.chips{display:flex;gap:4px;flex-wrap:wrap;min-height:4px;margin-top:4px}
/* ⚔ Saga: selo de ofício ao lado do nome (🛡/💚/🔮…) e o 🎯 de quem o inimigo está mirando (render.seloOficio) */
.oficio{margin-left:6px;font-size:.95em;cursor:help}
.st{font:700 11px/1.7 var(--display);padding:0 7px;border-radius:5px;background:#555;color:#fff}
.ninho-ok{color:var(--grass)}
.st-item{background:#3c4a63;font-weight:600;max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-burn{background:#d9532b}.st-poison{background:#9b3fa0}.st-paralysis{background:#c9a400;color:#222}.st-sleep{background:#6c7086}.st-freeze{background:#4fb3c9;color:#12303a}
.stg{font:700 11px/1.7 var(--display);padding:0 6px;border-radius:5px}
.stg.up{background:#2f7a45;color:#e8ffe9}.stg.down{background:#8f3526;color:#ffe9e4}
table.stats{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
table.stats th{font-weight:400;color:var(--muted);text-align:right;padding:2px 4px;font-size:12px}
table.stats td{text-align:right;padding:4px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
table.stats td:first-child,table.stats th:first-child{text-align:left}
table.stats td.v{font:700 15px var(--display)}
.up{color:#7fd88a}.down{color:#ff8a6b}
.sec{margin-top:18px}
.sec h3{font:700 15px var(--titulo,var(--display));color:var(--yellow);margin:0 0 6px}
.sec p{margin:0}
.mlist details{border-top:1px solid var(--line);padding:6px 0}
.mlist summary{display:grid;grid-template-columns:1fr auto;gap:2px 8px;cursor:pointer;list-style:none}
.mlist summary::-webkit-details-marker{display:none}
.mlist summary b{font:700 15px var(--display)}
.mlist summary small{color:var(--muted);grid-column:1/-1}
.mlist .pp{font:500 13px var(--display);color:var(--yellow)}
.mv-nome{display:flex;align-items:center;gap:6px;min-width:0}
.mv-ordem{display:flex;gap:2px;flex:none}
.mv-ordem .btn{padding:0 6px;line-height:1.8;font-size:12px}
.mlist details p{font-size:13px;color:var(--muted);margin:4px 0 2px}
ul.bag{list-style:none;margin:0;padding:0;display:grid;gap:6px}
ul.bag li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px}
ul.bag img{width:30px;height:30px;image-rendering:pixelated}
ul.bag small{display:block;color:var(--muted);font-size:12px}
.bag-acoes{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.scene{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:18px;min-height:290px}
.zone-head h2{font:700 30px/1.1 var(--titulo,var(--display));margin:0}
.zone-head p{margin:4px 0 0;color:var(--muted)}
.zones{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chip{background:var(--panel2);border:2px solid var(--line);border-radius:999px;padding:5px 12px;font-size:14px}
.chip small{color:var(--muted);margin-left:6px;font-family:var(--display)}
.chip.on{border-color:var(--yellow)}
/* ---- Pokédex da rota (mapas.js pokedexDaRota): ? → silhueta → colorido com a taxa de aparição ---- */
.gen-tag{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:0 10px;font:600 13px var(--display);color:var(--yellow);margin-right:4px}
.chip.final{border-style:dashed}
.dex-rota p{margin:0 0 4px}
.dex-legenda{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:2px}
/* 🎯 Caça Shiny */
.caca-box{margin:0 0 10px;padding:8px 10px;background:var(--panel2);border:2px dashed var(--line);border-radius:10px}
.caca-box.on{border-style:solid;border-color:var(--yellow)}
.caca-box p{margin:0 0 6px}
.caca-prog{margin:0 0 8px}
.repel-aviso{margin:0 0 8px;padding:6px 10px;background:var(--panel2);border-left:4px solid var(--yellow);border-radius:8px}
.caca-opcao{display:block;margin:10px 0 0;background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:10px 12px}
.dex-legenda b{display:inline-block;min-width:74px;color:var(--text)}
/* ---- barra de navegação das telas (navegacao.js): voltar + atalhos pra todas ---- */
.nav-telas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid var(--line)}
.nav-atalhos{display:flex;flex-wrap:wrap;gap:6px}
.nav-voltar{white-space:nowrap}
@media (max-width:560px){ .nav-telas{gap:6px} .nav-voltar{width:100%} }
/* ---- 📜 novidades / patch notes (tela-patchnotes.js) ---- */
/* 📈 Taxas: índice de atalhos no topo e as seções. A tabela em si reusa table.ranking. */
.taxas-indice{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px;max-width:900px}
.taxas-indice a{background:var(--panel);border:2px solid var(--line);border-radius:999px;padding:4px 10px;font-size:13px;text-decoration:none}
.taxas-indice a:hover{border-color:var(--yellow)}
.taxas-sec{max-width:900px;margin-top:26px;scroll-margin-top:12px}
.taxas-sec h2{margin:0;font:700 20px var(--titulo,var(--display))}
.taxas-sec table.ranking td:first-child{font-weight:600}
.taxas-sec table.ranking td.pts{white-space:normal;text-align:left;font-size:14px}

.patches{display:grid;gap:8px;max-width:820px}
.patch{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:10px 14px}
.patch[open]{border-color:var(--yellow)}
.patch summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font:600 16px var(--display)}
.patch-v{background:var(--yellow);color:#1b1b2f;border-radius:999px;padding:0 10px;font-size:14px}
.patch-t{flex:1}
.patch-sec{margin:12px 0 4px;font:700 14px var(--display);color:var(--yellow)}
.patch-itens{margin:0;padding-left:20px;display:grid;gap:4px}
.patch-itens li{color:var(--text)}
.patch-piada{margin:12px 0 2px;padding:8px 10px;background:var(--panel2);border-radius:10px;color:var(--muted);font-style:italic;font-size:14px}
.bolinha.novo,.btn .bolinha{background:var(--red);color:#fff;border-radius:999px;font-size:11px;padding:0 6px;margin-left:4px}
/* ---- divisões da mochila e da loja + item segurado na ficha ---- */
.bag-div{margin:12px 0 6px;font:700 13px var(--display);color:var(--yellow);text-transform:none}
.bag-div:first-child{margin-top:0}
/* Divisão da mochila: `<details>` nativo (render.js). O `summary` é a linha clicável com a contagem; a seta é a
   do navegador mesmo. Fechada, a mochila inteira cabe em seis linhas — era isso que faltava no celular. */
.bag-cat{border-top:1px solid var(--line)}
.bag-cat:first-child{border-top:0}
.bag-cat>summary{cursor:pointer;padding:9px 2px;font:700 13px var(--display);color:var(--yellow);list-style-position:inside}
.bag-cat>summary:hover{color:var(--text)}
.bag-cat[open]>summary{margin-bottom:4px}
.bag-cat>ul.bag{padding-bottom:10px}
/* 💎 marcador de item de evolução: discreto quando é só "é de evolução", aceso quando SERVE pra alguém do seu lado */
.tag-evo{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--line);border-radius:999px;font-size:11px;color:var(--muted);white-space:nowrap}
.tag-evo.pronto{border-color:var(--yellow);color:var(--yellow)}
.seg-linha{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;background:var(--panel2);border-radius:10px;padding:6px 10px}
.seg-linha img{width:40px;height:40px;image-rendering:pixelated}
.seg-linha small{display:block;color:var(--muted);font-size:12px}
/* ---- ⚙ ajustes: escolher a fonte (tela-ajustes.js) ---- */
.fontes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.fonte-card{display:grid;gap:4px;text-align:left;background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--text)}
.fonte-card:hover{border-color:var(--yellow)}
.fonte-card.on{border-color:var(--yellow);background:var(--panel2)}
/* o nome da opção é um TÍTULO: mostra `--f-titulo` quando a fonte tem um (a 👾 pixelada), senão o display dela.
   Sem isto a Pixelada apareceria idêntica à Monoespaçada na lista, que é justamente onde ela não é. */
.fonte-nome{font:700 17px var(--f-titulo,var(--f-display))}
.fonte-amostra{font:400 20px/1.3 var(--f-corpo);color:var(--text)}
.fonte-card small{color:var(--muted);font-family:var(--f-corpo)}
.ok-offline{color:var(--grass)}
/* ---- 💾 jornadas salvas (tela-saves.js) ---- */
.saves{display:grid;gap:10px;margin-top:18px;max-width:760px}
.save-card{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:8px 12px}
.save-card.atual{border-color:var(--yellow)}
.save-card img{width:72px;height:72px;image-rendering:pixelated}
.save-card small{display:block;font-size:13px}
.save-acoes{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tag-atual{font:600 12px var(--display);color:#1b1b2f;background:var(--yellow);border-radius:999px;padding:0 8px}
@media (max-width:560px){ .save-card{grid-template-columns:56px 1fr} .save-card img{width:56px;height:56px} .save-acoes{grid-column:1/-1;justify-content:flex-start} }
.dexr-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}
.dexr{position:relative;display:grid;justify-items:center;background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:2px 2px 4px;min-height:92px;font-size:11px;color:var(--muted);text-align:center}
.dexr img{width:60px;height:60px;image-rendering:pixelated}
.dexr small{line-height:1.2;overflow-wrap:anywhere}
.dexr.oculto{place-items:center;border-style:dashed}
.dexr.oculto span{font:700 28px var(--display);color:var(--line)}
.dexr.silhueta img{filter:brightness(0) invert(.8);opacity:.6}
.dexr.revelado{border-color:var(--grass);color:var(--text)}
.dexr .taxa{font:700 12px var(--display);color:var(--grass)}
.dexr .falta{font:500 11px var(--display);font-style:normal;color:var(--muted)}
.dexr.mitico{border-color:#b68cff}
.dexr.mitico.oculto span{color:#b68cff}
/* rota final: os lendários do mapa.
   A fileira ocupa a LINHA inteira (até 10 sprites não cabem numa coluna ao lado do texto: a coluna `auto` não
   encolhe e vazava da caixa, espremendo o texto numa tira de ~80px e rolando a página inteira pro lado).
   `.chefe-box .lend-imgs img` precisa dos dois níveis: `.chefe-box img{width:64px}` vem DEPOIS no arquivo e, com
   a mesma especificidade, ganhava — todos os lendários saíam do tamanho do principal. */
.chefe-box.lendarios{grid-template-columns:1fr auto;border-color:var(--yellow)}
.chefe-box.lendarios.vencido{border-color:var(--grass)}
.lend-imgs{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;row-gap:6px}
.chefe-box .lend-imgs img{width:44px;height:44px;margin-right:-10px}
.chefe-box .lend-imgs img.principal{width:64px;height:64px;margin-right:0}
/* escolha de mapa (Gen): criação e depois de fechar uma Gen */
.gens{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.gen-card{display:grid;justify-items:center;gap:0;background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:6px 6px 10px;color:var(--text)}
.gen-card img{width:72px;height:72px;image-rendering:pixelated}
.gen-card b{font:700 16px var(--display)}
.gen-card span,.gen-card small{font-size:13px;color:var(--muted)}
.gen-card:hover:not(:disabled),.gen-card.on{border-color:var(--yellow);background:var(--panel2)}
.gen-card.feita{border-color:var(--grass)}
.gen-card.trancada{opacity:.5}
.gen-card.trancada img{filter:brightness(0) invert(.6)}

/* A cena da luta veste a cara da rota (js/cenario.js): as cores vêm por variáveis inline, e o degradê é o mesmo
   desenho em qualquer clima — céu em cima, chão embaixo, com uma luz de ambiente por cima de tudo.
   Os valores de reserva mantêm a cena de sempre se o estilo não vier (rota sem clima, teste, cena fora da rota). */
.scene.battle{display:grid;grid-template-rows:auto 1fr 1fr;gap:6px;padding:14px 18px;position:relative;overflow:hidden;
  background:linear-gradient(var(--ceu1,#34428a) 0 42%,var(--ceu2,#34428a) 52%,var(--chao,#3d6a4b) 52%)}
/* brilho do ambiente: fica ATRÁS dos Pokémon (z-index 0 + os filhos em 1) e não captura clique */
.scene.battle::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60% 45% at 50% 58%,color-mix(in srgb,var(--luz,#b8e986) 22%,transparent),transparent 70%)}
.scene.battle > *{position:relative;z-index:1}
/* caverna e noite pedem um respingo de estrelas/cristais; nos outros climas isso não aparece */
.scene.battle.clima-caverna::after,.scene.battle.clima-fantasma::after{content:'';position:absolute;inset:0 0 48% 0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff9 99%,transparent),radial-gradient(1.5px 1.5px at 70% 18%,#fff7 99%,transparent),radial-gradient(1.5px 1.5px at 45% 55%,#fff6 99%,transparent),radial-gradient(1.5px 1.5px at 88% 42%,#fff8 99%,transparent)}
@media(prefers-reduced-motion:reduce){.scene.battle::before{background:none}}
.side{display:flex;align-items:center;justify-content:space-between;gap:12px}
.side.foe .mon{order:2}
.mon{position:relative;width:170px;height:130px;display:grid;place-items:end center;flex:none}
.pad{position:absolute;bottom:4px;left:8px;right:8px;height:30px;border-radius:50%;background:rgba(0,0,0,.25)}
/* `scale-down` = `contain` que NUNCA amplia: a imagem menor que a caixa sai no tamanho de verdade dela.
   `contain` esticava o sprite até encher os 128px, e é isso que dava o bloco gigante e borrado relatado
   ("estão muito pixelados, acho que pela proximidade") — pixel art ampliada 1,6× fica com pixel de tamanho
   irregular. De quebra volta a PROPORÇÃO entre espécies: o Showdown já desenha o Meowth menor que o Onix, e
   encher a caixa apagava essa diferença (era o "oponentes parecem maior que o necessário").
   `object-position:bottom` põe o Pokémon no chão da caixa — sem isso, sobrando espaço, ele flutuaria no meio.
   A caixa continua importando: o sprite 3D (512px) e os maiores são REDUZIDOS pra caber, como antes. */
.spr{position:relative;width:128px;height:128px;image-rendering:pixelated;object-fit:scale-down;object-position:bottom}
.spr.back{width:150px;height:150px}
.spr.flip{transform:scaleX(-1)}
.mon.fainted .spr{opacity:.15;transition:opacity .5s}
/* 🏛 troca de Pratos do Arceus (ui.trocarPratos): o anel com a cor de cada tipo gira em volta dele, encolhe, e o
   Prato sorteado aparece pulsando no meio. Camada temporária por cima do sprite — o JS a remove ao fim. */
.pratos{position:absolute;inset:0;pointer-events:none;z-index:3;animation:pratos-anel 1.5s ease-in-out forwards}
.pratos i{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6px;border-radius:3px;transform:rotate(var(--a)) translateY(-54px);box-shadow:0 0 7px rgba(255,255,255,.75)}
.pratos b{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border-radius:5px;box-shadow:0 0 20px 4px var(--cor-prato);animation:prato-escolhido 1.5s ease-out forwards}
@keyframes pratos-anel{0%{opacity:0;transform:rotate(0) scale(.35)}18%{opacity:1}72%{opacity:1;transform:rotate(430deg) scale(1)}100%{opacity:0;transform:rotate(540deg) scale(.25)}}
@keyframes prato-escolhido{0%,50%{opacity:0;transform:scale(.3)}68%{opacity:1;transform:scale(1.6)}100%{opacity:.95;transform:scale(1)}}
.plate{background:var(--paper);color:var(--paper-ink);border-radius:10px;padding:9px 12px;width:min(270px,100%);box-shadow:4px 4px 0 rgba(0,0,0,.3)}
.pl-top{display:flex;justify-content:space-between;gap:8px;font:700 16px var(--display)}
.plate .bar{background:#cfc8b6}
/* rastreador de turno: barra no topo da batalha + placa de quem está agindo */
.turno-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:rgba(10,12,30,.55);border-radius:999px;padding:5px 6px 5px 14px;font:600 15px var(--display)}
.turno-n{letter-spacing:.04em;text-transform:uppercase;font-size:13px;color:var(--muted)}
.turno-n b{font-size:20px;color:var(--text);margin-left:4px;vertical-align:-1px}
.turno-fase{background:var(--panel2);border-radius:999px;padding:3px 12px;font-size:14px;color:var(--muted)}
.turno-fase.sua-vez{background:var(--yellow);color:#1b1b2f}
.treinador{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text)}
.treinador .equipe{letter-spacing:2px;color:var(--yellow)}
.treinador img{width:24px;height:24px;image-rendering:pixelated;margin-left:4px}
.shiny{margin-right:4px}
/* ♂/♀ (render.sexo): só cor — o símbolo já diz tudo e não deve competir com o nome */
.sexo{margin-left:4px;font-weight:700}
.sexo.m{color:#4c8ed9}
.sexo.f{color:#e0699a}
.fim .pv{align-items:center}
/* lado do jogador com aliados: sprites menores ao lado do seu, placas empilhadas */
.mons-lado{display:flex;align-items:flex-end}
.mon.mini{width:84px;height:84px;margin-left:-10px}
.mon.mini .spr{width:76px;height:76px}
.mon.mini .pad{height:18px}
.plates{display:grid;gap:6px;width:min(270px,100%)}
.plates .plate{width:auto}
.plate.mini{padding:5px 10px}
.plate.mini .pl-top{font-size:14px}

/* ============ ⚔ Saga: batalha em grupo, meio-termo entre Pokémon e RPG de turno ============
   O lado inimigo virou LISTA igual ao do jogador (render: B.inimigos), então ele reusa `.mons-lado`/`.plates`
   e o `.mini` que já existiam. O que é novo aqui: as placas do inimigo empilhadas à esquerda (espelho das
   suas, que ficam à direita), a fila de turnos no topo e o estado de "escolha o alvo". */
.foe-mons{justify-content:flex-end}
.side.foe .foe-mons .mon{order:0}                 /* na lista, a ordem é a do array, não a regra de 1×1 */
.foe-plates{justify-self:start}
/* quem você está mirando: contorno discreto, nunca cor de dano (vermelho ali leria como "levou golpe") */
.mon.em-foco::after{content:'';position:absolute;inset:auto 6px 2px 6px;height:34px;border-radius:50%;
  border:2px dashed var(--yellow);opacity:.8;pointer-events:none}
/* alvo clicável: o sprite vira botão de verdade (foco de teclado inclusive) */
button.mon.alvo{background:none;border:0;padding:0;cursor:pointer}
button.mon.alvo::after{content:'';position:absolute;inset:0;border:2px solid var(--yellow);border-radius:12px;
  background:color-mix(in srgb,var(--yellow) 12%,transparent)}
button.mon.alvo:hover::after,button.mon.alvo:focus-visible::after{background:color-mix(in srgb,var(--yellow) 26%,transparent)}
.pedir-alvo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin:0;
  background:rgba(10,12,30,.72);border:2px solid var(--yellow);border-radius:999px;padding:6px 14px;font:600 15px var(--display)}
/* fila de turnos: a ordem PROVÁVEL do turno (por velocidade), o elemento mais "RPG de turno" da cena */
.fila-turno{display:flex;align-items:center;gap:2px;flex-wrap:wrap;background:rgba(10,12,30,.55);border-radius:999px;padding:4px 10px}
.fila-item{display:inline-flex;align-items:center;gap:3px;font:600 13px var(--display);color:var(--muted);
  background:var(--panel2);border-radius:999px;padding:2px 9px;white-space:nowrap}
.fila-item.meu{color:var(--text)}
.fila-item.foe{color:#f0b6b6}
.fila-item.agora{background:var(--yellow);color:#1b1b2f}
.fila-seta{color:var(--muted);font-style:normal;font-size:11px}
/* comandar a comitiva: a fileira de quem você está comandando, acima dos golpes */
.comitiva-cmd{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.cmd{display:inline-flex;align-items:center;gap:4px;background:var(--panel2);color:var(--muted);border:2px solid var(--line);
  border-radius:999px;padding:5px 12px;font:700 14px var(--display);cursor:pointer}
.cmd:hover:not(:disabled){border-color:var(--yellow);color:var(--text)}
.cmd.on{background:var(--yellow);color:#1b1b2f;border-color:var(--yellow)}
.cmd .ok{font-style:normal;color:#5ac46a;font-weight:700}
.cmd.on .ok{color:#1b1b2f}
.cmd-dica{margin:0 0 8px}
/* ============ ⚔ Saga: a cara de RPG japonês ============
   Referência declarada: a janela de comandos do Final Fantasy — retângulo azul-noite de MOLDURA DUPLA, texto
   claro, comandos um embaixo do outro (desenho da Kazuko Shibuya, que virou a assinatura visual da série).
   Aqui ela é 2×2 e não 4×1: no celular, quatro linhas empurrariam o resto da tela pra baixo, e o que a cena
   presa no topo resolveu (ver o bloco "celular") não pode ser desfeito por uma janela bonita.
   Tipografia: --display (Fredoka) no comando e no nome da perícia, --body no texto do efeito. Não há animação
   nova aqui de propósito — `prefers-reduced-motion` já é global, e moldura não precisa piscar pra ter cara. */
.scene.battle.saga{border:3px double color-mix(in srgb,#8fa6e8 55%,transparent);
  box-shadow:inset 0 0 0 2px rgba(8,12,38,.7),0 6px 14px -10px #0009}
.saga-janela{display:grid;gap:8px;margin:0 0 10px;padding:10px;border:2px solid #8fa6e8;border-radius:10px;
  background:linear-gradient(180deg,#141d46,#0a1030);box-shadow:inset 0 0 0 2px #080c26,0 2px 0 #050818}
.saga-janela.comandos{grid-template-columns:1fr 1fr}
.cmd-jrpg{display:grid;gap:2px;text-align:left;background:transparent;color:var(--text);border:2px solid transparent;
  border-radius:8px;padding:9px 12px;cursor:pointer;min-height:52px}
.cmd-jrpg b{font:700 18px var(--display);letter-spacing:.01em}
.cmd-jrpg small{font-size:12px;color:#aeb9e4}
.cmd-jrpg:hover:not(:disabled),.cmd-jrpg:focus-visible{border-color:var(--yellow);background:rgba(255,255,255,.06)}
.cmd-jrpg:disabled{opacity:.45;cursor:default}
/* perícia: lista, não grade — o que decide o turno é o TEXTO do efeito, e ele precisa de linha inteira */
.saga-janela.pericias{grid-template-columns:1fr}
.pericia{display:grid;gap:3px;text-align:left;background:rgba(255,255,255,.04);color:var(--text);
  border:2px solid #3b4a86;border-radius:8px;padding:8px 12px;cursor:pointer}
.pericia b{font:700 17px var(--display)}
.pericia small{font-size:12.5px;color:#aeb9e4;font-family:var(--body)}
.pericia .pp{font:600 12px var(--display);color:var(--yellow)}
.pericia:hover:not(:disabled),.pericia:focus-visible{border-color:var(--yellow);background:rgba(255,255,255,.09)}
.pericia:disabled{opacity:.5;cursor:default}
.pericia.fria .pp{color:#aeb9e4}
/* Guarda do inimigo (Brecha/Ruína), logo abaixo do HP na placa: escudos contáveis, não barra */
.guarda{display:flex;align-items:center;gap:6px;margin-top:3px;font:700 13px var(--display);color:#3b4a86;cursor:help}
.guarda b{letter-spacing:1px;font-size:14px}
.guarda small{font-weight:400;color:#6b6250;font-size:11px}
.guarda.ruiu{color:#b3360f;background:#ffd9c8;border-radius:999px;padding:1px 8px;letter-spacing:.06em}
.fila-item.ruiu{background:#5a2414;color:#ffd0bf}
/* celular deitado: a cena é apertada: a fila fica só com os ícones (ela é o que mais ensina o turno, então
   ESCONDER era pior que encolher) e os sprites diminuem */
@media(max-height:520px){
  .fila-turno{padding:3px 8px}
  .fila-item b{display:none}
  .fila-item{padding:2px 5px}
  .scene.battle.saga .mon.mini{width:62px;height:62px}
  .scene.battle.saga .mon.mini .spr{width:58px;height:58px}
}
/* celular retrato: a janela de comandos continua 2×2, só mais baixa; a descrição da perícia some pro title */
@media(max-width:520px){
  .cmd-jrpg{min-height:46px;padding:7px 10px}
  .cmd-jrpg b{font-size:16px}
  .cmd-jrpg small{font-size:11px}
  .pericia small{display:none}
}
@media(max-width:520px){.side.me{flex-wrap:wrap}.mon.mini{width:60px;height:60px}.mon.mini .spr{width:56px;height:56px}}
.hp.amz .fill{background:#e86fa0}
.bag-sec{font:600 15px var(--display);margin:14px 0 8px;width:100%}
.item-btn.gosta{border-color:#e86fa0}
.aliados{display:grid;gap:12px}
.aliado{background:var(--panel2);border-radius:12px;padding:10px 12px}
.aliado.descansando{opacity:.7}
.aliado-top{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center}
.aliado-top img{width:56px;height:56px;image-rendering:pixelated;object-fit:contain;background:var(--panel);border-radius:10px}
.aliado .ordem{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14px;color:var(--muted)}
.aliado .ordem select{background:var(--panel);border:2px solid var(--line);border-radius:8px;padding:4px 8px;color:var(--text)}
.aliado details{margin:6px 0}
.aliado summary{cursor:pointer;color:var(--yellow);font-size:14px}
.aliado .btn{margin-top:6px}
/* Etapa 2: zonas trancadas, Alfa da zona, missões */
.chip.trancada{opacity:.6}
.chefe-box{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;margin-top:14px;padding:10px 12px;background:var(--panel2);border:2px solid var(--red);border-radius:12px}
.chefe-box.vencido{border-color:var(--grass)}
.chefe-box img{width:64px;height:64px;image-rendering:pixelated}
.chefe-box small{display:block;color:var(--muted);font-size:13px}
/* celular: sprite + texto + botão em três colunas deixa o texto com ~80px e quebra palavra por palavra.
   O botão desce pra linha inteira (mesmo tratamento que `.insignia` já faz). */
@media(max-width:560px){
  .chefe-box{grid-template-columns:auto 1fr}
  .chefe-box > button{grid-column:1/-1;justify-self:stretch}
  .chefe-box.lendarios{grid-template-columns:1fr}
}
.missao{border-top:1px solid var(--line);padding:6px 0}
.missao small{display:block;color:var(--muted);font-size:13px}
.hp.mis .fill{background:var(--yellow)}
/* criação: iniciais por região */
.topo-criacao{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.regioes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.regiao h4{font:600 14px var(--display);color:var(--muted);margin:0 0 6px}
.regiao .picks{grid-template-columns:repeat(3,1fr)}
/* fim de jornada e recordes */
.selo-recorde{display:inline-block;background:var(--yellow);color:#1b1b2f;border-radius:999px;padding:4px 14px;font:700 15px var(--display);margin:4px 0 10px}
.stats-fim{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:10px}
.stat-fim{background:var(--panel2);border-radius:10px;padding:8px 12px;display:grid}
.stat-fim span{color:var(--muted);font-size:13px}
.stat-fim b{font:700 22px var(--display)}
.stat-fim small{font-size:12px;color:var(--muted)}
.recordes{display:grid;gap:8px;margin-top:18px}
.recorde{display:grid;grid-template-columns:36px 56px 1fr auto;align-items:center;gap:12px;background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:8px 14px}
.recorde .pos{font:700 18px var(--display);color:var(--yellow)}
.recorde img{width:56px;height:56px;image-rendering:pixelated}
.recorde small{display:block;color:var(--muted);font-size:13px}
.recorde .pts{font:700 20px var(--display)}
/* Roguelike: desbloqueados e progresso */
.regiao.desbloq{margin-top:16px;padding:12px 14px;background:var(--panel);border:2px solid var(--grass);border-radius:12px}
.regiao.desbloq h4{margin-top:4px}
ul.quase{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
ul.quase li{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto auto;column-gap:10px;align-items:center;background:var(--panel2);border-radius:10px;padding:6px 10px}
ul.quase li.feito{outline:2px solid var(--grass)}
ul.quase img{width:40px;height:40px;image-rendering:pixelated;grid-row:span 3}
ul.quase .bar{height:6px}
ul.quase .fill{background:var(--grass)}
ul.quase small{color:var(--muted);font-size:12px}
.desbloq-novo{margin:8px 0 12px;padding:10px 12px;border:2px solid var(--grass);border-radius:12px;background:var(--panel2)}
.desbloq-novo .picks{margin-top:8px}
/* multiplayer — menu: duas portas (criar / entrar) e o que dá pra fazer numa sala */
.mp-portas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.mp-porta{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:8px;align-content:start}
.mp-porta h2{margin:0;font:700 20px var(--titulo,var(--display));color:var(--yellow)}
.mp-porta p{margin:0}
.mp-codigo-campo{font:700 26px var(--display);letter-spacing:.3em;text-align:center;text-transform:uppercase;width:5.5em;max-width:100%}
.mp-modos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:8px}
.mp-modo{background:var(--panel2);border:2px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:4px}
.mp-modo b{font:700 17px var(--display)}
.mp-modo small{color:var(--muted);line-height:1.45}
@media(max-width:640px){.mp-portas{grid-template-columns:1fr}}
/* multiplayer (sala) */
.mp .textbox{margin:14px 0}
.mp-cab h1{margin-bottom:4px}
.mp-cab .codigo{font-family:var(--display);letter-spacing:.12em;background:var(--yellow);color:#1b1b2f;border-radius:10px;padding:0 12px}
/* o alto da sala: o código é o que todo mundo precisa ler e ditar, então é ele que manda no tamanho */
.mp-hero{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:12px}
.mp-hero-codigo{display:grid;gap:4px;justify-items:center}
.mp-codigo-grande{font:700 40px/1 var(--display);letter-spacing:.14em;background:var(--yellow);color:#1b1b2f;border-radius:12px;padding:6px 16px}
.mp-hero-info{display:grid;gap:2px;min-width:0}
.mp-hero-modo{margin:0;font:700 18px var(--display);color:var(--yellow)}
.mp-hero-info p{margin:0}
.mp-hero .mp-conexao{margin-top:6px}
@media(max-width:640px){.mp-hero{grid-template-columns:1fr}.mp-codigo-grande{font-size:32px}}
/* cartão de jogador: quem é, o que trouxe e em que pé está */
.mp-selo{font:600 12px var(--body);border-radius:999px;padding:1px 8px;margin-left:auto;white-space:nowrap}
.mp-selo.pronto{background:rgba(95,179,106,.2);color:var(--grass)}
.mp-selo.escolhendo{background:rgba(247,197,72,.16);color:var(--yellow)}
.mp-selo.assiste{background:rgba(163,166,200,.16);color:var(--muted)}
.mp-membro.pronto{border-color:var(--grass)}
.mp-membro.assiste{opacity:.75}
.mp-coroa{margin-right:4px}
/* configuração da sala em botões-cartão (os <select> saíram: dava pra ler menos e acertar pior no celular) */
.mp-cfg-grupo{display:grid;gap:6px;align-content:start;background:var(--panel2);border:2px solid var(--line);border-radius:12px;padding:10px}
.mp-cfg-grupo h4{margin:0;font:700 14px var(--display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.mp-cfg-grupo small{line-height:1.4}
.mp-cfg-leitura{margin:0;font:700 16px var(--display)}
.mp-chips{display:flex;flex-wrap:wrap;gap:6px}
.mp-chip{background:var(--panel);color:var(--text);border:2px solid var(--line);border-radius:999px;padding:6px 12px;font:600 14px var(--body);cursor:pointer}
.mp-chip.on{border-color:var(--yellow);background:rgba(247,197,72,.14);color:var(--yellow)}
.mp-chip:disabled{cursor:default;opacity:.65}
.mp-chip.on:disabled{opacity:.9}
.mp-troca-time{align-items:center;margin:10px 0}
.mp-motivo{margin:6px 0 0}
.mp-comecar{margin-top:12px}
.mp-grupo,.mp-lado{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.mp-campo{display:grid;gap:12px;background:linear-gradient(#34428a 0 50%,#3d6a4b 50%);border-radius:14px;padding:12px}
.mp-mon{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;background:var(--paper);color:var(--paper-ink);border-radius:10px;padding:8px 12px}
.mp-mon img{width:64px;height:64px;image-rendering:pixelated;object-fit:contain}
.mp-mon small{display:block}
.mp-mon .bar{background:#cfc8b6}
.mp-mon.caido{opacity:.45}
.mp-grupo .mp-mon,.mp-times .mp-mon{background:var(--panel2);color:var(--text);border:2px solid var(--line)}
.mp-mon.vez{outline:3px solid var(--yellow);outline-offset:2px}
.mp-membro{display:grid;gap:6px;background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:10px}
.mp-mons{display:grid;gap:6px}
.mp-grupo{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.mp-times{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* a CENA da luta em sala: mesma linguagem do jogo sozinho (.scene.battle/.mon/.spr/.plate), mas em FILAS, porque
   aqui podem ser até seis jogadores de cada lado — o layout de duas colunas do single player não caberia */
.mp-cena{grid-template-rows:auto auto;gap:10px;min-height:0}
.mp-fila{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:flex-end}
.mp-unidade{display:grid;justify-items:center;gap:4px;width:min(270px,46vw)}
.mp-unidade.caido{opacity:.5}
.mp-unidade.vez .plate{outline:3px solid var(--yellow);outline-offset:2px}
.mp-unidade .plate{width:100%}
.mp-unidade .mon{width:150px;height:118px}
.mp-marcas{color:#7a4ad6;font-weight:700}
.mp-dono{margin-top:-2px}
/* mais de 4 em campo: tudo encolhe sozinho, como os aliados do single player */
.mp-cena.apertada .mp-unidade{width:min(210px,44vw)}
.mp-cena.apertada .mon{width:104px;height:88px}
.mp-cena.apertada .spr{width:92px;height:92px}
.mp-cena.apertada .spr.back{width:104px;height:104px}
.mp-cena.lotada .mp-unidade{width:min(170px,30vw)}
.mp-cena.lotada .mon{width:78px;height:70px}
.mp-cena.lotada .spr,.mp-cena.lotada .spr.back{width:70px;height:70px}
.mp-cena.lotada .plate{padding:6px 8px}
.mp-cena.lotada .pl-top{font-size:13px}
@media(max-width:640px){.mp-unidade{width:min(200px,46vw)}.mp-unidade .mon{width:104px;height:92px}.mp-unidade .spr{width:96px;height:96px}.mp-unidade .spr.back{width:104px;height:104px}}
/* andamento do turno: quanto falta, quem a sala espera e o que já aconteceu */
.mp-turno{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 6px}
.mp-prazo{flex:1;min-width:120px;height:10px;background:var(--panel2);border:2px solid var(--line);border-radius:999px;overflow:hidden}
.mp-prazo-fill{height:100%;background:var(--grass);transition:width 1s linear}
.mp-prazo-fill.urgente{background:var(--red)}
.mp-relogio{font:700 16px var(--display);min-width:3ch;text-align:right}
.mp-fichas{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mp-ficha{display:flex;align-items:center;gap:4px;font-size:13px;border:2px solid var(--line);border-radius:999px;padding:2px 10px;background:var(--panel2)}
.mp-ficha.ok{border-color:var(--grass);color:var(--grass)}
.mp-ficha.esperando{border-color:var(--yellow);color:var(--yellow)}
.mp-historico{margin-top:8px;font-size:14px}
.mp-historico summary{cursor:pointer;font:600 14px var(--display);color:var(--muted)}
.mp-hist-turno{margin-top:6px;background:var(--panel2);border-radius:10px;padding:6px 10px}
.mp-hist-turno ul{margin:4px 0 0;padding-left:18px;display:grid;gap:2px;color:var(--muted)}
.mp-itens{margin-top:8px}
.mp-itens summary{cursor:pointer;font:600 14px var(--display)}
.mp-itens .bag-grid{margin-top:6px}
@media(max-width:640px){.mp-times{grid-template-columns:1fr}}
/* estado da conexão da sala + diagnóstico (multiplayer.js barraConexao) */
.mp-conexao{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;padding:6px 10px;background:var(--panel2);border:2px solid var(--line);border-radius:10px;font-size:13px}
.mp-conexao.instavel{border-color:var(--yellow)} .mp-conexao.caiu{border-color:var(--red)}
.mp-diag{width:100%;font-size:12px;color:var(--muted)}
.mp-diag summary{cursor:pointer}
.mp-diag ul{margin:6px 0 0;padding-left:18px;display:grid;gap:2px}
.mp-diag li.err{color:#ffab91}
.mp-centro{margin:10px 0}
.mp-chat{margin:16px 0 4px;width:100%}
.mp-chat h3{margin:0 0 6px;font:700 16px var(--titulo,var(--display))}
.mp-chat .log{height:130px}
.mp-chat .log p{display:flex;align-items:center;gap:4px}
.mp-chat .subrow input{flex:1;min-width:120px}
.mp-time{display:grid;gap:8px;align-content:start;background:var(--panel2);border-radius:14px;padding:10px}
.mp-time h3{margin:0;font:700 16px var(--titulo,var(--display));color:var(--yellow)}
.mp-config{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;width:100%;margin-bottom:12px}
.check{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;font-size:14px}
.check small{grid-column:2}
.mp-quem{margin:4px 0;width:100%}
/* ranking global */
table.ranking{width:100%;border-collapse:collapse;margin-top:12px;background:var(--panel);border-radius:12px;overflow:hidden}
table.ranking th{font:600 13px var(--display);color:var(--muted);text-align:left;padding:8px 12px;border-bottom:2px solid var(--line)}
table.ranking td{padding:8px 12px;border-top:1px solid var(--line)}
table.ranking td.pos{font:700 16px var(--display);width:48px}
table.ranking td.pts{font:700 16px var(--display);text-align:right}
table.ranking tr.eu td{background:var(--panel2);color:var(--yellow)}
.campo select{background:var(--panel2);border:2px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--text);max-width:320px}
.pokedex{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px;margin-top:10px}
.dex-item{display:grid;place-items:center;background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:4px;text-align:center}
.dex-item img{width:64px;height:64px;image-rendering:pixelated}
.dex-item small{font-size:11px;color:var(--muted)}
.pv.conta{grid-template-columns:1fr;max-width:640px}
.campo{display:grid;gap:6px;margin:12px 0;color:var(--muted);font-size:14px}
.pv.conta input{flex:1;min-width:200px;background:var(--panel2);border:2px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--text)}
#conta-chip{display:flex;gap:8px;align-items:center}
#conta-chip .btn{white-space:nowrap}
.selo-offline{font:600 13px var(--display);background:#3a1f2a;border:2px solid var(--red);border-radius:999px;padding:3px 10px;white-space:nowrap}
ul.historico{margin:0;padding-left:18px;color:var(--muted);font-size:14px;display:grid;gap:4px}
.clima-selo{background:var(--panel);border:2px solid var(--line);border-radius:999px;padding:0 10px;font:600 12px var(--display);color:var(--text)}
.clima-selo.lado-jogador{border-color:var(--grass)} .clima-selo.lado-inimigo{border-color:var(--red)}
.plate.agindo{outline:3px solid var(--yellow);outline-offset:2px;animation:agindo 1s ease-in-out infinite}
@keyframes agindo{50%{outline-color:transparent}}
@media(max-width:520px){.mon{width:110px;height:100px}.spr{width:96px;height:96px}.spr.back{width:110px;height:110px}.pl-top{font-size:14px}}
@keyframes shake{0%,100%{translate:0}25%{translate:-7px 0}75%{translate:7px 0}}
.mon.shake{animation:shake .25s 2}
/* quem ataca "pula" um pouco (golpe.usarGolpe → ctx.atacar, no instante em que anuncia o golpe) */
@keyframes atacando{0%,100%{transform:scale(1)}35%{transform:scale(1.08)}65%{transform:scale(.97)}}
.mon.atacando{animation:atacando .35s ease-out}
/* sala multiplayer: o cartão de quem está agindo AGORA (multiplayer.js narrar/marcarAtuando). O turno chega pronto
   do motor, então a narração é o que mostra a ordem e o autor de cada ação — sem isso o dano "acontecia sozinho",
   ainda mais com dois Pokémon de mesmo nome no time. Fica aceso enquanto durarem as linhas daquele Pokémon. */
.mp-mon.atacando{animation:atacando .35s ease-out;outline:2px solid var(--yellow);outline-offset:1px;box-shadow:0 0 12px rgba(247,197,72,.55)}   /* outline, não border: o cartão da batalha não tem borda e uma nova deslocaria o layout */
/* dano pisca, cura pisca verde — deduzido do sentido em que a barra de HP mudou (render.piscar).
   A COR do dano vem do tipo do golpe: `ui.shake` põe --cor-impacto (dados.TC) no sprite e reinicia a piscada.
   O vermelho aqui é o padrão de quem não tem tipo (dano de confusão, esforço do próprio golpe, veneno). */
@keyframes hit-flash{0%,100%{filter:none}25%{filter:brightness(1.6) drop-shadow(0 0 10px var(--cor-impacto,#ff4d4d)) drop-shadow(0 0 4px var(--cor-impacto,#ff4d4d))}}
.mon.hit-flash{animation:hit-flash .35s ease-out}
@keyframes heal-flash{0%,100%{filter:none}30%{filter:brightness(1.3) drop-shadow(0 0 8px #6fd97f)}}
.mon.heal-flash{animation:heal-flash .5s ease-out}
/* status e estágios: pulso contínuo e sutil enquanto durar (a classe já vem no HTML a cada render, então
   "enquanto durar" é só a classe continuar presente — sem precisar de nenhum gancho novo) */
@keyframes pulso-status{0%,100%{opacity:1}50%{opacity:.6}}
.st-burn,.st-poison,.st-paralysis,.st-freeze{animation:pulso-status 1.6s ease-in-out infinite}
.stg.up,.stg.down{animation:pulso-status 2s ease-in-out infinite}

.textbox{background:var(--paper);color:var(--paper-ink);border-radius:10px;border:3px solid var(--paper-ink);box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 5px #6d74b8;padding:5px}
.log{height:180px;overflow-y:auto;padding:10px 14px;font-size:15px}
.log p{margin:0 0 4px}
.log .good{color:#1f7a3a}.log .hit{color:#a83418}.log .level{color:#5a33c2}.log .muted{color:#6b6e8f}
.log .crit{color:#c2410c;font-weight:700}.log .status{color:#8a4b0f}.log .enc{font-size:16px}
.log p.turno{display:flex;align-items:center;gap:10px;margin:10px 0 4px;font:600 13px var(--display);letter-spacing:.08em;text-transform:uppercase;color:#6d74b8}
.log p.turno::before,.log p.turno::after{content:'';flex:1;height:2px;background:#cfc8b6}

.actions{display:flex;flex-wrap:wrap;gap:10px}
.moves{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
@media(max-width:420px){.moves{grid-template-columns:1fr}}
/* Arena/Multiplayer: o botão de atacar (.mv) não pode ficar DENTRO de outro <button> (HTML inválido), então os
   dois botões de reordenar (▲▼) ficam ao lado, dentro de um wrapper que vira o item do grid .moves. */
.mv-cel{display:flex;gap:4px}
.mv-cel .mv{flex:1;min-width:0}
.mv-cel .mv-ordem{flex-direction:column;justify-content:center}
.mv{text-align:left;background:var(--panel2);border:2px solid var(--line);border-left:8px solid var(--c);border-radius:10px;padding:9px 12px;display:grid;gap:1px}
.mv b{font:700 17px var(--display)}
.mv small{color:var(--muted);font-size:13px}
.mv .pp{font:500 13px var(--display);color:var(--yellow)}
/* PP não é barra, é texto — pisca quando o número muda (render.animarPP), em vez de FLIP de largura */
@keyframes pp-mudou{0%,100%{transform:scale(1);color:var(--yellow)}40%{transform:scale(1.25);color:var(--text)}}
.pp.pp-mudou{animation:pp-mudou .3s ease-out}
.mv:hover:not(:disabled){border-color:var(--c)}
/* Vantagem de tipo no botão do golpe: a informação que decide o turno e que, sem ela, só existe na cabeça de
   quem decorou a tabela de 18 tipos. Cor + seta + texto, os três juntos — cor sozinha exclui quem não a
   distingue, e seta sozinha não diz o quanto. */
.mv .vant{font:600 12px var(--display);letter-spacing:.2px}
.mv.v-otimo{border-color:#2fbf5f}.mv.v-otimo .vant{color:#5ee08a}
.mv.v-bom .vant{color:#9fe3b0}
.mv.v-neutro .vant{color:var(--muted)}
.mv.v-ruim .vant{color:#ffb36b}
.mv.v-pessimo{border-color:#a33}.mv.v-pessimo .vant{color:#ff8a8a}
.mv.v-nulo{opacity:.65}.mv.v-nulo .vant{color:#ff6b6b;font-weight:700}
/* tipos na plaquinha de batalha: menores, pra não competir com o nome e o HP */
.pl-tipos{margin:2px 0 4px}
.pl-tipos .ty{font-size:11px;padding:1px 6px}
/* a Pokédex da rota virou botão (abre a ficha): precisa parecer clicável */
button.dexr{cursor:pointer;font:inherit;text-align:center}
button.dexr:hover{border-color:var(--yellow);transform:translateY(-1px)}
.subrow{display:flex;gap:10px;width:100%;flex-wrap:wrap}
/* Mega Evolução: o botão precisa se destacar dos golpes sem virar a coisa mais chamativa da tela — é uma vez por
   batalha, e não gasta o turno. Pulsa devagar; quem pede menos movimento (a11y) vê o botão parado. */
.mega-btn{background:linear-gradient(135deg,#7b2ff7,#f107a3);color:#fff;border:none;animation:mega-pulso 2.2s ease-in-out infinite}
.mega-btn:hover:not(:disabled){filter:brightness(1.12)}
@keyframes mega-pulso{0%,100%{box-shadow:0 0 0 0 rgba(241,7,163,.5)}50%{box-shadow:0 0 14px 4px rgba(241,7,163,.25)}}
@media(prefers-reduced-motion:reduce){.mega-btn{animation:none}}
/* Tera: a mesma ideia do botão da Mega, com a cara de cristal em vez de energia */
.tera-btn{background:linear-gradient(135deg,#00c2ff,#7bffb5);color:#10233a;border:none;font-weight:700}
.tera-btn:hover:not(:disabled){filter:brightness(1.1)}
/* o tipo Tera na ficha: mesmo selo dos outros tipos, com borda de cristal pra não passar batido */
.ty.tera-ty{outline:2px solid #fff6;box-shadow:0 0 10px rgba(0,194,255,.45)}
/* Z-Move: o botão é laranja porque, ao contrário dos outros dois, ele GASTA o turno — cor diferente pra não
   ser clicado achando que é de graça */
.z-btn{background:linear-gradient(135deg,#ff8a00,#ffd000);color:#241a05;border:none;font-weight:700}
.z-btn:hover:not(:disabled){filter:brightness(1.1)}
/* Gigantamax: o botão é vermelho, e o Pokémon fica GIGANTE de verdade — a mecânica é visual antes de ser
   numérica, e ver o bicho crescer é metade da graça. A escala sai do canto de baixo pra ele "crescer do chão"
   em vez de flutuar, e a aura vermelha marca os 3 turnos. */
.gmax-btn{background:linear-gradient(135deg,#d92b2b,#ff6b6b);color:#fff;border:none;font-weight:700}
.gmax-btn:hover:not(:disabled){filter:brightness(1.12)}
.mon.gigante .spr{transform:scale(1.55);transform-origin:bottom center;filter:drop-shadow(0 0 12px rgba(255,60,60,.65))}
.mon.gigante{z-index:2}
@media(prefers-reduced-motion:no-preference){.mon.gigante .spr{transition:transform .35s ease-out}}
/* busca na grade de desbloqueados: campo discreto, acima da grade, sem empurrar o layout */
.busca-desbloq{display:block;max-width:420px;margin:0 0 10px}
.busca-desbloq input{width:100%}
/* catálogo das Megas (tela de conquistas): grade de figuras, com as conquistadas em destaque */
.cat-megas{margin-top:10px}
.cat-megas summary{cursor:pointer;color:var(--yellow);font:600 14px var(--display)}
.cat-megas .pick{opacity:.55}
.cat-megas .pick.on{opacity:1;border-color:var(--yellow)}
/* 📌 acompanhar uma conquista: discreto na lista, aceso quando é o fixado desta jornada */
.fixar{grid-column:2;justify-self:start;margin-top:4px;opacity:.75}
.fixar.on{opacity:1;border-color:var(--yellow);color:var(--yellow)}
.missao.rastreada{border-left:3px solid var(--yellow);padding-left:8px}
.bag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;width:100%}
.item-btn{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:2px 8px;text-align:left;background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:8px}
.item-btn img{grid-row:1/-1;align-self:start;width:30px;height:30px;image-rendering:pixelated}
.item-btn small{color:var(--muted);font-size:12px}
/* Loja: o cartão tem uma 3ª linha com a descrição do item (render.js), que no celular é a única forma de saber o
   que a coisa faz — não há `title` pra passar o mouse. Coluna mais larga que a da mochila pra o texto respirar. */
.loja-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.item-btn .item-desc{font-size:11px;line-height:1.35;white-space:normal}
.item-btn:hover:not(:disabled){border-color:var(--yellow)}
/* ⚡ itens rápidos (render.barraRapidos): o mesmo cartão da mochila, em destaque junto dos botões principais.
   O ⚡ da mochila usa o .on amarelo das outras listas selecionáveis. */
.rapidos .rapido{flex:1;min-width:150px;border-color:var(--yellow)}
.bag-acoes .btn.on{border-color:var(--yellow);color:var(--yellow)}

.modal{position:fixed;inset:0;background:rgba(10,12,30,.72);display:grid;place-items:center;padding:20px;z-index:10}
.box{background:var(--panel);border:2px solid var(--yellow);border-radius:14px;padding:20px;max-width:520px;width:100%;max-height:90vh;overflow:auto}
.box-body{font-size:17px}
.choices{display:grid;gap:8px;margin-top:16px}
/* HUD de quantidade da loja (ui.pedirQuantidade) */
.qtd-topo{display:flex;align-items:center;gap:12px;font-size:17px}
.qtd-topo img{width:48px;height:48px;image-rendering:pixelated}
.qtd-ctl{display:flex;gap:6px;align-items:stretch;margin-top:14px}
.qtd-ctl .btn{padding:8px 10px;min-width:44px}
.qtd-ctl input{flex:1;min-width:0;text-align:center;font-size:20px;font-weight:700;background:var(--panel2);color:inherit;border:2px solid var(--yellow);border-radius:10px}
.qtd-atalho{margin-top:8px}.qtd-atalho .btn{width:100%}
.qtd-total{margin-top:12px;font-size:17px;text-align:center}
.mcard{margin-top:10px;padding:10px 12px;background:var(--panel2);border-radius:10px;font-size:14px;color:var(--muted)}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ---- Pokédex da conta (tela-pokedex.js) ----
   Mesma linguagem visual da Pokédex de rota (.dexr), mas em escala nacional: 1025 células, as conhecidas com
   sprite e nome, as outras como "?" tracejado. As imagens são `loading="lazy"` — sem isso o navegador tentaria
   baixar mil sprites de uma vez ao abrir a tela. */
.dex-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;margin-top:14px}
.dexc{position:relative;display:grid;justify-items:center;align-content:start;background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:3px 2px 5px;min-height:96px;font:600 11px var(--body);color:var(--text);text-align:center;cursor:pointer}
.dexc img{width:60px;height:60px;image-rendering:pixelated}
.dexc b{font-size:11px;line-height:1.15;overflow-wrap:anywhere}
.dexc small{color:var(--muted)}
.dexc.nunca{place-content:center;border-style:dashed;color:var(--muted);cursor:default}
.dexc.nunca span{font:700 22px var(--display)}
.dexc.derrotado{border-color:var(--yellow)}
.dexc.amigo{border-color:#5FB36A}
.dexc:not(.nunca):hover{background:var(--panel);border-color:var(--yellow)}
.dex-ficha{background:var(--panel2);border:2px solid var(--line);border-radius:12px;padding:14px;margin-top:14px}
.dex-ficha-topo{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.dex-ficha-topo img{width:96px;height:96px;image-rendering:pixelated}
.dex-ficha h3{margin:0 0 6px;font:700 22px var(--titulo,var(--display))}
.dex-ficha h4{margin:14px 0 6px;font:700 15px var(--display)}
.dex-onde{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:13px;color:var(--muted)}

/* Conquistas: a lista reusa .quase, que é uma grade "sprite | conteúdo". Linha sem sprite (tipo, golpe) precisa
   ocupar a vaga mesmo assim, senão o texto cai na coluna de 40px e monta em cima da barra — foi bug relatado. */
ul.quase .sem-sprite{width:40px;height:40px;grid-row:span 3;border-radius:8px;background:var(--panel);opacity:.45}
ul.quase.conquistas li{min-width:0}
ul.quase.conquistas b{overflow-wrap:anywhere;line-height:1.2}
ul.quase.conquistas .bar{margin:4px 0}

.badge-ic{display:grid;place-items:center;font-size:20px;background:var(--panel)!important;opacity:1!important}

/* 🗺 Editor de rotas (só admin, tela-editor-rotas.js): a grade de espécies do pool, cada uma com a caixinha e o
   campo de quantidade. `auto-fill` em vez de um número fixo de colunas porque o pool vai de 5 a 18 espécies. */
.ed-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 12px;margin:6px 0 10px}
.ed-grade .check{grid-template-columns:auto auto 1fr auto;gap:6px}
#ed-saida{width:100%;margin-top:8px;font-family:ui-monospace,monospace;font-size:12px}

/* 🤖 Auto-explorar (só admin, auto.js): o painel da caçada em cima dos golpes e do Explorar. A lista é uma
   grade de 4 colunas (espécie · quantos · % observada · % esperada) pra alinhar os números entre as linhas —
   comparar observado com esperado é a razão de a ferramenta existir. */
.auto-box{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:0 0 8px;background:rgba(255,255,255,.03)}
.auto-box.on{border-color:var(--yellow)}
.auto-topo{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:0 0 6px}
.auto-stats{list-style:none;margin:0 0 6px;padding:0;max-height:34vh;overflow:auto}
.auto-stats li{display:grid;grid-template-columns:1fr auto 54px 92px;gap:8px;align-items:baseline;padding:2px 0;border-top:1px solid var(--line);font-size:13px}
.auto-stats li:first-child{border-top:0}
.auto-stats b,.auto-stats .muted{text-align:right}