:root{--bg:#0b0f2a;--pink:#ff3fa4;--cyan:#3ff0ff;--ink:#e9ecff;--glass:rgba(20,26,70,.6)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:radial-gradient(ellipse at top,#1b1f55,var(--bg) 60%),var(--bg);color:var(--ink);font-family:'JetBrains Mono',monospace;overflow:hidden;touch-action:manipulation}
body{display:flex;flex-direction:column;background-image:repeating-linear-gradient(90deg,rgba(63,240,255,.04) 0 1px,transparent 1px 40px),radial-gradient(ellipse at top,#1b1f55,var(--bg) 60%)}
header{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;gap:8px;flex-wrap:wrap}
h1{font-family:'Bungee',cursive;font-size:clamp(18px,4vw,30px);color:var(--pink);text-shadow:0 0 12px var(--pink)}
h1 span{color:var(--cyan);text-shadow:0 0 12px var(--cyan);margin-left:6px}
.hud-right{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pill{font-size:11px;padding:5px 10px;border-radius:99px;background:var(--glass);border:1px solid #2a3380;display:flex;gap:6px;align-items:center;max-width:280px;overflow:hidden;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:#777;animation:pulse 1.2s infinite;flex:none}
.pill.on .dot{background:#3f3;animation:none;box-shadow:0 0 8px #3f3}
@keyframes pulse{50%{opacity:.2}}
.chip{font-family:'Press Start 2P';font-size:8px;padding:7px 9px;background:#141a46;color:var(--cyan);border:2px solid var(--cyan);border-radius:6px;cursor:pointer}
.chip.off{color:#666;border-color:#444}
#scorecard{display:flex;justify-content:center;padding:0 8px;gap:4px;flex-direction:column;align-items:center}
.row{display:flex;gap:2px;align-items:stretch;font-size:11px}
.row .nm{width:34px;font-family:'Press Start 2P';font-size:8px;display:flex;align-items:center;color:var(--pink)}
.fr{width:clamp(26px,7vw,46px);background:var(--glass);border:1px solid #2a3380;border-radius:4px;text-align:center}
.fr.cur{border-color:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.rl{display:flex;justify-content:flex-end;font-size:10px;min-height:13px}
.rl b{width:12px;border-left:1px solid #2a3380;font-weight:800}
.tt{font-weight:800;min-height:14px}
.row.act .nm{color:var(--cyan)}
main{flex:1;position:relative;display:flex;justify-content:center;align-items:center;min-height:0}
canvas{display:block;border-radius:10px;box-shadow:0 0 40px rgba(255,63,164,.25)}
#controls{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-family:'Press Start 2P';font-size:9px;color:var(--cyan);text-shadow:0 0 6px var(--cyan);pointer-events:none;text-align:center;white-space:nowrap}
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.panel{pointer-events:auto;background:rgba(11,15,42,.92);border:2px solid var(--pink);border-radius:14px;padding:22px;text-align:center;max-width:92%;width:360px;box-shadow:0 0 30px rgba(255,63,164,.4)}
.panel h2{font-family:'Bungee';color:var(--cyan);font-size:26px;margin-bottom:10px}
.panel p{font-size:12px;margin:8px 0;opacity:.85}
.panel .btn{display:block;width:100%;margin:6px 0;font-family:'Press Start 2P';font-size:10px;padding:12px;background:#141a46;color:var(--ink);border:2px solid #2a3380;border-radius:8px;cursor:pointer}
.panel .btn.sel{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.swatches{display:flex;gap:8px;justify-content:center;margin:10px 0}
.sw{width:30px;height:30px;border-radius:50%;border:3px solid transparent;cursor:pointer}
.sw.sel{border-color:#fff;box-shadow:0 0 10px #fff}
.lb{font-size:11px;text-align:left;margin-top:8px;max-height:120px;overflow:auto}
.lb div{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px dashed #2a3380}
footer{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:10px;padding:6px;opacity:.75}
footer a{color:var(--pink)}