/* =====================================================================
   TEMA RETRÔ (estilo menus de Pokémon no GBA)
   Carregado depois dos outros CSS: troca o visual de vidro escuro por painéis claros com borda escura, cabeçalhos
   azuis, barra amarela no topo e fonte pixel. Vale para os menus (#app), janelas (#modal, #cfgPanel), avisos e o
   cartão de habilidade; na arena, só os botões de habilidade (#skills) — o resto do HUD da batalha continua igual.
   Fontes: Jersey 15 (pixelada, parecida com a dos jogos de GBA) em títulos, botões e golpes; Pixelify Sans no texto corrido.
   ===================================================================== */
/* PokeGBA: fonte original de FireRed/LeafGreen, recortada de tools/gbafont/frlg-font-sheet.png (rip-frlg.ps1 gera fonts/gba.ttf e fonts/fr.ttf).
   1 pixel da fonte = 1/16 do tamanho: fica nítida em 16, 32 e 48 px */
@font-face{font-family:'PokeGBA';src:url(../fonts/gba.ttf) format('truetype');font-display:block}
:root{
  --px-head:'PokeGBA','Jersey 15',monospace;
  --px-body:'Pixelify Sans','Jersey 15',monospace;
  /* cores do tema */
  --rt-ink:#25335f;        /* contorno e texto escuro */
  --rt-txt:#1f2a48; --rt-mut:#5b6888;
  --rt-bg:#2c3a62; --rt-bg2:#24304f;
  --rt-panel:#d3ddf0; --rt-panel2:#e9eef8; --rt-cell:#f5f8fd; --rt-line:#8a9cc8;
  --rt-blue:#3a64c6; --rt-blue2:#6a93ec;
  --rt-yel:#f3e894; --rt-yel2:#d9c95e; --rt-yelEdge:#9f8d34;
  --rt-green:#7f9f32; --rt-green2:#a8c85a; --rt-purple:#6f58c4; --rt-purple2:#9a84ea;
  --rt-sel:#4d7fe0; --rt-gold:#e3a51c;
}
/* menus e janelas: as variáveis do tema escuro viram as claras (a arena não é afetada) */
#app,#modal,#cfgPanel,#cfgBtn,#toasts,#skTip{
  --txt:var(--rt-txt);--mut:var(--rt-mut);--glass:var(--rt-panel2);--glass2:var(--rt-cell);--edge:var(--rt-line);--edge2:var(--rt-ink);
  --panel:var(--rt-panel);--line:var(--rt-line);--line2:var(--rt-ink);--acc:var(--rt-sel);--acc2:var(--rt-sel);--gold:#c98a08;
  --shadow:0 3px 0 rgba(0,0,0,.25);
  font-family:var(--px-body);font-weight:500;color:var(--rt-txt);-webkit-font-smoothing:none;
  font-synthesis:none;   /* a Jersey 15 só tem um peso: sem "negrito falso", que borraria os pixels */
}
#skills{font-synthesis:none}
/* uma fonte só no jogo todo: a das habilidades (PokeGBA), inclusive no texto corrido, nos campos e nas janelas
   (o texto desenhado no canvas também: main.js) */
body,body *,body *::before,body *::after{font-family:'PokeGBA','Jersey 15',monospace!important}
#app h2,#app h3,#modal h3,#app b,#modal b,.btn,.nav,.chip,.type,.tag,kbd{font-family:var(--px-head)}
#app b,#modal b{font-weight:600;letter-spacing:.02em}
#app .muted,#modal .muted{color:var(--rt-mut)}

/* ---------- fundo ---------- */
#view{background:
  linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/16px 16px,
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/16px 16px,
  linear-gradient(180deg,var(--rt-bg),var(--rt-bg2))}

/* ---------- barra do topo (amarela) ---------- */
#hud::before{content:'';position:absolute;left:0;right:0;top:0;height:92px;pointer-events:none;
  background:linear-gradient(180deg,#f8f0b4,var(--rt-yel) 55%,var(--rt-yel2));border-bottom:4px solid var(--rt-yelEdge);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.profile{top:8px;left:16px;width:auto;min-width:300px;padding:4px 14px 4px 4px;background:none;border:0;box-shadow:none;backdrop-filter:none;border-radius:0}
.avatar{width:72px;height:72px;border-radius:8px;border:3px solid var(--rt-ink);background:radial-gradient(circle at 50% 35%,#fff7cf,#e8d679 75%);box-shadow:0 3px 0 rgba(0,0,0,.2)}
.pname{font-family:var(--px-head);font-size:32px;font-weight:600;color:var(--rt-ink);line-height:1}
.plv{font-family:var(--px-head);font-size:24px;color:var(--rt-ink);margin:0 0 4px}
.profile .bar.xp{height:12px;width:210px;border:2px solid var(--rt-ink);border-radius:3px;background:#3b4a72}
.profile .bar.xp>i{border-radius:0;background:linear-gradient(180deg,#8fd2ff,#3a9ae8)}
#topbar{top:12px;right:104px;gap:10px}
.chip{height:52px;min-width:150px;padding:0 6px 0 10px;border-radius:10px;font-family:var(--px-head);font-size:32px;font-weight:600;color:var(--rt-ink);
  background:linear-gradient(180deg,#e9dc80,#dccb5c);border:3px solid var(--rt-yelEdge);box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}
.plus{width:34px;height:34px;border-radius:6px;border:2px solid var(--rt-ink);background:linear-gradient(180deg,#7aa4f2,var(--rt-blue));color:#fff;font-family:var(--px-head)}
/* botões quadrados com legenda embaixo (MISSÕES, LOJA, DEV, CONFIG) */
#hud .iconBtn,#cfgBtn{width:76px;height:70px;flex-direction:column;gap:0;padding:4px 0 0;justify-content:flex-start;border-radius:8px;
  background:linear-gradient(180deg,#fffbe6,#efe6b8);border:3px solid var(--rt-ink);box-shadow:0 3px 0 rgba(0,0,0,.3)}
#hud .iconBtn svg,#cfgBtn svg{width:36px;height:36px}
#hud .iconBtn[data-l]::after,#cfgBtn::after{content:attr(data-l);font-family:var(--px-head);font-size:16px;font-weight:600;line-height:1;color:var(--rt-ink);margin-top:2px}
#cfgBtn{top:10px;right:16px}
#cfgBtn.on{border-color:var(--rt-sel);box-shadow:0 0 0 3px rgba(77,127,224,.35),0 3px 0 rgba(0,0,0,.3)}

/* ---------- menu lateral ---------- */
#nav{top:108px;left:14px;bottom:14px;width:206px;gap:4px;padding:10px 8px;border-radius:12px;
  background:linear-gradient(180deg,#dfe6f6,#c7d3ec);border:3px solid var(--rt-ink);box-shadow:0 4px 0 rgba(0,0,0,.3)}
.nav{width:auto;flex:0 1 64px;min-height:40px;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 12px;border-radius:8px;
  background:none;border:2px solid transparent;box-shadow:none;font-size:24px;font-weight:600;color:var(--rt-ink);text-transform:uppercase;letter-spacing:.02em}
.nav svg{width:min(40px,5vh);height:min(40px,5vh);flex:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.nav:hover{transform:none;background:rgba(255,255,255,.55);border-color:var(--rt-line)}
.nav.active{color:#fff;background:linear-gradient(180deg,var(--rt-blue2),var(--rt-blue));border:2px solid var(--rt-ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 rgba(0,0,0,.25);text-shadow:2px 2px 0 rgba(0,0,0,.3)}
.nav.active::before{content:'';position:absolute;left:-12px;top:50%;margin-top:-8px;border:8px solid transparent;border-left-color:#fff;border-right:0;filter:drop-shadow(1px 0 0 var(--rt-ink))}
/* Loja bloqueada: apagada, com cadeado, sem destaque no hover */
.nav.locked{opacity:.5;filter:grayscale(.8);cursor:not-allowed}
.nav.locked:hover{background:none;border-color:transparent}
.nav .navLock{margin-left:auto;font-size:18px;filter:none}
#topbar .locked{opacity:.45;filter:grayscale(.8);cursor:not-allowed}
.nav .dot,.badge{background:#e2402f;border:2px solid #fff;font-family:var(--px-head);font-size:16px}

/* ---------- páginas: título vira o cabeçalho azul de painel ---------- */
.page{padding:110px 24px 40px 240px;max-width:none}   /* ocupa a tela toda, sem sobrar faixa vazia à direita */
.page h2{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:8px 18px;border-radius:10px 10px 6px 6px;font-size:48px;font-weight:600;line-height:1;color:#fff;text-transform:uppercase;letter-spacing:.03em;text-shadow:2px 2px 0 rgba(0,0,0,.35);
  background:linear-gradient(180deg,var(--rt-blue2),var(--rt-blue) 60%);border:3px solid var(--rt-ink);box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 4px 0 rgba(0,0,0,.3)}
.page h2::before{content:'';width:30px;height:30px;flex:none;border-radius:50%;border:3px solid #1b2340;
  background:radial-gradient(circle,#fff 0 4px,#1b2340 4px 6px,transparent 6px),linear-gradient(180deg,#e8443a 0 44%,#1b2340 44% 56%,#f4f4f4 56%)}
.page>.sub{color:#dbe4f7;font-size:16px;text-shadow:1px 1px 0 rgba(0,0,0,.4)}
.page>h3,.page>div>h3:not(.card h3){color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.4);text-transform:uppercase}
h3{font-size:24px;font-weight:600}

/* ---------- painéis / cartões ---------- */
.card{background:linear-gradient(180deg,var(--rt-panel2),var(--rt-panel));border:3px solid var(--rt-ink);border-radius:10px;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 rgba(0,0,0,.3);backdrop-filter:none;color:var(--rt-txt)}
/* cartões com título: o h3 vira faixa colorida no topo do painel */
.card.invCard,.card.runCard{padding:0 0 14px;overflow:hidden}
.card.invCard>h3,.card.runCard>h3{margin:0 0 12px;padding:8px 16px;color:#fff;font-size:32px;text-transform:uppercase;letter-spacing:.03em;text-shadow:2px 2px 0 rgba(0,0,0,.35);border-bottom:3px solid var(--rt-ink)}
.card.invCard>h3{background:linear-gradient(180deg,var(--rt-blue2),var(--rt-blue) 60%)}
.card.runCard>h3{background:linear-gradient(180deg,var(--rt-green2),var(--rt-green) 60%)}
.card.invCard>:not(h3),.card.runCard>:not(h3){margin-left:14px;margin-right:14px}
.card.invCard .bagSub{margin:16px 0 10px;padding:6px 14px;color:#fff;font-size:24px;text-transform:uppercase;text-shadow:2px 2px 0 rgba(0,0,0,.35);border:3px solid var(--rt-ink);border-radius:8px;background:linear-gradient(180deg,var(--rt-purple2),var(--rt-purple) 60%)}

/* ---------- genéricos ---------- */
.btn{border-radius:8px;border:3px solid var(--rt-ink);font-size:24px;font-weight:600;padding:4px 16px;letter-spacing:.02em;text-shadow:1px 1px 0 rgba(0,0,0,.3);
  background:linear-gradient(180deg,#7aa4f2,var(--rt-blue));box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 rgba(0,0,0,.35)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 1px 0 rgba(0,0,0,.35)}
.btn.ghost{color:var(--rt-ink);text-shadow:none;background:linear-gradient(180deg,#f5f8fd,#d6e0f2);box-shadow:inset 0 2px 0 #fff,0 3px 0 rgba(0,0,0,.3)}
.btn.gold{color:#3a2400;text-shadow:none;background:linear-gradient(180deg,#ffe48a,#efb02a);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 rgba(0,0,0,.35)}
.btn.green{background:linear-gradient(180deg,#6fd98f,#2f9e57);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 rgba(0,0,0,.35)}
.btn.red{background:linear-gradient(180deg,#f2776b,#c83b31);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 rgba(0,0,0,.35)}
.btn.purple{background:linear-gradient(180deg,#a68cf0,#6a4fc8);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 rgba(0,0,0,.35)}
/* abas (Pokédex, Pokémon, Inventário): a escolhida fica clara e destacada em amarelo; as outras, escuras e apagadas */
.btn.tab{color:#b8c4e0;text-shadow:none;background:linear-gradient(180deg,#4a5a86,#36446c);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 3px 0 rgba(0,0,0,.35)}
.btn.tab:hover{color:#e4ebfa;filter:none}
.btn.tab.on{color:var(--rt-ink);background:linear-gradient(180deg,#fffbe6,#f6d777);box-shadow:inset 0 2px 0 #fff,0 0 0 3px #e3a51c,0 3px 0 rgba(0,0,0,.35)}
.btn.sm{font-size:16px;padding:2px 10px;border-width:2px;border-radius:6px}
.btn.big{font-size:32px;padding:6px 22px}
.bar{background:#46557d;border-radius:3px;border:2px solid var(--rt-ink);box-shadow:none}
.bar>i{border-radius:0}
/* tipo: etiqueta colorida com letra branca, como "FIGHT" / "FIRE" no GBA */
.type{border-radius:5px;padding:1px 8px;font-size:16px;font-weight:600;color:#fff!important;text-transform:uppercase;letter-spacing:.04em;line-height:1.15;
  border:2px solid rgba(20,26,50,.55);text-shadow:1px 1px 0 rgba(0,0,0,.45);box-shadow:inset 0 2px 0 rgba(255,255,255,.3)}
.tag{border-radius:5px;padding:1px 8px;font-size:16px;font-weight:600;background:#c3cfe9;color:var(--rt-ink);border:2px solid var(--rt-line)}
.tag.ok{background:#bfe6bf;color:#1f5a2a;border-color:#6da86f}
.tag.warn{background:#f6d7a8;color:#6a3a08;border-color:#c9934a}
.tag.evo{background:var(--rt-purple);color:#fff;border-color:var(--rt-ink)}
.tag.style{background:#e3e9f6;color:var(--rt-ink);border-color:var(--rt-line)}   /* corpo a corpo / à distância */
kbd{background:linear-gradient(180deg,#fff,#dbe3f3);color:var(--rt-ink);border:2px solid var(--rt-ink);border-bottom-width:4px;border-radius:5px;padding:0 7px;font-size:16px;font-weight:600}
input[type=text],input[type=number],textarea,.mtool select,.resRow select{font-family:var(--px-body);background:#fff;color:var(--rt-txt);border:3px solid var(--rt-ink);border-radius:8px;box-shadow:inset 0 2px 0 #d6def0}
.mtool select option,.resRow select option{background:#fff;color:var(--rt-txt)}
.mtool .mchip{font-family:var(--px-head);font-size:16px;font-weight:600;background:#f5f8fd;border:2px solid var(--rt-ink);border-radius:8px;color:var(--rt-ink)}
.mtool .mchip.on{background:#ffe9a6;border-color:var(--rt-gold);color:#5a3a00;box-shadow:none}
.mtool .cnt{color:var(--rt-mut)}

/* ---------- células (Pokémon, Pokédex, mochila, loja...) ---------- */
.mtile,.dexCell,.bagCell,.eqItem{background:linear-gradient(180deg,#fff,var(--rt-cell));border:2px solid var(--rt-line);border-radius:8px;box-shadow:0 2px 0 rgba(0,0,0,.15);color:var(--rt-txt)}
.mtile:hover,.eqItem:hover{border-color:var(--rt-ink);transform:translateY(-2px)}
.mtile.isfav{border-color:var(--rt-gold);box-shadow:0 0 0 2px #f6d777 inset,0 2px 0 rgba(0,0,0,.15)}
.mtile b,.dexCell b{font-size:16px}
.mtile .lv,.dexCell small,.mtile .zn{color:var(--rt-mut)}
.mtile .star{color:#9aa8c8;filter:none}.mtile .star.on,.mtile .star:hover{color:var(--rt-gold)}
.mtile .add{background:var(--rt-blue);border:2px solid var(--rt-ink);font-family:var(--px-head);line-height:18px}
.mtile .tt .type,.dexCell .tt .type{font-size:13px;padding:0 4px;border-width:1px}
.dexCell.unk{background:#c3cde3}
.dexCell.unk canvas.pmd{filter:brightness(0) opacity(.75)}
.bagCell{padding:12px 8px 10px}
.bagCell b{font-size:24px}
.bagCell small{color:var(--rt-mut)}
.bagCell .bagUse{color:#2f8a4f}
.bagN{font-family:var(--px-head);font-size:24px;color:var(--rt-ink);top:4px;right:8px}
.bagCell.none{opacity:.55}
.eqItem small{color:var(--rt-mut)}.eqItem .eqN{color:var(--rt-ink);font-family:var(--px-head);font-size:16px}
.eqSlot{background:#f5f8fd;border:2px dashed var(--rt-line);border-radius:8px;color:var(--rt-txt)}
.eqSlot:hover{border-color:var(--rt-ink)}
.eqSlot.on{border:2px solid var(--rt-gold);background:#fff4cf}
.eqSlot .eqIco{background:#fff;border:2px solid var(--rt-line);border-radius:6px}
.eqSlot .eqTxt b{font-size:24px}.eqSlot .eqTxt small{color:var(--rt-mut)}
.slot{background:#f5f8fd;border:2px solid var(--rt-line);border-radius:8px}
.foe{background:#f5f8fd;border:2px solid var(--rt-line);border-radius:8px}
.stg{background:#f5f8fd;color:var(--rt-ink);border:2px solid var(--rt-ink);border-radius:6px;font-family:var(--px-head);font-size:24px}
.stg.done{background:#bfe6bf}.stg.cur{background:var(--rt-sel);color:#fff}.stg.sel{outline:3px solid var(--rt-gold)}
.dexReward{background:#fff4cf;border:2px dashed var(--rt-gold);border-radius:8px}
.dexRegion.done{border-color:var(--rt-gold);box-shadow:0 0 0 2px #f6d777 inset,0 4px 0 rgba(0,0,0,.3)}

/* sexo do Pokémon depois do nome: ♂ azul, ♀ rosa */
.gender{margin-left:4px;font-family:var(--px-head);text-shadow:none}
.gender.m{color:#2f72d8}.gender.f{color:#e0508f}

/* arrastar no Meu Time: o que está sendo arrastado fica apagado; onde vai cair, contorno dourado */
.tslot[draggable],.mtile[draggable]{cursor:grab}
.dragging{opacity:.45}
.dropOn{outline:4px dashed var(--rt-gold);outline-offset:3px}
body.dragTeam .availCard{outline:2px dashed rgba(227,165,28,.5);outline-offset:3px}

/* ---------- Aventura: quadradinhos dos Pokémon de cada região (comuns em azul-claro, raros em dourado) ---------- */
.advPool>div{background:linear-gradient(180deg,#fff,#e3eaf7);border:2px solid var(--rt-line);border-radius:6px;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.advPool.rare>div{background:linear-gradient(180deg,#fffbe8,#f7e3a2);border:2px solid #c9932a}
.advPool .q{font-family:var(--px-head);font-size:32px;color:#a8700a}
.advCalm{color:#2f8a4f}

/* ---------- Meu Time: cartão de cada Pokémon como a ficha do GBA ---------- */
/* o time ganha a largura toda; a mochila fica ao lado só em tela bem larga */
/* metade para o time, metade para os disponíveis (empilha em tela estreita) */
.teamTop{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1400px){ .teamTop{grid-template-columns:1fr} }
.card.availCard{padding:0 0 14px;overflow:hidden;align-self:stretch}
.card.availCard>h3{margin:0 0 12px;padding:8px 16px;color:#fff;font-size:32px;text-transform:uppercase;letter-spacing:.03em;text-shadow:2px 2px 0 rgba(0,0,0,.35);border-bottom:3px solid var(--rt-ink);background:linear-gradient(180deg,var(--rt-blue2),var(--rt-blue) 60%)}
.card.availCard>:not(h3){margin-left:14px;margin-right:14px}
.tslot{padding:0;overflow:hidden;text-align:left}
.tsHead{display:flex;align-items:center;gap:10px;padding:6px 10px;background:linear-gradient(180deg,#fdfefe,#dfe6f5);border-bottom:3px solid var(--rt-ink)}
.tsN{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:6px;border:2px solid var(--rt-ink);background:linear-gradient(180deg,#f6c24a,var(--rt-gold));color:#fff;font-family:var(--px-head);font-size:24px;font-weight:700;text-shadow:1px 1px 0 rgba(0,0,0,.4)}
.tslot.lead .tsN{background:linear-gradient(180deg,#f0685c,#c83b31)}
.tsHead b{flex:1;min-width:0;font-size:32px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--rt-ink)}
.tsLv{font-family:var(--px-head);font-size:24px;font-weight:600;color:var(--rt-ink)}
.tsTypes{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:8px 10px 0}
.tsArt{display:flex;justify-content:center;margin:6px 12px 8px;padding:6px 0;border-radius:6px;cursor:pointer;
  background:repeating-linear-gradient(180deg,#f3f6fc 0 3px,#e6ecf7 3px 6px);border:2px solid var(--rt-line)}
.mtile canvas.fitMini{display:block;width:72px;height:72px}   /* miniatura dos Disponíveis: inteira e proporcional */
.tsArt canvas.fit{display:block;width:100%;max-width:300px;height:auto;aspect-ratio:300/140}   /* sprite encaixado (imgFit) */
.tslot .statgrid,.tslot .eqSlot,.tsMoves,.tsBtns{margin-left:12px;margin-right:12px;width:auto}
.statgrid{font-family:var(--px-head);font-size:24px;font-weight:600;gap:2px 10px;text-transform:uppercase}
.statgrid b{text-align:right;font-variant-numeric:tabular-nums}
.statgrid .bar{height:12px}
.statgrid .bar.st-hp>i{background:linear-gradient(180deg,#7fe07a,#2fa83a)}
.statgrid .bar.st-atk>i{background:linear-gradient(180deg,#ffe37a,#e0b018)}
.statgrid .bar.st-def>i{background:linear-gradient(180deg,#ffd27a,#e08a18)}
.statgrid .bar.st-spa>i{background:linear-gradient(180deg,#86e8e0,#21a59a)}
.statgrid .bar.st-sdf>i{background:linear-gradient(180deg,#8fc2ff,#2f72d8)}
.statgrid .bar.st-spd>i{background:linear-gradient(180deg,#c69cff,#7a46d8)}
/* lista de golpes: faixa clara com a tecla, a etiqueta do tipo e o nome */
.tsMoves{display:flex;flex-direction:column;gap:3px;margin-top:10px;margin-bottom:10px}
.tsMoves .skc{display:flex;align-items:center;gap:8px;padding:3px 8px;border-radius:6px;background:linear-gradient(180deg,#eef6ff,#cfe3f7);border:2px solid var(--rt-line);font-size:16px}
.tsMoves .skc kbd{font-size:16px;padding:0 6px;border-bottom-width:3px}
.tsMoves .skhov{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.tsMoves .skhov b{flex:1;font-size:24px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--rt-ink)}
.tsMoves .skhov .muted{font-family:var(--px-head);font-size:16px}
.tsMoves .type{font-size:16px;min-width:64px;text-align:center;padding:0 4px}
.tsMoves .skLocked>*:not(.lockTag){opacity:.6}
/* detalhes do Pokémon: nível, sexo e se está no time, cada um num selo separado */
.monInfo{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.monInfo .mi{padding:2px 9px;border:2px solid var(--rt-line);border-radius:6px;background:#fff;font-size:14px;line-height:18px;font-weight:700}
.monInfo .lv{background:#eef2ff;color:#25335f}
.monInfo .mas{background:#e3f0ff;border-color:#5b8fd8;color:#2a5aa8}
.monInfo .fem{background:#ffe6f1;border-color:#e07aa8;color:#b03a74}
.monInfo .team{background:#e4f7e4;border-color:#5fb35f;color:#2d7a2d}
.monInfo .free{background:#f1f1f1;border-color:#b5b5b5;color:#666}
/* 📷 ao lado de cada habilidade: abre a demonstração */
.skCam{flex:none;margin-left:6px;padding:1px 4px;border:2px solid var(--rt-line);border-radius:5px;background:#fff;font-size:13px;line-height:0;cursor:pointer;vertical-align:middle}
/* ícone de filmadora (pixelart/ui/camera.png, 192×112) */
.camIco{display:inline-block;width:27px;height:16px;background:url(../pixelart/ui/camera.png) center/contain no-repeat;vertical-align:middle}
#hudC .camIco{width:24px;height:14px;margin-top:-3px}
.skCam:hover{border-color:var(--rt-ink);background:#ffe9a6}
.tsMoves .lockTag{margin-left:auto}
.tsBtns{display:flex;justify-content:center;gap:8px;padding-bottom:12px}
.tsEmpty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;border-style:dashed;font-family:var(--px-head);font-size:24px;color:var(--rt-mut);text-align:center}

/* ---------- Início ---------- */
.home .modes{left:240px}
.mode{border:3px solid var(--rt-ink);border-radius:12px;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 4px 0 rgba(0,0,0,.35)}
/* nome do modo: branco com contorno escuro, centralizado no botão, com a linha de baixo logo abaixo */
.mode .mLbl{top:50%;bottom:auto;transform:translateY(-62%);font-family:var(--px-head);font-size:64px;line-height:1;color:#fff;text-transform:uppercase;letter-spacing:.06em;
  text-shadow:-3px 0 0 var(--rt-ink),3px 0 0 var(--rt-ink),0 -3px 0 var(--rt-ink),0 3px 0 var(--rt-ink),-3px -3px 0 var(--rt-ink),3px 3px 0 var(--rt-ink),-3px 3px 0 var(--rt-ink),3px -3px 0 var(--rt-ink),6px 6px 0 rgba(0,0,0,.35)}
.mode .mSub{bottom:12px;font-family:var(--px-head);font-size:32px;line-height:1;color:#fff;text-shadow:-2px 0 0 var(--rt-ink),2px 0 0 var(--rt-ink),0 -2px 0 var(--rt-ink),0 2px 0 var(--rt-ink),2px 2px 0 var(--rt-ink)}
.mode.adv{background:linear-gradient(180deg,#e0954e,#a8582a)}
.mode.pvp{background:linear-gradient(180deg,#6a93ec,#2f56b8)}
.mode.mis{background:linear-gradient(180deg,#9a84ea,#5a40b4)}

/* ---------- janelas e avisos ---------- */
#modal,#cfgPanel{background:rgba(16,22,44,.6);backdrop-filter:none}
.mbox,.cfgBox{background:linear-gradient(180deg,var(--rt-panel2),var(--rt-panel));border:4px solid var(--rt-ink);border-radius:12px;box-shadow:inset 0 3px 0 rgba(255,255,255,.7),0 6px 0 rgba(0,0,0,.35);color:var(--rt-txt)}
.mclose{color:var(--rt-ink);font-family:var(--px-head);font-size:32px}
/* configurações: como os painéis dos menus (cartão claro com faixa azul de título com a pokébola, subtítulos em faixa roxa) */
.cfgBox{padding:0 0 18px;overflow:auto;border-width:3px}
.cfgBox>:not(.cfgHead){margin-left:16px;margin-right:16px}
.cfgBox .cfgHead{margin:0 0 6px;padding:8px 10px 8px 14px;border-bottom:3px solid var(--rt-ink);background:linear-gradient(180deg,var(--rt-blue2),var(--rt-blue) 60%);box-shadow:inset 0 3px 0 rgba(255,255,255,.3)}
.cfgBox .cfgHead b{display:flex;align-items:center;gap:10px;flex:1;color:#fff;font-size:32px;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:.03em;text-shadow:2px 2px 0 rgba(0,0,0,.35)}
.cfgBox .cfgHead b::before{content:'';width:26px;height:26px;flex:none;border-radius:50%;border:3px solid #1b2340;
  background:radial-gradient(circle,#fff 0 3px,#1b2340 3px 5px,transparent 5px),linear-gradient(180deg,#e8443a 0 44%,#1b2340 44% 56%,#f4f4f4 56%)}
.cfgBox .cfgHead .mclose{color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.35)}
.cfgBox .cfgHead .btn{flex:none}
.cfgBox .cfgSub{margin-top:16px;margin-bottom:10px;padding:4px 12px;color:#fff;font-family:var(--px-head);font-size:20px;font-weight:600;text-shadow:2px 2px 0 rgba(0,0,0,.35);
  border:3px solid var(--rt-ink);border-radius:8px;background:linear-gradient(180deg,var(--rt-purple2),var(--rt-purple) 60%)}
.cfgBox .cfgBig,.cfgBox .cfgMore{width:calc(100% - 32px);margin-top:12px}
.cfgBox{overflow-x:hidden}
.cfgBox .vols{margin-top:12px}
.cfgSub,.kbGrid .kbHead{font-family:var(--px-head);font-size:16px;color:var(--rt-mut)}
.volRow{font-family:var(--px-head);font-size:24px}
.kbBtn{background:#fff;border:2px solid var(--rt-ink);border-radius:6px;font-family:var(--px-head);font-size:16px}
.kbBtn.wait{border-color:var(--rt-gold);color:#8a5a00}
.toast{font-family:var(--px-head);font-size:24px;font-weight:600;color:var(--rt-ink);background:linear-gradient(180deg,#fff,var(--rt-panel2));border:3px solid var(--rt-ink);border-radius:8px;box-shadow:0 3px 0 rgba(0,0,0,.35)}
/* cartão de habilidade ao passar o mouse: ficha do FireRed (.frSum) em miniatura — listras amarelas, faixa azul com o nome,
   rótulos cinza nos números, efeitos em caixas brancas e o texto na caixa de diálogo de baixo; a cor do tipo fica no topo */
#skTip,#skTip *{font-family:'PokeFR','PokeGBA',monospace!important}
#skTip{--fr-ink:#404040;--fr-sh:#d0d0c8;width:min(620px,calc(100vw - 24px));padding:0;overflow:hidden;color:var(--fr-ink);font-size:32px;line-height:1;text-shadow:1px 1px 0 var(--fr-sh);
  background:repeating-linear-gradient(180deg,#f8e078 0 6px,#f0d060 6px 12px);border:4px solid #303030;border-top:8px solid var(--tc,#f8d030);border-radius:8px;box-shadow:0 6px 0 rgba(0,0,0,.35)}
#skTip .skTipHead{gap:8px;padding:4px 10px;background:#2858a8;border-bottom:4px solid #303030;color:#fff;text-shadow:2px 2px 0 #183868}
#skTip .skTipHead b{font-size:48px;line-height:1;font-weight:400;letter-spacing:0;text-transform:uppercase}
#skTip .skTipHead :is(.type,.tag){font-size:24px;padding:1px 6px;line-height:1.1;border:2px solid #f8f8f8;border-radius:6px;text-shadow:none}
#skTip .skTipHead .tag{margin-left:auto;color:var(--fr-ink);background:#f8f8e8}
#skTip .skTipStats{display:flex;flex-wrap:wrap;gap:4px;margin:8px 8px 0;color:#f8f8f8;text-shadow:1px 1px 0 #303030}
#skTip .skTipStats span{flex:1 1 40%;display:flex;align-items:center;gap:4px;padding:1px 4px 1px 8px;background:#686868;border:2px solid #484848;border-radius:12px;white-space:nowrap}
#skTip .skTipStats span:first-child{flex-basis:100%}
#skTip .skTipStats b{margin-left:auto;padding:0 6px;font-weight:400;color:var(--fr-ink);text-shadow:1px 1px 0 var(--fr-sh);background:#f8f8e8;border-radius:8px;white-space:normal;text-align:right}
#skTip .skTipStats b .muted{color:#787878}
#skTip .skTipFx{gap:6px;margin:8px}
#skTip .skTipFx li{padding:4px 8px;background:#f8f8f8;border:3px solid #d8d0b0;border-radius:6px;box-shadow:0 2px 0 rgba(0,0,0,.15)}
#skTip .skTipFx li b{font-weight:400;color:#c03028}
#skTip .skTipFx .fxSub{margin-top:4px;padding-top:4px;border-top:2px dotted #d8d0b0;color:#787878;font-size:24px;text-shadow:1px 1px 0 #e8e8e0}
#skTip .skTipDesc{margin:8px 0 0;padding:6px 12px 8px;font-style:normal;color:var(--fr-ink);background:#f8f8f8;border-top:4px solid #303030;box-shadow:inset 0 0 0 3px #6890c8,inset 0 0 0 5px #f8f8f8}
/* escolha de habilidade ao subir de nível: estilo FireRed, fica em modal.css (.lnFr) */
.runLoot span{background:#fff;border:2px solid var(--rt-line);border-radius:6px}
.runLoot span img{vertical-align:middle}
.runBonusBox{background:#fff4cf;border:2px solid var(--rt-gold);border-radius:8px}
.runRow{border-top:2px solid var(--rt-line)}
.starter{background:linear-gradient(180deg,#fff,var(--rt-cell));border:3px solid var(--rt-ink);border-radius:10px}
.starter:hover{border-color:var(--rt-gold)}
.swapSlot,.swapOpt{background:#fff;border:2px solid var(--rt-ink);color:var(--rt-txt)}
.swapSlot.on{border-color:var(--rt-sel);background:#dbe6fb}
.swapOpt:hover{background:#eef3fc}
/* habilidade ainda não aprendida (painel Ver habilidades): cinza, apagada e com cadeado — ainda dá para clicar e assistir */
.swapSlot.skLock,.swapOpt.skLock{background:repeating-linear-gradient(45deg,#e4e4e8 0 8px,#d8d8de 8px 16px);border-color:#8a8a96;border-style:dashed}
.swapSlot.skLock>*:not(.lockTag),.swapOpt.skLock>*:not(.lockIco):not(.camIco){opacity:.5;filter:grayscale(1)}   /* a câmera fica acesa: dá para assistir */
.swapSlot .lockTag{margin-left:auto;font-size:14px;padding:1px 6px}
.swapOpt .lockIco{font-size:18px}
.lockBtn.on{background:#ffe9a6;border-color:var(--rt-gold)}

/* ---------- Pokédex registrando um Pokémon novo (js/ui/dex-pop.js) ----------
   Aparelho vermelho em duas metades: a esquerda (lente azul, luzes, tela com o Pokémon) sobe e a direita abre como capa
   de livro; a tela liga, uma linha de leitura passa de cima para baixo revelando o Pokémon, o texto é digitado e o
   carimbo "REGISTRADO!" cai por cima. Tempos combinando com DEXPOP. */
/* luta pausando para a Pokédex registrar: a tela do jogo congela (cinza, escura e um pouco mais perto) com um flash
   branco de foto; fechando, volta aos poucos (showDexEntry, dex-pop.js) */
#ac{transition:filter .45s ease,transform .45s ease}
#ac.dexFreeze{filter:grayscale(.75) brightness(.5) blur(1.5px);transform:scale(1.04)}
.dexFlash{position:fixed;inset:0;z-index:149;background:#fff;pointer-events:none;animation:dexFlash .5s ease-out forwards}
@keyframes dexFlash{0%{opacity:.9}100%{opacity:0}}
#dexPop{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;background:rgba(10,14,28,.55);animation:dexFade .25s;cursor:pointer}
#dexPop.closing{animation:dexFadeOut .35s forwards}
@keyframes dexFade{from{background:rgba(10,14,28,0)}}
@keyframes dexFadeOut{to{opacity:0}}
.dexDev{display:flex;perspective:1200px;animation:dexUp .45s cubic-bezier(.2,1.3,.4,1)}
#dexPop.closing .dexDev{animation:dexDown .35s ease-in forwards}
@keyframes dexUp{from{transform:translateY(70vh) rotate(-6deg)}}
@keyframes dexDown{to{transform:translateY(70vh) rotate(6deg)}}
.dexL,.dexR{position:relative;width:300px;height:400px;background:linear-gradient(160deg,#e8483a,#c2281e 60%,#9a1a14);border:5px solid #5a0c08;box-shadow:inset 0 4px 0 rgba(255,255,255,.25),0 10px 0 rgba(0,0,0,.35)}
.dexL{border-radius:18px 6px 6px 18px;padding:18px}
.dexR{border-radius:6px 18px 18px 6px;padding:70px 22px 18px;transform-origin:left center;transform:rotateY(-178deg);animation:dexOpen .4s .35s cubic-bezier(.3,1.2,.5,1) forwards;backface-visibility:hidden}
@keyframes dexOpen{to{transform:rotateY(0)}}
.dexLens{position:absolute;left:18px;top:14px;width:62px;height:62px;border-radius:50%;border:5px solid #f4f4f4;box-shadow:0 0 0 3px #5a0c08;background:radial-gradient(circle at 35% 35%,#bfe4ff,#2f7ae8 45%,#123a8a)}
.dexLeds{position:absolute;left:96px;top:18px;display:flex;gap:8px}
.dexLeds i{width:14px;height:14px;border-radius:50%;border:2px solid #5a0c08}
.dexLeds i:nth-child(1){background:#ff5a4a}.dexLeds i:nth-child(2){background:#ffd34d}.dexLeds i:nth-child(3){background:#5fd06a}
.dexScr{position:absolute;left:24px;right:24px;top:96px;height:200px;border-radius:10px 10px 10px 40px;background:#f0f0e8;border:4px solid #5a0c08;padding:10px 14px}
.dexNo,.dexName{font-family:'PokeGBA',monospace;color:#25335f;text-align:center;line-height:1}
.dexNo{font-size:16px}
.dexName{font-size:32px;text-transform:uppercase;margin-top:4px}
.dexArt{position:relative;height:118px;margin-top:4px;border:3px solid #25335f;border-radius:4px;overflow:hidden;
  background:#cfe8c8;display:flex;align-items:center;justify-content:center;animation:dexOn .5s .55s both}
@keyframes dexOn{0%{filter:brightness(0)}30%{filter:brightness(1.8)}45%{filter:brightness(.4)}100%{filter:none}}
.dexArt canvas{width:110px;height:110px;clip-path:inset(0 0 100% 0);animation:dexReveal .7s .75s steps(14) forwards}
#dexPop .dexArt canvas{filter:brightness(0)}   /* só na tela de registro: a Pokédex do Tab (#advDex) também usa .dexArt */
@keyframes dexReveal{to{clip-path:inset(0 0 0 0)}}
/* "Quem é esse Pokémon?": a leitura mostra só a silhueta preta; na revelação (.revealed, dex-pop.js DEXPOP.reveal) ela
   acende branca e as cores aparecem, com um clarão na tela */
#dexPop.revealed .dexArt canvas{animation:dexReveal .7s .75s steps(14) forwards,dexUnveil .7s ease-out forwards}
@keyframes dexUnveil{0%{filter:brightness(0);transform:scale(1)}25%{filter:brightness(0) invert(1);transform:scale(1.18)}100%{filter:none;transform:scale(1)}}
.dexArt::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,#fff 0 30%,rgba(255,255,255,0) 70%);opacity:0;pointer-events:none}
#dexPop.revealed .dexArt::after{animation:dexBurst .6s ease-out}
@keyframes dexBurst{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
#dexPop.revealed .dexName{animation:dexNamePop .35s cubic-bezier(.2,1.6,.4,1)}
/* disfarce caindo (dex-pop.js, opt.fake): a tela falha e treme, e o Pokémon de verdade sai da mancha como uma gosma */
#dexPop.glitch .dexDev{animation:dexShake .09s steps(2) infinite}
#dexPop.glitch .dexArt canvas{animation:dexGlitch .12s steps(2) infinite;clip-path:none}
#dexPop.glitch .dexName,#dexPop.glitch .dexNo{animation:dexGlitch .1s steps(2) infinite}
@keyframes dexShake{0%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}100%{transform:translate(-2px,-3px)}}
@keyframes dexGlitch{0%{filter:hue-rotate(90deg) saturate(3);transform:translateX(-5px) skewX(12deg)}50%{filter:invert(1);transform:translateX(5px) scaleY(.7)}100%{filter:brightness(2.5);transform:translateX(-2px) skewX(-10deg)}}
#dexPop.unmasked .dexArt canvas{clip-path:none;filter:none;animation:dexBlob .9s cubic-bezier(.2,1.5,.4,1) both}
@keyframes dexBlob{0%{transform:scale(1.5,.15);filter:brightness(3)}40%{transform:scale(.8,1.25);filter:brightness(1.4)}70%{transform:scale(1.1,.9)}100%{transform:none;filter:none}}
#dexPop.unmasked .dexName,#dexPop.unmasked .dexTypes{animation:dexNamePop .35s cubic-bezier(.2,1.6,.4,1)}
#dexPop .dexTypes{visibility:hidden}   /* o tipo também entrega a resposta: só depois da revelação */
#dexPop.revealed .dexTypes{visibility:visible;animation:dexNamePop .35s .15s cubic-bezier(.2,1.6,.4,1) backwards}
@keyframes dexNamePop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.dexScan{position:absolute;left:0;right:0;top:0;height:4px;background:#5fd06a;box-shadow:0 0 8px #5fd06a;opacity:0;animation:dexScan .7s .75s steps(14) forwards}
@keyframes dexScan{0%{top:0;opacity:1}99%{top:calc(100% - 4px);opacity:1}100%{opacity:0}}
.dexStamp{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-12deg) scale(2.4);opacity:0;padding:2px 10px;border:4px solid #c8282a;border-radius:6px;
  font-family:'PokeGBA',monospace;font-size:32px;color:#c8282a;background:rgba(255,255,255,.85);pointer-events:none}
#dexPop.stamped .dexStamp{animation:dexStamp .25s ease-in forwards}
@keyframes dexStamp{to{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}
.dexPad{position:absolute;left:24px;right:24px;bottom:22px;display:flex;align-items:center;gap:14px}
.dexBtnR{width:26px;height:26px;border-radius:50%;background:#2a2a30;border:3px solid #5a0c08}
.dexBtnG{width:60px;height:14px;border-radius:7px;background:#7ac84a;border:3px solid #5a0c08}
.dexCross{margin-left:auto;width:52px;height:52px;background:linear-gradient(#22242a,#22242a) center/18px 52px no-repeat,linear-gradient(#22242a,#22242a) center/52px 18px no-repeat}
.dexTxt{height:150px;padding:10px 12px;border:4px solid #5a0c08;border-radius:6px;background:#141a14;color:#e8f2e0;font-family:'PokeGBA',monospace;font-size:24px;line-height:1.05;overflow:hidden}
.dexGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:16px 0}
.dexGrid i{height:22px;background:linear-gradient(180deg,#7ab8f0,#3a7ad0);border:2px solid #5a0c08}
.dexTypes{display:flex;gap:10px;justify-content:center}
.dexTypes .type{font-size:24px;padding:2px 12px}
/* Pokédex de registro no estilo FireRed: o aparelho é a arte do ChatGPT (pixelart/gba/ui/pokedex_l.png e pokedex_r.png,
   recortados por tools/dex-art.js, metade da resolução original) e o HTML fica por cima das telas vazias da arte, nas
   caixas medidas nela; as peças desenhadas em CSS (lente, luzes, botões, teclas) somem. Só no #dexPop: a Pokédex do Tab
   (#advDex) usa as mesmas classes com o desenho antigo */
#dexPop .dexL,#dexPop .dexR{width:330px;height:432px;padding:0;border:0;border-radius:0;box-shadow:none;box-sizing:border-box;
  background:transparent center/100% 100% no-repeat;image-rendering:auto;filter:drop-shadow(0 8px 0 rgba(0,0,0,.35))}
#dexPop .dexL{background-image:url(../pixelart/gba/ui/pokedex_l.png)}
#dexPop .dexR{width:331px;background-image:url(../pixelart/gba/ui/pokedex_r.png)}
#dexPop .dexLens,#dexPop .dexLeds,#dexPop .dexPad,#dexPop .dexGrid{display:none}
#dexPop .dexScr{left:31px;top:110px;width:268px;height:205px;padding:0;border:0;border-radius:0;background:none;box-sizing:border-box}
#dexPop .dexNo{position:absolute;left:0;right:0;top:5px}
#dexPop .dexArt{position:absolute;left:21px;top:28px;width:224px;height:134px;margin:0;border:0;border-radius:0;background:#c2e7bf}
#dexPop .dexName{position:absolute;left:0;right:0;top:167px;margin:0}
#dexPop .dexTxt{position:absolute;left:37px;top:80px;width:258px;height:153px;border:0;border-radius:0;background:#1b2c21;box-sizing:border-box}
#dexPop .dexTypes{position:absolute;left:108px;top:339px;width:114px;height:37px;align-items:center;gap:4px}
#dexPop .dexTypes .type{font-size:18px;padding:0 6px}
/* abrir: no lugar do giro em CSS, a capa da direita vira pelos quadros do ChatGPT (pokedex_abrir1..5.png: costas da capa,
   de lado e abrindo), presa na dobradiça; no fim some e aparece a metade aberta em alta (.dexR com a tela de texto).
   Os quadros têm a faixa de altura da folha (a capa de lado passa da altura da Pokédex), daí o top negativo; a largura de
   cada um é a do quadro na mesma escala da altura, menos as costas, esticadas até a largura da metade aberta */
#dexPop .dexR{transform:none;animation:dexRBg 0s .8s both}
@keyframes dexRBg{from{background-image:none}}
#dexPop .dexTxt{animation:dexRHide 0s .8s both}
@keyframes dexRHide{from{visibility:hidden}}
.dexFlap{display:none}
#dexPop .dexFlap{display:block;position:absolute;left:0;top:-55px;height:517px;background:center/100% 100% no-repeat;pointer-events:none;
  animation:dexFlap .5s .3s step-end both}
@keyframes dexFlap{
  0%{width:331px;background-image:url(../pixelart/gba/ui/pokedex_abrir1.png)}
  20%{width:84px;background-image:url(../pixelart/gba/ui/pokedex_abrir2.png)}
  40%{width:111px;background-image:url(../pixelart/gba/ui/pokedex_abrir3.png)}
  60%{width:180px;background-image:url(../pixelart/gba/ui/pokedex_abrir4.png)}
  80%{width:198px;background-image:url(../pixelart/gba/ui/pokedex_abrir5.png)}
  100%{width:198px;background-image:url(../pixelart/gba/ui/pokedex_abrir5.png);visibility:hidden}}
@media (max-width:760px){ .dexDev{transform:scale(.6)} }


/* item que caiu (lootPop): selo discreto no alto, centralizado, entra descendo com um quique e sai subindo */
.lootPop{position:absolute;left:50%;top:84px;z-index:20;display:flex;align-items:center;gap:12px;padding:6px 18px 6px 8px;transform:translateX(-50%);
  background:linear-gradient(180deg,#fffbe6,#f6e7a8);border:3px solid #25335f;border-radius:10px;box-shadow:0 0 0 3px #e3a51c,0 4px 0 rgba(0,0,0,.35);
  pointer-events:none;animation:lootIn .45s cubic-bezier(.2,1.5,.4,1)}
.lootPop.out{animation:lootOut .3s ease-in forwards}
@keyframes lootIn{from{transform:translate(-50%,-40px);opacity:0}}
@keyframes lootOut{to{transform:translate(-50%,-30px);opacity:0}}
.lootIco{position:relative;display:grid;place-items:center;width:52px;height:52px;animation:lootHop .5s .3s ease-out}
@keyframes lootHop{40%{transform:translateY(-12px) rotate(-10deg)}70%{transform:translateY(0) rotate(6deg)}}
.lootIco i{position:absolute;width:6px;height:6px;background:#fff;box-shadow:0 0 6px #ffe27a;opacity:0;animation:lootSpark .8s .35s ease-out}
.lootIco i:nth-child(2){left:-4px;top:4px}.lootIco i:nth-child(3){right:-4px;top:10px;animation-delay:.45s}.lootIco i:nth-child(4){left:20px;top:-6px;animation-delay:.55s}
@keyframes lootSpark{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1.3) rotate(45deg)}100%{opacity:0;transform:scale(.4) rotate(90deg)}}
.lootEmo{font-size:36px}
.lootTxt{display:flex;flex-direction:column;font-family:'PokeGBA',monospace;color:#25335f;line-height:1}
.lootTxt small{font-size:16px;color:#7a6418}
.lootTxt b{font-size:32px;font-weight:400;text-transform:uppercase}

/* ---------- arena / aventura: HUD no mesmo estilo (painéis claros, contorno escuro, fonte PokeGBA) ----------
   retratos do time, título da área, Pokébolas, atalhos, dica de captura, pausar e ejetar */
#arena .hm{background:linear-gradient(180deg,#f2f8ff,#c4dcf3);border:3px solid #25335f;border-radius:8px;box-shadow:inset 0 2px 0 #fff,0 3px 0 rgba(0,0,0,.4)}
#arena .hm.act{border:4px solid #25335f;box-shadow:inset 0 2px 0 #fff,0 0 0 3px #f6c24a,0 3px 0 rgba(0,0,0,.4)}
#arena .hm.swp:hover{border-color:#4d7fe0}
#arena .hm .bar{background:#46557d;border:2px solid #25335f;border-radius:3px;box-shadow:none}
#arena .hm .bar>i{border-radius:0}
/* coroa do líder (o que segue o treinador e começa as lutas) em cima do retrato e do cartão no menu de troca */
#arena .hm{position:relative}
.leadCrown{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-8deg);z-index:3;font-size:22px;font-style:normal;line-height:1;filter:drop-shadow(0 2px 0 #1a1420);pointer-events:none}
#bankUi .bkCard .leadCrown{top:-16px;font-size:26px}
/* no retrato do HUD (que corta o que passa da borda): dentro dele, no canto de cima à esquerda */
#arena .hm .leadCrown{top:3px;left:5px;transform:rotate(-12deg);font-size:18px}
/* tecla de troca de cada retrato (1, 2, 3) no canto superior direito */
#arena .hm .hmKey{position:absolute;top:4px;right:4px;z-index:2;min-width:22px;padding:0 4px;text-align:center;font-family:'PokeGBA',monospace;font-size:16px;font-weight:400;line-height:18px;
  color:#25335f;background:linear-gradient(180deg,#fff,#dbe3f3);border:2px solid #25335f;border-bottom-width:3px;border-radius:4px}
#arena .hm .swcdT{font-family:'PokeGBA',monospace;font-size:48px;font-weight:400;text-shadow:-3px 0 0 #25335f,3px 0 0 #25335f,0 -3px 0 #25335f,0 3px 0 #25335f,3px 3px 0 #25335f}
/* seu time: caixa do FireRed (arena.css). Tudo em pixels da arte de 84 × 57: moldura x 6–83 / y 8–56, "Lv" em x 38,
   miolo da barra de HP x 30–77 / y 41–43, "/" do HP em x 59 */
#arena #hudL .hm{zoom:2;width:84px;height:57px;padding:0;border:0;border-radius:0;box-shadow:none;overflow:visible;image-rendering:pixelated;
  background:url('../pixelart/ui/party/slot.png') 0 0/84px 57px no-repeat}
#arena #hudL .hm.act{border:0;box-shadow:none;background-image:url('../pixelart/ui/party/slot-act.png')}
#arena #hudL .hm.swp:hover{filter:brightness(1.12)}
#arena #hudL .hm.dead{filter:grayscale(1);opacity:.6}
#arena #hudL .hm .pmd{position:absolute;left:21px;top:-14px;width:48px;height:48px;margin:0}
#arena #hudL .hm.swcd .pmd{filter:brightness(.45) saturate(.6)}
#arena #hudL .hm .hmLv{position:absolute;left:47px;top:28px;font-size:10px;line-height:10px;color:#f8f8f8;text-shadow:1px 1px 0 #505060}
#arena #hudL .hm .hmHp{position:absolute;left:0;top:45px;width:100%;font-size:10px;line-height:10px;color:#f8f8f8;text-shadow:1px 1px 0 #505060}
#arena #hudL .hm .hmHp b{position:absolute;font-weight:400}
#arena #hudL .hm .hmHp b:first-child{right:26px}
#arena #hudL .hm .hmHp b+b{left:64px}
/* barra de HP: cores da folha (verde > metade, amarela até 1/5, vermelha), linha de cima no tom escuro */
#arena #hudL .hm .bar{position:absolute;left:30px;top:41px;width:48px;height:3px;margin:0;padding:0;border:0;border-radius:0;background:transparent}
#arena #hudL .hm .bar>i{display:block;height:100%;background:linear-gradient(#58d080 1px,#70f8a8 1px);transition:none}
#arena #hudL .hm .bar.mid>i{background:linear-gradient(#c8a808 1px,#f8e038 1px)}
#arena #hudL .hm .bar.lowh>i{background:linear-gradient(#800000 1px,#d02828 1px)}
/* XP: no filete escuro de baixo da caixa */
#arena #hudL .hm .bar.xpb{top:54px;left:8px;width:74px;height:1px}
#arena #hudL .hm .bar.xpb>i{background:#6fe0ff}
/* PP de cada Pokémon: faixa colada embaixo da caixa (o cartão cresce 12 px; a borda de cima dela é o filete da caixa),
   selo "PP" no jeito do "HP" da folha, barra azul como a do #ppBar e o número; vermelha com menos de 1/5 */
#arena #hudL .hm{height:69px}
#arena #hudL .hm .hmPp{position:absolute;left:6px;top:55px;width:78px;height:14px;box-sizing:border-box;border:2px solid #484860;border-radius:0 0 2px 2px;background:#80c0d8;
  display:flex;align-items:center;gap:3px;padding:0 3px 0 2px}
#arena #hudL .hm .hmPp em{font-style:normal;font-size:8px;line-height:8px;padding:0 2px;color:#505050;background:linear-gradient(#f8d050 50%,#f8b040 50%);border-radius:2px}
#arena #hudL .hm .hmPp i{flex:1;height:4px;background:#505050;padding:1px}
#arena #hudL .hm .hmPp i>i{display:block;height:100%;background:linear-gradient(#a8d0ff 1px,#4a90ff 1px)}
#arena #hudL .hm .hmPp.low i>i{background:linear-gradient(#ff9a8a 1px,#d02828 1px)}
#arena #hudL .hm .hmPp.mid i>i{background:linear-gradient(#fff0a0 1px,#f8c830 1px)}
#arena #hudL .hm .hmPp b{font-weight:400;font-size:8px;line-height:8px;min-width:22px;text-align:right;color:#f8f8f8;text-shadow:1px 1px 0 #505060}
#arena #hudL .hm .leadCrown{top:-3px;left:17px;font-size:9px;transform:rotate(-12deg)}
#arena #hudL .hm .hmKey{top:-3px;right:-3px;min-width:9px;padding:0 1px;font-size:8px;line-height:8px;border-width:1px;border-bottom-width:2px;border-radius:2px}
#arena #hudL .hm .swcdT{top:6px;font-size:22px;text-shadow:-1px 0 0 #25335f,1px 0 0 #25335f,0 -1px 0 #25335f,0 1px 0 #25335f,1px 1px 0 #25335f}
#arena #hudC{font-family:'PokeGBA',monospace;font-size:24px;font-weight:400;color:#25335f;padding:4px 18px;border-radius:8px;
  background:linear-gradient(180deg,#f8f0b4,#f3e894 55%,#d9c95e);border:3px solid #9f8d34;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 rgba(0,0,0,.35)}
#arena #hudC b{font-weight:400;color:#c83b31}
#arena #hudC.byTeam{top:12px;transform:none}   /* aventura: ao lado dos retratos do time (left definido em advHud) */
#arena #pauseBtn{width:46px;height:46px;font-family:'PokeGBA',monospace;font-size:24px;font-weight:400;color:#25335f;border-radius:8px;
  background:linear-gradient(180deg,#fffbe6,#efe6b8);border:3px solid #25335f;box-shadow:0 3px 0 rgba(0,0,0,.35)}
/* retrato do inimigo em combate: abaixo dos botões do topo (Ejetar, pausar), sem cobrir nenhum */
#arena #hudR{top:66px}
/* duelo 2x2: abas embaixo dos retratos da direita para escolher de quem ver o time (2 adversários e o parceiro) */
#arena #hudR .dvTabs{position:absolute;top:100%;right:0;margin-top:6px;display:flex;gap:4px;white-space:nowrap}
#arena #hudR .dvTab{font-family:'PokeGBA',monospace;font-size:14px;font-weight:400;line-height:16px;padding:2px 8px;color:#f8f8f8;border:2px solid #25335f;border-radius:4px;
  background:#5a6688;opacity:.75;box-shadow:0 2px 0 rgba(0,0,0,.35);text-shadow:1px 1px 0 #25335f;max-width:120px;overflow:hidden;text-overflow:ellipsis}
#arena #hudR .dvTab.foe{background:#c03838}
#arena #hudR .dvTab.ally{background:#2f7fd0}
#arena #hudR .dvTab.on{opacity:1;box-shadow:0 0 0 2px #f6c24a,0 2px 0 rgba(0,0,0,.35)}
#arena #hudR .dvTab:hover{opacity:1}
/* demonstração de habilidade em janela (#arena.demoWin): menor, centralizada, por cima de tudo (até das janelas do menu,
   como a escolha de habilidade), com moldura; o HUD da luta some — fica só o título e o botão de fechar, menores */
#arena.demoWin{z-index:120;background:rgba(10,14,28,.45)}
#demoBg{position:fixed;z-index:70;pointer-events:none;image-rendering:pixelated}   /* partida congelada atrás (aventura), abaixo das janelas */
#arena.demoWin #arenaWrap{width:min(640px,92vw);border:4px solid #25335f;border-radius:12px;overflow:hidden;box-shadow:0 0 0 3px #e3a51c,0 10px 0 rgba(0,0,0,.4)}
#arena.demoWin :is(#hudL,#hudR,#skills,#statusCol,#advBar,#pauseBtn,#devBtn,#ejectBtn,#combatIco,#bossBar,#banner,#touch,.lootPop){display:none!important}
#arena.demoWin #arenaWrap{cursor:grab;touch-action:none}
/* vídeo do tutorial da luta (tutArena, demo.js): a janela fica em cima do espaço do vídeo na página, sem fundo
   escurecido e sem pegar clique (os botões do tutorial continuam funcionando) */
#arena.demoWin.tutEmbed{background:none;pointer-events:none;z-index:125}
#tutBack{position:fixed;inset:0;z-index:69;background:#000;pointer-events:none}
#arena.tutEmbed #arenaWrap{box-sizing:border-box;border:4px solid #1a1420;box-shadow:none;cursor:default;max-height:none}
#arena.tutEmbed :is(#hudC,#demoBtn,#hudR){display:none!important}
#arena.demoWin #arenaWrap.dragging{cursor:grabbing}
#arena.demoWin #hudC{top:8px;font-size:16px;padding:2px 10px}
#arena.demoWin #demoBtn{top:6px;right:8px;height:32px;font-size:16px;padding:0 10px}
/* demonstração de habilidade: botão de fechar no topo, no lugar do Ejetar */
#arena #demoBtn{position:absolute;top:10px;right:132px;height:46px;padding:0 14px;font-family:'PokeGBA',monospace;font-size:24px;color:#fff;border-radius:8px;border:3px solid #25335f;
  background:linear-gradient(180deg,#7aa4f2,#3a64c6);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 rgba(0,0,0,.35);cursor:pointer;text-shadow:2px 2px 0 rgba(0,0,0,.35)}
/* coluna de efeitos ativos do seu Pokémon (esquerda, abaixo dos retratos): buffs em verde, debuffs em vermelho */
#statusCol{position:absolute;left:10px;top:190px;display:flex;flex-direction:column;gap:4px;pointer-events:auto;z-index:4}
#statusCol .stRow{display:flex;align-items:center;gap:8px;width:max-content;min-width:0;padding:3px 10px 3px 3px;border-radius:7px;border:3px solid #25335f;box-shadow:0 2px 0 rgba(0,0,0,.35);
  font-family:'PokeGBA',monospace;font-size:32px;line-height:1;color:#25335f;text-transform:uppercase;cursor:help}   /* largura do texto, sem sobra; fonte em 32 px (nítida), maiúsculas como os nomes de habilidade */
#statusCol .stRow.buff{background:linear-gradient(180deg,#e9fbe9,#bfe9c4)}
#statusCol .stRow.debuff{background:linear-gradient(180deg,#fdeaea,#f2c2c2)}
#statusCol .stIco{display:grid;place-items:center;width:34px;height:34px;border-radius:5px;font-size:22px;font-family:sans-serif}
#statusCol .buff .stIco{background:#2f9e57}#statusCol .debuff .stIco{background:#c83b31}
#statusCol b{font-weight:400;white-space:nowrap}
#statusCol em{font-style:normal;color:#56628a}
#stTip{position:fixed;z-index:140;max-width:260px;padding:6px 10px;border-radius:6px;border:2px solid #25335f;background:linear-gradient(180deg,#fff,#e9eef8);
  color:#25335f;font-family:'Pixelify Sans',sans-serif;font-size:13px;box-shadow:0 3px 0 rgba(0,0,0,.35);pointer-events:none}
#stTip.hidden{display:none}
#arena #devBtn{width:46px;height:46px;font-size:22px;color:#25335f;border-radius:8px;background:linear-gradient(180deg,#fffbe6,#efe6b8);border:3px solid #25335f;box-shadow:0 3px 0 rgba(0,0,0,.35)}
#arena #ejectBtn{height:46px;font-family:'PokeGBA',monospace;font-size:24px;font-weight:400;border-radius:8px;border:3px solid #25335f;text-shadow:2px 2px 0 rgba(0,0,0,.35);
  background:linear-gradient(180deg,#f2776b,#c83b31);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 rgba(0,0,0,.35)}
#arena #advBar{gap:8px}
#arena #advBar .ball{width:60px;padding:5px 0 2px;border-radius:8px;font-family:'PokeGBA',monospace;font-size:24px;font-weight:400;line-height:1;color:#25335f;
  background:linear-gradient(180deg,#f2f8ff,#c4dcf3);border:3px solid #25335f;box-shadow:inset 0 2px 0 #fff,0 3px 0 rgba(0,0,0,.4)}
#arena #advBar .ball.on{border:3px solid #25335f;background:linear-gradient(180deg,#fff6cf,#f6d777);box-shadow:inset 0 2px 0 #fff,0 0 0 3px #e3a51c,0 3px 0 rgba(0,0,0,.4)}
#arena #advBar .advKeys,#arena #advHint{font-family:'PokeGBA',monospace;font-size:16px;font-weight:400;color:#25335f;border-radius:8px;
  background:linear-gradient(180deg,#fff,#dfe7f5);border:3px solid #25335f;box-shadow:0 3px 0 rgba(0,0,0,.35)}
#arena #advBar .advKeys{padding:4px 10px;gap:14px;order:-1}
/* na luta, as Pokébolas sobem para cima das barras de HP e PP (--advL e --advB postos por hudTick, vfx.js) */
@media (min-width:761px){ #arena #advBar{transition:bottom .3s ease} #arena:not(.peace) #advBar{left:var(--advL,10px);bottom:var(--advB,10px);transform:scale(var(--advS,1));transform-origin:0 100%} }
#arena #advBar .advKeys kbd{font-family:'PokeGBA',monospace;font-size:16px;font-weight:400;color:#25335f;background:linear-gradient(180deg,#fff,#dbe3f3);border:2px solid #25335f;border-bottom-width:3px;border-radius:4px;padding:0 5px}
#arena #advHint{font-size:24px;padding:4px 12px}
#arena #banner{font-family:'PokeGBA',monospace;font-size:64px;font-weight:400;color:#fff;letter-spacing:.06em;
  text-shadow:-4px 0 0 #25335f,4px 0 0 #25335f,0 -4px 0 #25335f,0 4px 0 #25335f,-4px -4px 0 #25335f,4px 4px 0 #25335f,-4px 4px 0 #25335f,4px -4px 0 #25335f,8px 8px 0 rgba(0,0,0,.35)}

/* ---------- arena: botões de habilidade no estilo da lista de golpes do GBA ----------
   painel claro com contorno escuro; a tecla numa etiqueta da cor do tipo (como "FIGHT"), o nome do golpe embaixo */
#skills{gap:8px}
/* HUD da luta a 65% do tamanho (HUD_K em vfx.js empilha as barras com o mesmo fator) */
#arena #skills{transform:translateX(-50%) scale(.65);transform-origin:50% 100%}
#skills .sk{width:auto;min-width:130px;height:70px;padding:5px 12px 0;   /* largura acompanha o nome: nenhum golpe fica cortado */border-radius:8px;background:linear-gradient(180deg,#f2f8ff,#c4dcf3);border:3px solid #25335f;
  box-shadow:inset 0 2px 0 #fff,0 3px 0 rgba(0,0,0,.4);color:#25335f;font-family:var(--px-head);-webkit-font-smoothing:none}
#skills .sk b{display:inline-block;min-width:44px;max-width:100%;padding:0 6px;white-space:nowrap;border-radius:5px;font-size:24px;font-weight:700;line-height:1.1;color:#fff;
  background:var(--tc,#8d8f9e);border:2px solid rgba(20,26,50,.6);text-shadow:1px 1px 0 rgba(0,0,0,.5);box-shadow:inset 0 2px 0 rgba(255,255,255,.3)}
#skills .sk span{margin-top:3px;font-size:24px;font-weight:600;line-height:1;color:#25335f;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
#skills .sk .skt{top:2px;right:5px;font-size:16px;color:#56628a}
#skills .sk .cd{background:rgba(25,32,60,.62)}
/* recarregando: o botão fica meio apagado (cinza e escuro), só os segundos que faltam continuam acesos */
#skills .sk.cool{background:linear-gradient(180deg,#a3adc2,#7f8aa3);border-color:#3a4566;box-shadow:0 3px 0 rgba(0,0,0,.4)}
#skills .sk.cool b,#skills .sk.cool span,#skills .sk.cool .skt{opacity:.45;filter:grayscale(.8)}
#skills .sk.cool .cdt{z-index:2}
#skills .sk .cdt{font-size:32px;font-weight:700;color:#fff;text-shadow:2px 2px 0 #000}
#skills .sk.ready{border-color:#25335f;box-shadow:inset 0 2px 0 #fff,0 0 0 3px var(--tc,#ffd34d),0 3px 0 rgba(0,0,0,.4)}
#skills .sk.skill{border-top:3px solid #25335f}
#skills .sk.skill.ready{border-color:#25335f;border-top-width:3px;box-shadow:inset 0 2px 0 #fff,0 0 0 3px var(--tc),0 0 12px var(--tc)}
#skills .sk.live,#skills .sk.skill.live{background:var(--tc,#ff8a3d);border:3px solid #fff}
#skills .sk.live span,#skills .sk.live .skt{color:#fff;text-shadow:1px 1px 0 #000a}
#skills .sk.evo{animation:skEvo .6s ease-in-out infinite alternate}
/* ultimate: borda dourada; cheia, pulsa para chamar atenção */
#skills .sk.ult{border-color:#9f7a14}
#skills .sk.ult.ready{animation:ultReady .6s ease-in-out infinite alternate}
@keyframes ultReady{from{box-shadow:inset 0 2px 0 #fff,0 0 0 3px #f6c24a,0 0 8px #f6c24a}to{box-shadow:inset 0 2px 0 #fff,0 0 0 4px #ffe27a,0 0 22px #ffe27a}}
/* sem PP para o golpe: botão avermelhado (vence o cinza da recarga) */
#skills .sk.skill.nopp:not(.live){background:linear-gradient(180deg,#f8b8b0,#d86a60);border-color:#8a1c1c;box-shadow:0 3px 0 rgba(0,0,0,.4)}
#skills .sk.nopp b,#skills .sk.nopp span,#skills .sk.nopp .skt{opacity:1;filter:none}
#skills .sk.nopp span,#skills .sk.nopp .skt{color:#7a1010}
#skills .sk.nopp .cd{background:rgba(120,16,16,.45)}
#skills .sk.locked{border-style:dashed;opacity:.6}
#skills .sk.locked b{background:#8d8f9e}
#skills .sk.itm{min-width:74px;padding:5px 6px 0}
#skills .sk.itm span{display:flex;justify-content:center;margin-top:0;height:32px}
#skills .sk.itm .skt{top:auto;bottom:2px;right:4px}
#skills .sk.itm.none{border-style:dashed;opacity:.6}
#skills .sk.itm.none b{background:#8d8f9e}
#skills .sk.itm.zero{opacity:.6;filter:grayscale(.8)}
/* usos que restam nesta luta (treinador, líder ou chefe) */
#skills .sk.itm .itu{position:absolute;left:5px;bottom:5px;display:flex;gap:2px}
#skills .sk.itm .itu s{width:8px;height:8px;background:#3fa34d;border:1px solid #25335f}
#skills .sk.itm .itu s.off{background:#b4bccd}
#skills .sk.locked span{color:#56628a;font-size:16px}
/* HP e PP do Pokémon em campo: barras à esquerda dos botões de habilidade, no pé deles (PP embaixo, HP em cima; largura e posição
   postas por hudTick, vfx.js), no jeito da barra de HP do GBA (etiqueta, trilho escuro com brilho em cima, número PokeGBA à direita).
   PP: com metade ou menos fica amarela; abaixo de 1/4, vermelha e pisca. HP: as faixas do FireRed (hpTone), verde, amarela e vermelha */
#arena :is(#hpBar,#ppBar,#airBar){position:absolute;bottom:10px;left:10px;transform:scale(.65);transform-origin:0 100%;box-sizing:border-box;width:min(520px,36%);display:flex;align-items:center;gap:10px;padding:5px 12px 5px 6px;
  border-radius:8px;background:linear-gradient(180deg,#f2f8ff,#c4dcf3);border:3px solid #25335f;box-shadow:inset 0 2px 0 #fff,0 3px 0 rgba(0,0,0,.4);
  font-family:'PokeGBA',monospace;color:#25335f;pointer-events:auto;z-index:4;transition:opacity .3s ease,translate .3s ease}
#arena :is(#hpBar,#ppBar,#airBar).hidden{display:none}
#arena :is(#hpBar,#ppBar,#airBar) b{padding:0 8px;border-radius:5px;font-size:24px;font-weight:400;line-height:1.1;color:#f8d030;background:#3a4566;border:2px solid rgba(20,26,50,.6);
  text-shadow:2px 2px 0 #9a6a10;box-shadow:inset 0 2px 0 rgba(255,255,255,.25)}
#arena :is(#hpBar,#ppBar,#airBar) .ppTrack{flex:1;height:24px;padding:3px;border-radius:5px;background:#25335f;box-shadow:inset 0 0 0 2px #506088}
#arena #ppBar .ppTrack>i{display:block;height:100%;border-radius:2px;background:linear-gradient(#a8d0ff 5px,#4a90ff 5px,#3a7bd5)}
#arena #hpBar .ppTrack{position:relative}
#arena #hpBar .ppTrack>i{display:block;height:100%;border-radius:2px;background:linear-gradient(#a8f8c8 5px,#58d080 5px,#38b060)}
/* escudo: filete branco por cima da barra de HP, como na placa dos outros Pokémons */
#arena #hpBar .ppTrack>u{position:absolute;left:3px;bottom:3px;height:6px;width:0;max-width:calc(100% - 6px);background:#fff}
/* barra de ar: aparece acima do HP na água funda (deepTick, hazards.js) */
#arena #airBar .ppTrack>i{display:block;height:100%;border-radius:2px;background:linear-gradient(#d8f6ff 5px,#6fd0ff 5px,#3aa8e0)}
/* o HP não recebe clique: a ordem de andar passa por ele */
#arena :is(#hpBar,#airBar){pointer-events:none}
#arena :is(#hpBar,#ppBar,#airBar) .ppn{min-width:84px;text-align:right;font-size:24px;line-height:1}
#arena :is(#hpBar,#ppBar,#airBar).low .ppTrack>i{background:linear-gradient(#ff9a8a 5px,#d02828 5px,#a01818);animation:ppLow .5s steps(2) infinite}
#arena :is(#hpBar,#ppBar,#airBar).low .ppn{color:#c83b31}
/* metade ou menos: amarela, como o HP do GBA */
#arena :is(#hpBar,#ppBar,#airBar).mid .ppTrack>i{background:linear-gradient(#fff0a0 5px,#f8c830 5px,#d8a010)}
#arena :is(#hpBar,#ppBar,#airBar).mid .ppn{color:#a07010}
@keyframes ppLow{50%{opacity:.55}}
#arena.peace :is(#hpBar,#ppBar,#airBar){opacity:0;translate:0 40px;pointer-events:none}
#arena.demoWin :is(#hpBar,#ppBar,#airBar){display:none!important}
/* MOVER (aventura): ordem de andar com o clique; maior que os golpes para a recarga ficar bem à vista */
#skills .sk.mover{--tc:#3fa34d;min-width:160px;height:84px;margin-top:-14px;border-width:4px}
#skills .sk.mover span{font-size:28px}
#skills .sk.mover .cdt{font-size:40px}

/* ---------- aventura fora de luta: golpes, MOVER, Pokébolas e teclas de arremesso somem ----------
   (o mapa fica limpo). Ao começar a luta (.fightIn, adventure.js fightUi) os botões sobem um a um com um quique */
#skills,#advBar .balls{transition:opacity .3s ease,translate .3s ease}
#arena.peace #skills{opacity:0;translate:0 40px;pointer-events:none}
/* trapaceando na aposta dos Hitmons: fora de combate, a barra aparece só com os consumíveis */
#arena.peace #skills.itemsOnly{opacity:1;translate:0 0;pointer-events:auto}
#skills.itemsOnly .sk:not(.itm){display:none}
#arena.peace #advBar .balls{opacity:0;translate:-40px 0;pointer-events:none}
#arena.peace #advBar .advKeys{display:none}
/* Safari Zone (safari.js): nunca tem luta, mas as Safari Balls ficam na tela no lugar da Mochila e da Pokédex */
#arena.peace.safari #advBar .balls{opacity:1;translate:0 0;pointer-events:auto}
#arena.peace.safari #advBar .advKeys{display:flex}
#arena.peace.safari #advBar .advTools{opacity:0;pointer-events:none}
/* fora de combate, no lugar das Pokébolas: Mochila e Pokédex com a tecla de atalho (na luta somem) */
#arena #advBar{position:absolute}
#arena #advBar .advTools{position:absolute;left:0;bottom:0;display:flex;gap:8px;opacity:0;translate:-40px 0;pointer-events:none;transition:opacity .3s ease,translate .3s ease}
#arena.peace #advBar .advTools{opacity:1;translate:0 0;pointer-events:auto}
#arena #advBar .tool{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:64px;height:64px;padding:4px 0 2px;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,#f2f8ff,#c4dcf3);border:3px solid #25335f;box-shadow:inset 0 2px 0 #fff,0 3px 0 rgba(0,0,0,.4)}
#arena #advBar .tool:hover{border-color:#4d7fe0}
#arena #advBar .tool .emo{font-size:30px;line-height:1}
#arena #advBar .tool kbd{position:absolute;top:-8px;right:-8px;min-width:22px;padding:0 4px;text-align:center;font-family:'PokeGBA',monospace;font-size:16px;line-height:18px;color:#25335f;background:linear-gradient(180deg,#fff,#dbe3f3);border:2px solid #25335f;border-bottom-width:3px;border-radius:4px}
/* Pokédex pequena (o mesmo desenho do aviso de rastreio): corpo vermelho com a lente azul */
#arena #advBar .dexIco{position:relative;display:block;width:30px;height:36px;border-radius:5px;background:#e0443a;border:2px solid #5a0c08;box-shadow:inset 0 2px 0 rgba(255,255,255,.3)}
#arena #advBar .dexIco>i{position:absolute;left:4px;top:4px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#bff6ff,#2f7ae8 60%);border:2px solid #f4f4f4}
#arena #advBar .dexIco:after{content:'';position:absolute;left:4px;right:4px;bottom:4px;height:11px;border-radius:2px;background:#b8dca8;border:2px solid #5a0c08}
#arena.fightIn #skills .sk{animation:skIn .45s cubic-bezier(.2,1.6,.4,1) backwards}
#arena.fightIn #skills .sk:nth-child(2){animation-delay:.05s}
#arena.fightIn #skills .sk:nth-child(3){animation-delay:.1s}
#arena.fightIn #skills .sk:nth-child(4){animation-delay:.15s}
#arena.fightIn #skills .sk:nth-child(5){animation-delay:.2s}
#arena.fightIn #skills .sk:nth-child(6){animation-delay:.25s}
#arena.fightIn #skills .sk:nth-child(7){animation-delay:.3s}
#arena.fightIn #skills .sk:nth-child(8){animation-delay:.35s}
#arena.fightIn #advBar .ball{animation:ballIn .4s cubic-bezier(.2,1.6,.4,1) backwards}
#arena.fightIn #advBar .ball:nth-child(2){animation-delay:.06s}
#arena.fightIn #advBar .ball:nth-child(3){animation-delay:.12s}
#arena.fightIn #advBar .ball:nth-child(4){animation-delay:.18s}
#arena.fightIn #advBar .ball:nth-child(5){animation-delay:.24s}
@keyframes skIn{from{transform:translateY(90px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes ballIn{from{transform:translateX(-70px) rotate(-200deg);opacity:0}to{transform:none;opacity:1}}
/* as espadas de "em combate" saíram da tela (o som e as passivas de entrada continuam em combatIcon) */
#combatIco{display:none!important}

/* ---------- telas menores ---------- */
@media (max-width:1100px){
  .nav{font-size:24px;gap:8px;padding:0 8px}
  #nav{width:170px}
  .page{padding-left:200px}
  .home .modes{left:200px}
}
@media (max-width:760px){
  #hud::before{height:70px}
  .profile{min-width:0;top:4px}.avatar{width:54px;height:54px}.pname{font-size:24px}.plv{font-size:16px}.profile .bar.xp{width:130px}
  #topbar{top:76px}.chip{height:40px;font-size:24px}
  #hud .iconBtn{width:54px;height:50px}#hud .iconBtn svg{width:24px;height:24px}#hud .iconBtn[data-l]::after{font-size:16px}
  #cfgBtn{width:56px;height:54px;top:6px;right:8px}#cfgBtn svg{width:26px;height:26px}#cfgBtn::after{font-size:16px}
  #nav{top:auto;left:0;right:0;bottom:0;width:auto;padding:6px;border-radius:12px 12px 0 0;border-width:3px 0 0}
  .nav{flex:1;flex-direction:column;gap:2px;padding:4px 0;font-size:13px;justify-content:center}
  .nav.active::before{display:none}
  .page{padding:128px 12px 96px}
  .page h2{font-size:32px}
  .home .modes{left:10px}
}