/*
 * TELA DE COMBATE EM 16:9 (25/08) — o enquadramento do Soul Strike.
 *
 * Pedido do Lucas: "quero mudar pra proporção ali de soul strike, e remover
 * essa barra lateral de nome poder atributos... vamos adaptar pra ficar tudo
 * no canvas".
 *
 * O que muda: a aba de combate deixa de ser uma tira de 306px no meio de uma
 * página que rola e passa a ser um palco 16:9 ocupando a tela, com a interface
 * por cima dele. Saem daqui a coluna `game__profile` (nome, poder, atributos,
 * que só aparece em tela larga), o bloco `status` de baixo e a faixa `hud` de
 * moedas e fase — tudo isso volta na interface nova.
 *
 * 🚨 Nada é removido do DOM: só `display:none` e posição. Mexer na árvore que o
 * React montou é o `removeChild` que já derrubou esta interface antes. Para
 * voltar ao normal basta o `<html>` perder o atributo `data-hud16`.
 */

html[data-hud16] body {
  margin: 0;
  overflow: hidden;
  /* Letterbox escuro: quando a janela não é 16:9 sobra faixa em volta do palco,
     e o azul do site ali parecia bug. Preto é o que todo jogo faz. */
  background: #04070d;
}

/* O jogo ocupa a janela: uma coluna, palco em cima, navegação embaixo. */
html[data-hud16] .game {
  background: #04070d;
  display: grid;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr auto;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  gap: 0;
  padding: 0;
}
html[data-hud16] .game > * {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}
html[data-hud16] .game__main,
html[data-hud16] .game__scroll {
  min-height: 0;
  height: 100%;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

/* 🚨 PASSO 1/2 (2026-09-10, pedido do Zerg) — só a extensão do grid, isolada da
 * regra de esconder a HUD nativa (essa vem no passo 2, depois de validar este
 * sozinho). Causa raiz da Loja não-centralizada: a coluna que `.game__profile`
 * ocupava no grid original do React continua reservada mesmo com o conteúdo
 * escondido (display:none não colapsa a coluna do grid). `medir()` em
 * `rpg/janela.js` mede `.game__scroll`, então a janela herdava esse
 * deslocamento. Testado ao vivo antes de aplicar: sem tocar no CSS compilado,
 * só estendendo esta MESMA regra (já validada em combate) para `[data-rpgw]`,
 * `.game__scroll` volta a ocupar a tela inteira e a janela centraliza certo. */
html[data-rpgw] .game {
  grid-template-columns: 1fr !important;
  /*
   * 🚨 CORRIGIDO (11/09, investigação do Zerg sobre a preview atrás do
   * Inventário "mostrando outro combate"). MEDIDO: esta regra corrigia só a
   * COLUNA — a LINHA (`grid-template-rows`) dependia inteiramente da regra
   * de `[data-hud16]` acima continuar valendo ao mesmo tempo. Mas
   * `data-hud16` cai junto com `data-oculto`/`data-bt-faixa` (mesma causa-
   * raiz do Rebirth e do chefe-a-seguir): em QUALQUER janela que toque uma
   * aba nativa do React (Inventário, Loja, Pets, Raids, Talentos…),
   * `data-hud16` some, a regra `[data-hud16] .game{grid-template-rows:1fr
   * auto}` para de bater, e o `.game` cai pro grid ORIGINAL de 3 linhas
   * (cabeçalho/conteúdo/rodapé nativos, ex: 48px/526.5px/0px medido ao
   * vivo). `.game__main`/`.game__scroll` viravam `height:100%` de uma
   * linha errada — 526.5px em vez dos 800px reais.
   *
   * Efeito prático: invisível até agora, porque o palco ficava fora da tela
   * (`data-oculto`) enquanto isso acontecia. A partir da preview automática
   * do combate atrás das janelas ([[potato-lote-6-tarefas-11-09]]), o canvas
   * do jogo passou a MEDIR esse container errado e renderizar numa
   * resolução menor (1166×656 em vez de 1280×720) — HUD reposicionada,
   * composição visual diferente da tela Parceiros (que nunca perde
   * `data-hud16`, porque não é aba nativa).
   *
   * Em Parceiros já funcionava porque `data-hud16` nunca some ali. Repetir
   * aqui a MESMA regra de linhas, para não depender de `[data-hud16]` sozinho.
   */
  grid-template-rows: 1fr auto !important;
}
html[data-rpgw] .game > * {
  grid-column: 1 / -1 !important;
  /* 🚨 Faltava também isto: `.game__main` chega com `grid-row:2` explícito
     do próprio React (o layout nativo de 3 linhas). Sem forçar `auto` aqui,
     ele cai na linha `auto` (pensada pra ser pequena) em vez da `1fr`, e
     `height:100%` de uma linha `auto` sem conteúdo vira um círculo que o
     grid resolve como 0. Mesma regra que `[data-hud16]` já usa. */
  grid-row: auto !important;
}
html[data-rpgw] .game__main,
html[data-rpgw] .game__scroll {
  min-height: 0;
  height: 100%;
}

/* 🚨 PASSO 2/2 (2026-09-10, pedido do Zerg) — esconder a HUD nativa do React
 * de forma INCONDICIONAL, sem depender de `[data-hud16]`/`[data-rpgw]`.
 * Histórico: a regra nasceu só pra `[data-hud16]` (combate), depois ganhou
 * `[data-rpgw]` (janelas, corrigindo o vazamento atrás da Loja). Zerg pediu
 * ir além: nenhuma tela usa mais essa HUD hoje (nome/poder/nível/ouro/gema/
 * capítulo já têm réplica em `hud16`), então ela nunca deveria voltar a
 * aparecer, ponto — sem depender de qual estado o jogo está.
 *
 * 🚨 SELETORES CONFIRMADOS UM A UM ANTES DE APLICAR (não por aproximação):
 * `.game__profile`/`.hud` — só a HUD nativa, nenhum shim nosso os lê.
 * `.topo`/`.moedas`/`.faseinfo` — nem existem mais no CSS compilado atual
 * (seletores de uma versão anterior do jogo); esconder é no-op seguro.
 * `.status` — ÚNICO com dupla função: também é o conteúdo da janela "Herói"
 * (`rpg/perfil.js`, seletor `.status`). Verificado ao vivo: quando a janela
 * está aberta, `.status` ganha a classe `rpgw-conteudo`, e a regra
 * `html[data-rpgw] .rpgw-conteudo` (`rpg/janela.css`) promove ela de volta
 * pra visível, na frente desta — testado por execução, a janela "Herói"
 * renderiza 100% (print mandado ao Zerg). Essa promoção lê o estado real
 * (`getComputedStyle`), não uma condição fixa, então continua funcionando
 * igual com a regra incondicional. */
.game__profile,
.status,
.hud,
.topo,
.moedas,
.faseinfo {
  display: none !important;
}

/* O palco ocupa o espaço livre. As medidas vêm do JS (`--hud16-pw/ph`) porque o
   16:9 depende da altura disponível, e altura em `calc` de CSS puro não chega
   até aqui. */
html[data-hud16] .game__palco {
  /* 🚨 `!important` aqui não é preguiça: sem ele o computado continuava
     `align-items:start` e `flex:0 0 auto` (regras do próprio jogo vencendo), e
     o palco 16:9 colava no topo deixando um vazio embaixo em janela que não
     fosse 16:9 — foi o que apareceu ao redimensionar. */
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0;
  height: 100% !important;
  overflow: hidden;
  padding: 0;
  /* 🚨 Nada de `place-items:center`: com `justify-items:center` a coluna do
     grid passa a valer o max-content do palco e o `width:100%` do filho resolve
     contra ela mesma — o palco encolhia para 484px numa tela de 1280. */
}
html[data-hud16] .game__palco > .scene,
html[data-hud16] .game__palco > .panel.scene {
  flex: 0 0 auto;
  width: var(--hud16-pw, 100%);
  height: var(--hud16-ph, auto);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* A placa do bicho no topo e a barra de vida do herói saem: as duas viraram
   barras flutuantes sobre os personagens, como no jogo de referência. */
html[data-hud16] .enemy-plate,
html[data-hud16] .scene__dock > .hpbar {
  display: none !important;
}

/* 🚨 O BLOCO DE HABILIDADES VAZA ATRÁS DE QUALQUER JANELA (12/09, print do
 * Zerg: viu os orbs de habilidade pela borda de baixo do Inventário, com o
 * número de cooldown/nível por cima). Causa: `.scene__dock` é `position:
 * fixed` (regra abaixo) — sempre por cima do jogo, em qualquer aba. A
 * janela do kit cobre só 92-94% da tela (é a moldura, de propósito — ver
 * `rpg/janela.js`), então o vão que sobra deixa o bloco fixo aparecer por
 * baixo/atrás dela. Mesmo defeito do `.enemy-plate`/`panel hpbar` acima,
 * mesmo remédio: esconder sob `[data-rpgw]` (QUALQUER janela aberta).
 * Esconder o `.scene__dock` inteiro já esconde o `.skillbar` dentro dele —
 * não precisa duplicar a regra nos dois.
 *
 * 🚨 CORRIGIDO NA MESMA TARDE: a 1ª versão só olhava `[data-rpgw]` (o
 * atributo FINAL) — sobrava o mesmo intervalo de 60ms do flash geral
 * ([[potato-hud16-gap-scene-hud-hpbar]]), porque durante a abertura só
 * `[data-rpgw-abrindo]` existe ainda, e essa regra não olhava pra ele.
 * Zerg pegou isso no vídeo: as bolinhas continuavam aparecendo bem no
 * instante do flash, mesmo já escondidas no estado estável. Mesma lista
 * completa de condições que `hud/index.js` usa pra `naCena`. */
html[data-hud16][data-rpgw] .scene__dock,
html[data-hud16][data-rpgw-abrindo] .scene__dock {
  display: none !important;
}

/* ── Habilidades: canto inferior direito, como no molde ──────────
   Medidas do protótipo (referência 1920): bloco em x=1393,y=736, slots de
   160×160, moldura `SkillCont_Frame` de 142 e ícone de 120. */
html[data-hud16] .scene__dock {
  /* 🚨 `fixed`, igual ao resto da interface: preso ao palco, o bloco de
     habilidades subia junto com o letterbox em janela fora do 16:9 e ficava
     boiando longe do menu. Interface é da TELA; do palco só as barras que
     flutuam sobre os personagens. */
  position: fixed !important;
  right: auto;
  left: calc(var(--hud16-px, 0px) + var(--hud16-pw, 100vw) / 2);
  translate: -50% 0;
  /* 🚨 As habilidades descem até o rodapé, como no exemplo (y=0.69 a 0.97 do
     palco). Antes eu descontava a altura do menu e elas subiam para o meio da
     tela; o menu agora é um bloco central estreito, então não passa por baixo
     delas. */
  bottom: calc(var(--hud16-fundo, 0px) + 12px * var(--hud16-un, 1));
  scale: 1;
  transform-origin: center bottom;
}
html[data-hud16] .skillbar {
  display: grid !important;
  /* TRÊS colunas de 107px, duas fileiras — as medidas do exemplo (slots de 160
     em 1920). Em seis colunas o bloco ficava achatado e largo demais; o
     inspetor mediu 31% de largura contra 24% do exemplo.
     🚨 `calc(px * --hud16-un)` e NÃO `em`: `em` resolve contra o font-size do
     próprio botão, e os orbs do jogo têm font-size diferente entre si — uns
     saíam com 30px e outros com 76px na mesma fileira. */
  /* UMA fileira de seis, no tamanho dos ícones do menu (50px) — o formato de
     barra de habilidade que o rodapé central pede. */
  grid-template-columns: repeat(6, calc(50px * var(--hud16-un, 1))) !important;
  gap: calc(6px * var(--hud16-un, 1)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* 🚨 `!important` e o `> button` junto do `.orb`: os orbs do jogo trazem
   tamanho próprio (98px) e um deles nem é `.orb` — sem isso o bloco fica com
   305px de altura e sobe até o meio da tela, longe do canto. */
html[data-hud16] .skillbar > .orb,
html[data-hud16] .skillbar > button {
  position: relative;
  display: grid !important;
  place-items: center;
  width: calc(50px * var(--hud16-un, 1)) !important;
  height: calc(50px * var(--hud16-un, 1)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    url('/potato/hud/ui/SkillCont_Frame.png') center / 100% 100% no-repeat,
    url('/potato/hud/ui/Shape_Skill__000000.png') center / 84% 84% no-repeat !important;
  box-shadow: none !important;
}
html[data-hud16] .skillbar > .orb > *,
html[data-hud16] .skillbar > button > * {
  position: relative;
  z-index: 1;
  max-width: 60%;
  max-height: 60%;
}

/* Só os SEIS principais ficam no palco (auto + 5 slots), como o molde: duas
   fileiras de três. Os atalhos secundários (gerenciar, baús, mapa, pausa) saem
   daqui — todos têm porta pelo menu de baixo — senão seriam quatro fileiras e
   o bloco tomaria metade da tela. */
html[data-hud16] .skillbar > .orb--seed,
html[data-hud16] .skillbar > button:not([class]) {
  display: none !important;
}
/* 🚨 ACHADO (18/09, Zerg testando no celular real, deitado — "círculos dos
   companions ficando gigantesco"): `#companions-hud .chud__slot`
   (companions-render/styles.css) tem `width/height: 84px` FIXO — nunca
   escalou com `--hud16-un` como o resto do skillbar. Escalando aqui do
   mesmo jeito que `.orb`.
   23/09, pedido do Zerg: unificar TODOS os círculos do HUD (skill/poção/
   companion) no mesmo tamanho — base trocada de 84px pra 67px, a MESMA
   base que `.skillbar > button` usa agora (`batalha/rodape.css`), então
   companion e skill/poção escalam idênticos em qualquer `--hud16-un`. */
html[data-hud16] #companions-hud .chud__slot {
  width: calc(67px * var(--hud16-un, 1)) !important;
  height: calc(67px * var(--hud16-un, 1)) !important;
}
/* Mesma correção nos filhos de texto fixo (o "+" do slot vazio e o número
   de recarga) — senão o CÍRCULO encolhe certo mas o texto dentro continua
   do tamanho de tela grande, cortando ou vazando da borda. */
html[data-hud16] #companions-hud .chud__mais {
  font-size: calc(22px * var(--hud16-un, 1)) !important;
}
html[data-hud16] #companions-hud .chud__cd {
  font-size: calc(14px * var(--hud16-un, 1)) !important;
}

/* 🚨 O jogo deixa o slot vazio com `opacity:.5`, e isso apagava o disco preto
   junto — os botões ficavam TRANSPARENTES, com o cenário aparecendo através
   deles. No exemplo o slot travado é opaco e escuro; quem diz "travado" é o
   cadeado, não a transparência. Só se viu isso ampliando os dois lado a lado. */
html[data-hud16] .skillbar > .orb--empty {
  opacity: 1 !important;
}
html[data-hud16] .skillbar .orb--empty::after {
  content: '';
  position: absolute;
  width: 26%;
  height: 26%;
  background: url('/potato/hud/ui/Icon_40_Lock.png') center / contain no-repeat;
  opacity: 0.5;
}
/* Este slot é o PAUSAR (o `title` do botão diz isso) — o equivalente daqui ao
   botão de estado que o exemplo mostra em amarelo. Fica com o anel dourado para
   se destacar dos slots de habilidade, sem a legenda escrita: no exemplo nenhum
   slot tem texto dentro. */
html[data-hud16] .skillbar > .orb--auto {
  background:
    url('/potato/hud/ui/Btn_Auto_01.png') center / 100% 100% no-repeat,
    url('/potato/hud/ui/Shape_Skill__000000.png') center / 84% 84% no-repeat !important;
  font-size: 0 !important;
}
/* 🚨 A arte da pausa é `position:absolute` com 61px próprios e passava por cima
   da borda do círculo — `max-width` no filho não a segurava. */
html[data-hud16] .skillbar > .orb--auto > img {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  width: 54% !important;
  height: 54% !important;
  translate: -50% -50%;
  object-fit: contain;
}


/* ── Botão de chefe: caveira no topo, como no exemplo ────────────
   O jogo já tem `.scene__boss`; ele só existe quando há chefe disponível, e é
   por isso que não aparecia nas capturas anteriores. Ganha a arte de lá e a
   posição de lá (topo, à direita da placa de capítulo). */
html[data-hud16] .scene__boss {
  /* 🚨 Aqui `.scene__boss` NÃO é o botão de chefe do exemplo: é um aviso de
     texto ("Chefe a seguir") que o jogo mostra quando o próximo é chefe. Vira o
     selo de caveira DELES sem perder o que ele diz — trocar por só o ícone
     apagaria a informação. */
  position: fixed !important;
  top: calc(13px * var(--hud16-un, 1)) !important;
  left: calc(50% + 205px * var(--hud16-un, 1)) !important;
  right: auto !important;
  bottom: auto !important;
  /* 26/09 (Gabriel: "o chefe a seguir está aparecendo em cima da janela, deveria ficar sempre atrás"): era 45, e o quadro das
     janelas é 44 (rpg/janela.css). 43 = acima da HUD (40/42), abaixo de qualquer janela. */
  z-index: 43;
  display: flex !important;
  align-items: center;
  gap: calc(6px * var(--hud16-un, 1));
  padding: calc(5px * var(--hud16-un, 1)) calc(14px * var(--hud16-un, 1)) calc(5px * var(--hud16-un, 1)) calc(8px * var(--hud16-un, 1));
  border: 0 !important;
  border-radius: 999px;
  background: #0c0e12cc !important;
  box-shadow: inset 0 0 0 calc(1px * var(--hud16-un, 1)) #ff6b6b3d;
  color: #ffdede !important;
  font-size: calc(13px * var(--hud16-un, 1)) !important;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 calc(1px * var(--hud16-un, 1)) calc(2px * var(--hud16-un, 1)) #000b;
}
html[data-hud16] .scene__boss::before {
  content: '';
  width: calc(30px * var(--hud16-un, 1));
  height: calc(30px * var(--hud16-un, 1));
  background: url('/potato/hud/ui/Icon_64_BossOn.png') center / contain no-repeat;
}

/* ── Habilidade equipada e recarga ───────────────────────────────
   `.orb--skill` é o slot com habilidade; `.orb__cooldown` é a tampa escura com
   os segundos que o jogo já desenha. No exemplo o número fica GRANDE e branco
   por cima da arte, com o ícone ainda visível atrás — não um bloco opaco. */
/* 🚨 O brilho da raridade vai num ::before CIRCULAR, não no `background` do
   botão: gradiente no fundo preenche a CAIXA inteira, e o slot virava um
   quadrado preto com a moldura redonda desenhada por cima. O disco continua
   sendo o `Shape_Skill__000000`, igual aos vazios. */
html[data-hud16] .skillbar > .orb--skill {
  background:
    url('/potato/hud/ui/SkillCont_Frame.png') center / 100% 100% no-repeat,
    url('/potato/hud/ui/Shape_Skill__000000.png') center / 84% 84% no-repeat !important;
}
html[data-hud16] .skillbar > .orb--skill::before {
  content: '';
  position: absolute;
  inset: 9%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
    color-mix(in srgb, var(--rarity, #5ec8ff) 62%, transparent),
    transparent 74%);
}
html[data-hud16] .skillbar .orb__cooldown {
  border-radius: 50%;
  background: #00000073;
  color: #fff;
  font-size: calc(26px * var(--hud16-un, 1));
  font-weight: 500;
  -webkit-text-stroke: calc(3px * var(--hud16-un, 1)) #14100a;
  paint-order: stroke fill;
}

/* 24/09: as seções "Coluna de atalhos" e "Navegação com as molduras do molde" saíram — estilizavam os menus
   antigos do React (`.scene-atalhos`, `.sidenav`/`.bottomnav`), que viviam escondidos e saíram do bundle. */

/* ── A interface por cima do palco, com as peças do Soul Strike ──── */

/*
 * 🚨 A interface ocupa o PALCO, não a janela.
 *
 * Já esteve dos dois jeitos. Presa à JANELA, numa tela fora do 16:9 os botões
 * caíam na faixa preta do letterbox, FORA do canvas — foi o que o Lucas viu
 * (perfil acima do céu, menu abaixo do chão). Presa ao PALCO, tudo mora dentro
 * da imagem do jogo, que é onde interface de jogo mora. O preço é que numa
 * janela muito alta ela desce junto com o palco; o certo é o palco ocupar o
 * máximo possível, e ele já faz isso.
 */
.hud16 {
  position: fixed;
  left: var(--hud16-px, 0);
  top: var(--hud16-py, 0);
  width: var(--hud16-pw, 100vw);
  height: var(--hud16-ph, 100dvh);
  z-index: 40;
  display: none;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: calc(16px * var(--hud16-un, 1));
  pointer-events: none;
  /* 🚨 `pointer-events:none` no bloco todo: nada aqui é botão, e uma camada
     invisível sobre o palco engoliria o toque que ataca o bicho. */
}
html[data-hud16="deitado"] .hud16 {
  display: block;
}

@font-face {
  font-family: 'HUD16';
  src: url('/potato/hud/fonte.ttf') format('truetype');
  font-display: swap;
}

/*
 * CORRIGIDO (Zerg, 13/09): a HUD16 acima (fonte coreana "경기천년제목 Bold")
 * não tem NENHUM glifo acentuado (á/é/ã/ç etc) — toda palavra com acento
 * caía num fallback visualmente diferente no meio da palavra. Baloo 2
 * escolhida pelo Zerg entre 3 opções pesquisadas (cobertura de acento
 * completa, moderna, combina com o visual chibi) — troca centralizada:
 * toda ocorrência de `font-family: 'HUD16'` no jogo virou `'Baloo 2'`,
 * a @font-face antiga fica só por precaução (nada mais a referencia).
 * Arquivo já vem recortado (subset) só pro alfabeto latino+símbolos
 * comuns — de 180KB (arquivo completo, cobre vários alfabetos que o
 * jogo não usa) para 33KB, mesmo espírito do `cinzel-latin.woff2` já
 * usado no piloto. `font-weight: 400 900` porque é fonte variável (a
 * HUD16 não era — todo `font-weight` escrito nela sempre ficava sem
 * efeito nenhum; com a Baloo 2 esses números passam a valer de verdade,
 * mudança esperada, não bug).
 */
@font-face {
  font-family: 'Baloo 2';
  src: url('/potato/fonts/baloo2.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

/* Fase: placa no topo, com o ícone de mapa do jogo saindo pela esquerda. */
/* A placa de capítulo, no desenho do exemplo: BAIXA, com cantos discretos, e o
   bloco de rótulo ocupando a altura inteira — não uma pílula gorda com um
   retângulo bege flutuando no meio dela. */
.hud16__fase {
  position: absolute;
  left: 50%;
  top: 0.9em;
  display: flex;
  align-items: stretch;
  height: calc(34px * var(--hud16-un, 1));
  translate: -50% 0;
  padding: 0 calc(16px * var(--hud16-un, 1)) 0 calc(34px * var(--hud16-un, 1));
  overflow: hidden;
  border: 0;
  border-radius: calc(7px * var(--hud16-un, 1));
  background: #0a0d13f0;
  box-shadow: inset 0 0 0 calc(1px * var(--hud16-un, 1)) #ffffff1f;
  white-space: nowrap;
}
.hud16__mapa {
  position: absolute;
  left: calc(-8px * var(--hud16-un, 1));
  top: 50%;
  width: calc(46px * var(--hud16-un, 1));
  height: calc(46px * var(--hud16-un, 1));
  translate: 0 -50%;
  object-fit: contain;
  /* Sai por fora da placa, como o pergaminho do exemplo. */
  z-index: 1;
}
.hud16__cap {
  /* O bloco bege que no exemplo carrega a dificuldade ("Normal"). Altura TOTAL
     da placa e sem canto próprio: lá ele é uma faixa, não um botão. */
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: calc(10px * var(--hud16-un, 1));
  padding: 0 calc(10px * var(--hud16-un, 1));
  background: linear-gradient(180deg, #f6c793, #e2a165);
  color: #7d4f0d;
  font-size: calc(13px * var(--hud16-un, 1));
  font-weight: 500;
  text-shadow: 0 1px 0 #ffdcae;
}
.hud16__mundo {
  display: flex;
  align-items: center;
  color: #fff6e6;
  font-size: calc(14px * var(--hud16-un, 1));
  font-weight: 500;
}
.hud16__pct {
  display: flex;
  align-items: center;
  margin-left: calc(9px * var(--hud16-un, 1));
  padding-left: calc(9px * var(--hud16-un, 1));
  border-left: 1px solid #ffffff2e;
  color: #a9c4e8;
  font-size: calc(12px * var(--hud16-un, 1));
}

/* 🚨 18/09, L99 — NÃO bloqueia mais a tela (era a versão anterior, revertida
   a pedido do Zerg). Agora é só o rótulo pequeno da faixa 2 (direita, ao
   lado do cartão de perfil) — o resto do layout de 4 faixas mora no bloco
   "MODO RETRATO — 4 FAIXAS (L99)" mais abaixo, junto com o rótulo real. */

/* ════════════════════════════════════════════════════════════════════
 * MODO RETRATO — 4 FAIXAS (L99, 18/09, spec completa do Zerg + print de
 * referência). Nada é criado do zero: cada peça abaixo JÁ EXISTE no jogo
 * (perfil, ícones de topo, navegação, capítulo/missão/ranking) — aqui só
 * REPOSICIONA via `position:fixed`, mesma técnica que `.sidenav`/
 * `.scene__dock` já usam logo acima. `!important` só onde a regra
 * original também usa (pra garantir que esta, mais abaixo no arquivo,
 * vence por ordem — mesmo padrão do bloco "POSIÇÃO FINAL" já existente).
 *
 * Faixas (dvh = altura visível real do viewport, ignora barra de
 * endereço que aparece/some):
 *   Faixa 1 (combate)         0%  → 54dvh   (controlada por `--hud16-ph`)
 *   Faixa 2 (perfil + lite)  54dvh → 70dvh
 *   Faixa 3 (botões)         70dvh → 86dvh
 *   Faixa 4 (cards)          86dvh → 100dvh
 * ════════════════════════════════════════════════════════════════════ */

/* 🚨 ACHADO TESTANDO (não estava no plano inicial): `.hud16` (dona do
   cartão de perfil) só ficava visível com `data-hud16="deitado"` — em pé
   ela inteira era `display:none`, e nenhum filho aparece com o PAI
   escondido, não importa o `position` dele. Revela aqui. */
html[data-hud16="pe"] .hud16 {
  display: block !important;
}
/* 🚨 ACHADO #2: o palco (`.game__palco`) centraliza `.scene` verticalmente
   por flex (`align-items` padrão = stretch/center dependendo do caso) — o
   `--hud16-ph`/`--hud16-py` controlam o TAMANHO do canvas (confirmado —
   ele reage), mas não a POSIÇÃO dentro do palco, que segue flex puro.
   Sem isto o combate ficava centralizado na tela toda (844px), não colado
   no topo dos 54dvh — voltando o mesmo problema de antes ("sobra preta"),
   só que agora com a caixa do tamanho certo. */
html[data-hud16="pe"] .game__palco {
  align-items: flex-start !important;
}
/* 🚨 ACHADO (19/09, Zerg testando o editor — "coloquei a área de combate
   embaixo, ela não desce"): `align-items:flex-start` acima SEMPRE prende o
   palco no topo do `.game__palco`, não importa o que `--hud16-py` diga —
   isso era certo QUANDO batalha só tinha altura configurável (sempre
   colada no topo por design). Agora que o editor deixa mover X/Y também,
   flexbox e a variável brigavam: `--hud16-py` mudava (o número certo),
   mas nada de verdade OBEDECIA ele pra além do tamanho. Fix: em pé, o
   próprio palco escapa do flexbox e vira `position:fixed` nas coordenadas
   que `--hud16-px/py` calculam — mesmo padrão que todo o resto dos 7
   blocos já usa. `!important` necessário pra vencer a regra base (linha
   ~154), que é `flex:0 0 auto` sem position. */
html[data-hud16="pe"] .game__palco > .scene,
html[data-hud16="pe"] .game__palco > .panel.scene {
  position: fixed !important;
  left: var(--hud16-px, 0px) !important;
  top: var(--hud16-py, 0px) !important;
  margin: 0 !important;
}

/* ── Faixa 2: cartão de perfil (esquerda) + "Modo Lite" (direita) ────── *
 * 🚨 ACHADO TESTANDO: quem mostra avatar/nome/nível/HP/MP HOJE não é
 * `.hud16__perfil` (fica `display:none` — código antigo, substituído sem
 * eu saber por uma sessão diferente hoje: ver [[potato-camadas-interface-
 * combate-18-09]]) — é `.btf__retrato`/`.btf__quem`/`.btf__xp`/`.btf__mp`,
 * de `batalha/faixa-superior.js`. Reposiciono ESSES, um por um (cada um
 * já era `position:absolute` em %, escapa igual o `.btf__menu` acima).
 * 24/09: o `.hud16__perfil` saiu do `hud/index.js` (não é mais criado). */
html[data-hud16="pe"] .btf__borrao {
  display: none !important;
}
html[data-hud16="pe"] .btf__retrato {
  position: fixed !important;
  left: calc(var(--rl-hud-x, 2.5) * 1vw + env(safe-area-inset-left, 0px)) !important;
  top: calc((var(--rl-hud-y, 54) + 1) * 1dvh) !important;
  width: 11dvh !important;
  height: 11dvh !important;
}
html[data-hud16="pe"] .btf__quem {
  position: fixed !important;
  left: calc(var(--rl-hud-x, 2.5) * 1vw + env(safe-area-inset-left, 0px) + 12.5dvh) !important;
  top: calc((var(--rl-hud-y, 54) + 1) * 1dvh) !important;
  max-width: 44vw !important;
}
html[data-hud16="pe"] .btf__xp {
  position: fixed !important;
  left: calc(var(--rl-hud-x, 2.5) * 1vw + env(safe-area-inset-left, 0px)) !important;
  top: calc((var(--rl-hud-y, 54) + 12.5) * 1dvh) !important;
  width: calc((var(--rl-hud-w, 62) - 2) * 1vw) !important;
  height: 1.6dvh !important;
}
html[data-hud16="pe"] .btf__mp {
  position: fixed !important;
  left: calc(var(--rl-hud-x, 2.5) * 1vw + env(safe-area-inset-left, 0px)) !important;
  top: calc((var(--rl-hud-y, 54) + 14.4) * 1dvh) !important;
  width: calc((var(--rl-hud-w, 62) - 2) * 1vw) !important;
  height: 1.6dvh !important;
}
/* 19/09, pedido #209 do Zerg ("a barra de cima com gemas/gold/baús não tem
   como mexer") — bloco novo, mesma técnica dos outros: escapa de `.btf`
   (que segue a caixa de combate) e vira `position:fixed` independente,
   controlado por `--rl-recursos-*`. */
html[data-hud16="pe"] .btf__recursos {
  position: fixed !important;
  left: calc(var(--rl-recursos-x, 21) * 1vw + env(safe-area-inset-left, 0px)) !important;
  top: calc(var(--rl-recursos-y, 0.8) * 1dvh) !important;
  width: calc(var(--rl-recursos-w, 35) * 1vw) !important;
  height: calc(var(--rl-recursos-h, 2.2) * 1dvh) !important;
  max-width: none !important;
  z-index: var(--rl-recursos-z, 42) !important;
}

/* ── Faixa 3: 2 fileiras de botões — 6 (topo) + 4 (baixo) ─────────────
   `.btf__menu` (Loja/Mercado/Invocar/Invite/Correio/Menu) nasce dentro de
   `.btf`, posicionado em % DELA — encolhida na faixa 1 em pé, então sai
   pequena e no lugar errado se eu só reaproveitar a % antiga. `fixed`
   escapa: reposiciona certo, sem mudar quem é dono do elemento. */
html[data-hud16="pe"] .btf__menu {
  position: fixed !important;
  left: calc(var(--rl-topo-x, 0) * 1vw) !important;
  top: calc(var(--rl-topo-y, 70) * 1dvh) !important;
  width: calc(var(--rl-topo-w, 100) * 1vw) !important;
  height: calc(var(--rl-topo-h, 8) * 1dvh) !important;
}
/* 🚨 ACHADO TESTANDO: `.sidenav`/`.bottomnav` (regra acima, já existente)
   são código ANTIGO — `batalha/integrar.css` os esconde com
   `display:none!important` sempre que `data-bat-nova` está no ar (SEMPRE,
   durante combate). Quem mostra Talentos/Raids/Formação/Inventário hoje é
   `.bt-rodape`/`.bt-acoes`/`.bt-losango`, de `batalha/rodape.js` — mantenho
   a regra acima de brinde (inofensiva) e conserto a de verdade aqui. */
html[data-hud16="pe"] .bt-rodape {
  position: fixed !important;
  left: calc(var(--rl-acoes-x, 0) * 1vw) !important;
  top: calc(var(--rl-acoes-y, 78) * 1dvh) !important;
  width: calc(var(--rl-acoes-w, 100) * 1vw) !important;
  height: calc(var(--rl-acoes-h, 8) * 1dvh) !important;
  /* `.bt-acoes`/`.bt-losango` (filhos) usam `calc(var(--bt-pw) * X%)` — sem
     redeclarar a variável aqui elas continuariam lendo o padrão (100vw),
     grande demais pra uma fileira de 8dvh de altura. */
  --bt-pw: calc(var(--rl-acoes-w, 100) * 1vw);
  --bt-ph: calc(var(--rl-acoes-h, 8) * 1dvh);
  /* `--d` (tamanho do losango) e a fonte do rótulo escalam com `--bt-un`,
     que sem isso herda o valor minúsculo do canvas (~0,3) — os rótulos
     "Formação"/"Inventário" cortavam no piso de 38px. */
  --bt-un: var(--rl-acoes-un, 0.55);
}

/* ── Faixa 4: capítulo + missão + ranking, empilhados ─────────────────
   Os três já são `position:fixed` calculado sobre `--hud16-*` (pensado
   pra ficarem DENTRO da faixa 1, deitado) — em pé pulam pra cá com um
   top/left fixo cada, sem depender mais dessas variáveis. */
/* 🚨 Especificidade elevada de propósito (classe repetida 3x): a folha do
   `placa-fase` tem `html[data-bt-faixa='1'] .hud16__fase.hud16__fase` com
   `!important` em tudo — (0,3,1) de especificidade. Pra vencer sem depender
   da ORDEM entre as duas folhas no merge, preciso de mais classe, não só
   mais `!important` (os dois já usam). `.hud16__fase` x3 = (0,4,1),
   inequívoco. */
/* 🚨 `--bt-un`/`--hud16-un` ficam MINÚSCULOS em pé (largura do celular /
   1280 ≈ 0,3) — faz sentido pro texto que mora DENTRO do canvas de 54dvh,
   não pros cards da faixa 4, que agora são independentes dele. Redeclaro
   um valor maior só aqui, pras três. */
html[data-hud16="pe"] .hud16__fase.hud16__fase.hud16__fase {
  position: fixed !important;
  left: calc(var(--rl-capitulo-x, 2) * 1vw + env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  top: calc(var(--rl-capitulo-y, 86) * 1dvh) !important;
  width: calc(var(--rl-capitulo-w, 96) * 1vw) !important;
  max-width: none !important;
  height: calc(var(--rl-capitulo-h, 3.3) * 1dvh) !important;
  box-sizing: border-box !important;
  --bt-un: var(--rl-capitulo-un, 0.62) !important;
}
/* 19/09, pedido #241 do Zerg: as 3 barras viraram 3 blocos INDEPENDENTES
   (antes era um bloco `cards` e a altura dele era o espaço entre elas). */
html[data-hud16="pe"] .mis {
  position: fixed !important;
  left: calc(var(--rl-missao-x, 2) * 1vw + env(safe-area-inset-left, 0px)) !important;
  top: calc(var(--rl-missao-y, 91) * 1dvh) !important;
  width: calc(var(--rl-missao-w, 96) * 1vw) !important;
  height: calc(var(--rl-missao-h, 3.8) * 1dvh) !important;
  max-width: none !important;
  --bt-un: var(--rl-missao-un, 0.62);
}
html[data-hud16="pe"] .rkb {
  position: fixed !important;
  left: calc(var(--rl-ranking-x, 2) * 1vw + env(safe-area-inset-left, 0px)) !important;
  top: calc(var(--rl-ranking-y, 96) * 1dvh - env(safe-area-inset-bottom, 0px)) !important;
  width: calc(var(--rl-ranking-w, 96) * 1vw) !important;
  height: calc(var(--rl-ranking-h, 2.8) * 1dvh) !important;
  --bt-un: var(--rl-ranking-un, 0.62);
}

/* ────────────────────────────────────────────────────────────────
 * POSIÇÃO FINAL DO MENU E DAS HABILIDADES
 *
 * 🚨 Este bloco vem por ÚLTIMO de propósito. As regras do menu foram reescritas
 * várias vezes e o arquivo acabou com blocos concorrentes de `.sidenav`; o mais
 * antigo continuava vencendo e prendia a barra no centro. Em vez de caçar cada
 * duplicata, o desenho definitivo mora aqui, no fim, onde ganha por ordem.
 *
 * Menu: coluna à DIREITA do palco, centrada na vertical.
 * Habilidades: fileira no rodapé CENTRAL, no mesmo tamanho dos ícones.
 * Tudo preso ao retângulo do palco (`--hud16-px/py/pw/ph`), nunca à janela.
 * ──────────────────────────────────────────────────────────────── */
html[data-hud16] .scene__dock {
  position: fixed !important;
  left: calc(var(--hud16-px, 0px) + var(--hud16-pw, 100vw) / 2) !important;
  right: auto !important;
  bottom: calc(var(--hud16-fundo, 0px) + 12px * var(--hud16-un, 1)) !important;
  translate: -50% 0 !important;
  transform-origin: center bottom;
}

/* 18/09, pedido do Zerg (painel Ações admin, "Camadas de interface") — o gate
   de `combate.capituloLigado` mora em `placa-fase/styles.css`, não aqui: essa
   folha tem `.hud16__fase.hud16__fase` (especificidade dobrada, ver comentário
   lá) que vence qualquer regra simples escrita neste arquivo. */

/* ── Camada (Z) por bloco, editor v3 (18/09, pedido #191 do Zerg) ────────
   "escolher o que fica em cima 1 do outro" — cada bloco lê `--rl-<bloco>-z`
   (hud/index.js, aplicarLayoutRetrato). Os padrões (via var()) são a MESMA
   pilha que já existia (combate 40 < HUD/topo/ações 42 < janela 44 <
   aviso/cards 46) — nada muda até o Zerg mexer num campo "Camada (Z)". */
html[data-hud16="pe"] .hud16 {
  z-index: var(--rl-batalha-z, 40) !important;
}
html[data-hud16="pe"] .btf__retrato,
html[data-hud16="pe"] .btf__quem,
html[data-hud16="pe"] .btf__xp,
html[data-hud16="pe"] .btf__mp {
  z-index: var(--rl-hud-z, 42) !important;
}
html[data-hud16="pe"] .btf__retrato {
  z-index: calc(var(--rl-hud-z, 42) + 1) !important;
}
html[data-hud16="pe"] .btf__menu {
  z-index: var(--rl-topo-z, 42) !important;
}
html[data-hud16="pe"] .bt-rodape {
  z-index: var(--rl-acoes-z, 42) !important;
}
html[data-hud16="pe"] .hud16__fase.hud16__fase.hud16__fase {
  z-index: var(--rl-capitulo-z, 46) !important;
}
html[data-hud16="pe"] .mis {
  z-index: var(--rl-missao-z, 46) !important;
}
html[data-hud16="pe"] .rkb {
  z-index: var(--rl-ranking-z, 46) !important;
}
html[data-hud16="pe"] .rpgw {
  z-index: var(--rl-janela-z, 44) !important;
}

/* ── Editor de layout HORIZONTAL (deitado/PC) — pedido #192 do Zerg ──────
   Modelo diferente do retrato acima: aqui é DESLOCAMENTO (dx/dy) + escala a
   partir da posição NATIVA de cada bloco (não reposiciona do zero — os
   blocos já têm posição boa em deitado). `--rlh-*` vêm de `hud/index.js`
   (`aplicarLayoutHorizontal`). Padrão dx=0/dy=0/escala=1/z=0 = zero mudança
   visual até o Zerg mexer num campo. Não toca em nada de `data-hud16="pe"`
   (retrato tem seu próprio sistema acima, intocado). */
html[data-hud16="deitado"] .btf__retrato,
html[data-hud16="deitado"] .btf__quem,
html[data-hud16="deitado"] .btf__xp,
html[data-hud16="deitado"] .btf__mp {
  transform: translate(calc(var(--rlh-hud-dx, 0) * 1vw), calc(var(--rlh-hud-dy, 0) * 1vh)) scale(var(--rlh-hud-escala, 1)) !important;
  transform-origin: top left;
  z-index: calc(var(--rlh-hud-z, 0) + 1) !important;
}
/* 20/09: o retrato fica NA FRENTE das barras de vida/mana (elas nascem "debaixo do retrato"); com os 4 no mesmo z as barras passavam por cima da foto. */
html[data-hud16="deitado"] .btf__retrato {
  z-index: calc(var(--rlh-hud-z, 0) + 2) !important;
}
html[data-hud16="deitado"] .btf__recursos {
  transform: translate(calc(var(--rlh-recursos-dx, 0) * 1vw), calc(var(--rlh-recursos-dy, 0) * 1vh)) scale(var(--rlh-recursos-escala, 1)) !important;
  transform-origin: top left;
  z-index: calc(var(--rlh-recursos-z, 0) + 1) !important;
}
html[data-hud16="deitado"] .hud16__fase,
html[data-hud16="deitado"] .mis,
html[data-hud16="deitado"] .rkb {
  transform: translate(calc(var(--rlh-cards-dx, 0) * 1vw), calc(var(--rlh-cards-dy, 0) * 1vh)) scale(var(--rlh-cards-escala, 1)) !important;
  transform-origin: top left;
  z-index: calc(var(--rlh-cards-z, 0) + 1) !important;
}
html[data-hud16="deitado"] .btf__menu {
  transform: translate(calc(var(--rlh-topo-dx, 0) * 1vw), calc(var(--rlh-topo-dy, 0) * 1vh)) scale(var(--rlh-topo-escala, 1)) !important;
  transform-origin: top right;
  z-index: calc(var(--rlh-topo-z, 0) + 1) !important;
}
html[data-hud16="deitado"] .bt-acoes {
  transform: translate(calc(var(--rlh-acoes-dx, 0) * 1vw), calc(var(--rlh-acoes-dy, 0) * 1vh)) scale(var(--rlh-acoes-escala, 1)) !important;
  transform-origin: bottom left;
  z-index: calc(var(--rlh-acoes-z, 0) + 1) !important;
}
html[data-hud16="deitado"] .skillbar {
  transform: translate(calc(var(--rlh-skillbar-dx, 0) * 1vw), calc(var(--rlh-skillbar-dy, 0) * 1vh)) scale(var(--rlh-skillbar-escala, 1)) !important;
  transform-origin: bottom right;
  z-index: calc(var(--rlh-skillbar-z, 0) + 1) !important;
}
html[data-hud16="deitado"] #drop-hist {
  transform: translate(calc(var(--rlh-dropchat-dx, 0) * 1vw), calc(var(--rlh-dropchat-dy, 0) * 1vh)) scale(var(--rlh-dropchat-escala, 1)) !important;
  transform-origin: bottom left;
  z-index: calc(var(--rlh-dropchat-z, 0) + 39) !important;
}
/* 25/09 (auditoria H7) + Zerg 17:04 ("o chat do mobile na horizontal está muito grande, tem de caber no cantinho dele"):
   no celular deitado (tela baixa) o Drops/Chat de 230px cobria o herói, e subido 18% ficava no meio da luta. Agora fica no
   CANTO de baixo, menor (zoom .65 → ~150px de largura), e assim não alcança a fileira de losangos (Talentos/Raids…). */
@media (max-height: 520px) {
  html[data-hud16="deitado"] #drop-hist {
    zoom: .65;
  }
}