/* ==========================================================================
   Árvore de Habilidades — estilo Frozen Trail 2.0 (jogo ARC Raiders)
   Usado em /builds/view.php (árvore completa) e /builds/ (miniatura por ramo).
   Escala por container query unit: --u = 1px do viewBox.
   --u1 = nó (66u) · --ur = raiz (93.7u) · miniatura: --u = 0.5u no scale do viewBox
   ========================================================================== */

.ytree-scroll{overflow-x:auto; overflow-y:hidden; padding-bottom:6px; -webkit-overflow-scrolling:touch}
.ytree-scroll::-webkit-scrollbar{height:8px}
.ytree-scroll::-webkit-scrollbar-thumb{background:#2C333D; border-radius:4px}

.ytree-stage{position:relative; width:100%; min-width:1080px; aspect-ratio:1800/900;
  container-type:inline-size; --u:max(0.72px, 0.0556cqw); --c:#FF2E38;
  background:radial-gradient(ellipse 68% 62% at 50% 86%, #151A24 0%, #0C0E14 60%, #07080C 100%);
  border:1px solid #23282E; border-radius:14px; overflow:hidden}
.ytree-stage>svg{position:absolute; inset:0; width:100%; height:100%; display:block}

/* miniatura (listagem): mesma topologia, viewBox 146x250 */
.ytree-mini{position:relative; width:100%; max-width:190px; margin:0 auto; aspect-ratio:146/250;
  container-type:inline-size; --u:max(0.30px, 0.6849cqw)}
.ytree-mini>svg{position:absolute; inset:0; width:100%; height:100%; display:block}

/* nó --------------------------------------------------------------------- */
.tn{position:absolute; transform:translate(-50%,-50%); z-index:3;
  width:calc(66 * var(--u)); height:calc(66 * var(--u));
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  --edge:#4A5265; --fill:#0B0D14; --ink:#6B7386;
  outline:none; -webkit-tap-highlight-color:transparent}
.tn:focus-visible .nb::after{box-shadow:0 0 0 calc(2.5*var(--u)) rgba(255,255,255,.85)}
.tn.root{width:calc(93.7 * var(--u)); height:calc(93.7 * var(--u))}
.tn.lit{--edge:var(--c); --fill:var(--c); --ink:#080A0F}
.tn.locked{--fill:#090B10}

/* miniatura: nós maiores (13u de um viewBox de 146u) para o distintivo ficar legível */
.ytree-mini .tn{width:calc(13 * var(--u)); height:calc(13 * var(--u))}
.ytree-mini .tn.root{width:calc(17.5 * var(--u)); height:calc(17.5 * var(--u))}
.ytree-mini .nb::after{inset:calc(0.7*var(--u))}
.ytree-mini .tn.dia .nb::after{inset:calc(0.8*var(--u))}
.ytree-mini .ni{width:60%; height:60%}
.ytree-mini .tn.dia .ni{width:54%; height:54%}
.ytree-mini .gp{font-size:calc(6.4*var(--u)); top:calc(100% - 1.2*var(--u));
  border-width:calc(0.7*var(--u)); border-radius:calc(3*var(--u));
  padding:calc(0.6*var(--u)) calc(2.4*var(--u))}
.ytree-mini .qm{font-size:calc(5.2*var(--u))}
.ytree-mini .tn.dia .qm{font-size:calc(5.6*var(--u))}

/* borda + preenchimento como duas camadas (funciona em círculo e losango) */
.nb{position:absolute; inset:0; border-radius:50%}
.nb::before, .nb::after{content:''; position:absolute; inset:0; border-radius:inherit}
.nb::before{background:var(--edge)}
.nb::after{inset:calc(2*var(--u)); background:var(--fill)}
.tn.dia .nb{transform:rotate(45deg); border-radius:15%}
.tn.dia .nb::after{inset:calc(2.4*var(--u))}

/* ícone: PNG branco recortado como máscara, então pinta na cor do ramo.
   O --i é aplicado por ytree.js quando o nó entra na viewport (lazy). */
.ni{position:absolute; left:50%; top:50%; width:54%; height:54%; z-index:1;
  transform:translate(-50%,-50%); background:var(--ink);
  -webkit-mask-image:var(--i); mask-image:var(--i);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center}
.tn.dia .ni{width:46%; height:46%; transform:translate(-50%,-50%) rotate(-45deg)}
.qm{position:absolute; left:50%; top:50%; z-index:1; transform:translate(-50%,-50%);
  font-family:Orbitron; font-weight:800; font-size:calc(26*var(--u)); line-height:1;
  color:var(--ink); letter-spacing:0}
.tn.dia .qm{transform:translate(-50%,-50%) rotate(-45deg); font-size:calc(28*var(--u))}

/* distintivo de pontos, sobreposto à borda inferior do nó */
.gp{position:absolute; left:50%; top:calc(100% - 0.19*var(--u)); transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:calc(12.5*var(--u));
  line-height:1.15; color:var(--c); background:#0B0D14;
  border:calc(1.6*var(--u)) solid var(--c); border-radius:calc(8*var(--u));
  padding:calc(1.5*var(--u)) calc(5.5*var(--u)); white-space:nowrap; z-index:2}

/* cadeado nos nós bloqueados */
.gl{position:absolute; left:calc(2% - 0.2*var(--u)); top:calc(58% - 0.2*var(--u));
  width:calc(21*var(--u)); height:calc(21*var(--u)); border-radius:50%;
  background:#3B4353; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 calc(1.6*var(--u)) #0B0D14; z-index:3}
.gl svg{width:62%; height:62%; fill:#0B0D14}
.ytree-mini .gl{left:2%; top:56%; width:calc(4.4*var(--u)); height:calc(4.4*var(--u));
  box-shadow:0 0 0 calc(0.5*var(--u)) #0B0D14}

/* rótulo do ramo, abaixo e ao lado da raiz (o tronco passa por fora) */
.tlabel{position:absolute; left:50%; top:calc(100% + 1.5*var(--u)); transform:translateX(-50%);
  text-align:center; white-space:nowrap; z-index:2;
  padding:calc(4*var(--u)) calc(10*var(--u)); border-radius:calc(9*var(--u));
  background:#07080C}
.tn.root.con .tlabel{transform:translateX(calc(-50% - 4.2*var(--u)))}
.tn.root.sur .tlabel{transform:translateX(calc(-50% + 4.2*var(--u)))}
.tlabel b{display:block; font-family:Orbitron; font-weight:800; color:var(--c);
  font-size:calc(15*var(--u)); letter-spacing:calc(1.6*var(--u))}
.tlabel i{display:block; font-style:normal; font-family:Orbitron; font-weight:800; color:var(--c);
  font-size:calc(26*var(--u)); line-height:1.1; margin-top:calc(1*var(--u))}

/* tooltip — fixo no body, nunca cortado pelo stage */
.ytip{position:fixed; display:none; z-index:9999; pointer-events:none; max-width:264px;
  background:rgba(10,12,18,.97); border:1px solid #39414F; border-radius:10px;
  padding:10px 12px; box-shadow:0 14px 34px rgba(0,0,0,.72);
  font-family:Inter,system-ui,sans-serif; font-size:12px; line-height:1.45; color:#D6DEE7}
.ytip b{display:block; font-family:Orbitron; font-weight:800; font-size:12px; letter-spacing:.6px; margin-bottom:5px}
.ytip .ypts{display:block; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:11px; margin-top:6px}
.ytip .yopt{display:block; font-size:11px; margin-top:6px; padding-top:6px; border-top:1px solid #262D38}
.ytip .ydesc{display:block; margin-top:5px; color:#AEB9C6}