:root{--color-primary: #6C63FF;--color-primary-light: #8B85FF;--color-primary-dark: #5046E5;--color-secondary: #FF6B9D;--color-secondary-light: #FF8BB5;--color-accent: #FFD93D;--color-accent-dark: #F0C800;--color-success: #4CAF50;--color-success-light: #81C784;--color-orange: #FF9F43;--color-bg: #FFF8F0;--color-bg-card: #FFFFFF;--color-bg-dark: #2D2B55;--color-text: #2D2B55;--color-text-light: #6B6B8D;--color-text-white: #FFFFFF;--color-border: #E8E4FF;--color-shadow: rgba(108, 99, 255, .15);--radius-sm: 12px;--radius-md: 20px;--radius-lg: 28px;--radius-xl: 40px;--radius-full: 999px;--font-family: "Nunito", sans-serif}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html,body{font-family:var(--font-family);background:var(--color-bg);color:var(--color-text);overflow-x:hidden;-webkit-text-size-adjust:100%;touch-action:manipulation}body{min-height:100dvh}#root{min-height:100dvh;display:flex;flex-direction:column}button,.no-select{-webkit-user-select:none;user-select:none}button,.touchable{min-height:48px;min-width:48px;cursor:pointer;border:none;outline:none;font-family:var(--font-family);font-weight:700;transition:transform .15s ease,box-shadow .15s ease}button:active,.touchable:active{transform:scale(.95)}.btn-primary{background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-full);padding:16px 40px;font-size:1.25rem;font-weight:800;box-shadow:0 6px 0 var(--color-primary-dark),0 8px 20px var(--color-shadow);letter-spacing:.5px}.btn-primary:active{box-shadow:0 2px 0 var(--color-primary-dark);transform:translateY(4px)}.btn-secondary{background:var(--color-secondary);color:#fff;border:none;border-radius:var(--radius-full);padding:14px 32px;font-size:1.1rem;font-weight:700;box-shadow:0 4px #e0547e}.btn-accent{background:var(--color-accent);color:var(--color-text);border:none;border-radius:var(--radius-full);padding:14px 32px;font-size:1.1rem;font-weight:800;box-shadow:0 4px 0 var(--color-accent-dark)}.card{background:var(--color-bg-card);border-radius:var(--radius-lg);padding:24px;box-shadow:0 4px 20px #0000000f;border:3px solid var(--color-border)}.stars-badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--color-accent),#FFE066);color:var(--color-text);padding:8px 20px;border-radius:var(--radius-full);font-weight:800;font-size:1.2rem;box-shadow:0 3px 0 var(--color-accent-dark)}.avatar{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;border:4px solid var(--color-primary);background:var(--color-bg)}.page{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px 20px 40px;width:100%;max-width:600px;margin:0 auto}.page-title{font-size:2rem;font-weight:900;color:var(--color-primary);text-align:center;margin-bottom:16px}.letter-display{font-size:8rem;font-weight:900;color:var(--color-primary);text-align:center;line-height:1;text-shadow:4px 4px 0 var(--color-border)}.letter-display.small{font-size:4rem}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:400px}.option-btn{background:#fff;border:4px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;font-size:2.5rem;font-weight:900;color:var(--color-text);display:flex;align-items:center;justify-content:center;min-height:100px;transition:all .2s ease}.option-btn.correct{border-color:var(--color-success);background:var(--color-success-light);color:#fff}.option-btn.wrong{border-color:var(--color-orange);background:#fff3e0}.option-btn:active{transform:scale(.95)}.progress-bar{width:100%;height:16px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden;margin:16px 0}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));border-radius:var(--radius-full);transition:width .5s ease}.tracing-area{width:100%;max-width:400px;aspect-ratio:1;background:#fff;border-radius:var(--radius-lg);border:4px dashed var(--color-border);overflow:hidden;touch-action:none}.mascot-bubble{background:#fff;border-radius:var(--radius-lg);padding:16px 24px;position:relative;border:3px solid var(--color-primary);font-size:1.15rem;font-weight:600;line-height:1.5;max-width:350px;text-align:center}.mascot-bubble:after{content:"";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);border:8px solid transparent;border-top-color:var(--color-primary)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.animate-bounce{animation:bounce .6s ease}.animate-pulse{animation:pulse 1.5s ease infinite}.animate-slideUp{animation:slideUp .4s ease}.celebration-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;background:#6c63ffe6;z-index:100;color:#fff;text-align:center}.celebration-overlay .big-emoji{font-size:6rem;animation:bounce .6s ease infinite}.celebration-overlay .message{font-size:2rem;font-weight:900}