:root{
  --bg:#1e1f22; --body:#3a3b3f; --body2:#2e2f33; --bezel:#24252a;
  --ink:#c9cbd1; --dim:#7d8089; --mag:#a4234f; --green:#9bbc0f; --dgreen:#306230;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:'Press Start 2P',monospace;}
body{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 50% 30%,#2c2d32 0%,#17181a 70%);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  overscroll-behavior:none;
}
.topbar{width:100%;display:flex;justify-content:center;padding:10px;position:relative;z-index:20}
#menuBtn{display:none}
#toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;animation:drop .5s ease both}
.grp{display:flex;gap:4px;align-items:center;background:#141518;padding:4px;border-radius:8px;border:1px solid #2b2c31}
.tb,.seg button{font-family:inherit;font-size:9px;color:var(--ink);background:#2a2b30;border:1px solid #3c3d43;border-radius:5px;padding:8px 9px;cursor:pointer}
.tb:hover,.seg button:hover{background:#34353b}
.tb.hot{background:var(--dgreen);color:#e0f8a0;border-color:#4a7a2a}
.seg button.on{background:var(--green);color:#0f380f;border-color:var(--green)}
select.tb{max-width:170px}
#thumb{width:32px;height:29px;image-rendering:pixelated;border-radius:2px;background:#0f380f;display:block}
#thumb[src=""]{visibility:hidden}
input[type=range]{accent-color:var(--green);width:90px}
main{display:flex;flex-direction:column;align-items:center;padding:6px 12px 20px;flex:1}

.gb{
  position:relative;padding:18px 22px 30px;margin-top:6px;
  background:linear-gradient(160deg,#4a4b50 0%,var(--body) 35%,var(--body2) 100%);
  border-radius:14px 14px 70px 14px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.08),inset -4px -6px 12px rgba(0,0,0,.45),0 25px 50px rgba(0,0,0,.6),0 0 0 1px #1a1b1e;
  user-select:none;-webkit-user-select:none;animation:rise .7s cubic-bezier(.2,.9,.3,1.2) both;
}
.gb-top{border-bottom:2px solid #2a2b2f;margin:-8px -10px 14px;padding:0 10px 6px;font-size:7px;color:var(--dim)}
.bezel{background:var(--bezel);border-radius:10px 10px 40px 10px;padding:10px 14px 20px;box-shadow:inset 0 2px 6px rgba(0,0,0,.7)}
.bezel-label{font-size:6px;color:#8a8d96;display:flex;align-items:center;gap:6px;margin-bottom:9px;white-space:nowrap;overflow:hidden}
.bezel-label i{flex:1;height:2px;background:linear-gradient(#a4234f 0 50%,#35356e 50%);min-width:10px}
.bezel-inner{display:flex;align-items:center;gap:12px}
.led-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:5px;color:var(--dim)}
#led{width:9px;height:9px;border-radius:50%;background:#3a1015;box-shadow:inset 0 1px 2px #000}
#led.on{background:#ff2a3a;box-shadow:0 0 8px #ff2a3a,0 0 2px #fff inset;animation:pulse 2s infinite}
#screenWrap{position:relative;background:#0f380f;padding:3px;border-radius:2px;box-shadow:inset 0 0 0 2px #0a0a0a}
#canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;max-width:calc(100vw - 110px);height:auto;cursor:pointer}
#dropHint{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:9px;color:#0f380f;background:rgba(155,188,15,.85);border:3px dashed #0f380f}
#screenWrap.drag #dropHint{display:flex}
.brand{font-family:'Archivo Black',sans-serif;font-style:italic;transform:skewX(-8deg);color:#5d64a8;font-size:20px;margin:12px 0 4px 4px;letter-spacing:.5px;text-shadow:0 1px 0 #000}
.brand sup{font-family:'Press Start 2P';font-size:6px;color:var(--dim);margin-left:4px}

.controls{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:20px}
#dpad{position:relative;width:120px;height:120px;touch-action:none;flex-shrink:0}
.dp{position:absolute;background:#18191b;box-shadow:inset 0 2px 0 #3a3b40,0 3px 0 #0b0b0c}
.dp.up,.dp.down{left:40px;width:40px;height:42px}
.dp.left,.dp.right{top:40px;width:42px;height:40px}
.dp.up{top:0;border-radius:5px 5px 0 0}.dp.down{bottom:0;border-radius:0 0 5px 5px}
.dp.left{left:0;border-radius:5px 0 0 5px}.dp.right{right:0;border-radius:0 5px 5px 0}
.dp.mid{left:40px;top:40px;width:40px;height:40px;box-shadow:none;background:radial-gradient(circle,#101112 30%,#18191b 32%)}
.dp.on{background:#0d0e0f;box-shadow:inset 0 2px 4px #000;filter:drop-shadow(0 0 4px rgba(155,188,15,.5))}
.ab{display:flex;gap:18px;transform:rotate(-25deg);padding-top:20px}
.bw{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:9px;color:#5d64a8}
.bA{margin-top:-30px}
.round{width:60px;height:60px;border-radius:50%;border:none;background:radial-gradient(circle at 35% 30%,#c23a68,var(--mag) 55%,#6e1534);box-shadow:0 4px 0 #4a0d22,0 6px 10px rgba(0,0,0,.5);cursor:pointer;touch-action:none}
.round.on{transform:translateY(3px);box-shadow:0 1px 0 #4a0d22,0 2px 4px rgba(0,0,0,.5);filter:brightness(.8)}
.ss{display:flex;gap:22px;justify-content:center;margin:28px 0 8px;transform:translateX(-30px)}
.sw{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:7px;color:#5d64a8;transform:rotate(-25deg)}
.pill{width:52px;height:14px;border-radius:8px;border:none;background:#6f717a;box-shadow:0 3px 0 #2a2b2f,inset 0 1px 0 #9a9ca5;cursor:pointer;touch-action:none}
.pill.on{transform:translateY(2px);box-shadow:0 1px 0 #2a2b2f;filter:brightness(.8)}
.speaker{position:absolute;right:28px;bottom:26px;display:flex;gap:6px;transform:rotate(-30deg)}
.speaker i{display:block;width:6px;height:46px;border-radius:3px;background:#1b1c1f;box-shadow:inset 0 2px 3px #000}
.speaker.live i{animation:buzz .18s infinite alternate}
.speaker.live i:nth-child(2n){animation-delay:.09s}

#info{margin-top:18px;text-align:center;font-size:8px;color:var(--dim);line-height:2}
#info b{color:var(--green)}
.keys{font-size:7px;opacity:.75}
#toast{position:fixed;top:-120px;left:50%;transform:translateX(-50%);max-width:92vw;padding:14px 16px;font-size:9px;line-height:1.7;background:#0f380f;color:#9bbc0f;border:3px solid #9bbc0f;box-shadow:0 0 0 3px #0f380f,0 10px 30px #000;transition:top .35s cubic-bezier(.2,.9,.3,1.3);z-index:99}
#toast.show{top:16px}
#toast.err{background:#2a0a10;color:#ffb3c0;border-color:#ff4a62;box-shadow:0 0 0 3px #2a0a10,0 10px 30px #000}
footer{font-size:7px;color:var(--dim);padding:14px;text-align:center}
footer a{color:var(--green)}

@keyframes rise{from{opacity:0;transform:translateY(40px) scale(.96)}}
@keyframes drop{from{opacity:0;transform:translateY(-20px)}}
@keyframes pulse{50%{box-shadow:0 0 14px #ff2a3a,0 0 2px #fff inset}}
@keyframes buzz{to{transform:translateX(1px)}}

@media (max-width:700px){
  #menuBtn{display:block}
  #toolbar{display:none;position:absolute;top:52px;left:8px;right:8px;flex-direction:column;align-items:stretch;background:#121315;border:2px solid #34353b;border-radius:10px;padding:10px}
  #toolbar.open{display:flex}
  .grp{justify-content:center}
  .gb{padding:14px 14px 26px;width:100%;max-width:420px}
  .controls{gap:6px}
  #dpad{width:132px;height:132px}
  .dp.up,.dp.down{left:44px;width:44px;height:46px}
  .dp.left,.dp.right{top:44px;width:46px;height:44px}
  .dp.mid{left:44px;top:44px;width:44px;height:44px}
  .round{width:62px;height:62px}
  .pill{width:58px;height:18px}
  .speaker{right:18px;bottom:20px}
  .speaker i{height:36px}
  .keys{display:none}
}