:root{--coral: #FF6B6B;--teal: #4ECDC4;--yellow: #FFE66D;--purple: #A29BFE;--pink: #FD79A8;--mint: #55EFC4;--sky: #74B9FF;--orange: #FDCB6E;--bg: #FFF8F0;--card: #FFFFFF;--text: #2D3436;--text-lt: #636E72;--border: #F0E6FF;--radius: 22px;--radius-sm:12px;--font: "Baloo 2", cursive;--body: "Poppins", sans-serif;--shadow: 0 8px 32px rgba(162,155,254,.18);--shadow-sm:0 3px 12px rgba(162,155,254,.12)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--body);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}button{cursor:pointer;font-family:var(--body);outline:none}.bg-letters{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.bg-letter{position:absolute;font-family:var(--font);font-weight:400;opacity:.06;animation:floatLetter linear infinite;-webkit-user-select:none;user-select:none}@keyframes floatLetter{0%{transform:translateY(110vh) rotate(0)}to{transform:translateY(-20vh) rotate(360deg)}}.screen{display:none;position:relative;z-index:1;min-height:100vh;padding:20px 16px;animation:fadeIn .4s ease}.screen.active{display:flex;flex-direction:column;align-items:center}@keyframes fadeIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;border:2px solid var(--border)}.btn{font-family:var(--font);font-size:1.05rem;padding:13px 30px;border-radius:50px;border:none;transition:all .2s;position:relative;overflow:hidden;letter-spacing:.5px}.btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(255,255,255,.22);opacity:0;transition:opacity .2s}.btn:hover:after{opacity:1}.btn:active{transform:scale(.95)}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.btn-coral{background:linear-gradient(135deg,var(--coral),#FF8E8E);color:#fff;box-shadow:0 4px 14px #ff6b6b66}.btn-teal{background:linear-gradient(135deg,var(--teal),#6EDDD6);color:#fff;box-shadow:0 4px 14px #4ecdc466}.btn-purple{background:linear-gradient(135deg,var(--purple),#C3BEF0);color:#fff;box-shadow:0 4px 14px #a29bfe66}.btn-yellow{background:linear-gradient(135deg,var(--yellow),#FFD000);color:var(--text);box-shadow:0 4px 14px #ffe66d80}.btn-pink{background:linear-gradient(135deg,var(--pink),#FFA8C5);color:#fff;box-shadow:0 4px 14px #fd79a866}.btn-outline{background:transparent;border:2.5px solid var(--purple);color:var(--purple)}.btn-ghost{background:none;border:none;color:var(--text-lt);font-family:var(--body);font-weight:700;font-size:.95rem;padding:6px 4px;letter-spacing:0}.btn-ghost:hover{color:var(--coral);transform:none;box-shadow:none}.btn-ghost:hover:after{opacity:0}.logo{font-family:var(--font);font-size:clamp(2.2rem,7vw,3.8rem);background:linear-gradient(135deg,var(--coral),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;line-height:1.1}.subtitle{font-size:1rem;color:var(--text-lt);text-align:center;margin-top:6px;font-weight:700}.hud{width:100%;max-width:680px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:14px}.hud-chip{background:var(--card);border-radius:50px;padding:6px 14px;font-weight:800;font-size:.88rem;display:flex;align-items:center;gap:5px;box-shadow:var(--shadow-sm);border:2px solid var(--border)}.hud-chip .ic{font-size:1rem}.xp-wrap{width:100%;max-width:340px;background:var(--border);border-radius:50px;height:10px;overflow:hidden}.xp-fill{height:100%;background:linear-gradient(90deg,var(--coral),var(--purple));border-radius:50px;transition:width .6s ease}.level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;width:100%;max-width:640px;margin-top:28px}.level-card{background:var(--card);border-radius:var(--radius);padding:26px 18px;text-align:center;cursor:pointer;border:3px solid transparent;transition:all .25s;box-shadow:var(--shadow-sm)}.level-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.level-card.selected{border-color:var(--coral);background:#FFF2F2}.level-card .lc-emoji{font-size:2.8rem;margin-bottom:8px}.level-card h3{font-family:var(--font);font-size:1.1rem;color:var(--text)}.level-card p{font-size:.82rem;color:var(--text-lt);margin-top:4px;font-weight:600}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px;width:100%;max-width:780px;margin-top:16px}.game-card{background:var(--card);border-radius:var(--radius);padding:18px 12px;text-align:center;cursor:pointer;border:2.5px solid var(--border);transition:all .25s;box-shadow:var(--shadow-sm)}.game-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--purple)}.game-card .gc-icon{font-size:2rem;margin-bottom:7px}.game-card h4{font-family:var(--font);font-size:.88rem;color:var(--text);line-height:1.3}.game-card .gc-tag{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:50px;margin-top:6px;display:inline-block}.word-display{font-family:var(--font);font-size:clamp(2.4rem,9vw,4.2rem);letter-spacing:.08em;text-align:center;color:var(--text)}.word-hint{font-size:1rem;font-weight:700;color:var(--text-lt);text-align:center;margin-top:6px}.phonics-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}.ph-block{font-family:var(--font);font-size:1.3rem;padding:10px 16px;border-radius:var(--radius-sm);border:3px solid transparent;transition:all .3s;cursor:default;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-sm);min-width:48px;text-align:center}.ph-block.vowel{background:#E3F5FF;color:#0984e3;border-color:#bae6fd}.ph-block.consonant{background:#FFF0F0;color:var(--coral);border-color:#ffcdd2}.ph-block.blend{background:#F3F0FF;color:var(--purple);border-color:#ddd6fe}.ph-block.digraph{background:#E6FAF8;color:#00b894;border-color:#c2f0ea}.ph-block.active{transform:scale(1.15);box-shadow:0 6px 20px #0000002e}.ph-block.done{opacity:.45}.letter-tile{width:52px;height:52px;border-radius:14px;font-family:var(--font);font-size:1.5rem;display:flex;align-items:center;justify-content:center;cursor:grab;transition:all .2s;-webkit-user-select:none;user-select:none;border:3px solid transparent;box-shadow:0 4px 10px #0000001f}.letter-tile:hover{transform:scale(1.1)}.letter-tile.dragging{opacity:.4;cursor:grabbing}.letter-tile[data-type=vowel]{background:linear-gradient(135deg,#74B9FF,#A8D8FF);color:#fff}.letter-tile[data-type=consonant]{background:linear-gradient(135deg,var(--coral),#FF9A9A);color:#fff}.drop-slot{width:52px;height:52px;border-radius:14px;border:3px dashed var(--purple);background:#F8F6FF;display:flex;align-items:center;justify-content:center;font-family:var(--font);font-size:1.5rem;transition:all .2s}.drop-slot.over{border-color:var(--coral);background:#FFF2F2;transform:scale(1.08)}.drop-slot.filled{border-style:solid;border-color:var(--teal);background:#E6FAF8}.drop-slot.correct-slot{background:#E6FAF8;border-color:var(--mint)}.drop-slot.wrong-slot{background:#FFE8E8;border-color:var(--coral)}.word-blanks{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0}.wl-char{font-family:var(--font);font-size:2.2rem;width:50px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:12px}.wl-char.blank{background:#F3F0FF;border:3px dashed var(--purple);color:transparent}.wl-char.blank.active{border-color:var(--coral);animation:pulse 1s ease infinite}.wl-char.filled-correct{background:#E6FAF8;border:3px solid var(--teal);color:#00b894}.wl-char.filled-wrong{background:#FFE8E8;border:3px solid var(--coral);color:var(--coral);animation:shakeX .4s ease}.letter-choices{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}.choice-btn{width:56px;height:56px;border-radius:14px;font-family:var(--font);font-size:1.4rem;border:3px solid var(--border);background:var(--card);transition:all .2s;box-shadow:var(--shadow-sm);color:var(--text)}.choice-btn:hover{border-color:var(--purple);background:#F3F0FF;transform:scale(1.1)}.choice-btn.used{opacity:.3;pointer-events:none}.choice-btn.correct{background:var(--mint);border-color:var(--teal);color:#fff}.choice-btn.wrong{background:#FF8E8E;border-color:var(--coral);color:#fff;animation:shakeX .4s ease}.ph-builder-pool{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:64px;padding:10px;background:#F8F6FF;border-radius:var(--radius-sm);border:2px solid var(--border)}.ph-builder-answer{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:64px;padding:10px;background:#FFFBEE;border-radius:var(--radius-sm);border:2px dashed var(--yellow)}.ph-clickable{font-family:var(--font);font-size:1.2rem;padding:10px 18px;border-radius:var(--radius-sm);border:3px solid transparent;cursor:pointer;transition:all .2s;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-sm)}.ph-clickable:hover{transform:scale(1.08)}.ph-clickable.pool-item.vowel{background:#E3F5FF;color:#0984e3;border-color:#bae6fd}.ph-clickable.pool-item.consonant{background:#FFF0F0;color:var(--coral);border-color:#ffcdd2}.ph-clickable.pool-item.blend{background:#F3F0FF;color:var(--purple);border-color:#ddd6fe}.ph-clickable.pool-item.digraph{background:#E6FAF8;color:#00b894;border-color:#c2f0ea}.ph-clickable.ans-item{background:var(--yellow);color:var(--text);border-color:#e6ac00}.ph-progress{font-family:var(--font);font-size:1.1rem;text-align:center;margin:8px 0;color:var(--text-lt)}.runner-arena{width:100%;max-width:620px;height:170px;border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow);border:3px solid var(--border);background:linear-gradient(180deg,#A8EDEA 0%,#FED6E3 55%,#9AE9CF 55%,#6FD4A8 100%)}.runner-sky{position:absolute;top:0;left:0;right:0;height:54%;overflow:hidden}.runner-cloud{position:absolute;top:8px;font-size:1.8rem;animation:cloudMove 8s linear infinite;opacity:.8}.runner-cloud:nth-child(2){top:22px;animation-delay:-4s;font-size:1.3rem}@keyframes cloudMove{0%{right:-80px}to{right:110%}}.runner-ground-strip{position:absolute;bottom:0;left:0;right:0;height:45%;background:linear-gradient(180deg,#6FD4A8,#3CB371);display:flex;align-items:center}.runner-lane{position:absolute;bottom:44%;left:0;right:0;height:3px;background:rgba(255,255,255,.4)}.runner-char{position:absolute;bottom:42%;left:52px;font-size:2.4rem;animation:runBob .35s ease infinite alternate;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}@keyframes runBob{0%{transform:translateY(0)}to{transform:translateY(-7px)}}.runner-obstacle{position:absolute;bottom:42%;right:-120px;background:rgba(255,107,107,.95);color:#fff;font-family:var(--font);font-size:1.1rem;padding:8px 14px;border-radius:12px;border:3px solid rgba(255,255,255,.4);min-width:90px;text-align:center;box-shadow:0 4px 16px #ff6b6b66}.runner-type-area{width:100%;max-width:620px;display:flex;gap:10px;margin-top:10px;align-items:stretch}.runner-input{flex:1;padding:14px 18px;border-radius:50px;border:3px solid var(--border);font-family:var(--font);font-size:1.3rem;text-align:center;background:var(--card);color:var(--text);outline:none;letter-spacing:.1em;text-transform:uppercase;box-shadow:var(--shadow-sm)}.runner-input:focus{border-color:var(--purple);box-shadow:0 0 0 4px #a29bfe33}.runner-timer{width:100%;max-width:620px;height:10px;background:var(--border);border-radius:50px;overflow:hidden;margin-top:6px}.runner-timer-fill{height:100%;background:linear-gradient(90deg,var(--mint),var(--teal));border-radius:50px;transition:width .15s linear}.voice-card{background:linear-gradient(135deg,#F3F0FF,#FFF0F7);border-radius:var(--radius);padding:32px;border:3px solid var(--border);text-align:center;max-width:480px;width:100%}.voice-word-big{font-family:var(--font);font-size:clamp(2.8rem,10vw,5rem);background:linear-gradient(135deg,var(--coral),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}.listen-btn{display:flex;align-items:center;gap:8px;justify-content:center;background:linear-gradient(135deg,var(--teal),var(--mint));color:#fff;font-family:var(--font);font-size:1rem;padding:12px 24px;border-radius:50px;border:none;cursor:pointer;box-shadow:0 4px 16px #4ecdc466;transition:all .2s;margin:6px auto}.listen-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4ecdc480}.listen-btn .speaker-icon{font-size:1.4rem;animation:speakerPulse 1.5s ease infinite}@keyframes speakerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.voice-sentence{font-size:1rem;color:var(--text-lt);font-weight:700;font-style:italic;margin-top:12px;padding:10px 16px;background:rgba(255,255,255,.7);border-radius:12px}.learn-card{background:var(--card);border-radius:var(--radius);padding:28px;border:2px solid var(--border);box-shadow:var(--shadow);width:100%;max-width:540px}.learn-word{font-family:var(--font);font-size:clamp(2.5rem,8vw,4rem);text-align:center;background:linear-gradient(135deg,var(--coral),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.learn-sentence{background:linear-gradient(135deg,#F3F0FF,#FFF8F0);border-radius:var(--radius-sm);padding:14px;font-weight:700;font-size:.95rem;color:var(--text);margin-top:12px;line-height:1.6}.learn-nav{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}.learn-idx{font-family:var(--font);font-size:1rem;color:var(--text-lt);margin-top:8px}.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;width:100%;max-width:580px}.dash-card{background:var(--card);border-radius:var(--radius);padding:16px;text-align:center;border:2.5px solid var(--border);box-shadow:var(--shadow-sm)}.dash-big{font-family:var(--font);font-size:2rem;color:var(--coral)}.dash-lbl{font-size:.78rem;color:var(--text-lt);font-weight:700;margin-top:4px}.badge-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px;max-width:560px}.badge{padding:5px 14px;border-radius:50px;font-weight:800;font-size:.8rem;background:#F3F0FF;border:2px solid var(--border);color:var(--text-lt)}.badge.earned{background:linear-gradient(135deg,var(--mint),var(--teal));color:#fff;border-color:var(--teal)}.feedback-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:999;pointer-events:none}.feedback-msg{font-family:var(--font);font-size:clamp(2.5rem,10vw,6rem);opacity:0;transition:all .15s;text-shadow:0 4px 20px rgba(0,0,0,.15)}.feedback-msg.pop{opacity:1;transform:scale(1.15)}.feedback-msg.correct-fb{color:var(--mint)}.feedback-msg.wrong-fb{color:var(--coral)}.confetti-piece{position:fixed;width:9px;height:9px;border-radius:2px;animation:confettiFall 2.2s ease forwards;pointer-events:none;z-index:9999}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.star-pop{position:fixed;font-size:2rem;pointer-events:none;z-index:9998;animation:starPop .9s ease forwards}@keyframes starPop{0%{transform:scale(0) rotate(-30deg);opacity:1}60%{transform:scale(1.5) rotate(15deg);opacity:1}to{transform:scale(0) rotate(45deg);opacity:0}}.streak-banner{position:fixed;top:70px;left:50%;transform:translate(-50%) translateY(-20px);background:linear-gradient(135deg,var(--yellow),var(--orange));color:var(--text);font-family:var(--font);font-size:1.2rem;padding:10px 26px;border-radius:50px;z-index:1000;opacity:0;transition:all .3s;box-shadow:0 6px 24px #fdcb6e80;pointer-events:none}.streak-banner.show{opacity:1;transform:translate(-50%) translateY(0)}.modal-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(45,52,54,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10000;align-items:center;justify-content:center;padding:20px}.modal-overlay.open{display:flex}.modal-box{background:var(--card);border-radius:var(--radius);padding:34px;max-width:440px;width:100%;text-align:center;box-shadow:0 20px 60px #0003;animation:fadeIn .3s ease}.modal-box h2{font-family:var(--font);font-size:2rem;color:var(--text)}.modal-box p{margin:10px 0 20px;color:var(--text-lt);font-size:1rem;font-weight:600}.progress-dots{display:flex;gap:8px;justify-content:center;margin-top:10px}.dot{width:10px;height:10px;border-radius:50%;background:var(--border);transition:all .3s}.dot.active{background:var(--coral);transform:scale(1.2)}.dot.done{background:var(--teal)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@keyframes shakeX{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@keyframes bounceIn{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}@keyframes greenGlow{0%,to{box-shadow:var(--shadow)}50%{box-shadow:0 0 32px #55efc4b3}}.bounce-in{animation:bounceIn .4s ease forwards}.green-glow{animation:greenGlow .6s ease}.shake-x{animation:shakeX .4s ease}.lives-row{display:flex;gap:4px}.life{font-size:1.2rem;transition:all .3s}.life.lost{opacity:.2;transform:scale(.8)}.tts-status{font-size:.8rem;color:var(--text-lt);font-weight:600;text-align:center;height:20px}.tts-status.speaking{color:var(--teal)}.game-arena{width:100%;max-width:620px;background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:2.5px solid var(--border)}.game-arena.correct-glow{animation:greenGlow .5s ease}.game-arena.wrong-shake{animation:shakeX .4s ease}.type-input{width:100%;padding:16px 20px;border-radius:50px;border:3px solid var(--border);font-family:var(--font);font-size:1.5rem;text-align:center;background:#FAFAFA;color:var(--text);outline:none;letter-spacing:.12em;text-transform:uppercase;box-shadow:var(--shadow-sm);margin-top:12px}.type-input:focus{border-color:var(--purple);box-shadow:0 0 0 4px #a29bfe33}.type-input.correct-inp{border-color:var(--teal);background:#E6FAF8}.type-input.wrong-inp{border-color:var(--coral);background:#FFF0F0}@media (max-width:500px){.card{padding:16px}.letter-tile,.drop-slot{width:44px;height:44px;font-size:1.25rem}.wl-char{font-size:1.8rem;width:42px;height:52px}}@media (min-width:768px){.runner-arena{height:190px}}.fs-btn{position:fixed;top:14px;right:14px;width:42px;height:42px;background:white;border:2px solid var(--border);border-radius:50%;cursor:pointer;z-index:10001;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px #a29bfe38;transition:transform .2s,box-shadow .2s,background .2s;padding:0}.fs-btn:hover{transform:scale(1.12);background:#F3F0FF;box-shadow:0 5px 18px #a29bfe59}.fs-btn:active{transform:scale(.96)}.fs-btn svg{display:block}.fs-btn .icon-enter{display:block}.fs-btn .icon-exit{display:none}:fullscreen .fs-btn .icon-enter,:-webkit-full-screen .fs-btn .icon-enter,:-moz-full-screen .fs-btn .icon-enter{display:none!important}:fullscreen .fs-btn .icon-exit,:-webkit-full-screen .fs-btn .icon-exit,:-moz-full-screen .fs-btn .icon-exit{display:block!important}