:root{--electric-blue:#00a2ff;--cyan:#0ff;--bg-navy:#050a1a;--text-main:#fff;--text-secondary:#b8c2d0;--warning:#ff9500;--critical:#ff3b30}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{background-color:var(--bg-navy);color:var(--text-main);margin:0;font-family:Rajdhani,sans-serif;overflow:hidden}#app{width:100%;height:100%;position:relative;overflow:hidden}#ui-layer{z-index:10;pointer-events:none;width:100vw;height:100vh;position:absolute;top:0;left:0}.hidden{display:none!important}#hud{flex-direction:column;width:100%;height:100%;padding:30px;display:flex}.hud-top{justify-content:space-between;width:100%;display:flex}.sys-buttons{pointer-events:auto;align-items:center;gap:20px;display:flex}.sys-btn{color:var(--cyan);cursor:pointer;text-transform:uppercase;background:#00a2ff1a;border:1px solid #00a2ff80;border-radius:6px;outline:none;padding:10px 20px;font-family:Rajdhani,sans-serif;font-size:18px;font-weight:700;transition:all .3s}.sys-btn:hover{background:#00a2ff4d;box-shadow:0 0 15px #00a2ff80}.sys-btn.active{color:#fff;border-color:var(--cyan);background:#0ff6;box-shadow:0 0 20px #0ff9}.score-container,.speed-container{flex-direction:column;display:flex}.speed-container{align-items:flex-end}.label{letter-spacing:3px;color:var(--text-secondary);font-size:14px}#score{color:var(--electric-blue);text-shadow:0 0 10px #00a2ff80;font-size:48px;font-weight:700;line-height:1}#speed{color:var(--cyan);text-shadow:0 0 10px #00ffff80;font-size:48px;font-weight:700;line-height:1}.unit{letter-spacing:2px;color:var(--text-secondary);font-size:12px}#control-panel{pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:1;background:#050a1a99;border:1px solid #00a2ff4d;border-radius:10px;flex-direction:column;gap:20px;width:320px;max-height:calc(100vh - 200px);padding:15px;transition:transform .4s cubic-bezier(.175,.885,.32,1),opacity .3s;display:flex;position:absolute;top:170px;left:30px;overflow-y:auto;transform:translate(0)}#control-panel.closed{opacity:0;pointer-events:none;transform:translate(-150%)}#control-panel::-webkit-scrollbar{width:6px}#control-panel::-webkit-scrollbar-thumb{background:var(--electric-blue);border-radius:3px}.control-group{flex-direction:column;gap:10px;display:flex}.control-label{letter-spacing:2px;color:var(--cyan);border-bottom:1px solid #0ff3;padding-bottom:5px;font-size:16px;font-weight:700}.btn-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.ctrl-btn{color:var(--text-secondary);text-align:center;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:4px;padding:8px 10px;font-family:Rajdhani,sans-serif;font-size:14px;transition:all .2s}.ctrl-btn:hover{border-color:var(--electric-blue);color:var(--text-main);background:#00a2ff33}.ctrl-btn.active{border-color:var(--cyan);color:#fff;background:#00a2ff66;font-weight:700;box-shadow:0 0 10px #0ff6}#dpad{box-sizing:border-box;pointer-events:none;z-index:100;justify-content:space-between;align-items:flex-end;width:100%;padding:0 40px;display:flex;position:absolute;bottom:100px;left:0}.dpad-left-cluster,.dpad-right-cluster{pointer-events:auto;gap:15px;display:flex}.dpad-btn{color:var(--cyan);cursor:pointer;width:60px;height:60px;box-shadow:none;background:#00a2ff1a;border:1px solid #00a2ff80;border-radius:10px;justify-content:center;align-items:center;padding:0;font-size:24px;display:flex}.dpad-btn:active,.dpad-btn.pressed{color:#fff;border-color:var(--cyan);background:#0ff6;box-shadow:inset 0 0 20px #0ff9,0 0 20px #0ff9}.menu-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;background:#050a1ad9;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.glitch-title{color:var(--text-main);text-shadow:0 0 20px var(--electric-blue);letter-spacing:10px;margin-bottom:5px;font-size:8vw;font-weight:700;position:relative}.subtitle{letter-spacing:8px;color:var(--cyan);margin-bottom:50px;font-size:24px}button{border:2px solid var(--electric-blue);color:var(--electric-blue);letter-spacing:4px;cursor:pointer;text-transform:uppercase;background:0 0;outline:none;padding:15px 40px;font-family:Rajdhani,sans-serif;font-size:24px;font-weight:700;transition:all .3s;box-shadow:inset 0 0 15px #00a2ff33,0 0 15px #00a2ff33}button:hover{background:var(--electric-blue);color:#000;box-shadow:0 0 30px var(--electric-blue) inset, 0 0 30px var(--electric-blue)}.instructions{text-align:center;color:var(--text-secondary);letter-spacing:2px;margin-top:50px;font-size:18px;line-height:1.8}.final-score{color:var(--text-main);margin-bottom:40px;font-size:32px}#final-score-val{color:var(--electric-blue);text-shadow:0 0 10px var(--electric-blue);font-weight:700}@media (width<=768px){#hud{padding:15px}.hud-top{align-items:center}.sys-buttons{gap:8px}.sys-btn{padding:6px 10px;font-size:16px}#score,#speed{font-size:24px}.label{font-size:10px}#control-panel{width:calc(100vw - 30px);max-height:calc(100vh - 220px);top:190px;left:15px}.glitch-title{font-size:14vw}.subtitle{margin-bottom:30px;font-size:18px}button{padding:10px 20px;font-size:18px}.instructions{margin-top:30px;font-size:14px}.final-score{font-size:24px}#dpad{padding:0 20px;bottom:100px}.dpad-btn{border-radius:15px;width:65px;height:65px;font-size:28px}}.landing-page{z-index:50;color:#fff;pointer-events:auto;background-color:#050510;background-image:linear-gradient(#050510b3,#050510e6),url(/assets/bg.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;flex-direction:column;width:100vw;height:100vh;display:flex;position:absolute;top:0;left:0;overflow:hidden auto}.landing-header{border-bottom:2px solid var(--cyan);border-bottom-style:inset;padding:20px 40px}.top-row{color:var(--text-secondary);letter-spacing:2px;justify-content:space-between;margin-bottom:15px;font-size:14px;display:flex}.title-row{justify-content:center;align-items:center;display:flex}.neon-title{color:#f0f;text-shadow:0 0 20px #f0f,0 0 40px #f0f;letter-spacing:-2px;margin:10px 0;font-size:5rem;font-weight:800;line-height:1}.bottom-row{color:var(--cyan);letter-spacing:2px;border-top:1px solid var(--text-secondary);justify-content:space-between;margin-top:15px;padding-top:10px;font-size:14px;display:flex}.landing-content{border-bottom:1px solid var(--text-secondary);flex:1;gap:40px;padding:40px;display:flex}.col-left,.col-right{flex-direction:column;flex:1;display:flex}.col-center{flex-direction:column;flex:2;justify-content:center;align-items:center;display:flex}.bold-header{color:var(--cyan);margin-bottom:20px;font-size:4rem;font-weight:800;line-height:1}.desc{color:var(--text-main);margin-bottom:30px;font-size:1.1rem;line-height:1.6}.dropcap{float:left;color:var(--cyan);background:#0ff3;margin-right:10px;padding:5px;font-size:4rem;line-height:.8}.assignment{border-top:1px solid #ffffff4d;margin-bottom:30px;padding-top:15px}.assignment .label{color:var(--text-secondary);letter-spacing:1px;font-size:14px}.assignment .value{color:var(--cyan);font-size:20px;font-weight:700}.assignment .sub-value{color:var(--text-secondary);font-size:14px}.stats{gap:30px;margin-bottom:40px;display:flex}.stat{border-left:2px solid var(--cyan);flex-direction:column;padding-left:15px;display:flex}.stat .val{color:#fff;font-size:2.5rem;font-weight:700;line-height:1}.stat .lbl{color:var(--text-secondary);letter-spacing:1px;font-size:12px}.launch-btn{color:#fff;cursor:pointer;background:#f0f;border:none;width:100%;padding:20px;font-size:1.5rem;font-weight:700;transition:all .2s;box-shadow:0 0 20px #ff00ff80}.launch-btn:hover{background:#f3f;transform:scale(1.02);box-shadow:0 0 30px #f0fc}#game-preview-container{aspect-ratio:16/9;background:#000;border:3px solid #f0f;width:100%;margin-bottom:10px;position:relative;box-shadow:0 0 20px #f0f6,inset 0 0 20px #f0f6}.preview-label{color:#f0f;letter-spacing:2px;text-align:center;font-size:12px}.side-header{color:var(--cyan);border-bottom:1px solid #ffffff4d;margin-bottom:20px;padding-bottom:10px;font-size:1.5rem}.how-to-list{flex-direction:column;gap:20px;margin-bottom:auto;list-style:none;display:flex}.how-to-list strong{color:var(--cyan);font-size:1.1rem}.how-to-list p{color:var(--text-secondary);margin-top:5px}.developer-box{background:#ff00ff0d;border:1px solid #ff00ff80;margin-top:40px;padding:20px}.dev-title{color:#f0f;margin-bottom:10px;font-weight:700}.dev-desc,.dev-link{color:var(--text-secondary);margin-top:5px;font-size:14px}.landing-footer{gap:40px;padding:40px;display:flex}.footer-left,.footer-right{flex:1}.footer-header{color:var(--cyan);letter-spacing:1px;font-size:14px}.footer-bold{color:var(--cyan);margin-bottom:30px;font-size:3rem;font-weight:800}.controls-grid{flex-direction:column;gap:20px;display:flex}.control-row{align-items:center;gap:20px;display:flex}.keys{gap:5px;min-width:80px;display:flex}.key{color:#f0f;background:#f0f3;border:1px solid #f0f;border-radius:4px;justify-content:center;align-items:center;width:30px;height:30px;font-weight:700;display:flex}.key-desc{color:var(--text-secondary);font-size:14px}.key-desc strong{color:var(--cyan)}.comic-box{background:#eedc9a;border:4px solid #111;justify-content:center;align-items:center;height:200px;display:flex;box-shadow:10px 10px #ff00ff4d}.comic-content{color:#111;font-size:5rem}@media (width<=1000px){.landing-content,.landing-footer{flex-direction:column}.neon-title{font-size:3rem}}