/* ---------- Arena ---------- */
#arena{position:fixed;inset:0;background:#000;z-index:60;display:flex;align-items:center;justify-content:center}
#arenaWrap{position:relative;width:min(100vw,160vh);aspect-ratio:16/10;max-height:100vh}
#ac{width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
.hteam{position:absolute;top:8px;display:flex;gap:6px}
#hudL{left:10px}#hudR{right:132px;flex-direction:row-reverse}
.hm{width:64px;background:rgba(8,20,44,.86);border:1px solid var(--edge);border-radius:12px;padding:3px;text-align:center}
.hm .pmd{width:44px;height:44px}
.hm.dead{filter:grayscale(1);opacity:.45}.hm.act{border:2px solid #ffd34d}
.hm .bar{height:6px}
.hm .bar.xpb{height:4px;margin-top:2px}.hm .bar.xpb>i{background:linear-gradient(90deg,#1aa3ff,#6fe0ff);transition:width .3s}
/* seu time (canto esquerdo): caixa do menu de time do FireRed (pixelart/ui/party, recortada da folha frlg-party-sheet.png).
   Medidas em pixels da arte (84 × 57); o zoom amplia a caixa inteira. Em campo: caixa clara de borda laranja e Poké Ball
   aberta (slot-act.png). Ajustes em retro.css (#arena #hudL) */
#hudL{gap:12px;top:14px}
#hudC{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(8,20,44,.86);border:1px solid var(--edge);border-radius:20px;padding:4px 18px;font-size:16px;font-weight:700;text-align:center;white-space:nowrap}
#skills{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
#skills.trOff{opacity:.35;filter:grayscale(.8)}   /* aventura andando como o treinador: sem golpes */.sk{position:relative;width:84px;height:64px;background:rgba(8,20,44,.9);border:1px solid var(--edge2);border-radius:14px;overflow:hidden;text-align:center;padding-top:5px;user-select:none}
.sk b{display:block;font-size:15px;font-weight:800;color:#ffd34d;line-height:1.1}
.sk span{font-size:11.5px;font-weight:600;display:block;line-height:1.1;padding:0 3px}
.sk .cd{position:absolute;left:0;bottom:0;width:100%;background:rgba(0,0,0,.6);height:0}
.sk .cdt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;text-shadow:0 2px 3px #000}
.sk.ready{border-color:#ffd34d;box-shadow:0 0 14px #ffd34d88}
.sk.skill{border-top:4px solid var(--tc)}.sk.skill.ready{border-color:var(--tc);border-top-width:4px;box-shadow:0 0 14px var(--tc)}
/* em andamento (carregando / canalizando): aperte de novo para soltar ou encerrar */
.sk.live,.sk.skill.live{border:2px solid #fff;background:var(--tc,#ff8a3d);transform:translateY(-6px) scale(1.08);box-shadow:0 0 22px 4px var(--tc,#ff8a3d);animation:skLive .45s ease-in-out infinite alternate;overflow:visible}
.sk.live b,.sk.live span,.sk.live .skt{color:#fff;text-shadow:0 1px 2px #000a}
@keyframes skLive{from{filter:brightness(1);box-shadow:0 0 14px 2px var(--tc,#ff8a3d)}to{filter:brightness(1.3);box-shadow:0 0 30px 8px var(--tc,#ff8a3d)}}
.sk.off{filter:grayscale(1) brightness(.6)}
/* evoluída pelo Dragon Dance (kits/dragon.js): contorno roxo pulsando enquanto a dança durar */
.sk.evo{animation:skEvo .6s ease-in-out infinite alternate}
@keyframes skEvo{from{box-shadow:0 0 0 2px #8a6aff,0 0 10px 2px #8a6aff}to{box-shadow:0 0 0 3px #c8c0ff,0 0 24px 6px #8a6aff}}
.sk.locked{opacity:.55;border-style:dashed;filter:grayscale(.6)}   /* espaço de habilidade ainda bloqueado / Ultimate em breve */
.sk.locked span{color:var(--mut)}
/* Fury Cutter: selo da sequência (2x/3x) acima do botão da habilidade; pula quando a sequência sobe */
#skills .stk{position:absolute;bottom:100%;margin-bottom:8px;transform:translateX(-50%);z-index:3;padding:0 10px;border-radius:10px;background:rgba(8,20,44,.92);border:3px solid #ff8a3d;color:#ffb06a;
  font:900 24px/30px "Baloo 2",Nunito,system-ui,sans-serif;text-shadow:0 2px 3px #000;box-shadow:0 0 14px 2px #ff8a3daa;pointer-events:none;white-space:nowrap}
#skills .stk.pop{animation:stkPop .35s ease-out}
@keyframes stkPop{0%{transform:translateX(-50%) scale(1.7)}100%{transform:translateX(-50%) scale(1)}}
.sk .skt{position:absolute;right:4px;top:3px;font-style:normal;font-size:9px;font-weight:800;color:var(--mut)}
.tag.style{background:rgba(255,255,255,.1);color:#e8f2ff}
.skc{display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden;margin:3px 0}.skc b{overflow:hidden;text-overflow:ellipsis}.skc .muted{margin-left:auto}
.skhov{display:contents}   /* invólucro do cartão de habilidade: não muda o layout da linha */
.skLocked>*:not(.lockTag){opacity:.45}   /* habilidade travada até o nível 20 */
/* nível em que a habilidade destrava: etiqueta escura com texto amarelo, na fonte pixel, para ler bem em fundo claro */
.lockTag{font-family:var(--px-head,inherit);font-size:18px;font-weight:600;line-height:1.2;color:#ffd34d;background:#1a1420;border-radius:7px;padding:2px 8px;white-space:nowrap;margin-left:4px;opacity:1}
.skrow{padding:7px 0;border-top:1px solid var(--edge)}.skrow:first-child{border-top:0}
#banner{position:absolute;top:30%;left:0;right:0;text-align:center;font-size:52px;font-weight:800;text-shadow:0 4px 0 rgba(0,0,0,.4),0 0 24px #2f8cff;pointer-events:none;opacity:0;transition:opacity .2s}
#banner.on{opacity:1}
/* o canto superior direito é do botão ⚙ fixo (#cfgBtn); pausar, ejetar e o time inimigo ficam à esquerda dele */
#pauseBtn{position:absolute;top:10px;right:80px;width:42px;height:42px;font-size:16px;font-weight:800;background:rgba(8,20,44,.9);border:1px solid var(--edge2);color:#fff;border-radius:12px;cursor:pointer}
#sprLayer{position:absolute;left:0;top:0;width:960px;height:600px;transform-origin:0 0;pointer-events:none;overflow:hidden}
.arenaSpr{position:absolute;pointer-events:none;overflow:hidden}
.arenaSpr img{position:absolute;left:0;max-width:none}
.hm.swp{cursor:pointer}.hm.swp:hover{border-color:#8fd0ff}
/* recarga da troca: retrato escurecido com os segundos no meio */
.hm{position:relative}
.hm.swcd .pmd{filter:brightness(.45) saturate(.6)}
.hm .swcdT{position:absolute;left:0;right:0;top:8px;text-align:center;font-size:24px;font-weight:900;color:#fff;text-shadow:0 2px 0 #000,0 0 6px #000;pointer-events:none}
#ejectBtn{position:absolute;top:10px;right:132px;height:42px;padding:0 14px;font-size:15px;font-weight:800;background:linear-gradient(180deg,#ff8a5a,#d8402a);border:1px solid #ffb08a;color:#fff;border-radius:12px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.25)}
#ejectBtn:hover{filter:brightness(1.1)}
#advBar{position:absolute;left:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;pointer-events:auto}
#advBar .balls{display:flex;gap:6px}
#advBar .ball{display:flex;flex-direction:column;align-items:center;gap:1px;width:52px;padding:5px 0 3px;background:rgba(8,20,44,.86);border:1px solid var(--edge);border-radius:12px;color:#fff;font-weight:800;font-size:12px;cursor:pointer}
#advBar .ball.on{border:2px solid #ffd34d;background:rgba(40,34,8,.9)}
.ballIco{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.ballIco.inl{display:inline-block;vertical-align:-.2em;margin-right:.15em}
#advBar .advKeys{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:#cfe0ff;background:rgba(8,20,44,.7);padding:4px 8px;border-radius:10px}
#advBar .advKeys kbd{font-size:11px}
#advHint{font-size:13px;font-weight:700;background:rgba(8,20,44,.8);border:1px solid var(--edge);padding:4px 10px;border-radius:10px;align-self:flex-start}
#arena.touchOn #advBar .advKeys{display:none}
.tball{display:flex;align-items:center;justify-content:center}
.advCaught{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.advCaught>div{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid var(--edge);border-radius:12px;padding:4px 10px 4px 4px;text-align:left}
.advCaught .pmd{width:52px;height:52px}
/* todos os cards da linha com a mesma altura; o botão Explorar fica sempre no pé do card */
.advGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:stretch}
.advCard{display:flex;flex-direction:column;gap:8px}
.advCard>.btn{margin-top:auto}
.advCard.locked{opacity:.55;filter:grayscale(.6)}
.advArt{position:relative;height:110px;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#5fbf6a,#1f5a2e)}
.advArt.cave{background:linear-gradient(160deg,#4a4258,#15121c)}.advArt.lake{background:linear-gradient(160deg,#7fc8f2,#1f5aa4)}
.advArt svg{position:absolute;inset:0;width:100%;height:100%}
/* thumb da região (campo "thumb" em ADV_AREAS); se o arquivo faltar, a imagem some e fica a arte desenhada */
.advArt .advThumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.advArt .advThumb+span{display:none}
.advArt:has(.advThumb){height:auto;aspect-ratio:16/9}   /* com imagem, o card mostra a cena inteira */
.advArt span{position:absolute;left:14px;bottom:8px;font-size:44px;filter:drop-shadow(0 3px 4px #0006)}
.advPool{display:flex;flex-wrap:wrap;gap:4px}
.advCalm{color:#8fe3a1;font-weight:700;margin:2px 0 6px}
.advPool>div{width:58px;height:58px;background:rgba(255,255,255,.06);border-radius:10px;display:flex;align-items:center;justify-content:center}
.advPool .pmd{width:58px;height:58px}
.advPool.rare>div{background:rgba(255,211,77,.12);border:1px solid rgba(255,211,77,.35)}
.advPool .q{font-size:22px;font-weight:800;color:#ffd34d}
@media (max-width:760px){ #advBar{bottom:auto;top:58px}
  /* tela estreita: o time volta ao tamanho normal (dobrado, ele cobriria o título da área e a barra de Pokébolas) */
  #hudL{gap:6px} #arena #hudL .hm{zoom:1} #advBar .ball{width:44px} #ejectBtn{right:108px;padding:0 10px;font-size:13px} #pauseBtn{right:60px} #hudR{right:108px} #devBtn{top:58px;right:10px} }
#devBtn{position:absolute;top:72px;right:24px;width:42px;height:42px;font-size:18px;background:rgba(8,20,44,.9);border:1px solid var(--edge2);color:#fff;border-radius:12px;cursor:pointer}
#devPanel{position:fixed;right:64px;top:60px;width:330px;max-height:calc(100vh - 80px);overflow:auto;z-index:9999;background:rgba(10,18,40,.96);border:1px solid #ffd34d;border-radius:14px;padding:12px;box-shadow:0 10px 40px rgba(0,0,0,.5);font-size:13px;color:#e8f0ff}
#devTp{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;background:#08142c;color:#e8f0ff;font-size:13px}
#devTp .devTpBar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:8px 12px;background:#25335f;border-bottom:1px solid #ffd34d}
#devTp .devTpBar b{color:#ffd34d;font-size:15px}
#devTp .devTpBar em{margin-left:auto;font-style:normal;color:#ffd34d}
#devTp canvas{display:block;flex:1;min-height:0;cursor:crosshair;touch-action:none}
#devPanel .devHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:16px;color:#ffd34d}
#devPanel .devHead button{background:none;border:0;color:#fff;font-size:18px;cursor:pointer}
#devPanel .devTabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
#devPanel .devTabs button{background:rgba(255,255,255,.08);border:1px solid var(--edge);color:#fff;border-radius:8px;padding:3px 8px;cursor:pointer;font-size:12px}
#devPanel .devTabs button.on{border-color:#ffd34d;background:rgba(255,211,77,.18)}
#devPanel .devRow{display:grid;grid-template-columns:110px 1fr 46px;align-items:center;gap:6px;margin:3px 0}
#devPanel .devRow input{width:100%;accent-color:#ffd34d}
#devPanel .devRow em{font-style:normal;text-align:right;font-weight:700}
#devPanel .devChk{display:flex;gap:6px;align-items:center;margin:6px 0}
#devPanel .sktRow{grid-template-columns:130px 70px 1fr}
#devPanel .sktRow input{background:rgba(255,255,255,.08);border:1px solid var(--edge);border-radius:6px;color:#fff;padding:2px 5px;font:inherit}
#devPanel .sktRow em{font-size:11px;font-weight:400;color:#ffd34d;text-align:left}
#devPanel .sktRow.ch span{color:#ffd34d}
#devPanel .sktSlot{display:grid;grid-template-columns:30px 1fr;gap:6px;align-items:center;margin:3px 0}
#devPanel .sktSlot button{background:rgba(255,255,255,.08);border:1px solid var(--edge);border-radius:6px;color:#fff;font-weight:700;padding:3px 0;cursor:pointer}
#devPanel .sktSlot.on button{border-color:#ffd34d;background:rgba(255,211,77,.25);color:#ffd34d}
#devPanel .sktSlot input{background:rgba(255,255,255,.08);border:1px solid var(--edge);border-radius:6px;color:#fff;padding:3px 6px;font:inherit;min-width:0}
#devPanel .sktSlot.on input{border-color:#ffd34d}
#devPanel .sktSlot.off{opacity:.5;font-size:12px}
#devPanel .sktSlot.off b{text-align:center}
#devPanel .sktName{font-weight:700;margin:2px 0 4px}
#devPanel .sktNote{font-size:11px;opacity:.75;margin-top:6px}
#devPanel .devStats{background:rgba(255,255,255,.06);border-radius:8px;padding:6px 8px;margin-top:4px}
#bossBar{position:absolute;top:58px;left:50%;transform:translateX(-50%);width:min(560px,70%);text-align:center;pointer-events:none}
#combatIco{position:absolute;top:46px;left:50%;transform:translateX(-50%);height:min(144px,22vh);pointer-events:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6));animation:combatIn .25s ease-out}
#bossBar:not(.hidden) ~ #combatIco{top:114px}   /* na luta do chefe fica abaixo da barra de vida */
@keyframes combatIn{from{transform:translateX(-50%) scale(1.6);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
#bossBar .bbName{font-weight:900;font-size:18px;color:#ffd34d;text-shadow:0 2px 0 #000,0 0 12px #ff5a3a}
#bossBar .bbTrack{position:relative;height:26px;margin-top:3px;background:#2a0c14;border:2px solid #ffd34d;border-radius:13px;overflow:hidden;box-shadow:0 0 14px rgba(255,90,58,.5)}
#bossBar .bbTrack i{position:absolute;inset:0;width:100%;background:linear-gradient(180deg,#ff8a5a,#d8202a);transition:width .15s}
#bossBar .bbTrack b{position:absolute;inset:0;font-size:14px;line-height:22px;color:#fff;text-shadow:0 1px 0 #000}
#arenaPanel{position:absolute;inset:0;background:rgba(3,8,20,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:5}
#arenaPanel.overModal{position:fixed;z-index:90}   /* menu de pausa aberto por cima da escolha de habilidade */
#arenaPanel .mbox{max-width:560px;text-align:center}
#arenaPanel .mbox.regionDone{border:2px solid #ffd34d;box-shadow:0 0 40px rgba(255,211,77,.45)}
#arenaPanel .mbox.regionDone h3{font-size:34px;color:#ffd34d}
#touch{position:absolute;inset:0;pointer-events:none}
#joy{position:absolute;left:3%;bottom:6%;width:130px;height:130px;border-radius:50%;background:#ffffff14;border:2px solid #ffffff33;pointer-events:auto;touch-action:none}
#joyK{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px;border-radius:50%;background:#ffffff40}
#tbtns{position:absolute;right:3%;bottom:14%;display:grid;grid-template-columns:repeat(3,64px);gap:8px;pointer-events:auto}
#tbtns button{height:64px;border-radius:50%;border:2px solid #ffffff55;background:#2466d8aa;color:#fff;font-size:11px;font-weight:800;touch-action:none;overflow:hidden;padding:2px}