: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;--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 8px rgba(42,36,56,.07);--sh-md: 0 6px 20px rgba(42,36,56,.1);--sh-lg: 0 14px 36px rgba(42,36,56,.16);--sh-glow: 0 0 0 5px rgba(255,181,71,.28);--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,.4),transparent 60%),radial-gradient(800px 500px at 100% 120%,rgba(167,139,250,.2),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}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 .32s cubic-bezier(.2,.8,.3,1) both}@keyframes screen-in{0%{opacity:0;transform:translateY(10px) 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(.9)}.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 24px;border-radius:var(--r-2xl);background:var(--color-ink);color:#fff;box-shadow:var(--sh-md),inset 0 -3px #0000001f;transition:transform .12s ease,box-shadow .18s ease,filter .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 60%);pointer-events:none;border-radius:inherit}.btn:active{transform:translateY(2px) scale(.97);box-shadow:var(--sh-sm),inset 0 -1px #0000001a}.btn.block{width:100%}.btn-primary{background:linear-gradient(145deg,var(--color-letters-2),var(--color-letters));color:#3d2200}.btn-ghost{background:var(--color-surface);color:var(--color-ink);box-shadow:var(--sh-sm),inset 0 -2px #0000000d}.btn-success{background:linear-gradient(145deg,#4ade80,var(--color-success));color:#062b12}.btn-next{background:linear-gradient(145deg,#a78bfa,#7c3aed);color:#fff;font-size:1.15rem}.btn:focus-visible,.icon-btn:focus-visible{outline:none;box-shadow:var(--sh-glow),var(--sh-md)}.choice-btn{font-family:var(--font-display);font-weight:700;font-size:2rem;padding:20px;min-height:92px;border-radius:var(--r-xl);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--sh-md),inset 0 -3px #2a24380f;position:relative;transition:transform .12s ease,box-shadow .15s ease,background .2s ease;animation:choice-in .4s cubic-bezier(.2,.9,.3,1.1) both;display:flex;align-items:center;justify-content:center;border:3px solid transparent}@keyframes choice-in{0%{opacity:0;transform:translateY(10px) scale(.93)}to{opacity:1;transform:translateY(0) scale(1)}}.choice-btn:not(:disabled):active{transform:translateY(2px) scale(.96);box-shadow:var(--sh-sm)}.choice-btn.cat-letters{border-color:#ff8a5c2e}.choice-btn.cat-numbers{border-color:#4ecdc42e}.choice-btn.cat-sounds{border-color:#a78bfa2e}.choice-btn.cat-syllables{border-color:#60a5fa2e}.choice-btn.cat-listen{border-color:#f472b62e}.choice-btn.state-good{background:linear-gradient(140deg,#d1fae5,#6ee7b7);border-color:var(--color-success);color:#064e1e;box-shadow:0 0 0 4px #22c55e40,var(--sh-md);animation:pop .35s cubic-bezier(.2,.9,.3,1.4) both}.choice-btn.state-bad{background:linear-gradient(140deg,#fee2e2,#fca5a5);border-color:#f87171;color:#5c1010;box-shadow:var(--sh-sm)}.choice-btn.state-reveal{background:linear-gradient(140deg,#d1fae5,#86efac);border-color:var(--color-success);color:#064e1e;box-shadow:0 0 0 4px #22c55e33,var(--sh-md)}.choice-badge{position:absolute;top:8px;right:10px;width:28px;height:28px;border-radius:var(--r-full);background:#fff;display:grid;place-items:center;font-size:.95rem;font-weight:900;box-shadow:var(--sh-sm)}.choice-badge.ok{color:#16a34a}.choice-badge.ko{color:#dc2626}.listen-big{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 38px;border-radius:var(--r-2xl);background:linear-gradient(145deg,var(--color-sounds-2),var(--color-sounds));color:#1a0d3a;box-shadow:var(--sh-lg),inset 0 -4px #0000001a;font-family:var(--font-display);font-weight:700;font-size:1.2rem;animation:pulse-listen 2s ease-in-out infinite;transition:transform .12s ease;cursor:pointer}.listen-big:active{transform:scale(.95);animation:none}@keyframes pulse-listen{0%,to{transform:scale(1);box-shadow:var(--sh-lg),inset 0 -4px #0000001a}50%{transform:scale(1.04);box-shadow:0 0 0 12px #a78bfa33,var(--sh-lg),inset 0 -4px #0000001a}}.yn-btn{font-family:var(--font-display);font-weight:700;font-size:1.4rem;padding:22px;min-height:110px;border-radius:var(--r-xl);display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--sh-md),inset 0 -3px #2a24380f;transition:transform .12s ease,box-shadow .15s ease,background .2s ease;background:var(--color-surface);color:var(--color-ink);border:3px solid var(--color-border)}.yn-btn:not(:disabled):active{transform:translateY(2px) scale(.96)}.yn-emoji{font-size:2.2rem}.yn-btn.state-good{background:linear-gradient(140deg,#d1fae5,#6ee7b7);border-color:var(--color-success);color:#064e1e;box-shadow:0 0 0 4px #22c55e40,var(--sh-md);animation:pop .35s cubic-bezier(.2,.9,.3,1.4) both}.yn-btn.state-bad{background:linear-gradient(140deg,#fee2e2,#fca5a5);border-color:#f87171;color:#5c1010}.yn-btn.state-reveal{background:linear-gradient(140deg,#d1fae5,#86efac);border-color:var(--color-success)}.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}.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}.scroll{overflow-y:auto}.scroll::-webkit-scrollbar{width:6px}.scroll::-webkit-scrollbar-thumb{background:#0000001f;border-radius:6px}