/* Educational-animation inspired: flat shapes, bold color blocks, soft depth,
   generous whitespace, and playful motion. */

:root {
  /* Background fallback gradient stops (the background image is unchanged) */
  --space: #171540;
  --space-deep: #0d1230;
  --sunset: #ff7a5c;
  --sky: #29b6f6;

  /* --- Unified cosmic UI system --------------------------------------------
     Colours sampled from the background nebula: deep indigo + soft purple
     surfaces, a single subtle-cyan accent, and light text. Surfaces are
     slightly tinted (never bright white) so the card sits inside the scene
     instead of floating on top of it. Hierarchy comes from shade + spacing
     + faint outlines rather than heavy borders and stacked shadows. */
  --surface:   rgba(26, 24, 66, 0.82);   /* card / setup / dashboard surfaces */
  --surface-2: rgba(46, 43, 100, 0.64);  /* options, inputs, badges, chips */
  --surface-3: rgba(64, 60, 126, 0.7);   /* hover / active raised shade */
  --panel: var(--surface);               /* legacy aliases */
  --panel-cool: var(--surface-2);

  --ink: #edefff;          /* primary text */
  --muted: #a8acd8;        /* secondary text (muted blue) */

  --accent: #5be9ff;       /* the one accent: subtle cyan */
  --accent-strong: #34d6f2;
  --accent-soft: rgba(91, 233, 255, 0.16);
  --accent-line: rgba(91, 233, 255, 0.34);
  --accent-ink: #052430;   /* readable text on accent fills */

  --good: #5fe0b2;         /* correct-answer reveal, kept within the palette */
  --bad:  #ff8da9;         /* gentle "not quite", never harsh red */

  --line: rgba(150, 162, 235, 0.20);     /* subtle outline */
  --line-strong: rgba(150, 162, 235, 0.34);

  --radius: 20px;          /* unified radius: bubble / card / options / buttons / badges */
  --shadow: rgba(5, 4, 26, 0.45);

  /* legacy accent aliases still referenced by misc UI -> fold into the accent */
  --neutral: var(--accent);
  --purple: #8f86ff;
  --orange: #ff9f1c;

  /* Avatar art-direction tokens (the avatar is unchanged) */
  --ink-line: #0c0a26;
  --cosmic-cyan: #5be9ff;
  --cosmic-green: #7cffb0;
  --cosmic-magenta: #e879d6;
  --rim: #b9f3ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, ui-rounded, "Nunito", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background:
    linear-gradient(160deg, rgba(9, 7, 52, 0.18) 0%, rgba(35, 36, 107, 0.12) 45%, rgba(255, 122, 92, 0.08) 100%),
    url("assets/puzzleshift-cosmic-background.png"),
    linear-gradient(160deg, var(--space) 0%, #23246b 45%, var(--sunset) 100%);
  background-size: cover, cover, cover;
  background-position: center top, center top, center;
  min-height: 100vh;
  color: var(--ink);
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

body::before {
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(55, 245, 221, 0.14), transparent 28%),
    radial-gradient(circle at 16% 86%, rgba(255, 209, 102, 0.16), transparent 26%),
    linear-gradient(180deg, rgba(4, 4, 31, 0.18), rgba(4, 4, 31, 0.36));
  mix-blend-mode: screen;
}

body::after {
  inset: 0;
  background: radial-gradient(circle at center, transparent 0 56%, rgba(2, 3, 28, 0.22) 100%);
}

#app {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.55) 0 1px, transparent 1.5px);
  background-size: 96px 96px, 142px 142px;
  background-position: 18px 22px, 62px 10px;
}

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  color: white; font-weight: 900; padding: 8px 4px 20px;
  text-shadow: 0 3px 0 rgba(0,0,0,0.16);
}
.brand { font-size: 24px; letter-spacing: -0.04em; }
.streak {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 16px;
  color: var(--accent);
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.stage { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ---------------- Avatar ---------------- */
.avatar-wrap { position: relative; display:flex; flex-direction:column; align-items:center; width: 100%; }
.avatar {
  width: 248px;
  height: 248px;
  overflow: visible;
  transition: transform .3s ease;
  /* A single soft, neutral drop shadow lifts the cat off the dark scene for
     legibility -- no colored glow, no halo. */
  filter: drop-shadow(0 9px 11px rgba(6, 4, 34, .42));
  transform-origin: 50% 90%;
  will-change: transform;
}
.avatar * {
  vector-effect: non-scaling-stroke;
}
.avatar path,
.avatar circle,
.avatar ellipse,
.avatar line {
  stroke: var(--ink-line);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Simple soft contact shadow for grounding. */
.shadow { fill: rgba(6, 4, 30, 0.26); stroke: none !important; }
.cat-head { transform-origin: 120px 102px; }
.cat-body { transform-origin: 120px 186px; }
/* Tidy, flat palette */
.head, .ear { fill: #c98a4e; transition: fill .3s ease; }
.inner-ear { fill: #e7a6b6; stroke-width: 5; }
.coat { fill: #f4f7fb; }
.shirt, .leg, .paw { fill: none; stroke: #7e5230; stroke-width: 12; }
.tail-outline { fill: none; stroke: var(--ink-line) !important; stroke-width: 19 !important; }
.tail-fill { fill: none; stroke: #7e5230 !important; stroke-width: 12 !important; }
.shirt { fill: #a86a39; stroke-width: 6; }
.arm { fill: none; stroke: #f4f7fb; stroke-width: 12; }
.paw { fill: #7e5230; stroke-width: 6; }
.cat-tail { transform-origin: 70px 200px; }
.flask { transform-origin: 48px 131px; }
.flask-glass { fill: #d3f1fb; }
.flask-liquid { fill: var(--accent); transition: fill .3s ease; }
.flask-neck { fill: none; stroke-width: 8; }
.science-bubble { fill: #4ec3f0; transform-origin: center; }
.glasses * { fill: white; stroke: var(--ink-line); stroke-width: 6; }
.bridge, .glass-arm { fill: none; }
.lens { fill: #cdeaf7; }
.eye { fill: var(--ink-line); stroke: none !important; transform-origin: center; transition: transform .2s ease, opacity .2s ease; }
.whisker { fill: none; stroke-width: 5; }
.mouth { fill: none; stroke: var(--ink-line); stroke-width: 6; transition: d .25s ease; }
.tongue { fill: #ff7a85; opacity: 0; transform-origin: 120px 122px; transition: opacity .2s ease; }

.bubble {
  margin-top: 8px; background: var(--surface); border-radius: var(--radius); padding: 12px 17px;
  border: 1px solid var(--line); color: var(--ink);
  font-weight: 800; font-size: 15px;
  box-shadow: 0 10px 26px var(--shadow);
  max-width: 260px; text-align: center; position: relative;
}
.bubble::after {
  content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; background: var(--surface);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  rotate: 45deg;
}

/* Bubble tones (set by the reaction director): a whisper reads quiet and
   conspiratorial, a shout reads big; .pop restarts the entrance bounce. */
.bubble.whisper { font-style: italic; font-weight: 600; opacity: 0.85; font-size: 14px; }
.bubble.shout { font-size: 17px; font-weight: 700; letter-spacing: 0.3px; }
.bubble.pop { animation: bubble-pop 0.35s ease; }
@keyframes bubble-pop {
  0% { transform: scale(0.92); }
  55% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
/* Anticipation: pulsing "…" while Bolt holds his breath before outcome reveals */
.bubble.anticipate {
  font-style: italic;
  animation: bubble-anticipate 1.1s ease-in-out infinite;
}
@keyframes bubble-anticipate {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.04); }
}

/* ---- Reaction particle FX (#avatar-fx, spawned by avatar_reactions.js) ----
   Emoji particles over the avatar frame: confetti falls, sparkles/zzz rise,
   bursts scatter outward. Pure presentation; removed from the DOM after ~2.5s. */
#avatar-fx {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3;
}
.fx-p { position: absolute; will-change: transform, opacity; opacity: 0; }
.fx-fall { animation-name: fx-fall; animation-timing-function: ease-in; animation-fill-mode: forwards; }
.fx-rise { animation-name: fx-rise; animation-timing-function: ease-out; animation-fill-mode: forwards; }
.fx-burst { animation-name: fx-burst; animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); animation-fill-mode: forwards; }
@keyframes fx-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--fx-dx, 0px), 240px) rotate(280deg); }
}
@keyframes fx-rise {
  0% { opacity: 0; transform: translate(0, 6px) scale(0.7); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--fx-dx, 0px), -90px) scale(1.15); }
}
@keyframes fx-burst {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  18% { opacity: 1; transform: translate(calc(var(--fx-dx, 0px) * 0.4), -18px) scale(1.2); }
  100% { opacity: 0; transform: translate(var(--fx-dx, 0px), -46px) scale(0.9) rotate(40deg); }
}

/* ---- State expressions --------------------------------------------------- */
/* Idle: subtle ambient life only -- soft breathing, a slow sway, the
   occasional blink, a lazy tail and slowly rising bubbles. Nothing busy. */
.avatar.idle .cat-body { animation: idle-breathe 5s ease-in-out infinite; }
.avatar.idle .cat-head { animation: idle-sway 7s ease-in-out infinite; }
.avatar.idle .eye { animation: idle-blink 6s ease-in-out infinite; }
.avatar.idle .cat-tail { animation: tail-swish 5s ease-in-out infinite; }
.avatar.idle .science-bubble { animation: bubble-rise 4.4s ease-in-out infinite; }
.avatar.idle .b2 { animation-delay: 1s; }
.avatar.idle .b3 { animation-delay: 2s; }

.avatar.thinking .cat-head { animation: curious-tilt 2s ease-in-out infinite; }
.avatar.thinking .flask { animation: flask-mix 1.4s ease-in-out infinite; }
.avatar.thinking .science-bubble { animation: bubble-rise 1.7s ease-in-out infinite; }
.avatar.thinking .b2 { animation-delay: .3s; }
.avatar.thinking .b3 { animation-delay: .6s; }

/* Interaction-type accent in the flask liquid */
.avatar.mcq .flask-liquid { fill: #ffd166; }
.avatar.fill_blank .flask-liquid { fill: #4ea8de; }
.avatar.drag_drop .flask-liquid { fill: #9d8df1; }
.avatar.tap_sequence .flask-liquid { fill: #ff9f1c; }
.avatar.read_respond .flask-liquid { fill: #06d6a0; }

/* Outcome expressions -- restrained: a happy face for correct, a gentle frown
   for wrong. No glow, no confetti. */
.avatar.correct .head, .avatar.correct .ear { fill: #d49a57; }
.avatar.correct .mouth { d: path("M106 120 H134 V124 C134 140 106 140 106 124Z"); }
.avatar.correct .tongue { opacity: 1; }
.avatar.correct .eye { transform: scaleY(.5) translateY(5px); }
.avatar.correct .flask-liquid { fill: var(--good); }
.avatar.wrong .head, .avatar.wrong .ear { fill: #bd8a58; }
.avatar.wrong .mouth { d: path("M106 132 Q120 120 134 132"); }
.avatar.wrong .eye { transform: translateY(3px) scaleY(.72); }
.avatar.wrong .flask-liquid { fill: var(--neutral); }
.avatar.skip .mouth, .avatar.abandon .mouth { d: path("M106 126 H134"); }
.avatar.skip .head, .avatar.skip .ear { fill: #ca9468; }
.avatar.skip .flask-liquid { fill: #cdb4db; }
.avatar.abandon .head, .avatar.abandon .ear { fill: #b08c6a; }
.avatar.abandon .eye { transform: scaleY(.6); }
.avatar.abandon .flask-liquid { fill: #adb5bd; }

/* ---- Reusable animation variants (~10 per category, picked at random) ------ */
/* All variants are deliberately calm and cohesive: gentle ease-in-out timing,
   low amplitude, no spring overshoot or layered multi-part motion. */
.avatar.anim-bob { animation: cat-bob 1.1s ease-in-out both; }
.avatar.anim-hop { animation: cat-hop .9s ease-in-out both; }
.avatar.anim-wiggle { animation: cat-wiggle 1s ease-in-out both; }
.avatar.anim-zoom { animation: cat-zoom .6s ease-out both; }
.avatar.anim-float { animation: cat-float 1.7s ease-in-out both; }
.avatar.anim-slide { animation: cat-slide .6s ease-out both; }
.avatar.anim-pop { animation: cat-pop .55s ease-out both; }
.avatar.anim-drift { animation: cat-drift 1.7s ease-in-out both; }
.avatar.anim-shake { animation: cat-shake .6s ease-in-out both; }

/* Part-driven variants (subtle secondary character motion) */
.avatar.anim-tail .cat-tail { animation: tail-swish .9s ease-in-out 2; }
.avatar.anim-ear .left-ear { animation: ear-twitch .7s ease-in-out 2; }
.avatar.anim-ear .right-ear { animation: ear-twitch .7s ease-in-out 2 reverse; }
.avatar.anim-flask .flask { animation: flask-mix .9s ease-in-out 2; }
.avatar.anim-bubbles .science-bubble { animation: bubble-rise 1.1s ease-in-out 2; }
.avatar.anim-bubbles .b2 { animation-delay: .2s; }
.avatar.anim-bubbles .b3 { animation-delay: .4s; }
.avatar.anim-glasses .glasses { animation: glasses-shine 1s ease-in-out both; }
.avatar.anim-wave .wave-arm { animation: arm-wave .7s ease-in-out 2; transform-origin: 161px 151px; }
.avatar.anim-nod .cat-head { animation: curious-tilt .8s ease-in-out 1; }
.avatar.anim-blink .eye { animation: cat-blink .5s ease-in-out 2; }
.avatar.anim-look .cat-head { animation: cat-look 1.1s ease-in-out both; }
.avatar.anim-stir .flask { animation: flask-stir 1s ease-in-out 2; }
.avatar.anim-breathe .cat-body { animation: cat-breathe 1.6s ease-in-out both; }

/* Whole-body keyframes -- gentle and grounded */
@keyframes cat-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes cat-hop { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 65% { transform: translateY(-9px); } }
@keyframes cat-wiggle { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 65% { transform: rotate(3deg); } }
@keyframes cat-zoom { 0% { transform: scale(.94); opacity: .55; } 100% { transform: scale(1); opacity: 1; } }
@keyframes cat-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes cat-slide { 0% { transform: translateX(-16px); opacity: .5; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes cat-pop { 0% { transform: scale(.93); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes cat-drift { 0%,100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(8px) rotate(2deg); } }
@keyframes cat-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes cat-blink { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } }
@keyframes cat-look { 0%,100% { transform: translateX(0) rotate(0); } 35% { transform: translateX(-4px) rotate(-3deg); } 70% { transform: translateX(4px) rotate(3deg); } }
@keyframes flask-stir { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 65% { transform: rotate(7deg); } }
@keyframes cat-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02,.98) translateY(1px); } }

/* Idle-ambient keyframes */
@keyframes idle-breathe { 0%,100% { transform: scale(1,1) translateY(0); } 50% { transform: scale(1.015,.985) translateY(1px); } }
@keyframes idle-sway { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes idle-blink { 0%,93%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* Part / accent keyframes */
@keyframes tail-swish { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
@keyframes ear-twitch { 0%,80%,100% { transform: rotate(0); } 90% { transform: rotate(-10deg); } }
@keyframes flask-mix { 0%,100% { transform: rotate(0); } 35% { transform: rotate(-7deg); } 70% { transform: rotate(6deg); } }
@keyframes bubble-rise { 0% { opacity: .25; transform: translateY(6px) scale(.8); } 45% { opacity: .9; } 100% { opacity: .3; transform: translateY(-12px) scale(1.1); } }
@keyframes glasses-shine { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes arm-wave { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes curious-tilt { 0%,100% { transform: rotate(0); } 50% { transform: rotate(5deg) translateY(-1px); } }

/* Respect reduced-motion: keep the static expression (colours, mouth, eyes)
   but drop the looping/transform motion so nothing jitters for sensitive users. */
@media (prefers-reduced-motion: reduce) {
  .avatar, .avatar * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .12s !important;
  }
  .card { animation: none; }
}

/* ---------------- Card ---------------- */
.card {
  width: 100%; background: var(--surface); border-radius: var(--radius);
  padding: 24px; box-shadow: 0 18px 44px var(--shadow);
  border: 1px solid var(--line);
  animation: rise .35s ease;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -64px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 233, 255, 0.16), transparent 70%);
}
@keyframes rise { from { opacity: 0; transform: translateY(16px);} to { opacity: 1; transform: translateY(0);} }
.hidden { display: none !important; }

/* Sliding-window loading screen */
.feed-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 18, 48, 0.88);
}
.feed-loading-inner {
  text-align: center;
  color: var(--ink);
}
.feed-loading-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: feed-spin 0.9s linear infinite;
}
@keyframes feed-spin {
  to { transform: rotate(360deg); }
}

.badge-row { position: relative; z-index: 1; display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.badge {
  background: var(--surface-2); border-radius: var(--radius); padding: 6px 13px; font-size: 12px;
  font-weight: 800; text-transform: capitalize; color: var(--ink);
  border: 1px solid var(--line);
}
.badge.stars { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

#item-title { margin: 6px 0 4px; font-size: 22px; letter-spacing: -0.03em; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

.actions { display: flex; flex-direction: column; gap: 10px; }
.btn {
  border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 14px 16px; font-size: 15px; font-weight: 800;
  cursor: pointer; transition: filter .15s ease, background .15s ease; color: var(--accent-ink);
  background: var(--accent);
  letter-spacing: -0.01em;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active { filter: brightness(0.94); }
.btn:disabled { opacity: 0.5; cursor: default; }
/* Primary actions all share the one accent; secondary actions step down in
   shade (not hue) so hierarchy reads without introducing new colours. */
.btn.correct, .btn.retry, .btn.wrong, .btn.next { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-line); }
.btn.skip { background: var(--surface-3); color: var(--ink); border-color: var(--line); }
.btn.abandon { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.btn.next { width: 100%; margin-top: 6px; }

.notes { color: var(--muted); font-size: 12px; text-align: center; min-height: 16px; font-weight: 700; }

/* ---------------- Puzzle renderers ---------------- */
.puzzle { position: relative; z-index: 1; }
.puzzle-question { font-size: 18px; font-weight: 900; margin: 6px 0 18px; line-height: 1.35; letter-spacing: -0.03em; }
.puzzle-feedback { font-size: 14px; font-weight: 900; margin-top: 10px; }
.puzzle-feedback.good { color: var(--good); }
.puzzle-feedback.bad { color: var(--bad); }
.puzzle-explanation { font-size: 13px; color: var(--muted); margin-top: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-weight: 600; }

.option-list { display: flex; flex-direction: column; gap: 10px; }
/* Answer options read as part of the card: same surface family, one shade
   lighter, faint outline. Hover is a calm brightness/shade step, no motion. */
.option-btn {
  text-align: left; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2); font-size: 15px; font-weight: 700; cursor: pointer; color: var(--ink);
  transition: background .15s ease, border-color .15s ease;
}
.option-btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--accent-line); }
.option-btn:disabled { cursor: default; }
.option-btn.correct, .option-btn.reveal-correct { background: rgba(95,224,178,0.16); border-color: var(--good); }
.option-btn.incorrect { background: rgba(255,141,169,0.14); border-color: var(--bad); }

/* ---- Answer feedback: deliberately subtle, stays within the calm palette ----
   Two moods only: a gentle "you got it" pop on the chosen answer, and a calm
   glow that draws the eye to the right answer when the child missed it. Small
   scale + soft --good shadow, short and ease'd -- never a flash or bounce. */
@keyframes answer-correct-pop {
  0%   { transform: scale(1);     box-shadow: 0 0 0 0 rgba(95,224,178,0); }
  45%  { transform: scale(1.025); box-shadow: 0 0 0 4px rgba(95,224,178,0.22); }
  100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(95,224,178,0); }
}
@keyframes answer-reveal-glow {
  0%   { box-shadow: 0 0 0 0 rgba(95,224,178,0); }
  25%  { box-shadow: 0 0 0 4px rgba(95,224,178,0.20); }
  75%  { box-shadow: 0 0 0 4px rgba(95,224,178,0.20); }
  100% { box-shadow: 0 0 0 0 rgba(95,224,178,0); }
}
@keyframes answer-text-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.answer-correct-pop { animation: answer-correct-pop .5s ease-out; }
.answer-reveal-glow { animation: answer-reveal-glow 1.2s ease-in-out; border-color: var(--good) !important; }
.answer-text-in     { animation: answer-text-in .35s ease-out both; }
/* the revealed answer word/order, when the child was wrong -- calm --good text */
.answer-reveal-text { color: var(--good); font-weight: 800; }
/* drag/drop: a slot showing its correct chip after a miss */
.drop-slot.reveal-correct .drop-zone { border-color: var(--good); background: rgba(95,224,178,0.10); }

.fill-input {
  width: 100%; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line);
  font-size: 15px; margin-bottom: 10px; color: var(--ink); font-weight: 700;
  background: var(--surface-2);
}
.fill-input::placeholder { color: var(--muted); }
.fill-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.submit-btn { width: 100%; }

.drag-source { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; min-height: 46px; }
.drag-chip {
  background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); padding: 10px 16px; font-weight: 800;
  cursor: grab; box-shadow: none; user-select: none;
  border: 1px solid var(--accent-line);
}
.drop-targets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.drop-slot { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: var(--radius); padding: 11px 12px; border: 1px solid var(--line); }
.drop-label { flex: 1; font-size: 13px; color: var(--muted); font-weight: 700; }
.drop-zone {
  min-width: 110px; min-height: 38px; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); padding: 4px 8px; font-weight: 700;
}
.drop-zone .drag-chip { cursor: default; }

.tap-pool { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.tap-token {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; background: var(--surface-2);
  color: var(--ink); font-weight: 800; cursor: pointer; transition: background .15s ease, border-color .15s ease; box-shadow: none;
}
.tap-token:hover:not(:disabled) { background: var(--surface-3); border-color: var(--accent-line); }
.tap-token.tapped { opacity: .35; cursor: default; }
.tap-chosen { background: var(--surface-2); border-radius: var(--radius); padding: 11px 12px; margin-bottom: 14px; min-height: 24px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: 1px solid var(--line); }
.tap-chosen-label { font-size: 12px; color: var(--muted); font-weight: 800; margin-right: 4px; }
.tap-chip { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 800; }

.article-title { margin: 0 0 8px; font-size: 20px; font-weight: 900; letter-spacing: -0.03em; }
.article-passage { font-size: 14px; line-height: 1.65; color: rgba(237,239,255,0.84); font-weight: 500; }
.article-divider { border: none; border-top: 1px dashed var(--line-strong); margin: 18px 0; }

.secondary-actions { display: flex; gap: 10px; margin-top: 18px; }
.secondary-actions .btn { flex: 1; padding: 11px; font-size: 13px; }

/* ---------------- Bottom nav ---------------- */
.bottom-nav {
  display: flex; gap: 8px; margin-top: 14px; padding: 8px;
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.nav-btn {
  flex: 1; border: none; border-radius: 14px; padding: 12px 10px; font-size: 14px;
  font-weight: 800; cursor: pointer; background: transparent; color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.nav-btn:hover { color: var(--ink); }
.nav-btn.active { background: var(--accent); color: var(--accent-ink); box-shadow: none; }

/* ---------------- Parent dashboard ---------------- */
.dashboard, .achievements { align-items: stretch; }
.dash-title {
  color: white;
  text-align: center;
  margin: 6px 0 18px;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.05em;
  text-shadow: 0 4px 0 rgba(0,0,0,0.18);
}
.dash-subtitle { color: white; margin: 24px 0 10px; font-size: 17px; font-weight: 950; letter-spacing: -0.03em; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-card {
  background: var(--surface); border-radius: var(--radius); padding: 17px 14px;
  text-align: center; box-shadow: 0 14px 30px var(--shadow);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.dash-card::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -30px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,233,255,0.14), transparent 70%);
}
.dash-card-label { position: relative; font-size: 11px; color: var(--muted); font-weight: 950; text-transform: uppercase; letter-spacing: .05em; }
.dash-card-value { position: relative; font-size: 29px; font-weight: 950; color: var(--ink); margin-top: 5px; letter-spacing: -0.04em; }

.dash-domains { display: flex; flex-direction: column; gap: 10px; }
.dash-domain-row {
  background: var(--surface); border-radius: var(--radius); padding: 13px 16px;
  display: flex; align-items: center; gap: 12px; box-shadow: none;
  border: 1px solid var(--line);
}
.dash-domain-name { width: 120px; font-weight: 800; text-transform: capitalize; font-size: 14px; color: var(--ink); }
.dash-domain-bar { flex: 1; height: 12px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.dash-domain-fill { height: 100%; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); border-radius: 999px; transition: width .4s ease; }
.dash-domain-pct { width: 48px; text-align: right; font-weight: 800; font-size: 13px; color: var(--muted); }
.dash-domain-empty { color: rgba(255,255,255,0.7); font-size: 13px; text-align: center; padding: 8px; }

/* ---------------- Skill levels (v2 progress story) ---------------- */
.dash-hint { color: rgba(255,255,255,0.82); font-size: 12px; margin: -4px 0 10px; font-weight: 700; line-height: 1.45; }
.dash-skills { display: flex; flex-direction: column; gap: 10px; }
.dash-skill-row {
  background: var(--surface); border-radius: var(--radius); padding: 14px 16px;
  box-shadow: none;
  border: 1px solid var(--line);
}
.dash-skill-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.dash-skill-name { font-weight: 800; font-size: 14px; color: var(--ink); }
.dash-skill-level { font-weight: 800; font-size: 14px; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 9px; }
.dash-skill-bar { height: 11px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.dash-skill-fill { height: 100%; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); border-radius: 999px; transition: width .4s ease; }
.dash-skill-mastery { margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 700; text-align: right; }

/* ---------------- Achievements ---------------- */
.ach-progress { text-align: center; color: rgba(255,255,255,0.88); font-size: 14px; margin: -6px 0 4px; font-weight: 800; }
.ach-grid { display: flex; flex-direction: column; gap: 10px; }
.ach-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}
.ach-card.unlocked { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); }
.ach-card.locked { opacity: 0.5; }
.ach-icon { font-size: 30px; width: 46px; height: 46px; text-align: center; flex-shrink: 0; background: var(--surface-2); border-radius: var(--radius); display: grid; place-items: center; }
.ach-info { display: flex; flex-direction: column; gap: 2px; }
.ach-name { font-weight: 800; color: var(--ink); font-size: 15px; }
.ach-desc { font-size: 13px; color: var(--muted); font-weight: 600; }
.ach-sub { font-size: 12px; color: rgba(168,172,216,0.7); font-weight: 600; }
.ach-card.unlocked .ach-icon { background: var(--accent-soft); }

.dash-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-activity li {
  background: var(--surface); border-radius: var(--radius); padding: 11px 14px; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center; box-shadow: none;
  border: 1px solid var(--line);
  gap: 12px; color: var(--ink);
}
.dash-activity .outcome-tag {
  font-weight: 800; border-radius: 999px; padding: 5px 10px; font-size: 12px; color: var(--accent-ink);
}
.outcome-tag.correct_first, .outcome-tag.correct_retry { background: var(--good); }
.outcome-tag.wrong { background: var(--bad); }
.outcome-tag.skip { background: var(--surface-3); color: var(--ink); }
.outcome-tag.abandon { background: var(--surface-2); color: var(--muted); }
.dash-activity .topic-name { color: var(--muted); text-transform: capitalize; font-weight: 700; text-align: right; }

.dash-empty { color: rgba(255,255,255,0.85); text-align: center; margin-top: 30px; font-size: 14px; font-weight: 800; }

/* ---------------- Learner picker (multi-child accounts) ---------------- */
.learner-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.learner-card {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 16px;
  cursor: pointer; transition: background .15s ease, border-color .15s ease; font: inherit; width: 100%;
  box-shadow: none;
}
.learner-card:hover { background: var(--surface-3); border-color: var(--accent-line); }
.learner-avatar {
  width: 46px; height: 46px; border-radius: var(--radius); background: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px;
  color: var(--accent-ink); flex-shrink: 0;
  border: 1px solid var(--accent-line);
}
.learner-info { flex: 1; }
.learner-name { font-weight: 800; font-size: 15px; color: var(--ink); text-transform: capitalize; }
.learner-meta { font-size: 12px; color: var(--muted); margin-top: 2px; font-weight: 600; }
.learner-empty { color: var(--muted); font-size: 14px; margin: 10px 0; font-weight: 600; }

.current-learner-pill {
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 800; cursor: pointer;
  box-shadow: none;
  backdrop-filter: blur(8px);
}

/* ---------------- Setup ---------------- */
.setup {
  background: var(--surface); border-radius: var(--radius); padding: 28px; text-align: center;
  display: flex; flex-direction: column; gap: 12px; margin-top: 40px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px var(--shadow);
  position: relative;
  overflow: hidden;
}
.setup::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -56px;
  top: -62px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143,134,255,0.18), transparent 70%);
}
.setup > * { position: relative; }
.setup h1 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.05em; color: var(--ink); }
.setup p { margin: 0 0 4px; color: var(--muted); line-height: 1.45; font-weight: 600; }
.setup input, .setup select {
  padding: 13px 14px; border-radius: var(--radius); border: 1px solid var(--line); font-size: 15px;
  background: var(--surface-2); color: var(--ink); font-weight: 700;
}
.setup input::placeholder { color: var(--muted); }
.setup input:focus, .setup select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#setup-msg { font-size: 13px; color: var(--bad); min-height: 18px; }

/* Auth screen tabs */
.auth-tabs { display: flex; gap: 6px; margin-bottom: 4px; }
.auth-tab {
  flex: 1; padding: 9px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.auth-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#auth-msg { font-size: 13px; color: var(--bad); min-height: 18px; }
#auth-step-credentials, #auth-step-code { display: flex; flex-direction: column; gap: 12px; }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1a1a1a; border: 1px solid var(--line); font-weight: 700;
}
.google-btn .g-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: #4285F4; color: #fff;
  font-weight: 900; font-size: 13px;
}
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#auth-code { text-align: center; letter-spacing: 8px; font-size: 22px; font-weight: 800; }
.q-label { text-align: left; font-size: 13px; font-weight: 800; color: var(--muted); margin: 4px 0 -6px; }
.checkbox-row {
  display: flex; flex-wrap: wrap; gap: 10px 16px; text-align: left;
  font-size: 14px; color: var(--ink); padding: 4px 2px; font-weight: 700;
}
.checkbox-row label { display: flex; align-items: center; gap: 6px; font-weight: 400; }

/* ---- 3D companion host (avatar3d.js renders a <canvas> inside #avatar) ---- */
.avatar.avatar-3d {
  position: relative;
  overflow: visible;
  filter: drop-shadow(0 12px 14px rgba(6, 4, 34, .45));
}
.avatar.avatar-3d canvas { width: 100% !important; height: 100% !important; display: block; }
.avatar.avatar-3d.loading::after {
  content: "";
  position: absolute; inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(120,200,255,.30), rgba(120,200,255,0) 62%);
  animation: avatar-load-pulse 1.2s ease-in-out infinite;
}
.avatar.avatar-3d.load-error::after {
  content: "🛰️";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 40px; opacity: .8;
}
@keyframes avatar-load-pulse {
  0%, 100% { transform: scale(.86); opacity: .45; }
  50% { transform: scale(1.04); opacity: .9; }
}

@media (max-width: 420px) {
  #app { padding: 14px; }
  .brand { font-size: 21px; }
  .avatar { width: 210px; height: 210px; }
  .card, .setup { padding: 20px; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-domain-row { align-items: flex-start; flex-direction: column; }
  .dash-domain-name, .dash-domain-pct { width: auto; }
  .dash-domain-bar { width: 100%; }
  .secondary-actions { flex-direction: column; }
}