*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Nunito,Segoe UI,sans-serif;background:#fef9ec;color:#333;min-height:100vh}#root{min-height:100vh}@keyframes float-cloud{0%{transform:translate(-420px)}to{transform:translate(calc(100vw + 420px))}}@keyframes btn-bounce{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-10px) scale(1.04)}55%{transform:translateY(-4px) scale(1.02)}75%{transform:translateY(-7px) scale(1.03)}to{transform:translateY(0) scale(1)}}@keyframes card-in{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes sun-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.welcome-screen{min-height:100vh;background:linear-gradient(180deg,#56cfe1,#72efdd 45%,#52b788);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:2rem 1.5rem}.cloud{position:absolute;background:#fff;border-radius:60px;opacity:.88}.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud-1{width:220px;height:65px;top:9%;animation:float-cloud 22s linear infinite}.cloud-1:before{width:110px;height:95px;top:-55px;left:28px}.cloud-1:after{width:80px;height:70px;top:-40px;left:120px}.cloud-2{width:160px;height:50px;top:18%;animation:float-cloud 30s linear infinite;animation-delay:-12s}.cloud-2:before{width:80px;height:70px;top:-42px;left:20px}.cloud-2:after{width:60px;height:55px;top:-30px;left:85px}.cloud-3{width:270px;height:75px;top:4%;opacity:.7;animation:float-cloud 38s linear infinite;animation-delay:-22s}.cloud-3:before{width:130px;height:110px;top:-65px;left:40px}.cloud-3:after{width:90px;height:80px;top:-50px;left:155px}.welcome-card{position:relative;z-index:1;background:#fffef9;border-radius:2.5rem;padding:3rem 3.5rem 3.5rem;max-width:560px;width:100%;box-shadow:0 4px #d4f0e2,0 18px 60px #00000024;text-align:center;animation:card-in .55s cubic-bezier(.22,1,.36,1) both}.logo{display:flex;align-items:center;justify-content:center;gap:.5rem;line-height:1}.logo-sun{font-size:3rem;display:inline-block;animation:sun-spin 12s linear infinite;transform-origin:center}.logo-text{font-family:Fredoka One,cursive;font-size:3.6rem;color:#f77f00;letter-spacing:.5px}.tagline{font-family:Fredoka One,cursive;font-size:1.35rem;color:#6c63ff;margin-top:.3rem;letter-spacing:.3px}.form-section{margin-top:1.75rem;text-align:left}.section-label{display:block;font-size:1.1rem;font-weight:800;color:#444;margin-bottom:.6rem}.name-input{width:100%;padding:.9rem 1.25rem;font-family:Nunito,sans-serif;font-size:1.15rem;font-weight:700;color:#333;background:#fff;border:3px solid #a8d8f0;border-radius:1rem;outline:none;transition:border-color .2s,box-shadow .2s}.name-input::placeholder{color:#b0c4d8;font-weight:600}.name-input:focus{border-color:#6c63ff;box-shadow:0 0 0 4px #6c63ff1f}.lang-buttons{display:flex;gap:.6rem;flex-wrap:wrap}.lang-btn{flex:1 1 auto;padding:.6rem .9rem;font-family:Nunito,sans-serif;font-size:.95rem;font-weight:800;color:#555;background:#fff;border:3px solid #e0e0e0;border-radius:.85rem;cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .1s;white-space:nowrap}.lang-btn:hover{border-color:#6c63ff;background:#f2f0ff;color:#6c63ff;transform:translateY(-2px)}.lang-btn.selected{border-color:#6c63ff;background:#6c63ff;color:#fff}.start-btn{display:block;width:100%;margin-top:2rem;padding:1.05rem 2rem;font-family:Fredoka One,cursive;font-size:1.65rem;color:#fff;background:linear-gradient(135deg,#f77f00,#fcbf49);border:none;border-radius:2rem;box-shadow:0 6px #c45e00;cursor:pointer;transition:box-shadow .15s,opacity .15s;letter-spacing:.4px}.start-btn:hover:not(:disabled){animation:btn-bounce .5s ease;box-shadow:0 8px #c45e00}.start-btn:active:not(:disabled){box-shadow:0 2px #c45e00;transform:translateY(4px)}.start-btn:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}.hello-card{position:relative;z-index:1;background:#fffef9;border-radius:2.5rem;padding:4rem 3.5rem;max-width:480px;width:100%;box-shadow:0 4px #d4f0e2,0 18px 60px #00000024;text-align:center;animation:card-in .55s cubic-bezier(.22,1,.36,1) both}.hello-emoji{font-size:4rem;line-height:1}.hello-name{font-family:Fredoka One,cursive;font-size:3rem;color:#f77f00;margin-top:.75rem}.hello-sub{font-size:1.15rem;font-weight:700;color:#6c63ff;margin-top:.5rem}@media (max-width: 600px){.welcome-card,.hello-card{padding:2.25rem 1.75rem 2.75rem}.logo-text{font-size:2.8rem}.lang-btn{font-size:.85rem;padding:.5rem .65rem}}@keyframes node-bounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.05)}}@keyframes arrow-bounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-6px)}}.map-screen{min-height:100vh;overflow-y:auto;overflow-x:hidden;background:#d4a017}.map-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.75rem;background:#f4d03f;border-bottom:3px solid #8B6914;box-shadow:0 3px 14px #00000038}.map-back-btn{font-family:Fredoka One,cursive;font-size:1rem;color:#5d3a1a;background:#fff6;border:2px solid #8B6914;border-radius:1.2rem;padding:.3rem 1rem;cursor:pointer;transition:background .15s;letter-spacing:.2px}.map-back-btn:hover{background:#ffffffa6}.map-topbar-name{font-family:Fredoka One,cursive;font-size:1.45rem;color:#5d3a1a;letter-spacing:.3px}.map-topbar-stars{font-family:Fredoka One,cursive;font-size:1.35rem;color:#5d3a1a}.map-inner{position:relative;max-width:880px;margin:0 auto}.map-grass{position:absolute;width:30px;height:22px;background:#5dbb63;border-radius:50% 50% 15% 15%;z-index:2;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}.map-grass:before,.map-grass:after{content:"";position:absolute;width:20px;height:20px;background:#4caf50;border-radius:50% 50% 15% 15%}.map-grass:before{top:-9px;left:-7px}.map-grass:after{top:-7px;right:-7px}.map-deco{position:absolute;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.22))}.map-node{position:absolute;width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:4;transition:transform .15s}.map-node:focus-visible{outline:3px solid #fff;outline-offset:4px}.map-node-num{font-family:Fredoka One,cursive;font-size:2.2rem;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.3);line-height:1;pointer-events:none}.map-node--completed .map-node-num{font-size:2.5rem}.map-node-info{position:absolute;top:97px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;white-space:nowrap}.map-node-emoji-label{font-size:1.6rem;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}.map-node-name{font-family:Fredoka One,cursive;font-size:.82rem;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.55)}.map-node-your-turn{margin-top:2px;font-family:Fredoka One,cursive;font-size:.72rem;color:#ff6b00;background:#fffffff0;padding:2px 8px;border-radius:20px;border:1.5px solid #FF8C00}.map-node-stars{position:absolute;top:-28px;left:50%;transform:translate(-50%);font-size:.85rem;white-space:nowrap;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}.map-node-arrow{position:absolute;top:-32px;left:50%;transform:translate(-50%);font-family:Fredoka One,cursive;font-size:1.3rem;color:#ff8c00;text-shadow:0 1px 4px rgba(0,0,0,.25);pointer-events:none;animation:arrow-bounce .9s ease-in-out infinite}.map-node--completed{background:radial-gradient(circle at 35% 32%,#81c784,#4caf50 60%,#388e3c);border:5px solid #2E7D32;box-shadow:0 7px #1b5e20,0 10px 22px #0000004d}.map-node--completed:hover{transform:scale(1.1) translateY(-4px)}.map-node--current{background:radial-gradient(circle at 35% 32%,#ffb74d,#ff8c00 60%,#e65100);border:5px solid #FF6B00;box-shadow:0 7px #bf360c,0 10px 28px #ff8c0080;animation:node-bounce 1.4s ease-in-out infinite}.map-node--current:hover{animation-play-state:paused;transform:scale(1.12) translateY(-5px)}.map-node--locked{background:radial-gradient(circle at 35% 32%,#e0e0e0,#9e9e9e 60%,#757575);border:5px solid #616161;box-shadow:0 5px #424242,0 8px 16px #00000038;cursor:default;opacity:.78}.hello-card .start-btn{margin-top:1.75rem}@media (max-width: 600px){.map-topbar{padding:.55rem 1rem;gap:.5rem}.map-topbar-name,.map-topbar-stars{font-size:1.05rem}.map-back-btn{font-size:.85rem;padding:.25rem .7rem}.map-node{width:70px;height:70px}.map-node-num{font-size:1.7rem}.map-node-info{top:76px}.map-node-emoji-label{font-size:1.25rem}.map-node-name{font-size:.72rem}}@keyframes luna-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes luna-talk{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes luna-blink{0%,88%,to{transform:scaleY(1)}93%{transform:scaleY(.06)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-9px)}40%{transform:translate(9px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@keyframes pop-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.lesson-screen{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(160deg,#fff9e0,#fff3cc 45%,#ffe5a0)}.lesson-topbar{display:flex;align-items:center;gap:.9rem;padding:.7rem 1.5rem;background:#ffffffe6;border-bottom:3px solid #FFB347;position:sticky;top:0;z-index:10;box-shadow:0 2px 10px #00000014}.lesson-back-btn{font-family:Fredoka One,cursive;font-size:1.25rem;color:#5d3a1a;background:#ffb34740;border:2px solid #FFB347;border-radius:.9rem;padding:.25rem .8rem;cursor:pointer;flex-shrink:0;transition:background .15s;line-height:1}.lesson-back-btn:hover{background:#ffb34780}.lesson-title{font-family:Fredoka One,cursive;font-size:1.35rem;color:#5d3a1a;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesson-progress{display:flex;align-items:center;gap:.6rem;flex-shrink:0}.lesson-progress-text{font-family:Fredoka One,cursive;font-size:.95rem;color:#888;white-space:nowrap}.lesson-progress-bar-wrap{width:90px;height:10px;background:#f0ddb0;border-radius:8px;overflow:hidden}.lesson-progress-fill{height:100%;background:linear-gradient(90deg,#ff8c00,#ffb347);border-radius:8px;transition:width .45s ease;min-width:4px}.lesson-stars-count{font-family:Fredoka One,cursive;font-size:1rem;color:#5d3a1a;flex-shrink:0}.lesson-main{flex:1;display:flex;flex-direction:column;padding:1.25rem 1.75rem 1.75rem;gap:1.25rem;max-width:920px;width:100%;margin:0 auto;align-self:stretch}.lesson-upper{display:flex;align-items:center;gap:1.5rem}.luna-tts-group{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.tts-status{font-family:Nunito,sans-serif;font-size:.72rem;margin-top:.2rem}.tts-status--loading{color:#aaa}.tts-status--ready{color:#4caf50}.bubble-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem}.bubble-wrap .speech-bubble{flex:none}.repeat-btn{align-self:flex-end;background:none;border:none;font-size:1.35rem;cursor:pointer;padding:.15rem .35rem;opacity:.6;transition:opacity .15s,transform .15s;border-radius:.5rem}.repeat-btn:hover{opacity:1;transform:scale(1.12)}.repeat-btn:active{transform:scale(.93)}.luna-wrap{display:flex;flex-direction:column;align-items:center;flex-shrink:0;animation:luna-float 3s ease-in-out infinite}.luna-body{display:flex;align-items:center;justify-content:center}.luna-body.luna-talking{animation:luna-talk .45s ease-in-out infinite}.luna-eye{animation:luna-blink 3.5s ease-in-out infinite}.luna-name{font-family:Fredoka One,cursive;font-size:1.05rem;color:#ff8c00;margin-top:.35rem;text-shadow:0 1px 3px rgba(0,0,0,.1)}.sound-waves{display:flex;align-items:center;justify-content:center;gap:3px;height:24px;margin-top:4px}.sound-wave-bar{width:4px;background:#ff8c42;border-radius:2px;animation:wave-bar .8s ease-in-out infinite alternate}.sound-wave-bar:nth-child(1){height:8px;animation-delay:0s}.sound-wave-bar:nth-child(2){height:16px;animation-delay:.1s}.sound-wave-bar:nth-child(3){height:24px;animation-delay:.2s}.sound-wave-bar:nth-child(4){height:16px;animation-delay:.3s}.sound-wave-bar:nth-child(5){height:8px;animation-delay:.4s}@keyframes wave-bar{0%{transform:scaleY(.4);opacity:.6}to{transform:scaleY(1);opacity:1}}.luna-speaking{animation:luna-float 3s ease-in-out infinite}.luna-speaking .luna-body{animation:luna-talk .45s ease-in-out infinite}.choice-btn.locked{pointer-events:none;cursor:not-allowed;position:relative;overflow:hidden;filter:brightness(.85);transform:none!important}.choice-btn.locked:after{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;background:#6366f14d;border-radius:50%;transform:translate(-50%,-50%);animation:ripple-lock 1.2s ease-out infinite}@keyframes ripple-lock{0%{width:10px;height:10px;opacity:.8}to{width:200px;height:200px;opacity:0}}.talking-hint{text-align:center;font-family:Nunito,sans-serif;font-size:.9rem;font-weight:700;color:#ff8c00;padding:.4rem 0;animation:pulse-hint 1.5s ease-in-out infinite}@keyframes pulse-hint{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}.speech-bubble{position:relative;flex:1;background:#fff;border:3px solid #FF8C00;border-radius:1.5rem;padding:1.1rem 1.4rem;font-family:Nunito,sans-serif;font-size:1.25rem;font-weight:700;color:#444;line-height:1.45;min-height:72px;display:flex;align-items:center;box-shadow:0 3px 12px #ff8c0026;animation:pop-in .3s ease both}.speech-bubble:before{content:"";position:absolute;left:-22px;top:26px;border-style:solid;border-width:13px 22px 13px 0;border-color:transparent #FF8C00 transparent transparent}.speech-bubble:after{content:"";position:absolute;left:-15px;top:30px;border-style:solid;border-width:9px 15px 9px 0;border-color:transparent #fff transparent transparent}.lesson-activity{flex:1;background:#fff;border-radius:2rem;padding:1.5rem 1.5rem 1.75rem;box-shadow:0 5px #f0d5a0,0 10px 28px #0000001a;display:flex;flex-direction:column;gap:1.1rem}.lesson-question{font-family:Fredoka One,cursive;font-size:1.5rem;color:#5d3a1a;text-align:center;line-height:1.3}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;flex:1}.choice-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:1rem .75rem;background:#fff;border:3px solid #E8E8E8;border-radius:1.35rem;cursor:pointer;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;-webkit-user-select:none;user-select:none;box-shadow:0 4px #d8d8d8;font-family:Nunito,sans-serif}.choice-btn:hover:not(:disabled){border-color:#3b82f6;box-shadow:0 6px #93c5fd;transform:translateY(-5px);background:#eff6ff}.choice-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 1px #93c5fd}.choice-btn:disabled{cursor:default}.choice-emoji{font-size:3.5rem;line-height:1;display:block}.choice-label{font-size:.95rem;font-weight:800;color:#555}.choice-btn--correct{background:#e8f5e9;border-color:#4caf50;box-shadow:0 4px #388e3c;transform:translateY(-3px)}.choice-btn--correct .choice-label{color:#2e7d32}.choice-btn--wrong{background:#ffebee;border-color:#ef5350;box-shadow:0 4px #c62828;animation:shake .45s ease}.choice-btn--wrong .choice-label{color:#c62828}.lesson-screen--complete{align-items:center;justify-content:center}.completion-card{background:#fff;border-radius:2.5rem;padding:3.5rem 3rem;max-width:480px;width:90%;text-align:center;box-shadow:0 6px #f0d5a0,0 20px 50px #00000024;animation:card-in .55s cubic-bezier(.22,1,.36,1) both}.completion-icon{font-size:4.5rem;line-height:1}.completion-title{font-family:Fredoka One,cursive;font-size:2.5rem;color:#f77f00;margin-top:.6rem}.completion-sub{font-family:Nunito,sans-serif;font-size:1.15rem;font-weight:700;color:#666;margin-top:.4rem}.completion-stars{font-size:3rem;margin:1.25rem 0;letter-spacing:.25rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}@media (max-width: 680px){.lesson-topbar{padding:.55rem 1rem;gap:.6rem}.lesson-title{font-size:1.1rem}.lesson-progress-bar-wrap{width:60px}.lesson-main{padding:.9rem 1rem 1.25rem;gap:.9rem}.lesson-upper{gap:.9rem}.luna-wrap svg{width:100px;height:100px}.speech-bubble{font-size:1.05rem;padding:.85rem 1.1rem;min-height:60px}.speech-bubble:before{left:-18px;border-width:10px 18px 10px 0;top:20px}.speech-bubble:after{left:-12px;border-width:7px 12px 7px 0;top:23px}.lesson-activity{padding:1.1rem 1rem 1.25rem;gap:.85rem}.lesson-question{font-size:1.2rem}.choice-emoji{font-size:2.6rem}.choice-label{font-size:.82rem}.completion-card{padding:2.5rem 1.75rem}.completion-title{font-size:2rem}}