:root{
  --bg:#110c1d; --ink:#e9e4ff; --dim:#8f86b8;
  --shell:#4a3aa8; --shell2:#3a2c8a; --shell3:#2a1f66;
  --teal:#2ee6c5; --pink:#ff4f7b; --screen:#0b0f0e;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:
  radial-gradient(1200px 600px at 50% -10%,#2b1d5c 0%,transparent 60%),
  repeating-linear-gradient(45deg,#140e22 0 14px,#120c1f 14px 28px);
  color:var(--ink);font-family:'IBM Plex Mono',monospace;min-height:100vh}
.scan{pointer-events:none;position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);z-index:50;mix-blend-mode:multiply}
header{text-align:center;padding:22px 12px 6px;animation:drop .7s ease-out}
h1{font-family:'Silkscreen',monospace;font-weight:700;font-size:clamp(26px,6vw,54px);margin:0;letter-spacing:2px;
  text-shadow:3px 3px 0 var(--shell3),6px 6px 0 #000}
h1 span{color:var(--teal)}
.tag{color:var(--dim);font-weight:300;margin:8px 0 0;font-size:13px}
main{max-width:980px;margin:0 auto;padding:10px 12px 30px}
@keyframes drop{from{transform:translateY(-20px);opacity:0}to{transform:none;opacity:1}}

.device{position:relative;margin:26px auto 14px;background:linear-gradient(160deg,var(--shell) 0%,var(--shell2) 60%,var(--shell3) 100%);
  border-radius:60px 60px 90px 90px/50px 50px 70px 70px;padding:28px 22px 22px;
  display:grid;grid-template-columns:150px 1fr 150px;grid-template-areas:"dpad screen ab" "ss ss ss";align-items:center;gap:10px;
  box-shadow:inset 0 4px 0 rgba(255,255,255,.18),inset 0 -8px 0 rgba(0,0,0,.25),0 20px 40px rgba(0,0,0,.55);animation:drop .9s ease-out .1s both}
.screenwrap{grid-area:screen}
.bezel{background:#2b2b3a;border-radius:14px 14px 40px 14px;padding:12px 18px 10px;box-shadow:inset 0 0 0 3px #1b1b26}
.ledrow{display:flex;gap:6px;align-items:center;font-size:8px;color:#9a9ab0;font-family:'Silkscreen';margin-bottom:6px}
.led{width:9px;height:9px;border-radius:50%;background:#3a1010;box-shadow:inset 0 0 2px #000}
.led.on{background:#3dff7a;box-shadow:0 0 10px #3dff7a}
canvas{display:block;width:100%;aspect-ratio:3/2;image-rendering:pixelated;image-rendering:crisp-edges;background:var(--screen);border-radius:3px}
.brand{font-family:'Silkscreen';font-size:10px;color:#b9b9d6;margin-top:6px;letter-spacing:1px}
.brand i{color:var(--teal);font-style:normal}
button{font-family:'Silkscreen',monospace;cursor:pointer;user-select:none;touch-action:none}
.dpad{grid-area:dpad;position:relative;width:126px;height:126px;margin:auto}
.d{position:absolute;width:42px;height:42px;background:#1c1830;border:none;box-shadow:0 4px 0 #0b0916}
.d.up{left:42px;top:0;border-radius:6px 6px 0 0}.d.down{left:42px;top:84px;border-radius:0 0 6px 6px}
.d.left{left:0;top:42px;border-radius:6px 0 0 6px}.d.right{left:84px;top:42px;border-radius:0 6px 6px 0}
.d.mid{left:42px;top:42px;box-shadow:none}
.d.on,.d:active{transform:translateY(3px);box-shadow:0 1px 0 #0b0916;background:#2a2446}
.ab{grid-area:ab;position:relative;height:130px}
.btn{position:absolute;width:58px;height:58px;border-radius:50%;border:none;background:radial-gradient(circle at 35% 30%,#ff8fa9,var(--pink) 55%,#b3264c);
  color:#fff;font-size:16px;box-shadow:0 5px 0 #6d1530,0 8px 14px rgba(0,0,0,.4)}
.bA{right:6px;top:10px}.bB{right:72px;top:52px}
.btn.on,.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #6d1530}
.ss{grid-area:ss;display:flex;justify-content:center;gap:26px}
.pill{background:#1c1830;color:#b9b0e8;border:none;border-radius:20px;padding:7px 16px;font-size:10px;box-shadow:0 3px 0 #0b0916;transform:rotate(-14deg)}
.pill.on,.pill:active{transform:rotate(-14deg) translateY(2px);box-shadow:none}
.shoulder{position:absolute;top:-14px;width:120px;height:30px;background:var(--shell3);color:#c9c0ff;border:none;font-size:13px;box-shadow:0 -3px 0 rgba(255,255,255,.12) inset}
.sl{left:30px;border-radius:30px 12px 0 0}.sr{right:30px;border-radius:12px 30px 0 0}
.shoulder.on,.shoulder:active{top:-10px}

.drop{display:block;text-align:center;border:3px dashed #5b4bc4;border-radius:16px;padding:18px;margin:10px auto;max-width:560px;cursor:pointer;
  background:rgba(46,230,197,.04);transition:.2s;animation:drop .9s ease-out .25s both}
.drop b{font-family:'Silkscreen';font-size:20px;color:var(--teal);display:block}
.drop small{color:var(--dim)}
.drop.over,.drop:hover{border-color:var(--teal);background:rgba(46,230,197,.1);transform:scale(1.02)}
.cartinfo{text-align:center;font-size:12px;color:var(--dim);margin-bottom:10px}
.cartinfo b{color:var(--teal)}
.toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;align-items:center;animation:drop .9s ease-out .35s both}
.toolbar button{background:#221a40;color:var(--ink);border:2px solid #3e3378;border-radius:10px;padding:8px 11px;font-size:11px;box-shadow:0 3px 0 #0d0a1a}
.toolbar button:active{transform:translateY(2px);box-shadow:none}
.toolbar button.act{border-color:var(--teal);color:var(--teal)}
input[type=range]{accent-color:var(--teal);width:90px}
.cheat{max-width:560px;margin:14px auto;background:#1a1430;border-radius:12px;padding:10px 14px;font-size:12px}
.cheat summary{cursor:pointer;font-family:'Silkscreen';color:var(--teal)}
.keys{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
kbd{background:#2e2557;border-radius:4px;padding:2px 6px;border-bottom:2px solid #000;font-family:inherit}
.debug{background:#0c0a14;border:2px solid #2f2660;border-radius:12px;padding:12px;margin-top:14px;font-size:12px}
.dbghead{display:flex;justify-content:space-between;font-family:'Silkscreen';color:var(--teal)}
#regs{white-space:pre-wrap;color:#c9f;margin:8px 0;line-height:1.5}
#log{list-style:none;padding:0;margin:0;max-height:160px;overflow:auto;color:#ff9db4}
#log li{border-top:1px dashed #2f2660;padding:3px 0}
footer{text-align:center;color:var(--dim);font-size:12px;padding:16px}
footer a{color:var(--teal)}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:#2ee6c5;color:#110c1d;padding:10px 16px;border-radius:10px;
  font-weight:600;transition:.3s;z-index:60;max-width:90vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}
.device:fullscreen{border-radius:0;display:flex;align-items:center;justify-content:center;background:#000}
.device:fullscreen>*:not(.screenwrap){display:none}
.device:fullscreen .screenwrap{width:min(100vw,150vh)}
@media (max-width:720px){
  .device{grid-template-columns:1fr 1fr;grid-template-areas:"screen screen" "dpad ab" "ss ss";padding:24px 12px 18px;border-radius:30px 30px 60px 60px}
  .shoulder{width:90px}.sl{left:14px}.sr{right:14px}
}