/*
 * FAIXA SUPERIOR DA TELA DE BATALHA — §1 de `www/rpg/BATALHA.md`.
 *
 * ── UNIDADE ───────────────────────────────────────────────────────────
 * Posição e tamanho de caixa são % DO PALCO: a peça é do tamanho exato do
 * retângulo 16:9, então porcentagem daqui já é porcentagem de palco e sobrevive
 * de 844×390 a 1600×900 sem uma conta.
 *
 * Espessura, ícone e fonte não podem ser %, então vão em `--bt-un` — que é
 * `--hud16-un` (a unidade VIVA no combate) com `--rpg-un` de reserva. O kit de
 * janela só publica `--rpg-un` com alguma janela aberta, e no combate não há
 * nenhuma: medido, ele vem vazio.
 *
 * ── PX DA REFERÊNCIA × PX DAQUI ───────────────────────────────────────
 * As medidas do contrato foram lidas numa imagem de 1684 de largura; `--bt-un`
 * vale 1 num palco de 1280. Todo px do contrato entra aqui multiplicado por
 * 1280/1684 ≈ 0,76 — 22px de nome viram 17, 58px de ícone viram 44. Sem essa
 * conversão a faixa sai um terço maior do que o desenho pede.
 *
 * Toda fonte leva piso (CONTRATO.md §9-ter): no celular deitado `--bt-un` vale
 * 0,54 e um `13px` cru viraria 7px na tela.
 */

.btf {
  --bt-un: var(--hud16-un, var(--rpg-un, 1));
  /* contorno: casa com a cor do texto, fino — grosso vira borrão preto */
  --bt-fio: max(0.6px, calc(0.9px * var(--bt-un)));
  --bt-fio-creme: #0c1a2e;
  --bt-fio-ouro: #2a1200;
  --bt-poco: color-mix(in srgb, var(--rpg-poço, #04070d) 80%, transparent);
  /*
   * 🚨 DUAS CORES MEDIDAS NA IMAGEM DE REFERÊNCIA, não escolhidas. A paleta do
   * CONTRATO §4 é a das JANELAS do kit e não tem nem o vermelho de badge nem o
   * vermelho de XP desta tela; amostrados no arquivo original
   * (`Desktop\6c42c0d5….webp`, 1672×941) eles são:
   *   badge do menu (x 1146 · y 32) ......... #f91616
   *   preenchimento da barra de XP (x 130) .. #9b0100 (o vazio é #440000)
   * Ficam como token local, e não hex solto espalhado pela folha.
   */
  --bt-alerta: #ee1414;
  --bt-xp-a: #d8452c;
  --bt-xp-b: #a80f16;
  --bt-xp-c: #79040c;

  position: fixed;
  left: var(--hud16-px, 0px);
  top: var(--hud16-py, 0px);
  width: var(--hud16-pw, 100vw);
  height: var(--hud16-ph, 100dvh);
  z-index: 42; /* acima da HUD (40), abaixo do quadro do kit (44) e do menu (50) */
  display: none;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 500;
  /* 🚨 A faixa cobre o topo do palco inteiro: sem isto ela engoliria o toque
     que ataca o bicho. Só botão recebe clique. */
  pointer-events: none;
}

/* Aparece na tela de combate e some enquanto uma janela do kit está aberta —
   ali o véu cobre o palco e a faixa ficaria boiando por trás dele. */
html[data-bt-faixa='1']:not([data-rpgw]) .btf {
  display: block;
}

/*
 * O que esta faixa aposenta enquanto está no ar.
 *
 * 🚨 CORRIGIDO (11/09, achado do Zerg — "Guerreiro" e a engrenagem grande
 * vazando atrás do Inventário). MEDIDO: mesma causa-raiz do Rebirth/chefe-a-
 * seguir. `.btf` (a faixa nova) já sai de cena com QUALQUER janela aberta
 * (regra logo acima, `:not([data-rpgw])`) — de propósito, o véu cobriria ela
 * mesmo. Mas esta regra só olhava `data-bt-faixa='1'`, sem o mesmo cuidado
 * com `[data-rpgw]`: com janela aberta `data-bt-faixa` cai (`visivel()` em
 * `faixa-superior.js` depende de `.game__palco:not([data-oculto])`), a regra
 * para de bater, e `.hud16__perfil`/`.hud16__moedas` (peças MAIS ANTIGAS que
 * esta faixa aposentou, ainda montadas por `hud/index.js`) voltavam a
 * aparecer no estilo delas — sem substituir nada, é a MESMA peça sem a folha
 * que a esconde. Basta esconder também com janela aberta.
 */
/* 🚨 INCONDICIONAL (14/09, pedido do Zerg): ouro/gema já migraram pro HUD
   novo desde 10/09 (leem `state.gold`/`state.gems` direto, não dependem
   mais destas peças) — o que ficava condicional aqui era só um fallback
   de segurança pra "e se o HUD novo nem estiver montado". Varredura de
   hoje (skillbar-atalho corrigido, 30 itens de nav testados) não achou
   mais nenhum caminho vivo que caia numa aba sem o HUD novo montado —
   fallback obsoleto, escondido sempre agora. */
.hud16__perfil,
.hud16__moedas {
  display: none !important;
}

/*
 * ── A PLACA DE CAPÍTULO VOLTA, DO LADO CERTO (27/08, corte do Lucas) ──
 *
 * 🚨 ELA TINHA SIDO SIMPLESMENTE APAGADA — e com ela o jogador perdeu de vista
 * em que capítulo, em que mundo e em que fase está, que é a informação de
 * progresso central deste jogo. A razão de apagar era boa (no lugar antigo ela
 * ocupava x 37–63% · y 2–6,7%, exatamente onde entram as pílulas do §1.3), mas
 * apagar sem repor é tirar dado do jogador.
 *
 * A própria referência tem essa placa — no canto superior DIREITO, antes do
 * botão de casa: "⚔ Capítulo 29 / Reino de Pedra … Fase 287/330". Foi omissão
 * da minha leitura, não do desenho. Aqui ela vai para lá.
 *
 * Reposicionar em vez de remontar: os VALORES continuam saindo do React
 * (`.chapter__title/__sub/__pct`), então não existe segunda fonte de verdade
 * sobre a fase.
 */
html[data-bt-faixa='1'] .hud16__fase {
  /* A placa é da HUD, não filha da `.btf`: o token local não chega até aqui. */
  --bt-un: var(--hud16-un, var(--rpg-un, 1));
  position: fixed !important;
  left: auto !important;
  /*
   * 🚨 MEDIDO E CORRIGIDO: `%` em elemento `position:fixed` resolve contra o
   * VIEWPORT, não contra o palco. O `right: 5,4%` de antes coincidia com o palco
   * em 1600 e 1280 (onde o palco é a tela inteira) e VAZAVA em 844×390, onde o
   * palco tem 693px com 75px de tarja preta de cada lado: a borda direita caía
   * em x 104,39% do palco — "Floresta Turquesa" e "100/100" pintados sobre o
   * letterbox. Ancorada no palco, ela fecha em 95% nas três resoluções: a mesma
   * borda do menu do §1.5 e da doca de renascer, que ficam em cima e embaixo
   * dela. Três bordas direitas diferentes (95 / 94,6 / 93,5) davam uma coluna
   * serrilhada no canto onde o contrato empilha as três peças.
   *
   * `100%` e não `100vw`: para elemento fixo o percentual resolve contra o bloco
   * de contenção inicial, que já desconta a barra de rolagem; `100vw` não.
   */
  right: calc(100% - var(--hud16-px, 0px) - var(--hud16-pw, 100vw) * 0.95) !important;
  /* §1.7 pede y ≈ 11–16%. A altura vem da HUD (`34px * un` = 4,72% do palco em
     qualquer 16:9), então 11,2% fecha a caixa em 15,92% e sobra meio ponto de
     folga para o menu do §1.5, que termina em 10,7%. */
  top: calc(var(--hud16-py, 0px) + var(--hud16-ph, 100dvh) * 0.112) !important;
  transform: none !important;
  translate: none !important;
  /* 🚨 MEDIDO: a 23% a caixa ficava com 339px e o conteúdo (capítulo + nome do
     mundo + "100/100") pedia mais — o número da fase saía cortado, e fase
     cortada é justamente o dado que a placa existe para dar. Não era vazamento
     de tela (sobravam 86px até a borda), era aperto interno.
     Mesma armadilha do `right`: 30% do viewport ≠ 30% do palco. */
  max-width: calc(var(--hud16-pw, 100vw) * 0.3);
  z-index: 46;
}
/*
 * 🚨 O `scale: 0,88/0,86` SAIU, e é por isso que as três fontes abaixo são
 * declaradas aqui. As palavras da placa vêm de `hud/styles.css` em
 * `calc(13px|14px|12px * var(--hud16-un))`, SEM piso: em 844×390 (un 0,5417)
 * isso pinta 6,06 / 6,52 / 5,59px — o único texto abaixo do piso de 9px da tela
 * (CONTRATO.md §9-ter) e justamente o dado que a placa foi reposta para dar. O
 * `scale` piorava: encolhia de novo o que já estava abaixo do piso, e fazia o px
 * computado deixar de ser o px pintado (piso nenhum resolveria por cima dele).
 *
 * Os multiplicadores reproduzem o tamanho que a placa JÁ PINTAVA em 1600 e 1280
 * (14,3 / 15,4 / 13,2px e 11,4 / 12,3 / 10,6px) — o desenho dessas duas não
 * muda —, agora com piso de 9px no celular deitado.
 */
html[data-bt-faixa='1'] .hud16__cap {
  flex: 0 0 auto;
  font-size: clamp(9px, calc(11.5px * var(--bt-un)), 20px);
}
html[data-bt-faixa='1'] .hud16__mundo {
  /* `display:flex` impede o ellipsis (o texto vira item anônimo e
     `text-overflow` não o alcança); centrado pelo `align-self`. */
  display: block;
  align-self: center;
  min-width: 0;
  overflow: hidden;
  font-size: clamp(9px, calc(12.3px * var(--bt-un)), 21px);
  text-overflow: ellipsis;
}
html[data-bt-faixa='1'] .hud16__pct {
  /* O único que nunca encolhe: com a letra no piso o conteúdo passa dos 30% em
     844×390, e quem cede é o nome do mundo (reticências), não o número da fase. */
  flex: 0 0 auto;
  font-size: clamp(9px, calc(10.6px * var(--bt-un)), 18px);
}

/*
 * ── A FAIXA `.rebirth` ────────────────────────────────────────────────
 *
 * 🚨 MEDIDO: ela é o pior invasor deste trecho. É um `div` ESTÁTICO, irmão de
 * `.game__palco` dentro de `.game__scroll`, com fundo e borda do desenho antigo
 * (`--surface-raised`), e pinta "Capítulo N · fase final" / "Derrote o Rei da
 * fase 100" de x 1,06% a 98,69% · y 1–4,67% — em cima do nome, da classe e das
 * pílulas. Em 844×390 o texto atravessa o retrato inteiro.
 *
 * E por estar NO FLUXO ela ainda empurrava a cena para baixo: `.panel.scene`
 * media y 3,5–103,5% em 1600×900 e y 8,23–108,23% em 844×390 — o palco 16:9
 * transbordando pela base exatamente a altura desta faixa.
 *
 * O texto dela é capítulo/objetivo: o mesmo que a placa `.hud16__fase` (já
 * aposentada acima) mostrava, e que §1.4 e §2.1 agora dizem melhor. Some.
 *
 * 🚨 O BOTÃO NÃO SOME. `RENASCER` (`.rebirth__btn`) é a única porta de renascer
 * no jogo (bundle: `podeRenascer && <button class="btn-gold rebirth__btn">`) e
 * só nasce com `data-ready="true"`. Nesse estado a faixa vira peça fixa em x
 * 63,5–95% · y 17,5%: nenhum trecho do contrato reivindica esse retângulo (o
 * card de missão do §2.1 é só x 0,5–19,5% e o campo do §3 começa em y 33%), e a
 * linha do §2.1 lhe dá um degrau próprio. Em y 11,2% ela empatava a altura da
 * barra do chefe (§1.4, y 8,5–15%) e as duas liam como uma fileira só, apertada.
 * A borda direita é 95%, a mesma do menu (§1.5) e da placa (§1.7) logo acima.
 */
html[data-bt-faixa='1'] .rebirth:not([data-ready='true']) {
  display: none !important;
}
/* 🚨 CORRIGIDO (11/09, achado do Zerg numa 2a rodada de teste manual): esta
   regra só cobria a variante "ainda não pronto" (o card "Derrote o Rei da
   fase N") DENTRO da cena — o remendo anterior (linha ~221) só tratava a
   variante `[data-ready='true']`. Mesma causa-raiz, gap que faltou: sem
   `data-bt-faixa='1'`, esta variante também não tinha regra nenhuma
   escondendo com janela aberta, e vazava sem estilo (cru do bundle). */
html[data-rpgw] .rebirth:not([data-ready='true']) {
  display: none !important;
}
html[data-bt-faixa='1'] .rebirth[data-ready='true'] {
  /* `.rebirth` não é filha da `.btf`: os tokens locais dela não chegam aqui. */
  --bt-un: var(--hud16-un, var(--rpg-un, 1));
  --bt-fio: max(0.6px, calc(0.9px * var(--bt-un)));
  --bt-fio-ouro: #2a1200;
  position: fixed;
  left: calc(var(--hud16-px, 0px) + var(--hud16-pw, 100vw) * 0.635);
  top: calc(var(--hud16-py, 0px) + var(--hud16-ph, 100dvh) * 0.175);
  z-index: 42;
  width: calc(var(--hud16-pw, 100vw) * 0.315);
  margin: 0;
  padding: calc(4px * var(--bt-un)) calc(9px * var(--bt-un));
  gap: calc(13px * var(--bt-un));
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rpg-poço, #04070d) 80%, transparent);
  box-shadow: inset 0 0 0 max(1px, calc(1px * var(--bt-un))) var(--rpg-vidro, #ffffff26);
  font-family: 'Baloo 2', system-ui, sans-serif;
}
/*
 * 🚨 MEDIDO: a caixa estava restilizada mas o DESENHO ANTIGO CONTINUAVA NA TELA
 * — o `::before` do bundle (`repeating-conic-gradient(at 50% 132%, …)`) pinta um
 * leque bege dentro da faixa, e regra de folha não alcança pseudo-elemento por
 * herança: tem de ser dito. Ele era a moldura "épica" da tarja de ponta a ponta;
 * numa pastilha de 31% ele vira mancha. O `::after` (o brilho que varre) fica:
 * ali ele lê como reflexo do botão dourado, que é o papel da peça.
 */
html[data-bt-faixa='1'] .rebirth[data-ready='true']::before {
  display: none;
}
/* 🚨 MEDIDO: com uma janela do kit aberta a `.btf` some (`:not([data-rpgw])`),
   mas a doca continuava pintada em 992,158 por cima do véu do Perfil e dos
   Talentos. Ela é peça de tela de combate: com janela aberta, sai também.
   `display:none` em elemento fixo não devolve nada ao fluxo, então abrir e
   fechar janela não sacode o palco.

   🚨 CORRIGIDO (11/09, achado do Zerg + Claude): a regra original exigia
   `data-bt-faixa='1'` JUNTO com `[data-rpgw]` — mas essas duas condições são
   mutuamente excludentes por construção (abrir qualquer janela marca
   `.game__palco` com `data-oculto`, o que zera `data-bt-faixa` em
   `faixa-superior.js::atualizar()`). A regra nunca disparava, em nenhuma
   janela, nunca — medido ao vivo (`data-oculto`/`data-bt-faixa`/`data-rpgw`
   nunca coexistem no estado que essa regra precisava). Também medido: forçar
   `data-bt-faixa` manualmente por fora funciona por <320ms e depois o próprio
   `setInterval` de 250ms (rede de segurança do #1491/flicker) desfaz — não dá
   pra "consertar" pelo atributo, só pela regra. Basta `[data-rpgw]` sozinho:
   é exatamente a condição "saiu da cena pura", que é a intenção da regra. */
html[data-rpgw] .rebirth[data-ready='true'] {
  display: none !important;
}
html[data-bt-faixa='1'] .rebirth[data-ready='true'] .rebirth__title {
  color: var(--rpg-ouro, #ffc94a);
  font-size: clamp(9px, calc(12px * var(--bt-un)), 20px);
  paint-order: stroke fill;
  -webkit-text-stroke: var(--bt-fio) var(--bt-fio-ouro);
}
html[data-bt-faixa='1'] .rebirth[data-ready='true'] .rebirth__sub {
  overflow: hidden;
  color: var(--rpg-tinta-2, #a9c4e8);
  font-size: clamp(9px, calc(10px * var(--bt-un)), 16px);
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* O `btn-gold` do jogo vem com `min-width:150px; min-height:40px` em px cru —
   num palco de 693 ele sozinho estouraria a peça. Reancorado na unidade. */
html[data-bt-faixa='1'] .rebirth[data-ready='true'] .rebirth__btn {
  min-width: calc(96px * var(--bt-un));
  min-height: calc(26px * var(--bt-un));
  padding: 0 calc(10px * var(--bt-un));
  font-size: clamp(9px, calc(12px * var(--bt-un)), 20px);
}
/* Em celular deitado sobra a chamada e o botão: a segunda linha é apoio. */
@media (max-height: 520px) {
  html[data-bt-faixa='1'] .rebirth[data-ready='true'] .rebirth__sub {
    display: none;
  }
}
/* Opções continua existindo e clicável por código — é o destino do ícone
   "Menu" —, mas sai do canto que o contrato reserva ao botão de pausa.
   🚨 INCONDICIONAL (14/09, pedido do Zerg): antes só escondia com
   `data-bt-faixa='1'`/`[data-rpgw]`; a varredura de hoje (skillbar-atalho
   corrigido, 30 itens de nav testados) não achou mais nenhum caminho vivo
   que precise dele visível — mesma técnica (opacity+pointer-events, não
   display:none, continua clicável por código), só sem a condição. */
.scene__gear {
  opacity: 0;
  pointer-events: none;
}

/*
 * O aviso "Chefe a seguir" estava ancorado À DIREITA DA PLACA DE CAPÍTULO
 * (`hud/styles.css`: `left: 50% + 205px`) — com a placa fora, ele caía em x
 * 60–72%, embaixo dos dois primeiros ícones do menu. Desce para a folga logo
 * abaixo das pílulas (x 21–33% · y 6,3–12%), que nenhum trecho do contrato
 * reivindica. Continua sendo peça de chefe: quem fizer §1.4 pode recolhê-lo
 * para dentro da barra do chefe e apagar estas cinco linhas.
 */
html[data-bt-faixa='1'] .scene__boss {
  left: calc(var(--hud16-px, 0px) + var(--hud16-pw, 100vw) * 0.21) !important;
  top: calc(var(--hud16-py, 0px) + var(--hud16-ph, 100dvh) * 0.063) !important;
  /* O aviso nasce centrado no próprio `left` (`translateX(-50%)` do bundle):
     sem zerar isto, "21%" vira 15% e ele encosta na barra de XP. */
  transform: none !important;
  translate: none !important;
}

/* ── 1.1 retrato ────────────────────────────────────────────────────── */

/* O borrão do acervo é o que separa o texto do cenário sem caixa preta. */
.btf__borrao {
  position: absolute;
  left: -3%;
  top: -4%;
  width: 31%;
  height: 30%;
  /* Forte o bastante para o nome vencer o céu claro do cenário, fraco o
     bastante para não virar retângulo preto sobre ele.
     🚨 0,9 e não 0,78: com o retrato e as três linhas na medida da referência, o
     bloco cresceu e passou a encostar no céu claro da fase de lava. Amostrado no
     arquivo da referência, o fundo do bloco é #02001e contra #110253 do cenário
     ao lado — lá o bloco senta numa placa escura de verdade, e a nossa mal
     escurecia. A peça é um borrão, então mais opacidade não faz aresta. */
  opacity: 0.9;
}

/*
 * Quadrado, porque a moldura é um círculo: o contrato dá x 1,5–5,5% e y
 * 1,5–13%, que não fecham na mesma caixa, e diz "≈90×90". Na imagem de
 * referência (1684 de largura) 90px são 5,34% da largura e 9,5% da altura —
 * nenhum dos dois é a faixa escrita. Fica o "90×90", que é a FORMA: 5% da
 * largura do palco, quadrado. Sai 0,5pp abaixo dos 90px e passa 1pp da borda
 * direita do texto do contrato; ir para 4% (a faixa x literal) daria 64px num
 * palco de 1600, um terço menor que o retrato do desenho.
 *
 * `z-index` porque a barra de XP começa em y 10% e o disco termina em 10,39%: o
 * contrato manda a barra passar POR BAIXO do retrato ("ela atravessa o bloco"),
 * e sem isto quem é irmã posterior no DOM pinta por cima.
 */
/*
 * 🚨 6,2% E NÃO 5% — MEDIDO NO ARQUIVO DA REFERÊNCIA, ampliado lado a lado. O
 * "≈90×90" do §1.1 foi lido a olho; a régua no arquivo (1672×941) põe o aro
 * externo em x 9–122 · y 7–117, ou seja 113px = 6,76% da largura do palco. A 5%
 * o retrato saía com 80px onde a referência tem 108, e no comparativo ampliado
 * era a peça que mais destoava do bloco: cabeça miúda, ar demais em volta e o
 * nome dominando o canto. Fica 6,2% (99px em 1600) porque o aro tem de terminar
 * antes do bloco de nome, que por sua vez tem de caber até as pílulas (x 21%).
 */
.btf__retrato {
  position: absolute;
  left: 1%;
  top: 1.5%;
  width: 6.2%;
  aspect-ratio: 1;
  z-index: 1;
}
.btf__foto {
  position: absolute;
  /* 🚨 `inset` NÃO dimensiona imagem. Elemento substituído com `width:auto`
     resolve pelo tamanho INTRÍNSECO e ignora o `right`/`bottom` — o retrato saiu
     em 163×223 por cima de um aro de 80px. Largura e altura têm de ser ditas. */
  left: 11%;
  top: 11%;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  /* O PNG do armário é o boneco de corpo inteiro: `cover` alto mostra cabeça e
     ombros, que é o enquadramento do retrato na referência. */
  object-fit: cover;
  object-position: 50% 2%;
  background: radial-gradient(circle at 50% 35%, #16233b, #05080f 78%);
}
.btf__aro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* O aro é claro e translúcido; sobre céu claro ele sumia. */
  filter: drop-shadow(0 0 calc(1.5px * var(--bt-un)) #0b0f17b0);
}

/* ── 1.2 identidade ─────────────────────────────────────────────────── */

/*
 * x 7% · y 2,5% é o contrato. A caixa para em 20,5% (13,5% de largura) porque as
 * pílulas do §1.3 começam em 21%: com os 26% de antes, um nome longo entrava por
 * baixo da pílula de ouro, que fica na mesma altura do nome.
 */
.btf__quem {
  position: absolute;
  /* Encostado no aro do retrato, que agora termina em 7,2% — na referência o
     nome começa em 7,65%, colado nele. A largura fecha em 20,7%, meio ponto
     antes das pílulas. */
  left: 7.8%;
  top: 2.5%;
  display: flex;
  flex-direction: column;
  gap: calc(1px * var(--bt-un));
  max-width: 12.9%;
  /* 🚨 SEM ISTO A TERCEIRA LINHA ENTRA NA BARRA DE XP. Com as três fontes na
     medida da referência, as caixas de linha do navegador (≈1,2 × a fonte)
     somavam 8% da altura do palco a partir de y 2,5% e o nível caía em cima da
     barra, que o §1.2 crava em y 10%. A fonte HUD16 tem ascent 0,8 + descent 0,2
     = 1,000 em (lido do `hhea` de `hud/fonte.ttf`): 1,06 dá a altura do desenho
     da letra mais um fio, sem cortar a perna do "g". */
  line-height: 1.06;
}
.btf__quem > * {
  white-space: nowrap;
  paint-order: stroke fill;
}
/*
 * 🚨 AS TRÊS LINHAS CRESCERAM, E É MEDIDA. Ampliada lado a lado com a
 * referência, a identidade daqui lia como legenda de mapa e a de lá como o
 * nome do herói. Altura de letra no arquivo (1672×941), convertida para a base
 * 1280 de `--bt-un`: nome 18,4px (estava 17), classe 15,3px (estava 11) e nível
 * 16,8px (estava 13). A classe e o nível ficam um degrau abaixo do medido — 14
 * e 16 — porque este jogo põe o poder de combate na mesma linha do nível, o que
 * a referência não faz, e a linha tem de caber nos 12,9% do bloco.
 */
.btf__nome {
  overflow: hidden;
  color: var(--rpg-tinta, #fffdf6);
  font-size: clamp(10px, calc(18px * var(--bt-un)), 30px);
  text-overflow: ellipsis;
  -webkit-text-stroke: var(--bt-fio) var(--bt-fio-creme);
  text-shadow: 0 calc(1px * var(--bt-un)) calc(2px * var(--bt-un)) #000a;
}
.btf__classe {
  /* 🚨 CINZA NEUTRO, NÃO AZUL. `--rpg-tinta-2` (#a9c4e8) é o apoio das JANELAS
     do kit; amostrada na referência (x 160 · y 55) a classe é #b5b7b9 — cinza
     sem matiz. No comparativo ampliado o azul puxava a linha para o lado frio
     enquanto todo o resto do bloco é creme e ouro. A mistura tira o azul sem
     inventar um token novo. */
  color: color-mix(in srgb, var(--rpg-tinta, #fffdf6) 72%, #000);
  font-size: clamp(9px, calc(14px * var(--bt-un)), 20px);
  letter-spacing: 0.03em;
  -webkit-text-stroke: var(--bt-fio) var(--bt-fio-creme);
}
/* Ponto de montagem neutro, terceiro disco da coluna de pausa (11/09, pedido
   do Zerg: "abaixo do botão de pause de boss"). Mesma caixa dos dois botões
   de pausa (left/width/height) — só a POSIÇÃO é copiada, o resto (arte,
   comportamento) é decidido por quem se ancora aqui, não por este arquivo.
   Fora da zona de clique-delegado de `rpg/perfil.js`
   (`.btf__retrato, .btf__quem, .btf__xp, .hud__identity`) por estar longe
   dela — não precisa do truque de irmão/pointer-events que a posição
   antiga, dentro da identidade, exigia. */
.hud16-player-tools {
  position: absolute;
  left: 96%;
  top: 11.7%;
  width: 2.53%;
  height: 4.5%;
  display: grid;
  place-items: center;
  /* 🚨 `.btf` inteira é `pointer-events:none` de propósito (só quem pede
     recebe clique — ver `.btf__pilula` acima). */
  pointer-events: auto;
}
.btf__linha {
  display: flex;
  align-items: baseline;
  gap: calc(7px * var(--bt-un));
}
.btf__nivel {
  color: var(--rpg-ouro, #ffc94a);
  font-size: clamp(9px, calc(16px * var(--bt-un)), 24px);
  -webkit-text-stroke: var(--bt-fio) var(--bt-fio-ouro);
}
/* Poder de combate: não está no §1, mas está na tela hoje — sai da mesma linha
   do nível, em âmbar, para não competir com o dourado do nível. */
.btf__poder {
  color: var(--rpg-ambar, #ffa129);
  font-size: clamp(9px, calc(12px * var(--bt-un)), 20px);
  -webkit-text-stroke: var(--bt-fio) var(--bt-fio-ouro);
}
.btf__poder:empty {
  display: none;
}

/* Barra de XP — começa DEBAIXO do retrato e atravessa o bloco (contrato §1.2). */
.btf__xp {
  position: absolute;
  left: 4%;
  top: 10%;
  width: 13%;
  height: 3%;
  min-height: calc(9px * var(--bt-un));
  overflow: hidden;
  border-radius: 999px;
  /* Poço com um fundo de vermelho apagado, como na referência (#440000 na parte
     vazia): preto puro dava um contraste de botão apagado, não de barra. */
  background: color-mix(in srgb, var(--rpg-poço, #04070d) 72%, var(--bt-xp-c));
  box-shadow: inset 0 0 0 max(1px, calc(1px * var(--bt-un))) var(--rpg-vidro, #ffffff26);
}
.btf__xp i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  /*
   * 🚨 ERA UMA PASTILHA DOURADA E NÃO UMA BARRA. O gradiente anterior ia de
   * `--rpg-ouro` a âmbar (medido no print: #ffc749 → #ff8d41) e, com a barra
   * cheia, o bloco do herói lia como um BOTÃO de ouro colado embaixo do nome —
   * foi o que saltou no comparativo ampliado. Na referência ela é vermelha:
   * amostrada na coluna x 130 o preenchimento é #900302 → #9c0301 e o vazio
   * #5b0001 → #3d0000.
   *
   * §1.2 pede "vermelho-alaranjado" e é isso que fica: laranja quente só no
   * topo (o brilho da peça), corpo e base em vermelho. Não colide com o
   * CONTRATO §4 ("vermelho é só perigo") porque aqui o vermelho não sinaliza
   * estado nenhum — é a cor da peça na referência, igual em barra cheia e em
   * barra vazia; o que alerta continua sendo o âmbar do §9-bis.5.
   */
  background: linear-gradient(180deg, var(--bt-xp-a), var(--bt-xp-b) 46%, var(--bt-xp-c));
  transition: width 0.35s ease-out;
}
.btf__xptxt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--rpg-tinta, #fffdf6);
  font-size: clamp(9px, calc(10px * var(--bt-un)), 16px);
  /* No piso de 9px dentro de uma barra de 11,7px (844×390) a caixa da linha é o
     que decide se cabe. Só há dígitos e "/": não há descida para cortar. */
  line-height: 1;
  paint-order: stroke fill;
  -webkit-text-stroke: var(--bt-fio) var(--bt-fio-creme);
}

/*
 * Barra de MANA — uma faixa abaixo da de XP (28/08, pedido do Zerg: "colocar
 * uma barra de Mana com a quantidade igual a de hp logo em baixo dela de cor
 * azul"). MESMA geometria da `.btf__xp` (largura, altura, arredondamento),
 * só descendo `top` pela altura dela + um respiro — e a cor troca pra azul,
 * puxando o mesmo par usado na barra de mana do combate (`.bt-mana`, em
 * `campo.css`), pra não inventar uma terceira paleta de mana no jogo.
 */
.btf__mp {
  position: absolute;
  left: 4%;
  top: calc(10% + 3% + 0.4%);
  width: 13%;
  height: 3%;
  min-height: calc(9px * var(--bt-un));
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rpg-poço, #04070d) 72%, #123a63);
  box-shadow: inset 0 0 0 max(1px, calc(1px * var(--bt-un))) var(--rpg-vidro, #ffffff26);
}
.btf__mp i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #a3e8ff, #3f9de0 46%, #1d6fb8);
  transition: width 0.35s ease-out;
}
.btf__mptxt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--rpg-tinta, #fffdf6);
  font-size: clamp(9px, calc(10px * var(--bt-un)), 16px);
  line-height: 1;
  paint-order: stroke fill;
  -webkit-text-stroke: var(--bt-fio) var(--bt-fio-creme);
}

/* ── 1.3 pílulas de recurso ─────────────────────────────────────────── */

/*
 * 🚨 A LARGURA VOLTOU A SER DO CONTEÚDO, E O COMPARATIVO AMPLIADO É QUE MANDOU.
 *
 * Com `width: 35%` cravado, as quatro pílulas eram ESTICADAS para preencher a
 * caixa: sobrava tanto vão dentro de cada uma que os quatro retângulos escuros
 * liam como UMA FAIXA CONTÍNUA, e não como quatro cápsulas. Na referência elas
 * terminam em x 49,5% (medido no arquivo: bordas em 355 e 828 de 1672) — quase
 * exatamente os "48,66%" que a versão anterior desta folha tratou como desvio a
 * corrigir. O desvio era do §1.3, que anotou 56% a olho.
 *
 * `max-width` continua guardando os 35% do contrato: no dia em que os quatro
 * números crescerem, a fileira encolhe as pílulas em vez de invadir a barra do
 * chefe, que começa em 38%.
 */
.btf__recursos {
  position: absolute;
  left: 21%;
  top: 1.5%;
  width: max-content;
  max-width: 35%;
  height: 4%;
  display: flex;
  align-items: stretch;
  gap: calc(9px * var(--bt-un));
}
.btf__pilula {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  /* Número "alinhado à direita" (§1.3): com a pílula maior que o número, é a
     borda direita que o segura, não o ícone. */
  justify-content: flex-end;
  /* Respiro medido na referência: 10px de folga antes do ícone, 30px de ícone,
     15px até o número e 11px depois dele, numa imagem de 1672 — na base 1280 de
     `--bt-un` isso é 42px à esquerda e 9px à direita. Com os 28px de antes o
     número encostava no ícone e a cápsula ficava sem ar. */
  padding: 0 calc(9px * var(--bt-un)) 0 calc(42px * var(--bt-un));
  border-radius: 999px;
  background: var(--bt-poco);
  /* 🚨 O ARO A 15% DE BRANCO NÃO EXISTIA NA TELA. Sobre o céu de lava as quatro
     pílulas viravam manchas escuras sem contorno, e era mais um motivo de a
     fileira ler como faixa única. Na referência cada cápsula tem um fio claro
     nítido em volta. */
  box-shadow: inset 0 0 0 max(1px, calc(1px * var(--bt-un))) #ffffff40;
}
.btf__pilula[hidden] {
  display: none;
}
/*
 * 🚨 O ÍCONE CABE DENTRO DA PÍLULA. §1.3 anotou "≈40px, saindo pela borda
 * esquerda"; medido no arquivo, a moeda tem 30px de 1672 (1,79% da largura) numa
 * pílula de 36px de altura e fica INTEIRA dentro dela, com folga. Os 30px de
 * unidade daqui pintavam 37,5px em 1600 — maior que a própria pílula (36px) —, e
 * no comparativo ampliado os quatro ícones apareciam montados por cima da
 * cápsula como adesivo, estourando por cima e por baixo do fio.
 */
.btf__pilula img {
  position: absolute;
  left: calc(8px * var(--bt-un));
  top: 50%;
  width: calc(24px * var(--bt-un));
  height: calc(24px * var(--bt-un));
  translate: 0 -50%;
  object-fit: contain;
  filter: drop-shadow(0 calc(1px * var(--bt-un)) calc(2px * var(--bt-un)) #000a);
}
.btf__pilula b {
  color: var(--rpg-tinta, #fffdf6);
  font-size: clamp(10px, calc(17px * var(--bt-un)), 28px);
  line-height: 1;
  paint-order: stroke fill;
  -webkit-text-stroke: var(--bt-fio) var(--bt-fio-creme);
}

/* ── 1.5 menu de cinco ícones ───────────────────────────────────────── */

/*
 * x 64–95%, a caixa do contrato. Ele terminava em 93,5% porque a coluna de
 * navegação do jogo ocupava x 94,2–99,1% com z-index 50 e cobriria o que
 * passasse dali — mas ela não pinta mais desde que `integrar.css` a esconde
 * (`html[data-bat-nova] .sidenav, .bottomnav { display:none }`), e sobravam
 * 1,5pp de espaço morto. Se a coluna algum dia voltar, este `width` volta a
 * 29,5% junto com ela.
 *
 * A altura para em 10,7% e não em 11%: a placa de capítulo do §1.7 começa em
 * 11,2% logo abaixo, e as duas encostadas leem como uma peça só.
 */
.btf__menu {
  position: absolute;
  /* 🚨 ERA `left: 64%; width: 31%` PARA CINCO ITENS. Com o Mercado (28/08/2026)
     são SEIS, e a coluna de 5,2% cada cortava o rótulo em "Merca…". A fileira de
     pílulas termina em 56% (`left: 21%` + `max-width: 35%`), então 57,5% é o
     primeiro ponto livre à esquerda; o fim continua em 95%, antes do botão de
     pause em 96%. Seis colunas de 6,25% em vez de cinco de 6,2% — ninguém
     encolheu, só entrou mais um. */
  left: 57.5%;
  top: 1%;
  width: 37.5%;
  height: 9.7%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: calc(5px * var(--bt-un));
}
.btf__mitem {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2px * var(--bt-un));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}
.btf__mitem:disabled {
  cursor: default;
  /* Indisponível é apagado, não perigoso (CONTRATO §9-bis.5). */
  opacity: 0.4;
  filter: grayscale(1);
}
.btf__mico {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: grid;
  place-items: center;
}
/*
 * Os ícones do topo do acervo são silhuetas brancas chapadas: sobre céu claro
 * somem, e o escurecimento atrás é o que lhes devolve o contorno.
 *
 * 🚨 MAS ERA UM DISCO PRETO, E A REFERÊNCIA NÃO TEM DISCO. Com `--bt-poco` (80%
 * de opacidade) firme até 52% do raio, os cinco ícones ficavam sentados em cinco
 * moedas pretas — de longe se via a fileira de discos antes de se ver o que
 * cada um é. Na referência os ícones ficam SOLTOS sobre o cenário; o que os
 * segura é a arte cheia deles e uma sombra. Aqui a arte é chapada, então o
 * escurecimento fica — mas com metade da força e caindo cedo, para ler como
 * sombra e não como peça.
 */
.btf__mico::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 52%,
    color-mix(in srgb, var(--rpg-poço, #04070d) 46%, transparent) 26%,
    transparent 66%
  );
}
.btf__mico img {
  position: relative;
  max-width: 78%;
  /* 🚨 92% e não 80%: com o rótulo em 15px a linha de baixo cresceu e, no teto
     antigo, o ícone caía para 51px em 1600. Medido no arquivo da referência ele
     tem 62px de 941 de altura = 6,59% do palco, isto é 59px em 1600 — que é o
     que 92% desta fileira devolve. */
  max-height: 92%;
  object-fit: contain;
  /*
   * 🚨 O FILTRO QUE PINTAVA TUDO DE BRANCO SAIU EM 28/08/2026.
   *
   * Ele era `brightness(0) invert(1)`, e existia quando quatro das cinco peças
   * já eram silhuetas brancas: chapava a quinta para o conjunto ficar uniforme.
   * O preço era invisível até aparecer uma arte de verdade — ele apaga sombra,
   * contorno e detalhe e devolve a SILHUETA. Foi assim que o Mercado e o Isekai
   * viraram manchas brancas, e eu cheguei a culpar o desenho antes de achar
   * esta linha.
   *
   * Hoje os seis ícones da fileira são desenhos que o Zerg mandou. Tirar o
   * filtro é mais honesto do que abrir seis exceções — e a sombra, que é o que
   * segura o ícone contra o cenário claro, fica.
   */
  filter: drop-shadow(0 calc(1px * var(--bt-un)) calc(2px * var(--bt-un)) #000c);
}
.btf__mitem:hover:not(:disabled) .btf__mico img,
.btf__mitem:focus-visible .btf__mico img {
  filter: drop-shadow(0 0 calc(4px * var(--bt-un)) var(--rpg-ouro, #ffc94a));
}
/* 🚨 15px E NÃO 11 — o rótulo é medido, como tudo aqui. Altura de letra no
   arquivo da referência: 24px de 941 (2,55% da altura do palco), o que na base
   1280 de `--bt-un` são 18,4px. A 11px o rótulo saía com 13,75px em 1600 e no
   comparativo ampliado "Loja/Invocar/VIP" liam como legenda miúda sob ícones
   grandes, enquanto na referência a palavra tem quase o peso do ícone. Fica 15
   e não 18,4 porque a coluna aqui tem 6,2% do palco contra os 6,5% de lá e o
   rótulo mais comprido ("Invocar") tem de caber sem reticências. */
.btf__mrot {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  color: var(--rpg-tinta, #fffdf6);
  font-size: clamp(9px, calc(15px * var(--bt-un)), 22px);
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
  paint-order: stroke fill;
  -webkit-text-stroke: var(--bt-fio) var(--bt-fio-creme);
}
/*
 * 🚨 A BOLINHA É CSS E É VERMELHA. `faixa-badge.png` é LARANJA (#ff6034 no
 * centro, medido no arquivo) e vinha com 11px de unidade: no comparativo
 * ampliado ela era um pontinho cor de fogo perdido dentro do céu de lava, onde a
 * referência tem um disco vermelho puro (#f91616) de 20px de 1672 = 1,2% da
 * largura. Bolinha lisa é FORMA, e forma é CSS (CONTRATO §3) — a peça do acervo
 * não estava trazendo arte nenhuma, só uma cor errada.
 */
/* Zerg 22/09 (8º lote #8): "bolinha vermelha... muito grande, avisar sem incomodar" — era 15px. */
.btf__badge {
  position: absolute;
  right: 4%;
  top: 0;
  width: calc(10px * var(--bt-un));
  height: calc(10px * var(--bt-un));
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 32%,
    color-mix(in srgb, var(--bt-alerta) 62%, #fff),
    var(--bt-alerta) 58%,
    color-mix(in srgb, var(--bt-alerta) 66%, #000)
  );
  box-shadow: 0 0 0 max(1px, calc(1px * var(--bt-un))) #00000073;
  display: none;
}
.btf__mitem[data-alerta='1'] .btf__badge {
  display: block;
}

/* ── 1.6 pausa ──────────────────────────────────────────────────────── */

/*
 * O contrato dá x 96–99% · y 1,5–6% para um botão CIRCULAR — 3% de largura e
 * 4,5% de altura são 48 × 40,5px num palco de 1600, e círculo não tem dois
 * diâmetros. Fica o menor: 4,5% da altura, que num palco 16:9 é 2,53% da
 * largura. Assim o disco cabe INTEIRO na caixa (x 96–98,53 · y 1,5–6) em vez de
 * furar a base dela em 0,75pp, como fazia com 2,9%.
 */
.btf__pausa {
  position: absolute;
  left: 96%;
  top: 1.5%;
  width: 2.53%;
  height: 4.5%;
  display: grid;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bt-poco);
  /* O aro a 15% de branco sumia sobre o céu claro e o botão virava uma mancha
     sem forma — na referência o disco de pausa tem um anel claro nítido. */
  box-shadow: inset 0 0 0 max(1px, calc(1.5px * var(--bt-un))) #ffffff4d;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
}
.btf__pausa img {
  width: 48%;
  height: 48%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
/* Parado: o botão passa a oferecer o retomar, e o aro dourado avisa de longe
   que o combate não está andando. */
.btf__pausa[data-pausado='1'] {
  box-shadow: inset 0 0 0 max(1px, calc(1.5px * var(--bt-un))) var(--rpg-ouro, #ffc94a);
}
.btf__pausa[data-pausado='1'] img {
  display: none;
}
.btf__pausa[data-pausado='1']::after {
  content: '';
  width: 34%;
  height: 40%;
  margin-left: 8%;
  background: var(--rpg-ouro, #ffc94a);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.btf__pausa:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── celular deitado ────────────────────────────────────────────────── */

/*
 * Em 844×390 o palco tem 693px e `--bt-un` vale 0,5417: a letra vai toda para o
 * piso de 9px e o que era folga vira aperto. Some o que é secundário em vez de
 * espremer tudo (CONTRATO §9-ter.3).
 */
@media (max-height: 520px) {
  /* O poder de combate é o único aqui que o §1 não pede: é o primeiro a sair. */
  .btf__poder {
    display: none;
  }
  /*
   * 🚨 O TEXTO DO XP VOLTOU. Ele estava escondido nesta faixa e o jogador de
   * celular deitado via a barra sem número nenhum — o §1.2 pede
   * "`5.005 / 12.718` centralizado". Com a barra na altura do contrato (3% =
   * 11,7px) o piso de 9px cabe; era a barra de 2,7% que não deixava.
   */
  /* Com as três linhas no piso de 9–10px o bloco de identidade fica
     proporcionalmente mais alto (8,2pp contra 6,6pp em 1600). Sem compactar a
     entrelinha, começar em y 2,5% (contrato) o faria entrar na barra de XP, que
     o contrato crava em y 10%. */
  .btf__quem {
    gap: 0;
    line-height: 1;
  }
  /*
   * 🚨 O ALVO DE TOQUE DA PAUSA. Medido com clique de mouse real a 844×390: o
   * disco sai com 18×18px, porque 2,53% de um palco de 693px é 17,5. A tentativa
   * anterior alargava a área com um `::before` de inset negativo — e isso NÃO
   * entra na caixa do botão: nem a auditoria nem o polegar ganharam um pixel
   * onde importa. Aqui o botão passa a ter 30px de verdade, que é o mesmo
   * raciocínio do piso de fonte do CONTRATO §9-ter — proporção enquanto couber,
   * mínimo utilizável depois.
   *
   * Ele recua para continuar terminando em x 99% (§1.6) e o menu encolhe
   * exatamente o que a pausa cresceu: sem isso os dois se encostam em 95%, e o
   * clique na borda do ícone "Menu" cairia na pausa.
   */
  .btf__pausa {
    left: calc(99% - 30px);
    min-width: 30px;
    min-height: 30px;
  }
  .btf__menu {
    width: min(37.5%, calc(41.5% - 34px));
  }
}

/* OS DOIS BOTÕES DE PAUSE (28/08/2026, arte nova do Zerg).
 *
 * 🚨 A ARTE JÁ É O BOTÃO INTEIRO — disco, aro e símbolo. O estilo antigo
 * assumia o contrário: `filter: brightness(0) invert(1)` pintava a imagem de
 * BRANCO CHAPADO e a reduzia a 48%, porque a arte antiga era só o símbolo e o
 * disco vinha do CSS. Com a arte nova isso virava um borrão branco pequeno
 * dentro do disco escuro — a "bolinha" que o Zerg viu.
 *
 * Aqui a arte volta a ter as próprias cores e ocupa o botão todo; o disco e o
 * aro do CSS saem, senão ficariam desenhados por trás do disco dela.
 */
.btf__pausa img {
  width: 100%;
  height: 100%;
  filter: none;
}
.btf__pausa {
  background: none;
  box-shadow: none;
}

/* O segundo, logo ABAIXO do primeiro — MESMO TAMANHO (o Zerg preferiu a
 * simetria e liberou passar um pouco da linha do menu). O primeiro ocupa
 * 1,5%–6% do palco e este 6,6%–11,1%; os rótulos do menu terminam em 10,7%,
 * então ele passa ~0,4% — dentro do que foi autorizado. */
.btf__pausa--chefe {
  top: 6.6%;
  width: 2.53%;
  height: 4.5%;
}
/* apagado enquanto a preferência está desligada, aceso quando ligada */
.btf__pausa--chefe[aria-pressed='false'] { opacity: .55 }
.btf__pausa--chefe[aria-pressed='true']  { opacity: 1 }

/* O CRISTAL NO PRUMO DOS DOIS TRAÇOS DE CIMA (28/08/2026, pedido do Zerg).
 *
 * 🚨 O desencontro NÃO é da caixa: os dois botões já ocupam a mesma coluna
 * (`left: 96%`, `width: 2.53%`). Ele é de DENTRO da arte. Medido nos arquivos:
 *   faixa-pausa.png        → o vão entre os traços cai a 49,69% da largura
 *   faixa-pausa-chefe.png  → o vão (e o cristal, simétrico a ele) a 47,42%
 * São 2,27% de diferença — exatamente o ~1px à esquerda que aparecia na tela
 * dele. Empurrar a IMAGEM por esse tanto põe o cristal no prumo do vão de cima
 * sem mexer no botão, que continua onde o layout manda.
 *
 * A porcentagem do `translate` é da largura do PRÓPRIO elemento, e a imagem
 * ocupa 100% do botão — então 2,27% aqui valem 2,27% do botão em qualquer
 * tamanho de tela. Nada de pixel cravado.
 */
.btf__pausa--chefe img { transform: translateX(2.27%) }

/* O SELO "ON" DO PAUSE BOSS (28/08/2026, pedido do Zerg).
 *
 * *"Quando o Botão de Pause Boss Estiver Ligado coloque Escrito: ON em cima
 * dele para deixar bem destacado que está Ligado"*.
 *
 * 🚨 EM CIMA DO BOTÃO, e não acima dele: logo acima está o outro botão de
 * pause, e um selo ali cairia sobre o vizinho. Ele fica na parte de baixo do
 * cristal, onde a arte é escura e a pastilha dourada salta, sem cobrir a ponta
 * vermelha que dá forma ao botão.
 *
 * 🚨 O selo NÃO guarda estado: só reage ao `aria-pressed` que o JS copia da
 * chavinha `#pausa-chefe` a cada 600ms. É a mesma fonte de verdade que a
 * opacidade do botão já usa.
 */
.btf__pausaon {
  position: absolute;
  left: 50%;
  top: 80%;
  translate: -50% -50%;
  /* O piso de 9px é o §9-ter do CONTRATO: abaixo disso o selo deixa de ser
     legível justamente no celular, que é onde ele mais precisa aparecer. */
  font-size: clamp(9px, calc(9px * var(--bt-un)), 15px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  padding: 0.18em 0.4em;
  border-radius: 999px;
  color: #1b1205;
  background: linear-gradient(180deg, #ffd979, #e0a52e);
  box-shadow: 0 1px 3px #000a, inset 0 0 0 1px #00000059;
  opacity: 0;
  transition: opacity 0.12s ease-out;
  pointer-events: none;
}
.btf__pausa--chefe[aria-pressed='true'] .btf__pausaon {
  opacity: 1;
}

/* AS PÍLULAS VIRARAM BOTÃO (28/08/2026): ouro leva ao Perfil, gema à Loja de
   Gemas, e os dois baús abrem a janelinha de 1/5/10.

   🚨 `pointer-events: auto` é obrigatório: a `.btf` inteira é transparente ao
   ponteiro de propósito (senão a faixa roubaria o toque da cena), e só quem
   pede volta a receber clique. Sem esta linha as pílulas ficam bonitas e
   mortas — foi assim que o cartão do herói não abria. */
.btf__pilula {
  pointer-events: auto;
  cursor: pointer;
  border: 0;
  font: inherit;
  transition: box-shadow 0.12s ease-out, scale 0.12s ease-out;
}
.btf__pilula:hover,
.btf__pilula:focus-visible {
  box-shadow: inset 0 0 0 max(1px, calc(1.5px * var(--bt-un))) var(--rpg-ouro, #ffc94a);
  scale: 1.03;
}
.btf__pilula:active {
  scale: 0.97;
}
.btf__pilula:focus-visible {
  outline: none;
}

/* O BOTÃO DO ISEKAI NA FAIXA (28/08/2026, pedido do Zerg).
 *
 * *"Colocar ele Para aparecer logo abaixo de Onde fica o Gold e Gema, com o
 * Escrito: Isekai, logo abaixo dele como dos outros botões"*.
 *
 * 🚨 Ele usa `.btf__mitem`, a MESMA classe dos itens do menu da direita — é de
 * lá que vêm o ícone redondo, o rótulo embaixo e o tamanho de letra. Só a
 * posição é própria: a fileira de pílulas ocupa `top: 1,5%` com 4% de altura,
 * então 6,2% é a linha logo abaixo dela, na mesma coluna (21%).
 *
 * 🚨 `pointer-events: auto`, como toda peça clicável da `.btf` — a faixa é
 * transparente ao ponteiro por padrão.
 *
 * Quem cria e remove este botão é `isekai/index.js`, e ele só existe quando dá
 * para renascer: ausência é a informação, e não um botão apagado permanente.
 */
.btf__isekai {
  position: absolute;
  left: 21%;
  top: 6.2%;
  width: 5.6%;
  height: 9.7%;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
}

/* (Aqui morava a exceção do Mercado ao filtro branco. Ela saiu junto com o
   filtro, que agora não existe para ninguém — uma regra a menos.) */

/* 18/09, pedido do Zerg (painel Ações admin, "Camadas de interface"): 4
   interruptores irmãos escritos por combate/index.js. `.btf__pausa` cobre o
   pause normal E o de chefe (`.btf__pausa--chefe` carrega as duas classes).
   `.btf__xp` é a barra de HP (aria-label="Vida") e `.btf__mp` a de mana —
   ambas somem junto do resto do cartão de perfil; HP/mana reais não mudam. */
body[data-cenario-nav-topo='off'] .btf__menu {
  display: none !important;
}
body[data-cenario-pausa='off'] .btf__pausa {
  display: none !important;
}
body[data-cenario-recursos='off'] .btf__recursos {
  display: none !important;
}
body[data-cenario-perfil='off'] .btf__borrao,
body[data-cenario-perfil='off'] .btf__retrato,
body[data-cenario-perfil='off'] .btf__quem,
body[data-cenario-perfil='off'] .btf__xp,
body[data-cenario-perfil='off'] .btf__mp {
  display: none !important;
}