:root{--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--touch-target-min: 44px;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-right: env(safe-area-inset-right, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;color:#333;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body,#root{min-height:100vh;min-height:100dvh}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}button,[role=button],input[type=submit],input[type=button],input[type=reset]{border-radius:12px;border:none;padding:var(--space-3) var(--space-6);font-size:1rem;font-weight:600;font-family:inherit;background-color:#4f46e5;color:#fff;cursor:pointer;touch-action:manipulation;min-height:var(--touch-target-min);min-width:var(--touch-target-min);-webkit-user-select:none;user-select:none}button:active,[role=button]:active{transform:scale(.98)}button:disabled{opacity:.6;cursor:not-allowed}a{color:#4f46e5;text-decoration:none;touch-action:manipulation}a:hover{text-decoration:underline}input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=url],input[type=search],textarea,select{min-height:var(--touch-target-min);padding:var(--space-3) var(--space-4);font-size:1rem;border:1px solid #d1d5db;border-radius:8px;background-color:#fff;width:100%}input:focus,textarea:focus,select:focus{outline:2px solid #4f46e5;outline-offset:2px}@supports (-webkit-touch-callout: none){input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=url],input[type=search],textarea,select{font-size:16px}}.container{width:100%;padding-left:var(--space-4);padding-right:var(--space-4);padding-left:max(var(--space-4),var(--safe-area-left));padding-right:max(var(--space-4),var(--safe-area-right));margin-left:auto;margin-right:auto}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}.hidden,.sm\:hidden{display:none!important}.sm\:block{display:block!important}@media(min-width:640px){.sm\:hidden{display:none!important}.sm\:block{display:block!important}.hide-sm{display:none!important}}@media(min-width:768px){.md\:hidden{display:none!important}.md\:block{display:block!important}.hide-md{display:none!important}}@media(min-width:1024px){.lg\:hidden{display:none!important}.lg\:block{display:block!important}.hide-lg{display:none!important}}.safe-area-top{padding-top:var(--safe-area-top)}.safe-area-bottom{padding-bottom:var(--safe-area-bottom)}.safe-area-left{padding-left:var(--safe-area-left)}.safe-area-right{padding-right:var(--safe-area-right)}.safe-area-x{padding-left:var(--safe-area-left);padding-right:var(--safe-area-right)}.safe-area-y{padding-top:var(--safe-area-top);padding-bottom:var(--safe-area-bottom)}.safe-area-all{padding-top:var(--safe-area-top);padding-right:var(--safe-area-right);padding-bottom:var(--safe-area-bottom);padding-left:var(--safe-area-left)}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.p-1{padding:var(--space-1)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.px-1{padding-left:var(--space-1);padding-right:var(--space-1)}.px-2{padding-left:var(--space-2);padding-right:var(--space-2)}.px-3{padding-left:var(--space-3);padding-right:var(--space-3)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.px-6{padding-left:var(--space-6);padding-right:var(--space-6)}.py-1{padding-top:var(--space-1);padding-bottom:var(--space-1)}.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}.py-3{padding-top:var(--space-3);padding-bottom:var(--space-3)}.py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}.py-6{padding-top:var(--space-6);padding-bottom:var(--space-6)}.m-auto{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100vh;min-height:100dvh}.stack{display:flex;flex-direction:column}.stack>*+*{margin-top:var(--space-4)}.stack-sm>*+*{margin-top:var(--space-2)}.stack-lg>*+*{margin-top:var(--space-6)}.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-4);text-align:center}.homescreen{background:linear-gradient(135deg,#fff9e6,#ffe6f0,#e6f3ff);position:relative;overflow:hidden}.decorations{position:absolute;inset:0;pointer-events:none;overflow:hidden}.decoration{position:absolute;opacity:.8;animation:float 6s ease-in-out infinite}.crayon{font-size:2rem;transform:rotate(-30deg)}.crayon-red{color:#ff6b6b;top:10%;left:5%;animation-delay:0s}.crayon-blue{color:#4dabf7;top:15%;right:8%;animation-delay:1s;transform:rotate(25deg)}.crayon-yellow{color:#ffd43b;bottom:20%;left:8%;animation-delay:2s;transform:rotate(-15deg)}.letter{font-family:Comic Sans MS,Chalkboard,cursive;font-weight:700;font-size:2.5rem}.letter-a{color:#ff922b;top:25%;right:12%;animation-delay:.5s}.letter-b{color:#51cf66;bottom:25%;right:10%;animation-delay:1.5s}.letter-c{color:#cc5de8;bottom:15%;left:15%;animation-delay:2.5s}.paint{border-radius:50%}.paint-splash-1{width:60px;height:60px;background:radial-gradient(circle,#ff6b6b 0%,transparent 70%);top:8%;left:25%;animation-delay:.8s}.paint-splash-2{width:50px;height:50px;background:radial-gradient(circle,#4dabf7 0%,transparent 70%);bottom:12%;right:20%;animation-delay:1.8s}.star{color:#ffd43b;font-size:1.5rem;animation:twinkle 2s ease-in-out infinite}.star-1{top:5%;left:50%;animation-delay:0s}.star-2{bottom:8%;left:30%;animation-delay:1s}@keyframes float{0%,to{transform:translateY(0) rotate(var(--rotation, -30deg))}50%{transform:translateY(-15px) rotate(var(--rotation, -30deg))}}@keyframes twinkle{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.homescreen-content{position:relative;z-index:1;gap:var(--space-8)}.logo-container{margin-bottom:var(--space-4)}.logo{font-family:Comic Sans MS,Chalkboard,cursive;font-size:3.5rem;font-weight:700;letter-spacing:.1em;display:flex;justify-content:center;gap:.05em}.logo-letter{display:inline-block;animation:bounce 2s ease-in-out infinite;text-shadow:3px 3px 0 rgba(0,0,0,.1)}.logo-l1{color:#ff6b6b;animation-delay:0s}.logo-2{color:#ffd43b;animation-delay:.1s}.logo-r1{color:#51cf66;animation-delay:.2s}.logo-r2{color:#4dabf7;animation-delay:.3s}.logo-2b{color:#cc5de8;animation-delay:.4s}.logo-l2{color:#ff922b;animation-delay:.5s}.tagline{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.25rem;color:#495057;margin:0;font-weight:500}.cta-button{background:linear-gradient(135deg,#ff6b6b,#ff922b);color:#fff;font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.5rem;font-weight:700;padding:var(--space-5) var(--space-10);border-radius:50px;border:4px solid white;box-shadow:0 6px #e55039,0 8px 20px #ff6b6b66;cursor:pointer;transition:all .15s ease;min-height:60px;min-width:200px;animation:pulse 2s ease-in-out infinite}.cta-button:hover{transform:translateY(-2px);box-shadow:0 8px #e55039,0 12px 25px #ff6b6b80}.cta-button:active{transform:translateY(4px);box-shadow:0 2px #e55039,0 4px 10px #ff6b6b66}@media(min-width:640px){.logo{font-size:5rem}.tagline{font-size:1.5rem}.cta-button{font-size:1.75rem;padding:var(--space-6) var(--space-12);min-width:250px}.decoration.crayon{font-size:3rem}.decoration.letter{font-size:3.5rem}.paint-splash-1{width:80px;height:80px}.paint-splash-2{width:70px;height:70px}}.welcome-back{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.welcome-message{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.25rem;color:#495057;margin:0}@media(min-width:640px){.welcome-message{font-size:1.5rem}}.games-section{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;margin-top:var(--space-4)}.game-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-5) var(--space-6);border-radius:24px;border:4px solid white;cursor:pointer;transition:all .2s ease;min-width:160px;text-align:center}.game-card:hover{transform:translateY(-4px) scale(1.02)}.game-card:active{transform:translateY(2px) scale(.98)}.spelling-card{background:linear-gradient(135deg,#51cf66,#20c997);box-shadow:0 6px #12b886,0 8px 20px #51cf6666}.spelling-card:hover{box-shadow:0 8px #12b886,0 12px 25px #51cf6680}.spelling-card:active{box-shadow:0 2px #12b886,0 4px 10px #51cf6666}.game-icon{font-family:Comic Sans MS,Chalkboard,cursive;font-size:2rem;font-weight:700;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.15);animation:wiggle 3s ease-in-out infinite}.game-title{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.1rem;font-weight:700;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.1)}.game-description{font-family:Comic Sans MS,Chalkboard,cursive;font-size:.85rem;color:#ffffffe6}@keyframes wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@media(min-width:640px){.game-card{padding:var(--space-6) var(--space-8);min-width:180px}.game-icon{font-size:2.5rem}.game-title{font-size:1.25rem}.game-description{font-size:.95rem}}.home-settings-btn{position:absolute;top:1rem;right:1rem;z-index:10;width:48px;height:48px;border-radius:50%;background:#fff;border:3px solid #e0e0e0;box-shadow:0 4px 12px #00000026;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#666}.home-settings-btn:hover{background:#f5f5f5;border-color:#bdbdbd;transform:rotate(45deg);box-shadow:0 6px 16px #0003}.home-settings-btn:active{transform:rotate(90deg) scale(.95)}@media(min-width:640px){.home-settings-btn{top:1.5rem;right:1.5rem;width:56px;height:56px;font-size:1.75rem}}.onboarding{min-height:100vh;min-height:100dvh;background:linear-gradient(135deg,#e6f7ff,#fff0f5,#f0fff0);display:flex;flex-direction:column;align-items:center;padding:var(--space-4);padding-top:var(--space-8);position:relative;overflow:hidden}.onboarding:before,.onboarding:after{content:"";position:absolute;border-radius:50%;opacity:.3;animation:float 8s ease-in-out infinite}.onboarding:before{width:200px;height:200px;background:radial-gradient(circle,#ffd93d 0%,transparent 70%);top:-50px;left:-50px}.onboarding:after{width:150px;height:150px;background:radial-gradient(circle,#6bcb77 0%,transparent 70%);bottom:-30px;right:-30px;animation-delay:2s}.progress-container{width:100%;max-width:400px;margin-bottom:var(--space-6);position:relative;z-index:1}.progress-bar{height:8px;background:#fffc;border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ffd93d,#6bcb77,#4dabf7);background-size:300% 100%;animation:shimmer 3s ease-in-out infinite;border-radius:10px;transition:width .5s ease}.progress-dots{display:flex;justify-content:space-between;margin-top:var(--space-2);padding:0 var(--space-2)}.progress-dot{width:12px;height:12px;border-radius:50%;background:#fff9;border:2px solid rgba(0,0,0,.1);transition:all .3s ease}.progress-dot.active{background:#4dabf7;border-color:#228be6}.progress-dot.current{transform:scale(1.3);box-shadow:0 0 10px #4dabf780}.back-button{position:absolute;top:var(--space-4);left:var(--space-4);background:#ffffffe6;color:#666;font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;padding:var(--space-2) var(--space-4);border-radius:20px;border:2px solid #ddd;cursor:pointer;transition:all .2s ease;z-index:10}.back-button:hover{background:#fff;border-color:#aaa;transform:translate(-2px)}.encouragement{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:linear-gradient(135deg,#ffd93d,#ff922b);color:#fff;font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.5rem;font-weight:700;padding:var(--space-4) var(--space-8);border-radius:30px;box-shadow:0 8px 30px #ff6b6b66;z-index:100;display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}.encouragement.show{animation:popIn 1.5s ease forwards}@keyframes popIn{0%{transform:translate(-50%,-50%) scale(0);opacity:0}20%{transform:translate(-50%,-50%) scale(1.1);opacity:1}30%{transform:translate(-50%,-50%) scale(1)}80%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(.8);opacity:0}}.encouragement-star{font-size:1.25rem;animation:spin 1s linear infinite}.step-container{flex:1;display:flex;align-items:center;justify-content:center;width:100%;position:relative;z-index:1}.onboarding-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-4);max-width:500px;width:100%;animation:fadeInUp .5s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.step-icon{font-size:4rem;margin-bottom:var(--space-4);animation:bounce 2s ease-in-out infinite}.step-icon.big{font-size:6rem}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.step-title{font-family:Comic Sans MS,Chalkboard,cursive;font-size:2rem;color:#333;margin-bottom:var(--space-2);text-shadow:2px 2px 0 rgba(255,255,255,.8)}.step-subtitle{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.25rem;color:#666;margin-bottom:var(--space-6)}.name-form{display:flex;flex-direction:column;gap:var(--space-4);width:100%;max-width:320px}.name-input{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.5rem;text-align:center;padding:var(--space-4) var(--space-6);border:4px solid #4dabf7;border-radius:20px;background:#fff;color:#333;transition:all .3s ease}.name-input:focus{outline:none;border-color:#ff6b6b;box-shadow:0 0 20px #ff6b6b4d;transform:scale(1.02)}.name-input::placeholder{color:#aaa}.next-button{background:linear-gradient(135deg,#6bcb77,#4dabf7);color:#fff;font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.25rem;font-weight:700;padding:var(--space-4) var(--space-8);border-radius:30px;border:4px solid white;box-shadow:0 6px #4a9d5c,0 8px 20px #6bcb7766;cursor:pointer;transition:all .15s ease}.next-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px #4a9d5c,0 12px 25px #6bcb7780}.next-button:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px #4a9d5c,0 4px 10px #6bcb7766}.next-button:disabled{opacity:.5;cursor:not-allowed}.age-buttons{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}.age-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100px;height:100px;background:#fff;border:4px solid #ffd93d;border-radius:20px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px #e5c235,0 6px 15px #ffd93d4d}.age-button:hover{transform:translateY(-3px) scale(1.05);border-color:#ff922b;box-shadow:0 7px #e5c235,0 10px 20px #ffd93d66}.age-button.selected{background:linear-gradient(135deg,#ffd93d,#ff922b);border-color:#fff;transform:scale(1.1)}.age-button.selected .age-number,.age-button.selected .age-label{color:#fff}.age-number{font-family:Comic Sans MS,Chalkboard,cursive;font-size:2.5rem;font-weight:700;color:#ff922b;line-height:1}.age-label{font-family:Comic Sans MS,Chalkboard,cursive;font-size:.75rem;color:#888;margin-top:var(--space-1)}.sex-buttons{display:flex;gap:var(--space-6);flex-wrap:wrap;justify-content:center}.sex-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:130px;height:140px;background:#fff;border-radius:25px;cursor:pointer;transition:all .2s ease}.sex-button.boy{border:4px solid #4dabf7;box-shadow:0 4px #339af0,0 6px 15px #4dabf74d}.sex-button.girl{border:4px solid #ff6b9d;box-shadow:0 4px #e5527d,0 6px 15px #ff6b9d4d}.sex-button:hover{transform:translateY(-3px) scale(1.05)}.sex-button.boy:hover{box-shadow:0 7px #339af0,0 10px 20px #4dabf766}.sex-button.girl:hover{box-shadow:0 7px #e5527d,0 10px 20px #ff6b9d66}.sex-button.selected{transform:scale(1.1);border-color:#fff}.sex-button.boy.selected{background:linear-gradient(135deg,#4dabf7,#339af0)}.sex-button.girl.selected{background:linear-gradient(135deg,#ff6b9d,#e5527d)}.sex-button.selected .sex-label{color:#fff}.sex-emoji{font-size:3.5rem;margin-bottom:var(--space-2)}.sex-label{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.25rem;font-weight:700;color:#666}.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);max-width:400px}@media(max-width:480px){.avatar-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}}.avatar-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:85px;height:85px;background:#fff;border:3px solid #ddd;border-radius:20px;cursor:pointer;transition:all .2s ease;box-shadow:0 3px #ccc,0 5px 10px #0000001a}.avatar-button:hover{transform:translateY(-2px) scale(1.08);border-color:#6bcb77;box-shadow:0 5px #4a9d5c,0 8px 15px #6bcb774d}.avatar-button.selected{background:linear-gradient(135deg,#6bcb77,#4dabf7);border-color:#fff;transform:scale(1.15);box-shadow:0 4px #4a9d5c,0 6px 20px #6bcb7780}.avatar-button.selected .avatar-label{color:#fff}.avatar-emoji{font-size:2.5rem;line-height:1}.avatar-label{font-family:Comic Sans MS,Chalkboard,cursive;font-size:.7rem;color:#888;margin-top:var(--space-1)}.step-complete{position:relative}.celebration{position:absolute;top:-60px;left:50%;transform:translate(-50%);display:flex;gap:var(--space-6)}.confetti{font-size:2.5rem;animation:confettiFall 2s ease-in-out infinite}.confetti:nth-child(1){animation-delay:0s}.confetti:nth-child(2){animation-delay:.3s}.confetti:nth-child(3){animation-delay:.6s}@keyframes confettiFall{0%,to{transform:translateY(0) rotate(0);opacity:1}50%{transform:translateY(-20px) rotate(180deg);opacity:.8}}.start-learning-button{background:linear-gradient(135deg,#ff6b6b,#ff922b);color:#fff;font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.5rem;font-weight:700;padding:var(--space-5) var(--space-10);border-radius:50px;border:4px solid white;box-shadow:0 6px #e55039,0 8px 20px #ff6b6b66;cursor:pointer;transition:all .15s ease;animation:pulse 2s ease-in-out infinite;margin-top:var(--space-4)}.start-learning-button:hover{transform:translateY(-2px);box-shadow:0 8px #e55039,0 12px 25px #ff6b6b80}.start-learning-button:active{transform:translateY(4px);box-shadow:0 2px #e55039,0 4px 10px #ff6b6b66}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@media(min-width:640px){.step-icon{font-size:5rem}.step-icon.big{font-size:8rem}.step-title{font-size:2.5rem}.step-subtitle{font-size:1.5rem}.name-input{font-size:1.75rem}.age-button{width:120px;height:120px}.age-number{font-size:3rem}.sex-button{width:150px;height:160px}.sex-emoji{font-size:4rem}.avatar-button{width:90px;height:90px}.avatar-emoji{font-size:3rem}}.lesson-card{background:#fff;border-radius:24px;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);border:4px solid #e9ecef;box-shadow:0 4px #dee2e6,0 8px 20px #00000014;transition:all .2s ease;position:relative;overflow:hidden}.lesson-card:hover{transform:translateY(-4px);border-color:#4dabf7;box-shadow:0 8px #339af0,0 12px 30px #4dabf733}.lesson-card-header{display:flex;align-items:center;gap:var(--space-2)}.lesson-subject-emoji{font-size:2rem;line-height:1;animation:bounce 3s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.lesson-subject-label{font-family:Comic Sans MS,Chalkboard,cursive;font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#868e96;background:linear-gradient(135deg,#f1f3f5,#e9ecef);padding:var(--space-1) var(--space-3);border-radius:12px}.lesson-title{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.25rem;font-weight:700;color:#333;margin:0;line-height:1.3}.lesson-meta{display:flex;flex-wrap:wrap;gap:var(--space-2)}.lesson-badge{font-family:Comic Sans MS,Chalkboard,cursive;font-size:.75rem;font-weight:700;padding:var(--space-1) var(--space-2);border-radius:10px;display:inline-flex;align-items:center;gap:var(--space-1)}.lesson-age-badge{background:linear-gradient(135deg,#e6f7ff,#d3f0ff);color:#1890ff;border:2px solid #91d5ff}.lesson-difficulty-badge{color:#fff;border:2px solid rgba(255,255,255,.5);text-shadow:1px 1px 0 rgba(0,0,0,.1)}.lesson-duration-badge{background:linear-gradient(135deg,#fff0f5,#ffe6ec);color:#eb2f96;border:2px solid #ffadd2}.lesson-preview{font-family:Comic Sans MS,Chalkboard,cursive;font-size:.875rem;color:#666;margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lesson-select-button{background:linear-gradient(135deg,#6bcb77,#4dabf7);color:#fff;font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.125rem;font-weight:700;padding:var(--space-3) var(--space-6);border-radius:20px;border:3px solid white;box-shadow:0 4px #4a9d5c,0 6px 15px #6bcb774d;cursor:pointer;transition:all .15s ease;margin-top:auto;align-self:stretch}.lesson-select-button:hover{transform:translateY(-2px);box-shadow:0 6px #4a9d5c,0 10px 20px #6bcb7766}.lesson-select-button:active{transform:translateY(2px);box-shadow:0 2px #4a9d5c,0 4px 10px #6bcb774d}@media(min-width:640px){.lesson-card{padding:var(--space-6)}.lesson-subject-emoji{font-size:2.5rem}.lesson-title{font-size:1.5rem}.lesson-badge{font-size:.8rem;padding:var(--space-1) var(--space-3)}.lesson-preview{font-size:1rem}.lesson-select-button{font-size:1.25rem;padding:var(--space-4) var(--space-8)}}.lesson-filters{background:#ffffffe6;border-radius:20px;padding:var(--space-4);margin-bottom:var(--space-6);border:3px solid #e9ecef;box-shadow:0 4px 15px #0000000d}.filter-search{position:relative;margin-bottom:var(--space-4)}.search-icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);font-size:1.25rem;pointer-events:none}.search-input{width:100%;font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;padding:var(--space-3) var(--space-4);padding-left:calc(var(--space-4) + 2rem);padding-right:calc(var(--space-4) + 2rem);border:3px solid #e9ecef;border-radius:15px;background:#fff;color:#333;transition:all .2s ease}.search-input:focus{outline:none;border-color:#4dabf7;box-shadow:0 0 10px #4dabf733}.search-input::placeholder{color:#aaa}.search-clear{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);background:#e9ecef;color:#666;font-size:.875rem;width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.search-clear:hover{background:#dee2e6;color:#333}.filter-groups{display:flex;flex-direction:column;gap:var(--space-3)}.filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.filter-label{font-family:Comic Sans MS,Chalkboard,cursive;font-size:.875rem;font-weight:700;color:#666;min-width:60px}.filter-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}.filter-chip{font-family:Comic Sans MS,Chalkboard,cursive;font-size:.875rem;font-weight:700;padding:var(--space-2) var(--space-3);border-radius:15px;border:2px solid #e9ecef;background:#fff;color:#666;cursor:pointer;transition:all .2s ease;white-space:nowrap}.filter-chip:hover{border-color:#4dabf7;color:#4dabf7;transform:translateY(-1px)}.filter-chip.active{background:linear-gradient(135deg,#4dabf7,#6bcb77);color:#fff;border-color:transparent;box-shadow:0 2px 8px #4dabf74d}.clear-all-button{font-family:Comic Sans MS,Chalkboard,cursive;font-size:.875rem;color:#ff6b6b;background:transparent;border:none;padding:var(--space-2);cursor:pointer;margin-top:var(--space-3);transition:all .2s ease}.clear-all-button:hover{color:#e55039;text-decoration:underline}@media(min-width:640px){.lesson-filters{padding:var(--space-5)}.search-input{font-size:1.125rem;padding:var(--space-4) var(--space-5);padding-left:calc(var(--space-5) + 2rem);padding-right:calc(var(--space-5) + 2rem)}.filter-label{font-size:1rem;min-width:70px}.filter-chip{font-size:1rem;padding:var(--space-2) var(--space-4)}}.lesson-selection{min-height:100vh;min-height:100dvh;background:linear-gradient(135deg,#e6f7ff,#fff0f5,#f0fff0);display:flex;flex-direction:column}.lesson-selection-header{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--space-4);border-bottom:4px solid #e9ecef;position:sticky;top:0;z-index:10}.lesson-selection-header .back-button{position:absolute;top:var(--space-4);left:var(--space-4);background:#ffffffe6;color:#666;font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;padding:var(--space-2) var(--space-4);border-radius:20px;border:2px solid #ddd;cursor:pointer;transition:all .2s ease}.lesson-selection-header .back-button:hover{background:#fff;border-color:#aaa;transform:translate(-2px)}.header-content{display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding-top:var(--space-2)}.header-avatar{font-size:3rem;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.header-text{text-align:left}.header-greeting{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.75rem;font-weight:700;color:#333;margin:0;background:linear-gradient(135deg,#ff6b6b,#ffd93d,#6bcb77,#4dabf7);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 4s ease-in-out infinite}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.header-subtitle{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;color:#666;margin:var(--space-1) 0 0 0}.lesson-selection-content{flex:1;padding:var(--space-6) var(--space-4);max-width:1200px;margin:0 auto;width:100%}.lesson-section{margin-bottom:var(--space-8)}.section-title{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.5rem;font-weight:700;color:#333;margin:0 0 var(--space-4) 0;display:flex;align-items:center;gap:var(--space-2)}.section-icon{font-size:1.75rem}.lesson-grid{display:grid;gap:var(--space-4);grid-template-columns:1fr}@media(min-width:640px){.lesson-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:960px){.lesson-grid{grid-template-columns:repeat(3,1fr)}}.recommended-grid{margin-bottom:var(--space-6)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);text-align:center}.loading-spinner{font-size:4rem;animation:spin 1.5s linear infinite}.loading-state p{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.25rem;color:#666;margin-top:var(--space-4)}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);text-align:center}.error-icon{font-size:4rem}.error-state p{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.25rem;color:#666;margin:var(--space-4) 0}.retry-button{background:linear-gradient(135deg,#ff6b6b,#ff922b);color:#fff;font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.125rem;font-weight:700;padding:var(--space-3) var(--space-6);border-radius:20px;border:3px solid white;box-shadow:0 4px #e55039,0 6px 15px #ff6b6b4d;cursor:pointer;transition:all .15s ease}.retry-button:hover{transform:translateY(-2px);box-shadow:0 6px #e55039,0 10px 20px #ff6b6b66}.retry-button:active{transform:translateY(2px);box-shadow:0 2px #e55039,0 4px 10px #ff6b6b4d}.no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);text-align:center;background:#fff9;border-radius:20px;border:3px dashed #e9ecef}.no-results-icon{font-size:3rem;margin-bottom:var(--space-2)}.no-results p{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;color:#888;margin:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);text-align:center}.empty-icon{font-size:4rem;opacity:.6}.empty-state p{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.25rem;color:#888;margin-top:var(--space-4)}@media(min-width:640px){.lesson-selection-header{padding:var(--space-5)}.header-avatar{font-size:4rem}.header-greeting{font-size:2.25rem}.header-subtitle{font-size:1.25rem}.lesson-selection-content{padding:var(--space-8) var(--space-6)}.section-title{font-size:1.75rem}}.filter-loading{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-6);color:#666;font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem}.filter-loading-spinner{font-size:1.5rem;animation:spin 1s linear infinite}.spelling-game{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:linear-gradient(135deg,#e6f7ff,#fff0f6,#fff9db);padding:var(--space-4);position:relative;overflow:hidden}.spelling-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.back-button{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;font-weight:700;color:#495057;background:#fff;border:2px solid #dee2e6;border-radius:25px;padding:var(--space-2) var(--space-4);cursor:pointer;transition:all .2s ease}.back-button:hover{background:#f8f9fa;border-color:#adb5bd}.repeat-button{font-size:1.5rem;background:#fff;border:2px solid #dee2e6;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #0000001a}.repeat-button:hover:not(:disabled){background:#f8f9fa;border-color:#4dabf7;transform:scale(1.05)}.repeat-button:active:not(:disabled){transform:scale(.95)}.repeat-button:disabled{opacity:.5;cursor:not-allowed}.progress-indicator{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.25rem;font-weight:700;color:#495057;background:#fff;border-radius:25px;padding:var(--space-2) var(--space-4);box-shadow:0 2px 8px #0000001a}.word-hint{text-align:center;margin:var(--space-6) 0}.hint-image{font-size:5rem;margin-bottom:var(--space-2);animation:gentle-bounce 2s ease-in-out infinite}@keyframes gentle-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.hint-text{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.5rem;color:#495057;margin:0}.drop-zones{display:flex;justify-content:center;gap:var(--space-3);margin:var(--space-8) 0}.letter-tiles{display:flex;justify-content:center;gap:var(--space-3);margin:var(--space-6) 0;flex-wrap:wrap}.skip-button{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;color:#868e96;background:transparent;border:none;cursor:pointer;margin-top:auto;padding:var(--space-3);align-self:center;transition:color .2s ease}.skip-button:hover{color:#495057}.celebration-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fade-in .3s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.celebration-content{background:#fff;border-radius:30px;padding:var(--space-8) var(--space-12);text-align:center;animation:pop-in .4s ease;position:relative;overflow:hidden}@keyframes pop-in{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.celebration-emoji{font-size:5rem;display:block;margin-bottom:var(--space-4);animation:celebration-bounce .5s ease infinite}@keyframes celebration-bounce{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.1) rotate(-5deg)}75%{transform:scale(1.1) rotate(5deg)}}.celebration-text{font-family:Comic Sans MS,Chalkboard,cursive;font-size:2rem;color:#51cf66;margin:0 0 var(--space-2) 0}.celebration-word{font-family:Comic Sans MS,Chalkboard,cursive;font-size:2.5rem;font-weight:700;color:#495057;margin:0;letter-spacing:.2em}.streak-indicator{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.25rem;color:#ff6b6b;margin:0 0 var(--space-2) 0;animation:pulse-glow .5s ease infinite alternate}@keyframes pulse-glow{0%{transform:scale(1);text-shadow:0 0 5px rgba(255,107,107,.5)}to{transform:scale(1.05);text-shadow:0 0 15px rgba(255,107,107,.8)}}.streak-celebration .celebration-content{background:linear-gradient(135deg,#fff9db,#fff0f6,#e7f5ff);box-shadow:0 0 40px #ffd70080}.streak-emoji{animation:streak-bounce .4s ease infinite!important}@keyframes streak-bounce{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.3) rotate(-10deg)}50%{transform:scale(1) rotate(0)}75%{transform:scale(1.3) rotate(10deg)}}.streak-text{background:linear-gradient(90deg,#ff6b6b,#ffd43b,#51cf66,#4dabf7);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:rainbow-text 1s linear infinite}@keyframes rainbow-text{0%{background-position:0% 50%}to{background-position:100% 50%}}.dancing-characters{position:absolute;top:50%;left:-60px;transform:translateY(-50%);display:flex;flex-direction:column;gap:var(--space-2)}.dancing-characters.right{left:auto;right:-60px}.dancing-char{font-size:2rem;animation:dance-left .6s ease-in-out infinite}.dancing-char.right{animation:dance-right .6s ease-in-out infinite}@keyframes dance-left{0%,to{transform:translate(0) rotate(-10deg)}50%{transform:translate(10px) rotate(10deg)}}@keyframes dance-right{0%,to{transform:translate(0) rotate(10deg)}50%{transform:translate(-10px) rotate(-10deg)}}.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti-piece{position:absolute;top:-20px;animation:confetti-fall 1.5s ease-out forwards}.confetti-square{border-radius:2px}.confetti-circle{border-radius:50%}.confetti-rectangle{border-radius:1px}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0) scale(1);opacity:1}50%{opacity:1}to{transform:translateY(500px) rotate(1080deg) scale(.5);opacity:0}}.fireworks{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px}.firework-particle{position:absolute;width:8px;height:8px;border-radius:50%;animation:firework-burst .8s ease-out forwards;animation-delay:var(--delay)}@keyframes firework-burst{0%{transform:rotate(var(--angle)) translateY(0) scale(1);opacity:1}to{transform:rotate(var(--angle)) translateY(120px) scale(0);opacity:0}}.dancing-characters{display:none}@media(min-width:640px){.spelling-game{padding:var(--space-6)}.hint-image{font-size:6rem}.hint-text{font-size:1.75rem}.drop-zones,.letter-tiles{gap:var(--space-4)}.celebration-content{padding:var(--space-10) var(--space-16)}.celebration-emoji{font-size:6rem}.celebration-text{font-size:2.5rem}.celebration-word{font-size:3rem}.dancing-characters{display:flex}.dancing-char{font-size:2.5rem}}.pronunciation-button{font-size:1.5rem;background:#fff;border:2px solid #dee2e6;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #0000001a}.pronunciation-button:hover:not(:disabled){background:#f8f9fa;border-color:#ff6b6b;transform:scale(1.05)}.pronunciation-button:active:not(:disabled){transform:scale(.95)}.pronunciation-button:disabled{opacity:.5;cursor:not-allowed}.pronunciation-button.recording{background:#ff6b6b;border-color:#ff6b6b;animation:recording-pulse 1s ease-in-out infinite}@keyframes recording-pulse{0%,to{box-shadow:0 0 #ff6b6bb3}50%{box-shadow:0 0 0 15px #ff6b6b00}}.recording-indicator{position:fixed;top:80px;left:50%;transform:translate(-50%);background:#ff6b6bf2;color:#fff;padding:var(--space-3) var(--space-6);border-radius:30px;display:flex;align-items:center;gap:var(--space-3);z-index:100;animation:slide-down .3s ease;box-shadow:0 4px 20px #ff6b6b66}@keyframes slide-down{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.recording-pulse{width:12px;height:12px;background:#fff;border-radius:50%;animation:pulse-recording 1s ease-in-out infinite}@keyframes pulse-recording{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.recording-text{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.1rem;font-weight:700}.pronunciation-feedback-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fade-in .3s ease}.pronunciation-feedback-overlay.correct{background:#51cf664d}.pronunciation-feedback-overlay.incorrect{background:#ffc1074d}.pronunciation-feedback-content{background:#fff;border-radius:30px;padding:var(--space-8) var(--space-12);text-align:center;animation:pop-in .4s ease;max-width:90%}.pronunciation-emoji{font-size:4rem;display:block;margin-bottom:var(--space-4);animation:celebration-bounce .5s ease infinite}.pronunciation-feedback-text{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.75rem;color:#495057;margin:0 0 var(--space-3) 0}.pronunciation-feedback-overlay.correct .pronunciation-feedback-text{color:#51cf66}.pronunciation-feedback-overlay.incorrect .pronunciation-feedback-text{color:#ffc107}.pronunciation-transcribed{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;color:#868e96;margin:0}.letter-tile{display:flex;align-items:center;justify-content:center;width:70px;height:70px;font-family:Comic Sans MS,Chalkboard,cursive;font-size:2.5rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#4dabf7,#339af0);border-radius:16px;border:4px solid white;box-shadow:0 4px #1c7ed6,0 6px 15px #4dabf766;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;transition:transform .15s ease,box-shadow .15s ease}.letter-tile:nth-child(3n+1){background:linear-gradient(135deg,#ff6b6b,#fa5252);box-shadow:0 4px #e03131,0 6px 15px #ff6b6b66}.letter-tile:nth-child(3n+2){background:linear-gradient(135deg,#51cf66,#40c057);box-shadow:0 4px #2f9e44,0 6px 15px #51cf6666}.letter-tile:nth-child(3n+3){background:linear-gradient(135deg,#ffd43b,#fab005);color:#495057;box-shadow:0 4px #f59f00,0 6px 15px #ffd43b66}.letter-tile:hover:not(.disabled):not(.placed){transform:translateY(-2px) scale(1.05)}.letter-tile.dragging{cursor:grabbing;box-shadow:0 8px #0003,0 12px 25px #0000004d;opacity:.9}.letter-tile.disabled{opacity:.3;cursor:not-allowed;transform:scale(.9)}.letter-tile.placed{cursor:default;animation:placed-bounce .3s ease}@keyframes placed-bounce{0%{transform:scale(1.2)}50%{transform:scale(.95)}to{transform:scale(1)}}@media(min-width:640px){.letter-tile{width:90px;height:90px;font-size:3rem;border-radius:20px}}@media(min-width:1024px){.letter-tile{width:100px;height:100px;font-size:3.5rem}}.drop-zone{display:flex;align-items:center;justify-content:center;width:70px;height:70px;background:#fffc;border:4px dashed #adb5bd;border-radius:16px;position:relative;transition:all .2s ease}.placeholder-number{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.5rem;color:#ced4da;font-weight:700}.drop-zone.active{border-color:#4dabf7;border-style:solid;background:#4dabf733;transform:scale(1.05);box-shadow:0 0 20px #4dabf766}.drop-zone.filled{border-style:solid;border-color:#51cf66;background:linear-gradient(135deg,#51cf66,#40c057);box-shadow:0 4px #2f9e44,0 6px 15px #51cf6666}.placed-letter{font-family:Comic Sans MS,Chalkboard,cursive;font-size:2.5rem;font-weight:700;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.1)}.placed-letter.animate-in{animation:letter-bounce .5s cubic-bezier(.34,1.56,.64,1)}@keyframes letter-bounce{0%{transform:scale(0) rotate(-10deg);opacity:0}40%{transform:scale(1.3) rotate(5deg);opacity:1}60%{transform:scale(.9) rotate(-3deg)}80%{transform:scale(1.1) rotate(2deg)}to{transform:scale(1) rotate(0);opacity:1}}.drop-zone.correct.filled,.drop-zone.just-correct{animation:correct-bounce .6s cubic-bezier(.34,1.56,.64,1)}@keyframes correct-bounce{0%{transform:scale(1)}25%{transform:scale(1.2)}45%{transform:scale(.95)}65%{transform:scale(1.1)}85%{transform:scale(.98)}to{transform:scale(1)}}.correct-glow{position:absolute;inset:-15px;border-radius:50%;background:radial-gradient(circle,rgba(81,207,102,.6) 0%,transparent 70%);animation:glow-pulse .8s ease-out forwards;pointer-events:none;z-index:-1}@keyframes glow-pulse{0%{transform:scale(.5);opacity:0}30%{transform:scale(1.2);opacity:1}to{transform:scale(1.5);opacity:0}}.sparkle-container{position:absolute;inset:0;pointer-events:none;z-index:10}.sparkle{position:absolute;top:50%;left:50%;font-size:1.2rem;transform:translate(-50%,-50%);animation:sparkle-burst .7s ease-out forwards;animation-delay:var(--delay, 0s)}@keyframes sparkle-burst{0%{transform:translate(-50%,-50%) scale(0);opacity:0}30%{opacity:1;transform:translate(calc(-50% + var(--x) * .3),calc(-50% + var(--y) * .3)) scale(1.2)}to{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.5)}}.correct-star{position:absolute;top:-20px;right:-10px;font-size:2rem;animation:star-pop .6s ease forwards}@keyframes star-pop{0%{transform:scale(0) rotate(-180deg);opacity:0}50%{transform:scale(1.3) rotate(0);opacity:1}to{transform:scale(1) rotate(10deg);opacity:0}}.drop-zone.show-wrong{animation:wrong-shake .4s ease;border-color:#ff6b6b;background:#ff6b6b33}@keyframes wrong-shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@media(min-width:640px){.drop-zone{width:90px;height:90px;border-radius:20px}.placeholder-number{font-size:1.75rem}.placed-letter{font-size:3rem}.correct-star{font-size:2.5rem;top:-25px;right:-15px}}@media(min-width:1024px){.drop-zone{width:100px;height:100px}.placed-letter{font-size:3.5rem}}.voice-selector{position:relative;width:100%;max-width:400px}.voice-selector-label{display:flex;align-items:center;gap:var(--space-2);font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;font-weight:600;color:#495057;margin-bottom:var(--space-2)}.voice-selector-label-icon{font-size:1.25rem}.voice-selector-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-3) var(--space-4);background:#fff;border:3px solid #dee2e6;border-radius:16px;cursor:pointer;transition:all .2s ease;font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;text-align:left}.voice-selector-trigger:hover{border-color:#4dabf7}.voice-selector-trigger:focus{outline:none;border-color:#4dabf7;box-shadow:0 0 0 3px #4dabf733}.voice-selector-trigger-open{border-color:#4dabf7;border-bottom-left-radius:0;border-bottom-right-radius:0}.voice-selector-selected{display:flex;flex-direction:column;gap:2px}.voice-selector-selected-name{font-weight:600;color:#212529}.voice-selector-selected-category{font-size:.75rem;color:#868e96}.voice-selector-placeholder{color:#adb5bd}.voice-selector-arrow{font-size:.75rem;color:#868e96;transition:transform .2s ease}.voice-selector-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:3px solid #4dabf7;border-top:none;border-bottom-left-radius:16px;border-bottom-right-radius:16px;box-shadow:0 8px 20px #00000026;z-index:100;max-height:320px;overflow:hidden;display:flex;flex-direction:column}.voice-selector-filter{padding:var(--space-3) var(--space-4);border-bottom:2px solid #e9ecef;background:#f8f9fa}.voice-selector-filter-label{display:flex;align-items:center;gap:var(--space-2);font-family:Comic Sans MS,Chalkboard,cursive;font-size:.875rem;color:#495057;cursor:pointer}.voice-selector-filter-label input{width:18px;height:18px;accent-color:#51cf66;cursor:pointer}.voice-selector-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}.voice-selector-option{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);cursor:pointer;transition:background-color .15s ease;border-bottom:1px solid #e9ecef}.voice-selector-option:last-child{border-bottom:none}.voice-selector-option:hover{background-color:#e7f5ff}.voice-selector-option-selected{background-color:#d0ebff}.voice-selector-option-selected:hover{background-color:#a5d8ff}.voice-selector-option-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.voice-selector-option-name{font-family:Comic Sans MS,Chalkboard,cursive;font-weight:600;color:#212529;font-size:.95rem}.voice-selector-option-category{font-size:.7rem;color:#868e96;text-transform:uppercase;letter-spacing:.5px}.voice-selector-option-description{font-size:.8rem;color:#6c757d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.voice-selector-preview-btn{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:2px solid #51cf66;background:#fff;color:#51cf66;font-size:1rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;margin-left:var(--space-3)}.voice-selector-preview-btn:hover{background:#51cf66;color:#fff;transform:scale(1.1)}.voice-selector-preview-btn:active{transform:scale(.95)}.voice-selector-preview-playing{background:#ff6b6b;border-color:#ff6b6b;color:#fff;animation:pulse-preview 1s ease-in-out infinite}.voice-selector-preview-playing:hover{background:#e55039;border-color:#e55039}@keyframes pulse-preview{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.voice-selector-empty{padding:var(--space-6);text-align:center;color:#868e96;font-family:Comic Sans MS,Chalkboard,cursive}.voice-selector-loading{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-4);background:#fff;border:3px solid #dee2e6;border-radius:16px;font-family:Comic Sans MS,Chalkboard,cursive;color:#868e96}.voice-selector-spinner{font-size:1.5rem;animation:spin 1s linear infinite}.voice-selector-error{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-4);background:#fff5f5;border:3px solid #ffc9c9;border-radius:16px;font-family:Comic Sans MS,Chalkboard,cursive;color:#c92a2a}.voice-selector-error-icon{font-size:1.5rem}.voice-selector-retry{padding:var(--space-2) var(--space-4);background:#fff;border:2px solid #c92a2a;border-radius:8px;color:#c92a2a;font-family:Comic Sans MS,Chalkboard,cursive;font-size:.875rem;cursor:pointer;transition:all .2s ease}.voice-selector-retry:hover{background:#c92a2a;color:#fff}@media(min-width:640px){.voice-selector{max-width:450px}.voice-selector-trigger{padding:var(--space-4) var(--space-5);font-size:1.1rem}.voice-selector-dropdown{max-height:400px}.voice-selector-option{padding:var(--space-4)}.voice-selector-preview-btn{width:40px;height:40px;font-size:1.1rem}}.voice-sliders{background:#fff;border-radius:24px;padding:var(--space-5);box-shadow:0 4px 20px #00000014;max-width:480px;width:100%}.voice-sliders-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:3px dashed #e9ecef}.voice-sliders-title{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.5rem;color:#333;margin:0;display:flex;align-items:center;gap:var(--space-2)}.title-icon{font-size:1.75rem}.reset-button{font-family:Comic Sans MS,Chalkboard,cursive;font-size:.875rem;color:#666;background:#f8f9fa;border:2px solid #e9ecef;border-radius:12px;padding:var(--space-2) var(--space-3);cursor:pointer;transition:all .2s ease}.reset-button:hover{background:#fff;border-color:#ff6b6b;color:#ff6b6b;transform:scale(1.05)}.sliders-container{display:flex;flex-direction:column;gap:var(--space-5)}.slider-row{display:flex;flex-direction:column;gap:var(--space-2)}.slider-label-row{display:flex;align-items:center;gap:var(--space-2)}.slider-label{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;color:#444;display:flex;align-items:center;gap:var(--space-2);flex:1}.slider-icon{font-size:1.25rem}.tooltip-trigger{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#4dabf7,#339af0);color:#fff;font-family:Comic Sans MS,Chalkboard,cursive;font-size:.75rem;font-weight:700;border:2px solid white;box-shadow:0 2px 4px #4dabf74d;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.tooltip-trigger:hover{transform:scale(1.15);box-shadow:0 3px 8px #4dabf766}.slider-value{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;font-weight:700;color:#6bcb77;background:linear-gradient(135deg,#e8f5e9,#f0fff4);padding:var(--space-1) var(--space-3);border-radius:10px;min-width:55px;text-align:center}.tooltip-content{font-family:Comic Sans MS,Chalkboard,cursive;font-size:.875rem;color:#666;background:linear-gradient(135deg,#fff9e6,#fff5f5);border:2px solid #ffd93d;border-radius:12px;padding:var(--space-3);margin-bottom:var(--space-2);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.slider-input{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:linear-gradient(to right,#6bcb77 0%,#6bcb77 var(--slider-progress, 50%),#e9ecef var(--slider-progress, 50%),#e9ecef 100%);border-radius:10px;outline:none;cursor:pointer;transition:all .15s ease}.slider-input:hover{transform:scaleY(1.1)}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;background:linear-gradient(135deg,#fff,#f8f9fa);border:4px solid #6bcb77;border-radius:50%;cursor:grab;box-shadow:0 3px 8px #6bcb7766;transition:all .15s ease}.slider-input::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 4px 12px #6bcb7780}.slider-input::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1);border-color:#4a9d5c}.slider-input::-moz-range-thumb{width:28px;height:28px;background:linear-gradient(135deg,#fff,#f8f9fa);border:4px solid #6bcb77;border-radius:50%;cursor:grab;box-shadow:0 3px 8px #6bcb7766;transition:all .15s ease}.slider-input::-moz-range-thumb:hover{transform:scale(1.15)}.slider-input::-moz-range-thumb:active{cursor:grabbing;border-color:#4a9d5c}.slider-input::-moz-range-track{background:#e9ecef;height:16px;border-radius:10px}.slider-input::-moz-range-progress{background:#6bcb77;height:16px;border-radius:10px 0 0 10px}.toggle-row{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-3);border-top:2px dashed #e9ecef}.toggle-label-row{display:flex;align-items:center;gap:var(--space-2)}.toggle-button{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);background:transparent;border:none;cursor:pointer}.toggle-track{width:56px;height:32px;background:#e9ecef;border-radius:16px;position:relative;transition:all .25s ease;box-shadow:inset 0 2px 4px #0000001a}.toggle-button.active .toggle-track{background:linear-gradient(135deg,#6bcb77,#4a9d5c)}.toggle-thumb{position:absolute;top:3px;left:3px;width:26px;height:26px;background:#fff;border-radius:50%;box-shadow:0 2px 6px #0003;transition:all .25s ease}.toggle-button.active .toggle-thumb{left:27px}.toggle-label-text{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;font-weight:700;color:#888;min-width:30px}.toggle-button.active .toggle-label-text{color:#6bcb77}.preview-section{margin-top:var(--space-5);padding:var(--space-4);background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:16px;text-align:center}.preview-header{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-3)}.preview-icon{font-size:1.5rem}.preview-title{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.125rem;color:#444}.preview-phrase{font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;color:#666;font-style:italic;margin-bottom:var(--space-4);padding:var(--space-3);background:#fff;border-radius:12px;border:2px dashed #ddd}.preview-buttons{display:flex;justify-content:center;gap:var(--space-3)}.preview-button{display:flex;align-items:center;gap:var(--space-2);font-family:Comic Sans MS,Chalkboard,cursive;font-size:1rem;font-weight:700;padding:var(--space-3) var(--space-5);border-radius:20px;border:3px solid white;cursor:pointer;transition:all .2s ease}.preview-button.play{background:linear-gradient(135deg,#4dabf7,#339af0);color:#fff;box-shadow:0 4px #1c7ed6,0 6px 12px #4dabf74d}.preview-button.play:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px #1c7ed6,0 8px 16px #4dabf766}.preview-button.play:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #1c7ed6,0 3px 8px #4dabf74d}.preview-button.play:disabled{opacity:.5;cursor:not-allowed}.preview-button.stop{background:linear-gradient(135deg,#ff6b6b,#e55039);color:#fff;box-shadow:0 4px #c92a2a,0 6px 12px #ff6b6b4d}.preview-button.stop:hover{transform:translateY(-2px);box-shadow:0 6px #c92a2a,0 8px 16px #ff6b6b66}.button-icon{font-size:1.125rem}.preview-hint{font-family:Comic Sans MS,Chalkboard,cursive;font-size:.875rem;color:#888;margin-top:var(--space-3)}.save-button{width:100%;margin-top:var(--space-5);display:flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:Comic Sans MS,Chalkboard,cursive;font-size:1.25rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#6bcb77,#4a9d5c);padding:var(--space-4) var(--space-6);border-radius:24px;border:4px solid white;box-shadow:0 5px #3d8b4a,0 7px 15px #6bcb7766;cursor:pointer;transition:all .15s ease}.save-button:hover{transform:translateY(-2px);box-shadow:0 7px #3d8b4a,0 10px 20px #6bcb7780}.save-button:active{transform:translateY(3px);box-shadow:0 2px #3d8b4a,0 4px 10px #6bcb7766}@media(max-width:480px){.voice-sliders{padding:var(--space-4);border-radius:20px}.voice-sliders-title{font-size:1.25rem}.slider-label{font-size:.9rem}.slider-value{font-size:.9rem;min-width:48px}.slider-input{height:14px}.slider-input::-webkit-slider-thumb{width:28px;height:28px}.preview-phrase{font-size:.9rem}.preview-button{font-size:.9rem;padding:var(--space-2) var(--space-4)}}.settings{min-height:100vh;background:linear-gradient(135deg,#e0f7fa,#f3e5f5);padding:1rem}.settings-header{display:flex;align-items:center;gap:1rem;padding:.5rem 0 1.5rem;border-bottom:2px solid rgba(0,0,0,.1);margin-bottom:1.5rem}.settings-back-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#fff;border:2px solid #e0e0e0;border-radius:12px;font-size:1rem;font-weight:600;color:#333;cursor:pointer;transition:all .2s}.settings-back-btn:hover{background:#f5f5f5;border-color:#bdbdbd}.settings-title{flex:1;margin:0;font-size:1.75rem;font-weight:700;color:#333}.settings-status{min-width:100px;text-align:right}.save-indicator{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .75rem;border-radius:12px;font-size:.875rem;font-weight:500}.save-indicator.saving{background:#fff3e0;color:#e65100}.save-indicator.saved{background:#e8f5e9;color:#2e7d32}.save-indicator.error{background:#ffebee;color:#c62828}.save-spinner{animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.settings-loading,.settings-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem;background:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;text-align:center}.settings-spinner{font-size:2rem;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.settings-error-icon{font-size:2rem;color:#f44336}.settings-retry-btn{padding:.75rem 1.5rem;background:#2196f3;border:none;border-radius:12px;font-size:1rem;font-weight:600;color:#fff;cursor:pointer;transition:background .2s}.settings-retry-btn:hover{background:#1976d2}.settings-content{max-width:600px;margin:0 auto}.settings-section{background:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;padding:1.5rem;margin-bottom:1.5rem}.settings-section-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:1.25rem;font-weight:700;color:#333}.settings-section-description{margin:0 0 1.5rem;font-size:.9375rem;color:#666}.settings-voice-selector{margin-bottom:1.5rem}.settings-voice-parameters{margin-top:1rem}.settings-toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;border-radius:12px;box-shadow:0 4px 20px #0003;animation:slideUp .3s ease-out;z-index:1000}.settings-toast.error{background:#ffebee;border:2px solid #ef5350;color:#c62828}.toast-icon{font-size:1.25rem}.toast-message{font-weight:500}.toast-close{padding:.25rem .5rem;background:transparent;border:none;font-size:1.25rem;cursor:pointer;opacity:.7;transition:opacity .2s}.toast-close:hover{opacity:1}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}@media(max-width:600px){.settings{padding:.75rem}.settings-header{flex-wrap:wrap}.settings-title{font-size:1.5rem}.settings-status{width:100%;text-align:left;margin-top:.5rem}.settings-section{padding:1rem}}