/*
 * O CAMPO DE BATALHA — §3 do `www/rpg/BATALHA.md`.
 * Só forma e cor; toda a geometria (onde cada barra fica) é escrita por
 * `campo.js` a partir de `window.__palco`.
 */

.bt-campo {
  /*
   * 🚨 A UNIDADE DO COMBATE É `--hud16-un`, não `--rpg-un`.
   *
   * O kit RPG só mede quando há janela aberta (`rpg/janela.js`, dentro de
   * `aplicar()` e depois do `if (!aberta) return`), e no combate não há.
   * Medido ao vivo em 1600×900 e 844×390: `--rpg-un` vem string vazia, e
   * `calc(4px * var(--rpg-un, 1))` resolveria com 1 no celular deitado em vez
   * de 0,54 — a barra sairia com o dobro do tamanho. Quem publica escala aqui
   * é a HUD 16:9 (`hud/index.js`). `--rpg-un` fica de reserva para o dia em que
   * o kit medir com a janela fechada.
   */
  --bt-un: var(--hud16-un, var(--rpg-un, 1));

  position: fixed;
  left: var(--hud16-px, 0px);
  top: var(--hud16-py, 0px);
  width: var(--hud16-pw, 100vw);
  height: var(--hud16-ph, 100dvh);
  /* Acima do palco (HUD = 40), abaixo do quadro das janelas (44) e do menu. */
  z-index: 41;
  display: none;
  /* 🚨 Nada aqui é botão. Uma camada invisível sobre o palco engoliria o toque
     que ataca o bicho. */
  pointer-events: none;
  /* Nas fases de corrida o herói sai do palco (`__palco.x` chega a −19%) e a
     barra vai junto, como tem de ir. Sem recorte ela apareceria sozinha na
     tarja preta do letterbox, colada em nada. */
  overflow: hidden;
}
.bt-campo[data-ligado] {
  display: block;
}

/*
 * §3.3 passa a ser desenhada aqui. As barras flutuantes da HUD de 25/08
 * (`hud/index.js` → `.hud16__vida--heroi/--mob`) mostram a mesma vida no mesmo
 * lugar: sem isto ficam duas barras empilhadas sobre cada boneco.
 */
html[data-hud16] .hud16__vida {
  display: none !important;
}

/*
 * BARRA DE MANA (28/08) — mesmo sistema §3.3, um degrau abaixo da vida.
 *
 * NÃO reaproveita `.bt-vida`: aquela classe já carrega a arte de aliado/
 * inimigo (`.bt-vida--aliado`/`--inimigo`), e a mana só existe para o
 * jogador — sem variante nenhuma. Cor por gradiente (CSS puro) enquanto não
 * sobe um recorte de sprite igual aos outros (pedi pro Zerg); trocar depois
 * é só apontar o `background` do `::after` para uma imagem, igual a `.bt-vida`.
 */
.bt-mana {
  --f: 1;
  position: absolute;
  width: calc(72px * var(--bt-un, 1));
  translate: -50% -100%;
}
.bt-mana__trilho {
  position: relative;
  height: max(2px, calc(3.8px * var(--bt-un, 1)));
  border-radius: 999px;
  background: var(--rpg-poço, #04070d);
  box-shadow:
    0 0 0 max(1px, calc(1px * var(--bt-un, 1))) #000000d9,
    0 max(1px, calc(1px * var(--bt-un, 1))) calc(3px * var(--bt-un, 1)) #000000a6;
  overflow: hidden;
}
.bt-mana__trilho::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc((1 - var(--f, 1)) * 100%) 0 0);
  transition: clip-path 0.22s ease-out;
  background: linear-gradient(180deg, #7fdcff, #1d6fb8);
}

/* ── A barra ──────────────────────────────────────────────────────────
 * Da referência: 95×5 px numa imagem de 1684×947, ou seja 5,6% da largura do
 * palco e 0,53% da altura. Na base 1280×720 do `--hud16-un` isso dá 72×3,8 px.
 */
.bt-vida {
  --f: 1;
  position: absolute;
  width: calc(72px * var(--bt-un, 1));
  /* A âncora escrita pelo JS é a BASE da barra (logo acima da cabeça): a caixa
     cresce para cima e para os lados a partir dela. */
  translate: -50% -100%;
  /* 🚨 SEM transição em `left`/`top`. A barra tem de estar onde o boneco está
     NESTE quadro; suavizar a posição a faria arrastar atrás dele na corrida. */
}

.bt-vida__trilho {
  position: relative;
  /*
   * §3.3 pede 5 px de 947, isto é 0,53% da altura do palco — o que na base
   * 1280×720 do `--hud16-un` dá 3,8 px.
   *
   * 🚨 O PISO É 2 px, NÃO 3. Com piso de 3 px a barra saía com 0,771% da altura
   * em 844×390 (palco 693×389, un 0,5417): 46% mais grossa que o contrato, e
   * era o único desvio de tamanho da §3 nas três resoluções. 3,8 × 0,5417 =
   * 2,06 px, então um piso de 2 px deixa a conta passar limpa e ainda garante
   * uma barra visível se algum dia o palco encolher mais. Piso de 9 px é regra
   * de TEXTO (CONTRATO §9-ter); barra não se lê por tamanho de letra, e o aro
   * opaco abaixo é o que a faz existir na tela.
   */
  height: max(2px, calc(3.8px * var(--bt-un, 1)));
  border-radius: 999px;
  /* Poço OPACO: em translúcido o cenário atravessa e a barra ganha manchas do
     mapa por dentro. */
  background: var(--rpg-poço, #04070d);
  /*
   * 🚨 ARO OPACO E SEM BORRÃO, e só depois a sombra macia. A sombra de antes
   * (`0 1px 2px #0009`) só existia EMBAIXO e desfocada, e o anel `inset` some
   * debaixo do preenchimento: no mapa de lava a borda de CIMA da barra encostava
   * direto no laranja do céu e a peça sumia — medido no print de 1600×900,
   * 1,48:1 entre o topo da barra e o céu. Com o aro são 4,57:1 e a barra tem
   * silhueta própria contra QUALQUER mapa. Ele é `box-shadow` de propósito, para
   * não entrar na caixa medida: os 5,6% × 0,53% do §3.3 continuam sendo o
   * tamanho do elemento.
   */
  box-shadow:
    0 0 0 max(1px, calc(1px * var(--bt-un, 1))) #000000d9,
    0 max(1px, calc(1px * var(--bt-un, 1))) calc(3px * var(--bt-un, 1)) #000000a6;
  overflow: hidden;
}

/*
 * 🚨 O preenchimento é RECORTE, não um filho mais largo escondido por
 * `overflow`. Aquilo desenha certo e MEDE errado — a caixa do filho é maior que
 * a parte visível, e a régua já acusou uma barra com 2,4× da largura por causa
 * disso. `clip-path` não mexe no tamanho do elemento.
 *
 * A arte é esticada em 100% 100% porque estas duas peças são a barra inteira,
 * e não um atlas: `Gauge_CompanionHp` (90×12) e `Gauge_BossHp` (400×60) são
 * degradês de ponta a ponta, sem marcador nem decoração ao lado. As peças
 * `barra_hp_*` da HUD é que são atlas e precisam do `background-size` torto.
 */
.bt-vida__trilho::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc((1 - var(--f, 1)) * 100%) 0 0);
  transition: clip-path 0.22s ease-out;
}
/* POC #1660 item 1 (Modo C, temporário, só teste): ver campo.js `pregar()`. */
.bt-vida__trilho.bt-sem-transicao::after {
  transition: none;
}
/* Zerg 21/09 (6º lote #8): a barra de vida do HERÓI é VERMELHA (HP), como a dos inimigos — antes usava o degradê verde do acervo (`barra-vida-aliado.png`).
   Mesma peça e mesmo filtro da barra inimiga: o herói se distingue pela ausência da marca à esquerda, não pela cor. */
.bt-vida--aliado .bt-vida__trilho::after {
  background: url('/potato/batalha/arte/barra-vida-inimigo.png') center / 100% 100% no-repeat;
  filter: hue-rotate(-16deg) saturate(1.4) brightness(1.1);
}
.bt-vida--inimigo .bt-vida__trilho::after {
  background: url('/potato/batalha/arte/barra-vida-inimigo.png') center / 100% 100% no-repeat;
  /*
   * 🚨 A PEÇA EXTRAÍDA NÃO É VERMELHA, É COR DE MAPA. Medida no arquivo:
   * `#AD3D24 → #FB5938` — matiz 11°, a MESMA família do céu de lava e do
   * deserto onde o jogo passa metade do tempo. §3.3 pede a barra do inimigo
   * VERMELHA; com a peça crua, o CHEIO e o VAZIO do trilho ficavam quase
   * iguais — 3,33:1 entre a ponta esquerda do preenchimento (`#AD3D24`, o
   * pedaço que sobra quando o chefe está quase morto) e o poço, o que é pouco
   * para ler quantos por cento faltam de relance.
   *
   * O filtro puxa a peça para `#F73D13` (amostrado no print): cheio × poço sobe
   * para 5,41:1. Quem separa a barra do MAPA não é a cor — é o aro opaco do
   * trilho, porque contra um céu laranja nenhum vermelho ganha luminância.
   * Filtro em vez de PNG novo porque a arte é do acervo do jogo; o que estava
   * errado era o uso dela sobre este cenário.
   *
   * 🚨 FALTAVA GIRAR O MATIZ, e por isso a barra continuava LARANJA. `saturate`
   * e `brightness` acendem a peça mas não mexem no matiz: #F73D13 é 11°, e a
   * referência entrega #e63a52 — 352°, um vermelho que puxa para o carmim.
   * Ampliadas lado a lado, a barra do inimigo daqui era da mesma cor do céu de
   * lava e a de lá era vermelha contra um céu roxo. O giro fecha essa conta e é
   * a mesma correção aplicada à barra do chefe em `chefe-missao.css`.
   */
  filter: hue-rotate(-16deg) saturate(1.4) brightness(1.1);
}

/*
 * A marca do inimigo (§3.3): ícone circular encostado à ESQUERDA da barra.
 * Fica fora dos 5,6% — a barra tem a mesma largura nos dois times, e é a marca
 * que diz de quem ela é. Na referência ela mede ~20 px de 947 (2,11% da altura
 * do palco); na base 1280×720, 15 px.
 */
.bt-vida__marca {
  position: absolute;
  right: 100%;
  top: 50%;
  /*
   * ENCOSTADA, NÃO MONTADA. O `translate: 22%` de antes empurrava o ícone para
   * cima do trilho e produzia a única sobreposição da §3 (5,6% da área da marca
   * em 1600/1280, 7,3% em 844 — `_medir-secao3.mjs`). "Encostado à esquerda da
   * barra" é o que o §3.3 pede: a borda direita da marca agora termina exatamente
   * na borda esquerda do trilho, sobreposição zero.
   */
  translate: 0 -50%;
  /*
   * 🚨 PISO DE 8 px, NÃO 9. Com 9 px a marca saía com 2,314% da altura em
   * 844×390 contra os 2,11% do contrato (+0,23 pp), e o piso não comprava
   * legibilidade nenhuma — 9 px de um ícone de 64×64 já é um borrão. O que
   * compra legibilidade é o DISCO abaixo: com o fundo escuro e o aro, a marca
   * lê como pastilha mesmo miúda, em vez de uma silhueta laranja perdida no céu
   * laranja do mapa. 15 × 0,5417 = 8,13 px, então o piso quase nunca entra.
   */
  width: max(8px, calc(15px * var(--bt-un, 1)));
  height: auto;
  /*
   * §3.3 pede um ícone CIRCULAR. A peça do acervo é uma cabeça de demônio com
   * cantos transparentes, então o círculo é feito aqui: o disco aparece pelos
   * cantos vazados e fecha a pastilha.
   */
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #1b0b12, #0b0308 72%);
  /*
   * 🚨 O ANEL VERMELHO É DA REFERÊNCIA, e é o que separa a marca do mapa.
   * Ampliada 8×, a de lá é uma CAVEIRA BRANCA num disco quase preto com um aro
   * VERMELHO grosso, encostado na barra; a daqui era uma cabeça de demônio
   * LARANJA num disco escuro sem aro — sobre o céu de lava, laranja no laranja,
   * ela sumia e a barra parecia começar do nada.
   *
   * 🚨 A CAVEIRA NÃO EXISTE NO ACERVO (varrido `UIs/**`: só há a cabeça de
   * demônio de `SummonBoss_Icon` / `Icon_64_Rule_IgnoreDebuffBoss`), e o que
   * falta é PEÇA, não folha: `filter` aqui pintaria também o disco e o aro, que
   * são background e box-shadow do mesmo `<img>`. O aro e o poço mais fundo é o
   * que dá para acertar por CSS; a silhueta branca fica pendente de arte.
   */
  box-shadow:
    0 0 0 max(1.5px, calc(1.6px * var(--bt-un, 1))) #e01d33,
    0 0 0 max(2px, calc(2.4px * var(--bt-un, 1))) #00000099,
    0 max(1px, calc(1px * var(--bt-un, 1))) calc(3px * var(--bt-un, 1)) #000000a6;
}