/* ---------- Modal / avisos ---------- */
#modal{position:fixed;inset:0;background:rgba(3,10,26,.62);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:80;padding:14px}
.mbox{background:linear-gradient(180deg,#16336a,#0d1f44);border:1px solid var(--edge2);border-radius:var(--r-lg);padding:22px;max-width:680px;width:100%;max-height:92vh;overflow:auto;position:relative;box-shadow:0 20px 50px #000a}
.mclose{position:absolute;right:12px;top:10px;background:none;border:0;color:#fff;font-size:24px;cursor:pointer}
/* botão ⚙ fixo no canto superior direito (acima da arena e dos modais) e o menu rápido que ele abre */
#cfgBtn{position:fixed;top:14px;right:18px;z-index:95;padding:0}
#cfgBtn.on{border-color:var(--acc2);box-shadow:0 0 0 3px rgba(69,224,210,.25),var(--shadow)}
/* configurações: janela no meio da tela com o fundo escurecido (#cfgPanel é o fundo, .cfgBox a janela) */
#cfgPanel{position:fixed;inset:0;z-index:96;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(3,10,26,.62);backdrop-filter:blur(4px)}
#cfgPanel.hidden{display:none}
.cfgBox{width:min(400px,100%);max-height:calc(100vh - 28px);overflow:auto;padding:16px 18px 18px;
  background:linear-gradient(180deg,#16336a,#0d1f44);border:1px solid var(--edge2);border-radius:var(--r-md);box-shadow:0 20px 50px #000a}
.cfgHead{gap:10px;margin-bottom:6px}
.cfgBig{width:100%;margin-top:10px;font-size:18px}
.cfgQuit{display:flex;justify-content:center;margin-top:16px}
.cfgHead{display:flex;justify-content:space-between;align-items:center;font-size:20px}
.cfgHead .mclose{position:static}
.cfgSub{margin:12px 0 6px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.cfgMore{width:100%;margin-top:14px}
.vols{display:flex;flex-direction:column;gap:8px}
.volRow{display:grid;grid-template-columns:150px 1fr 56px;align-items:center;gap:10px;font-size:16px;font-weight:700}
/* ícone de item do FireRed antes do rótulo (frIco, audio.js): 24px = o tamanho do item no GBA na escala da fonte PokeFR */
.frIco{width:24px;height:24px;margin-right:6px;vertical-align:middle;image-rendering:pixelated;flex:none}
.volRow>span,.resRow>span{display:flex;align-items:center;white-space:nowrap}
.vols>.btn{display:inline-flex;align-items:center}
/* volume como a barra de HP do FireRed: moldura escura, verde até o valor (--p, syncAudioUi) e cinza no resto */
.volRow input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;background:none;cursor:pointer}
.volRow input[type=range]::-webkit-slider-runnable-track{height:12px;border:3px solid #404040;border-radius:4px;
  background:linear-gradient(180deg,#70f8a8 0 40%,#58d080 40%) 0 0/var(--p,0%) 100% no-repeat,linear-gradient(180deg,#686878 0 40%,#505060 40%)}
.volRow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:20px;margin-top:-7px;border:3px solid #404040;border-radius:2px;background:#fbf6ee;box-sizing:border-box}
.volRow input[type=range]::-moz-range-track{height:6px;border:3px solid #404040;border-radius:4px;background:linear-gradient(180deg,#686878 0 40%,#505060 40%)}
.volRow input[type=range]::-moz-range-progress{height:6px;background:linear-gradient(180deg,#70f8a8 0 40%,#58d080 40%)}
.volRow input[type=range]::-moz-range-thumb{width:4px;height:14px;border:3px solid #404040;border-radius:2px;background:#fbf6ee}
.volRow em{font-style:normal;text-align:right;font-size:14px;color:var(--mut);font-variant-numeric:tabular-nums}
.vols>.btn{align-self:flex-start;margin-top:4px}
.vols.off .volRow{opacity:.45}
/* Configurações → Vídeo: seletor de resolução */
/* Configurações → Atalhos: ação | principal | alternativo */
.kbGrid{display:grid;grid-template-columns:1fr auto auto;gap:6px 8px;align-items:center;font-size:14px}
.kbGrid .kbHead{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.kbBtn{min-width:118px;padding:6px 10px;border-radius:9px;border:1px solid var(--edge2);background:rgba(8,20,44,.9);color:inherit;font:inherit;font-weight:800;cursor:pointer}
.kbBtn:hover{border-color:#6aa8ff}
.kbBtn.empty{color:var(--mut);font-weight:600}
.kbBtn.wait{border-color:#ffd34d;color:#ffd34d;animation:kbBlink 1s infinite}
@keyframes kbBlink{50%{opacity:.55}}
.resRow{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:10px;font-size:16px;font-weight:700}
.resRow select{width:100%;padding:7px 10px;border-radius:10px;border:1px solid var(--edge2);background:rgba(8,20,44,.9);color:inherit;font:inherit;font-size:14px;cursor:pointer}
/* resumo do fim da aventura */
.runSum h3{margin-bottom:6px}
.runLoot{display:flex;flex-wrap:wrap;gap:6px}.runLoot span{padding:4px 10px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid var(--edge);font-weight:700}
.runBonusBox{padding:10px 12px;border-radius:12px;background:rgba(255,200,61,.1);border:1px solid rgba(255,200,61,.45);margin-bottom:8px}
.runRow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 4px;border-top:1px solid var(--edge)}
.runRow canvas.pmd{width:52px;height:52px;flex:none}
.runMon{display:flex;flex-direction:column;min-width:0;flex:1 1 90px}.runMon b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.runMon small{color:var(--mut)}
.runXp{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;font-weight:700;font-size:14px;white-space:nowrap}
.runXp .runBonus{color:var(--gold)}
.runXp .runLost{color:#ff8a8a}
/* cartão de habilidade (passar o mouse em algo com data-skill) */
#skTip{position:fixed;z-index:130;pointer-events:none;width:300px;max-width:calc(100vw - 24px);background:rgba(10,24,52,.97);border:1px solid var(--edge2);border-top:3px solid var(--tc,#ffd34d);border-radius:14px;padding:12px 14px;box-shadow:0 10px 28px #000a;font-size:13.5px;line-height:1.35}
#skTip.hidden{display:none}
.skTipHead{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:16px}
.skTipHead .tag.skCat{margin-left:0!important;color:#fff!important;text-shadow:1px 1px 0 rgba(0,0,0,.35)!important}
.skTipHead .tag.skCat.phys{background:#e05838!important}
.skTipHead .tag.skCat.spec{background:#5870d0!important}
.skTipHead .tag.skTier{margin-left:0!important;color:#fff!important;text-shadow:1px 1px 0 rgba(0,0,0,.35)!important}
.skTipHead .tag.skTier.t1{background:#48a058!important}
.skTipHead .tag.skTier.t2{background:#d08820!important}
.skTipHead .tag.skTier.t3{background:#a848b8!important}
.skTipStats{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 6px;color:var(--mut)}
.skTipStats b{color:#fff}
.skTipFx{margin:6px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.skTipFx li{background:rgba(255,255,255,.05);border-radius:8px;padding:4px 8px}
.skTipFx .fxSub{display:block;margin-top:3px;color:var(--mut);font-size:12px}   /* explicação de um status (ex.: Combustão) */
.skTipDesc{margin:8px 0 0;color:#cfe0ff;font-style:italic}
[data-skill]{cursor:help}
#toasts{position:fixed;left:50%;top:14px;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:400;pointer-events:none;align-items:center}
.toast{background:rgba(14,34,72,.95);border:1px solid var(--edge2);padding:9px 18px;border-radius:14px;font-size:17px;font-weight:700;animation:tin .25s,tout .4s 4.1s forwards;box-shadow:0 8px 22px #0008}
.toast.shake{animation:tshake .35s,tout .4s 4.1s forwards}   /* aviso repetido: treme e o sumiço recomeça */
@keyframes tin{from{transform:translateY(-12px);opacity:0}}
@keyframes tout{to{opacity:0;transform:translateY(-8px)}}
/* ganho de XP (xp-pop.js): linhas empilhadas no canto, no painel claro do HUD e com a barra de XP da tela de resumo do FireRed
   (83 × 7 ampliada 6×; o miolo começa depois do "EXP", 16 px, e tem 65 px: --x). Começa abaixo do HUD do time; em janela baixa encolhe para não cobrir os botões */
#xpPops{position:fixed;left:14px;top:max(226px,calc(50% - 200px));display:flex;flex-direction:column;gap:12px;z-index:120;pointer-events:none}
.xpRow{display:flex;align-items:center;gap:16px;box-sizing:border-box;padding:8px 20px 12px 12px;border-radius:12px;background:linear-gradient(180deg,#f2f8ff,#c4dcf3);border:5px solid #25335f;
  box-shadow:inset 0 3px 0 #fff,0 5px 0 rgba(0,0,0,.4);color:#25335f;animation:xpIn .25s ease-out}
.xpRow.up{animation:xpUp .5s ease-out}
.xpRow.out,.xpHead.out{animation:xpOut .3s ease-in forwards}
.xpHead{padding:8px 20px;border-radius:12px;font-size:48px;line-height:1;white-space:nowrap;color:#f8d030;background:#3a4566;border:5px solid #25335f;text-shadow:3px 3px 0 #9a6a10;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.25),0 5px 0 rgba(0,0,0,.4);animation:xpIn .25s ease-out}
.xpIco{width:96px;height:96px;flex:none}
.xpIco canvas.pmd{display:block;width:96px;height:96px;margin:0}
.xpTop{display:flex;align-items:baseline;gap:16px;font-size:48px;line-height:1}
.xpTop b{font-weight:400;max-width:260px;white-space:nowrap;overflow:hidden}
.xpTop .xpGot{margin-left:auto;padding-left:16px;color:#2f6fd0}
.xpBar{position:relative;width:83px;height:7px;margin-top:1px;zoom:6}
.xpBar img{position:absolute;left:0;top:0;width:83px;height:7px;image-rendering:pixelated}
.xpBar .xpFill{clip-path:inset(0 calc(67px - var(--x,0px)) 0 0)}
.capBonus{position:fixed;left:50%;top:22%;z-index:130;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 34px 18px;
  border-radius:16px;background:linear-gradient(180deg,#4a5a86,#2e3a62);border:6px solid #25335f;box-shadow:0 0 0 4px #f8d030,inset 0 3px 0 rgba(255,255,255,.25),0 8px 0 rgba(0,0,0,.45);
  font-family:'PokeGBA',monospace;line-height:1;white-space:nowrap;pointer-events:none;animation:capIn .5s cubic-bezier(.2,1.6,.4,1),capGlow 1s ease-in-out .5s infinite alternate}
.capBonus b{font-size:64px;color:#f8d030;text-shadow:4px 4px 0 #9a6a10;letter-spacing:2px}
.capBonus span{display:flex;align-items:center;gap:10px;font-size:44px;color:#fff;text-shadow:3px 3px 0 #25335f}
.capBonus em{font-style:normal;color:#f8d030}
.capBonus.out{animation:capOut .3s ease-in forwards}
@keyframes capIn{from{opacity:0;transform:translateX(-50%) scale(.3)}}
@keyframes capOut{to{opacity:0;transform:translateX(-50%) scale(.8)}}
@keyframes capGlow{to{box-shadow:0 0 0 4px #fff27a,0 0 28px 8px rgba(248,208,48,.7),inset 0 3px 0 rgba(255,255,255,.25),0 8px 0 rgba(0,0,0,.45)}}
@media(max-width:700px){.capBonus{zoom:.55}}
@keyframes xpIn{from{opacity:0;transform:translateX(-48px)}}
@keyframes xpOut{to{opacity:0;transform:translateX(-48px)}}
@keyframes xpUp{0%{filter:brightness(1.5) saturate(1.4);transform:scale(1.05)}}
@media(max-height:820px){#xpPops{zoom:.75;top:300px}}
@media(max-width:700px){#xpPops{zoom:.5;left:12px;top:50%;transform:translateY(-50%)}}
.mbox:has(.starterBox){max-width:980px;overflow-x:hidden}
.starterBox{text-align:center}
.starterBox .tname{display:flex;flex-direction:column;align-items:center;gap:6px;margin:14px auto 4px;max-width:340px}
.starterBox .tname label{font-size:14px;font-weight:700;color:var(--mut)}
.starterBox .tname input{text-align:center;font-size:18px}
.starterBox .tname input.need{border-color:#ff6a5a;box-shadow:0 0 0 3px rgba(255,90,90,.25);animation:tshake .35s}
@keyframes tshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.starterBox .tnameWarn{font-size:14px;color:#ff8a7a;font-weight:700;min-height:18px;visibility:hidden}.starterBox .tnameWarn.show{visibility:visible}
/* escolha do inicial no estilo da ficha do FireRed (actions.js, starterModal): faixa no topo, quadro lilás com o
   Pokémon, rótulos cinza com valores em caixas claras, fundo amarelo listrado e a caixa de texto embaixo */
@font-face{font-family:'PokeFR';src:url(../fonts/fr.ttf) format('truetype');font-display:block}
.mbox:has(.frSum){max-width:1160px;padding:0;background:none;border:none;box-shadow:none;overflow:hidden}
/* setas gigantes dos lados da ficha (trocar de inicial): grandes e se mexendo para ninguém deixar de ver */
/* (padding: a folga do balanço das setas, frNudgeR; sem ela o .mbox cortava a borda de fora) */
.frWrap{display:flex;align-items:center;gap:14px;padding:0 8px}
.frWrap .frSum{flex:1;min-width:0;max-width:900px}
.frBig{flex:none;width:110px;height:200px;display:grid;place-items:center;cursor:pointer;padding:0;border:4px solid #303030;border-radius:14px;
  background:#3870c8;box-shadow:inset 0 0 0 4px #fff,0 6px 0 rgba(0,0,0,.35);animation:frNudgeR 0.9s ease-in-out infinite}
.frBig.l{animation-name:frNudgeL}
.frBig:hover{background:#4888e0}
.frBig:active{transform:translateY(3px);box-shadow:inset 0 0 0 4px #fff,0 3px 0 rgba(0,0,0,.35)}
.frBig i{width:56px;height:80px;background:#fff;filter:drop-shadow(4px 4px 0 #183868);clip-path:polygon(0 0,100% 50%,0 100%)}
.frBig.l i{clip-path:polygon(100% 0,0 50%,100% 100%)}
@keyframes frNudgeR{50%{translate:8px 0}}
@keyframes frNudgeL{50%{translate:-8px 0}}
/* jogo novo: BOY ou GIRL (genderModal, title.js) */
.gdBox,.gdBox *{font-family:'PokeFR','PokeGBA',monospace!important}
.gdBox{border:4px solid #303030;border-radius:8px;padding:18px 26px 22px;color:#404040;text-shadow:2px 2px 0 #d0d0c8;
  background:repeating-linear-gradient(180deg,#f8e078 0 6px,#f0d060 6px 12px);box-shadow:0 6px 0 rgba(0,0,0,.35);text-align:center}
.gdAsk{font-size:40px;line-height:1.15;padding:10px 18px;margin-bottom:18px;background:#fbf8ef;border:4px solid #303030;border-radius:8px}
.gdOpts{display:flex;gap:22px;justify-content:center}
.gdOpt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 18px 8px;border:4px solid #8878c8;border-radius:8px;background:#e8e0ff;cursor:pointer;
  color:#404040;text-shadow:2px 2px 0 #d0d0c8;transition:transform .12s}
.gdOpt img{width:192px;height:288px;object-fit:contain;object-position:bottom;image-rendering:pixelated}
.gdOpt span{font-size:34px}
.gdOpt.on{border-color:#e83828;background:#fff4d8;transform:translateY(-4px)}
.gdTxt{min-width:190px;padding:18px 24px}
.gdTxt span{font-size:44px}
/* folha do andar (16x32 por quadro, 4 quadros) a 7x: frente; a aparência marcada anda */
.gdSpr{display:block;width:112px;height:168px;background-size:448px 896px;background-position:0 -56px;background-repeat:no-repeat;image-rendering:pixelated}
.gdOpt.on .gdSpr{animation:gdWalk .7s steps(4) infinite}
@keyframes gdWalk{to{background-position:-448px -56px}}
/* as 4 aparências na largura da caixa (lookModal) */
.gdLooks{gap:12px;zoom:.88}
.gdLooks .gdOpt{padding:10px 8px 6px}
/* as 8 da Estilista do Duelo (duelLookModal): 2 fileiras de 4 */
.gdLooks8{flex-wrap:wrap;max-width:620px;margin:0 auto;zoom:.78}
/* folha de células 32x32 (PLAYER_SPR.big) a 5,6x, a mesma proporção de bigK no jogo; janela mais larga, com os pés na altura dos outros */
.gdSpr.gdBig{width:126px;background-size:716.8px 716.8px;background-position:-26.6px -12.6px}
.gdOpt.on .gdSpr.gdBig{animation-name:gdWalkBig}
@keyframes gdWalkBig{to{background-position:-743.4px -12.6px}}
.gdBack{margin-top:16px;padding:6px 18px;font-size:26px;border:4px solid #303030;border-radius:8px;background:#fbf8ef;color:#404040;text-shadow:2px 2px 0 #d0d0c8;cursor:pointer}
.gdBack:hover{background:#fff4d8}
.frSum,.frSum *{font-family:'PokeFR','PokeGBA',monospace!important}
.frSum{--fr-ink:#404040;--fr-sh:#d0d0c8;border:4px solid #303030;border-radius:8px;overflow:hidden;color:var(--fr-ink);text-shadow:2px 2px 0 var(--fr-sh);
  background:repeating-linear-gradient(180deg,#f8e078 0 6px,#f0d060 6px 12px);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.frTop{display:flex;align-items:center;gap:14px;height:52px;padding:0 14px;background:linear-gradient(90deg,#98a0a8 0 46%,#2858a8 46%);border-bottom:4px solid #303030}
.frTitle{font-size:32px;color:#fff;text-shadow:2px 2px 0 #505860;white-space:nowrap}
.frDots{display:flex;gap:8px;margin-left:auto;padding:6px 12px;border-radius:20px 0 0 20px;background:#d8d0a0;align-self:stretch;align-items:center;margin-right:-14px}
.frDots i{width:22px;height:22px;border-radius:50%;background:#2878c8;border:3px solid #fff;cursor:pointer}
.frDots i.on{background:#fff;border-color:#b8b098}
.frKeys{font-size:24px;color:#fff;text-shadow:2px 2px 0 #183868;white-space:nowrap;padding-left:22px}
.frKeys kbd{background:none;border:none;padding:0 4px 0 10px;color:#fff;font-size:24px}
.frPage{display:none}.frPage.on{display:block;animation:frIn .2s ease-out}
@keyframes frIn{from{opacity:0;transform:translateX(10px)}}
.frMid{display:grid;grid-template-columns:40% 1fr;gap:14px;padding:12px 14px 10px}
.frMon{border:4px solid #8878c8;border-radius:6px;background:#a898e8;display:flex;flex-direction:column}
.frMonHead{display:flex;gap:16px;padding:4px 12px;font-size:32px;color:var(--fr-ink);background:#c8b8f8;border-bottom:3px solid #8878c8;text-shadow:2px 2px 0 #e8e0ff}
.frMonHead b{font-weight:400}
.frScreen{position:relative;flex:1;min-height:220px;display:grid;place-items:center;margin:6px;border-radius:4px;
  background:repeating-linear-gradient(90deg,transparent 0 15px,#ececf4 15px 16px),repeating-linear-gradient(0deg,#f8f8f8 0 15px,#ececf4 15px 16px)}
.frScreen .pmd{width:180px;height:180px}
.frScreen canvas.fit{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.frBall{position:absolute;right:10px;bottom:10px;width:26px;height:26px;border-radius:50%;border:2px solid #303030;background:linear-gradient(180deg,#e83828 0 44%,#303030 44% 56%,#f8f8f8 56%)}
.frBall::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-6px 0 0 -6px;border-radius:50%;background:#f8f8f8;border:2px solid #303030}
.frStats{display:flex;flex-direction:column;gap:6px}
.frRow{display:flex;align-items:center;gap:8px}
.frLbl{flex:none;width:150px;padding:2px 0;text-align:center;font-size:24px;color:#fff;text-shadow:2px 2px 0 #303030;background:#686868;border:2px solid #484848;border-radius:14px}
.frVal{flex:1;min-width:0;padding:1px 12px;font-size:32px;line-height:1.1;text-align:right;background:#f8f8e8;border-radius:4px}
.frTypes,.frSk{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;font-size:20px;text-shadow:none}
.frSk .skc{display:flex;align-items:center;gap:6px}
.frHp{display:flex;align-items:center;justify-content:flex-end;margin:-4px 0 2px}
.frHp i{font-style:normal;font-size:16px;color:#f8f8f8;text-shadow:none;background:#f08030;border:2px solid #484848;border-right:none;border-radius:6px 0 0 6px;padding:0 6px;line-height:16px}
.frHp span{width:55%;height:12px;padding:2px;background:#484848;border-radius:0 6px 6px 0}
.frHp b{display:block;height:100%;background:linear-gradient(180deg,#70f8a8 0 50%,#58d080 50%);border-radius:2px}
.frBot{display:flex;flex-direction:column;gap:6px;padding:10px 14px 12px;border-top:4px solid #e8b838;background:repeating-linear-gradient(180deg,#f8e8a0 0 6px,#f8e090 6px 12px)}
.frBot .frVal{text-align:left;justify-content:flex-start}
.frDesc{padding:8px 14px;font-size:28px;line-height:1.15;background:#f8f8f8;border:3px solid #d8d0b0;border-radius:6px}
.frFoot{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#2858a8;border-top:4px solid #303030;color:#fff;text-shadow:2px 2px 0 #183868;font-size:20px}
.frFoot span{flex:1;text-align:center}
.frArrow,.frPick{cursor:pointer;color:#fff;text-shadow:2px 2px 0 #183868;border:3px solid #fff;border-radius:8px;background:#3870c8;font-size:24px;padding:2px 12px}
.frArrow:hover,.frPick:hover{background:#4888e0}
.frSide{position:absolute;top:50%;z-index:4;width:76px;height:190px;margin-top:-95px;padding:0;font-size:38px;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.9;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.frSide:hover{opacity:1}
.frSide::before{content:'';border:solid transparent;border-width:26px 0 26px 34px;border-left-color:#fff;filter:drop-shadow(3px 3px 0 #183868)}
.frSide.l::before{border-width:26px 34px 26px 0;border-color:transparent #fff transparent transparent}
.frSide.l{left:8px}
.frSide.r{right:8px}
.frPick{background:#e83828;text-shadow:2px 2px 0 #801810;font-size:28px;padding:4px 18px}
.frPick:hover{background:#f85040}
@media (max-width:720px){ .frMid{grid-template-columns:1fr} .frKeys,.frFoot span{display:none} .frLbl{width:110px;font-size:20px}
  .frWrap{gap:6px} .frBig{width:56px;height:130px} .frBig i{width:30px;height:46px} .frFoot{justify-content:flex-end} }
/* detalhe do Pokémon (views.js, monDetail): a ficha do FireRed em 240×160 (.frS, peças de pixelart/gba/frlg/resumo),
   ampliada inteira por --k (frFit). Cada caixa (.frB) fica no pixel dela; a fonte PokeFR em 16px = 1 pixel do GBA */
.mbox:has(.frHub){max-width:960px;width:96vw;padding:0;background:none;border:none;box-shadow:none;overflow:hidden}
.mbox:has(.frHub) .mclose{z-index:3;color:#fff;background:none;border:none;font-size:28px;top:4px;right:8px;text-shadow:2px 2px 0 #183868}
.frHub,.frHub *{font-family:'PokeFR','PokeGBA',monospace!important}
.frHub{border-radius:8px;overflow:hidden;box-shadow:0 6px 0 rgba(0,0,0,.35);--fr-ink:#404040;--fr-sh:#d8d8c0}
.frHubArt{position:relative;aspect-ratio:3/2;overflow:hidden;background:#000}
.frS{position:absolute;left:0;top:0;width:240px;height:160px;transform:scale(var(--k,4));transform-origin:0 0;overflow:hidden;
  color:var(--fr-ink);font-size:16px;line-height:1;text-shadow:1px 1px 0 var(--fr-sh);-webkit-font-smoothing:none;user-select:none}
.frS .frPc{position:absolute;display:block;image-rendering:pixelated;pointer-events:none}
.frS .frB{position:absolute;display:flex;align-items:center;box-sizing:border-box;white-space:nowrap;overflow:hidden;margin:0;padding:0;pointer-events:none}
.frS .frB b{font-weight:400}
.frS .frStatHit{position:absolute;left:124px;width:112px;height:13px;cursor:help}
.frS .frR{justify-content:flex-end}
.frS .frPl{justify-content:center;overflow:visible;color:#f8f8f8;text-shadow:1px 0 0 #788090,-1px 0 0 #788090,0 1px 0 #788090,0 -1px 0 #788090}
.frS .frPl.frUp{text-shadow:1px 0 0 #d83828,-1px 0 0 #d83828,0 1px 0 #d83828,0 -1px 0 #d83828}
.frS .frPl.frDn{text-shadow:1px 0 0 #2860d0,-1px 0 0 #2860d0,0 1px 0 #2860d0,0 -1px 0 #2860d0}
.frS .frTt{color:#f8f8f8;text-shadow:1px 1px 0 #a09870}
.frS .frKy{justify-content:flex-end;text-shadow:1px 1px 0 #183868}
.frS .frHd{gap:6px;color:#f8f8f8;text-shadow:1px 1px 0 #706090}
.frS .frHd b{flex:1}
.frS .frHd .gender{font-size:16px;text-shadow:none}
.frS .frWr{white-space:normal;line-height:13px;text-align:center;justify-content:center}
.frS .frItem{pointer-events:auto;cursor:pointer;border:none;background:none;color:inherit;text-shadow:inherit;padding:0 2px;font-size:16px;justify-content:flex-start}
.frS .frItem:hover{background:rgba(255,255,255,.6)}
/* camadas: fundo · corpo · janela · lado dos golpes · cursor · faixa do topo */
.frS .frBody{position:absolute;left:0;top:16px;width:240px;height:144px}
.frS .frWin{position:absolute;left:0;top:16px;width:121px;height:84px}
.frS .frSpr{position:absolute;left:28px;top:17px;width:64px;height:64px;display:flex;align-items:flex-end;justify-content:center}
.frS .frSpr>*{width:64px;height:64px;image-rendering:pixelated}
.frS .frSide{position:absolute;left:0;top:16px;display:none}
.frS .frMini{position:absolute;left:0;top:0;width:121px;height:35px;cursor:pointer}
.frS .frInfo{position:absolute;left:0;top:33px;width:121px;height:111px}
.frS .frCur{display:none;left:120px;top:calc(16px + var(--cy,3px));transition:top .08s steps(2)}
.frS.sel .frSide,.frS.unsel .frSide,.frS.sel .frCur{display:block}
.frS.sel .frWin{transform:translateX(-124px)}
.frS .frBar{position:absolute;left:0;top:0;width:240px;height:16px}
/* golpes: cada linha é um botão no lugar da caixa clara da lista */
.frS .frSlot{position:absolute;left:128px;width:110px;height:22px;padding:0;border:none;background:none;color:inherit;text-shadow:inherit;font-size:16px;cursor:pointer}
.frS .frSlot:hover{background:rgba(255,255,255,.55)}
.frS .frSlot.skLock{opacity:.55}
.frS .frSlot[data-i]:not(.skLock){touch-action:none}
.frS .frSlot.frDrag{z-index:5;cursor:grabbing;background:#f8f8f8;box-shadow:0 0 0 1px #3068c0}
.frS .frSlot.frDrop{background:rgba(88,168,248,.5)}
.frS .frSm{color:#707070}
.frS .frPp{color:#3068c0}
.frS .frKey kbd{font-size:16px;line-height:9px;padding:0 2px;border:1px solid #a0a8b0;border-bottom-width:2px;border-radius:2px;background:#f8f8f8;text-shadow:none;color:#404040}
.frS .frEff{display:block;white-space:normal;line-height:14px;overflow-y:auto;scrollbar-width:none;pointer-events:auto}
.frS .frEff::-webkit-scrollbar{display:none}
.frS .frEff i{font-style:normal;color:#808080}
.frS .frCam{position:absolute;transform:scale(.5);transform-origin:0 0}
/* barra de EXP: a cheia por cima da vazia, cortada no tamanho da EXP (--x: 0 a 65 pixels da barra) */
.frS .frExp{position:absolute;width:83px;height:7px}
.frS .frExpF{clip-path:inset(0 calc(67px - var(--x)) 0 0)}
.frS .frPas{display:block}
.frS .frPas span{display:inline-block}
.frS .frPas.run span{animation:frRun 7s 1s steps(90) infinite alternate}
@keyframes frRun{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(var(--dx))}}

/* ---- animações ---- */
/* abrir: a faixa corre, a janela entra pela esquerda e o Pokémon pula */
.frS.open .frWin{animation:frWinIn .26s steps(8) both}
.frS.open .frSpr>*{animation:frHop .5s .3s steps(10) both}
@keyframes frWinIn{from{transform:translateX(-124px)}to{transform:none}}
@keyframes frHop{0%,100%{transform:none}30%{transform:translateY(-8px)}55%{transform:none}75%{transform:translateY(-3px)}}
/* faixa do topo nova: varre da esquerda (ou da direita, voltando) por cima da velha */
.frS .frBar.wipe{animation:frWipe .2s steps(10) both}
.frS .frBar.wipe.back{animation-name:frWipeB}
@keyframes frWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes frWipeB{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
/* corpo: o novo empurra o velho (16 pixels por quadro, como a rolagem do GBA) */
.frS .frBody.in-r{animation:frInR .25s steps(15) both}
.frS .frBody.in-l{animation:frInL .25s steps(15) both}
.frS .frBody.out-l{animation:frOutL .25s steps(15) both}
.frS .frBody.out-r{animation:frOutR .25s steps(15) both}
@keyframes frInR{from{transform:translateX(240px)}to{transform:none}}
@keyframes frInL{from{transform:translateX(-240px)}to{transform:none}}
@keyframes frOutL{to{transform:translateX(-240px)}}
@keyframes frOutR{to{transform:translateX(240px)}}
/* entrada de cada página (só quando ela chega, .enter): INFO e STATUS: valores aparecem da esquerda, um por um, e os
   tipos caem; STATUS: a barra de EXP enche; GOLPES: as linhas entram pela direita, uma por uma */
.frS .frBody.enter .frV{animation:frType .18s calc(.26s + var(--i,0)*.06s) steps(6) both}
.frS .frBody.enter .frR.frV{animation-name:frTypeR}
@keyframes frType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes frTypeR{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
.frS .frBody.enter .frTy{animation:frDrop .3s calc(.3s + var(--i,0)*.08s) steps(6) both}
@keyframes frDrop{0%{transform:translateY(-10px);opacity:0}60%{transform:translateY(2px);opacity:1}100%{transform:none}}
.frS .frBody.enter .frExpF{animation:frExpUp .6s .45s steps(20) both}
@keyframes frExpUp{from{clip-path:inset(0 67px 0 0)}}
.frS .frBody.enter .frSlot{animation:frSlotIn .2s calc(.26s + var(--i,0)*.07s) steps(6) both}
.frS .frBody.enter .frSlot .frTy{animation:none}
@keyframes frSlotIn{from{transform:translateX(124px)}to{transform:none}}
/* detalhes do golpe: a janela sai pela esquerda, a janelinha desce, a caixa de baixo sobe e o cursor pisca ao chegar;
   fechando, o contrário */
.frS.sel.anim .frWin{animation:frWinOut .2s steps(6) both}
.frS.sel.anim .frMini{animation:frMiniIn .2s .08s steps(6) both}
.frS.sel.anim .frInfo{animation:frInfoIn .22s .1s steps(8) both}
.frS.sel .frCur{animation:frBlink .5s steps(2) 2}
.frS.unsel.anim .frWin{animation:frWinIn .2s .08s steps(6) both}
.frS.unsel .frMini{animation:frMiniIn .16s steps(5) reverse both}
.frS.unsel .frInfo{animation:frInfoIn .16s steps(6) reverse both}
.frS .frSide .frEff,.frS .frSide .frT{animation:frFade .12s steps(3) both}
@keyframes frWinOut{from{transform:none}to{transform:translateX(-124px)}}
@keyframes frMiniIn{from{transform:translateY(-36px)}to{transform:none}}
@keyframes frInfoIn{from{transform:translateY(112px)}to{transform:none}}
@keyframes frBlink{50%{opacity:0}}
@keyframes frFade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){ .frS *{animation-duration:.01s!important;animation-delay:0s!important} }
/* escolha de habilidade ao subir de nível (actions.js, showLearn) na ficha do FireRed (.frSum): quadro lilás com quem
   aprende à esquerda, as opções em cartões claros com a faixa da cor do tipo, a caixa de texto e a faixa azul dos botões */
/* a janela nunca passa da tela: título, explicação e botões ficam sempre à vista; só os cartões (e o quadro lilás) rolam */
.lnFr{position:relative;display:flex;flex-direction:column;max-height:calc(92vh - 6px)}
.lnFr>:is(.frTop,.frBot,.frFoot){flex:none}
.lnFr .frBot{max-height:24vh;overflow-y:auto;padding:6px 14px}
.lnFr .frDesc{padding:4px 12px;font-size:22px}
.lnFr .frKeys{margin-left:auto}
.lnMid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:250px 1fr;grid-template-rows:minmax(0,1fr);gap:14px;padding:12px 14px 10px;align-items:stretch}
.lnMon{min-height:0;overflow-y:auto}
.lnMon .frMonHead{gap:10px;font-size:24px}
.lnMon .frScreen{flex:none;min-height:160px}
.lnMon .frScreen :is(img,canvas,.pmd){width:128px;height:128px;object-fit:contain;image-rendering:pixelated}
.lnTags{position:absolute;left:6px;bottom:6px;display:flex;gap:4px;text-shadow:none}
.lnTags .type{font-size:16px;padding:2px 6px}
.lnSk{display:flex;flex-direction:column;gap:6px;padding:4px 6px 8px}
.lnRow{display:flex;align-items:center;gap:8px;padding:2px 8px;font-size:24px;line-height:1.1;background:#f8f8e8;border-radius:4px}
.lnRow kbd{font-size:16px;text-shadow:none}
.lnRow.new{background:#e8e0ff;color:#8878c8;text-shadow:2px 2px 0 #fff;animation:lnBlink 1.2s steps(2) infinite}
@keyframes lnBlink{50%{background:#fff4d8}}
/* troca depois do Nv 20: os 4 golpes viram botões; o marcado para esquecer fica riscado em vermelho */
.lnRow.lnForget{font:inherit;font-size:24px;color:inherit;text-shadow:inherit;text-align:left;border:3px solid #d8d0b0;cursor:pointer}
.lnRow.lnForget:hover{background:#fff4d8}
.lnRow.lnForget.just{background:#d8f8d0;border-color:#48b048;color:#287828}
.lnDone{color:#287828}
.lnRow.lnForget.sel{background:#ffd8d0;border-color:#e83828;color:#c03028;text-decoration:line-through}
.lnOpts{min-height:0;overflow-y:auto;padding:6px 4px 8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;align-items:stretch;align-content:start}
.lnFr .learnWrap{position:relative;display:flex}
.lnFr .learnOpt{width:100%;display:flex;flex-direction:column;justify-content:flex-start;padding:8px 10px 10px;text-align:left;cursor:pointer;color:var(--fr-ink);text-shadow:2px 2px 0 var(--fr-sh);font-size:20px;line-height:1.1;
  background:#f8f8e8;border:4px solid #303030;border-top:10px solid var(--tc,#f8d030);border-radius:8px;box-shadow:0 4px 0 rgba(0,0,0,.3);transition:transform .12s}
.lnFr .learnOpt:hover{background:#fff;transform:translateY(-3px)}
/* opção selecionada (falta o Confirmar): borda vermelha como a escolha de BOY/GIRL, fundo creme e um pouco mais alta */
.lnFr .learnOpt.sel{border-color:#e83828;border-top-color:var(--tc,#f8d030);background:#fff4d8;transform:translateY(-4px);box-shadow:0 0 0 3px #f8d030,0 6px 0 rgba(0,0,0,.3)}
.lnFr .learnOpt .skTipHead{gap:6px;padding-right:84px;min-height:34px;flex-wrap:wrap;row-gap:4px;font-size:20px}
.lnFr .learnOpt .skTipHead b{font-size:32px;line-height:1;font-weight:400;text-transform:uppercase}
.lnFr .learnOpt .skTipHead :is(.type,.tag){font-size:16px;padding:2px 6px;line-height:1.1;text-shadow:none}
.lnFr .learnOpt .skTipStats{gap:2px 12px;margin:6px 0;color:#707070}
.lnFr .learnOpt .skTipStats b{font-weight:400;color:var(--fr-ink)}
.lnFr .learnOpt .skTipFx{gap:4px;margin:6px 0}
.lnFr .learnOpt .skTipFx li{padding:3px 6px;background:#fff;border:2px solid #d8d0b0;border-radius:6px}
.lnFr .learnOpt .skTipFx li b{font-weight:400;color:#c03028}
.lnFr .learnOpt .skTipFx .fxSub{font-size:16px;color:#787878}
.lnFr .learnOpt .skTipDesc{margin:6px 0 0;font-style:normal;color:#687088}
/* câmera (assistir) e cadeado (manter no novo sorteio) no canto de cima de cada cartão */
.lnFr :is(.learnCam,.lockBtn){position:absolute;top:16px;height:32px;margin:0;padding:0;display:grid;place-items:center;line-height:1;cursor:pointer;
  background:#fff;border:3px solid #303030;border-radius:6px}
.lnFr .learnCam{right:46px;width:38px}
.lnFr .learnWrap:not(:has(.lockBtn)) .learnCam{right:10px}
.lnFr .learnCam .camIco{width:28px;height:17px}
.lnFr .lockBtn{right:10px;width:32px;font-size:16px}
.lnFr :is(.learnCam,.lockBtn):hover{background:#fff4d8}
.lnFr .lockBtn.on{background:#f8d030}
.lnFr .frFoot button:disabled{opacity:.5;cursor:default;filter:grayscale(.6)}
.lnFr .frFoot :is([data-a="learnReroll"],[data-a="learnSkip"]).ask{background:#f8d030;color:#404040;text-shadow:2px 2px 0 #f8f0c0}
/* entrada (.lvAnim): a caixa pula para a tela, raios de luz giram atrás do título, que brilha, e os cartões chegam um a
   um de baixo */
.mbox:has(.lnFr.lvAnim){animation:lvBox .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes lvBox{from{transform:scale(.55);opacity:0}}
.lnFr .lvRays{position:absolute;left:130px;top:-180px;width:420px;height:420px;margin-left:-210px;pointer-events:none;opacity:0;z-index:2;
  background:repeating-conic-gradient(rgba(255,226,122,.45) 0 10deg,transparent 10deg 30deg);border-radius:50%;
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 65%);mask:radial-gradient(circle,#000 20%,transparent 65%)}
.lnFr.lvAnim .lvRays{animation:lvRays 1.6s ease-out .1s}
@keyframes lvRays{0%{opacity:0;transform:scale(.4) rotate(0)}25%{opacity:1}100%{opacity:0;transform:scale(1.1) rotate(60deg)}}
.lnFr.lvAnim .frTitle{animation:lnTitle .9s .15s both}
@keyframes lnTitle{0%{transform:scale(.6);opacity:0}45%{transform:scale(1.12);opacity:1;text-shadow:0 0 14px #ffe27a,2px 2px 0 #505860}}
.lnFr.lvAnim .learnWrap{animation:lvCard .45s cubic-bezier(.2,1.3,.4,1) both}
.lnFr.lvAnim .learnWrap:nth-child(1){animation-delay:.35s}.lnFr.lvAnim .learnWrap:nth-child(2){animation-delay:.5s}.lnFr.lvAnim .learnWrap:nth-child(3){animation-delay:.65s}
@keyframes lvCard{from{transform:translateY(60px) scale(.85);opacity:0}}
/* tela estreita: quadro e cartões um embaixo do outro, rolando juntos */
@media (max-width:760px){ .lnMid{grid-template-columns:1fr;grid-template-rows:none;overflow-y:auto} .lnMon,.lnOpts{overflow:visible} .lnFr .frFoot{flex-wrap:wrap} }
.frHub .frFoot{flex-wrap:wrap}
.frHub .frFoot button:disabled{opacity:.5;cursor:default}
input[type=text],input[type=number],textarea{font:inherit;font-size:17px;background:rgba(3,10,26,.7);color:#fff;border:1px solid var(--edge2);border-radius:12px;padding:9px 12px;width:100%}
label.chk{display:flex;gap:10px;align-items:center;cursor:pointer;margin:6px 0}
/* evolução no estilo FireRed (showEvolution, views.js): tela cheia, fundo escuro com raios girando, silhuetas
   trocando, clarão branco, caixa de texto da batalha embaixo e a janela de atributos (como a de subir de nível).
   Letra e Pokémon medidos pela janela (vw/vh), para nada cortar em tela larga, baixa ou de celular */
.mbox:has(.evoScr){max-width:none;width:auto;padding:0;background:none;border:none;box-shadow:none;overflow:visible}
.evoScr,.evoScr *{font-family:'PokeFR','PokeGBA',monospace!important}
.evoScr{position:fixed;inset:0;overflow:hidden;
  background:#1c1a5a;font-size:min(4.4vw,7vh)}
/* fundo: galáxia em espiral pixel art (ChatGPT, pixel-snap 239x135: pixelart/gba/evo_fundo.png), ampliada sem suavizar,
   miolo atrás do Pokémon, bordas escurecidas; respira devagar e escurece enquanto o Pokémon é silhueta branca (glow),
   senão a silhueta some no miolo claro */
.evoScr:before{content:'';position:absolute;inset:-4%;
  background:radial-gradient(ellipse at 50% 42%,transparent 40%,rgba(8,6,30,.7) 100%),url(../pixelart/gba/evo_fundo.png) center 42%/cover no-repeat;
  image-rendering:pixelated;filter:brightness(.72) saturate(1.1);transition:filter .9s;animation:evoBreath 7s ease-in-out infinite alternate}
.evoScr.glow:before{filter:brightness(.38) saturate(1.4)}
@keyframes evoBreath{from{transform:scale(1)}to{transform:scale(1.04)}}
/* quadrado maior que a diagonal da tela (vmax), para os cantos nunca aparecerem enquanto gira */
.evoSky{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax;opacity:0;transition:opacity .9s;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(150,200,255,.11) 0 6deg,transparent 6deg 18deg);animation:evoSpin 9s linear infinite}
.evoScr.glow .evoSky{opacity:1}
@keyframes evoSpin{to{transform:rotate(360deg)}}
.evoMon{position:absolute;left:50%;top:37%;width:min(90vw,62vh);aspect-ratio:1;transform:translate(-50%,-50%);transition:left .4s}
.evoScr.done .evoMon{left:35%}
.evoFig{position:absolute;inset:0;transition:transform var(--sw,.3s) ease-in-out,filter .9s,opacity .3s}
.evoFig .pmd{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.evoFig.small{transform:scale(0)}
.evoFig.white{filter:brightness(0) invert(1) drop-shadow(0 0 10px #9fd8ff)}
.evoFig.gone{opacity:0}
.evoSp{position:absolute;left:50%;top:50%;width:1.6vmin;height:1.6vmin;margin:-.8vmin;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  filter:drop-shadow(0 0 4px #8fd0ff);pointer-events:none}
.evoFlash{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .25s;pointer-events:none}
.evoScr.flash .evoFlash{opacity:1}
.evoBox{position:absolute;left:1.5%;right:1.5%;bottom:2%;height:25%;display:flex;align-items:flex-start;gap:3%;padding:1.6% 3%;border-radius:10px;
  background:#283850;border:5px solid #f8f8f8;box-shadow:0 0 0 4px #d06040,0 0 0 7px #303030}
.evoBox p{margin:0;flex:1;color:#f8f8f8;text-shadow:3px 3px 0 #686878;line-height:1.12;white-space:pre-line}
.evoBox .nx{display:inline-block;margin-left:.3em;color:#f86040;font-size:.7em;animation:csNx .7s infinite alternate}
.evoOk{align-self:flex-end;font:inherit;font-size:.85em;padding:.15em .8em .15em 1.4em;position:relative;cursor:pointer;color:#404040;text-shadow:2px 2px 0 #d0d0c8;
  background:#fbf8ef;border:4px solid #303030;border-radius:8px;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.evoOk:before{content:'▶';position:absolute;left:.4em;color:#e05038}
.evoOk:hover{background:#ffe9a6}
.evoStats{position:absolute;right:2%;top:3%;display:grid;grid-template-columns:auto auto auto;gap:.1em .7em;align-items:center;padding:.4em .8em;font-size:.72em;
  color:#404040;text-shadow:2px 2px 0 #d0d0c8;background:#f8f8f8;border:4px solid #303030;border-radius:8px;box-shadow:inset 0 0 0 3px #a8b8d8,0 4px 0 rgba(0,0,0,.35);
  opacity:0;transform:translateX(30px);transition:all .3s}
.evoScr.done .evoStats{opacity:1;transform:none}
.evoStats b{text-align:right;font-weight:normal}
.evoStats i{font-style:normal;color:#e05038}
.evoStats i.down{color:#3868c8}
@media (max-width:640px){ .evoMon{top:30%;width:min(60vw,50vh)} .evoStats{font-size:.6em} }
.capsule{width:72px;height:72px;margin:10px auto;display:block}
.capsule.shake{animation:shake .5s 3}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-20deg)}75%{transform:rotate(20deg)}}
/* Troca de habilidades: painel ao lado do detalhe do Pokémon (#skPanel, dentro do #modal) */
#modal{gap:14px}
#skPanel{max-width:380px;flex:0 0 380px;align-self:stretch;max-height:92vh}
.swapSlots{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.swapSlot{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;border:1px solid var(--edge);background:rgba(8,20,44,.7);font-weight:700;text-align:left}
.swapSlot.on{border:2px solid var(--acc2);background:rgba(25,90,120,.6)}
.swapSlot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swapList{display:flex;flex-direction:column;gap:5px}
.swapOpt{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:11px;border:1px solid var(--edge);background:rgba(8,20,44,.55);text-align:left}
.swapOpt:hover{border-color:var(--edge2);background:rgba(20,45,90,.7)}
.swapOpt b{flex:1}
.swapOpt.cur{border-color:#ffd34d}
@media (max-width:1000px){ #modal{flex-wrap:wrap;overflow:auto;align-content:flex-start} #skPanel{flex:1 1 100%;max-width:680px} }