:root {
  --ink: #251d47;
  --muted: #625b7c;
  --panel: rgba(255, 255, 255, .88);
  --panel-strong: rgba(255, 255, 255, .96);
  --stroke: rgba(255, 255, 255, .58);
  --purple: #6246c7;
  --purple-deep: #34217f;
  --orange: #f68042;
  --green: #2ca971;
  --red: #c84b68;
  --shadow: 0 22px 55px rgba(26, 16, 78, .22);
  --soft-shadow: 0 14px 30px rgba(33, 24, 83, .15);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  color: var(--ink);
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  background: radial-gradient(circle at 15% 15%, #fbc6dd 0, transparent 30%), radial-gradient(circle at 80% 25%, #abd8ff 0, transparent 35%), linear-gradient(145deg, #ffe6ae, #c4d4ff 48%, #d2bdfd);
  overflow-x: hidden;
}
button { font: inherit; cursor: pointer; }
button:focus-visible, summary:focus-visible { outline: 4px solid #ffbe2e; outline-offset: 4px; }
.is-hidden { display: none !important; }
#scene-container, #fallback-scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
#scene-container { z-index: 0; }
#scene-container canvas { display: block; width: 100%; height: 100%; pointer-events: auto; touch-action: none; }
#fallback-scene { z-index: -1; }
.webgl-ready #fallback-scene { opacity: .25; }
.fallback-orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .55; animation: drift 12s ease-in-out infinite alternate; }
.orb-one { width: 190px; height: 190px; left: 8%; top: 22%; background: #f477a7; }
.orb-two { width: 280px; height: 280px; right: 7%; top: 26%; background: #6da9fa; animation-delay: -3s; }
.orb-three { width: 160px; height: 160px; left: 54%; bottom: 4%; background: #f5b948; animation-delay: -6s; }
.fallback-star { position: absolute; color: rgba(255,255,255,.78); font-size: 52px; animation: twinkle 3s ease-in-out infinite alternate; }
.star-a { left: 14%; top: 12%; }.star-b { right: 18%; top: 17%; animation-delay: -1s; }.star-c { left: 47%; top: 7%; animation-delay: -2s; }
@keyframes drift { to { transform: translate3d(32px,-22px,0) scale(1.1); } }
@keyframes twinkle { to { transform: scale(1.35) rotate(16deg); opacity: .42; } }
.topbar { position: relative; z-index: 10; width: min(1480px, calc(100% - 32px)); margin: 16px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { border: 0; background: rgba(255,255,255,.78); box-shadow: var(--soft-shadow); border-radius: 22px; padding: 10px 15px 10px 11px; display: inline-flex; gap: 9px; align-items: center; color: var(--purple-deep); text-align: left; backdrop-filter: blur(18px); }
.brand-mark { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 15px; background: linear-gradient(145deg,#fff0a7,#f4a15a); font-size: 25px; }
.brand strong, .brand small { display: block; }.brand small { color: var(--muted); font-size: .74rem; margin-top: 1px; }
.top-actions, .toolbar-buttons { display: flex; gap: 8px; align-items: center; }
.portfolio-link { display:inline-flex; align-items:center; min-height:45px; padding:0 13px; border:1px solid var(--stroke); border-radius:18px; color:var(--purple-deep); background:rgba(255,255,255,.82); box-shadow:var(--soft-shadow); backdrop-filter:blur(18px); font-size:.78rem; font-weight:900; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.round-button, .parent-button, .icon-text-button { border: 1px solid var(--stroke); color: var(--purple-deep); background: rgba(255,255,255,.82); box-shadow: var(--soft-shadow); backdrop-filter: blur(18px); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.portfolio-link:hover, .round-button:hover, .parent-button:hover, .icon-text-button:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 16px 25px rgba(33,24,83,.19); }
.round-button { width: 45px; height: 45px; border-radius: 50%; font-size: 21px; }
.parent-button { min-height: 45px; padding: 0 15px; border-radius: 18px; font-weight: 800; }
main { position: relative; z-index: 4; width: min(1180px, calc(100% - 32px)); margin: 34px auto 36px; }
.glass-panel { border: 1px solid var(--stroke); background: var(--panel); backdrop-filter: blur(22px); box-shadow: var(--shadow); }
.landing-screen { display: grid; gap: 24px; }
.hero-copy { max-width: 760px; margin: 2vh auto 0; padding: 27px 30px; border-radius: 30px; text-align: center; }
.eyebrow { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: rgba(98,70,199,.12); color: var(--purple-deep); font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 12px 0 9px; font-size: clamp(2rem, 6vw, 4.35rem); line-height: .98; letter-spacing: -.07em; color: var(--purple-deep); }
.hero-copy p { margin: 0 auto; max-width: 670px; font-size: clamp(.96rem, 2vw, 1.13rem); line-height: 1.55; color: #544d70; }
.feature-row { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.feature-row span { padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.75); color: var(--purple-deep); font-size: .84rem; font-weight: 800; }
.age-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; perspective: 1000px; }
.age-card { position: relative; min-height: 228px; padding: 21px 14px 16px; border: 1px solid rgba(255,255,255,.74); border-radius: 29px; color: #30236b; background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.66)); box-shadow: var(--soft-shadow); transform-style: preserve-3d; transition: transform .24s ease, box-shadow .24s ease; overflow: hidden; }
.age-card::after { content:""; position: absolute; inset: auto -18% -35% -18%; height: 100px; border-radius: 50%; opacity: .32; background: var(--age-accent); }
.age-card:hover { transform: translateY(-12px) rotateX(5deg) rotateY(-4deg); box-shadow: 0 27px 42px rgba(32,22,81,.22); }
.age-1 { --age-accent:#f1aa45; }.age-2 { --age-accent:#50b781; }.age-3 { --age-accent:#8a70d9; }.age-4 { --age-accent:#f08c5a; }.age-5 { --age-accent:#4aa4de; }
.planet { display:block; transform: translateZ(38px); font-size: 68px; filter: drop-shadow(0 12px 7px rgba(51,34,109,.18)); }
.age-label { display:block; margin-top: 6px; color: var(--purple-deep); font-size: 1.55rem; font-weight: 950; letter-spacing: -.04em; }
.age-card small { display:block; min-height: 34px; margin-top: 5px; color: var(--muted); line-height: 1.25; }
.age-progress { display:inline-flex; margin-top: 13px; padding: 6px 8px; border-radius: 999px; background: rgba(98,70,199,.1); color: #5840a8; font-size: .72rem; font-weight: 900; }
.medical-note { max-width: 800px; margin: 0 auto; text-align: center; color: #665c7c; font-size: .78rem; line-height: 1.45; }
.game-screen { width: min(980px, 100%); margin: 0 auto; display: grid; gap: 13px; }
.game-toolbar, .progress-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 20px; }
.icon-text-button { border-radius: 14px; min-height: 39px; padding: 0 12px; font-weight: 900; }
.level-title { color: var(--purple-deep); }.level-title span { font-size: 1.25rem; vertical-align: middle; }
.progress-panel { display: block; padding: 12px 14px; }
.progress-copy { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: #574c78; font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.progress-track { height: 11px; border-radius: 999px; overflow: hidden; background: rgba(98,70,199,.13); }
.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background: linear-gradient(90deg,#6649c7,#e76a9a,#f6b14d); transition: width .35s ease; }
.question-card { display: flex; gap: 17px; align-items: center; padding: 20px 21px; border-radius: 27px; }
.question-emoji { flex: 0 0 auto; display: grid; width: 82px; height: 82px; place-items: center; border-radius: 24px; background: linear-gradient(145deg,#fff6bd,#ffd0a5); box-shadow: inset 0 1px 0 #fff, 0 12px 22px rgba(117,63,55,.13); font-size: 44px; }
.mode-chip { display:inline-flex; padding: 5px 8px; border-radius: 999px; background: rgba(98,70,199,.1); color: var(--purple); font-size: .73rem; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
h2 { margin: 8px 0 4px; color: var(--purple-deep); font-size: clamp(1.45rem,4vw,2.25rem); line-height: 1.07; letter-spacing: -.04em; }
.question-copy p { margin:0; color:var(--muted); font-size:.88rem; }
.options-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; perspective: 1000px; }
.option-card { position: relative; min-height: 132px; padding: 14px 8px 12px; border: 2px solid rgba(255,255,255,.76); border-radius: 24px; color: var(--purple-deep); background: rgba(255,255,255,.9); box-shadow: var(--soft-shadow); transform-style: preserve-3d; transition: transform .17s ease, box-shadow .17s ease, border .17s ease; overflow: hidden; }
.option-card::after { content:""; position:absolute; left:12%; right:12%; bottom:-20px; height:35px; border-radius:50%; background:rgba(107,77,193,.11); }
.option-card:hover { transform: translateY(-7px) rotateX(4deg); box-shadow: 0 20px 30px rgba(32,22,81,.18); }
.option-card.correct { border-color:#2fa66e; background:#e8fff1; animation: pop .45s ease; }
.option-card.wrong { border-color:#d85b72; background:#fff0f3; animation: shake .38s ease; }
.option-emoji { display:block; min-height:50px; font-size:42px; line-height:1.05; transform:translateZ(22px); }
.option-label { display:block; margin-top:6px; font-weight:950; font-size:1rem; line-height:1.05; }
@keyframes pop { 50% { transform:scale(1.08); } }
@keyframes shake { 20%,60% { transform:translateX(-6px); } 40%,80% { transform:translateX(6px); } }
.guided-panel, .adult-note { border-radius:21px; padding:14px 16px; }
.guided-panel { display:flex; align-items:center; justify-content:space-between; gap:14px; }.guided-panel p { margin:0; color:#5c5373; line-height:1.4; }
.adult-note { color:#5d5374; font-size:.84rem; line-height:1.45; }.adult-note::before { content:"Caregiver note · "; color:var(--purple); font-weight:950; }
.bottom-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; }
.feedback { min-height:30px; display:flex; align-items:center; color:var(--purple-deep); font-weight:950; font-size:1.05rem; text-shadow:0 1px 0 rgba(255,255,255,.7); }
.primary-button, .secondary-button, .danger-button { border:0; border-radius:17px; padding:13px 17px; font-weight:950; box-shadow:var(--soft-shadow); transition:transform .18s ease, box-shadow .18s ease; }
.primary-button { color:#fff; background:linear-gradient(135deg,#694acb,#463094); }.secondary-button { color:var(--purple-deep); background:#eeeaff; }.danger-button { color:#8e2745; background:#ffe5ec; }
.primary-button:hover, .secondary-button:hover, .danger-button:hover { transform:translateY(-3px); box-shadow:0 16px 25px rgba(33,24,83,.2); }
.next-button { min-width:170px; }
.parent-dialog { width:min(870px,calc(100% - 24px)); max-height:min(850px,calc(100vh - 24px)); border:0; padding:0; border-radius:29px; color:var(--ink); background:transparent; box-shadow:0 34px 90px rgba(28,17,75,.42); }
.parent-dialog::backdrop { background:rgba(29,22,68,.48); backdrop-filter:blur(6px); }
.dialog-shell { position:relative; padding:27px; border-radius:29px; background:rgba(255,255,255,.96); }
.dialog-close { position:absolute; right:16px; top:14px; width:39px; height:39px; border:0; border-radius:50%; color:#574389; background:#eeeaff; font-size:26px; line-height:1; }
.dialog-intro { color:var(--muted); line-height:1.48; }
.dashboard-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin:17px 0; }
.stat-card { padding:12px 10px; border-radius:17px; background:#f4f0ff; text-align:center; }.stat-card strong,.stat-card span,.stat-card small { display:block; }.stat-card span { color:var(--purple-deep); font-weight:950; }.stat-card strong { margin:5px 0 2px; font-size:1.3rem; }.stat-card small { color:var(--muted); font-size:.72rem; line-height:1.25; }
.dashboard-actions { display:flex; flex-wrap:wrap; gap:9px; margin:12px 0 14px; }
details { color:var(--muted); line-height:1.45; } summary { cursor:pointer; color:var(--purple-deep); font-weight:900; }
.noscript { position:fixed; inset:auto 20px 20px; z-index:30; padding:14px; border-radius:15px; background:#fff; color:#8e2745; box-shadow:var(--shadow); }
@media (max-width: 930px) { .age-grid { grid-template-columns:repeat(3,1fr); }.options-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 610px) {
  .topbar { width:min(100% - 18px,1480px); margin-top:9px; }.brand small { display:none; }.brand { padding-right:11px; }.brand strong { font-size:.84rem; }.brand-mark { width:35px;height:35px;font-size:20px; }.portfolio-link{min-height:39px;padding:0 9px;font-size:.67rem}.round-button{width:39px;height:39px;font-size:18px}.parent-button{min-height:39px;padding:0 10px;font-size:.77rem}
  main { width:min(100% - 18px,1180px); margin-top:18px; }.hero-copy { padding:22px 17px; border-radius:24px; }.feature-row span { font-size:.74rem; }.age-grid { grid-template-columns:repeat(2,1fr); gap:9px; }.age-card { min-height:177px; padding:13px 8px; border-radius:22px; }.planet { font-size:49px; }.age-label { font-size:1.18rem; }.age-card small { font-size:.7rem; min-height:30px; }.age-progress{margin-top:8px;font-size:.61rem}
  .game-toolbar { flex-wrap:wrap; }.level-title { order:-1; width:100%; text-align:center; }.icon-text-button { font-size:.78rem; min-height:36px; }.question-card{padding:14px;gap:11px;border-radius:22px}.question-emoji{width:62px;height:62px;border-radius:19px;font-size:34px}h2{font-size:1.4rem}.question-copy p{font-size:.75rem}.options-grid{gap:8px}.option-card{min-height:107px;padding:10px 6px;border-radius:18px}.option-emoji{min-height:39px;font-size:34px}.option-label{font-size:.86rem}.guided-panel{display:block}.guided-panel .primary-button{margin-top:10px;width:100%}.bottom-actions{align-items:stretch;flex-direction:column}.next-button{width:100%}.feedback{min-height:24px}.dialog-shell{padding:21px 16px}.dashboard-grid{grid-template-columns:repeat(2,1fr)}
}