:root{--zig:#F7A41D;--bg:#16141a;--beige:#e8dcc2;--beige2:#cbbd9f;--ink:#2a2622;--green:#5bf58a;--red:#ff4d4d}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 30% 0%,#2a2430,var(--bg) 60%);color:#eee;font-family:'JetBrains Mono',monospace;min-height:100vh}
header{text-align:center;padding:22px 12px 8px}
.logo{font-family:'Press Start 2P';font-size:clamp(18px,4vw,32px);color:var(--zig);text-shadow:0 0 14px #f7a41d88;display:inline-flex;align-items:center;gap:12px}
.bolt{filter:drop-shadow(0 0 8px var(--zig))}
.tag{font-size:12px;color:#bbb;margin:10px 0 0}
.led{width:12px;height:12px;border-radius:50%;display:inline-block;background:#666;box-shadow:inset 0 -2px 2px #0006}
.led.loading{background:#ffb000;animation:blink .4s infinite}
.led.running{background:var(--green);box-shadow:0 0 10px var(--green)}
.led.crashed{background:var(--red);box-shadow:0 0 10px var(--red)}
@keyframes blink{50%{opacity:.2}}
main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;max-width:1150px;margin:0 auto;padding:14px}
@media(max-width:860px){main{grid-template-columns:1fr}}
.console{background:linear-gradient(var(--beige),var(--beige2));border-radius:18px;padding:18px;box-shadow:0 14px 0 #8f8470,0 30px 50px #0008}
.bezel{position:relative;background:#111;border-radius:22px;padding:18px;box-shadow:inset 0 0 0 4px #333,inset 0 0 30px #000}
#canvas{width:100%;aspect-ratio:400/280;image-rendering:pixelated;display:block;border-radius:14px;background:#000;animation:flick 3s infinite}
@keyframes flick{50%{filter:brightness(1.04)}}
.scan{position:absolute;inset:18px;border-radius:14px;pointer-events:none;background:repeating-linear-gradient(0deg,#0004 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,#000a)}
.scan.off{display:none}
.bezel:fullscreen{display:flex;align-items:center;justify-content:center}
.bezel:fullscreen #canvas{width:auto;height:90vh}
.body{margin-top:16px}
.slot{position:relative;overflow:hidden;background:#3a352e;color:var(--beige);font-family:'Press Start 2P';font-size:10px;text-align:center;padding:20px 10px;border-radius:8px;border:3px dashed #6b6255;cursor:pointer;transition:.2s}
.slot.over{border-color:var(--zig);background:#4a3a20;color:var(--zig)}
.cart{position:absolute;left:50%;top:-60px;transform:translateX(-50%);width:120px;height:44px;background:var(--zig);color:#222;border-radius:6px 6px 0 0;display:flex;align-items:center;justify-content:center;font-size:9px;opacity:0}
.cart.go{animation:insert .7s ease-in forwards}
@keyframes insert{0%{top:-60px;opacity:1}80%{top:8px;opacity:1}100%{top:30px;opacity:0}}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
button{font-family:'Press Start 2P';font-size:9px;background:#4b453d;color:var(--beige);border:none;border-radius:6px;padding:10px 10px;box-shadow:0 4px 0 #221f1b;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button:active,button.on{transform:translateY(3px);box-shadow:0 1px 0 #221f1b}
button.hot{background:var(--zig);color:#222}
.pad{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dpad{display:grid;grid-template:repeat(3,40px)/repeat(3,40px)}
.dpad .u{grid-area:1/2}.dpad .l{grid-area:2/1}.dpad .r{grid-area:2/3}.dpad .d{grid-area:3/2}
.dpad button{background:#2a2622;padding:0}
.ss{display:flex;gap:6px}.ss button{font-size:7px;border-radius:20px}
.ab{display:flex;gap:10px}
.round{width:50px;height:50px;border-radius:50%;background:#a3243b;font-size:12px}
.panel{background:#1f1c22;border:2px solid #333;border-radius:12px;padding:14px;font-size:12px;min-width:0}
.panel h2,.panel h3,.shelf h3{font-family:'Press Start 2P';color:var(--zig);font-size:11px;margin:14px 0 8px}
.panel h2{margin-top:0}
dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0}
dt{color:#888}dd{margin:0;word-break:break-all}
.hex{background:#000;padding:8px;border-radius:6px;font-size:11px;white-space:pre-wrap;color:#9c9}
.hex b{color:var(--zig);background:#f7a41d22}
.list{list-style:none;padding:0;margin:0;max-height:120px;overflow:auto}
.list li{padding:2px 0;border-bottom:1px dotted #333}
.list li span{color:#888}
.log{background:#000;color:var(--green);height:150px;overflow:auto;padding:8px;border-radius:6px;font-size:11px;white-space:pre-wrap;margin:0}
.log .e{color:var(--red)}
.shelf{max-width:1150px;margin:0 auto;padding:0 14px}
.carts{display:flex;gap:12px;flex-wrap:wrap}
.carts .c{width:110px;height:80px;border-radius:8px 8px 2px 2px;padding:8px;font-size:9px;font-family:'Press Start 2P';color:#111;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 5px 0 #0007;word-break:break-all;transition:transform .15s}
.carts .c:hover{transform:translateY(-4px) rotate(-2deg)}
.carts .empty{color:#777;font-size:12px}
footer{text-align:center;padding:30px;color:#888;font-size:12px}
footer a{color:var(--zig)}