*{box-sizing:border-box;margin:0;padding:0}body,html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:#f5f5f5}.game-container{max-width:900px;margin:20px auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:hsla(0,0%,100%,.95);border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.1)}.game-header{margin-bottom:30px}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:10px}.progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);transition:width .3s ease}.question-counter{text-align:center;color:#666;font-size:14px;margin:5px 0}.score-display{font-weight:700;color:#2196f3}.feedback-banner,.score-display{text-align:center;font-size:18px}.feedback-banner{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:15px;border-radius:8px;margin-bottom:20px;font-weight:500;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.reading-passage{background:#f9f9f9;padding:20px;border-radius:8px;border-left:4px solid #2196f3;margin-bottom:20px;line-height:1.6}.reading-passage p{margin:0;color:#333}.question-prompt{background:#fff3cd;padding:15px;border-radius:8px;border-left:4px solid #ffc107;margin-bottom:20px}.question-prompt h3{margin:0;color:#856404;font-size:18px}.grammar-selector{text-align:center;margin-bottom:20px;padding:10px;background:#e8f5e9;border-radius:8px}.grammar-selector label{font-weight:700;margin-right:10px;color:#2e7d32}.grammar-selector select{padding:8px 15px;font-size:16px;border:2px solid #4caf50;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s}.grammar-selector select:hover:not(:disabled){border-color:#388e3c;transform:translateY(-2px)}.grammar-selector select:disabled{opacity:.6;cursor:not-allowed}.stage-title{text-align:center;font-size:24px;margin-bottom:25px;color:#424242}.stage-1{animation:fadeIn .5s ease}.options-container{display:flex;flex-direction:column;gap:15px;margin-bottom:25px}.option{display:flex;align-items:center;padding:20px;background:#fff;border:3px solid #e0e0e0;border-radius:12px;cursor:pointer;transition:all .3s ease}.option:hover{border-color:#2196f3;transform:translateX(5px);box-shadow:0 4px 12px rgba(33,150,243,.2)}.option.selected{border-color:#2196f3;background:#e3f2fd;transform:scale(1.02)}.option-letter{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:#2196f3;color:#fff;border-radius:50%;font-weight:700;font-size:18px;margin-right:15px;flex-shrink:0}.option.selected .option-letter{background:#1976d2;animation:pulse .5s ease}.option-text{font-size:16px;color:#424242;line-height:1.4}.stage-2{animation:fadeIn .5s ease}.slots-container{flex-wrap:wrap;gap:10px;margin-bottom:30px;padding:20px;background:#f5f5f5;border-radius:12px;min-height:80px}.slot,.slots-container{display:flex;justify-content:center}.slot{min-width:100px;height:50px;align-items:center;border:3px dashed #bdbdbd;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s;font-size:16px;padding:5px 10px}.slot.empty:hover{border-color:#2196f3;background:#e3f2fd}.slot.filled{border:3px solid #4caf50;background:#e8f5e9;font-weight:500;color:#2e7d32}.slot.filled:hover{border-color:#ff5722;background:#ffe5dc}.tiles-container{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:25px;padding:20px;background:#fff3e0;border-radius:12px}.tile{padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:8px;cursor:pointer;font-size:16px;font-weight:500;transition:all .2s;box-shadow:0 2px 5px rgba(0,0,0,.2)}.tile:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 4px 12px rgba(102,126,234,.4)}.tile.used{opacity:.3;cursor:not-allowed;transform:scale(.9)}.stage-3{animation:fadeIn .5s ease;text-align:center}.sentence-display{background:#fff;padding:30px;border-radius:12px;border:3px solid #9c27b0;margin-bottom:30px}.sentence-to-read{font-size:24px;font-weight:500;color:#424242;line-height:1.6;margin:0}.recording-controls{display:flex;flex-direction:column;align-items:center;gap:20px}.btn-record{padding:20px 40px;font-size:20px;background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border:none;border-radius:50px;cursor:pointer;transition:all .3s;font-weight:700;box-shadow:0 4px 15px rgba(245,87,108,.4)}.btn-record:hover:not(:disabled){transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px rgba(245,87,108,.6)}.btn-record.recording{background:#e53935;animation:recordPulse 1.5s infinite}@keyframes recordPulse{0%,to{box-shadow:0 0 0 0 rgba(229,57,53,.7)}50%{box-shadow:0 0 0 20px rgba(229,57,53,0)}}.recording-indicator{margin-top:20px;display:flex;flex-direction:column;align-items:center}.recording-indicator p{margin-top:10px;font-size:18px;color:#e53935;font-weight:500}.pulse{width:20px;height:20px;background:#e53935;border-radius:50%;animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}.recording-complete-controls{display:flex;gap:15px;justify-content:center;align-items:center;flex-wrap:wrap}.btn-playback{padding:15px 30px;font-size:18px;background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border:none;border-radius:50px;cursor:pointer;transition:all .3s;font-weight:700;box-shadow:0 4px 15px rgba(79,172,254,.4)}.btn-playback:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px rgba(79,172,254,.6)}.stage-4{animation:fadeIn .5s ease;text-align:center}.celebration{position:relative;padding:40px;background:linear-gradient(135deg,#ffeaa7,#fdcb6e);border-radius:20px;margin-bottom:30px;overflow:hidden}.confetti-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.confetti{position:absolute;width:10px;height:10px;animation:confettiFall 3s linear infinite}.confetti-0{background:#e74c3c;left:10%;animation-delay:0s}.confetti-1{background:#3498db;left:25%;animation-delay:.2s}.confetti-2{background:#2ecc71;left:40%;animation-delay:.4s}.confetti-3{background:#f39c12;left:60%;animation-delay:.6s}.confetti-4{background:#9b59b6;left:80%;animation-delay:.8s}@keyframes confettiFall{0%{transform:translateY(-100%) rotate(0deg);opacity:1}to{transform:translateY(400%) rotate(2turn);opacity:0}}.celebration-message h2{font-size:36px;color:#d35400;margin-bottom:20px;animation:bounceIn .6s ease}@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.correct-sentence{font-size:20px;font-weight:500;color:#2c3e50;margin:20px 0;padding:15px;background:hsla(0,0%,100%,.8);border-radius:10px}.celebration-tiles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:25px}.celebration-tile{padding:12px 20px;background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border-radius:8px;font-size:16px;font-weight:500;animation:colorChange 2s ease-in-out infinite;box-shadow:0 4px 10px rgba(0,0,0,.2)}@keyframes colorChange{0%,to{background:linear-gradient(135deg,#4facfe,#00f2fe)}25%{background:linear-gradient(135deg,#43e97b,#38f9d7)}50%{background:linear-gradient(135deg,#fa709a,#fee140)}75%{background:linear-gradient(135deg,#a8edea,#fed6e3)}}.celebration-tile:nth-child(odd){animation-delay:.5s}.btn-primary{padding:15px 40px;font-size:18px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:50px;cursor:pointer;transition:all .3s;font-weight:700;box-shadow:0 4px 15px rgba(102,126,234,.4);display:block;margin:0 auto}.btn-primary:hover:not(:disabled){transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px rgba(102,126,234,.6)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-continue{background:linear-gradient(135deg,#f093fb,#f5576c);font-size:20px;padding:18px 50px}.game-complete{text-align:center;padding:60px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;color:#fff}.game-complete h2{font-size:48px;margin-bottom:30px;animation:bounceIn .8s ease}.game-complete .score{font-size:32px;font-weight:700;margin-bottom:40px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width:768px){.game-container{padding:15px}.stage-title{font-size:20px}.option{padding:15px}.option-text{font-size:14px}.slots-container,.tiles-container{padding:15px}.slot,.tile{font-size:14px;padding:10px 15px}.sentence-to-read{font-size:20px}.celebration-message h2{font-size:28px}}.topic-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden}.background-particles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.bg-gradient{background:linear-gradient(-45deg,#667eea,#764ba2,#f093fb,#4facfe);background-size:400% 400%;animation:gradientShift 15s ease infinite}@keyframes gradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.bg-stars{background:linear-gradient(135deg,#0c1445,#302b63 50%,#24243e)}.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle ease-in-out infinite}@keyframes twinkle{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.shooting-star{position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;box-shadow:0 0 6px 2px hsla(0,0%,100%,.6);animation:shoot 3s ease-in-out infinite;opacity:0}@keyframes shoot{0%{transform:translateX(0) translateY(0);opacity:0}10%{opacity:1}to{transform:translateX(-500px) translateY(300px);opacity:0}}.bg-aurora{background:linear-gradient(180deg,#0f0c29,#302b63 50%,#24243e)}.aurora-wave{position:absolute;top:10%;left:-50%;width:200%;height:40%;background:linear-gradient(180deg,transparent,rgba(127,255,212,.1) 20%,rgba(127,255,212,.3) 40%,rgba(100,200,255,.2) 60%,rgba(150,100,255,.1) 80%,transparent);filter:blur(30px);animation:auroraDance 8s ease-in-out infinite}.aurora-wave:nth-child(2){top:20%;animation-delay:-2s;animation-duration:10s;background:linear-gradient(180deg,transparent,rgba(100,255,150,.1) 20%,rgba(100,255,200,.2) 50%,rgba(150,200,255,.1) 80%,transparent)}.aurora-wave:nth-child(3){top:5%;animation-delay:-4s;animation-duration:12s;background:linear-gradient(180deg,transparent,rgba(200,100,255,.1) 30%,rgba(100,200,255,.2) 50%,rgba(100,255,200,.1) 70%,transparent)}@keyframes auroraDance{0%,to{transform:translateX(0) skewX(0deg);opacity:.6}25%{transform:translateX(5%) skewX(2deg);opacity:.8}50%{transform:translateX(-3%) skewX(-1deg);opacity:.5}75%{transform:translateX(3%) skewX(1deg);opacity:.9}}.aurora-star{position:absolute;background:#fff;border-radius:50%;animation:twinkle ease-in-out infinite}.bg-sunset{background:linear-gradient(180deg,#ff7e5f,#feb47b 40%,#ffecd2 70%,#90ee90)}.sun{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:80px;height:80px;background:radial-gradient(circle,#fff9c4 0,#ffeb3b 50%,#ff9800 100%);border-radius:50%;box-shadow:0 0 60px 20px rgba(255,235,59,.5);animation:sunPulse 4s ease-in-out infinite}@keyframes sunPulse{0%,to{box-shadow:0 0 60px 20px rgba(255,235,59,.5)}50%{box-shadow:0 0 80px 30px rgba(255,235,59,.7)}}.grass-blade{position:absolute;bottom:0;width:4px;background:linear-gradient(180deg,#228b22,#006400);border-radius:50% 50% 0 0;transform-origin:bottom center;animation:grassSway ease-in-out infinite}@keyframes grassSway{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.bg-forest{background:linear-gradient(180deg,#ffecd2,#fcb69f 30%,#228b22)}.tree-layer{position:absolute;bottom:0;left:0;width:200%;height:100%;background-repeat:repeat-x;background-position:bottom;background-size:auto 100%}.tree-layer-1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 10,30 20,100' fill='%23145214'/%3E%3Cpolygon points='20,100 35,20 50,100' fill='%231a5c1a'/%3E%3Cpolygon points='45,100 60,25 75,100' fill='%23145214'/%3E%3Cpolygon points='70,100 85,35 100,100' fill='%231a5c1a'/%3E%3C/svg%3E");height:250px;opacity:1;animation:treeSway 8s ease-in-out infinite}.tree-layer-2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='none'%3E%3Cpolygon points='5,80 20,20 35,80' fill='%230d3d0d'/%3E%3Cpolygon points='30,80 50,10 70,80' fill='%23104510'/%3E%3Cpolygon points='60,80 80,25 100,80' fill='%230d3d0d'/%3E%3C/svg%3E");height:180px;opacity:.8;animation:treeSway 10s ease-in-out infinite reverse}@keyframes treeSway{0%,to{transform:translateX(0)}50%{transform:translateX(-2%)}}.bg-rain{background:linear-gradient(180deg,#636e72,#b2bec3)}.raindrop{position:absolute;top:-20px;width:2px;height:15px;background:linear-gradient(180deg,transparent,hsla(0,0%,100%,.6));animation:rainFall linear infinite}@keyframes rainFall{0%{transform:translateY(0);opacity:0}10%{opacity:1}to{transform:translateY(120vh);opacity:.3}}.bg-leaves{background:linear-gradient(180deg,#87ceeb,#98fb98 50%,#228b22)}.leaf{position:absolute;top:-50px;font-size:24px;animation:leafFall linear infinite;opacity:.8}@keyframes leafFall{0%{transform:translateY(0) rotate(0deg) translateX(0);opacity:.9}25%{transform:translateY(25vh) rotate(90deg) translateX(30px)}50%{transform:translateY(50vh) rotate(180deg) translateX(-20px)}75%{transform:translateY(75vh) rotate(270deg) translateX(25px)}to{transform:translateY(120vh) rotate(1turn) translateX(-10px);opacity:.3}}.bg-clouds{background:linear-gradient(180deg,#74b9ff,#a29bfe)}.cloud{position:absolute;background:hsla(0,0%,100%,.9);border-radius:50%;animation:cloudDrift linear infinite;filter:blur(1px)}.cloud:before{width:70%;height:70%;top:-30%;left:15%}.cloud:after,.cloud:before{content:"";position:absolute;background:hsla(0,0%,100%,.9);border-radius:50%}.cloud:after{width:50%;height:50%;top:-20%;left:50%}@keyframes cloudDrift{0%{transform:translateX(-200px)}to{transform:translateX(calc(100vw + 200px))}}.bg-fireflies{background:linear-gradient(180deg,#1a1a2e,#16213e 30%,#1f4037 70%,#99f2c8)}.firefly{position:absolute;width:6px;height:6px;background:#ff9;border-radius:50%;box-shadow:0 0 10px 3px rgba(255,255,150,.8),0 0 20px 6px rgba(255,255,150,.4);animation:fireflyFloat ease-in-out infinite,fireflyGlow ease-in-out infinite}@keyframes fireflyFloat{0%,to{transform:translate(0)}25%{transform:translate(30px,-20px)}50%{transform:translate(-20px,-40px)}75%{transform:translate(40px,-10px)}}@keyframes fireflyGlow{0%,to{opacity:.2}50%{opacity:1}}.bg-geometric{background:linear-gradient(135deg,#667eea,#764ba2)}.shape{position:absolute;opacity:.15;animation:shapeFloat ease-in-out infinite}.shape.circle{border-radius:50%;border:4px solid #fff}.shape.square{border:4px solid #fff;transform:rotate(45deg)}.shape.triangle{width:0!important;height:0!important;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:52px solid hsla(0,0%,100%,.3);background:none!important}@keyframes shapeFloat{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-30px) rotate(180deg)}}.shape.square{animation:shapeFloatSquare ease-in-out infinite}@keyframes shapeFloatSquare{0%,to{transform:translateY(0) rotate(45deg)}50%{transform:translateY(-30px) rotate(225deg)}}