:root{--color-bg: #fdf6e3;--color-bg-sky: #eaf4ff;--color-primary: #f0b429;--color-primary-dark: #d89a1f;--color-primary-ink: #5c4308;--color-secondary: #2563eb;--color-success: #22a06b;--color-error: #e5484d;--color-foreground: #3b2f2f;--color-muted: #7a6a55;--color-surface: #ffffff;--color-border: #e8dcc3;--radius-lg: 24px;--radius-md: 16px;--shadow-card: 0 6px 18px rgba(91, 67, 8, .12);--shadow-btn: 0 4px 0 rgba(91, 67, 8, .25);--font-display: "Fredoka", "Baloo 2", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;--font-body: "Nunito", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-body);color:var(--color-foreground);background:radial-gradient(circle at 15% 10%,#fde68a 0,transparent 30%),radial-gradient(circle at 85% 15%,#bfdbfe 0,transparent 30%),radial-gradient(circle at 80% 90%,#bbf7d0 0,transparent 35%),radial-gradient(circle at 10% 90%,#fbcfe8 0,transparent 30%),linear-gradient(160deg,var(--color-bg-sky),var(--color-bg));background-attachment:fixed;min-height:100vh}#root{min-height:100vh}.app{min-height:100vh;display:flex;justify-content:center;padding:24px 16px 48px}.screen{width:100%;max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}.screen-title{font-family:var(--font-display);font-size:clamp(2rem,6vw,2.75rem);margin:12px 0 4px;color:var(--color-foreground)}.screen-subtitle{margin:0 0 24px;color:var(--color-muted);font-size:1.1rem}.btn{font-family:var(--font-display);font-weight:600;font-size:1.1rem;border:none;border-radius:999px;padding:12px 28px;cursor:pointer;box-shadow:var(--shadow-btn);transition:transform .15s ease,box-shadow .15s ease,background-color .2s ease;touch-action:manipulation}.btn:hover{transform:translateY(-2px);box-shadow:0 6px #5b430840}.btn:active{transform:translateY(2px);box-shadow:0 1px #5b430840}.btn:focus-visible{outline:3px solid var(--color-secondary);outline-offset:3px}.btn-primary{background:var(--color-primary);color:var(--color-primary-ink)}.btn-secondary{background:var(--color-secondary);color:#fff}.btn-ghost{background:transparent;color:var(--color-secondary);box-shadow:none;text-decoration:underline}.btn-lg{font-size:1.35rem;padding:16px 44px}.btn-next{margin-top:24px}.btn-back{align-self:flex-start;background:#fffc;color:var(--color-muted);box-shadow:none;font-size:.95rem;padding:8px 16px;margin-bottom:8px}.home-screen{justify-content:center;min-height:70vh}.home-mascot{animation:float 3s ease-in-out infinite}.home-title{font-family:var(--font-display);font-size:clamp(2.6rem,9vw,4.2rem);margin:16px 0 8px;color:var(--color-foreground)}.home-subtitle{max-width:480px;font-size:1.15rem;line-height:1.6;color:var(--color-muted);margin:0 0 32px}.home-hint{margin-top:28px;color:var(--color-muted);font-size:.9rem}.chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;width:100%}.chapter-card{display:flex;flex-direction:column;align-items:center;gap:6px;border:none;border-radius:var(--radius-lg);padding:28px 20px;cursor:pointer;color:var(--color-foreground);box-shadow:var(--shadow-card);transition:transform .15s ease,box-shadow .15s ease;touch-action:manipulation}.chapter-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 10px 22px #5b430833}.chapter-card:focus-visible{outline:3px solid var(--color-secondary);outline-offset:3px}.chapter-emoji{font-size:2.6rem}.chapter-num{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:#3b2f2fb3}.chapter-title{font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1.3}.chapter-play{margin-top:10px;font-family:var(--font-display);font-weight:700;font-size:1rem;background:#ffffffd9;padding:8px 22px;border-radius:999px;box-shadow:var(--shadow-btn)}.chapter-not-played{font-size:.85rem;color:#3b2f2f99;margin-top:10px}.star-rating{display:flex;align-items:center;gap:2px;margin-top:8px}.star-rating-value{margin-left:8px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--color-foreground)}.recap-card{width:100%;border-radius:var(--radius-lg);padding:32px 24px;margin-top:12px;box-shadow:var(--shadow-card)}.recap-emoji{font-size:3rem;display:block}.recap-title{font-family:var(--font-display);font-size:1.1rem;margin:8px 0 0;opacity:.75;text-transform:uppercase;letter-spacing:1px}.recap-subtitle{font-family:var(--font-display);font-size:clamp(1.6rem,5vw,2.2rem);margin:4px 0 0}.recap-body{width:100%;text-align:left;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;margin-top:20px;box-shadow:var(--shadow-card)}.recap-paragraph{line-height:1.7;font-size:1.1rem;margin:0 0 16px}.recap-paragraph:last-child{margin-bottom:0}.recap-actions{margin-top:24px}.quiz-screen{position:relative}.quiz-topbar{width:100%;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.quiz-progress{width:100%;height:14px;background:#ffffffd9;border:2px solid var(--color-border);border-radius:999px;overflow:hidden}.quiz-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),#fbbf24);border-radius:999px;transition:width .3s ease}.quiz-stats{display:flex;gap:12px;justify-content:center}.stat{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;background:#ffffffe6;border-radius:999px;padding:6px 14px;box-shadow:var(--shadow-card)}.stat-streak{color:var(--color-error)}.question-card{width:100%;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow-card);text-align:left}.question-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:8px}.badge{font-family:var(--font-display);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:1px;background:#fef3c7;color:#92400e;border-radius:999px;padding:5px 12px}.question-count{font-size:.9rem;color:var(--color-muted)}.question-prompt{font-family:var(--font-display);font-size:clamp(1.25rem,4vw,1.6rem);line-height:1.5;margin:0 0 24px}.blank{display:inline-block;min-width:4em;border-bottom:4px solid var(--color-primary);color:var(--color-secondary);font-weight:700}.options{display:flex;flex-direction:column;gap:12px}.option{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;text-align:left;font-family:var(--font-body);font-size:1.1rem;font-weight:600;color:var(--color-foreground);background:#f8f4ea;border:3px solid var(--color-border);border-radius:var(--radius-md);padding:12px 18px;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background-color .15s ease;touch-action:manipulation}.option:hover:not(:disabled){border-color:var(--color-primary);transform:translate(4px)}.option:focus-visible{outline:3px solid var(--color-secondary);outline-offset:2px}.option:disabled{cursor:default}.option-letter{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.1rem;border-radius:50%;background:#e8dcc3;color:var(--color-foreground)}.option-text{flex:1}.option-mark{flex-shrink:0;display:inline-flex}.option-mark svg{display:block}.option-mark-correct{color:var(--color-success)}.option-mark-wrong{color:var(--color-error)}.option-correct{border-color:var(--color-success);background:#e9f8f1;animation:pop .3s ease}.option-wrong{border-color:var(--color-error);background:#fdeeee}.option-dimmed{opacity:.55}.explanation{margin-top:20px;padding:14px 18px;border-radius:var(--radius-md);background:#fef9e7;border:2px solid #f5d778;line-height:1.55;font-size:1.02rem}.results-screen{justify-content:center;min-height:60vh}.results-card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:40px 32px;box-shadow:var(--shadow-card);max-width:480px;width:100%}.results-emoji{font-size:3.4rem;display:block}.results-title{font-family:var(--font-display);font-size:1.6rem;margin:12px 0 8px}.results-score{display:flex;justify-content:center;margin:16px 0}.results-message{font-size:1.15rem;line-height:1.6;color:var(--color-muted);margin:0 0 28px}.results-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}.results-actions .btn{width:100%}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1000;overflow:hidden}.confetti-piece{position:absolute;top:-20px;width:12px;height:12px;border-radius:3px;animation:confetti-fall 1.8s ease-in forwards}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pop{0%{transform:scale(.95)}60%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(540deg);opacity:.6}}@media(max-width:480px){.app{padding:16px 10px 32px}.chapter-grid{grid-template-columns:1fr}.question-card{padding:20px 16px}.question-meta{flex-direction:column;align-items:flex-start;gap:6px}.results-card{padding:28px 20px}}@media(prefers-reduced-motion:reduce){.home-mascot,.confetti-piece,.option-correct,.option,.chapter-card,.btn{animation:none!important;transition:none!important}}