@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@400;600&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--bg-deep: #0a0a14;--bg-dark: #12121e;--fire: #ff8800;--fire-glow: rgba(255, 136, 0, .6);--earth: #8b6f47;--earth-glow: rgba(139, 111, 71, .6);--water: #00d4ff;--water-glow: rgba(0, 212, 255, .6);--air: #d4ff00;--air-glow: rgba(212, 255, 0, .6);--player: #00b4ff;--player-glow: rgba(0, 180, 255, .8)}body{font-family:Rajdhani,sans-serif;background:var(--bg-deep);overflow:hidden;height:100vh;position:relative}body:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%,rgba(0,180,255,.05) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(255,77,0,.05) 0%,transparent 50%);animation:bgPulse 10s ease-in-out infinite;pointer-events:none}@keyframes bgPulse{0%,to{opacity:.5}50%{opacity:1}}#gameCanvas{display:block;width:100vw;height:100vh;background:var(--bg-dark);position:relative}#gameCanvas:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 49px,rgba(0,180,255,.03) 49px,rgba(0,180,255,.03) 50px),repeating-linear-gradient(90deg,transparent,transparent 49px,rgba(0,180,255,.03) 49px,rgba(0,180,255,.03) 50px);pointer-events:none}.player{position:absolute;width:24px;height:24px;background:var(--player);border-radius:50%;box-shadow:0 0 20px var(--player-glow),0 0 40px var(--player-glow),inset 0 0 10px #ffffff4d;transition:transform .1s ease-out,filter .1s ease-out;z-index:10;transform:translate(-50%,-50%)}.player:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;background:radial-gradient(circle,var(--player-glow) 0%,transparent 70%);border-radius:50%;animation:playerPulse 2s ease-in-out infinite;z-index:-1}@keyframes playerPulse{0%,to{opacity:.4;transform:translate(-50%,-50%) scale(1)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.2)}}.player.invincible{animation:invincibilityFlicker .15s steps(2) infinite}@keyframes invincibilityFlicker{0%,to{opacity:1}50%{opacity:.3}}#upgradeBtn{position:fixed;top:20px;right:20px;padding:14px 28px;background:linear-gradient(135deg,#00b4ff33,#0064964d);border:2px solid var(--player);border-radius:8px;color:var(--player);font-family:Orbitron,sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:2px;cursor:pointer;transition:all .3s ease;box-shadow:0 0 20px #00b4ff4d;z-index:100}#upgradeBtn:hover{background:linear-gradient(135deg,#00b4ff4d,#00649666);box-shadow:0 0 30px #00b4ff99;transform:translateY(-2px)}#upgradeBtn:active{transform:translateY(0)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0a0a14f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .4s ease}.modal-overlay.active{opacity:1;pointer-events:all}.modal-content{background:linear-gradient(135deg,#12121ef2,#191928f2);border:2px solid rgba(0,180,255,.3);border-radius:20px;padding:50px;max-width:900px;box-shadow:0 20px 60px #000c;transform:scale(.9) translateY(20px);transition:transform .4s ease;position:relative}.modal-overlay.active .modal-content{transform:scale(1) translateY(0)}.modal-title{font-family:Orbitron,sans-serif;font-size:42px;font-weight:900;text-align:center;margin-bottom:20px;background:linear-gradient(135deg,#00b4ff,#00ffa3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase;letter-spacing:4px;animation:titleGlow 3s ease-in-out infinite}@keyframes titleGlow{0%,to{filter:drop-shadow(0 0 10px rgba(0,180,255,.5))}50%{filter:drop-shadow(0 0 20px rgba(0,255,163,.8))}}.modal-subtitle{text-align:center;color:#fff9;font-size:18px;margin-bottom:40px;letter-spacing:1px}.elements-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.element-card{background:#ffffff08;border:2px solid rgba(255,255,255,.1);border-radius:16px;padding:32px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.element-card:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border-radius:50%;transition:all .5s ease;opacity:0}.element-card:hover:before{width:300%;height:300%;opacity:.1}.element-card.fire{border-color:var(--fire)}.element-card.fire:hover{border-color:var(--fire);box-shadow:0 0 40px var(--fire-glow);transform:translateY(-4px)}.element-card.fire:before{background:var(--fire)}.element-card.earth{border-color:var(--earth)}.element-card.earth:hover{border-color:var(--earth);box-shadow:0 0 40px var(--earth-glow);transform:translateY(-4px)}.element-card.earth:before{background:var(--earth)}.element-card.water{border-color:var(--water)}.element-card.water:hover{border-color:var(--water);box-shadow:0 0 40px var(--water-glow);transform:translateY(-4px)}.element-card.water:before{background:var(--water)}.element-card.air{border-color:var(--air)}.element-card.air:hover{border-color:var(--air);box-shadow:0 0 40px var(--air-glow);transform:translateY(-4px)}.element-card.air:before{background:var(--air)}.element-icon{width:80px;height:80px;margin:0 auto 20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:900;font-family:Orbitron,sans-serif;position:relative}.fire .element-icon{background:radial-gradient(circle,var(--fire),rgba(255,136,0,.3));box-shadow:0 0 30px var(--fire-glow);color:#fff}.earth .element-icon{background:radial-gradient(circle,var(--earth),rgba(139,111,71,.3));box-shadow:0 0 30px var(--earth-glow);color:#fff}.water .element-icon{background:radial-gradient(circle,var(--water),rgba(0,212,255,.3));box-shadow:0 0 30px var(--water-glow);color:#000}.air .element-icon{background:radial-gradient(circle,var(--air),rgba(212,255,0,.3));box-shadow:0 0 30px var(--air-glow);color:#000}.element-name{font-family:Orbitron,sans-serif;font-size:28px;font-weight:700;text-align:center;margin-bottom:10px;text-transform:uppercase;letter-spacing:2px}.fire .element-name{color:var(--fire)}.earth .element-name{color:var(--earth)}.water .element-name{color:var(--water)}.air .element-name{color:var(--air)}.element-desc{text-align:center;color:#ffffff80;font-size:14px;line-height:1.6}.close-modal{position:absolute;top:20px;right:20px;background:none;border:2px solid rgba(255,255,255,.2);color:#fff9;width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.close-modal:hover{background:#ffffff0d;border-color:#fff6;color:#ffffffe6;transform:rotate(90deg)}.enemy{position:absolute;width:30px;height:30px;background:linear-gradient(135deg,#f44,#c00);border-radius:50%;box-shadow:0 0 20px #f449,0 0 40px #ff44444d;transform:translate(-50%,-50%);transition:transform .1s ease-out;z-index:5}.enemy:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120%;height:120%;background:radial-gradient(circle,rgba(255,68,68,.4) 0%,transparent 70%);border-radius:50%;animation:enemyPulse 1.5s ease-in-out infinite}@keyframes enemyPulse{0%,to{opacity:.4;transform:translate(-50%,-50%) scale(1)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.1)}}.enemy.burning{animation:burningFlicker .2s ease-in-out infinite;box-shadow:0 0 30px #f80,0 0 50px #f40c}@keyframes burningFlicker{0%,to{filter:brightness(1.3) hue-rotate(10deg)}50%{filter:brightness(1.6) hue-rotate(20deg)}}.enemy.frozen{animation:frozenShake .5s ease-in-out infinite;box-shadow:0 0 30px #00d4ff,0 0 50px #0096ffcc;filter:brightness(1.5) saturate(.3)}@keyframes frozenShake{0%,to{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-50%,-50%) rotate(-2deg)}75%{transform:translate(-50%,-50%) rotate(2deg)}}.enemy.ramming{background:linear-gradient(135deg,#f80,#f40);animation:rammingCharge .5s ease-in-out infinite;box-shadow:0 0 40px #ff8800e6,0 0 80px #f409;width:35px;height:35px}@keyframes rammingCharge{0%,to{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 40px #ff8800e6}50%{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 60px #f80,0 0 100px #f40c}}.projectile{position:absolute;border-radius:50%;pointer-events:none;z-index:8}.fire-projectile{background:radial-gradient(circle,var(--fire),rgba(255,100,0,.7));box-shadow:0 0 15px var(--fire-glow),0 0 30px #f406}.earth-projectile{background:radial-gradient(circle,var(--earth),rgba(100,80,50,.7));box-shadow:0 0 15px var(--earth-glow),0 0 30px #8b6f4766}.water-projectile{background:radial-gradient(circle,var(--water),rgba(0,150,255,.7));box-shadow:0 0 15px var(--water-glow),0 0 30px #00d4ff66}.air-projectile{background:radial-gradient(circle,var(--air),rgba(180,255,0,.7));box-shadow:0 0 15px var(--air-glow),0 0 30px #d4ff0066}.blaze-projectile{background:radial-gradient(circle,#f40,#ff6400cc);box-shadow:0 0 20px #f40,0 0 40px #f80c;animation:blazePulse .3s ease-in-out infinite}@keyframes blazePulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.mud-projectile{background:radial-gradient(circle,#5a4a3a,#5a4a3acc);box-shadow:0 0 15px #5a4a3acc,0 0 30px #3c322899}.steam-projectile{background:radial-gradient(circle,#fff,#c8dcff99);box-shadow:0 0 20px #fffc,0 0 40px #c8dcff99;animation:steamFloat 1s ease-in-out infinite}@keyframes steamFloat{0%,to{opacity:.9;transform:scale(1)}50%{opacity:.7;transform:scale(1.15)}}.freeze-projectile{background:radial-gradient(circle,#00d4ff,#00b4ffcc);box-shadow:0 0 20px #00d4ff,0 0 40px #0096ffb3;animation:freezeGlow .5s ease-in-out infinite}@keyframes freezeGlow{0%,to{box-shadow:0 0 20px #00d4ff}50%{box-shadow:0 0 30px #00d4ff,0 0 50px #0096ff}}.flame-projectile{background:radial-gradient(circle,#fa0,#ff8800e6);box-shadow:0 0 25px #fa0,0 0 50px #ff6400cc;animation:flamePulse .4s ease-in-out infinite}@keyframes flamePulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.8}}.life-projectile{background:radial-gradient(circle,#0f8,#0f8c);box-shadow:0 0 20px #0f8,0 0 40px #00c864b3;animation:lifeGlow .6s ease-in-out infinite}@keyframes lifeGlow{0%,to{box-shadow:0 0 20px #0f8}50%{box-shadow:0 0 30px #0f8,0 0 50px #00c864}}.boil-projectile{background:radial-gradient(circle,#fd0,#ffdd00e6);box-shadow:0 0 25px #fd0,0 0 50px #f80c;animation:boilBubble .5s ease-in-out infinite}@keyframes boilBubble{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.tsunami-projectile{background:radial-gradient(circle,#08f,#0088ffe6);box-shadow:0 0 30px #08f,0 0 60px #0064c8cc;animation:tsunamiWave .4s ease-in-out infinite}@keyframes tsunamiWave{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1.15) translateY(-2px)}}.rotating-shield{position:absolute;width:12px;height:12px;background:radial-gradient(circle,#8b6f47,#8b6f4799);border-radius:50%;box-shadow:0 0 15px #8b6f47cc,0 0 30px #8b6f4766;z-index:9;pointer-events:none}.rotating-shield:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;background:radial-gradient(circle,rgba(139,111,71,.4) 0%,transparent 70%);border-radius:50%;animation:shieldPulse 1s ease-in-out infinite}@keyframes shieldPulse{0%,to{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:.6;transform:translate(-50%,-50%) scale(1.2)}}.sword{position:absolute;width:40px;height:8px;background:linear-gradient(90deg,#d4ff004d,#d4ff00,#d4ff00,#d4ff004d);border-radius:4px;box-shadow:0 0 20px var(--air-glow),0 0 40px #d4ff0066;z-index:9;pointer-events:none;transform-origin:left center}.sword:before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:8px solid rgba(212,255,0,.5);border-top:6px solid transparent;border-bottom:6px solid transparent}.sword:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:0;height:0;border-right:10px solid #d4ff00;border-top:8px solid transparent;border-bottom:8px solid transparent}.water-wave{position:absolute;border:3px solid var(--water);border-radius:50%;pointer-events:none;z-index:6;animation:waveExpand 1s ease-out forwards}@keyframes waveExpand{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(1)}}.earthquake-circle{position:absolute;border:4px solid var(--earth);border-radius:50%;pointer-events:none;z-index:6;animation:earthquakeExpand 1.5s ease-out forwards}@keyframes earthquakeExpand{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(1)}}.steam-circle{position:absolute;background:radial-gradient(circle,#fff6,#c8dcff33);border-radius:50%;pointer-events:none;z-index:7;animation:steamExpand 3s ease-out forwards}@keyframes steamExpand{0%{opacity:.8;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(1)}}.freeze-circle{position:absolute;background:radial-gradient(circle,#00d4ff4d,#0096ff1a);border:3px solid rgba(0,212,255,.6);border-radius:50%;pointer-events:none;z-index:7;animation:freezeExpand 2s ease-out forwards}@keyframes freezeExpand{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(1)}}.life-triangle{position:absolute;width:30px;height:30px;background:radial-gradient(circle,#0f8,#00ff88b3);clip-path:polygon(50% 0%,0% 100%,100% 100%);box-shadow:0 0 20px #0f8c,0 0 40px #00c86480;z-index:5;pointer-events:none}.life-triangle:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;background:radial-gradient(circle,rgba(0,255,136,.3) 0%,transparent 70%);border-radius:50%;animation:trianglePulse 2s ease-in-out infinite;z-index:-1}@keyframes trianglePulse{0%,to{opacity:.4;transform:translate(-50%,-50%) scale(1)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.2)}}.tree{position:absolute;width:40px;height:60px;z-index:4;pointer-events:none}.tree:before{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:12px;height:35px;background:linear-gradient(180deg,#654321,#3d2817);border-radius:2px}.tree:after{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:35px;height:35px;background:radial-gradient(circle,#228b22,#1a6b1a);border-radius:50%;box-shadow:0 0 15px #228b2299}.life-trail{position:absolute;width:8px;height:8px;background:radial-gradient(circle,#0f89,#00c8644d);border-radius:50%;pointer-events:none;z-index:3;animation:trailFade .8s ease-out forwards}@keyframes trailFade{0%{opacity:.8;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.5)}}.boil-circle{position:absolute;background:radial-gradient(circle,#fd06,#f803);border:3px solid rgba(255,221,0,.6);border-radius:50%;pointer-events:none;z-index:7;animation:boilExpand 3s ease-out forwards}@keyframes boilExpand{0%{opacity:.9;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(1)}}.tide-aura{position:absolute;width:300px;height:300px;background:radial-gradient(circle,#0088ff26,#0064c80d);border:3px solid rgba(0,136,255,.4);border-radius:50%;pointer-events:none;z-index:6;animation:tideAuraPulse 3s ease-in-out infinite}@keyframes tideAuraPulse{0%,to{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.05)}}.tsunami-placed-wave{position:absolute;background:radial-gradient(circle,#0088ff80,#0064c84d);border:4px solid rgba(0,136,255,.7);border-radius:50%;pointer-events:none;z-index:7}.health-bar-container{position:fixed;top:20px;left:20px;width:300px;height:40px;background:#0009;border:2px solid rgba(0,180,255,.4);border-radius:10px;overflow:hidden;z-index:100;box-shadow:0 0 20px #00000080}.health-bar-fill{height:100%;background:linear-gradient(90deg,#00b4ff,#00ffa3);border-radius:8px;transition:width .3s ease,background .3s ease;box-shadow:0 0 10px #00b4ff99;position:relative}.health-bar-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:healthShimmer 2s ease-in-out infinite}@keyframes healthShimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.health-bar-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Orbitron,sans-serif;font-size:16px;font-weight:700;color:#fff;text-shadow:0 0 5px rgba(0,0,0,.8);z-index:1;pointer-events:none}.kill-counter{position:fixed;top:70px;left:20px;padding:12px 20px;background:#0009;border:2px solid rgba(255,136,0,.4);border-radius:10px;font-family:Orbitron,sans-serif;font-size:18px;font-weight:700;color:#f80;text-shadow:0 0 5px rgba(0,0,0,.8);z-index:100;box-shadow:0 0 20px #00000080}.kill-counter:before{content:"KILLS: ";color:#fff9}.enemy-projectile{background:radial-gradient(circle,#f44,#ff4444b3);box-shadow:0 0 15px #f44c,0 0 30px #f446}.boss{position:absolute;width:120px;height:120px;background:radial-gradient(circle,#80f,#50a);border-radius:50%;box-shadow:0 0 40px #80fc,0 0 80px #8800ff80;transform:translate(-50%,-50%);z-index:6}.boss:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140%;height:140%;background:radial-gradient(circle,rgba(136,0,255,.3) 0%,transparent 70%);border-radius:50%;animation:bossPulse 2s ease-in-out infinite;z-index:-1}@keyframes bossPulse{0%,to{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.15)}}.boss-health-bar{position:fixed;top:calc(100vh - 80px);left:50%;transform:translate(-50%);width:600px;height:50px;background:#000000b3;border:3px solid rgba(136,0,255,.5);border-radius:15px;overflow:hidden;z-index:100;box-shadow:0 0 30px #0009}.boss-health-fill{height:100%;background:linear-gradient(90deg,#80f,#a0f);border-radius:12px;transition:width .3s ease;box-shadow:0 0 20px #80fc;position:relative}.boss-health-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:bossHealthShimmer 2s ease-in-out infinite}@keyframes bossHealthShimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.boss-health-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Orbitron,sans-serif;font-size:20px;font-weight:900;color:#fff;text-shadow:0 0 8px rgba(0,0,0,.9);z-index:1;pointer-events:none}.boss-name{position:fixed;top:calc(100vh - 140px);left:50%;transform:translate(-50%);font-family:Orbitron,sans-serif;font-size:32px;font-weight:900;color:#80f;text-shadow:0 0 20px rgba(136,0,255,.8);z-index:100;text-transform:uppercase;letter-spacing:3px}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-width:320px;min-height:100vh;overflow:hidden}#app{width:100vw;height:100vh;margin:0;padding:0;overflow:hidden}.container{padding:2rem}h1{font-size:3.2em;line-height:1.1;margin-bottom:.5em;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}p{margin:1rem 0}.info{color:#888;font-size:.9em}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}.info{color:#666}}