: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}
.loja-topo{position:sticky;top:0;z-index:6;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;margin-bottom:10px;background:var(--ink);border-bottom:2px solid var(--line)}
.loja-topo .carteira-loja{margin:0;padding:6px 12px}
.loja-topo::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:18px;background:var(--ink)}   /* cobre o respiro (padding) do contêiner que rola: sem isso o item aparece por cima do cabeçalho */
@media(max-width:720px),(orientation:landscape) and (max-height:560px){.dinheiro{font-size:17px;padding:6px 12px;min-height:44px}}
.burger{display:none;position:relative}
/* ☰ com novidade nas 📜 Novidades: um ponto, pra quem joga com a barra compacta não perder o aviso que os atalhos
   mostravam. */
.burger.com-novidade::after{content:'';position:absolute;top:4px;right:4px;width:10px;height:10px;border-radius:50%;background:var(--red,#e5484d);border:2px solid var(--panel2)}
.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:0}
/* O "Começar" fica na base da tela enquanto a prévia (~1100 px no celular: arte, stats, habilidades, natureza…) é
   rolada — antes ele era a última coisa do cartão e a pessoa descia tudo pra achar. Sticky DENTRO da prévia: some
   junto com ela. */
.pv-comecar{position:sticky;bottom:0;z-index:5;margin-top:16px;padding:14px 0 calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom,transparent,var(--panel) 28%)}
.pv-comecar .btn{width:100%}
/* Fim de jornada: com 12 cartões de estatística, "Nova jornada" ficava a ~1000 px do título no celular. Fica na
   base da tela até o fim do cartão, com o botão principal numa linha e as duas telas de consulta embaixo. */
.fim-acoes{position:sticky;bottom:0;z-index:5;margin-top:14px;padding:12px 0 calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom,transparent,var(--panel) 30%)}
.fim-acoes .btn.big{flex:1 1 100%;margin-top:0}
.fim-acoes .btn.ghost{flex:1 1 calc(50% - 5px)}
/* Opções e agenda: grupos recolhíveis (abertos no computador pelo JS de criacao.js) */
.opcoes-jornada,details.agenda-evento{margin:12px 0}
.opcoes-jornada > summary,details.agenda-evento > summary{cursor:pointer;list-style:none;padding:10px 12px;background:var(--panel);border:2px solid var(--line);border-radius:12px}
.opcoes-jornada > summary::-webkit-details-marker,details.agenda-evento > summary::-webkit-details-marker{display:none}
.opcoes-jornada > summary::after,details.agenda-evento > summary::after{content:'▾';float:right;color:var(--muted)}
.opcoes-jornada[open] > summary::after,details.agenda-evento[open] > summary::after{content:'▴'}
.opcoes-jornada[open] > summary{margin-bottom:6px}
/* a agenda aberta é UM cartão roxo (borda e fundo no <details>); o resumo vira o cabeçalho dele */
details.agenda-evento{padding:0;border:2px solid #b45cff;background:var(--panel);border-radius:12px;overflow:hidden}
details.agenda-evento > summary{border:0;border-radius:0;background:none;padding:12px 14px}
details.agenda-evento[open] > summary{border-bottom:1px solid var(--line)}
details.agenda-evento > :not(summary){margin-left:14px;margin-right:14px}
details.agenda-evento > :last-child{margin-bottom:14px}
/* Criação no celular: o que ocupava 5.300 px com o mapa em 2 colunas e as 6 dificuldades por extenso */
@media(max-width:720px){
  .difs .abil:not(.on) small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .create .gens{grid-template-columns:repeat(3,minmax(0,1fr))}
  .create .gen-card{padding:4px 4px 8px}
  .create .gen-card img{width:56px;height:56px}
  .regiao .pick img{width:60px;height:60px}
  .pv{padding:16px;gap:16px}
  .pv-art{max-width:220px;margin:0 auto}
  .pv h2{font-size:32px}
}

/* 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). */
/* As colunas laterais encolhem em janela estreita (`28vw`): com 340 + 420 + 340 fixos, tudo entre 881 e ~1180 px
   (iPad deitado, notebook com a janela pela metade) estourava pra direita — medido em 1024×768: 1164 px de página.
   Em tela larga o `min()` devolve a largura que o jogador escolheu, como sempre. */
.game{display:grid;grid-template-columns:min(var(--larg-esq,340px),28vw) 10px minmax(300px,1fr) 10px min(var(--larg-dir,340px),28vw);gap:0 6px;padding:20px;max-width:1800px;margin:0 auto;align-items:start}
.stage{display:grid;gap:14px;min-width:0}
.stage > *{min-width:0}   /* item de grade não encolhe abaixo do conteúdo: a fileira de rotas (nowrap) alargava a página inteira */
.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}
/* O DOCK de ações (Explorar · Centro · Loja): fora da batalha ele acompanha a rolagem, na base da tela, em qualquer
   tamanho. Medido em 1280×800: a zona (chips + Pokédex da rota + Alfa) tem ~800 px e o "Explorar" ficava em y=1144 —
   o botão que se usa o jogo inteiro estava 350 px abaixo da dobra. `:not(.cheia)` deixa a Saga fora (tem HUD próprio).
   O botão principal ocupa a linha; Centro e Loja dividem a de baixo. */
body:not(.em-batalha) .game:not(.cheia) #actions{position:sticky;bottom:0;z-index:7;background:var(--ink);margin-top:-4px;
  padding:10px 0 calc(8px + env(safe-area-inset-bottom));box-shadow:0 -16px 14px -14px rgba(5,6,18,.95)}
body:not(.em-batalha) .game:not(.cheia) #actions.em-loja{position:static;box-shadow:none}   /* a loja é uma página: não prende nada */
/* Loja aberta: ocupa o lugar da zona e do registro, no topo da coluna central. Antes ela nascia no fim da coluna
   (1000 px abaixo da dobra no computador) e o dock só sumia — o clique em "Abrir loja" parecia não fazer nada.
   A compra tem toast, então o registro escondido não deixa a pessoa sem retorno. */
.game:not(.cheia):has(#actions.em-loja) #scene,.game:not(.cheia):has(#actions.em-loja) .zona[data-zona="centro"]{display:none}
#actions > .btn.big{flex:1 1 100%}
#actions > .btn.ghost{flex:1 1 calc(50% - 5px);min-width:0;padding:8px 8px;line-height:1.25}
.btn small.btn-sub{display:block;margin-top:1px;font:500 12px var(--display);color:var(--muted)}
.btn small.btn-sub s{opacity:.7}
/* 🍖 Oferecer petisco (render.blocoPetisco): a cor é a do coração dos petiscos que ele gosta (`.item-btn.gosta`). Vazado,
   como os desafios da zona — o amarelo cheio da luta é o golpe. Ocupa a linha: o rótulo traz o petisco, o estoque e
   a amizade, e não cabe numa terça parte. */
.petisco-btn,.petisco-box{flex:1 1 100%;width:100%}
.petisco-btn{background:transparent;color:var(--text);border:2px solid #e86fa0;padding:8px 12px;line-height:1.25}
.petisco-btn:hover:not(:disabled){background:rgba(232,111,160,.14);filter:none}
.petisco-btn:disabled{border-color:var(--line);color:var(--muted);cursor:default;opacity:.8}   /* o motivo é a informação: não apaga pela metade */
.petisco-btn:disabled .btn-sub{color:var(--text);opacity:.85}
.petisco-box{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 6px 12px;background:rgba(232,111,160,.12);border:2px solid #e86fa0;border-radius:8px;font-weight:600}
.petisco-box small{display:block;color:var(--muted);font-weight:500}
/* Batalha: os golpes logo abaixo da cena, o registro depois. Medido em 1280×800: com o registro (236 px) entre a
   cena e os golpes, eles começavam em y=694 — meio golpe à vista, e o botão que se usa TODO turno exigia rolar.
   Só `order` (o DOM e a tabulação ficam como estavam); o celular deitado põe o seu próprio mais abaixo. */
body.em-batalha #actions{order:1}
/* Mochila / Fugir (e os botões de Mega, Tera, Z…) dividem a linha, como os golpes dividem a deles */
body.em-batalha #actions .subrow .btn{flex:1 1 0;min-width:0}
body.em-batalha .zona[data-zona="centro"]{order:2}
.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)}
/* Dedo não é cursor: ▲ ▼ ⇄ ▾ eram alvos de ~22 px. Em tela de toque ficam do tamanho mínimo confortável. */
@media(pointer:coarse){
  .painel-botoes{gap:4px}
  .painel-botoes button{min-width:38px;min-height:38px;font-size:15px;padding:0}
  .painel-cab{padding:4px 6px 4px 12px}
}
.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}
  .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 e você chega em tudo descendo a página.
     Revisão de 14/10/2026 (medida em tela, 390×844): (1) a cena tinha `max-height:38vh` + rolagem interna e a placa
     do SEU Pokémon, que caía embaixo do sprite, era cortada; agora a placa fica AO LADO do sprite (como a do
     inimigo) e a cena tem a altura do que contém, ~250 px. (2) Os golpes vinham depois do registro (236 px) e
     sobrava meio golpe na primeira tela: agora vêm logo abaixo da cena (a regra de `order` mais acima) e o
     registro desce. (3) Dois golpes por linha, com tipo e PP à vista. */
  body.em-batalha .game{padding:10px;gap:10px}
  body.em-batalha #actions{position:static;padding:0;margin:0}
  /* coluna flexível, não a grade de 3 linhas (`auto 1fr 1fr`): com 1fr as duas linhas de Pokémon ficavam IGUAIS à
     mais alta — um treinador com aliados virava uma cena de 790 px */
  body.em-batalha .scene.battle{position:sticky;top:0;z-index:8;display:flex;flex-direction:column;max-height:none;overflow:hidden;min-height:0;padding:8px 10px;gap:4px;box-shadow:0 6px 12px -8px #0008}
  body.em-batalha .scene.battle.cena-alta{position:relative;box-shadow:none}   /* alta demais pra ficar presa: rola com a página (render.js) */
  body.em-batalha .side{flex-wrap:nowrap;gap:8px}
  body.em-batalha .plates{flex:1 1 0;min-width:0;width:auto;max-width:270px}
  /* com aliados os sprites encolhem pra a placa continuar AO LADO deles (empilhada embaixo, a cena passava de 440 px) */
  body.em-batalha .side.me.com-aliados .mon{width:84px;height:74px}
  body.em-batalha .side.me.com-aliados .spr.back{width:76px;height:76px}
  body.em-batalha .side.me.com-aliados .mon.mini{width:44px;height:50px;margin-left:-8px}
  body.em-batalha .side.me.com-aliados .mon.mini .spr{width:40px;height:40px}
  body.em-batalha .side.me.com-aliados .plates{max-width:none}
  body.em-batalha .mons-lado{flex:none}
  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:48px;height:52px;margin-left:-10px}
  body.em-batalha .mon.mini .spr{width:44px;height:44px}
  body.em-batalha .side.foe .foe-mons{padding-left:8px}          /* o 1º mini não "come" a placa: a margem negativa é só entre irmãos */
  /* A placa é UMA linha e meia, não quatro (mesmo desenho da luta da Saga): nome e nível à esquerda, tipos à direita
     NA MESMA linha, a barra de HP embaixo e o resto (guarda, item, estados) numa faixa fina. Num grupo de 3 inimigos
     com 2 aliados são CINCO placas na cena: com a placa inteira (nome / tipos / HP / estados) elas somavam ~400 px e
     a cena passava de metade da tela. */
  body.em-batalha .plate{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;padding:4px 8px;border-radius:8px;box-shadow:2px 2px 0 rgba(0,0,0,.3)}
  body.em-batalha .plate > *{min-width:0;order:4;flex:1 1 100%}
  /* O nome ganha a linha inteira (com os tipos ao lado ele virava "Gra…" e "Gl…": numa manada o nome é QUEM é o
     bicho). Abaixo, a barra de HP e depois UMA nuvem de etiquetas que quebra sozinha — tipos, status, estágios
     (Atq −1) e item — porque `.pl-tipos` e `.chips` viram `display:contents`: cada etiqueta é item da própria placa. */
  body.em-batalha .plate .pl-top{order:0;font-size:13px;line-height:1.25;white-space:nowrap}
  body.em-batalha .plate .pl-top span:first-child{overflow:hidden;text-overflow:ellipsis}
  body.em-batalha .plate .pl-top span:last-child{flex:none}
  /* sem o rótulo "HP": a barra colorida com os números já diz o que é, e a linha cabe junto dos tipos */
  body.em-batalha .plate .hp{order:1;flex:1 1 68px;display:grid;grid-template-columns:minmax(24px,1fr) auto;gap:4px;font-size:11px;line-height:1.2}
  body.em-batalha .plate .hp > span:first-child{display:none}
  body.em-batalha .plate .hp.amz > span:first-child{display:inline}      /* a barra de amizade (♥) é outra coisa: o símbolo fica */
  body.em-batalha .plate .hp.amz{grid-template-columns:auto minmax(24px,1fr) auto}
  body.em-batalha .plate .pl-tipos,body.em-batalha .plate .chips{display:contents}
  body.em-batalha .plate .pl-tipos > *,body.em-batalha .plate .chips > *{flex:0 0 auto;order:2;margin:0;padding:0 4px;font-size:10px;line-height:1.55;max-width:100%}
  body.em-batalha .plate .chips > .st-item{max-width:11em}
  body.em-batalha .plate .bar{height:7px}
  body.em-batalha .plate .guarda{margin-top:0;font-size:11px}
  body.em-batalha .plate.mini{padding:3px 8px}
  body.em-batalha .turno-bar{padding:4px 8px;font-size:12px}
  body.em-batalha .carteira-mini{font-size:13px}
  body.em-batalha .moves{grid-template-columns:1fr 1fr;gap:6px}
  body.em-batalha .mv{padding:6px 9px;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;row-gap:0}
  body.em-batalha .mv b{grid-column:1;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.em-batalha .mv .pp{grid-column:2;grid-row:1;font-size:12px}
  body.em-batalha .mv small,body.em-batalha .mv .vant{grid-column:1/-1;font-size:12px}
  body.em-batalha .mv .mv-cls{display:none}                    /* "Físico/Especial" sai: o tipo e o poder já dizem o que importa; a classe está no toque longo */
  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:28vh}
}
@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:26vh}
}
/* ---- cena em GRUPO (qualquer tamanho): 2+ inimigos e/ou aliados em campo ----
   Medido em 1280×800 com 3 inimigos, 2 aliados e os estados de sempre (queimado, Atq −2, item): a cena passava de
   750 px e os golpes ficavam abaixo da dobra. Mesmo desenho das placas do celular — nome numa linha, HP e etiquetas
   (tipos, status, estágios, item) numa nuvem que quebra sozinha — e a cena vira uma coluna que tem a altura do que
   contém (a grade `auto 1fr 1fr` igualava as duas fileiras à mais alta). Só fora da Saga (`em-batalha`). */
body.em-batalha .scene.battle.compacta{display:flex;flex-direction:column;gap:6px;padding:10px 14px}
body.em-batalha .scene.compacta .side{flex-wrap:nowrap;gap:8px}
body.em-batalha .scene.compacta .plates{flex:1 1 0;min-width:0;width:auto;max-width:300px}
body.em-batalha .scene.compacta .mons-lado{flex:none}
body.em-batalha .scene.compacta .mon{width:112px;height:92px}
body.em-batalha .scene.compacta .spr{width:92px;height:92px}
body.em-batalha .scene.compacta .spr.back{width:104px;height:104px}
body.em-batalha .scene.compacta .mon.mini{width:52px;height:56px;margin-left:-10px}
body.em-batalha .scene.compacta .mon.mini .spr{width:48px;height:48px}
body.em-batalha .scene.compacta .side.foe .foe-mons{padding-left:8px}
body.em-batalha .scene.compacta .plate{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;padding:4px 8px;border-radius:8px;box-shadow:2px 2px 0 rgba(0,0,0,.3)}
body.em-batalha .scene.compacta .plate > *{min-width:0;order:4;flex:1 1 100%}
body.em-batalha .scene.compacta .plate .pl-top{order:0;font-size:13px;line-height:1.25;white-space:nowrap}
body.em-batalha .scene.compacta .plate .pl-top span:first-child{overflow:hidden;text-overflow:ellipsis}
body.em-batalha .scene.compacta .plate .pl-top span:last-child{flex:none}
body.em-batalha .scene.compacta .plate .hp{order:1;flex:1 1 68px;display:grid;grid-template-columns:minmax(24px,1fr) auto;gap:4px;font-size:11px;line-height:1.2}
body.em-batalha .scene.compacta .plate .hp > span:first-child{display:none}
body.em-batalha .scene.compacta .plate .hp.amz > span:first-child{display:inline}
body.em-batalha .scene.compacta .plate .hp.amz{grid-template-columns:auto minmax(24px,1fr) auto}
body.em-batalha .scene.compacta .plate .pl-tipos,body.em-batalha .scene.compacta .plate .chips{display:contents}
body.em-batalha .scene.compacta .plate .pl-tipos > *,body.em-batalha .scene.compacta .plate .chips > *{flex:0 0 auto;order:2;margin:0;padding:0 4px;font-size:10px;line-height:1.55;max-width:100%}
body.em-batalha .scene.compacta .plate .chips > .st-item{max-width:11em}
body.em-batalha .scene.compacta .plate .bar{height:7px}
body.em-batalha .scene.compacta .plate .guarda{margin-top:0;font-size:11px}
body.em-batalha .scene.compacta .plate.mini{padding:3px 8px}
/* o pedido de alvo: uma linha fina (era um balão de duas linhas, que empurrava o "Cancelar" pra fora da cena) */
body.em-batalha .scene.compacta .pedir-alvo{padding:3px 10px;gap:4px 8px;font-size:12px;line-height:1.3;border-width:2px;border-radius:12px}
body.em-batalha .scene.compacta .pedir-alvo .btn{padding:2px 8px;font-size:12px}

/* ---- cinco ou mais em campo, celular EM PÉ: cada Pokémon é uma COLUNA, com a placa colada no próprio sprite ----
   Os inimigos numa fileira (placa em cima, sprite embaixo) e o seu lado noutra (sprite em cima, placa embaixo): os
   sprites se encaram no meio da cena e cada placa fica a um dedo de quem ela descreve. Antes (até 14/10/2026) eram
   duas colunas — inimigos | você — com as placas empilhadas no alto e os sprites em miniatura lá no pé, longe de
   tudo: com 3×2 não dava pra dizer de quem era cada placa ("não faz sentido como está", print de quem joga).
   `.plates` e `.mons-lado` viram `display:contents`, então placa e sprite são itens da MESMA grade e caem na mesma
   coluna pela ordem — a do array nos dois (render.js monta placas e sprites do mesmo `FOES`/`AL`).
   Deitado continua o desenho de duas colunas (o bloco "celular deitado"), por isso o gatilho exclui a tela baixa. */
@media(max-width:880px) and (orientation:portrait),(max-width:880px) and (min-height:561px){
  body.em-batalha .scene.compacta.denso .side{display:grid;grid-auto-columns:minmax(0,1fr);grid-template-rows:auto auto;column-gap:6px;row-gap:0;align-items:end}
  body.em-batalha .scene.compacta.denso .plates,body.em-batalha .scene.compacta.denso .mons-lado{display:contents}
  body.em-batalha .scene.compacta.denso .side.foe .plate{grid-row:1;align-self:end}
  body.em-batalha .scene.compacta.denso .side.foe .mon{grid-row:2}
  body.em-batalha .scene.compacta.denso .side.me .mon{grid-row:1}
  body.em-batalha .scene.compacta.denso .side.me .plate{grid-row:2;align-self:start}
  body.em-batalha .scene.compacta.denso .mon,body.em-batalha .scene.compacta.denso .mon.mini{width:auto;height:66px;margin:0;justify-self:stretch}
  body.em-batalha .scene.compacta.denso .spr,body.em-batalha .scene.compacta.denso .mon.mini .spr{width:64px;height:64px}
  body.em-batalha .scene.compacta.denso .spr.back{width:72px;height:72px}
  body.em-batalha .scene.compacta.denso .mon .pad{height:14px;left:18%;right:18%}
  /* coluna de ~110 px: o nome quebra pra linha de baixo em vez de virar "Dragon…" (numa manada o nome é QUEM é) */
  body.em-batalha .scene.compacta.denso .plate .pl-top{flex-wrap:wrap;white-space:normal;column-gap:6px;font-size:12px}
  body.em-batalha .scene.compacta.denso .plate .pl-top span:first-child{overflow:visible;overflow-wrap:anywhere}
  body.em-batalha .scene.compacta.denso .plate .pl-top span:last-child{font-size:11px;opacity:.85}
}

/* ==================== 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}
  /* o dock numa linha só (era uma pilha de 138 px numa tela de 390): o principal maior, e na ponta da mão direita */
  body:not(.em-batalha) .game:not(.cheia) #actions{flex-wrap:nowrap;padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
  body:not(.em-batalha) .game:not(.cheia) #actions > .btn.big{flex:2 1 0;padding:10px 12px}
  body:not(.em-batalha) .game:not(.cheia) #actions > .btn.ghost{flex:1 1 0}
  body:not(.em-batalha) .game:not(.cheia) #actions.em-loja{flex-wrap:wrap}
  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.cena-alta{position:fixed}      /* a cena daqui é sempre presa (lateral): `cena-alta` é coisa do retrato */
  /* grupo em campo: a coluna da cena alarga (5–6 placas com etiquetas não cabem em 300 px) e a dos golpes encolhe */
  body.em-batalha .game:has(.scene.compacta){--cena:min(47vw,430px)}
  /* e a cena do grupo vira DUAS colunas — inimigos à esquerda, você à direita, cada uma com as placas em cima e os
     sprites embaixo: a altura é o que falta aqui, e a largura sobra */
  body.em-batalha .scene.battle.compacta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;column-gap:8px;row-gap:3px;padding:6px 8px}
  body.em-batalha .scene.compacta .turno-bar{padding:2px 6px 2px 12px}
  body.em-batalha .scene.compacta .turno-bar,body.em-batalha .scene.compacta .fila-turno{grid-column:1/-1;grid-row:1}
  body.em-batalha .scene.compacta .side.foe{grid-column:1;grid-row:2;flex-direction:column;align-items:stretch;height:100%}
  body.em-batalha .scene.compacta .side.me{grid-column:2;grid-row:2;flex-direction:column-reverse;align-items:stretch;justify-content:flex-end;height:100%}
  body.em-batalha .scene.compacta .pedir-alvo{grid-column:1/-1;grid-row:3}
  body.em-batalha .scene.compacta .plates{flex:none;width:100%;max-width:none}
  body.em-batalha .scene.compacta .mons-lado{justify-content:center;flex:none}
  body.em-batalha .scene.compacta .side.foe .foe-mons{padding-left:0}
  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))}
/* Painel estreito (coluna lateral encolhida em janela média, ou puxada pelo jogador): o sprite e o nome diminuem em
   vez de cortar o ♂/♀ na borda. A pergunta é a largura do PAINEL, não a da tela. */
#p-ficha{container-type:inline-size}
.ficha-me > div{min-width:0}
.ficha-me h2{overflow-wrap:anywhere}
@container (max-width:330px){
  .ficha-me{gap:10px}
  .ficha-me img{width:72px;height:72px}
  .ficha-me h2{font-size:21px}
}
.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)}
table.stats tfoot td{border-top:2px solid var(--line);font-weight:700}   /* linha de totais da ficha (Valor, Base = BST, IV, EV) */
.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}
/* Item da mochila: texto em cima, botões embaixo. Na coluna de 340 px (e no celular) os três botões tomavam 190 px e
   o nome "Full Heal ×1" quebrava em três linhas. Quando o PAINEL é largo (arrastado pro centro, ou a tela larga),
   volta pra uma linha — a pergunta é o tamanho do painel, não o da tela (container query em #p-mochila). */
#p-mochila{container-type:inline-size}
ul.bag li{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:6px 8px}
ul.bag .bag-acoes{grid-column:1/-1;justify-content:flex-start}
ul.bag .bag-acoes .btn:not([data-act="rapido"]){flex:1 1 0}
@container (min-width:480px){
  ul.bag li{grid-template-columns:30px 1fr auto}
  ul.bag .bag-acoes{grid-column:auto;justify-content:flex-end}
  ul.bag .bag-acoes .btn:not([data-act="rapido"]){flex:0 0 auto}
}
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}
/* Celular: as 11 rotas viravam 8 linhas de chips (330 px) antes de qualquer informação. Uma fileira que rola de
   lado; o chip da rota atual é centralizado por render.js, e a máscara nas pontas avisa que há mais. */
@media(max-width:880px){
  .zones{flex-wrap:nowrap;overflow-x:auto;margin:12px -4px;padding:2px 4px 8px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 24px),transparent)}
  .zones::-webkit-scrollbar{display:none}
  .zones .chip{flex:none;white-space:nowrap;scroll-snap-align:center;padding:8px 14px}
}
.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%} }
/* Celular: os atalhos viram UMA fileira que rola de lado. Eram 13 botões em 4-5 linhas — um quarto da tela de
   cabeçalho antes do conteúdo da tela (a criação de jornada abria com o título a 330 px do topo). A máscara nas
   pontas avisa que há mais pra rolar; sem rolagem visível, os que caem fora da tela pareceriam não existir. */
@media (max-width:720px){
  .nav-atalhos{flex:1 1 100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .nav-atalhos::-webkit-scrollbar{display:none}
  .nav-atalhos .btn{flex:none;white-space:nowrap}
}
/* ---- 📜 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} }
.dex-legenda-det{margin:2px 0 8px}
.dex-legenda-det summary{display:inline-block;cursor:pointer;color:var(--muted);font-size:13px;padding:2px 0;list-style:none}
.dex-legenda-det summary::-webkit-details-marker{display:none}
.dex-legenda-det summary::before{content:'ⓘ ';opacity:.8}
.dex-legenda-det[open] summary{color:var(--text)}
.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(108px,1fr));gap:8px}   /* 9 mapas: 9 numa linha no computador (com 120 px sobrava a Gen 9 sozinha na segunda) */
.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)}
/* Um botão cheio por tela: o Explorar do dock. Os desafios dentro da zona (Alfa, lendários, evento) usam a cor da
   própria caixa, vazados — dois amarelos cheios lado a lado disputavam qual era "o" botão. */
.chefe-box > .btn:not(.ghost){background:transparent;color:var(--text);border:2px solid var(--red)}
.chefe-box.lendarios > .btn:not(.ghost){border-color:var(--yellow);color:var(--yellow)}
.chefe-box.evento > .btn:not(.ghost){border-color:#b45cff}
.chefe-box > .btn:not(.ghost):hover:not(:disabled){background:rgba(255,255,255,.08);filter:none}
.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}
/* o log rola sozinho pro fim: a primeira linha aparece cortada pela metade, o que parece defeito. Um esmaecido de
   14 px no topo diz "tem mais pra cima" em vez de mostrar meia letra. */
.log{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16px);mask-image:linear-gradient(to bottom,transparent,#000 16px)}
.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}
/* O cartão da loja: ícone | nome ........ preço, e a descrição embaixo. O preço (₽3.000) caía na coluna do ícone, de
   30 px, e vazava por cima da descrição ("₽3.000Recupera todo o HP."). */
.loja-grid .item-btn{grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"ic nome preco" "ic desc desc";align-items:start}
.loja-grid .item-btn img{grid-area:ic}
.loja-grid .item-btn > span{grid-area:nome;min-width:0}
.loja-grid .item-btn > small:not(.item-desc){grid-area:preco;justify-self:end;font:700 13px var(--display);color:var(--yellow)}
.loja-grid .item-btn .item-desc{grid-area:desc}
.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}
.ovo-nasceu{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:18px}
/* 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}
/* ✨ Pokédex shiny: quem já apareceu brilhando. Borda dourada e um brilho de fundo — a grade inteira é de
   sprites shiny, então a cor é o que diz "esta é a outra dex" de relance. */
.dexc.brilhou{border-color:var(--yellow);box-shadow:inset 0 0 14px rgba(255,203,61,.18)}
.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}

/* ============ ⚔ Saga — o mundo andável (saga-cena.js) ============
   A TELA DE JOGO do modo. Quando o mundo está ativo, `.game` ganha a classe `mundo` (render.js) e tudo aqui é
   escopado nela: o mapa ocupa a tela inteira abaixo da barra do topo, e os painéis de sempre (ficha, mochila,
   registro…) deixam de ficar lado a lado e viram GAVETAS abertas pelos botões redondos. `.game` só existe na
   tela do jogo, então ir pra Carreira ou pra Conta não precisa "desligar" nada.

   Tudo é medido em `--u`: quantos pixels de tela vale um pixel da arte (1 no celular, 2 em tela larga — sempre
   inteiro, que é o que mantém o pixel art nítido). Uma casa do mapa tem 32 px de arte; o sprite de um Pokémon,
   96 — os dois na MESMA escala, de propósito. Os endereços das imagens ficam aqui (e não em variável vinda do
   JS) porque `url()` relativo só é previsível quando escrito na própria folha de estilo. */
/* `cheia` = a Saga está na tela própria dela, seja no mapa (`mundo`) ou na luta (`luta`). O que as duas têm em
   comum mora aqui: nada rola a página, os painéis de sempre somem e voltam como GAVETAS (`data-gaveta`). */
.game.cheia{padding:0;max-width:none}
.game.cheia .zona,.game.cheia .stage{display:contents}
.game.cheia .zona.vazia::before{content:none}
.game.cheia .divisor,.game.cheia .painel{display:none}
.game.cheia .painel .painel-botoes,.game.cheia .painel .alca{display:none}
.game.cheia .painel .painel-cab{cursor:default}
.game.cheia .painel .painel-corpo{display:block!important;height:auto!important;resize:none;overflow:visible}
/* gaveta: o painel escolhido desliza da direita, por cima de tudo */
.game.cheia[data-gaveta="ficha"] .painel[data-painel="ficha"],
.game.cheia[data-gaveta="aliados"] .painel[data-painel="aliados"],
.game.cheia[data-gaveta="mochila"] .painel[data-painel="mochila"],
.game.cheia[data-gaveta="missoes"] .painel[data-painel="missoes"],
.game.mundo[data-gaveta="log"] .painel[data-painel="log"]{display:block;position:fixed;top:var(--saga-topo,56px);right:0;bottom:0;width:min(440px,88vw);z-index:8;overflow:auto;border-radius:14px 0 0 0;box-shadow:-12px 0 30px #0009;animation:saga-gaveta .18s ease-out}
.game.mundo[data-gaveta="log"] .painel[data-painel="log"] .painel-corpo{display:flex!important;min-height:60vh}
@keyframes saga-gaveta{from{transform:translateX(24px);opacity:0}}
.saga-scrim{display:none;border:0;background:#0008;cursor:pointer}
.game.cheia[data-gaveta] .saga-scrim{display:block;position:fixed;inset:var(--saga-topo,56px) 0 0 0;z-index:7}

/* ---- o MAPA ---- */
.game.mundo{display:block}
.game.mundo #actions{display:none}
.game.mundo #scene{position:fixed;left:0;right:0;bottom:0;top:var(--saga-topo,56px);z-index:5;padding:0;border:0;border-radius:0;min-height:0;overflow:hidden;background:#0d0b12}
/* a loja (aberta pelo mercador) cobre a tela, como uma página */
.game.mundo.loja #actions{display:block;position:fixed;inset:var(--saga-topo,56px) 0 0 0;z-index:8;overflow:auto;background:var(--ink);padding:16px}

/* ---- a LUTA: cena, registro e comandos na MESMA tela, sem rolar a página ----
   Em pé (celular na vertical): cena em cima, uma faixa de registro, comandos embaixo.
   Deitado ou em tela larga: cena à esquerda; à direita, o registro em cima dos comandos.
   `.game` vira a grade e os três pedaços (que moram em caixas diferentes) viram itens dela por `display:contents`
   nas caixas do meio. A cena é um contêiner de tamanho: os sprites e as placas se medem por ELA (cqw/cqh), então
   cabem tanto em 390×460 quanto em 500×330 sem uma regra por aparelho. Se a lista de golpes for comprida, quem
   rola é só o painel de comandos — nunca a página. */
.game.luta{position:fixed;inset:var(--saga-topo,56px) 0 0 0;z-index:5;display:grid;gap:0;background:var(--ink);
  align-items:stretch;      /* `.game` alinha no começo; aqui a cena PRECISA esticar — ela não tem altura própria (é contêiner de tamanho) */
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto}
/* A cena vira uma COLUNA flexível (era uma grade de 3 linhas fixas): barra da rodada e fila ocupam o que precisam,
   e os dois lados dividem o resto. Com 3 linhas fixas, a fila caía na linha do lado inimigo e ficava atrás da placa. */
.game.luta #scene{grid-area:1/1;min-height:0;margin:0;border-radius:0;border-width:0 0 2px;padding:8px 10px;gap:4px;container-type:size;overflow:hidden;
  display:flex;flex-direction:column}
.game.luta .painel[data-painel="log"]{display:block;grid-area:2/1;min-width:0;border-radius:0;border-width:0 0 2px}
.game.luta .painel[data-painel="log"] .painel-cab{display:none}
.game.luta .painel[data-painel="log"] .painel-corpo{display:flex!important;height:78px!important;min-height:0;padding:4px 6px;overflow:hidden}
.game.luta .painel[data-painel="log"] .textbox{padding:2px;border-width:2px;box-shadow:none}
.game.luta .painel[data-painel="log"] .log{padding:4px 10px;font-size:13px;line-height:1.35}
.game.luta .log p.turno{margin:4px 0 2px}
/* `display:block` + nada de esticar: o painel de comandos geral é uma coluna flexível que reparte a altura entre os
   filhos — numa coluna alta (computador), os botões da comitiva viravam ovais de 110 px. Aqui cada bloco tem a
   altura do que contém, e o que sobra fica vazio embaixo. */
.game.luta #actions{grid-area:3/1;display:block;min-width:0;max-height:47vh;max-height:47dvh;overflow:auto;padding:8px 10px;overscroll-behavior:contain}
.game.luta #actions > *{flex:none}
.game.luta .cmd-dica{display:none}                         /* a dica longa custava três linhas; o que ela diz está nos próprios botões */
.game.luta .comitiva-cmd{margin-bottom:6px}
.game.luta .saga-janela{margin-bottom:6px;padding:6px;gap:4px}
.game.luta .cmd-jrpg{min-height:46px;padding:6px 10px}
.game.luta .cmd-jrpg b{font-size:16px}
.game.luta .moves{gap:6px;grid-template-columns:1fr 1fr}      /* 2×2 mesmo no celular: os quatro golpes cabem sem rolar */
.game.luta .mv{padding:6px 10px}
.game.luta .mv b{font-size:15px}
.luta-atalhos{display:flex;gap:6px;justify-content:flex-end;align-items:center;margin-bottom:6px}
.luta-atalhos .btn.on{border-color:var(--yellow)}
/* dentro da cena, tudo se mede pelo tamanho DELA */
.game.luta .turno-bar{padding:3px 6px 3px 12px;font-size:13px;gap:6px}
.game.luta .fila-turno{padding:2px 8px}
.game.luta .fila-item{font-size:12px}
.game.luta .side{gap:8px;min-height:0;flex:1 1 0;flex-wrap:nowrap}
.game.luta .side.me{flex-wrap:nowrap}                       /* no celular a regra geral joga as placas pra baixo dos sprites: aqui ficam ao lado */
.game.luta .pedir-alvo{margin:0;font-size:13px}
.game.luta .plates{width:min(48cqw,270px);gap:4px}
.game.luta .plate{padding:5px 9px;width:min(48cqw,270px)}
.game.luta .plates .plate{width:auto}
/* A placa na luta é uma LINHA e meia, não quatro: nome e nível à esquerda, tipos à direita na mesma linha, a
   barra de HP embaixo, e Guarda/estado numa linha fina. Medido em tela: com a placa inteira, cinco Pokémon em
   campo (2 inimigos + você e 2 companheiros) não cabiam na cena e empurravam os sprites pra fora. */
.game.luta .plate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 6px;align-items:center;padding:4px 8px;border-radius:8px;box-shadow:2px 2px 0 rgba(0,0,0,.3)}
.game.luta .plate > *{grid-column:1/-1;min-width:0}
.game.luta .plate .pl-top{grid-column:1;font-size:12px;line-height:1.25;white-space:nowrap}
.game.luta .plate .pl-top span:first-child{overflow:hidden;text-overflow:ellipsis}
.game.luta .plate .pl-top span:last-child{flex:none}
.game.luta .plate .pl-tipos{grid-column:2;grid-row:1;display:flex;gap:2px;margin:0}
.game.luta .plate .pl-tipos .ty{padding:0 5px;font-size:9px;line-height:1.55}
/* O tipo que decide o turno é o do INIMIGO (é ele que diz se o golpe acerta forte). O do seu lado você conhece, e
   está na gaveta da ficha: aqui ele sai, pra o nome e o nível caberem sem "Pi…". As placas inimigas ganham a
   largura que os sprites pequenos do grupo deixam sobrar. */
.game.luta .side.me .pl-tipos{display:none}
.game.luta .side.me .plate .pl-top{grid-column:1/-1}
.game.luta .foe-plates,.game.luta .foe-plates .plate{width:min(58cqw,300px)}
.game.luta .plate .hp{gap:4px;font-size:11px;line-height:1.2}
.game.luta .plate .bar{height:6px}
.game.luta .plate .guarda{margin-top:0;font-size:11px}
.game.luta .plate .guarda b{font-size:11px}
.game.luta .plate .guarda small{display:none}
.game.luta .plate .chips{margin-top:0}
.game.luta .mon{width:clamp(84px,32cqw,170px);height:clamp(64px,27cqh,130px)}
.game.luta .spr{width:clamp(76px,28cqw,128px);height:clamp(60px,26cqh,128px)}
.game.luta .spr.back{width:clamp(84px,32cqw,150px);height:clamp(64px,29cqh,150px)}
.game.luta .mon.mini{width:clamp(46px,15cqw,84px);height:clamp(44px,18cqh,84px);margin-left:-8px}
.game.luta .mon.mini .spr{width:clamp(42px,14cqw,76px);height:clamp(40px,17cqh,76px)}
.game.luta .pad{height:clamp(12px,6cqh,30px)}
@media (min-width:900px),(orientation:landscape) and (max-height:560px){
  .game.luta{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);grid-template-rows:auto minmax(0,1fr)}
  .game.luta #scene{grid-area:1/1/3/2;border-width:0 2px 0 0}
  .game.luta .painel[data-painel="log"]{grid-area:1/2;border-width:0 0 2px}
  .game.luta .painel[data-painel="log"] .painel-corpo{height:clamp(72px,24vh,230px)!important}
  .game.luta #actions{grid-area:2/2;max-height:none}
}
@media (min-width:900px){.game.luta .painel[data-painel="log"] .log{font-size:15px}}
/* Cena GRANDE (computador): o sprite 2D de 96 px dobra de tamanho — inteiro, sem borrar. Na Saga o sprite é
   sempre o 2D (`sprites2d`), então dá pra ampliar; nos outros modos o `scale-down` existe por causa do 3D. */
@container (min-width:620px) and (min-height:480px){
  .game.luta .mon{width:230px;height:200px}
  .game.luta .spr,.game.luta .spr.back{width:192px;height:192px;object-fit:contain}
  .game.luta .mon.mini{width:112px;height:104px;margin-left:-6px}
  .game.luta .mon.mini .spr{width:96px;height:96px;object-fit:contain}
  .game.luta .plates,.game.luta .plate,.game.luta .foe-plates,.game.luta .foe-plates .plate{width:min(44cqw,340px)}
  .game.luta .plate .pl-top{font-size:14px}
  .game.luta .plate .hp{font-size:12px}
  .game.luta .plate .pl-tipos .ty{font-size:10px}
}
/* Celular DEITADO: a coluna da direita tem ~320 px de altura pra registro + comandos. Some o subtítulo de cada
   comando, o registro encolhe pra duas linhas, e os atalhos dividem a linha com a comitiva. */
@media (orientation:landscape) and (max-height:560px){
  .game.luta .painel[data-painel="log"] .painel-corpo{height:58px!important}
  .game.luta #actions{padding:6px 8px}
  .game.luta .cmd-jrpg{min-height:34px;padding:4px 10px}
  .game.luta .cmd-jrpg small{display:none}
  .game.luta .luta-atalhos{float:right;margin:0 0 4px 6px}
  .game.luta .luta-atalhos .btn{padding:4px 8px;font-size:12px}
  .game.luta .comitiva-cmd{margin-bottom:4px}
  .game.luta .cmd{padding:3px 9px;font-size:12px}
  .game.luta .saga-janela{clear:both;margin-bottom:4px;padding:4px;gap:2px}
  .game.luta .mv{padding:4px 8px}
  .game.luta .mv small:not(.pp){display:none}
}

/* Na tela de jogo a barra do topo fica compacta em QUALQUER largura: os atalhos vão pro ☰, como no celular.
   Medido em tela: no computador as duas fileiras de botões comiam 190 px — um quarto da altura do mapa.
   `:has()` porque a barra mora fora de `.game`; num navegador sem ele, a barra só continua alta. */
body:has(.game) .top{padding:8px 14px}
body:has(.game) .brand small{display:none}
body:has(.game) .brand .logo{height:38px}
body:has(.game) .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}
body:has(.game) .menu-links{display:none;position:absolute;top:calc(100% + 6px);right:10px;left:auto;width:min(360px,calc(100vw - 20px));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)}
body:has(.game) .menu-links.open{display:flex}
body:has(.game) .menu-links .top-r,body:has(.game) #conta-chip{flex-direction:column;align-items:stretch;gap:8px}
body:has(.game) .menu-links .btn{width:100%;text-align:center;padding:10px 8px;font-size:15px}
/* dois botões por linha: eram ~20 em coluna única, e o menu virava uma lista de rolagem */
body:has(.game) .menu-links{width:min(440px,calc(100vw - 20px))}
body:has(.game) .menu-links .top-r{display:grid;grid-template-columns:1fr 1fr}
@media (orientation:landscape) and (max-height:560px){
  body:has(.game) .top{padding:3px 12px}
  body:has(.game) .brand .logo{height:28px}
  body:has(.game) .burger{width:38px;height:38px}
  body:has(.game) .dinheiro{min-height:0;padding:3px 10px;font-size:15px}
}

.saga-tela{position:absolute;inset:0;overflow:hidden;--u:1;--t:calc(var(--u) * 32px);--passo:170ms;user-select:none;-webkit-user-select:none;touch-action:manipulation;background:#0d0b12}
.saga-tela.chegou{animation:saga-acender .3s ease-out}
@keyframes saga-acender{from{opacity:0}}
.saga-mundo{position:absolute;left:0;top:0;z-index:1;width:calc(var(--mw) * var(--t));height:calc(var(--mh) * var(--t));cursor:pointer;
  transform:translate3d(calc(var(--cx,0) * -1px),calc(var(--cy,0) * -1px),0);transition:transform var(--passo) linear;will-change:transform}
.saga-chao{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;image-rendering:crisp-edges;image-rendering:pixelated}
.ator,.saga-eu{position:absolute;left:0;top:0;width:var(--t);height:var(--t);pointer-events:none}
.ator{transform:translate(calc(var(--x) * var(--t)),calc(var(--y) * var(--t)))}
.ator.acima{z-index:9999!important}
/* a copa na frente de quem está atrás dela (saga-cena.posicionarMundo) e a seta de saída pela borda do mapa */
.ator.copa{transition:opacity .2s}
.ator.copa.atras{opacity:.45}
.ator.copa.vaza{opacity:.5}
.saida{position:absolute;left:30%;top:30%;width:40%;height:40%;border:solid #f6c744;border-width:0 calc(var(--u) * 4px) calc(var(--u) * 4px) 0;
  filter:drop-shadow(0 0 2px #000c);animation:saga-saida 1.4s ease-in-out infinite}
.saida.l{transform:translateX(-20%) rotate(-45deg)}
.saida.o{transform:translateX(20%) rotate(135deg)}
.saida.n{transform:translateY(20%) rotate(-135deg)}
.saida.s{transform:translateY(-20%) rotate(45deg)}
@keyframes saga-saida{50%{opacity:.4}}
.saga-tela.parado .saida{animation:none}
.saga-eu{transform:translate3d(calc(var(--ex,0) * var(--t)),calc(var(--ey,0) * var(--t)),0);transition:transform var(--passo) linear;will-change:transform}
.saga-tela.seco .saga-mundo,.saga-tela.seco .saga-eu{transition:none}

/* figuras: recortes do atlas (peça de uma casa, enfeite grande) e da folha de gente */
.peca,.prop,.gente{position:absolute;display:block;background-repeat:no-repeat;image-rendering:crisp-edges;image-rendering:pixelated}
.peca,.prop{background-image:url(../img/saga/atlas.png);background-size:calc(var(--u) * var(--aw) * 1px) auto}
.peca{left:0;top:0;width:var(--t);height:var(--t);background-position:calc(var(--ax) * var(--t) * -1) calc(var(--ay) * var(--t) * -1)}
.prop{left:calc(var(--u) * var(--dx) * 1px);top:calc(var(--u) * var(--dy) * 1px);width:calc(var(--u) * var(--w) * 1px);height:calc(var(--u) * var(--h) * 1px);
  background-position:calc(var(--u) * var(--sx) * -1px) calc(var(--u) * var(--sy) * -1px)}
.gente{left:calc(var(--u) * -16px);top:calc(var(--u) * -34px);width:calc(var(--u) * 64px);height:calc(var(--u) * 64px);
  background-image:url(../img/saga/gente.png);background-size:calc(var(--u) * 320px) auto;background-position:0 calc(var(--u) * var(--lin) * -64px);
  animation:saga-balanco 2.8s ease-in-out infinite}
/* Pokémon: o sprite de 96 px da PokéAPI na escala da arte, com os pés na casa. `--vira` espelha (−1 = olhando pra direita).
   O −46 foi medido em tela: o desenho não encosta na base do quadro de 96 px (sobram ~18), e com −60 todo mundo
   flutuava um palmo acima da própria sombra. */
.vira{position:absolute;left:calc(var(--u) * -32px);top:calc(var(--u) * -46px);width:calc(var(--u) * 96px);height:calc(var(--u) * 96px);transform:scaleX(var(--vira,1))}
.bicho{display:block;width:100%;height:100%;object-fit:contain;image-rendering:crisp-edges;image-rendering:pixelated;transform-origin:50% 88%;animation:saga-respira 2.6s ease-in-out infinite}
.sombra{position:absolute;left:10%;top:56%;width:80%;height:36%;border-radius:50%;background:#0005}
.ator .emoji{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--u) * 20px);line-height:1}
/* parado respira; andando dá um pulinho por casa; quem ronda balança; o Alfa é maior e brilha */
@keyframes saga-respira{50%{transform:scale(1.02,.97)}}
@keyframes saga-balanco{50%{transform:translateY(calc(var(--u) * -1px))}}
@keyframes saga-pulo{45%{transform:translateY(calc(var(--u) * -6px))}}
@keyframes saga-ronda{0%,100%{transform:translateX(calc(var(--u) * -3px))}50%{transform:translateX(calc(var(--u) * 3px))}}
@keyframes saga-alfa{0%,100%{transform:scale(1.25)}50%{transform:scale(1.3,1.21)}}
.saga-mundo.andando .saga-eu .bicho{animation:saga-pulo var(--passo) ease-out infinite}
/* o seu vulto: por cima de tudo, quase transparente — é o que aparece quando você passa atrás de uma copa */
.saga-eu.vulto-de-mim{z-index:9998;opacity:.38}
.ator.npc:nth-of-type(odd) .bicho{animation-delay:-1.1s}
.ator.npc:nth-of-type(3n) .bicho{animation-delay:-.5s}
.bicho.vulto{filter:brightness(0) opacity(.72);animation:saga-ronda 1.6s ease-in-out infinite}
.bicho.alfa{filter:drop-shadow(0 0 5px #f6c744);animation:saga-alfa 2.2s ease-in-out infinite}
.saga-tela.parado .bicho,.saga-tela.parado .gente,.saga-tela.parado .marca,.saga-tela.parado .cintila{animation:none}
/* balão em cima de quem tem algo pra você: ! missão nova · ? missão que anda aqui · ⚔ luta */
.marca{position:absolute;left:50%;top:calc(var(--u) * -52px);min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#f6c744;color:#1b1b2f;
  font:800 13px/20px var(--display);text-align:center;box-shadow:0 2px 0 #0007;transform:translateX(-50%);animation:saga-marca 1s ease-in-out infinite}
.marca.entrega{background:#7ee081}
.marca.perigo{background:#e5484d;color:#fff}
.gente ~ .marca{top:calc(var(--u) * -48px)}
.cintila{position:absolute;left:38%;top:-46%;font-size:calc(var(--u) * 13px);animation:saga-marca 1.3s ease-in-out infinite}
@keyframes saga-marca{50%{transform:translate(-50%,-4px)}}

/* o nome do lugar, quando você chega. Sem animação (movimento reduzido) simplesmente não aparece. */
.saga-letreiro{position:absolute;left:50%;top:20%;z-index:3;pointer-events:none;opacity:0;transform:translateX(-50%);text-align:center;white-space:nowrap;
  padding:10px 26px;background:#0b0a12d9;border:2px solid #f6c74488;border-radius:12px;color:#fff;animation:saga-letreiro 2.8s ease-in-out forwards}
.saga-letreiro b{display:block;font:700 22px var(--titulo,var(--display));color:var(--yellow)}
.saga-letreiro small{font:500 13px var(--display);opacity:.85}
@keyframes saga-letreiro{0%{opacity:0;transform:translate(-50%,8px)}12%,74%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}
/* clarão antes da luta e escurecer ao trocar de mapa (opacidade 0 de base: sem animação, não cobre nada) */
.saga-tela.clarao::after,.saga-tela.apagar::after{content:'';position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0}
.saga-tela.clarao::after{background:#fff;animation:saga-clarao .5s steps(5) forwards}
.saga-tela.apagar::after{background:#000;animation:saga-apagar .2s ease-in forwards}
@keyframes saga-clarao{20%{opacity:.9}40%{opacity:.1}60%{opacity:.9}80%{opacity:.2}100%{opacity:1}}
@keyframes saga-apagar{to{opacity:1}}

/* HUD: por cima do mapa, sem roubar o toque dele (só os botões recebem clique) */
.saga-hud{position:absolute;inset:0;z-index:4;pointer-events:none;display:flex;flex-direction:column;gap:8px;padding:8px}
.saga-hud button{pointer-events:auto;cursor:pointer;color:#fff}
.hud-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.hud-equipe{display:grid;gap:4px}
.hud-mon{display:flex;align-items:center;gap:6px;min-width:128px;padding:3px 12px 3px 4px;background:#0b0a12cc;border:1px solid #ffffff22;border-radius:999px;color:#fff;font:600 12px var(--display)}
.hud-mon img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.hud-mon span{display:grid;gap:1px;min-width:0}
.hud-mon b{display:inline-block;max-width:104px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.hud-hp{display:block;height:5px;border-radius:3px;background:#ffffff26;overflow:hidden}
.hud-hp i{display:block;height:100%;background:#7ee081}
.hud-mon.mal .hud-hp i{background:#e5484d}
.hud-local{padding:5px 12px;background:#0b0a12cc;border:1px solid #ffffff22;border-radius:12px;color:#fff;font:700 13px var(--display);text-align:right}
.hud-local small{display:block;font-weight:500;font-size:11px;opacity:.75}
/* 🗺 a carta da região (saga-cena.htmlCarta): o letreiro do lugar é o botão que a abre. Miniaturas em SVG — os
   traços usam `non-scaling-stroke` porque cada região tem um tamanho em casas e o desenho estica pra caber. */
.box:has(.saga-carta){max-width:780px}
/* as setas de folhear região ficam lado a lado; o Fechar, numa linha só dele, embaixo */
.box:has(.saga-carta) .choices{grid-template-columns:1fr 1fr}
.box:has(.saga-carta) .choices .btn:not(.ghost){grid-column:1/-1;order:1}
.box:has(.saga-carta) .choices .ghost{padding:8px 10px;font-size:14px}
.saga-carta{text-align:left}
.saga-carta h3{margin:0;font:700 20px var(--titulo,var(--display))}
.saga-carta > p{margin:2px 0 8px}
.carta{display:block;width:100%;height:auto;max-height:50vh;max-height:50dvh;background:#0e0c18;border:2px solid var(--line);border-radius:12px;shape-rendering:crispEdges}
.carta-borda{fill:none;stroke:#ffffff55;stroke-width:1.5px;vector-effect:non-scaling-stroke}
.carta-lugar.aqui .carta-borda{stroke:var(--yellow);stroke-width:2.5px}
.carta-fechado{fill:#1b1830;stroke:#6a64a0;stroke-width:1.5px;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;shape-rendering:auto}
.carta-via{stroke:#f6e7a1;stroke-width:2px;stroke-dasharray:2 5;stroke-linecap:round;vector-effect:non-scaling-stroke;shape-rendering:auto}
.carta-porta{fill:var(--yellow);stroke:#0e0c18;stroke-width:1px;vector-effect:non-scaling-stroke;shape-rendering:auto}
.carta-selo circle{fill:#0e0c18dd;stroke:#ffffff88;stroke-width:1.5px;vector-effect:non-scaling-stroke;shape-rendering:auto}
.carta-selo text{fill:#fff;font-family:var(--display);font-weight:700;text-anchor:middle;dominant-baseline:central}
.carta-eu{fill:#ff5d6c;stroke:#fff;stroke-width:2px;vector-effect:non-scaling-stroke;shape-rendering:auto;transform-box:fill-box;transform-origin:center;animation:carta-eu 1.2s ease-in-out infinite}
@keyframes carta-eu{50%{transform:scale(1.7);opacity:.55}}
.carta-legenda{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 14px;margin:10px 0 6px;padding:0;list-style:none;font-size:14px}
.carta-legenda b{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:4px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);font:700 12px var(--display)}
.carta-legenda span{font-size:12px;opacity:.7}
.carta-legenda .aqui{color:var(--yellow)}
.carta-legenda .fechado{opacity:.75}
.carta-regioes{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.carta-regioes span{padding:2px 8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);font:600 11px var(--display)}
.carta-regioes .on{border-color:var(--yellow);color:var(--yellow)}
.carta-regioes .fechado{opacity:.55}
.hud-missao{animation:hud-missao-some .4s ease-in forwards;margin:0 auto auto;max-width:min(560px,100%);padding:6px 14px;background:#0b0a12cc;border:1px solid #f6c74455;border-radius:12px;font:500 13px/1.35 var(--body);text-align:left}
.hud-missao.recolhida{animation:none;visibility:hidden;pointer-events:none}
@keyframes hud-missao-some{to{opacity:0;visibility:hidden;pointer-events:none}}
.hud-missao b{margin-right:6px;color:var(--yellow);font-family:var(--display)}
.hud-missao span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hud-base{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
/* 🕹 a alavanca: segurar e arrastar anda (saga-cena.ligarAlavanca). `touch-action:none` é o que impede o dedo de
   rolar/dar zoom na página no lugar de mexer o pino. */
.joy{pointer-events:auto;position:relative;display:grid;place-items:center;width:128px;height:128px;border-radius:50%;background:#0b0a1299;border:2px solid #ffffff45;touch-action:none;cursor:grab}
.joy::before{content:'';position:absolute;inset:24%;border-radius:50%;border:2px dashed #ffffff26}
.joy-pino{width:54px;height:54px;border-radius:50%;background:#ffffffd9;box-shadow:0 3px 0 #0008;transition:transform .09s}
.joy.ativo .joy-pino{transition:none;background:var(--yellow)}
@media (pointer:fine) and (min-width:900px){.joy{opacity:.4;transform:scale(.8);transform-origin:bottom left;transition:opacity .15s}.joy:hover,.joy.ativo{opacity:.9}}
.hud-botoes{display:grid;gap:6px}
.hud-botoes button{position:relative;width:46px;height:46px;padding:0;border:2px solid #ffffff33;border-radius:50%;background:#0b0a12cc;font-size:20px;line-height:1}
.hud-botoes button.on{border-color:var(--yellow);background:#2a2440}
.hud-botoes .bolinha{position:absolute;right:-5px;top:-5px;margin:0}

/* Celular: a faixa da missão numa linha só (o texto inteiro está no 📖 Diário, que ela abre) — com duas ou três
   linhas ela cobria quem andava pro norte. */
@media (max-width:720px),(orientation:landscape) and (max-height:560px){
  .hud-missao{padding:4px 12px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hud-missao span{display:inline}
}
/* Celular DEITADO: ~400 px de altura, e a barra do site + a fileira do HUD + a faixa da missão levavam um terço.
   A barra vira só ₽ e ☰ flutuando no canto (o mapa começa no topo da tela), e o HUD vira UMA fileira: comitiva
   à esquerda (em coluna), missão no meio, o lugar encostado na barra (`--saga-topo-l` é a largura dela). */
@media (orientation:landscape) and (max-height:560px){
  body:has(.game.mundo:not(.loja)){--saga-topo:0px}
  body:has(.game.mundo:not(.loja)) .top{position:fixed;top:0;right:0;z-index:6;padding:6px;border:0;background:none}
  body:has(.game.mundo:not(.loja)) .brand{display:none}
  .saga-hud{padding:6px;gap:4px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;align-items:start}
  .hud-topo{display:contents}
  .hud-equipe{grid-area:1/1/3/2}
  .hud-missao{grid-area:1/2;margin:0 auto}
  .hud-local{grid-area:1/3;margin-right:var(--saga-topo-l,0px)}
  .hud-local small{display:none}
  .hud-base{grid-area:3/1/4/-1}
  .hud-botoes{grid-template-columns:repeat(3,auto)}
  .hud-botoes button{width:40px;height:40px;font-size:18px}
  .hud-mon{min-width:0}
  .joy{width:108px;height:108px}
  .joy-pino{width:46px;height:46px}
}
/* diário e caixa de fala (dentro do modal de sempre) */
.saga-fala{display:flex;gap:14px;align-items:flex-start;text-align:left}
.saga-fala .retrato{position:relative;flex:none;width:96px;height:96px;--u:1;--t:32px;overflow:hidden;background:var(--panel2);border:2px solid var(--line);border-radius:12px}
.saga-fala .retrato .vira{left:0;top:0;width:96px;height:96px;transform:none}
.saga-fala .retrato .gente{left:16px;top:10px;animation:none;transform:scale(1.4);transform-origin:50% 60%}
.saga-fala .retrato .bicho{animation:none}
.saga-fala .retrato .sombra{display:none}
.saga-fala .quem{font:700 17px var(--display);color:var(--yellow)}
.saga-fala p{margin:6px 0 0;line-height:1.5}
.saga-diario{text-align:left}
.saga-diario h3{margin:0 0 4px;font:700 20px var(--titulo,var(--display))}
.saga-diario p{margin:6px 0}
.saga-creditos{margin-top:14px!important;padding-top:8px;border-top:1px solid var(--line)}
@media (max-width:520px){
  .saga-fala .retrato{width:72px;height:72px}
  .saga-fala .retrato .vira{width:72px;height:72px}
  .saga-fala .retrato .gente{left:4px;top:0;transform:scale(1.05)}
  .hud-local small{display:none}
}

/* ============ 🌍 Editor de mundo (tela-editor-saga.js) ============
   Uma coluna só no celular; no computador os campos se arrumam em grade. O mapa fica num quadro que rola, e o
   canvas só "segura" o toque (touch-action:none) quando há uma ferramenta de pintar — com a ✋ ele rola normal. */
.em{display:grid;gap:12px}
.em h3{margin:14px 0 4px;font:700 17px var(--titulo,var(--display));color:var(--yellow);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.em-abas,.em-linha,.em-ferramentas{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.em-linha{margin:4px 0}
.em-sep{flex:1}
.em-id{max-width:190px}
.em-destaque{background:var(--yellow);color:#1b1b2f}
.em-aviso{padding:8px 12px;border:2px solid var(--yellow);border-radius:10px;background:var(--panel2)}
.em-ok{padding:10px 14px;border:2px solid #7ee081;border-radius:10px}
.em-paleta{display:flex;flex-wrap:wrap;gap:6px;max-height:190px;overflow:auto;padding:4px}
.em-tile{display:grid;justify-items:center;gap:2px;width:84px;padding:5px 4px;border:2px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);font:600 11px/1.2 var(--display);cursor:pointer}
.em-tile.on{border-color:var(--yellow);background:#2a2440}
.em-tile canvas{width:40px;height:40px;border-radius:4px;image-rendering:pixelated}
.em-quadro{max-height:68vh;overflow:auto;border:2px solid var(--line);border-radius:10px;background:#0d0b12}
.em-quadro canvas{display:block;max-width:none;image-rendering:pixelated;cursor:crosshair}
.em-quadro.pintando canvas{touch-action:none}
.em-inspetor{padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:var(--panel2)}
.em-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 12px;align-items:start}
.em-campo{display:grid;gap:3px;font:600 13px var(--display);min-width:0}
.em-campo.largo{grid-column:1/-1}
.em-campo.curto{display:flex;align-items:center;gap:8px}
.em-campo small{font-weight:400}
.em-campo textarea,.em #em-saida{width:100%;font:14px/1.45 var(--body)}
.em #em-saida{font:12px/1.4 ui-monospace,monospace}
.em-mini{display:inline-flex;align-items:center;gap:4px;font:600 13px var(--display)}
.em-num{width:78px}
.em-tam{display:inline-flex;align-items:center;gap:2px;margin-right:8px;white-space:nowrap}
.em-regras{display:grid;gap:5px;margin:8px 0;padding:8px 10px;border-left:3px solid var(--line)}
.em-regra{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.em-regra > span{font:600 13px var(--display);min-width:150px}
.em-cartao{display:grid;gap:6px;margin:8px 0;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:var(--panel2)}
.em-cartao.fundo{background:var(--panel)}
.em-ficha{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.em-ficha .em-grade{flex:1;min-width:240px}
.em-problemas{display:grid;gap:6px;padding:0;list-style:none}
.em-problemas li{padding:8px 10px;border-radius:8px;background:var(--panel2);border-left:4px solid var(--yellow)}
.em-problemas li.erro{border-left-color:#e5484d}
.em-teste{position:relative;height:min(70vh,640px);border-radius:12px;overflow:hidden;border:2px solid var(--line)}
.em-teste .hud-botoes button[data-act="saga-gaveta"],.em-teste .saga-scrim{display:none}
.em-estado{padding:8px 12px;border:2px solid var(--line);border-radius:10px}
.em-estado p{margin:3px 0}
.em-log{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);max-height:180px;overflow:auto}