/* ==========================================================================
   BARRAS DE VIDA DE CHEFE, ELITE E GOLDEN, opção B "em blocos"
   30/09, escolha do autor entre 3 opções ("as barras de HP dos boss são
   amadoras e sem graça"). Feito no ramo claude/project-thread-1vwc7g, que
   nunca chegou à main; trazido para a main em 03/10.
   - A barra em cima do corpo é desenhada no canvas
     (src/combat/v2/renderer.js drawHpBar).
   - Aqui: o HUD do chefe no topo da arena (#swarmBossHud, game.js
     garantirHudDeBossDaHorda / renderSwarmHud). Nome com ornamentos e barra
     larga em 10 blocos com moldura dourada. O rastro claro (::before) segue a
     MESMA largura da barra, só que devagar: é o dano recém-tomado sumindo.
   Posição e tamanho no celular continuam os de responsivo.css (seção 32).
   ========================================================================== */
.col-swarm-boss-hud{min-width:min(46%,560px);padding:0;border:0;background:none;box-shadow:none;gap:2px}
.col-swarm-boss-hud-nome{font-family:var(--font-display);font-size:calc(17px * var(--text-scale,1));font-weight:700;letter-spacing:1px;color:#ffd9a0;text-shadow:0 0 10px rgba(255,90,40,.6),0 2px 3px #000}
.col-swarm-boss-hud-nome::before,.col-swarm-boss-hud-nome::after{content:" ⟡ ";color:#d9a441}
.col-swarm-boss-hud-trilho{position:relative;height:16px;border:2px solid #c9953b;border-radius:3px;background:#140808;box-shadow:0 0 0 1px #000,0 4px 12px rgba(0,0,0,.6)}
.col-swarm-boss-hud-trilho::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--hud-pct,100%);background:#f1d9a5;transition:width .9s ease-out .35s}
.col-swarm-boss-hud-trilho::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),rgba(0,0,0,.85) calc(10% - 2px) 10%)}
.col-swarm-boss-hud-trilho i{position:relative;background:linear-gradient(180deg,#ff6b5a,#b3161a 60%,#6d0b0e)}
.col-swarm-boss-hud-num{color:#f0d6b0;font-size:calc(10.5px * var(--text-scale,1));font-weight:800;text-shadow:0 1px 3px #000}
/* Golden e santuário: ouro, não vermelho (não é chefe de etapa). */
.col-swarm-boss-hud.is-especial .col-swarm-boss-hud-nome{color:#ffe9b0;text-shadow:0 0 10px rgba(255,190,60,.55),0 2px 3px #000}
.col-swarm-boss-hud.is-especial .col-swarm-boss-hud-trilho{border-color:#ffe08a}
.col-swarm-boss-hud.is-especial .col-swarm-boss-hud-trilho i{background:linear-gradient(180deg,#ffe38a,#d8961f 60%,#8a5a12)}
/* Celular: a faixa fina de responsivo.css (sob o cartão do Inimigo) ganha a moldura e os blocos, sem ornamentos. */
@media (max-width:640px){
  #gameShell #monsterCard .col-swarm-boss-hud{border:1px solid rgba(201,149,59,.55)!important;border-radius:8px!important;background:rgba(12,8,6,.82)!important}
  .col-swarm-boss-hud-nome{font-size:calc(9.5px * var(--text-scale,1))}
  .col-swarm-boss-hud-nome::before,.col-swarm-boss-hud-nome::after{content:none}
  .col-swarm-boss-hud-trilho{border-width:1px;box-shadow:none}
  .col-swarm-boss-hud-num{font-size:calc(8.5px * var(--text-scale,1))}
}

/* --------------------------------------------------------------------------
   CARTÃO DO INIMIGO (03/10, autor: "o painel das criaturas tá com a barra
   diferente"): a barra do cartão segue a barra da cabeça. Moldura dourada,
   cor por tipo (data-alvo, game.js renderSwarmTargetCard): vermelho chefe,
   roxo elite, ouro Golden/evento, verde comum. Chefe e Golden em 10 blocos,
   elite em 5. O rastro claro é a barra atrasada (#enemyHPDelayedBar) que já
   existia, agora com o mesmo atraso do canvas.
   -------------------------------------------------------------------------- */
#arenaEnemyPanel #enemyHPBarTrack{border:1px solid #c9953b!important;border-radius:3px!important;background:#140808!important;box-shadow:0 0 0 1px rgba(0,0,0,.7),inset 0 1px 3px rgba(0,0,0,.6)!important}
#arenaEnemyPanel #enemyHPDelayedBar{background:#f1d9a5;box-shadow:none;transition:width .9s ease-out .35s}
#arenaEnemyPanel #monsterHPBar{background:linear-gradient(180deg,#86efac,#22a55a 60%,#11662f);box-shadow:none}
#arenaEnemyPanel[data-alvo="boss"] #monsterHPBar{background:linear-gradient(180deg,#ff6b5a,#b3161a 60%,#6d0b0e)}
#arenaEnemyPanel[data-alvo="elite"] #monsterHPBar{background:linear-gradient(180deg,#e0b0ff,#9d5cf0 60%,#4a1f8a)}
#arenaEnemyPanel[data-alvo="evento"] #monsterHPBar{background:linear-gradient(180deg,#ffe38a,#d8961f 60%,#8a5a12)}
#arenaEnemyPanel[data-alvo="evento"] #enemyHPBarTrack{border-color:#ffe08a!important}
#arenaEnemyPanel[data-alvo="boss"] #enemyHPBarTrack::after,#arenaEnemyPanel[data-alvo="evento"] #enemyHPBarTrack::after,#arenaEnemyPanel[data-alvo="elite"] #enemyHPBarTrack::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1.5px),rgba(0,0,0,.85) calc(10% - 1.5px) 10%)}
#arenaEnemyPanel[data-alvo="elite"] #enemyHPBarTrack::after{background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1.5px),rgba(0,0,0,.85) calc(20% - 1.5px) 20%)}
/* Coroa do chefe: o ícone do catálogo (boss_area), do tamanho da letra do nome. */
#arenaEnemyPanel .enemy-coroa{display:inline-grid;place-items:center;width:1.15em;height:1.15em;margin-right:.25em;font-style:normal;vertical-align:-.15em;flex:none}
#arenaEnemyPanel .enemy-coroa.hidden{display:none}
#arenaEnemyPanel .enemy-coroa .col-icone-img{width:100%;height:100%;object-fit:contain}
#arenaEnemyPanel .arena-target-reward .col-icone{display:inline-grid;place-items:center;width:1.2em;height:1.2em;font-style:normal;vertical-align:-.2em}
#arenaEnemyPanel .arena-target-reward .col-icone-img{width:100%;height:100%;object-fit:contain}