/*
 * RODAPÉ DA TELA DE BATALHA — §4 de `www/rpg/BATALHA.md`.
 *
 * Três blocos, todos ancorados no retângulo do palco 16:9 e nunca na janela:
 *
 *   §4.1  joystick  — canto inferior esquerdo   (peça DECORATIVA, ver o .js)
 *   §4.2  losangos  — Personagem · Habilidades · Formação · Inventário
 *   §4.3  orbes     — a `.panel.skillbar` do jogo, em duas fileiras à direita
 *
 * 🚨 A UNIDADE VIVA AQUI É `--hud16-un`, NÃO `--rpg-un`. O kit de janela só
 * mede o palco dentro de `aplicar()`, depois do `if (!aberta) return`
 * (`rpg/janela.js`): com nenhuma janela aberta — que é o caso da tela de
 * combate — `--rpg-px/py/pw/ph/un` simplesmente não existem (medido: string
 * vazia em 1600×900 e em 844×390). Um `calc(65px * var(--rpg-un, 1))` cairia
 * no fallback 1 e sairia com o dobro do tamanho no celular deitado.
 *
 * 🚨 A `.skillbar` é do REACT e continua sendo dele: aqui ela é só reposicionada
 * e repintada por CSS. Nenhum nó nosso entra nela, e recarga, bloqueio e o
 * estado do botão de auto continuam vindo do servidor (`disabled`,
 * `.orb__cooldown`, `aria-pressed`) — não há contagem local.
 */

html[data-bt] {
  --bt-px: var(--hud16-px, 0px);
  --bt-py: var(--hud16-py, 0px);
  --bt-pw: var(--hud16-pw, 100vw);
  --bt-ph: var(--hud16-ph, 100dvh);
  --bt-un: var(--hud16-un, 1);
  --bt-fundo: var(--hud16-fundo, 0px);
}

/* ═══════════════════════════════════════════════════════════════════
 * 0. A CAMADA
 * Filha do `body`, presa ao palco por variável. Fica ACIMA da HUD (40) e
 * ABAIXO do chrome das janelas (44) e do menu do jogo (50).
 * ═══════════════════════════════════════════════════════════════════ */

.bt-rodape {
  position: fixed;
  left: var(--bt-px, 0px);
  top: var(--bt-py, 0px);
  z-index: 42;
  display: none;
  width: var(--bt-pw, 100vw);
  height: var(--bt-ph, 100dvh);
  font-family: 'Baloo 2', system-ui, sans-serif;
  /* 🚨 A camada cobre o palco inteiro: sem isto ela engoliria o toque que
     ataca o bicho. Só os losangos voltam a receber ponteiro. */
  pointer-events: none;
}
html[data-bt] .bt-rodape {
  display: block;
}
/* Com uma janela aberta o combate é fundo, não assunto — mesma regra que o kit
   já aplica ao aviso de chefe e às mensagens de golpe (`rpg/janela.css`). */
html[data-rpgw] .bt-rodape {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
 * 1. JOYSTICK — REMOVIDO (27/08, a pedido do Lucas)
 *
 * O §4.1 do contrato pedia o anel com as quatro setas e ele chegou a existir,
 * mas DESLIGADO desde o primeiro dia: este jogo é idle, o herói anda sozinho e
 * não há entrada de movimento que o servidor obedeça — o canvas só escuta
 * `pointerdown` para bater no bicho, e a única rota de andar
 * (`/game/praca/sync`) é de outra tela.
 *
 * Um controle grande, no canto de melhor alcance do polegar, que não responde a
 * nada, ensina o jogador errado sobre o que a tela faz. Saiu do DOM e daqui —
 * não ficou escondido por CSS, porque nó que não pinta e não serve é só peso.
 * ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
 * 2. MENU DE LOSANGOS — §4.2 (x 29–65% · y 89–98%)
 *
 * A largura de cada item é do RÓTULO, não do losango: são 150px de 1684 na
 * referência para um losango de 70. Quatro colunas de 9% do palco dão os 36%
 * que o contrato pede — em % e não em px de unidade, que davam 35,6%.
 * ═══════════════════════════════════════════════════════════════════ */

.bt-acoes {
  position: absolute;
  /* 47% e não 50%: o contrato põe o bloco em x 29–65%, e o centro dele é 47%. */
  left: 47%;
  bottom: calc(var(--bt-ph) * 0.02);
  display: grid;
  /* 4 × 9% = os 36% de x 29–65%, exatos em qualquer largura. */
  grid-template-columns: repeat(4, calc(var(--bt-pw) * 0.09));
  justify-items: center;
  translate: -50% 0;
}
.bt-losango {
  /* 70px de 1684 na referência = 53px de palco. O piso de 38px é para o alvo
     de toque no celular deitado, onde 53 × 0,54 daria 29px.
     🚨 É ESTE PISO QUE FURA O y 89% EM 844×390, e é uma discordância assumida:
     lá o palco tem 389px de altura, os 9% do contrato são 35px, e só o alvo de
     toque já pede 38 — mais 9px do piso de fonte do §9-ter dão 47px, 12,1% de
     altura. O contrato de y 89–98% pressupõe palco alto; entre cumprir a caixa
     e entregar um losango de 29px com letra de 6,6px, o §9-ter do CONTRATO
     manda ficar com os pisos. Nas duas resoluções altas a caixa fecha. */
  /* 🚨 61px E NÃO 53 — MEDIDO NO ARQUIVO DA REFERÊNCIA. O "70px" do §4.2 foi
     lido a olho; com a régua sobre o losango de "Personagem" (1672×941) a
     diagonal horizontal vai de x 511 a 590, isto é 79px = 4,72% da largura do
     palco. Os 53px de unidade pintavam 66px em 1600, 4,14% — e no comparativo
     ampliado os quatro losangos apareciam nitidamente menores que os de lá, com
     o rótulo quase do tamanho da pastilha. 61px fecham em 4,77%. */
  --d: max(calc(61px * var(--bt-un)), 38px);
  display: grid;
  grid-template-rows: var(--d) auto;
  justify-items: center;
  /* 🚨 GAP ZERO, E É CONTA, NÃO ESTÉTICA. O contrato dá TRÊS medidas para o
     mesmo bloco: losango 70px, rótulo 16px e caixa y 89–98% (9% de altura).
     Em % do palco de referência (1684×947) isso é 7,39% + 1,69% = 9,08% — as
     três só fecham com o rótulo COLADO no losango e sem entrelinha. Os 3px de
     folga que estavam aqui empurravam o topo para 87,8%. */
  gap: 0;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rpg-tinta, #fffdf6);
  /* só o botão recebe ponteiro; o resto da camada é vidro (ver `.bt-rodape`) */
  pointer-events: auto;
  cursor: pointer;
}
/* O losango é FORMA: quadrado do lado d/√2 girado 45°, como o contrato descreve.
   Vem de CSS, não de PNG — no acervo essa peça é máscara branca. */
.bt-losango__forma {
  grid-area: 1 / 1;
  /*
   * 🚨 `place-self: center` E ELE É O CONSERTO DO ÍCONE TORTO (27/08).
   *
   * A linha 1 do grid tem `--d` de altura (76,2px em 1600×900), mas a forma tem
   * `0,707d` = 53,9. Sem alinhamento próprio ela caía no TOPO da célula — e,
   * como está girada 45°, o retângulo que ela ocupa passa a ir de −11,1 a 65,1,
   * com o centro visual em y=27. A arte, essa sim com `place-self: center`,
   * ficava em y=38,1.
   *
   * Resultado medido: 11,2px de diferença — o ícone visivelmente caído para
   * baixo dentro do losango, que foi o que o Lucas viu no zoom. Centralizando a
   * forma na mesma célula, os dois centros passam a ser o mesmo ponto.
   *
   * (O certo é alinhar a forma, não empurrar a arte com `translate`: o segundo
   * some no primeiro `--d` diferente, o primeiro vale em qualquer tamanho.)
   */
  place-self: center;
  width: calc(var(--d) * 0.707);
  height: calc(var(--d) * 0.707);
  border-radius: 14%;
  /* 🚨 PRETO CHAPADO, NÃO AZUL COM ARO. Comparado lado a lado e ampliado com a
     referência, era o que mais destoava: o losango de lá é uma pastilha quase
     preta, com um fio escuro de contorno, e é esse fundo neutro que faz o
     ícone branco saltar. O azul com aro claro do primeiro corte competia com
     o desenho e deixava os quatro "apagados". */
  background: linear-gradient(160deg, #0a0e16f2, #05080ff2);
  /* O fio a 10% de branco não aparecia sobre o cenário claro da fase de lava: a
     pastilha ficava sem aresta. Na referência o losango tem um contorno claro
     fino que é o que lhe dá forma contra qualquer mapa. */
  box-shadow:
    inset 0 0 0 calc(1.5px * var(--bt-un)) #ffffff33,
    0 calc(2px * var(--bt-un)) calc(7px * var(--bt-un)) #000b;
  rotate: 45deg;
  transition: box-shadow 0.12s ease-out, scale 0.12s ease-out;
}
/* O ícone NÃO gira — é o que a referência mostra. */
.bt-losango__arte {
  grid-area: 1 / 1;
  place-self: center;
  /* 🚨 0,60 DO DIÂMETRO — MEDIDO NO ALFA DAS QUATRO ARTES, não no olho. O
     contrato pede o ícone DENTRO do losango, e a 0,72 a arte transbordava a
     aresta. Um quadrado inscrito num losango de diagonal d tem lado 0,5d; o
     desenho passa disso porque os cantos do PNG são transparentes. Rodando o
     recorte contra o losango (com o arredondamento de 14%), o maior fator que
     não deixa um só pixel pintado do lado de fora é 0,601 em
     `Icon_80_Cards_Skill`, 0,613 em `Icon_80_Mastery`, 0,727 em
     `Icon_80_Inventory` e 0,763 em `Icon_100_Bot_Character`. O menor manda:
     0,60. (A 0,5 sobrava moldura vazia, que foi o motivo de subir para 0,72.) */
  width: calc(var(--d) * 0.6);
  height: calc(var(--d) * 0.6);
  object-fit: contain;
  /* Contorno claro por trás, como na referência: sobre cenário claro o ícone
     branco sumia. */
  filter:
    drop-shadow(0 0 calc(1px * var(--bt-un)) #000)
    drop-shadow(0 calc(1.5px * var(--bt-un)) calc(3px * var(--bt-un)) #000d);
  pointer-events: none;
}
.bt-losango__rotulo {
  grid-area: 2 / 1;
  max-width: 100%;
  overflow: hidden;
  /* 🚨 12,2px DE UNIDADE = OS 16px DA REFERÊNCIA. 16/1684 é 0,95% da largura do
     palco, e 0,95% de 1280 dá 12,16px — os 15px daqui pintavam 1,17%, 23% mais
     graúdo que o contrato. Não é só medida: em 844×390 a coluna tem 62,4px e
     "Personagem" saía com 60, deixando 2,4px entre um rótulo e o vizinho — os
     dois liam como uma expressão só. O piso desce de 10 para 9px, que é o
     mínimo que o §9-ter do CONTRATO dá a texto de leitura, e a folga triplica.
     `line-height: 1` porque a fonte HUD16 tem ascent 0,8 + descent 0,2 = 1,000
     em (lido do `hhea` de `hud/fonte.ttf`): a linha fica do tamanho exato do
     desenho da letra, sem entrelinha e sem cortar a perna do "g". */
  /* 🚨 16,8px, PELA MESMA RÉGUA QUE CORRIGIU O LOSANGO. O "16px de 1684" do §4.2
     também era leitura a olho: medida a altura de caixa de "Personagem" no
     arquivo (y 906–922 de cap, fonte ≈22px de 941 = 2,34% da altura do palco),
     na base 1280 de `--bt-un` dá 16,8px. A 12,2 o rótulo pintava 15,25px em 1600
     contra os 21px de lá. Em 844×390 os dois valores caem no mesmo piso de 9px,
     então a tela baixa não muda. */
  font-size: clamp(9px, calc(16.8px * var(--bt-un)), 26px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* Contorno e não sombra, com a cor do contorno casando com a do texto —
     §5 do CONTRATO. Sobre o cenário claro é o que segura a leitura. */
  -webkit-text-stroke: calc(2px * var(--bt-un)) #0c1a2e;
  paint-order: stroke fill;
}
.bt-losango:hover .bt-losango__forma,
.bt-losango:focus-visible .bt-losango__forma {
  box-shadow:
    inset 0 0 0 calc(1.5px * var(--bt-un)) var(--rpg-ouro, #ffc94a),
    0 calc(2px * var(--bt-un)) calc(8px * var(--bt-un)) #000b;
  scale: 1.06;
}
.bt-losango:active .bt-losango__forma {
  scale: 0.94;
}
.bt-losango:focus-visible {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
 * 3. ORBES DE HABILIDADE — §4.3 (x 74–99% · y 76–97%)
 *
 * 🚨 A folha da HUD (`hud/styles.css`) já prende a doca no rodapé CENTRAL, em
 * uma fileira de seis, com `!important`. Por isso todo seletor daqui carrega
 * `[data-bt]` além de `[data-hud16]`: entre declarações `!important` ganha a
 * mais específica, e não a que veio depois — assim o rodapé não depende da
 * ordem em que as tags entraram no `index.html`.
 *
 * 🚨 SÃO CINCO SLOTS, NÃO SEIS. A referência mostra 3 na fileira de cima e 3 na
 * de baixo; o servidor tem `MAX_LOADOUT = 5` (`server/src/game/skills.ts:375`),
 * sem nenhum destravamento por nível. Desenhar um sexto slot com cadeado seria
 * inventar progressão que o jogo não tem (§10 do CONTRATO). Fica 3 + Auto em
 * cima e os 2 restantes embaixo — o mesmo desenho, com o número que existe.
 * ═══════════════════════════════════════════════════════════════════ */

html[data-hud16][data-bt] .scene__dock {
  left: auto !important;
  /* 🚨 O jogo encolhe a doca a 0,66 fora do layout largo
     (`.game:not([data-wide=true]) .scene__dock{scale:.66}`), e essa regra vence
     a da HUD por especificidade — em 844×390 os orbes saíam com 18px, porque a
     escala do palco (`--bt-un` = 0,54) já os tinha encolhido uma vez. A conta
     dupla sai; quem dimensiona aqui é a unidade do palco, e só ela. */
  scale: none !important;
  /* Encostado na direita do palco, desviando da coluna do menu do jogo
     (z-index 50): `--bt-dir` é medido no .js e vale 0 no dia em que o menu
     deixar de ser uma coluna à direita. */
  right: calc(100vw - var(--bt-px) - var(--bt-pw) + max(var(--bt-dir, 0px), calc(var(--bt-pw) * 0.01))) !important;
  bottom: calc(var(--bt-fundo) + var(--bt-ph) * 0.03) !important;
  translate: none !important;
}
/*
 * 🚨 A QUARTA COLUNA NÃO TEM O TAMANHO DAS OUTRAS TRÊS, e é medida.
 *
 * `repeat(4, …)` tratava o Auto como se fosse mais um orbe. No arquivo da
 * referência (1672×941) os três discos de habilidade têm 98px (5,86% da largura
 * do palco) e o anel de Auto tem 68px (4,07%) — ele é NOTAVELMENTE menor, e o
 * vão que sobra ao lado dele é o que solta o botão da fileira. Com as quatro
 * colunas iguais, o nosso Auto saía 27% maior que o de lá, e como a peça do
 * acervo ainda traz aro grosso e brilho, ele virava o objeto mais aceso do
 * rodapé — competindo com as próprias habilidades, que é o que a fileira existe
 * para mostrar.
 *
 * Somando o desenho da referência: 3 × 5,86% + 4,07% = 21,65%, e os 25% do §4.3
 * deixam 1,12% para cada um dos três vãos (lá são 1,02%). A caixa continua
 * fechando em x 74–99% exatos, que é o que a conta antiga também garantia.
 */
html[data-hud16][data-bt] .skillbar {
  grid-template-columns: repeat(3, calc(73px * var(--bt-un))) calc(56px * var(--bt-un)) !important;
  /* A FOLGA É O QUE SOBRA DA CAIXA DO CONTRATO — não um px escolhido a dedo:
     25% do palco menos os quatro discos (73 × 3 + 56 = 275px de unidade),
     repartido pelos três vãos. */
  column-gap: calc((var(--bt-pw) * 0.25 - 275px * var(--bt-un)) / 3) !important;
  /* 🚨 A FOLGA ENTRE AS FILEIRAS É % DO PALCO, NÃO px DE UNIDADE. Com os mesmos
     7px das colunas o bloco fechava em 18,5% de altura e começava em y 78,5% —
     o contrato pede y 76–97%, 21%. Aqui também é subtração e não chute: 21% do
     palco menos os dois discos (73 + 67 = 140px de unidade). */
  row-gap: calc(var(--bt-ph) * 0.21 - 140px * var(--bt-un)) !important;
  justify-items: center;
  align-items: center;
}
/* 🚨 O DISCO É REDONDO E A ÁREA DE CLIQUE ERA QUADRADA. A folha da HUD zera o
   `border-radius` de todo orbe (`hud/styles.css`), e o jogo o tinha em 50%: com
   a caixa quadrada, 21% da área ficava FORA do disco desenhado e mesmo assim
   respondia ao toque — no Auto isso é pausar o combate sem querer, no canto de
   um orbe é disparar a habilidade do vizinho. Nenhuma arte perde pixel com o
   recorte: medido o alfa de `Btn_Auto_00/01`, `SkillCont_Frame` e
   `Shape_Skill__000000`, não há um ponto pintado fora do círculo inscrito. */
html[data-hud16][data-bt] .skillbar > button {
  border-radius: 50% !important;
}

/* A ordem da fileira: os três primeiros slots, o Auto fechando a fileira de
   cima (é onde ele está na referência), e os dois últimos slots embaixo.
   `nth-of-type` e não a classe porque o slot vazio troca de classe
   (`orb--skill` ↔ `orb--empty`) sem sair do lugar. */
html[data-hud16][data-bt] .skillbar > button:nth-of-type(1) { order: 4 }
html[data-hud16][data-bt] .skillbar > button:nth-of-type(2) { order: 1 }
html[data-hud16][data-bt] .skillbar > button:nth-of-type(3) { order: 2 }
html[data-hud16][data-bt] .skillbar > button:nth-of-type(4) { order: 3 }
html[data-hud16][data-bt] .skillbar > button:nth-of-type(5) { order: 5 }
html[data-hud16][data-bt] .skillbar > button:nth-of-type(6) { order: 6 }
/* 🚨 O TERCEIRO LUGAR DA FILEIRA DE BAIXO É DO ORBE DE ISEKAI — e agora está
   dito AQUI. Ele já fechava a fileira, mas por `order: 8` de
   `isekai/styles.css`: outra folha, outro assunto, e bastava mexer naquele
   número para o desenho desta tela mudar sem ninguém tocar neste arquivo. 7 é o
   lugar dele nesta fileira, logo depois dos seis acima. Quando não há era
   concluída o orbe não existe e a fileira fica com dois — é o estado do jogo,
   não um buraco de layout. */
html[data-hud16][data-bt] .skillbar > .orb--isekai { order: 7 }

/* 73 e 67 e não 66 e 60: medidos no arquivo da referência, os discos da fileira
   de cima têm 98px de 1672 (5,86% da largura do palco) e os da de baixo 95px
   (5,68%) — em 1600 isso é 94 e 91px, contra os 83 e 75 que saíam daqui. */
html[data-hud16][data-bt] .skillbar > button:nth-of-type(-n + 4) {
  width: calc(73px * var(--bt-un)) !important;
  height: calc(73px * var(--bt-un)) !important;
}
/* A fileira de baixo é um pouco menor, como na referência. */
html[data-hud16][data-bt] .skillbar > button:nth-of-type(n + 5) {
  width: calc(67px * var(--bt-un)) !important;
  height: calc(67px * var(--bt-un)) !important;
}
/* O Auto é o menor da fileira (ver o bloco da grade acima). Leva o `button` no
   seletor porque ele também é `nth-of-type(1)`: entre dois `!important`, ganha o
   mais específico, e sem o elemento a regra de cima empatava e vencia por vir
   antes com um seletor de mesmo peso mais o `button`. */
html[data-hud16][data-bt] .skillbar > button.orb--auto {
  width: calc(56px * var(--bt-un)) !important;
  height: calc(56px * var(--bt-un)) !important;
}

/* ── o aro colorido pela família da habilidade ────────────────────
   `--rarity` já vem em linha do React, por habilidade. O anel é um `::after`
   circular: gradiente no `background` do botão preencheria a CAIXA e o slot
   viraria um quadrado colorido atrás da moldura redonda. */
html[data-hud16][data-bt] .skillbar > .orb--skill::after {
  content: '';
  position: absolute;
  inset: 7%;
  z-index: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(2px * var(--bt-un)) var(--rarity, #5ec8ff);
  pointer-events: none;
}
/* 🚨 O botão fica `disabled` em DOIS casos: recarregando e combate pausado
   (`disabled={cd>0 || !auto}` no bundle). O primeiro já se lê pelo número
   grande; o segundo não mostra número nenhum, e sem esta dessaturação a fileira
   inteira parecia pronta com o jogo parado. Leve de propósito: escurecer mais
   apagaria a arte da habilidade, que a referência mantém visível. */
html[data-hud16][data-bt] .skillbar > .orb--skill:disabled {
  filter: saturate(0.7) brightness(0.85);
}

/* ── o miolo do orbe ─────────────────────────────────────────────
   A folha da HUD põe TODO filho do orbe em `position:relative` com 60% de
   caixa, o que empilha ⚡ / recarga / nível em três linhas dentro do círculo.
   Cada um volta para o seu canto. */
/*
 * 🚨 ERA UM QUADRADO DENTRO DE UM CÍRCULO. A 58% a arte da habilidade ficava
 * boiando no meio do disco, com moldura quadrada e uma coroa de fundo escuro em
 * volta — ampliado ao lado da referência, era o que mais gritava na fileira: lá
 * a arte de elemento PREENCHE o disco de ponta a ponta e o que a fecha é o aro.
 * 86% é o diâmetro do próprio aro (`::after`, `inset: 7%`), então a arte
 * encosta nele por dentro em vez de deixar anel morto; o raio de 50% corta os
 * cantos da peça, que é quadrada.
 */
html[data-hud16][data-bt] .skillbar .orb__icon {
  max-width: 86% !important;
  max-height: 86% !important;
  border-radius: 50%;
  object-fit: cover;
}
/* O número da recarga, grande, sobre a arte — é o que a referência mostra. */
html[data-hud16][data-bt] .skillbar .orb__cooldown {
  position: absolute !important;
  z-index: 2;
  inset: 5% !important;
  display: grid;
  place-items: center;
  max-width: none !important;
  max-height: none !important;
  border-radius: 50%;
  /* Tampa CLARA: no molde o ícone continua visível atrás do número. A 50% de
     preto sobre o disco preto da peça, a arte da habilidade sumia de vez. */
  background: #0000004d;
  color: var(--rpg-tinta, #fffdf6);
  /* 🚨 24px E NÃO 28: a recarga mais longa do jogo tem QUATRO caracteres.
     `S_Skill` chega a `cd: 900` (`server/src/game/skills.ts`) e o cliente
     escreve `900s`. Medido na fonte HUD16 a 1600×900: `900s` sai com 81,3px a
     28px×un contra 71px de tampa — estourava o disco e o contorno escorria por
     cima do aro. A 24px×un o mesmo texto mede 69,7px e cabe nos 78px da tampa
     nova, e `46s` continua com 52px num disco de 82 — o número grande que a
     referência mostra. */
  font-size: clamp(11px, calc(24px * var(--bt-un)), 34px) !important;
  font-weight: 500;
  line-height: 1;
  -webkit-text-stroke: calc(3px * var(--bt-un)) #14100a;
  paint-order: stroke fill;
}
/* O nível vira selo no pé do orbe; o raio ⚡ (habilidade que dispara sozinha)
   vira marca no topo. Os dois em cima da tampa da recarga: continuam legíveis
   com o slot recarregando. */
html[data-hud16][data-bt] .skillbar .orb__level {
  position: absolute !important;
  z-index: 3;
  right: 2%;
  bottom: -4%;
  left: auto;
  max-width: none !important;
  max-height: none !important;
  min-width: calc(15px * var(--bt-un));
  padding: 0 calc(3px * var(--bt-un));
  border-radius: 999px;
  background: linear-gradient(180deg, var(--rpg-ouro, #ffc94a), var(--rpg-ambar, #ffa129));
  color: #2a1200;
  /* Piso 9px e não 8: em 844×390 a unidade vale 0,54 e o selo saía com 8px
     pintados. O §9-ter do CONTRATO só libera 8px para etiqueta decorativa, e o
     nível da habilidade é informação. */
  font-size: clamp(9px, calc(11px * var(--bt-un)), 15px);
  font-weight: 500;
  line-height: max(9px, calc(15px * var(--bt-un)));
}
html[data-hud16][data-bt] .skillbar .orb__auto {
  position: absolute !important;
  z-index: 3;
  /* Em cima do aro, a 45°: no canto do quadrado ele boiava fora do círculo. */
  top: 8%;
  right: 8%;
  max-width: none !important;
  max-height: none !important;
  color: var(--rpg-bom, #8fd817);
  font-size: clamp(9px, calc(12px * var(--bt-un)), 16px);
  line-height: 1;
}

/* ── slot sem habilidade ─────────────────────────────────────────
   🚨 NÃO É UM SLOT TRAVADO, e por isso não leva cadeado (a folha da HUD põe
   um). Aqui os cinco slots existem desde sempre; o que falta é uma habilidade
   dentro. O "+" é o convite que o próprio jogo já desenha, e o clique dele já
   abre o gerenciador de skills. */
html[data-hud16][data-bt] .skillbar .orb--empty::after {
  content: none;
}
html[data-hud16][data-bt] .skillbar > .orb--empty {
  color: var(--rpg-tinta-3, #7e94b4);
  font-size: clamp(14px, calc(26px * var(--bt-un)), 34px) !important;
  font-weight: 500;
  line-height: 1;
}

/* ── o botão de auto ─────────────────────────────────────────────
   🚨 Ele tem DOIS estados no acervo e o jogo publica o estado em `aria-pressed`
   (`aria-pressed="true"` = combate pausado). Com uma arte só, o botão ficava
   dourado e aceso com o jogo parado. */
html[data-hud16][data-bt] .skillbar > .orb--auto[aria-pressed='true'] {
  background:
    url('/potato/hud/ui/Btn_Auto_00.png') center / 100% 100% no-repeat,
    url('/potato/hud/ui/Shape_Skill__000000.png') center / 84% 84% no-repeat !important;
}
/* A palavra "Auto" já está DESENHADA nas duas peças (dourada quando ligado,
   cinza quando pausado). O ícone que o React põe dentro tapava justamente ela e
   não dizia nada por si — sem ele, o botão vira o mesmo disco da referência e o
   estado se lê pela cor. O `title` do jogo (Pausar/Continuar) continua lá. */
html[data-hud16][data-bt] .skillbar > .orb--auto > img {
  display: none !important;
}

/* ARTE QUE JÁ TRAZ O LOSANGO (28/08/2026) — as três que o Zerg mandou.
 *
 * 🚨 O fator 0,6 acima foi medido nas artes ANTIGAS, que eram só o símbolo
 * solto: encolher a 0,6 mantinha o desenho dentro do losango que o CSS pinta.
 * As artes novas JÁ SÃO um losango com o símbolo dentro — a 0,6 viravam um
 * losango pequeno desenhado dentro de outro, e foi por isso que o Zerg viu os
 * ícones "muito menores" que o do Inventário.
 *
 * Como o contorno da arte coincide com o do botão, elas podem ocupar o
 * diâmetro quase inteiro. 0,98 e não 1 para o traço preto da borda não encostar
 * na aresta do losango do CSS.
 */
.bt-losango__arte[src*="Icon_100_Bot_Talents"],
.bt-losango__arte[src*="Icon_100_Bot_Raid"],
.bt-losango__arte[src*="Icon_100_Bot_Formation"] {
  width: calc(var(--d) * 0.98);
  height: calc(var(--d) * 0.98);
  /* 🚨 Um fio para a ESQUERDA (28/08, pedido do Zerg: "sobrava sombra do lado").
     A arte é um losango desenhado à mão e o miolo dele não cai no centro
     matemático do PNG — o desvio some no olho quando a arte é pequena, mas a
     0,98 do diâmetro ele encosta na aresta de um lado e deixa folga no outro. */
  translate: calc(var(--d) * -0.015) 0;
}

/* 🚨 O LOSANGO DO CSS SAI DE TRÁS DESSAS TRÊS. `.bt-losango__forma` desenha um
   losango de 0,707d — ele existia para dar corpo ao símbolo solto das artes
   antigas. Com uma arte que já traz o próprio losango, ele fica assomando pelas
   beiradas, que é a "sombra sobrando" que apareceu na foto. */
.bt-losango:has(.bt-losango__arte[src*="Icon_100_Bot_Talents"]) .bt-losango__forma,
.bt-losango:has(.bt-losango__arte[src*="Icon_100_Bot_Raid"]) .bt-losango__forma,
.bt-losango:has(.bt-losango__arte[src*="Icon_100_Bot_Formation"]) .bt-losango__forma {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
 * O AMARELO DO HOVER ACOMPANHANDO O LOSANGO (28/08/2026, pedido do Zerg).
 *
 * *"Sim quero o amarelo igual o do inventario em todos eles quando você coloca
 * o mouse em cima"* — e a referência que ele mandou mostra o losango INTEIRO
 * dourado com o símbolo escuro por cima, não um contorno.
 *
 * 🚨 São dois casos diferentes, e por isso duas regras:
 *
 *  1. Inventário — a arte é só o SÍMBOLO; quem desenha o losango é o CSS
 *     (`.bt-losango__forma`). Aqui basta pintar a forma de dourado e escurecer
 *     o símbolo. Sai exatamente a imagem da referência.
 *
 *  2. Talentos, Raids e Formação — a arte JÁ TRAZ o próprio losango e a forma
 *     do CSS está escondida (regra do bloco anterior). Não há o que pintar: um
 *     dourado por trás ficaria coberto pelo losango preto da própria arte, e
 *     um `filter` por cima pintaria símbolo e moldura da mesma cor. Por isso
 *     cada uma dessas três ganhou uma SEGUNDA arte, dourada, gerada da
 *     original trocando as duas tintas (o preto da moldura vira ouro, o branco
 *     do símbolo vira escuro) — `*_ouro.png` em `rpg/pecas/`. O hover troca uma
 *     pela outra.
 *
 * Assim o amarelo é o losango, não um quadrado em volta dele — que era a
 * limitação que eu tinha avisado.
 */

.bt-losango__ouro {
  grid-area: 1 / 1;
  place-self: center;
  /* MESMO tamanho e MESMO deslocamento da arte que ela cobre: as duas têm de
     cair no mesmo pixel, senão a troca "pula" debaixo do mouse. */
  width: calc(var(--d) * 0.98);
  height: calc(var(--d) * 0.98);
  translate: calc(var(--d) * -0.015) 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.12s ease-out, scale 0.12s ease-out;
  pointer-events: none;
  filter:
    drop-shadow(0 0 calc(1px * var(--bt-un)) #000)
    drop-shadow(0 calc(1.5px * var(--bt-un)) calc(3px * var(--bt-un)) #000d);
}

/* ── 2. as três que já trazem o losango: troca de arte ─────────────── */

.bt-losango:hover .bt-losango__ouro,
.bt-losango:focus-visible .bt-losango__ouro {
  opacity: 1;
  /* o mesmo 1,06 que a forma do CSS ganha no hover, para os quatro crescerem
     igual — sem isto só o Inventário reagiria ao ponteiro */
  scale: 1.06;
}
.bt-losango:has(.bt-losango__ouro):hover .bt-losango__arte,
.bt-losango:has(.bt-losango__ouro):focus-visible .bt-losango__arte {
  opacity: 0;
}

/* ── 1. o Inventário (e qualquer arte que seja só símbolo) ─────────── */

.bt-losango:not(:has(.bt-losango__ouro)):hover .bt-losango__forma,
.bt-losango:not(:has(.bt-losango__ouro)):focus-visible .bt-losango__forma {
  /* o mesmo ouro das artes geradas, para os quatro darem o MESMO amarelo */
  background: linear-gradient(160deg, #ffd979, #e0a52e);
  box-shadow:
    inset 0 0 0 calc(1.5px * var(--bt-un)) #00000059,
    0 calc(2px * var(--bt-un)) calc(8px * var(--bt-un)) #000b;
}
.bt-losango:not(:has(.bt-losango__ouro)):hover .bt-losango__arte,
.bt-losango:not(:has(.bt-losango__ouro)):focus-visible .bt-losango__arte {
  /* símbolo escuro sobre o ouro, como na referência. O contorno preto que a
     arte usava para se destacar do fundo escuro não faz falta aqui. */
  filter: brightness(0);
}

/* ── A ARTE PREENCHE O CÍRCULO DA HABILIDADE (28/08/2026) ───────────
 *
 * *"nas skills tem uma area demarcada do final do circulo, mas nao usamos a
 * area completa com a imagem, poderiamos ampliar o tamanho até as bordas do
 * circulo"*.
 *
 * 🚨 A REGRA ANTIGA NÃO AMPLIAVA NADA, e é por isso que o defeito sobreviveu ao
 * conserto de 27/08: ela dizia `max-width: 86%`, e `max-width` só CAPA — nunca
 * estica. O jogo dá ao ícone `width: 34px; height: 34px` FIXOS (medido no CSS do
 * bundle), então ele continuava com 34px dentro de um disco bem maior, com um
 * anel morto em volta. Trocar por `width/height` é o que de fato o faz crescer.
 *
 * 86% é o diâmetro do aro (`::after`, `inset: 7%`): a arte encosta nele por
 * dentro em vez de passar por baixo.
 */
html[data-hud16][data-bt] .skillbar .orb__icon {
  width: 86% !important;
  height: 86% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 50%;
  object-fit: cover;
}


/* ── 01/09/2026 (Zerg, #1348): o selo no pé do orbe mostra a ORDEM DE CAST ──
   *"tem um 1 logo embaixo de todas as skills; quero que apareça a skill na
   ordem de cast 1 a 5 e não todas com o 1"*. O "1" era o NÍVEL da habilidade
   (`.orb__level`, do bundle) — todas no nível 1 viravam cinco "1" iguais, que
   ele leu como ordem. Como o laço do automático percorre a barra nesta mesma
   ordem (slot 1 tem prioridade — ver a Build), o selo passa a dizer isso.
   O nível não some do jogo: continua no `title` do orbe ("Nome · Lv N") e na
   Build. Contador CSS, nenhum nó novo no React; os `::before/::after` do orbe
   já são o brilho e o aro, então o número entra no `::after` do próprio selo,
   com o texto original apagado por `font-size: 0`. */
html[data-hud16][data-bt] .skillbar {
  counter-reset: ordem-cast;
}
html[data-hud16][data-bt] .skillbar > .orb--skill {
  counter-increment: ordem-cast;
}
html[data-hud16][data-bt] .skillbar .orb__level {
  font-size: 0 !important;
}
html[data-hud16][data-bt] .skillbar .orb__level::after {
  content: counter(ordem-cast);
  font-size: clamp(9px, calc(11px * var(--bt-un)), 15px);
  line-height: 1.5;
}

/* 18/09, pedido do Zerg (painel Ações admin, "Camadas de interface"): 2
   interruptores irmãos — `body[data-cenario-skillbar="off"]`/`[data-cenario-
   nav-rodape="off"]` escritos por combate/index.js. Círculos de habilidade
   continuam funcionando por trás (só o desenho some); nav de baixo é a
   raiz única `.bt-rodape`, construída por este próprio módulo. */
body[data-cenario-skillbar='off'] .panel.skillbar {
  display: none !important;
}
body[data-cenario-nav-rodape='off'] .bt-rodape {
  display: none !important;
}