/* PLACA DE CAPÍTULO ABAIXO DO CARTÃO DO HERÓI — 28/08/2026, pedido do Zerg.
 *
 * A placa `.hud16__fase` já existia (nasce em `hud/index.js`, é reposicionada
 * por `batalha/faixa-superior.css`). Aqui ela muda de lugar e de roupa — os
 * valores continuam vindo do React pelos espelhos `data-de`, então não existe
 * segunda fonte de verdade sobre a fase.
 *
 * 🚨 ANCORADA NO PALCO (`--hud16-px/py/pw/ph`), nunca no viewport: em
 * `position:fixed` o `%` conta a partir da tela, e em resolução com tarja preta
 * lateral a placa cairia sobre o letterbox.
 *
 * 🚨 ESPECIFICIDADE DOBRADA (`.hud16__fase.hud16__fase`): a folha da faixa é
 * injetada em runtime, DEPOIS deste <link>. Com `!important` dos dois lados,
 * vence quem carrega por último — subir a especificidade resolve sem depender
 * da ordem.
 *
 * ── O QUE A PRIMEIRA VERSÃO ERROU (corrigido aqui) ────────────────────
 * 🚨 `.hud16__mapa` é `position:absolute; left:-8px; 46×46` de fábrica — ela
 * nasce PARA FORA da placa. No meu grid ela continuou absoluta, transbordou em
 * cima e embaixo e comeu a primeira letra do nome do mapa. Agora é `static`,
 * entra na coluna e cabe dentro.
 * 🚨 `.hud16__cap` NÃO é texto: é um bloco bege de altura total que, no desenho
 * original, carrega a dificuldade. Por isso aparecia uma BARRA amarela no lugar
 * do nome do capítulo. Aqui o bloco vira texto amarelo.
 */
html[data-bt-faixa='1'] .hud16__fase.hud16__fase {
  --bt-un: var(--hud16-un, var(--rpg-un, 1));

  /* desce para sair da sombra da faixa de cima e anda para a direita para
     alinhar com o retrato (que começa em 1% mas tem aro por fora) */
  left: calc(var(--hud16-px, 0px) + var(--hud16-pw, 100vw) * 0.018) !important;
  right: auto !important;
  top: calc(var(--hud16-py, 0px) + var(--hud16-ph, 100dvh) * 0.185) !important;
  /* largura FIXA: o Zerg pediu que as duas caixas tenham sempre o mesmo
     tamanho, e a de capítulo é a régua. Com `max-width` cada uma encolhia
     conforme o texto e elas nunca casavam. */
  /* pelo conteúdo, sem sobra — mesma regra da caixa de missão */
  /* 🚨 MESMA LARGURA NAS DUAS, e sem sobra: o texto é cortado em 15
     caracteres, então 17,5% do palco é exatamente o que o conteúdo
     capado pede. Largura pelo conteúdo deixaria uma menor que a outra;
     largura maior deixaria espaço morto. */
  width: calc(var(--hud16-pw, 100vw) * 0.178) !important;
  max-width: none !important;

  /* +20%: a placa de fábrica tem 34px e a bússola não cabia dentro */
  height: calc(41px * var(--bt-un)) !important;

  display: grid !important;
  grid-template-columns: auto auto auto;
  grid-template-areas: 'icone cap  pct'
                       'icone nome pct';
  align-items: center;
  gap: calc(1px * var(--bt-un)) calc(9px * var(--bt-un));
  padding: calc(4px * var(--bt-un)) calc(9px * var(--bt-un));

  background: rgba(120, 124, 132, .5) !important;
  border-radius: calc(10px * var(--bt-un));
  box-shadow: inset 0 0 0 max(1px, calc(1px * var(--bt-un))) rgba(0, 0, 0, .35);
  /* agora irmã da .btf (42): o z-index finalmente vale */
  z-index: 46 !important;
}

/* a bússola: DENTRO da caixa, sem posição absoluta */
html[data-bt-faixa='1'] .hud16__fase.hud16__fase .hud16__mapa {
  grid-area: icone;
  position: static !important;
  translate: none !important;
  left: auto !important;
  top: auto !important;
  content: url('/potato/hud/ui/Icon_Compass.png');
  width: calc(30px * var(--bt-un)) !important;
  height: calc(30px * var(--bt-un)) !important;
  object-fit: contain;
}

/* capítulo: texto AMARELO, não o bloco bege de fábrica */
html[data-bt-faixa='1'] .hud16__fase.hud16__fase .hud16__cap {
  /* 🚨 `min-width: 0` é o que permite o item de grid ENCOLHER: sem ele o
     mínimo é o conteúdo, e a caixa cresce em vez de apertar o texto — foi
     exatamente o que aconteceu na primeira tentativa (403px em vez de 256). */
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: clip /* sem "…": o Zerg achou feio; o nome inteiro fica no title */;
  grid-area: cap;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  color: #f0b429 !important;
  font-weight: 500 !important;
  line-height: 1.15;
  white-space: nowrap;
}

/* nome da fase: branco, embaixo */
html[data-bt-faixa='1'] .hud16__fase.hud16__fase .hud16__mundo {
  /* 🚨 `min-width: 0` é o que permite o item de grid ENCOLHER: sem ele o
     mínimo é o conteúdo, e a caixa cresce em vez de apertar o texto — foi
     exatamente o que aconteceu na primeira tentativa (403px em vez de 256). */
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: clip /* sem "…": o Zerg achou feio; o nome inteiro fica no title */;
  grid-area: nome;
  color: #ffffff !important;
  line-height: 1.15;
  white-space: nowrap;
}

/* FASE E ESTÁGIO à direita (31/08/2026) — antes era a contagem crua "456/470".
 *
 * 🚨 EMPILHADO, e isso não custa altura nenhuma: a coluna `pct` do grid já
 * atravessa as DUAS linhas da placa (`'icone cap pct' 'icone nome pct'`), então
 * ela tinha uma linha de sobra desde sempre. Lado a lado, "Fase 46/47 · Estágio
 * 6/10" espremeria o nome do mundo, que divide a mesma largura fixa. */
html[data-bt-faixa='1'] .hud16__fase.hud16__fase .hud16__pct {
  grid-area: pct;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  margin-left: 0 !important;
  padding-left: calc(8px * var(--bt-un)) !important;
  border-left: 0 !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  white-space: nowrap;
  line-height: 1.15;
}

html[data-bt-faixa='1'] .hud16__fase.hud16__fase .hud16__pfase {
  font-size: calc(12px * var(--bt-un));
  font-weight: 600;
}

/* A segunda linha é apoio: fica um degrau abaixo em tamanho e em contraste,
   como o nome do mundo faz com o capítulo. */
html[data-bt-faixa='1'] .hud16__fase.hud16__fase .hud16__pest {
  font-size: calc(10px * var(--bt-un));
  font-weight: 500;
  color: #a9c4e8;
}

/* Chefe na frente: o dourado da casa, o mesmo do selo de nível do inventário.
   É a única informação da placa que o jogador precisa ver de longe. */
html[data-bt-faixa='1'] .hud16__fase.hud16__fase .hud16__pest[data-chefe='1'] {
  color: #ffc94a;
  font-weight: 700;
}

/* O mesmo empilhamento no layout SEM a faixa nova: a regra de fábrica
   (`hud/styles.css`) é `display:flex; align-items:center`, e ali os dois textos
   sairiam grudados numa linha só. */
.hud16__pct {
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.hud16__pest {
  font-size: 0.85em;
  color: #a9c4e8;
}
.hud16__pest[data-chefe='1'] {
  color: #ffc94a;
  font-weight: 700;
}

/* SOME COM QUALQUER TELA ABERTA (28/08/2026, pedido do Zerg).
 *
 * O kit põe `data-rpgw` no <html> enquanto uma janela está aberta (Talentos,
 * Pets, Forja…). Escondo a placa nesse caso para ela não atravessar por cima
 * do conteúdo — ela vive em z-index 46, acima do véu, então sem isto ficaria
 * boiando sobre a tela aberta.
 *
 * 🚨 Especificidade acima da regra que a mostra (`html[data-bt-faixa='1']`),
 * senão aquela vence e a placa continua visível. */
html[data-rpgw] .hud16__fase.hud16__fase { display: none !important }

/* 18/09, pedido do Zerg (painel Ações admin, "Camadas de interface") —
   `body[data-cenario-capitulo="off"]` escrito por combate/index.js. Mesmo
   motivo da regra acima: a regra de cima (`html[data-bt-faixa='1']
   .hud16__fase.hud16__fase`, linha 26) tem a MESMA especificidade dobrada,
   então preciso da MESMA técnica aqui — sem isso `hud/styles.css` sozinho
   nunca venceria (achado testando ao vivo: `.hud16__fase { display:none
   !important }` simples perdia sempre para esta folha). */
body[data-cenario-capitulo='off'] .hud16__fase.hud16__fase { display: none !important }

/* auto-encaixe, mesma regra da caixa de missão (piso de 9px, CONTRATO §9-ter) */
html[data-bt-faixa='1'] .hud16__fase.hud16__fase .hud16__cap   { font-size: var(--fs-cap, calc(13px * var(--bt-un))) !important; font-weight: 500 !important }
html[data-bt-faixa='1'] .hud16__fase.hud16__fase .hud16__mundo { font-size: var(--fs-mundo, calc(12px * var(--bt-un))) !important; font-weight: 500 !important }

/* A placa virou botão (28/08/2026): ela abre o mapa do "Voltar para Casa".
   Sem `pointer-events: auto` o clique atravessaria — a camada da HUD é
   transparente ao ponteiro de propósito, para não roubar o toque da cena. */
.hud16__fase {
  pointer-events: auto !important;
  cursor: pointer;
}
.hud16__fase:hover {
  filter: brightness(1.12);
}
.hud16__fase:active {
  scale: 0.985;
}

/* 🚨 A PLACA NÃO EXISTE FORA DO JOGO (28/08/2026).
 *
 * Ela nasce dentro da `.hud16`, e era a `.hud16` que a escondia na tela de
 * login — quem não tem `data-hud16` não tem HUD. Ao mover a placa para o
 * `body` (o conserto de empilhamento lá em cima), ela ESCAPOU desse container e
 * passou a aparecer boiando no alto da tela de entrar, meio cortada. Achei numa
 * varredura de celular pedida pelo Zerg; a foto do relato mostrava outra coisa,
 * mas este defeito estava na primeira tela do jogo.
 *
 * O sinal é o mesmo que o `hud/index.js` usa: sem `data-hud16` não há palco na
 * tela, e sem palco não há capítulo para anunciar. E agora que a placa é um
 * botão que abre o mapa, deixá-la ali seria também um clique para lugar nenhum.
 */
html:not([data-hud16]) .hud16__fase.hud16__fase {
  display: none !important;
}

/* 🚨 A PLACA SÓ EXISTE COM A FAIXA NO AR (28/08/2026).
 *
 * A regra acima cobre a tela de login (sem `data-hud16`). Falta o outro caso, e
 * é o da foto que o Zerg mandou: **dentro do jogo, com uma aba de menu aberta**.
 * Aí o palco encolhe para o Mini Player, a faixa se apaga (`data-bt-faixa` cai)
 * e a placa — que é `position: absolute` desde o `hud/styles.css` — fica
 * BOIANDO no alto da tela, sozinha, sobre o painel da aba.
 *
 * Todas as regras de posição desta folha já são `html[data-bt-faixa='1']`; só
 * faltava a de existir. É exatamente o que a caixa de missão faz
 * (`missao/styles.css`: `display: none` e `html[data-bt-faixa='1'] .mis
 * { display: grid }`) — a placa era a única peça da faixa sem essa porteira.
 */
html:not([data-bt-faixa='1']) .hud16__fase.hud16__fase {
  display: none !important;
}