.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden}.confetti-piece{position:absolute;width:10px;height:10px;top:-20px;animation:confettiFall 3s linear forwards}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}.confetti-piece.color-0{background:var(--accent-primary)}.confetti-piece.color-1{background:var(--accent-secondary)}.confetti-piece.color-2{background:var(--accent-tertiary)}.confetti-piece.color-3{background:var(--accent-gold)}.confetti-piece.color-4{background:var(--accent-green)}.confetti-piece.color-5{background:var(--accent-orange)}.confetti-piece.circle{border-radius:50%}.confetti-piece.square{border-radius:2px}.confetti-piece.strip{width:5px;height:15px;border-radius:2px}.xp-popup{position:fixed;font-family:Poppins,sans-serif;font-size:1.5rem;font-weight:800;color:var(--accent-gold);text-shadow:0 0 20px rgba(255,217,61,.5);pointer-events:none;z-index:1000;animation:xpFloat 1.5s ease-out forwards}@keyframes xpFloat{0%{transform:translateY(0) scale(.5);opacity:0}20%{transform:translateY(-20px) scale(1.2);opacity:1}100%{transform:translateY(-80px) scale(1);opacity:0}}.achievement-unlock{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:linear-gradient(135deg,var(--accent-tertiary),var(--accent-primary));padding:var(--spacing-xl);border-radius:var(--radius-xl);text-align:center;z-index:1001;opacity:0;transition:all .5s cubic-bezier(.175, .885, .32, 1.275)}.achievement-unlock.active{transform:translate(-50%,-50%) scale(1);opacity:1}.achievement-unlock::before{content:'';position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;background:linear-gradient(135deg,var(--accent-gold),var(--accent-primary));border-radius:var(--radius-xl);z-index:-1;animation:achievementGlow 2s infinite}@keyframes achievementGlow{0%,100%{opacity:.5}50%{opacity:1}}.achievement-unlock-icon{font-size:4rem;margin-bottom:var(--spacing-md);animation:achievementBounce .6s ease}@keyframes achievementBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}.achievement-unlock-title{font-size:.9rem;text-transform:uppercase;letter-spacing:2px;opacity:.8;margin-bottom:var(--spacing-xs)}.achievement-unlock-name{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:var(--spacing-xs)}.achievement-unlock-desc{font-size:.85rem;opacity:.7}.level-up-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:1002}.level-up-overlay.active{display:flex;animation:levelFadeIn .3s ease}@keyframes levelFadeIn{from{opacity:0}to{opacity:1}}.level-up-content{text-align:center;animation:levelUpPop .6s cubic-bezier(.175,.885,.32,1.275)}@keyframes levelUpPop{0%{transform:scale(0) rotate(-10deg)}60%{transform:scale(1.1) rotate(5deg)}100%{transform:scale(1) rotate(0)}}.level-up-badge{width:150px;height:150px;border-radius:50%;background:linear-gradient(135deg,var(--accent-gold),var(--accent-orange));display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-lg);box-shadow:0 0 50px rgba(255,217,61,.5);animation:levelBadgeSpin 1s ease}@keyframes levelBadgeSpin{0%{transform:rotate(0) scale(0)}50%{transform:rotate(180deg) scale(1.2)}100%{transform:rotate(360deg) scale(1)}}.level-up-badge-inner{font-size:4rem}.level-up-title{font-size:1rem;text-transform:uppercase;letter-spacing:3px;color:var(--accent-gold);margin-bottom:var(--spacing-sm)}.level-up-name{font-size:2.5rem;font-weight:800;color:#fff;margin-bottom:var(--spacing-md)}.level-up-xp{font-size:1.2rem;opacity:.7}.streak-fire{display:inline-block;animation:fireFlicker .5s infinite alternate}@keyframes fireFlicker{0%{transform:scale(1) rotate(-2deg)}100%{transform:scale(1.1) rotate(2deg)}}.streak-counter{position:relative}.streak-counter::after{content:'';position:absolute;top:-5px;right:-5px;width:20px;height:20px;background:var(--streak-fire);border-radius:50%;animation:streakPulse 1s infinite}@keyframes streakPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}.lesson-unlocking{animation:lessonUnlock .8s ease forwards}@keyframes lessonUnlock{0%{transform:scale(.8);opacity:.5}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}.perfect-celebration{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;z-index:1000;animation:perfectPop .6s ease forwards}@keyframes perfectPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}50%{transform:translate(-50%,-50%) scale(1.3)}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}.perfect-stars{display:flex;gap:var(--spacing-md);justify-content:center;margin-top:var(--spacing-md)}.perfect-star{font-size:2rem;animation:starSpin .8s ease forwards;opacity:0}.perfect-star:first-child{animation-delay:.1s}.perfect-star:nth-child(2){animation-delay:.3s}.perfect-star:nth-child(3){animation-delay:.5s}@keyframes starSpin{0%{transform:scale(0) rotate(-180deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}.progress-fill-animate{animation:progressGrow 1s ease-out forwards}@keyframes progressGrow{0%{width:0}}.btn-press{transition:transform .1s}.btn-press:active{transform:scale(.95)}.shake{animation:shakeError .4s ease-in-out}@keyframes shakeError{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}.glow-pulse{animation:glowPulse 2s infinite}@keyframes glowPulse{0%,100%{box-shadow:0 0 5px var(--accent-primary)}50%{box-shadow:0 0 25px var(--accent-primary),0 0 50px var(--accent-primary)}}.slide-in-left{animation:slideInLeft .5s ease forwards}@keyframes slideInLeft{from{transform:translateX(-50px);opacity:0}to{transform:translateX(0);opacity:1}}.slide-in-right{animation:slideInRight .5s ease forwards}@keyframes slideInRight{from{transform:translateX(50px);opacity:0}to{transform:translateX(0);opacity:1}}.slide-in-up{animation:slideInUp .5s ease forwards}@keyframes slideInUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.fade-in{animation:fadeIn .5s ease forwards}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fade-in-delay-1{animation-delay:.1s;opacity:0}.fade-in-delay-2{animation-delay:.2s;opacity:0}.fade-in-delay-3{animation-delay:.3s;opacity:0}.fade-in-delay-4{animation-delay:.4s;opacity:0}.fade-in-delay-5{animation-delay:.5s;opacity:0}.bounce{animation:bounce .6s ease}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}.float{animation:float 3s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.typing-indicator{display:flex;gap:4px}.typing-indicator span{width:8px;height:8px;background:var(--accent-secondary);border-radius:50%;animation:typingDot 1.4s infinite}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes typingDot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-10px);opacity:1}}.particle{position:absolute;pointer-events:none;animation:particleFly 1s ease-out forwards}@keyframes particleFly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}.success-checkmark{width:80px;height:80px;border-radius:50%;background:var(--accent-green);margin:0 auto;display:flex;align-items:center;justify-content:center;animation:checkmarkPop .4s ease}@keyframes checkmarkPop{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}.success-checkmark i{font-size:2.5rem;color:#fff}.skeleton{background:linear-gradient(90deg,#333 25%,#444 50%,#333 75%);background-size:200% 100%;animation:skeleton 1.5s infinite}@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}