:root{--alpha:#00d4ff;--alpha-rgb:0,212,255;--omega:#ff6b35;--omega-rgb:255,107,53;--bg:#04040d;--surface:#0a0a18;--surface2:#0f0f22;--border:#1a1a3a;--text:#e0e0ff;--muted:#4a4a7a;--green:#00ff88;--green-rgb:0,255,136;--red:#ff4455;--yellow:#ffe066;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;background:var(--bg);color:var(--text);font-family:'Share Tech Mono',monospace;overflow:hidden;}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;transition:opacity .35s,transform .35s;}
.screen.hidden{opacity:0;pointer-events:none;transform:translateY(16px);}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.07) 2px,rgba(0,0,0,.07) 4px);}
body.no-scan::before{display:none;}
#home{align-items:center;justify-content:center;gap:0;}
.home-bg{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 30% 50%,#00d4ff0b 0%,transparent 60%),radial-gradient(ellipse at 72% 50%,#ff6b3509 0%,transparent 60%);}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:40px 40px;animation:gs 22s linear infinite;}
@keyframes gs{from{background-position:0 0}to{background-position:40px 40px}}
.logo-wrap{position:relative;z-index:1;text-align:center;margin-bottom:48px;}
.logo-sub{font-size:11px;letter-spacing:6px;color:var(--muted);margin-bottom:16px;}
.logo-main{font-family:'Orbitron',sans-serif;font-size:clamp(34px,8vw,72px);font-weight:900;line-height:1.05;background:linear-gradient(135deg,var(--alpha) 0%,#fff 50%,var(--omega) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:lp 3s ease-in-out infinite;}
@keyframes lp{0%,100%{filter:drop-shadow(0 0 20px #00d4ff44)}50%{filter:drop-shadow(0 0 44px #00d4ff88)}}
.logo-tag{font-size:11px;color:var(--muted);letter-spacing:3px;margin-top:10px;}
.home-btns{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;width:min(280px,80vw);}
.btn-primary{background:transparent;border:1px solid var(--alpha);color:var(--alpha);font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:3px;padding:15px 24px;cursor:pointer;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:.2s;position:relative;overflow:hidden;}
.btn-primary:hover{box-shadow:0 0 18px rgba(var(--alpha-rgb),.27);background:rgba(var(--alpha-rgb),.06);}
.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;padding:11px 24px;cursor:pointer;transition:.2s;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);}
.btn-secondary:hover{border-color:var(--muted);color:var(--text);}
.home-footer{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:10px;color:var(--muted);letter-spacing:2px;}
#levelSelect{align-items:stretch;}
.ls-header{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border);gap:14px;flex-shrink:0;}
.back-btn{background:none;border:1px solid var(--border);color:var(--muted);font-family:inherit;font-size:11px;padding:7px 14px;cursor:pointer;transition:.2s;}
.back-btn:hover{border-color:var(--alpha);color:var(--alpha);}
.ls-title{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;letter-spacing:3px;}
.ls-stats{margin-left:auto;font-size:11px;color:var(--muted);}
.ls-grid{flex:1;overflow-y:auto;padding:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;align-content:start;}
.ls-grid::-webkit-scrollbar{width:3px;}.ls-grid::-webkit-scrollbar-thumb{background:var(--border);}
.level-card{background:var(--surface);border:1px solid var(--border);padding:18px;cursor:pointer;transition:.2s;position:relative;overflow:hidden;clip-path:polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%);}
.level-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:var(--alpha);transform:scaleX(0);transform-origin:left;transition:transform .28s;}
.level-card:hover::after{transform:scaleX(1);}
.level-card:hover{background:var(--surface2);border-color:rgba(var(--alpha-rgb),.2);}
.level-card.locked{opacity:.38;cursor:not-allowed;}.level-card.locked:hover::after{transform:scaleX(0);}
.lc-num{font-family:'Orbitron',sans-serif;font-size:26px;font-weight:900;color:var(--border);margin-bottom:6px;}
.lc-name{font-size:11px;color:var(--alpha);letter-spacing:1px;margin-bottom:3px;}
.lc-desc{font-size:10px;color:var(--muted);line-height:1.55;margin-bottom:10px;}
.lc-stars{display:flex;gap:4px;}
.sp{width:13px;height:13px;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}.sp.e{background:#ffe066;}.sp.u{background:var(--border);}
.lc-lock{position:absolute;top:11px;right:11px;font-size:13px;color:var(--muted);}
.lc-badge{position:absolute;top:11px;right:11px;font-size:9px;background:rgba(var(--green-rgb),.13);color:var(--green);border:1px solid rgba(var(--green-rgb),.25);padding:2px 7px;letter-spacing:1px;}
.lc-tag{display:inline-block;font-size:8px;padding:2px 5px;border:1px solid;margin-bottom:6px;letter-spacing:1px;}
.lc-tag.moving{border-color:#ffe06640;color:#ffe066;background:#ffe06610;}
.lc-tag.hazard{border-color:#ff445540;color:#ff4455;background:#ff445510;}
.lc-tag.enemy{border-color:#ff6b3540;color:#ff6b35;background:#ff6b3510;}
#gameScreen{flex-direction:column;}
#gameHud{display:flex;align-items:center;padding:7px 14px;background:var(--surface);border-bottom:1px solid var(--border);gap:14px;flex-shrink:0;font-size:11px;min-height:42px;flex-wrap:wrap;}
#hudBack{background:none;border:1px solid var(--border);color:var(--muted);font-family:inherit;font-size:10px;padding:4px 11px;cursor:pointer;transition:.2s;}
#hudBack:hover{border-color:var(--alpha);color:var(--alpha);}
#hudLvlName{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;}
#hudDim{font-size:10px;padding:3px 9px;border:1px solid var(--alpha);color:var(--alpha);transition:.3s;white-space:nowrap;}
#hudDim.omega{border-color:var(--omega);color:var(--omega);}
#hudStars{color:#ffe066;}#hudPhase{margin-left:auto;letter-spacing:1px;}#hudDeaths{font-size:10px;color:var(--muted);}
#canvasWrap{flex:1;position:relative;overflow:hidden;}
#gc{display:block;width:100%;height:100%;}
#touchControls{display:flex;justify-content:space-between;align-items:center;padding:7px 14px;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;gap:8px;}
.touch-group{display:flex;gap:7px;}
.tc-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:11px 16px;cursor:pointer;transition:.12s;user-select:none;-webkit-user-select:none;touch-action:manipulation;letter-spacing:1px;min-width:56px;text-align:center;}
.tc-btn:active,.tc-btn.pressed{background:var(--surface);border-color:var(--alpha);color:var(--alpha);}
.tc-phase{border-color:rgba(var(--omega-rgb),.47);color:var(--omega);}
.tc-phase:active,.tc-phase.pressed{background:rgba(var(--omega-rgb),.09);border-color:var(--omega);}
#gameOverlay{position:absolute;inset:0;background:#04040dee;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:100;}
#gameOverlay.hidden{display:none;}
#goTitle{font-family:'Orbitron',sans-serif;font-size:clamp(18px,5vw,30px);font-weight:900;}
#goSub{font-size:11px;color:var(--muted);letter-spacing:2px;max-width:280px;text-align:center;line-height:1.8;}
.go-stars{display:flex;gap:8px;margin:6px 0;}
.go-star{width:22px;height:22px;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:var(--border);transition:background .3s;}
.go-star.lit{background:#ffe066;}
.go-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.go-btn{background:transparent;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;padding:11px 20px;cursor:pointer;transition:.2s;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);}
.go-btn.primary{border:1px solid var(--alpha);color:var(--alpha);}
.go-btn.primary:hover{background:rgba(var(--alpha-rgb),.08);box-shadow:0 0 14px rgba(var(--alpha-rgb),.27);}
.go-btn.secondary{border:1px solid var(--border);color:var(--muted);}
.go-btn.secondary:hover{border-color:var(--muted);color:var(--text);}
#howto{align-items:center;justify-content:center;}
.howto-box{background:var(--surface);border:1px solid var(--border);padding:28px;width:min(520px,92vw);display:flex;flex-direction:column;gap:14px;clip-path:polygon(16px 0%,100% 0%,calc(100% - 16px) 100%,0% 100%);max-height:88vh;overflow-y:auto;}
.ht-title{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;letter-spacing:3px;}
.ht-sec{border-left:2px solid var(--alpha);padding-left:11px;}.ht-sec.o{border-color:var(--omega);}.ht-sec.r{border-color:var(--red);}
.ht-h{font-size:10px;color:var(--alpha);letter-spacing:2px;margin-bottom:5px;}.ht-sec.o .ht-h{color:var(--omega);}.ht-sec.r .ht-h{color:var(--red);}
.ht-b{font-size:10px;color:var(--muted);line-height:1.85;}
.ht-k{display:inline-block;background:var(--surface2);border:1px solid var(--border);padding:1px 7px;font-size:9px;color:var(--text);margin:0 2px;}
hr.d{border:none;border-top:1px solid var(--border);}
#settings{align-items:center;justify-content:center;}
.set-box{background:var(--surface);border:1px solid var(--border);padding:28px;width:min(380px,88vw);display:flex;flex-direction:column;gap:18px;clip-path:polygon(14px 0%,100% 0%,calc(100% - 14px) 100%,0% 100%);}
.set-title{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;letter-spacing:3px;margin-bottom:4px;}
.set-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;border-bottom:1px solid var(--border);padding-bottom:11px;}
.set-row:last-of-type{border:none;padding:0;}
.set-label{color:var(--muted);letter-spacing:1px;}
.toggle{width:42px;height:22px;border:1px solid var(--border);position:relative;cursor:pointer;transition:.2s;}
.toggle.on{border-color:var(--alpha);}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;background:var(--muted);transition:.2s;}
.toggle.on::after{background:var(--alpha);transform:translateX(20px);}
#vsScreen{flex-direction:column;}
#vsHud{display:flex;align-items:stretch;padding:0;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;min-height:46px;font-size:11px;}
.vs-hud-half{flex:1;display:flex;align-items:center;gap:10px;padding:6px 12px;}
.vs-hud-half.p2{border-left:1px solid var(--border);justify-content:flex-end;}
.vs-player-tag{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;padding:3px 8px;border:1px solid;}
.vs-player-tag.p1{border-color:var(--alpha);color:var(--alpha);}.vs-player-tag.p2{border-color:var(--omega);color:var(--omega);}
.vs-dim{font-size:10px;padding:2px 7px;border:1px solid;white-space:nowrap;}
.vs-dim.alpha{border-color:var(--alpha);color:var(--alpha);}.vs-dim.omega{border-color:var(--omega);color:var(--omega);}
.vs-stars{color:#ffe066;font-size:11px;}.vs-phase{letter-spacing:1px;font-size:10px;}.vs-deaths{font-size:10px;color:var(--muted);}
#vsCanvasWrap{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;}
#vsTop,#vsBot{flex:1;position:relative;overflow:hidden;}
#vsTop{border-bottom:3px solid rgba(var(--alpha-rgb),.2);}#vsBot{border-top:3px solid rgba(var(--omega-rgb),.2);}
#gcTop,#gcBot{display:block;width:100%;height:100%;}
.vs-label{position:absolute;top:6px;left:10px;font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:2px;padding:2px 7px;border:1px solid;pointer-events:none;z-index:2;}
.vs-label.p1{border-color:rgba(var(--alpha-rgb),.33);color:rgba(var(--alpha-rgb),.47);background:rgba(var(--alpha-rgb),.03);}
.vs-label.p2{border-color:rgba(var(--omega-rgb),.33);color:rgba(var(--omega-rgb),.47);background:rgba(var(--omega-rgb),.03);}
.vs-divider-bar{height:3px;background:linear-gradient(90deg,var(--alpha),var(--omega));flex-shrink:0;position:relative;}
.vs-divider-bar::after{content:'VS';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Orbitron',sans-serif;font-size:9px;font-weight:900;background:var(--bg);padding:0 8px;color:var(--muted);letter-spacing:3px;}
#vsOverlay{position:absolute;inset:0;background:#04040dee;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:100;pointer-events:all;}
#vsOverlay.hidden{display:none;}
#vsWinTitle{font-family:'Orbitron',sans-serif;font-size:clamp(20px,5vw,34px);font-weight:900;}
#vsWinSub{font-size:11px;color:var(--muted);letter-spacing:2px;text-align:center;line-height:1.9;}
.vs-score-row{display:flex;gap:30px;font-size:11px;margin:4px 0;}
.vs-score-cell{text-align:center;}.vs-score-label{color:var(--muted);font-size:9px;letter-spacing:2px;margin-bottom:3px;}
.vs-score-val{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:700;}
.vs-score-val.p1c{color:var(--alpha);}.vs-score-val.p2c{color:var(--omega);}
#vsKeyGuide{position:absolute;bottom:6px;left:0;right:0;display:flex;justify-content:center;padding:0 14px;font-size:9px;color:var(--muted);pointer-events:none;letter-spacing:.5px;}