:root{--navy:#0d0b24;--lav:#b8b4d8;--pur:#4f43ae;--grey:#cfcbdc;--dark:#8a86a0;--berry:#e8364f}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 30% 0%,#22205a,var(--navy) 60%);color:#e8e6f5;font-family:'IBM Plex Mono',monospace}
body.berry{--pur:#e8364f;--lav:#ffb3c1;--grey:#ffd6de}
.scan{pointer-events:none;position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0 1px,transparent 1px 3px);z-index:50}
header{display:flex;align-items:center;justify-content:center;gap:16px;padding:22px}
h1{font-family:'Press Start 2P';font-size:clamp(14px,3vw,28px);color:var(--lav);margin:0;text-shadow:3px 3px 0 var(--pur)}
h1 span{color:var(--berry)}
.led{width:12px;height:12px;border-radius:50%;background:#400}
.led.on{background:#f22;box-shadow:0 0 12px #f22}
main{display:flex;gap:20px;padding:0 16px 20px;max-width:1300px;margin:auto;flex-wrap:wrap}
.console{flex:1 1 640px;background:linear-gradient(#dcd8e8,var(--grey));border-radius:28px;padding:18px;box-shadow:0 10px 0 var(--dark),0 20px 40px #0008;color:#333}
.slot{position:relative;height:54px;border-radius:10px;background:#555;border:3px dashed #777;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:'Press Start 2P';font-size:9px;color:#ccc;margin:0 auto 14px;max-width:420px;overflow:hidden;transition:.2s}
.slot.over{border-color:var(--berry);background:#633}
.cart{position:absolute;top:-60px;width:120px;height:50px;background:#888;border-radius:6px 6px 0 0}
.cart.in{animation:kachunk .6s ease-out}
@keyframes kachunk{0%{top:-60px}70%{top:8px}85%{top:2px}100%{top:-60px}}
.screen-wrap{position:relative;background:#000;border-radius:12px;aspect-ratio:256/224;max-height:70vh;margin:auto;border:8px solid #333;overflow:hidden}
#screen{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.screen-wrap:fullscreen{border:none;border-radius:0;max-height:none;display:flex;align-items:center;justify-content:center}
.screen-wrap:fullscreen #screen{width:auto;height:100vh;aspect-ratio:256/224}
.bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center}
.stat{font-size:11px;text-align:center;color:#55516a;margin-top:8px;font-weight:700}
.touch{display:none;justify-content:space-between;align-items:center;margin-top:14px;user-select:none;touch-action:none}
@media (pointer:coarse){.touch{display:flex}}
.touch b{display:flex;align-items:center;justify-content:center;font-family:'Press Start 2P';font-size:9px;cursor:pointer}
.dpad{position:relative;width:120px;height:120px}
.dpad b{position:absolute;width:40px;height:40px;background:#333;color:#aaa;border-radius:6px}
.dpad .u{left:40px;top:0}.dpad .d{left:40px;bottom:0}.dpad .l{left:0;top:40px}.dpad .r{right:0;top:40px}
.mid{display:flex;flex-direction:column;gap:6px}
.mid b{background:#777;color:#fff;padding:8px 10px;border-radius:12px}
.abxy{position:relative;width:130px;height:130px}
.abxy b{position:absolute;width:44px;height:44px;border-radius:50%}
.bx{left:43px;top:0}.bb{left:43px;bottom:0}.by{left:0;top:43px}.ba{right:0;top:43px}
.touch b.on{filter:brightness(1.6);transform:scale(.92)}
.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Press Start 2P';font-size:14px;color:#fff;line-height:2;z-index:2}
.empty small{font-size:9px;color:var(--lav)}
.empty p{position:relative;background:#0009;padding:16px}
.static{position:absolute;inset:-50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");animation:st .3s steps(4) infinite}
@keyframes st{0%{transform:translate(0)}25%{transform:translate(-5%,3%)}50%{transform:translate(4%,-2%)}75%{transform:translate(-2%,-4%)}}
.buttons{display:flex;gap:12px;align-items:center;margin-top:14px}
.pbtn{font-family:'Press Start 2P';font-size:9px;padding:10px 16px;border:none;border-radius:8px;background:#9a96ad;color:#fff;box-shadow:0 4px 0 #66627a;cursor:pointer}
.pbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #66627a}
.logo-dots{margin-left:auto;display:flex;gap:5px}
.logo-dots i{width:14px;height:14px;border-radius:50%}
.r,.ca{background:#d22;color:#fff}.y,.cb{background:#ec2;color:#000}.b,.cx{background:#23c;color:#fff}.g,.cy{background:#2a4;color:#fff}
aside{flex:1 1 280px;display:flex;flex-direction:column;gap:16px}
aside>div{background:#1a1840;border:2px solid var(--pur);border-radius:12px;padding:14px}
h2{font-family:'Press Start 2P';font-size:10px;color:var(--lav);margin:0 0 12px}
dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:13px}
dt{color:var(--dark);font-weight:700}dd{margin:0;word-break:break-all}
.warn{color:#fc6;font-size:12px}
table{width:100%;font-size:12px;border-collapse:collapse}
td{padding:3px 6px}td:first-child{border-radius:6px;font-weight:700;text-align:center;width:45%}
.hint{font-size:11px;color:var(--lav);font-weight:300}
#recent{display:flex;flex-direction:column;gap:6px}
.spine{background:#888;color:#111;padding:6px 10px;border-radius:4px;font-size:11px;border-left:8px solid var(--pur)}
.spine small{display:block;color:#333}
.trow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0;font-size:11px}
.trow input{width:56px;background:#1a1840;color:#fff;border:1px solid var(--pur);padding:3px;font-family:inherit}
.tgrid{display:flex;flex-wrap:wrap;gap:2px;max-height:180px;overflow:auto}
.tgrid i{font-style:normal;font-size:9px;padding:2px 3px;border-radius:3px;background:#444;color:#111}
.tgrid i.ok{background:#5c5}.tgrid i.bad{background:var(--berry);color:#fff}.tgrid i.run{background:#fc6}.tgrid i.na{background:#777}
.tlog{font-size:10px;max-height:160px;overflow:auto;white-space:pre-wrap;color:#fc9;margin:6px 0 0}
#toast{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:var(--pur);padding:10px 18px;border-radius:8px;font-family:'Press Start 2P';font-size:10px;opacity:0;transition:.3s;z-index:60;max-width:90vw;text-align:center;line-height:1.6}
#toast.show{opacity:1}
footer{text-align:center;font-size:11px;padding:20px;color:var(--dark)}
footer a{color:var(--berry)}