/* coa-calc prototype — Conquest of Azeroth talent calculator.
   Visually faithful to the in-game Character Advancement frame.

   Shape rules (from the canonical nodeType field):
     round     SpendCircle  = passive Talent
     square    SpendSquare  = active Ability
     hexagon   group != 0   = choice node (two talents in one slot)

   Connector lines:
     yellow    at least one endpoint invested (the "lit path")
     gray      neither endpoint invested
*/

:root {
  --cell:     56px;
  --gold:     #ffd100;
  --bg-deep:  #0c0a08;
  --border:   #b07a37;
  --border-d: #5a3d18;
  --ink:      #f4ead0;
  --ink-d:    #b5a47a;
}

/* Note: html/body styles intentionally omitted — engine layout owns them.
   Only `.frame, .pane, .cell, .links, .tip` etc. are styled here, so this
   stylesheet is safe to link globally. */

/* --- outer frame ----------------------------------------------------- */
/* The tree needs ~1500px width — wider than the engine's article column.
   The wrapping section escapes its parent's width by pulling its margins
   out to the viewport edges, then .frame centers itself inside that. */
.class-tree {
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  justify-content: center;
}
.frame {
  width: fit-content;
  min-width: min(1520px, 100vw);
  margin: 16px 0;
  border: 2px solid var(--border-d);
  box-shadow: 0 0 0 1px #000, 0 12px 40px rgba(0,0,0,0.6);
  background: var(--bg-deep);
}

.frame__head, .frame__foot {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 18px;
  background: linear-gradient(#1a140b, #0c0a08);
  border-bottom: 1px solid var(--border-d);
  font-variant: small-caps;
  letter-spacing: 0.05em;
}
.frame__foot { border-top: 1px solid var(--border-d); border-bottom: 0; }
.frame__crumb  { color: var(--ink-d); font-size: 12px; }
.frame__title  { color: var(--gold);  font-size: 14px; flex: 1; text-align: center; }
.frame__points { color: var(--ink);   font-weight: 600; }

/* --- body: class tree + spec tree, one continuous backdrop ----------- */
.frame__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #15110a;
  background-image: var(--tree-bg, url("https://i.exil.es/coa/static/img/talents/bg/barbarian-1.jpg"));
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-height: 520px;
  position: relative;
}
.pane--left, .pane--right { background: transparent; }

.pane { padding: 18px 22px 24px; position: relative; }

.pane__head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
  text-shadow: 0 2px 6px #000, 0 0 2px #000;
}
.pane__title  { margin: 0; font: 700 22px "Trajan Pro", "Cinzel", serif; color: var(--ink); letter-spacing: 0.06em; }
.pane__points { color: var(--gold); font-size: 18px; font-weight: 700; }
.pane__spec-select {
  background: #1a1208; color: var(--gold); border: 1px solid var(--border-d);
  padding: 4px 10px;
  font: 700 18px/1 "Trajan Pro", "Cinzel", serif;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* Per-tree dimensions are set by JS — see paneBounds() in calc.js. */
.pane__board { position: relative; padding-bottom: 20px; }
.grid  { position: absolute; inset: 0; }
.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* --- talent cells --------------------------------------------------- */
/* IMPORTANT: keep `.cell` free of properties that create a stacking context
   (filter, clip-path, opacity<1, transform, z-index). Otherwise the rank
   labels (z-index:10) get trapped inside the cell's stacking context and
   end up underneath neighbouring cells. Filter and clip-path are applied
   on the cell's <img> child instead. */
.cell {
  position: absolute;
  width: var(--cell); height: var(--cell);
  display: block;
  background: #000;
  border: 2px solid var(--border-d);
  border-radius: 50%;          /* default: round = passive Talent */
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
/* Icons are scaled 1.05× so their dark outer outline sits flush against the
   cell border instead of being inset by a pixel or two — matches the
   "icon overflowing its slot" look from the in-game Character Advancement. */
.cell img {
  width: 100%; height: 100%; display: block;
  border-radius: inherit;
  transform: scale(1.05);
  transform-origin: center;
  filter: grayscale(0.85) brightness(0.55);
  transition: filter 0.12s;
}

/* Active ability — square frame */
.cell--ability,
.cell--ability img { border-radius: 0; }

/* Choice node — hexagon. The background colour shows as the "frame"
   peeking around the inner img through the 3px padding. */
.cell--choice {
  border: 0;
  background: var(--border-d);
  padding: 3px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.cell--choice img {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border-radius: 0;
}
.cell--choice.is-available { background: var(--border); }
.cell--choice.is-invested  { background: var(--gold); box-shadow: 0 0 10px rgba(255,209,0,0.6); }
.cell--choice.is-choice-loser     { opacity: 0.65; }
.cell--choice.is-choice-loser img { filter: grayscale(0.6) brightness(0.55); }

/* States ------------------------------------------------------------- */
.cell.is-available     { border-color: var(--border); box-shadow: 0 0 0 1px rgba(255,209,0,0.25); }
.cell.is-available img { filter: grayscale(0.1) brightness(0.9); }
.cell.is-invested      { border-color: var(--gold); box-shadow: 0 0 0 1px #000 inset, 0 0 8px rgba(255,209,0,0.55); }
.cell.is-invested img  { filter: none; }

/* Hover — filter on img so cell stays context-free */
.cell:hover img              { filter: brightness(0.9); }
.cell.is-available:hover     { border-color: var(--gold); box-shadow: 0 0 8px rgba(255,209,0,0.6); }
.cell.is-available:hover img { filter: none; }
.cell.is-invested:hover      { box-shadow: 0 0 10px rgba(255,209,0,0.7); }
.cell.is-invested:hover  img { filter: brightness(1.15); }

/* --- rank labels (grid-level overlay) ------------------------------- */
/* Rank labels are rendered as siblings of cells inside .grid (not as
   children of cells) — this keeps z-index:10 effective above every
   cell, regardless of the per-cell filter/clip-path stacking contexts. */
.cell__rank {
  position: absolute;
  z-index: 10;
  min-width: 20px;
  padding: 0 3px;
  font: 700 11px/14px "Segoe UI", system-ui, sans-serif;
  text-align: center;
  color: var(--ink);
  background: rgba(0,0,0,0.85);
  border: 1px solid var(--border-d);
  border-radius: 2px;
  pointer-events: none;
}
.cell__rank.is-invested { color: #fff; border-color: var(--gold); }
.cell__rank.is-maxed    { color: var(--gold); }
/* Hide the loser's "0/N" once a choice is made; hide slot-1's label
   while neither side is picked so only one "0/N" represents the pair. */
.cell__rank.is-choice-loser,
.cell__rank.is-hidden-secondary { display: none; }

/* --- connector lines ------------------------------------------------ */
.links line             { fill: none; stroke-linecap: round; }
.links line.link-shadow { stroke: rgba(0,0,0,0.8); stroke-width: 4; }
.links line.link--off   { stroke: #555; stroke-width: 2; }
.links line.link--on    {
  stroke: var(--gold);
  stroke-width: 2;
  filter: drop-shadow(0 0 2px rgba(255,209,0,0.8));
}

/* --- footer + buttons ----------------------------------------------- */
.frame__foot-left  { display: flex; gap: 8px; flex: 1; }
.frame__foot-right { color: var(--ink-d); font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
button {
  background: linear-gradient(#3b2a14, #1a1208);
  color: var(--gold);
  border: 1px solid var(--border-d);
  padding: 5px 12px;
  font: inherit;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  cursor: pointer;
}
button:hover { border-color: var(--gold); color: #fff; }
.build-code { padding: 3px 6px; background: #000; border: 1px solid var(--border-d); }

/* --- tooltip -------------------------------------------------------- */
.tip {
  position: fixed; z-index: 100;
  max-width: 320px;
  background: #0a0a0a; color: var(--ink);
  border: 1px solid var(--border);
  padding: 8px 10px;
  font-size: 12px; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7);
  pointer-events: none;
  white-space: pre-wrap;
}
.tip h4         { margin: 0 0 4px; color: var(--gold); font-size: 13px; }
.tip .tip__meta { color: var(--ink-d); font-size: 11px; }
.tip .tip__lock { color: #ff6b6b; font-size: 11px; margin: 3px 0; }