/* warband-hud.css — o HUD da arena do Grupo Guerreiro (js/ui/screens/warbandScreen.js; modelo js/ui/warbandHud.js › WB_HUD;
   docs/specs/warband.md §12.2; caso 47 de docs/ux-casos.md). Prefixo `wbh-`: a JANELA do Grupo usa `wb-` (css/warband.css) e as
   duas folhas valem na página inteira — nenhuma regra de uma alcança a outra.

   ONDE (px de arte do palco 640×360; no celular deitado, a mesma geometria em k 1):
     quadro do grupo  x 4…160 · y 4…80      4 linhas de 18 (2 px de borda) — nada de `.panel` aqui: a moldura 9-slice come 8 px
                                            por lado e as 4 linhas não caberiam nos 76 de altura; a placa fina (fundo escuro e
                                            um fio de 1 px) é a mesma da placa de estado e dos totais
     barra do chefe   x 200…440 · y 6…40    a `.hud-boss` de dungeon.css, estreitada para 240
     placa de estado  x 452…636 · y 4…44
     totais           x 4…264 · y 336…356   (o baú é o destino do voo do ouro, do Token e do Pergaminho)
     medidor          x 270…410 · y 340…352 (o destino do orbe de EXP)
     ações            x 470…636 · y 336…356
   O botão do chat (chat.css) fica em x 4…28 · y 266…290: entre o quadro e os totais, sem cruzar nenhum. */

.wbh-hud { text-shadow: var(--px) var(--px) 0 #000; }

/* A placa fina do HUD do Grupo: o fundo escuro do palco do Fosso (a parede acesa de lava atrás) e o fio dourado apagado. */
.wbh-plate,
.wbh-frame,
.wbh-state {
  position: absolute;
  background: rgba(12, 8, 14, 0.78);
  box-shadow: inset 0 0 0 var(--px) rgba(224, 176, 64, 0.32);
}

/* ---- o véu do chefe: a tela escurece 300 ms (a cena treme; a faixa com o nome sobe) -------------------------------------- */
.wbh-hud > .wbh-boss-veil {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.wbh-boss-veil.is-on { animation: wbh-veil 300ms steps(6, end) both; }
@keyframes wbh-veil {
  0% { opacity: 0; }
  35% { opacity: 0.55; }
  100% { opacity: 0; }
}

/* ---- o quadro do grupo ---------------------------------------------------------------------------------------------------- */
.wbh-frame {
  left: calc(4 * var(--px));
  top: calc(4 * var(--px));
  width: calc(156 * var(--px));
  height: calc(76 * var(--px));
  padding: calc(2 * var(--px));
}
.wbh-frame .wbh-frame-body { margin: 0; display: flex; flex-direction: column; }
.wbh-row {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  height: calc(18 * var(--px));
  padding: 0 calc(1 * var(--px));
  cursor: pointer;
  outline: none;
}
.wbh-row.is-focus { background: rgba(224, 176, 64, 0.18); }
.wbh-row:focus-visible { box-shadow: inset 0 0 0 var(--px) var(--c-gold); }
.wbh-slot {
  flex: none;
  width: calc(10 * var(--px));
  height: calc(10 * var(--px));
  line-height: calc(10 * var(--px));
  text-align: center;
  background: rgba(20, 12, 16, 0.92);
  color: var(--c-text);
}
.wbh-row.is-focus .wbh-slot { background: var(--c-gold); color: var(--c-text-dark); text-shadow: none; }
.wbh-crest {
  flex: none;
  width: calc(12 * var(--px));
  height: calc(12 * var(--px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.wbh-who {
  flex: 0 0 calc(84 * var(--px));
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(1 * var(--px));
}
.wbh-name {
  display: block;
  height: calc(10 * var(--px));
  line-height: calc(10 * var(--px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wbh-row.is-you .wbh-name { color: var(--c-gold); }
/* a vida: 64×4, o verde do jogo (a mesma cor da placa sobre a cabeça) */
.wbh-hp {
  display: block;
  width: calc(64 * var(--px));
  height: calc(4 * var(--px));
  background: rgba(20, 12, 16, 0.92);
  box-shadow: 0 0 0 var(--px) #000;
}
.wbh-hp-fill { display: block; height: 100%; width: var(--value, 100%); background: var(--c-ok); }
/* --- ultimate --- (docs/specs/ultimate.md §6.2) a carga numa faixa de 2 px sob a vida, na cor da classe (`--ult-rgb` da classe
   `ult-c-<classe>` da linha, css/ult.css): a coluna fica 10 + 1 + 4 + 1 + 2 = 18, a altura da linha. Cheia, o contorno do brasão na
   cor da classe (nunca o ouro: no Grupo nada pede ação); ativa, o contorno pulsa e a faixa drena. Sem a ultimate na arena, nada. */
.wbh-ult {
  display: block;
  width: calc(64 * var(--px));
  height: calc(2 * var(--px));
  background: rgba(20, 12, 16, 0.92);
}
.wbh-ult-fill { display: block; height: 100%; width: var(--value, 0%); background: rgb(var(--ult-rgb, 176, 168, 152)); }
.wbh-row.is-ult-ready .wbh-crest,
.wbh-row.is-ult .wbh-crest { box-shadow: 0 0 0 var(--px) rgb(var(--ult-rgb, 176, 168, 152)); }
.wbh-row.is-ult .wbh-crest { animation: wbh-ult-pulse 1.6s steps(4, jump-none) infinite alternate; }
@keyframes wbh-ult-pulse {
  from { box-shadow: 0 0 0 var(--px) rgb(var(--ult-rgb, 176, 168, 152)); }
  to   { box-shadow: 0 0 0 var(--px) rgba(var(--ult-rgb, 176, 168, 152), 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .wbh-row.is-ult .wbh-crest { animation: none; }
}
/* caído: a linha apaga e a caveira com a contagem toma o lugar da vida */
.wbh-row.is-down .wbh-slot,
.wbh-row.is-down .wbh-crest,
.wbh-row.is-down .wbh-name { opacity: 0.45; }
.wbh-down {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  height: calc(9 * var(--px));
  line-height: calc(9 * var(--px));
  color: var(--c-text-dim);
}
.wbh-eye { flex: none; }
.wbh-cast {
  flex: none;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

/* ---- ícones e números ------------------------------------------------------------------------------------------------------ */
.wbh-ico { display: inline-block; flex: none; background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; }
.wbh-ico.is-missing { display: none; }
.wbh-ico9 { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
.wbh-ico16 { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.wbh-skull { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
.wbh-chip { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; }
.wbh-num { font-variant-numeric: tabular-nums; }
.wbh-sep { color: var(--c-text-dim); }
.wbh-cut { color: #ff8a7a; white-space: nowrap; }

/* ---- a barra do chefe: a `.hud-boss` (dungeon.css) estreitada para x 200…440 --------------------------------------------- */
.wbh-hud .hud-boss { top: calc(6 * var(--px)); width: calc(240 * var(--px)); margin-left: calc(-120 * var(--px)); }

/* ---- a placa de estado ------------------------------------------------------------------------------------------------------ */
/* A altura é a do conteúdo, até os 40 do §12.2: sem penalidade a 2.ª linha não existe (G5) e a placa não fica com meia caixa vazia
   (olhado no navegador em 2026-10-04: 20 px de fundo escuro sem nada abaixo de "6h11 · 59 · Onda 1"). */
.wbh-state {
  left: calc(452 * var(--px));
  top: calc(4 * var(--px));
  width: calc(184 * var(--px));
  max-height: calc(40 * var(--px));
  padding: calc(3 * var(--px)) calc(4 * var(--px));
}
.wbh-state .wbh-state-body { margin: 0; display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.wbh-state-line {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  height: calc(12 * var(--px));
  line-height: calc(12 * var(--px));
  white-space: nowrap;
}
.wbh-debuff {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  height: calc(16 * var(--px));
  white-space: nowrap;
  color: var(--c-text);
  align-self: flex-start;
  width: fit-content;
}
.wbh-wave { color: var(--c-text-dim); }
.wbh-clock, .wbh-fury { width: fit-content; }

/* ---- os totais da sessão ------------------------------------------------------------------------------------------------- */
.wbh-totals {
  position: absolute;
  left: calc(4 * var(--px));
  top: calc(336 * var(--px));
  max-width: calc(260 * var(--px));
  height: calc(20 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  padding: 0 calc(4 * var(--px)) 0 calc(2 * var(--px));
  background: rgba(12, 8, 14, 0.72);
  white-space: nowrap;
}
.wbh-chest-box { display: inline-flex; flex: none; width: fit-content; }
.wbh-chest-box.is-pop > .wbh-chest { filter: brightness(1.8); }
.wbh-gold .wbh-num { color: var(--c-gold); }
.wbh-scroll { cursor: pointer; }
.wbh-scroll-ico { display: inline-flex; }

/* ---- o medidor: [frasco] e a barra; cheio, pisca ------------------------------------------------------------------------- */
.wbh-meter {
  position: absolute;
  left: calc(270 * var(--px));
  top: calc(340 * var(--px));
  width: calc(140 * var(--px));
  height: calc(12 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
}
.wbh-meter-bar {
  flex: 1 1 auto;
  height: calc(6 * var(--px));
  background: rgba(20, 12, 16, 0.92);
  box-shadow: 0 0 0 var(--px) #000;
}
.wbh-meter-fill { display: block; height: 100%; width: var(--value, 0%); background: #84c8f7; }
.wbh-meter.is-full .wbh-meter-fill { animation: wbh-meter-flash 700ms steps(4, end) both; }
@keyframes wbh-meter-flash {
  0% { width: 100%; background: #fff6c8; }
  50% { width: 100%; background: var(--c-gold); }
  100% { background: #84c8f7; }
}

/* ---- as ações ------------------------------------------------------------------------------------------------------------ */
.wbh-actions {
  position: absolute;
  left: calc(470 * var(--px));
  top: calc(336 * var(--px));
  width: calc(166 * var(--px));
  height: calc(20 * var(--px));
  display: flex;
  justify-content: flex-end;
  gap: calc(4 * var(--px));
}
.wbh-actions > .btn { min-height: calc(20 * var(--px)); }

/* ---- as faixas: o nome do chefe e a renovação (somem sozinhas) ----------------------------------------------------------- */
.wbh-hud > .wbh-banner {
  position: absolute;
  left: 50%;
  top: calc(104 * var(--px));
  width: calc(320 * var(--px));
  margin-left: calc(-160 * var(--px));
  padding: calc(4 * var(--px)) 0;
  text-align: center;
  font-size: calc(16 * var(--px));
  line-height: calc(18 * var(--px));
  background: linear-gradient(90deg, rgba(12, 8, 14, 0) 0%, rgba(12, 8, 14, 0.8) 18%, rgba(12, 8, 14, 0.8) 82%, rgba(12, 8, 14, 0) 100%);
  pointer-events: none;
  opacity: 0;
}
.wbh-banner.is-boss { color: var(--c-gold); }
.wbh-banner.is-renew { color: var(--c-text); font-size: calc(10 * var(--px)); line-height: calc(12 * var(--px)); }
.wbh-banner.is-on { animation: wbh-banner 1800ms steps(18, end) both; }
@keyframes wbh-banner {
  0% { opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- a faixa do FIM: o motivo e "Voltar à ilha" no lugar das ações --------------------------------------------------------- */
.wbh-end {
  position: absolute;
  left: 50%;
  top: calc(132 * var(--px));
  width: calc(300 * var(--px));
  margin-left: calc(-150 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--px));
  text-align: center;
}
.wbh-end-text { line-height: calc(10 * var(--px)); }