/* =========================================================
   MYTHVERSE · Console de batalha (carregado por último)
   Nada do comando fica sobre o campo: abaixo do palco vai o console, em duas linhas.
     1. Heróis: quatro molduras (retrato, vida, energia, efeitos e o botão da ultimate de cada um).
     2. Comando, o foco da tela: Pontos de Técnica, as ações de quem age (ícones pintados) e, depois de um fio, a
        Guarda da equipe · ao lado, menor, o alvo: vida, Resistência, fraquezas e a intenção dele.
   Quem comanda a luta (AUTO, SEMI, MANUAL) fica no botão COMANDO do palco; poção e elixir, no MAIS.
   Marcação criada por src/battle-hud.js. Identidade Sumi: laca escura, papel, um acento vermelho-laca para a ação
   e ouro só para valor (energia cheia, ultimate pronta). Selos, teclas e barras de canto reto e tinta chapada.
   Tamanhos (largura do console, que é a do palco):
     acima de 1130   largo: mais folga para a equipe e para o alvo
     890 a 1130      normal
     até 889         estreito (janela baixa no PC): molduras compactas, a fila dos heróis de ponta a ponta
     até 720         PC bem estreito: o alvo cede 30px para a barra do herói
     tela até 900    uma coluna (celular e tablet em pé): alvo · heróis · comando, com a Guarda junto do polegar
   Em janela larga e baixa os heróis saem da linha 1 e vão para uma coluna à esquerda do palco (body.bh-l). Também quando
   o console embaixo teria menos de 640 (960 × 540, 1366 × 520): ali a barra de ações caía para 10 a 18px por botão.
   ========================================================= */

/* ---------- ícones pintados ---------- */
.pk{display:inline-block;width:1em;height:1em;flex:none;background-repeat:no-repeat;background-size:500% 100%}
.kj .pi,.cls .pi,small .pi,b .pi{vertical-align:-.18em}

/* ---------- o que sai do palco na luta ---------- */
#battle-hud{display:none}
body.in-combat #battle-hud{display:block}
body.in-combat #party-strip,body.in-combat #consumables,body.in-combat #turn-cmd,body.in-combat #journey-cta{display:none!important}
@media (min-width:901px){
  body.in-combat{--dock-h:168px}
  body.in-combat .stage-col{gap:6px}
  /* controles do palco: PREPARAR, COMANDO, VEL, MAIS e VOLTAR, sempre no mesmo lugar. O que o MAIS abre (AFK, AVANÇO,
     poção, elixir) desce numa fila logo abaixo, alinhada à direita, como no celular: a fila de cima não anda nem estoura o
     palco estreito */
  body.in-combat .stage-controls{position:relative}
  body.in-combat .stage-controls>#boost-btn{order:1}
  body.in-combat .stage-controls>#mode-btn{order:2}
  body.in-combat .stage-controls>#speed-btn{order:3}
  body.in-combat .stage-controls>#adv-ctl-btn{order:4}
  body.in-combat .stage-controls>#retreat-btn{order:5}
  body.in-combat .stage-controls.adv-open :is(#afk-btn,#advance-btn,#bh-potion,#bh-elixir){position:absolute;z-index:20;top:calc(100% + 6px);min-width:0!important;padding:0 6px!important;border:1px solid var(--line2)!important;border-radius:3px;background:#17141e!important;box-shadow:0 3px 0 rgba(0,0,0,.5)!important}
  body.in-combat .stage-controls.adv-open :is(#afk-btn,#advance-btn,#bh-potion,#bh-elixir):hover:not(:disabled){background:#221e2b!important;border-color:rgba(238,229,208,.32)!important}
  body.in-combat .stage-controls.adv-open #advance-btn.active{background:#251f17!important;border-color:rgba(216,176,98,.55)!important}
  body.in-combat .stage-controls.adv-open #afk-btn.active{background:#211c30!important;border-color:#9d90c9!important}
  body.in-combat .stage-controls.adv-open #afk-btn{right:0;width:66px}
  body.in-combat .stage-controls.adv-open #advance-btn{right:70px;width:66px}
  body.in-combat .stage-controls.adv-open #bh-elixir{right:140px;width:50px}
  body.in-combat .stage-controls.adv-open #bh-potion{right:194px;width:50px}
  /* sem AVANÇO (chefe, masmorra, AFK ligado) a fila fecha o buraco */
  body.in-combat .stage-controls.adv-open:has(#advance-btn:is([hidden],.afk-hide)) #bh-elixir{right:70px}
  body.in-combat .stage-controls.adv-open:has(#advance-btn:is([hidden],.afk-hide)) #bh-potion{right:124px}
}
/* AVANÇO escondido (fora da caçada, ou com o AFK ligado) continua escondido com o MAIS aberto: a regra que abre o MAIS
   (theme-sumi.css:638) passava por cima do [hidden] */
body.in-combat .stage-controls.adv-open #advance-btn:is([hidden],.afk-hide){display:none!important}
/* poção e elixir no MAIS: ícone pintado em cima, a quantidade embaixo (como VEL e x1); a recarga escurece o ícone */
.bh-item{display:none;position:relative}
body.in-combat .stage-controls.adv-open .bh-item{display:flex!important}
.bh-item .ab-ic{position:relative;display:block;width:22px;height:22px;border:0;background:none;box-shadow:none}
.bh-item .ab-ic>.pi,.bh-item .ab-ic>i{position:absolute;inset:0;width:100%;height:100%}
.bh-item .ab-cd{position:absolute;inset:0;border-radius:2px;background:conic-gradient(rgba(8,7,12,.8) calc(var(--cd,0)*1turn),transparent 0);pointer-events:none}
.bh-item .ab-count{position:static;min-width:0;padding:0;background:none;font-variant-numeric:tabular-nums}
/* sem estoque ou em recarga: o botão continua inteiro e opaco (no celular ele abre por cima do palco); só a tinta apaga */
.bh-item:disabled{cursor:default;opacity:1}
.bh-item:disabled .ab-ic{filter:grayscale(.85) brightness(.8)}
.bh-item:disabled .ab-count{color:var(--muted)!important}
/* janela baixa: o palco fica com menos de 890 de largura e o console vai para o desenho estreito, que é 11px mais alto */
@media (min-width:901px) and (max-height:778px){
  body.in-combat{--dock-h:180px}
}

/* luta de chefe: a placa do chefe toma o alto do palco. No PC a região sai (o nome do lugar não disputa espaço com a
   vida do chefe); no celular fica só o nome, numa linha (a fase já está na placa). */
body.in-combat .stage-top:has(.boss-panel:not([hidden])) .zone-meta{display:none}
body.in-combat .stage-top:has(.boss-panel:not([hidden])) .zone-chip h1{margin:0;white-space:nowrap}
body.in-combat .boss-panel{min-width:0}
@media (min-width:901px){
  body.in-combat .stage-top:has(.boss-panel:not([hidden])) .zone-chip{display:none}
  #viewport:has(.boss-panel:not([hidden])) .turn-bar{top:100px}       /* a ordem começa abaixo da placa do chefe */
}
@media (max-height:700px) and (min-width:901px){
  #viewport:has(.boss-panel:not([hidden])) .turn-bar{top:94px}
}
/* ---------- celular e tablet: a barra do topo vira a BARRA DA BATALHA ----------
   Região e onda à esquerda, controles da luta à direita (src/hud.js move as duas peças para cá). O palco pequeno fica
   só com a luta: no alto dele sobra a ordem das ações e, em luta de chefe, a placa do chefe. */
@media (max-width:900px){
  body.in-combat .hud-top>.brand,body.in-combat .hud-top>.player-chip,body.in-combat .hud-top>.resources,body.in-combat .hud-top>.top-actions{display:none!important}
  body.in-combat .hud-top{gap:8px;padding:0 6px 0 10px}
  /* avisos que chegam sozinhos (servidor, save, recompensa): descem para o alto do palco, à esquerda, longe da ordem das ações
     e da linha da luta; a posição posta por ui.js (a faixa dos recursos, que aqui não existe) não vale */
  body.in-combat .hud-top>.hud-notice{top:calc(100% + 8px)!important;bottom:auto!important;left:10px!important;right:auto!important;z-index:15;max-width:calc(100% - 160px)}
  body.in-combat .hud-top>.hud-notice .hn{max-height:none;background:#1d1a26;border-color:rgba(238,229,208,.18);box-shadow:0 2px 0 rgba(0,0,0,.45)}
  body.in-combat .hud-top>.hud-notice .hn-msg{-webkit-line-clamp:4}
  body.in-combat:has(.boss-panel:not([hidden])) .hud-top>.hud-notice{top:calc(100% + 68px)!important}   /* abaixo da placa do chefe */
  .hud-top .zone-chip.in-top{flex:1 1 0;min-width:0;max-width:none!important;display:grid;gap:3px;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
  .hud-top .zone-chip.in-top h1{margin:0!important;font:800 12.5px/1.12 var(--display)!important;color:var(--washi);white-space:normal!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:clip;text-wrap:balance}
  .hud-top .zone-chip.in-top .zone-kicker,.hud-top .zone-chip.in-top #power-check{display:none!important}
  /* estágio e onda: o que não couber na linha some inteiro (quebra para uma linha escondida), nunca cortado ao meio */
  .hud-top .zone-chip.in-top .zone-meta{display:flex!important;flex-wrap:wrap;gap:3px;max-height:17px;overflow:hidden;margin:0}
  .hud-top .zone-chip.in-top .zone-meta span{display:inline-block!important;flex:none;padding:2px 7px!important;border-radius:3px;font:700 10px/13px var(--ui)!important;white-space:nowrap}
  .hud-top .zone-chip.in-top #wave-label{order:-1}
  .hud-top .stage-controls.in-top{position:relative;flex:none;display:flex;align-items:center!important;gap:3px;margin:0;padding:0!important;width:auto;background:none!important;border:0!important;box-shadow:none!important}
  body .hud-top .stage-controls.in-top .ctl{position:relative;flex:none;display:flex!important;flex-direction:column!important;justify-content:center;gap:2px!important;min-width:42px!important;height:42px!important;padding:0 6px!important;border-radius:4px;background:#16141d;border:1px solid var(--line2)}
  body .hud-top .stage-controls.in-top .ctl span{display:block!important;font:700 7.5px/1 var(--ui)!important;letter-spacing:.06em!important;color:var(--dim)}
  body .hud-top .stage-controls.in-top .ctl b{display:block!important;font:800 11.5px/1 var(--ui)!important;letter-spacing:0!important;color:var(--washi)}
  body .hud-top .stage-controls.in-top #boost-btn{min-width:42px!important;padding:0 4px!important;border-color:var(--edge-gold)}
  body .hud-top .stage-controls.in-top #boost-btn b{display:none!important}
  body .hud-top .stage-controls.in-top #boost-btn .pi{width:24px;height:24px}
  body .hud-top .stage-controls.in-top #mode-btn{min-width:60px!important}
  body .hud-top .stage-controls.in-top #mode-btn b{color:var(--gold-hi)}
  body .hud-top .stage-controls.in-top #city-focus-btn,body .hud-top .stage-controls.in-top .journey-cta{display:none!important}
  /* MAIS: AFK, AVANÇO, poção e elixir abrem logo abaixo da barra (não cabem na linha) */
  body.in-combat .hud-top .stage-controls.in-top:not(.adv-open) :is(#advance-btn,#afk-btn,.bh-item){display:none!important}
  body.in-combat .hud-top .stage-controls.in-top.adv-open :is(#advance-btn,#afk-btn,.bh-item){position:absolute;z-index:20;top:calc(100% + 9px);min-width:76px!important;box-shadow:0 3px 0 rgba(0,0,0,.55)}
  body.in-combat .hud-top .stage-controls.in-top.adv-open #afk-btn{right:0}
  body.in-combat .hud-top .stage-controls.in-top.adv-open #advance-btn{right:80px}
  body.in-combat .hud-top .stage-controls.in-top.adv-open :is(#bh-potion,#bh-elixir){min-width:44px!important;width:44px;padding:0!important}
  body.in-combat .hud-top .stage-controls.in-top.adv-open #bh-elixir{right:160px}
  body.in-combat .hud-top .stage-controls.in-top.adv-open #bh-potion{right:208px}
  body.in-combat .hud-top .stage-controls.in-top.adv-open:has(#advance-btn:is([hidden],.afk-hide)) #bh-elixir{right:80px}
  body.in-combat .hud-top .stage-controls.in-top.adv-open:has(#advance-btn:is([hidden],.afk-hide)) #bh-potion{right:128px}
  /* alto do palco: só a ordem das ações (à direita) e, em luta de chefe, a placa do chefe acima dela */
  body.in-combat .boss-panel{top:4px}
  #viewport:has(.boss-panel:not([hidden])) .turn-bar,body.boss-combat #viewport:has(.boss-panel:not([hidden])) .turn-bar{top:66px}
}
/* celular estreito: o nome do chefe inteiro vale mais que o rótulo do tipo */
@media (max-width:520px){
  body.in-combat .boss-line #boss-kind{display:none}
  body.in-combat .boss-line strong{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 12px),transparent)}
}

/* ---------- base ---------- */
.bhud{container:bhud/inline-size;width:var(--stage-w);flex:none;min-width:0;color:var(--text);font-family:var(--ui);user-select:none;-webkit-user-select:none}
.bh-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;grid-template-areas:"party party" "mid target";gap:6px;min-width:0}
.bh-party{grid-area:party}.bh-mid{grid-area:mid}.bh-target{grid-area:target}
.bhud button{font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bhud button:disabled{cursor:default}
.bh-panel{background:#17141e;border:1px solid var(--line2);border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 0 rgba(0,0,0,.35)}
.bhud kbd{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:2px;font:700 10px/1 var(--ui);color:#1c1508;background:var(--gold);box-shadow:inset 0 -2px 0 rgba(0,0,0,.28),0 1px 0 rgba(0,0,0,.5)}
.bhud .sm{display:none}

/* ---------- 1. heróis ---------- */
.bh-party{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-width:0}
.bh-unit{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) 44px;align-items:center;gap:8px;padding:6px 7px;min-width:0;transition:border-color .15s,box-shadow .15s}
/* de quem são as ações da barra: um entalhe liga a moldura ao comando logo abaixo */
.bh-unit.acting{border-color:#5d5568}
.bh-unit.acting::after{content:"";position:absolute;z-index:1;left:50%;bottom:-7px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#5d5568}
.bh-unit.turn{border-color:var(--shu-hi);box-shadow:inset 0 0 0 1px var(--shu),0 2px 0 rgba(0,0,0,.35)}
.bh-unit.turn::after{border-top-color:var(--shu-hi)}
.bh-unit.dead{filter:grayscale(.95);opacity:.55}
.bh-unit.hurt{animation:bhHurt .28s}
@keyframes bhHurt{0%{transform:translateX(0)}30%{transform:translateX(-3px)}65%{transform:translateX(2px)}100%{transform:none}}
.bh-face{position:relative;width:46px;height:46px;padding:0;border-radius:4px;overflow:hidden;border:2px solid color-mix(in srgb,var(--hc,#888) 62%,#14121b);background:var(--bg2)}
.bh-face img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block}
.bh-face em{position:absolute;right:0;bottom:0;padding:1px 4px 1px 5px;border-top-left-radius:3px;font:700 10px/1.2 var(--ui);font-style:normal;color:var(--washi);background:rgba(10,9,14,.86)}
.bh-vit{min-width:0;display:grid;gap:3px}
.bh-vit header{display:flex;align-items:center;gap:4px;min-width:0;height:17px}
/* o nome some num esfumado quando os efeitos pedem o lugar (nunca reticências no meio do nome) */
.bh-vit header b{flex:1 1 0;min-width:0;font:700 12px/17px var(--ui);white-space:nowrap;overflow:hidden;color:var(--washi);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 8px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 8px),transparent)}
.bh-fx{display:flex;flex-wrap:wrap;gap:2px;flex:none;max-width:74px;max-height:17px;overflow:hidden}   /* a fila quebra e o resto some: nunca meio ícone */
.bh-fx.row,.bh-tags{display:none;gap:2px;flex:none}
.bh-tags .pi{width:16px;height:16px}
.bh-tags .tx{display:none;margin:0 7px 0 1px;font:600 11px/16px var(--ui);font-style:normal;color:var(--muted)}
.bh-fx .pi,.bt-fx .pi{width:17px;height:17px}
.bh-hp{position:relative;height:13px;border-radius:2px;background:#0a090e;border:1px solid rgba(0,0,0,.6);overflow:hidden}
.bh-hp .fill{position:absolute;inset:0 auto 0 0;width:100%;background:#86a86e;border-radius:1px;transition:width .18s}
.bh-hp.low .fill{background:var(--shu)}
.bh-hp .sh{position:absolute;top:0;bottom:0;background:#54688e;opacity:.85}
.bh-hp em{position:absolute;right:5px;top:0;font:700 10px/12px var(--ui);font-style:normal;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 0 #000,0 0 3px #000}
.bh-hp em small{display:none;font:inherit;font-weight:600;opacity:.72}   /* a vida máxima: a barra já mostra quanto falta */
.bh-en{height:5px;border-radius:1px;background:#0a090e;overflow:hidden}
.bh-en i{display:block;height:100%;width:0;background:var(--gold2);border-radius:1px;transition:width .18s}
.bh-unit.ultready .bh-en i{background:var(--gold-hi)}
.bh-ult{position:relative;width:44px;height:44px;padding:0;border-radius:4px;border:2px solid #2c2838;background:#0f0d15;overflow:visible}
.bh-ult .pk,.bh-ult .pi{position:absolute;inset:0;width:100%;height:100%;border-radius:3px}
.bh-ult:not(.ready) .pk,.bh-ult:not(.ready) .pi{filter:grayscale(.7) brightness(.9)}
.bh-ult::after{content:"";position:absolute;inset:0;border-radius:3px;background:rgba(8,7,12,.5);transform-origin:top;transform:scaleY(calc(1 - var(--nrg,0)));transition:transform .2s}
.bh-ult kbd{position:absolute;left:-5px;top:-6px;z-index:2}
.bh-ult .pct{position:absolute;right:3px;bottom:2px;z-index:2;font:800 10px/1 var(--ui);color:var(--washi);text-shadow:0 1px 0 #000,0 0 3px #000}
.bh-ult.ready{border-color:var(--gold-hi);animation:bhReady 1.4s steps(8,end) infinite}
.bh-ult.ready .pct{display:none}
/* Elo Kizuna aberto: o botão de quem pode continuar a corrente mostra o bônus */
.bh-ult.chain .pct{display:block;right:-4px;bottom:-5px;padding:1px 4px;border-radius:3px;font-size:9.5px;color:#231405;text-shadow:none;background:var(--gold-hi);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.bh-ult.ready:hover{transform:translateY(-2px)}
.bh-ult.fired{animation:abFire .32s}
/* pronta: um aro de ouro escuro que entra e sai em passos, tinta chapada (sem halo translúcido) */
@keyframes bhReady{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 3px var(--gold-lo)}}

/* ---------- 2. o comando: Pontos de Técnica · ações de quem age · Guarda da equipe ---------- */
/* a fila (técnica, barra, Guarda) fica junta no meio do painel, como a barra de atalhos de um jogo; as sobras dos lados
   são calmas. Botões de 60: o painel continua com 105 de altura (o que battle-hud.js mede) porque a folga sai do respiro */
.bh-mid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);grid-template-areas:". sp bar team ." ". info info info .";align-items:center;align-content:center;gap:4px 14px;padding:7px 14px 2px;min-width:0}
/* a Guarda vale a qualquer momento e é de todos: fica no mesmo painel, depois de um fio, um tamanho abaixo da barra */
.bh-team{grid-area:team;display:flex;align-items:center;gap:6px;min-width:0;align-self:stretch;padding-left:14px;border-left:1px solid var(--line2)}
.bh-team .ab{flex:0 0 46px}
.bh-team .ab-ic{border-radius:4px}
.bh-team .ab kbd{left:-4px;top:-6px}
.bh-team .ab.guard kbd{left:50%;top:auto;bottom:-7px;transform:translateX(-50%);font-size:9px}   /* ESPAÇO é largo: vai embaixo, centrado */
.bh-sp{grid-area:sp;display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:6px 5px}
.bh-sp .lbl{font:800 9px/1 var(--ui);letter-spacing:.08em;color:var(--dim)}
.bh-sp .beads{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,17px);justify-content:center;gap:3px}
.bh-sp .beads i{width:17px;height:17px}
.bh-sp .beads i.off{border-radius:50%;box-shadow:inset 0 0 0 2px #2b2836;background:#100e15;transform:scale(.8)}
.bh-sp .beads i.gain{animation:bhBead .35s}
@keyframes bhBead{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:none}}
.bh-sp b{font:800 12px/9px var(--ui);font-variant-numeric:tabular-nums;color:var(--cyan)}
/* barra de ações: o botão é só o ícone (nome e descrição ficam na linha de baixo e na dica); encolhe com o console */
.bh-bar{grid-area:bar;display:flex;align-items:flex-start;justify-content:center;gap:8px;min-width:0}
.ab{position:relative;display:block;flex:0 1 56px;min-width:0;padding:0;background:none;border:0}
.bh-bar .ab{flex-basis:60px}
/* no PC a fila mora em colunas "auto" da grade: elas enxergam a largura declarada, não a base do flex */
@media (min-width:901px){
  .bh-bar .ab{width:60px}
  .bh-team .ab{width:46px}
  @container bhud (max-width:889px){
    .bh-bar .ab{width:56px}
    .bh-team .ab{width:44px}
  }
  @container bhud (max-width:720px){
    .bh-team .ab{width:40px}
  }
}
.ab-ic{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:4px;border:2px solid #2c2838;background:#0f0d15;box-shadow:0 3px 0 rgba(0,0,0,.5);transition:transform .08s,border-color .12s}
.ab-ic>i{position:absolute;inset:0;width:100%;height:100%;border-radius:4px}
.ab-ic>i.pi{inset:4px;width:auto;height:auto;border-radius:0}
.ab kbd{position:absolute;left:-4px;top:-5px;z-index:2}
.bh-bar .ab[data-ab="attack"] kbd{left:50%;transform:translateX(-50%);font-size:9px}   /* ESPAÇO é largo: centrado em cima do botão */
/* console estreito (950 × 620): o botão tem 39px e o ESPAÇO em cima encostaria no 1. Desce para baixo do botão, como o da
   Guarda (o Atacar não tem contas de custo, o lugar está livre), e afina meio ponto para não passar do vão de 6px quando o
   botão desce a 33px (janela de 935 × 600) */
@container bhud (max-width:720px){
  .bh-bar .ab[data-ab="attack"] kbd{top:auto;bottom:-7px;padding:0 3px;font-size:8.5px}
}
.ab-cost{position:absolute;right:-4px;bottom:-4px;z-index:2;display:flex;gap:1px;padding:2px 3px;border-radius:3px;background:rgba(10,9,14,.94);box-shadow:0 0 0 1px #2c2838}
.ab-cost i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)}
.ab-name{display:none}
.ab:not(:disabled):hover .ab-ic,.ab:focus-visible .ab-ic{transform:translateY(-2px);border-color:var(--gold)}
.ab:not(:disabled):active .ab-ic{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.ab:disabled .ab-ic>i{filter:grayscale(.9) brightness(.52)}
.ab.nosp .ab-cost i{background:var(--shu)}
.ab-veil{position:absolute;inset:0;z-index:1;display:none;place-items:center;border-radius:4px;font:800 20px/1 var(--ui);color:var(--washi);text-shadow:0 2px 0 #000;background:rgba(8,7,12,.5)}
.ab.rest .ab-veil,.ab.locked .ab-veil{display:grid}
.ab.locked .ab-veil{font:700 10px/1.1 var(--ui);text-align:center;color:var(--washi)}
.ab.locked .ab-veil .pi{display:block;width:22px;height:22px;margin:0 auto 1px}
.ab.ult .ab-ic{border-color:#3a3320}
.ab.ult.ready .ab-ic{border-color:var(--gold-hi);animation:bhReady 1.4s steps(8,end) infinite}
.ab.ult:not(.ready) .ab-ic>i{filter:grayscale(.7) brightness(.9)}
.ab.ult .ab-ic::after{content:"";position:absolute;inset:0;border-radius:4px;background:rgba(8,7,12,.5);transform-origin:top;transform:scaleY(calc(1 - var(--nrg,0)))}
.ab.used .ab-ic{animation:abFire .32s}
@keyframes abFire{0%{transform:scale(1)}35%{transform:scale(1.14);border-color:#fff}100%{transform:none}}
.ab.flash .ab-ic{border-color:var(--gold-hi)}
.ab-count{position:absolute;z-index:2;min-width:16px;padding:1px 3px;border-radius:2px;font:800 10px/1.2 var(--ui);text-align:center;color:var(--washi);background:rgba(10,9,14,.92)}
.ab-cd{position:absolute;inset:0;z-index:1;border-radius:3px;background:conic-gradient(rgba(8,7,12,.78) calc(var(--cd,0)*1turn),transparent 0);pointer-events:none}
.ab.guard.alert .ab-ic{border-color:var(--shu-hi);animation:bhAlert .5s steps(4,end) infinite alternate}
.ab.guard.up .ab-ic{border-color:var(--gold-hi)}
@keyframes bhAlert{from{box-shadow:0 3px 0 rgba(0,0,0,.5),0 0 0 0 transparent}to{box-shadow:0 3px 0 rgba(0,0,0,.5),0 0 0 3px var(--shu-lo)}}
/* linha de informação: duas linhas reservadas (o console nunca muda de altura com o texto) */
.bh-info{grid-area:info;display:grid;align-items:center;justify-items:center;margin:0;min-width:0;height:30px;font:500 12px/15px var(--ui);color:var(--muted);text-align:center}
.bh-info>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;overflow:hidden}
.bh-info b{color:var(--washi);font-weight:700}
.bh-info .pt{color:var(--cyan);font-weight:700}
.bh-info .why{color:var(--shu-hi);font-weight:700}
.bh-info .say{color:var(--washi)}
.bh-info .say.gold b{color:var(--gold-hi)}
.bh-info .say.red{color:#ffb9a6}
.bh-info kbd{vertical-align:1px}
.bhud[data-state="auto"] .bh-bar .ab:not(.ult) .ab-ic>i{filter:grayscale(.45) brightness(.78)}
.bhud[data-state="auto"] .bh-bar .ab.flash .ab-ic>i{filter:none}
/* Assalto Total: toma o lugar da linha de informação (não cobre a barra nem o palco) */
.bh-allout{position:absolute;z-index:5;left:12px;right:12px;bottom:3px;display:flex;align-items:center;justify-content:center;gap:10px;height:32px;padding:0 14px;border-radius:3px;border:2px solid var(--gold-hi);background:var(--shu);box-shadow:0 3px 0 rgba(0,0,0,.5);font:800 14px/1 var(--display);letter-spacing:.08em;color:#fff3dc;white-space:nowrap;animation:bhAll .7s steps(6,end) infinite alternate}
.bh-allout[hidden]{display:none}
.bh-allout .pi{width:26px;height:26px}
.bh-allout small{font:600 11px/1 var(--ui);letter-spacing:0;color:#ffd9c2}
.bh-allout:hover{background:var(--shu-hi)}
.bhud.allout .bh-info>span{visibility:hidden}
@keyframes bhAll{from{box-shadow:0 3px 0 rgba(0,0,0,.5),0 0 0 0 transparent}to{box-shadow:0 3px 0 rgba(0,0,0,.5),0 0 0 3px var(--shu-lo)}}

/* ---------- 2c. o alvo ---------- */
.bh-target{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:15px 11px 12px;align-content:center;gap:3px 9px;padding:7px 10px;min-width:0;width:100%;text-align:left}
.bh-target.none{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;opacity:.5}
.bh-target.none .bt-row{justify-content:center}
.bt-thumb{grid-area:1/1/4/2;width:44px;height:44px;border-radius:4px;overflow:hidden;border:2px solid #7a3f37;background:#241a1c}
.bt-thumb{position:relative}
.bt-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.bt-thumb em{position:absolute;right:0;bottom:0;padding:1px 3px 0 4px;border-top-left-radius:3px;font:700 9.5px/1.2 var(--ui);font-style:normal;color:var(--washi);background:rgba(10,9,14,.86)}
.bt-name{grid-area:1/2;display:flex;align-items:center;gap:6px;min-width:0}
.bt-name b{flex:1 1 0;min-width:0;font:700 12.5px/15px var(--ui);color:var(--washi);white-space:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent)}
.bt-name small{flex:none;display:flex;align-items:center;gap:3px;font:600 10.5px/1 var(--ui);color:var(--muted);white-space:nowrap}
.bt-name small .pi{width:15px;height:15px}
.bt-name small .mark{margin-left:2px;border-radius:50%;box-shadow:0 0 0 1px var(--washi)}
.bt-hp{grid-area:2/2;position:relative;height:11px;border-radius:2px;background:#0a090e;border:1px solid rgba(0,0,0,.6);overflow:hidden}
.bt-hp i{position:absolute;inset:0 auto 0 0;background:var(--red);border-radius:1px;transition:width .18s}
.bt-hp em{position:absolute;right:5px;top:0;font:700 9.5px/10px var(--ui);font-style:normal;color:#fff;text-shadow:0 1px 0 #000,0 0 3px #000}
.bt-tough{grid-area:3/2;display:flex;align-items:center;gap:5px;height:12px;min-width:0}
.bt-tough .pi{width:14px;height:14px}
.bt-tough .segs{flex:1;display:flex;gap:2px;height:7px;min-width:0}
.bt-tough .segs i{flex:1;border-radius:1px;background:#2b2836}
.bt-tough .segs i.on{background:#e8dcc0}
.bt-tough .barx{flex:1;height:7px;border-radius:1px;background:#2b2836;overflow:hidden}
.bt-tough .barx i{display:block;height:100%;background:#e8dcc0}
.bt-tough.broken .segs i.on,.bt-tough.broken .barx i{background:var(--gold-hi)}
.bt-tough em{font:700 10px/1 var(--ui);font-style:normal;color:var(--muted);min-width:16px;text-align:right;font-variant-numeric:tabular-nums}
.bt-tough.broken em{color:var(--gold-hi)}
.bt-row{grid-column:1/-1;display:flex;align-items:center;gap:5px;min-width:0;height:17px;font:600 10.5px/1.2 var(--ui);color:var(--muted);white-space:nowrap;overflow:hidden}
.bt-row .pi{width:17px;height:17px}
.bt-row.weak{margin-top:1px}
.bt-row.weak .pi.hit{filter:none;border-radius:2px;box-shadow:inset 0 0 0 1.5px var(--gold-hi)}
/* Quebra em dobro: selo de ouro (o que é escolhido), colado ao ícone acertado; não lê como "2 escudos" */
.bt-row .x2{flex:none;margin-left:1px;padding:1px 4px;border-radius:2px;font:800 10px/13px var(--ui);color:#1d1206;background:var(--gold)}
.bt-row .half{color:var(--dim)}
.bt-row.intent{color:var(--washi)}
.bt-row.intent .txt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bt-row.intent.danger{color:var(--shu-hi)}
.bt-fx{display:flex;gap:2px;flex:none;margin-left:auto}

/* ---------- dica de ação (tooltip rico) ---------- */
.tip-kit{display:grid;gap:5px;min-width:200px;max-width:280px}
.tip-kit header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tip-kit header b{font:700 14px/1.2 var(--display);color:var(--washi)}
.tip-kit header small{font:800 9.5px/1 var(--ui);letter-spacing:.12em;color:var(--gold)}
.tip-kit .meta{display:flex;flex-wrap:wrap;gap:4px}
.tip-kit .meta span{padding:2px 6px;border-radius:2px;font:600 10.5px/1.3 var(--ui);color:var(--washi);background:rgba(236,226,208,.08)}
.tip-kit .meta span.cost{color:var(--cyan)}
.tip-kit p{margin:0;font:500 12px/1.42 var(--ui);color:var(--text)}
.tip-kit i.fl{font:500 11.5px/1.35 var(--display);color:var(--muted)}
.tip-kit .why{font:700 10.5px/1.3 var(--ui);color:var(--shu-hi)}

/* ---------- heróis ao lado do palco (janela larga e baixa: quase todo notebook e monitor) ----------
   A classe bh-l é posta por src/battle-hud.js quando a coluna cabe e o palco fica maior assim.
   Coluna de 250 + 6 de vão; embaixo do palco fica só o comando (106). */
@media (min-width:901px){
  body.in-combat.bh-l{--dock-h:106px}
  body.in-combat.bh-l .stage-col{--stage-w:min(calc(100% - 256px),calc((100dvh / var(--zf,1) - var(--top-h) - var(--dock-h) - 34px) * 16 / 9))}
  body.in-combat.bh-l #viewport{margin-left:256px}
  body.in-combat.bh-l .bhud{position:relative;width:calc(var(--stage-w) + 256px)}
  body.in-combat.bh-l .bh-grid{grid-template-areas:"mid target"}
  body.in-combat.bh-l .bh-party{position:absolute;left:0;bottom:calc(100% + 6px);width:250px;height:calc((100cqw - 256px) * 9 / 16);grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}   /* 100cqw = largura do console = palco + 256 */
  body.in-combat.bh-l .bh-unit{grid-template-columns:60px minmax(0,1fr) 50px;grid-template-rows:17px 16px 6px 20px;align-content:center;gap:4px 10px;padding:6px 10px}
  body.in-combat.bh-l .bh-vit{display:contents}
  body.in-combat.bh-l .bh-face{grid-area:1/1/5/2;align-self:center;width:60px;height:60px;border-radius:4px}
  body.in-combat.bh-l .bh-face em{font-size:11px;padding:2px 5px 1px 6px}
  body.in-combat.bh-l .bh-vit header{grid-area:1/2/2/4;gap:6px}
  body.in-combat.bh-l .bh-vit header b{font-size:13px}
  body.in-combat.bh-l .bh-vit header .bh-fx{display:none}
  body.in-combat.bh-l .bh-tags{display:flex}
  body.in-combat.bh-l .bh-hp{grid-area:2/2;height:16px;border-radius:2px}
  body.in-combat.bh-l .bh-hp em{font-size:10.5px;line-height:15px}
  body.in-combat.bh-l .bh-en{grid-area:3/2;height:6px}
  body.in-combat.bh-l .bh-fx.row{grid-area:4/2;display:flex;max-width:none}
  body.in-combat.bh-l .bh-ult{grid-area:2/3/5/4;align-self:center;width:50px;height:50px;border-radius:4px}
  /* comando estreito (até 889) com a coluna: a moldura continua a da coluna, sem herdar a compacta da fila (cabeça de 40px em
     coluna, nome centrado só com o primeiro nome, efeitos centrados em duas fileiras) */
  body.in-combat.bh-l .bh-vit header{flex-direction:row;justify-content:flex-start;height:17px;overflow:visible;container-type:normal}
  body.in-combat.bh-l .bh-vit header b{display:block;flex:1 1 0;width:auto;text-align:left}
  body.in-combat.bh-l .bh-vit header b .ln{display:inline}
  body.in-combat.bh-l .bh-fx.row{justify-content:flex-start;max-height:17px}
  /* coluna alta (monitor grande): moldura maior, com a classe e o elemento por extenso */
  body.in-combat.bh-l .bh-party{container:bhp/size}
  @container bhp (min-height:600px){
    body.in-combat.bh-l .bh-unit{grid-template-columns:68px minmax(0,1fr) 54px;grid-template-rows:auto 18px 7px 20px;gap:6px 12px;padding:8px 12px}
    body.in-combat.bh-l .bh-face{width:68px;height:68px;border-radius:4px}
    body.in-combat.bh-l .bh-face em{font-size:12px}
    body.in-combat.bh-l .bh-vit header{flex-wrap:wrap;height:auto;gap:3px 6px}
    body.in-combat.bh-l .bh-vit header b{flex:1 0 100%;font-size:15px;line-height:19px}
    body.in-combat.bh-l .bh-tags .tx{display:inline}
    body.in-combat.bh-l .bh-hp{height:18px;border-radius:2px}
    body.in-combat.bh-l .bh-hp em{font-size:11px;line-height:17px}
    body.in-combat.bh-l .bh-en{height:7px}
    body.in-combat.bh-l .bh-ult{width:54px;height:54px;border-radius:4px}
  }
  /* coluna baixa (palco de 400 a 640: a coluna entra para o comando não ficar estreito, battle-hud.js): cada moldura fica com 52
     a 85px de altura, e a de cima pede 83. Até 359 de coluna as barras afinam e retrato e ultimate encolhem; até 299 a fila
     dos efeitos sai da moldura (eles continuam sobre cada herói, no palco) e a ultimate sobe para o lado do nome */
  @container bhp (max-height:359px){
    body.in-combat.bh-l .bh-unit{grid-template-columns:52px minmax(0,1fr) 42px;grid-template-rows:16px 14px 5px 16px;gap:3px 9px;padding:4px 9px}
    body.in-combat.bh-l .bh-face{width:52px;height:52px}
    body.in-combat.bh-l .bh-hp{height:14px}
    body.in-combat.bh-l .bh-hp em{font-size:10px;line-height:13px}
    body.in-combat.bh-l .bh-en{height:5px}
    body.in-combat.bh-l .bh-ult{width:42px;height:42px}
  }
  @container bhp (max-height:299px){
    body.in-combat.bh-l .bh-unit{grid-template-columns:44px minmax(0,1fr) 40px;grid-template-rows:16px 13px 5px;padding:3px 8px}
    body.in-combat.bh-l .bh-face{grid-area:1/1/4/2;width:44px;height:44px}
    body.in-combat.bh-l .bh-vit header{grid-area:1/2/2/3}
    body.in-combat.bh-l .bh-fx.row{display:none}
    body.in-combat.bh-l .bh-ult{grid-area:1/3/4/4;width:40px;height:40px}
  }
  /* janela baixa demais até para a coluna (palco abaixo de 400): o console embaixo não fica mais estreito que 640, para a barra
     de ações manter 40px por botão; ele passa da largura do palco, centrado */
  body.in-combat:not(.bh-l) .bhud{min-width:min(100%,640px)}
  /* o entalhe aponta para o palco */
  body.in-combat.bh-l .bh-unit.acting::after{left:auto;right:-7px;top:50%;bottom:auto;margin:-6px 0 0;border:6px solid transparent;border-right:0;border-left-color:#5d5568}
  body.in-combat.bh-l .bh-unit.turn::after{border-left-color:var(--shu-hi)}
}

/* ---------- largo: mais folga para a equipe e para o alvo ---------- */
@container bhud (min-width:1131px){
  .bh-grid{grid-template-columns:minmax(0,1fr) 290px}
  .bh-bar{gap:10px}
}
/* ---------- estreito (janela baixa no PC): a equipe sobe para a linha dos heróis ---------- */
@container bhud (max-width:889px){
  .bh-grid{grid-template-columns:minmax(0,1fr) 230px;grid-template-areas:"party party" "mid target"}
  .bh-mid{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"sp bar team" "info info info";gap:5px 12px;padding:8px 12px 4px}
  .bh-bar .ab{flex-basis:56px}
  .bh-team{padding-left:12px}
  .bh-team .ab{flex:0 0 44px}
  /* alvo estreito: fica o selo ×2 colado ao ícone acertado ("Fraco:" e "Quebra" saem) */
  .bt-row.weak .lg{display:none}
  /* moldura compacta: retrato e ultimate em cima, vida e energia embaixo */
  .bh-unit{grid-template-columns:minmax(0,44px) minmax(0,1fr) 40px;grid-template-rows:40px auto auto;gap:3px 4px;padding:3px 3px 4px}
  .bh-vit{display:contents}
  .bh-face{grid-area:1/1;width:100%;height:40px;border-radius:3px}
  .bh-vit header{grid-area:1/2;height:40px;justify-content:center;overflow:hidden;container:bhfx/inline-size}
  .bh-vit header b{display:none}
  .bh-fx{flex:0 1 auto;min-width:0;max-width:100%;justify-content:center;max-height:36px}
  .bh-ult{grid-area:1/3;width:40px;height:40px}
  .bh-hp{grid-area:2/1/3/-1;height:12px}
  .bh-hp em{font-size:9.5px;line-height:11px}
  .bh-en{grid-area:3/1/4/-1;height:4px}
}
/* moldura compacta com folga (a fila dos heróis de ponta a ponta, no PC estreito e no tablet): o primeiro nome volta,
   em cima dos efeitos, entre o retrato e a ultimate */
@container bhud (max-width:889px){
  .bh-vit header{flex-direction:column;align-items:center;gap:3px}
}
/* PC bem estreito (janela de 950 × 620): o alvo cede 30px e os respiros encolhem, para os botões da barra não ficarem
   menores do que eram quando a Guarda morava na fila dos heróis */
@container bhud (max-width:720px){
  .bh-grid{grid-template-columns:minmax(0,1fr) 200px}
  .bh-mid{gap:5px 10px;padding:8px 10px 4px}
  .bh-bar{gap:6px}
  .bh-team{padding-left:10px}
  .bh-team .ab{flex:0 0 40px}
}
/* alvo do PC estreito: o nome inteiro vale mais que o selo do elemento (o elemento e a marca já aparecem sobre o
   inimigo, no palco). Com 230px o nome ganha 21px; com 200px o retrato também desce para 34 e o nome para 12px, o
   tamanho do nome dos heróis: "Sentinela de Musgo" (134px) cabe nos 143 que sobram; nome mais longo some no esfumado */
@media (min-width:901px){
  @container bhud (max-width:889px){
    .bt-name small{display:none}
  }
  @container bhud (max-width:720px){
    .bh-target{grid-template-columns:34px minmax(0,1fr);column-gap:7px;padding:7px}
    .bt-thumb{width:34px;height:34px;align-self:center;border-radius:3px}
    .bt-name b{font-size:12px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 10px),transparent)}
  }
}
@container bhfx (min-width:64px){
  .bh-vit header b{display:block;flex:none;width:100%;max-width:100%;text-align:center}
  .bh-vit header b .ln{display:none}
}
/* moldura compacta sem vão entre o retrato e a ultimate (celular): os efeitos ficam só no palco */
@container bhfx (max-width:16px){
  .bh-fx{display:none}
}
/* ---------- uma coluna (celular e tablet em pé): alvo · heróis · comando ---------- */
@media (max-width:900px){
  body.in-combat #battle-hud{width:100%;margin-top:5px}
  .bh-grid{display:flex;flex-direction:column;gap:5px}
  .bhud kbd{display:none}
  .bh-party{gap:4px}
  /* alvo: vida e Resistência à esquerda, fraquezas e intenção à direita */
  .bh-target{order:-1;grid-template-columns:34px minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:17px 17px;align-items:center;gap:3px 9px;padding:5px 9px 5px 6px}
  .bh-target.none{grid-template-columns:minmax(0,1fr);grid-template-rows:37px}
  .bt-thumb{grid-area:1/1/3/2;width:34px;height:34px;border-radius:3px}
  .bt-name{display:none}
  .bt-hp{grid-area:1/2}
  .bt-tough{grid-area:2/2;height:14px}
  .bt-row.weak{grid-area:1/3;margin:0}
  .bt-row.intent{grid-area:2/3}
  /* comando: Pontos de Técnica e a Guarda na mesma linha; embaixo, a barra do herói */
  .bh-mid{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"sp team" "bar bar" "info info";gap:6px 8px;padding:6px 7px 5px}
  .bh-sp{display:flex;align-items:center;gap:6px}
  .bh-sp .beads{display:flex;gap:2px}
  .bh-sp b{order:3;font-size:14px;line-height:1}
  .bh-mid .bh-team{grid-area:team;justify-content:flex-end;gap:5px;align-self:center;padding-left:0;border-left:0}
  .bh-mid .bh-team .ab{flex:0 0 40px}
  .bh-mid .bh-team .ab-ic{box-shadow:0 2px 0 rgba(0,0,0,.5)}
  /* a Guarda é a segunda coisa da linha: tamanho fixo à direita, para não disputar com a barra do herói */
  .bh-mid .bh-team .ab.guard{display:flex;align-items:center;justify-content:center;gap:5px;flex:0 1 128px;min-width:0;height:40px;padding:0 9px 0 3px;border-radius:4px;border:2px solid #2c2838;background:#0f0d15;box-shadow:0 2px 0 rgba(0,0,0,.5)}
  .bh-mid .bh-team .ab.guard .ab-ic{flex:none;width:32px;border:0;border-radius:3px;background:none;box-shadow:none;animation:none;transform:none}
  .bh-mid .bh-team .ab.guard .ab-name{display:block;min-width:0;font:700 12.5px/1 var(--ui);color:var(--washi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bh-mid .bh-team .ab.guard:disabled .ab-name{color:var(--dim)}
  .bh-mid .bh-team .ab.guard.up{border-color:var(--gold-hi)}
  .bh-mid .bh-team .ab.guard.alert{border-color:var(--shu-hi);animation:bhAlert .5s steps(4,end) infinite alternate}
  .bh-mid .bh-team .ab.guard:not(:disabled):active{transform:translateY(2px);box-shadow:none}
  .bh-bar{gap:5px}
  .bh-bar .ab{flex:1 1 0;max-width:64px}
  .bh-info{font-size:11.5px}
  .bh-allout{left:7px;right:7px;height:40px;font-size:15px}
  .bhud.allout .bh-info{height:40px}
}
/* uma coluna com largura sobrando (tablet em pé, janela estreita no PC): Pontos de Técnica, ações do herói e ações da
   equipe numa linha só, de ponta a ponta, como uma barra de ações; a explicação ocupa a linha de baixo inteira. */
@media (max-width:900px){
  @container bhud (min-width:520px){
    .bh-mid{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"sp bar team" "info info info";gap:6px 12px;padding:8px 10px 5px}
    .bh-sp{display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:6px 5px}
    .bh-sp .lbl{display:block}
    .bh-sp .beads{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,17px);justify-content:center;gap:3px}
    .bh-sp b{order:0;font-size:12px;line-height:9px}
    .bh-bar{gap:6px}
    .bh-bar .ab{flex:1 1 0;max-width:64px}
    .bh-mid .bh-team{gap:6px;align-self:stretch;padding-left:12px;border-left:1px solid var(--line2)}
    .bh-mid .bh-team .ab{flex:0 0 46px}
    .bh-mid .bh-team .ab.guard{display:block;flex:0 0 46px;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
    .bh-mid .bh-team .ab.guard .ab-ic{width:100%;border:2px solid #2c2838;border-radius:4px;background:#0f0d15;box-shadow:0 2px 0 rgba(0,0,0,.5)}
    .bh-mid .bh-team .ab.guard .ab-name{display:none}
    .bh-mid .bh-team .ab.guard.up .ab-ic{border-color:var(--gold-hi)}
    .bh-mid .bh-team .ab.guard.alert{animation:none}
    .bh-mid .bh-team .ab.guard.alert .ab-ic{border-color:var(--shu-hi);animation:bhAlert .5s steps(4,end) infinite alternate}
  }
  /* com mais folga a Guarda volta a ter o nome (é o botão que mais se usa no susto) */
  @container bhud (min-width:680px){
    .bh-mid .bh-team .ab.guard{display:flex;align-items:center;gap:6px;flex:0 0 122px;height:46px;padding:0 10px 0 3px;border:2px solid #2c2838;border-radius:4px;background:#0f0d15;box-shadow:0 2px 0 rgba(0,0,0,.5)}
    .bh-mid .bh-team .ab.guard .ab-ic{flex:none;width:36px;border:0;background:none;box-shadow:none;animation:none}
    .bh-mid .bh-team .ab.guard .ab-name{display:block}
    .bh-mid .bh-team .ab.guard.up{border-color:var(--gold-hi)}
    .bh-mid .bh-team .ab.guard.alert{border-color:var(--shu-hi);animation:bhAlert .5s steps(4,end) infinite alternate}
    .bh-mid .bh-team .ab.guard.alert .ab-ic{animation:none}
  }
}
/* tela baixa: a linha de informação fica com uma linha só, para a barra caber sem rolar */
/* comando folgado (.roomy, posto por battle-hud.js quando sobra tela embaixo): duas linhas de ponta a ponta. Em cima, os
   Pontos de Técnica e a Guarda larga; embaixo, as seis ações do herói em botões grandes. */
@media (max-width:900px){
  @container bhud (min-width:520px) and (max-width:679.98px){
    .bhud.roomy .bh-mid{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"sp team" "bar bar" "info info";gap:8px 12px;padding:9px 10px 6px}
    .bhud.roomy .bh-sp{display:flex;align-items:center;gap:8px}
    .bhud.roomy .bh-sp .beads{display:flex;gap:3px}
    .bhud.roomy .bh-sp .beads i{width:20px;height:20px}
    .bhud.roomy .bh-sp b{order:3;font-size:16px;line-height:1}
    .bhud.roomy .bh-mid .bh-team{display:flex;justify-content:flex-end;gap:8px;align-self:center;padding-left:0;border-left:0}
    .bhud.roomy .bh-mid .bh-team .ab{flex:none;width:auto}
    .bhud.roomy .bh-mid .bh-team .ab.guard{display:flex;align-items:center;justify-content:center;gap:9px;flex:0 1 168px;height:52px;padding:0 12px;border:2px solid #2c2838;border-radius:4px;background:#0f0d15;box-shadow:0 2px 0 rgba(0,0,0,.5)}
    .bhud.roomy .bh-mid .bh-team .ab.guard .ab-ic{flex:none;width:38px;border:0;background:none;box-shadow:none;animation:none}
    .bhud.roomy .bh-mid .bh-team .ab.guard .ab-name{display:block;font:700 14px/1 var(--ui);color:var(--washi)}
    .bhud.roomy .bh-mid .bh-team .ab.guard.up{border-color:var(--gold-hi)}
    .bhud.roomy .bh-mid .bh-team .ab.guard.alert{border-color:var(--shu-hi);animation:bhAlert .5s steps(4,end) infinite alternate}
    .bhud.roomy .bh-mid .bh-team .ab.guard.alert .ab-ic{animation:none}
    .bhud.roomy .bh-bar{gap:8px}
    .bhud.roomy .bh-bar .ab{flex:1 1 0;max-width:none}
    .bhud.roomy .bh-bar .ab-ic{border-radius:4px}
    .bhud.roomy .bh-bar .ab-ic>i{border-radius:4px}
    .bhud.roomy .bh-bar .ab-ic>i.pi{inset:9px}
    .bhud.roomy .ab-cost{right:-3px;bottom:-3px;padding:3px 4px}
    .bhud.roomy .ab-cost i{width:10px;height:10px}
  }
}
/* celular alto (.roomy em console estreito): a folga que sobraria embaixo vira botões, barras e texto maiores */
@media (max-width:900px){
  @container bhud (max-width:519.98px){
    .bhud.roomy .bh-grid{gap:8px}
    /* moldura com o nome do herói numa linha própria */
    .bhud.roomy .bh-unit{grid-template-rows:40px 14px auto auto;gap:4px 4px;padding:4px 4px 5px}
    .bhud.roomy .bh-vit header{display:contents}
    .bhud.roomy .bh-vit header b{display:block;grid-area:2/1/3/-1;font:700 11px/14px var(--ui);text-align:center;-webkit-mask-image:none;mask-image:none;text-overflow:clip}
    .bhud.roomy .bh-vit header b .ln{display:none}                                 /* moldura estreita: só o primeiro nome */
    .bhud.roomy .bh-vit header .bh-fx{grid-area:1/2;align-self:center;justify-self:center}
    .bhud.roomy .bh-hp{grid-area:3/1/4/-1}
    .bhud.roomy .bh-en{grid-area:4/1/5/-1}
    /* alvo com o nome */
    .bhud.roomy .bh-target{grid-template-rows:16px 17px 17px}
    .bhud.roomy .bt-thumb{grid-area:1/1/4/2;align-self:center}
    .bhud.roomy .bt-name{display:flex;grid-area:1/2/2/4}
    .bhud.roomy .bt-hp{grid-area:2/2}
    .bhud.roomy .bt-tough{grid-area:3/2}
    .bhud.roomy .bt-row.weak{grid-area:2/3}
    .bhud.roomy .bt-row.intent{grid-area:3/3}
    .bhud.roomy .bh-hp{height:14px}
    .bhud.roomy .bh-hp em{font-size:10.5px;line-height:13px}
    .bhud.roomy .bh-en{height:5px}
    .bhud.roomy .bh-mid{gap:10px 8px;padding:10px 8px 8px}
    .bhud.roomy .bh-mid .bh-team .ab{flex:0 0 44px}
    .bhud.roomy .bh-mid .bh-team .ab.guard{flex:0 1 136px;height:44px}
    .bhud.roomy .bh-mid .bh-team .ab.guard .ab-ic{width:34px}
    .bhud.roomy .bh-info{height:48px;font-size:12.5px;line-height:16px}
    .bhud.roomy .bh-info>span{-webkit-line-clamp:3}
    .bhud.roomy.allout .bh-info{height:48px}
    .bhud.roomy .bh-allout{height:46px;font-size:16px}
  }
}
/* celular de 320: quatro molduras de 75px não cabem retrato, vão e ultimate de 40. Sai o vão dos efeitos (eles ficam no
   palco) e retrato e ultimate dividem a largura em dois quadrados de 32; o selo do nível cabe inteiro no retrato */
@media (max-width:900px){
  @container bhud (max-width:345px){
    .bh-party{gap:3px}
    .bhud .bh-unit{grid-template-columns:minmax(0,1fr) 32px;column-gap:3px;padding:3px 2px 4px}
    .bhud:not(.roomy) .bh-unit{grid-template-rows:32px auto auto}
    .bhud.roomy .bh-unit{grid-template-rows:32px 14px auto auto}
    .bhud .bh-unit .bh-face{grid-area:1/1;height:32px}
    .bhud .bh-unit .bh-ult{grid-area:1/2;width:32px;height:32px}
    .bhud:not(.roomy) .bh-unit .bh-vit header,.bhud .bh-unit .bh-vit header .bh-fx{display:none}
  }
}
/* tela baixa: o painel do alvo sai (vida, Resistência, fraqueza e intenção já estão na placa do inimigo, no palco) */
@media (max-width:900px) and (max-height:690px){
  .bh-target{display:none}
}
/* tela muito baixa: a explicação fica com uma linha só e as molduras encolhem, para a barra caber sem rolar */
@media (max-width:900px) and (max-height:610px){
  .bh-info{height:15px}
  .bh-info>span{-webkit-line-clamp:1}
  .bhud.allout .bh-info{height:40px}
}
/* ---------- console de celular: só o essencial de cada frase ---------- */
@container bhud (max-width:520px){
  .bhud .lg{display:none}
  .bhud .sm{display:inline}
  .bt-fx .pi:nth-child(n+3){display:none}
  .bh-sp .lbl{display:none}
}

/* celular de até 400: a linha das fraquezas (selo, quatro elementos, classe e ×½ ou ×2) cabe inteira na meia coluna do alvo */
@container bhud (max-width:400px){
  .bt-row{gap:3px}
  .bt-row .pi{width:15px;height:15px}
  .bt-row .x2{padding:1px 3px}
}

/* ---------- ficha do herói: kit com os ícones pintados ---------- */
.kit-art{flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:4px;overflow:hidden;background:#0f0d15;border:2px solid #2c2838}
.kit-art .pk,.kit-art .pi{width:100%;height:100%}
.kit-art .pi{width:38px;height:38px}
.kit-art .kit-ico{width:100%;height:100%;border-radius:0;display:grid;place-items:center}
.kit-row{align-items:flex-start}
.kit-row.locked{opacity:.62}
.kit-row.locked .kit-art .pk{filter:grayscale(.9) brightness(.6)}
.kit-fl{display:block;margin-top:3px;font:500 12px/1.35 var(--display);color:var(--muted)}

/* Passo (trocar de fileira): desenho no traço enquanto não há ícone pintado; mesma moldura dos outros botões da barra. */
.bh-bar .ab .ab-ic>i.ab-svg{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#2a2536,#191622);border-radius:inherit}
.bh-bar .ab .ab-svg svg{width:58%;height:58%;fill:none;stroke:var(--washi,#efe7d8);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bh-bar .ab:disabled .ab-svg svg{stroke:var(--dim,#9b9284)}
.bh-bar .ab.step:not(:disabled) .ab-svg svg{stroke:#f3e7cf}
.bt-row .half.fly{cursor:help}
.bt-row .half.trt{flex:none;cursor:help;color:#e9c8ff;font-weight:700}
.bt-row .trt .trt-s{display:none}
@container bhud (max-width:520px){.bt-row .trt .trt-l{display:none}.bt-row .trt .trt-s{display:inline}}
/* Fileira de cada herói no cartão da equipe (bandeira = frente, lanterna = retaguarda); troca com o Passo. */
.bh-tags .bh-row{display:inline-grid;place-items:center;margin-left:2px}
.bh-tags .bh-row:empty{display:none}
.bh-tags .bh-row .pi{width:18px;height:18px}
.bt-row .half.fly .pi{width:16px;height:16px;margin-right:3px;vertical-align:-3px}

/* ---------- [usabilidade] celular: nome curto sob os comandos fixos da luta (Atacar, Defender, Passo) ----------
   O nome vem do aria-label do botão, que já chega traduzido (src/i18n.js traduz o atributo). Habilidades e Ultimate têm o
   nome próprio no aria-label, comprido demais para caber sob o ícone: levam o nome curto em data-short (battle-hud.js põe,
   já traduzido e cortado por KT.Utils.shortLabel em até duas linhas de 8 letras). A caixa do nome tem a largura do botão
   mais o vão, então dois nomes vizinhos nunca se encostam, nem em 320 px. */
@media (max-width:900px){
  .bh-bar{margin-bottom:15px}
  .bh-bar .ab:is([data-ab="attack"],[data-ab="defend"],[data-ab="step"])::after{content:attr(aria-label);position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);font:700 9.5px/1 var(--ui);letter-spacing:.02em;color:var(--muted);white-space:nowrap;pointer-events:none}
  .bh-bar .ab[data-short]::after{content:attr(data-short);position:absolute;left:-2px;right:-2px;top:calc(100% + 6px);max-height:19px;overflow:hidden;font:700 9px/9.5px var(--ui);color:var(--muted);text-align:center;white-space:pre-line;pointer-events:none}
  .bh-bar .ab.ult.ready[data-short]::after{color:var(--gold-hi)}
}
/* tela muito baixa: o nome fica com a primeira linha só, para a barra caber sem rolar */
@media (max-width:900px) and (max-height:610px){
  .bh-bar{margin-bottom:10px}
  .bh-bar .ab[data-short]::after{max-height:9.5px}
}