/*
 * JANELA — Talentos
 *
 * Já é um overlay PRÓPRIO (shim de ~2500 linhas em `www/talentos/`, com céu e
 * constelação em SVG). O trabalho aqui NÃO é redesenhar a trilha nem a
 * constelação — é alinhar cor, fonte, escala e moldura ao contrato, e corrigir
 * o que sobrou com a cara antiga.
 *
 * ── COMO ESCREVER AQUI ────────────────────────────────────────────────
 * · prefixo obrigatório `html[data-rpgw='talentos']` — o `html` é o que ganha
 *   das folhas do jogo e do tema-azul, que usam `html[data-…]`;
 * · toda medida em `calc(Npx * var(--rpg-un, 1))`;
 * · cor só dos tokens (`--rpg-tinta`, `--rpg-ouro`, …) — ver CONTRATO.md;
 * · o kit já remapeou os tokens do jogo (`--text`, `--gold`, `--sp-*`,
 *   `--fs-*`) dentro do painel: boa parte já vem certa, o trabalho aqui é
 *   LAYOUT e as peças que ainda estiverem com a cara antiga.
 *
 * Validar com:
 *   node ferramentas/foto.mjs talentos
 *   node ferramentas/inspetor-janela.mjs talentos
 */

/* ═══════════════════════════════════════════════════════════════════════
 * 0. O COLAPSO EM TELA BAIXA — a causa, achada com a régua na mão
 * ═══════════════════════════════════════════════════════════════════════
 *
 * 🚨 `.rpgw-conteudo` (janela.css) bate `display: block !important` em cima
 * do `display: grid` que `.tal-overlay` usa para empilhar cabeçalho / corpo /
 * rodapé em três LINHAS (`grid-template-rows: auto 1fr auto`). No desktop
 * isso "funciona por acidente": a trilha de categorias é alta o bastante para
 * dar altura à linha do corpo, e o palco (que estica por `align-self` de
 * grade) pega carona nela. Em 844×390 o corpo vira COLUNA ÚNICA
 * (`grid-template-columns: 1fr` da media query do próprio jogo) e a trilha
 * fica STREET LEVEL, a constelação fica na segunda linha (`1fr`) — mas sem o
 * `display: grid` do pai não existe fração de nada para repartir, e o palco
 * mede 0×0. A constelação simplesmente não aparecia.
 *
 * Restaurar o `display: grid` (mesma especificidade do kit, carregado depois
 * — quem ganha o empate é a ordem) devolve ao próprio `.tal-overlay` o
 * layout que ele já sabia fazer. Medido: `.tal-palco` foi de 0px para 91px de
 * altura em 844×390, sem tocar em nenhuma outra regra do jogo.
 */
html[data-rpgw='talentos'] .tal-overlay {
  display: grid !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 1. O CABEÇALHO DUPLICADO
 * ═══════════════════════════════════════════════════════════════════════
 *
 * `.tal-overlay` já TRAZ o próprio cabeçalho (`.tal-topo`: brasão, título
 * "Talentos", pílula de ouro, X) — o mesmo par ícone+título+fechar que o
 * CHROME do kit já desenha em cima dele. Em 844×390 as DUAS faixas juntas
 * comiam a maior fatia dos 390px de altura disponíveis; no desktop ficava
 * "só" feio (duas legendas para a mesma janela, dois X que fecham a mesma
 * coisa). Mesmo remédio do Correio e do Ranking: o ícone e o X saem (o
 * chrome já tem os dois); o que sobra de NOVO — o saldo de ouro — fica.
 */
html[data-rpgw='talentos'] .tal-topo__marca,
html[data-rpgw='talentos'] .tal-titulo,
html[data-rpgw='talentos'] .tal-fechar {
  display: none !important;
}
html[data-rpgw='talentos'] .tal-topo {
  padding: calc(8px * var(--rpg-un, 1)) calc(14px * var(--rpg-un, 1));
  border-bottom: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  background: none;
  backdrop-filter: none;
}
/* A pílula de ouro é a única coisa nova desta faixa — vira a mesma peça
   `.rpg-pill--ouro` do kit (poço translúcido, aro de vidro, moeda saindo
   pela borda) em vez do retângulo âmbar do desenho antigo. */
html[data-rpgw='talentos'] .tal-ouro {
  padding: 0 calc(12px * var(--rpg-un, 1)) 0 calc(8px * var(--rpg-un, 1));
  height: calc(26px * var(--rpg-un, 1));
  border: none;
  border-radius: 999px;
  /* CORRIGIDO (identidade madeira+bronze, 13/09): era #0c0e12 (poço quase-
     preto com leve viés azul) — mesma família de tom usada no resto do
     jogo, `#100a05` (viés madeira). */
  background: #100a05cc;
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff24;
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
  color: var(--rpg-tinta);
}
html[data-rpgw='talentos'] .tal-ouro img {
  width: calc(18px * var(--rpg-un, 1));
  height: calc(18px * var(--rpg-un, 1));
  margin-left: calc(-18px * var(--rpg-un, 1));
}

/* O botão de recolher a barra de habilidade/atalhos (`www/recolher/`) é
   posicionado em coordenada absoluta da CENA de combate — com a janela
   ocupando a tela inteira ele continua vivo por baixo e, num acidente de
   z-index da própria cena, pousa por cima da trilha (visto sobre o pino de
   "VIP"). Aqui o combate é fundo, não assunto (mesma regra do §3 do kit para
   avisos de chefe). */
html[data-rpgw='talentos'] .recolher {
  display: none !important;
}
/* `#vip-painel` (`www/vipicone/`) é um popup à parte, filho direto do
   `<body>`, aberto pelo atalho de VIP da CENA — se o jogador o abre e depois
   troca para a aba Talentos sem fechá-lo, ele continua de pé, sem o
   remapeamento do kit (não é a janela ativa), flutuando por cima da
   constelação com a fonte e a cor do tema antigo. */
html[data-rpgw='talentos'] #vip-painel {
  display: none !important;
}
/* `.scene__boss` ("Chefe a seguir") é `position:fixed` da CENA, `z-index:45`
   contra os 44 do chrome — pousa em cima do cabeçalho da janela em qualquer
   resolução (medido no centro do título "Talentos"). Mesma família de bug do
   `.recolher`/`#vip-painel` acima: o combate continua vivo atrás da janela e
   não pode pintar por cima dela. */
html[data-rpgw='talentos'] .scene__boss {
  display: none !important;
}

/* 🚨 ATUALIZADO 31/08/2026 — os rótulos da constelação viraram HTML.
   Até aqui eram `<text>` de SVG cujo `font-size` vinha em unidade de
   VIEWBOX (escalava com o desenho inteiro, não com a tela — por isso um
   piso de leitura em 844×390 era impossível de garantir por CSS, e o
   contorno abaixo usava número puro em vez de `--rpg-un`). Agora
   (`.tal-rot__nome`/`.tal-rot__nivel`/`.tal-rot-nucleo__*`, em
   `www/talentos/constelacao.js`) são texto HTML de verdade, com
   `font-size: clamp(piso, …, teto)` na folha base — o piso já é real, e o
   contorno aqui volta a usar `--rpg-un` como o resto do kit (§5 do
   CONTRATO), fino de propósito para não virar mancha sobre um corpo que
   ainda é pequeno nas pastilhas mais apertadas (10 galhos, 844×390). */
html[data-rpgw='talentos'] .tal-rot__nome,
html[data-rpgw='talentos'] .tal-rot-nucleo__titulo,
html[data-rpgw='talentos'] .tal-rot-nucleo__num {
  paint-order: stroke fill;
  -webkit-text-stroke: calc(1px * var(--rpg-un, 1)) #0a0603;
}
html[data-rpgw='talentos'] .tal-rot__nivel {
  paint-order: stroke fill;
  -webkit-text-stroke: calc(0.8px * var(--rpg-un, 1)) #0a0603;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. TRILHA DE CATEGORIAS — mesmo desenho, cor do contrato
 * ═══════════════════════════════════════════════════════════════════════
 * Layout intocado (não é para refazer a trilha): só a cor sai do laranja
 * cravado do tema antigo para os tokens do contrato.
 */
html[data-rpgw='talentos'] .tal-trilha {
  border-right-color: color-mix(in srgb, var(--rpg-aro) 55%, transparent);
  background: linear-gradient(90deg, #0a0603d9, transparent);
}
html[data-rpgw='talentos'] .tal-trilha__item[aria-pressed='true'] {
  border-color: color-mix(in srgb, var(--rpg-aro-ouro) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rpg-ouro) 18%, transparent), transparent);
}
/* O pino de cada categoria vem com `color` INLINE (a cor da categoria, em
   `www/talentos/tela.js` — fora do escopo desta folha). VIP e Deusa usavam um
   laranja/roxo cravados a uns 15 pontos de RGB do token mais perto: perto
   demais para o olho notar, longe demais para a paleta do contrato. `!important`
   é o único jeito de vencer um `style=""`; Isekai já usa `#a855f7`, que já É um
   token semântico de atributo, e fica como está. */
html[data-rpgw='talentos'] .tal-trilha__item[data-cat='vip'] .tal-trilha__pino {
  color: var(--rpg-ouro) !important;
}
html[data-rpgw='talentos'] .tal-trilha__item[data-cat='deusa'] .tal-trilha__pino {
  color: var(--rpg-roxo) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 3. OS CARTÕES DO RODAPÉ — o mesmo poço do `.rpg-caixa`
 * ═══════════════════════════════════════════════════════════════════════
 */
html[data-rpgw='talentos'] .tal-cartao {
  /* CORRIGIDO (identidade madeira+bronze, 13/09): o poço do cartão era
     azul-petróleo (#08131f→#050b14) — mesma escala de 3 tons madeira do
     resto do jogo (#241609→#1c1108→#100a05), aqui só os 2 tons escuros. */
  background: linear-gradient(180deg, #1c1108 0%, #100a05 100%);
  border-color: var(--rpg-aro);
}
html[data-rpgw='talentos'] .tal-cartao--detalhe {
  border-color: color-mix(in srgb, var(--cor, var(--rpg-aro-ouro)) 45%, var(--rpg-aro));
}
/* O painel de foco (31/08/2026, `www/talentos/styles.css`) ganhou um fio à
   esquerda na cor do galho selecionado, para se ligar visualmente à
   pastilha que o jogador acabou de clicar na constelação. `border-color`
   acima é um atalho para os QUATRO lados — sem isto o lado esquerdo perdia
   a cor de novo, voltando ao aro neutro (a regra mais específica, `html[…]
   …`, ganha da folha base em qualquer ordem de carregamento). */
html[data-rpgw='talentos'] .tal-cartao--detalhe {
  border-left-width: calc(3px * var(--rpg-un, 1));
  border-left-color: var(--cor, var(--rpg-aro-ouro));
}

/* Um dourado por tela (§7 do contrato): o botão que sobe o próximo nível do
   talento (`.tal-comprar`) já nasce dourado pelos tokens do jogo — é ele que
   fica com a cor. "Coletar" (produção offline) é a segunda ação sempre
   visível ao lado; com os dois dourados nenhum dos dois destacava. Vira a
   mesma peça azul do `.rpg-btn`. */
/*
 * CORRIGIDO (identidade madeira+bronze, 13/09): a peça era a mesma azul de
 * `.rpg-btn` (kit compartilhado, fora de escopo desta tela — ver relatório
 * ao Zerg). Mantive a REGRA do comentário acima ("um dourado por tela" —
 * Coletar não pode competir com `.tal-comprar`): troquei só a FAMÍLIA de
 * cor, de azul pra um bronze/pewter apagado — continua claramente
 * secundário ao lado do dourado vivo, mas dentro da paleta do jogo.
 */
html[data-rpgw='talentos'] .tal-coletar {
  background: linear-gradient(180deg, #6b5a3f 0%, #3f3120 100%) !important;
  box-shadow:
    inset 0 calc(1px * var(--rpg-un, 1)) 0 #9c8a6c,
    0 calc(2px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1)) #0007 !important;
  color: var(--rpg-tinta) !important;
}
html[data-rpgw='talentos'] .tal-coletar:disabled {
  background: linear-gradient(180deg, #241609 0%, #100a05 100%) !important;
  box-shadow: none !important;
  color: #6f6249 !important;
}

/* 🚨 A peça mais visível da tela saía em `Cinzel, Georgia, serif` (a fonte
   serifada do desenho antigo) sem contorno nenhum — nem `.tal-comprar` nem
   `.tal-coletar` tinham regra própria de fonte aqui, então quem mandava era o
   `<button>` global do jogo. Ambos voltam para a HUD16 do kit, com o mesmo
   contorno da peça equivalente (`.rpg-btn--ouro`/`.rpg-btn`). */
html[data-rpgw='talentos'] .tal-comprar,
html[data-rpgw='talentos'] .tal-coletar {
  font-family: 'Baloo 2', system-ui, sans-serif !important;
  paint-order: stroke fill;
}
html[data-rpgw='talentos'] .tal-comprar {
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #ffd58a;
}
html[data-rpgw='talentos'] .tal-coletar {
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #1c1108 !important;
}

/* Mesma regra na tela de VIP travado: o convite para comprar VIP já é a
   única ação dourada da tela (é ELE que fecha negócio ali) — o botão de
   comprar nível de um talento, ao lado dele no rodapé, vira fantasma para
   não competir. */
html[data-rpgw='talentos'] .tal-overlay:has(.tal-vip__convite) [data-papel='detalhe'] .tal-comprar {
  background: linear-gradient(180deg, #241609 0%, #100a05 100%) !important;
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffffff1f !important;
  color: var(--rpg-tinta) !important;
}

/* ── o reset de pontos (Isekai): botão de perigo discreto ────────────── */
/* 🚨 Alvo de toque (achado #391): em 844×390 (`--rpg-un` 0,54) o padding
   escalado sobrava 28px de altura — mesmo caso do `.tal-trilha__item`
   acima. `min-height` cravado (piso de acessibilidade, não medida de
   desenho) garante o piso nas telas pequenas sem mexer no padding, que já
   está certo no desktop. */
html[data-rpgw='talentos'] .isk-reset {
  top: calc(8px * var(--rpg-un, 1));
  right: calc(8px * var(--rpg-un, 1));
  padding: calc(5px * var(--rpg-un, 1)) calc(12px * var(--rpg-un, 1));
  min-height: 33px;
  border-color: var(--rpg-aro);
  background: #0a0603cc;
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
}
html[data-rpgw='talentos'] .isk-reset:hover:not(:disabled) {
  border-color: var(--rpg-perigo);
  background: color-mix(in srgb, var(--rpg-perigo) 14%, #0a0603);
  color: var(--rpg-tinta);
}
html[data-rpgw='talentos'] .isk-reset__t {
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
}
html[data-rpgw='talentos'] .isk-reset__c {
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
}
html[data-rpgw='talentos'] .isk-saldo {
  color: var(--rpg-roxo);
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
}
html[data-rpgw='talentos'] .isk-saldo b {
  font-size: clamp(10.5px, calc(19px * var(--rpg-un, 1)), 24.5px);
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #1b0d2b;
  paint-order: stroke fill;
}
html[data-rpgw='talentos'] .isk-saldo span {
  color: var(--rpg-tinta-3);
}
/* O rótulo "5 livres de 25 conquistados" nascia CENTRALIZADO por um wrapper
   do jogo (`.isk-saldo-caixa{justify-items:center}`) que também segura o
   botão de reset — dentro de um cartão com corpo alinhado à esquerda, ele
   flutuava solto no meio, sem se ligar a nada. Alinhado à esquerda ele lê
   como parte do cartão, não como legenda perdida. */
html[data-rpgw='talentos'] .isk-saldo-caixa {
  justify-items: start;
}

/* O rodapé da constelação (VIP/Isekai/Deusa) sobra ~55% de fundo liso numa
   coluna de altura fixa quando tem só 3 pinos — centralizar verticalmente
   distribui o vazio nas duas pontas em vez de empilhar tudo no topo. */
html[data-rpgw='talentos'] .tal-trilha {
  justify-content: center;
}
/* O cartão de detalhe SEM talento escolhido ("Pontos de Isekai") também
   sobra fundo embaixo do texto — `.tal-comprar` (quando existe) usa
   `margin-top:auto` para empurrar o botão ao fundo, e esse auto-margin
   consome sozinho todo o espaço livre da coluna flex; `justify-content`
   só entra em ação quando ele NÃO existe, isto é, exatamente no estado
   vazio — o cartão com botão não muda nada. */
html[data-rpgw='talentos'] .tal-cartao--detalhe {
  justify-content: center;
}

/* Contorno + `paint-order` (§5 do contrato) nas peças de CONTEÚDO que ainda
   saíam lisas: o nome do talento no cartão e o saldo de ouro do topo — as
   duas peças de texto mais olhadas da tela. Texto de apoio (descrição,
   rótulos pequenos) fica sem contorno de propósito: grosso demais em texto
   corrido vira borrão, como o próprio contrato avisa. */
html[data-rpgw='talentos'] .tal-cartao__nome {
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
html[data-rpgw='talentos'] .tal-ouro {
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #1c1108;
  paint-order: stroke fill;
}

/* O salto de valor (`.tal-salto__de → .tal-salto__para`) herdava `--cor` da
   ÁRVORE selecionada — que para o galho "Ataque" é um vermelho (`#e5484d`,
   cor de identidade do dano, igual à de atributos em toda a UI). O valor
   MELHOR (`__para`) saía num salmão claro dessa mistura enquanto o valor
   ATUAL (`__de`) ficava num azul-acinzentado neutro: lido de longe,
   "+6% → +7,5%" parecia piora. Aqui o "melhor" é sempre o dourado de
   destaque do contrato e o "atual" é sempre o apagado — vale para as 10
   árvores, não só para as que não caem em vermelho. */
html[data-rpgw='talentos'] .tal-salto__para {
  color: var(--rpg-ouro) !important;
  text-shadow: 0 0 calc(14px * var(--rpg-un, 1)) color-mix(in srgb, var(--rpg-ouro) 55%, transparent) !important;
}
html[data-rpgw='talentos'] .tal-salto__de {
  color: var(--rpg-tinta-3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4. O CONVITE DE VIP — a constelação apagada, com o poço do contrato
 * ═══════════════════════════════════════════════════════════════════════
 */
html[data-rpgw='talentos'] .tal-vip__convite {
  border-color: var(--rpg-aro-ouro);
  background: linear-gradient(180deg, #1c1108 0%, #100a05 100%);
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14,
    0 calc(18px * var(--rpg-un, 1)) calc(40px * var(--rpg-un, 1)) #000a;
}
html[data-rpgw='talentos'] .tal-vip__btn {
  border-color: var(--rpg-aro-ouro);
  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;
}
html[data-rpgw='talentos'] .tal-vip__btn:hover {
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%);
  filter: brightness(1.1);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. A TELA DA DEUSA — mesma cena, poço e roxo do contrato
 * ═══════════════════════════════════════════════════════════════════════
 * `--rpg-roxo` já é o token de identidade/título; é a cor certa para a aba
 * que é, ela mesma, roxa na trilha ao lado.
 */
html[data-rpgw='talentos'] .deusa-summon__tipo {
  border-color: var(--rpg-aro);
  background: #140d08;
  color: var(--rpg-tinta);
}
html[data-rpgw='talentos'] .deusa-summon__tipo b {
  color: var(--rpg-ouro);
}
html[data-rpgw='talentos'] .deusa-summon__tipo[aria-pressed='true'] {
  border-color: var(--rpg-roxo);
  background: color-mix(in srgb, var(--rpg-roxo) 16%, #140d08);
}
html[data-rpgw='talentos'] .deusa-summon__tipo:hover {
  border-color: color-mix(in srgb, var(--rpg-roxo) 60%, var(--rpg-aro));
}
html[data-rpgw='talentos'] .deusa-summon__ir {
  background: linear-gradient(180deg, color-mix(in srgb, var(--rpg-roxo) 55%, #fff), var(--rpg-roxo));
  color: #1b0d2b;
}
html[data-rpgw='talentos'] .deusa-summon__saida {
  color: var(--rpg-tinta-2);
}
html[data-rpgw='talentos'] .deusa-summon__relacao {
  border-color: var(--rpg-aro);
  background: #0a0603cc;
}
html[data-rpgw='talentos'] .deusa-summon__rot,
html[data-rpgw='talentos'] .deusa-summon__afin {
  color: var(--rpg-tinta-3);
}
html[data-rpgw='talentos'] .deusa-summon__nivel {
  color: var(--rpg-ouro);
}
html[data-rpgw='talentos'] .deusa-summon__nivel i {
  color: var(--rpg-tinta-3);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 6. CELULAR DEITADO — texto que nasceu pequeno demais para ler
 * ═══════════════════════════════════════════════════════════════════════
 *
 * 🚨 Mesma lição 9-bis #7 do Correio: em 844×390 `--rpg-un` cai para ~0,41, e
 * todo `N * un` do CSS do JOGO (que usa `--fs-300` etc. do remapeamento do
 * kit) encolhe JUNTO — o parágrafo do cartão de detalhe nascia com ~5px de
 * corpo. Os coeficientes aqui são deliberadamente MAIORES: a régua não é
 * "bate com o desktop", é "dá para ler no celular". A trilha, que empilha
 * horizontal nesta largura (regra do próprio jogo), também perde o respiro
 * de sobra — é ele que faltava para o palco ter altura de verdade.
 */
@media (max-height: 460px) {
  html[data-rpgw='talentos'] .tal-topo {
    padding: calc(2px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  }
  /* 🚨 A pílula de ouro é a ÚNICA coisa nova que sobrou nesta faixa (o resto
     do cabeçalho já foi escondido no §1) — e mesmo assim nascia presa num
     corpo fixo (a regra de base lá em cima) que nunca entrava nesta media
     query: em celular deitado, com a escala do palco bem menor que no
     desktop, o saldo saía como um borrão, não como um número. Cresce junto
     com o resto do texto da tela. */
  html[data-rpgw='talentos'] .tal-ouro {
    height: calc(30px * var(--rpg-un, 1));
    font-size: clamp(11px, calc(20px * var(--rpg-un, 1)), 26px);
  }
  html[data-rpgw='talentos'] .tal-ouro img {
    width: calc(22px * var(--rpg-un, 1));
    height: calc(22px * var(--rpg-un, 1));
    margin-left: calc(-22px * var(--rpg-un, 1));
  }
  html[data-rpgw='talentos'] .tal-trilha {
    padding: calc(3px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1));
  }
  /* 🚨 Alvo de toque (achado #391): o padding acima, escalado por `--rpg-un`
     (0,54 em 844×390), sobrava 15px de altura — menos da metade do piso de
     32px de toque no celular. `min-height` não é "medida de desenho": é
     piso de acessibilidade, por isso fica cravado (mesmo precedente de
     `.tal-rot` em `www/talentos/styles.css`, que usa 33 e não 32 de
     propósito — bem no limite a régua reprova por arredondamento). */
  html[data-rpgw='talentos'] .tal-trilha__item {
    padding: calc(3px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1));
    gap: calc(4px * var(--rpg-un, 1));
    min-height: 33px;
  }
  html[data-rpgw='talentos'] .tal-trilha__item span:last-child {
    font-size: clamp(10px, calc(18px * var(--rpg-un, 1)), 23.5px);
  }
  html[data-rpgw='talentos'] .tal-trilha__pino {
    width: calc(14px * var(--rpg-un, 1));
    height: calc(14px * var(--rpg-un, 1));
  }
  html[data-rpgw='talentos'] .tal-cartao {
    padding: calc(7px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1));
    gap: calc(2px * var(--rpg-un, 1));
  }
  html[data-rpgw='talentos'] .tal-cartao__nome {
    font-size: clamp(12px, calc(22px * var(--rpg-un, 1)), 28.5px);
  }
  html[data-rpgw='talentos'] .tal-cartao__selo,
  html[data-rpgw='talentos'] .isk-reset,
  html[data-rpgw='talentos'] .isk-reset__c {
    font-size: clamp(10px, calc(18px * var(--rpg-un, 1)), 23.5px);
  }
  /* 🚨 `.isk-reset__t` (o RÓTULO "Resetar Todos os Pontos") ficava de fora
     deste bloco — só `.isk-reset` (a peça-mãe, que não tem texto direto) e
     `.isk-reset__c` (o CUSTO) cresciam. O filho com `font-size` próprio não
     herda o bump do pai, e o resultado invertia a hierarquia: o custo saía
     maior que o nome da ação. */
  html[data-rpgw='talentos'] .isk-reset__t {
    font-size: clamp(10.5px, calc(19px * var(--rpg-un, 1)), 24.5px);
  }
  html[data-rpgw='talentos'] .isk-saldo,
  html[data-rpgw='talentos'] .isk-saldo span,
  html[data-rpgw='talentos'] .tal-offline__rotulo {
    font-size: clamp(11px, calc(20px * var(--rpg-un, 1)), 26px);
  }
  /* A descrição do talento (`.tal-cartao__texto`) é o parágrafo mais alto do
     cartão — com produção offline acumulada os dois cartões empilham na
     mesma coluna curta, e é aqui que sobra menos altura. Uma linha (com o
     mesmo corpo grande de leitura, não menor) ainda dá o gancho do que o
     talento faz; quem quer o texto inteiro consulta sem produção pendente,
     onde o cartão tem a coluna só para ele. */
  html[data-rpgw='talentos'] .tal-cartao__texto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: clamp(11px, calc(20px * var(--rpg-un, 1)), 26px);
  }
  html[data-rpgw='talentos'] .isk-saldo b {
    font-size: clamp(15.5px, calc(28px * var(--rpg-un, 1)), 36.5px);
  }
  html[data-rpgw='talentos'] .tal-salto__de,
  html[data-rpgw='talentos'] .tal-salto__para,
  html[data-rpgw='talentos'] .tal-offline__valor {
    font-size: clamp(14.5px, calc(26px * var(--rpg-un, 1)), 34px);
  }
  html[data-rpgw='talentos'] .tal-comprar,
  html[data-rpgw='talentos'] .tal-coletar {
    font-size: clamp(12px, calc(22px * var(--rpg-un, 1)), 28.5px);
    min-height: calc(42px * var(--rpg-un, 1));
    padding: calc(6px * var(--rpg-un, 1)) calc(16px * var(--rpg-un, 1));
  }
  /* O cartão de offline é dispensável quando não há nada para coletar (dado
     `--tem` do próprio jogo) — abrir mão dele é o que sobra de altura para
     o cartão de detalhe (o que importa: o talento escolhido) respirar. */
  html[data-rpgw='talentos'] .tal-cartao--offline[data-tem='0'] {
    display: none;
  }
  /* Com produção acumulada os DOIS cartões empilham na mesma coluna — a nota
     explicativa (a regra do 25%/14h/abertura automática) é o parágrafo mais
     longo da tela inteira e o que menos falta nesta largura: o número
     (tempo/ouro/xp) e o botão Coletar já dizem o essencial. */
  html[data-rpgw='talentos'] .tal-offline__nota {
    display: none;
  }
  html[data-rpgw='talentos'] .tal-offline__titulo {
    margin: 0 0 calc(2px * var(--rpg-un, 1));
  }
  html[data-rpgw='talentos'] .tal-offline__grade {
    gap: calc(4px * var(--rpg-un, 1));
    padding: calc(2px * var(--rpg-un, 1)) 0;
  }
  html[data-rpgw='talentos'] .tal-coletar {
    margin-top: calc(2px * var(--rpg-un, 1));
  }
  html[data-rpgw='talentos'] .tal-rodape {
    gap: calc(6px * var(--rpg-un, 1));
    /*
     * 🚨 O TETO DE 64vh AQUI ERA PARA UM RODAPÉ EMBAIXO DA CONSTELAÇÃO — e
     * não existe mais (31/08/2026, `styles.css`: em `min-aspect-ratio: 4/3`,
     * que cobre as três resoluções do contrato, o rodapé virou COLUNA ao
     * lado do palco, não faixa embaixo dele). A coluna já recebe a altura
     * inteira do quadro do grid; um teto de 64vh aqui voltaria a cortar o
     * botão Coletar por conta própria, sem motivo — o `overflow-y: auto`
     * sozinho já cobre o caso raro de um talento com descrição longa E
     * produção pendente não caberem juntos na coluna.
     */
    max-height: none;
    overflow-y: auto;
  }
  /* O aviso de que ainda há conteúdo abaixo da dobra — sem ele, a rolagem
     escondida do rodapé não tinha NENHUMA pista visual, e o botão Coletar
     podia passar por "sumiu" em vez de "está um pouco mais abaixo". */
  html[data-rpgw='talentos'] .tal-rodape {
    position: relative;
  }
  html[data-rpgw='talentos'] .tal-rodape::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(18px * var(--rpg-un, 1));
    background: linear-gradient(0deg, rgb(16 10 5 / 0.92), transparent);
    pointer-events: none;
  }
  html[data-rpgw='talentos'] .tal-salto {
    padding: calc(3px * var(--rpg-un, 1)) 0 0;
  }
}