*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#05030f;color:#e8f6ff;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:"Courier New",ui-monospace,Menlo,monospace}
#app{position:fixed;inset:0;--u:3}
#stage{position:absolute;left:50%;top:46px;transform:translateX(-50%);width:calc(320px*var(--u));height:calc(240px*var(--u));background:#0a0620;box-shadow:0 0 0 2px #2a1d5a,0 0 40px #5b2bd955;overflow:hidden}
canvas#cv{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:-moz-crisp-edges}
#hud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;gap:6px;padding:calc(var(--u)*3px) calc(var(--u)*5px);font-weight:700;font-size:max(11px,calc(var(--u)*7px));letter-spacing:.04em;color:#cfe;text-shadow:1px 1px 0 #000,0 0 6px #3ff3ff88;pointer-events:none;background:linear-gradient(#0a0620cc,#0a062000)}
#hud b{color:#ffe14d;font-weight:700}#hLives{color:#ff5ce1}
#tools{position:absolute;right:calc(var(--u)*4px);top:calc(var(--u)*17px);display:flex;gap:6px;z-index:4}
#tools button{font:700 max(10px,calc(var(--u)*5.5px))/1 "Courier New",monospace;color:#9ef;background:#0a0620aa;border:1px solid #3ff3ff77;border-radius:4px;padding:5px 7px;cursor:pointer;min-width:28px}
#tools button:hover,#tools button[aria-pressed=true]{background:#1b3a66;color:#fff}
#combo{position:absolute;left:calc(var(--u)*5px);top:calc(var(--u)*17px);pointer-events:none;text-shadow:1px 1px 0 #000;width:calc(var(--u)*64px)}
#combo .cm{font-weight:700;font-size:max(15px,calc(var(--u)*12px));color:#ffe14d;line-height:1}#combo .cm b{font-size:1.25em}
#combo .cb{height:calc(var(--u)*3px);background:#0a0620cc;border:1px solid #ffe14d88;margin:2px 0}#combo .cb i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5ce1,#ffe14d)}
#combo .cp{font-size:max(10px,calc(var(--u)*6px));color:#cfe;font-weight:700}
#status{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--u)*17px);display:flex;gap:6px;pointer-events:none;font-weight:700;font-size:max(10px,calc(var(--u)*6px))}
#status span{background:#0a0620cc;border:1px solid;padding:2px 6px;border-radius:3px}
#toast{position:absolute;left:50%;transform:translate(-50%,-30px);top:calc(var(--u)*40px);opacity:0;transition:opacity .25s,transform .25s;text-align:center;pointer-events:none;background:#0a0620ee;border:2px solid #3ff3ff;border-radius:6px;padding:8px 12px;max-width:92%;box-shadow:0 0 18px #3ff3ff88;z-index:5}
#toast.on{opacity:1;transform:translate(-50%,0)}#toast b{display:block;color:#ffe14d;font-size:max(13px,calc(var(--u)*8px));letter-spacing:.06em}#toast small{display:block;color:#cfe;font-size:max(10px,calc(var(--u)*5.5px));margin-top:3px}
#banner{position:absolute;left:0;right:0;top:34%;text-align:center;font-weight:700;font-size:max(16px,calc(var(--u)*14px));letter-spacing:.12em;color:#fff;text-shadow:2px 2px 0 #000,0 0 14px #ff5ce1;pointer-events:none;opacity:0;transition:opacity .4s}#banner.on{opacity:1}#banner small{display:block;font-size:.55em;color:#ffe14d;margin-top:4px;letter-spacing:.2em}
#crt{position:absolute;inset:0;pointer-events:none;display:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 1px,transparent 1px,transparent calc(var(--u)*1px));box-shadow:inset 0 0 calc(var(--u)*30px) #000a;mix-blend-mode:multiply}
body.crt #crt{display:block}
#pad{position:absolute;display:none;left:0;right:0;z-index:3}
body.touch #pad{display:block}
#pad .z{position:absolute;top:0;bottom:0;width:33.34%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;color:#3ff3ff;border:1px solid #3ff3ff33;background:#3ff3ff10}
#pad .z.on{background:#3ff3ff33}#pad #zl{left:0}#pad #zj{left:33.33%;color:#ff5ce1;border-color:#ff5ce133;background:#ff5ce110}#pad #zj.on{background:#ff5ce133}#pad #zr{right:0}
#pad .act{position:absolute;top:8px;font:700 13px "Courier New",monospace;color:#fff;background:#3a1f7a;border:2px solid #b04dff;border-radius:8px;padding:12px 8px;z-index:2;width:30%;min-height:44px}
#bDash{left:35%}#bSlam{right:35%}
#pad .act:active{background:#6a3fd0}
#back{position:fixed;left:10px;top:10px;font:600 12px/1 system-ui,sans-serif;color:#7ff;background:rgba(10,20,40,.6);border:1px solid #2aa;border-radius:6px;padding:6px 10px;text-decoration:none;z-index:6;box-shadow:0 0 12px #0ff5}
.ov{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(5,3,15,.82);overflow:auto;padding:54px 12px 12px;touch-action:pan-y}
.ov.on{display:flex}
.ov .card{width:min(560px,100%);margin:auto;text-align:center;background:#0d0826ee;border:2px solid #5b2bd9;border-radius:10px;padding:16px 14px;box-shadow:0 0 40px #5b2bd988}
.ov h1{margin:0 0 4px;font-size:clamp(26px,6vw,40px);letter-spacing:.1em;color:#fff;text-shadow:0 0 14px #3aa0ff,3px 3px 0 #ff5ce1}
.ov h2{margin:0 0 8px;font-size:clamp(20px,5vw,30px);letter-spacing:.1em;color:#ffe14d}
.ov p{margin:6px 0;color:#cfe;font-size:14px;line-height:1.35}
.ov .big{font-size:26px;color:#ffe14d;font-weight:700;margin:4px 0}
.ov button.go,.ov a.go{display:inline-block;margin:8px 6px 2px;font:700 18px "Courier New",monospace;letter-spacing:.1em;color:#05030f;background:linear-gradient(#7fe4ff,#3aa0ff);border:0;border-radius:8px;padding:12px 22px;cursor:pointer;box-shadow:0 4px 0 #1f6fd6;text-decoration:none;min-height:44px}
.ov button.alt{background:#1b1840;color:#9ef;box-shadow:0 4px 0 #0a0620;border:1px solid #3ff3ff66;font-size:14px}
.ov .sk{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;margin:10px 0;text-align:left}
.ov .sk div{border:1px solid #3ff3ff44;border-radius:6px;padding:6px 8px;background:#120c33;font-size:12px;line-height:1.3}
.ov .sk div.on{border-color:#ffe14d;background:#241a52}.ov .sk b{color:#9ef;font-size:12px;letter-spacing:.05em}.ov .sk div.on b{color:#ffe14d}
.ov .keys{font-size:12px;color:#9bd;margin:8px 0}.ov .keys kbd{background:#1b1840;border:1px solid #3ff3ff66;border-radius:3px;padding:1px 5px;color:#fff}
.ov .new{color:#ff5ce1;font-weight:700;letter-spacing:.1em}
@media (max-width:700px){.ov p{font-size:13px}.ov .sk div{font-size:11px}}