/* ═══════════════════════════════════════════════════════════════════════
   Blood & Nectar — talent (rune page) UI
   ---------------------------------------------------------------------
   Companion to talents.js. THE single source of truth for how a talent
   node, a path and a builder row look, so the full page at /talents/ and
   the compact one inside the champion page cannot drift apart.

   Loaded as  <link rel="stylesheet" href="/game/talents.css?v=1">
   AFTER shell.css (it uses shell's tokens). Bump the ?v= when you edit —
   .css is not in battleApi's no-store list.

   Icons are large emoji today; talents.js nodeIcon() is the one swap
   point for real art. Nothing here assumes a glyph over an <img>.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ NODE ═══════════════════════════════════════════════════════════════
   A disc plus a label. --tint / --tint-soft come from the path, --tn is the
   disc diameter, so one component serves the 96px catalysts on the landing
   page and the 46px discs in a collapsed row. */
.tal-node{
  --tn:64px;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  background:none;border:none;padding:0;font:inherit;color:inherit;text-align:center;
  cursor:pointer;
}
.tal-disc{
  width:var(--tn);height:var(--tn);border-radius:50%;position:relative;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 32%,rgba(255,255,255,.05),rgba(3,10,18,.92) 72%);
  border:2px solid rgba(200,170,110,.16);
  transition:border-color .18s,box-shadow .18s,transform .18s,background .18s;
}
.tal-glyph{
  font-size:calc(var(--tn) * .46);line-height:1;
  filter:grayscale(1);opacity:.5;transition:filter .18s,opacity .18s;
}
.tal-glyph img{width:calc(var(--tn) * .58);height:calc(var(--tn) * .58);display:block;object-fit:contain;}
.tal-label{
  font-family:var(--fd);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-m);transition:color .18s;max-width:calc(var(--tn) + 46px);line-height:1.35;
}

/* Selectable but not chosen */
.tal-node:hover .tal-disc{border-color:var(--tint,var(--gold));transform:translateY(-2px);}
.tal-node:hover .tal-glyph{filter:grayscale(.15);opacity:.95;}
.tal-node:hover .tal-label{color:var(--text);}

/* Lit — a chosen talent, or anything else a champion actually has on them
   (abilities, artifact, potion, a scoreboard loadout). ONE definition. */
.tal-node.picked .tal-disc,
.tal-disc-wrap.lit .tal-disc{
  border-color:var(--tint,var(--gold));
  background:radial-gradient(circle at 50% 32%,var(--tint-soft,rgba(200,170,110,.22)),rgba(3,10,18,.92) 74%);
  box-shadow:0 0 20px -3px var(--tint,var(--gold)),inset 0 0 16px -6px var(--tint,var(--gold));
}
.tal-node.picked .tal-glyph,
.tal-disc-wrap.lit .tal-glyph{filter:none;opacity:1;}
.tal-node.picked .tal-label{color:var(--tint,var(--gold));}

/* Bare disc (BNTalents.discHTML) — no label, not a button. */
.tal-disc-wrap{--tn:52px;display:inline-flex;flex-shrink:0;}
.tal-disc-wrap .tal-disc{position:relative;}
.tal-badge{
  position:absolute;right:-3px;bottom:-3px;min-width:19px;height:19px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;border-radius:10px;
  font-family:var(--fd);font-size:9px;font-weight:900;letter-spacing:.5px;
  color:var(--gold-lt);background:#050d16;border:1px solid var(--tint,var(--gold));
}

/* Locked by account level, or a read-only render */
.tal-node.locked,.tal-node.static{cursor:default;}
.tal-node.locked .tal-disc,.tal-node.static:not(.picked) .tal-disc{opacity:.45;}
.tal-node.locked:hover .tal-disc,.tal-node.static:hover .tal-disc{transform:none;border-color:rgba(200,170,110,.16);}
.tal-node.locked:hover .tal-glyph,.tal-node.static:not(.picked):hover .tal-glyph{filter:grayscale(1);opacity:.5;}
.tal-node.locked:hover .tal-label,.tal-node.static:hover .tal-label{color:var(--text-m);}
/* PENDING — chosen, saved, and waiting on the account level. Reads as dimmed
   like a locked node (it is not fighting yet) but stays fully interactive, and
   once picked it lights up in the path's colour so the build you planned is
   legible at a glance instead of looking empty. */
.tal-node.pending{cursor:pointer;}
.tal-node.pending:not(.picked) .tal-disc{opacity:.55;}
.tal-node.pending:not(.picked):hover .tal-disc{opacity:.8;}
.tal-node.pending.picked .tal-disc{opacity:.85;border-style:dashed;}
.tal-node.pending.picked .tal-label{opacity:.85;}
.tal-lock{
  position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:9px;
  background:#050d16;border:1px solid rgba(200,170,110,.3);color:var(--text-d);
}
/* On a pending PICK the padlock is the "not yet" marker, so it takes the
   path's tint rather than sitting grey against a lit disc. */
.tal-node.pending.picked .tal-lock{border-color:var(--tint,var(--gold));color:var(--tint,var(--gold));}

/* ═══ PATH SELECT — the landing page ══════════════════════════════════════
   One column per path, its catalysts on show. This is the first thing you
   see with no page built: choose a path, then build inside it. */
.tal-paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;}
.tal-path{
  --tint:var(--gold);
  position:relative;display:flex;flex-direction:column;align-items:center;gap:0;
  padding:26px 16px 20px;cursor:pointer;text-align:center;
  background:linear-gradient(180deg,var(--tint-soft,rgba(200,170,110,.1)),rgba(3,10,18,.55) 55%,rgba(3,10,18,.85));
  border:1px solid var(--border);border-radius:6px;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.tal-path:hover{border-color:var(--tint);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.55);}
.tal-path.active{border-color:var(--tint);box-shadow:0 0 0 1px var(--tint),0 14px 34px rgba(0,0,0,.5);}
.tal-crest{
  width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:44px;margin-bottom:16px;
  background:radial-gradient(circle at 50% 35%,var(--tint-soft,rgba(200,170,110,.2)),rgba(3,10,18,.9) 72%);
  border:2px solid var(--tint);box-shadow:0 0 34px -8px var(--tint),inset 0 0 22px -8px var(--tint);
}
.tal-path-name{font-family:var(--fd);font-size:15px;letter-spacing:4px;text-transform:uppercase;color:var(--tint);}
.tal-path-sub{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-d);margin-top:7px;}
.tal-path-keys{display:flex;justify-content:center;gap:14px;margin:22px 0 16px;}
.tal-path-keys .tal-node{--tn:52px;width:auto;}
.tal-path-keys .tal-label{display:none;}
.tal-path-blurb{font-size:12px;line-height:1.6;color:var(--text-m);margin-top:auto;}
.tal-path-cta{
  margin-top:16px;width:100%;padding:9px 12px;border-radius:2px;
  font-family:var(--fd);font-size:9px;letter-spacing:3px;text-transform:uppercase;
  color:var(--tint);border:1px solid var(--tint);background:rgba(0,0,0,.25);
}
.tal-path:hover .tal-path-cta{background:var(--tint-soft,rgba(200,170,110,.18));color:var(--gold-lt);}

/* ═══ BUILDER ════════════════════════════════════════════════════════════ */
.tal-build{--tint:var(--gold);}
.tal-build-head{
  display:flex;align-items:center;gap:16px;padding:16px 20px;margin-bottom:22px;
  background:linear-gradient(110deg,var(--tint-soft,rgba(200,170,110,.12)),rgba(3,10,18,.4));
  border:1px solid var(--border);border-left:3px solid var(--tint);border-radius:6px;
}
.tal-build-head .tal-crest{width:62px;height:62px;font-size:29px;margin:0;}
.tal-build-head .hn{display:block;font-family:var(--fd);font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--tint);}
.tal-build-head .hs{display:block;font-size:11px;color:var(--text-m);margin-top:5px;letter-spacing:.5px;}
.tal-build-head .ha{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}

/* A row. Unpicked or being edited: three options side by side. Picked and
   settled: the one you chose, full width, with a Change affordance. */
.tal-row{margin-bottom:20px;}
.tal-row-head{display:flex;align-items:center;gap:12px;margin-bottom:11px;padding-bottom:7px;border-bottom:1px solid var(--border);}
.tal-row-head .rl{font-family:var(--fd);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--tint);}
.tal-row-head .rk{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-d);}
.tal-row-head .rs{margin-left:auto;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-d);}
.tal-row.locked{opacity:.5;}
.tal-row.locked .tal-row-head .rs{color:var(--red);opacity:.8;}

.tal-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.tal-opt{
  display:flex;gap:12px;align-items:flex-start;padding:12px;
  border:1.5px solid rgba(200,170,110,.14);border-radius:6px;background:rgba(5,13,22,.75);
  transition:border-color .18s,background .18s;
}
.tal-opt:hover{border-color:rgba(200,170,110,.4);}
.tal-opt.picked{border-color:var(--tint);background:linear-gradient(150deg,var(--tint-soft,rgba(200,170,110,.1)),rgba(5,13,22,.85));}
.tal-opt .tal-node{--tn:46px;width:auto;flex-shrink:0;}
.tal-opt .tal-label{display:none;}
.tal-opt-body{min-width:0;flex:1;}
.tal-opt-name{font-family:var(--fd);font-size:11px;letter-spacing:1.5px;color:var(--gold-lt);}
.tal-opt.picked .tal-opt-name{color:var(--tint);}
.tal-opt-desc{font-size:12px;line-height:1.55;color:var(--text-m);margin-top:5px;}

/* Collapsed: the chosen option only, wider, with room to breathe. */
.tal-opts.collapsed{grid-template-columns:1fr;}
.tal-opts.collapsed .tal-opt:not(.picked){display:none;}
.tal-opts.collapsed .tal-opt{cursor:pointer;padding:14px 16px;align-items:center;}
.tal-opts.collapsed .tal-opt .tal-node{--tn:56px;}
.tal-opts.collapsed .tal-opt-desc{font-size:12.5px;}
.tal-change{
  margin-left:auto;flex-shrink:0;align-self:center;padding:7px 13px;border-radius:2px;
  font-family:var(--fd);font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-d);border:1px solid var(--border);background:transparent;cursor:pointer;
}
.tal-opts.collapsed .tal-opt:hover .tal-change{color:var(--tint);border-color:var(--tint);}
.tal-opts:not(.collapsed) .tal-change{display:none;}

/* ═══ PRIMER — what talents are, on the page itself ══════════════════════ */
.tal-primer{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:24px;
}
.tal-primer-card{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:16px 18px;}
.tal-primer-card .pt{font-family:var(--fd);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.tal-primer-card .pb{font-size:12.5px;line-height:1.65;color:var(--text-m);}
.tal-primer-card .pb b{color:var(--gold-lt);font-weight:700;}

/* ═══ GAME PROSE ═════════════════════════════════════════════════════════
   Output of BNTalents.prose() — talent text, ability text, tooltips.
   Numbers carry the weight; a scaling term takes its stat's colour so
   "75 + 0.7 AD" reads as one quantity rather than three words. */
.a-num{color:var(--gold-lt);font-weight:700;}
.a-ad{color:#e8a33d;}
.a-ap{color:var(--teal);}
.a-hp{color:var(--green);}
.a-mana{color:#4f9fe8;}
.a-mom{color:var(--gold);}
.a-fx{color:#c98bdc;}

/* ═══ TOOLTIP ════════════════════════════════════════════════════════════
   Appended to <body> and fixed-positioned, so it escapes the champion
   overlay's stacking context instead of being clipped by it. */
.tal-tip{
  position:fixed;z-index:9999;max-width:320px;pointer-events:none;
  opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;
  background:linear-gradient(165deg,#0b1826,#040a11);border:1px solid var(--gold-dk);border-radius:5px;
  padding:13px 15px;box-shadow:0 18px 44px rgba(0,0,0,.75);
}
.tal-tip.show{opacity:1;transform:translateY(0);}
.tal-tip .tt-name{font-family:var(--fd);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);}
.tal-tip .tt-kind{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--teal);opacity:.85;margin-top:4px;}
.tal-tip .tt-desc{font-size:12.5px;line-height:1.6;color:var(--text-m);margin-top:9px;}
.tal-tip .tt-meta{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-d);margin-top:10px;padding-top:9px;border-top:1px solid rgba(200,170,110,.14);}
.tal-tip .tt-meta.locked{color:var(--red);}

@media(max-width:760px){
  .tal-opts{grid-template-columns:1fr;}
  .tal-build-head{flex-wrap:wrap;}
  .tal-build-head .ha{margin-left:0;width:100%;justify-content:flex-start;}
}