:root{--chrome:linear-gradient(180deg,#fff 0%,#9aa 45%,#334 50%,#cdd 70%,#fff 100%);--red:#ff2a2a;--cyan:#7ff;}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:#cdd;font-family:'Share Tech Mono',monospace;
background:radial-gradient(ellipse at 50% 20%,rgba(255,230,180,.18),transparent 60%),
repeating-linear-gradient(90deg,#2a160c 0 14px,#311a0e 14px 30px,#25130a 30px 52px),#1c0f08;}
.desk{display:flex;gap:24px;justify-content:center;align-items:flex-start;padding:20px 12px}
#shelf{display:flex;flex-direction:column;gap:12px;width:170px;margin-top:40px}
.shelf-title{font-family:Orbitron;font-weight:900;letter-spacing:3px;font-size:12px;color:#c9a}
.cart{background:linear-gradient(#222,#0b0b0b);border:1px solid #444;border-radius:6px 6px 2px 2px;padding:8px;color:#eee;cursor:pointer;font-family:Orbitron;font-size:10px;letter-spacing:1px;text-align:left;transition:transform .2s;box-shadow:0 6px 0 #000}
.cart:hover{transform:translateY(-3px)}
.cart.inserted{transform:translateY(6px) scale(.97);outline:2px solid var(--cyan)}
.cart-label{height:64px;border-radius:3px;margin-bottom:6px;display:flex;align-items:center;justify-content:center}
.cart-label svg{width:80%;height:80%;fill:none;stroke:#fff;stroke-width:1.5}
.cart-label.rock{background:linear-gradient(135deg,#036,#0aa)}
.cart-label.tetris{background:linear-gradient(#c22,#e90,#cc2,#2a4,#26c)}
.cart-label.storm{background:linear-gradient(#305,#c26,#f80)}
.rig{display:flex;flex-direction:column;align-items:center}
.cabinet{background:linear-gradient(160deg,#2a2a2e,#0a0a0c 40%,#000);border-radius:18px;padding:14px 18px 12px;box-shadow:0 30px 60px rgba(0,0,0,.8),inset 0 1px 0 #555;width:min(440px,94vw)}
.logo-row{display:flex;justify-content:space-between;align-items:center}
.logo{font-family:Orbitron;font-weight:900;font-style:italic;font-size:30px;background:var(--chrome);-webkit-background-clip:text;color:transparent;letter-spacing:2px}
.logo em{color:var(--red);-webkit-text-fill-color:var(--red);margin-left:6px;font-size:20px}
.led{width:10px;height:10px;border-radius:50%;background:#400}
.led.on{background:var(--red);box-shadow:0 0 10px var(--red);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.5}}
.tagline{font-size:11px;color:#888;margin:2px 0 8px}
.screen-wrap{position:relative;width:100%;aspect-ratio:4/5;background:#000;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 30px #000,0 0 0 4px #111}
#canvas{width:100%;height:100%;display:block}
.overlay{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:0;transition:opacity .6s}
.overlay.rock{opacity:1;background:linear-gradient(#6ff,#4cf 60%,#3ae)}
.overlay.tetris{opacity:1;background:linear-gradient(#f66 0 20%,#fa5 20% 40%,#ff7 40% 60%,#7f8 60% 80%,#7af 80%)}
.overlay.storm{opacity:1;background:linear-gradient(#f6f,#f7a 50%,#fb5)}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse,transparent 55%,rgba(0,0,0,.7)),repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px)}
.cab-controls{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.smallbtn,.pwr{font-family:Orbitron;font-size:10px;letter-spacing:1px;background:#1a1a1a;color:#ccc;border:1px solid #444;border-radius:4px;padding:6px 10px;cursor:pointer}
.pwr{background:#300;color:#f88;border-color:#a22}
.pwr.on{background:var(--red);color:#fff;box-shadow:0 0 10px var(--red)}
.vol{font-size:11px;display:flex;align-items:center;gap:4px;margin-left:auto}
.vol input{width:80px;accent-color:var(--red)}
.pad{display:flex;justify-content:space-between;align-items:center;width:min(440px,94vw);margin-top:14px;background:linear-gradient(#222,#0c0c0c);border-radius:40px 40px 20px 20px;padding:14px 26px;box-shadow:0 10px 20px #000;touch-action:none;user-select:none}
.stick{width:96px;height:96px;border-radius:50%;background:radial-gradient(#111,#2a2a2a);border:2px solid #444;position:relative;touch-action:none}
.knob{position:absolute;width:44px;height:44px;left:26px;top:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f66,#900);box-shadow:0 4px 8px #000}
.btns{display:grid;grid-template-columns:repeat(4,44px);gap:10px}
.vb{width:44px;height:44px;border-radius:50%;border:none;font-family:Orbitron;font-weight:900;color:#fff;cursor:pointer;background:radial-gradient(circle at 35% 30%,#888,#222);box-shadow:0 4px 0 #000;touch-action:none}
.vb:active,.vb.dn{transform:translateY(3px);box-shadow:0 1px 0 #000}
.help{font-size:11px;color:#a98;margin-top:8px;text-align:center}
.drawer{position:fixed;top:0;right:0;height:100%;width:300px;background:#080808ee;border-left:2px solid var(--cyan);transform:translateX(105%);transition:transform .35s;padding:16px;z-index:10}
.drawer.open{transform:none}
.drawer-head{font-family:Orbitron;font-weight:900;color:var(--cyan);display:flex;justify-content:space-between;align-items:center}
.tabs{display:flex;gap:6px;margin:12px 0}
.tabs button{flex:1;font-family:Orbitron;font-size:10px;background:#111;color:#aaa;border:1px solid #333;padding:6px;cursor:pointer}
.tabs button.act{color:#000;background:var(--cyan)}
#lbList{color:#dff;font-size:15px;line-height:1.8;padding-left:28px;text-shadow:0 0 6px #7ff}
#auth-status{font-size:11px;color:#888;margin-top:10px}
#auth-status a{color:var(--cyan)}
footer{text-align:center;font-size:11px;color:#865;padding:10px 0 20px}
footer a{color:#fb7}
@media (max-width:760px){.desk{flex-direction:column-reverse;align-items:center;padding-top:8px}
#shelf{flex-direction:row;width:94vw;overflow-x:auto;margin-top:0}.shelf-title{display:none}.cart{min-width:120px}.logo{font-size:22px}}