:root{--bg:#030514;--fg:#e8ecff;--accent:#ff2a6d;--accent-glow:#ff2a6d99;--cyan:#05d9e8;--glass-bg:#060a1866;--glass-border:#05d9e84d}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--fg);margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;overflow:hidden}#game{width:100%;height:100%;display:block}#damage-vignette{pointer-events:none;z-index:5;transition:box-shadow .1s ease-out;position:absolute;inset:0;box-shadow:inset 0 0 150px #f000}#damage-vignette.hit{transition:none;box-shadow:inset 0 0 150px #f00c}#hud{pointer-events:none;z-index:10;color:var(--fg);text-transform:uppercase;letter-spacing:2px;font-family:Inter,sans-serif;position:absolute;inset:0}.hud-top-left{flex-direction:column;gap:4px;display:flex;position:absolute;top:40px;left:40px}.hud-top-right{flex-direction:column;align-items:flex-end;gap:4px;display:flex;position:absolute;top:40px;right:40px}.hud-top-center{text-align:center;position:absolute;top:40px;left:50%;transform:translate(-50%)}.hud-bottom-center{flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}.hud-text{color:#ffffffb3;letter-spacing:4px;font-size:14px;font-weight:400}.hud-subtext{color:#fff6;letter-spacing:2px;font-size:11px;font-weight:300}.hud-value{color:#fff;letter-spacing:2px;text-shadow:0 0 10px #ffffff4d;font-size:32px;font-weight:700}.hud-powerup-text{color:#05d9e8;letter-spacing:2px;text-shadow:0 0 10px #05d9e880;font-size:14px;font-weight:700;transition:transform .1s ease-out}@keyframes comboPulse{0%{text-shadow:0 0 10px #ff2a6d;transform:scale(1)}50%{text-shadow:0 0 25px #ff2a6d,0 0 40px #fff;transform:scale(1.3)}to{text-shadow:0 0 10px #ff2a6d;transform:scale(1)}}.hud-combo-active{animation:.3s ease-out comboPulse}.hud-powerup-text{color:var(--cyan);letter-spacing:6px;text-shadow:0 0 15px var(--cyan);font-size:18px;font-weight:300;animation:2s infinite alternate pulsePowerup}@keyframes pulsePowerup{0%{opacity:.7}to{opacity:1;text-shadow:0 0 25px var(--cyan)}}.hud-reticle{pointer-events:none;border:1px solid #ffffff26;border-radius:50%;width:12px;height:12px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hud-reticle:after{content:"";background:#ffffff80;border-radius:50%;width:2px;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.health-label{letter-spacing:4px;color:#ffffff80;font-size:10px;font-weight:300}.health-bar-container{justify-content:center;gap:8px;display:flex}.health-pip{background:#ffffff1a;border:1px solid #fff3;width:24px;height:12px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);transform:skew(-20deg)}.health-pip.active{background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:2s infinite alternate pulse-health}@keyframes pulse-health{0%{opacity:.8;filter:brightness()}to{opacity:1;filter:brightness(1.3)}}#overlay{-webkit-backdrop-filter:blur(20px);z-index:100;background:#02040c99;place-items:center;transition:opacity .4s;display:grid;position:fixed;inset:0}#overlay.hidden{opacity:0;pointer-events:none}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.panel{text-align:center;background:#060a1873;border:1px solid #05d9e84d;border-top-color:#05d9e899;border-radius:16px;width:100%;max-width:600px;padding:60px;animation:.5s cubic-bezier(.16,1,.3,1) forwards fadeSlideUp;box-shadow:0 0 40px #000c,inset 0 0 20px #05d9e81a}.panel h1{letter-spacing:12px;color:#fff;text-transform:uppercase;text-shadow:0 0 20px #ffffff4d;margin:0 0 16px;font-size:48px;font-weight:800;transition:color .3s,text-shadow .3s}.panel h1.title-death{color:#ff2a6d;text-shadow:0 0 20px #ff2a6d99}.panel h1.title-victory{color:#ffc44d;text-shadow:0 0 20px #ffc44d99}.panel p{letter-spacing:2px;color:#fff9;margin:0 0 40px;font-size:14px;font-weight:300;line-height:1.6}.controls-grid{text-align:left;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px;display:grid}.control-key{letter-spacing:2px;color:#ffffff80;align-items:center;gap:12px;font-size:12px;font-weight:300;display:flex}.control-key span{color:var(--cyan);background:#05d9e81a;border:1px solid #05d9e84d;padding:4px 8px;font-weight:600}.panel-actions{justify-content:center;gap:20px;display:flex}button{text-transform:uppercase;letter-spacing:4px;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-primary{color:#000;background:#ffffffe6;border:1px solid #fff;padding:16px 40px}.btn-primary:hover:not(:disabled){background:#fff;transform:translateY(-2px);box-shadow:0 0 20px #ffffff80}.btn-primary:disabled{color:#ffffff4d;cursor:not-allowed;background:#ffffff1a;border-color:#0000}.btn-secondary{color:#fff;background:0 0;border:1px solid #ffffff4d;padding:16px 32px}.btn-secondary:hover{background:#ffffff1a;border-color:#fff}.btn-outline{border:1px solid var(--cyan);cursor:pointer;color:var(--cyan);background:#05d9e81a;border-radius:30px;padding:12px 24px;font-family:Inter,sans-serif;font-size:16px;font-weight:600;transition:all .3s}.btn-outline:hover{background:#05d9e833;box-shadow:0 0 15px #05d9e866}.setting-group{text-align:left;margin:24px 0}.setting-group label{color:#a0a8cc;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-size:14px;display:block}.level-selector{background:#0000004d;border-radius:12px;justify-content:center;align-items:center;gap:20px;padding:12px;display:flex}#lvl-display{color:#fff;text-align:center;min-width:40px;font-size:24px;font-weight:700}.btn-icon{background:var(--glass-bg);width:36px;height:36px;color:var(--cyan);cursor:pointer;border:none;border:1px solid var(--glass-border);border-radius:50%;font-size:20px;transition:all .2s}.btn-icon:hover{background:var(--cyan);color:#000}.color-picker{justify-content:center;gap:16px;display:flex}.color-btn{cursor:pointer;border:2px solid #0000;border-radius:50%;width:40px;height:40px;transition:transform .2s}.color-btn:hover{transform:scale(1.15)}.color-btn.active{border:2px solid #fff;transform:scale(1.2)}.btn-toggle{border:1px solid var(--glass-border);cursor:pointer;color:#777;background:#00000080;border-radius:20px;min-width:80px;padding:8px 16px;font-family:Inter,sans-serif;font-size:14px;font-weight:700;transition:all .3s}.btn-toggle.active{border-color:var(--cyan);color:var(--cyan);background:#05d9e826;box-shadow:0 0 10px #05d9e84d}.hidden{display:none!important}#touch-controls{z-index:10;pointer-events:none;width:100vw;height:100vh;display:none;position:absolute;top:0;left:0}#touch-left-zone,#touch-right-zone{pointer-events:auto;width:50%;height:100%;position:relative}#touch-joystick-base{pointer-events:none;-webkit-backdrop-filter:blur(8px);background:#060a1866;border:1px solid #05d9e84d;border-radius:50%;width:140px;height:140px;position:absolute;transform:translate(-50%,-50%);box-shadow:inset 0 0 20px #05d9e81a,0 0 15px #05d9e833}#touch-joystick-stick{background:#05d9e84d;border:2px solid #05d9e8cc;border-radius:50%;width:56px;height:56px;transition:transform 50ms ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 15px #05d9e899}#touch-jump-btn,#touch-dash-btn{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-user-select:none;user-select:none;background:#ffffff1a;border:2px solid #fff3;border-radius:50%;place-items:center;width:64px;height:64px;font-size:24px;display:grid}:is(#touch-jump-btn,#touch-dash-btn) #touch-jump-btn:active{color:#fff;background:#05d9e84d;transform:scale(.9);box-shadow:inset 0 0 20px #05d9e899,0 0 30px #05d9e880}:is(#touch-jump-btn,#touch-dash-btn) #touch-right-zone.tap-active{background:radial-gradient(circle,#05d9e814 0%,#0000 60%)}@media (pointer:coarse){:is(#touch-jump-btn,#touch-dash-btn) #touch-controls:not(.hidden){display:flex}}@media (width<=768px){:is(#touch-jump-btn,#touch-dash-btn) .hud-top-left{top:20px;left:20px}:is(#touch-jump-btn,#touch-dash-btn) .hud-top-right{top:20px;right:20px}:is(#touch-jump-btn,#touch-dash-btn) .hud-bottom-center{bottom:20px}:is(#touch-jump-btn,#touch-dash-btn) .hud-value{font-size:24px}:is(#touch-jump-btn,#touch-dash-btn) .health-label{font-size:10px}:is(#touch-jump-btn,#touch-dash-btn) .panel{width:90%;max-width:400px;padding:30px 20px}:is(#touch-jump-btn,#touch-dash-btn) #overlay-title{font-size:36px}:is(#touch-jump-btn,#touch-dash-btn) #overlay-text{font-size:14px}:is(#touch-jump-btn,#touch-dash-btn) .btn-primary{width:100%;margin-bottom:15px;padding:20px;font-size:18px}:is(#touch-jump-btn,#touch-dash-btn) .btn-secondary{width:100%;padding:16px;font-size:16px}:is(#touch-jump-btn,#touch-dash-btn) .panel-actions{flex-direction:column;gap:15px}:is(#touch-jump-btn,#touch-dash-btn) .setting-group{flex-direction:column;gap:15px;padding:15px 0;align-items:flex-start!important}:is(#touch-jump-btn,#touch-dash-btn) .setting-group label{width:100%;font-size:14px}:is(#touch-jump-btn,#touch-dash-btn) .level-selector{justify-content:space-between;width:100%}:is(#touch-jump-btn,#touch-dash-btn) .btn-icon{width:50px;height:50px;font-size:24px}:is(#touch-jump-btn,#touch-dash-btn) #lvl-display{font-size:24px}:is(#touch-jump-btn,#touch-dash-btn) .color-picker{justify-content:space-between;width:100%}:is(#touch-jump-btn,#touch-dash-btn) .color-btn{width:50px;height:50px}:is(#touch-jump-btn,#touch-dash-btn) .btn-toggle{width:100%;padding:15px;font-size:16px}:is(#touch-jump-btn,#touch-dash-btn) .controls-grid{display:none}}