:root {
  --bg-0: #120e1c;
  --bg-1: #1a1430;
  --bg-2: #221a3a;
  --ink: #ece7f7;
  --ink-dim: #b3a9cf;
  --pink: #f0abfc;
  --pink-soft: #f9a8d4;
  --violet: #a78bfa;
  --teal: #5eead4;
  --gold: #fbbf24;
  --red: #fb7185;
  --panel: rgba(36, 26, 58, 0.72);
  --border: rgba(167, 139, 250, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 18% -10%, rgba(167,139,250,0.18), transparent 60%),
    radial-gradient(900px 600px at 92% 110%, rgba(94,234,212,0.14), transparent 55%),
    radial-gradient(700px 500px at 80% -5%, rgba(240,171,252,0.12), transparent 55%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0) 70%);
}

.stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(0.6rem, 1.6vh, 1.4rem) clamp(0.8rem, 2.4vw, 2rem);
  gap: clamp(0.4rem, 1.2vh, 1rem);
}

/* ── Header ───────────────────────────────────────────── */
.top { flex: 0 0 auto; }

.title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

h1 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  letter-spacing: 0.02em;
  background: linear-gradient(100deg, var(--pink), var(--violet) 55%, var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(167,139,250,0.25);
}

.subtitle {
  margin: 0.15rem 0 0;
  color: var(--ink-dim);
  font-size: clamp(0.72rem, 1.5vw, 0.95rem);
  font-weight: 300;
  max-width: 70ch;
}

.reset-btn {
  flex: 0 0 auto;
  background: rgba(167,139,250,0.12);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.reset-btn:hover { background: rgba(167,139,250,0.24); }
.reset-btn:active { transform: scale(0.95); }

.meters {
  margin-top: clamp(0.4rem, 1vh, 0.8rem);
  display: flex;
  gap: clamp(0.5rem, 1.6vw, 1rem);
}
.meter { flex: 1 1 0; }

.meter-track {
  position: relative;
  height: clamp(1.3rem, 2.8vh, 1.7rem);
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--border);
  overflow: hidden;
}

.meter-fill {
  position: absolute;
  inset: 0 100% 0 0;
  width: 0%;
  transition: width 0.7s cubic-bezier(.22,1,.36,1), box-shadow 0.5s;
}
.meter-fill.mastery {
  background: linear-gradient(90deg, var(--pink), var(--violet) 55%, var(--teal));
  box-shadow: 0 0 24px rgba(240,171,252,0.5);
}
.meter-fill.tension {
  width: 100%;
  background: linear-gradient(90deg, var(--red), #f59e0b);
  box-shadow: 0 0 24px rgba(251,113,133,0.4);
}

.meter-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* ── Diagram ──────────────────────────────────────────── */
.diagram-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

#diagram { width: 100%; height: 100%; display: block; }

.pip-emoji { font-size: 22px; }

/* ── Progress nodes ───────────────────────────────────── */
.node { cursor: default; }
.node .node-ring {
  fill: rgba(26, 20, 48, 0.85);
  stroke: rgba(167,139,250,0.4);
  stroke-width: 2;
  transition: stroke 0.3s, fill 0.3s;
}
.node .node-emoji { font-size: 20px; opacity: 0.55; transition: opacity 0.3s; }
.node .node-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  fill: var(--ink-dim);
  transition: fill 0.3s;
}
.node.active { cursor: pointer; }
.node.active .node-ring {
  stroke: var(--pink);
  stroke-width: 3;
  fill: rgba(48, 28, 64, 0.92);
  animation: pulse 1.8s ease-in-out infinite;
}
.node.active .node-emoji { opacity: 1; }
.node.active .node-label { fill: var(--ink); }
.node.done { cursor: pointer; }
.node.done .node-ring { stroke: var(--teal); fill: rgba(20, 48, 44, 0.9); }
.node.done .node-emoji { opacity: 1; }
.node.done .node-label { fill: var(--teal); }
.node-check { font-size: 14px; fill: var(--teal); opacity: 0; transition: opacity 0.4s; }
.node.done .node-check { opacity: 1; }

@keyframes pulse { 0%,100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.35; } }

#spotlight { opacity: 0; transition: opacity 0.4s; }
#spotlight.on { opacity: 1; animation: sweep 2s linear infinite; }
@keyframes sweep { to { stroke-dashoffset: -20; } }

/* ── Tableau: ground & shadows ───────────────────────── */
.ground { fill: rgba(167,139,250,0.07); }
.kid-shadow, .kid .kid-shadow { fill: rgba(0,0,0,0.28); }

/* ── Chompers ─────────────────────────────────────────── */
.kid .kid-body { stroke: rgba(0,0,0,0.18); stroke-width: 1.5; }
.kid .kid-cheek { fill: rgba(255,255,255,0.22); }
.kid .eye { fill: #1b1430; }
.kid .eye-shine { fill: #fff; }
.kid .mouth-bite, .kid .mouth-calm {
  stroke: #5b1f3a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.kid .anger path { stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; }

/* kid bob/jitter driven by mood */
.kid-bob { transform-box: fill-box; transform-origin: center; }

/* default (bitey) */
.mouth-calm { opacity: 0; }
.mouth-bite { opacity: 1; }
.anger { opacity: 1; }

.mood-bitey  .kid-bob { animation: snap 0.5s ease-in-out infinite; }
.mood-bitey #kidB .kid-bob { animation-delay: 0.25s; }
.mood-bitey #spark { opacity: 1; }
.mood-bitey #spark .bolt { animation: zap 0.4s steps(2) infinite; }

.mood-easing .kid-bob { animation: snap 1.1s ease-in-out infinite; }
.mood-easing #kidB .kid-bob { animation-delay: 0.55s; }
.mood-easing .anger { opacity: 0.4; }
.mood-easing .mouth-bite { opacity: 0.5; }
.mood-easing .mouth-calm { opacity: 0.5; }
.mood-easing #spark { opacity: 0.45; }

.mood-calm .kid-bob { animation: float 3.4s ease-in-out infinite; }
.mood-calm #kidB .kid-bob { animation-delay: 1.7s; }
.mood-calm .anger { opacity: 0; }
.mood-calm .mouth-bite { opacity: 0; }
.mood-calm .mouth-calm { opacity: 1; }
.mood-calm #spark { opacity: 0; }
.mood-calm .kid-cheek { fill: rgba(255,140,180,0.4); }

@keyframes snap {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* tension spark */
#spark .bolt { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(251,191,36,0.8)); }
@keyframes zap { 0% { opacity: 1; } 100% { opacity: 0.2; } }

/* ── Faux ─────────────────────────────────────────────── */
.faux { cursor: pointer; }
.faux .body { stroke: rgba(255,255,255,0.14); stroke-width: 1.5; }
.faux .face { stroke: rgba(94,234,212,0.25); stroke-width: 1.5; }
.faux .f-eye { fill: var(--teal); filter: drop-shadow(0 0 4px rgba(94,234,212,0.9)); animation: blink 4.5s infinite; }
.faux .f-mouth { stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; }
.faux .arm { stroke: #8b6fe0; stroke-width: 7; stroke-linecap: round; }
.faux .hand { fill: #c4b5fd; }
.faux .petal { fill: var(--pink-soft); opacity: 0.92; }
.faux .antenna-stalk { stroke: #8b6fe0; stroke-width: 3; }
.faux .antenna-bud { fill: var(--pink); filter: drop-shadow(0 0 5px rgba(240,171,252,0.8)); }
.faux .f-crown-emoji { font-size: 30px; opacity: 0; transition: opacity 0.5s; }

@keyframes blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
.faux .f-eye { transform-box: fill-box; transform-origin: center; }

/* Faux idle gentle hover (relative — Faux is nested in the tableau) */
.faux { animation: hover 3.6s ease-in-out infinite; }
@keyframes hover {
  0%,100% { transform: translate(0px,-6px); }
  50% { transform: translate(0px,-13px); }
}

/* chomper positions (CSS so the finale hug can transition smoothly) */
#kidA { transform: translate(-150px,40px); transition: transform 0.9s cubic-bezier(.34,1.4,.5,1); }
#kidB { transform: translate(150px,40px);  transition: transform 0.9s cubic-bezier(.34,1.4,.5,1); }
.mood-calm.hug #kidA { transform: translate(-82px,40px); }
.mood-calm.hug #kidB { transform: translate(82px,40px); }

/* Faux mouth states */
.f-mouth { opacity: 0; }
.faux.mood-neutral .f-neutral { opacity: 1; }
.faux.mood-focus   .f-focus   { opacity: 1; }
.faux.mood-warm    .f-warm    { opacity: 1; }
.faux.crowned .f-crown-emoji { opacity: 1; }

/* action gestures */
.faux.act .antenna-bud { animation: ping 0.6s ease-out 3; }
@keyframes ping { 0% { r: 8; } 50% { r: 13; } 100% { r: 8; } }
.faux.reach .arm-r { animation: reachOut 0.9s ease-in-out; }
@keyframes reachOut {
  0%,100% { stroke-width: 7; }
  40% { transform: none; }
}

/* radar rings emitted by antenna */
.radar { fill: none; stroke: var(--pink); stroke-width: 2; opacity: 0; }

/* ── Readout ──────────────────────────────────────────── */
.readout {
  flex: 0 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(0.6rem, 1.6vh, 1.1rem) clamp(0.9rem, 2.2vw, 1.5rem);
  backdrop-filter: blur(8px);
  min-height: clamp(5rem, 15vh, 7.5rem);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.readout-step {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
  font-weight: 600;
}
.readout-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  font-weight: 600;
  margin: 0.1rem 0 0.3rem;
  color: var(--ink);
}
.readout-body {
  font-size: clamp(0.78rem, 1.5vw, 0.98rem);
  line-height: 1.45;
  color: var(--ink-dim);
  font-weight: 300;
  max-width: 92ch;
}
.readout.celebrate { border-color: var(--gold); box-shadow: 0 0 40px rgba(251,191,36,0.3); }
.readout.celebrate .readout-title {
  background: linear-gradient(100deg, var(--gold), var(--pink), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 640px) {
  .node .node-label { display: none; }
  .subtitle { display: none; }
}