/* =========================================================
   Stock Market: The Game — UI
   Data colours from the validated dataviz reference palette.
   ========================================================= */

:root {
  color-scheme: light;

  --surface-1: #fcfcfb;
  --plane: #f3f2ef;
  --card: #ffffff;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --raise: rgba(11, 11, 11, 0.04);
  --shadow: 0 2px 0 rgba(11,11,11,.10), 0 10px 34px rgba(11,11,11,.07);

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --div-pos: #2a78d6;
  --div-neg: #e34948;

  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;
  --gold: #eda100;
  --violet: #4a3aa7;

  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure: 620px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --plane: #0d0d0d;
    --card: #1e1e1c;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.12);
    --raise: rgba(255, 255, 255, 0.06);
    --shadow: 0 2px 0 rgba(0,0,0,.5), 0 10px 34px rgba(0,0,0,.45);
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --div-pos: #3987e5;
    --div-neg: #e66767;
    --gold: #c98500;
    --violet: #9085e9;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --plane: #0d0d0d;
  --card: #1e1e1c;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.12);
  --raise: rgba(255, 255, 255, 0.06);
  --shadow: 0 2px 0 rgba(0,0,0,.5), 0 10px 34px rgba(0,0,0,.45);
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --div-pos: #3987e5;
  --div-neg: #e66767;
  --gold: #c98500;
  --violet: #9085e9;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--plane);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overscroll-behavior-y: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

button { font-family: inherit; }

/* ---------------------------------------------------------
   Top bar — XP, level, streak
   --------------------------------------------------------- */

.hud {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--plane) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 10px max(14px, env(safe-area-inset-left)) 10px max(14px, env(safe-area-inset-right));
}
.hud__inner {
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}
.hud__back {
  border: none; background: var(--raise); color: var(--text-secondary);
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  font-size: 17px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
}
.hud__back:hover { background: var(--border); color: var(--text-primary); }

.xpwrap { flex: 1; min-width: 0; }
.xprow {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--text-muted); margin-bottom: 5px;
  font-weight: 600; letter-spacing: .02em;
}
.xprow b { color: var(--text-primary); font-size: 12px; }
.xpbar { height: 9px; background: var(--grid); border-radius: 6px; overflow: hidden; }
.xpbar__fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--series-1), var(--series-3));
  width: 0%; transition: width 700ms cubic-bezier(.2,.8,.3,1);
}
.streak {
  flex: 0 0 auto; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 5px; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 13%, transparent);
  padding: 6px 11px; border-radius: 100px;
}
.hud__theme {
  border: none; background: var(--raise); color: var(--text-secondary);
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer; flex: 0 0 auto;
  font-size: 15px;
}

/* ---------------------------------------------------------
   Screens
   --------------------------------------------------------- */

.screen { max-width: 760px; margin: 0 auto; padding: 22px 18px 130px; }

/* ---------------- Home: the journey map ---------------- */

.home__hero { text-align: center; padding: 18px 0 8px; }
.home__title {
  font-size: clamp(30px, 8vw, 46px); font-weight: 800; letter-spacing: -.035em;
  line-height: 1.02; margin: 0 0 10px;
}
.home__title span { color: var(--series-1); }
.home__sub { font-size: 16px; color: var(--text-secondary); margin: 0 auto 22px; max-width: 400px; }

.statsrow {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-width: 420px; margin: 0 auto 28px;
}
.bigstat {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 8px; text-align: center; box-shadow: var(--shadow);
}
.bigstat__v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.bigstat__l { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* sync / account strip */
.sync {
  max-width: 420px; margin: 0 auto 22px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px; font-size: 13.5px; color: var(--text-secondary);
  box-shadow: var(--shadow);
}
.sync span { flex: 1; min-width: 0; line-height: 1.4; }
.sync b { color: var(--text-primary); font-weight: 700; overflow-wrap: anywhere; }
.sync--muted { background: none; border-style: dashed; box-shadow: none; }
.sync--on { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.sync--warn { border-color: color-mix(in srgb, var(--warning) 55%, transparent); }
.sync--form { gap: 8px; }
.sync__input {
  flex: 1 1 150px; min-width: 0; font-family: inherit; font-size: 15px;
  padding: 11px 13px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--plane); color: var(--text-primary);
}
.sync__input:focus { outline: 2px solid var(--series-1); outline-offset: 1px; }
.sync__btn {
  flex: 0 0 auto; font-size: 13.5px; font-weight: 700; padding: 10px 14px;
  border-radius: 11px; border: 1px solid var(--border); background: var(--plane);
  color: var(--text-secondary); cursor: pointer;
}
.sync__btn:hover { color: var(--text-primary); }
.sync__btn--go {
  background: var(--series-1); border-color: var(--series-1); color: #fff;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--series-1) 55%, #000);
}
.sync__btn--go:active { transform: translateY(2px); box-shadow: none; }
.sync__hint {
  max-width: 420px; margin: -14px auto 22px; font-size: 11.5px;
  color: var(--text-muted); text-align: center; line-height: 1.45; padding: 0 8px;
}

.path { position: relative; max-width: 440px; margin: 0 auto; padding: 8px 0 0; }
.path__part {
  text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); margin: 26px 0 14px;
  display: flex; align-items: center; gap: 12px;
}
.path__part::before, .path__part::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.node {
  display: flex; align-items: center; gap: 14px; margin: 0 0 10px;
  background: none; border: none; padding: 0; cursor: pointer; width: 100%;
  text-align: left; color: inherit;
}
.node:nth-child(even) { padding-left: 34px; }
.node:nth-child(odd) { padding-left: 6px; }
.node__dot {
  width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; position: relative;
  background: var(--card); border: 2px solid var(--border);
  color: var(--text-muted);
  box-shadow: 0 3px 0 var(--border);
  transition: transform 140ms;
}
.node:hover .node__dot { transform: translateY(-2px); }
.node:active .node__dot { transform: translateY(1px); box-shadow: 0 1px 0 var(--border); }
.node--done .node__dot {
  background: var(--good); border-color: var(--good); color: #fff;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--good) 55%, #000);
}
.node--next .node__dot {
  background: var(--series-1); border-color: var(--series-1); color: #fff;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--series-1) 55%, #000);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.node__meta { min-width: 0; }
.node__t { font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.node--locked .node__t, .node--locked .node__x { opacity: .45; }
.node__x { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-weight: 600; }

.badges { max-width: 440px; margin: 34px auto 0; }
.badges__h { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; text-align: center; }
.badges__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.badge {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 6px; text-align: center; opacity: .34; transition: opacity 300ms, transform 300ms;
}
.badge--on { opacity: 1; transform: none; box-shadow: var(--shadow); }
.badge__i { font-size: 26px; line-height: 1; }
.badge__n { font-size: 10px; font-weight: 700; margin-top: 6px; line-height: 1.25; }

/* ---------------- Card stage ---------------- */

.stage { max-width: var(--measure); margin: 0 auto; padding: 8px 0 0; }

.dots { display: flex; gap: 5px; justify-content: center; margin-bottom: 22px; }
.dot { height: 4px; flex: 1; max-width: 42px; border-radius: 3px; background: var(--grid); transition: background 300ms; }
.dot--on { background: var(--series-1); }
.dot--done { background: color-mix(in srgb, var(--series-1) 45%, var(--grid)); }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 22px;
  padding: 28px 24px; box-shadow: var(--shadow);
  animation: cardin 360ms cubic-bezier(.2,.7,.3,1);
}
@keyframes cardin {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.card--wide { padding: 24px 18px; }

.card__kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--series-1); margin-bottom: 12px;
}
.card__big {
  font-size: clamp(24px, 5.6vw, 33px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.12; margin: 0 0 12px;
}
.card__mid {
  font-size: clamp(19px, 4.4vw, 23px); font-weight: 750; letter-spacing: -.02em;
  line-height: 1.25; margin: 0 0 10px;
}
.card__body { font-size: 16.5px; color: var(--text-secondary); margin: 0 0 14px; line-height: 1.55; }
.card__body:last-child { margin-bottom: 0; }
.card__body b, .card__body strong { color: var(--text-primary); font-weight: 700; }
.card__tiny { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-top: 12px; }

.art { display: block; width: 100%; height: auto; margin: 4px auto 20px; overflow: visible; }
.art text { font-family: var(--sans); }

/* illustration animations */
.a-pulse { animation: aPulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes aPulse { 0%,100% { opacity: 1; } 50% { opacity: .62; } }

.a-float { animation: aFloat 3.2s ease-in-out infinite; }
@keyframes aFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.a-rise { animation: aRise 700ms cubic-bezier(.2,.8,.3,1) backwards; transform-origin: center bottom; }
@keyframes aRise { from { transform: scaleY(.15); opacity: 0; } to { transform: none; opacity: 1; } }

.a-grow { animation: aGrow 520ms cubic-bezier(.2,.9,.3,1) backwards; transform-origin: center; }
@keyframes aGrow { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

.a-step { animation: aStep 620ms cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes aStep { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.a-drip { animation: aDrip 1.8s linear infinite; }
@keyframes aDrip {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(10px, 46px); opacity: 0; }
}

.a-draw {
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: aDraw 1500ms cubic-bezier(.35,.1,.25,1) forwards;
}
@keyframes aDraw { to { stroke-dashoffset: 0; } }

/* word-unlock card */
.wordcard { text-align: center; }
.wordcard__ribbon {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent);
  padding: 7px 14px; border-radius: 100px; margin-bottom: 20px;
}
.wordcard__w {
  font-size: clamp(30px, 8vw, 44px); font-weight: 800; letter-spacing: -.03em;
  margin: 0 0 14px; text-transform: uppercase;
}
.wordcard__m { font-size: 18px; color: var(--text-secondary); line-height: 1.5; margin: 0 auto; max-width: 420px; }
.wordcard__eg {
  margin-top: 20px; padding: 14px 16px; border-radius: 12px;
  background: var(--raise); font-size: 14.5px; color: var(--text-secondary); line-height: 1.5;
}

/* fact / hero number */
.hero {
  text-align: center; padding: 8px 0 4px;
}
.hero__n {
  font-size: clamp(46px, 14vw, 82px); font-weight: 800; letter-spacing: -.045em;
  line-height: 1; margin-bottom: 8px;
}
.hero__l { font-size: 16.5px; color: var(--text-secondary); line-height: 1.45; }
.pos { color: var(--good); }
.neg { color: var(--critical); }
.blue { color: var(--series-1); }

/* ---------------- Quiz ---------------- */

.qopts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.qopt {
  text-align: left; padding: 15px 17px; border-radius: 14px;
  border: 2px solid var(--border); background: var(--card);
  color: var(--text-primary); cursor: pointer; font-size: 16px; line-height: 1.4;
  transition: transform 90ms, border-color 140ms, background 140ms;
  box-shadow: 0 2px 0 var(--border); font-weight: 550;
}
.qopt:hover:not(:disabled) { border-color: var(--series-1); }
.qopt:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.qopt:disabled { cursor: default; }
.qopt--sel {
  border-color: var(--series-1);
  background: color-mix(in srgb, var(--series-1) 9%, var(--card));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--series-1) 40%, transparent);
}
.qopt--right {
  border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--card));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--good) 40%, transparent);
}
.qopt--wrong {
  border-color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, var(--card));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--critical) 40%, transparent);
}

.verdict {
  margin-top: 18px; padding: 16px 18px; border-radius: 14px;
  font-size: 15.5px; line-height: 1.55; animation: cardin 280ms;
  border: 1px solid var(--border); background: var(--raise);
}
.verdict__h { font-weight: 800; font-size: 17px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.verdict--good .verdict__h { color: var(--good); }
.verdict--bad .verdict__h { color: var(--critical); }

.xppop {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%);
  font-size: 30px; font-weight: 800; color: var(--good); z-index: 200;
  pointer-events: none; animation: pop 1100ms cubic-bezier(.2,.8,.3,1) forwards;
  text-shadow: 0 2px 20px rgba(0,0,0,.15);
}
@keyframes pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.85); }
  22% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08); }
  70% { opacity: 1; transform: translateX(-50%) translateY(-14px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-42px) scale(.96); }
}

/* ---------------- Bottom action bar ---------------- */

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: color-mix(in srgb, var(--plane) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  padding: 12px max(16px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
}
.actionbar__inner { max-width: var(--measure); margin: 0 auto; display: flex; gap: 10px; }

.big {
  flex: 1; border: none; border-radius: 15px; padding: 16px 20px;
  font-size: 17px; font-weight: 800; letter-spacing: -.01em; cursor: pointer;
  background: var(--series-1); color: #fff;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--series-1) 55%, #000);
  transition: transform 90ms, box-shadow 90ms;
}
.big:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--series-1) 55%, #000); }
.big:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }
.big--good { background: var(--good); box-shadow: 0 4px 0 color-mix(in srgb, var(--good) 55%, #000); }
.big--good:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--good) 55%, #000); }
.big--ghost {
  flex: 0 0 auto; background: var(--card); color: var(--text-secondary);
  border: 1px solid var(--border); box-shadow: 0 2px 0 var(--border); padding: 16px 18px;
}
.big--ghost:active { box-shadow: none; }

/* ---------------- Widgets inside cards ---------------- */

.w { margin: 18px 0 0; }
.wlabel {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px;
}
.ctl { margin-bottom: 16px; }
.ctl__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.ctl__n { font-size: 14px; color: var(--text-secondary); font-weight: 600; }
.ctl__v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--series-1); }

input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px;
  background: transparent; cursor: pointer; margin: 0; display: block;
}
input[type=range]::-webkit-slider-runnable-track { height: 8px; background: var(--grid); border-radius: 5px; }
input[type=range]::-moz-range-track { height: 8px; background: var(--grid); border-radius: 5px; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px;
  border-radius: 50%; background: var(--series-1); margin-top: -9px;
  border: 3px solid var(--card); box-shadow: 0 2px 7px rgba(0,0,0,.25);
}
input[type=range]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--series-1);
  border: 3px solid var(--card); box-shadow: 0 2px 7px rgba(0,0,0,.25);
}
input[type=range]:focus-visible { outline: 3px solid var(--series-1); outline-offset: 4px; border-radius: 6px; }

.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-top: 16px;
}
.tile {
  background: var(--raise); border-radius: 14px; padding: 14px 15px;
  border: 1px solid var(--border);
}
.tile__l { font-size: 11.5px; color: var(--text-muted); font-weight: 600; line-height: 1.3; margin-bottom: 5px; }
.tile__v { font-size: 24px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; overflow-wrap: anywhere; }
.tile__s { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.35; }
.tile--hero .tile__v { font-size: 32px; }

.picks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pick {
  font-size: 14px; font-weight: 700; padding: 10px 15px; border-radius: 100px;
  border: 2px solid var(--border); background: var(--card); color: var(--text-secondary);
  cursor: pointer; transition: all 120ms; box-shadow: 0 2px 0 var(--border);
}
.pick:active { transform: translateY(2px); box-shadow: none; }
.pick--on { background: var(--series-1); border-color: var(--series-1); color: #fff; box-shadow: 0 2px 0 color-mix(in srgb, var(--series-1) 55%, #000); }

.say {
  margin-top: 16px; padding: 15px 17px; border-radius: 14px;
  background: var(--raise); border: 1px solid var(--border);
  font-size: 15px; line-height: 1.55;
}
.say b { font-weight: 800; }

/* order book */
.bk { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk__h { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.bk__r {
  display: flex; justify-content: space-between; font-size: 13.5px;
  font-variant-numeric: tabular-nums; padding: 7px 10px; border-radius: 8px;
  margin-bottom: 3px; position: relative; overflow: hidden; font-weight: 600;
}
.bk__d { position: absolute; inset: 0 auto 0 0; opacity: .2; transition: width 250ms; }
.bk__r span { position: relative; z-index: 1; }
.bk__r--b .bk__d { background: var(--series-1); }
.bk__r--a .bk__d { background: var(--div-neg); }
.bk__sp {
  text-align: center; font-size: 13px; padding: 11px; margin: 10px 0 14px;
  border-radius: 12px; background: var(--raise); font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.bk__sp b { color: var(--text-primary); font-weight: 800; }

/* chart hosts inside cards */
.chartbox { margin-top: 14px; }
svg.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--sans); }
.ax-label { font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.ax-title { font-size: 11px; fill: var(--text-muted); }
.gridline { stroke: var(--grid); stroke-width: 1; }
.axisline { stroke: var(--axis); stroke-width: 1; }
.dlabel { font-size: 11.5px; fill: var(--text-primary); font-weight: 700; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 12px; }
.legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.legend__key { width: 14px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.legend__key--dot { width: 10px; height: 10px; border-radius: 50%; }

.tooltip {
  position: fixed; pointer-events: none; z-index: 300;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 11px; padding: 10px 13px; font-size: 12.5px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18); max-width: 250px;
  opacity: 0; transition: opacity 90ms; line-height: 1.5;
}
.tooltip--on { opacity: 1; }
.tooltip__t { font-weight: 800; margin-bottom: 4px; }
.tooltip__r { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.tooltip__r span:first-child { color: var(--text-secondary); }

.tableview { margin-top: 12px; }
.tableview > summary {
  cursor: pointer; font-size: 12px; color: var(--text-muted); font-weight: 600;
  list-style: none; padding: 4px 0;
}
.tableview > summary::-webkit-details-marker { display: none; }
.tableview > summary::before { content: "▸ "; }
.tableview[open] > summary::before { content: "▾ "; }
.tableview__scroll { max-height: 230px; overflow: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; }
table.dt { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
table.dt th, table.dt td { padding: 6px 11px; text-align: right; border-bottom: 1px solid var(--grid); white-space: nowrap; }
table.dt th:first-child, table.dt td:first-child { text-align: left; }
table.dt th { position: sticky; top: 0; background: var(--card); font-weight: 700; color: var(--text-secondary); font-size: 11.5px; }
table.dt tr:last-child td { border-bottom: none; }
.src { font-size: 11px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }
.src a { color: var(--text-muted); }

/* ---------------- Module complete ---------------- */

.done { text-align: center; padding: 10px 0; }
.done__i { font-size: 68px; line-height: 1; margin-bottom: 14px; animation: pop2 700ms cubic-bezier(.2,.9,.3,1); }
@keyframes pop2 { from { transform: scale(.4) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
.done__t { font-size: clamp(26px, 6.5vw, 36px); font-weight: 800; letter-spacing: -.03em; margin: 0 0 10px; }
.done__s { font-size: 16.5px; color: var(--text-secondary); margin: 0 0 22px; }
.done__xp {
  display: inline-flex; flex-direction: column; gap: 3px; padding: 16px 30px;
  border-radius: 18px; background: color-mix(in srgb, var(--good) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 34%, transparent);
}
.done__xpn { font-size: 34px; font-weight: 800; color: var(--good); letter-spacing: -.03em; }
.done__xpl { font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: .05em; text-transform: uppercase; }
.newbadge {
  margin-top: 22px; padding: 18px; border-radius: 18px;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  animation: cardin 500ms 300ms backwards;
}
.newbadge__i { font-size: 40px; }
.newbadge__l { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }
.newbadge__n { font-size: 17px; font-weight: 800; margin-top: 3px; }

/* confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 250; overflow: hidden; }
.confetti i {
  position: absolute; width: 9px; height: 14px; border-radius: 2px;
  animation: fall 2.4s linear forwards;
}
@keyframes fall {
  from { transform: translateY(-8vh) rotate(0deg); opacity: 1; }
  to { transform: translateY(108vh) rotate(760deg); opacity: 0; }
}

/* ---------------- Responsive ---------------- */

@media (max-width: 560px) {
  .screen { padding: 16px 13px 130px; }
  .card { padding: 22px 17px; border-radius: 19px; }
  .card--wide { padding: 18px 12px; }
  .card__body { font-size: 16px; }
  .qopt { font-size: 15.5px; padding: 14px 15px; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .tile__v { font-size: 21px; }
  .tile--hero .tile__v { font-size: 27px; }
  .node:nth-child(even) { padding-left: 22px; }
  .statsrow { gap: 8px; }
  .bigstat__v { font-size: 19px; }
}