:root{
  --plum:#1a0f1f; --plum2:#2a1733; --plum3:#3b2147;
  --pink:#ff3d7f; --teal:#2de2c9; --cream:#f7e7f0; --dim:#9a7fa6;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--plum);color:var(--cream);font-family:'IBM Plex Mono',monospace;font-size:13px}
body{
  background:
    radial-gradient(1200px 600px at 20% -10%, #3d1840 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 100%, #0f3a3a 0%, transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,61,127,.03) 22px 23px),
    var(--plum);
  min-height:100vh;
}
.top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 22px;border-bottom:2px solid var(--plum3)}
.logo{font-family:'Press Start 2P';font-size:20px;color:var(--pink);text-shadow:3px 3px 0 #000,0 0 18px rgba(255,61,127,.5);display:flex;align-items:center;gap:12px}
.logo em{color:var(--teal);font-style:normal}
.led{width:12px;height:12px;border-radius:50%;background:#3a1a22;box-shadow:inset 0 0 3px #000}
.led.on{background:#ff4060;box-shadow:0 0 10px #ff3d7f,0 0 22px #ff3d7f}
.tag{color:var(--dim);font-style:italic;font-weight:300}
#auth-status{margin-left:auto;color:var(--dim);font-size:11px}
#auth-status a{color:var(--teal)}

.layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;padding:18px 22px}
@media (max-width:980px){.layout{grid-template-columns:1fr}}
.left{display:flex;flex-direction:column;gap:12px;align-items:center}

.bezel{position:relative;padding:28px 30px 44px;border-radius:22px 22px 60px 22px;
  background:linear-gradient(160deg,#c06aa8,#7d3b86 55%,#4e2160);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.3),0 18px 40px rgba(0,0,0,.55);
  transition:background .6s, box-shadow .6s;max-width:100%}
.bezel.blush{background:linear-gradient(160deg,#ff9cc0,#ff4f86 55%,#c0205a);box-shadow:0 0 50px #ff3d7f,inset 0 2px 0 rgba(255,255,255,.5)}
.bezel.drag{outline:3px dashed var(--teal);outline-offset:6px}
.screw{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(#d9c0e0,#6b4a78);box-shadow:inset 0 0 2px #000}
.screw::after{content:'';position:absolute;left:1px;right:1px;top:4px;height:2px;background:#4a2f55;transform:rotate(35deg)}
.s1{top:10px;left:10px}.s2{top:10px;right:10px}.s3{bottom:10px;left:10px}.s4{bottom:10px;right:10px}
.screenwrap{position:relative;background:#000;border-radius:6px;padding:6px;box-shadow:inset 0 0 0 4px #120a16,inset 0 0 30px #000;overflow:hidden}
#canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.screenwrap.scan::after{content:'';position:absolute;inset:6px;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.screenwrap.curve{border-radius:28px/22px}
.screenwrap.curve #canvas{border-radius:22px/16px}
.screenwrap.curve::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;box-shadow:inset 0 0 60px 10px rgba(0,0,0,.75);border-radius:28px/22px}
.screenwrap.bloom #canvas{filter:saturate(1.15) contrast(1.05) drop-shadow(0 0 6px rgba(255,90,160,.35))}
.dropmsg{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-family:'Press Start 2P';font-size:11px;color:var(--teal);background:rgba(26,15,31,.85);z-index:3}
.bezel.drag .dropmsg{display:flex}
.sticker{position:absolute;right:26px;bottom:8px;background:var(--teal);color:#0d2b28;font-family:'Press Start 2P';font-size:7px;padding:4px 6px;transform:rotate(-4deg);border-radius:3px;line-height:1.5;text-align:center}
.brand{position:absolute;left:30px;bottom:14px;font-family:'Press Start 2P';font-size:7px;color:rgba(255,255,255,.55);letter-spacing:1px}

.readout{font-size:11px;color:var(--teal);letter-spacing:.5px}
.controls{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
button,.btnlike,select,input{font-family:'IBM Plex Mono',monospace}
button,.btnlike{background:linear-gradient(#3b2147,#2a1733);color:var(--cream);border:1px solid #5a3366;border-bottom-width:3px;border-radius:6px;padding:6px 10px;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.5px}
button:hover,.btnlike:hover{border-color:var(--pink);color:#fff}
button:active{transform:translateY(1px);border-bottom-width:2px}
button.hot{background:linear-gradient(#ff3d7f,#c0205a);border-color:#ff8ab0;color:#fff}
.spd{display:flex;gap:6px;align-items:center;font-size:11px;font-weight:700}
.spd input{accent-color:var(--pink);width:90px}
.grp{display:flex;gap:6px;align-items:center;padding:3px 6px;border:1px dashed #4a2d55;border-radius:6px;font-size:11px}
select,input[type=text],#memAddr,#hbName{background:#120a16;color:var(--teal);border:1px solid #4a2d55;border-radius:4px;padding:4px}
input[type=checkbox]{accent-color:var(--teal)}

.shelf{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding-top:6px}
.cart{width:112px;height:96px;position:relative;cursor:pointer;border-radius:8px 8px 3px 3px;padding:10px 8px;
  background:linear-gradient(#5c4a66,#3a2c44);box-shadow:0 6px 0 #1f1626,0 10px 18px rgba(0,0,0,.5);transition:transform .15s}
.cart:hover{transform:translateY(-6px) rotate(-1.5deg)}
.cart.on{outline:2px solid var(--teal);outline-offset:3px}
.cart .lbl{height:56px;border-radius:4px;padding:6px;font-family:'Press Start 2P';font-size:7px;line-height:1.6;color:#fff;text-shadow:1px 1px 0 #000}
.cart .ridge{position:absolute;left:8px;right:8px;bottom:8px;height:10px;background:repeating-linear-gradient(90deg,#2a1f32 0 4px,#4a3a55 4px 8px);border-radius:2px}

.right{background:linear-gradient(#24142c,#1c1022);border:1px solid #4a2d55;border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 30px rgba(45,226,201,.06);overflow:hidden;min-width:0}
.tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid #4a2d55;background:#160c1b}
.tabs button{border:none;border-radius:0;background:transparent;padding:10px 12px;color:var(--dim);font-family:'Press Start 2P';font-size:8px}
.tabs button.on{color:var(--pink);background:#24142c;box-shadow:inset 0 -3px 0 var(--pink)}
.panel{padding:12px;max-height:78vh;overflow:auto}
.hide{display:none}
h4{font-family:'Press Start 2P';font-size:8px;color:var(--teal);margin:12px 0 6px;font-weight:400}
pre{margin:0;font-size:12px;line-height:1.45}
.regs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px}
.reg{background:#120a16;border:1px solid #3b2147;border-radius:4px;padding:4px 6px}
.reg b{color:var(--pink);font-weight:700;margin-right:6px}
.flags span{display:inline-block;padding:2px 6px;margin-right:3px;border-radius:3px;background:#120a16;color:#5a4466}
.flags span.on{background:var(--teal);color:#0d2b28;font-weight:700}
.dis{font-size:12px;line-height:1.55}
.dis div{padding:0 6px;cursor:pointer;white-space:pre;border-left:3px solid transparent}
.dis div:hover{background:#2e1a38}
.dis div.cur{background:rgba(255,61,127,.22);border-left-color:var(--pink)}
.dis div.bp{border-left-color:#ff4040}
.dis div.bp::before{content:'●';color:#ff4040;margin-right:4px}
.dis .lab{color:var(--teal)}
.dis .ad{color:var(--dim)}
.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
#memView .w{color:var(--cream)} #memView .z{color:#5a4466} #memView .f{background:var(--pink);color:#fff}
#memView .a{color:var(--teal)}
.vgrid{display:flex;gap:12px;flex-wrap:wrap}
#tilesCv{width:256px;image-rendering:pixelated;background:#000;border:1px solid #3b2147}
#mapCv{width:192px;image-rendering:pixelated;background:#000;border:1px solid #3b2147}
.palv{display:grid;grid-template-columns:repeat(16,1fr);gap:2px;max-width:420px}
.palv i{display:block;aspect-ratio:1;border-radius:2px}
#scopes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.scope{background:#0b0610;border:1px solid #3b2147;border-radius:6px;padding:4px}
.scope canvas{width:100%;height:46px;display:block}
.scope .sh{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--dim)}
.scope button{padding:2px 5px;font-size:9px}
.scope button.m{background:#5a2030}.scope button.s{background:#1f5a50}
.vu{height:12px;background:#0b0610;border:1px solid #3b2147;border-radius:6px;overflow:hidden}
#vubar{height:100%;width:0;background:linear-gradient(90deg,var(--teal),#ffe27a,var(--pink))}
#src{width:100%;height:46vh;background:#0e0712;color:#f3d9e8;border:1px solid #4a2d55;border-radius:8px;padding:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.45;resize:vertical;tab-size:8}
.msg{margin-top:6px;font-size:12px;min-height:18px;white-space:pre-wrap}
.msg.err{color:#ff7a9c}.msg.ok{color:var(--teal)}
.hb div{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;border-bottom:1px dashed #3b2147}
.doc p,.doc li{color:#e7d3e0;line-height:1.55}
.doc code{color:var(--teal)}
.berry{display:grid;grid-template-columns:repeat(16,1fr);gap:1px;max-width:440px;margin:6px 0}
.berry i{aspect-ratio:1;display:block;cursor:pointer}
.berry i:hover{outline:2px solid #fff;z-index:1}
.foot{text-align:center;padding:18px;color:var(--dim);font-size:11px;border-top:1px solid var(--plum3)}
.foot a{color:var(--pink)}

.pad{display:none;width:100%;max-width:520px;justify-content:space-between;align-items:center;padding:8px;user-select:none;touch-action:none}
@media (max-width:980px),(pointer:coarse){.pad{display:flex}}
.dpad{position:relative;width:120px;height:120px}
.dpad button{position:absolute;width:40px;height:40px;padding:0;font-size:14px}
.dpad .u{left:40px;top:0}.dpad .d{left:40px;bottom:0}.dpad .l{left:0;top:40px}.dpad .r{right:0;top:40px}
.ab{display:flex;gap:10px}
.ab button{width:56px;height:56px;border-radius:50%;font-family:'Press Start 2P';font-size:12px;background:linear-gradient(#ff3d7f,#a01848)}
.pad .st{font-size:9px}