.forever-talent-tree header { display:grid; grid-template-columns:1fr auto 1fr; }
.forever-talent-tree header h2 { grid-column:2; text-align:center; }
.forever-talent-tree header span { grid-column:3; justify-self:end; }
.forever-talent-board { grid-template-columns:repeat(var(--cols), 62px); grid-template-rows:repeat(var(--rows), 60px); justify-content:center; min-height:528px; }
.forever-talent-beta-note { display:flex; max-width:1132px; margin:0 auto 18px; padding:13px 18px; gap:12px; border:1px solid rgba(241,197,109,.42); border-left:4px solid #f1c56d; border-radius:10px; background:rgba(87,58,12,.18); color:#c9ddec; font-size:14px; line-height:1.42; }
.forever-talent-beta-note strong { flex:0 0 auto; color:#f4cb74; }
.forever-talent-board { position:relative; }
.forever-talent-links { position:absolute; inset:0; z-index:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.forever-talent-links path { fill:none; stroke:rgba(113,150,169,.42); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:5 5; }
.forever-talent-links path.is-met { stroke:#5ccaf4; stroke-dasharray:none; filter:drop-shadow(0 0 3px rgba(92,202,244,.65)); }
.forever-talent-node { z-index:1; }
.forever-calculator-promo { position:relative; overflow:hidden; width:calc(100% - 48px); max-width:1400px; min-height:184px; margin:32px auto 52px; padding:28px 34px; display:flex; align-items:center; gap:28px; border:1px solid rgba(86,179,231,.36); border-radius:18px; background:radial-gradient(ellipse at 12% 55%,rgba(64,127,199,.34),transparent 39%),radial-gradient(ellipse at 83% 44%,rgba(126,83,218,.25),transparent 42%),linear-gradient(110deg,rgba(8,41,67,.98),rgba(9,28,52,.98) 56%,rgba(10,40,67,.98)); box-shadow:0 14px 42px rgba(0,0,0,.24); }
.forever-calculator-promo::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(109,203,255,.12) 13px 14px); }
.forever-calculator-promo__content,.forever-calculator-promo .hero-btn { position:relative; z-index:1; }
.forever-calculator-promo__content { max-width:720px; }
.forever-calculator-promo__kicker { color:#78d5ff; font-weight:850; letter-spacing:.13em; font-size:11px; text-transform:uppercase; }
.forever-calculator-promo h2 { margin:7px 0 7px; color:#f2f8ff; font-family:Inter,system-ui,sans-serif; font-size:clamp(27px,3vw,39px); letter-spacing:-.04em; line-height:1; }
.forever-calculator-promo h2 em { color:#77ceff; font-style:normal; }
.forever-calculator-promo p { max-width:620px; margin:0; color:#b7d4e7; }
.forever-calculator-promo__classes { display:flex; gap:8px; margin-top:17px; }
.forever-calculator-promo__classes img { width:38px; height:38px; border:2px solid rgba(118,211,255,.82); border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(2,16,30,.8),0 0 14px rgba(75,188,240,.22); }
.forever-calculator-promo .hero-btn { margin-left:auto; white-space:nowrap; }
.forever-talent-node.is-available { filter:grayscale(.15) brightness(1.03); border-color:#397f9d; box-shadow:0 0 12px rgba(61,182,231,.24); }
.forever-talent-node.is-available:hover { border-color:#75dcff; box-shadow:0 0 18px rgba(74,196,245,.5); }
.forever-calculator-actions { margin-left:auto; flex:0 0 auto; gap:10px; }
.forever-talent-points { display:grid; justify-items:end; min-width:76px; line-height:1; }
.forever-talent-points strong { font-size:23px; white-space:nowrap; }
.forever-talent-points small { margin-top:4px; color:#8fb8cf; font-size:11px; }
@media (max-width:560px) { .forever-talent-points { justify-items:start; } }
@media (max-width:900px) { .forever-talent-board { max-width:560px; margin:auto; width:100%; } }
@media (max-width:560px) { .forever-talent-board { grid-template-columns:repeat(var(--cols), 47px); grid-template-rows:repeat(var(--rows),52px); } }
@media (max-width:700px) { .forever-calculator-promo { width:calc(100% - 32px); margin:22px auto 38px; padding:24px; flex-wrap:wrap; } .forever-calculator-promo h2 { font-size:28px; } .forever-calculator-promo__classes { gap:6px; } .forever-calculator-promo__classes img { width:32px; height:32px; } .forever-calculator-promo .hero-btn { margin-left:0; } }

@media (max-width:560px) {
  .forever-talent-beta-note { margin:0 16px 16px; padding:11px 13px; display:block; font-size:13px; }
  .forever-talent-beta-note strong { display:block; margin-bottom:3px; }
  /* The desktop tooltip lives inside a filtered icon and cannot be positioned reliably on iOS. */
  .forever-talent-node:hover .forever-talent-tooltip,
  .forever-talent-node:focus-visible .forever-talent-tooltip { display:none; }
  .forever-talent-mobile-detail[hidden] { display:none; }
  .forever-talent-mobile-detail {
    position:fixed;
    z-index:100;
    width:min(280px, calc(100vw - 20px));
    max-height:min(38dvh,320px);
    overflow:auto;
    padding:16px 44px 16px 16px;
    border:1px solid #6cabc7;
    border-radius:14px;
    background:#061522;
    color:#dceefa;
    box-shadow:0 16px 46px rgba(0,0,0,.64);
    font-size:15px;
    line-height:1.45;
  }
  .forever-talent-mobile-detail button { position:absolute; top:8px; right:10px; border:0; background:transparent; color:#c9eaff; font:32px/1 Arial,sans-serif; }
  .forever-talent-mobile-detail b { display:block; margin-bottom:7px; color:#f1c56d; font-size:17px; }
  .forever-talent-mobile-detail p { margin:0; }
  .forever-talent-mobile-detail small { display:block; margin-top:7px; color:#99bed0; }
}

@media (max-width:560px) {
  .forever-calculator-head { display:grid; grid-template-columns:1fr; gap:14px; padding:22px 16px 16px; }
  .forever-back { padding:0; font-size:14px; }
  .forever-calculator-title { gap:11px; }
  .forever-calculator-title h1 { margin:3px 0 0; font-size:clamp(34px,10.5vw,44px); line-height:.96; }
  .forever-calculator-title .eyebrow { font-size:10px; letter-spacing:.1em; }
  .forever-calculator-actions { display:grid; grid-template-columns:1fr minmax(0,1.7fr); width:100%; gap:10px; align-items:stretch; }
  .forever-talent-points { min-height:58px; align-content:center; }
  .forever-talent-points strong { font-size:31px; }
  .talent-action { min-height:58px; padding:9px 12px; font-size:16px; }
  .talent-action--quiet { grid-column:1 / -1; min-height:45px; }
  .forever-calculator-help { margin-bottom:18px; padding:0 16px; font-size:15px; line-height:1.45; }
  .forever-talent-trees { gap:14px; padding:0 10px; }
  .forever-talent-tree header { padding:13px 14px; }
  .forever-talent-tree h2 { font-size:17px; }
  .forever-talent-board { gap:8px; padding:12px 8px; }
}