:root{--bg:#0d0221;--mag:#ff2a6d;--cy:#05d9e8;--dim:#2a1a4a;--txt:#d1f7ff}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#26084a,var(--bg) 60%),var(--bg);color:var(--txt);font-family:'JetBrains Mono',monospace;min-height:100vh;
background-attachment:fixed}
body::before{content:"";position:fixed;inset:auto 0 0 0;height:40vh;pointer-events:none;
background:linear-gradient(transparent,rgba(255,42,109,.12)),repeating-linear-gradient(90deg,rgba(5,217,232,.15) 0 1px,transparent 1px 60px);
transform:perspective(300px) rotateX(60deg);transform-origin:bottom;z-index:-1}
header{text-align:center;padding:24px 12px 8px}
h1{font-family:'Press Start 2P';font-size:clamp(18px,4vw,34px);margin:0;color:var(--mag);text-shadow:0 0 12px var(--mag)}
h1 span{color:var(--cy);text-shadow:0 0 12px var(--cy);margin-left:.4em}
.tag{font-weight:200;opacity:.8;margin:10px 0 0}
main{display:flex;gap:20px;justify-content:center;padding:16px;flex-wrap:wrap}
.stage{flex:0 1 600px;min-width:0}
.tv{position:relative;background:linear-gradient(145deg,#3a2a55,#160a2a);padding:22px;border-radius:28px;box-shadow:0 0 0 3px #000,0 0 40px rgba(255,42,109,.35),inset 0 2px 4px rgba(255,255,255,.2)}
#canvas{display:block;width:100%;aspect-ratio:1;image-rendering:pixelated;border-radius:18px;background:#000}
.scan{position:absolute;inset:22px;border-radius:18px;pointer-events:none;
background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.28) 2px 3px),radial-gradient(ellipse,transparent 60%,rgba(0,0,0,.6))}
.scan.off{display:none}
.tv:fullscreen{display:flex;align-items:center;justify-content:center;border-radius:0}
.tv:fullscreen #canvas{width:auto;height:94vh}
.cart{position:absolute;left:50%;top:-10px;transform:translate(-50%,-120%);background:var(--mag);color:#000;font-family:'Press Start 2P';font-size:9px;padding:10px 14px;border-radius:6px;transition:.5s cubic-bezier(.2,1.6,.4,1);opacity:0;white-space:nowrap;max-width:95%;overflow:hidden;text-overflow:ellipsis}
.cart.show{transform:translate(-50%,10px);opacity:1}
#controls{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0;align-items:center}
button{font-family:'Press Start 2P';font-size:9px;background:var(--dim);color:var(--cy);border:2px solid var(--cy);padding:9px 10px;cursor:pointer;box-shadow:3px 3px 0 #000}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
button.on{background:var(--cy);color:#000}
input[type=range]{accent-color:var(--mag);width:90px}
.slot{display:block;border:2px dashed var(--mag);padding:18px;text-align:center;cursor:pointer;background:rgba(255,42,109,.06);transition:.2s}
.slot.over{background:rgba(255,42,109,.25);transform:scale(1.02)}
.slotmouth{height:10px;width:60%;margin:0 auto 12px;background:#000;border-radius:5px;box-shadow:inset 0 2px 6px var(--mag)}
.slot b{font-family:'Press Start 2P';font-size:11px;color:var(--mag);display:block;margin-bottom:8px}
.slot small{font-weight:200;opacity:.75}
aside{flex:0 1 300px;display:flex;flex-direction:column;gap:14px;min-width:260px}
.panel{background:rgba(13,2,33,.8);border:2px solid var(--dim);padding:12px}
summary,.ptitle{font-family:'Press Start 2P';font-size:10px;color:var(--mag);cursor:pointer;margin-bottom:10px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px}
.stats b{color:var(--cy);font-weight:800;float:right}
#wave{width:100%;margin-top:10px;background:#000;image-rendering:pixelated}
#pad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#pad button{font-size:14px;padding:14px 0;touch-action:none}
#pad button.on{background:var(--mag);color:#000;border-color:var(--mag)}
#recent{display:flex;flex-direction:column;gap:6px}
.chip{font-family:'JetBrains Mono';font-size:11px;text-align:left;text-transform:none;border-color:var(--mag);color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--mag);color:#000;padding:12px 18px;font-weight:800;transition:.3s;z-index:9}
#toast.show{transform:translateX(-50%)}
footer{text-align:center;padding:24px;font-size:12px;opacity:.7}
footer a{color:var(--cy)}
@media(max-width:700px){aside{min-width:0;flex-basis:100%}}