:root{--color-bg: #fff7ec;--color-bg-soft: #ffeccd;--color-ink: #2a2438;--color-ink-soft: #55506b;--color-muted: #8a839f;--color-surface: #ffffff;--color-surface-2: #fffaf1;--color-border: rgba(42, 36, 56, .08);--color-letters: #ff8a5c;--color-letters-2: #ffb547;--color-numbers: #4ecdc4;--color-numbers-2: #78e0d6;--color-sounds: #a78bfa;--color-sounds-2: #c4b5fd;--color-syllables: #60a5fa;--color-syllables-2:#93c5fd;--color-listen: #f472b6;--color-listen-2: #fbcfe8;--color-gold: #ffd166;--color-gold-2: #ffb700;--color-success: #22c55e;--color-warning: #f59e0b;--color-error: #ef4444;--font-display: "Fredoka", system-ui, sans-serif;--font-body: "Nunito", system-ui, sans-serif;--r-sm: 10px;--r-md: 16px;--r-lg: 24px;--r-xl: 32px;--r-2xl: 44px;--r-full: 999px;--sh-sm: 0 2px 6px rgba(42,36,56,.08);--sh-md: 0 8px 24px rgba(42,36,56,.12);--sh-lg: 0 18px 40px rgba(42,36,56,.18);--sh-glow: 0 0 0 6px rgba(255,181,71,.25);--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 24px;--s-6: 32px;--s-7: 48px;--s-8: 64px;--safe-top: env(safe-area-inset-top, 0px);--safe-bot: env(safe-area-inset-bottom, 0px)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-body);font-weight:600;color:var(--color-ink);background:radial-gradient(1200px 600px at 50% -200px,rgba(255,209,102,.45),transparent 60%),radial-gradient(800px 500px at 100% 120%,rgba(167,139,250,.25),transparent 60%),var(--color-bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain;touch-action:manipulation;-webkit-user-select:none;user-select:none}button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;margin:0;letter-spacing:-.01em}p{margin:0}.app-shell{min-height:100%;padding-top:calc(var(--safe-top) + var(--s-2));padding-bottom:calc(var(--safe-bot) + var(--s-4));max-width:560px;margin:0 auto;display:flex;flex-direction:column}.screen{padding:var(--s-4) var(--s-5);display:flex;flex-direction:column;gap:var(--s-5);flex:1;animation:screen-in .35s cubic-bezier(.2,.9,.3,1.2) both}@keyframes screen-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}.topbar .icon-btn{width:48px;height:48px;border-radius:var(--r-full);background:var(--color-surface);box-shadow:var(--sh-sm);display:grid;place-items:center;transition:transform .15s ease}.topbar .icon-btn:active{transform:scale(.92)}.topbar .title{font-family:var(--font-display);font-size:1.25rem;font-weight:700}.topbar .stars-chip{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--color-gold),var(--color-gold-2));color:#3d2a00;padding:8px 14px;border-radius:var(--r-full);font-weight:800;box-shadow:var(--sh-sm)}.btn{font-family:var(--font-display);font-weight:700;font-size:1.05rem;padding:16px 22px;border-radius:var(--r-xl);background:var(--color-ink);color:#fff;box-shadow:var(--sh-md);transition:transform .15s ease,box-shadow .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px}.btn:active{transform:translateY(2px) scale(.98);box-shadow:var(--sh-sm)}.btn.block{width:100%}.btn-primary{background:linear-gradient(135deg,var(--color-letters-2),var(--color-letters));color:#3d2200}.btn-ghost{background:var(--color-surface);color:var(--color-ink);box-shadow:var(--sh-sm)}.btn-success{background:linear-gradient(135deg,#4ade80,var(--color-success));color:#062b12}.card{background:var(--color-surface);border-radius:var(--r-xl);padding:var(--s-5);box-shadow:var(--sh-md)}.stars{display:inline-flex;gap:4px;align-items:center}.star{width:22px;height:22px;display:inline-block}.star.big{width:42px;height:42px}.btn:focus-visible,.icon-btn:focus-visible,.choice:focus-visible{outline:none;box-shadow:var(--sh-glow),var(--sh-md)}.scroll{overflow-y:auto}.scroll::-webkit-scrollbar{width:6px}.scroll::-webkit-scrollbar-thumb{background:#0000001f;border-radius:6px}.confetti-layer{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:50}.confetti-piece{position:absolute;width:10px;height:14px;border-radius:3px;top:-20px;animation:fall 1.8s cubic-bezier(.2,.7,.3,1) forwards}@keyframes fall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(120vh) rotate(720deg);opacity:.9}}@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}to{transform:scale(1)}}.pop{animation:pop .35s cubic-bezier(.2,.9,.3,1.4) both}@keyframes shake-soft{0%,to{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-2px)}}.shake-soft{animation:shake-soft .35s ease}.center{text-align:center}.hide{display:none!important}.flex{display:flex}.col{flex-direction:column}.gap-2{gap:var(--s-3)}.gap-3{gap:var(--s-4)}.gap-4{gap:var(--s-5)}.grow{flex:1}