:root{--bg-dark: #020617;--panel-bg: #0f172a;--neon-cyan: #06b6d4;--neon-purple: #a855f7;--neon-pink: #ec4899;--neon-red: #ef4444;--neon-green: #10b981;--text-main: #f8fafc;--text-muted: #94a3b8}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}body{font-family:Segoe UI,Tahoma,sans-serif;background:var(--bg-dark);color:var(--text-main);overflow:hidden;touch-action:none}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw}.loading-container{justify-content:center;align-items:center;background:radial-gradient(circle at center,#0f172a,#020617);gap:1rem}.main-content{flex:1;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center}.app-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:#020617e6;border-bottom:1px solid var(--neon-purple);box-shadow:0 0 15px #a855f74d;z-index:100}.logo{font-size:1.5rem;font-weight:900;display:flex;align-items:center;gap:.5rem;text-shadow:0 0 10px var(--neon-purple)}.cloud-badge{font-size:.7rem;background:#ffffff1a;padding:.2rem .5rem;border-radius:10px;font-weight:400;text-shadow:none}.header-right{display:flex;align-items:center;gap:1.5rem}.cloud-status{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-muted)}.cloud-status .spin{animation:spin 2s linear infinite}.score-display{display:flex;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:700;background:#00000080;padding:.5rem 1rem;border-radius:8px;border:1px solid rgba(255,215,0,.3)}.text-purple{color:var(--neon-purple)}.text-green{color:var(--neon-green)}.text-red{color:var(--neon-red)}.text-gold{color:gold}.text-cyan{color:var(--neon-cyan)}.text-blue{color:#3b82f6}.text-gray{color:#475569}.text-muted{color:var(--text-muted)}.filled{fill:currentColor}.huge-icon{width:48px;height:48px}.btn-icon{background:transparent;border:none;color:#fff;cursor:pointer;padding:.5rem;border-radius:50%;transition:.2s}.btn-icon:hover{background:#ffffff1a}button{border:none;outline:none;cursor:pointer;font-family:inherit;font-weight:700;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.btn-primary{background:transparent;color:var(--neon-cyan);border:2px solid var(--neon-cyan);padding:.75rem 1.5rem;font-size:1.1rem;box-shadow:0 0 10px #06b6d44d,inset 0 0 10px #06b6d41a}.btn-primary:hover{background:var(--neon-cyan);color:#000;box-shadow:0 0 20px #06b6d499;transform:scale(1.05)}.btn-secondary{background:#ffffff1a;color:#fff;padding:.75rem 1.5rem}.btn-secondary:hover{background:#fff3}.huge-btn{font-size:1.5rem;padding:1rem 3rem;margin-top:2rem}.page{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;background:radial-gradient(circle at center,#0f172a,#020617);z-index:10}.glitch-text{font-size:4rem;font-weight:900;color:#fff;text-shadow:2px 2px var(--neon-cyan),-2px -2px var(--neon-pink);margin-bottom:1rem;letter-spacing:2px}.glitch-text-small{font-size:2rem;font-weight:700;color:#fff;text-shadow:1px 1px var(--neon-cyan),-1px -1px var(--neon-pink)}.subtitle{font-size:1.2rem;color:var(--neon-cyan);margin-bottom:3rem;letter-spacing:4px}.controls-hint{background:#00000080;padding:2rem;border-radius:8px;border:1px solid rgba(255,255,255,.1);text-align:center;margin-bottom:2rem}.controls-hint p{margin:.5rem 0;color:var(--text-muted)}.controls-hint span{color:var(--neon-purple);font-weight:700;background:#a855f733;padding:.2rem .5rem;border-radius:4px;margin:0 .2rem}.gameover-page{background:#000000d9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.result-card{background:var(--panel-bg);padding:3rem;border-radius:8px;text-align:center;border:2px solid var(--neon-red);box-shadow:0 0 30px #ef44444d;max-width:400px;width:100%}.final-score{margin:2rem 0;background:#00000080;padding:1.5rem;border-radius:4px;border:1px solid rgba(255,255,255,.1)}.final-score .label{display:block;color:var(--text-muted);margin-bottom:.5rem}.final-score .value{font-size:4rem;font-weight:900;color:var(--neon-cyan);line-height:1;text-shadow:0 0 15px var(--neon-cyan)}.new-record{color:var(--neon-pink);font-weight:700;font-size:1.2rem;margin-bottom:1.5rem;animation:pulse 1s infinite;text-shadow:0 0 10px var(--neon-pink)}.actions{display:flex;gap:1rem}.actions button{flex:1}.game-area{width:800px;height:600px;position:relative;background:#000;border:2px solid var(--neon-purple);box-shadow:0 0 20px #a855f733;overflow:hidden;border-radius:8px;transform-origin:center}.shake{animation:shake .2s cubic-bezier(.36,.07,.19,.97) both infinite}.world-container{position:absolute;top:0;right:0;bottom:0;left:0}.cyber-grid{position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;background-image:linear-gradient(rgba(6,182,212,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(6,182,212,.2) 1px,transparent 1px);background-size:40px 40px;transform:perspective(500px) rotateX(45deg);transform-origin:top;animation:gridMove 2s linear infinite;pointer-events:none}.scanlines{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#fff0,#fff0 50%,#0003 50%,#0003);background-size:100% 4px;pointer-events:none;z-index:75;opacity:.6}.entity{position:absolute;transform:translate(-50%,-50%);will-change:transform;display:flex;flex-direction:column;align-items:center;justify-content:center}.player{width:60px;height:60px;z-index:50}.player-sprite{width:100%;height:100%}.player-sprite img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 10px var(--neon-cyan))}.enemy{z-index:40}.enemy.melee{width:50px;height:50px}.enemy.ranged{width:60px;height:60px}.enemy.defender{width:80px;height:80px}.enemy.boss{width:120px;height:120px;z-index:45}.enemy-sprite{width:100%;height:100%}.enemy-sprite img{width:100%;height:100%;object-fit:contain}.hp-mini-bar{width:40px;height:4px;background:#fff3;margin-top:5px;border-radius:2px;overflow:hidden}.hp-mini-bar .fill{height:100%;background:var(--neon-red);transition:width .1s}.state-icon{position:absolute;top:-20px;font-weight:700;font-size:1.2rem;text-shadow:0 0 5px currentColor;animation:bounce .5s infinite alternate}.interactable{width:40px;height:40px;z-index:20}.spring-aura{width:100%;height:100%;border-radius:50%;border:2px dashed var(--neon-green);animation:spin 3s linear infinite;box-shadow:0 0 15px #10b98180}.obstacle-box{width:100%;height:100%;background:#334155;border:2px solid #475569;box-shadow:inset 0 0 10px #000c}.projectile{position:absolute;transform:translate(-50%,-50%);border-radius:50%;z-index:30}.projectile.player{width:10px;height:10px;background:var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan)}.projectile.enemy{width:12px;height:12px;background:var(--neon-red);box-shadow:0 0 10px var(--neon-red)}.projectile.aoe{width:0;height:0}.aoe-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:4px solid var(--neon-purple);animation:expandRing ease-out forwards}.particle{position:absolute;border-radius:50%;z-index:60;pointer-events:none}.floating-text{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:1.2rem;text-shadow:1px 1px 2px #000;z-index:70;pointer-events:none}.hud{position:absolute;top:0;left:0;right:0;padding:1rem;display:flex;justify-content:space-between;z-index:80;pointer-events:none}.hud-left{display:flex;flex-direction:column;gap:.5rem}.bar-container{width:200px;height:20px;background:#0009;border:1px solid rgba(255,255,255,.2);position:relative;transform:skew(-15deg);overflow:hidden}.bar-fill{height:100%;transition:width .1s linear}.hp-bar .bar-fill{background:linear-gradient(90deg,#991b1b,var(--neon-red));box-shadow:0 0 10px var(--neon-red)}.energy-bar .bar-fill{background:linear-gradient(90deg,#0369a1,var(--neon-cyan));box-shadow:0 0 10px var(--neon-cyan)}.bar-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;padding-left:10px;font-size:.7rem;font-weight:700;color:#fff;transform:skew(15deg);text-shadow:1px 1px 2px #000}.lives-display{display:flex;gap:.2rem;margin-top:.5rem}.lives-display .icon{width:20px;height:20px}.hud-right{text-align:right}.wave-display{font-size:1.2rem;font-weight:900;color:var(--neon-pink);text-shadow:0 0 10px var(--neon-pink);letter-spacing:2px}.score-display-large{font-size:2.5rem;font-weight:900;color:#fff;text-shadow:0 0 15px var(--neon-cyan);line-height:1}.combo-display{font-size:1.5rem;font-weight:700;color:var(--neon-purple);text-shadow:0 0 10px var(--neon-purple);font-style:italic}.skills-hud{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:flex;gap:1rem;z-index:80}.skill-slot{width:50px;height:50px;background:#0009;border:2px solid rgba(255,255,255,.2);border-radius:8px;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}.skill-icon{color:#fff;opacity:.8}.skill-key{position:absolute;bottom:2px;right:4px;font-size:.6rem;font-weight:700;color:var(--neon-cyan)}.cd-overlay{position:absolute;bottom:0;left:0;right:0;background:#000000b3;transition:height .1s linear}.skill-slot.on-cd{border-color:#ffffff1a}.skill-slot.on-cd .skill-icon{opacity:.3}.wave-transition-text{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:65;animation:pulse 1s infinite;background:#0009;padding:1rem 2rem;border-radius:8px;border:1px solid var(--neon-cyan)}.wave-transition-text h2{font-size:2.5rem;text-shadow:0 0 10px var(--neon-cyan);margin-bottom:.5rem}.overlay-menu{position:absolute;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;z-index:100}.overlay-menu h2{font-size:3rem;color:var(--neon-cyan);text-shadow:0 0 15px var(--neon-cyan);letter-spacing:5px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-5px)}}@keyframes shake{10%,90%{transform:translate3d(-2px,1px,0)}20%,80%{transform:translate3d(3px,-2px,0)}30%,50%,70%{transform:translate3d(-4px,3px,0)}40%,60%{transform:translate3d(4px,-3px,0)}}@keyframes expandRing{0%{width:0;height:0;opacity:1}to{width:300px;height:300px;opacity:0}}@keyframes gridMove{0%{background-position:0 0}to{background-position:0 40px}}
