:root{--neon-magenta:#f300ff;--neon-cyan:#00f3ff;--bg-color:#030005;--panel-bg:#0a000f99;--text-primary:#fff}*{box-sizing:border-box;margin:0;padding:0}body,html{background-color:var(--bg-color);width:100%;height:100%;color:var(--text-primary);-webkit-user-select:none;user-select:none;touch-action:none;font-family:Orbitron,sans-serif;overflow:hidden}#app{width:100%;height:100%;position:relative}#game-canvas{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}#ui-layer{z-index:10;pointer-events:none;flex-direction:column;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}header{background:linear-gradient(#000c 0%,#0000 100%);justify-content:space-between;padding:20px 40px;display:flex}.title{letter-spacing:2px;text-shadow:0 0 10px var(--neon-magenta);font-size:24px;font-weight:900}.subtitle{color:var(--neon-cyan);text-shadow:0 0 10px var(--neon-cyan)}.level-indicator{text-shadow:0 0 8px #ffffff80;font-size:24px;font-weight:700}.screen{background:var(--panel-bg);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s;display:flex;position:absolute;top:0;left:0}.screen.active{opacity:1;pointer-events:all}.screen h1{text-transform:uppercase;letter-spacing:5px;text-align:center;margin-bottom:20px;font-size:64px}.screen p{letter-spacing:1px;color:#ccc;text-align:center;margin-bottom:15px;font-size:18px}.highlight{color:var(--neon-cyan);text-shadow:0 0 10px var(--neon-cyan);font-weight:700}.error-text{color:#ff003c;text-shadow:0 0 20px #ff003c}.success-text{color:#0f6;text-shadow:0 0 20px #0f6}.controls-hint{background:#0006;border:1px solid #ffffff1a;border-radius:8px;margin:30px 0;padding:20px}.keys{justify-content:center;gap:10px;margin-bottom:10px;display:flex}.key{border:1px solid var(--neon-cyan);color:var(--neon-cyan);background:#ffffff1a;border-radius:4px;padding:8px 12px;font-weight:700;display:inline-block;box-shadow:0 0 10px #00f3ff33}.neon-btn{color:var(--text-primary);border:2px solid var(--neon-magenta);cursor:pointer;text-shadow:0 0 5px #fff;background:0 0;border-radius:4px;outline:none;margin-top:20px;padding:15px 40px;font-family:Orbitron,sans-serif;font-size:20px;font-weight:700;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 0 15px #f300ff66,inset 0 0 10px #f300ff66}.neon-btn:hover{background:var(--neon-magenta);color:#000;box-shadow:0 0 30px var(--neon-magenta), inset 0 0 20px var(--neon-magenta)}.neon-btn.red{border-color:#ff003c;box-shadow:0 0 15px #ff003c66,inset 0 0 10px #ff003c66}.neon-btn.red:hover{background:#ff003c;box-shadow:0 0 30px #ff003c,inset 0 0 20px #ff003c}.neon-btn.blue{border-color:#08f;box-shadow:0 0 15px #08f6,inset 0 0 10px #08f6}.neon-btn.blue:hover{background:#08f;box-shadow:0 0 30px #08f,inset 0 0 20px #08f}.dpad-container{pointer-events:auto;width:150px;height:150px;position:absolute;bottom:30px;left:30px}.dpad-container.hidden{display:none}.dpad-btn{border:1px solid var(--neon-cyan);width:50px;height:50px;color:var(--neon-cyan);touch-action:manipulation;background:#00f3ff1a;border-radius:8px;outline:none;position:absolute;box-shadow:0 0 10px #00f3ff33}.dpad-btn:active,.dpad-btn.active{box-shadow:0 0 20px var(--neon-cyan);background:#00f3ff80}.dpad-btn.up{top:0;left:50px}.dpad-btn.down{bottom:0;left:50px}.dpad-btn.left{top:50px;left:0}.dpad-btn.right{top:50px;right:0}.dpad-btn:after{content:"";border:8px solid #0000;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dpad-btn.up:after{border-bottom-color:var(--neon-cyan);top:35%}.dpad-btn.down:after{border-top-color:var(--neon-cyan);top:65%}.dpad-btn.left:after{border-right-color:var(--neon-cyan);left:35%}.dpad-btn.right:after{border-left-color:var(--neon-cyan);left:65%}.menu-buttons{flex-direction:column;gap:15px;margin-top:20px;display:flex}.level-grid{grid-template-columns:repeat(5,1fr);gap:15px;max-width:600px;max-height:50vh;margin-bottom:30px;padding:10px;display:grid;overflow-y:auto}.level-btn{border:2px solid var(--neon-cyan);color:var(--neon-cyan);cursor:pointer;background:0 0;border-radius:4px;padding:15px;font-family:Orbitron,sans-serif;font-size:20px;font-weight:700;transition:all .3s;position:relative;box-shadow:0 0 10px #00f3ff33}.level-rank{font-size:12px;font-weight:900;position:absolute;top:2px;right:4px}.rank-s{color:gold!important;border-color:gold!important;box-shadow:0 0 10px #ffd70066!important}.rank-s:hover:not(.locked){color:#000!important;background:gold!important;box-shadow:0 0 20px gold!important}.rank-a{color:#a0f!important;border-color:#a0f!important;box-shadow:0 0 10px #a0f6!important}.rank-a:hover:not(.locked){color:#fff!important;background:#a0f!important;box-shadow:0 0 20px #a0f!important}.rank-b{color:#00f3ff!important;border-color:#00f3ff!important;box-shadow:0 0 10px #00f3ff66!important}.rank-b:hover:not(.locked){color:#000!important;background:#00f3ff!important;box-shadow:0 0 20px #00f3ff!important}.rank-c{color:#f80!important;border-color:#f80!important;box-shadow:0 0 10px #f806!important}.rank-c:hover:not(.locked){color:#000!important;background:#f80!important;box-shadow:0 0 20px #f80!important}.rank-d{color:#f05!important;border-color:#f05!important;box-shadow:0 0 10px #f056!important}.rank-d:hover:not(.locked){color:#fff!important;background:#f05!important;box-shadow:0 0 20px #f05!important}.level-btn:hover:not(.locked){background:var(--neon-cyan);color:#000;box-shadow:0 0 20px var(--neon-cyan)}.level-btn.locked{color:#444;box-shadow:none;cursor:not-allowed;border-color:#444}.header-right{pointer-events:auto;flex-direction:column;align-items:flex-end;gap:10px;display:flex}.ingame-controls{gap:10px;display:flex}.ingame-controls.hidden{display:none}.icon-btn{border:1px solid var(--neon-magenta);color:var(--neon-magenta);cursor:pointer;background:#00000080;border-radius:4px;justify-content:center;align-items:center;width:40px;height:40px;font-size:24px;transition:all .3s;display:flex}.icon-btn:hover{background:var(--neon-magenta);color:#fff;box-shadow:0 0 15px var(--neon-magenta)}.stats-text{color:#fff;margin:15px 0;font-size:18px;line-height:1.5}.lang-select{color:var(--neon-cyan);border:1px solid var(--neon-cyan);cursor:pointer;background:0 0;border-radius:4px;outline:none;padding:5px 10px;font-family:Orbitron,sans-serif;font-size:14px;transition:all .3s}.lang-select:hover{box-shadow:0 0 10px var(--neon-cyan);background:#00f3ff1a}.lang-select option{color:var(--neon-cyan);background:#102}@media (width<=600px){h1.success-text,h1.error-text{font-size:32px}.screen h1{white-space:normal;word-break:break-word;margin-bottom:10px;font-size:40px}#main-menu{padding-top:60px}.controls-hint{margin:15px 0;padding:10px;font-size:14px}.neon-btn{margin-top:10px;padding:12px 20px}.level-grid{gap:8px;padding:5px}.level-btn{padding:10px 5px;font-size:14px}#level-select-screen h1{font-size:40px}}