/* ══════════════════════════════════════════════════════════════════
   TALENTOS — a tela.

   Tudo aqui usa os tokens do jogo (`--gold-500`, `--surface-raised`,
   `--font-display`…) porque a folha do jogo já está carregada na mesma
   página. Nenhuma cor é inventada: se o dono mexer no tema, esta tela
   acompanha sozinha.

   O peso visual é de propósito. A árvore é o lugar onde o jogador gasta
   centenas de milhões de ouro, e uma lista de botões cinza não pede esse
   gasto. O "orçamento" é todo em CSS e SVG — zero imagem nova além dos
   ícones que o acervo já tem.
   ══════════════════════════════════════════════════════════════════ */

.tal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /*
   * 🚨 `minmax(0, 1fr)` na COLUNA, e não `1fr` nem nada.
   *
   * Uma coluna implícita de grid tem piso de `min-content`: o cabeçalho (marca +
   * título + pílula de ouro + fechar, todos `nowrap`) pedia 404 px, então a
   * coluna virava 404 px numa tela de 390 — e o palco, o rodapé e a constelação
   * inteira nasciam mais largos que o celular. Era isso que CORTAVA os nomes
   * "OURO OFFLINE" e "VELOCIDADE" nas laterais (medido no palco de teste: raiz
   * 390 px, filhos 404 px). Com `minmax(0, …)` a coluna pode encolher até a
   * tela, e quem tem de se ajeitar é o cabeçalho.
   */
  grid-template-columns: minmax(0, 1fr);
  background: #100a05;
  color: #ede1c8;
  font-family: inherit;
  overscroll-behavior: contain;
  animation: tal-entrar 0.26s var(--ease-out, cubic-bezier(0.2, 0.7, 0.3, 1)) both;
}

.tal-overlay[hidden] {
  display: none;
}

/* ── O céu ────────────────────────────────────────────────────────
   Três camadas: estrelas paradas (dois tamanhos), uma névoa fria e a
   aurora que gira atrás do centro. Nenhuma delas é imagem. */

.tal-ceu {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.tal-ceu::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(1.4px 1.4px at 18% 24%, #f8e2ab 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 62% 12%, #ffe9b0 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 82% 41%, #e2b45a 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 33% 68%, #ffffff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 71% 78%, #ffe9b0 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 8% 55%, #f8e2ab 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 47% 33%, #ffffff 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 92% 66%, #e2b45a 50%, transparent 51%);
  background-size: 260px 260px;
  opacity: 0.55;
  animation: tal-cintilar 5.5s ease-in-out infinite;
}

.tal-ceu::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 42%;
  width: 150vmax;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgb(201 154 76 / 0.1) 40deg,
    transparent 100deg,
    rgb(220 145 30 / 0.09) 185deg,
    transparent 245deg,
    rgb(226 180 90 / 0.07) 310deg,
    transparent 360deg
  );
  animation: tal-girar 46s linear infinite;
}

/* ── Cabeçalho ────────────────────────────────────────────────── */

.tal-topo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  padding: clamp(8px, 1.6vh, 14px) clamp(10px, 2vw, 22px);
  border-bottom: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(180deg, rgb(36 22 9 / 0.9), rgb(16 10 5 / 0.35));
  backdrop-filter: blur(3px);
}

.tal-titulo {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(17px, 3.4vmin, 27px);
  font-weight: 900;
  letter-spacing: 0.2em;
  /* `letter-spacing` joga um vão depois da última letra; sem o recuo o título
     fica visivelmente fora de centro em relação ao ícone ao lado. */
  text-indent: 0.2em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f8e2ab, #d9a44a 55%, #a9782c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgb(220 145 30 / 0.62);
  white-space: nowrap;
}

.tal-topo__marca {
  width: clamp(26px, 5vmin, 40px);
  height: auto;
  filter: drop-shadow(0 0 12px rgb(220 145 30 / 0.5));
}

.tal-topo__espaco {
  flex: 1 1 auto;
}

.tal-ouro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 8px;
  border: 1px solid rgb(220 145 30 / 0.4);
  border-radius: var(--r-pill, 999px);
  background: linear-gradient(180deg, rgb(52 28 0 / 0.7), rgb(16 10 5 / 0.7));
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: var(--fs-500, 15px);
  color: #f8e2ab;
  white-space: nowrap;
}

.tal-ouro img {
  width: 20px;
  height: 20px;
}

/* Quando o saldo muda, o número dá um pulso — o feedback de que a compra saiu. */
.tal-ouro[data-mudou='1'] {
  animation: tal-pulso-ouro 0.55s ease-out;
}

.tal-fechar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(201 154 76 / 0.3);
  border-radius: var(--r-md, 12px);
  background: rgb(36 22 9 / 0.8);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.tal-fechar:hover,
.tal-fechar:focus-visible {
  border-color: #e2b45a;
  background: rgb(52 28 0 / 0.6);
}

.tal-fechar img {
  width: 18px;
  height: 18px;
}

/* ── Corpo: trilha de categorias + constelação ─────────────────── */

.tal-corpo {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 0;
}

.tal-trilha {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(8px, 2vh, 18px) 10px;
  border-right: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(90deg, rgb(28 17 8 / 0.85), transparent);
}

.tal-trilha__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: clamp(58px, 8vw, 78px);
  padding: 9px 4px;
  border: 1px solid transparent;
  border-radius: var(--r-md, 12px);
  background: none;
  color: #9c8a6c;
  font-size: var(--fs-200, 11px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.tal-trilha__item:hover {
  color: #ede1c8;
}

.tal-trilha__item[aria-pressed='true'] {
  border-color: rgb(220 145 30 / 0.45);
  background: linear-gradient(180deg, rgb(52 28 0 / 0.55), transparent);
  color: #f8e2ab;
}

.tal-trilha__pino {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-shadow: inset 0 0 0 3px rgb(16 10 5 / 0.9);
}

.tal-palco {
  position: relative;
  min-width: 0;
  min-height: 0;
}

/*
 * O wrapper que segura SVG + rótulos HTML juntos (31/08/2026). Ocupa
 * exatamente o retângulo do `.tal-palco` — é ESTE retângulo que
 * `constelacao.js` mede (`getBoundingClientRect`) para calcular onde cada
 * rótulo cai; se o wrapper tivesse padding/borda, a medida e o desenho
 * desalinhariam.
 */
.tal-constelacao {
  position: absolute;
  inset: 0;
}

/*
 * 🚨 `width`/`height` EXPLÍCITOS, e não `inset` sozinho.
 *
 * SVG é elemento SUBSTITUÍDO. Num elemento substituído posicionado, `width:auto`
 * com os quatro `inset` definidos NÃO resolve para a caixa: a regra do CSS manda
 * usar o tamanho intrínseco e ignorar o excesso de restrição. Foi exatamente o
 * que aconteceu — o SVG pegou a razão do viewBox, escalou pela LARGURA e os dois
 * galhos de baixo saíram da tela. A folga respiratória mora dentro do próprio
 * viewBox, que já nasce com margem.
 */
.tal-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}

/*
 * Os RÓTULOS (nome do galho, nível, o texto do núcleo) — HTML por CIMA do
 * SVG, no MESMO retângulo (`constelacao.js` calcula `left/top` em px a
 * partir do encaixe real do `preserveAspectRatio:meet`). `pointer-events:
 * none` no container e `auto` só no rótulo clicável: o vão entre pastilhas
 * continua deixando o clique passar para o que estiver atrás, se algum dia
 * houver algo lá.
 */
.tal-rotulos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── A constelação ────────────────────────────────────────────── */

/* Trilho apagado: presente (a forma do galho continua legível), mas nunca
   competindo com o trecho aceso — é o contraste entre os dois que faz a
   trilha LER como progresso, e não como fileira uniforme de bolinhas. */
.tal-linha {
  stroke: rgb(156 138 108 / 0.38);
  stroke-width: 1.6;
  fill: none;
}

.tal-linha--viva {
  stroke: color-mix(in srgb, var(--cor) 82%, white);
  stroke-width: 3.2;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cor) 75%, transparent))
    drop-shadow(0 0 2px color-mix(in srgb, var(--cor) 90%, white));
}

/* A energia que corre do centro para o galho comprado. */
.tal-fluxo {
  stroke: color-mix(in srgb, var(--cor) 90%, white);
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 14 150;
  animation: tal-correr 2.6s linear infinite;
  opacity: 0.85;
}

.tal-nucleo {
  fill: url(#tal-nucleo-grad);
  stroke: #d9a44a;
  stroke-width: 2.5;
}

.tal-nucleo-aro {
  fill: none;
  stroke: rgb(220 145 30 / 0.4);
  stroke-width: 1.5;
  stroke-dasharray: 5 9;
  transform-box: fill-box;
  transform-origin: center;
  animation: tal-girar 24s linear infinite;
}

.tal-nucleo-txt {
  fill: #f8e2ab;
  font-family: var(--font-display, Georgia, serif);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-anchor: middle;
}

.tal-nucleo-num {
  fill: #d9a44a;
  font-size: 26px;
  font-weight: 900;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

/* ── Galho (uma árvore) ───────────────────────────────────────── */

.tal-galho {
  cursor: pointer;
  transition: opacity 0.22s ease;
}

.tal-galho[data-apagado='1'] {
  opacity: 0.22;
  pointer-events: none;
}

.tal-galho__halo {
  fill: color-mix(in srgb, var(--cor) 26%, transparent);
  filter: blur(9px);
}

.tal-galho__disco {
  fill: #100a05;
  stroke: color-mix(in srgb, var(--cor) 85%, transparent);
  stroke-width: 3;
  transition: stroke-width 0.18s ease;
}

.tal-galho[data-sel='1'] .tal-galho__disco {
  stroke-width: 5;
}

.tal-galho[data-sel='1'] .tal-galho__halo {
  fill: color-mix(in srgb, var(--cor) 46%, transparent);
}

/* ── O anel de progresso do galho (31/08/2026) ──────────────────
   Fundo (poço, sempre visível) + arco preenchido. O arco nasce às 12h (e
   não aos 3h, que é onde um círculo SVG começa por padrão) porque gira
   -90° em volta do próprio centro — `transform-box:fill-box` é o mesmo
   truque que `.tal-nucleo-aro` já usava aqui embaixo, sem precisar saber a
   coordenada do centro em CSS. */
.tal-anel-fundo {
  fill: none;
  stroke: rgb(156 138 108 / 0.3);
}

.tal-anel-progresso {
  fill: none;
  stroke: color-mix(in srgb, var(--cor) 85%, white);
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cor) 65%, transparent));
  transition: stroke-dashoffset 0.5s ease, stroke 0.2s ease;
}

/* ── Os 4 estados do GALHO (não do nível) ────────────────────────
   travado / progresso / disponível / teto — ver `estadoDoGalho` em
   constelacao.js. "progresso" não precisa de regra própria: é o padrão
   acima (anel na cor do galho, disco normal). */
.tal-galho[data-estado-galho='travado'] .tal-anel-progresso {
  opacity: 0;
}

.tal-galho[data-estado-galho='travado'] .tal-anel-fundo {
  stroke: rgb(156 138 108 / 0.18);
}

.tal-galho[data-estado-galho='travado'] .tal-galho__disco,
.tal-galho[data-estado-galho='travado'] image {
  filter: grayscale(0.85) brightness(0.55);
}

.tal-galho[data-estado-galho='travado'] .tal-galho__halo {
  opacity: 0.4;
}

/*
 * 🚨 O PULSO É SÓ DO GALHO EM FOCO (acabamento de 01/09/2026, achado #391).
 *
 * Com o saldo cheio (a conta de QA: 27 pontos livres, 89 milhões de ouro)
 * TODOS os dez galhos da Isekai viram "disponível" ao mesmo tempo — os dez
 * discos pulsavam juntos e o destaque que devia dizer "é AQUI que dá para
 * investir" virava ruído uniforme: a mesma falta de hierarquia que o §4 do
 * CONTRATO já cobra do vermelho ("cor de alerta usada em tudo não alerta
 * sobre nada"), agora no dourado. O estado "disponível" continua marcado —
 * aro e disco na cor de destaque, sempre visíveis, é o que diz "dá para
 * comprar" — mas só ACENDE (pulso + halo maior) o galho que o jogador tem
 * selecionado (`data-sel='1'`, nenhum ao abrir a tela). Os outros compráveis
 * ficam com o realce estático, mais discreto.
 */
.tal-galho[data-estado-galho='disponivel'] .tal-anel-progresso {
  stroke: #f9cd68;
  filter: drop-shadow(0 0 4px rgb(249 205 104 / 0.55));
}

.tal-galho[data-estado-galho='disponivel'] .tal-galho__disco {
  stroke: #f9cd68;
}

.tal-galho[data-estado-galho='disponivel'] .tal-galho__halo {
  fill: color-mix(in srgb, #f9cd68 30%, transparent);
}

.tal-galho[data-estado-galho='disponivel'][data-sel='1'] .tal-anel-progresso {
  filter: drop-shadow(0 0 6px rgb(249 205 104 / 0.85));
}

.tal-galho[data-estado-galho='disponivel'][data-sel='1'] .tal-galho__disco {
  animation: tal-disco-pulso 1.7s ease-in-out infinite;
}

.tal-galho[data-estado-galho='disponivel'][data-sel='1'] .tal-galho__halo {
  fill: color-mix(in srgb, #f9cd68 50%, transparent);
}

.tal-galho[data-estado-galho='teto'] .tal-anel-progresso {
  stroke: color-mix(in srgb, var(--cor) 35%, white);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cor) 80%, white));
}

.tal-galho[data-estado-galho='teto'] .tal-galho__disco {
  stroke-width: 4;
}

@keyframes tal-disco-pulso {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgb(249 205 104 / 0.5));
  }
  50% {
    filter: drop-shadow(0 0 11px rgb(249 205 104 / 0.9));
  }
}

/* ── O cadeado do estado "travado" ────────────────────────────── */
.tal-cadeado__fundo {
  fill: rgb(16 10 5 / 0.92);
  stroke: rgb(220 90 90 / 0.6);
  stroke-width: 1.4;
}

.tal-cadeado__corpo {
  fill: rgb(214 196 158 / 0.88);
}

.tal-cadeado__alca {
  fill: none;
  stroke: rgb(214 196 158 / 0.88);
  stroke-width: 1.6;
}

/* ── Os rótulos HTML (nome + nível de cada galho) ─────────────────
   Substituem o `<rect>`/`<text>` de SVG que existia até 31/08/2026: o
   mesmo texto, a mesma posição (a placa de `constelacao.js` continua
   sendo quem decide ONDE, só não desenha mais o conteúdo), mas com piso
   de leitura de verdade — `clamp()` não encolhe junto com o viewBox. */
.tal-rot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.6vmin, 7px);
  /* 🚨 Piso de 33px, não 32: medido bem NO limite (32,0) já reprova a régua
     por arredondamento de sub-pixel. Um px de sobra é barato aqui. */
  min-height: clamp(33px, 4vmin, 42px);
  max-width: min(36vw, 190px);
  padding: clamp(5px, 1vmin, 8px) clamp(8px, 1.4vmin, 12px);
  border: 1.5px solid color-mix(in srgb, var(--cor, #dc911e) 55%, transparent);
  border-radius: var(--r-pill, 999px);
  background: linear-gradient(180deg, rgb(28 17 8 / 0.92), rgb(16 10 5 / 0.94));
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.06);
  color: #ede1c8;
  font-family: inherit;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.tal-rot:hover,
.tal-rot:focus-visible {
  border-color: var(--cor, #dc911e);
  transform: translate(-50%, -50%) scale(1.06);
}

.tal-rot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.tal-rot[data-sel='1'] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 24%, #1c1108), rgb(16 10 5 / 0.95));
  border-color: var(--cor);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor) 55%, transparent),
    0 3px 14px -2px color-mix(in srgb, var(--cor) 70%, transparent);
}

.tal-rot__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 🚨 Medido 11,7px em 1343×779 com 1.5vmin (a régua pede ≥12 "de
     verdade") — 1.6vmin com o mesmo piso/teto sobe para ~12,5px aí, sem
     mudar nada nas pontas (844×390 e 1920×1080 continuam presos no piso e
     no teto). */
  font-size: clamp(10.5px, 1.6vmin, 14px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tal-rot__nivel {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  /* 🚨 O piso do CONTRATO para etiqueta é 8px, mas o auditor mede contra
     `9 * --rpg-un` (que passa de 9 em telas mais largas que 1280) — 9px
     cravado reprovava por décimos. 10px de piso tira a régua do fio da
     navalha sem mudar a hierarquia (continua menor que o nome). */
  font-size: clamp(10px, 1.2vmin, 12.5px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #9c8a6c;
}

.tal-rot[data-estado='teto'] .tal-rot__nivel {
  background: color-mix(in srgb, var(--cor) 35%, transparent);
  color: #f8e2ab;
}

.tal-rot[data-estado='disponivel'] {
  border-color: #f9cd68;
}

/* Mesmo galho em foco do bloco acima — ver o comentário lá. */
.tal-rot[data-estado='disponivel'][data-sel='1'] {
  animation: tal-rot-pulso 1.7s ease-in-out infinite;
}

.tal-rot[data-estado='disponivel'] .tal-rot__nivel {
  background: rgb(249 205 104 / 0.25);
  color: #ffe6a8;
}

.tal-rot[data-estado='travado'] {
  opacity: 0.6;
  filter: saturate(0.55);
}

@keyframes tal-rot-pulso {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(249 205 104 / 0.5);
  }
  50% {
    box-shadow: 0 0 0 5px rgb(249 205 104 / 0);
  }
}

/* O rótulo do núcleo — mesmo caso, mesma solução, sem borda (não é
   clicável: `.tal-rotulos` já bloqueia ponteiro por padrão e este não
   reabre `pointer-events`). */
.tal-rot-nucleo {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.tal-rot-nucleo__titulo {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(12px, 1.7vmin, 16px);
  font-weight: 900;
  letter-spacing: 0.14em;
  /* 🚨 SEM `background-clip:text` AQUI (14/09, achado real: "ISEKAI"
     ilegível, virava uma espécie de estêncil vazado). Testado ao vivo,
     isolando variável por variável (removi sombra, depois peso, depois
     o clip) — só remover o `background-clip:text` resolveu; nem o
     `text-shadow` nem o peso 900 eram a causa. É um bug de
     renderização do Chromium: `background-clip:text` com gradiente
     não amostra direito traços finos de letra (não dígito) neste
     tamanho pequeno — o "65/100" ao lado usa a MESMA técnica e sempre
     renderizou limpo, só os dígitos escapam do problema. Cor sólida
     no meio do degrade antigo (não inventei uma cor nova). */
  color: #d9a44a;
  text-shadow: 0 0 12px rgb(220 145 30 / 0.7);
}

.tal-rot-nucleo__num {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(16px, 2.6vmin, 27px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  /* 🚨 14/09, achado do Zerg: RETRATANDO a nota de cima — "só dígitos
     escapam do bug" não se sustentou num teste com zoom real (o "1" de
     "100" mostrava um artefato visível). Mesma correção do `__titulo`:
     cor sólida no meio do degradê antigo, sem `background-clip:text`. */
  color: #d9a44a;
  text-shadow: 0 0 14px rgb(220 145 30 / 0.55);
}

/* Alvo de toque invisível — existe só para o dedo, não para o olho. */
.tal-alvo {
  fill: transparent;
  stroke: none;
}

/* ── Nó (um nível) ────────────────────────────────────────────── */

.tal-no {
  cursor: default;
}

.tal-no__base {
  fill: rgb(28 17 8 / 0.9);
  stroke: rgb(156 138 108 / 0.6);
  stroke-width: 1.8;
  transition: stroke 0.2s ease, fill 0.2s ease, stroke-width 0.2s ease;
}

/* Comprado: aceso na cor da árvore. */
.tal-no[data-estado='feito'] .tal-no__base {
  fill: color-mix(in srgb, var(--cor) 62%, #100a05);
  stroke: color-mix(in srgb, var(--cor) 95%, white);
  stroke-width: 2;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cor) 70%, transparent));
}

/* O próximo, com ouro (ou pontos) no bolso: o nó que o jogador está
   procurando — pulsa, é clicável e usa o MESMO dourado #f9cd68 do aro do
   galho "disponível", para os dois lerem como o mesmo aviso em duas
   escalas. */
.tal-no[data-estado='pode'] {
  cursor: pointer;
}

.tal-no[data-estado='pode'] .tal-no__base {
  fill: color-mix(in srgb, #f9cd68 30%, #100a05);
  stroke: #f9cd68;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 8px rgb(249 205 104 / 0.8));
}

.tal-no[data-estado='pode'] .tal-no__anel {
  fill: none;
  stroke: #f9cd68;
  transform-box: fill-box;
  transform-origin: center;
}

/* O anel do próximo nível só pulsa no galho em foco — mesma regra do
   disco/rótulo, ver o comentário em `.tal-galho[data-estado-galho='disponivel']`. */
.tal-galho[data-sel='1'] .tal-no[data-estado='pode'] .tal-no__anel {
  animation: tal-anel 1.9s ease-out infinite;
}

/* O próximo, sem saldo: visível — o jogador precisa ver o que vem A
   SEGUIR —, mas claramente fora de alcance agora (tracejado, sem o brilho
   do "pode"). */
.tal-no[data-estado='caro'] .tal-no__base {
  fill: rgb(28 17 8 / 0.85);
  stroke: rgb(249 205 104 / 0.55);
  stroke-width: 1.8;
  stroke-dasharray: 3 3;
}

.tal-no__dica {
  pointer-events: none;
}

/* ── Rodapé: detalhe + produção offline ───────────────────────── */

.tal-rodape {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(6px, 1.2vw, 14px);
  padding: clamp(8px, 1.4vh, 14px) clamp(10px, 2vw, 22px) clamp(10px, 2vh, 18px);
  border-top: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(0deg, rgb(36 22 9 / 0.92), rgb(16 10 5 / 0.35));
  backdrop-filter: blur(3px);
}

.tal-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: clamp(9px, 1.6vh, 15px) clamp(11px, 1.6vw, 18px);
  border: 1px solid rgb(201 154 76 / 0.3);
  border-radius: var(--r-lg, 16px);
  background: linear-gradient(180deg, rgb(36 22 9 / 0.85), rgb(28 17 8 / 0.85));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}

/* 🚨 O painel de foco (31/08/2026): clicar num galho tinha de acender ESTE
   cartão como sendo dele — antes só a borda fina mudava de cor, fácil de
   não notar. O fio à esquerda + o ícone com poço próprio (mesma família
   visual do anel de progresso do galho, num tamanho menor) fazem o cartão
   ler como "o mesmo galho, outra escala", não uma ficha genérica. */
.tal-cartao--detalhe {
  border-color: color-mix(in srgb, var(--cor, #dc911e) 45%, rgb(201 154 76 / 0.3));
  border-left: 3px solid var(--cor, #dc911e);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cor, #dc911e) 12%, rgb(36 22 9 / 0.85)),
    rgb(28 17 8 / 0.88)
  );
}

.tal-cartao__cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tal-cartao__icone {
  box-sizing: border-box;
  width: clamp(34px, 4.4vmin, 46px);
  height: clamp(34px, 4.4vmin, 46px);
  padding: 15%;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--cor, #dc911e) 65%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--cor, #dc911e) 26%, #100a05) 0%, #100a05 78%);
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--cor, #dc911e) 60%, transparent);
  object-fit: contain;
}

/* 🚨 O nome do talento cabe em DUAS linhas em vez de virar reticências.

   Medido no celular (390×844): "Tempo de Recompensa Offline" pedia 260 px numa
   caixa de 213 px, e o jogador lia "Tempo de Recompensa …" — o nome do talento
   que ele acabou de escolher, cortado justamente na palavra que o diferencia dos
   vizinhos ("Offline"). `nowrap` existia para o selo "Nv 3 / 10" não ser
   empurrado; com `-webkit-line-clamp` o selo continua no lugar (ele é
   `flex: 0 0 auto`) e o nome ganha a segunda linha.

   Duas linhas e não três: no rodapé do celular cada linha custa altura de um
   cartão que já rola, e dois nomes de duas linhas cobrem todos os talentos de
   hoje (o maior, "Abertura Automática de Baús", ocupa 1,7 linha). Passando de
   duas, as reticências voltam — melhor cortar do que empurrar o botão de comprar
   para fora da tela. */
.tal-cartao__nome {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(14px, 2.2vmin, 19px);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.18;
  /* Mesmo bug/mesma correção do `.tal-rot-nucleo__titulo` acima — ver
     o comentário grande lá. Sem `background-clip:text` neste tamanho. */
  color: #d9a44a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
}

.tal-cartao__selo {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--cor, #dc911e) 50%, transparent);
  border-radius: var(--r-pill, 999px);
  background: color-mix(in srgb, var(--cor, #dc911e) 14%, transparent);
  font-size: var(--fs-200, 11px);
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tal-cartao__texto {
  margin: 0;
  color: #b9a583;
  font-size: var(--fs-300, 12px);
  line-height: 1.45;
}

.tal-salto {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0 1px;
  font-variant-numeric: tabular-nums;
}

.tal-salto__de,
.tal-salto__para {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(16px, 2.6vmin, 22px);
  font-weight: 900;
}

.tal-salto__de {
  color: #9c8a6c;
}

.tal-salto__para {
  color: color-mix(in srgb, var(--cor, #dc911e) 55%, white);
  text-shadow: 0 0 14px color-mix(in srgb, var(--cor, #dc911e) 60%, transparent);
}

/* A seta é desenhada: escala junto e não depende de fonte com glifo. */
.tal-salto__seta {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, rgb(156 138 108 / 0.6), #d9a44a);
}

.tal-salto__seta::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  translate: 0 -50%;
  rotate: 45deg;
  border-top: 2px solid #d9a44a;
  border-right: 2px solid #d9a44a;
}

.tal-comprar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 11px 16px;
  min-height: 44px; /* alvo de toque */
  border: 2px solid #ffe6a8;
  border-radius: var(--r-md, 12px);
  background: linear-gradient(180deg, #f9cd68, #d9901c);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.5), 0 3px #6d3f06, 0 0 18px -6px rgb(240 180 60 / 0.9);
  color: #2a1a02;
  font-size: var(--fs-500, 15px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: filter 0.16s ease, translate 0.08s ease;
}

.tal-comprar:hover:not(:disabled) {
  filter: brightness(1.08);
}

.tal-comprar:active:not(:disabled) {
  translate: 0 2px;
  box-shadow: inset 0 1px rgb(255 255 255 / 0.5), 0 1px #6d3f06;
}

.tal-comprar:disabled {
  border-color: rgb(201 154 76 / 0.3);
  background: linear-gradient(180deg, #3a2c1c, #241a10);
  box-shadow: none;
  color: #9c8a6c;
  cursor: not-allowed;
}

.tal-comprar img {
  width: 17px;
  height: 17px;
}

/* ── Produção offline ─────────────────────────────────────────── */

/* 17/09: `.tal-cartao { display: flex }` (acima) tem a MESMA especificidade
   que o `[hidden] { display: none }` do navegador — e como é regra de autor,
   ela ganha do navegador mesmo com `hidden` marcado no elemento. Precisa de
   uma regra de autor própria pra `[hidden]` realmente esconder. */
.tal-cartao[hidden] {
  display: none;
}

.tal-cartao--offline[data-tem='1'] {
  border-color: rgb(220 145 30 / 0.55);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 0 26px -8px rgb(220 145 30 / 0.6);
}

/* 21/09: na aba Isekai o cartão mora na coluna lateral estreita — "Tempo fora" numa linha, Ouro e XP lado a lado (3 colunas cortavam os números). */
.tal-cartao--offline[data-lateral='1'] .tal-offline__grade {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tal-cartao--offline[data-lateral='1'] .tal-offline__valor {
  font-size: clamp(11px, 1.9vmin, 14px);
  gap: 3px;
}
.tal-cartao--offline[data-lateral='1'] .tal-offline__item:first-child {
  grid-column: 1 / -1;
}

.tal-offline__titulo {
  margin: 0;
  color: #d9a44a;
  font-size: var(--fs-200, 11px);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
}

.tal-offline__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 0;
}

.tal-offline__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tal-offline__rotulo {
  color: #9c8a6c;
  font-size: var(--fs-100, 10px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tal-offline__valor {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(14px, 2.2vmin, 19px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ede1c8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tal-offline__valor img {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.tal-offline__valor--ouro {
  color: #f8e2ab;
}

.tal-offline__nota {
  margin: 0;
  color: #9c8a6c;
  font-size: var(--fs-200, 11px);
  line-height: 1.4;
}

/* O botão COLETAR é o mesmo botão dourado: a marcação usa as duas classes
   (`tal-comprar tal-coletar`) e aqui só entra o que difere. */
.tal-coletar {
  margin-top: 4px;
}

/* ── Aviso (erro/sucesso) ─────────────────────────────────────── */

.tal-aviso {
  position: fixed;
  left: 50%;
  bottom: clamp(96px, 22vh, 200px);
  z-index: 70;
  translate: -50% 0;
  max-width: min(420px, 88vw);
  padding: 11px 18px;
  border: 1px solid #a9782c;
  border-radius: var(--r-md, 12px);
  background: rgb(16 10 5 / 0.96);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.7);
  color: #f8e2ab;
  font-size: var(--fs-400, 13px);
  font-weight: 700;
  text-align: center;
  animation: tal-aviso-entrar 0.22s ease-out both;
}

.tal-aviso[data-tipo='erro'] {
  border-color: var(--error, #ff5f6a);
  color: var(--error, #ff5f6a);
}

/* ── Brilho da compra ─────────────────────────────────────────── */

.tal-estouro {
  fill: none;
  stroke: #f8e2ab;
  stroke-width: 3;
  animation: tal-estourar 0.62s ease-out forwards;
  pointer-events: none;
}

/* ── Animações ────────────────────────────────────────────────── */

@keyframes tal-entrar {
  from {
    opacity: 0;
    scale: 1.015;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes tal-girar {
  to {
    rotate: 360deg;
  }
}

@keyframes tal-cintilar {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.78;
  }
}

@keyframes tal-correr {
  to {
    stroke-dashoffset: -164;
  }
}

@keyframes tal-anel {
  0% {
    r: 13;
    opacity: 0.85;
    stroke-width: 2.5;
  }
  100% {
    r: 24;
    opacity: 0;
    stroke-width: 0.5;
  }
}

@keyframes tal-estourar {
  0% {
    r: 8;
    opacity: 1;
    stroke-width: 4;
  }
  100% {
    r: 74;
    opacity: 0;
    stroke-width: 0.5;
  }
}

@keyframes tal-pulso-ouro {
  0%,
  100% {
    scale: 1;
  }
  40% {
    scale: 1.09;
  }
}

@keyframes tal-aviso-entrar {
  from {
    opacity: 0;
    translate: -50% 12px;
  }
  to {
    opacity: 1;
    translate: -50% 0;
  }
}

/* ── Celular / retrato ────────────────────────────────────────── */

@media (max-width: 860px), (max-height: 560px) {
  .tal-corpo {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .tal-trilha {
    flex-direction: row;
    justify-content: center;
    border-right: 0;
    border-bottom: 1px solid rgb(201 154 76 / 0.3);
    background: linear-gradient(180deg, rgb(28 17 8 / 0.85), transparent);
  }

  /* Celular/retrato: nem a grade 2x2 cabe lado a lado — empilha em 1 coluna. */
  .isk2-grade {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .tal-trilha__item {
    flex-direction: row;
    width: auto;
    padding: 7px 12px;
  }

  .tal-trilha__pino {
    width: 14px;
    height: 14px;
    box-shadow: inset 0 0 0 2px rgb(16 10 5 / 0.9);
  }

  .tal-rodape {
    grid-template-columns: 1fr;
  }

  /* Em telas baixas o rodapé come a constelação; ele passa a rolar, e o que
     sobra fica todo para o palco.

     🚨 O rodapé cedeu 8vh para o palco (42 → 34): numa árvore de 10 galhos cada
     ponto de altura vira letra legível na placa, e o rodapé rola de qualquer
     jeito. Medido em 390×760: o palco foi de 300 para 343 px.

     🚨 E o palco NÃO tem mais piso de altura (`min-height: 300px`). O piso o
     fazia TRANSBORDAR para debaixo do rodapé — que pinta por cima (`z-index: 2`)
     — e a placa do galho de baixo ("DANO CRÍT.") sumia pela metade: medido em
     390×760, sobravam 312 px de palco e o piso pedia 350. Constelação pequena e
     inteira é melhor que grande e cortada; quem precisa ler o número tem o
     cartão do rodapé, que é justamente o pedido do Gabriel de 12/08. */
  .tal-rodape {
    max-height: 34vh;
    overflow-y: auto;
  }

  .tal-palco {
    min-height: 0;
  }

  /* O cabeçalho tem de CABER na tela estreita — ver a nota do
     `grid-template-columns` no `.tal-overlay`. Menos vão, pílula de ouro menor,
     e o título podendo encolher (`min-width: 0`, que em item de flex é o que
     libera texto `nowrap` a diminuir). */
  .tal-topo {
    gap: 8px;
    padding-inline: 8px;
  }

  .tal-titulo {
    min-width: 0;
    overflow: hidden;
  }

  .tal-ouro {
    padding: 5px 10px 5px 6px;
    font-size: var(--fs-400, 13px);
  }

  .tal-ouro img {
    width: 16px;
    height: 16px;
  }

  /* ── Miolo apertado (achado #391: "borrão dourado" cobrindo o núcleo) ──
     O halo do disco é um `blur` de PX FIXO — não encolhe junto com o
     viewBox. Num palco baixo a constelação inteira escala bem menor
     (`planta()` já abre mais vão para compensar, ver `constelacao.js`), e o
     mesmo blur de 9px passa a valer muitas unidades de viewBox: ele sozinho
     comia o vão entre os dez discos e o núcleo. Aqui ele encolhe junto. */
  .tal-galho__halo {
    filter: blur(5px);
  }

  /* ── Alvo de toque do próximo nível (achado #391: 17×17 px) ──
     O DESENHO não muda — só a área invisível de toque. `.tal-alvo` já é
     `fill:transparent` (não pinta nada) e o raio que `constelacao.js`
     calcula (`alvoNo`) já está no limite geométrico para não fazer um
     galho invadir o vizinho (ver o comentário lá). `transform:scale` age
     DEPOIS da escala do viewBox — cresce em px de verdade sem tocar nesse
     raio. Só o nó de NÍVEL (`.tal-no > .tal-alvo`); o alvo do disco do
     galho (`.tal-galho > .tal-alvo`, direto) já passa de 32px e fica como
     está. */
  .tal-no > .tal-alvo {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(2.3);
  }
}

/* ── Movimento reduzido ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tal-overlay,
  .tal-ceu::before,
  .tal-ceu::after,
  .tal-fluxo,
  .tal-nucleo-aro,
  .tal-no[data-estado='pode'] .tal-no__anel,
  .tal-ouro[data-mudou='1'],
  .tal-aviso {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ÁRVORE DE ISEKAI (#83/#110) — cartões, não constelação.

   Aqui não há caminho a percorrer nem pré-requisito: cada talento sobe
   sozinho e o que limita é o saldo de pontos. Um mapa estrelado sugeriria
   uma ordem que não existe.
   ══════════════════════════════════════════════════════════════════ */

/* .isk-grade/.isk-card (a grade "plano B") saíram em 17/09 — a grade nova
   por categoria (`.isk2-*`, mais abaixo) virou a UI principal da árvore de
   Isekai, então o plano B perdeu a razão de existir. */

.isk-saldo {
  margin: 6px 0 0;
  font-size: 13px;
  color: #d8b4fe;
}

.isk-saldo b {
  font-size: 20px;
}

.isk-saldo span {
  color: #b9a583;
  font-size: 11px;
}

.isk-vazio {
  margin: auto;
  color: #b9a583;
  font-size: 12px;
}

/* ══════════════════════════════════════════════════════════════════
   A GRADE NOVA DA ÁRVORE DE ISEKAI (17/09) — cartões por categoria.

   Pedido do Gabriel: reformular a tela com "linguagem visual mais limpa,
   premium e legível", trocando a constelação central por blocos/cartões
   categorizados (mockup anexo). Fundo marrom bem escuro, bordas douradas,
   cantos arredondados, sombra suave — os MESMOS tokens que o resto desta
   tela já usa (nada de cor nova inventada fora da paleta por talento, que
   é o único lugar com cor própria, "com moderação" como ele pediu).
   ══════════════════════════════════════════════════════════════════ */

/* 17/09 (pedido #79, confirmado #83 "Sim quero"): virou grade 2x2 de
   verdade — supera a fileira única de 4 do #78. `repeat(2, …)` em colunas
   E linhas garante 2 categorias por linha na largura de referência dele
   (1536px). Só encolhe pra menos colunas na régua de celular/retrato, lá
   embaixo. */
.isk2-grade {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.4vh, 14px);
  padding: clamp(6px, 1.2vh, 14px);
  overflow-y: auto;
  align-content: start;
}

.isk2-cat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(10px, 1.6vh, 16px);
  border: 1px solid rgb(201 154 76 / 0.28);
  border-radius: var(--r-lg, 14px);
  background: linear-gradient(165deg, rgb(36 22 9 / 0.75), rgb(16 10 5 / 0.55));
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.25);
}

/* 17/09: cabeçalho CENTRALIZADO (pedido com coordenadas exatas do Gabriel —
   "ícone pequeno no cabeçalho; nome da categoria centralizado; subtítulo
   pequeno abaixo"), empilhado, não mais ícone+texto lado a lado. */
.isk2-cat__topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
}

.isk2-cat__icone {
  font-size: clamp(20px, 2.6vmin, 26px);
  line-height: 1;
  filter: drop-shadow(0 0 8px rgb(220 145 30 / 0.35));
}

.isk2-cat__nome {
  margin: 2px 0 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(13px, 2vmin, 16px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #f8e2ab;
}

.isk2-cat__desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
  color: #9c8a6c;
}

.isk2-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 11px;
}

.isk2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: clamp(120px, 15vh, 150px);
  padding: 12px 8px;
  border: 1px solid rgb(201 154 76 / 0.22);
  border-radius: var(--r-md, 12px);
  background: linear-gradient(180deg, rgb(52 28 0 / 0.35), rgb(0 0 0 / 0.32));
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.isk2-card:hover {
  border-color: color-mix(in srgb, var(--isk2-cor, #e2b45a) 55%, rgb(201 154 76 / 0.4));
  transform: translateY(-1px);
}

.isk2-card.is-selecionado {
  border-color: var(--isk2-cor, #e2b45a);
  background: linear-gradient(180deg, color-mix(in srgb, var(--isk2-cor, #e2b45a) 16%, rgb(52 28 0 / 0.4)), rgb(0 0 0 / 0.32));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--isk2-cor, #e2b45a) 45%, transparent), 0 0 16px color-mix(in srgb, var(--isk2-cor, #e2b45a) 30%, transparent);
}

.isk2-card.is-max {
  opacity: 0.86;
}

.isk2-card__icone {
  width: clamp(28px, 4vmin, 36px);
  height: clamp(28px, 4vmin, 36px);
  object-fit: contain;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--isk2-cor, #e2b45a) 55%, transparent));
}

.isk2-card__nome {
  font-size: 11.5px;
  font-weight: 800;
  color: #ede1c8;
  text-align: center;
  line-height: 1.2;
}

.isk2-card__valor {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: #b9a583;
}

.isk2-card__segs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5px;
  max-width: 84px;
  margin: 1px 0;
}

.isk2-card__seg {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  transition: background-color 0.25s ease;
}

.isk2-card__seg.is-cheio {
  background: var(--isk2-cor, #e2b45a);
}

.isk2-card__btn {
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border: 1px solid color-mix(in srgb, var(--isk2-cor, #e2b45a) 55%, rgb(255 255 255 / 0.2));
  border-radius: 50%;
  background: color-mix(in srgb, var(--isk2-cor, #e2b45a) 20%, rgb(0 0 0 / 0.3));
  color: #ede1c8;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.16s ease;
}

.isk2-card.is-max .isk2-card__btn {
  width: auto;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.03em;
}

.isk2-card__btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--isk2-cor, #e2b45a) 38%, rgb(0 0 0 / 0.2));
}

.isk2-card__btn:active:not(:disabled) {
  transform: scale(0.9);
}

.isk2-card__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .isk2-card,
  .isk2-card__btn {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   A ÁRVORE RADIAL DE VIP (17/09, pedido #84) — 5 galhos ao redor de um
   núcleo central, curvas em SVG. Substitui a constelação genérica só
   nesta aba (mesmo precedente da grade de Isekai, #79). Ver a nota de
   `NOS_VIP` em tela.js pro mapeamento dos 5 talentos reais.
   ══════════════════════════════════════════════════════════════════ */

.vip2-arvore {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 1.6vh, 20px);
}

.vip2-arvore::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100%, 620px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(241 199 91 / 0.1), transparent 70%);
  pointer-events: none;
}

/* O quadro interno mantém a proporção do mockup (1168x780) e é o sistema de
   coordenadas em % que o SVG e os nós (`left`/`top`) dividem. */
.vip2-curvas,
.vip2-hub,
.vip2-no {
  position: absolute;
}

.vip2-curvas {
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  max-width: 100vh;
  aspect-ratio: 1168 / 780;
  overflow: visible;
}

.vip2-galho {
  fill: none;
  stroke: var(--vip2-cor, #d7a43a);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px var(--vip2-cor, #d7a43a));
}

.vip2-hub,
.vip2-no {
  transform: translate(-50%, -50%);
}

.vip2-hub {
  /* 220px na caixa de referência (1168x780) — % nos dois eixos calculada a
     partir da MESMA caixa, não de vh: como `.vip2-curvas` trava a proporção
     1168:780 com `aspect-ratio`, width%×largura_real == height%×altura_real
     sempre (é a mesma constante de escala `k` nos dois eixos), então o
     círculo fica geometricamente certo em QUALQUER tamanho de tela — vh
     comparava com a altura da JANELA, que em celular retrato é bem maior
     que a altura real deste container (largura manda, não a viewport;
     achado #85, o contorno vazava a janela). */
  width: clamp(96px, 18.84%, 180px);
  height: clamp(96px, 28.21%, 180px);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: radial-gradient(circle, rgb(20 12 6 / 0.95), rgb(10 6 3 / 0.95));
  border: 3px solid #d7a43a;
  box-shadow:
    0 0 0 6px rgb(215 164 58 / 0.15),
    0 0 22px rgb(215 164 58 / 0.35);
}

.vip2-hub__titulo {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffdd82;
}

.vip2-hub__status {
  font-size: clamp(9px, 1.1vw, 12px);
  color: #bfa88b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.vip2-no {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 2px solid var(--vip2-cor, #d7a43a);
  border-radius: 50%;
  /* 132px de referência — mesma lógica de escala do `.vip2-hub` acima. */
  width: clamp(92px, 11.3%, 150px);
  height: clamp(92px, 16.92%, 150px);
  padding: 5px;
  background: radial-gradient(circle, rgb(30 18 9 / 0.9), rgb(14 9 5 / 0.9));
  box-shadow: 0 0 14px rgb(0 0 0 / 0.4);
  cursor: pointer;
  font: inherit;
  color: inherit;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vip2-no--topo {
  border-radius: var(--r-lg, 22px) var(--r-lg, 22px) 40% 40%;
  /* 300x150 de referência. */
  width: clamp(150px, 25.68%, 260px);
  height: clamp(88px, 19.23%, 150px);
}

.vip2-no:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.vip2-no.is-selecionado {
  box-shadow: 0 0 0 3px var(--vip2-cor, #d7a43a), 0 0 18px var(--vip2-cor, #d7a43a);
}

.vip2-no__icone {
  width: clamp(20px, 2.6vw, 34px);
  height: clamp(20px, 2.6vw, 34px);
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.6));
  flex: none;
}

.vip2-no__nome {
  font-size: clamp(8px, 0.95vw, 11px);
  font-weight: 700;
  text-align: center;
  color: #f5ebdc;
  line-height: 1.15;
  padding: 0 3px;
  /* 🚨 #85: nome sem teto de linhas era o que estourava o círculo — "Tempo de
     Recompensa Offline"/"Capacidade de Baús de Nível" quebram em 3 linhas
     numa caixa pensada pra 2. Corta em 2 com reticências em vez de crescer. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vip2-no__valor {
  font-size: clamp(8px, 0.85vw, 11px);
  color: var(--vip2-cor, #d7a43a);
  font-weight: 700;
  flex: none;
}

.vip2-no__segs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  max-width: 90%;
  flex: none;
}

.vip2-no__seg {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(120 100 70 / 0.5);
  flex: none;
}

.vip2-no__seg.is-cheio {
  background: var(--vip2-cor, #d7a43a);
}


/* ── as duas constelações lado a lado (#113) ────────────────────── */

.tal-par {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.tal-par > * {
  flex: 1 1 0;
  min-width: 0;
}

/*
 * 🚨 O `.tal-constelacao` é `position: absolute; inset: 0` — foi feito para
 * ser FILHO ÚNICO do palco. Com dois deles, os dois se empilham no mesmo
 * lugar e os rótulos de uma árvore aparecem por cima da outra (visto na
 * foto, na época em que isto era SVG: "AUTOMÁTICA DE BAÚS" atravessando
 * "EXPERIÊNCIA").
 *
 * Dentro do par eles voltam ao FLUXO, e aí o flex divide a linha. O
 * `width/height` explícito continua obrigatório: SVG é elemento substituído e
 * `width:auto` faria ele pegar a razão do viewBox e vazar da caixa.
 */
.tal-par > .tal-constelacao {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
}

/* Um fio entre as duas: sem ele, num fundo estrelado, as duas árvores leem
   como uma só bagunçada. */
.tal-par > *:first-child {
  border-right: 1px solid rgb(255 255 255 / 0.07);
}

/* Numa tela estreita elas empilham — espremer duas constelações lado a lado
   num celular não deixa nenhuma legível. */
@media (max-width: 900px) {
  .tal-par {
    flex-direction: column;
    overflow-y: auto;
  }

  .tal-par > *:first-child {
    border-right: 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.07);
  }
}

/* ══════════════════════════════════════════════════════════════════
   A ABA DO VIP (#159) — constelação cinza e o convite por cima.
   ══════════════════════════════════════════════════════════════════ */

.tal-vip {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

/* Cinza e apagada, mas ainda VISÍVEL: o jogador precisa ver o que está
   comprando. Escondê-la de vez transformaria a aba num cartaz. */
.tal-vip__apagado {
  filter: grayscale(1) brightness(0.55);
  opacity: 0.5;
  pointer-events: none;
}

.tal-vip__convite {
  position: absolute;
  inset: auto;
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 420px;
  padding: 22px 26px;
  border: 1px solid rgb(226 180 90 / 0.45);
  border-radius: 16px;
  background: rgb(16 10 5 / 0.94);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.6);
  text-align: center;
}

.tal-vip__convite img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.tal-vip__convite h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  /* Mesmo bug/mesma correção do `.tal-rot-nucleo__titulo` (ver comentário
     grande lá) — Zerg reportou a aba VIP com o mesmo texto ilegível. */
  color: #d9a44a;
}

.tal-vip__convite p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #b9a583;
}

.tal-vip__btn {
  min-height: 42px;
  margin-top: 4px;
  padding: 10px 26px;
  border: 2px solid #ffe6a8;
  border-radius: 999px;
  background: linear-gradient(180deg, #f9cd68, #d9901c);
  box-shadow: inset 0 2px rgb(255 255 255 / 0.5), 0 4px #6d3f06, 0 0 18px -6px rgb(240 180 60 / 0.9);
  color: #2a1a02;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.tal-vip__btn:hover {
  background: linear-gradient(180deg, #ffdd82, #e8a52a);
}

.tal-vip__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Talento no topo da árvore: só o valor do último nível, sem a seta (#160). */
.tal-salto[data-topo='1'] .tal-salto__seta,
.tal-salto[data-topo='1'] .tal-salto__para { display: none; }
.tal-salto[data-topo='1'] .tal-salto__de { color: #e2b45a; }

/* ── A tela da Deusa (#291) ─────────────────────────────────────── */

.deusa-summon {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(200px, 260px);
  gap: 18px;
  align-items: center;
  width: 100%;
  min-height: 340px;
  padding: 10px;
}

.deusa-summon__arte {
  width: 100%;
  max-width: 420px;
  height: auto;
  justify-self: center;
  /* O halo faz o fundo da referência sem precisar de arte de cenário. */
  background: radial-gradient(circle at 50% 52%, rgba(226, 180, 90, 0.3) 0%, transparent 64%);
}

.deusa-summon__lado {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deusa-summon__tipo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #4a3216;
  background: #1c1108;
  color: #ede1c8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.deusa-summon__tipo b {
  color: #ffd88a;
  font-size: 15px;
}
.deusa-summon__tipo[aria-pressed='true'] {
  border-color: #e2b45a;
  background: #3a2c1c;
}
.deusa-summon__tipo:hover {
  border-color: #7a5f3a;
}

.deusa-summon__acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.deusa-summon__ir {
  padding: 11px 6px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(180deg, #f9cd68, #d9901c);
  color: #2a1a02;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
}
.deusa-summon__ir:hover {
  filter: brightness(1.08);
}

.deusa-summon__saida {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #b9a583;
  min-height: 34px;
}

/* A luz da bênção: cobre o palco enquanto o servidor responde. */
.deusa-summon__fx {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background: radial-gradient(circle at 38% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(226, 180, 90, 0.35) 26%, transparent 62%);
  animation: deusa-brilho 1.1s ease-in-out infinite;
}

@keyframes deusa-brilho {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .deusa-summon__fx { animation: none; opacity: 0.5; }
}

@media (max-width: 720px) {
  .deusa-summon {
    grid-template-columns: 1fr;
  }
  .deusa-summon__arte {
    max-width: 260px;
  }
}

/*
 * A barra de Relacionamento na tela da Deusa (#292).
 *
 * 🚨 Usa a ARTE DO JOGO (`ui/bars/*`) com `border-image`, e não um retângulo
 * meu: o pedido foi chegar perto da referência, e a diferença entre parecer do
 * jogo e parecer colado por cima está justamente na moldura.
 */
.deusa-summon__relacao {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #4a3216;
  background: rgb(0 0 0 / 0.28);
}

.deusa-summon__rot {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #b9a583;
  align-self: center;
}

.deusa-summon__nivel {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  color: #ffd88a;
}
.deusa-summon__nivel i {
  font-size: 12px;
  font-style: normal;
  color: #9c8a6c;
}

.deusa-summon__barra {
  grid-column: 1 / -1;
  height: 14px;
  border-image: url('/potato/ui/bars/progressBarBase_black.png') 28 fill / 7px;
  overflow: hidden;
}

.deusa-summon__fill {
  display: block;
  height: 100%;
  border-image: url('/potato/ui/bars/progressBar_pink.png') 22 fill / 5px;
  transition: width 320ms ease;
}

.deusa-summon__afin {
  grid-column: 1 / -1;
  font-size: 11px;
  color: #b9a583;
}

/* 🚨 O botão de reset (20/08, movido para o painel lateral em 17/09 — pedido
   do mockup: "painel direito" com o contador de pontos E o reset juntos, não
   mais solto num canto da árvore). Nasce COM regra: elemento criado pelo JS
   sem CSS já me mordeu cinco vezes neste projeto. Discreto de propósito — é
   uma saída de emergência, não uma ação do dia a dia. */
.isk-saldo-caixa {
  display: grid;
  gap: 8px;
  justify-items: center;
  margin-top: 4px;
}

.isk-reset {
  width: 100%;
  display: grid;
  gap: 1px;
  justify-items: center;
  padding: 8px 14px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--r-md, 10px);
  background: rgb(255 255 255 / 0.04);
  color: #b9a583;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.isk-reset:hover:not(:disabled) {
  border-color: rgb(255 140 140 / 0.55);
  background: rgb(255 90 90 / 0.12);
  color: #ffdada;
}

.isk-reset:disabled {
  opacity: 0.45;
  cursor: default;
}

.isk-reset__t {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.isk-reset__c {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.72;
}

/* (O `.tal-palco` já é `position: relative` lá em cima — é ele que ancora o
   botão. Confirmei antes de escrever outra regra para o mesmo elemento.) */

/* ═══════════════════════════════════════════════════════════════════
 * O TRILHO VIRA FAIXA DE ABAS (28/08/2026, pedido do Zerg).
 *
 * *"Transforme em Abas o Isekai, a Deusa e o Vip igual fizemos com a forja no
 * inventario, e quando clicar abre Direto o Isekai e os outros ficam do lado
 * como abas para clicar"*.
 *
 * 🚨 Só a POSIÇÃO e a forma mudam. Os botões continuam sendo os mesmos
 * (`.tal-trilha__item`), com o mesmo clique, o mesmo `aria-pressed` e o mesmo
 * pino colorido de cada árvore — a cor é o que diferencia Isekai (roxo), Deusa
 * (lilás) e VIP (dourado), e ela é a única pista de qual é qual sem o rótulo.
 *
 * O desenho segue as abas de Inventário|Forja: fileira horizontal encostada no
 * conteúdo, aba acesa com fundo e fio, apagada só com o texto.
 * ═══════════════════════════════════════════════════════════════════ */

/* Uma coluna só: a faixa vira a PRIMEIRA LINHA, e o palco ocupa o resto. */
.tal-corpo {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.tal-trilha {
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
  padding: 0 clamp(8px, 2vw, 18px);
  /* o fio passa da direita para baixo: agora ele separa aba de conteúdo */
  border-right: 0;
  border-bottom: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(180deg, rgb(28 17 8 / 0.85), transparent);
}

.tal-trilha__item {
  flex: 0 1 clamp(96px, 16vw, 190px);
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  /* `width` fixa era do trilho vertical; aqui quem manda é o `flex`. */
  width: auto;
  min-width: 0;
  padding: clamp(8px, 1.4vh, 12px) clamp(8px, 1.4vw, 16px);
  border-radius: var(--r-md, 12px) var(--r-md, 12px) 0 0;
}

/* Aba acesa: fundo e fio, como a de Inventário|Forja. O gradiente antigo era
   de cima para baixo num botão alto; aqui a aba é baixa e larga. */
.tal-trilha__item[aria-pressed='true'] {
  border-color: rgb(220 145 30 / 0.45);
  border-bottom-color: transparent;
  background: linear-gradient(180deg, rgb(52 28 0 / 0.55), rgb(52 28 0 / 0.12));
}

/* O pino não encolhe quando o rótulo é comprido. */
.tal-trilha__item > .tal-trilha__pino {
  flex: 0 0 auto;
}
.tal-trilha__item > span:not(.tal-trilha__pino) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── A FAIXA SUBIU PARA A LINHA DO OURO (28/08/2026) ────────────────
 *
 * *"suba a aba de isekai e vip para aonde fica o gold e coloque o gold
 * sobreposto acima dela"*. A linha do ouro era quase toda vazia e a faixa de
 * abas gastava uma linha inteira logo abaixo — duas linhas para o que cabe em
 * uma, e o palco perdia altura por isso.
 *
 * A faixa agora é filha do `.tal-topo` (ver `tela.js`) e ocupa o MEIO que
 * sobrava, entre o título e o ouro. O ouro e o X continuam à direita, no fluxo:
 * assim a faixa cresce até onde eles começam e nada fica escondido atrás de
 * nada — que é o risco de sobrepor de verdade num cabeçalho estreito.
 */

/* Uma linha só: o palco herda a altura que a faixa devolveu. */
.tal-corpo {
  grid-template-rows: 1fr;
}

.tal-topo .tal-trilha {
  /* Toma o espaço livre e centra as abas nele — é o vazio que ele apontou. */
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  /* Dentro do cabeçalho ela não precisa de fundo nem de fio: quem separa do
     conteúdo é a borda do próprio `.tal-topo`. */
  padding: 0;
  border: 0;
  background: none;
  /* As abas colam no rodapé do cabeçalho, como aba de verdade. */
  align-items: flex-end;
  align-self: stretch;
  /* 🚨 O cabeçalho tem `padding` vertical; sem isto a aba acesa desenharia o
     fundo dela flutuando no meio da linha em vez de encostar na borda. */
  margin-block: calc(-1 * clamp(8px, 1.6vh, 14px));
  margin-bottom: calc(-1 * clamp(8px, 1.6vh, 14px) - 1px);
}

/* O ouro e o X por cima de qualquer coisa que cresça demais. */
.tal-topo .tal-ouro,
.tal-topo .tal-fechar {
  position: relative;
  z-index: 2;
}

/* ══════════════════════════════════════════════════════════════════
 * FAIXA LATERAL EM TELA LARGA (31/08/2026) — o rodapé vira coluna
 *
 * 🚨 MEDIDO antes de mexer: em 1920×1080 o palco tinha 1882×686 px, mas o
 * SVG da constelação (viewBox quase quadrado) só desenhava conteúdo numa
 * faixa de ~686×686 dentro disso — o resto da LARGURA era fundo vazio (o
 * "sobra vazio enorme" apontado pelo Lucas), porque o `preserveAspectRatio`
 * do SVG escala pela ALTURA num container bem mais largo que alto. E a
 * altura disponível para essa escala já saía cortada pelo rodapé: 214 px
 * dos ~900 do quadro, só para dois cartões abaixo da constelação.
 *
 * Como as três resoluções do contrato são todas mais largas que altas, o
 * rodapé — mesmos dois cartões, mesmo conteúdo, nada removido — passa a
 * ocupar uma COLUNA ao lado da constelação em vez de uma linha embaixo
 * dela. O ganho é duplo: a largura que sobrava vira útil, e a altura que o
 * rodapé comia volta para o palco — que escala por ALTURA, então cada
 * pixel devolvido aumenta a constelação inteira (nó, trilha e nome juntos).
 * Medido depois da troca: o palco foi de 686 para 1006 px em 1920×1080
 * (+47% de escala) e de 149 para ~335 em 844×390.
 *
 * `min-aspect-ratio: 4/3` e não `min-width`: o que importa é a FORMA da
 * janela, não o tamanho. 844×390 é pequena mas tão "deitada" quanto
 * 1920×1080, e a régua antiga (`max-width: 860px`, no bloco de celular
 * acima) tratava as duas como o mesmo caso de tela ESTREITA — que 844×390
 * não é: ela tem MAIS largura sobrando que o desktop, proporcionalmente.
 * ══════════════════════════════════════════════════════════════════ */

@media (min-aspect-ratio: 4/3) {
  .tal-overlay {
    grid-template-columns: minmax(0, 1fr) clamp(210px, 24vw, 340px);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: 'topo topo' 'corpo rodape';
  }

  .tal-topo {
    grid-area: topo;
  }

  .tal-corpo {
    grid-area: corpo;
    min-width: 0;
  }

  .tal-rodape {
    grid-area: rodape;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    gap: clamp(8px, 1.6vh, 16px);
    max-height: none;
    overflow-y: auto;
    border-top: 0;
    border-left: 1px solid rgb(201 154 76 / 0.3);
    background: linear-gradient(90deg, rgb(36 22 9 / 0.92), rgb(16 10 5 / 0.55));
  }

  /* Grade de "Tempo fora / Ouro / XP" numa coluna estreita: menos colunas
     antes de espremer, e não sempre 3 fixas como no rodapé largo de antes. */
  .tal-rodape .tal-offline__grade {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  }

  /* 🚨 MEDIDO em 844×390: "Ataque" quebrava em "Ataqu"/"e" — a coluna de
     190 px sobra ícone (32px) + selo ("Nv 1/10") e deixa pouco mais de 70px
     para o nome. Ícone e vão um pouco menores devolvem a palavra à mesma
     linha sem mexer no tamanho da fonte (que já está no piso de leitura). */
  .tal-rodape .tal-cartao__cabeca {
    gap: 6px;
  }
  .tal-rodape .tal-cartao__icone {
    width: 26px;
    height: 26px;
  }
}

/* ══════════════════════════════════════════════════════════════════
 * ESTADO DOS NÓS — nota histórica (31/08/2026)
 *
 * Até aqui este bloco reforçava `data-estado="longe"` e `.tal-linha` com
 * um segundo par de regras — sobrava porque a régua media 13,5 px de
 * diâmetro com contorno quase da cor do céu, "pontos que somem" em vez de
 * "caminho com paradas futuras". A correção de verdade (pastilha com anel
 * de progresso, trilha com contraste aceso/apagado) mora agora na
 * declaração ÚNICA de cada regra, lá em cima (`.tal-no__base` e
 * `.tal-linha`/`.tal-linha--viva`) — duas fontes para a mesma regra é
 * como um dos dois lados fica esquecido na próxima rodada.
 * ══════════════════════════════════════════════════════════════════ */