/* ═══════════ ÁRVORE DE TALENTOS — CONSTELAÇÃO (Mapa Estelar) ═══════════ */
/* Camada de APRESENTAÇÃO da página da árvore (#talenttree). Fidelidade à maquete
   _previews/conceito_talentos_b.html: céu escuro + poeira de estrelas + névoa âmbar,
   nós = estrelas por estado, marcos = plaquinhas nos fios, capstone = estrela-mãe pulsante,
   ficha compacta lateral + painel de detalhe. Toda a MECÂNICA vive em ficha.js — aqui só o visual.
   Prefixo .cst- pra não colidir com o CSS global do jogo. */

:root{
  --cst-amber:#e2c074; --cst-brasa:#d6963a; --cst-txt:#cdbf9a; --cst-muted:#948f86;
  --cst-title:#c6aa70; --cst-strong:#f0c77f; --cst-gold:#d9b24c;
}

/* ── PALCO: o overlay vira um céu de tela cheia (sem o flex-center do .ov) ── */
/* `body #talenttree` p/ vencer o `#talenttree{}` legado injetado em runtime pela ficha.js (cascata posterior) */
body #talenttree{
  position:absolute; inset:0; z-index:40; display:block; overflow:hidden;
  align-items:stretch; justify-content:flex-start;
  font-family:var(--font-body); color:var(--cst-txt);
  background:
    radial-gradient(620px 380px at 72% 26%, rgba(214,150,58,.10), transparent 72%),
    radial-gradient(760px 460px at 38% 78%, rgba(150,110,48,.07), transparent 72%),
    radial-gradient(420px 280px at 92% 62%, rgba(214,150,58,.06), transparent 72%),
    radial-gradient(900px 380px at 50% 110%, rgba(120,80,30,.10), transparent 75%),
    linear-gradient(180deg,#07060c 0%, #0a0810 55%, #0b0810 100%);
}
#talenttree.hidden{ display:none !important; }
/* Botão VOLTAR legado (.tt-back): era o pill roxo do design antigo espiando ATRÁS do card
   (Lucas viu "algo atrás do retrato", 10/07). Revestido no kit e movido pro canto sup-direito,
   como o fechar dos outros overlays — fora do caminho do card e do céu. */
body #talenttree .tt-back{
  position:absolute; left:auto; right:16px; top:12px; z-index:60;
  background:#0a0808 !important; color:var(--cst-title) !important;
  border:12px solid transparent !important;
  border-image:url('../assets/ui/forja/panel.png') 82 fill stretch !important;
  border-radius:0 !important; box-shadow:none !important;
  font-family:var(--font-body); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  min-height:38px; padding:2px 10px !important;
}
body #talenttree .tt-back:hover{ filter:brightness(1.2); color:var(--cst-strong) !important; }
/* poeira de estrelas em 2 camadas (idêntico à maquete) */
#talenttree::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 24px 36px, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 120px 90px, rgba(255,244,214,.7), transparent 60%),
    radial-gradient(2px 2px at 200px 160px, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 68px 210px, rgba(226,192,116,.7), transparent 60%),
    radial-gradient(1px 1px at 170px 250px, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 90px 140px, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 226px 66px, rgba(255,244,214,.55), transparent 60%);
  background-size:260px 300px; }
#talenttree::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1px 1px at 40px 120px, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(2.5px 2.5px at 300px 60px, rgba(255,240,200,.5), transparent 60%),
    radial-gradient(1px 1px at 240px 220px, rgba(226,192,116,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 130px 300px, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 350px 180px, rgba(255,255,255,.45), transparent 60%);
  background-size:380px 340px; }

/* o container interno preenche o overlay */
#talenttree .tt-page{ position:absolute; inset:0; width:auto; max-width:none; margin:0; padding:0;
  font-family:var(--font-body); color:var(--cst-txt); }

/* moldura de painel (usa o border-image da Forja quando existir) */
.cst-panel{ border:30px solid transparent; border-image:url('../assets/ui/forja/panel.png') 82 fill stretch; }
.cst-panel-md{ border:22px solid transparent; border-image:url('../assets/ui/forja/panel.png') 82 fill stretch; }

/* botão "voltar" reaproveita .tt-back (definido em ficha.js) */

/* ══ SIDEBAR — FICHA COMPACTA ══ */
.cst-side{ position:absolute; left:14px; top:14px; bottom:14px; width:266px; z-index:6;
  padding:2px 10px 8px; display:flex; flex-direction:column; overflow:hidden auto; }
.cst-ret{ width:82px; height:82px; image-rendering:pixelated; display:block; margin:2px auto 0; object-fit:cover;
  /* sem moldura quadrada (pedido Lucas 10/07: "deixa só o círculo com a foto") — a sombra
     segue o ALFA do PNG (drop-shadow), então abraça o medalhão redondo, não o quadrado */
  background:none; box-shadow:none; filter:drop-shadow(0 4px 10px rgba(0,0,0,.65)); }
.cst-ret.cst-ret-fallback{ background:#0d0a08; }  /* fallback de inicial mantém um fundo pra letra */
.cst-ret.cst-ret-fallback{ display:flex; align-items:center; justify-content:center;
  font-family:var(--font-title); font-weight:700; font-size:34px; color:#120c18; border-radius:50%; }
.cst-side h1{ font-family:var(--font-title); font-weight:700; font-size:16px; color:var(--cst-strong); text-align:center;
  letter-spacing:.06em; margin-top:8px; text-shadow:0 1px 2px #000, 0 0 10px rgba(216,173,90,.3); }
.cst-sub{ text-align:center; font-size:11px; color:var(--cst-title); margin-top:2px; }
.cst-sec{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#b89355; text-align:center;
  border-bottom:1px solid #3a2c19; padding-bottom:4px; margin:11px 0 6px; }
.cst-strow{ display:flex; justify-content:space-between; align-items:baseline; font-size:11px; padding:2px 2px; border-bottom:1px dashed #241c12; }
.cst-strow .k{ color:var(--cst-muted); } .cst-strow .v{ color:var(--cst-strong); font-weight:700; font-size:12px; }
.cst-pts-big{ text-align:center; margin-top:4px; }
.cst-pts-big .n{ font-family:var(--font-title); font-weight:700; font-size:28px; color:var(--cst-amber);
  text-shadow:0 0 16px rgba(214,150,58,.65), 0 1px 2px #000; }
.cst-pts-big .n.low{ color:#e2915a; text-shadow:0 0 16px rgba(226,145,90,.6), 0 1px 2px #000; }
.cst-pts-big .n small{ font-size:12px; color:var(--cst-muted); }
.cst-pts-big .l{ font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:var(--cst-muted); margin-top:1px; }
.cst-pts-mast{ text-align:center; font-size:11px; color:#f5b946; margin-top:5px; text-shadow:0 0 8px rgba(245,185,70,.5); }
.cst-pts-note{ text-align:center; font-size:9px; color:var(--cst-muted); margin-top:3px; }
.cst-depth{ margin-top:8px; }
.cst-depth .lbl{ display:flex; justify-content:space-between; font-size:9px; color:var(--cst-muted); margin-bottom:3px; }
.cst-depth .lbl b{ color:var(--cst-amber); font-weight:400; }
.cst-bar{ height:8px; background:#171208; box-shadow:inset 0 0 0 1px #3a2c19; position:relative; }
.cst-bar i{ position:absolute; left:0; top:0; bottom:0;
  background:linear-gradient(90deg,#8a6224,#e2c074); box-shadow:0 0 8px rgba(226,192,116,.5); }
.cst-bar em{ position:absolute; top:-2px; bottom:-2px; width:1px; background:#6b5326; }
.cst-respec{ width:100%; margin-top:10px; cursor:pointer; font-family:var(--font-body);
  color:var(--cst-title); font-size:12px; text-transform:uppercase; letter-spacing:.05em; min-height:44px;
  background:rgba(217,178,76,.10); border:1px solid var(--cst-gold); border-radius:6px; padding:6px 8px; line-height:1.35; }
.cst-respec:hover{ filter:brightness(1.18); }
.cst-respec.armed{ color:#f2d9c4; background:rgba(226,72,59,.22); border-color:#e2483b; }
.cst-legend{ margin-top:auto; padding-top:10px; font-size:9px; line-height:1.85; color:var(--cst-muted); }
.cst-legend .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin:0 5px 0 1px; vertical-align:-1px; background:#0d0a06; }
.cst-legend .d-av{ box-shadow:0 0 0 1.5px rgba(230,220,200,.5); background:#2a2a28; }
.cst-legend .d-in{ box-shadow:0 0 0 1.5px var(--cst-gold); background:#38290d; }
.cst-legend .d-mx{ box-shadow:0 0 0 1.5px #f0d060, 0 0 7px rgba(240,208,96,.7); background:#4a3612; }
.cst-legend .d-ms{ box-shadow:0 0 0 1.5px #f5b946, 0 0 9px rgba(245,185,70,.8); background:#54401a; }
.cst-legend .d-lk{ box-shadow:0 0 0 1.5px #47413a; background:#17140f; }

/* ══ ABAS DE CONSTELAÇÃO ══ */
.cst-tabs{ position:absolute; top:18px; left:280px; right:18px; display:flex; justify-content:center; gap:14px; z-index:6; flex-wrap:wrap; }
.cst-tab{ min-width:132px; text-align:center; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cst-muted); padding:5px 12px; position:relative; cursor:pointer; background:none; border:0; font-family:var(--font-body); }
.cst-tab b{ display:block; font-size:8px; letter-spacing:.16em; color:#6d675e; font-weight:400; margin-top:2px; text-transform:uppercase; }
.cst-tab:hover{ color:var(--cst-title); }
.cst-tab.on{ color:var(--cst-amber); }
.cst-tab.on b{ color:var(--cst-brasa); }
.cst-tab.on::after{ content:""; position:absolute; left:16%; right:16%; bottom:0; height:13px; pointer-events:none;
  background:radial-gradient(58% 120% at 50% 100%, rgba(214,150,58,.55), rgba(214,150,58,0) 72%); }

/* título do mapa */
.cst-maptitle{ position:absolute; left:300px; top:70px; z-index:5; pointer-events:none; }
.cst-maptitle h2{ font-family:var(--font-title); font-weight:700; font-size:14px; color:var(--cst-title); letter-spacing:.08em;
  text-shadow:0 1px 2px #000, 0 0 12px rgba(216,173,90,.3); }
.cst-maptitle .s{ font-size:10px; color:var(--cst-muted); margin-top:4px; max-width:620px; line-height:1.4; }
.cst-maptitle .msg{ display:block; margin-top:4px; font-size:10px; color:#e2915a; }

/* ══ MAPA ESTELAR ══ */
.cst-sky{ position:absolute; left:280px; top:104px; right:14px; bottom:14px; z-index:2; }
.cst-sky svg.cst-wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }

.cst-star{ position:absolute; transform:translate(-50%,-50%); text-align:center; z-index:3; width:112px; cursor:pointer; }
.cst-core{ width:11px; height:11px; border-radius:50%; margin:0 auto; position:relative;
  background:#e8d6a8; box-shadow:0 0 7px 2px rgba(240,220,170,.7), 0 0 18px 6px rgba(214,150,58,.28); }
.cst-nm{ font-size:9.5px; margin-top:7px; color:var(--cst-txt); text-shadow:0 1px 3px #000, 0 0 6px #000; line-height:1.15; }
.cst-nm .fx{ color:#e8c877; }
.cst-nm .msym{ color:#f5b946; text-shadow:0 0 5px rgba(245,185,70,.7); }
.cst-nm .lk{ font-size:8px; }
.cst-pp{ font-size:8px; letter-spacing:1px; color:var(--cst-gold); text-shadow:0 1px 2px #000; margin-top:2px; }
.cst-pp .off{ color:#4d463c; } .cst-pp .ms{ color:#f5b946; text-shadow:0 0 5px rgba(245,185,70,.9); }
/* maestria SEM ponto investido = apagada como as demais (Lucas 16/07) — só acende quando comprada */
.cst-pp .off.ms{ color:#4d463c; text-shadow:none; }
.cst-tagline{ font-size:8px; color:#8a836f; margin-top:2px; line-height:1.2; }

/* estados */
.cst-star.avail .cst-core{ width:9px; height:9px; background:#cfd3d8;
  box-shadow:0 0 5px 1px rgba(210,214,220,.5), 0 0 0 4px rgba(210,214,220,.08); }
.cst-star.avail .cst-nm{ color:#b7ae99; }
.cst-star.inv .cst-core{ background:#ecc77e; box-shadow:0 0 8px 2px rgba(236,199,126,.75), 0 0 0 4px rgba(217,178,76,.16), 0 0 20px 7px rgba(214,150,58,.3); }
.cst-star.max .cst-core{ width:14px; height:14px; background:#ffdf82;
  box-shadow:0 0 0 2px rgba(240,208,96,.55), 0 0 12px 4px rgba(255,222,130,.8), 0 0 30px 10px rgba(214,150,58,.35); }
.cst-star.max .cst-core::before, .cst-star.max .cst-core::after{ content:""; position:absolute; left:50%; top:50%; pointer-events:none;
  background:linear-gradient(90deg,transparent, rgba(255,223,130,.85), transparent); height:1.5px; width:34px; transform:translate(-50%,-50%); }
.cst-star.max .cst-core::after{ transform:translate(-50%,-50%) rotate(90deg); }
.cst-star.mast .cst-core{ width:15px; height:15px; background:#f5b946;
  box-shadow:0 0 0 2px rgba(245,185,70,.6), 0 0 14px 5px rgba(245,185,70,.85), 0 0 40px 14px rgba(214,150,58,.4); }
.cst-star.mast .cst-core::before, .cst-star.mast .cst-core::after{ content:""; position:absolute; left:50%; top:50%; pointer-events:none;
  background:linear-gradient(90deg,transparent, rgba(245,185,70,.9), transparent); height:1.5px; width:46px; transform:translate(-50%,-50%); }
.cst-star.mast .cst-core::after{ transform:translate(-50%,-50%) rotate(90deg); }
.cst-star.lock{ cursor:pointer; }
.cst-star.lock .cst-core{ width:7px; height:7px; background:#4d4a44; box-shadow:0 0 3px 1px rgba(120,115,105,.25); }
/* ONDA 4 (28/07, auditoria visual #18): #5d574e dava 2,78:1 sobre o céu rgb(10,8,16) — ilegível
   (AA pede 4,5:1). #9a9284 mede ~6,5:1 e mantém o "apagado" relativo ao disponível #b7ae99 (~9:1). */
.cst-star.lock .cst-nm{ color:#9a9284; }
.cst-star.lock .cst-pp{ color:#3c362e; }
/* portão (ramificação) = losango */
.cst-star.gate .cst-core{ border-radius:2px; transform:rotate(45deg); }
.cst-star.gate .cst-nm .gsym{ color:var(--cst-brasa); }
/* selecionado */
.cst-star.sel::before{ content:""; position:absolute; left:50%; top:5.5px; width:30px; height:30px; border-radius:50%;
  transform:translate(-50%,-50%); border:1px dashed rgba(240,194,74,.9); box-shadow:0 0 12px rgba(240,194,74,.35); }
.cst-star.gate.sel::before{ top:6.5px; }

/* capstone = estrela-mãe pulsante */
.cst-star.cap{ width:180px; z-index:4; }
.cst-star.cap .cst-core{ width:26px; height:26px; background:radial-gradient(circle at 40% 35%, #fff3cf, #f0c24a 55%, #c98a2e);
  box-shadow:0 0 0 3px rgba(240,208,96,.35), 0 0 22px 8px rgba(255,220,130,.75), 0 0 60px 24px rgba(214,150,58,.4);
  animation:cst-pulse 2.2s ease-in-out infinite; }
.cst-star.cap .cst-core::before, .cst-star.cap .cst-core::after{ content:""; position:absolute; left:50%; top:50%; pointer-events:none;
  background:linear-gradient(90deg,transparent, rgba(255,226,140,.9), transparent); height:2px; width:82px; transform:translate(-50%,-50%); }
.cst-star.cap .cst-core::after{ transform:translate(-50%,-50%) rotate(90deg); }
.cst-star.cap .halo{ position:absolute; left:50%; top:13px; width:56px; height:56px; border-radius:50%;
  transform:translate(-50%,-50%); border:1px dashed rgba(226,192,116,.4); pointer-events:none; }
.cst-star.cap .cst-nm{ font-family:var(--font-title); font-size:10px; color:#f4dd8a; margin-top:14px; }
.cst-star.cap .ult{ display:inline-block; font-size:7px; letter-spacing:.16em; color:#1a1206; font-weight:700;
  background:linear-gradient(180deg,#f0d27a,#c99a34); padding:2px 8px; margin-top:3px; text-transform:uppercase; }
.cst-star.cap .need{ display:block; font-size:8.5px; color:#e2915a; margin-top:3px; }
.cst-star.cap.lock .cst-core{ background:radial-gradient(circle at 40% 35%, #8f867a, #5c554a 60%, #3c372f);
  box-shadow:0 0 0 3px rgba(150,140,120,.2), 0 0 16px 5px rgba(180,170,150,.25); animation:cst-pulse 3.4s ease-in-out infinite; }
.cst-star.cap.lock .cst-core::before,.cst-star.cap.lock .cst-core::after{ background:linear-gradient(90deg,transparent, rgba(170,160,140,.5), transparent); }
.cst-star.cap.lock .cst-nm{ color:#a99f8b; }
.cst-star.cap.lock .ult{ background:linear-gradient(180deg,#6a6053,#453d30); color:#14120e; }
.cst-star.cap.inv .cst-nm, .cst-star.cap.mast .cst-nm{ color:#ffe9a8; }
@keyframes cst-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.13); } }

/* marcos de profundidade (plaquinhas nos fios) */
.cst-gatechip{ position:absolute; transform:translate(-50%,-50%); z-index:4; font-size:8.5px; letter-spacing:.04em;
  color:#cdb87a; background:rgba(10,8,6,.9); border:1px dashed rgba(226,192,116,.5); padding:2px 7px; white-space:nowrap;
  pointer-events:none; }
.cst-gatechip.no{ color:#c2704a; border-color:rgba(194,112,74,.5); }

/* ══ PAINEL DE DETALHE ══ */
.cst-detail{ position:absolute; right:16px; bottom:16px; width:300px; z-index:7; padding:2px 10px 10px; }
.cst-dt-empty{ font-size:11px; color:var(--cst-muted); text-align:center; padding:16px 6px; line-height:1.5; }
.cst-dt-hd{ display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.cst-dt-nm{ font-family:var(--font-title); font-weight:700; font-size:12.5px; color:#f4dd8a; line-height:1.25; }
.cst-dt-st{ margin-left:auto; font-size:11px; color:var(--cst-gold); white-space:nowrap; font-weight:700; }
.cst-dt-st .ms{ color:#f5b946; text-shadow:0 0 6px rgba(245,185,70,.6); }
.cst-dt-st .off.ms{ color:#4d463c; text-shadow:none; } /* idem no painel de detalhe (Lucas 16/07) */
.cst-dt-gen{ display:inline-block; font-size:8px; font-weight:700; color:#a6b6d6; background:rgba(90,120,200,.2);
  padding:1px 6px; border-radius:6px; text-transform:uppercase; letter-spacing:.04em; margin-top:5px; }
.cst-dt-hint{ font-size:10px; color:#f5b946; margin:5px 0 0; line-height:1.4; }
.cst-dt-fx{ font-size:10.5px; line-height:1.5; color:var(--cst-txt); background:rgba(0,0,0,.35);
  box-shadow:inset 0 0 0 1px #2c2114; padding:8px 10px; margin-top:8px; white-space:pre-wrap; }
.cst-dt-cost{ font-size:9.5px; color:var(--cst-muted); margin:9px 0 4px; text-align:center; }
.cst-dt-cost b{ color:var(--cst-strong); }
.cst-dt-btn{ width:100%; cursor:pointer; border:0; font-family:var(--font-body); font-weight:700; font-size:12px;
  color:#1a1206; text-transform:uppercase; letter-spacing:.04em; min-height:46px; padding:6px 10px; border-radius:6px;
  background:linear-gradient(180deg,#f0d27a,#d9b24c); box-shadow:0 4px 14px rgba(0,0,0,.35); }
.cst-dt-btn:hover{ filter:brightness(1.08); } .cst-dt-btn:active{ transform:translateY(1px); }
.cst-dt-btn:disabled{ cursor:not-allowed; background:linear-gradient(180deg,#4a4436,#332f26); color:#9c927c; box-shadow:none; }
.cst-dt-reason{ font-size:10px; color:#e2915a; margin-top:8px; line-height:1.45; text-align:center; }

/* ══ LEGIBILIDADE (pedido Lucas 10/07: "aumentar um pouco as fontes nessa página") ══
   Régua da página +~15-20% no PC; o bloco MOBILE logo abaixo re-compacta pra telas curtas. */
.cst-side h1{ font-size:18px; }
.cst-sub{ font-size:12.5px; }
.cst-sec{ font-size:10.5px; }
.cst-strow{ font-size:12.5px; } .cst-strow .v{ font-size:14px; }
.cst-pts-big .n{ font-size:32px; } .cst-pts-big .n small{ font-size:13px; } .cst-pts-big .l{ font-size:9.5px; }
.cst-pts-mast{ font-size:12.5px; } .cst-pts-note{ font-size:10.5px; }
.cst-depth .lbl{ font-size:10.5px; }
.cst-legend{ font-size:10.5px; }
.cst-tab{ font-size:13.5px; } .cst-tab b{ font-size:9px; }
.cst-maptitle h2{ font-size:16.5px; } .cst-maptitle .s{ font-size:11.5px; } .cst-maptitle .msg{ font-size:11.5px; }
.cst-nm{ font-size:11px; } .cst-nm .lk{ font-size:9px; }
.cst-pp{ font-size:9.5px; }
.cst-tagline{ font-size:9px; }
.cst-star.cap .cst-nm{ font-size:11.5px; } .cst-star.cap .ult{ font-size:8px; } .cst-star.cap .need{ font-size:10px; }
.cst-gatechip{ font-size:10px; }
.cst-dt-empty{ font-size:12.5px; }
.cst-dt-nm{ font-size:14.5px; } .cst-dt-st{ font-size:12.5px; } .cst-dt-gen{ font-size:9px; }
.cst-dt-hint{ font-size:11.5px; } .cst-dt-fx{ font-size:12px; } .cst-dt-cost{ font-size:11px; }
.cst-dt-btn{ font-size:13.5px; } .cst-dt-reason{ font-size:11.5px; }

/* ══ PERFIL LATERAL ENXUTO (Lucas 10/07: card ganhou barra de rolagem na escala de tela larga —
   estourava 47px; recupera ~60px comprimindo retrato/legenda/ritmo, SEM mexer nas fontes) ══ */
.cst-ret{ width:78px; height:78px; }
.cst-side h1{ margin-top:5px; }
.cst-sec{ margin:7px 0 3px; }
.cst-strow{ padding:1px 2px; }
.cst-pts-big{ margin-top:2px; }
.cst-depth{ margin-top:5px; }
/* Redistribuir menor (Lucas 10/07: "vazando e muito grande" — grid e texto reduzidos, PC e celular) */
.cst-respec{ min-height:30px; margin-top:7px; font-size:11px !important; padding:3px 8px !important;
  max-width:100%; width:auto; align-self:center; letter-spacing:.02em; }
.cst-legend{ line-height:1.45; padding-top:6px; }

/* ══ TELA LARGA (pedido Lucas 10/07: em 1920 a página ficava "espalhada e miúda" —
   escala o palco inteiro pra manter as proporções do render de ~1360px) ══ */
@media (min-width: 1550px){ body #talenttree{ zoom: 1.22; } }
@media (min-width: 1820px){ body #talenttree{ zoom: 1.41; } }

/* ══ HOVER nos nós (pedido Lucas 10/07): brilho no core + mini-card com nome/efeito ══ */
.cst-star{ cursor: pointer; }
.cst-star .cst-core{ transition: transform .14s ease, box-shadow .14s ease, filter .14s ease; }
.cst-star:hover .cst-core{
  transform: scale(1.32);
  box-shadow: 0 0 10px rgba(226,192,116,.85), 0 0 22px rgba(214,150,58,.45);
  filter: brightness(1.25);
}
.cst-star:hover .cst-nm{ color: var(--cst-strong); }
/* ── FIX tooltip ATRÁS dos vizinhos (Lucas 13/07: "não consigo ler as informações") ──
   Raiz = 2 contextos de empilhamento aninhados: `.cst-sky` cria z-index:2 (abaixo de
   título z5 / abas·sidebar z6 / painel z7) e cada `.cst-star` cria z-index:3 (portões,
   chips e a estrela-mãe = z4). O z-index:20 do `.cst-tip` ficava PRESO dentro do nó,
   pintando por baixo desses vizinhos. Correção na raiz, sem gambiarra por nó:
   1) o nó em hover sobe acima de TUDO dentro do céu (portões/chips/capstone);
   2) o próprio céu sobe acima do resto da ficha enquanto há um nó em hover,
      pra o tooltip vazar por cima do título/abas/sidebar/painel também. */
.cst-star:hover{ z-index: 60; }
#talenttree .cst-sky:has(.cst-star:hover){ z-index: 30; }
.cst-tip{
  display: none; position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 240px; z-index: 20; pointer-events: none; text-align: left;
  background: rgba(10,8,8,.96); border: 1px solid rgba(217,178,76,.45); border-radius: 4px;
  padding: 7px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.7), 0 0 12px rgba(214,150,58,.12);
}
.cst-tip b{ display: block; font-size: 12px; color: var(--cst-strong); margin-bottom: 3px; }
.cst-tip .tfx{ font-size: 10.5px; line-height: 1.45; color: var(--cst-txt); }
.cst-star:hover .cst-tip{ display: block; }
/* estrela-mãe fica no topo — tooltip dela abre pra BAIXO pra não sair da tela.
   ONDA 4 (28/07, auditoria visual #13): e ancorado pela borda DIREITA do nó, não pelo centro —
   centrado (left:50% + translateX) o balão estourava a borda direita em 15/15 árvores (right 865,59
   vs tela 812; o pai tem overflow:hidden), já que a estrela-mãe vive no canto sup-direito do céu.
   A borda direita do nó sempre cabe na tela → o balão inteiro cabe, no celular e no PC. */
.cst-star.cap .cst-tip{ bottom: auto; top: calc(100% + 12px); left: auto; right: 0; transform: none; }
/* selecionada não precisa de tooltip (o painel de detalhe já mostra tudo) */
.cst-star.sel .cst-tip{ display: none; }

/* painel de detalhe VAZIO não aparece (pedido Lucas 10/07 — "esse botão pode sair") */
.cst-detail.empty{ display:none !important; }

/* ══ MOBILE / paisagem curta (844×390 e afins) ══ */
@media (max-height: 460px), (max-width: 900px){
  .cst-side{ width:210px; padding:2px 8px 3px; }
  /* ONDA 4 (28/07, auditoria visual #31b): a moldura de 30px comia 60px de altura e decepava o botão
     Redistribuir em ~11px na tela de 375px. Moldura fina (22px, MESMA arte panel.png, só o border-width
     muda) devolve 16px de folga vertical — o botão aparece inteiro. */
  .cst-side{ border-width:22px; }
  /* Voltar compacto e SEM a moldura de vidro (a "marcação esquisita" que o Lucas viu no celular):
     chip simples escuro com borda fina — a panel.png fica só no PC */
  body #talenttree .tt-back{
    border:1px solid #6b5a33 !important; border-image:none !important; border-radius:4px !important;
    background:rgba(10,8,8,.92) !important; min-height:26px; padding:3px 9px !important;
    font-size:.62rem; right:10px; top:8px;
  }
  /* paisagem de celular: card compacto de verdade (estourava 213px — Lucas viu o Redistribuir vazando).
     A LEGENDA sai (decorativa; os estados são autoexplicáveis no céu) e o ritmo aperta. */
  .cst-legend{ display:none; }
  .cst-pts-note{ display:none; }                    /* "cada estrela custa 2" já aparece no painel do nó */
  .cst-depth .lbl:last-child{ display:none; }       /* linha "marcos 10·18·…" — a barra já tem os ticks */
  .cst-ret{ width:30px; height:30px; }
  .cst-side h1{ font-size:11px; margin-top:2px; }
  .cst-sub{ font-size:9px; }
  .cst-sec{ margin:3px 0 1px; font-size:8.5px; }
  .cst-strow{ font-size:9px; padding:0 2px; line-height:1.3; }
  .cst-pts-big .n{ font-size:18px; } .cst-pts-big .n small{ font-size:9px; } .cst-pts-big .l{ font-size:7.5px; }
  .cst-pts-mast{ font-size:9px; margin-top:2px; }
  .cst-depth{ margin-top:3px; } .cst-depth .lbl{ font-size:8.5px; }
  .cst-respec{ min-height:24px; margin-top:4px; font-size:9.5px !important; padding:2px 6px !important; }
  /* (regras antigas de h1/strow/pts/legend removidas — as compactas acima mandam) */
  /* Abas: dar RESPIRO à direita pra a 3ª aba ("Senda do Vento Imutável") não entrar por baixo do
     botão VOLTAR (fix 16/07: sobrepunha 11.5px, ponta inclicável). O right cobre o rótulo MAIS LARGO
     do Voltar ("← Voltar ao perfil" = 125px a partir de right:10 → borda esq. em vw-135) + 8px de folga;
     +gap/fonte menores encolhem o cluster pra caber sem sobrepor mesmo no rótulo largo. */
  .cst-tabs{ left:220px; right:150px; gap:6px; top:12px; }
  .cst-tab{ min-width:88px; font-size:10px; padding:3px 7px; }
  .cst-tab b{ font-size:7.5px; }
  /* Capstone COMPACTO no breakpoint baixo: o bloco "requer 40★ · tem 0★" colidia com o rótulo do nó
     vizinho em 7/15 árvores (pior Monge/Maré 37.5×8.9px — fix 16/07). Estreita a coluna (140→108) e
     sobe/encolhe nome·Ultimate·need pra o texto do capstone recuar do vizinho até zero colisão de bbox.
     (a largura efetiva vem da regra .cst-star.cap width mais abaixo neste mesmo bloco.) */
  .cst-star.cap .cst-nm{ font-size:8.5px; margin-top:8px; }
  .cst-star.cap .ult{ font-size:6.5px; margin-top:2px; padding:1px 5px; }
  /* need shrink-wrapado (inline-block) + empurrado ~9px pro canto: zera os 2 resíduos onde a ponta
     direita do rótulo de um nó vizinho travado ainda encostava na borda esquerda do "requer …★"
     (Monge/Maré e Arqueiro/tab2). Só o need desloca — núcleo·nome·Ultimate seguem centrados. */
  .cst-star.cap .need{ display:inline-block; font-size:7.5px; margin-top:2px; line-height:1.15;
    position:relative; left:9px; }
  .cst-maptitle{ left:224px; top:52px; }
  .cst-maptitle h2{ font-size:12px; }
  .cst-maptitle .s{ display:none; }
  .cst-sky{ left:220px; top:78px; right:8px; bottom:8px; }
  .cst-star{ width:88px; }
  .cst-nm{ font-size:8.5px; margin-top:5px; }
  .cst-tagline{ display:none; }
  .cst-star.cap{ width:108px; }   /* compactado (era 140) p/ zerar colisão need×rótulo vizinho — fix 16/07 */
  /* painel de detalhe vira card compacto flutuante no canto */
  .cst-detail{ width:238px; right:8px; bottom:8px; padding:2px 8px 8px; }
  .cst-dt-fx{ max-height:104px; overflow-y:auto; font-size:10px; }
  .cst-dt-nm{ font-size:11.5px; }
  .tt-back{ top:8px; left:10px; padding:7px 12px; font-size:12px; }
}
/* ══ LANDSCAPE ESTREITO (≤810px: iPhone SE/8/8+ deitado) ══
   Aqui os 3 nomes de senda + a folga do VOLTAR largo ("← Voltar ao perfil") NÃO cabem em 1 linha —
   o cluster QUEBRA em 2 (inevitável nessa largura). Sem tratamento a 2ª linha caía sobre o título do
   mapa (top:52). Correção: sobe a faixa (top:8), esconde o subtítulo (tipo·★ — redundante: a senda
   ativa vira o título do mapa) e comprime, pra a quebra de 2 linhas terminar ACIMA do título. NÃO
   pega o 812 (target), que cabe em 1 linha e mantém o subtítulo. */
@media (max-width:810px){
  .cst-tabs{ top:8px; gap:5px; row-gap:1px; }
  .cst-tab{ font-size:9px; padding:1px 6px; min-width:0; }
  .cst-tab b{ display:none; }
}
/* telas bem estreitas em pé: empilha (raro — jogo força paisagem, mas evita quebra) */
@media (max-width: 620px){
  .cst-side{ width:180px; }
  .cst-sky{ left:190px; }
  .cst-tabs{ left:190px; }
  .cst-maptitle{ left:194px; }
}

/* ═══ A CAIXA DE TEXTO FICA POR CIMA (30/07, martelo Lucas) ═══════════════════════════════════
   "no celular, ao selecionar um talento, as estrelas, grade e etc estão por cima da caixa de textos
   informativos". O painel de informação é o que o jogador foi ler — ele tem de estar na frente de
   tudo que é cenário da árvore (grade, estrelas, linhas, brilho). Em vez de caçar z-index um a um,
   a regra declara os dois lados: fundo decorativo atrás, informação na frente. */
.tt-grid, .tt-stars, .tt-lines, .tt-glow, .tt-bg,
[class*="tt-grid"], [class*="tt-star"], [class*="tt-line"] { z-index: 0 !important; }
.tt-tip, .tt-info, .tt-detail, .tt-panel, .sk-tip,
[class*="tt-tip"], [class*="tt-info"], [class*="tt-detail"] { z-index: 60 !important; position: relative; }