/* Pokémon Arena · interface de batalha no estilo do UI Lab (pixel art minimalista). Somente apresentação:
   mesmos elementos/IDs/JS do HUD existente (src/battle-hud.js); este arquivo carrega por último e substitui gradientes, brilhos
   e tipografia por superfícies chapadas, bordas de 2px, "placas" de sombra dura e a fonte Jersey 10. Remover o <link> volta ao visual anterior. */
body.in-battle{--bt-panel:#0b2840;--bt-panel2:#103550;--bt-line:#2b6d8c;--bt-soft:#1b4a66;--bt-shade:#031019;--bt-ink:#eaf6ff;--bt-ink2:#a9c8dc;--bt-ink3:#6f98b0;--bt-cyan:#38c9f3;--bt-yellow:#ffd83a;--bt-green:#2fd36b;--bt-red:#ee4a3c;--bt-pixel:ArenaPixel,'Jersey 10',ui-monospace,monospace;--bt-ol:#16181f}
/* contorno duro de texto (como nos cards de habilidade) */
html body.in-battle #battle .bt-outline,html body.in-battle #battle :is(.battle-health>span,.battle-name,#match-time){text-shadow:2px 0 var(--bt-ol),-2px 0 var(--bt-ol),0 2px var(--bt-ol),0 -2px var(--bt-ol),2px 2px var(--bt-ol),-2px -2px var(--bt-ol),-2px 2px var(--bt-ol),2px -2px var(--bt-ol)}

/* ---------- cores de tipo chapadas ---------- */
html body.in-battle #battle .battle-types>[data-type=fire]{--badge:#e72b20!important}html body.in-battle #battle .battle-types>[data-type=water]{--badge:#0769e8!important}
html body.in-battle #battle .battle-types>[data-type=electric]{--badge:#f5c900!important;color:#2a2000!important}html body.in-battle #battle .battle-types>[data-type=grass]{--badge:#10ac37!important}
html body.in-battle #battle .battle-types>[data-type=ice]{--badge:#20bedc!important}html body.in-battle #battle .battle-types>[data-type=psychic]{--badge:#e41b91!important}
html body.in-battle #battle .battle-types>[data-type=poison]{--badge:#9827c4!important}html body.in-battle #battle .battle-types>[data-type=dragon]{--badge:#5838dd!important}
html body.in-battle #battle .battle-types>[data-type=fighting]{--badge:#b83d25!important}html body.in-battle #battle .battle-types>[data-type=flying]{--badge:#657dd9!important}
html body.in-battle #battle .battle-types>[data-type=steel]{--badge:#607b91!important}html body.in-battle #battle .battle-types>[data-type=rock]{--badge:#8b6a2d!important}
html body.in-battle #battle .battle-types>[data-type=ground]{--badge:#bb741b!important}html body.in-battle #battle .battle-types>[data-type=bug]{--badge:#809b0b!important}
html body.in-battle #battle .battle-types>[data-type=normal]{--badge:#626e7b!important}html body.in-battle #battle .battle-types>[data-type=ghost]{--badge:#67408d!important}
html body.in-battle #battle .battle-types>[data-type=dark]{--badge:#4b4760!important}
/* cor do tipo principal para a faixa superior do painel */
#battle .battle-fighter{--bt-tc:#626e7b}
#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=fire]){--bt-tc:#e72b20}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=water]){--bt-tc:#0769e8}
#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=electric]){--bt-tc:#f5c900}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=grass]){--bt-tc:#10ac37}
#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=ice]){--bt-tc:#20bedc}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=psychic]){--bt-tc:#e41b91}
#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=poison]){--bt-tc:#9827c4}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=dragon]){--bt-tc:#5838dd}
#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=fighting]){--bt-tc:#b83d25}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=flying]){--bt-tc:#657dd9}
#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=steel]){--bt-tc:#607b91}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=rock]){--bt-tc:#8b6a2d}
#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=ground]){--bt-tc:#bb741b}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=bug]){--bt-tc:#809b0b}
#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=ghost]){--bt-tc:#67408d}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=dark]){--bt-tc:#4b4760}

/* ---------- HUD compacto do lutador: sem "card" grande; peças soltas e pequenas ---------- */
html body.in-battle #battle .battle-top>.battle-fighter,html body.in-battle #battle .battle-top>.battle-fighter.enemy{max-width:370px;grid-template-columns:60px minmax(0,1fr);gap:4px 8px;padding:0;background:none;background-image:none;border:0;border-radius:0;box-shadow:none;color:var(--bt-ink)}
/* retrato: card pixel com recorte ampliado (só parte do Pokémon, sem a figura inteira) */
html body.in-battle #battle .battle-portrait{display:block;position:relative;width:60px;height:60px;overflow:hidden;border:2px solid var(--bt-line);border-radius:6px;background:#0a2236;box-shadow:inset 0 3px 0 var(--bt-tc),0 3px 0 var(--bt-shade)}
html body.in-battle #battle .battle-portrait:after{display:none}
html body.in-battle #battle .battle-portrait canvas{position:absolute;inset:0;width:100%;height:100%;transform:scale(1.85);transform-origin:50% 34%;image-rendering:pixelated}
html body.in-battle #battle .battle-heading{display:flex;align-items:center;gap:6px;padding:0;margin:2px 0 5px;border:0}
html body.in-battle #battle .battle-top .battle-name{font:400 30px/.85 var(--bt-pixel);font-style:normal;letter-spacing:.4px;text-transform:uppercase;color:var(--bt-ink)}
html body.in-battle #battle .battle-types{margin:0;gap:3px;flex:none}
html body.in-battle #battle .battle-types>span{display:inline-flex;align-items:center;padding:2px 5px 0;border-radius:3px;background:var(--badge);background-image:none;box-shadow:0 2px 0 var(--bt-shade);color:#fff;font:400 13px/1 var(--bt-pixel);letter-spacing:.4px;text-shadow:1px 1px 0 #0007}
html body.in-battle #battle .battle-types svg{display:none}
html body.in-battle #battle .battle-types b{font:inherit;color:inherit}
html body.in-battle #battle .battle-level{display:none}
/* vida: barra chapada com borda escura; cor em degraus (src/health-display.js) */
html body.in-battle #battle .battle-health{height:18px;border:2px solid var(--bt-shade);border-radius:4px;background:#041321;box-shadow:0 2px 0 var(--bt-shade)}
html body.in-battle #battle .battle-health i{background-image:none!important;box-shadow:none;transition:width .18s steps(8,end)}
html body.in-battle #battle .battle-health>span{padding:2px 6px 0;font:400 17px/1 var(--bt-pixel);letter-spacing:.5px;color:#fff}
/* esquivas: 3 segmentos finos */
html body.in-battle #battle .battle-dodge{margin:6px 0 0;gap:6px}
html body.in-battle #battle .battle-dodge-charges{gap:4px;padding:0;background:none;border:0;border-radius:0}
html body.in-battle #battle .battle-dodge-charges>span{height:6px;border-radius:1px;background:#041321;box-shadow:0 0 0 1px var(--bt-shade)}
html body.in-battle #battle .battle-dodge-charges i{border-radius:0;background:var(--bt-cyan);box-shadow:none}
html body.in-battle #battle .battle-dodge-charges i.recharging{background:#1f7fa0}
html body.in-battle #battle .battle-dodge small{display:none}
/* rótulo VOCÊ / RIVAL no fim da fileira da equipe */
html body.in-battle #battle .battle-roster{right:0;left:auto;top:auto;bottom:0;margin:0;opacity:1;background:#031019cc;padding:2px 6px 0;border-radius:3px}
html body.in-battle #battle .enemy .battle-roster{right:auto;left:0}
html body.in-battle #battle .battle-trainer b{font:400 14px/1 var(--bt-pixel);font-style:normal;letter-spacing:1.5px;color:var(--bt-ink2);text-shadow:none}
html body.in-battle #battle .battle-status{top:auto;bottom:3px;right:64px;left:auto;font:400 15px/1 var(--bt-pixel);letter-spacing:.5px;color:var(--bt-yellow);text-shadow:2px 0 var(--bt-ol),-2px 0 var(--bt-ol),0 2px var(--bt-ol),0 -2px var(--bt-ol)}

/* ---------- equipe: miniaturas pequenas ---------- */
html body.in-battle #battle .battle-team-cards{grid-template-columns:repeat(var(--team-count,6),30px);justify-content:start;gap:3px;padding:0;margin:0;border:0;border-radius:0;background:none}
html body.in-battle #battle .enemy .battle-team-cards{justify-content:start}
html body.in-battle #battle .battle-team-card{aspect-ratio:1;padding:1px 1px 6px;border:2px solid var(--bt-soft);border-radius:4px;background:#0a2236e8;box-shadow:0 2px 0 var(--bt-shade);transition:transform .12s,border-color .12s,background .12s}
html body.in-battle #battle .battle-team-card:not(:disabled):hover{transform:translateY(-2px);border-color:var(--bt-line);background:var(--bt-panel2)}
html body.in-battle #battle .battle-team-card:not(:disabled):active{transform:translateY(1px)}
html body.in-battle #battle .battle-team-card.active{border-color:var(--bt-yellow);border-radius:4px;background:#16415f;box-shadow:0 2px 0 var(--bt-shade);animation:none}
html body.in-battle #battle .battle-team-card.active:before{display:none}
html body.in-battle #battle .battle-team-card.fainted{opacity:.4;filter:grayscale(1)}
html body.in-battle #battle .team-card-hp{left:3px;right:3px;bottom:2px;height:3px;border-radius:0;background:#041321;box-shadow:none}
html body.in-battle #battle .team-card-hp i{transition:width .18s steps(6,end)}
html body.in-battle #battle .battle-team-card.active .team-card-hp{box-shadow:none}

/* ---------- relógio ---------- */
html body.in-battle #battle .battle-top>.match-clock{width:92px;padding:6px 4px 5px;background:var(--bt-panel);border:2px solid var(--bt-line);border-radius:8px;box-shadow:0 4px 0 var(--bt-shade)}
html body.in-battle #battle .battle-top>.match-clock>span{font:400 36px/.9 var(--bt-pixel);letter-spacing:1px;color:var(--bt-yellow)}
html body.in-battle #battle .battle-top>.match-clock small{display:block;margin-top:3px;font:400 14px/1 var(--bt-pixel);letter-spacing:1.5px;color:var(--bt-ink3)}

/* ---------- Opções / Pausar / Sair ---------- */
html body.in-battle #battle #battle-controls{gap:6px}
html body.in-battle #battle #battle-controls .small-button,html body.in-battle #battle .battle-options summary{margin:0;padding:3px 10px 1px;min-height:26px;background:var(--bt-panel2);border:2px solid var(--bt-shade);border-radius:6px;box-shadow:0 3px 0 var(--bt-shade);color:var(--bt-ink);font:400 17px/1 var(--bt-pixel);letter-spacing:.6px;text-transform:uppercase;list-style:none;transition:transform .12s,box-shadow .12s,background .12s}
html body.in-battle #battle #battle-controls .small-button:hover,html body.in-battle #battle .battle-options summary:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--bt-shade);background:#16415f}
html body.in-battle #battle #battle-controls .small-button:active,html body.in-battle #battle .battle-options summary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bt-shade)}
html body.in-battle #battle #exit:hover{background:#7b2a2a}
html body.in-battle #battle .battle-options summary::-webkit-details-marker{display:none}
html body.in-battle #battle .battle-options-panel{padding:12px;background:var(--bt-panel);border:2px solid var(--bt-line);border-radius:8px;box-shadow:0 4px 0 var(--bt-shade);color:var(--bt-ink)}
html body.in-battle #battle .battle-options-panel :is(select,label){font:400 17px/1.2 var(--bt-pixel);letter-spacing:.4px}
html body.in-battle #battle .battle-options-panel select{background:#05192b;border:2px solid var(--bt-soft);border-radius:6px;color:var(--bt-ink);font-family:'Segoe UI',sans-serif;font-size:12px}

/* ---------- mensagens, rótulos, diagnóstico online ---------- */
html body.in-battle #battle #battle-message{padding:5px 12px 2px;background:#031019ee;border:2px solid var(--bt-line);border-radius:8px;box-shadow:0 3px 0 #000a;color:var(--bt-ink);font:400 20px/1.1 var(--bt-pixel);letter-spacing:.5px}
html body.in-battle #battle #battle-message:empty{display:none}
html body.in-battle #battle .field-label{font:400 15px/1 var(--bt-pixel);letter-spacing:2px;opacity:.6}
html body.in-battle #battle #online-diagnostics{padding:4px 10px 2px!important;background:#031019f0!important;border:2px solid var(--bt-line)!important;border-radius:8px!important;color:var(--bt-ink2)!important;font:400 17px/1.2 var(--bt-pixel)!important;letter-spacing:.5px}
html body.in-battle #battle #online-diagnostics[data-quality=good]{border-color:var(--bt-green)!important;color:var(--bt-green)!important}
html body.in-battle #battle #online-diagnostics[data-quality=fair]{border-color:var(--bt-yellow)!important;color:var(--bt-yellow)!important}
html body.in-battle #battle #online-diagnostics[data-quality=unstable]{border-color:var(--bt-red)!important;color:var(--bt-red)!important}

/* ---------- pausa e resultado ---------- */
html body.in-battle #battle .overlay{background:#020c15e6;backdrop-filter:none}
html body.in-battle #battle #overlay-content{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:min(92%,520px);padding:26px 28px 24px;background:var(--bt-panel);border:2px solid var(--bt-line);border-radius:8px;box-shadow:0 6px 0 var(--bt-shade);color:var(--bt-ink);text-align:center;animation:bt-pop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes bt-pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
html body.in-battle #battle #overlay-content .eyebrow{font:400 18px/1 var(--bt-pixel);letter-spacing:2px;color:var(--bt-cyan)}
html body.in-battle #battle #overlay-content h2{margin:0;font:400 46px/1 var(--bt-pixel);letter-spacing:.5px;text-transform:uppercase;color:var(--bt-ink)}
html body.in-battle #battle #overlay-content p{margin:0;font:13px/1.45 'Segoe UI',sans-serif;color:var(--bt-ink2)}
html body.in-battle #battle #overlay-content .result-icon{display:grid;place-items:center;width:56px;height:56px;border:2px solid var(--bt-yellow);border-radius:8px;background:var(--bt-panel2);color:var(--bt-yellow);font:400 34px/1 var(--bt-pixel)}
html body.in-battle #battle #overlay-content .result-stats{font:400 20px/1.2 var(--bt-pixel);letter-spacing:.8px;color:var(--bt-yellow)}
html body.in-battle #battle #overlay-content button{min-height:42px;padding:4px 18px 0;border:2px solid var(--bt-shade);border-radius:8px;background:var(--bt-panel2);color:var(--bt-ink);box-shadow:0 3px 0 var(--bt-shade);font:400 24px/1 var(--bt-pixel);letter-spacing:.6px;text-transform:uppercase;transition:transform .12s,box-shadow .12s}
html body.in-battle #battle #overlay-content button:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--bt-shade)}
html body.in-battle #battle #overlay-content button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bt-shade)}
html body.in-battle #battle #overlay-content button.primary{background:var(--bt-green);border-color:#0b5a26;color:#04260f;box-shadow:0 3px 0 #0b5a26}
html body.in-battle #battle #overlay-content button.primary:hover{box-shadow:0 4px 0 #0b5a26}
html body.in-battle #battle #overlay-content button.small-button{min-height:32px;font-size:19px;background:none;box-shadow:none;border-color:var(--bt-soft)}

/* ---------- larguras menores ---------- */
@media(max-width:1050px){
 html body.in-battle #battle .battle-top>.battle-fighter,html body.in-battle #battle .battle-top>.battle-fighter.enemy{max-width:290px;grid-template-columns:46px minmax(0,1fr);gap:3px 6px}
 html body.in-battle #battle .battle-portrait{width:46px;height:46px}
 html body.in-battle #battle .battle-top .battle-name{font-size:24px}html body.in-battle #battle .battle-types>span{font-size:12px;padding:2px 4px 0}
 html body.in-battle #battle .battle-health>span{font-size:15px}html body.in-battle #battle .battle-health{height:16px}
 html body.in-battle #battle .battle-team-cards{grid-template-columns:repeat(var(--team-count,6),26px)}
}
@media(max-width:650px){
 html body.in-battle #battle .battle-top>.battle-fighter,html body.in-battle #battle .battle-top>.battle-fighter.enemy{max-width:none;grid-template-columns:34px minmax(0,1fr);gap:2px 4px}
 html body.in-battle #battle .battle-portrait{width:34px;height:34px;border-width:1px;border-radius:4px;box-shadow:inset 0 2px 0 var(--bt-tc)}
 html body.in-battle #battle .battle-top .battle-name{font-size:16px;letter-spacing:0}html body.in-battle #battle .battle-heading{gap:3px;margin-bottom:3px;flex-wrap:wrap}
 html body.in-battle #battle .battle-types>span{font-size:9px;padding:2px 3px 0}
 html body.in-battle #battle .battle-health{height:13px;border-width:1px;border-radius:3px}html body.in-battle #battle .battle-health>span{font-size:12px;padding:2px 3px 0}
 html body.in-battle #battle .battle-dodge{margin-top:3px}html body.in-battle #battle .battle-dodge-charges>span{height:3px}
 html body.in-battle #battle .battle-team-cards{grid-template-columns:repeat(var(--team-count,6),minmax(0,19px));gap:2px}
 html body.in-battle #battle .battle-team-card{border-width:1px;border-radius:3px;padding:1px 1px 4px;box-shadow:none}html body.in-battle #battle .team-card-hp{height:2px;left:2px;right:2px;bottom:1px}
 html body.in-battle #battle .battle-top>.match-clock{width:44px!important;padding:4px 1px}html body.in-battle #battle .battle-top>.match-clock>span{font-size:20px}html body.in-battle #battle .battle-top>.match-clock small{display:none}
 html body.in-battle #battle .battle-trainer b{font-size:10px}html body.in-battle #battle .battle-roster{padding:1px 3px 0}
 html body.in-battle #battle #overlay-content h2{font-size:34px}
}
@media(prefers-reduced-motion:reduce){html body.in-battle #battle #overlay-content{animation:none}}

/* ---------- ajustes de posição: relógio / botões / resultado ---------- */
html body.in-battle #battle .battle-title{top:70px}
html body.in-battle #battle .battle-top>.match-clock{height:auto}
html body.in-battle #battle #battle-message{top:112px}
html body.in-battle #battle #overlay-content br{display:none}
@media(max-width:900px){html body.in-battle #battle .battle-title{top:114px}html body.in-battle #battle #battle-message{top:154px}}
@media(max-width:650px){html body.in-battle #battle .battle-title{top:92px}html body.in-battle #battle #battle-message{top:130px}}

/* ===== cópia para o Treinamento (HUD dentro de #field; mesmos estilos) ===== */
body.training-layout{--bt-panel:#0b2840;--bt-panel2:#103550;--bt-line:#2b6d8c;--bt-soft:#1b4a66;--bt-shade:#031019;--bt-ink:#eaf6ff;--bt-ink2:#a9c8dc;--bt-ink3:#6f98b0;--bt-cyan:#38c9f3;--bt-yellow:#ffd83a;--bt-green:#2fd36b;--bt-red:#ee4a3c;--bt-pixel:ArenaPixel,'Jersey 10',ui-monospace,monospace;--bt-ol:#16181f}
   mesmos elementos/IDs/JS do HUD existente (src/battle-hud.js); este arquivo carrega por último e substitui gradientes, brilhos
   e tipografia por superfícies chapadas, bordas de 2px, "placas" de sombra dura e a fonte Jersey 10. Remover o <link> volta ao visual anterior. */
html body.training-layout #field .bt-outline,html body.training-layout #field :is(.battle-health>span,.battle-name,#match-time){text-shadow:2px 0 var(--bt-ol),-2px 0 var(--bt-ol),0 2px var(--bt-ol),0 -2px var(--bt-ol),2px 2px var(--bt-ol),-2px -2px var(--bt-ol),-2px 2px var(--bt-ol),2px -2px var(--bt-ol)}

html body.training-layout #field .battle-types>[data-type=fire]{--badge:#e72b20!important}html body.training-layout #field .battle-types>[data-type=water]{--badge:#0769e8!important}
html body.training-layout #field .battle-types>[data-type=electric]{--badge:#f5c900!important;color:#2a2000!important}html body.training-layout #field .battle-types>[data-type=grass]{--badge:#10ac37!important}
html body.training-layout #field .battle-types>[data-type=ice]{--badge:#20bedc!important}html body.training-layout #field .battle-types>[data-type=psychic]{--badge:#e41b91!important}
html body.training-layout #field .battle-types>[data-type=poison]{--badge:#9827c4!important}html body.training-layout #field .battle-types>[data-type=dragon]{--badge:#5838dd!important}
html body.training-layout #field .battle-types>[data-type=fighting]{--badge:#b83d25!important}html body.training-layout #field .battle-types>[data-type=flying]{--badge:#657dd9!important}
html body.training-layout #field .battle-types>[data-type=steel]{--badge:#607b91!important}html body.training-layout #field .battle-types>[data-type=rock]{--badge:#8b6a2d!important}
html body.training-layout #field .battle-types>[data-type=ground]{--badge:#bb741b!important}html body.training-layout #field .battle-types>[data-type=bug]{--badge:#809b0b!important}
html body.training-layout #field .battle-types>[data-type=normal]{--badge:#626e7b!important}html body.training-layout #field .battle-types>[data-type=ghost]{--badge:#67408d!important}
html body.training-layout #field .battle-types>[data-type=dark]{--badge:#4b4760!important}
#field .battle-fighter{--bt-tc:#626e7b}
#field .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=fire]){--bt-tc:#e72b20}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=water]){--bt-tc:#0769e8}
#field .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=electric]){--bt-tc:#f5c900}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=grass]){--bt-tc:#10ac37}
#field .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=ice]){--bt-tc:#20bedc}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=psychic]){--bt-tc:#e41b91}
#field .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=poison]){--bt-tc:#9827c4}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=dragon]){--bt-tc:#5838dd}
#field .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=fighting]){--bt-tc:#b83d25}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=flying]){--bt-tc:#657dd9}
#field .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=steel]){--bt-tc:#607b91}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=rock]){--bt-tc:#8b6a2d}
#field .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=ground]){--bt-tc:#bb741b}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=bug]){--bt-tc:#809b0b}
#field .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=ghost]){--bt-tc:#67408d}#battle .battle-fighter:has(.battle-types>[data-type]:first-child[data-type=dark]){--bt-tc:#4b4760}

html body.training-layout #field .battle-top>.battle-fighter,html body.training-layout #field .battle-top>.battle-fighter.enemy{max-width:370px;grid-template-columns:60px minmax(0,1fr);gap:4px 8px;padding:0;background:none;background-image:none;border:0;border-radius:0;box-shadow:none;color:var(--bt-ink)}
html body.training-layout #field .battle-portrait{display:block;position:relative;width:60px;height:60px;overflow:hidden;border:2px solid var(--bt-line);border-radius:6px;background:#0a2236;box-shadow:inset 0 3px 0 var(--bt-tc),0 3px 0 var(--bt-shade)}
html body.training-layout #field .battle-portrait:after{display:none}
html body.training-layout #field .battle-portrait canvas{position:absolute;inset:0;width:100%;height:100%;transform:scale(1.85);transform-origin:50% 34%;image-rendering:pixelated}
html body.training-layout #field .battle-heading{display:flex;align-items:center;gap:6px;padding:0;margin:2px 0 5px;border:0}
html body.training-layout #field .battle-top .battle-name{font:400 30px/.85 var(--bt-pixel);font-style:normal;letter-spacing:.4px;text-transform:uppercase;color:var(--bt-ink)}
html body.training-layout #field .battle-types{margin:0;gap:3px;flex:none}
html body.training-layout #field .battle-types>span{display:inline-flex;align-items:center;padding:2px 5px 0;border-radius:3px;background:var(--badge);background-image:none;box-shadow:0 2px 0 var(--bt-shade);color:#fff;font:400 13px/1 var(--bt-pixel);letter-spacing:.4px;text-shadow:1px 1px 0 #0007}
html body.training-layout #field .battle-types svg{display:none}
html body.training-layout #field .battle-types b{font:inherit;color:inherit}
html body.training-layout #field .battle-level{display:none}
html body.training-layout #field .battle-health{height:18px;border:2px solid var(--bt-shade);border-radius:4px;background:#041321;box-shadow:0 2px 0 var(--bt-shade)}
html body.training-layout #field .battle-health i{background-image:none!important;box-shadow:none;transition:width .18s steps(8,end)}
html body.training-layout #field .battle-health>span{padding:2px 6px 0;font:400 17px/1 var(--bt-pixel);letter-spacing:.5px;color:#fff}
html body.training-layout #field .battle-dodge{margin:6px 0 0;gap:6px}
html body.training-layout #field .battle-dodge-charges{gap:4px;padding:0;background:none;border:0;border-radius:0}
html body.training-layout #field .battle-dodge-charges>span{height:6px;border-radius:1px;background:#041321;box-shadow:0 0 0 1px var(--bt-shade)}
html body.training-layout #field .battle-dodge-charges i{border-radius:0;background:var(--bt-cyan);box-shadow:none}
html body.training-layout #field .battle-dodge-charges i.recharging{background:#1f7fa0}
html body.training-layout #field .battle-dodge small{display:none}
html body.training-layout #field .battle-roster{right:0;left:auto;top:auto;bottom:0;margin:0;opacity:1;background:#031019cc;padding:2px 6px 0;border-radius:3px}
html body.training-layout #field .enemy .battle-roster{right:auto;left:0}
html body.training-layout #field .battle-trainer b{font:400 14px/1 var(--bt-pixel);font-style:normal;letter-spacing:1.5px;color:var(--bt-ink2);text-shadow:none}
html body.training-layout #field .battle-status{top:auto;bottom:3px;right:64px;left:auto;font:400 15px/1 var(--bt-pixel);letter-spacing:.5px;color:var(--bt-yellow);text-shadow:2px 0 var(--bt-ol),-2px 0 var(--bt-ol),0 2px var(--bt-ol),0 -2px var(--bt-ol)}

html body.training-layout #field .battle-team-cards{grid-template-columns:repeat(var(--team-count,6),30px);justify-content:start;gap:3px;padding:0;margin:0;border:0;border-radius:0;background:none}
html body.training-layout #field .enemy .battle-team-cards{justify-content:start}
html body.training-layout #field .battle-team-card{aspect-ratio:1;padding:1px 1px 6px;border:2px solid var(--bt-soft);border-radius:4px;background:#0a2236e8;box-shadow:0 2px 0 var(--bt-shade);transition:transform .12s,border-color .12s,background .12s}
html body.training-layout #field .battle-team-card:not(:disabled):hover{transform:translateY(-2px);border-color:var(--bt-line);background:var(--bt-panel2)}
html body.training-layout #field .battle-team-card:not(:disabled):active{transform:translateY(1px)}
html body.training-layout #field .battle-team-card.active{border-color:var(--bt-yellow);border-radius:4px;background:#16415f;box-shadow:0 2px 0 var(--bt-shade);animation:none}
html body.training-layout #field .battle-team-card.active:before{display:none}
html body.training-layout #field .battle-team-card.fainted{opacity:.4;filter:grayscale(1)}
html body.training-layout #field .team-card-hp{left:3px;right:3px;bottom:2px;height:3px;border-radius:0;background:#041321;box-shadow:none}
html body.training-layout #field .team-card-hp i{transition:width .18s steps(6,end)}
html body.training-layout #field .battle-team-card.active .team-card-hp{box-shadow:none}

html body.training-layout #field .battle-top>.match-clock{width:92px;padding:6px 4px 5px;background:var(--bt-panel);border:2px solid var(--bt-line);border-radius:8px;box-shadow:0 4px 0 var(--bt-shade)}
html body.training-layout #field .battle-top>.match-clock>span{font:400 36px/.9 var(--bt-pixel);letter-spacing:1px;color:var(--bt-yellow)}
html body.training-layout #field .battle-top>.match-clock small{display:block;margin-top:3px;font:400 14px/1 var(--bt-pixel);letter-spacing:1.5px;color:var(--bt-ink3)}

html body.training-layout #field #battle-controls{gap:6px}
html body.training-layout #field #battle-controls .small-button,html body.training-layout #field .battle-options summary{margin:0;padding:3px 10px 1px;min-height:26px;background:var(--bt-panel2);border:2px solid var(--bt-shade);border-radius:6px;box-shadow:0 3px 0 var(--bt-shade);color:var(--bt-ink);font:400 17px/1 var(--bt-pixel);letter-spacing:.6px;text-transform:uppercase;list-style:none;transition:transform .12s,box-shadow .12s,background .12s}
html body.training-layout #field #battle-controls .small-button:hover,html body.training-layout #field .battle-options summary:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--bt-shade);background:#16415f}
html body.training-layout #field #battle-controls .small-button:active,html body.training-layout #field .battle-options summary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bt-shade)}
html body.training-layout #field #exit:hover{background:#7b2a2a}
html body.training-layout #field .battle-options summary::-webkit-details-marker{display:none}
html body.training-layout #field .battle-options-panel{padding:12px;background:var(--bt-panel);border:2px solid var(--bt-line);border-radius:8px;box-shadow:0 4px 0 var(--bt-shade);color:var(--bt-ink)}
html body.training-layout #field .battle-options-panel :is(select,label){font:400 17px/1.2 var(--bt-pixel);letter-spacing:.4px}
html body.training-layout #field .battle-options-panel select{background:#05192b;border:2px solid var(--bt-soft);border-radius:6px;color:var(--bt-ink);font-family:'Segoe UI',sans-serif;font-size:12px}

html body.training-layout #field .field-label{font:400 15px/1 var(--bt-pixel);letter-spacing:2px;opacity:.6}
html body.training-layout #field #online-diagnostics{padding:4px 10px 2px!important;background:#031019f0!important;border:2px solid var(--bt-line)!important;border-radius:8px!important;color:var(--bt-ink2)!important;font:400 17px/1.2 var(--bt-pixel)!important;letter-spacing:.5px}
html body.training-layout #field #online-diagnostics[data-quality=good]{border-color:var(--bt-green)!important;color:var(--bt-green)!important}
html body.training-layout #field #online-diagnostics[data-quality=fair]{border-color:var(--bt-yellow)!important;color:var(--bt-yellow)!important}
html body.training-layout #field #online-diagnostics[data-quality=unstable]{border-color:var(--bt-red)!important;color:var(--bt-red)!important}

html body.training-layout #field .overlay{background:#020c15e6;backdrop-filter:none}
html body.training-layout #field #overlay-content{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:min(92%,520px);padding:26px 28px 24px;background:var(--bt-panel);border:2px solid var(--bt-line);border-radius:8px;box-shadow:0 6px 0 var(--bt-shade);color:var(--bt-ink);text-align:center;animation:bt-pop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes bt-pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
html body.training-layout #field #overlay-content .eyebrow{font:400 18px/1 var(--bt-pixel);letter-spacing:2px;color:var(--bt-cyan)}
html body.training-layout #field #overlay-content h2{margin:0;font:400 46px/1 var(--bt-pixel);letter-spacing:.5px;text-transform:uppercase;color:var(--bt-ink)}
html body.training-layout #field #overlay-content p{margin:0;font:13px/1.45 'Segoe UI',sans-serif;color:var(--bt-ink2)}
html body.training-layout #field #overlay-content .result-icon{display:grid;place-items:center;width:56px;height:56px;border:2px solid var(--bt-yellow);border-radius:8px;background:var(--bt-panel2);color:var(--bt-yellow);font:400 34px/1 var(--bt-pixel)}
html body.training-layout #field #overlay-content .result-stats{font:400 20px/1.2 var(--bt-pixel);letter-spacing:.8px;color:var(--bt-yellow)}
html body.training-layout #field #overlay-content button{min-height:42px;padding:4px 18px 0;border:2px solid var(--bt-shade);border-radius:8px;background:var(--bt-panel2);color:var(--bt-ink);box-shadow:0 3px 0 var(--bt-shade);font:400 24px/1 var(--bt-pixel);letter-spacing:.6px;text-transform:uppercase;transition:transform .12s,box-shadow .12s}
html body.training-layout #field #overlay-content button:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--bt-shade)}
html body.training-layout #field #overlay-content button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bt-shade)}
html body.training-layout #field #overlay-content button.primary{background:var(--bt-green);border-color:#0b5a26;color:#04260f;box-shadow:0 3px 0 #0b5a26}
html body.training-layout #field #overlay-content button.primary:hover{box-shadow:0 4px 0 #0b5a26}
html body.training-layout #field #overlay-content button.small-button{min-height:32px;font-size:19px;background:none;box-shadow:none;border-color:var(--bt-soft)}

@media(max-width:1050px){
 html body.training-layout #field .battle-top>.battle-fighter,html body.training-layout #field .battle-top>.battle-fighter.enemy{max-width:290px;grid-template-columns:46px minmax(0,1fr);gap:3px 6px}
 html body.training-layout #field .battle-portrait{width:46px;height:46px}
 html body.training-layout #field .battle-top .battle-name{font-size:24px}html body.training-layout #field .battle-types>span{font-size:12px;padding:2px 4px 0}
 html body.training-layout #field .battle-health>span{font-size:15px}html body.training-layout #field .battle-health{height:16px}
 html body.training-layout #field .battle-team-cards{grid-template-columns:repeat(var(--team-count,6),26px)}
}
@media(max-width:650px){
 html body.training-layout #field .battle-top>.battle-fighter,html body.training-layout #field .battle-top>.battle-fighter.enemy{max-width:none;grid-template-columns:34px minmax(0,1fr);gap:2px 4px}
 html body.training-layout #field .battle-portrait{width:34px;height:34px;border-width:1px;border-radius:4px;box-shadow:inset 0 2px 0 var(--bt-tc)}
 html body.training-layout #field .battle-top .battle-name{font-size:16px;letter-spacing:0}html body.training-layout #field .battle-heading{gap:3px;margin-bottom:3px;flex-wrap:wrap}
 html body.training-layout #field .battle-types>span{font-size:9px;padding:2px 3px 0}
 html body.training-layout #field .battle-health{height:13px;border-width:1px;border-radius:3px}html body.training-layout #field .battle-health>span{font-size:12px;padding:2px 3px 0}
 html body.training-layout #field .battle-dodge{margin-top:3px}html body.training-layout #field .battle-dodge-charges>span{height:3px}
 html body.training-layout #field .battle-team-cards{grid-template-columns:repeat(var(--team-count,6),minmax(0,19px));gap:2px}
 html body.training-layout #field .battle-team-card{border-width:1px;border-radius:3px;padding:1px 1px 4px;box-shadow:none}html body.training-layout #field .team-card-hp{height:2px;left:2px;right:2px;bottom:1px}
 html body.training-layout #field .battle-top>.match-clock{width:44px!important;padding:4px 1px}html body.training-layout #field .battle-top>.match-clock>span{font-size:20px}html body.training-layout #field .battle-top>.match-clock small{display:none}
 html body.training-layout #field .battle-trainer b{font-size:10px}html body.training-layout #field .battle-roster{padding:1px 3px 0}
 html body.training-layout #field #overlay-content h2{font-size:34px}
}
@media(prefers-reduced-motion:reduce){html body.training-layout #field #overlay-content{animation:none}}

html body.training-layout #field .battle-top>.match-clock{height:auto}
html body.training-layout #field #overlay-content br{display:none}
@media(max-width:650px){html body.training-layout #field .battle-title{top:92px}html body.training-layout #field #battle-message{top:130px}}
html body.training-layout #field .battle-fighter .battle-roster{left:auto!important;right:0!important}