/* Pokémon Arena · batalha com tarja preta inferior (experimento, baseado em ui-lab/#/battle).
   Arena vira um card de cantos levemente arredondados; embaixo, uma tarja preta traz os 6 Pokémon, os 4 golpes e a esquiva
   na mesma linha (telas grandes) ou golpes numa linha e equipe na outra (telas menores).
   Somente apresentação: mesmos elementos/IDs/JS. Ativado por body.band-ui (src/battle-band.js).
   Para remover: apague o <link> deste arquivo e o <script> src/battle-band.js do index.html (ou abra com ?band=0). */
html body.in-battle.band-ui #battle{display:flex;flex-direction:column;padding:10px 10px 0;gap:0;background:#02050a}
html body.in-battle.band-ui #game-frame{position:relative;inset:auto;flex:1 1 auto;width:auto;height:auto;min-height:0!important;border:2px solid #0f2b3f;border-radius:14px;overflow:hidden;background:#13212a}
html body.in-battle.band-ui #game{width:100%;height:100%}
html body.in-battle.band-ui .battle-help{display:none!important}

/* ---------- tarja ---------- */
html body.in-battle.band-ui .combat-dock{position:relative;inset:auto;left:auto;right:auto;bottom:auto;z-index:6;flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"team moves dodge";align-items:stretch;justify-content:stretch;gap:14px;padding:14px 4px 14px;background:#02050a;pointer-events:auto}
html body.in-battle.band-ui .combat-dock .dock-left{display:contents}
html body.in-battle.band-ui .combat-dock .squad{grid-area:team;display:block}
html body.in-battle.band-ui .combat-dock .squad>.eyebrow{display:none}
html body.in-battle.band-ui .combat-dock #abilities{grid-area:moves;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:auto;min-width:0;margin:0;padding:0;border:0;background:none;overflow:visible}

/* ---------- cards dos Pokémon ---------- */

/* ---------- cards de golpe ---------- */
html body.in-battle.band-ui #abilities .ability{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:7px;row-gap:1px;height:auto;min-height:54px;padding:4px 8px 4px 7px;border:2px solid #000;border-radius:8px;box-shadow:0 3px 0 #000;overflow:hidden;opacity:1;color:#fff;font-family:var(--bt-pixel);text-align:left;background:color-mix(in srgb,var(--element) 26%,#0a1018);transition:transform .12s cubic-bezier(.2,.8,.2,1),filter .12s}
html body.in-battle.band-ui #abilities .ability.is-ready{background:var(--element)}
html body.in-battle.band-ui #abilities .ability:hover{filter:brightness(1.1)}
html body.in-battle.band-ui #abilities .ability:active{transform:scale(.97);box-shadow:0 3px 0 #000}
html body.in-battle.band-ui #abilities .ability .ability-fill{background:var(--element)!important;border-right:3px solid #fff;transition:width .06s linear}
html body.in-battle.band-ui #abilities .ability.is-ready .ability-fill{border-right:0}
html body.in-battle.band-ui #abilities .ability .ability-fill[style*="width: 0%"]{border-right:0}
html body.in-battle.band-ui #abilities .ability kbd{grid-column:1;grid-row:1/3;align-self:center;justify-self:center;display:block;padding:0;font:400 42px/.8 var(--bt-pixel);color:#fff;background:none!important;border:0!important}
html body.in-battle.band-ui #abilities .ability strong{grid-column:2;grid-row:1;align-self:end;margin:0;font:400 18px/.92 var(--bt-pixel)!important;text-transform:uppercase;letter-spacing:.2px;overflow-wrap:anywhere}
html body.in-battle.band-ui #abilities .ability .ability-foot{display:contents}
html body.in-battle.band-ui #abilities .ability .move-effect{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;grid-column:2;grid-row:2;align-self:start;font:400 14px/1 var(--bt-pixel);letter-spacing:.3px;color:#d7f5ff}
html body.in-battle.band-ui #abilities .ability .ability-meta{grid-column:3;grid-row:1;align-self:end;justify-self:end;display:flex;align-items:baseline;gap:4px}
html body.in-battle.band-ui #abilities .ability .ability-meta b{font:400 30px/.8 var(--bt-pixel);color:#ffd83a}
html body.in-battle.band-ui #abilities .ability .damage-label{display:none}
html body.in-battle.band-ui #abilities .ability .move-type{grid-column:3;grid-row:2;align-self:start;justify-self:end;display:block;margin:0;padding:2px 5px 0;border:0;border-radius:3px;background:#000a;font:400 12px/1 var(--bt-pixel);letter-spacing:.6px;text-transform:uppercase;color:#fff;text-shadow:none}
html body.in-battle.band-ui #abilities .ability .cool-number{position:absolute;left:7px;right:auto;bottom:3px;width:34px;text-align:center;font:400 12px/1 var(--bt-pixel);color:#fff;transform:none}
html body.in-battle.band-ui #abilities .ability :is(kbd,strong,.ability-meta b,.damage-label,.move-effect,.cool-number){text-shadow:2px 0 #16181f,-2px 0 #16181f,0 2px #16181f,0 -2px #16181f,2px 2px #16181f,-2px -2px #16181f,-2px 2px #16181f,2px -2px #16181f}
/* pronto: pulso discreto contínuo + sequência chamativa única */
html body.in-battle.band-ui #abilities .ability.is-ready{animation:band-pulse 2.6s steps(8) infinite}
@keyframes band-pulse{0%,62%{box-shadow:0 3px 0 #000,inset 0 0 0 0 #fff0}74%{box-shadow:0 3px 0 #000,inset 0 0 0 2px #ffffffc0}100%{box-shadow:0 3px 0 #000,inset 0 0 0 0 #fff0}}
html body.in-battle.band-ui #abilities .ability.just-ready{animation:band-pop .8s cubic-bezier(.2,.9,.25,1.2);z-index:2}
@keyframes band-pop{0%{transform:scale(1);filter:brightness(1);box-shadow:0 3px 0 #000,inset 0 0 0 0 #ffd83a}
 22%{transform:scale(1.09) translateY(-6px);filter:brightness(1.55);box-shadow:0 9px 0 #000,inset 0 0 0 4px #ffd83a}
 45%{transform:scale(.98);filter:brightness(1);box-shadow:0 3px 0 #000,inset 0 0 0 3px #ffd83a}
 68%{transform:scale(1.03) translateY(-2px);box-shadow:0 5px 0 #000,inset 0 0 0 3px #ffd83a}
 100%{transform:none;box-shadow:0 3px 0 #000,inset 0 0 0 3px #ffd83a00}}
html body.in-battle.band-ui #abilities .ability.just-ready::before{content:"";position:absolute;top:-12%;bottom:-12%;left:-40%;width:34%;z-index:4;background:#fff;opacity:0;transform:skewX(-20deg);pointer-events:none;animation:band-sweep .65s cubic-bezier(.3,.6,.3,1) .05s}
@keyframes band-sweep{0%{opacity:0;transform:translateX(0) skewX(-20deg)}12%{opacity:.75}100%{opacity:0;transform:translateX(620%) skewX(-20deg)}}
html body.in-battle.band-ui #abilities .ability.just-ready::after{content:"PRONTO!";position:absolute;left:5px;bottom:3px;z-index:5;padding:2px 4px 0;border:2px solid #000;border-radius:4px;background:#ffd83a;color:#2a1d00;font:400 13px/1 var(--bt-pixel);letter-spacing:.8px;pointer-events:none;animation:band-badge .9s cubic-bezier(.2,.9,.25,1.3) both}
@keyframes band-badge{0%{opacity:0;transform:translateY(-8px) scale(.4)}20%{opacity:1;transform:scale(1.2)}35%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(4px)}}

/* ---------- esquiva ---------- */
html body.in-battle.band-ui .combat-dock .dash-panel{grid-area:dodge;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:auto;min-width:96px;padding:6px 10px 6px;border:2px solid #000;border-radius:8px;background:#103550;box-shadow:0 3px 0 #000;text-align:center}
html body.in-battle.band-ui .combat-dock .dash-panel.is-ready{border-color:#000!important;box-shadow:0 3px 0 #000!important}
html body.in-battle.band-ui .dash-heading{display:flex;flex-direction:column;align-items:center;gap:3px}
html body.in-battle.band-ui .combat-dock .dash-panel strong{flex:none;font:400 24px/1 var(--bt-pixel);letter-spacing:.8px;color:#eaf6ff}
html body.in-battle.band-ui .combat-dock .dash-panel kbd{order:-1;padding:0;border:0;background:none;font:400 14px/1 var(--bt-pixel);letter-spacing:1px;color:#6f98b0}
html body.in-battle.band-ui .combat-dock .dash-panel small{display:none}
html body.in-battle.band-ui .combat-dock .cool-track{display:flex;gap:4px;height:auto;margin:0;border:0;background:none;overflow:visible}
html body.in-battle.band-ui .combat-dock .dash-charges>span{flex:none;width:18px;height:6px;border:0;border-radius:0;background:#041321;box-shadow:0 0 0 1px #000;overflow:hidden}
html body.in-battle.band-ui .combat-dock .dash-charges>span>i{background:#38c9f3;transition:width .08s linear}

/* ---------- telas menores: golpes na 1ª linha, Pokémon + esquiva na 2ª ---------- */
@media(max-width:1380px){
 html body.in-battle.band-ui .combat-dock{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"moves moves" "team dodge";gap:10px;padding:12px 4px 12px}
 html body.in-battle.band-ui .combat-dock .dash-panel{flex-direction:row;gap:10px;min-width:0;padding:6px 14px 4px}
 html body.in-battle.band-ui .dash-heading{flex-direction:row}
 html body.in-battle.band-ui .combat-dock .dash-panel kbd{display:none}
}
@media(max-width:760px){
 html body.in-battle.band-ui .combat-dock #abilities{grid-template-columns:repeat(2,minmax(0,1fr))}
 html body.in-battle.band-ui #abilities .ability{min-height:50px;grid-template-columns:26px minmax(0,1fr) auto;column-gap:5px;padding:3px 6px 3px 5px}
 html body.in-battle.band-ui #abilities .ability kbd{font-size:32px}
 html body.in-battle.band-ui #abilities .ability strong{font-size:16px!important}
 html body.in-battle.band-ui #abilities .ability .cool-number{width:30px;left:6px}
 html body.in-battle.band-ui #abilities .ability .ability-meta b{font-size:25px}
 html body.in-battle.band-ui .combat-dock .dash-panel{flex-direction:column;gap:4px;min-width:68px;padding:4px 8px 3px}
 html body.in-battle.band-ui .combat-dock .dash-panel strong{font-size:15px}
 html body.in-battle.band-ui .combat-dock .dash-charges>span{width:9px}
}
@media(prefers-reduced-motion:reduce){
 html body.in-battle.band-ui #abilities .ability.is-ready,html body.in-battle.band-ui #abilities .ability.just-ready,html body.in-battle.band-ui #abilities .ability.just-ready::before,html body.in-battle.band-ui #abilities .ability.just-ready::after{animation:none}
 html body.in-battle.band-ui #abilities .ability.just-ready::after{opacity:1}
}

/* battle-hud.css esconde a equipe/esquiva do dock (usa as miniaturas do HUD); na tarja elas voltam e o HUD do jogador fica só com vida e esquiva */
html body.in-battle.band-ui .combat-dock .squad{display:block!important}
html body.in-battle.band-ui .combat-dock .dash-panel{display:flex!important}
html body.in-battle.band-ui #player-hud .battle-team-cards{display:none!important}
@media(max-width:760px){html body.in-battle.band-ui .combat-dock .dash-panel{display:flex!important}}
html body.in-battle.band-ui #player-hud .battle-roster{left:0!important;right:auto!important;bottom:-21px!important}

/* ---------- equipe: card compacto com retrato ampliado e vida em volta da borda ---------- */
html body.in-battle.band-ui .combat-dock #battle-team{display:grid;grid-template-columns:repeat(6,54px);gap:6px;flex-wrap:nowrap;margin:0;padding:0;max-width:none;overflow:visible}
html body.in-battle.band-ui .combat-dock .team-button{--hp:100;--hpc:#2fd36b;position:relative;display:block;width:auto;height:auto;aspect-ratio:1;min-height:54px;padding:0;margin:0;border:0;border-radius:9px;background:#0a2236;box-shadow:0 3px 0 #000;overflow:hidden;opacity:1;transition:transform .15s cubic-bezier(.2,.8,.2,1),filter .15s,opacity .2s}
html body.in-battle.band-ui .combat-dock .team-button[data-hp=mid]{--hpc:#ffd83a}
html body.in-battle.band-ui .combat-dock .team-button[data-hp=low]{--hpc:#ee4a3c}
html body.in-battle.band-ui .combat-dock .team-button canvas{position:absolute;inset:3px;width:calc(100% - 6px)!important;height:calc(100% - 6px)!important;margin:0;transform:scale(1.85);transform-origin:50% 34%;image-rendering:pixelated}
/* anel de vida: 4px em volta do card, preenche no sentido horário a partir do topo */
html body.in-battle.band-ui .combat-dock .team-button::before{content:"";position:absolute;inset:0;z-index:3;padding:4px;border-radius:9px;pointer-events:none;background:conic-gradient(var(--hpc) calc(var(--hp)*1%),#0f2a40 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html body.in-battle.band-ui .combat-dock .team-button .team-position,html body.in-battle.band-ui .combat-dock .team-button .team-state,html body.in-battle.band-ui .combat-dock .team-button .mini-hp{display:none}
html body.in-battle.band-ui .combat-dock .team-button:not(:disabled):hover{transform:translateY(-3px);filter:brightness(1.15)}
html body.in-battle.band-ui .combat-dock .team-button:not(:disabled):active{transform:translateY(1px) scale(.96)}
html body.in-battle.band-ui .combat-dock .team-button.active{transform:translateY(-4px);box-shadow:0 0 0 2px #ffd83a,0 3px 0 2px #000}
html body.in-battle.band-ui .combat-dock .team-button.active canvas{inset:3px}
html body.in-battle.band-ui .combat-dock .team-button:disabled{opacity:.45;filter:grayscale(1)}
html body.in-battle.band-ui .combat-dock .team-button.switch-locked:not(.active){opacity:.75}
@media(max-width:1380px){
 html body.in-battle.band-ui .combat-dock #battle-team{grid-template-columns:repeat(6,minmax(0,54px))}
}
@media(max-width:760px){
 html body.in-battle.band-ui .combat-dock #battle-team{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
 html body.in-battle.band-ui .combat-dock .team-button{min-height:0}
}
/* o contador de recarga sob o número da tecla foi removido */
html body.in-battle.band-ui #abilities .ability .cool-number{display:none}

/* ---------- ajustes: sem mensagem de texto, sem contorno amarelo na equipe, menu de engrenagem ---------- */
html body.in-battle.band-ui #battle-message{display:none!important}
html body.in-battle.band-ui .battle-title{display:none!important}
html body.in-battle.band-ui .combat-dock .team-button.active{box-shadow:0 3px 0 #000;transform:translateY(-4px)}
/* telas grandes: cards da equipe com a mesma altura dos cards de golpe */
@media(min-width:1381px){
 html body.in-battle.band-ui .combat-dock .squad{align-self:stretch}
 html body.in-battle.band-ui .combat-dock #battle-team{height:100%;grid-template-columns:repeat(6,60px);grid-auto-rows:1fr}
 html body.in-battle.band-ui .combat-dock .team-button{aspect-ratio:auto;height:100%;min-height:54px}
}
/* menu */
html body.in-battle.band-ui .band-menu{position:absolute;right:12px;bottom:12px;z-index:8;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:8px}
html body.battle-intro.band-ui .band-menu{opacity:0;pointer-events:none}
html body.in-battle.band-ui .band-menu:has(#battle-controls[hidden]){display:none}
html body.in-battle.band-ui .band-gear{display:grid;place-items:center;width:38px;height:38px;padding:0;border:2px solid #031019;border-radius:8px;background:#103550;box-shadow:0 3px 0 #031019;color:#eaf6ff;font:400 22px/1 'Segoe UI Symbol','Segoe UI',sans-serif;cursor:pointer;transition:transform .12s cubic-bezier(.2,.8,.2,1),background .12s}
html body.in-battle.band-ui .band-gear:hover{background:#16415f;transform:translateY(-1px)}
html body.in-battle.band-ui .band-gear:active{transform:translateY(2px);box-shadow:0 1px 0 #031019}
html body.in-battle.band-ui .band-menu.open .band-gear{background:#ffd83a;color:#2a1d00}
html body.in-battle.band-ui .band-menu #battle-controls{display:none;pointer-events:auto}
html body.in-battle.band-ui .band-menu.open #battle-controls{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:176px;padding:8px;background:#0b2840;border:2px solid #2b6d8c;border-radius:8px;box-shadow:0 4px 0 #031019}
html body.in-battle.band-ui .band-menu #battle-controls[hidden]{display:none!important}
html body.in-battle.band-ui .band-menu #battle-controls .small-button[hidden]{display:none!important}
html body.in-battle.band-ui .band-menu #battle-controls :is(.small-button,summary){display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left}
html body.in-battle.band-ui .band-menu .battle-options{position:static}
html body.in-battle.band-ui .band-menu .battle-options-panel{position:static;margin-top:6px;min-width:0;width:100%}
html body.in-battle.band-ui .band-menu #battle-game-settings{font-size:0}
html body.in-battle.band-ui .band-menu #battle-game-settings::after{content:"CONFIGURAÇÕES";font:400 17px/1 var(--bt-pixel);letter-spacing:.6px}
html body.in-battle.band-ui .band-menu #battle-game-settings::after{color:#eaf6ff}
html body.in-battle.band-ui .band-menu #battle-game-settings{color:#6f98b0}

/* ---------- telas menores e celular: cards ainda mais compactos ---------- */
@media(max-width:1380px){
 html body.in-battle.band-ui .combat-dock{gap:8px;padding:10px 4px 10px}
 html body.in-battle.band-ui .combat-dock #abilities{gap:6px}
 html body.in-battle.band-ui #abilities .ability{min-height:44px;grid-template-columns:28px minmax(0,1fr) auto;column-gap:6px;row-gap:0;padding:3px 7px 3px 6px;border-radius:7px}
 html body.in-battle.band-ui #abilities .ability kbd{font-size:34px}
 html body.in-battle.band-ui #abilities .ability strong{font-size:16px!important}
 html body.in-battle.band-ui #abilities .ability .move-effect{font-size:12px}
 html body.in-battle.band-ui #abilities .ability .ability-meta b{font-size:25px}
 html body.in-battle.band-ui #abilities .ability .move-type{padding:1px 4px 0;font-size:11px}
 html body.in-battle.band-ui .combat-dock #battle-team{grid-template-columns:repeat(6,minmax(0,44px));gap:5px}
 html body.in-battle.band-ui .combat-dock .team-button{min-height:0;border-radius:8px}
 html body.in-battle.band-ui .combat-dock .team-button::before{padding:3px;border-radius:8px}
 html body.in-battle.band-ui .combat-dock .dash-panel{padding:3px 10px 2px;border-radius:7px}
 html body.in-battle.band-ui .combat-dock .dash-panel strong{font-size:18px}
}
@media(max-width:760px){
 html body.in-battle.band-ui .combat-dock{gap:6px;padding:8px 2px 8px}
 html body.in-battle.band-ui .combat-dock #abilities{gap:5px}
 html body.in-battle.band-ui #abilities .ability{min-height:40px;grid-template-columns:22px minmax(0,1fr) auto;column-gap:5px;padding:2px 6px 2px 5px;border-radius:6px;box-shadow:0 2px 0 #000}
 html body.in-battle.band-ui #abilities .ability kbd{font-size:28px}
 html body.in-battle.band-ui #abilities .ability strong{font-size:14px!important}
 html body.in-battle.band-ui #abilities .ability .move-effect{font-size:11px}
 html body.in-battle.band-ui #abilities .ability .ability-meta b{font-size:21px}
 html body.in-battle.band-ui #abilities .ability .move-type{font-size:10px;padding:1px 3px 0}
 html body.in-battle.band-ui .combat-dock #battle-team{grid-template-columns:repeat(6,minmax(0,36px));gap:4px}
 html body.in-battle.band-ui .combat-dock .team-button{border-radius:7px;box-shadow:0 2px 0 #000}
 html body.in-battle.band-ui .combat-dock .team-button::before{padding:3px;border-radius:7px}
 html body.in-battle.band-ui .combat-dock .dash-panel{min-width:60px;padding:2px 6px 2px}
 html body.in-battle.band-ui .combat-dock .dash-panel strong{font-size:13px}
 html body.in-battle.band-ui .band-gear{width:32px;height:32px;font-size:19px}
}

/* ---------- entrada da interface quando a abertura termina (classe .band-enter, ver src/battle-band.js) ---------- */
@media(prefers-reduced-motion:no-preference){
 @keyframes band-in-up{from{opacity:0;translate:0 34px;scale:.88}55%{opacity:1;translate:0 -5px;scale:1.04}78%{translate:0 1px;scale:.99}to{opacity:1;translate:0 0;scale:1}}
 @keyframes band-in-left{from{opacity:0;translate:-60px 0}60%{opacity:1;translate:6px 0}to{opacity:1;translate:0 0}}
 @keyframes band-in-right{from{opacity:0;translate:60px 0}60%{opacity:1;translate:-6px 0}to{opacity:1;translate:0 0}}
 @keyframes band-in-down{from{opacity:0;translate:0 -42px;scale:.6}55%{opacity:1;translate:0 5px;scale:1.1}78%{translate:0 -1px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
 @keyframes band-in-pop{from{opacity:0;scale:.2}60%{opacity:1;scale:1.18}to{opacity:1;scale:1}}
 html body.in-battle.band-ui #battle.band-enter #player-hud{animation:band-in-left .7s cubic-bezier(.2,.8,.25,1) backwards}
 html body.in-battle.band-ui #battle.band-enter #enemy-hud{animation:band-in-right .7s cubic-bezier(.2,.8,.25,1) .08s backwards}
 html body.in-battle.band-ui #battle.band-enter .match-clock{animation:band-in-down .7s cubic-bezier(.2,.8,.25,1) .16s backwards}
 html body.in-battle.band-ui #battle.band-enter .team-button{animation:band-in-up .65s cubic-bezier(.2,.8,.25,1) backwards}
 html body.in-battle.band-ui #battle.band-enter .team-button:nth-child(1){animation-delay:.22s}
 html body.in-battle.band-ui #battle.band-enter .team-button:nth-child(2){animation-delay:.27s}
 html body.in-battle.band-ui #battle.band-enter .team-button:nth-child(3){animation-delay:.32s}
 html body.in-battle.band-ui #battle.band-enter .team-button:nth-child(4){animation-delay:.37s}
 html body.in-battle.band-ui #battle.band-enter .team-button:nth-child(5){animation-delay:.42s}
 html body.in-battle.band-ui #battle.band-enter .team-button:nth-child(6){animation-delay:.47s}
 html body.in-battle.band-ui #battle.band-enter #abilities .ability{animation:band-in-up .65s cubic-bezier(.2,.8,.25,1) backwards}
 html body.in-battle.band-ui #battle.band-enter #abilities .ability:nth-child(1){animation-delay:.34s}
 html body.in-battle.band-ui #battle.band-enter #abilities .ability:nth-child(2){animation-delay:.42s}
 html body.in-battle.band-ui #battle.band-enter #abilities .ability:nth-child(3){animation-delay:.5s}
 html body.in-battle.band-ui #battle.band-enter #abilities .ability:nth-child(4){animation-delay:.58s}
 html body.in-battle.band-ui #battle.band-enter .combat-dock .dash-panel{animation:band-in-up .65s cubic-bezier(.2,.8,.25,1) .68s backwards}
 html body.in-battle.band-ui #battle.band-enter .band-menu{animation:band-in-pop .55s cubic-bezier(.2,.8,.25,1) .8s backwards}
}

/* ---------- abertura: sem dica de pular / nome da arena / linha da borda; interface surge junto com a descida da tarja ---------- */
html body.battle-intro.band-ui .field-label{display:none}
html body.battle-intro.band-ui #game-frame{border-color:transparent}
html body.battle-intro-end.band-ui .arena-hud,html body.battle-intro-end.band-ui .battle-bottom{visibility:visible;pointer-events:auto}
html body.battle-intro-end.band-ui .band-menu{opacity:1;pointer-events:auto}
html body.battle-intro-end.band-ui #battle-controls{opacity:1;pointer-events:auto}
html body.battle-intro-end.band-ui #game-frame{border-color:#0f2b3f}
html body.in-battle.band-ui #game-frame{transition:border-color .4s ease-out}

/* ---------- anel de vida da equipe: rastro de dano + golpe ---------- */
html body.in-battle.band-ui .combat-dock .team-button{transition:transform .15s cubic-bezier(.2,.8,.2,1),filter .15s,opacity .2s,--hpt .6s cubic-bezier(.45,0,.9,.5) .5s}
html body.in-battle.band-ui .combat-dock .team-button::before{background:conic-gradient(var(--hpc) calc(var(--hp)*1%),#d62828 0 calc(var(--hpt)*1%),#0f2a40 0)}
@media(prefers-reduced-motion:no-preference){
 @keyframes band-card-hit{0%{translate:0 0;filter:brightness(2.4)}18%{translate:-3px 0}36%{translate:3px 0;filter:brightness(1.4)}56%{translate:-2px 0}100%{translate:0 0;filter:none}}
 html body.in-battle.band-ui .combat-dock .team-button.hp-hit{animation:band-card-hit .42s linear}
}
html body.in-battle.band-ui .combat-dock .team-button::before{background:conic-gradient(var(--hpc) calc(var(--hp)*1%),rgb(4 16 26/clamp(0,calc((var(--hpt) - var(--hp))*1),1)) 0 calc(var(--hp)*1% + 2%),#d62828 0 calc(var(--hpt)*1%),#0f2a40 0)}