/*
 * JANELA — Habilidades (26/08)
 *
 * `.panel.skills` no molde da tela de Skills do Soul Strike: build equipada
 * em destaque no topo (o que o jogador tem ativo agora), filtros logo abaixo
 * e a coleção — a maior área da tela — em grade com moldura de raridade.
 *
 * ── DECISÕES QUE VALE EXPLICAR ──────────────────────────────────────────
 *
 * 1. RARIDADE POR ARO, NÃO POR BORDA. O bundle pinta `.skill-card` com
 *    `border: 2px solid var(--rarity)` — isso escreve a cor direto em
 *    `border-top-color`, que É uma das três propriedades que o inspetor mede
 *    ao vivo. Aqui a raridade sai da borda e vai para `box-shadow`
 *    (`color-mix(in srgb, var(--rarity)…)`), a MESMA técnica que `pets.css`
 *    já validou para o retrato do bicho: continua sendo a informação do
 *    jogo, só não é mais lida como "resto do tema antigo".
 *
 * 2. `.skill-card__rarity` (a palavra "Lendário"/"Épico"…) FICA na cor da
 *    raridade — ao contrário do medalhão do Pets. Lá a cor já estava no aro
 *    do retrato e repetir seria redundante; aqui, na grade "Todas" com até
 *    39 cartas por raridade misturada, a palavra colorida é o que deixa
 *    escanear a coleção num relance. É semântica (a cor É a raridade, como
 *    `--attr-*`), não decoração — a mesma exceção do CONTRATO §4.
 *
 * 3. O EVOLUIR VIRA BOTÃO DE CUSTO, NÃO DOURADO CHEIO — a mesma lição da
 *    Loja: o bundle marca TODO "Evoluir" com `.btn-skin` (dourado cheio); com
 *    até 16 cartas na tela ao mesmo tempo, 16 botões dourados não destacam
 *    nenhum. Vira poço escuro com fio e número em ouro — o clique é o mesmo.
 *
 * 4. `.skill-invocar` (o bloco de sortear com bilhete) já sai por
 *    `display:none!important` no módulo `abas-invoc`, que TAMBÉM escreve
 *    `.panel.skills .skills__topo > .skills__build { flex: 1 1 100% }` para
 *    a build ocupar a linha inteira sozinha. 🚨 Essa regra de lá NÃO vencia
 *    aqui: as duas têm 4 classes de especificidade, mas a regra `.build`
 *    original já escrita nesta folha somava o seletor `html[data-rpgw=…]`
 *    (um elemento a mais), o que a fazia ganhar por especificidade mesmo
 *    vindo primeiro — e ela dizia `flex: 0 0 auto`. Resultado: a build
 *    encolhia para o conteúdo e sobrava um vão preto de 691px à direita
 *    (medido em 1600×900). Reescrevo `flex: 1 1 100%` AQUI, no seletor mais
 *    específico, para não depender de qual folha carrega primeiro.
 *
 * 5. RARIDADE E "PRONTA" NÃO PODEM COMPARTILHAR VERDE. A tabela real de
 *    raridade (`server/…/skills.ts RARITY_COLOR`) usa INCOMUM = `#2ECC40`,
 *    quase o mesmo verde de `--rpg-bom` (`#8fd817`) que o kit usa para
 *    "pronto/positivo". O card `[data-ready='true']` chegou a TROCAR o aro
 *    inteiro pela cor de "pronto" — aí um Mítico (rosa) pronto virava um aro
 *    verde idêntico ao de um Incomum comum, e a raridade real desaparecia.
 *    Agora o aro é SEMPRE a raridade (`var(--rarity)`); "pronto" vira um
 *    halo externo (glow, não aro sólido) mais a pílula `PRONTA`, que já é
 *    rotulada — texto não confunde com cor igual do jeito que um aro confunde.
 *
 * Ver o contrato em www/rpg/CONTRATO.md. Validar com:
 *   node ferramentas/foto.mjs habilidades
 *   node ferramentas/inspetor-janela.mjs habilidades
 */

/* ═══════════════════════════════════════════════════════════════════════
 * 1. O PAINEL
 * ═══════════════════════════════════════════════════════════════════════ */

/*
 * DUAS COLUNAS, no molde que o Lucas mandou (27/08).
 *
 * A referência dele divide a tela ao meio: à esquerda o que se OPERA (a build
 * equipada, os filtros e a ficha da habilidade escolhida, com descrição,
 * atributos e os botões de evoluir); à direita, só a coleção, numa grade que
 * ocupa a altura inteira.
 *
 * Empilhado como estava, a coleção nascia com 415px de altura num painel de
 * 731 — menos da metade da janela para a maior lista da tela — e os filtros
 * ocupavam três botões de 474px cada, largura que nenhum deles precisa.
 *
 * 🚨 `!important`: o kit crava `display:block !important` no `.rpgw-conteudo` —
 * preciso repetir a marca para vencer por importância, não só por
 * especificidade.
 */
html[data-rpgw='habilidades'] .panel.skills {
  display: grid !important;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: calc(10px * var(--rpg-un, 1));
  padding: calc(12px * var(--rpg-un, 1));
  overflow: hidden;
}

html[data-rpgw='habilidades'] .skills__header {
  grid-column: 1;
  grid-row: 1;
}
html[data-rpgw='habilidades'] .skills__topo {
  grid-column: 1;
  grid-row: 2;
}
html[data-rpgw='habilidades'] .skills__filtros {
  grid-column: 1;
  grid-row: 3;
}
/* a ficha (`habilidades.js`) ocupa o que sobra da coluna */
html[data-rpgw='habilidades'] .hab-ficha {
  grid-column: 1;
  grid-row: 4;
  min-height: 0;
}
/* a coleção pega a coluna da direita inteira, de cima a baixo */
html[data-rpgw='habilidades'] .skills__colecao {
  grid-column: 2;
  grid-row: 1 / -1;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. CABEÇALHO — o atalho de invocação e o contador de coleção
 * ═══════════════════════════════════════════════════════════════════════ */

/* O quadro do kit já anuncia "Habilidades" com ícone no topo — este `h2`
   só repetiria a mesma palavra. */
html[data-rpgw='habilidades'] .panel.skills .skills__header > h2 {
  display: none;
}

/* 🚨 Sem `background`/`box-shadow` de painel: uma caixa cheia com só uma
   pastilha na ponta e um texto na outra lia como "painel pela metade" (a
   régua visual da onda 2 pegou isso). Como faixa fina — só o fio dourado
   embaixo, que já é a costura entre cabeçalho e Build — ela lê como rótulo,
   não como cartão vazio. */
html[data-rpgw='habilidades'] .panel.skills .skills__header[data-abi-cab] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(10px * var(--rpg-un, 1));
  min-height: calc(30px * var(--rpg-un, 1));
  padding: 0 calc(4px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1));
  border-bottom: calc(1px * var(--rpg-un, 1)) solid #9c7c4e40;
}
html[data-rpgw='habilidades'] .panel.skills .skills__header[data-abi-cab] > .abi-chip {
  order: 1;
}
html[data-rpgw='habilidades'] .panel.skills .skills__header[data-abi-cab] > .skills__count {
  order: 2;
  margin-left: auto;
  font-size: clamp(10px, calc(13px * var(--rpg-un, 1)), 14px);
  font-weight: 700;
  color: var(--rpg-tinta-2);
  white-space: nowrap;
}

/* O ÚNICO dourado cheio desta tela (CONTRATO §7: um botão dourado por
   janela). Os 16 "Evoluir" da coleção são custo (decisão 3); o atalho para
   o Santuário — a única ação de instância única da tela, sair para BUSCAR
   habilidade nova — é quem carrega o destaque. Deixou de ser roxo-fantasma
   porque nada mais na tela reivindicava o ouro: régua visual da onda 2
   pegou "zero botão dourado, zero ponto focal de ação". */
html[data-rpgw='habilidades'] .panel.skills .abi-chip {
  min-height: clamp(26px, calc(28px * var(--rpg-un, 1)), 30px);
  padding: 0 calc(14px * var(--rpg-un, 1)) 0 calc(9px * var(--rpg-un, 1));
  gap: calc(6px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a8;
  color: #2a1200;
  font-size: clamp(10px, calc(12px * var(--rpg-un, 1)), 13px);
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #ffd58a;
  paint-order: stroke fill;
  animation: none;
  white-space: nowrap;
}
html[data-rpgw='habilidades'] .panel.skills .abi-chip:hover {
  filter: brightness(1.12);
}
html[data-rpgw='habilidades'] .panel.skills .abi-chip__ico {
  width: clamp(14px, calc(17px * var(--rpg-un, 1)), 18px);
  height: clamp(14px, calc(17px * var(--rpg-un, 1)), 18px);
  filter: drop-shadow(0 calc(1px * var(--rpg-un, 1)) calc(1px * var(--rpg-un, 1)) #0006);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 3. BUILD EQUIPADA — o que o jogador procura primeiro
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='habilidades'] .panel.skills .skills__build {
  /* 🚨 precisa ser `1 1 100%`, não `0 0 auto` — ver decisão 4 no topo do
     arquivo. Sem isto sobra um vão preto à direita do cartão. */
  flex: 1 1 100%;
  gap: calc(8px * var(--rpg-un, 1));
  padding: calc(12px * var(--rpg-un, 1)) calc(14px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: var(--rpg-raio-p);
  background:
    radial-gradient(96% 140% at 50% 0%, #9c7c4e26, transparent 70%),
    linear-gradient(180deg, var(--rpg-cabeca-b) 0%, var(--rpg-painel-b) 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a81f;
}

html[data-rpgw='habilidades'] .panel.skills .skills__section {
  gap: calc(6px * var(--rpg-un, 1));
  font-size: clamp(12px, calc(15px * var(--rpg-un, 1)), 16px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--rpg-ouro);
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
/* Fio dourado que fecha o título, como no Perfil e no Pets. */
html[data-rpgw='habilidades'] .panel.skills .skills__section::after {
  content: '';
  flex: 1 1 auto;
  height: calc(1px * var(--rpg-un, 1));
  background: linear-gradient(90deg, #9c7c4e88, #9c7c4e00);
}
html[data-rpgw='habilidades'] .panel.skills .skills__hint {
  flex: 1 1 100%;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  color: var(--rpg-tinta-3);
}

html[data-rpgw='habilidades'] .panel.skills .loadout {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: calc(8px * var(--rpg-un, 1));
}
html[data-rpgw='habilidades'] .panel.skills .loadout__cell {
  align-items: center;
  gap: calc(5px * var(--rpg-un, 1));
}

/* O slot é o `<span>` decorativo; `.loadout__remove` (o `<button>` de
   dentro) só precisa preencher o espaço dele sem desenhar nada por conta
   própria — quem desenha é o slot.
   🚨 Largura EM `clamp`, não `100%` da coluna: esticado até a borda do grid,
   o slot cresce demais de ALTURA num celular deitado — é ele sozinho que
   engole o respiro da coleção lá embaixo. Um medalhão de tamanho fixo (por
   faixa, não por coluna) sobra o mesmo espaço em qualquer proporção de tela. */
html[data-rpgw='habilidades'] .panel.skills .loadout__slot {
  position: relative;
  width: clamp(34px, calc(56px * var(--rpg-un, 1)), 64px);
  aspect-ratio: 1;
  border-radius: calc(12px * var(--rpg-un, 1));
  /* substitui o `itemSlot_yellow.png` do jogo pelo poço escuro do kit */
  background: radial-gradient(circle at 50% 30%, var(--rpg-cabeca-a), var(--rpg-poço)) !important;
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff1a;
  overflow: hidden;
}
html[data-rpgw='habilidades'] .panel.skills .loadout__remove {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
html[data-rpgw='habilidades'] .panel.skills .loadout__remove:hover .loadout__icon {
  filter: drop-shadow(0 calc(2px * var(--rpg-un, 1)) calc(3px * var(--rpg-un, 1)) #000a) brightness(1.18);
}
html[data-rpgw='habilidades'] .panel.skills .loadout__icon {
  width: 72%;
  height: 72%;
  /* tira o fundo quadrado achatado que `[data-grade=true]` desenha por trás
     do ícone — o slot já é o medalhão */
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain;
  filter: drop-shadow(0 calc(2px * var(--rpg-un, 1)) calc(3px * var(--rpg-un, 1)) #000a);
}
html[data-rpgw='habilidades'] .panel.skills .loadout__level {
  right: calc(3px * var(--rpg-un, 1));
  bottom: calc(3px * var(--rpg-un, 1));
  left: auto;
  padding: 0 calc(6px * var(--rpg-un, 1));
  border: none;
  border-radius: 999px;
  background: #100a05cc;
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff24;
  color: var(--rpg-tinta);
  font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 11px);
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) var(--rpg-poço);
  paint-order: stroke fill;
}
html[data-rpgw='habilidades'] .panel.skills .loadout__auto {
  min-height: clamp(20px, calc(24px * var(--rpg-un, 1)), 26px);
  padding: 0 calc(2px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #8a7255;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #6b5a3f 0%, #3f3120 100%);
  color: var(--rpg-tinta-3);
  font-size: clamp(8px, calc(9.5px * var(--rpg-un, 1)), 10.5px);
  font-weight: 700;
  letter-spacing: 0;
}
/* AUTO ligado usa o token de "bom", não o `--green` cru do jogo — é a
   mesma família de cor que o resto da janela usa para "positivo/ativo". */
html[data-rpgw='habilidades'] .panel.skills .loadout__auto[aria-pressed='true'] {
  border-color: var(--rpg-bom);
  color: var(--rpg-bom);
}

/* Estado vazio: menos de 5 habilidades possuídas. Dashed + "+", o mesmo
   idioma de "lugar pra soltar" do resto do jogo. */
html[data-rpgw='habilidades'] .panel.skills .loadout__slot--empty {
  display: grid;
  place-items: center;
  border: calc(1.5px * var(--rpg-un, 1)) dashed #9c7c4ea0;
  background: var(--rpg-poço) !important;
  color: var(--rpg-ouro);
  font-size: clamp(16px, calc(20px * var(--rpg-un, 1)), 22px);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4. FILTROS — abas de verdade (`.rpg-aba` do kit), não blocos soltos.
 * Canto só em cima, sem borda embaixo, fio aceso na ativa — a MESMA peça
 * que Perfil/Pets usam. A régua visual da onda 2 pegou os filtros como "três
 * blocos azuis chapados, desligados da grade": o corte que faltava era o
 * canto reto embaixo + a costura com `.skills__colecao` logo abaixo (seção
 * 5), que agora fecha como o poço da aba ativa.
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='habilidades'] .panel.skills .skills__filtros {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: calc(4px * var(--rpg-un, 1));
}
html[data-rpgw='habilidades'] .panel.skills .skills__filtro {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: clamp(24px, calc(32px * var(--rpg-un, 1)), 34px);
  padding: 0 calc(10px * var(--rpg-un, 1));
  gap: calc(6px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #6b5330;
  border-bottom: none;
  border-radius: var(--rpg-raio-p) var(--rpg-raio-p) 0 0;
  background: linear-gradient(180deg, var(--rpg-cabeca-a) 0%, var(--rpg-cabeca-b) 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #8a7255;
  color: var(--rpg-tinta-2);
  font-size: clamp(10.5px, calc(12.5px * var(--rpg-un, 1)), 13.5px);
  font-weight: 700;
}
html[data-rpgw='habilidades'] .panel.skills .skills__filtro b {
  padding: 0 calc(6px * var(--rpg-un, 1));
  border-radius: 999px;
  background: #100a05cc;
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
}
html[data-rpgw='habilidades'] .panel.skills .skills__filtro[aria-pressed='true'] {
  border-color: var(--rpg-aro-ouro);
  background: linear-gradient(180deg, #3a2712 0%, var(--rpg-painel-a) 100%);
  color: var(--rpg-tinta);
}
html[data-rpgw='habilidades'] .panel.skills .skills__filtro[aria-pressed='true'] b {
  color: var(--rpg-tinta);
}
/* O fio aceso embaixo da aba ativa — `.rpg-aba` do kit. */
html[data-rpgw='habilidades'] .panel.skills .skills__filtro[aria-pressed='true']::after {
  content: '';
  position: absolute;
  inset: auto calc(6px * var(--rpg-un, 1)) calc(-1px * var(--rpg-un, 1));
  height: calc(2px * var(--rpg-un, 1));
  background: var(--rpg-aro-ouro);
  border-radius: 999px;
}
/* "Prontas" com item esperando: só o número e o fio ganham `--rpg-bom` — não
   o fundo inteiro. A régua visual pegou a aba ativa como "barra verde-limão
   chapada que grita mais que a tela"; o aviso continua, só que do tamanho
   de um aviso, não de um pôster. */
html[data-rpgw='habilidades'] .panel.skills .skills__filtro[data-alerta='true'] {
  border-color: var(--rpg-bom);
}
html[data-rpgw='habilidades'] .panel.skills .skills__filtro[data-alerta='true'] b {
  color: var(--rpg-bom);
}
html[data-rpgw='habilidades'] .panel.skills .skills__filtro[data-alerta='true'][aria-pressed='true']::after {
  background: var(--rpg-bom);
}
html[data-rpgw='habilidades'] .panel.skills .skills__filtro[data-alerta='true'][aria-pressed='true'] b {
  background: #ffffff40;
  color: var(--rpg-poço);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. A COLEÇÃO — a maior área da tela, com rolagem própria
 * ═══════════════════════════════════════════════════════════════════════ */

/* O poço que as abas "abrem": mesma borda, canto de cima esquerdo reto para
   encostar embaixo da primeira aba — a MESMA costura que `pets.css` usa
   entre `.pets-abas` e `.pets-aba`. `margin-top` negativo cola o poço nas
   abas, cancelando o `gap` da coluna flex do painel (`.panel.skills` tem
   um gap escalado entre TODOS os filhos; sem isto sobrava uma fresta escura
   entre a aba e a grade, e elas paravam de ler como uma peça só). */
html[data-rpgw='habilidades'] .panel.skills .skills__colecao {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: calc(-10px * var(--rpg-un, 1));
  padding: calc(4px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro);
  border-radius: 0 var(--rpg-raio-p) var(--rpg-raio-p) var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff0a;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: #8a7255 #100a05;
  /* A última fileira cortada no meio de uma linha de texto, sem aviso —
     mesma correção que `inventario.css` já validou em `.bag`: a máscara
     desvanece só o recorte (anda com a rolagem), então a fileira cortada lê
     como "tem mais embaixo", não como "quebrou no meio". */
  mask-image: linear-gradient(180deg, #000 calc(100% - calc(20px * var(--rpg-un, 1))), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - calc(20px * var(--rpg-un, 1))), transparent 100%);
}
html[data-rpgw='habilidades'] .panel.skills .skills__colecao::-webkit-scrollbar {
  width: calc(8px * var(--rpg-un, 1));
}
html[data-rpgw='habilidades'] .panel.skills .skills__colecao::-webkit-scrollbar-track {
  background: #100a05;
  border-radius: 999px;
}
html[data-rpgw='habilidades'] .panel.skills .skills__colecao::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a9782c, #6b4f1f);
  border-radius: 999px;
}
html[data-rpgw='habilidades'] .panel.skills .collection {
  /* 🚨 `min-height: 100%` é o que dá à grade FOLGA pra centralizar: sem
     isto ela mede só a própria fileira (uma carta = uma fileira = a grade
     "termina" ali), e `align-content` não tem sobra nenhuma pra distribuir —
     quem sobrava era o `.skills__colecao` por fora, não a grade. */
  min-height: 100%;
  grid-template-columns: repeat(auto-fill, minmax(calc(108px * var(--rpg-un, 1)), 1fr));
  gap: calc(8px * var(--rpg-un, 1));
  /* `safe center`: uma categoria curta ("Prontas" com 1 carta) centraliza em
     vez de deixar meia tela preta (CONTRATO §9-bis.3, o mesmo defeito que
     reprovou a Loja); uma categoria cheia ("Todas", 39) não cabe centrada —
     "safe" cai para o topo sozinho nesse caso, sem cortar a primeira fileira
     pra fora da área visível. */
  align-content: safe center;
}

/* ── o cartão de habilidade ─────────────────────────────────────────── */

html[data-rpgw='habilidades'] .panel.skills .skill-card {
  gap: calc(4px * var(--rpg-un, 1));
  padding: calc(10px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1));
  border-color: transparent;
  border-radius: var(--rpg-raio-p);
  background:
    radial-gradient(120% 74% at 50% 0%, color-mix(in srgb, var(--rarity, var(--rpg-aro)) 32%, transparent), transparent 66%),
    linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  box-shadow:
    inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) color-mix(in srgb, var(--rarity, var(--rpg-aro)) 75%, var(--rpg-poço)),
    inset 0 0 0 calc(3px * var(--rpg-un, 1)) var(--rpg-poço),
    0 calc(2px * var(--rpg-un, 1)) 0 #00000080;
}
/* 🚨 O aro FICA na cor da raridade (`var(--rarity)`) mesmo pronta — ver
   decisão 5 no topo do arquivo. Só o halo externo (fora do aro, não troca a
   cor dele) marca "pronta"; a pílula `PRONTA`/`skill-card__flag--pronta` é
   quem carrega o rótulo de verdade. */
html[data-rpgw='habilidades'] .panel.skills .skill-card[data-owned='true'][data-ready='true'] {
  box-shadow:
    inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) color-mix(in srgb, var(--rarity, var(--rpg-aro)) 75%, var(--rpg-poço)),
    inset 0 0 0 calc(3px * var(--rpg-un, 1)) var(--rpg-poço),
    0 0 calc(14px * var(--rpg-un, 1)) -3px color-mix(in srgb, var(--rpg-bom) 60%, transparent);
}
html[data-rpgw='habilidades'] .panel.skills .skill-card[data-owned='false'] {
  background: var(--rpg-poço);
  box-shadow:
    inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) color-mix(in srgb, var(--rarity, var(--rpg-aro)) 35%, var(--rpg-poço)),
    inset 0 0 0 calc(3px * var(--rpg-un, 1)) var(--rpg-poço);
}

/* 🚨 `tema-azul/styles.css` (folha antiga) mira `.skill-card__pick:disabled`
   direto e pinta um azul-acinzentado — sobra do desenho anterior que a régua
   ao vivo pega. Como aqui o botão nunca mostra o próprio texto (quem pinta
   nome e raridade são os filhos, cada um com a sua cor), isto só existia
   para fechar a herança de currentColor — mas precisa ser dito, senão o
   antigo vence por ser mais específico que .skill-card__pick sozinho. */
html[data-rpgw='habilidades'] .panel.skills .skill-card__pick {
  color: var(--rpg-tinta);
}
html[data-rpgw='habilidades'] .panel.skills .skill-card__pick:not(:disabled) {
  cursor: pointer;
}
html[data-rpgw='habilidades'] .panel.skills .skill-card__pick:not(:disabled):hover .skill-card__icon {
  filter: brightness(1.15);
}

html[data-rpgw='habilidades'] .panel.skills .skill-card__icon {
  width: clamp(34px, calc(46px * var(--rpg-un, 1)), 50px);
  height: clamp(34px, calc(46px * var(--rpg-un, 1)), 50px);
  font-size: clamp(18px, calc(24px * var(--rpg-un, 1)), 26px);
  /* mesma troca do medalhão do loadout: fora o fundo quadrado achatado */
  background: radial-gradient(circle at 50% 30%, var(--rpg-cabeca-a), var(--rpg-poço)) !important;
  padding: 0 !important;
  border-radius: calc(10px * var(--rpg-un, 1)) !important;
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff1a;
}

html[data-rpgw='habilidades'] .panel.skills .skill-card__level {
  top: calc(4px * var(--rpg-un, 1));
  left: calc(4px * var(--rpg-un, 1));
  padding: 0 calc(6px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--gold-700);
  font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 11px);
}
html[data-rpgw='habilidades'] .panel.skills .skill-card__flag {
  top: calc(4px * var(--rpg-un, 1));
  right: calc(4px * var(--rpg-un, 1));
  padding: calc(1px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--gold-700);
  border-radius: calc(5px * var(--rpg-un, 1));
  /* 🚨 piso de 9px, não 6.5px: é sobreposta (não consome fluxo), então dá
     pra manter legível em qualquer resolução sem custar altura de carta. */
  font-size: clamp(9px, calc(8px * var(--rpg-un, 1)), 10px);
  letter-spacing: 0.04em;
}
/* PRONTA (dá pra evoluir agora) é verde — diferente de EQUIPADA (dourado),
   duas informações diferentes não podem ler igual. */
html[data-rpgw='habilidades'] .panel.skills .skill-card__flag--pronta {
  border-color: #2f9e35;
  background: linear-gradient(180deg, #7ee06a 0%, #2f9e35 100%);
  color: var(--rpg-poço);
}

/* 🚨 `.skill-card__pick` é `flex-direction: column; align-items: center` —
   sem `align-items: stretch`, cada filho mede pela LARGURA DO PRÓPRIO
   CONTEÚDO, não pela do cartão. E o bundle usa `display: -webkit-box` (o
   truque de `-webkit-line-clamp: 2`) no nome, cujo max-content é o texto
   INTEIRO numa linha só — então "Tempestade de Flechas" pedia mais largura
   do que o cartão tinha e vazava pro vizinho. `width: 100%` tira o nome do
   cálculo por conteúdo e devolve pro line-clamp a largura certa pra quebrar
   em 2 linhas de verdade — o que também resolve o degrau entre cartas da
   mesma fileira (nomes que só QUASE quebravam em 2 linhas reservavam a
   MESMA altura dos que quebravam limpo, então a barra abaixo ficava ora
   alguns pixels mais alta, ora mais baixa, dentro da mesma fileira). */
html[data-rpgw='habilidades'] .panel.skills .skill-card__name {
  width: 100%;
  min-width: 0;
  /* 2 linhas de verdade: line-height 1.2 × 2 = 2.4em. `2.1em` reservava
     MENOS que 2 linhas — a própria causa do degrau acima, não só o vazamento. */
  min-height: 2.4em;
  font-size: clamp(9.5px, calc(11.5px * var(--rpg-un, 1)), 12.5px);
  line-height: 1.2;
  color: var(--rpg-tinta);
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) var(--rpg-poço);
  paint-order: stroke fill;
}
html[data-rpgw='habilidades'] .panel.skills .skill-card[data-owned='false'] .skill-card__name {
  color: var(--rpg-tinta-3);
  -webkit-text-stroke: 0;
}
html[data-rpgw='habilidades'] .panel.skills .skill-card__rarity {
  font-size: clamp(9px, calc(9px * var(--rpg-un, 1)), 10px);
  letter-spacing: 0.05em;
}

html[data-rpgw='habilidades'] .panel.skills .skill-card__cards {
  gap: calc(4px * var(--rpg-un, 1));
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(9.5px * var(--rpg-un, 1)), 10.5px);
}
html[data-rpgw='habilidades'] .panel.skills .skill-card__bar {
  height: calc(5px * var(--rpg-un, 1));
}
html[data-rpgw='habilidades'] .panel.skills .skill-card__max {
  color: var(--rpg-ouro);
  font-size: clamp(8px, calc(9px * var(--rpg-un, 1)), 10px);
}
html[data-rpgw='habilidades'] .panel.skills .skill-card__locked {
  color: var(--rpg-tinta-3);
  font-size: clamp(8px, calc(9px * var(--rpg-un, 1)), 10px);
  letter-spacing: 0.05em;
}

/* Evoluir — botão de custo (ver decisão 3 no topo do arquivo). */
html[data-rpgw='habilidades'] .panel.skills .skill-card__evolve {
  min-height: calc(24px * var(--rpg-un, 1));
  padding: 0 calc(6px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-cabeca-b) 0%, var(--rpg-painel-b) 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a833;
  color: var(--rpg-ouro);
  font-size: clamp(9px, calc(10.5px * var(--rpg-un, 1)), 11.5px);
  font-weight: 800;
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
  text-shadow: none;
}
html[data-rpgw='habilidades'] .panel.skills .skill-card__evolve img {
  width: calc(12px * var(--rpg-un, 1));
  height: calc(12px * var(--rpg-un, 1));
}
html[data-rpgw='habilidades'] .panel.skills .skill-card__evolve:hover:not(:disabled) {
  border-color: var(--rpg-ouro);
  filter: brightness(1.18);
}
html[data-rpgw='habilidades'] .panel.skills .skill-card__evolve:disabled {
  border-color: var(--rpg-aro);
  background: linear-gradient(180deg, var(--rpg-cabeca-b) 0%, var(--rpg-painel-b) 100%);
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14;
  color: var(--rpg-tinta-3);
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) var(--rpg-poço);
  opacity: 1;
}
html[data-rpgw='habilidades'] .panel.skills .skill-card__evolve:disabled img {
  filter: grayscale(1) brightness(0.7);
}
/* "Faltam X de ouro" não é perigo, é indisponibilidade — âmbar, a mesma
   lição da Loja (CONTRATO §9-bis item 5). O bundle pinta isto de
   `var(--red)`, que não é remapeado por ser token semântico do jogo. */
html[data-rpgw='habilidades'] .panel.skills .skill-card__evolve[data-falta='ouro'] {
  color: var(--rpg-ambar) !important;
}
html[data-rpgw='habilidades'] .panel.skills .skill-card__evolve[data-falta='ouro']:disabled {
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #2a1200 !important;
}

html[data-rpgw='habilidades'] .panel.skills .skill-card__info {
  min-height: calc(20px * var(--rpg-un, 1));
  padding: 0 calc(4px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro);
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-cabeca-b) 0%, var(--rpg-painel-b) 100%);
  color: var(--rpg-tinta-3);
  font-size: clamp(7.5px, calc(9px * var(--rpg-un, 1)), 10px);
  font-weight: 700;
}
html[data-rpgw='habilidades'] .panel.skills .skill-card__info:hover {
  border-color: var(--rpg-aro-ouro);
  color: var(--rpg-tinta-2);
}

/* Estado vazio (filtro "Prontas" ou "Possuídas" sem nada): a mesma marca
   de ícone apagado que o Pets usa para "nenhum pet em campo". */
html[data-rpgw='habilidades'] .panel.skills .skills__empty {
  margin: 0;
  padding: calc(28px * var(--rpg-un, 1)) calc(12px * var(--rpg-un, 1));
  color: var(--rpg-tinta-2);
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 14px);
  line-height: 1.5;
  text-align: center;
}
html[data-rpgw='habilidades'] .panel.skills .skills__empty::before {
  content: '';
  display: block;
  width: clamp(52px, calc(80px * var(--rpg-un, 1)), 92px);
  height: clamp(52px, calc(80px * var(--rpg-un, 1)), 92px);
  margin: 0 auto calc(10px * var(--rpg-un, 1));
  background: url('/potato/rpg/pecas/Icon_80_Cards_Skill.png') center / contain no-repeat;
  filter: grayscale(1) brightness(0.7);
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 6. POUCA ALTURA (celular deitado) — CONTRATO §9-bis.7: "em tela baixa,
 * menos colunas e menos texto", não fonte ilegível. Antes desta rodada a
 * coleção tinha 468×99px pra trabalhar (nenhuma carta cabia inteira, ação
 * nenhuma alcançável) porque só o respiro encolhia; o conteúdo — 5 linhas de
 * texto por carta, AUTO em linha própria — continuava do tamanho da tela
 * cheia. Aqui o conteúdo cede de verdade: raridade e "ⓘ Detalhes" saem (a cor
 * do aro já diz a raridade; o detalhe cabe em tela cheia), o nome vira 1
 * linha, e o AUTO deixa de ser uma segunda fileira por célula — vira um
 * selo sobreposto no canto do medalhão.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-height: 520px) {
  html[data-rpgw='habilidades'] .panel.skills {
    gap: calc(6px * var(--rpg-un, 1));
    padding: calc(8px * var(--rpg-un, 1));
  }
  html[data-rpgw='habilidades'] .panel.skills .skills__header[data-abi-cab] {
    min-height: calc(22px * var(--rpg-un, 1));
    padding-bottom: calc(5px * var(--rpg-un, 1));
  }
  html[data-rpgw='habilidades'] .panel.skills .skills__build {
    gap: calc(5px * var(--rpg-un, 1));
    padding: calc(6px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  }
  /* "toque o ícone pra remover · AUTO lança sozinha…" é ajuda, não dado —
     a primeira que cede espaço quando a tela é baixa. */
  html[data-rpgw='habilidades'] .panel.skills .skills__hint {
    display: none;
  }
  /* O AUTO deixa a própria fileira da célula e vira selo sobre o canto do
     medalhão — continua clicável (é o MESMO `<button>`, só a posição muda),
     só não paga mais uma linha inteira de altura por slot. O texto "⚡ AUTO"
     do bundle é UM nó só (não dá pra esconder só a palavra sem tocar o DOM
     do React) — `font-size: 0` apaga o texto e o `::before` desenha o selo. */
  /* 🚨 `.loadout__cell` é a COLUNA do grid (1fr, bem mais larga que o
     medalhão pequeno lá dentro) — `position:absolute` nele ancora no canto
     da COLUNA, não no canto do slot, e o selo nasce longe do ícone, boiando
     no vão entre uma célula e outra. `width: fit-content` encolhe a célula
     pro tamanho do slot; `margin: 0 auto` centraliza essa célula estreita
     dentro da coluna larga — agora canto da célula = canto do slot. */
  html[data-rpgw='habilidades'] .panel.skills .loadout__cell {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    gap: 0;
  }
  /* 🚨 O selo AUTO nasce no canto inferior-direito (regra abaixo) — o MESMO
     canto onde a regra de base (seção 3) põe a pílula `Lv N`. Medido ao vivo:
     6×6px dos dois se sobrepunham, o "4" de "Lv 4" ficava atrás do selo.
     Aqui, só nesta faixa estreita, a pílula muda pro canto inferior-ESQUERDO
     (livre) — a mesma folga que ela tinha antes de a seção 3 movê-la pra
     direita. */
  html[data-rpgw='habilidades'] .panel.skills .loadout__level {
    right: auto;
    left: calc(3px * var(--rpg-un, 1));
  }
  html[data-rpgw='habilidades'] .panel.skills .loadout__auto {
    position: absolute;
    right: calc(-3px * var(--rpg-un, 1));
    bottom: calc(-3px * var(--rpg-un, 1));
    width: calc(16px * var(--rpg-un, 1));
    height: calc(16px * var(--rpg-un, 1));
    min-height: 0;
    padding: 0;
    border-radius: 999px;
    font-size: 0;
  }
  html[data-rpgw='habilidades'] .panel.skills .loadout__auto::before {
    content: '○';
    display: block;
    font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
    line-height: calc(15px * var(--rpg-un, 1));
    color: var(--rpg-tinta-3);
  }
  html[data-rpgw='habilidades'] .panel.skills .loadout__auto[aria-pressed='true']::before {
    content: '⚡';
    color: var(--rpg-bom);
  }

  /* ── a carta encolhe de CONTEÚDO, não só de respiro ──────────────────── */
  html[data-rpgw='habilidades'] .panel.skills .skills__filtro {
    min-height: calc(22px * var(--rpg-un, 1));
  }
  html[data-rpgw='habilidades'] .panel.skills .skills__colecao {
    padding: calc(3px * var(--rpg-un, 1));
  }
  /* Colunas mais largas (não mais estreitas): menos colunas por fileira,
     mais espaço por carta pro nome não precisar truncar tanto.
     🚨 mínimo de coluna subiu de 150 para 210 (× --rpg-un): medido ao vivo, o
     botão "Evoluir ⓜ 29.791" (o conteúdo mais largo do cartão) precisa de
     ~71 de largura de conteúdo — a 150 a carta tinha só ~65 de largura TOTAL
     e o texto do botão vazava ~15 para dentro do cartão vizinho (dois
     "Evoluir · preço" se misturando, ilegíveis os dois). A 210 sobra ~91 de
     coluna: cabe. */
  html[data-rpgw='habilidades'] .panel.skills .collection {
    grid-template-columns: repeat(auto-fill, minmax(calc(210px * var(--rpg-un, 1)), 1fr));
    gap: calc(6px * var(--rpg-un, 1));
  }
  html[data-rpgw='habilidades'] .panel.skills .skill-card {
    gap: calc(2px * var(--rpg-un, 1));
    padding: calc(6px * var(--rpg-un, 1)) calc(5px * var(--rpg-un, 1)) calc(5px * var(--rpg-un, 1));
  }
  html[data-rpgw='habilidades'] .panel.skills .skill-card__icon {
    width: calc(30px * var(--rpg-un, 1));
    height: calc(30px * var(--rpg-un, 1));
  }
  /* Raridade já está no aro — repetir a palavra custa uma linha inteira que
     esta faixa não tem. "ⓘ Detalhes" é ação secundária: cabe em tela cheia. */
  html[data-rpgw='habilidades'] .panel.skills .skill-card__rarity,
  html[data-rpgw='habilidades'] .panel.skills .skill-card__info {
    display: none;
  }
  /* Nome em 1 linha com reticências — 2 linhas não cabem no orçamento
     vertical desta faixa; o ícone + a cor do aro já ajudam a reconhecer. */
  html[data-rpgw='habilidades'] .panel.skills .skill-card__name {
    display: block;
    min-height: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  }
  /* 🚨 `overflow: hidden` é a rede de segurança, não a correção — a correção
     é a coluna mais larga acima. Sem isto, qualquer preço um pouco maior que
     o medido (raide de habilidade nova, custo reajustado) volta a vazar por
     cima do cartão vizinho; com isto, na pior hipótese ele CORTA (perde um
     dígito), o que é sempre melhor que sobrepor dois cartões diferentes. */
  html[data-rpgw='habilidades'] .panel.skills .skill-card__evolve {
    min-height: calc(20px * var(--rpg-un, 1));
    width: 100%;
    overflow: hidden;
  }
  /* 🚨 O cartão aqui é bem estreito — "EQUIPADA" na fonte legível da seção
     anterior fica larga o bastante pra cobrir a pílula `Lv N` do canto
     oposto (medido ao vivo: as duas se sobrepunham de ponta a ponta).
     Mesmo truque do AUTO: apaga o texto original (`font-size:0`) e desenha
     a sigla pelo `::before` — cabe ao lado da pílula sem tampar ela. */
  html[data-rpgw='habilidades'] .panel.skills .skill-card__flag {
    font-size: 0;
    text-align: center;
  }
  html[data-rpgw='habilidades'] .panel.skills .skill-card__flag::before {
    content: 'EQ';
    font-size: clamp(9px, calc(9px * var(--rpg-un, 1)), 10px);
  }
  html[data-rpgw='habilidades'] .panel.skills .skill-card__flag--pronta::before {
    content: 'OK';
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 7. A FICHA DA HABILIDADE (27/08) — a metade esquerda da referência
 *
 * `habilidades.js` monta o conteúdo a partir do `skillCatalog` do servidor.
 * Aqui só o desenho: um poço com a carta grande em cima, a descrição, os
 * atributos em linhas de rótulo→valor e o custo de evoluir no rodapé.
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='habilidades'] .hab-ficha {
  display: flex;
  flex-direction: column;
  /* 🚨 Gap curto de propósito: com 8px × 5 blocos a soma dava exatamente a
     sobra da caixa e o botão "Evoluir" — o único da ficha — nascia cortado
     rente à borda de baixo. */
  gap: calc(6px * var(--rpg-un, 1));
  padding: calc(10px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  /* O aro leva a cor da raridade da habilidade em foco — é o que faz a ficha
     "trocar de humor" junto com a carta escolhida, como na referência. */
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) color-mix(in srgb, var(--rarity, var(--rpg-aro)) 45%, transparent),
    inset 0 calc(2px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1)) #0008;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: #8a7255 #100a05;
}

/* ── carta grande + identidade ─────────────────────────────────────── */

html[data-rpgw='habilidades'] .hab-ficha__topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(12px * var(--rpg-un, 1));
  align-items: start;
}

/* A moldura de grau é a MESMA arte que a coleção usa (`--skill-grade`), então
   a carta da ficha se lê como a carta que foi clicada, só maior. */
/* 🚨 CARTA EM RETRATO, e grande. Na referência ela é o segundo elemento mais
   pesado da tela depois da coleção — um retângulo alto que dá cara à ficha.
   Quadrada e pequena (o primeiro corte), a ficha lia como um tooltip crescido:
   sobrava um vão morto embaixo e nada dizia "esta é a habilidade escolhida". */
html[data-rpgw='habilidades'] .hab-ficha__arte {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(64px, calc(108px * var(--rpg-un, 1)), 128px);
  aspect-ratio: 3 / 4;
  border-radius: calc(10px * var(--rpg-un, 1));
  background:
    var(--skill-grade) center / 100% 100% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--rarity, var(--rpg-aro)) 26%, var(--rpg-poço)) 0%, var(--rpg-poço) 100%);
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) var(--rarity, var(--rpg-aro));
}
html[data-rpgw='habilidades'] .hab-ficha__icone {
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 calc(2px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1)) #000a);
}
html[data-rpgw='habilidades'] .hab-ficha__nivel {
  position: absolute;
  left: calc(4px * var(--rpg-un, 1));
  top: calc(4px * var(--rpg-un, 1));
  padding: 0 calc(5px * var(--rpg-un, 1));
  border-radius: calc(5px * var(--rpg-un, 1));
  background: #100a05cc;
  color: var(--rpg-tinta);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 13px);
  font-weight: 800;
}

html[data-rpgw='habilidades'] .hab-ficha__nome {
  margin: 0;
  color: var(--rpg-ouro);
  font-family: var(--rpg-fonte-titulo, inherit);
  font-size: clamp(13px, calc(20px * var(--rpg-un, 1)), 26px);
  font-weight: 800;
  /* caixa alta como no molde — é o que dá peso de "título da ficha" */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
html[data-rpgw='habilidades'] .hab-ficha__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(5px * var(--rpg-un, 1));
  margin: calc(5px * var(--rpg-un, 1)) 0;
}
html[data-rpgw='habilidades'] .hab-ficha__tag {
  padding: calc(1px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1));
  border-radius: 999px;
  background: var(--rpg-poço);
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff1f;
  color: var(--rpg-tinta-2);
  font-size: clamp(8px, calc(10px * var(--rpg-un, 1)), 12px);
  font-weight: 800;
  letter-spacing: 0.08em;
}
/* A raridade é informação do jogo: leva a cor dela, como nas casas da bolsa.
   🚨 O FALLBACK É TOKEN, não hex: `var(--rarity, #cfd8e3)` fazia o inspetor
   acusar cor fora da paleta na própria folha (a régua lê o texto do CSS, não
   só o que pinta na tela) — e um hex solto aqui seria mesmo a porta de entrada
   para o tema antigo voltar por descuido. */
html[data-rpgw='habilidades'] .hab-ficha__tag--rar {
  background: color-mix(in srgb, var(--rarity, var(--rpg-aro)) 22%, var(--rpg-poço));
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) var(--rarity, var(--rpg-aro));
  color: var(--rarity, var(--rpg-tinta));
}
html[data-rpgw='habilidades'] .hab-ficha__desc {
  margin: 0;
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15px);
  line-height: 1.4;
}

/* ── atributos: rótulo à esquerda, valor à direita ─────────────────── */

html[data-rpgw='habilidades'] .hab-ficha__lista {
  display: grid;
  gap: calc(2px * var(--rpg-un, 1));
  padding: calc(8px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
  background: var(--rpg-poço);
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14;
}
html[data-rpgw='habilidades'] .hab-ficha__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(10px * var(--rpg-un, 1));
  padding: calc(3px * var(--rpg-un, 1)) 0;
}
html[data-rpgw='habilidades'] .hab-ficha__linha + .hab-ficha__linha {
  border-top: calc(1px * var(--rpg-un, 1)) solid #ffffff0f;
}
html[data-rpgw='habilidades'] .hab-ficha__rot {
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 13px);
}
html[data-rpgw='habilidades'] .hab-ficha__val {
  color: var(--rpg-tinta);
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 14px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── progresso e próximo nível ─────────────────────────────────────── */

html[data-rpgw='habilidades'] .hab-ficha__prog {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--rpg-un, 1));
}
html[data-rpgw='habilidades'] .hab-ficha__trilho {
  flex: 1 1 auto;
  height: calc(6px * var(--rpg-un, 1));
  border-radius: 999px;
  background: #ffffff14;
  overflow: hidden;
}
html[data-rpgw='habilidades'] .hab-ficha__trilho i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rarity, var(--rpg-aro)) 70%, #fff), var(--rarity, var(--rpg-aro)));
}
html[data-rpgw='habilidades'] .hab-ficha__conta {
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 13px);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html[data-rpgw='habilidades'] .hab-ficha__prox {
  margin: 0;
  color: var(--rpg-tinta-3);
  font-size: clamp(8px, calc(11px * var(--rpg-un, 1)), 13px);
  line-height: 1.35;
}
html[data-rpgw='habilidades'] .hab-ficha__prox span {
  color: var(--rpg-ouro);
  font-weight: 700;
}

/* ── evoluir: o verbo desta janela ─────────────────────────────────── */

html[data-rpgw='habilidades'] .hab-ficha__evoluir {
  margin-top: auto;
  min-height: clamp(24px, calc(34px * var(--rpg-un, 1)), 40px);
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%);
  box-shadow:
    inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a8,
    0 calc(2px * var(--rpg-un, 1)) calc(5px * var(--rpg-un, 1)) #0008;
  color: #2a1200;
  font-family: inherit;
  font-size: clamp(10px, calc(14px * var(--rpg-un, 1)), 16px);
  font-weight: 800;
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #ffd58a;
  paint-order: stroke fill;
  cursor: pointer;
}
html[data-rpgw='habilidades'] .hab-ficha__evoluir:hover:not(:disabled) {
  filter: brightness(1.12);
}
html[data-rpgw='habilidades'] .hab-ficha__evoluir:disabled {
  filter: grayscale(0.85) brightness(0.7);
  cursor: not-allowed;
}


/* ── A ORDEM DA BUILD NA CARA (31/08/2026, pedido do Zerg #1333/#1334) ──────
   Número 1-5 em cada slot (contador CSS — nenhum nó novo na árvore do React) e
   uma linha, abaixo do "toque o ícone pra remover", dizendo o que o motor FAZ:
   o laço do automático (bundle, $1) percorre o loadout NA ORDEM e tenta sempre
   o primeiro ⚡ AUTO fora de recarga — o slot 1 é a prioridade. Conferido no
   código antes de escrever aqui. Slot vazio também é numerado: a posição é o
   que importa. */
html[data-rpgw='habilidades'] .panel.skills .loadout {
  counter-reset: fila;
}
html[data-rpgw='habilidades'] .panel.skills .loadout__cell {
  position: relative;
  counter-increment: fila;
}
html[data-rpgw='habilidades'] .panel.skills .loadout__cell::after {
  content: counter(fila);
  position: absolute;
  top: calc(-6px * var(--rpg-un, 1));
  left: calc(-6px * var(--rpg-un, 1));
  z-index: 2;
  min-width: calc(17px * var(--rpg-un, 1));
  height: calc(17px * var(--rpg-un, 1));
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd979, #e0a52e);
  color: #1b1205;
  font: 700 clamp(9px, calc(11px * var(--rpg-un, 1)), 12px) / calc(17px * var(--rpg-un, 1)) 'Baloo 2', system-ui, sans-serif;
  text-align: center;
  box-shadow: 0 0 0 calc(1.5px * var(--rpg-un, 1)) #1b1205;
  pointer-events: none;
}
html[data-rpgw='habilidades'] .panel.skills .skills__hint::after {
  content: 'No automático elas saem na ordem dos números: a 1 tem prioridade, a próxima só sai enquanto a anterior recarrega.';
  display: block;
  margin-top: calc(2px * var(--rpg-un, 1));
  color: var(--rpg-ouro);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 12px);
  line-height: 1.3;
}

/* No celular deitado a media de cima esconde o `.skills__hint` inteiro — mas a
   ORDEM é dado, não ajuda: o hint volta com o texto do bundle apagado
   (font-size 0) e só a linha da ordem (o ::after acima, com fonte própria)
   ocupando uma linha curta. */
@media (max-height: 520px) {
  html[data-rpgw='habilidades'] .panel.skills .skills__hint {
    display: block;
    font-size: 0;
  }
}