/* ───────── Nodes (base container) ───────── */
.node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: 5;
  cursor: default;
  --c: rgba(255,255,255,0.4);
  --c-soft: rgba(255,255,255,0.18);
}
.node.clickable { cursor: pointer; }
.node .gate-title,
.node .gate-sub,
.node .node-label {
  font-family: Arial, Helvetica, sans-serif !important;
  text-align: center;
  overflow-wrap: break-word;
}
.node-label {
  margin-top: 7px;
  color: var(--text-soft);
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1.18;
  text-wrap: pretty;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  transition: color 0.25s;
}

/* ─── Topic node — small circle (depth 3) ─── */
.node.tier-topic { width: 96px; --node-half-w: 14px; --node-half-h: 14px; }
.node.tier-topic .shape {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #141414;
  border: 1.25px solid var(--c);
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025),
    0 1px 4px rgba(0,0,0,0.42);
  transition: transform 0.22s cubic-bezier(.4,1.4,.6,1), box-shadow 0.25s, border-color 0.25s, background 0.25s;
}
.node.tier-topic .node-label {
  font-size: 10px; font-weight: 500;
  width: 96px;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.5), 0 -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5),
    -1px  0    0 rgba(0,0,0,0.5),                           1px  0    0 rgba(0,0,0,0.5),
    -1px  1px  0 rgba(0,0,0,0.5), 0  1px 0 rgba(0,0,0,0.5), 1px  1px  0 rgba(0,0,0,0.5);
}

/* ─── Sub gate — small pill (depth 2) ─── */
.node.tier-sub { width: 130px; --node-half-w: 58px; --node-half-h: 22px; }
.node.tier-sub .shape {
  min-width: 116px;
  height: 44px;
  border-radius: 99px;
  border: 1.25px solid var(--c);
  background: rgba(13,13,13,0.78);
  backdrop-filter: blur(6px);
  padding: 0 14px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 2px 7px rgba(0,0,0,0.42);
  transition: transform 0.22s cubic-bezier(.4,1.4,.6,1), box-shadow 0.25s, border-color 0.25s, background 0.25s;
}
.node.tier-sub .gate-title {
  font-size: 11px; font-weight: 600;
  color: var(--c);
  letter-spacing: 0.005em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.node.tier-sub .gate-sub {
  margin-top: 3px;
  font-size: 8px; font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  color: var(--c);
}
.node.tier-sub .node-label { display: none; }

/* ─── Domain gate — larger pill (depth 1) ─── */
.node.tier-domain { width: 180px; --node-half-w: 79px; --node-half-h: 28px; }
.node.tier-domain .shape {
  min-width: 158px;
  height: 56px;
  border-radius: 99px;
  border: 1.25px solid var(--c);
  background: rgba(13,13,13,0.84);
  backdrop-filter: blur(8px);
  padding: 0 22px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 3px 12px rgba(0,0,0,0.45);
  transition: transform 0.22s cubic-bezier(.4,1.4,.6,1), box-shadow 0.25s, border-color 0.25s, background 0.25s;
}
.node.tier-domain .gate-title {
  font-size: 13.5px; font-weight: 700;
  color: var(--c);
  letter-spacing: 0.005em;
}
.node.tier-domain .gate-sub {
  margin-top: 4px;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  color: var(--c);
}
.node.tier-domain .node-label { display: none; }

/* ─── Root gate — start / goal (depth 0) ─── */
.node.tier-root { width: 220px; --node-half-w: 100px; --node-half-h: 34px; }
.node.tier-root .shape {
  min-width: 200px;
  height: 68px;
  border-radius: 22px;
  border: 1.25px solid var(--c);
  background: rgba(13,13,13,0.88);
  padding: 0 26px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 4px 16px rgba(0,0,0,0.48),
    0 0 18px color-mix(in oklab, var(--c) 22%, transparent);
  transition: transform 0.22s cubic-bezier(.4,1.4,.6,1), box-shadow 0.25s, border-color 0.25s, background 0.25s;
}
.node.tier-root .gate-title {
  font-size: 18px; font-weight: 700;
  color: var(--c);
  letter-spacing: 0.01em;
}
.node.tier-root .gate-sub {
  margin-top: 5px;
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
  color: var(--c);
}
.node.tier-root .node-label { display: none; }

/* Subtle domain glow for active roadmap nodes */
.node:not(.completed):not(.locked):not(.star-locked) .shape {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 2px 8px rgba(0,0,0,0.46),
    0 0 14px color-mix(in oklab, var(--c) 18%, transparent),
    0 0 30px color-mix(in oklab, var(--c) 10%, transparent);
}

/* ─── Intro vs Test (different shape + fill) ─── */
.node.gate-intro .shape {
  border-radius: 99px;
}
.node.gate-test .shape {
  border-radius: 10px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--c) 72%, #fff) 0%,
      var(--c) 48%,
      color-mix(in oklab, var(--c) 82%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -10px 18px rgba(0,0,0,0.14),
    0 3px 12px rgba(0,0,0,0.45),
    0 0 20px color-mix(in oklab, var(--c) 36%, transparent),
    0 0 42px color-mix(in oklab, var(--c) 22%, transparent);
}
.node.tier-sub.gate-test  .shape { border-radius: 10px; }
.node.tier-domain.gate-test .shape { border-radius: 14px; }
.node.gate-test .gate-title,
.node.gate-test .gate-sub {
  color: #0a0a0c;
  opacity: 1;
  text-shadow: none;
}
.node.gate-test .gate-sub { opacity: 0.7; }

/* ─── Stars row (under TEST pills) ─── */
.stars-row {
  margin-top: 6px;
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  height: 12px;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
}
.stars-row.large { gap: 3px; height: 14px; }
.star-svg { display: block; }

/* ─── XP badge ─── */
.xp-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 214, 10, 0.1);
  color: #FFD60A;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.5), 0 -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5),
    -1px  0    0 rgba(0,0,0,0.5),                           1px  0    0 rgba(0,0,0,0.5),
    -1px  1px  0 rgba(0,0,0,0.5), 0  1px 0 rgba(0,0,0,0.5), 1px  1px  0 rgba(0,0,0,0.5);
}
.xp-badge.xs { font-size: 8px; margin-top: 4px; padding: 1px 5px; border-radius: 4px; }
.xp-badge.sm { font-size: 9.5px; margin-top: 5px; }
.xp-badge.md { font-size: 12px; padding: 3px 9px; }
.xp-badge.earned { background: rgba(48, 209, 88, 0.12); color: #30D158; }

/* ─── Star-gate badge (XP required on locked domain tests) ─── */
.star-gate-badge {
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 7px;
  border-radius: 99px;
  background: rgba(13, 13, 13, 0.88);
  border: 1px solid rgba(255, 214, 10, 0.35);
  color: #FFD60A;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

/* star-locked state: visually match regular locked gates */
.node.star-locked:not(.gate-test) .shape {
  background: rgba(255,255,255,0.03) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 2px 6px rgba(0,0,0,0.45);
}
.node.star-locked.gate-test .shape {
  border-style: dashed !important;
  background: rgba(255,255,255,0.03) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 2px 6px rgba(0,0,0,0.45);
}
.node.star-locked .gate-title,
.node.star-locked .gate-sub { color: rgba(255,255,255,0.4); opacity: 1; }

/* ─── Available (unlocked, not done, not current) ─── */
.node.available .shape {
  /* same as default, ring is in domain color already */
}
.node.available:hover .shape {
  transform: scale(1.08);
  filter: brightness(1.1);
}
.node.tier-topic.available:hover .shape {
  transform: scale(1.18);
  background: color-mix(in oklab, var(--c) 22%, #141414);
}

/* ─── Current ─── */
.node.current .shape {
  transform: scale(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -10px 20px color-mix(in oklab, var(--c) 10%, transparent),
    0 0 0 1.5px var(--c-soft),
    0 3px 12px rgba(0,0,0,0.48),
    0 0 22px color-mix(in oklab, var(--c) 36%, transparent),
    0 0 42px color-mix(in oklab, var(--c) 18%, transparent);
}
.node.tier-topic.current .shape {
  transform: scale(1.3);
  background: color-mix(in oklab, var(--c) 30%, #141414);
}
.node.current .node-label {
  color: var(--text);
  font-weight: 600;
}
.node.current::before { display: none; }

/* ─── Completed (solid green) ─── */
.node.completed .shape {
  --c: var(--completed);
  background-image: linear-gradient(135deg, #28c95d 0%, #30d158 52%, #63e486 100%);
  background-size: var(--completed-gradient-w, 1700px) var(--completed-gradient-h, 4000px);
  background-position:
    calc(var(--node-half-w, 0px) - var(--node-x, 0px))
    calc(var(--node-half-h, 0px) - var(--node-y, 0px));
  border-color: var(--completed);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -10px 18px rgba(0,0,0,0.12),
    0 2px 9px rgba(48, 209, 88, 0.28),
    0 0 16px rgba(48, 209, 88, 0.34),
    0 0 36px rgba(74, 222, 128, 0.18);
}
.node.completed .gate-title,
.node.completed .gate-sub { color: #07210e; opacity: 1; text-shadow: none; }
.node.completed .gate-sub { opacity: 0.7; }
.node.completed .node-label { color: var(--completed-soft); }
.node.tier-topic.completed .shape .check-mark {
  color: #07210e;
}
/* completed + current: keep green, just add glow ring */
.node.completed.current .shape {
  background-image: linear-gradient(135deg, #28c95d 0%, #30d158 52%, #63e486 100%);
  background-size: var(--completed-gradient-w, 1700px) var(--completed-gradient-h, 4000px);
  background-position:
    calc(var(--node-half-w, 0px) - var(--node-x, 0px))
    calc(var(--node-half-h, 0px) - var(--node-y, 0px));
  border-color: var(--completed);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -10px 18px rgba(0,0,0,0.12),
    0 0 0 1.5px rgba(48, 209, 88, 0.34),
    0 3px 12px rgba(0,0,0,0.48),
    0 0 22px rgba(48, 209, 88, 0.42),
    0 0 44px rgba(74, 222, 128, 0.22);
}
.node.tier-topic.completed.current .shape {
  background-image: linear-gradient(135deg, #28c95d 0%, #30d158 52%, #63e486 100%);
  background-size: var(--completed-gradient-w, 1700px) var(--completed-gradient-h, 4000px);
  background-position:
    calc(var(--node-half-w, 0px) - var(--node-x, 0px))
    calc(var(--node-half-h, 0px) - var(--node-y, 0px));
}

/* ─── Locked ─── */
.node.locked { --c: rgba(255,255,255,0.25); }
.node.locked .shape {
  background: rgba(255,255,255,0.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 2px 6px rgba(0,0,0,0.45);
}
.node.locked .gate-title,
.node.locked .gate-sub { color: rgba(255,255,255,0.4); }
.node.locked .node-label { color: rgba(255,255,255,0.4); }
.node.locked .lock-icon { opacity: 0.5; }