:root {
  color-scheme: dark;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  background: #0d0b2d;
  color: #fffdf5;
  --purple: #7c5cff;
  --yellow: #ffd166;
  --mint: #58e0bd;
  --red: #ff7b8c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 20%, rgba(124, 92, 255, .32), transparent 28rem),
    radial-gradient(circle at 85% 80%, rgba(88, 224, 189, .18), transparent 24rem),
    #0d0b2d;
}

body::before {
  content: "·  ✦  ·  ·  ✦  ·  ✦  ·";
  position: fixed;
  inset: 6% 5% auto;
  color: rgba(255, 255, 255, .35);
  font-size: clamp(1rem, 3vw, 2rem);
  letter-spacing: 8vw;
  pointer-events: none;
}

button, input { font: inherit; }

.app-shell {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 24px;
}

.screen {
  display: none;
  width: 100%;
  max-width: 680px;
  min-width: 0;
  overflow: hidden;
  padding: clamp(24px, 6vw, 52px);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 32px;
  background: rgba(24, 20, 67, .88);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
  backdrop-filter: blur(14px);
}

.screen.is-active { display: block; animation: arrive .4s ease-out; }

@keyframes arrive { from { opacity: 0; transform: translateY(14px); } }

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 14px; overflow-wrap: anywhere; font-size: clamp(2.2rem, 8vw, 4.5rem); line-height: .98; letter-spacing: -.045em; }
h2 { margin-bottom: 28px; font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1.08; }

.eyebrow { margin-bottom: 10px; color: var(--yellow); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lead { color: #d9d4f5; font-size: 1.15rem; line-height: 1.55; }
.planet, .trophy { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow), #ff9f43); color: #30235e; font-size: 2.8rem; font-weight: 900; box-shadow: 0 0 42px rgba(255, 209, 102, .35); }
.trophy { margin-inline: auto; }

.mission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 28px 0; }
.mission-grid div { padding: 16px 8px; border-radius: 18px; background: rgba(255, 255, 255, .07); text-align: center; }
.mission-grid strong, .mission-grid span { display: block; }
.mission-grid strong { color: var(--mint); font-size: 1.65rem; }
.mission-grid span { color: #c9c3e7; font-size: .85rem; }

.name-field { display: block; margin: 10px 0 8px; font-weight: 700; }
input[type="text"], input[type="number"] { width: 100%; border: 2px solid rgba(255, 255, 255, .16); border-radius: 16px; background: #100e35; color: white; outline: none; }
input[type="text"] { padding: 15px 16px; margin-bottom: 12px; }
input[type="number"] { padding: 16px; text-align: center; font-size: 2rem; font-weight: 800; }
input[type="number"]::placeholder { font-size: 1rem; font-weight: 600; }
input:focus { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(88, 224, 189, .14); }

.primary-button { width: 100%; margin-top: 12px; padding: 15px 18px; border: 0; border-radius: 16px; background: linear-gradient(135deg, var(--purple), #a85cf5); color: white; cursor: pointer; font-weight: 800; box-shadow: 0 10px 28px rgba(124, 92, 255, .3); }
.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.gentle-note, .progress-text { margin: 14px 0 0; color: #a9a3cb; text-align: center; font-size: .9rem; }

.quiz-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.quiz-header .eyebrow { margin: 0; font-size: .72rem; }
.quiz-header strong { display: block; font-size: 1.2rem; }
.score-chip { padding: 10px 14px; border-radius: 999px; background: rgba(255, 209, 102, .12); color: var(--yellow); font-size: 1.2rem; }
.hud-stats { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.reward-chip, .streak-chip { padding: 8px 11px; border-radius: 999px; background: rgba(88, 224, 189, .1); color: var(--mint); font-size: .86rem; font-weight: 800; }
.streak-chip { display: none; background: rgba(255, 123, 140, .12); color: #ffacb7; }
.streak-chip.is-visible { display: block; animation: pop-in .3s ease-out; }
.score-chip.score-bump, .reward-chip.reward-bump { animation: score-bump .45s ease-out; }
.progress-track { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.progress-bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--yellow)); transition: width .3s ease; }
.space-map { position: relative; height: 70px; margin: 8px 6px 0; }
.space-route { position: absolute; top: 30px; left: 16px; right: 16px; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.space-route-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--yellow)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.map-planets { position: absolute; inset: 18px 5px auto; display: flex; justify-content: space-between; }
.map-planet { display: grid; place-items: center; width: 29px; height: 29px; border: 3px solid #393466; border-radius: 50%; background: #1c1849; color: #8f88b8; font-size: .72rem; font-weight: 900; transition: .35s ease; }
.map-planet.is-current { border-color: var(--yellow); color: var(--yellow); box-shadow: 0 0 18px rgba(255,209,102,.45); transform: scale(1.15); }
.map-planet.is-complete { border-color: var(--mint); background: var(--mint); color: #102c2b; }
.map-rocket { position: absolute; top: 0; left: 0; z-index: 2; font-size: 1.45rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); transform: translateX(-8px) rotate(38deg); transition: left .65s cubic-bezier(.2,.8,.2,1); }
.question-card { margin-top: 28px; padding: clamp(20px, 5vw, 34px); border-radius: 24px; background: rgba(255, 255, 255, .06); text-align: center; }
.question-context { min-height: 1.5em; color: #c7c1e7; line-height: 1.45; }
.feedback { min-height: 2.5em; margin-top: 18px; font-size: 1.05rem; font-weight: 700; }
.feedback.correct { color: var(--mint); }
.feedback.incorrect { color: #ffadb7; }
.is-hidden { display: none; }
.question-card.correct-flash { animation: correct-flash .65s ease; }
.question-card.wrong-shake { animation: wrong-shake .42s ease; }
.flying-star { position: fixed; z-index: 50; color: var(--yellow); font-size: 2rem; pointer-events: none; animation: star-flight .7s cubic-bezier(.2,.7,.2,1) forwards; }

.question-visual { margin: 0 auto 20px; }
.bar-chart { display: flex; align-items: end; justify-content: center; gap: 14px; height: 170px; padding: 16px 10px 0; border-left: 2px solid #8f88b8; border-bottom: 2px solid #8f88b8; }
.bar-column { display: flex; flex: 1; max-width: 72px; height: 100%; flex-direction: column; justify-content: end; align-items: center; gap: 5px; }
.bar-column b { font-size: .8rem; }
.bar { width: 100%; min-height: 8px; border-radius: 8px 8px 0 0; background: linear-gradient(var(--mint), #4aa8e8); }
.bar-column span { margin-bottom: -24px; color: #c8c2e8; font-size: .7rem; white-space: nowrap; }
.number-line { display: flex; justify-content: space-between; margin: 34px 4px 24px; border-top: 3px solid #aaa3d1; }
.number-line span { position: relative; padding-top: 10px; font-size: .8rem; }
.number-line span::before { content: ""; position: absolute; top: -7px; left: 50%; height: 12px; border-left: 2px solid #aaa3d1; }
.number-line .mystery { color: var(--yellow); font-size: 1rem; font-weight: 900; }
.data-table { width: min(100%, 360px); margin-inline: auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; }
.data-table-row { display: grid; grid-template-columns: 1fr 1fr; }
.data-table-row > * { padding: 9px 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); text-align: left; }
.data-table-row > *:last-child { text-align: right; }
.data-table-header { background: rgba(88, 224, 189, .12); color: var(--mint); }
.data-table-row:last-child > * { border-bottom: 0; }
.choice-input { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice-input:empty { display: none; }
.choice-input label { display: grid; place-items: center; min-height: 58px; padding: 10px; border: 2px solid rgba(255, 255, 255, .13); border-radius: 14px; background: rgba(255, 255, 255, .05); cursor: pointer; font-weight: 800; }
.choice-input label:has(input:checked) { border-color: var(--mint); background: rgba(88, 224, 189, .13); }
.choice-input input { position: absolute; opacity: 0; pointer-events: none; }

.reward-card { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0; }
.reward-card div { padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .07); text-align: center; }
.reward-card span, .reward-card strong { display: block; }
.reward-card span { margin-bottom: 8px; color: #bdb7dd; }
.reward-card strong { color: var(--yellow); font-size: 1.55rem; }
.reward-choice { display: flex; gap: 12px; margin: 0 0 18px; padding: 0; border: 0; }
.reward-choice legend { width: 100%; margin-bottom: 10px; font-weight: 800; }
.reward-choice label { flex: 1; padding: 14px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 14px; background: rgba(255, 255, 255, .05); cursor: pointer; }
.parent-summary { padding: 16px; border-left: 4px solid var(--mint); border-radius: 8px; background: rgba(88, 224, 189, .08); color: #dffcf4; line-height: 1.5; }
.category-results { display: grid; gap: 8px; margin-top: 18px; }
.category-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.category-row span { color: #d5d0ee; }
.category-row strong { color: var(--yellow); }
.earned-badges { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.earned-badge { display: grid; place-items: center; min-width: 54px; min-height: 54px; padding: 7px; border-radius: 16px; background: rgba(255, 209, 102, .1); border: 1px solid rgba(255,209,102,.25); font-size: 1.65rem; animation: pop-in .45s both; }
.final-rocket { animation: rocket-arrival .9s cubic-bezier(.2,.8,.2,1); }
.mission-celebration { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(6,5,28,.78); opacity: 0; visibility: hidden; transition: opacity .25s ease; backdrop-filter: blur(8px); }
.mission-celebration.is-visible { opacity: 1; visibility: visible; }
.celebration-card { width: min(100%, 440px); padding: 34px; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: #1b174b; text-align: center; transform: scale(.8); transition: transform .35s cubic-bezier(.2,1.3,.4,1); box-shadow: 0 30px 100px rgba(0,0,0,.5); }
.mission-celebration.is-visible .celebration-card { transform: scale(1); }
.celebration-card h2 { margin-bottom: 10px; font-size: 2rem; }
.celebration-badge { font-size: 4.5rem; animation: badge-float 1.1s ease-in-out infinite alternate; }
details { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
summary { cursor: pointer; font-weight: 800; }
li { margin-block: 8px; color: #d5d0ee; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@keyframes score-bump { 50% { transform: scale(1.18); filter: brightness(1.25); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.65); } }
@keyframes correct-flash { 45% { box-shadow: 0 0 0 4px rgba(88,224,189,.25), 0 0 45px rgba(88,224,189,.2); } }
@keyframes wrong-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@keyframes star-flight { from { opacity: 1; transform: scale(.7) rotate(0); } to { opacity: 0; transform: translate(var(--fly-x), var(--fly-y)) scale(.25) rotate(300deg); } }
@keyframes rocket-arrival { from { opacity: 0; transform: translate(-180px, 100px) rotate(-30deg) scale(.5); } }
@keyframes badge-float { to { transform: translateY(-8px) rotate(5deg); } }

@media (max-width: 520px) {
  .app-shell { padding: 12px; }
  .screen { padding: 24px 18px; border-radius: 24px; }
  .reward-choice { display: grid; }
  .quiz-header { align-items: flex-start; }
  .hud-stats { max-width: 58%; }
  .reward-chip, .streak-chip { padding: 7px 9px; font-size: .72rem; }
  .score-chip { padding: 8px 11px; font-size: 1rem; }
  .space-map { margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}