/* PokéReino — folha de estilo única */

:root{
  --bg:#0f1420; --panel:#19203033; --card:#1a2130; --card2:#151b28;
  --line:#2a3348; --text:#e6ebf5; --muted:#8b95ab;
  /* 📝 O FUNDO DE CAMPO DIGITÁVEL É UMA FICHA (v3.232), e não uma cor
     escrita dentro da regra do `input`. A razão está no comentário do
     `.pnl`, lá embaixo: superfície que não acompanha o tema devolve as
     fichas e o componente inteiro continua falando em `var()`. Enquanto
     este fundo era `#fff` na mão, ele era a única coisa dentro dessas
     superfícies que a devolução não alcançava — e o que a pessoa digitava
     saía branco no branco. */
  --campo:#0f1420;
  /* ✨ OS DOIS REALCES (v3.233) — o fundo de «aqui tem algo para fazer»
     (verde) e o de «é este que a loja quer vender» (âmbar). Eram três
     cores escritas na mão em três telas, e DUAS DELAS ERAM VERDES
     DIFERENTES para o mesmo significado: `#101b14` na missão e `#12251c`
     no degrau. Nenhuma tinha contrapartida no tema claro, e lá o cartão
     ficava quase preto com a tinta escura por cima — 1,0 de contraste no
     título do degrau, 1,1 no da missão, onde o mínimo legível é 4,5.
     Como ficha, a diferença entre os temas mora num lugar só, e o verde
     volta a ser um verde. */
  --realce-bom:#101b14; --realce-ouro:#1e1a10;
  --accent:#3b82f6; --good:#4ade80; --warn:#facc15; --bad:#f87171;
  --radius:12px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background-image:radial-gradient(900px 500px at 15% -5%,#1d2a45 0%,transparent 60%),
                   radial-gradient(700px 400px at 95% 0%,#2a1d3f 0%,transparent 55%);
  background-attachment:fixed;
}
a{color:inherit}

/* 🖼️ COMO O NAVEGADOR REDIMENSIONA IMAGEM (mudou na v3.243).
   ==========================================================================
   Esta linha já foi `pixelated`, e estava certa enquanto TODO desenho do jogo
   era pixel art de 96 pixels: ampliar pixel art com suavização borra o que
   era para ser quadrado.

   A arte própria do dono é 3D LISA, em alta — e nela o `pixelated` faz o
   contrário: serrilha a borda de graça. Medi as duas, com o mesmo Charizard,
   numa caixa de 84px: com `pixelated` a asa sai escadinha, com `auto` sai
   limpa. Como a arte própria vence o acervo e vai cobrindo o jogo espécie por
   espécie, a regra da CASA passa a ser a dela.

   ⚠️ O QUE ISSO CUSTA, e é honesto dizer: as espécies que ainda vêm do acervo
   de fora são pixel art, e num lugar só elas pioram — o cartaz do raro, que
   abre a 300px e agora suaviza em vez de manter o quadrado. É temporário: ele
   some conforme a arte própria chega. Quem quiser o contrário troca esta
   palavra por `pixelated` e pronto — não há segunda cópia desta regra. */
img{image-rendering:auto}

/* ====================================================================
   🙈 `hidden` QUER DIZER ESCONDIDO — e não queria (v3.169)
   ====================================================================
   💥 O DEFEITO, e ele é do tamanho do jogo inteiro:

   O navegador esconde `<div hidden>` com uma regra da FOLHA DELE, `[hidden]
   {display:none}`. Qualquer `display:` escrito nesta folha ganha dela — não
   por especificidade, mas porque estilo de autor vence estilo do navegador,
   sempre. Então `.andmenu{display:flex}` fazia `menu.hidden = true` não
   esconder NADA: o menu de quem está perto não fechava nem no ✖, nem clicando
   fora, nem no Esc — três saídas escritas, nenhuma funcionando.

   E ele não estava sozinho: `.btn{display:inline-block}` deixava o «➕
   adicionar mais uma criatura» na tela mesmo quando não havia mais nenhuma
   caixa para abrir — um botão que, ao ser clicado, não fazia nada.

   Já havia QUATRO consertos avulsos deste mesmo defeito espalhados pelo
   projeto (`.cb-n[hidden]`, `.andbicho[hidden]`, `.andmira[hidden]`,
   `.ofbolha[hidden]`). Quatro cópias de uma regra é o sinal de que ela nunca
   foi uma exceção: era a regra, escrita quatro vezes e faltando na quinta.

   🔨 O `!important` É O CERTO AQUI, e é a única vez que ele aparece nesta
   folha. `hidden` não é uma sugestão de estilo: é o elemento dizendo que não
   está na página. Uma regra de layout que o contradiz é um erro por
   definição — e o `!important` é o que faz esse erro ser impossível em vez de
   ser pego um a um, tela por tela, seis meses depois. */
[hidden]{display:none !important}

/* ---------------------------------------------------------------- topo */
.topbar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px 22px; background:#141a27ee; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20; backdrop-filter:blur(6px);
}
.brand{font-weight:800; letter-spacing:.4px; text-decoration:none; display:flex; align-items:center; gap:9px; font-size:17px}
/* A MARCA EM IMAGEM (v3.00). Ela é quase quadrada, e o letreiro dentro dela
   ocupa um terço da altura — a 40px vira borrão. Por isso ela vem a 54px, e a
   barra APERTA o respiro vertical em vez de crescer os 19px inteiros: 12+54+12
   seriam 78px fixos no topo de toda tela, e a barra é a única coisa da página
   que ninguém consegue rolar para fora do caminho. */
.topbar.com-marca{padding-top:7px; padding-bottom:7px}
.brand img{height:54px; width:auto; display:block; filter:drop-shadow(0 2px 8px #0008)}
@media (max-width:720px){
  /* No telefone a barra quebra em duas linhas e cada pixel de altura aparece
     duas vezes. A marca encolhe para caber junto dos números. */
  .brand img{height:38px}
  .topbar.com-marca{padding-top:6px; padding-bottom:6px}

  /* ======================================================================
     ⚔️ NA TELA DE LUTA A BARRA DESGRUDA (v3.209)
     ======================================================================
     💥 O DEFEITO, relatado por quem estava testando: «a barra superior fica
     cobrindo a batalha». E é literal — medido num telefone de 390px:

       barra do site  0..144   (ela QUEBRA EM TRÊS LINHAS nesta largura)
       faixa do bônus 144..224
       arena          247..443
       golpes         706..773   ·   página 1035  ·   tela 757

     Para alcançar os golpes é preciso rolar 278px. A barra é `sticky`, então
     ela FICA — e passa a ocupar 0..144 de uma arena que naquele momento está
     em −31..165. Sobram 21 pixels de luta à vista. O jogador ataca às cegas.

     ⚠️ E O COMENTÁRIO LOGO ACIMA JÁ DIZIA ISTO, desde a v3.00: «a barra é a
     única coisa da página que ninguém consegue rolar para fora do caminho».
     Escrito como justificativa para ela ser magra; era, o tempo todo, a
     descrição de um defeito esperando uma tela que precisasse da altura.

     🔨 O CONSERTO É ELA DEIXAR DE GRUDAR — e só onde há uma luta, e só no
     telefone. `static` não tira a barra da página nem do caminho de quem quer
     o menu: ela continua no lugar de sempre, a uma rolagem de distância para
     cima. O que ela deixa de fazer é ficar por cima do desenho.

     ⚠️ POR QUE `:has(.arena)` E NÃO UMA CLASSE NO `<body>`: a arena aparece
     na batalha (`pages/battle.php`) E no duelo/torneio (`pages/arena.php`),
     que é a mesma peça noutra tela. Uma lista de páginas no layout seria uma
     segunda cópia dessa lista — e a primeira tela nova a esquecerem nela
     voltaria a cobrir a luta, calada. A pergunta que importa não é «que página
     é esta?», é «esta tela TEM uma luta?», e é essa que o seletor faz.

     ⚠️ E A PRÉVIA DO PAINEL FICA DE FORA (`:not(.cn-previa)`): a aba Cenários
     desenha uma arena EM MINIATURA para quem ajusta a arte. Ela não é uma
     luta, é um controle — e quem está mexendo em seis campos de ajuste quer a
     barra onde ela sempre esteve.

     ⚠️ NAVEGADOR VELHO SEM `:has()` simplesmente ignora esta regra e mantém a
     barra grudada — o comportamento de antes, que é feio mas não quebra nada.
     A degradação é silenciosa DE PROPÓSITO: é layout, não é trava. */
  body:has(.arena:not(.cn-previa)) .topbar{position:static}
}
.brand .dot{width:11px;height:11px;border-radius:50%;background:linear-gradient(180deg,#f87171 50%,#f3f4f6 50%);border:1.5px solid #0b0e15}
.topstats{display:flex; gap:14px; color:var(--muted); font-size:14px; margin-left:auto; flex-wrap:wrap}

/* ===========================================================================
   🎵 O BOTÃO DO SOM (v3.211)

   Ele vive na barra do topo, entre os números e o «Sair». O controle de volume
   ao lado dele NASCE ESCONDIDO e só aparece com o som ligado: quem joga no
   mudo — que é todo mundo no primeiro minuto, porque navegador nenhum deixa
   tocar sozinho — não precisa de um deslizante inútil ocupando a fileira de
   uma barra que já quebra em três linhas no telefone.

   ⚠️ 32px DE ALVO, e não o tamanho do emoji: no celular um botão de 18px é um
   botão que erra. É a mesma medida do d-pad do mapa. */
.somcx{display:inline-flex; align-items:center; gap:8px}
.sombt{min-width:32px; height:32px; padding:0 6px; font-size:16px; line-height:1;
       background:transparent; border:1px solid transparent; border-radius:8px;
       color:inherit; cursor:pointer; font-family:inherit}
.sombt:hover{background:#212a3d; border-color:var(--line)}
/* Mudo é MAIS APAGADO, e não de outra cor: a cor nova faria o olho procurar o
   que mudou; o apagado diz «está aqui e está quieto» sem chamar ninguém. */
.sombt.mudo{opacity:.6}
.somvol{width:84px; accent-color:var(--accent); cursor:pointer}
@media (max-width:720px){
  /* No telefone o deslizante encolhe: a barra já disputa cada pixel de largura
     com seis itens, e 84px ali empurrariam mais uma linha inteira. */
  .somvol{width:60px}
}

/* ------------------------------------------------- a aba Trilha do painel */
/* Uma VAGA por lugar. A cheia ganha uma borda viva e a vazia fica apagada: a
   pergunta que se faz abrindo esta aba é «o que ainda falta?», e ela tem de se
   responder de relance, sem ler. */
.trvaga{border:1px solid var(--line); border-radius:10px; padding:11px 13px;
        margin-bottom:10px; background:var(--card2)}
.trvaga.cheia{border-color:var(--good)}
.trcab{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.trok{color:var(--good); font-size:12.5px}
.trvazia{color:var(--muted); font-size:12.5px}
.trlinha{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin:0 0 8px}
.trlinha:last-child{margin-bottom:0}
.trlinha label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted)}
.trlinha input[type=text]{width:190px}
.trlinha input[type=number]{width:80px}
/* O tocador do navegador é largo por natureza; sem teto ele empurra os botões
   para fora da linha num painel de 900px. */
.trouvir{width:100%; max-width:330px; height:34px; display:block; margin-bottom:9px}

/* --------------------------------------------------- ▩ o QR do pagamento */
/* O FUNDO BRANCO É DO CARTÃO, e não só do SVG: a moldura clara em volta do
   código é o que a câmera usa para achar as bordas. Um QR preto encostado no
   azul-escuro do jogo é um QR que o celular demora para pegar — e demora, numa
   tela de pagamento, é o jogador desistindo. */
.qrcx{display:flex; flex-direction:column; align-items:center; gap:8px;
      margin:0 0 14px; text-align:center}
.qrbox{background:#fff; padding:12px; border-radius:12px; line-height:0;
       box-shadow:0 2px 10px rgba(0,0,0,.35)}
.qrbox svg{display:block; width:230px; height:230px; max-width:100%}
.qrcx small{color:var(--muted); font-size:12.5px; max-width:34ch; line-height:1.45}
@media (max-width:420px){
  /* No telefone o código encolhe com a tela, mas nunca abaixo do que a câmera
     do próprio aparelho consegue focar de perto. */
  .qrbox svg{width:min(230px, 62vw); height:min(230px, 62vw)}
}

/* 🪜 o painel da escada: UM BLOCO POR DEGRAU (v3.219) ---------------------
   Era uma tabela de dez colunas, e o `select` de item ficava com vinte pixels
   de largura atrás de uma rolagem horizontal. Uma lista de itens de tamanho
   variável não cabe numa coluna de tabela — daí o bloco. */
.gpbloco{
  border:1px solid var(--line); border-radius:12px; background:var(--card2);
  padding:14px 16px; margin:0 0 14px;
  display:flex; flex-direction:column; gap:12px;
}
.gpbloco.novo{border-style:dashed; opacity:.92}
.gpcab{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 18px}
.gpcab label{margin:0}
.gpmarca{color:var(--muted); font-size:12.5px; margin-bottom:6px}
.gplig{display:flex; align-items:center; gap:6px; font-size:13px; margin-bottom:6px !important}
.gplig input{margin:0}

.gpgrade{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px 14px;
}
.gpgrade label,
.gpitens label{margin:0}
.gpgrade input,.gpgrade select{width:100%}
.gpgrade small{color:var(--muted); font-size:11.5px; display:block; margin-top:2px}

.gpitens,
.gpovo{
  border-top:1px dashed var(--line); padding-top:11px;
  display:flex; flex-direction:column; gap:7px;
}
.gpitcab{font-size:12.5px; color:var(--muted); font-weight:600; letter-spacing:.02em}
.gpitlinha{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.gpitlinha select{flex:1; min-width:150px; max-width:340px}
.gpsumiu{color:var(--bad); font-size:11.5px}
.gpdica{color:var(--muted); font-size:11.5px; line-height:1.5}

/* 🪜 a escada de recompensa por gasto (v3.218) ----------------------------
   A LINHA VERTICAL LIGANDO OS DEGRAUS é o que faz isto ser lido como UMA
   escada e não como catorze cartões soltos. Sem ela, a tela vira uma lista de
   prêmios e a pergunta que ela existe para responder — «onde eu estou?» — fica
   sem resposta visual. */
.esc-topo{
  display:flex; flex-wrap:wrap; gap:10px 28px; align-items:flex-end;
  margin:14px 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.esc-topo > div{display:flex; flex-direction:column; gap:2px}
.esc-topo small{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em}
.esc-topo b{font-size:22px; line-height:1.1; font-variant-numeric:tabular-nums}
.esc-falta b{color:var(--warn)}

/* 🪜 UM CARTÃO POR DEGRAU, COM O PRÊMIO EM PÍLULAS (v3.220) --------------
   Era uma linha com o trilho da escada ligando os degraus, e o prêmio numa
   frase de sete itens separados por ponto. A frase ninguém lia — parágrafo em
   vitrine é parágrafo que se pula. Em cartões com pílulas a pessoa CONTA os
   prêmios de relance, e é essa contagem que faz o degrau parecer valer a pena.

   OS CARTÕES SE ACOMODAM EM GRADE, e não em coluna: catorze degraus em coluna
   são catorze telas de rolagem para ver a escada inteira. */
.escada{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:12px; margin-top:4px;
}
.degcard{
  border:1px solid var(--line); border-radius:14px; background:var(--card2);
  padding:14px; display:flex; flex-direction:column; gap:11px;
}
/* O degrau PRONTO é o único que se destaca — é o único onde há algo a fazer. */
.degcard.pronto{border-color:var(--good); background:var(--realce-bom)}
.degcard.pego{opacity:.62}
.degcard-topo{display:flex; flex-direction:column; gap:2px}
.degcard-topo h3{
  margin:0; font-size:16px; color:var(--warn); font-variant-numeric:tabular-nums;
}
.degcard.pego .degcard-topo h3{color:var(--muted)}
.degcard-topo small{color:var(--muted); font-size:11.5px}

/* as pílulas ----------------------------------------------------------- */
.degpills{display:flex; flex-wrap:wrap; gap:7px}
.pill{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:var(--bg); border:1px solid var(--line); border-radius:999px;
  padding:5px 11px 5px 8px; font-size:12.5px; line-height:1;
}
.pill b{font-weight:600; font-variant-numeric:tabular-nums}
.pill-ic{font-style:normal; font-size:14px; line-height:1}
.pill.vip{border-color:#7a6413; background:#241f08}
.pill.vazio{color:var(--muted); font-style:italic; padding:5px 11px}
/* O ícone do item e o da moeda entram dentro da pílula sem empurrar a altura. */
.pill .ipic{vertical-align:0}
.pill .coin-ic{vertical-align:0}

/* a barra e a conta ----------------------------------------------------- */
.degcard-prog{display:flex; flex-direction:column; gap:5px; margin-top:auto}
.deg-barra{height:6px; background:var(--bg); border-radius:99px; overflow:hidden}
.deg-barra i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#22d3ee,#4ade80);
}
.degcard-conta{
  color:var(--muted); font-size:12px; text-align:right;
  font-variant-numeric:tabular-nums;
}
.degcard-conta b{color:var(--text)}

/* O botão existe DESABILITADO no degrau trancado, em vez de não existir: um
   cartão sem botão parece informativo, e um botão apagado diz «é aqui que se
   pega, quando der». */
.degcard .btn.wide{margin-top:auto}
/* O botão apagado tem de PARECER apagado. Com a cor cheia do botão normal ele
   convida ao clique que não vai acontecer — e um clique que não responde é
   lido como tela quebrada, não como «ainda não». */
.degcard .btn.wide[disabled]{
  background:var(--bg); border:1px solid var(--line); color:var(--muted);
  box-shadow:none; cursor:not-allowed; opacity:1;
}

@media (max-width:520px){
  .escada{grid-template-columns:1fr}
  .esc-topo b{font-size:19px}
}

/* 💳 o cartão, como ALTERNATIVA ao PIX (v3.215) ---------------------------
   O «ou» atravessado numa linha é o que impede a leitura errada mais cara desta
   tela: sem ele, um botão logo abaixo de um QR parece o PRÓXIMO PASSO de quem
   já copiou o código — e o jogador que pagou o PIX clica no cartão achando que
   é para confirmar, e paga duas vezes. A linha diz «escolha um». */
.cartaocx{display:flex; flex-direction:column; gap:10px; margin-top:16px}
.cartaoou{
  display:flex; align-items:center; gap:10px;
  color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.09em;
}
.cartaoou::before,
.cartaoou::after{content:""; flex:1; height:1px; background:var(--line)}
.cartaocx small{color:var(--muted); font-size:12.5px; line-height:1.5}

/* chip = número visível + cartão que abre no hover ------------------------- */
.chip{position:relative; white-space:nowrap; outline:0}
.chip-face{cursor:help; padding:3px 7px; border-radius:7px; border:1px solid transparent; display:inline-block}
.chip:hover .chip-face,
.chip:focus .chip-face{background:#212a3d; border-color:var(--line); color:var(--text)}

.tip{
  display:none; position:absolute; top:calc(100% + 9px); right:0; z-index:60;
  width:260px; padding:12px 14px; text-align:left; white-space:normal;
  background:#131a28; border:1px solid var(--line); border-radius:11px;
  box-shadow:0 14px 34px rgba(0,0,0,.5); color:var(--text); font-size:13px;
  animation:tipin .12s ease-out;
}
.chip:hover .tip,
.chip:focus .tip,
.chip:focus-within .tip{display:block}
@keyframes tipin{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

.tip:before{
  content:""; position:absolute; top:-5px; right:16px; width:9px; height:9px;
  background:#131a28; border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg);
}
.tip-h{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.8px;
       color:var(--muted); margin-bottom:9px; font-weight:700}
.tip-row{display:flex; justify-content:space-between; gap:12px; padding:3px 0; align-items:baseline}
.tip-row > span{color:var(--muted)}
.tip-row > b{font-weight:700; text-align:right}
/* .bar aqui é um <span>: sem display:block a altura não pega e vira caixa vazia */
.tip .bar{display:block; height:8px; margin-top:10px}
.tip .bar i{display:block; height:100%}
.tip-foot{display:block; margin-top:9px; padding-top:8px; border-top:1px solid var(--line);
          color:var(--muted); font-size:11.5px; line-height:1.45}

/* o último chip encosta na direita: joga o cartão para dentro da tela */
.topstats .chip:first-child .tip{right:auto; left:0}
.topstats .chip:first-child .tip:before{right:auto; left:16px}
.logout{color:var(--muted); text-decoration:none; font-size:14px}
.logout:hover{color:var(--text)}
/* O item de topo fica ao lado do «Sair», e não entre os chips: chip é número,
   isto é lugar para onde se vai. */
.topnav{color:var(--muted); text-decoration:none; font-size:14px; white-space:nowrap;
        padding:5px 10px; border-radius:8px; border:1px solid transparent}
.topnav:hover{color:var(--text); background:#212a3d; border-color:var(--line)}
.topnav.on{color:var(--text); background:#212a3d; border-color:var(--line)}
/* A CAIXA DE ENTRADA COM ALGO PARA LER. O aceso é discreto de propósito: o
   número já é o aviso, e um destaque forte no topo compete com o dinheiro e
   com o time — que são o que a pessoa veio olhar. */
.topnav.alerta{color:var(--text)}
.selo-num{background:var(--bad); color:#fff; font-size:11px; font-weight:700;
          border-radius:999px; padding:1px 6px; margin-left:3px; vertical-align:1px}

/* O CORAÇÃO DA CRIATURA INICIAL — ver `selo_inicial()` em core/helpers.php.
   Ele não muda de tamanho com o nome ao lado: numa lista de trinta cards, um
   selo que acompanha a fonte do card aparece grande num e minúsculo noutro. */
.selo-inicial{font-size:13px; margin-left:3px; cursor:help}

/* --------------------------------------------------------------- layout */
.shell{display:flex; gap:22px; max-width:1180px; margin:22px auto; padding:0 18px; align-items:flex-start}
.side{width:200px; flex:0 0 200px; position:sticky; top:74px}
.content{flex:1; min-width:0}
.content.full{max-width:460px; margin:6vh auto}
/* O RODAPÉ SÃO TRÊS LINHAS DESDE A v3.44, e não uma frase corrida: a do meio é
   a atribuição da marca, e ela precisa poder ser lida sozinha — emendada às
   outras por um «·», ela vira parte da assinatura do jogo, que é justamente o
   que ela não é. Cada `span` é um bloco; num celular estreito nenhuma delas
   quebra no meio de uma frase da outra. */
/* O RODAPÉ É UMA FAIXA desde a v3.47, e não texto solto no fim da página.
   Ele fecha a tela por baixo do mesmo jeito que a `.topbar` fecha por cima: uma
   cor de ponta a ponta e um risco na borda de dentro. Sem isso a página não
   terminava — ela só parava.
   QUEM PINTA É O `.foot` (largura toda); quem segura o conteúdo no meio é o
   `.foot-in`. As cores saem de `var()`, então a faixa clareia às 6 e escurece
   às 18 junto com o resto do jogo, sem nenhuma regra a mais.
   TRÊS COLUNAS COM DOIS FILHOS: a terceira fica vazia e do tamanho da primeira,
   e é ela que segura o texto no meio de verdade — senão a largura dos ícones
   empurraria a assinatura para a direita. */
.foot{background:#141a27; border-top:1px solid var(--line); margin-top:34px;
  color:#5c6579; font-size:13px}
.foot-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px;
  max-width:1400px; margin:0 auto; padding:22px 24px 26px}
.foot-meio{text-align:center}
.foot-meio span{display:block; line-height:1.7}
.foot .foot-marca{font-size:12px; opacity:.85}

.foot-redes{display:flex; gap:9px; align-items:center}
/* O ÍCONE É CINZA E ACENDE NA COR DA REDE no hover. Três marcas coloridas
   permanentes no canto de toda tela puxariam mais o olho que o conteúdo do
   jogo — e o rodapé é justamente onde nada deve puxar o olho. */
.foot-rede{display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  color:#5c6579; background:var(--card2); border:1px solid var(--line);
  transition:color .12s, border-color .12s, transform .12s}
.foot-rede:hover{transform:translateY(-2px)}
.foot-rede.r-whatsapp:hover{color:#25D366; border-color:#25D36655}
.foot-rede.r-discord:hover{color:#5865F2; border-color:#5865F255}
.foot-rede.r-instagram:hover{color:#E1306C; border-color:#E1306C55}

/* NA TELA ESTREITA as duas empilham, na mesma ordem e centralizadas: os ícones
   em cima, a assinatura embaixo. */
@media (max-width:900px){
  .foot-in{grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px}
}

.navgroup{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.navgroup a{padding:10px 14px; text-decoration:none; font-size:14px; border-bottom:1px solid #222a3c; color:#c3ccdd}
.navgroup a:last-child{border-bottom:0}
.navgroup a:hover{background:#212a3d; color:#fff}
.navgroup a.on{background:linear-gradient(90deg,var(--accent),#2563eb); color:#fff; font-weight:600}
/* O RÓTULO DO GRUPO DO MENU (v2.72).
   Ele era um texto cinza solto sobre o fundo da página — e desde que a página
   ganhou uma IMAGEM de fundo, «Cidade» e «Desafios» passaram a ser lidos por
   cima de mato, céu e pedra, cada um com um contraste diferente. Texto que só
   se lê em cima de metade dos pixels não é rótulo, é enfeite.

   Agora ele é uma PLAQUINHA: tem chão próprio, e por isso se lê igual em
   qualquer fundo. Ela é `inline-block` de propósito — do tamanho da palavra, e
   não da coluna: uma barra da largura toda competiria com os grupos, que são
   o que se clica. */
.navtitle{
  display:inline-block; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:1.3px; color:#dbe3f2; margin:18px 0 8px 0; padding:3px 10px;
  background:#0e1424d9; border:1px solid var(--line); border-radius:999px;
  backdrop-filter:blur(4px);
}
.teambox{margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:11px 12px}
.teambox small{color:var(--muted); font-size:12px; display:block; margin-top:6px}

/* ---------------------------------------------------------------- peças */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-bottom:18px}
.card h2{margin:0 0 4px; font-size:19px}
.card h3{margin:0 0 12px; font-size:15px; color:var(--muted); font-weight:600}
.card .sub{color:var(--muted); margin:0 0 16px; font-size:14px}
.grid{display:grid; gap:14px}
/* A FILEIRA DE CARTÕES TAMBÉM RESPIRA.
   O `.card` traz `margin-bottom:18px`, mas os cartões que moram dentro de uma
   grade levam `margin:0` (senão a margem brigaria com o `gap`) — e aí a grade
   inteira ficava colada na próxima. Era por isso que Sabotagem, Batalhas,
   Capturas e Ovos pareciam um bloco só, enquanto «Top 5» e «Informações», que
   são cartões soltos, tinham espaço entre si.
   O seletor é o FILHO DIRETO da coluna de conteúdo: grade dentro de cartão
   (o Top 5, os totais) continua sem margem nenhuma. */
.content > .grid{margin-bottom:18px}
.g2{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
/* auto-FIT, e não auto-fill: com cinco criaturas numa fileira, o que sobra é
   dividido entre elas em vez de virar coluna vazia no fim */
.g5{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
/* qualquer tabela larga rola dentro da própria caixa, nunca empurra a página */
.rolagem{overflow-x:auto}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.spread{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}

.btn{display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:9px;
     padding:10px 17px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; text-align:center}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.ghost{background:#26304a}
.btn.good{background:#16a34a}
.btn.bad{background:#b91c1c}
.btn.wide{width:100%}
.btn.sm{padding:6px 12px; font-size:13px}

/* O `textarea` ENTROU NA LISTA na v3.44, e ele nunca esteve nela.
   Todo campo de texto grande do jogo — a descrição do clã, o texto do aviso, o
   recado do suporte — vinha desde sempre com o desenho de fábrica do navegador:
   fundo BRANCO, borda cinza e letra monoespaçada, no meio de um formulário
   escuro. Ninguém notou por anos porque o bloco do tema claro lá embaixo JÁ
   citava `textarea` — quem o escreveu deu por certo que a regra base o cobria.
   O defeito só apareceu ao desenhar a tela do clã e olhar. */
input[type=text],input[type=password],input[type=email],input[type=number],
textarea,select{
  width:100%; background:var(--campo); border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:10px 12px; font:inherit
}
/* O `resize:vertical` é o único que faz sentido: o horizontal estoura o cartão. */
textarea{resize:vertical; min-height:84px; line-height:1.55}
label{display:block; font-size:13px; color:var(--muted); margin:12px 0 5px}

.flash{padding:11px 15px; border-radius:10px; margin-bottom:14px; border:1px solid; font-size:14px}
.flash.info{background:#152238; border-color:#26456f; color:#bfdbfe}
.flash.ok{background:#10261a; border-color:#1f6b3d; color:#bbf7d0}
.flash.warn{background:#2a2410; border-color:#7a6413; color:#fde68a}
.flash.bad{background:#2c1418; border-color:#7f2231; color:#fecaca}

.type{display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase;
      letter-spacing:.6px; color:#fff; padding:2px 7px; border-radius:5px; margin-right:4px;
      text-shadow:0 1px 1px rgba(0,0,0,.4)}

/* `display:block` explícito: a barra nasceu sempre dentro de um `div`, e por
   isso a linha nunca fez falta. Nos cartões do time e na faixa da tela inicial
   ela é um `span` — inline, a altura não vale, o `i` de dentro estica sozinho e
   o que era uma barrinha de 6px vira um bloco de 130. */
.bar{display:block; height:8px; background:#0d1220; border-radius:99px;
     overflow:hidden; border:1px solid #253048}
.bar i{display:block; height:100%; background:linear-gradient(90deg,#22c55e,#4ade80)}
.bar.exp i{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.bar.mid i{background:linear-gradient(90deg,#eab308,#facc15)}
.bar.low i{background:linear-gradient(90deg,#dc2626,#f87171)}

/* ====================================================================
   🌗 A LINHA QUE É VOCÊ, e a caixa de código (v3.175)
   ====================================================================
   💥 O DEFEITO: as duas eram uma COR ESCRITA À MÃO dentro da tela —
   `style="background:#1c2740"` na linha do ranking, `#0f1420` na caixa da
   chave PIX. No tema escuro ficavam certas por sorte; no claro viravam uma
   faixa escura com o texto escuro por cima, ilegível.

   Uma cor escrita dentro de uma tela é uma cor que não sabe que existe tema.
   É o mesmo defeito do `[hidden]` da v3.169 com outra roupa: a regra estava
   num lugar que a régua geral não alcança.

   Aqui elas viram CLASSE, e a classe sai dos tokens — o único lugar do
   projeto onde o tema é decidido. */
.euaqui{background:color-mix(in srgb, var(--accent) 16%, transparent)}
.euaqui > td{border-color:color-mix(in srgb, var(--accent) 28%, var(--line))}
/* A MESMA IDEIA COM A OUTRA COR: a linha que pede atenção (uma oferta
   reservada, por exemplo). Amarelo de aviso, na transparência que funciona
   nos dois temas — e nunca um hex de tema só. */
.avisada{background:color-mix(in srgb, var(--warn) 16%, transparent)}
/* 🗺️ O VAZIO EM VOLTA DO MAPA. Ele é o «lá fora», e o lá fora do jogo é o
   fundo da página — escuro no escuro, claro no claro. Um `#0b0f18` fixo aqui
   punha uma moldura preta em volta do mapa no tema claro. */
.mapabox{background:var(--bg); border:1px solid var(--line); border-radius:10px;
         overflow:auto; max-height:70vh}
/* `color-mix` não é lido por navegador velho, e aí a linha simplesmente não
   destaca — some o realce, não o texto. É o degrau certo: perder o destaque é
   perder um enfeite; perder o texto é perder a tela. */

/* 🔑 A CAIXA DE CÓDIGO — chave PIX, código do pedido. Escura no escuro, clara
   no claro, e o texto SEMPRE do token: é um código que a pessoa precisa
   copiar, e um código ilegível é a tela inteira sem função. */
.codbox{background:var(--card2); border:1px solid var(--line); border-radius:9px;
        padding:10px 12px; color:var(--text);
        font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
        font-size:13.5px; word-break:break-all}
.codbox.forte{border-color:var(--accent); font-size:20px; text-align:center;
              letter-spacing:2px; padding:12px}

/* ------------------------------------------------------------ criaturas */
.mon{background:var(--card2); border:1px solid var(--line); border-radius:var(--radius); padding:12px; position:relative}
.mon.fainted{opacity:.5}
.mon .pic{display:block; margin:0 auto; width:84px; height:84px; object-fit:contain}
.mon .nm{font-weight:700; font-size:14px; text-align:center; margin-top:2px}
.mon .lv{text-align:center; color:var(--muted); font-size:12px; margin-bottom:7px}
.mon .types{text-align:center; margin-bottom:8px}
.mon .hpline{font-size:11px; color:var(--muted); display:flex; justify-content:space-between; margin-top:4px}
.shiny-tag{position:absolute; top:7px; right:9px; font-size:13px}
/* Os selos do canto do card. Ficam juntos num só canto para não brigarem pelo
   mesmo pixel: com o shiny e o sexo posicionados à mão nos dois, um cobria o
   outro exatamente nas criaturas mais raras. */
.selos{position:absolute; top:7px; right:9px; display:flex; gap:5px;
       align-items:center; font-size:13px; line-height:1; z-index:2}
.selos .sexo{font-size:14px}
.slotnum{position:absolute; top:7px; left:9px; font-size:11px; color:var(--muted); background:#0f1420;
         border:1px solid var(--line); border-radius:5px; padding:0 5px}

.statlist{display:grid; grid-template-columns:auto 1fr auto; gap:5px 10px; align-items:center; font-size:13px}
.statlist b{font-weight:600; color:var(--muted)}

/* -------------------------------------------------------------- batalha */
.arena{background:linear-gradient(180deg,#1c3a5e,#254b32); border:1px solid var(--line);
       border-radius:var(--radius); padding:18px; position:relative; overflow:hidden}
.arena:after{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 40% at 50% 100%,rgba(255,255,255,.09),transparent 70%); pointer-events:none}
/* AQUI MORAVA O DESENHO ANTIGO DOS LUTADORES (removido na v3.32) — duas colunas de 47% lado a lado,
 * numa fileira encostada no rodapé. Ele foi substituído pelo ancoramento em
 * cantos (ver «os dois lutadores», mais abaixo), e as regras ficaram.
 *
 * E FICAR NÃO ERA INOFENSIVO. O `.fighter{width:47%}` continuava valendo por
 * cima do `inset:0` do desenho novo: `left:0` + `right:0` + `width:47%` é uma
 * conta impossível, e o CSS resolve descartando o `right`. O resultado era que
 * OS DOIS LADOS viravam a mesma coluna de 47% colada na esquerda — um por cima
 * do outro. Tudo o que o desenho novo posiciona («3% da borda direita», «placa
 * no canto de baixo») passava a valer dentro dessa meia arena, e por isso os
 * dois bichos apareciam empilhados à esquerda e a placa do jogador parava no
 * meio da tela em vez do canto.
 *
 * A lição é a de sempre com CSS morto: ele não some sozinho e não dá erro —
 * só continua ganhando de quem chegou depois e não pensou em desmarcá-lo. */
.nameplate{background:#0f1420dd; border:1px solid var(--line); border-radius:9px; padding:8px 11px; margin-bottom:8px}
.nameplate .n{font-weight:700; font-size:14px; display:flex; justify-content:space-between; gap:8px}
.nameplate .n small{color:var(--muted); font-weight:600}
/* ⚠️ O RESPIRO DA BARRA SAIU DO `style=` DE SEIS MARCAÇÕES (v3.208). Ele
   estava escrito à mão na batalha, no duelo e na prévia do painel — e um
   `style=` no elemento GANHA de qualquer regra desta folha, inclusive da
   regra do telefone que precisa apertá-lo. Uma medida de layout escrita na
   marcação é uma medida que o CSS não consegue mais ajustar. */
.nameplate .bar{margin-top:6px}
/* a barra de EXP é mais fina do que a de vida de propósito: ela é a segunda
   informação da placa, e barras do mesmo peso disputariam o olho */
.nameplate .bar.exp{height:5px}

.battlelog{background:#0d1220; border:1px solid var(--line); border-radius:var(--radius);
           padding:14px 16px; margin:16px 0; font-size:14px; min-height:70px}
.battlelog p{margin:0 0 5px}
.battlelog p:last-child{margin:0}

/* O PONTINHO DA ESPERA (v3.56). Enquanto o servidor resolve o turno, o quadro
   fica apagado e esta linha pulsa no fim do log. Sem ela, num 4G ruim a tela
   fica meio segundo parada e a pessoa bate de novo — e o anti-macro recusaria
   o segundo clique com um erro sobre uma ação que deu certo. */
.battlelog .aguarde{letter-spacing:3px; color:var(--muted); animation:pulsa 1s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:.25} 50%{opacity:1}}

.moves{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.movebtn{display:block; width:100%; text-align:left; background:var(--card2); border:1px solid var(--line);
         border-radius:10px; padding:10px 13px; color:var(--text); font:inherit; cursor:pointer}
.movebtn:hover{border-color:var(--accent); background:#1e2739}
.movebtn:disabled{opacity:.35; cursor:not-allowed}
.movebtn .mn{font-weight:700; font-size:14px}
.movebtn .mi{font-size:11.5px; color:var(--muted); display:flex; justify-content:space-between; margin-top:3px}

/* -------------------------------------------------------- abas do painel */
/* O hexágono dos atributos base, no pé do cartão «Base Status». */
/* A barrinha da calculadora vive dentro de uma célula de tabela, e ali `.bar`
   é um <span>: sem `display:block` a altura não pega e ela vira caixa vazia —
   o mesmo tropeço que o cartão do topo já tinha levado. */
.calcbar{display:block; height:7px; margin:5px 0 3px; max-width:150px}
.calcbar i{display:block; height:100%}

.radarwrap{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); text-align:center}
.radar{width:100%; max-width:300px; height:auto; overflow:visible}
.radar .rlab{fill:var(--muted); font-size:12px; font-weight:600;
             font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.radar .rval{fill:var(--text); font-size:13px; font-weight:800}

/* O selo da pokébola, ao lado do nome do adversário. */
/* O APAGADO VAI NO DESENHO, E NÃO NO SELO INTEIRO (v3.23). Era `opacity` no
   `<span>` de fora, e parecia igual — até a ficha da espécie nascer lá dentro:
   `opacity` desce para TODOS os filhos, e a ficha abria a 55%, com o log da
   batalha aparecendo através dela. Pior, `opacity` menor que 1 cria contexto de
   empilhamento próprio, então o `z-index` da ficha passava a valer só dentro do
   selo — ela ficaria por baixo de qualquer coisa da tela.
   Apagando só o `svg`, o selo continua igual e a ficha nasce opaca. */
.pokeseal{display:inline-flex; align-items:center; vertical-align:-2px; margin-right:6px;
          cursor:help}
.pokeseal svg{opacity:.55; filter:saturate(.4)}
.pokeseal.on svg{opacity:1; filter:none}
/* texto só para leitor de tela: a bola sozinha não diz nada a quem não a vê */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* a faixa do bônus de servidor: some sozinha quando o evento vence */
.eventbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
          padding:8px 18px; font-size:13.5px; color:#0b1a12;
          background:linear-gradient(90deg,#34d399,#fbbf24,#f472b6); font-weight:600}
.eventbar .evchip{background:#0b1a12cc; color:#e6ffef; border-radius:999px;
                  padding:3px 11px; font-weight:500; white-space:nowrap}
.eventbar .evchip b{color:#6ee7b7}
.eventbar small{color:#0b1a12bb}
/* a faixa do calendário: mesma forma, outra cor — para o olho separar «alguém
   ligou um bônus» de «chegou a data» sem precisar ler */
.eventbar.cal{background:linear-gradient(90deg,#818cf8,#a78bfa,#f0abfc); color:#150b24;
              text-decoration:none; cursor:pointer}
.eventbar.cal:hover{filter:brightness(1.06)}
.eventbar.cal .evchip{background:#150b24cc; color:#f3e8ff}
.eventbar.cal .evchip b{color:#c4b5fd}
.eventbar.cal small{color:#150b24bb}

/* o desenho do item nas listas: o tamanho vem da própria tag, para a mesma
   regra servir ao ícone de 22px da mochila e ao de 30px da prateleira */
.ipic{display:inline-block; width:var(--ipx,22px); height:var(--ipx,22px);
      line-height:var(--ipx,22px); font-size:calc(var(--ipx,22px) * .8);
      vertical-align:-5px; text-align:center}
.ipic img{width:100%; height:100%; object-fit:contain; image-rendering:pixelated}

/* --------------------------------------------------------------- eventos */
.evgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px}
.evmon{background:var(--card2); border:1px solid var(--line); border-radius:10px;
       padding:8px 6px; text-align:center; text-decoration:none; color:var(--text)}
.evmon:hover{border-color:var(--accent)}
.evmon img{width:56px; height:56px; object-fit:contain; image-rendering:pixelated}
.evmon b{display:block; font-size:12.5px; margin-top:2px}
.evmon small{display:block; color:var(--muted); font-size:11px}
.evrank td{padding:6px 8px}
.evrank .eu{background:#1d283a}
.evpos{display:inline-block; min-width:26px; text-align:center; font-weight:700}
.evpos.p1{color:#fbbf24} .evpos.p2{color:#cbd5e1} .evpos.p3{color:#d9a066}
.evjanela{color:var(--muted); font-size:12.5px}

/* a cesta: doze lembrancinhas, e o olho tem que achar num relance a que ainda
   está zerada — por isso o vazio fica apagado em vez de sumir */
.cesta{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px}
.ctok{background:var(--card2); border:1px solid var(--line); border-radius:10px;
      padding:8px 6px; text-align:center; opacity:.45}
.ctok.tem{opacity:1; border-color:#a78bfa55}
.ctok .ci{font-size:20px; line-height:1.1; display:block}
.ctok b{display:block; font-size:17px; margin-top:2px}
.ctok small{display:block; color:var(--muted); font-size:11px; line-height:1.25}
.oferta{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:11px 12px}
.oferta.fora{opacity:.55}
.preco{background:#0e1524; border:1px solid var(--line); border-radius:999px;
       padding:3px 10px; font-size:12.5px; white-space:nowrap}
.preco small{color:var(--muted); margin-left:5px}
.preco.falta{border-color:#7f1d1d; color:#fca5a5}

/* ===========================================================================
   AS ABAS.

   💥 O RÓTULO ENCOSTAVA NO PÉ DA ABA (v3.162), e só nas ativas.

   A altura da aba saía do EMOJI: sem `line-height` própria, a linha fica do
   tamanho da maior caixa dentro dela, e um 🎒 é bem mais alto do que a
   palavra ao lado. Isso por si só já é uma aba gorda (39px para um texto de
   13,5px), mas ainda ficaria centrada.

   O que desequilibrava era a aba ATIVA: ela é a única em `font-weight:600`, e
   um peso que a fonte da casa não tem faz o navegador cair numa fonte vizinha
   — com outra métrica. A base do texto desce dentro da mesma linha, e o
   rótulo vai para o pé da aba enquanto as vizinhas continuam no meio.

   O conserto não é empurrar o texto de volta com `padding`: isso acerta numa
   fonte e erra em todas as outras. É tirar a fonte da conta — `inline-flex`
   com `align-items:center` centra pelo BOX, e a `line-height` fixa impede que
   o emoji mande na altura. Vale para qualquer fonte, em qualquer sistema.
   =========================================================================== */
.tabs{display:flex; flex-wrap:wrap; gap:6px}
.tabs a{display:inline-flex; align-items:center; gap:5px; line-height:1.25;
        padding:8px 13px; border-radius:9px; text-decoration:none; font-size:13.5px;
        background:var(--card2); border:1px solid var(--line); color:#c3ccdd; white-space:nowrap}
.tabs a:hover{background:#212a3d; color:#fff}
.tabs a.on{background:linear-gradient(90deg,var(--accent),#2563eb); border-color:transparent;
           color:#fff; font-weight:600}
/* a aba «Mega» não é uma região: o roxo diz isso antes de a pessoa clicar */
.tabs a.mega{border-color:#6d3bab; color:#d8b4fe}
.tabs a.mega:hover{background:#241a38}
.tabs a.mega.on{background:linear-gradient(90deg,#a855f7,#7c3aed); color:#fff}
/* e a aba «Formas» em verde, para as três famílias não se confundirem */
.tabs a.forma{border-color:#2f7d63; color:#6ee7b7}
.tabs a.forma:hover{background:#12241d}
.tabs a.forma.on{background:linear-gradient(90deg,#34d399,#059669); color:#04241a}

/* tabelas do painel viram formulário: campos menores para caber */
table input[type=number],table input[type=text],table select{padding:7px 9px; font-size:13.5px}
table input[type=checkbox]{width:17px; height:17px}

/* ---------------------------------------------------------------- listas */
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.6px}
tr:last-child td{border-bottom:0}

/* 📜 O ACEITE NA TELA DE CADASTRO (v3.230). Pequeno e discreto de
   propósito — ele tem de estar legível e ao alcance, sem competir com o botão
   que a pessoa veio apertar. */
.ent-legal{margin:12px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted); text-align:center}
.ent-legal a{color:var(--muted); text-decoration:underline}
.ent-legal a:hover{color:var(--text)}

/* 🌐 A TELA DA COMUNIDADE (v3.230). Três cartões, e cada um com a cor da
   própria rede na borda de cima — é o único lugar do jogo onde uma cor de fora
   entra, e ela entra porque é assim que se reconhece o Discord e o WhatsApp
   sem ler. A cor vem do `Rede::REDES` numa variável, e não de três regras
   escritas aqui: rede nova é uma linha lá, e nenhuma aqui. */
.comgrade{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
          gap:14px; margin-bottom:18px}
.comcard{background:var(--card); border:1px solid var(--line); border-radius:14px;
         border-top:3px solid var(--marca); padding:16px 17px 17px;
         display:flex; flex-direction:column; gap:10px}
.comtopo{display:flex; gap:11px; align-items:flex-start}
.comicone{color:var(--marca); display:flex; align-items:center; flex:none; margin-top:2px}
.comtopo b{display:block; font-size:16px; line-height:1.25}
.comtopo small{display:block; color:var(--muted); font-size:12.5px}
.comtexto{margin:0; color:var(--muted); font-size:13.5px; line-height:1.55; flex:1}
.comcard .btn.wide{width:100%; text-align:center}

/* 🗺️ AS TABELAS DE «ONDE APARECE» (v3.222). A primeira coluna delas CONTA
   uma coisa — a região, a paisagem, quantas espécies dividem aquela lista — e
   num telefone o navegador espreme essa coluna até cada palavra virar uma
   linha só. Rolar de lado é melhor do que ler na vertical: a tabela mantém a
   forma que tem no computador e o dedo resolve o resto. */
.tbrolar{overflow-x:auto}
.tbrolar table{min-width:620px}
.tbrolar td:first-child{min-width:230px}

.dexcell{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:9px; text-align:center}
.dexcell img{width:64px;height:64px; object-fit:contain}
.dexcell.locked img{filter:brightness(0) opacity(.32)}
.dexcell small{display:block; color:var(--muted); font-size:11px}
.dexcell.mega{border-color:#6d3bab; background:#1b1530}
.dexcell.forma{border-color:#2f7d63; background:#12241d}
/* a célula de quem só está aqui por causa de um evento: ela some quando a
   janela fechar, e a borda avisa isso antes de a pessoa se acostumar */
.dexcell.evento{position:relative; border-color:#a78bfa; background:#1a1430}
.dexcell.evento .evtag{position:absolute; top:5px; right:6px; font-size:11px; line-height:1}

/* O SELO «💠» DA CÉLULA.
   Ele é um link IRMÃO da célula, não um link dentro dela: `<a>` dentro de `<a>`
   é HTML inválido e o navegador desmonta a célula inteira ao corrigir. O
   `.dexslot` existe só para dar a ele um canto onde se ancorar. */
.dexslot{position:relative}
.dexslot > .dexcell{height:100%}
.megaseal{position:absolute; top:6px; right:6px; z-index:2; line-height:1;
          padding:3px 6px; border-radius:8px; font-size:11px; font-weight:700;
          text-decoration:none; color:#f0e2ff; background:#3b1d6b;
          border:1px solid #7c3aed}
.megaseal:hover{background:#5b2ba6; color:#fff}

.arealist a{display:block; text-decoration:none; background:var(--card2); border:1px solid var(--line);
            border-radius:var(--radius); padding:14px 16px; margin-bottom:10px}
.arealist a:hover{border-color:var(--accent)}
.arealist .an{font-weight:700}
.arealist .ad{color:var(--muted); font-size:13px; margin-top:2px}
.arealist .locked{opacity:.45; pointer-events:none}

@media (max-width:820px){
  /* sem hover no celular: o cartão abre no toque (:focus) e ocupa a largura toda */
  .topstats{gap:8px; font-size:13px; width:100%; justify-content:space-between}
  .tip{position:fixed; top:auto; left:12px; right:12px; width:auto;
       bottom:14px; animation:none}
  .tip:before{display:none}
  .topstats .chip:first-child .tip{left:12px}

  .shell{flex-direction:column}
  /* Em coluna, com `align-items:flex-start`, o conteúdo passa a ter a largura
     do que tem dentro — e qualquer coisa larga (a chave, uma tabela grande)
     empurrava a página inteira para o lado. Preso na largura da tela, quem
     rola é só a caixa que tem rolagem própria. */
  .content{width:100%; align-self:stretch}
  .side{position:static; width:100%; flex:none; display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .navtitle{display:none}
  .moves{grid-template-columns:1fr}
}

/* ------------------------------------------------- ficha da Pokédex */
.dexcell a, a.dexcell{text-decoration:none; color:inherit; display:block}
a.dexcell:hover{border-color:var(--accent); transform:translateY(-2px)}
a.dexcell{transition:transform .12s ease, border-color .12s ease}

/* os lugares onde «dizem» que a criatura foi vista, na ficha ainda trancada */
.rumores{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px}
.rumor{display:block; text-decoration:none; color:#e6ecf7; text-align:left;
       background:var(--card2); border:1px dashed var(--line); border-radius:10px;
       padding:8px 12px; font-size:13.5px; font-weight:600}
.rumor:hover{border-color:var(--accent); border-style:solid}
.rumor small{display:block; color:var(--muted); font-weight:400; font-size:11.5px}

.dexnav{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.dexnav h2{font-size:24px}

/* 🖼️ A ficha da Pokédex usa a ILUSTRAÇÃO GRANDE, e ela é arte LISA — então
   aqui o `image-rendering: pixelated` do jogo inteiro tem de sair do caminho:
   aplicado a um desenho em alta, ele deixa a borda serrilhada de graça.
   A classe `pixel` volta atrás para as formas, que não têm ilustração e caem
   no desenho pequeno — lá o pixel quadrado é o certo. Ver pages/dex.php. */
.dexbig{width:150px; height:150px; object-fit:contain; image-rendering:auto}
.dexbig.pixel{image-rendering:pixelated}
.dexbig.locked{filter:brightness(0) opacity(.3)}

.dexhero{display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding-top:8px}
.dexhero figure{margin:0; text-align:center}
.dexhero figcaption{color:var(--muted); font-size:12px; margin-top:2px}
.dexhero-side{flex:1; min-width:220px}

/* duas colunas de verdade: com auto-fill sobrariam faixas vazias na direita */
.dexcols{display:grid; gap:14px; grid-template-columns:1fr 1fr}
@media (max-width:900px){.dexcols{grid-template-columns:1fr}}

.pill{display:inline-block; background:#26304a; border:1px solid var(--line);
      border-radius:99px; padding:2px 9px; font-size:12px; margin-right:4px}

table.tight th{width:42%; text-transform:none; letter-spacing:0; font-size:13px}

.statrow{display:flex; align-items:center; gap:10px; padding:5px 0}
.statname{width:88px; color:var(--muted); font-size:13px; flex:none}
.statval{width:38px; text-align:right; flex:none; font-variant-numeric:tabular-nums}
.statrow .bar{flex:1}
.statrange{width:82px; text-align:right; color:var(--muted); font-size:12px; flex:none}

.effrow{display:flex; align-items:center; gap:12px; padding:6px 0; flex-wrap:wrap}
.effmult{width:52px; flex:none; font-weight:800; font-size:13px}
.effmult.up{color:var(--bad)}
.effmult.down{color:var(--good)}

/* Ao receber golpes: uma faixa por multiplicador, colorida pelo RISCO.
   O rótulo tem largura fixa para os números da direita ficarem alinhados —
   é a coluna que o olho percorre de cima a baixo. */
.efftab{display:grid; gap:7px}
.effline{display:grid; grid-template-columns:152px 1fr 42px; gap:12px; align-items:center;
         padding:9px 12px; border-radius:10px; border:1px solid var(--line);
         background:var(--card2)}
.effline .rot{font-size:12px; font-weight:700; line-height:1.25}
.effline .val{font-weight:800; font-size:14px; text-align:right;
              font-variant-numeric:tabular-nums}
.effline .tipos{display:flex; flex-wrap:wrap; gap:6px}
.effline.n4{border-color:#b91c1c; background:linear-gradient(90deg,#3a1414,var(--card2) 55%)}
.effline.n2{border-color:#7f1d1d; background:linear-gradient(90deg,#2b1616,var(--card2) 55%)}
.effline.n4 .rot,.effline.n4 .val,
.effline.n2 .rot,.effline.n2 .val{color:var(--bad)}
.effline.h2{border-color:#166534; background:linear-gradient(90deg,#12271a,var(--card2) 55%)}
.effline.h4{border-color:#15803d; background:linear-gradient(90deg,#0f3020,var(--card2) 55%)}
.effline.h2 .rot,.effline.h2 .val,
.effline.h4 .rot,.effline.h4 .val{color:var(--good)}
.effline.n0{border-color:var(--accent); background:linear-gradient(90deg,#141d33,var(--card2) 55%)}
.effline.n0 .rot,.effline.n0 .val{color:var(--accent)}
@media (max-width:560px){
  /* Numa tela estreita a coluna do rótulo come os selos. As três colunas viram
     duas linhas: rótulo e número em cima (o número continua à direita, alinhado
     com os das outras faixas), selos embaixo ocupando a largura toda. As
     posições vão explícitas — deixar o grid colocar sozinho joga o número para
     uma terceira linha, com um buraco no meio. */
  .effline{grid-template-columns:1fr auto; gap:8px 12px}
  .effline .rot  {grid-area:1 / 1}
  .effline .val  {grid-area:1 / 2}
  .effline .tipos{grid-area:2 / 1 / 3 / 3}
}

.evoline{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.evoarrow{color:var(--muted); font-size:22px}
.evostep{display:block; text-align:center; text-decoration:none; color:inherit;
         background:var(--card2); border:1px solid var(--line); border-radius:10px;
         padding:10px 14px; min-width:104px}
.evostep:hover{border-color:var(--accent)}
.evostep.on{border-color:var(--accent); background:#1d2740}
/* A mega não é um degrau da linha: é um galho que sai dela, e a cor diz isso
   antes de qualquer legenda. Não tem `:hover` porque não é link — a mega não
   tem número de Pokédex para onde levar. */
.evostep.mega{border-color:#a855f7; background:#1e1730}
.evostep.mega:hover{border-color:#c084fc}
.evostep.mega b{color:#c084fc}
.evostep b{display:block; font-size:13px; margin-top:2px}
.evostep small{display:block; color:var(--muted); font-size:11px}

/* barrinha + número na mesma linha da tabela (a barra é block, precisa do flex) */
.minibar{display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:13px}
.minibar .bar{width:78px; flex:none}

/* ------------------------------------------------------- mapa de Kanto */
.mapwrap{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(262px,1fr); gap:16px; align-items:start}
@media (max-width:1000px){.mapwrap{grid-template-columns:1fr}}
.mappanel{position:sticky; top:78px; max-height:calc(100vh - 100px); overflow:auto}
@media (max-width:1000px){.mappanel{position:static; max-height:none}}

.kanto{
  /* width:100% é o que manda aqui, e a altura sai da proporção.
     NÃO devolva o min-height que existia antes: com aspect-ratio, uma altura
     mínima definida faz o navegador calcular a LARGURA a partir dela — a caixa
     virava 613px dentro de uma coluna de 526 e transbordava por cima do painel. */
  position:relative; width:100%; aspect-ratio:1000/690; border-radius:10px; overflow:hidden;
  background:
    radial-gradient(520px 340px at 22% 68%, #1d3a2e 0%, transparent 62%),
    radial-gradient(560px 360px at 62% 28%, #23324d 0%, transparent 60%),
    radial-gradient(300px 220px at 90% 78%, #1e3344 0%, transparent 62%),
    #0e1a24;
  border:1px solid var(--line);
}
/* preserveAspectRatio="none": as coordenadas do SVG acompanham a caixa, então
   a linha continua ligando exatamente os mesmos pontos dos nós, que são
   posicionados em porcentagem */
/* folga nas bordas: o rótulo de um lugar na ponta é mais largo que o pino e
   seria cortado pelo overflow da moldura. Trilha e nós ficam os dois aqui,
   então continuam usando exatamente a mesma grade. */
.kanto-palco{position:absolute; inset:8% 7%}
.kanto-trilha{position:absolute; inset:0; width:100%; height:100%}
.kanto-trilha line{stroke:#3f5570; stroke-width:3; stroke-dasharray:7 7; stroke-linecap:round}

.kanto-no{
  position:absolute; transform:translate(-50%,-50%); text-decoration:none; color:inherit;
  display:flex; flex-direction:column; align-items:center; gap:3px; width:92px;
  transition:transform .12s ease;
}
.kanto-no:hover{transform:translate(-50%,-50%) scale(1.07); z-index:5}
.kanto-no .pin{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-size:19px; background:#16a34a; border:2px solid #0b0e15;
  box-shadow:0 4px 12px rgba(0,0,0,.55);
}
.kanto-no.town .pin{background:#3b82f6}
.kanto-no.locked .pin{background:#3a4358}
.kanto-no.on .pin{outline:3px solid var(--accent); outline-offset:2px}
/* O NOME DO LUGAR É BRANCO NOS DOIS TEMAS (v2.72).
   A plaquinha dele sempre foi escura — ela mora em cima do mapa, que é escuro
   nos dois temas —, mas a COR DO TEXTO era herdada da página. No tema claro
   isso virou texto quase preto sobre chapa quase preta: o mapa ficou com os
   pinos visíveis e os nomes invisíveis, que é o pior dos dois mundos, porque
   dá para ver que há alguma coisa escrita ali.

   A sombra é a segunda rede: nas bordas do mapa a plaquinha se sobrepõe a
   trechos claros do desenho de fundo. */
.kanto-no .nome{
  font-size:11px; font-weight:700; text-align:center; line-height:1.1; color:#fff;
  background:#0d1420f0; padding:2px 6px; border-radius:6px; border:1px solid var(--line);
  text-shadow:0 1px 2px #000a;
}
.kanto-no .pin{flex:none}
.kanto-no.locked{opacity:.55}
.kanto-no .nv{font-size:10px; color:var(--bad); font-weight:700}

.trline{
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--line);
}
.trline:last-child{border-bottom:0}

/* ----------------------------------------------------------- regiões */
/* minmax generoso: o cartão tem três linhas de rótulo e valor, e abaixo de
   uns 240px o rótulo quebra no meio e o cartão fica ilegível */
.regcards{grid-template-columns:repeat(auto-fill,minmax(244px,1fr))}
.regrow{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:5px 0; border-bottom:1px solid var(--line); font-size:13.5px;
}
.regrow > span{color:var(--muted)}
.regrow > b{white-space:nowrap}
.regrow:last-of-type{border-bottom:0}

/* ------------------------------------------------------------------ o juiz */
/* A fala do juiz precisa parecer fala, não tabela: por isso a borda de citação
   à esquerda e o itálico. Ele é a única leitura fina de IV que existe para quem
   não é VIP 5, então tem que ser fácil de achar na ficha. */
.juiz{margin-top:14px; background:var(--card2); border:1px solid var(--line);
      border-left:3px solid var(--accent); border-radius:9px; padding:10px 12px}
.juiz-tit{font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.03em;
          text-transform:uppercase; margin-bottom:6px}
.juiz-fala{margin:0 0 6px; font-size:12.5px; line-height:1.5; font-style:italic}
.juiz-fala:last-child{margin-bottom:0}

/* --------------------------------------------------------------- a feira */
.mon.sel{border-color:var(--accent)}
.preco{font-size:16px; font-weight:800}
.feira-linha{display:flex; justify-content:space-between; gap:10px;
             padding:5px 0; border-bottom:1px solid var(--line); font-size:12.5px}
.feira-linha:last-child{border-bottom:0}

/* ------------------------------------------------ arrastar criatura no Box */
/* O fantasma segue o dedo/cursor. pointer-events:none é essencial: sem isso
   ele fica embaixo do ponteiro e elementFromPoint só encontraria ele mesmo. */
.fantasma-arrasto{position:fixed; width:68px; height:68px; object-fit:contain;
  pointer-events:none; z-index:999; opacity:.9; filter:drop-shadow(0 6px 12px #000a)}
.mon.arrastando{opacity:.35}
body.arrastando-algo{user-select:none; -webkit-user-select:none}
/* enquanto arrasta, o dedo não pode rolar a página junto */
body.arrastando-algo #grade-box{touch-action:none}
.caixa-alvo.alvo-livre{outline:2px dashed var(--accent); outline-offset:2px}
.caixa-alvo.alvo-cheio{opacity:.45}
.caixa-alvo.alvo-sob{outline:2px solid var(--accent); outline-offset:2px;
  background:var(--accent); color:#fff}

/* --------------------------------------------- prévia do Box e seleção */
.mon-link{display:block; color:inherit; text-decoration:none}
.mon-check{position:absolute; top:8px; left:8px; width:17px; height:17px;
  accent-color:var(--accent); cursor:pointer; z-index:2; margin:0}
.mon.marcado{border-color:var(--bad); box-shadow:0 0 0 1px var(--bad) inset}

/* A prévia flutua acima de tudo e NÃO recebe ponteiro: se recebesse, ela
   entraria embaixo do cursor e o pointerout do card dispararia sem parar. */
/* A PRÉVIA VIROU UMA FICHA DE CARTA (v2.65). Antes era um recorte da ficha
   grande: cabeçalho, duas barras e uma tabela de seis linhas. A tabela lia-se
   de cima para baixo, uma linha por vez — e comparar duas criaturas exigia
   guardar seis números de cabeça. Agora são caixas, e o formato inteiro entra
   de uma vez. Ver pages/box.php. */
.previa-flutuante{position:fixed; z-index:900; pointer-events:none;
  width:380px; max-height:calc(100vh - 28px); overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:0; box-shadow:0 14px 34px #000b}

/* A MESMA PRÉVIA, FIXA NO MEIO DA TELA (v2.71).
   É como ela abre nas Estatísticas e no Perfil. Lá a fileira de criaturas é
   curta e mora encostada na borda: presa ao cursor, a prévia nascia espremida
   contra o lado da tela e às vezes por cima da própria criatura que se estava
   olhando. No meio ela cabe inteira e abre sempre no MESMO lugar — passar de
   uma criatura para a outra deixa de mover o olho.

   A largura é `min()` porque num notebook estreito 400px fixos encostariam nas
   duas bordas. */
.previa-centro{
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(400px, calc(100vw - 28px));
  box-shadow:0 26px 70px #000d;
  animation:pvin .13s ease-out;
}
@keyframes pvin{
  from{opacity:0; transform:translate(-50%,-50%) scale(.97)}
  to{opacity:1; transform:translate(-50%,-50%) scale(1)}
}

/* O CABEÇALHO CARREGA A COR DO TIPO: é o que faz duas prévias abertas em
   sequência parecerem duas criaturas diferentes antes de qualquer leitura. */
/* O TEXTO DO CABEÇALHO É BRANCO NOS DOIS TEMAS, e não `var(--text)`.
   O fundo dele é a cor do TIPO misturada com preto — ele é escuro sempre,
   inclusive no tema claro. Herdar a cor do texto da página deixava o nome da
   criatura preto sobre marrom escuro. */
.pv-cab{display:flex; align-items:center; gap:7px; padding:8px 12px; color:#fff;
  background:linear-gradient(90deg, color-mix(in srgb, var(--pv) 55%, #000),
                                    color-mix(in srgb, var(--pv) 22%, #000));
  border-bottom:1px solid #0006}
.pv-dex{font-size:11px; font-weight:800; color:#ffffffb0; letter-spacing:.4px}
.pv-nome{font-size:14.5px; font-weight:800; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 3px #0008}
.pv-nv{font-size:11.5px; font-weight:800; background:#0007; padding:2px 8px;
  border-radius:999px; white-space:nowrap}

.previa{padding:11px 13px 12px}
.pv-corpo{display:flex; gap:11px; align-items:flex-start; margin-bottom:10px}

/* O RETRATO NUM QUADRO DA COR DO TIPO, com a mesma pokébola de fundo dos
   cartões do time: as duas telas passam a falar a mesma língua. */
/* A COLUNA DA ESQUERDA: o retrato e, embaixo dele, o registro. */
.pv-lado{flex:0 0 92px; display:flex; flex-direction:column; gap:5px}
/* O ID FICA EMBAIXO DO DESENHO (v2.72), e não na lista ao lado.
   Ele não é um ATRIBUTO da criatura — é o nome dela no banco, o número que se
   digita no painel, que se cola num chamado de suporte, que identifica QUAL
   Charizard é este entre os quatro do Box. Na lista, entre «Humor» e «Item»,
   ele era lido como mais uma característica; embaixo do retrato ele vira o que
   é: a legenda da foto. */
.pv-id{
  font-size:9.5px; font-weight:700; letter-spacing:.4px; text-align:center;
  color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--card2); border:1px solid var(--line); border-radius:6px;
  padding:2px 4px; user-select:all;
}
.pv-arte{position:relative; flex:none; width:100%; height:92px; border-radius:10px; overflow:hidden;
  background:radial-gradient(circle at 50% 42%,
             color-mix(in srgb, var(--pv) 75%, #fff2) 0%,
             color-mix(in srgb, var(--pv) 45%, #000) 78%);
  border:1px solid #0006; display:flex; align-items:center; justify-content:center}
.pv-arte img{width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 3px 5px #0007)}
/* «NFE» = ainda evolui. Três letras dizem, de relance, a única coisa que muda o
   valor de uma criatura de nível baixo. */
.pv-nfe{position:absolute; top:4px; left:4px; font-size:8.5px; font-weight:800;
  letter-spacing:.5px; background:#0b0f18cc; color:#e6ebf5; padding:2px 5px; border-radius:4px}
.pv-selos{position:absolute; top:4px; right:4px; display:flex; gap:3px; font-size:11px}

/* A CERTIDÃO. O pontilhado liga o rótulo ao valor — sem ele, o olho perde a
   linha em rótulos curtos como «OT». */
.pv-lista{flex:1; min-width:0; font-size:11.5px}
.pv-lista > div{display:flex; align-items:baseline; gap:5px; line-height:1.65}
.pv-lista span{color:var(--muted); flex:0 0 auto}
.pv-lista > div::after{content:""; order:1; flex:1 1 auto; height:0; min-width:8px;
  border-bottom:1px dotted #ffffff26; transform:translateY(-3px)}
.pv-lista b{order:2; flex:0 0 auto; font-weight:700; max-width:58%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* OS SEIS ATRIBUTOS EM CAIXAS, três por linha: em 380px cada uma tem ~115px, e
   é isso que permite a palavra da genética («fantástico») caber sem cortar. */
.pv-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:9px}
.pv-st{background:var(--card2); border:1px solid var(--line); border-radius:8px;
  padding:5px 7px; text-align:center; line-height:1.25}
.pv-st > span{display:block; font-size:9px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted); font-weight:700}
.pv-st > b{display:block; font-size:16px; font-weight:800}
.pv-st > em{display:block; font-size:10px; font-style:normal}
.pv-st > u{display:block; font-size:9px; color:var(--muted); text-decoration:none}
/* A SETA DO HUMOR fica no rótulo, e a moldura acompanha: o humor é ±10% num
   atributo e −10% noutro, e é a diferença entre dois bichos idênticos. */
.pv-seta{font-style:normal; font-size:8px}
.pv-st.sobe{border-color:color-mix(in srgb, var(--good) 45%, var(--line))}
.pv-st.sobe .pv-seta{color:var(--good)}
.pv-st.desce{border-color:color-mix(in srgb, var(--bad) 45%, var(--line))}
.pv-st.desce .pv-seta{color:var(--bad)}

.pv-linha{display:flex; justify-content:space-between; gap:10px; font-size:11.5px;
  color:var(--muted); border-top:1px solid var(--line); padding-top:7px; margin-bottom:8px}

/* TIPOS E GOLPES EM FAIXAS SEPARADAS. Juntos, eles se confundiam: as duas
   etiquetas têm a mesma forma, e o olho lia «Inseto, Voador, Leer, Quick Attack»
   como uma lista só. A separação é o rótulo — a linha de cima é o que a criatura
   É, a de baixo é o que ela FAZ. */
.pv-chips{display:flex; flex-wrap:wrap; gap:4px; align-items:center}
.pv-tipos{margin-bottom:6px}
.pv-golpes{margin-bottom:9px; padding-top:6px; border-top:1px dashed #ffffff14}
/* O `--gt` é a cor do TIPO do golpe, e quem a escreve é o PHP, etiqueta por
   etiqueta. O padrão aqui é a REDE, e não o normal: sem ele, um golpe cujo tipo
   não veio fazia o `color-mix` receber um valor vazio, e aí a regra inteira caía
   — a etiqueta perdia fundo e borda e virava texto solto no meio do cartão.
   Com a rede, o pior caso é uma etiqueta cinza entre etiquetas coloridas. */
.pv-golpe{--gt:var(--muted); font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:5px;
  background:color-mix(in srgb, var(--gt) 24%, var(--card2));
  border:1px solid color-mix(in srgb, var(--gt) 55%, transparent); white-space:nowrap}
.pv-golpe i{font-style:normal; color:var(--muted); margin-left:4px; font-size:9.5px}

/* A TABELINHA DE GENÉTICA dentro da janelinha do treinador alheio (v2.67). Ela
   só aparece para quem já vê IV — a decisão está em pages/perfil.php. */
.fgen{width:100%; border-collapse:collapse; font-size:11px; margin-top:5px}
.fgen th{color:var(--muted); font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; font-size:9px; text-align:right; padding:0 0 3px}
.fgen th:first-child{text-align:left}
.fgen td{padding:1px 0; text-align:right}
.fgen td:first-child{text-align:left; color:var(--muted)}

.pv-bl{display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  font-size:10.5px; margin:7px 0 3px}
.pv-bl span{color:var(--muted); text-transform:uppercase; letter-spacing:.5px; font-weight:700}
.pv-bl em{font-style:normal; color:var(--text); font-weight:600}
.pv-barras .bar{height:6px}
.pv-evo{margin-top:8px; font-size:11.5px; color:var(--muted)}
/* O PÉ DA PRÉVIA: de onde a criatura veio, no canto de baixo à direita.
   À direita porque é a única linha do cartão que não fala do que ela FAZ — e o
   canto oposto ao começo da leitura é onde se põe a assinatura de uma foto. A
   linha de cima separa sem pesar: uma borda inteira num balão de 300px vira
   moldura. */
.pv-pe{margin-top:9px; padding-top:7px; border-top:1px solid var(--line);
       font-size:11px; color:var(--muted); text-align:right; font-style:italic}

/* A INSÍGNIA COM O DESENHO DE VERDADE. O nome vai junto de propósito: uma
   medalha de 24 pixels sem nome é enfeite, e quem tem oito não sabe qual é
   qual. `pixelated` porque os desenhos são de 40x40 — esticados com suavização
   viram borrão. */
.insignia{display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 6px;
  border:1px solid var(--line); border-radius:999px; background:var(--card2); font-size:12.5px}
.insignia-arte{width:26px; height:26px; object-fit:contain; image-rendering:pixelated;
  font-size:16px; line-height:26px; text-align:center; flex:0 0 26px}
.insignia-grande{width:52px; height:52px; object-fit:contain; image-rendering:pixelated; flex:0 0 52px}
.insignia-grande.apagada{filter:grayscale(1) brightness(.65); opacity:.7}

/* AS INSÍGNIAS POR REGIÃO. A linha de cima diz onde e quantas de quantas; a
   de baixo mostra quais. O traço à esquerda amarra as duas sem precisar de
   caixa dentro de caixa. */
.insig-regiao{border-left:2px solid var(--line); padding-left:11px; margin-top:12px}
.insig-regiao:first-of-type{margin-top:0}
.insig-tit{display:flex; align-items:baseline; gap:8px; margin-bottom:7px; font-size:13.5px}
.insig-tit .sub{font-size:12px}

/* O TIME NA FICHA PÚBLICA: só o desenho, e a informação no balão do mouse.
   A legenda embaixo NÃO é enfeite — é o que sobra para quem não tem mouse,
   porque em toque não existe «passar por cima». Quem tem mouse não a vê. */
.time-quieto .mon{padding:14px 10px}
.time-quieto .mon .pic{width:96px; height:96px}
@media (hover: hover) and (pointer: fine) {
  .time-quieto .mon{cursor:help}
  .time-quieto .mon .nm, .time-quieto .mon .lv{display:none}
  .time-quieto .mon .pic{margin-bottom:0}
}

/* ================================================ a tela de batalha (v1.9) */
/*
 * O desenho é o do jogo clássico — quatro comandos coloridos embaixo, arena em
 * cima — só que sem a moldura de menu de 2003: cor chapada, borda arredondada e
 * espaço para respirar. A ideia é que a mão saiba onde clicar sem ler, e é por
 * isso que cada comando tem cor e posição fixas.
 */
/* A linha de HP da placa nunca teve regra própria: `.hpline` só existia dentro
   de `.mon`, então dentro da placa o número e o selo de tipo saíam colados. */
.nameplate .hpline{display:flex; justify-content:space-between; align-items:center;
  gap:10px; font-size:11.5px; color:var(--muted); margin-top:5px}
.nameplate .hpline .type{margin:0}

.arena-card{padding:0; overflow:hidden}
.arena{border-radius:0; border:0; border-bottom:1px solid var(--line); padding:22px 22px 26px}
.battlebox{padding:16px 20px 20px}

/* -------------------------------------- a arena 9:5 (v3.29)
 *
 * ELA JÁ FOI TRÊS COISAS, e as duas primeiras erraram por motivos opostos:
 *
 *   · UMA FAIXA (até a v3.27): a largura inteira da coluna por uns 240px de
 *     altura — quase 4:1. Arte quadrada perdia dois terços no corte, e céu,
 *     horizonte e chão viravam três tirinhas de 80px.
 *   · UM QUADRADO (v3.28): resolveu a arte e o cenário, e criou outro problema.
 *     Para caber num notebook junto do log e dos quatro comandos, o lado tinha
 *     de ser uns 520px — e uma tela de batalha de 520px de largura, no meio de
 *     um monitor, é estreita. Sobrava paisagem e faltava CAMPO.
 *   · 9:5 (900 × 500): é a proporção que dá largura para os dois lutadores se
 *     afastarem e altura para haver céu e chão. Ainda cabe num notebook.
 *
 * A LIÇÃO QUE FICA ESCRITA: o que a arena precisa não é «mais alta» nem «mais
 * quadrada» — é uma PROPORÇÃO FIXA. Fixa é o que permite ao cenário ser medido
 * em porcentagem (ver o bloco dos cenários) e à arte ter um tamanho recomendado
 * que encaixa sem corte. Qual proporção é gosto; que exista, não é.
 *
 * VALE PARA AS DUAS ARENAS: a da batalha e a do duelo/torneio
 * (`pages/arena.php`), que é a mesma peça noutra tela.
 */
.arena{
  aspect-ratio:9 / 5;
  /* Dentro do cartão de batalha o pai já vale a largura; solta dentro de um
     cartão comum (a arena do duelo) é ela que se limita e se centraliza. */
  width:min(var(--arena-larg, 900px), 100%);
  margin-inline:auto;
  padding:16px 18px;
  /* O CENÁRIO PINTA A CAIXA INTEIRA, e não só a área de dentro do respiro.
     O padrão do CSS é posicionar o fundo na `padding-box`: com respiro, todas
     as camadas parariam acima do rodapé e sobraria uma tira com pedaços tortos
     de quem está por baixo. Com `border-box`, o `left bottom` de cada camada é
     o rodapé de verdade — que é o que as contas de proporção do cenário
     assumem. */
  background-origin:border-box;
}
/* A COLUNA INTEIRA ACOMPANHA A ARENA. Com só ela estreitando, ficava boiando
   num cartão mais largo, e o log e os comandos brigavam com ela por atenção. */
.arena-card{max-width:min(var(--arena-larg, 900px), 100%); margin-inline:auto}

/* OS DOIS LUTADORES VOLTAM PARA A MESMA LINHA DE CHÃO (como era até a v3.27):
   é o desenho que o jogo já tinha e que a proporção larga comporta. O que muda
   em relação àquele é que agora há ALTURA — as placas sobem, os bichos crescem
   e sobra cena por cima deles. */
/* CADA LADO É ANCORADO NUM CANTO, e não empurrado por margem.
 *
 * A primeira tentativa foi manter a fileira encostada no rodapé e LEVANTAR o
 * adversário com `margin-bottom:13%`. O resultado depende da altura do bloco
 * dele (placa + bicho), então a placa parava onde calhava — quase no meio da
 * arena, que é justamente o que se queria evitar.
 *
 * Ancorando, não há conta: a placa do adversário encosta no topo, a sua encosta
 * no rodapé, e o que estica ou encolhe é a CENA entre as duas. Vale em qualquer
 * largura e com qualquer altura de placa. */
/* A CAIXA DOS LUTADORES É A ARENA INTEIRA, e não a arena menos o respiro.
   Com `inset:16px 18px`, «pés a 20%» queria dizer 20% de uma caixa 32px mais
   baixa, mais 16px — ou seja, 23,3% da arena. O painel diz «% do rodapé», e a
   pessoa mede o horizonte da arte dela contra a ARTE, não contra uma caixa
   invisível. Quem precisa do respiro são as placas, e elas o pedem por conta. */
.arena .fighters{position:absolute; inset:0; z-index:2; display:block}

/* CADA LADO OCUPA A CAIXA INTEIRA, e dentro dele a placa e o bicho são
 * posicionados um independente do outro.
 *
 * Foi assim que a placa do adversário conseguiu encostar no topo enquanto o
 * bicho dele fica lá embaixo com os pés no chão: no mesmo fluxo, mexer num
 * arrastava o outro, e a placa parava onde calhasse.
 *
 * E os dois lados ocupando a caixa inteira é o que faz as porcentagens serem %
 * DA ARENA — «o bicho tem 16% da largura», «os pés a 38% do rodapé» —, que é o
 * único jeito de o painel oferecer números que significam alguma coisa para
 * quem os digita. Com cada lado valendo 47%, «16%» seria 16% de uma metade.
 *
 * O PREÇO É O CLIQUE: duas camadas do tamanho da arena, uma por cima da outra,
 * e a de cima roubaria o rato da de baixo — inclusive da pokébola do adversário,
 * que abre a ficha da espécie. Por isso a camada não recebe clique, e as duas
 * peças que interessam o recebem de volta. */
.arena .fighter{position:absolute; inset:0; pointer-events:none}
.arena .fighter .nameplate, .arena .fighter img{pointer-events:auto}
.arena .fighter .nameplate{position:absolute; width:47%; margin:0}
.arena .fighter.foe .nameplate{top:16px; left:18px}
.arena .fighter.you .nameplate{bottom:16px; right:18px}

/* A POSIÇÃO E O TAMANHO DOS DOIS SÃO AJUSTÁVEIS NO PAINEL (aba Cenários), e os
 * valores escritos aqui são o padrão de fábrica.
 *
 * O `--adv-base:38%` não é um número solto: é a linha do horizonte dos três
 * cenários desenhados — o asfalto começa a 38%, o piso do ginásio também, e o
 * chão do mato fica na mesma faixa. Com os pés ali o adversário fica em pé no
 * fundo da cena em vez de flutuar no céu.
 *
 * E É EXATAMENTE POR ISSO QUE ELES SAÍRAM DO CSS: quem puser arte própria tem
 * outro horizonte, e o lugar certo dos pés passa a depender do desenho que ele
 * escolheu. Um número no CSS obrigaria a me chamar a cada arte nova.
 *
 * A ALTURA DIFERENTE ENTRE OS DOIS é o que dá profundidade: na mesma altura,
 * eles viram dois adesivos colados no mesmo plano. */
/* O PISO EM PIXEL É A REDE DE SEGURANÇA: numa janela estreita, 16% de 340px dá
   um bicho de 54px — menor do que ele era antes de a arena crescer. 96px é o
   tamanho em que o desenho ainda se lê, e o `max()` faz o ajuste do painel valer
   em tela grande sem sumir com ele na pequena.

   ELE É UMA VARIÁVEL, e não o número escrito duas vezes, por causa da prévia do
   painel: lá a arena é uma miniatura, e um piso de 96px fixo faria a prévia
   mostrar um bicho MAIOR do que o número escrito — mentindo exatamente onde a
   pessoa está olhando. A prévia encolhe o piso na mesma proporção em que
   encolheu a arena. Ver `.cn-previa`. */
.arena{--bicho-min:96px}  /* ajustável no painel desde a v3.31 */
.arena .fighter img{position:absolute; height:auto; display:block}
.arena .fighter.foe img{
  bottom:var(--adv-base, 38%); right:var(--adv-lado, 3%);
  width:max(var(--bicho-min, 96px), var(--adv-tam, 16%));
}
.arena .fighter.you img{
  bottom:var(--vc-base, 17%); left:var(--vc-lado, 3%);
  width:max(var(--bicho-min, 96px), var(--vc-tam, 16%));
  transform:scaleX(-1);
}
/* ==========================================================================
   📱 A ARENA DO TELEFONE (v3.208) — a placa parou de cobrir o bicho.

   💥 O DEFEITO, relatado por quem estava testando: «na hora da batalha não vê
   os pokémon direito». A suspeita era a barra do site; a medida disse outra
   coisa. Num iPhone de 390px a arena tem 364 de largura e, por causa do 9:5,
   SÓ 202px DE ALTURA. Dentro dela cabiam:

     · duas placas de 75px (nome + barra + linha de HP), uma encostada no topo
       e outra no rodapé, com 16px de respiro cada;
     · dois bichos de 96px (o piso em pixel), um com os pés a 38% e o outro a
       17% do rodapé.

   75 + 96 é 171, e sobravam 202 − 16 − 34 = 152 de coluna. Faltavam 19px, e
   eles foram cobrados onde doía: a placa do ADVERSÁRIO (canto de cima à
   esquerda) caía por cima do SEU bicho (canto de baixo à esquerda), e a SUA
   placa (canto de baixo à direita) caía por cima do bicho dele. Medido no
   navegador, a 390px: 89×20px e 89×15px de sobreposição.

   ⚠️ NÃO É UM DEFEITO DE «ESTAR APERTADO»: as duas peças que se cruzam são
   sempre de lados OPOSTOS — a placa de um contra o bicho do outro —, porque o
   desenho é diagonal. Cada canto vertical da arena é uma COLUNA compartilhada
   por duas peças, e uma coluna que não cabe não se resolve empurrando de lado.

   🔨 O CONSERTO É DAR A COLUNA DE VOLTA, e só no telefone:

     · a placa encolhe de 75 para ~59px — fonte menor nas três linhas, respiro
       menor, e os cantos passam de 16 para 8px;
     · o nome NUNCA quebra em duas linhas (`nowrap` + reticências). Isso é o
       que torna a altura da placa um FATO e não uma esperança: sem ele, um
       «Charizard» num aparelho com fonte grande devolveria o defeito inteiro;
     · o piso do bicho cai de 96 para 84px.

   Sobram 15px de folga na coluna da esquerda e 10px na da direita — medidos,
   não estimados. Em tela maior nada disso existe: a arena de 900px tem 500 de
   altura e espaço de sobra.

   ⚠️ POR QUE MEXER NA PLACA E NO PISO, e não na ALTURA da arena: a proporção
   9:5 é fixa de propósito (ver o bloco «a arena 9:5»), porque é ela que faz as
   porcentagens do painel de Cenários significarem alguma coisa. Uma arena mais
   alta no telefone moveria o horizonte de toda arte publicada.

   ⚠️ E POR QUE NÃO MEXER NA BASE DOS PÉS (`--vc-base`/`--adv-base`), que seria
   o ajuste óbvio: esses dois descem do painel — no `:root` do layout, e às
   vezes no `style=` da própria arena, quando o cenário tem ajuste próprio.
   Regra de folha nenhuma ganha de um `style=`. O piso do bicho, esse mora
   aqui, e é por isso que ele é o que se mexe.
   ========================================================================== */
@media (max-width:520px){
  /* Numa tela estreita a placa com 47% deixa o nome em duas linhas. */
  .arena .fighter .nameplate{width:62%; padding:4px 8px}
  /* O `nowrap` MORA NA LINHA INTEIRA, e não só no nome: o «Nv 4» também é um
     filho de `flex`, e quando o nome comprido comia o espaço era ELE que
     quebrava em duas linhas («Nv» / «4») e crescia a placa 9px — o defeito
     inteiro de volta por causa do rótulo, não do nome. */
  .arena .fighter .nameplate .n{font-size:12.5px; line-height:1.2; white-space:nowrap}
  /* A RETICÊNCIA É A TRAVA: nome comprido encurta, não empurra a placa.
     O `min-width:0` não é enfeite — sem ele um filho de `flex` se recusa a
     ficar menor do que o próprio conteúdo, e o `ellipsis` nunca acontece. */
  .arena .fighter .nameplate .n > span{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
  /* A BARRA E O NÚMERO DIVIDEM A MESMA LINHA. Em pé, eles eram duas fileiras
     de ~16px cada numa placa que só tinha ~60 para gastar; lado a lado, a
     placa devolve uma fileira inteira para a arena — e a leitura não muda,
     porque «a barra está aqui» e «71%» são a MESMA informação, uma desenhada
     e a outra escrita. */
  .arena .fighter .nameplate{display:grid; grid-template-columns:1fr auto;
    column-gap:8px; align-items:center}
  .arena .fighter .nameplate .n{grid-column:1 / -1}
  .arena .fighter .nameplate .bar{grid-column:1; height:7px; margin-top:3px}
  .arena .fighter .nameplate .hpline{grid-column:2; font-size:10.5px;
    line-height:1.2; margin-top:3px}
  .arena .fighter .nameplate .bar.exp{grid-column:1 / -1; height:3px; margin-top:2px}
  .arena .fighter.foe .nameplate{top:6px; left:12px}
  .arena .fighter.you .nameplate{bottom:6px; right:12px}
  /* ⚠️ NO TELEFONE O BICHO É MEDIDO PELA ALTURA DA ARENA, e não pela largura.
     `width:max(96px, 16%)` mede largura — e largura é justamente o que sobra
     num celular: a 320px a arena tem 294 de largura e só 163 de ALTURA. Um
     piso em pixel resolve um aparelho e estoura o seguinte; 42% da altura
     encolhe junto com o que está apertando.

     ⚠️ O AJUSTE DE TAMANHO DO PAINEL (`--adv-tam`/`--vc-tam`) NÃO VALE AQUI,
     e é de propósito: ele também é % da LARGURA. Quem ajusta o cenário está
     compondo a cena do monitor; no telefone a regra é caber.

     ⚠️ OS DOIS LADOS ESCRITOS SEPARADOS, e não `.fighter img`: a largura mora
     em `.fighter.foe img` e `.fighter.you img`, que têm uma classe a mais.
     Uma regra com menos classe não desmarca outra com mais — ela só some, e o
     bicho sai esmagado (96 de largura por 68 de altura).

     ⚠️ E AS DUPLAS FICAM DE FORA (`:not(.duplas)`): a arena de duplas tem
     proporção, alturas e larguras próprias no bloco logo abaixo, e são quatro
     bichos dividindo a mesma caixa. Uma altura vinda daqui sobreviveria à
     largura de lá e esmagaria os quatro. */
  .arena:not(.duplas) .fighter.foe img,
  .arena:not(.duplas) .fighter.you img{width:auto; height:42%}
}

.cmdbar{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 0}
.cmd{display:flex; align-items:center; justify-content:center; gap:8px;
     padding:14px 16px; border-radius:12px; border:1px solid transparent;
     font-weight:800; font-size:15px; text-decoration:none; color:#fff;
     cursor:pointer; font-family:inherit; transition:filter .12s, transform .06s}
.cmd:hover{filter:brightness(1.12)}
.cmd:active{transform:translateY(1px)}
.cmd.atacar {background:#b4242b}
.cmd.bolsa  {background:#3f8f36}
.cmd.pokemon{background:#1d6fa8}
.cmd.fugir  {background:#5a6070}
/* o comando aberto ganha um anel, não uma cor nova: trocar a cor faria a mão
   procurar de novo onde estava o botão que ela já sabia */
.cmd.on{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px currentColor}
.cmd.off{opacity:.5; cursor:default}

.painel{margin-top:14px; background:var(--card2); border:1px solid var(--line);
        border-radius:12px; padding:14px}

/* lista de itens da Bolsa */
.itens{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.itembtn{display:block; position:relative; width:100%; text-align:left;
         background:var(--card); border:1px solid var(--line); border-radius:10px;
         padding:10px 44px 10px 13px; color:var(--text); font:inherit;
         cursor:pointer; text-decoration:none}
.itembtn:hover{border-color:var(--accent)}
.itembtn b{display:block; font-size:14px}
.itembtn small{display:block; color:var(--muted); font-size:11.5px; margin-top:3px; line-height:1.35}
.itembtn .qtd{position:absolute; top:10px; right:12px; font-weight:800; color:var(--muted)}
.itembtn.boa{border-color:var(--good)}
.itembtn .mult{color:var(--good)}

@media (max-width: 720px){
  .cmdbar{grid-template-columns:1fr 1fr}
  .itens, .moves{grid-template-columns:1fr}
}

/* ------------------------------------- a certidão da criatura (v2.0) */
.certidao{display:grid; grid-template-columns:1fr 1fr; gap:6px 14px;
  background:var(--card2); border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; margin-bottom:10px; font-size:12.5px}
.certidao > div{display:flex; flex-direction:column; gap:1px; min-width:0}
/* «> div >» e não «span» solto: a regra é do RÓTULO, e sem a restrição ela
   pegava também os spans que o VALOR usa por dentro — o grupo de ovo saía
   escrito em maiúsculas na certidão, como se fosse outro rótulo. */
.certidao > div > span{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em}
.certidao b{font-weight:700; overflow-wrap:anywhere}
.certidao b small{display:block; font-size:11px}
.sexo{font-size:16px; font-weight:800; line-height:1}

.equipado{border:1px dashed var(--line); border-radius:10px; padding:8px 12px;
  margin-bottom:10px; font-size:12.5px}
.equipado.tem{border-style:solid; border-color:var(--accent)}
.equipado small{display:block; color:var(--muted); margin-top:2px}
@media (max-width: 620px){ .certidao{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- social */
/* A caixa do chat tem altura fixa e rola sozinha: sem isso a página inteira
   cresce a cada fala e o campo de escrever foge para baixo da dobra. */
.chatbox{height:420px; overflow-y:auto; background:var(--card2); border:1px solid var(--line);
         border-radius:var(--radius); padding:10px 12px; font-size:13.5px; line-height:1.55}
.fala{padding:2px 0; word-break:break-word}
/* 📣 O RECADO DA CASA (v3.43). Ele NÃO ganha fundo nem moldura: uma tarja
   colorida no meio da conversa vira propaganda com cara de propaganda, e o olho
   aprende a pular. O que ele ganha é um selo ao lado do nome — o bastante para
   ninguém responder a ele achando que é gente, e pouco o bastante para não
   roubar a tela de quem está conversando. */
.selo-bot{display:inline-block; margin-right:5px; padding:1px 6px; border-radius:5px;
  background:var(--accent); color:#fff; font-size:9.5px; font-weight:800;
  letter-spacing:.6px; vertical-align:1px}
.fala.de-bot .quem{color:var(--accent)}
.fala .hora{color:var(--muted); font-size:11px; margin-right:5px; font-variant-numeric:tabular-nums}
.fala .quem{margin-right:5px}
.fala .quem:after{content:":"}
.fala .diz{color:var(--text)}
.clatag{color:var(--accent); font-weight:700; font-size:12px; margin-right:3px}

/* A carta preserva as quebras de linha de quem escreveu, mas não deixa uma
   palavra gigante sem espaço esticar o card inteiro. */
.msgcorpo{background:var(--card2); border:1px solid var(--line); border-radius:var(--radius);
          padding:14px 16px; margin-top:12px; line-height:1.6; word-break:break-word}

@media (max-width:760px){ .chatbox{height:320px} }

/* ----------------------------------------------------------------- chave */
/* O desenho do mata-mata. Todas as classes começam com `k-` porque nomes
   curtos como .nm e .pt já existem em outras telas e uma colisão aqui mexeria
   na ficha da criatura sem ninguém perceber.

   As colunas são potências de 2 — cada rodada tem metade das vagas da anterior
   —, então basta dar `flex:1` a cada vaga para que o centro de uma caixa caia
   exatamente no meio das duas de baixo. As linhas são bordas, não imagem:
   nascem alinhadas em qualquer altura de tela e não custam um pedido a mais. */
/* `safe center` centraliza a chave quando ela cabe e desliga a centralização
   quando não cabe — sem isso, o começo da chave sumiria à esquerda do vão. */
.k-wrap{overflow-x:auto; padding:6px 2px 12px; margin:0 -4px;
        display:flex; justify-content:safe center}
.k{display:flex; align-items:stretch; gap:var(--vao); min-width:max-content;
   --fio:#33405c; --fioW:2px; --vao:22px}
.k-lado{display:flex; align-items:stretch; gap:var(--vao)}
.k-lado.dir{flex-direction:row-reverse}

.k-col{display:flex; flex-direction:column; width:150px}
.k-col > .k-et,
.k-meio .k-et{font-size:10.5px; letter-spacing:.9px; text-transform:uppercase;
              color:var(--muted); height:22px; white-space:nowrap}
.k-col.dir > .k-et{text-align:right}
.k-corpo{flex:1; display:flex; flex-direction:column; justify-content:space-around}
.k-vaga{flex:1; min-height:74px; display:flex; align-items:center; position:relative}

/* fio que sai da caixa em direção à próxima rodada */
.k-col .k-vaga::after{content:''; position:absolute; top:50%; width:calc(var(--vao) / 2);
                      border-top:var(--fioW) solid var(--fio)}
.k-col.esq .k-vaga::after{right:calc(var(--vao) / -2)}
.k-col.dir .k-vaga::after{left:calc(var(--vao) / -2)}
/* metade vertical que junta as duas vagas de um mesmo galho */
.k-col .k-corpo > .k-vaga:nth-child(odd):not(:last-child)::before{
  content:''; position:absolute; top:50%; height:100%}
.k-col.esq .k-corpo > .k-vaga:nth-child(odd):not(:last-child)::before{
  right:calc(var(--vao) / -2); border-right:var(--fioW) solid var(--fio)}
.k-col.dir .k-corpo > .k-vaga:nth-child(odd):not(:last-child)::before{
  left:calc(var(--vao) / -2); border-left:var(--fioW) solid var(--fio)}
/* fio que chega na caixa vindo da rodada anterior */
/* `.ligado` só existe quando há semifinais dos dois lados: numa chave de dois
   inscritos a final não recebe fio nenhum, e o toco ficaria solto no ar. */
.k-col:not(:first-child) .k-cx::before,
.k-meio.ligado .k-cx::before, .k-meio.ligado .k-cx::after{
  content:''; position:absolute; top:50%; width:calc(var(--vao) / 2);
  border-top:var(--fioW) solid var(--fio)}
.k-col.esq:not(:first-child) .k-cx::before,
.k-meio.ligado .k-cx::before{left:calc(var(--vao) / -2)}
.k-col.dir:not(:first-child) .k-cx::before,
.k-meio.ligado .k-cx::after{right:calc(var(--vao) / -2)}

/* ------------------------------------------------------------ a caixinha */
.k-cx{position:relative; display:block; width:100%; text-decoration:none; color:inherit;
      background:var(--card2); border:1px solid var(--line); border-radius:9px}
.k-lin{display:flex; align-items:center; gap:7px; height:23px; padding:0 8px; font-size:12.5px}
.k-lin:first-child{border-radius:8px 8px 0 0}
.k-lin + .k-lin{border-top:1px solid var(--line)}
.k-nm{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.k-pt{width:21px; flex:none; text-align:center; font-size:11px; font-weight:700;
      color:var(--muted); background:var(--bg); border-radius:4px;
      font-variant-numeric:tabular-nums}
.k-pt:empty{background:none}          /* sem número não vira quadradinho à toa */
.k-lin.ganhou{background:linear-gradient(90deg,#facc1512,transparent)}
.k-lado.dir .k-lin.ganhou{background:linear-gradient(270deg,#facc1512,transparent)}
.k-lin.ganhou .k-nm{font-weight:700}
.k-lin.ganhou .k-pt:not(:empty){color:#141a27; background:var(--warn)}
.k-lin.perdeu .k-nm{color:var(--muted)}
.k-lin.vazia .k-nm{color:var(--muted); opacity:.6; font-style:italic}
.k-lin.eu{box-shadow:inset 3px 0 0 var(--accent)}
.k-lado.dir .k-lin{flex-direction:row-reverse}
.k-lado.dir .k-lin.eu{box-shadow:inset -3px 0 0 var(--accent)}
.k-pe{height:17px; padding:0 8px; font-size:10px; line-height:17px; color:var(--muted);
      border-top:1px solid var(--line); background:#141a2799; border-radius:0 0 8px 8px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.k-lado.dir .k-pe{text-align:right}

.k-cx.aberta{border-style:dashed}
.k-cx.viva{border-color:var(--warn)}
.k-cx.viva .k-pe{color:var(--warn)}
.k-cx.minha{border-color:var(--accent); box-shadow:0 0 0 1px #3b82f659}
.k-cx.fantasma{border-style:dashed; opacity:.5}
.k-cx.jogavel:hover{border-color:var(--good); box-shadow:0 0 0 1px #4ade8066}

/* ---------------------------------------------------------------- centro */
/* A taça e o campeão ficam soltos no topo e no pé para que a caixa da final
   fique exatamente no meio da coluna — é nela que as duas semifinais chegam,
   e um pixel fora deixa as duas linhas tortas. */
.k-meio{position:relative; width:190px; min-height:208px; display:flex; align-items:center}
.k-meio .k-vaga{flex:1; min-height:0}
.k-meio .k-taca{position:absolute; top:0; left:0; right:0; text-align:center; font-size:40px;
                line-height:1; filter:grayscale(1); opacity:.35}
.k-meio .k-taca.com{filter:none; opacity:1; text-shadow:0 0 22px #facc1566}
.k-meio .k-et{position:absolute; top:48px; left:0; right:0; text-align:center; color:var(--warn)}
.k-meio .k-campeao{position:absolute; bottom:0; left:0; right:0; text-align:center; line-height:1.35}
.k-meio .k-campeao small{display:block; font-size:10px; letter-spacing:.8px;
                         text-transform:uppercase; color:var(--muted)}
.k-meio .k-campeao b{font-size:16px; color:var(--warn)}
.k-meio .k-cx{border-color:#3f4a66}

/* Em tela estreita só as colunas encolhem: o vão entre elas é o que os fios
   ocupam (metade de cada lado), então mexer nele torceria o desenho. */
@media (max-width:760px){
  .k-col{width:128px}
  .k-meio{width:156px}
}

/* ============================================================ estatísticas */

/* Três rankings lado a lado (dia, mês, ano). O `.g3` de 180px é para cartão de
   criatura; tabela com nome de treinador precisa de mais que isso, e em tela
   estreita elas empilham sozinhas. */
.g3w{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}

/* Os quatro totais do bloco Informações. O `.g4` normal (128px) é para cartão
   de criatura: «948.233.150» não cabe nele, e número cortado é pior que
   número pequeno. */
.gtot{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tot{background:var(--card2); border:1px solid var(--line); border-radius:var(--radius);
     padding:12px 14px; display:flex; flex-direction:column; gap:4px}
.tot .sub{margin:0; font-size:12px; line-height:1.25}
.tot b{font-size:19px; letter-spacing:.3px; overflow-wrap:anywhere}

/* ------------------------------------------- o cartão que abre a prévia */
/* A JANELINHA DE CSS PURO SAIU NA v2.71. Ela era um balão desenhado só para as
   Estatísticas e o Perfil — outro formato, outra ordem, outros nomes de coisa
   —, e a mesma criatura parecia duas criaturas conforme a tela em que se
   estava. Hoje as duas mostram o CARTÃO DO BOX (`.previa` e os `.pv-*`), aberto
   pelo mesmo `views/previa.php`.

   O que sobrou aqui é o cartão que dispara a prévia. O anel de foco importa:
   no modo centro a prévia também abre pelo teclado, e sem o anel não dá para
   saber em qual criatura o Tab parou. */
.mon[data-mon]{outline:none}
.mon[data-mon]:focus-visible{box-shadow:0 0 0 2px var(--accent)}

/* A pokébola miúda dentro da prévia. */
.fb{width:14px; height:14px; object-fit:contain; vertical-align:-2px}

/* A MEDALHA DO PÓDIO DA ESPÉCIE (v2.73).
   Ela vai colada ao número do poder, e por isso NÃO pode empurrar a linha: a
   certidão da prévia é um rótulo à esquerda, um pontilhado no meio e um valor
   à direita, e um emoji com a altura de linha padrão esticava a linha inteira
   dois pixels — só a dela, o que fazia a lista parecer desalinhada. */
.podio{font-size:12px; line-height:1; vertical-align:-1px; margin-left:1px;
       cursor:help; filter:drop-shadow(0 1px 2px #0006)}

/* ------------------------------------------- as caixinhas de máquina (painel) */
/* Cento e cinquenta e cinco caixinhas numa tela: sem o rótulo inteiro clicável,
   acertar o quadradinho de 13px vira trabalho de precisão. */
.mqitem{display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:8px;
        border:1px solid transparent; cursor:pointer; font-size:13px; line-height:1.25}
.mqitem:hover{background:var(--card2)}
.mqitem.on{border-color:#2a3550; background:#182034}
.mqitem input{width:auto; margin:0; flex:0 0 auto}
.mqitem small{color:var(--muted); margin-left:4px}

/* O BOTÃO DA MEGA. Ele não é mais um comando entre quatro: é a jogada cara,
   que se usa uma vez por batalha — e a cor existe para ele não se perder no
   meio da barra de Atacar/Bolsa/Pokémon/Fugir. */
.mega-btn{background:linear-gradient(135deg,#a855f7,#ec4899); border:0; font-weight:700;
  box-shadow:0 6px 18px #a855f755}
.mega-btn:hover{filter:brightness(1.08)}

/* A BARRA DE SALVAR DA LISTA DE GOLPES gruda no topo enquanto se rola o
   catálogo. Sem isso o botão fica a duas telas de distância do que se está
   marcando — e botão que não se vê é botão que não se aperta. */
.extras-barra{position:sticky; top:0; z-index:5; padding:8px 0; margin-bottom:6px;
  background:var(--card); border-bottom:1px solid var(--line)}
.extras-pendente{font-size:12px; font-weight:700; color:var(--warn);
  border:1px solid var(--warn); border-radius:999px; padding:2px 9px}

/* Uma linha de golpe nas lojas da cidade (Recorder e Tutor). Ela QUEBRA: as
   duas listas ficam lado a lado numa grade, e uma linha rígida jogava o botão
   para fora da caixa em tela média. */
.linhagolpe{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center;
            padding:9px 0; border-top:1px solid #1b2233}
.linhagolpe:first-child{border-top:0}
.linhagolpe select{max-width:180px}

/* O relógio do casal no Day Care: um contador com o motivo dele ao lado.
   Travado (fila cheia) troca o verde pelo âmbar — a contagem continua, mas o
   que ela vai produzir não cabe, e a cor precisa dizer isso antes do texto. */
.relogio{display:flex; align-items:center; gap:14px; margin-top:12px;
         padding:12px 14px; border-radius:10px;
         border:1px solid #166534; background:linear-gradient(90deg,#12271a,var(--card2) 60%)}
.relogio .ico{font-size:24px; flex:none}
.relogio b{display:block; color:var(--good); font-size:14px}
.relogio small{display:block; color:var(--muted); font-size:12px; margin-top:3px; line-height:1.45}
.relogio.travado{border-color:#a16207; background:linear-gradient(90deg,#2a2210,var(--card2) 60%)}
.relogio.travado b{color:var(--warn)}

/* Os dois balcões do Poke Mart. São o primeiro nível da loja — a prateleira
   (.tabs) só existe dentro do balcão de itens. Cartão grande e não aba, porque
   a escolha aqui é «o que eu vim comprar», e ela merece mais peso na tela do
   que «qual prateleira». */
.balcoes{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}
.balcoes a{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
           padding:13px 16px; border-radius:11px; border:1px solid var(--line);
           background:var(--card2)}
.balcoes a:hover{border-color:#3d4a68; background:#1b2333}
.balcoes a.on{border-color:var(--accent); background:linear-gradient(90deg,#16223c,var(--card2) 70%)}
.balcoes .ic{font-size:26px; flex:none}
.balcoes b{display:block; font-size:15px}
.balcoes small{display:block; color:var(--muted); font-size:12px; margin-top:2px}
.balcoes a.on b{color:var(--accent)}

/* ---------------------------------------------------------------- online
   A faixa de quem está online, no rodapé de toda tela. Ela é discreta de
   propósito: informação de ambiente, não de ação. */
.online{max-width:1200px; margin:22px auto 0; padding:12px 16px;
        background:var(--card); border:1px solid var(--line); border-radius:12px}
.online-tit{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:7px}
.online-tit b{color:var(--text); font-size:15px}
.online-tit small{color:var(--muted)}
.online-bolha{width:8px; height:8px; border-radius:50%; background:var(--good);
              box-shadow:0 0 0 3px rgba(34,197,94,.18); flex:none}
.online-lista{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.online-nome{background:var(--card2); border:1px solid var(--line); border-radius:999px;
             padding:3px 10px; font-size:12px; display:inline-flex; align-items:center; gap:5px}
/* A etiqueta virou link para a ficha do treinador — sem sublinhado e sem a cor
   de link, porque ela continua sendo uma etiqueta e não um texto. */
a.online-nome{text-decoration:none; color:inherit}
a.online-nome:hover{border-color:var(--accent)}
.online-nome.eu{border-color:var(--accent); color:var(--accent)}
/* ------------------------------------------------------- a legenda das cores
   Ela existe porque o cargo virou COR: uma cor sem legenda é um enigma, e um
   enigma que aparece em toda tela é pior do que o rótulo que saiu daqui.
   Discreta de propósito — quem já sabe o que a cor quer dizer não deve tropeçar
   nela toda vez. O conteúdo sai de `Cargo::legenda()`, e nunca daqui. */
.online-legenda{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:8px;
                font-size:10.5px; color:var(--muted)}
.online-leg{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.online-leg i{width:8px; height:8px; border-radius:50%; flex:none}

/* ------------------------------------------------------------------ selos
   O selo de cargo e de VIP. Ele é pequeno e colorido pela variável --selo,
   posta por quem desenha: uma classe por cargo viraria uma lista de classes
   para manter em dois lugares (aqui e no Cargo). */
.selo{display:inline-flex; align-items:center; gap:3px; font-size:10px; line-height:1;
      padding:2px 6px; border-radius:999px; white-space:nowrap; vertical-align:middle;
      color:var(--selo); border:1px solid var(--selo); background:transparent; opacity:.95}
.online-nome .selo{font-size:9.5px; padding:1px 5px}
.fala .selo{margin-right:4px}

/* -------------------------------------------------------------- a PokéCoin
   O desenho da moeda (v3.95). Ele entra por `coin_icone()`, em core/helpers.php:
   um lugar só decide o `?v=`, o `alt` e o tamanho, e sem o arquivo volta o emoji
   que sempre esteve ali.

   `vertical-align:-.18em` porque a moeda é redonda e cheia: alinhada pela base
   ela flutua acima da linha do texto, e ao lado de um número isso salta aos
   olhos. O valor foi achado olhando, não calculado. */
.coin-ic{display:inline-block; vertical-align:-.18em; object-fit:contain; flex:none}
.coin-par{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}

/* O cartaz da loja: é a única tela que mostra a arte inteira, porque é a única
   em que a moeda é o PRODUTO e não a unidade de um preço. */
.lj-cartaz{width:190px; max-width:38%; height:auto; flex:none; align-self:center}
@media (max-width:560px){ .lj-cartaz{ display:none } }

/* --------------------------------------------- o Move Recorder, uma coluna por forma
   A LINHA EVOLUTIVA É UMA SEQUÊNCIA (v3.97), e uma sequência empilhada dentro
   de uma caixa deixa de parecer sequência. Cada forma ganhou a coluna dela, na
   ordem da linha — o jogador lê da esquerda para a direita e vê de onde cada
   golpe vem sem juntar as peças.

   `auto-fit` com piso de 250px, e não um número fixo de colunas: são 1, 2 ou 3
   conforme a criatura (o Charizard tem três; um Pidgey, uma), e em tela estreita
   elas descem uma sob a outra sozinhas. Um `repeat(3, 1fr)` daria colunas vazias
   para quem não evoluiu e apertaria as três no celular. */
.recorder-colunas{display:grid; gap:12px; align-items:start;
                  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr))}
.recorder-col{min-width:0}

/* O cabeçalho da coluna carrega o nome da forma e o preço dela — é o que faz a
   linha do golpe não repetir a distância doze vezes seguidas. */
.recorder-cab{display:flex; flex-direction:column; gap:1px; margin:0 0 10px;
              padding-bottom:8px; border-bottom:1px solid var(--line)}
.recorder-cab b{font-size:14px}
.recorder-cab span{font-size:11px; color:var(--muted)}

/* ------------------------------------------------------------------- SPA
   O balcão do brilho (v3.91). Duas listas: a tabela de preços por raridade,
   que responde «quanto custa?» uma vez para todas as criaturas, e a lista das
   suas criaturas.

   A LISTA MOSTRA TAMBÉM O QUE O SPA NÃO ATENDE, apagado e sem botão. Sumir com
   o Mewtwo em silêncio faria o jogador procurar defeito onde há uma decisão do
   dono do jogo — então ele fica, dizendo por que não. */
.spa-precos{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.spa-preco{background:var(--card2); border:1px solid var(--line); border-radius:9px;
           padding:6px 10px; font-size:12px; display:flex; flex-direction:column; gap:1px;
           min-width:118px}
.spa-preco span{color:var(--muted); font-size:11.5px}

.spa-lista{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
           gap:10px; margin-top:12px}
.spa-item{background:var(--card2); border:1px solid var(--line); border-radius:11px;
          padding:10px; display:flex; flex-direction:column; align-items:center; gap:6px;
          text-align:center}
.spa-item img{width:72px; height:72px; image-rendering:pixelated}
.spa-nome{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
          gap:5px; font-size:13px}
.spa-nome small{color:var(--muted); font-size:11px}
.spa-valor{font-weight:800; color:#f59e0b; font-size:13.5px}
/* Quem o SPA não atende continua na lista, apagado: a ausência de botão já diz
   que não dá, e a frase embaixo diz por quê. */
.spa-item.fechado{opacity:.55}

/* ------------------------------------------------------------------ conta
   O painel da conta e a ficha pública: personagem à esquerda, campos à
   direita. Em tela estreita o personagem sobe para cima, porque um avatar de
   120px espremendo os campos numa coluna de 300px não ajuda ninguém. */
.conta{display:grid; grid-template-columns:190px 1fr; gap:22px; align-items:start}
.conta-quem{text-align:center}
.conta-quem img{width:150px; height:auto; image-rendering:pixelated;
                background:var(--card2); border:1px solid var(--line);
                border-radius:12px; padding:10px}
.conta-campos{display:grid; gap:12px}
.conta .linha{display:grid; grid-template-columns:230px 1fr; gap:14px; align-items:center}
.conta .linha > label{color:var(--muted); font-size:13px; margin:0}
.conta .linha > label small{display:block; font-size:11.5px; margin-top:2px; opacity:.8}
.conta .linha input[type=text], .conta .linha select{max-width:320px; margin:0}
.conta .linha input:disabled{opacity:.75}
.conta-moeda{background:var(--card2); border:1px solid var(--line); border-radius:999px;
             padding:4px 11px; font-size:12.5px; white-space:nowrap}
.simnao{display:flex; gap:16px; align-items:center}
.simnao label{display:inline-flex; align-items:center; gap:6px; margin:0; font-size:13px;
              color:var(--text); cursor:pointer}
.simnao input{margin:0}
@media (max-width:760px){
  .conta{grid-template-columns:1fr}
  .conta .linha{grid-template-columns:1fr; gap:6px}
}

/* ------------------------------------------------------------- a loteria */
/* O VOLANTE. Dez colunas em tela larga e seis no telefone — as duas dão linhas
   redondas de 1 a 60, o que faz a pessoa achar a dezena pela posição em vez de
   ler os sessenta números. A caixinha de verdade fica escondida atrás do
   `<label>`: o alvo do dedo é a bolinha inteira, e não um quadrado de 13px. */
.dz-grade{display:grid; grid-template-columns:repeat(10, 1fr); gap:6px; margin-top:4px}
@media (max-width:640px){ .dz-grade{grid-template-columns:repeat(6, 1fr)} }
.dz-cel{position:relative; display:block; cursor:pointer}
.dz-cel input{position:absolute; opacity:0; width:0; height:0}
.dz-cel span{display:flex; align-items:center; justify-content:center; aspect-ratio:1;
             border:1px solid var(--line); border-radius:999px; background:var(--card2);
             font-size:13px; font-weight:600; color:var(--text); user-select:none;
             transition:background .12s, border-color .12s}
.dz-cel:hover span{border-color:var(--accent)}
.dz-cel input:checked + span{background:var(--accent); border-color:var(--accent); color:#fff}
/* Desligada é a dezena que não cabe mais na aposta: ela some do caminho sem
   sumir da tela, para a pessoa entender que o limite chegou. */
.dz-cel input:disabled + span{opacity:.35; cursor:not-allowed}
.dz-cel input:disabled:checked + span{opacity:1}

/* As bolinhas de leitura — a aposta feita, o sorteio, o histórico. */
.dz-linha{display:inline-flex; gap:4px; flex-wrap:wrap; align-items:center}
.dz{display:inline-flex; align-items:center; justify-content:center; min-width:26px;
    height:26px; padding:0 4px; border-radius:999px; background:var(--card2);
    border:1px solid var(--line); font-size:12px; font-weight:700; color:var(--muted)}
.dz.on{background:var(--good); border-color:var(--good); color:#0b1220}
.dz-grande .dz{min-width:36px; height:36px; font-size:16px}

/* Os dias de sorteio, no painel. Mesma ideia das dezenas do volante — o alvo do
   clique é a etiqueta inteira, e não um quadradinho de 13px ao lado dela. */
.dia-cel{position:relative; display:inline-block; cursor:pointer}
.dia-cel input{position:absolute; opacity:0; width:0; height:0}
.dia-cel span{display:inline-block; padding:7px 14px; border-radius:999px;
              border:1px solid var(--line); background:var(--card2); font-size:13px;
              font-weight:600; user-select:none; transition:background .12s, border-color .12s}
.dia-cel:hover span{border-color:var(--accent)}
.dia-cel input:checked + span{background:var(--accent); border-color:var(--accent); color:#fff}

/* Os seis IVs no painel. `auto-fit` porque o formulário mudou de lugar: ele
   era uma coluna de um terço da tela (três atributos por linha) e virou a
   largura inteira do cartão, onde os seis cabem numa linha só. Uma contagem
   fixa deixaria metade da faixa em branco numa tela larga e espremeria os
   campos numa estreita. */
.iv-grade{display:grid; grid-template-columns:repeat(auto-fit, minmax(88px, 1fr));
          gap:6px; margin-top:4px}
.iv-cel{display:flex; flex-direction:column; gap:2px; margin:0}
.iv-cel span{font-size:11px; color:var(--muted)}
.iv-cel input{text-align:center; padding:6px 4px}
/* O campo do atributo que já está no teto nasce marcado: numa lista de seis,
   saber de relance o que já é 31 evita digitar o que já estava lá. */
.iv-cel input.iv-max{border-color:var(--good)}

/* A FITA DE IV do histórico de soltas: os seis atributos numa linha só, dentro
   de uma célula de tabela. O total responde «era boa?»; a fita responde «era
   boa no quê» — e é sempre sobre a segunda pergunta que o pedido de suporte
   fala. A cor é só nos extremos (31 e ≤5): pintar os seis faria a fita virar
   um arco-íris em que nada salta. */
.iv-fita{display:flex; gap:3px; margin-top:3px; flex-wrap:wrap}
.iv-q{display:flex; flex-direction:column; align-items:center; line-height:1.1;
      min-width:29px; padding:2px 3px; border:1px solid var(--line); border-radius:5px}
.iv-q small{font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px}
.iv-q b{font-size:12px}
.iv-q.max{border-color:var(--good)} .iv-q.max b{color:var(--good)}
.iv-q.bom b{color:var(--good)}
.iv-q.ruim b{color:var(--muted)}

/* A ficha da criatura no painel: duas ou três colunas de «rótulo — valor», em
   vez de uma coluna comprida ao lado do bicho. */
.ficha-grade{flex:1; min-width:220px; display:grid; gap:2px 22px;
             grid-template-columns:repeat(auto-fit, minmax(230px, 1fr))}

/* As quatro vagas de golpe, duas a duas. Uma embaixo da outra fazia a lista
   ocupar quatro linhas de um formulário que já é alto. */
.golpe-grade{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
             gap:8px; margin-top:4px}
.golpe-cel{display:flex; flex-direction:column; gap:2px}
.golpe-cel small{color:var(--muted); font-size:11px; min-height:14px}

/* Nível, shiny e humor na mesma linha — três perguntas curtas que não merecem
   três linhas inteiras. */
.ed-linha{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
          gap:0 14px; align-items:end}

/* ------------------------------------------------- a ordem do time */
/* A faixa que mostra os seis lado a lado. Ordenar é comparar, e comparar exige
   ver todo mundo ao mesmo tempo — as fichas inteiras não cabem juntas na tela,
   estas linhas cabem. */
/* ================================================================ O LEILÃO
   (v2.66) A tela tem três trabalhos: dizer quanto falta, dizer quanto custa o
   próximo lance e deixar dar o lance sem procurar o botão. Ver pages/leilao.php. */
.lei{border-left:5px solid var(--lei)}
.lei-topo{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.lei-arte{position:relative; flex:0 0 96px; height:96px; border-radius:12px;
  background:radial-gradient(circle at 50% 42%,
             color-mix(in srgb, var(--lei) 72%, #fff2) 0%,
             color-mix(in srgb, var(--lei) 42%, #000) 78%);
  border:1px solid #0006; display:flex; align-items:center; justify-content:center}
.lei-arte img{width:82px; height:82px; object-fit:contain; filter:drop-shadow(0 3px 6px #0007)}
.lei-shiny{position:absolute; top:5px; right:6px; font-size:14px}
.lei-quem{flex:1 1 220px; min-width:0}
.lei-iv{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  background:color-mix(in srgb, var(--good) 22%, var(--card2)); color:var(--good);
  border:1px solid color-mix(in srgb, var(--good) 45%, transparent);
  padding:2px 7px; border-radius:5px}

/* O CRONÔMETRO É O CORAÇÃO DA TELA, e por isso ele é o maior número dela. */
.lei-relogio{flex:0 0 auto; text-align:right; min-width:130px}
.lei-relogio b{display:block; font-size:26px; font-weight:800; line-height:1.1;
  font-variant-numeric:tabular-nums}
.lei-relogio small{display:block; color:var(--muted); font-size:11px; margin-top:2px}
/* O ÚLTIMO MINUTO PISCA. É quando a esticada do cronômetro entra em jogo, e é
   exatamente a informação que decide se vale a pena dar mais um lance. */
.lei-relogio.fim b{color:var(--bad); animation:leiPisca 1s ease-in-out infinite}
@keyframes leiPisca{50%{opacity:.45}}
.lei-rot{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); font-weight:700}

.lei-lance{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line)}
.lei-atual{flex:1 1 180px}
.lei-atual b{display:block; font-size:22px; font-weight:800; line-height:1.15}
.lei-atual small{color:var(--muted); font-size:12px}
.lei-form{display:flex; gap:8px; align-items:center; margin:0; flex-wrap:wrap}
.lei-form input[type=number]{width:150px; margin:0}
.lei-aviso{font-size:12.5px; color:var(--muted)}
.lei-aviso small{color:var(--muted)}
.lei-min{flex:1 1 100%; font-size:11.5px; color:var(--muted); text-align:right}

/* A PLATEIA E O EXTRATO (v2.68). Ficam num `<details>` fechado: são contexto, e
   o que não pode sair da dobra num leilão que fecha em quarenta segundos é o
   cronômetro com o botão de lance. */
.lei-mais{margin-top:12px; border-top:1px solid var(--line); padding-top:10px}
.lei-mais > summary{cursor:pointer; color:var(--muted); font-size:12px; list-style:none}
.lei-mais > summary::-webkit-details-marker{display:none}
.lei-mais > summary::before{content:"▸ "; font-size:10px}
.lei-mais[open] > summary::before{content:"▾ "}
.lei-mais > summary:hover{color:var(--text)}
.lei-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:10px}
@media (max-width:620px){ .lei-cols{grid-template-columns:1fr} }
.lei-nomes{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px}
.lei-nome{font-size:11.5px; padding:2px 8px; border-radius:999px;
  background:var(--card2); border:1px solid var(--line)}
.lei-nome.eu{border-color:var(--good); color:var(--good); font-weight:700}
.lei-extrato{width:100%; border-collapse:collapse; font-size:12px; margin-top:6px}
.lei-extrato td{padding:3px 0; border-bottom:1px solid #ffffff0d}
.lei-extrato tr:last-child td{border-bottom:0}
.lei-extrato .v{text-align:right; font-weight:700; font-variant-numeric:tabular-nums}
.lei-extrato .q{text-align:right; color:var(--muted); width:64px; font-size:11px}
/* O LANCE DE CIMA É O QUE VALE, e ele é o único que muda a decisão de quem
   está lendo — os outros nove são o ritmo da disputa. */
.lei-extrato tr.topo td{color:var(--warn)}

/* ======================================================= A FAIXA DA TELA INICIAL
   (v2.64) Ela responde duas perguntas, nesta ordem: «o que eu faço agora?» e
   «como eu estou indo?». Ver core/Proximo.php. */
.hud-topo{display:flex; justify-content:space-between; align-items:flex-start;
  gap:14px; flex-wrap:wrap; margin-bottom:14px}

/* O PRÓXIMO PASSO. Ele é um link inteiro, e não um texto com um botão ao lado:
   a área clicável é a faixa toda, que é o que faz ele funcionar no polegar. */
.hud-passo{display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit;
  background:var(--card2); border:1px solid var(--line); border-left:5px solid var(--accent);
  border-radius:11px; padding:13px 15px; transition:border-color .12s, background .12s}
.hud-passo:hover{background:color-mix(in srgb, var(--accent) 8%, var(--card2));
  border-color:var(--accent)}
/* A COR DIZ A NATUREZA: vermelho trava, amarelo urge, verde colhe, azul segue.
   Sem ela, «seu time está desmaiado» e «explore a Rota 1» têm o mesmo peso na
   tela — e são coisas completamente diferentes. */
.hud-passo.bad{border-left-color:var(--bad)}
.hud-passo.bad:hover{background:color-mix(in srgb, var(--bad) 9%, var(--card2)); border-color:var(--bad)}
.hud-passo.warn{border-left-color:var(--warn)}
.hud-passo.warn:hover{background:color-mix(in srgb, var(--warn) 9%, var(--card2)); border-color:var(--warn)}
.hud-passo.good{border-left-color:var(--good)}
.hud-passo.good:hover{background:color-mix(in srgb, var(--good) 9%, var(--card2)); border-color:var(--good)}

.hud-ico{font-size:27px; line-height:1; flex:0 0 auto}
.hud-frase{flex:1; min-width:0}
.hud-frase small{display:block; color:var(--muted); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.9px; font-weight:700; margin-bottom:2px}
.hud-frase b{font-size:14px; font-weight:600; line-height:1.4}
.hud-btn{flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--accent); white-space:nowrap}
.hud-passo.bad .hud-btn{color:var(--bad)}
.hud-passo.warn .hud-btn{color:var(--warn)}
.hud-passo.good .hud-btn{color:var(--good)}
/* No celular o botão desce para a linha de baixo em vez de espremer a frase em
   três palavras por linha. */
@media (max-width:560px){
  .hud-passo{flex-wrap:wrap}
  .hud-frase{flex:1 1 100%; order:2}
  .hud-btn{order:3; margin-left:auto}
}

/* OS QUATRO MEDIDORES. Cada um responde uma pergunta que o jogador faz sozinho;
   o quinto seria o primeiro que ninguém lê. */
.hud-medidores{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px}
@media (max-width:720px){ .hud-medidores{grid-template-columns:repeat(2,1fr)} }
.hud-md{display:block; text-decoration:none; color:inherit; padding:9px 11px;
  background:var(--card2); border:1px solid var(--line); border-radius:9px;
  transition:border-color .12s}
.hud-md:hover{border-color:var(--accent)}
.hud-rot{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--muted); font-weight:700; margin-bottom:6px}
.hud-md .bar{height:6px}
.hud-val{display:block; font-size:12px; color:var(--text); margin-top:5px; font-weight:600}

/* ============================================================ OS CARTÕES DO TIME
   (v2.63) A faixa do time deixou de ser uma coluna de linhas e virou uma grade
   de cartas — a mesma na Início e em Meu time. Ver views/time_cartoes.php.

   A COR É O TIPO, e ela é o que faz a faixa ser lida de relance: seis
   retângulos cinzas obrigam a ler seis nomes; seis cores dizem «tenho fogo,
   veneno, planta» antes de qualquer leitura. */
.tc-grade{display:grid; grid-template-columns:repeat(6,1fr); gap:11px; margin-top:12px}
/* NO CELULAR SÃO TRÊS POR LINHA. Seis cartas em 360px dão 52px cada — o sprite
   some, e uma carta em que não se vê o bicho não é uma carta. */
@media (max-width:820px){ .tc-grade{grid-template-columns:repeat(3,1fr); gap:9px} }
@media (max-width:380px){ .tc-grade{grid-template-columns:repeat(2,1fr)} }

.tc{position:relative; aspect-ratio:1/1.25; border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg, var(--tc) 0%, color-mix(in srgb, var(--tc) 55%, #000) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow:0 6px 18px #0007; transition:transform .12s, box-shadow .12s}
/* O `grab` e o `touch-action` só existem onde há arrasto: na Início a faixa é
   vitrine, e um cursor de mão aberta prometendo um arrasto que não acontece é
   pior que nenhum. */
#ordem-time .tc{cursor:grab; touch-action:none}
/* OS DOIS CANTOS CORTADOS são um clip-path, e não uma imagem: é o que dá o ar
   de carta sem custar uma requisição nem um pixel de PNG. */
.tc{clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px))}
.tc:hover{transform:translateY(-3px); box-shadow:0 10px 24px #0009}
.tc.arrastando{opacity:.4; cursor:grabbing}
/* O SLOT 1 É O ÚNICO QUE MUDA ALGUMA COISA SOZINHO: é quem entra em campo
   primeiro. A moldura existe para essa informação não depender de contar
   cartões — e ela é por DENTRO, porque o clip-path come qualquer borda. */
.tc.lider{outline:2px solid var(--warn); outline-offset:-2px}
/* QUEM CAIU FICA CINZA, e não só apagado: opacidade sozinha some no fundo
   escuro, e «está desmaiado» é a informação mais urgente desta tela.

   O CINZA NÃO PODE CAIR NO RODAPÉ. Um `filter` no cartão inteiro leva junto o
   texto — e o «CAÍDO» vermelho, que existe justamente para ser visto, saía
   cinza como todo o resto. Por isso são duas coisas: o desenho perde a cor, e
   uma cortina escura cobre o fundo; o rodapé passa por cima das duas. */
.tc.caida .tc-link img{filter:grayscale(1) brightness(.62)}
.tc.caida::before{content:""; position:absolute; inset:0; z-index:0;
  background:#0b0f18; opacity:.55; pointer-events:none}

.tc-bola{position:absolute; top:6%; left:50%; transform:translateX(-50%);
  width:92%; opacity:.13; pointer-events:none}
/* O SPRITE CRESCEU E DESCEU (v3.42).
   Ele era 64% da carta e parava 22px acima do nome — e num cartão de 160px isso
   dava um bicho de 100px com um vão de ar embaixo dele, que é o desenho de uma
   carta cujo assunto não é o desenho. A carta EXISTE para mostrar a criatura;
   o resto é legenda.

   A MARGEM DE BAIXO É NEGATIVA de propósito: o rodapé é um degradê que começa
   transparente, então os pés entram nele em vez de pararem em cima dele. É o
   mesmo motivo pelo qual o rodapé nunca foi uma barra sólida — ver `.tc-pe`.

   QUEM MANDA NO TAMANHO É A LARGURA, E SÓ ELA. Um `max-height` em porcentagem
   aqui não funciona — e não falha com erro: a carta é um flex de altura
   automática, então a conta fica circular e o navegador devolve uma altura
   menor que a imagem, deixando um vão de 50px DENTRO do link, exatamente o
   defeito que esta mudança veio consertar. Não precisa: a carta tem
   `aspect-ratio:1/1.25`, então a largura decide a altura sozinha — a mesma
   proporção em qualquer tamanho de tela, sem segunda medida nenhuma.

   🔻 E ELE ENCOLHEU DE 84% PARA 70% (v3.243), por causa da arte nova.
   ==========================================================================
   Os 84% vinham do acervo antigo, cujo desenho era CENTRALIZADO numa tela
   quadrada: sobrava ar em cima, e o bicho nunca chegava perto do número da
   vaga. A arte própria é ancorada EMBAIXO — o mesmo 84% passou a empurrar a
   criatura para cima, e a asa do Charizard e a folha do Oddish subiam até a
   faixa do `1`, `2`, `3`.

   Medi 84, 76, 70 e 64 por cento com as cartas de verdade. Em 76 o Charizard
   ainda encostava; em 64 o bicho começa a ficar pequeno para o que a carta
   existe. 70 é onde todos param abaixo do número sem perder presença. */
.tc-link{display:block; position:relative; z-index:1; margin-top:auto}
.tc-link img{display:block; width:70%; margin:0 auto -5px;
  filter:drop-shadow(0 4px 6px #0006)}

.tc-topo{position:absolute; top:8px; left:9px; z-index:2; display:flex; gap:4px;
  align-items:center; font-size:12px; line-height:1}
.tc .ord-num{background:#0009; color:#fff; font-size:10px; font-weight:800;
  padding:2px 7px; border-radius:999px; letter-spacing:.5px}
.tc.lider .ord-num{background:var(--warn); color:#231a00}

/* AS SETAS FICAM NA BORDA DIREITA, no meio: os dois cantos de cima e de baixo
   estão cortados, e um botão dentro do corte é um botão pela metade. */
.tc-setas{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  z-index:2; display:flex; flex-direction:column; gap:3px}
.tc-setas form{margin:0}
.tc-setas button{background:#0009; border:0; color:#fff; border-radius:5px;
  width:22px; height:17px; line-height:1; font-size:9px; padding:0; cursor:pointer}
.tc-setas button:hover:not(:disabled){background:#000d}
.tc-setas button:disabled{opacity:.25; cursor:default}

/* O RODAPÉ É UM DEGRADÊ, e não uma barra sólida: o sprite precisa "entrar" nele
   sem uma linha reta cortando os pés da criatura. */
/* O RESPIRO DE CIMA CAIU DE 16 PARA 7 (v3.42): ele era metade do vão entre o
   bicho e o nome dele. O degradê começa mais cedo pelo mesmo motivo — com o
   sprite entrando por dentro do rodapé, é o degradê que precisa estar escuro
   onde a letra começa, e não onde os pés terminam. */
.tc-pe{position:relative; z-index:1; padding:7px 7px 9px; text-align:center;
  background:linear-gradient(#0000, #000c 30%)}
.tc-pe b{display:block; font-size:11.5px; letter-spacing:.4px; text-shadow:0 1px 3px #000;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tc-pe span{display:block; font-size:10.5px; color:#cfd6e4; font-weight:700; margin-top:1px}
.tc-pe .bar{height:4px; margin-top:5px; background:#0008}
.tc-pe .tc-caiu{color:var(--bad); letter-spacing:.5px}

/* A VAGA LIVRE é parte da informação: uma faixa de quatro cartões não diz se
   cabem mais dois — e é isso que faz a pessoa ir buscar alguém no Box. */
.tc.vaga{background:#11151f; border:1px dashed #2f3a52; color:#4b566e; cursor:pointer;
  align-items:center; justify-content:center; text-decoration:none; box-shadow:none}
.tc.vaga:hover{border-color:var(--accent); color:var(--accent); transform:none}
.tc.vaga span{font-size:34px; font-weight:300; line-height:1}

/* A ÂNCORA da ficha lá de baixo. Sem a margem, a barra fixa do topo cobre o
   começo dela e a pessoa cai numa tela que parece ter rolado para o lugar
   errado. */
.tc-alvo{scroll-margin-top:84px}

body.arrastando-algo #ordem-time{touch-action:none}

/* ---------------------------------------------------------------- suporte */
/* A CONVERSA. Os dois lados são visualmente diferentes porque a pergunta que se
   faz lendo é «quem falou isso?» — e ela precisa ser respondida antes de a
   pessoa ler a frase, não depois. */
.tk-msg{padding:12px 14px; border-radius:11px; margin-bottom:10px;
        border:1px solid var(--line); background:var(--card2)}
.tk-msg.equipe{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--card2))}
/* A nota interna é AMARELA e diz o que é na primeira palavra: ela é a única
   linha da tela que o jogador não pode ver, e confundi-la com uma resposta é o
   erro caro desta página. */
.tk-msg.nota{border-color:var(--warn); border-style:dashed;
             background:color-mix(in srgb, var(--warn) 7%, var(--card2))}
.tk-quem{display:flex; gap:10px; align-items:baseline; margin-bottom:5px; flex-wrap:wrap}
.tk-quem b{font-size:13.5px}
.tk-quem small{color:var(--muted); font-size:11.5px}
.tk-corpo{font-size:14.5px; line-height:1.55; word-break:break-word}

/* A LINHA DA FILA. Ela é um link inteiro, e não um link dentro de uma linha: o
   alvo do clique é a linha toda. */
.tk-linha{display:flex; align-items:center; gap:12px; padding:11px 12px; text-decoration:none;
          border:1px solid var(--line); border-radius:10px; background:var(--card2);
          margin-bottom:7px; color:inherit}
.tk-linha:hover{border-color:var(--accent)}
.tk-linha.urgente{border-left:3px solid var(--bad)}
.tk-ico{font-size:19px; flex:0 0 auto}
.tk-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.tk-txt b{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tk-txt small{color:var(--muted); font-size:11.5px}

/* As categorias, na hora de abrir: cartões com o exemplo escrito. «Bug» e
   «Perdi algo» parecem a mesma coisa para quem está com raiva — a frase de
   baixo é o que separa as duas. */
.tk-cats{display:grid; grid-template-columns:repeat(auto-fit, minmax(215px, 1fr)); gap:8px; margin-top:4px}
.tk-cat{position:relative; margin:0; cursor:pointer}
.tk-cat input{position:absolute; opacity:0; width:0; height:0}
.tk-cat span{display:flex; flex-direction:column; gap:3px; padding:11px 13px; border-radius:10px;
             border:1px solid var(--line); background:var(--card2); height:100%}
.tk-cat b{font-size:14px}
.tk-cat small{color:var(--muted); font-size:11.5px; line-height:1.4}
.tk-cat:hover span{border-color:var(--accent)}
.tk-cat input:checked + span{border-color:var(--accent);
                             background:color-mix(in srgb, var(--accent) 10%, var(--card2))}

/* ══════════════════════════════════════════════════════════════════════════
   A TELA DE ENTRADA (v2.53)
   A primeira coisa que alguém vê do jogo: topo, vitrine que gira, o cartão de
   login ao lado dela e a faixa do «o que dá para fazer». Ela é a única página
   sem menu lateral e sem a largura máxima do `.shell` — o banner é de borda a
   borda, e é isso que separa uma porta de entrada de mais uma tela do sistema.
   Ver views/entrada.php.
   ═════════════════════════════════════════════════════════════════════════ */

/* O fundo daqui é o da própria tela, e ele troca de cor a cada slide. As duas
   auroras fixas do body brigariam com ele. */
body.body-entrada{background-image:none}

.ent{--ouro:#ffcb05}

/* ------------------------------------------------- a arte do topo (v3.41) */
/* A MESMA IMAGEM DA CAPA, atrás da marca e do formulário de entrar. As três
   variáveis (`--ent-arte`, `--ent-y`, `--ent-veu`) vêm do banco pelo `<head>`
   do layout — ver views/layout.php e `entrada_arte()` em core/helpers.php.

   SÃO DUAS CAMADAS E NÃO UMA. O `::before` é a arte crua; o `::after` é o que
   torna a arte um FUNDO em vez de um cartaz: escurece o topo (para a marca ter
   contraste), abaixa o desenho inteiro no véu que o painel controla, e termina
   na cor da página, para o bloco acabar sem uma linha de corte atravessando a
   tela. Fazer isso com uma camada só obrigaria a repetir a imagem em cada
   parada do gradiente.

   E O CONTEÚDO SOBE PARA O `z-index:2` porque as duas camadas são `absolute`
   dentro do bloco: sem isso, a arte ficaria POR CIMA do formulário de login —
   um cartaz bonito com dois campos de senha invisíveis atrás dele.

   A TELA DE ENTRADA NÃO SEGUE O TEMA CLARO (ver o bloco lá embaixo): estas
   cores são escuras nas duas peles de propósito, porque é sobre ARTE que elas
   pintam, e arte não clareia junto com a interface. */
.ent-alto{position:relative}
.ent-alto.com-arte::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--ent-arte) center var(--ent-y, 18%) / cover no-repeat;
}
.ent-alto.com-arte::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    /* a emenda com a página, embaixo */
    linear-gradient(180deg, transparent 58%, var(--bg) 100%),
    /* o reforço no topo, onde fica a marca */
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 26%),
    /* e o véu que o painel controla */
    rgba(0, 0, 0, var(--ent-veu, .62));
}
.ent-alto > *{position:relative; z-index:2}

/* ------------------------------------------------------------------- topo */
.ent-topo{display:flex; align-items:center; gap:22px; flex-wrap:wrap;
          padding:18px 40px; position:relative; z-index:5}
.ent-marca{display:flex; align-items:center; gap:10px; text-decoration:none;
           font-weight:900; font-size:20px; letter-spacing:-.4px; color:#fff}
/* NA TELA DE ENTRADA A MARCA PODE SER GRANDE. Esta barra não é fixa, não
   acompanha ninguém rolando a página e aparece uma vez só na vida do visitante
   — é o único lugar do jogo onde a logo pode ocupar espaço sem cobrar por ele
   em cada tela. É também por isso que é aqui que ela se mexe. */
.ent-marca img{height:76px; width:auto; display:block}
/* O CARTAZ (v3.01): a marca no meio, grande, e nada ao lado.
   A altura vem em `min()` com uma altura de JANELA junto do valor em pixels —
   500px são o cartaz em pé num monitor, e são a tela inteira num notebook
   pequeno de 600px de altura, onde o formulário de login ficaria abaixo da
   dobra. O que couber primeiro manda. */
.ent-topo-centro{justify-content:center; padding:22px 20px 6px}
/* QUEM MANDA AQUI É A LARGURA, e não a altura (v3.12).
   A marca antiga era quase quadrada, e ali 500px de altura era o cartaz certo.
   A nova é uma FAIXA de quase 3 por 1 — a bola à esquerda e o letreiro à
   direita —, e 500px de altura nela dariam 1.280px de largura: um cartaz que
   não cabe em monitor nenhum. Numa composição deitada quem estoura primeiro é
   sempre a largura, então é ela que leva o `min()`, e a altura vem sozinha.
   O teto em `vh` continua existindo pelo mesmo motivo de antes: num notebook
   de 600px de altura o formulário de login não pode nascer abaixo da dobra. */
.ent-marca-grande img{width:min(760px, 92vw); height:auto; max-height:46vh;
                      object-fit:contain}
@media (max-width:760px){
  .ent-marca-grande img{width:min(460px, 94vw); max-height:34vh}
}

/* A troca entre entrar e cadastrar, no pé do cartão. */
.ent-cartao-troca{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.ent-cartao-troca span{color:var(--muted); font-size:13px}
.ent-marca .logo-cx{
  /* mais vivo que a da capa: a marca é menor, e num desenho pequeno o gesto
     lento simplesmente não é percebido */
  --logo-t:3.4s; --logo-brilho:5s;
}
/* A REGRA DE 54px SAIU DAQUI (v3.12). `.ent-marca` já foi uma barrinha no topo
   da tela de entrada, e sobrou esta linha de lá. Como ela vinha DEPOIS da regra
   do cartaz e tinha o mesmo peso, era ela que ganhava: no celular o cartaz de
   320px virava um selo de 54px, e ninguém tinha mexido em nada. */
.ent-bola{width:22px; height:22px; border-radius:50%; position:relative;
          background:conic-gradient(from 180deg,#f87171 0 50%,#fff 50% 100%);
          border:2px solid var(--bg); box-shadow:0 0 0 2px #fff, 0 0 22px #f8717155}
.ent-bola::after{content:''; position:absolute; inset:7px; border-radius:50%;
                 background:#fff; border:2px solid var(--bg)}
/* O `.ent-menu` e o `.ent-acoes` saíram na v3.01 junto com a barra que os
   hospedava: o topo virou só o cartaz da marca, o link «O que dá para fazer»
   foi embora e os botões desceram para dentro do cartão de login. Regra de CSS
   sem ninguém do outro lado é a próxima pessoa perdendo dez minutos
   procurando quem a usa. */

/* O botão dourado é o único da tela: ele marca a ação que a página quer que
   aconteça (criar conta, entrar). Dois botões em destaque é nenhum. */
.btn.ent-ouro{background:var(--ouro); color:#141a27; border-color:var(--ouro); font-weight:800}
.btn.ent-ouro:hover{filter:brightness(1.08)}

/* ------------------------------------------------------------------ palco */
.ent-palco{position:relative; overflow:hidden}
/* A aurora troca de cor com o slide (o `style` vem do PHP e o script atualiza);
   a grade fica parada, e serve só para o preto não virar um vazio. */
.ent-aurora{position:absolute; inset:-30% -10% auto -10%; height:900px;
            filter:blur(90px); opacity:.55; transition:background .8s ease; pointer-events:none}
.ent-grade{position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),
                   linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000,transparent);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000,transparent)}

.ent-hero{position:relative; display:grid; gap:30px; align-items:center;
          grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) 340px;
          max-width:1400px; margin:0 auto; padding:26px 40px 70px}

.ent-selo{display:inline-flex; align-items:center; gap:8px; padding:6px 14px;
          background:#ffffff0f; border:1px solid #ffffff1f; border-radius:999px;
          font-size:12.5px; font-weight:600; color:#cfd6e6}
.ent-selo i{width:7px; height:7px; border-radius:50%; background:var(--good);
            box-shadow:0 0 10px var(--good)}
.ent-dizeres h1{font-size:clamp(34px,4.4vw,62px); line-height:.98; letter-spacing:-2px;
                margin:18px 0 0; font-weight:900}
.ent-dizeres h1 em{font-style:normal; display:block; transition:color .5s ease}
.ent-lead{color:var(--muted); font-size:17px; line-height:1.55; max-width:44ch; margin:16px 0 0}
.ent-cta{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap}
/* O PULSO — «tem gente aí?». Ele é uma LINHA, e não cartões: os números do
   servidor logo abaixo já são a fileira grande, e duas fileiras grandes coladas
   viram um painel de estatística no lugar de uma tela de entrada. Aqui o peso
   está só nos números, e o resto é texto corrido. */
.ent-pulso{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
           margin-top:22px; font-size:13px; color:var(--muted)}
.ent-pulso b{color:#fff; font-weight:800; font-size:14.5px}
.ent-pulso s{width:3px; height:3px; border-radius:50%; background:#ffffff33; text-decoration:none}
.ent-pulso span{display:inline-flex; align-items:center; gap:6px}
/* O PONTO VERDE É SÓ DO «AGORA». Ele quer dizer «isto está acontecendo neste
   segundo» — pô-lo também no «hoje» gastaria o único sinal de tempo real que a
   tela tem. */
.ent-pulso .vivo i{width:7px; height:7px; border-radius:50%; background:var(--good);
                   box-shadow:0 0 10px var(--good); animation:ent-bate 2.4s ease-in-out infinite}
@keyframes ent-bate{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.8)}}

.ent-numeros{display:flex; gap:30px; flex-wrap:wrap; margin-top:32px;
             padding-top:22px; border-top:1px solid var(--line)}
.ent-numeros b{display:block; font-size:23px; font-weight:900; color:#fff; line-height:1.15}
.ent-numeros span{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:1px}

.ent-pontos{display:flex; gap:9px; margin-top:28px}
.ent-pt{width:34px; height:4px; padding:0; border:0; border-radius:99px;
        background:#ffffff26; cursor:pointer; transition:width .25s, background .25s}
.ent-pt.on{background:var(--ouro); width:52px}

/* ------------------------------------------------------------------- arte */
.ent-arte{position:relative; display:grid; place-items:center; min-height:420px}
/* `img{image-rendering:pixelated}` é a regra do jogo inteiro, e é a certa para
   o desenho de 96 pixels. Aqui a arte é grande: pixelada, ela vira serrilha. */
.ent-arte img{width:100%; max-width:420px; height:auto; image-rendering:auto;
              filter:drop-shadow(0 40px 60px #000a); animation:ent-flutua 6s ease-in-out infinite}
.ent-emoji{font-size:170px; line-height:1; filter:drop-shadow(0 30px 50px #000a);
           animation:ent-flutua 6s ease-in-out infinite}
@keyframes ent-flutua{0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)}}
/* A entrada do bicho novo. Sem ela a troca de arte é uma imagem que some e
   outra que aparece — e o giro parece um erro de carregamento. */
.ent-arte.trocou img,
.ent-arte.trocou .ent-emoji{animation:ent-flutua 6s ease-in-out infinite, ent-chega .5s ease-out}
@keyframes ent-chega{from{opacity:0; transform:translateY(18px) scale(.94)} to{opacity:1}}
.ent-halo{position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
          filter:blur(60px); opacity:.4; transition:background .8s ease}
.ent-tipos{position:absolute; bottom:2%; left:50%; transform:translateX(-50%);
           display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.ent-tipo{background:#ffffff14; border:1px solid #ffffff24; border-radius:999px;
          padding:6px 14px; font-size:12px; font-weight:700; color:#fff;
          -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}

/* ----------------------------------------------------------------- cartão */
/* O formulário fica na PRIMEIRA DOBRA de propósito: quem já tem conta é a
   maioria de quem abre esta página, e todo dia. Fazer essa pessoa rolar a tela
   para ver dois campos é cobrar pedágio diário de quem já entrou. */
.ent-cartao{background:#11131d; border:1px solid var(--line); border-radius:20px;
            padding:26px 24px; box-shadow:0 30px 70px #0009}
.ent-cartao h3{margin:0; font-size:19px; font-weight:800; letter-spacing:-.3px}
.ent-cartao-sub{margin:6px 0 18px; font-size:13px; color:var(--muted); line-height:1.5}
.ent-cartao label{margin-top:12px; font-size:11.5px; text-transform:uppercase; letter-spacing:1px}
.ent-cartao .flash{margin:0 0 14px; font-size:13.5px}
.ent-ou{margin:16px 0 0; text-align:center; font-size:13px; color:var(--muted)}
.ent-ou a{color:var(--ouro); text-decoration:none; font-weight:700}

/* -------------------------------------------------------- o que dá para fazer */
.ent-faixa{border-top:1px solid var(--line); border-bottom:1px solid var(--line);
           background:#0c0e16; position:relative; z-index:2}
.ent-cards{max-width:1400px; margin:0 auto; padding:52px 40px;
           display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ent-cd{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px}
.ent-cd .ic{font-size:26px}
.ent-cd h4{margin:14px 0 6px; font-size:17px; font-weight:800}
.ent-cd p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.5}

/* O `.ent-rodape` SAIU na v3.46. A tela de entrada passou a usar o MESMO
   rodapé das telas de dentro (`views/rodape.php`, classe `.foot`), e a regra
   dele virou uma regra sem ninguém do outro lado — que é a próxima pessoa
   perdendo dez minutos procurando quem a usa. Já aconteceu nesta folha com o
   `.fighter` da arena, e o preço foi um defeito de layout que só apareceu num
   relato com foto. */

/* ---------------------------------------------------------------- estreito */
@media (max-width:1100px){
  .ent-hero{grid-template-columns:minmax(0,1fr) 320px; padding:20px 26px 56px}
  .ent-arte{grid-column:1 / -1; order:3; min-height:300px}
  .ent-arte img{max-width:300px}
}
@media (max-width:760px){
  .ent-topo{padding:14px 20px; gap:14px}
  .ent-hero{grid-template-columns:1fr; padding:16px 20px 44px}
  .ent-arte{order:2; min-height:240px}
  .ent-arte img{max-width:230px}
  .ent-emoji{font-size:110px}
  .ent-cartao{order:3}
  .ent-numeros{gap:20px}
  .ent-cards{padding:36px 20px}
}
/* Quem pediu menos movimento no sistema não quer um bicho subindo e descendo
   para sempre no canto da tela. O giro dos slides continua — ele é conteúdo. */
@media (prefers-reduced-motion: reduce){
  .ent-arte img, .ent-emoji{animation:none}
  .ent-arte.trocou img, .ent-arte.trocou .ent-emoji{animation:none}
  /* A LOGO PARA DE SE MEXER E A VARREDURA SOME — mas o halo FICA, parado num
     brilho médio. Quem pediu menos movimento não pediu uma tela mais pobre;
     pediu que as coisas não se mexam. */
  .logo-cx.anima{animation:none}
  .logo-cx.anima::after{display:none}
  .logo-cx.anima::before{animation:none; opacity:.32}
  /* O ponto verde para de pulsar, mas CONTINUA VERDE: ele é informação («isto é
     agora»), e não enfeite — apagá-lo tiraria o sentido da frase. */
  .ent-pulso .vivo i{animation:none}
}

/* A ABA 🚪 ENTRADA: um cartão por item da vitrine. Cada linha é um formulário
   próprio — salvar um destaque não pode depender de os outros estarem válidos.
   Ver pages/admin/entrada.php. */
.vit-item{padding:16px 18px}
/* O item desligado continua na lista, e tem que PARECER desligado sem sumir:
   quem desligou o destaque de Natal em março quer achá-lo em dezembro. */
.vit-item.off{opacity:.55; border-style:dashed}
.vit-topo{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
.vit-linha{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; align-items:flex-start}
.vit-linha label{margin-top:0}
.vit-linha input{margin:0}

/* A PRÉVIA É A ARTE DE VERDADE. Um campo «dex» com 448 dentro não diz nada; a
   única maneira de saber se é o bicho certo é ver o bicho. */
.vit-mini{flex:0 0 110px; width:110px; height:110px; border-radius:14px;
          border:1px solid var(--line); display:grid; place-items:center; overflow:hidden}
.vit-mini img{width:88%; height:88%; object-fit:contain; image-rendering:auto}
.vit-semarte{font-size:11px; color:var(--muted); text-align:center; padding:0 8px}
.vit-linha input[type=color]{padding:3px; height:38px; cursor:pointer}

/* A ABA 💎 PLANOS VIP. Cada nível e cada pacote é um formulário próprio —
   salvar um preço não pode depender de os outros estarem válidos.
   Ver pages/admin/planos.php. */
.pl-item{padding:14px 18px}
/* O nível desligado continua na lista e tem que PARECER desligado: aposentar
   um plano não é apagá-lo, e quem tem assinatura nele continua tendo. */
.pl-item.off{opacity:.6; border-style:dashed}
.pl-linha{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin:0}
.pl-linha label{margin-top:0}
.pl-linha input{margin:0}
.pl-linha input[type=color]{padding:3px; height:38px; cursor:pointer}
.pl-rot{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.8px;
        color:var(--muted); margin-bottom:5px}
.pl-selo{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px;
         color:#0b0e15; font-weight:900; font-size:14px; flex:0 0 30px}

/* A grade de benefícios: uma linha por benefício, uma coluna por nível. */
.pl-grade{font-size:13px}
.pl-grade td{vertical-align:middle}
.pl-num{display:inline-block; width:70px; text-align:center; padding:8px 5px; margin:0; vertical-align:middle}
/* O amarelo marca o degrau que anda para trás. É AVISO, e não trava: um valor
   igual em dois níveis pode ser de propósito — mas quase sempre é engano. */
.pl-num.torto{border-color:var(--warn); color:var(--warn)}
.pl-suf{color:var(--muted); margin-left:4px; vertical-align:middle}
.pl-grade td:has(.pl-num){white-space:nowrap}
/* A coluna do gratuito é leitura: ela parte do tunables.php, e um segundo campo
   para o mesmo número é a receita do dia em que os dois discordam. */
.pl-free{color:var(--muted); text-align:center; font-style:italic}

/* A LOJA: os cartões de recarga de PokéCoin. Cada um é um formulário próprio —
   o botão É o preço, porque numa vitrine de moeda a pergunta é sempre «quanto
   custa este aqui», e separar o preço do botão obriga a olhar duas vezes.
   Ver pages/loja.php. */
.lj-grade{display:grid; gap:14px; margin-top:16px;
          grid-template-columns:repeat(auto-fit, minmax(168px, 1fr))}
.lj-pack{position:relative; margin:0; padding:20px 16px 16px; text-align:center;
         background:var(--card2); border:1px solid var(--line); border-radius:16px}
/* O destaque é do pacote que a loja QUER vender — e é um só por vitrine, senão
   nenhum se destaca. */
.lj-pack.destaque{border-color:var(--warn); background:var(--realce-ouro)}
.lj-selo{position:absolute; top:-10px; left:50%; transform:translateX(-50%);
         background:var(--warn); color:#141a27; font-size:11px; font-weight:800;
         letter-spacing:.4px; text-transform:uppercase; padding:3px 11px; border-radius:999px;
         white-space:nowrap}
.lj-moedas{font-size:21px; font-weight:900; letter-spacing:-.5px}
.lj-bonus{font-size:13px; font-weight:700; color:var(--good); margin-top:2px; min-height:18px}
.lj-bonus.vazio{color:transparent}
.lj-nome{font-size:12.5px; color:var(--muted); margin:6px 0 12px}
.lj-pack .btn{margin-top:4px; font-size:15px; font-weight:800}
.lj-regua{display:block; margin-top:9px; color:var(--muted); font-size:11.5px; line-height:1.45}

/* O GRUPO DE OVO na Pokédex: um cartãozinho por grupo com a explicação do que
   ele junta. A explicação não é enfeite — «Field» e «Water 1» não dizem nada
   sozinhos, e o grupo é a única informação do Berçário que o jogador não
   descobre jogando. Ver core/Cruzamento.php. */
.ovo-cx{flex:1 1 240px; background:var(--card2); border:1px solid var(--line);
        border-radius:12px; padding:12px 14px}
.ovo-cx b{display:block; font-size:15px}
.ovo-cx small{display:block; color:var(--muted); font-size:12.5px; line-height:1.45; margin-top:3px}
.ovo-lista{display:flex; gap:8px; flex-wrap:wrap}
.ovo-chip{display:flex; align-items:center; gap:5px; text-decoration:none;
          background:var(--card2); border:1px solid var(--line); border-radius:999px;
          padding:3px 12px 3px 4px; font-size:12.5px}
.ovo-chip:hover{border-color:var(--accent)}
.ovo-chip img{width:28px; height:28px; object-fit:contain}

/* A MARCA DE HABILIDADE OCULTA nas listas. «✦» e não «✨»: o ✨ já é o shiny, e
   duas raridades com o mesmo símbolo na mesma linha não marcam nada. O âmbar é o
   mesmo da pílula «oculta» da ficha, para o olho ligar as duas telas.
   Ver selo_oculta() em core/helpers.php. */
.selo-oculta{color:var(--warn); font-size:13px; line-height:1; cursor:help;
             text-shadow:0 0 7px rgba(250,204,21,.45)}
/* 🔒 O CADEADO fica um ponto MENOR que os outros selos e sem brilho: ele não é
   uma qualidade da criatura (como o shiny ou a habilidade oculta), é um estado
   que o dono ligou. Chamar tanta atenção quanto um shiny faria a fileira de
   selos parecer que a criatura tem algo de especial. */
.selo-trancado{font-size:11.5px; line-height:1; cursor:help; opacity:.9}

/* ===================================================================== *
 *  AS MISSÕES (v2.58)                                                   *
 *                                                                       *
 *  Um cartão por missão, em LINHA e não em grade: a pergunta que a tela  *
 *  responde é «quanto falta», e quanto-falta se compara de cima para     *
 *  baixo. Numa grade de três colunas as barras ficam em alturas          *
 *  diferentes e o olho tem que caçar cada uma.                           *
 *  Ver pages/missoes.php.                                               *
 * ===================================================================== */
.ms-lista,.ms-trilha{display:flex; flex-direction:column; gap:10px}
.ms-item{display:flex; align-items:center; gap:14px; flex:1 1 auto; min-width:0;
         background:var(--card2); border:1px solid var(--line); border-radius:14px;
         padding:13px 16px}
/* A missão PRONTA é a única coisa da tela que pede um clique, então ela é a
   única que muda de cor. Verde em tudo não destacaria nada. */
.ms-item.pronta{border-color:var(--good); background:var(--realce-bom)}
/* E a resgatada apaga: ela continua na lista porque sumir daria a impressão de
   que o prêmio se perdeu — mas ela já não tem nada a dizer. */
.ms-item.paga{opacity:.55}
.ms-ico{flex:0 0 42px; width:42px; height:42px; border-radius:12px; display:grid;
        place-items:center; font-size:21px; background:var(--card); border:1px solid var(--line)}
.ms-corpo{flex:1 1 auto; min-width:0}
.ms-corpo b{display:block; font-size:15px; line-height:1.3}
.ms-corpo small{display:block; color:var(--muted); font-size:12.5px; line-height:1.45; margin-top:2px}
.ms-linha{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
          font-size:12px; color:var(--muted); margin-top:5px}
/* O prêmio fica na MESMA linha do progresso, à direita: «quanto falta» e «o que
   eu ganho» são as duas metades da mesma decisão, e separá-las em dois lugares
   da tela obriga a olhar duas vezes para decidir se vale a pena. */
.ms-premio{color:var(--text); font-weight:600; white-space:nowrap}
.ms-acao{flex:0 0 auto; display:grid; place-items:center; min-width:96px; text-align:center}
.ms-acao form{margin:0}
.ms-ok{color:var(--good); font-size:12.5px; font-weight:700}
.ms-falta{color:var(--muted); font-size:12px}

/* A TRILHA DA CAMPANHA: o número à esquerda é o que a faz parecer um caminho e
   não uma lista solta — é ele que diz «isto tem uma ordem, e você está aqui». */
.ms-passo{display:flex; align-items:center; gap:12px}
.ms-num{flex:0 0 26px; width:26px; height:26px; border-radius:999px; display:grid;
        place-items:center; font-size:12px; font-weight:800; color:var(--muted);
        background:var(--card2); border:1px solid var(--line)}
.ms-passo.feito .ms-num{background:var(--good); border-color:var(--good); color:#0b0e15}

@media (max-width:640px){
  /* No celular a coluna do botão desce para baixo do texto: espremida ao lado,
     ela come metade da largura do título. */
  .ms-item{flex-wrap:wrap}
  .ms-acao{min-width:0; width:100%; justify-items:stretch}
  .ms-acao .btn{width:100%}
}

/* ===================================================================== *
 *  ⚔️ ATQ. NPC — as bandas de nível (v2.59)                             *
 *                                                                       *
 *  Quatro cartões e um botão. O cartão inteiro é o alvo do clique (o     *
 *  <label> embrulha o radio), porque um alvo de 12 pixels no celular é   *
 *  um alvo que se erra — e errar aqui manda o time para uma luta de      *
 *  outro tamanho. Ver pages/npc.php.                                    *
 * ===================================================================== */
.fx-grade{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr))}
.fx-cx{display:flex; align-items:flex-start; gap:10px; margin:0; cursor:pointer;
       background:var(--card2); border:1px solid var(--line); border-radius:14px;
       padding:14px 15px; transition:border-color .12s, background .12s}
.fx-cx:hover{border-color:var(--accent)}
/* :has() marca o cartão escolhido sem uma linha de JS. Onde o navegador não o
   entende, o radio continua marcado e a escolha continua funcionando — só não
   fica pintada. É a degradação certa: o que se perde é enfeite. */
.fx-cx:has(input:checked){border-color:var(--accent); background:#141d2e}
.fx-cx input{width:17px; height:17px; margin:2px 0 0; flex:0 0 auto; cursor:pointer}
.fx-corpo{min-width:0}
.fx-nivel{display:block; font-size:17px; font-weight:800; letter-spacing:-.3px; line-height:1.2}
.fx-quantos{display:block; color:var(--muted); font-size:11.5px; line-height:1.4; margin-top:3px}
.fx-premio{display:block; font-size:12.5px; margin-top:5px}
/* O BÔNUS DA FAIXA (v2.61). Fica na cor do ganho quando existe e apaga quando é
   zero — a linha continua ali nos dois casos, porque um cartão que perde uma
   linha muda de altura e a grade inteira treme ao trocar de faixa. */
.fx-bonus{display:block; font-size:12px; font-weight:700; color:var(--good); margin-top:4px}
.fx-bonus.zero{color:var(--muted); font-weight:500}

/* A OVO LOJA (v2.62). O `pl-check` é a caixa de sim/não do painel — ela vinha
   sendo escrita à mão, com o mesmo `style=` de sete propriedades, em cada
   formulário novo. `width:auto` é a linha que importa: sem ela a regra geral do
   painel estica a caixinha para a largura do campo. */
.pl-check{display:flex; gap:7px; align-items:center; margin:0 0 9px;
          color:var(--text); font-size:13px; white-space:nowrap}
.pl-check input{width:auto; margin:0}
/* Moeda e preço na MESMA célula da tabela do catálogo: são um valor só, e
   separá-los em duas colunas faria «12.000» aparecer longe de «PokéCoin». */
.ov-preco{display:flex; gap:6px; align-items:center}
.ov-preco select{width:auto; min-width:96px; margin:0}
.ov-preco input{width:104px; margin:0}

/* A ESTADIA DO DAY CARE (v2.59): o treino ganho e a conta que ele gera, na
   mesma linha e logo acima do botão que cobra. Conta que só aparece depois do
   clique é conta que vira reclamação. Ver pages/daycare.php. */
.dc-estadia{display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
            font-size:12px; margin-bottom:8px; min-height:17px}
.dc-treino{color:var(--good); font-weight:600}
.dc-espera{color:var(--muted)}
.dc-conta{color:var(--muted)}
.dc-conta b{color:var(--warn)}

/* ===================================================================== *
 *  💰 A ABA ECONOMIA (v2.59)                                            *
 *                                                                       *
 *  Quatro números grandes e uma frase. A tela toda existe para responder *
 *  uma pergunta — «está nascendo mais dinheiro do que morrendo?» —, e o  *
 *  líquido é a resposta: por isso ele é o maior e fica no meio.          *
 *  Ver pages/admin/economia.php.                                        *
 * ===================================================================== */
.ec-placar{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr))}
.ec-num{background:var(--card2); border:1px solid var(--line); border-radius:14px;
        padding:14px 16px; text-align:center}
.ec-num b{display:block; font-size:21px; font-weight:800; letter-spacing:-.4px; margin-top:4px}
.ec-num small{display:block; color:var(--muted); font-size:11.5px; margin-top:5px; line-height:1.45}
.ec-rot{font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted)}
.ec-destaque{background:var(--card); border-color:var(--accent)}
.ec-destaque b{font-size:26px}
/* Verde é «morreu mais», vermelho é «nasceu mais» — e não o contrário. Aqui a
   cor não marca lucro: marca se a moeda está inflando. */
.ec-bom{color:var(--good)}
.ec-mau{color:var(--warn)}

/* A faixa de nível e a de prêmio do NPC, na aba Conteúdo: duas caixinhas com um
   travessão no meio, para a linha ser lida como «de X a Y» e não como dois
   campos soltos. O amarelo é o mesmo aviso da escada torta do VIP — marca o que
   provavelmente é engano, sem impedir. */
.tr-faixa{white-space:nowrap}
/* LARGO O BASTANTE PARA O MAIOR NÚMERO DO JOGO. Eram 62px, e caberia até «999»
   — mas o prêmio de um NPC de Liga passa dos 60.000, e com a setinha do
   `input[type=number]` por cima o valor ficava cortado justamente onde ele
   importa. 104px cabem sete dígitos com folga. */
.tr-faixa input{display:inline-block; width:104px; margin:0; text-align:center;
                padding:8px 6px; font-size:14px}
.tr-faixa span{color:var(--muted); padding:0 5px}

/* O campo das bandas, na aba Conteúdo: formulário próprio e acima da tabela,
   porque as bandas são o eixo — a faixa de cada treinador só quer dizer alguma
   coisa em relação a elas. */
.fx-bandas{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin:0 0 16px}
.fx-bandas input{margin:0}

/* A CHANCE E A PORCENTAGEM QUE ELA VIRA, lado a lado na aba Conteúdo. O campo é
   um PESO e a porcentagem é o que ele significa dentro da região — mostrar as
   duas coisas juntas é o que evita ter de fazer a conta de cabeça a cada
   ajuste. Ver core/Npc.php. */
.tr-chance{white-space:nowrap}
.tr-chance input{display:inline-block; width:70px; margin:0; text-align:center; padding:8px 6px}
.tr-pct{display:inline-block; min-width:52px; text-align:right; color:var(--muted); font-size:12.5px}
/* Peso zero está FORA do sorteio, e 0,0% é a informação certa — mas apagada,
   para não competir com as linhas que valem alguma coisa. */
.tr-pct.zero{opacity:.45}

/* O RESUMO DE GANHOS no fim da batalha (v2.59.6). Uma pílula por ganho, e a EXP
   das criaturas numa linha própria: são coisas diferentes com o mesmo nome
   («EXP» da criatura e «EXP» de treinador), e pô-las lado a lado sem rótulo era
   o que fazia os dois números parecerem contradizer um ao outro.
   Ver pages/battle.php. */
.ganhos{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0}
.ganhos.exp{margin-top:7px}
.gn{background:var(--card2); border:1px solid var(--line); border-radius:999px;
    padding:5px 13px; font-size:13px; color:var(--muted)}
.gn b{color:var(--text)}

/* 🎁 O QUE A CRIATURA LARGOU (v3.221) — o único selo desta tela com cor.
   E é por um motivo, não por enfeite: a EXP o jogador reencontra na ficha da
   criatura a qualquer momento; o item, se ele não ler AQUI, vira um número que
   mudou na mochila sem explicação. Foi exatamente isso que aconteceu por
   versões — o drop era entregue e nunca anunciado. */
.ganhos.drops{margin-top:7px}
.ganhos.drops .gn{
  border-color:var(--good); background:#13291d; color:var(--text);
}
.ganhos.drops .gn b{color:var(--good)}

/* ====================================================================
   A PELE DA CASA (v2.70) — capa, fundo e tema claro.

   Três coisas moram aqui, e nenhuma delas mexe numa linha das 1798 de
   cima: o tema escuro continua sendo EXATAMENTE o que sempre foi, e é
   ele que vale quando `data-tema` não diz nada. Um ajuste de painel que
   não tem volta não é um ajuste — é uma reforma.

   As MEDIDAS vêm do `<style>` que o `layout.php` escreve no topo da
   página, e não daqui: altura da capa, recorte da imagem e força do véu
   são números do painel. O que mora nesta folha é a FORMA.
   ==================================================================== */

/* ------------------------------------------------------------- o fundo */
/* O VÉU DO ESCURO É PRETO, e o do claro é branco — o tema troca esta linha
   lá embaixo. Clarear um tema escuro com branco deixa tudo cinza-leitoso, e
   escurecer um claro com preto faz o mesmo ao contrário. O valor de `--veu`
   aqui é só a rede: quem manda é o número do painel, escrito pelo layout. */
:root{ --veu-cor:8 12 22; --veu:.55 }

/* A imagem fica PRESA (`fixed`): rolar a página move o conteúdo e não o
   mundo atrás dele — é o que dá a sensação de janela em vez de papel de
   parede escorregando. */
body.com-fundo{
  background-image:var(--tema-fundo);
  background-position:center var(--tema-fundo-y, 45%);
  background-size:cover;
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* O VÉU É QUEM DECIDE SE DÁ PARA LER. Um desenho feito para ser olhado
   tem contraste demais para servir de fundo de tabela; esta camada tira
   dele o tanto necessário para o texto ganhar. Ela é `fixed` e mora atrás
   de tudo (`z-index:-1`), então nunca cobre nem come clique de nada. */
body.com-fundo::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,
    rgb(var(--veu-cor) / calc(var(--veu) * .68)),
    rgb(var(--veu-cor) / var(--veu)) 55%,
    rgb(var(--veu-cor) / calc(var(--veu) * 1.25)));
}

/* -------------------------------------------------------------- a capa */
/* A faixa do topo. Ela NÃO é o fundo com outro nome: o fundo mostra
   pedaços da arte em volta do conteúdo, a capa mostra a arte inteira uma
   vez só. Por isso as duas podem conviver — e convivem. */
.capa{
  position:relative; height:var(--capa-h, 320px);
  margin:0 0 calc(0px - var(--capa-sobe, 120px));
  background:var(--capa-img) center var(--capa-y, 30%) / cover no-repeat;
}
/* A sombra da ESQUERDA existe só para o nome ter onde se apoiar. Escurecer
   a imagem inteira para escrever quatro letras seria pagar caro demais. */
/* E O `>` DO `.capa > b` LOGO ABAIXO NÃO É ENFEITE (v3.21). O seletor era
   DESCENDENTE, e enquanto a capa só teve a logo dentro ninguém notou. Com o
   painel do treinador montado ali, ele passou a pegar os catorze `<b>` do
   painel: todos viraram absolutos, a 30px, empilhados no mesmo canto — a tela
   ficou com «462.229.583» gigante atravessado por cima do desenho. Filho
   direto é o que a regra sempre quis dizer: ela é do NOME ESCRITO que aparece
   quando não há arquivo de logo. */
.capa::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg,#0009,#0000 42%);
}
/* A EMENDA DE BAIXO É UMA MÁSCARA, E NÃO UMA CORTINA.
   A primeira tentativa foi um degradê por cima da imagem terminando na cor do
   tema. Funciona numa página de cor lisa — e num jogo com FUNDO vira uma
   faixa branca atravessada na tela, escondendo justamente a paisagem que
   deveria continuar ali atrás. A máscara não pinta nada: ela apaga a capa aos
   poucos, e quem aparece por baixo é o fundo. As duas imagens viram uma. */
.capa{
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
}
.capa > b{
  position:absolute; left:34px; bottom:calc(var(--capa-sobe, 120px) + 30px);
  z-index:1; font-size:30px; letter-spacing:1px; color:#fff; font-weight:800;
  text-shadow:0 3px 10px #000c, 0 0 30px #0008;
}
/* --------------------------------------------------------------- a logo
   Ela mora NA CAPA, e a barra de topo continua com o nome escrito: um letreiro
   de duas linhas com subtítulo não sobrevive aos 40px da barra, e a capa é a
   única superfície da tela onde a logo cabe do jeito que foi desenhada.

   O TRILHO É O TRUQUE INTEIRO. Ele repete a largura máxima e o respiro do
   `.shell`, então a borda direita da logo cai exatamente onde o conteúdo
   termina — em qualquer largura de tela, e sem ninguém ter que refazer a conta
   quando o `.shell` mudar de tamanho. Um `right:` em pixels acertaria só no
   monitor em que foi ajustado. */
.capa-trilho{
  position:absolute; left:0; right:0; top:0; z-index:1;
  /* PARA a altura onde o conteúdo começa a subir por cima: centrar na imagem
     INTEIRA jogaria a logo para debaixo do primeiro cartão. O centro que
     interessa é o da parte que se vê. */
  bottom:var(--capa-sobe, 120px);
  max-width:1180px; margin:0 auto; padding:0 18px;
  display:flex; align-items:center; justify-content:flex-end;
  /* a capa não é clicável, e um retângulo invisível de 200px por cima dela
     roubaria o clique de quem quer alcançar o que está atrás */
  pointer-events:none;
}
/* O `<picture>` do webp NÃO PODE VIRAR UMA CAIXA no meio do caminho: ele seria
   o filho do flex, e o `max-height:96%` da logo passaria a medir a altura DELE
   em vez da faixa da capa — a logo encolheria para o tamanho de si mesma. Com
   `display:contents` ele some da conta e quem se alinha continua sendo a
   imagem. */
.capa-trilho picture{display:contents}
/* A CAIXA DA LOGO existe por causa da animação, e não do desenho.
   A varredura de brilho é um degradê recortado no FORMATO da logo — e recortar
   exige uma segunda camada por cima da imagem, que exige um pai posicionado. A
   imagem sozinha não tem onde pendurar um `::after`.

   A ALTURA É DEFINIDA (`height`), e não um teto (`max-height`): a caixa encolhe
   para o tamanho do que tem dentro, então uma altura só de teto não resolveria
   a porcentagem, e a máscara não teria contra que medida se alinhar. Com a
   altura definida aqui e `height:100%` na imagem, as duas ocupam exatamente a
   mesma caixa — que é a condição para o recorte cair em cima do desenho. */
.logo-cx{position:relative; display:inline-block}
/* AS MEDIDAS SÃO DA CAPA, e agora está escrito (v3.12). Elas moravam no
   `.logo-cx` solto, que é a MESMA caixa usada na barra de topo e no cartaz da
   entrada — e um `max-width:300px` escrito para a capa apertava, calado, um
   cartaz de 760px do outro lado do site. Medida de um lugar tem que carregar o
   nome do lugar. */
.capa-trilho .logo-cx{
  /* QUEM MANDA CONTINUA SENDO A ALTURA: a capa tem 200px de altura fixa e
     largura de sobra, então é a altura que acaba primeiro. A largura é só um
     freio, para a logo não invadir o meio do desenho numa tela larga.

     O FREIO SUBIU DE 300 PARA 380px (v3.14), porque a arte mudou de forma. A
     logo antiga era quase quadrada; a nova é DEITADA (16 por 9), com as
     criaturas lado a lado e o letreiro embaixo. Na altura cheia da capa ela
     pede ~340px de largura — com o teto antigo em 300 a altura é que era
     sacrificada, e a logo encolhia sozinha deixando um vão em cima e embaixo.
     Cortar os bichos para caber era a saída errada: eles são metade da logo. */
  height:96%; max-width:min(40%, 380px);
}
.capa-logo{
  position:relative; z-index:1; display:block;
  height:100%; width:auto; max-width:100%; object-fit:contain;
  filter:drop-shadow(0 6px 20px #000b);
}

/* ---------------------------------------------------------- a animação
   Três camadas, e cada uma responde a uma parte do «mexendo e brilhando»:

     · A FLUTUAÇÃO é um `transform` na caixa. Transform é a única propriedade
       de movimento que não obriga o navegador a redesenhar nada — ele só
       reposiciona uma textura que já está pronta.
     · O HALO é uma mancha borrada ATRÁS da imagem, e o que pulsa nela é a
       OPACIDADE. A tentação era animar `filter:drop-shadow` na própria logo;
       isso reprocessa uma imagem de 500px a cada quadro, para sempre, na tela
       inicial de todo mundo. Opacidade é de graça.
     · A VARREDURA é o único efeito que precisa saber a FORMA da logo, e é por
       isso que ela usa a imagem como MÁSCARA: o clarão só existe onde há
       desenho, e some no vazio à volta. Sem a máscara seria uma faixa branca
       atravessando um retângulo — o efeito de banner barato.

   A máscara aponta para o MESMO arquivo que o `<picture>` escolheu (o webp
   quando ele vale), senão o navegador baixaria a logo duas vezes só para
   desenhar um brilho. Quem manda no endereço é o PHP, pelo `--logo-img`. */
/* O RITMO VEM DE FORA, por variável: a mesma máquina serve à logo da capa (que
   é grande e boia devagar) e à marca da tela de entrada (que é menor e por isso
   precisa de um gesto mais vivo para o movimento ser notado). Duas cópias do
   bloco inteiro só para trocar dois números seria duas coisas para consertar. */
.logo-cx.anima{animation:logo-flutua var(--logo-t, 6s) ease-in-out infinite}
/* `.gira` acrescenta o balanço. A rotação NÃO pode ser uma segunda animação:
   duas animações mexendo em `transform` ao mesmo tempo é a última que vence, e
   a flutuação simplesmente sumiria. Por isso é outro `@keyframes`, com as duas
   coisas dentro do mesmo `transform`. */
.logo-cx.anima.gira{animation-name:logo-balanca}
.logo-cx.anima::before,
.logo-cx.anima::after{content:''; position:absolute; pointer-events:none}
/* o halo: atrás da imagem, respirando */
.logo-cx.anima::before{
  inset:4% -4% -2%; z-index:0;
  background:radial-gradient(52% 48% at 50% 62%, #8fd0ff, transparent 72%);
  filter:blur(14px); opacity:.28;
  animation:logo-halo 4.6s ease-in-out infinite;
}
/* a varredura: por cima, recortada no formato da logo */
.logo-cx.anima::after{
  inset:0; z-index:2; mix-blend-mode:screen;
  background:linear-gradient(102deg,
    transparent 40%, #ffffff40 46%, #ffffffc0 50%, #ffffff40 54%, transparent 60%);
  background-size:230% 100%; background-repeat:no-repeat;
  -webkit-mask-image:var(--logo-img);      mask-image:var(--logo-img);
  -webkit-mask-size:contain;               mask-size:contain;
  -webkit-mask-repeat:no-repeat;           mask-repeat:no-repeat;
  -webkit-mask-position:center;            mask-position:center;
  animation:logo-varre var(--logo-brilho, 6s) ease-in-out infinite;
}
@keyframes logo-flutua{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
/* O BALANÇO: sobe e desce girando 4 graus para cada lado. Os dois movimentos
   moram no MESMO `transform` porque duas animações disputando essa propriedade
   se anulam — a última declarada apaga a outra. */
@keyframes logo-balanca{
  0%,100%{transform:translateY(0)    rotate(-4deg)}
  50%    {transform:translateY(-9px) rotate( 4deg)}
}
@keyframes logo-halo{0%,100%{opacity:.22} 50%{opacity:.5}}
/* O BRILHO PASSA E DESCANSA. Uma varredura contínua é um letreiro de loja
   piscando: em cinco minutos ninguém aguenta mais olhar para a tela inicial.
   Ela cruza em um segundo e some pelos cinco seguintes. */
@keyframes logo-varre{
  0%   {background-position:-40% 0}
  18%  {background-position:170% 0}
  100% {background-position:170% 0}
}
/* A SOMBRA TROCA DE LADO quando há logo. O degradê da esquerda existia só para
   o nome escrito ter onde se apoiar; com a logo à direita, ele escurece o lado
   errado e deixa o letreiro por conta da sorte da imagem que estiver por trás —
   e a capa é um arquivo que o dono troca quando quer. */
.capa.com-logo::before{background:linear-gradient(270deg,#0009,#0000 46%)}
@media (max-width:760px){
  /* Na tela estreita a capa é baixa e o conteúdo sobe quase até o topo: a logo
     centralizada fica espremida contra o primeiro cartão. Ela volta para o meio
     e ganha mais largura, que é o que sobra quando não há espaço lateral. */
  .capa-trilho{justify-content:center; padding:0 14px}
  .capa-trilho .logo-cx{max-width:56%; height:94%}
}

/* O conteúdo SOBE por cima da borda de baixo da imagem. É esse dedo de
   sobreposição que costura as duas metades da tela. */
.capa + .shell{position:relative; z-index:1}

/* No celular a capa vira um talho: 320px de altura numa tela de 640px é
   metade do telefone gasta em enfeite antes do primeiro botão. */
@media (max-width:720px){
  /* A SOBREPOSIÇÃO VIRA VARIÁVEL, e não um `margin-bottom` escrito à mão.
     Ela era `-40px` fixo aqui enquanto o resto da folha lia `--capa-sobe`
     (120px) — dois números para a mesma medida, e o segundo não sabia do
     primeiro. Quem paga é qualquer coisa posicionada pela variável: a logo,
     que se centra na parte VISÍVEL da capa, calculava 120px de desconto numa
     faixa que só tinha 40, e encolhia a um terço do tamanho no celular. */
  .capa{--capa-sobe:40px; height:calc(var(--capa-h, 320px) * .55)}
  .capa > b{font-size:22px; left:18px; bottom:56px}
}


/* ==========================================================================
   🏆 TORNEIO — os cartões e a tela de um torneio só (v3.06)
   O histórico era uma tabela de quatro colunas (número, data, campeão, bolo) e
   nada ali dizia o que aquele torneio TINHA SIDO. Agora cada um é um cartão com
   o pódio dentro, e «ver detalhes» abre a tela inteira.
   ========================================================================== */
.tn-grade{display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:14px}
.tn-cx{border:1px solid var(--line); border-radius:14px; padding:14px 16px 13px;
       background:var(--card2); display:flex; flex-direction:column; gap:9px}
/* O que está acontecendo AGORA ganha borda: numa lista de dez cartões iguais,
   achar o que está de pé não pode exigir ler dez rótulos. */
.tn-cx.vivo{border-color:var(--warn); box-shadow:0 0 0 1px #fbbf2433}
.tn-topo{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tn-num{font-size:11px; font-weight:800; letter-spacing:.9px; padding:4px 10px;
        border-radius:999px; border:1px solid var(--line); background:var(--card);
        color:var(--muted); white-space:nowrap}
.tn-estado{font-size:12px; font-weight:600}
.tn-tit{margin:0; font-size:16.5px; line-height:1.3}
.tn-tit-g{margin:8px 0 0; font-size:clamp(19px, 2.4vw, 27px); line-height:1.2;
          text-transform:uppercase; letter-spacing:-.3px}
.tn-chips{display:flex; gap:7px; flex-wrap:wrap}
.tn-chip{font-size:12px; color:var(--muted); padding:3px 9px; border-radius:999px;
         border:1px solid var(--line); background:var(--card); white-space:nowrap}
.tn-rot{font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted)}

/* o pódio do cartão: três caixas lado a lado, cor por lugar */
.tn-podio{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
.tn-lug{display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 6px;
        border-radius:10px; border:1px solid var(--line); background:var(--card);
        text-decoration:none; color:var(--text); min-width:0}
.tn-lug b{font-size:12.5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tn-lug .tn-med{font-size:17px; line-height:1}
.tn-lug:hover{border-color:var(--accent)}
.tn-lug.l1{border-color:#a1741f; background:linear-gradient(180deg,#3b2f13,var(--card))}
.tn-lug.l2{border-color:#5b6c7a; background:linear-gradient(180deg,#1d2836,var(--card))}
.tn-lug.l3{border-color:#7a3f1d; background:linear-gradient(180deg,#32200f,var(--card))}
.tn-pe{display:flex; align-items:center; justify-content:space-between; gap:10px;
       margin-top:auto; padding-top:4px}

/* a paginação: dois botões e «5 / 15» no meio, e nada mais. Uma fileira de
   quinze números numa lista que se percorre em ordem é ruído. */
/* ---------------------------------------------- o quadro de regras (v3.44)
   DUAS COLUNAS DE LINHAS, e não uma tabela: o conteúdo é rótulo → valor, e uma
   `<table>` de duas células por linha traria consigo bordas, alinhamento por
   coluna e um `<th>` que não existe. Aqui cada linha é independente, e a grade
   só decide quantas cabem lado a lado. */
.tn-regras{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:0 22px; margin-top:12px}
.tn-rg{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 2px; border-bottom:1px solid var(--line)}
.tn-rg-k{color:var(--muted); font-size:13px}
.tn-rg-v{font-size:14px; text-align:right; white-space:nowrap}
/* A LINHA LARGA atravessa as duas colunas: ela guarda listas e pastilhas, que
   não cabem na coluna estreita da direita sem virar duas linhas de texto. */
.tn-rg-larga{margin-top:14px}
.tn-rg-larga .tn-rg-k{display:block; margin-bottom:7px}
.tn-rg-lista{margin:0; padding-left:18px; font-size:13.5px; line-height:1.7}
.tn-tiers{display:flex; flex-wrap:wrap; gap:7px}
/* A PASTILHA PROIBIDA É VERMELHA e a limitada é âmbar: são duas informações
   diferentes («nenhum» e «até dois»), e a mesma cor faria a pessoa ler o número
   para descobrir qual é qual. */
.tn-tier{font-size:11.5px; font-weight:800; letter-spacing:.4px; padding:4px 10px;
  border-radius:999px; background:#b4530922; color:#f0b429; border:1px solid #b4530955}
.tn-tier.fora{background:#dc262622; color:#f87171; border-color:#dc262655}

/* 🚫 OS BANIDOS, DESENHADOS (v3.49). O quadro dizia «4 espécies estão fora» e
   guardava quais para si; agora ele mostra. Três decisões:
   · O DESENHO VEM APAGADO (cinza, meio transparente) e acende no `:hover`. Ele
     é uma PROIBIÇÃO, e um bichinho colorido e brilhante numa lista de coisas
     proibidas lê como convite. Quem passar o dedo em cima vê a criatura
     inteira, que é quando ele deixou de ser um aviso e virou uma pergunta.
   · A BORDA É VERMELHA como a da pastilha `.tn-tier.fora` — é a mesma coisa
     dita duas vezes na mesma tela, e duas cores diferentes para «proibido»
     seriam duas regras para o olho aprender.
   · O NOME FICA EMBAIXO. Ninguém reconhece 1.025 espécies de vista, e um
     desenho sem nome numa lista de proibições vira dúvida. */
.tn-fora{display:flex; flex-wrap:wrap; gap:8px}
.tn-fora-i{display:flex; flex-direction:column; align-items:center; gap:2px; width:76px;
  padding:6px 4px 5px; border-radius:10px; background:#dc262614;
  border:1px solid #dc262644; cursor:help}
.tn-fora-i img{width:52px; height:52px; object-fit:contain; image-rendering:auto;
  filter:grayscale(.45); opacity:.88; transition:filter .14s, opacity .14s}
.tn-fora-i:hover img{filter:none; opacity:1}
.tn-fora-i span{font-size:10.5px; font-weight:700; color:#f0a1a1; line-height:1.2;
  text-align:center; overflow-wrap:anywhere}

/* ------------------------------------------------- o cronograma (v3.44) */
.tn-crono{margin-top:12px}
.tn-cr{display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:12px;
  padding:9px 2px; border-bottom:1px solid var(--line)}
.tn-cr:last-child{border-bottom:0}
.tn-cr-k{color:var(--muted); font-size:13px}
.tn-cr-v{font-size:13.5px; font-weight:700; white-space:nowrap}
/* O «em 2h» é uma pastilha e não texto solto: ele muda a cada carregamento da
   página, e a pastilha é o que diz «isto é um relógio, não uma data». */
.tn-cr-q{font-size:11px; color:var(--muted); background:var(--card2);
  border:1px solid var(--line); border-radius:999px; padding:2px 8px; min-width:54px;
  text-align:center; white-space:nowrap}
.tn-cr-q:empty{border:0; background:none}

.tn-inscritos{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.tn-insc{display:inline-flex; align-items:center; gap:5px; padding:5px 11px;
  border-radius:999px; background:var(--card2); border:1px solid var(--line);
  text-decoration:none; color:var(--text); font-size:12.5px}
.tn-insc:hover{border-color:var(--accent)}
.tn-insc small{color:var(--muted); font-size:11px}

/* A premiação DENTRO do cartão da lista — linhas, e não os blocos grandes da
   tela de detalhe: no cartão ela é referência, e ali é a manchete. */
.tn-prem-lista{display:flex; flex-direction:column; gap:5px}
.tn-prem-lin{display:flex; align-items:center; gap:8px; padding:7px 11px;
  background:var(--card2); border:1px solid var(--line); border-radius:9px; font-size:13px}
.tn-prem-lin .tn-prem-med{font-size:15px; line-height:1}
.tn-prem-lin small{color:var(--muted)}

/* As duas colunas do cronograma viram uma só cedo: elas são densas, e a coluna
   de 300px já corta as datas. */
@media (max-width:900px){ .tn-duo{grid-template-columns:1fr} }

.tn-pag{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px}
.tn-pag span{color:var(--muted); font-size:13px; min-width:60px; text-align:center}
/* A seta da ponta continua VISÍVEL e apagada, e não some: um botão que
   desaparece move os outros de lugar, e aí o dedo que ia clicar em «próxima»
   acerta o «anterior» na última página. */
.tn-pag .off{opacity:.35; pointer-events:none}

/* ---------------------------------------------------- a tela de um torneio */
.tn-cabeca{position:relative; overflow:hidden}
/* O troféu é marca-d'água: ele diz «isto é um campeonato» sem ocupar uma linha
   de texto, e some atrás do conteúdo em vez de disputar com ele. */
.tn-trofeu{position:absolute; right:18px; top:50%; transform:translateY(-50%);
           font-size:76px; opacity:.10; pointer-events:none; line-height:1}
.tn-secao{margin:0 0 4px; font-size:12px; letter-spacing:1.3px; text-transform:uppercase;
          color:var(--muted); border-left:3px solid var(--accent); padding-left:9px}

.tn-premios{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px}
.tn-prem{border:1px solid var(--line); border-radius:12px; padding:12px 10px; text-align:center;
         background:var(--card2)}
.tn-prem-med{font-size:22px; line-height:1}
.tn-prem-val{font-size:16px; font-weight:800; margin-top:4px}
.tn-prem-extra{font-size:11.5px; color:var(--muted); margin-top:3px}
.tn-prem.p1{border-color:#a1741f} .tn-prem.p2{border-color:#5b6c7a} .tn-prem.p3{border-color:#7a3f1d}

/* O QUADRO DE PRÊMIOS DO PAINEL (v3.48). Ele era uma tabela de oito colunas com
   ids digitados à mão, e uma tabela dessas no celular vira rolagem lateral em
   cima de campo de formulário — a pior combinação que existe. Agora é um cartão
   por lugar: cada campo tem o nome escrito em cima, e os quatro cartões se
   arrumam sozinhos na largura que houver. */
.pr-grade{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:12px}
.pr-lugar{border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--card2)}
.pr-tit{font-weight:700; font-size:13.5px}
.pr-lugar label{display:block; font-size:12px; color:var(--muted)}
.pr-lugar input, .pr-lugar select{width:100%; margin-top:3px}
/* O ESPAÇO É DO FILHO DIRETO, e não de todo `label`. Com `margin-top` em
   qualquer label, os dois de dentro de um `.pr-par` recebiam recuos diferentes
   — o primeiro zerado por `:first-of-type`, o segundo não — e o par saía
   torto na tela. Foi a renderização que mostrou; o código parecia certo. */
.pr-lugar > label, .pr-lugar > .pr-par{margin-top:10px}
/* DOIS CAMPOS QUE SE LEEM JUNTOS ficam lado a lado — «Item» e «Qtd» separados
   em duas linhas são duas perguntas; na mesma linha são uma. O `flex-end`
   alinha pelos CAMPOS: «Ovo (espécie)» e «IVs em 31» têm rótulos de alturas
   diferentes quando um deles quebra em duas linhas. */
.pr-par{display:flex; gap:8px; align-items:flex-end}
.pr-par label{flex:1; min-width:0}

/* O PÓDIO EM DEGRAUS. A altura de cada bloco é a única coisa desta tela que não
   precisa de legenda — e o 1º fica no MEIO, como em pódio de verdade: à
   esquerda, a ordem de leitura brigaria com a altura. */
.tn-degraus{display:flex; align-items:flex-end; justify-content:center; gap:10px; flex-wrap:wrap}
.tn-deg{display:flex; flex-direction:column; align-items:center; width:130px; max-width:31%}
.tn-deg-quem{display:flex; flex-direction:column; align-items:center; gap:2px;
             text-decoration:none; color:var(--text); margin-bottom:6px; max-width:100%}
.tn-deg-quem img{width:64px; height:64px; object-fit:contain; image-rendering:pixelated}
/* O retrato do pódio passou a vir do `Vestir::html()` (v3.79), e ele traz a
   própria medida no `style` — a regra acima continua valendo para o `img` de
   dentro, que ocupa 100% dele. */
.tn-deg-quem .tr-retrato img{width:100%; height:100%}
.tn-deg-quem b{font-size:12.5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tn-deg-bloco{width:100%; border-radius:9px 9px 0 0; display:flex; align-items:flex-start;
              justify-content:center; padding-top:8px; font-weight:900; font-size:15px; color:#1a1a1a}
.tn-deg.d1 .tn-deg-bloco{height:92px; background:linear-gradient(180deg,#fbd35f,#d99a1e)}
.tn-deg.d2 .tn-deg-bloco{height:66px; background:linear-gradient(180deg,#dfe6ef,#a9b4c4)}
.tn-deg.d3 .tn-deg-bloco{height:52px; background:linear-gradient(180deg,#e0a06a,#b46a2e)}

.tn-resto{display:flex; flex-wrap:wrap; gap:7px}
.tn-part{font-size:12.5px; padding:5px 11px; border-radius:999px; border:1px solid var(--line);
         background:var(--card2); text-decoration:none; color:var(--text)}
.tn-part:hover{border-color:var(--accent)}

@media (max-width:640px){
  .tn-grade{grid-template-columns:1fr}
  .tn-trofeu{display:none}
  .tn-deg{width:104px}
  .tn-deg-quem img{width:52px; height:52px}
}

/* ==================================================================== */
/* O TEMA CLARO                                                          */
/* ==================================================================== */
/* Ele é um BLOCO DE EXCEÇÕES, e não uma segunda folha de estilo. Tudo o
   que já funciona nos dois (as cores de tipo, as barras de HP, os selos
   de raridade) não aparece aqui — repetir essas regras seria criar duas
   verdades para a mesma cor e descobrir a divergência meses depois. */
/* ------------------------------------------- o cartão da volta (v2.83) */
/* «O que aconteceu enquanto você esteve fora». Ele é a PRIMEIRA coisa da tela
   inicial e some ao ser fechado, então tem dois trabalhos que brigam entre si:
   ser notado sem parecer um erro. Daí a borda de destaque (a mesma linguagem do
   `.hud-passo`, que o jogador já conhece) e nenhuma cor de alerta: não há nada
   de errado aqui, só coisas que aconteceram. */
.volta{border-color:var(--accent)}
.volta-lista{display:grid; gap:8px; margin-top:14px}
.volta-item{display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit;
  background:var(--card2); border:1px solid var(--line); border-radius:10px;
  padding:11px 14px; transition:border-color .12s, background .12s}
.volta-item:hover{background:color-mix(in srgb, var(--accent) 8%, var(--card2));
  border-color:var(--accent)}
.volta-ico{font-size:24px; line-height:1; flex:0 0 auto}
.volta-txt{flex:1; min-width:0}
.volta-txt b{display:block; font-size:14px; font-weight:600; line-height:1.35}
.volta-txt small{display:block; color:var(--muted); font-size:12.5px; margin-top:1px}
.volta-seta{flex:0 0 auto; color:var(--accent); font-weight:700}

/* ------------------------------------ os prêmios da Pokédex (v2.86) */
/* Cada degrau é UMA LINHA com três colunas: o que é, quanto falta, e o botão.
   A barra fica no meio de propósito — ela é a coluna que a pessoa varre com o
   olho para achar o degrau que está quase lá, e uma barra colada no botão vira
   enfeite do botão. */
.dexpremios{display:grid; gap:8px; margin-top:14px}
.dexp{display:flex; align-items:center; gap:14px; background:var(--card2);
  border:1px solid var(--line); border-radius:10px; padding:10px 14px}
.dexp.pronto{border-color:var(--good)}
.dexp.pego{opacity:.55}
.dexp-txt{flex:1 1 auto; min-width:0}
.dexp-txt b{display:block; font-size:14px; font-weight:600}
.dexp-txt small{display:block; color:var(--muted); font-size:12.5px}
.dexp-bar{flex:0 0 168px}
.dexp-bar small{display:block; color:var(--muted); font-size:11.5px; margin-top:3px}
.dexp-acao{flex:0 0 auto; text-align:right; min-width:96px}
@media (max-width:620px){
  .dexp{flex-wrap:wrap}
  .dexp-txt{flex:1 1 100%}
  .dexp-bar{flex:1 1 auto}
}

/* --------------------------------------- a sequência de dias (v2.87) */
/* Uma FAIXA, e não um cartão: ela é estado, como o nível — e um cartão grande
   dizendo «você está no dia 12» todo dia vira barulho na primeira semana. */
.seqfaixa{padding:12px 16px}
.seq-cab{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.seq-cab b{font-size:14px}
.seq-cab small{display:block; color:var(--muted); font-size:12px; margin-top:1px}
.seq-dias{display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:6px; margin-top:10px}
.seq-dia{background:var(--card2); border:1px solid var(--line); border-radius:9px;
  padding:7px 4px; text-align:center; opacity:.75}
/* O DIA DE HOJE é o único com cor. Marcar os sete de verde faria a faixa
   inteira brilhar e nada dentro dela seria notado. */
.seq-dia.feito{opacity:1; border-color:color-mix(in srgb, var(--good) 45%, var(--line))}
.seq-dia.hoje{opacity:1; border-color:var(--good);
  background:color-mix(in srgb, var(--good) 12%, var(--card2))}
.seq-n{display:block; font-size:11px; color:var(--muted); font-weight:700}
.seq-p{display:block; font-size:12px; font-weight:700; margin-top:1px}

/* ------------------------------------------ o título de conquista (v2.88) */
/* Ele usa o mesmo `.selo` de cargo e VIP — a mesma linguagem visual —, com uma
   cor própria e o texto num peso menor: o nome da pessoa continua sendo o que
   se lê primeiro, e o título é o que se lê depois. */
.selo.titulo{--selo:#a78bfa; font-weight:600}

/* --------------------------------------- a grade de conquistas (v2.88) */


/* ==========================================================================
   A FICHA DO TREINADOR — placar, ações e conquistas (v3.09)

   Três blocos que chegaram juntos e se apoiam: a coluna de verbos embaixo do
   retrato, a fileira de números e a estante de medalhas.
   ========================================================================== */

/* A COLUNA DE AÇÕES fica debaixo do «online», dentro de `.conta-quem`, que é
   centralizado. Os botões esticam para a largura da coluna de propósito: cinco
   botões de larguras diferentes empilhados viram uma escada, e a escada faz o
   olho procurar uma ordem que não existe. Os `<form>` viram `display:contents`
   porque cada botão precisa de um POST próprio, e sem isso cada formulário
   viraria uma caixa a mais entre a coluna e o botão — quebrando o alinhamento
   por um elemento que não desenha nada. */
.pf-acoes{display:flex; flex-direction:column; gap:6px; margin-top:12px}
.pf-acoes form{display:contents}
.pf-acoes .btn{width:100%; text-align:center; padding:7px 10px; font-size:12.5px;
               line-height:1.25}
.pf-denuncia{color:var(--bad)}

/* A LINHA DE IDENTIDADE: clã e lugar, coladas ao nome. Chips, e não caixas —
   elas são etiquetas do nome, não números do placar, e ler como número o que é
   etiqueta faz procurar um valor que não existe ali. */
.pf-ident{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.pf-chip{display:inline-flex; align-items:center; gap:6px; text-decoration:none;
         background:var(--card2); border:1px solid var(--line); border-radius:999px;
         padding:4px 11px; font-size:12.5px; color:var(--text)}
a.pf-chip:hover{border-color:var(--accent)}
/* `margin:0` obrigatório: a folha dá 16px embaixo de todo `.sub` dentro de
   um cartão, e num chip de altura centralizada essa sobra empurra o rótulo
   para cima e o deixa com cara de expoente. */
.pf-chip .sub{font-size:11.5px; margin:0}

/* A POSIÇÃO NO RANKING mora DENTRO do número que a produziu. Ela é menor e
   apagada de propósito: é uma nota de rodapé do número, não um segundo
   número disputando o mesmo espaço. */
.pf-pos{font-size:12px; font-weight:700; color:var(--muted); margin-left:4px;
        vertical-align:middle}

/* O PLACAR: QUATRO COLUNAS FIXAS, e não `auto-fit`.
   Com `auto-fit` a grade escolhia o número de colunas pela largura, e caía em
   cinco — cinco cartões numa linha e os outros três embaixo é o pior arranjo
   possível para OITO coisas que são a mesma coisa. Quatro é o que divide oito
   em duas linhas iguais, e ainda dá largura para a legenda caber em uma ou
   duas linhas em vez de quatro. */
.pf-placar{display:grid; gap:10px; margin-top:12px;
           grid-template-columns:repeat(4, minmax(0, 1fr))}

/* 🏆 DE ONDE VÊM OS PONTOS (v3.170). Duas colunas de barras num monitor e uma
   só no celular — quatro grupos em quatro colunas viram quatro barras de
   60px, que não comparam nada. O `auto-fit` com um mínimo de 220px faz a
   conta sozinho e não precisa de uma segunda régua de tamanho de tela. */
.pf-carreira{display:grid; gap:12px; margin-top:12px;
             grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.pf-cgrupo{background:var(--card2); border:1px solid var(--line);
           border-radius:12px; padding:10px 12px}
.pf-cgrupo .sub{font-size:12px; white-space:nowrap}
.pf-num{background:var(--card2); border:1px solid var(--line); border-radius:12px;
        padding:12px 12px 10px; text-align:center; position:relative}
.pf-num .pf-ico{font-size:19px; display:block; line-height:1; opacity:.85}
.pf-num > b{display:block; font-size:26px; font-weight:800; line-height:1.15; margin-top:6px}
.pf-num .pf-rot{display:block; font-size:12.5px; color:var(--text); opacity:.9}
/* A LEGENDA é o que separa «criaturas» de «capturados». Ela é pequena, mas não
   é apagada: em 10.5px com o cinza de sempre ela some, e some justamente para
   quem mais precisa dela — quem está lendo os dois números pela primeira vez. */
.pf-num small{display:block; margin-top:4px; font-size:11px; color:var(--muted);
              line-height:1.35}
.pf-num.brilha{border-color:#c9a227}
.pf-num.brilha > b{color:#f5d76e}

/* O PÓDIO tem três números no lugar de um, e por isso não usa o `> b` grande:
   três 26px lado a lado numa caixa de 150px não cabem, e encolher todos os
   cartões para caber este seria deixar o caso raro mandar no comum. */
.pf-tres{display:flex; justify-content:center; gap:14px; margin-top:6px}
.pf-tres span{display:flex; flex-direction:column; align-items:center; line-height:1.1}
/* O rótulo é apagado porque no cartão de duelo ele é LETRA («V», «D») e não
   desenho: em cor cheia, o «V» compete com o número que ele nomeia. */
.pf-tres i{font-style:normal; font-size:13px; color:var(--muted)}
.pf-tres b{font-size:19px; font-weight:800}

/* OS PEDIDOS DE AMIZADE: retrato, nome, e os dois botões na ponta. O
   `minmax(0,1fr)` no meio é o que deixa um nome comprido encolher em vez de
   empurrar os botões para fora do cartão. */
.pf-pedidos{display:grid; gap:8px; margin-top:12px}
.pf-pedido{display:grid; grid-template-columns:44px minmax(0,1fr) auto auto; gap:10px;
           align-items:center; background:var(--card2); border:1px solid var(--line);
           border-radius:10px; padding:8px 10px}
.pf-pedido img{width:44px; height:44px; object-fit:contain; image-rendering:pixelated}
.pf-pedido .sub{font-size:11.5px; margin:0}

/* AS CONQUISTAS. Estante, e não lista: elas são medalhas, e medalha se olha de
   relance. O ícone grande à esquerda e o nome à direita cabem em duas linhas,
   que é o tamanho de um troféu. */
.pf-conq{display:grid; gap:8px; margin-top:12px;
         grid-template-columns:repeat(auto-fill, minmax(190px, 1fr))}
.pf-medalha{display:grid; grid-template-columns:36px minmax(0,1fr); gap:9px;
            align-items:center; background:var(--card2);
            border:1px solid var(--line); border-radius:10px; padding:8px 10px}
.pf-medalha .pf-med-ico{font-size:24px; text-align:center; line-height:1}
.pf-medalha b{font-size:13px; display:block; line-height:1.25}
.pf-medalha .sub{font-size:11px; margin:0}

/* A LINHA DO ALVO na Sabotagem, para quem chegou pelo botão do perfil. */
.sab-alvo > td{background:color-mix(in srgb, var(--accent) 14%, transparent)}
.sab-alvo > td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

/* Em tela estreita o retrato sobe para cima da ficha (regra do `.conta`), e a
   coluna de ações vira uma fileira que quebra sozinha — cinco botões de 100%
   de largura empilhados num celular seriam meia tela só de botão. */
@media (max-width:720px){
  .pf-acoes{flex-direction:row; flex-wrap:wrap; justify-content:center}
  .pf-acoes .btn{width:auto}
  /* DUAS colunas, e não uma: seis cartões empilhados num celular são seis
     rolagens para ler seis números que juntos são uma frase só. */
  .pf-placar{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .pf-pedido{grid-template-columns:44px minmax(0,1fr); row-gap:8px}
  .pf-pedido form{grid-column:span 1}
}


/* Duas colunas em tela grande, uma no celular. A medalha FEITA fica com a
   opacidade cheia e a borda acesa; a que falta fica apagada — a diferença entre
   as duas tem de ser visível de longe, porque é ela que dá vontade da próxima. */
.conq-grade{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:9px}
.conq{display:flex; align-items:center; gap:12px; background:var(--card2);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; opacity:.62}
.conq.feita{opacity:1; border-color:color-mix(in srgb, var(--good) 45%, var(--line))}
.conq-ico{font-size:26px; line-height:1; flex:0 0 auto; filter:grayscale(1)}
.conq.feita .conq-ico{filter:none}
.conq-txt{flex:1 1 auto; min-width:0}
.conq-txt b{display:block; font-size:13.5px; font-weight:600}
.conq-txt small{display:block; color:var(--muted); font-size:12px}
.conq-est{flex:0 0 116px; text-align:right}
.conq-est small{display:block; color:var(--muted); font-size:11.5px; margin-top:3px}

/* ============================================== o cenário da batalha (v3.19)
 *
 * A arena tinha UM fundo — azul em cima, verde embaixo — para todas as lutas do
 * jogo. Era o único pedaço da tela que podia dizer ONDE a luta acontece, e não
 * dizia. Agora há três cenários, e a tela escolhe pelo tipo da luta:
 *
 *   .cen-rua ....... contra NPC, no meio da rua
 *   .cen-selva ..... contra selvagem, na cor do TIPO do bicho (PHP manda as
 *                    três cores em `--cen-1/2/3`; ver `cenario_batalha()`)
 *   .cen-ginasio ... ginásio e torneio, dentro do ginásio
 *
 * TUDO AQUI É DESENHO DE GRADIENTE, sem uma imagem sequer: são três regras que
 * viajam no CSS que o navegador já ia baixar, em vez de vinte arquivos de arte
 * no pacote de instalação. Trocar por arte de verdade depois é mexer no
 * `background` de UMA regra — o resto da tela não sabe a diferença.
 *
 * AS CAMADAS DE FUNDO SÃO LIDAS DE CIMA PARA BAIXO, e a PRIMEIRA fica NA FRENTE.
 * É o contrário do que a leitura sugere, e é por isso que o céu é a última linha
 * de cada lista. As alturas do chão são em PIXELS e não em porcentagem porque a
 * arena muda de altura com o celular: com porcentagem o horizonte subia junto e
 * os bichos ficavam com os pés no céu.
 */

/* -------------------------------------------------------------- a rua (NPC) */
/* AS MEDIDAS DO CENÁRIO VIRARAM PROPORÇÃO (v3.28).
 *
 * Elas eram pixel porque a arena mudava de altura com o conteúdo, e uma
 * porcentagem fazia o horizonte subir junto — os bichos ficavam com os pés no
 * céu. Com a arena QUADRADA esse motivo acabou: a altura é sempre igual à
 * largura, e aí é o PIXEL que passa a mentir — num celular de 340px um chão de
 * 130px é 38% da cena; num monitor, 25%.
 *
 * DUAS REGRAS PARA LER O QUE VEM ABAIXO:
 *
 *   1. CAMADA ALTA É ANCORADA NO RODAPÉ E APARADA POR QUEM VEM ANTES. Deslocar
 *      uma camada alta com `bottom:42%` não dá 42% da arena: o deslocamento é
 *      porcentagem de (arena − camada), e o erro fica enorme. Então os prédios
 *      são uma camada de 52% colada no rodapé, e o asfalto — opaco, e ANTES na
 *      lista, portanto por cima — tapa a parte de baixo deles. O que sobra à
 *      vista é exatamente a faixa entre o horizonte e o topo dos prédios.
 *
 *   2. CAMADA FINA PODE TER DESLOCAMENTO, com uma correção. Para uma camada de
 *      altura `h%` cair a `g%` do rodapé, escreve-se `g × 100/(100−h)`. Como as
 *      duas são porcentagem da MESMA caixa, a correção vale em qualquer tamanho
 *      de tela — não é um ajuste para o monitor de quem escreveu.
 */
.arena.cen-rua{
  background:
    /* a faixa amarela tracejada: camada de 1,1% a 15% do rodapé
       → 15 × 100/98,9 = 15,17% */
    repeating-linear-gradient(90deg,#e8c351 0 5%,transparent 5% 14%),
    /* o meio-fio, na linha do horizonte (38% do rodapé, camada de 0,5%) */
    linear-gradient(90deg,#8b93a0,#8b93a0),
    /* o asfalto — é ele que apara os prédios */
    linear-gradient(180deg,#3c424c,#23272e),
    /* a cidade: duas fileiras de silhueta. São camadas ALTAS coladas no rodapé,
       e o que se vê de cada uma é só o pedaço acima do asfalto — 14% de uma e
       8% da outra. É essa diferença que faz um recorte de cidade em vez de uma
       cerca de blocos iguais. */
    repeating-linear-gradient(90deg,#0e1626 0 3.5%,transparent 3.5% 11%),
    repeating-linear-gradient(90deg,#182338 0 6%,transparent 6% 17%),
    /* o céu de fim de tarde */
    linear-gradient(180deg,#223c5a 0%,#3d6183 62%,#8b8f99 100%);
  background-repeat:repeat-x,no-repeat,no-repeat,repeat-x,repeat-x,no-repeat;
  background-size:100% 1.1%,100% .5%,100% 38%,100% 52%,100% 46%,100% 100%;
  background-position:left bottom 15.17%,left bottom 38.19%,left bottom,
                      left bottom,left bottom,left top;
}

/* ------------------------------------------- o mato, na cor do tipo (selvagem) */
/* As três cores chegam prontas do PHP. Os valores escritos aqui são a rede de
   segurança: uma tela que esqueça o `style` mostra um mato azulado em vez de um
   retângulo preto. */
.arena.cen-selva{
  --cen-1:#2b3b50; --cen-2:#1e2b3a; --cen-3:#141c26;
  background:
    /* três fileiras de moita, da miúda e clara à graúda e escura. Os passos são
       diferentes de propósito (9%, 15% e 21%): com o mesmo passo elas casavam
       pico com pico e o mato virava um festão de festa junina.
       Alturas 5/7/9% caindo a 30/32/34% do rodapé → 31,6 / 34,4 / 37,4 */
    radial-gradient(circle at 50% 100%,var(--cen-2) 0 46%,transparent 47%),
    radial-gradient(circle at 50% 100%,var(--cen-3) 0 46%,transparent 47%),
    radial-gradient(circle at 50% 100%,var(--cen-3) 0 46%,transparent 47%),
    /* os dois morros ao longe — camadas altas, coladas no rodapé e aparadas
       pelo chão, que vem antes na lista */
    radial-gradient(58% 30% at 18% 100%,var(--cen-2) 0 62%,transparent 64%),
    radial-gradient(50% 26% at 82% 100%,var(--cen-2) 0 62%,transparent 64%),
    /* o chão */
    linear-gradient(180deg,var(--cen-2),var(--cen-3)),
    /* o céu */
    radial-gradient(130% 96% at 50% 6%,var(--cen-1),var(--cen-3));
  background-repeat:repeat-x,repeat-x,repeat-x,no-repeat,no-repeat,no-repeat,no-repeat;
  /* As larguras são MENORES que num quadrado (5/8/11% em vez de 9/15/21%):
     `background-size` em % é % da LARGURA para o x e da ALTURA para o y, e numa
     caixa 9:5 as mesmas contas achatavam as moitas em elipses. */
  background-size:5% 7%,8% 9%,11% 11%,100% 52%,100% 48%,100% 30%,100% 100%;
  background-position:left 2% bottom 32.3%,left bottom 35.2%,left 6% bottom 38.2%,
                      left bottom,left bottom,left bottom,left top;
}

/* --------------------------------------------- o ginásio (ginásio e torneio) */
.arena.cen-ginasio{
  background:
    /* a pokébola desenhada no chão: o anel, a faixa e o botão do meio */
    radial-gradient(circle at 50% 100%,transparent 0 40%,#ffffff2e 40% 44%,transparent 45%),
    linear-gradient(90deg,#ffffff2e,#ffffff2e),
    radial-gradient(circle at 50% 100%,#ffffff2e 0 9%,transparent 10%),
    /* os dois holofotes, vindos de cima */
    radial-gradient(28% 84% at 23% 0%,#ffe9b32b,transparent 76%),
    radial-gradient(28% 84% at 77% 0%,#ffe9b32b,transparent 76%),
    /* o rodapé da parede: a linha clara que faz a quina entre pé e chão. Sem
       ela a parede e o piso viram uma chapa só e o ginásio perde o fundo */
    linear-gradient(90deg,#8ea3c4,#8ea3c4),
    /* o piso quadriculado */
    repeating-linear-gradient(90deg,#ffffff1f 0 1px,transparent 1px 11%),
    linear-gradient(180deg,#3d4763,#1e2740),
    /* as pilastras da parede — camada inteira, aparada pelo piso, que é opaco
       e vem antes na lista */
    repeating-linear-gradient(90deg,#ffffff12 0 5%,transparent 5% 18%),
    linear-gradient(180deg,#0d1424 0%,#141c31 60%,#1b2340 100%);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,
                    no-repeat,repeat-x,no-repeat,repeat-x,no-repeat;
  background-size:100% 34%,32% 1%,100% 34%,100% 100%,100% 100%,
                  100% .4%,100% 38%,100% 38%,100% 100%,100% 100%;
  background-position:left bottom 4%,center bottom 4.04%,left bottom 4%,
                      left top,left top,
                      left bottom 38.15%,left bottom,left bottom,left top,left top;
}

/* ==================================== a Ação, o relógio e o painel (v3.21)
 *
 * Três coisas que nasceram juntas e por isso moram juntas:
 *   · a TELA DA AÇÃO e a BOLHA do canto (`.ac-*`, `.avisos`)
 *   · o RELÓGIO do servidor na barra de topo (`.hr-srv`)
 *   · o PAINEL do treinador montado na capa (`.pnl*`)
 *
 * O prefixo `.pnl` e não `.hud` porque `.hud-*` JÁ EXISTE — é o «próximo passo»
 * da Início. E `.hr-srv` e não `.relogio` porque `.relogio` também já existe: é
 * a caixa verde do Day Care. Os dois nomes foram descobertos numa maquete antes
 * de o código ser escrito, que é a razão de a maquete ter existido.
 */

/* ------------------------------------------------------- a tela da Ação */
.ac-filtros{display:flex; gap:7px; flex-wrap:wrap; margin:12px 0 4px}
.ac-dia{display:flex; align-items:center; gap:10px; margin:20px 0 8px;
        color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.9px}
.ac-dia:after{content:""; flex:1; height:1px; background:var(--line)}

.ac-linha{display:grid; grid-template-columns:36px minmax(0,1fr) auto;
  gap:12px; align-items:center; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--card2); margin-bottom:7px}
/* NÃO LIDO É UMA BORDA, não um fundo berrante: a lista inteira fica não lida
   depois de uma hora fora, e trinta linhas acesas não destacam nada. */
.ac-linha.nova{border-left:3px solid var(--accent); background:#1b2436}
.ac-ico{width:36px; height:36px; border-radius:9px; display:grid; place-items:center;
        font-size:18px; background:#0f1420; border:1px solid var(--line)}
.ac-txt{min-width:0}
/* O `>` NÃO É ENFEITE: o texto da linha traz `<b>` por dentro para destacar o
   nome da criatura, e sem o filho direto esse `<b>` de dentro virava bloco —
   cada nome quebrava numa linha só dele e a lista virava uma escada. */
.ac-txt > b{display:block; font-size:13.5px; font-weight:600; line-height:1.4}
.ac-txt > b b{display:inline; font-weight:800}
.ac-txt > small{display:block; color:var(--muted); font-size:12px; margin-top:2px}
.ac-dir{display:flex; align-items:center; gap:10px; flex-shrink:0}
.ac-hora{color:var(--muted); font-size:11.5px; font-variant-numeric:tabular-nums}

/* a cor do ícone diz a família sem obrigar a ler */
.ac-ico.cri{border-color:#3da22455; background:#12261a}
.ac-ico.rep{border-color:#ef70ef55; background:#26162a}
.ac-ico.cbt{border-color:#b4242b55; background:#26161a}
.ac-ico.eco{border-color:#f2c83255; background:#26221a}
.ac-ico.cla{border-color:#2e80ef55; background:#161f2e}
.ac-ico.cnq{border-color:#f59e0b55; background:#2a2115}

@media (max-width:640px){
  .ac-linha{grid-template-columns:32px minmax(0,1fr); row-gap:6px}
  .ac-dir{grid-column:2; justify-content:flex-start}
}

/* -------------------------------------------- o aviso que aparece sozinho */
/* Ele nasce no servidor, na MESMA visita que gerou o acontecimento — sem
   JavaScript de sondagem, sem cron, igual ao resto do jogo. O que o navegador
   faz é só sumir com ele depois de alguns segundos. */
.avisos{position:fixed; right:16px; bottom:16px; z-index:80;
        display:flex; flex-direction:column; gap:8px; width:min(330px,86vw)}
.aviso{display:grid; grid-template-columns:34px minmax(0,1fr); gap:11px;
  align-items:center; padding:11px 13px; border-radius:12px;
  background:#131a28f2; border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(0,0,0,.5); backdrop-filter:blur(6px)}
.aviso .ac-ico{width:34px; height:34px}
.aviso b{display:block; font-size:13px}
.aviso small{display:block; color:var(--muted); font-size:11.5px; margin-top:1px}

/* ---------------------------------------------------- o relógio do topo */
.hr-srv{font-variant-numeric:tabular-nums}
.hr-srv .hr-fase{opacity:.75; margin-left:5px}

/* --------------------------------------------------- o painel do canto */
.pnl{width:330px; flex:0 0 330px; padding:11px 13px; border-radius:12px;
  background:linear-gradient(180deg,#1a2130,#151b28);
  border:1px solid var(--line); box-shadow:0 10px 26px rgba(0,0,0,.35)}
/* DUAS COLUNAS DE VERDADE, e não uma grade de duas colunas: a grade preenche
   LINHA a linha, então «hora, região, time…» e «nome, nível, clã…» saíam
   trançados um no outro. São duas listas com assuntos diferentes — o mundo à
   esquerda, o jogador à direita — e cada uma tem que descer inteira. */
.pnl-corpo{display:flex; gap:14px}
.pnl-col{flex:1 1 0; min-width:0; display:flex; flex-direction:column}
.pnl-l{display:flex; align-items:center; gap:7px; padding:3px 0;
  font-size:12.5px; color:var(--text); min-width:0}
.pnl-l span:first-child{width:16px; text-align:center; flex:0 0 16px; opacity:.9}
.pnl-l b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pnl-l.nome b{font-size:14px; font-weight:800}
.pnl-barras{margin-top:9px; display:grid; gap:5px}
.pnl-b{position:relative; height:17px; border-radius:6px; overflow:hidden;
  background:#0f1420; border:1px solid var(--line)}
.pnl-b i{position:absolute; inset:0 auto 0 0; display:block}
.pnl-b em{position:absolute; inset:0; display:grid; place-items:center;
  font-style:normal; font-size:11px; font-weight:700; color:#fff;
  text-shadow:0 1px 2px #000a}
@media (max-width:900px){ .pnl{width:100%; flex:1 1 auto} }

/* ------------------------------- o painel MONTADO NA CAPA, ao lado da logo */
/* A capa tem 320px de altura e o desenho inteiro para o lado esquerdo, onde
   nunca houve nada. O painel cabe ali sem empurrar UMA linha de conteúdo para
   baixo — que é o custo real de qualquer caixa nova numa página.
   O `.capa-trilho` já existia e já alinhava a logo pela borda do `.shell`;
   só troca o `flex-end` por `space-between` e ganha um segundo filho. */
.capa-trilho{justify-content:space-between}
/* O TRILHO É `pointer-events:none` de propósito (a capa não é clicável), então
   quem quiser receber clique tem que pedir de volta. */
.pnl-capa{pointer-events:auto; width:min(330px, 42%);
  /* `flex:0 0 auto` PORQUE O `@media (max-width:900px)` lá de cima solta o
     painel para crescer (`flex:1 1 auto`), e ali ele é filho de um flex —
     numa tela de 900px ele esticava para 496px e cobria metade do desenho.
     A largura estava certa; quem mandava era o flex. */
  flex:0 0 auto;
  background:#0f1420bf; border-color:#ffffff2b; backdrop-filter:blur(7px);
  box-shadow:0 14px 38px #000a;
  /* MAIS APERTADO QUE O PAINEL SOLTO, e por uma medida e não por gosto: o
     trilho da capa tem `bottom:var(--capa-sobe)`, então a faixa que sobra são
     200px dos 320px da capa. O painel de tamanho normal dá ~250px e vazava
     pelas duas pontas — a primeira linha cortada em cima, as barras entrando
     na máscara embaixo. Sete linhas de 19px, duas barras e o respiro cabem em
     194px. Se um dia a capa mudar de altura no painel, isto continua valendo:
     o que encolhe é o conteúdo, não a moldura. */
  padding:9px 11px}
.pnl-capa .pnl-l{font-size:12px; padding:1px 0; line-height:1.35}
.pnl-capa .pnl-l.nome b{font-size:13px}
.pnl-capa .pnl-barras{margin-top:6px; gap:4px}
.pnl-capa .pnl-b{height:14px}
.pnl-capa .pnl-b em{font-size:10.5px}
/* A SOMBRA VOLTA PARA OS DOIS LADOS. Com a logo à direita ela tinha trocado de
   lado inteira; com painel à esquerda, os dois cantos precisam de apoio —
   a capa é um arquivo que o dono troca quando quer, e a próxima pode ser clara
   justamente onde o painel cai. */
.capa.com-logo.com-painel::before{
  background:linear-gradient(90deg,#000a,#0000 40%),
             linear-gradient(270deg,#0009,#0000 46%);
}
@media (max-width:760px){
  /* No telefone a capa encolhe e a logo volta para o meio: 330px de painel ali
     tapariam o desenho inteiro. E não se perde nada — a barra de topo já leva
     os mesmos números, e ela existe em toda tela. */
  .capa-trilho{justify-content:center}
  .pnl-capa{display:none}
}

/* ------------------------------------------------------------ o «×3» */
/* Ele é o AGRUPAMENTO aparecendo. Sem ele a linha diria «chegou ao nível 47» e
   esconderia que foram sete níveis numa sessão só. */
.ac-vezes{font-size:11px; font-weight:700; color:var(--muted);
  background:#0f1420; border:1px solid var(--line); border-radius:999px;
  padding:0 6px; margin-left:4px; vertical-align:1px}

/* ------------------------------------------------- a bolha some sozinha */
/* O SERVIDOR JÁ SABE QUE ELA APARECEU (a coluna `avisado_em`), então sumir é
   só desenho — não há nada a avisar de volta, e por isso não há JavaScript
   nenhum aqui. `forwards` segura o estado final: sem ele a bolha reaparece no
   fim da animação, que é o pior dos dois mundos. */
@keyframes aviso-vai{
  0%   {opacity:0; transform:translateY(10px)}
  6%   {opacity:1; transform:none}
  86%  {opacity:1; transform:none}
  100% {opacity:0; transform:translateY(6px); visibility:hidden}
}
.aviso{animation:aviso-vai 9s ease-out forwards; text-decoration:none; color:inherit}
.aviso:nth-child(2){animation-delay:.35s}
.aviso:nth-child(3){animation-delay:.7s}
a.aviso:hover{border-color:var(--accent)}
/* QUEM PEDIU MENOS MOVIMENTO NÃO GANHA UMA BOLHA QUE FICA PARA SEMPRE: ela
   aparece parada e some na mesma hora, sem o deslize. */
@media (prefers-reduced-motion: reduce){
  .aviso{animation:aviso-vai 9s step-end forwards}
}

/* ------------------------------------------------- as cores no tema claro */
/* O painel da capa continua ESCURO nos dois temas, e é de propósito: ele está
   em cima de uma ilustração, não da página. Um painel branco sobre arte clara
   sumiria. É a mesma decisão da carta do time. */

/* ================================ a ficha da espécie na batalha (v3.23)
 *
 * A bola ao lado do nome do adversário já dizia UMA coisa — «esta espécie já é
 * sua?» — e era a única informação que a tela dava antes de o jogador decidir
 * gastar uma bola. Agora ela abre a ficha curta: raridade, frequência NESTA
 * rota, chance de captura da espécie e a chance de AGORA, com o HP e a condição
 * do turno. Ver `Dex::cartao()`.
 *
 * ABRE NO RATO **E** NO TECLADO. O `:focus-within` não é enfeite de acessi-
 * bilidade: é o que faz a ficha existir para quem joga no celular, onde não há
 * «passar o rato» — um toque põe o foco no selo e a ficha abre.
 */
.pokeseal.comficha{position:relative; cursor:help}
.dexcard{
  display:none; position:absolute; z-index:30; top:calc(100% + 8px); left:-8px;
  width:250px; padding:11px 13px; text-align:left; white-space:normal;
  background:#131a28f7; border:1px solid var(--line); border-radius:11px;
  box-shadow:0 16px 38px rgba(0,0,0,.55); color:var(--text); font-size:12.5px;
  font-weight:400; backdrop-filter:blur(4px);
  animation:tipin .12s ease-out;
}
.pokeseal.comficha:hover .dexcard,
.pokeseal.comficha:focus .dexcard,
.pokeseal.comficha:focus-within .dexcard{display:block}
.dx-h{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.8px;
      color:var(--muted); margin-bottom:8px; font-weight:700}
.dx-r{display:flex; justify-content:space-between; gap:10px; align-items:baseline;
      padding:2.5px 0; line-height:1.35}
.dx-r > span{color:var(--muted); flex:0 0 auto}
.dx-r > b{font-weight:700; text-align:right; min-width:0}
/* Os selos de tipo entram na linha e não podem carregar a margem da lista de
   golpes, senão a linha do «Tipo» fica mais alta que as outras onze. */
.dx-r .type{margin:0 0 0 4px}

/* A FICHA PRECISA ESCAPAR DA ARENA, e é por isso que esta linha existe.
   A `.arena` corta o que passa das bordas — a moldura arredondada da versão de
   fora depende disso. Só que na tela de batalha ela não tem canto arredondado
   nenhum (`border-radius:0`, logo acima): quem arredonda é o `.arena-card`. Sem
   este `visible`, a ficha nascia cortada na metade, dentro dos 240px de altura
   do cenário; com ele, ela desce por cima do log, que é onde há espaço.
   O corte de verdade continua existindo, um nível acima, no `.arena-card`. */
.arena-card .arena{overflow:visible}

@media (max-width:640px){
  /* Numa tela estreita, 250px abrindo a partir da esquerda ainda cabem — o que
     não cabe é a ficha nascer colada na borda. */
  .dexcard{left:-4px; width:min(250px, calc(100vw - 48px))}
}

/* ----------------------------------------- a ARTE por cima do desenho (v3.26)
 *
 * Quando existe arquivo em `assets/img/batalha/`, o PHP manda o endereço em
 * `--cen-foto` e acrescenta esta classe. Ver `cenario_imagem()`.
 *
 * A FOTO É UMA CAMADA A MAIS, e não uma substituição: o `background-image` do
 * cenário desenhado continua listado depois dela, embaixo. Uma arte com
 * transparência, um PNG que não carregou, um endereço que o servidor recusou —
 * em qualquer desses casos a arena mostraria PRETO se a foto tivesse tomado o
 * lugar do desenho. Assim ela mostra o mato, a rua ou o ginásio de sempre.
 *
 * O VÉU ESCURO NÃO É ENFEITE. Por cima do fundo passam as placas de nome
 * (`#0f1420dd`, texto branco), as barras de vida e os selos de tipo. Uma arte
 * clara — um campo de neve, um deserto ao meio-dia — apagaria os três. O véu é
 * a garantia de que QUALQUER arte que chegue continua deixando a batalha
 * legível, sem depender de quem escolheu a imagem ter pensado nisso.
 */
.arena.cen-foto{
  background-image:
    linear-gradient(180deg, #0b101acc, #0b101a99 45%, #0b101ad9),
    var(--cen-foto);
  background-repeat:no-repeat, no-repeat;
  background-size:cover, cover;
  background-position:center, center;
}
/* O mato pintado com a cor do tipo continua embaixo da foto: se ela falhar, é
   ele que aparece — e no Fogo ele é laranja, no Água azul, como sempre foi. */
.arena.cen-selva.cen-foto{
  background-image:
    linear-gradient(180deg, #0b101acc, #0b101a99 45%, #0b101ad9),
    var(--cen-foto),
    linear-gradient(180deg, var(--cen-1), var(--cen-3));
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-size:cover, cover, cover;
  background-position:center, center, center;
}

/* --------------------------------- o quadro de vagas dos cenários (v3.27)
 *
 * Cada vaga é uma combinação de «tipo de luta × tipo do Pokémon». O quadro
 * responde de graça a pergunta de quem está montando as 57 artes aos poucos —
 * «o que já está feito e o que falta?» —, e é por isso que a vaga VAZIA também
 * ocupa lugar em vez de sumir: uma grade só com o que existe não mostra o que
 * falta, que é justamente a informação que se procura ali. */
.cn-grade{display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(158px, 1fr))}
.cn-vaga{background:var(--card2); border:1px solid var(--line); border-radius:11px;
  padding:9px; display:flex; flex-direction:column; gap:6px}
/* A PREENCHIDA GANHA BORDA ACESA, e não fundo diferente: são até 57 caixas na
   tela, e 57 fundos coloridos viram um tabuleiro que ninguém lê. */
.cn-vaga.tem{border-color:color-mix(in srgb, var(--good) 45%, var(--line))}
/* A MINIATURA VAZIA SEGUE O TEMA — ela é um espaço em branco da página, e não
   uma superfície sobre arte. Ela nasceu com `#0f1420` fixo e virou um retângulo
   PRETO no tema claro, no meio de uma tela branca: o mesmo tropeço do painel da
   capa e da ficha da espécie, só que ao contrário. A regra que os três deixam:
   antes de escrever uma cor na mão, pergunte se aquela caixa está por cima da
   PÁGINA (então segue o tema) ou por cima de ARTE (então não segue).
   E o tracejado é o que diz «vazia» sem depender de cor nenhuma. */
.cn-thumb{height:62px; border-radius:8px; background:var(--bg) center/cover no-repeat;
  border:1px dashed var(--line); display:grid; place-items:center}
.cn-vaga.tem .cn-thumb{border-style:solid}
.cn-thumb span{color:var(--muted); font-size:11px}
.cn-rot{font-size:13px; font-weight:700; line-height:1.2}
.cn-info{color:var(--muted); font-size:11px; display:block; margin-top:-3px}
/* O nome do arquivo é para ser LIDO E COPIADO por quem preferir subir por FTP,
   então ele vem em fonte de largura fixa e não quebra no meio. */
.cn-nome{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cn-form{margin:0; display:flex; flex-direction:column; gap:5px}
/* O seletor de arquivo do navegador é largo por natureza e estoura a caixa; o
   `min-width:0` é o que permite ele encolher dentro de um flex. */
.cn-form input[type=file]{width:100%; min-width:0; font-size:11px; color:var(--muted)}
.cn-form input[type=file]::file-selector-button{
  background:var(--card); color:var(--text); border:1px solid var(--line);
  border-radius:7px; padding:3px 8px; margin-right:6px; font:inherit;
  font-size:11px; cursor:pointer}
.cn-form input[type=file]::file-selector-button:hover{border-color:var(--accent)}

/* A PRÉVIA DA ARENA DENTRO DO PAINEL (v3.31). Ela é a `.arena` de verdade — mesmas
   classes, mesmo cenário, mesmas variáveis de posição —, e o que muda é só o
   tamanho da caixa: 560px em vez dos 900 do jogo. Uma prévia desenhada «igual»
   mentiria exatamente onde importa, que é a dois pixels do pé no chão.

   O PISO DO BICHO ENCOLHE JUNTO. Tudo o mais é porcentagem e sobrevive ao
   encolhimento sozinho; o piso de 96px é o único número em pixel da cena, e
   deixado como está ele faria «16%» aparecer como 17% aqui — o único lugar do
   jogo onde a diferença importa, porque é onde alguém está escolhendo o número.
   O valor exato vem do PHP (96 × 560 ÷ largura da arena); este é a rede. */
.cn-previa{max-width:560px; border-radius:12px; border:1px solid var(--line);
  --bicho-min:60px}

/* ------------------------------------- os times salvos (v3.34)
   SOBRE A PÁGINA, e não sobre arte: por isso toda cor sai de `var()` e o bloco
   do tema claro não precisa existir. É a pergunta que esta folha faz em toda
   caixa nova — «isto está por cima da página ou por cima de um desenho?» —, e
   aqui a resposta é a página. */
/* O CARTÃO TRANCADO (v3.42) — o que quem não tem VIP vê no lugar.
   Ele não fica cinza nem apagado: apagado é o desenho de «quebrado», e isto não
   está quebrado, está fechado. A lista de escalações guardadas dentro dele é a
   parte que mais importa, porque é ela que prova que nada foi apagado — por
   isso as pastilhas continuam com a cor normal do cartão, e não esmaecidas. */
.ts-guardadas{display:flex; flex-wrap:wrap; gap:8px}
.ts-guardadas span{background:var(--card2); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px; font-size:12.5px; color:var(--muted)}
.ts-guardadas b{color:var(--text)}

.ts-grade{display:grid; gap:12px; margin-top:14px;
  grid-template-columns:repeat(auto-fill, minmax(232px, 1fr))}
.ts-cartao{background:var(--card2); border:1px solid var(--line); border-radius:12px;
  padding:11px 12px; display:flex; flex-direction:column; gap:9px}
.ts-cartao.vazia{border-style:dashed; opacity:.85}
.ts-topo{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.ts-topo b{font-size:14px}
.ts-topo small{color:var(--muted); font-size:11.5px; white-space:nowrap}
.ts-nada{margin:0; color:var(--muted); font-size:12.5px; line-height:1.5}

/* A FILEIRA TEM ALTURA FIXA para os cartões não ficarem em degrau quando um
   time tem seis e o outro tem dois. */
.ts-bichos{display:flex; gap:2px; align-items:center; min-height:40px; flex-wrap:wrap}
.ts-bicho{width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto}
.ts-bicho img{width:38px; height:38px; object-fit:contain; display:block; image-rendering:pixelated}
/* QUEM NÃO PODE VIR APARECE APAGADO, e não some: uma escalação que perde uma
   criatura e passa a mostrar cinco faz a pessoa achar que gravou cinco. */
.ts-bicho.fora{opacity:.34; filter:grayscale(1); color:var(--muted); font-size:15px}

.ts-botoes{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:auto}
.ts-nome{display:flex; gap:4px; flex:1 1 100%; margin:0}
.ts-nome input[type=text]{flex:1; min-width:0; margin:0; padding:4px 8px; font-size:12.5px}

/* -------------------------- mover item entre mochila e depósito (v3.35) */
.dep-mover{display:flex; gap:5px; align-items:center; margin:0}
.dep-mover input[type=number]{width:74px; margin:0; padding:4px 6px; font-size:12.5px}
.dep-mover .btn{white-space:nowrap}
/* Dentro do cartão do depósito o formulário fica embaixo, não ao lado. */
.itembtn .dep-mover{margin-top:8px}

/* ------------------------------------- a janela de aviso (v3.37)
   SOBRE A PÁGINA, e não sobre arte: toda cor sai de `var()`, e por isso não há
   bloco de tema claro aqui. É a pergunta que esta folha faz em toda caixa nova.

   O VÉU É `position:fixed` E COBRE A TELA INTEIRA, porque um aviso que se pode
   ignorar rolando a página não é um aviso — é um rodapé. Ele não impede o
   teclado de alcançar o resto (não há foco preso aqui): a intenção é ser
   impossível de NÃO VER, não impossível de sair. */
/* ═══════════════════════════════════════════════════════════════════════
   💬 A BOLHA DO CHAT (v3.42)

   Ela mora sobre a ARTE e sobre o conteúdo, nunca dentro deles — então segue a
   regra da casa para superfície que flutua: fica ESCURA nos dois temas, com as
   fichas redefinidas no bloco do tema claro lá embaixo. Uma janelinha branca
   por cima de uma capa de Charizard é uma janelinha que não se lê.

   O `z-index` é 110: acima de tudo (barra do topo é 100), abaixo da janela de
   aviso (120). Um aviso que o dono do jogo mandou para todos não pode nascer
   atrás de uma conversa.
   ═══════════════════════════════════════════════════════════════════════ */
/* ---------------------------------------------- as artes da casa, no painel
   (v3.42) A grade das cinco vagas de imagem da aba Aparência.
   A MINIATURA TEM ALTURA FIXA E `object-fit:contain`: as cinco artes têm
   proporções muito diferentes (a capa é 2,4 por 1; a marca da barra é quase
   quadrada), e `cover` cortaria justamente o pedaço que identifica cada uma. */
.arte-vagas{display:grid; gap:14px}
.arte-vaga{display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:12px}
.arte-previa{width:190px; height:86px; flex:0 0 190px; border-radius:9px;
  background:var(--bg); border:1px solid var(--line); overflow:hidden;
  display:grid; place-items:center}
.arte-previa img{width:100%; height:100%; object-fit:contain; display:block}
.arte-previa.vazia{border-style:dashed}
.arte-previa.vazia span{color:var(--muted); font-size:12px}
.arte-dizeres{flex:1; min-width:240px; display:flex; flex-direction:column; gap:3px}
.arte-dizeres small{color:var(--muted); font-size:12px; line-height:1.45}
.arte-arq code{font-size:11.5px}
.arte-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 0}
.arte-form input[type=file]{flex:1; min-width:190px; color:var(--muted); font-size:12.5px}
@media (max-width:560px){
  .arte-previa{flex:0 0 100%; width:100%}
}

.cb{position:fixed; right:18px; bottom:18px; z-index:110}
/* O `list-style` some nos dois dialetos: o Chrome desenha o triângulo do
   `<details>` com `::marker` e o Safari com um pseudo-elemento próprio. */
.cb summary{list-style:none; cursor:pointer}
.cb summary::-webkit-details-marker{display:none}
.cb-bt{position:relative; width:54px; height:54px; border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center;
  font-size:24px; box-shadow:0 8px 24px #0008; transition:transform .12s;
  margin-left:auto}
.cb-bt:hover{transform:translateY(-2px)}
/* O CONTADOR É UM SELO NA BORDA, e não um número dentro do botão: dentro, ele
   competiria com o ícone e os dois ficariam ilegíveis em 54px. */
.cb-n{position:absolute; top:-2px; right:-2px; min-width:20px; height:20px;
  padding:0 5px; border-radius:999px; background:var(--bad); color:#fff;
  font-size:11px; font-weight:800; display:grid; place-items:center;
  border:2px solid var(--bg)}
/* E ESTA LINHA NÃO É REDUNDÂNCIA. `hidden` é `display:none` na folha do
   navegador, que tem peso MENOR que qualquer regra de autor — o `display:grid`
   logo acima ganha dele, e o selo aparecia vazio, uma bolinha vermelha sem
   número, mesmo escondido pelo script. Foi assim que ele nasceu, e só apareceu
   ao desenhar a tela. */
/* ABERTA, A BOLHA VIRA A JANELA e o botão vira o «fechar» — por isso ele fica
   embaixo, no mesmo lugar em que estava fechado: o dedo não precisa procurar. */
/* O ✕ NÃO SUBSTITUI O EMOJI NO HTML: o 💬 continua escrito lá, e aberto ele
   simplesmente encolhe a zero enquanto o `::after` desenha o fechar no tamanho
   certo. Trocar o texto por `content` deixaria o botão vazio para quem lê a
   página sem CSS — e é ele que abre a conversa. */
.cb-cx[open] .cb-bt{background:var(--card2); color:var(--text)}
.cb-cx[open] .cb-ico{font-size:0}
.cb-cx[open] .cb-ico::after{content:"✕"; font-size:17px; color:var(--muted)}

.cb-corpo{position:absolute; right:0; bottom:64px; width:340px;
  max-width:calc(100vw - 36px);
  background:#141a27; color:#e6ebf5; border:1px solid #2a3348; border-radius:14px;
  box-shadow:0 20px 50px #000a; overflow:hidden;
  display:flex; flex-direction:column}
.cb-topo{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 13px; border-bottom:1px solid #2a3348; font-size:13px}
.cb-topo a{color:#8b95ab; font-size:11.5px; text-decoration:none}
.cb-topo a:hover{color:#3b82f6}
/* A ALTURA É `min()` de pixels e de altura de janela: 300px é a conversa numa
   tela normal, e num celular deitado 300px seriam a tela inteira. */
.cb-falas{height:min(300px, 42vh); overflow-y:auto; padding:10px 13px;
  display:flex; flex-direction:column; gap:5px; font-size:12.5px}
.cb-falas .fala{line-height:1.45}
.cb-form{display:flex; gap:6px; padding:10px 11px; border-top:1px solid #2a3348; margin:0}
.cb-form input[type=text]{flex:1; min-width:0; background:#0f1420; color:#e6ebf5;
  border:1px solid #2a3348; border-radius:9px; padding:8px 10px; font-size:13px}
.cb-erro{padding:0 13px 10px; color:#f87171; font-size:11.5px}
.cb-mudo{margin:0; padding:10px 13px; color:#f0b429; font-size:12px}

/* NO CELULAR ELA ENCOSTA NAS BORDAS e sobe um pouco: 18px do rodapé é onde
   ficam a barra de endereço e o gesto de voltar em quase todo telefone. */
@media (max-width:560px){
  .cb{right:12px; bottom:12px}
  .cb-bt{width:48px; height:48px; font-size:21px}
  .cb-corpo{bottom:58px; right:0; width:calc(100vw - 24px)}
}
/* Impressão não leva conversa junto. */
@media print{ .cb{display:none} }

.avjanela{position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:20px; background:rgba(6,9,16,.72); backdrop-filter:blur(2px)}
.avcaixa{background:var(--card); color:var(--text); border:1px solid var(--line);
  border-radius:16px; padding:22px 24px; max-width:520px; width:100%;
  box-shadow:0 24px 60px rgba(0,0,0,.5); animation:avsobe .18s ease-out}
.avcaixa h2{margin:0 0 10px; font-size:19px}
/* A IMAGEM DO AVISO. `max-height` em `vh` porque a janela é a tela inteira:
   uma imagem alta empurraria o botão «Entendi» para fora e o aviso viraria uma
   parede sem saída. `object-fit:contain` para não cortar o que o admin mandou. */
.avcaixa .avimg{display:block; width:100%; max-height:38vh; object-fit:contain;
  border-radius:10px; border:1px solid var(--line); background:var(--bg);
  margin:0 0 14px}
.avcaixa p{margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.65;
  max-height:46vh; overflow:auto}
.avcaixa form{margin:0; display:flex; justify-content:flex-end}
@keyframes avsobe{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
/* Quem pediu menos movimento não recebe movimento. */
@media (prefers-reduced-motion:reduce){ .avcaixa{animation:none} }

/* ===========================================================================
   🚀 A PÁGINA DE LANÇAMENTO (v3.59)
   ---------------------------------------------------------------------------
   Ela é uma coluna centrada e nada mais: cartaz, contagem, botões, links. Não
   há grade de duas colunas como na tela de entrada porque aqui não há
   formulário para pôr ao lado da arte — quem chega tem UMA decisão a tomar, e
   uma decisão não precisa de duas colunas.

   O FUNDO É A PRÓPRIA ARTE, ampliada e desfocada. É o truque mais barato que
   existe para uma página parecer desenhada para a imagem que ela recebeu: seja
   qual for o cartaz que o dono suba, a moldura sai nas cores dele, sem ninguém
   escolher paleta nenhuma no painel.
   =========================================================================== */
/* `--ouro` nasce no `.ent` (a tela de entrada) e é o que pinta o `.btn.ent-ouro`.
   Ele é redeclarado aqui porque esta página NÃO é filha do `.ent` — sem esta
   linha o botão principal sai com fundo transparente e letra escura, invisível
   contra o fundo escuro. Foi o que aconteceu na primeira renderização. */
.lanc{--ouro:#ffcb05;
  position:relative; min-height:100vh; display:flex; align-items:center;
  justify-content:center; padding:40px 20px; overflow:hidden}
.lanc-fundo{position:absolute; inset:-60px; z-index:0; background:
  radial-gradient(120% 90% at 50% 0%, #1b2440 0%, #0a0e18 70%)}
/* A arte só entra no fundo quando existe — `--lanc-arte` é escrita pelo PHP,
   e sem ela fica o gradiente acima, que é um fundo completo por si só. */
.lanc.com-arte .lanc-fundo{
  background-image:linear-gradient(rgba(6,9,16,.82), rgba(6,9,16,.92)), var(--lanc-arte);
  background-size:cover; background-position:center;
  filter:blur(38px) saturate(1.15); transform:scale(1.12)}
.lanc-meio{position:relative; z-index:1; width:100%; max-width:660px; text-align:center}

.lanc-cartaz{display:block; width:100%; height:auto; border-radius:20px;
  border:1px solid #ffffff1f; box-shadow:0 40px 90px rgba(0,0,0,.65)}

/* Sem cartaz, o texto ocupa o lugar dele — ver o cabeçalho de pages/lancamento.php */
.lanc-sem-arte{padding:10px 0 6px}
.lanc-marca{width:min(520px, 88vw); height:auto; display:block; margin:0 auto}
.lanc-sem-arte h1{font-size:clamp(30px,5vw,52px); line-height:1.02; margin:14px 0 0;
  letter-spacing:-1.5px; color:#fff}
.lanc-selo{display:inline-block; margin-top:12px; padding:5px 14px; border-radius:99px;
  background:#ffffff14; border:1px solid #ffffff2b; color:#e8eefc;
  font-size:11.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase}
.lanc-frase{color:#c8d4ea; font-size:17px; line-height:1.5; margin:14px auto 0; max-width:40ch}
.lanc-frase.peq{font-size:14.5px; margin-top:14px; color:#a9b8d4}

/* --------------------------------------------------------------- a contagem */
.lanc-relogio{margin-top:26px}
.lanc-rot{display:block; font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:#8fa0c0; font-weight:800}
.lanc-conta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-top:10px; font-size:19px; font-weight:800; color:#fff}
/* `tabular-nums` para os números não dançarem de largura a cada segundo — sem
   isso a fileira inteira treme uma vez por segundo, a noite toda. */
.lanc-cx{display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  min-width:74px; padding:10px 6px; border-radius:14px;
  background:#ffffff0f; border:1px solid #ffffff1f}
.lanc-cx b{font-size:30px; line-height:1; font-variant-numeric:tabular-nums}
.lanc-cx i{font-style:normal; font-size:10.5px; letter-spacing:1.5px;
  text-transform:uppercase; color:#93a4c4; font-weight:700}

/* ----------------------------------------------------------------- a decisão */
.lanc-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.lanc-cta .btn{min-width:190px}
.lanc-nota{color:#93a4c4; font-size:13px; line-height:1.6; margin:14px auto 0; max-width:46ch}
.lanc-nota b{color:#dce5f6}

/* ------------------------------------------------------------------ os links */
.lanc-links{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.lanc-link{display:inline-flex; align-items:center; gap:7px; padding:9px 15px;
  border-radius:99px; text-decoration:none; font-size:13.5px; font-weight:700;
  color:#dbe5f7; background:#ffffff0f; border:1px solid #ffffff24;
  transition:background .15s ease, transform .15s ease}
.lanc-link:hover{background:#ffffff1c; transform:translateY(-1px)}
.lanc-pe{margin:30px 0 0; font-size:11.5px; letter-spacing:2px; text-transform:uppercase;
  color:#5f7091; font-weight:700}

@media (max-width:520px){
  .lanc{padding:26px 14px}
  .lanc-cx{min-width:64px}
  .lanc-cx b{font-size:25px}
  .lanc-cta .btn{min-width:0; flex:1 1 140px}
}
/* Quem pediu menos movimento não recebe movimento. */
@media (prefers-reduced-motion:reduce){ .lanc-link:hover{transform:none} }

/* ============================================================ a vitrine (v3.79)
   O RETRATO DO TREINADOR, com o que ele estiver usando. Quem monta o HTML é o
   `Vestir::html()` — um lugar só, porque o retrato aparece no ranking, no chat,
   no torneio, no perfil e no leilão, e um desenho espalhado por cinco telas é
   cinco lugares para uma peça nova não aparecer.

   A moldura e o fundo vêm no `style` da própria tag: eles são dados do jogador,
   e dado de jogador não cabe num arquivo estático que o navegador guarda por
   meses. O que mora aqui é a FORMA — o resto é cor. */
.tr-retrato{
  position:relative; display:inline-block; flex:none;
  border-radius:50%; border:2px solid var(--line);
  background:var(--card2); overflow:visible;
}
.tr-retrato img{
  width:100%; height:100%; border-radius:50%; display:block;
  object-fit:contain; image-rendering:pixelated;
}
/* Os dois selos ficam FORA da imagem e DENTRO da moldura: assim funcionam com
   qualquer um dos 31 personagens, sem depender de onde está a cabeça no
   desenho — que é a razão de eles não serem chapéus desenhados. */
.tr-selo{
  position:absolute; line-height:1; font-style:normal;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); pointer-events:none;
}
.tr-selo-c{ top:-14%; left:-8%;  transform:rotate(-14deg) }
.tr-selo-a{ bottom:-8%; right:-10%; transform:rotate(10deg) }

/* 🧩 A PEÇA ESCONDIDA. Ela precisa ser DISCRETA e ainda assim achável: uma peça
   que ninguém enxerga não é caçada, é sorteio de cliques. Daí a opacidade baixa
   que sobe no hover, e o cursor que muda — quem passa o mouse por cima
   descobre, quem não passa continua sem ver. */
.pecinha{ position:fixed; z-index:40; margin:0 }
.pecinha button{
  background:none; border:0; padding:6px; cursor:pointer; line-height:1;
  font-size:15px; opacity:.16; transition:opacity .18s, transform .18s;
  filter:grayscale(1);
}
.pecinha button:hover, .pecinha button:focus-visible{
  opacity:1; filter:none; transform:scale(1.35);
}
@media (prefers-reduced-motion:reduce){
  .pecinha button{ transition:none }
  .pecinha button:hover{ transform:none }
}
/* No celular ela não pode cair em cima de um botão de verdade. */
@media (max-width:620px){ .pecinha{ z-index:5 } .pecinha button{ opacity:.3 } }

/* =========================================================================
   ✨ A ANIMAÇÃO DA BATALHA (v3.88)
   =========================================================================
   Todo turno deste jogo acontece no servidor e volta pronto (POST/Redirect/GET),
   então o que se anima aqui é o REPLAY do turno que acabou de acontecer. O
   resultado já está decidido antes de o primeiro pixel se mexer — a tela conta
   a história, não a escreve.

   AS PEÇAS SÃO QUATRO, e cada uma responde a uma pergunta que a tela parada
   deixava sem resposta:

     · quem bateu?      → o atacante AVANÇA e volta (`.fx-bate`)
     · em quem?         → o alvo TREME e pisca (`.fx-apanha`)
     · quanto?          → o número SOBE flutuando por cima dele (`.fx-num`)
     · e agora?         → a barra de HP DESCE, em vez de pular

   A barra é a que mais importa e a que menos se nota: sem transição, o HP
   simplesmente aparece menor, e o jogador não vê o golpe acontecer — ele vê
   um número diferente. Com meio segundo de descida, ele vê o dano.

   TUDO RESPEITA `prefers-reduced-motion`. Quem pediu ao sistema para não ter
   movimento tem razões que não me cabe discutir, e o jogo continua inteiro sem
   as animações: elas contam o que o log já diz. */

/* O AVANÇO. Ele é em `translate` e não em `left`: `left` recalcula o layout a
   cada quadro (e a `.fighter` é posicionada em porcentagem dentro da arena),
   enquanto `translate` é composto na placa de vídeo e não mexe em mais nada. */
@keyframes fx-bate-you { 0%{transform:none} 45%{transform:translate(26px,-16px)} 100%{transform:none} }
@keyframes fx-bate-foe { 0%{transform:none} 45%{transform:translate(-26px,16px)} 100%{transform:none} }
/* O `scaleX(-1)` do seu lado é do desenho normal (ver `.arena .fighter.you img`):
   sem repeti-lo aqui, o bicho VIRA DE COSTAS no meio do avanço. */
@keyframes fx-bate-you-esp { 0%{transform:scaleX(-1)} 45%{transform:scaleX(-1) translate(-26px,-16px)} 100%{transform:scaleX(-1)} }

/* O SELETOR É O `[data-vaga]`, e não a `.fighter` — que é o mesmo contrato que
   o JavaScript usa para achar o combatente. A raid não tem arena nem
   `.fighter`: ela é um cartão com o chefe em cima e uma linha por treinador, e
   com o seletor amarrado à `.fighter` a animação valeria em duas telas das
   três, sem nada avisar na terceira.
   O `:not(.fighter)` do `position` existe porque dentro da arena a `.fighter`
   JÁ é posicionada (`inset:0`), e sobrescrevê-la empilharia os dois lados no
   canto de cima. */
[data-vaga]:not(.fighter){ position:relative }
[data-vaga] img.fx-bate            { animation:fx-bate-foe .42s ease-in-out }
.arena .fighter.you img.fx-bate    { animation:fx-bate-you-esp .42s ease-in-out }

/* O IMPACTO. A tremida é curta e o clarão é branco por cima do desenho — os
   dois juntos, porque só tremer não diz que doeu e só piscar não diz onde. */
@keyframes fx-treme {
  0%,100%{ transform:translateX(0) }
  15%{ transform:translateX(-7px) } 30%{ transform:translateX(6px) }
  45%{ transform:translateX(-5px) } 60%{ transform:translateX(4px) }
  75%{ transform:translateX(-2px) }
}
@keyframes fx-treme-esp {
  0%,100%{ transform:scaleX(-1) translateX(0) }
  15%{ transform:scaleX(-1) translateX(7px) } 30%{ transform:scaleX(-1) translateX(-6px) }
  45%{ transform:scaleX(-1) translateX(5px) } 60%{ transform:scaleX(-1) translateX(-4px) }
  75%{ transform:scaleX(-1) translateX(2px) }
}
@keyframes fx-pisca {
  0%,100%{ filter:none } 20%,60%{ filter:brightness(2.6) saturate(.3) }
}
[data-vaga] img.fx-apanha          { animation:fx-treme .38s ease-in-out, fx-pisca .38s linear }
.arena .fighter.you img.fx-apanha  { animation:fx-treme-esp .38s ease-in-out, fx-pisca .38s linear }
/* O golpe forte treme mais tempo e mais fundo. É a única diferença entre um
   golpe comum e um supereficaz — e ela basta, porque o log já diz a palavra. */
[data-vaga] img.fx-apanha.fx-forte { animation-duration:.62s, .62s; transform-origin:center }

/* QUEM CAIU TOMBA. Ele não some: sumir faz parecer erro de carregamento. */
@keyframes fx-cai {
  0%   { opacity:1; transform:translateY(0) rotate(0) }
  100% { opacity:.15; transform:translateY(26px) rotate(-16deg) }
}
@keyframes fx-cai-esp {
  0%   { opacity:1; transform:scaleX(-1) translateY(0) rotate(0) }
  100% { opacity:.15; transform:scaleX(-1) translateY(26px) rotate(16deg) }
}
[data-vaga] img.fx-caiu            { animation:fx-cai .5s ease-in forwards }
.arena .fighter.you img.fx-caiu    { animation:fx-cai-esp .5s ease-in forwards }

/* O NÚMERO DO DANO. Ele nasce em cima do alvo e sobe sumindo. É `position:
   absolute` dentro da `.fighter`, que já é do tamanho da arena — assim ele
   acompanha o bicho sem precisar saber onde o bicho está. */
.fx-num{
  position:absolute; z-index:6; pointer-events:none;
  font-weight:800; font-size:26px; line-height:1;
  color:#fff; text-shadow:0 2px 0 #0008, 0 0 12px #000a;
  animation:fx-sobe .95s ease-out forwards;
}
.fx-num.forte{ color:#fde047; font-size:32px }   /* supereficaz ou crítico */
.fx-num.fraco{ color:#93c5fd; font-size:21px }   /* resistiu */
/* O `-50%` DO EIXO X ESTÁ EM TODOS OS QUADROS, e não no `transform` do
   elemento: o `transform` é uma propriedade só, e a animação sobrescreve o que
   o JavaScript escreveu — o número nascia meio desenho à direita do alvo. */
@keyframes fx-sobe{
  0%   { opacity:0; transform:translate(-50%,6px)  scale(.7) }
  18%  { opacity:1; transform:translate(-50%,0)    scale(1.12) }
  32%  { opacity:1; transform:translate(-50%,-4px) scale(1) }
  100% { opacity:0; transform:translate(-50%,-42px) scale(.95) }
}

/* O CLARÃO NO PONTO DE CONTATO. Ele é BRANCO, e não da cor do tipo do golpe:
   um efeito por tipo seriam dezoito desenhos, e cada um é um desenho que pode
   ficar tosco. Um clarão neutro diz «bateu aqui» e não erra em nenhum dos 18. */
.fx-flash{
  position:absolute; z-index:5; pointer-events:none;
  width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%;
  background:radial-gradient(circle,#fff 0 22%,#ffffffcc 38%,transparent 70%);
  animation:fx-estoura .34s ease-out forwards;
}
.fx-flash.forte{ width:86px; height:86px; margin:-43px 0 0 -43px }
@keyframes fx-estoura{
  0%   { opacity:0; transform:scale(.25) }
  25%  { opacity:1; transform:scale(.9) }
  100% { opacity:0; transform:scale(1.5) }
}

/* O ABALO DA ARENA no golpe forte. Ele é de 3px e dura pouco: a tela inteira
   pulando é enjoativo em dez turnos, e o que se quer é o susto de um. */
@keyframes fx-abalo{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-3px,2px) } 40%{ transform:translate(3px,-2px) }
  60%{ transform:translate(-2px,-1px) } 80%{ transform:translate(2px,1px) }
}
.arena.fx-abalo{ animation:fx-abalo .3s ease-in-out }

/* A ENTRADA. Quem cai é substituído e a próxima simplesmente APARECIA — um
   momento que acontece várias vezes por luta e não tinha retorno nenhum. */
@keyframes fx-entra{
  0%   { opacity:0; transform:translateX(38px) scale(.7) }
  60%  { opacity:1; transform:translateX(-5px) scale(1.06) }
  100% { opacity:1; transform:none }
}
@keyframes fx-entra-esp{
  0%   { opacity:0; transform:scaleX(-1) translateX(38px) scale(.7) }
  60%  { opacity:1; transform:scaleX(-1) translateX(-5px) scale(1.06) }
  100% { opacity:1; transform:scaleX(-1) }
}
[data-vaga] img.fx-entra           { animation:fx-entra .5s cubic-bezier(.2,.9,.3,1.2) }
.arena .fighter.you img.fx-entra   { animation:fx-entra-esp .5s cubic-bezier(.2,.9,.3,1.2) }

/* ============================ A BOLA ====================================
   Ela é DESENHADA EM CSS, e não é um arquivo: precisa aparecer em qualquer
   instalação, inclusive nas que nunca puseram arte nenhuma na pasta. São três
   camadas — a metade de cima vermelha, a de baixo clara, e o botão do meio. */
.fx-bola{
  position:absolute; z-index:7; pointer-events:none;
  width:26px; height:26px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 16%, #222 17% 24%, transparent 25%),
    linear-gradient(#0000 0 46%, #222 46% 54%, #0000 54%),
    linear-gradient(#e3350d 0 50%, #f2f2f2 50%);
  box-shadow:0 2px 6px #0009, inset -3px -4px 8px #0004;
}
/* O ARREMESSO: um arco, e não uma reta. Reta parece um item deslizando. */
@keyframes fx-voa{
  0%   { opacity:0; transform:translate(-120px, 90px) scale(.5) rotate(0) }
  15%  { opacity:1 }
  60%  { transform:translate(-30px, -46px) scale(1) rotate(320deg) }
  100% { opacity:1; transform:translate(0,0) scale(1) rotate(540deg) }
}
.fx-bola.voando{ animation:fx-voa .42s ease-out forwards }
@keyframes fx-cair{
  0%   { transform:translateY(0) }
  55%  { transform:translateY(30px) }
  70%  { transform:translateY(22px) }
  100% { transform:translateY(30px) }
}
.fx-bola.caindo{ animation:fx-cair .38s ease-in forwards }
/* O CHACOALHO. O número de vezes vem do MOTOR — é a mesma conta que escreve a
   frase do log. A animação não decide se pegou; ela mostra o que já foi. */
@keyframes fx-balanca{
  0%,100%{ transform:translateY(30px) rotate(0) }
  25%{ transform:translateY(30px) rotate(-19deg) }
  75%{ transform:translateY(30px) rotate(19deg) }
}
.fx-bola.balanca{ animation:fx-balanca .5s ease-in-out }
@keyframes fx-clique{
  0%  { transform:translateY(30px) scale(1); box-shadow:0 2px 6px #0009 }
  30% { transform:translateY(30px) scale(1.18); box-shadow:0 0 26px #fde047 }
  100%{ transform:translateY(30px) scale(1); box-shadow:0 0 10px #fde04788 }
}
.fx-bola.clicou{ animation:fx-clique .5s ease-out forwards }
@keyframes fx-abre{
  0%  { opacity:1; transform:translateY(30px) scale(1) }
  100%{ opacity:0; transform:translateY(24px) scale(1.9) }
}
.fx-bola.abriu{ animation:fx-abre .4s ease-out forwards }
/* O BICHO SUGADO some encolhendo para dentro da bola — e volta se escapar. */
[data-vaga] img.fx-sugado{ opacity:0; transform:scale(.15); transition:opacity .3s, transform .3s }
.arena .fighter.you img.fx-sugado{ transform:scaleX(-1) scale(.15) }

/* A BARRA DESCE. A transição vale só quando o JavaScript liga a classe: sem
   ela, abrir uma tela já carregada faria toda barra do jogo deslizar do zero. */
.bar.fx-anima i{ transition:width .55s cubic-bezier(.4,0,.2,1) }

@media (prefers-reduced-motion:reduce){
  [data-vaga] img.fx-bate,
  [data-vaga] img.fx-apanha,
  [data-vaga] img.fx-caiu,
  [data-vaga] img.fx-entra,
  .arena .fighter.you img.fx-entra,
  .arena.fx-abalo,
  .fx-flash,
  .fx-bola.voando, .fx-bola.caindo, .fx-bola.balanca,
  .fx-bola.clicou, .fx-bola.abriu,
  .arena .fighter.you img.fx-bate,
  .arena .fighter.you img.fx-apanha,
  .arena .fighter.you img.fx-caiu { animation:none }
  .fx-num{ animation:fx-sobe-parado 1.2s linear forwards }
  @keyframes fx-sobe-parado{ 0%,80%{opacity:1} 100%{opacity:0} }
  .bar.fx-anima i{ transition:none }
}

/* -------------------------------------------- a barra de EXP na batalha (v3.86)
 *
 * A placa do seu lado ganhou duas linhas: a barra azul e os números dela. Numa
 * janela estreita isso não cabe — a arena é 9:5, então a 400px ela tem 222px de
 * altura, e as duas placas passavam a somar mais do que isso: a sua crescia
 * para cima e ia parar em cima da do adversário.
 *
 * O QUE SAI É O NÚMERO, E NÃO A BARRA. A barra responde sozinha a pergunta que
 * se faz olhando para ela — «falta muito?» —, e é ela que enche golpe a golpe.
 * O número exato continua a um toque de distância, na ficha da criatura, que é
 * onde se vai quando a resposta «falta pouco» não basta. Esconder a barra e
 * manter o número seria o contrário: guardar a precisão e jogar fora a leitura.
 */
@media (max-width:520px){
  .nameplate .hpline.exp-num{ display:none }
}

/* =========================================================================
   👥 A SEGUNDA VAGA DAS DUPLAS (v3.80)
   =========================================================================
   A arena desenha cada lado numa camada do tamanho da caixa, com a placa e o
   bicho posicionados um independente do outro (ver `.arena .fighter`). Em
   duplas há DUAS camadas por lado, e sem estas regras a segunda cairia
   exatamente em cima da primeira — dois bichos no mesmo pixel, uma placa
   escondendo a outra.

   ENTÃO A SEGUNDA VAGA ANDA PARA O LADO, e só ela: os números da primeira
   continuam sendo os do painel (aba Cenários), e quem ajustar o cenário
   continua ajustando o que sempre ajustou. A segunda é um deslocamento
   relativo, não um segundo conjunto de números para manter.

   CADA DUPLA FICA DO SEU LADO DA CENA: as duas do adversário no alto à
   direita, as suas no rodapé à esquerda. A leitura vira uma diagonal — o campo
   dele lá, o seu cá — em vez de quatro bichos espalhados sem dono.

   E A PLACA FICA DO MESMO LADO DO BICHO DELA. Isto NÃO é capricho: em um
   contra um a placa mora no canto OPOSTO ao bicho, e não há dúvida possível
   porque só existe um de cada. Com dois por lado, a placa oposta cruza —
   a primeira prova desta tela mostrou a barra do Alakazam à esquerda com o
   Alakazam desenhado à direita, e a do Gengar à direita com o Gengar no meio.
   Quem estivesse jogando leria o HP do bicho errado antes de escolher o alvo,
   que é o momento em que a informação mais importa.

   A ORDEM DAS PLACAS É A ORDEM DOS BICHOS, da esquerda para a direita. */
/* O RECUO DA SEGUNDA VAGA É RELATIVO AO DA PRIMEIRA, e não um número solto.
   Com `right:26%` fixo, mexer na posição dos lutadores no painel (ou o ajuste
   que vem junto de uma arte, ver `Cenario::paraBase`) movia só a vaga 0 — a
   dupla se desmanchava, e quem ajustou não teria como saber por quê. Assim as
   duas andam juntas, com 23% de distância entre elas. */
.arena .fighter.foe.v2 img{ right:calc(var(--adv-lado, 3%) + 23%); }
.arena .fighter.you.v2 img{ left:calc(var(--vc-lado, 3%) + 23%);   }

/* adversário: a vaga 0 é a mais à direita, então a placa dela é a da direita */
.arena.duplas .fighter.foe    .nameplate{ top:16px; left:auto; right:18px }
.arena.duplas .fighter.foe.v2 .nameplate{ top:16px; right:auto; left:18px }
/* você: a vaga 0 é a mais à esquerda */
.arena.duplas .fighter.you    .nameplate{ bottom:16px; right:auto; left:18px }
.arena.duplas .fighter.you.v2 .nameplate{ bottom:16px; left:auto; right:18px }

/* COM QUATRO PLACAS, 47% CADA NÃO CABE — duas por linha somam 94% mais as
   bordas, e no celular a de 62% cobriria a vizinha inteira. */
.arena.duplas .fighter .nameplate{ width:44% }
/* =========================================================================
   🎟️ O PASSE DE BATALHA (v3.235)
   ========================================================================= */
.ps-linha{display:flex; gap:11px; align-items:center; padding:11px 14px;
  border:1px solid var(--line); border-radius:12px; background:var(--card2); margin-bottom:8px}
/* No ar = o realce de «aqui tem algo acontecendo», a mesma ficha da missão
   pronta e do degrau pronto. Um verde inventado aqui seria o quarto. */
.ps-linha.noar{border-color:var(--good); background:var(--realce-bom)}
.ps-linha .ps-ico{font-size:20px; flex:0 0 auto}
.ps-linha .ps-nm{flex:1 1 auto; min-width:0}
.ps-selo{font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px;
  background:var(--good); color:#0b0e15; letter-spacing:.3px; flex:0 0 auto}

.ps-grade{width:100%; border-collapse:collapse; font-size:12.5px; min-width:900px}
.ps-grade th{text-align:left; color:var(--muted); font-weight:700; padding:7px 8px;
  border-bottom:1px solid var(--line)}
.ps-grade td{padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top}
.ps-nv{font-weight:800; color:var(--muted)}
.ps-cel{display:flex; gap:5px; align-items:center; flex-wrap:wrap}
.ps-cel select,.ps-cel input{margin:0; padding:5px 7px; font-size:12.5px; width:auto}
.ps-cel .ps-tipo{flex:0 0 118px}
.ps-cel .ps-sel {flex:1 1 120px; min-width:0}
.ps-cel .ps-q   {flex:0 0 96px}
.ps-cel .ps-n   {flex:0 0 62px}
.ps-sh{display:flex; align-items:center; gap:3px; margin:0; font-size:13px; color:var(--muted)}
.ps-sh input{width:auto; margin:0}

/* 📱 NO CELULAR A LINHA DO PASSE EMPILHA. Com sete campos lado a lado ela
   estouraria a largura, e o botão de «pôr no ar» sairia da tela — que é
   justamente o botão que se veio apertar. */
@media (max-width:640px){
  .ps-linha{flex-wrap:wrap}
  .ps-linha .ps-nm{flex:1 1 100%}
  .ps-cel .ps-tipo,.ps-cel .ps-sel,.ps-cel .ps-q{flex:1 1 100%}
}

/* =========================================================================
   🎟️ O PASSE PELO LADO DE QUEM JOGA — a TRILHA (v3.236)
   =========================================================================
   A primeira versão era duas fileiras de caixas com o número no meio: honesta
   e sem alma nenhuma — o próprio dono disse que parecia cópia. O que ela não
   tinha era a ideia do jogo dentro dela.

   Este jogo é sobre ANDAR. Tem mapa, tem passo, tem trilha. Então o passe não
   é uma tabela de recompensas: é um CAMINHO, com marcos numerados, o trecho já
   percorrido aceso e um pino dizendo «você está aqui». A mesma informação da
   versão anterior, na metáfora que o jogo já usa em toda tela.

   ⚠️ E O MOVIMENTO TEM DE SE EXPLICAR. Três animações, cada uma com um
   trabalho: a barra ENCHE (mostra o progresso acontecendo), o prêmio pronto
   PULSA (é o único lugar da tela onde há algo a fazer), e os marcos ENTRAM em
   sequência (desenha o caminho da esquerda para a direita, que é o sentido em
   que ele se lê). Nada mais se mexe — tela que pisca inteira cansa em dois
   dias, e aí a pessoa para de olhar justamente para o que importa.
   ========================================================================= */

/* ----------------------------------------------------------- o cartaz */
.pb-faixa{position:relative; display:flex; gap:16px; align-items:center;
  padding:18px 20px; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg,#241a3d 0%,#1a1830 45%,#141a27 100%);
  border:1px solid #4c3d8f}
/* O brilho que atravessa o cartaz uma vez, na entrada. Ele não repete: é um
   «olha aqui» de abertura, e um reflexo que volta a cada seis segundos vira
   um letreiro de loja. */
.pb-faixa::after{content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,#ffffff22 48%,transparent 62%);
  transform:translateX(-100%); animation:pb-brilho 1.6s .25s ease-out 1 forwards;
  pointer-events:none}
@keyframes pb-brilho{to{transform:translateX(100%)}}

.pb-ico{flex:0 0 54px; height:54px; border-radius:14px; display:grid;
  place-items:center; font-size:27px;
  background:linear-gradient(145deg,#fbbf24,#f59e0b);
  box-shadow:0 6px 18px #f59e0b55}
.pb-meio{flex:1 1 auto; min-width:0; position:relative; z-index:1}
.pb-topo{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.pb-nome{font-size:17px; font-weight:800; letter-spacing:.2px}
/* O NÍVEL É O NÚMERO MAIOR DA TELA. É a resposta da primeira pergunta que a
   pessoa faz ao abrir («onde eu estou?»), e ele tinha o mesmo tamanho do
   resto. */
.pb-nv{display:inline-flex; align-items:baseline; gap:5px; padding:2px 11px;
  border-radius:999px; background:#7c3aed22; border:1px solid #7c3aed66; color:#c4b5fd}
.pb-nv b{font-size:19px; line-height:1; color:#ddd6fe}
.pb-tag{font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px;
  background:linear-gradient(145deg,#fbbf24,#f59e0b); color:#241a3d; letter-spacing:.5px}
.pb-prazo{margin-left:auto; font-size:12px; white-space:nowrap}

.pb-bar{position:relative; height:12px; border-radius:999px; background:#0d0f1acc;
  overflow:hidden; margin:10px 0 5px; box-shadow:inset 0 1px 3px #0008}
.pb-bar i{display:block; height:100%; width:var(--pct,0%); border-radius:999px;
  background:linear-gradient(90deg,#7c3aed,#a78bfa 60%,#e9d5ff);
  animation:pb-encher 1.1s .1s cubic-bezier(.22,1,.36,1) 1 both}
@keyframes pb-encher{from{width:0}to{width:var(--pct,0%)}}

/* ------------------------------------------------------------ a trilha */
.pb-trilha{display:grid; grid-auto-flow:column; grid-auto-columns:126px;
  gap:12px; overflow-x:auto; padding:6px 2px 14px;
  scroll-snap-type:x proximity}
/* 💥 AS TRÊS LINHAS TÊM ALTURA FIXA, e isso não é capricho: com as alturas
   soltas, uma coluna cuja faixa de cima está vazia encolhe, o marco dela sobe,
   e a estrada vira uma escada. A primeira versão fazia exatamente isso — a
   linha do nível 20 ficava dois dedos acima da do 15, e o caminho deixava de
   parecer um caminho. Cartão vazio continua ocupando a vaga, só que recuado. */
.pb-col{scroll-snap-align:center; display:grid;
  grid-template-rows:132px 40px 132px; gap:8px;
  animation:pb-entra .45s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i,0) * 55ms)}
@keyframes pb-entra{from{opacity:0; transform:translateY(10px)}}

/* O MARCO — o nó do caminho. O trilho é o `::before` dele, esticado para os
   lados até encostar no vizinho: assim a linha nasce contínua sem ninguém
   precisar medir a largura do conjunto, que muda com a rolagem. */
.pb-marco{position:relative; height:40px; display:grid; place-items:center}
.pb-marco::before{content:''; position:absolute; top:50%; left:-14px; right:-14px;
  height:5px; margin-top:-2px; border-radius:3px; background:#2a3348}
.pb-col.feito .pb-marco::before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.pb-mnum{position:relative; z-index:1; min-width:34px; height:34px; padding:0 9px;
  border-radius:999px; display:grid; place-items:center; font-weight:800; font-size:13px;
  background:var(--card); border:2px solid #2a3348; color:var(--muted)}
.pb-col.feito .pb-mnum{background:linear-gradient(145deg,#fbbf24,#f59e0b);
  border-color:#fbbf24; color:#241a3d; box-shadow:0 3px 12px #f59e0b55}

/* 📍 «VOCÊ ESTÁ AQUI» — no último marco alcançado. É o que transforma uma
   lista de degraus num lugar onde a pessoa está. */
.pb-col.aqui .pb-mnum{box-shadow:0 0 0 4px #fbbf2433, 0 3px 14px #f59e0b77}
.pb-aqui{position:absolute; top:-16px; font-size:13px; animation:pb-pino 2.2s ease-in-out infinite}
@keyframes pb-pino{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ----------------------------------------------------------- os cartões */
.pb-card{position:relative; border:1px solid var(--line); border-radius:14px;
  background:var(--card2); padding:11px 9px; text-align:center; height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.pb-card b{font-size:11.5px; line-height:1.25}
.pb-card small{color:var(--muted); font-size:10.5px}
.pb-fig{font-size:26px; line-height:1}
.pb-sprite{image-rendering:pixelated}
.pb-card .btn{width:100%; padding:6px 8px; font-size:12px}

.pb-card.pego{border-color:var(--good); background:var(--realce-bom)}
.pb-card.pego::after{content:'✔'; position:absolute; top:7px; right:9px;
  color:var(--good); font-weight:800; font-size:12px}
.pb-card.trancado{opacity:.5}
/* O CARTÃO VAZIO OCUPA A VAGA, MAS NÃO CHAMA. Ele precisa da altura para a
   estrada não entortar (ver o comentário do `.pb-col`), e precisa sumir do
   olho de quem procura o que pegar — daí o tracejado e o recuo. */
.pb-card.vazio{border-style:dashed; opacity:.28; background:none}

/* ✨ O ÚNICO QUE PULSA É O QUE DÁ PARA PEGAR. Se dois pulsassem, nenhum
   chamaria — e a tela toda acesa é a tela toda ignorada. */
.pb-card.pronto{border-color:var(--warn); background:var(--realce-ouro);
  animation:pb-chama 2.4s ease-in-out infinite}
@keyframes pb-chama{
  0%,100%{box-shadow:0 0 0 0 #f59e0b00}
  50%    {box-shadow:0 0 0 5px #f59e0b22, 0 6px 18px #f59e0b33}
}
.pb-card.pronto:hover{transform:translateY(-3px); box-shadow:0 8px 22px #f59e0b44}

.pb-legenda{display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  font-size:12px; color:var(--muted); margin:4px 0 0}
.pb-chip{display:inline-flex; align-items:center; gap:5px}
.pb-chip i{width:11px; height:11px; border-radius:3px; display:inline-block}

/* 👑 A CHAMADA DO PREMIUM é um painel, e não um botão solto no meio de um
   parágrafo: ela é a única coisa desta tela que pede dinheiro, e tem de
   parecer uma oferta em vez de um link. */
.pb-oferta{display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  margin-top:14px; padding:14px 16px; border-radius:14px;
  background:linear-gradient(135deg,#2a2010,#1c1a14); border:1px solid #7a6413}
.pb-oferta .pb-of-txt{flex:1 1 240px; min-width:0}

@media (max-width:640px){
  .pb-faixa{gap:11px; padding:14px}
  .pb-ico{flex-basis:44px; height:44px; font-size:22px}
  .pb-prazo{margin-left:0; flex-basis:100%}
  .pb-trilha{grid-auto-columns:116px}
  .pb-col{grid-template-rows:124px 38px 124px}
}

/* ⚠️ QUEM PEDIU AO SISTEMA PARA NÃO TER MOVIMENTO não pediu menos movimento:
   pediu nenhum. Tudo aqui vira estado final imediato — a barra já cheia, o
   caminho já desenhado, o prêmio pronto destacado pela COR, que não se mexe. */
@media (prefers-reduced-motion: reduce){
  .pb-faixa::after{animation:none; display:none}
  .pb-bar i{animation:none; width:var(--pct,0%)}
  .pb-col{animation:none}
  .pb-card.pronto{animation:none; box-shadow:0 0 0 3px #f59e0b33}
  .pb-card.pronto:hover{transform:none}
  .pb-aqui{animation:none}
}

/* -------------------------------------------------- as duplas no celular
 *
 * AQUI A CONTA NÃO FECHAVA, e a primeira prova da tela mostrou exatamente
 * isso: a arena é 9:5, então numa janela de 420px ela tem 233px de altura —
 * e quatro placas de 55px são 220px. As quatro empilhavam-se no meio, uma por
 * cima da outra, cobrindo os quatro bichos.
 *
 * SÃO DUAS MEDIDAS, e as duas são necessárias:
 *   1. a arena fica MAIS ALTA em duplas (4:3 em vez de 9:5) — há o dobro de
 *      gente em campo, e a altura é o que elas disputam;
 *   2. a placa encolhe para o osso: nome, nível e barra. A linha de HP e o
 *      «de pé» saem, porque o número exato cabe na tela de baixo e a barra já
 *      diz o que decide a jogada.
 */
@media (max-width:520px){
  .arena.duplas{ aspect-ratio:4 / 3 }
  .arena.duplas .fighter .nameplate{
    width:47%; padding:4px 7px; font-size:11px; margin:0;
  }
  .arena.duplas .fighter .nameplate .hpline{ display:none }
  .arena.duplas .fighter .nameplate .n small{ font-size:10px }
  .arena.duplas .fighter.foe .nameplate,
  .arena.duplas .fighter.foe.v2 .nameplate{ top:10px }
  .arena.duplas .fighter.you .nameplate,
  .arena.duplas .fighter.you.v2 .nameplate{ bottom:10px }
  .arena.duplas .fighter.foe .nameplate{ right:8px }
  .arena.duplas .fighter.foe.v2 .nameplate{ left:8px }
  .arena.duplas .fighter.you .nameplate{ left:8px }
  .arena.duplas .fighter.you.v2 .nameplate{ right:8px }
  /* Os quatro sobem para a faixa do meio, entre as duas fileiras de placas. */
  .arena.duplas .fighter.foe img{ bottom:46%; width:max(64px, 20%) }
  /* ⚠️ 22% E NÃO 16% (v3.208): com 16% os seus dois bichos subiam só 44px do
     rodapé de uma arena de 273, e as DUAS placas de baixo — que moram a 10px
     do rodapé e têm 43 de altura — caíam em cima do ombro deles. Medido: 12px
     de sobreposição antes, 6px de folga agora. Mesmo defeito das singelas, só
     que aqui quem tinha de subir era o bicho: a placa das duplas já é a menor
     que a informação comporta. */
  .arena.duplas .fighter.you img{ bottom:22%; width:max(64px, 22%) }
  .arena.duplas .fighter.foe.v2 img{ right:30% }
  .arena.duplas .fighter.you.v2 img{ left:30% }
}

/* 🎨 A BARRA DO «QUANTO FALTA DE ARTE» na aba 🌍 Regiões (v3.240).
   Ela é o resumo que o número sozinho não dá: «103/151» exige ler e dividir;
   a barra diz «quase lá» ou «mal começou» antes de o olho chegar no número.
   A COR VEM POR ATRIBUTO, do PHP, e não de classes aqui: quem decide o que é
   pronto, andando e parado é a tela que faz a conta — uma segunda régua no
   CSS discordaria dela no dia em que a primeira mudasse. */
.ar-barra{height:6px;border-radius:999px;background:var(--line);
          overflow:hidden;margin:4px 0 3px}
.ar-barra i{display:block;height:100%;border-radius:999px;
            transition:width .3s ease}
@media (prefers-reduced-motion: reduce){ .ar-barra i{transition:none} }

:root[data-tema="claro"]{
  --bg:#eef4fb; --panel:#ffffffcc; --card:#ffffff; --card2:#f3f7fd;
  --line:#dbe6f3; --text:#16233a; --muted:#5c6b85; --accent:#2563eb;
  --veu-cor:255 255 255; --campo:#fff;
  /* Os mesmos tons que as faixas `.flash.ok` e `.flash.warn` já usam: a
     folha tinha um verde e um âmbar de tema claro, e inventar outros
     seria um segundo idioma para dizer a mesma coisa. */
  --realce-bom:#f0fdf4; --realce-ouro:#fffbeb;
}
:root[data-tema="claro"] body{color:var(--text)}
/* Os dois borrões coloridos do fundo escuro não existem no claro: eles
   foram desenhados para acender um preto, e num branco viram sujeira. */
:root[data-tema="claro"] body:not(.com-fundo){background-image:none}

:root[data-tema="claro"] .topbar{
  background:#ffffffe6; border-bottom:1px solid var(--line);
  box-shadow:0 2px 14px #0f2a5510;
}
:root[data-tema="claro"] .brand{color:#e3350d}
:root[data-tema="claro"] .brand .dot{border-color:#d6dfec}
:root[data-tema="claro"] .chip-face{background:#f1f5fb; border-color:var(--line)}
:root[data-tema="claro"] .chip:hover .chip-face,
:root[data-tema="claro"] .chip:focus .chip-face{background:#e7eefa; color:var(--text)}
:root[data-tema="claro"] .tip,
:root[data-tema="claro"] .tip:before{background:#fff}
:root[data-tema="claro"] .tip{box-shadow:0 14px 34px #10265526}
:root[data-tema="claro"] .topnav:hover,
:root[data-tema="claro"] .topnav.on{background:#eaf1fb; border-color:var(--line); color:var(--text)}
/* A FAIXA DO RODAPÉ NO CLARO. Ela é o par da `.topbar` lá em cima: o mesmo
   branco, o mesmo risco, para a página ficar fechada dos dois lados. Isto aqui é
   o que faz a faixa CLAREAR às 6 e ESCURECER às 18 junto com o resto do site —
   o `.foot` escuro é o estado de fábrica, e esta linha é a troca. */
/* OS BANIDOS DO TORNEIO no claro: o mesmo vermelho, mais fraco — num fundo
   branco a mesma transparência do escuro vira rosa-choque. */
:root[data-tema="claro"] .tn-fora-i{background:#dc26260f; border-color:#dc262633}
:root[data-tema="claro"] .tn-fora-i span{color:#b3261e}
:root[data-tema="claro"] .foot{background:#ffffffe6; border-top-color:var(--line);
  color:#7d8ba4; box-shadow:0 -2px 14px #0f2a5510}

/* O MENU. O item aceso é vermelho-e-laranja, e não o azul do resto: no
   claro o azul do `--accent` é a cor dos botões, e um menu da mesma cor
   dos botões faz a lateral inteira parecer clicável de um jeito só. */
:root[data-tema="claro"] .navgroup a{color:#33415c; border-bottom-color:#eef2f8}
:root[data-tema="claro"] .navgroup a:hover{background:#f1f5fb; color:#0f1e36}
:root[data-tema="claro"] .navgroup a.on{background:linear-gradient(90deg,#e3350d,#f97316)}
:root[data-tema="claro"] .navtitle{color:#33415c; background:#ffffffe6}
/* A COR DO GRUPO na borda esquerda: é ela que responde «onde eu estou?»
   antes de qualquer palavra ser lida. */
:root[data-tema="claro"] .side .navgroup{border-left:4px solid #2563eb}
:root[data-tema="claro"] .side .navgroup.g-cidade{border-left-color:#16a34a}
:root[data-tema="claro"] .side .navgroup.g-desafios{border-left-color:#f59e0b}
:root[data-tema="claro"] .side .navgroup.g-pvp{border-left-color:#dc2626}
:root[data-tema="claro"] .side .navgroup.g-diversao{border-left-color:#a855f7}
:root[data-tema="claro"] .side .navgroup.g-social{border-left-color:#0ea5e9}

:root[data-tema="claro"] .card,
:root[data-tema="claro"] .navgroup,
:root[data-tema="claro"] .teambox{box-shadow:0 8px 26px #0f265520}
:root[data-tema="claro"] .hud{background:linear-gradient(135deg,#fff,#eef5ff); border-color:#cfe0f5}

:root[data-tema="claro"] .btn{box-shadow:0 4px 12px #2563eb33}
:root[data-tema="claro"] .btn.ghost{background:#e8eef9; color:#1e3a8a; box-shadow:none}
:root[data-tema="claro"] .pill{background:#eef3fb; border-color:var(--line); color:#33415c}
/* 💥 AQUI MORAVA A REGRA QUE PINTAVA TODO CAMPO DE BRANCO NO TEMA CLARO.
   Ela dizia exatamente o que a regra base já diz — `color:var(--text)` —
   mais um `background:#fff` na mão. E era esse `#fff` que ganhava, por
   especificidade, das quatro superfícies que devolvem as fichas: dentro
   delas o texto é claro por definição, e o campo virava branco no branco.
   Medido antes de mexer: 1,2 de contraste nas quatro, onde o mínimo
   legível é 4,5. Agora a diferença entre os temas mora na ficha
   `--campo`, que é o único lugar onde ela precisa morar. */

/* As quatro faixas de recado. Elas carregam SIGNIFICADO — verde é deu
   certo, vermelho é não deu —, então a cor é a mesma; o que muda é de que
   lado do cinza ela mora. */
:root[data-tema="claro"] .flash.info{background:#eff6ff; border-color:#bfdbfe; color:#1e40af}
:root[data-tema="claro"] .flash.ok  {background:#f0fdf4; border-color:#bbf7d0; color:#166534}
:root[data-tema="claro"] .flash.warn{background:#fffbeb; border-color:#fde68a; color:#92400e}
:root[data-tema="claro"] .flash.bad {background:#fef2f2; border-color:#fecaca; color:#991b1b}

:root[data-tema="claro"] .bar{background:#e6edf7; border-color:#d4dfee}
:root[data-tema="claro"] .slotnum,
:root[data-tema="claro"] .preco{background:#f1f5fb}
:root[data-tema="claro"] .preco.falta{border-color:#fca5a5; color:#b91c1c}
:root[data-tema="claro"] .nameplate{background:#ffffffe8; color:var(--text)}
:root[data-tema="claro"] .battlelog{background:#f7fafe; color:#33415c}
:root[data-tema="claro"] .movebtn:hover{background:#eaf1fb}
:root[data-tema="claro"] .evrank .eu{background:#e8f0fc}
:root[data-tema="claro"] .tabs a{color:#33415c}
:root[data-tema="claro"] .tabs a:hover{background:#eaf1fb; color:#0f1e36}
:root[data-tema="claro"] .tabs a.mega{color:#7c3aed}
:root[data-tema="claro"] .tabs a.mega:hover{background:#f5efff}
:root[data-tema="claro"] .tabs a.forma{color:#047857}
:root[data-tema="claro"] .tabs a.forma:hover{background:#ecfdf5}
:root[data-tema="claro"] .dexcell.mega{background:#f5efff}
:root[data-tema="claro"] .dexcell.forma{background:#ecfdf5}
:root[data-tema="claro"] .dexcell.evento{background:#f3f0ff}
:root[data-tema="claro"] .megaseal{background:#7c3aed; color:#fff; border-color:#6d28d9}
:root[data-tema="claro"] .megaseal:hover{background:#6d28d9}
:root[data-tema="claro"] .rumor{color:#33415c}
:root[data-tema="claro"] .evostep.on{background:#e8f0fc}
:root[data-tema="claro"] .evostep.mega{background:#f5efff}
:root[data-tema="claro"] .effline.n4{background:linear-gradient(90deg,#fee2e2,var(--card2) 55%)}
:root[data-tema="claro"] .effline.n2{background:linear-gradient(90deg,#fef2f2,var(--card2) 55%)}
:root[data-tema="claro"] .effline.h2{background:linear-gradient(90deg,#dcfce7,var(--card2) 55%)}
:root[data-tema="claro"] .effline.h4{background:linear-gradient(90deg,#bbf7d0,var(--card2) 55%)}
:root[data-tema="claro"] .effline.n0{background:linear-gradient(90deg,#eef2f8,var(--card2) 55%)}
:root[data-tema="claro"] .relogio{border-color:#86efac; background:linear-gradient(90deg,#dcfce7,var(--card2) 60%)}
:root[data-tema="claro"] .relogio.travado{border-color:#fcd34d; background:linear-gradient(90deg,#fef3c7,var(--card2) 60%)}
:root[data-tema="claro"] .balcoes a:hover{border-color:#bcd0ea; background:#eef4fc}
:root[data-tema="claro"] .balcoes a.on{background:linear-gradient(90deg,#dbeafe,var(--card2) 70%)}
:root[data-tema="claro"] .mqitem.on{border-color:#bcd0ea; background:#eef4fc}
:root[data-tema="claro"] .linhagolpe{border-top-color:var(--line)}
:root[data-tema="claro"] .previa-flutuante{box-shadow:0 18px 44px #10265540}
:root[data-tema="claro"] .lei-extrato td{border-bottom-color:#eef2f8}
:root[data-tema="claro"] .tc.vaga{background:#eef3fa; border-color:#c9d7e9; color:#8494ad}
/* A CARTA DO TIME CONTINUA ESCURA nos dois temas — o fundo dela é a cor
   do TIPO, não a do tema. O que muda é só o nome, que herdava o texto da
   página e sumia no escuro da carta. */
:root[data-tema="claro"] .tc-pe b{color:#fff}
:root[data-tema="claro"] .tc-pe span{color:#e8eef8}

/* A FICHA DA ESPÉCIE TAMBÉM NÃO, e pela mesma razão do painel logo abaixo: ela
   flutua sobre a ARENA, e a arena é escura nos dois temas (o cenário é
   desenho, não página). Ela caiu na armadilha idêntica na estreia — fundo fixo
   escuro com `color:var(--text)`, que no claro vira tinta escura: sobravam os
   rótulos cinzentos e os catorze valores sumiam. Duas vezes o mesmo defeito em
   duas semanas é o que transformou isto em asserção do check98. */
/* as fichas vêm da regra única «AS SUPERFÍCIES ESCURAS», no fim do arquivo */

/* O PAINEL DA CAPA TAMBÉM NÃO SEGUE O TEMA, e pelo mesmo motivo da tela de
   entrada logo abaixo: ele está em cima de uma ILUSTRAÇÃO, não da página. Um
   painel claro sobre arte clara some, e a arte é um arquivo que o dono troca
   quando quer — não dá para apostar em como será a próxima.
   ELE ESTREOU QUEBRADO NO TEMA CLARO: as cores eram `var(--text)` e
   `var(--line)`, que viram tinta ESCURA no claro, e o painel ficou com texto
   preto sobre fundo preto — os catorze valores sumiram, sobraram os emojis.
   A regra geral que isso deixou: superfície que NÃO acompanha o tema não pode
   ler as fichas que acompanham. E a cura não é escrever cor na mão em cada
   linha — é devolver as fichas AQUI, uma vez, e deixar o resto do componente
   continuar falando em `var()`. É o que a `.body-entrada` já fazia. */
/* as fichas vêm da regra única «AS SUPERFÍCIES ESCURAS», no fim do arquivo */

/* A TELA DE ENTRADA NÃO SEGUE O TEMA. Ela é um cartaz de tela cheia com a
   arte acesa por cima do preto; clarear o preto apaga o cartaz. Os valores
   voltam aqui, no `body`, e descem para dentro dela por herança. */
/* (a cor e o fundo saem das fichas devolvidas — ver «AS SUPERFÍCIES ESCURAS») */

:root[data-tema="claro"] .ac-linha.nova{background:#eaf1fd}
:root[data-tema="claro"] .ac-ico{background:#fff}
:root[data-tema="claro"] .aviso{background:#ffffffee}
:root[data-tema="claro"] .ac-vezes{background:#fff}

/* A JANELINHA DO CHAT É ESCURA NOS DOIS TEMAS (v3.42), como o painel do
   treinador e a tela de entrada — ela flutua sobre a capa, e uma caixa branca
   por cima de uma arte acesa não se lê.

   E ELA ESTREOU COM O MESMO DEFEITO DE SEMPRE: o corpo da fala é
   `color:var(--muted)`, que no tema claro vira tinta ESCURA. A caixa continuou
   preta, o texto ficou preto no preto e a conversa sumiu — os nomes, que têm
   cor própria, continuaram lá, o que fazia parecer que ninguém tinha escrito
   nada. Apareceu ao desenhar a tela, não ao ler o código.

   A cura é a da casa: devolver as fichas AQUI, uma vez, e deixar o componente
   inteiro continuar falando em `var()`. Ver o comentário do `.pnl` acima. */
/* (a cor sai da própria regra `.cb-corpo`, que já é escura nos dois temas) */

/* =========================================================================
   AS SUPERFÍCIES ESCURAS — as que NÃO acompanham o tema (v3.232)
   =========================================================================
   São quatro, e cada uma tem o seu porquê escrito lá em cima, junto dela:
   a ficha da espécie e o painel da capa flutuam sobre arte, a tela de
   entrada é um cartaz, e a janelinha do chat mora por cima da capa. O que
   as quatro têm em comum é a regra da casa: superfície que não acompanha
   o tema DEVOLVE as fichas aqui, uma vez, e o componente inteiro continua
   falando em `var()`.

   ⚠️ E ELAS ERAM QUATRO CÓPIAS DA MESMA LISTA. Foi assim que o defeito
   durou: o `--campo` entrou na paleta e teria de ser lembrado em quatro
   lugares — quer dizer, esquecido em quatro lugares. Uma lista só é uma
   lista que não tem como divergir, e o check98 confere que ela devolve
   TODA ficha que o tema claro redefine, e não só as que alguém lembrou.
   ========================================================================= */
:root[data-tema="claro"] .dexcard,
:root[data-tema="claro"] .pnl,
:root[data-tema="claro"] body.body-entrada,
:root[data-tema="claro"] .cb-corpo{
  --bg:#0f1420; --panel:#19203033; --card:#1a2130; --card2:#151b28;
  --line:#2a3348; --text:#e6ebf5; --muted:#8b95ab; --accent:#3b82f6;
  --campo:#0f1420; --veu-cor:8 12 22;
  --realce-bom:#101b14; --realce-ouro:#1e1a10;
}
