:root{
  --shell:#c9c8bf;
  --shell-dark:#a9a89f;
  --shell-line:#8f8e86;
  --screen-bezel:#4a4a52;
  --screen-inner:#2a2c30;
  --accent:#c62368;
  --accent2:#7a2b8a;
  --bg0:#1a1420;
  --bg1:#2a1f36;
  --text:#efe9f2;
  --panel:#211a2b;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'IBM Plex Mono',monospace;
  color:var(--text);
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(198,35,104,0.18), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(122,43,138,0.22), transparent 45%),
    linear-gradient(160deg,var(--bg0),var(--bg1));
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;
}

#app{max-width:1000px;margin:0 auto;padding:18px 14px 40px;}

#topbar{text-align:center;margin-bottom:18px;animation:drop .6s ease both;}
.brand{
  font-family:'VT323',monospace;
  font-size:clamp(38px,8vw,64px);
  letter-spacing:2px;
  line-height:1;
  color:#fff;
  text-shadow:0 0 18px rgba(198,35,104,0.7), 3px 3px 0 var(--accent2);
}
.tagline{
  font-size:13px;color:#c9b8d8;margin-top:6px;letter-spacing:.5px;
}

#stage{
  display:flex;gap:22px;align-items:flex-start;justify-content:center;flex-wrap:wrap;
}

/* ---- Handheld shell ---- */
.shell{
  width:340px;max-width:94vw;
  background:linear-gradient(150deg,var(--shell),var(--shell-dark));
  border-radius:18px 18px 42px 18px;
  padding:16px 16px 20px;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.5),
    inset 0 -6px 14px rgba(0,0,0,0.25),
    0 18px 40px rgba(0,0,0,0.5);
  border:1px solid var(--shell-line);
  animation:drop .7s ease both;
  animation-delay:.1s;
}
.shell-top-ridge{
  height:6px;margin:-4px 20px 8px;
  background:repeating-linear-gradient(90deg,var(--shell-line) 0 2px,transparent 2px 6px);
  border-radius:4px;opacity:.6;
}
.power-row{display:flex;align-items:center;gap:6px;margin:0 4px 8px;}
.power-dot{
  width:9px;height:9px;border-radius:50%;
  background:#7a2020;box-shadow:inset 0 0 3px #000;
}
.power-dot.on{background:#ff3355;box-shadow:0 0 8px #ff3355;}
.power-dot.paused{background:#ffcc33;box-shadow:0 0 8px #ffcc33;}
.power-label{font-size:9px;letter-spacing:2px;color:#6a6960;}

.screen-bezel{
  background:linear-gradient(160deg,#57555f,var(--screen-bezel));
  border-radius:10px 10px 24px 10px;
  padding:14px 22px 12px;
  box-shadow:inset 0 3px 8px rgba(0,0,0,0.5);
}
.bezel-label{
  text-align:center;font-size:8px;letter-spacing:2px;color:#c9c6d0;margin-bottom:6px;
}
.screen-frame{
  position:relative;
  background:var(--screen-inner);
  border-radius:4px;
  padding:6px;
  box-shadow:inset 0 0 14px rgba(0,0,0,0.7);
}
#canvas{
  display:block;width:100%;height:auto;
  image-rendering:pixelated;image-rendering:crisp-edges;
  border-radius:2px;
  aspect-ratio:160/144;
}
.fps{
  position:absolute;top:8px;right:8px;
  font-family:'VT323',monospace;font-size:16px;
  color:#8ef58e;text-shadow:0 0 4px #000;pointer-events:none;
}
.brand-stripe{
  display:flex;align-items:center;gap:4px;justify-content:center;margin-top:8px;
}
.stripe{width:5px;height:14px;border-radius:2px;}
.stripe.r{background:#c62368;} .stripe.y{background:#e0a020;} .stripe.b{background:#2b6ad0;}
.dmg-word{
  font-family:'VT323',monospace;font-size:15px;color:#3b3a42;letter-spacing:1px;margin-left:4px;
  font-style:italic;
}

/* ---- Controls ---- */
.pad-row{display:flex;justify-content:space-between;align-items:center;margin:20px 6px 6px;}
.dpad{
  display:grid;grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,32px);
}
.dbtn{
  border:none;background:#33323a;color:#8c8b93;font-size:12px;cursor:pointer;
  box-shadow:0 2px 0 #1a1a20;transition:transform .05s,box-shadow .05s;
}
.dbtn.up{grid-column:2;grid-row:1;border-radius:6px 6px 0 0;}
.dbtn.left{grid-column:1;grid-row:2;border-radius:6px 0 0 6px;}
.dbtn.mid{grid-column:2;grid-row:2;background:#2a2930;box-shadow:none;cursor:default;}
.dbtn.right{grid-column:3;grid-row:2;border-radius:0 6px 6px 0;}
.dbtn.down{grid-column:2;grid-row:3;border-radius:0 0 6px 6px;}
.dbtn.pressed,.dbtn:active{transform:translateY(2px);box-shadow:0 0 0 #1a1a20;color:#fff;}

.ab{display:flex;gap:16px;transform:rotate(-20deg);}
.rbtn{
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#e04a86,var(--accent));
  color:#fff;font-family:'VT323',monospace;font-size:22px;font-weight:bold;
  box-shadow:0 4px 0 #7a123f,inset 0 2px 4px rgba(255,255,255,0.3);
  transition:transform .05s,box-shadow .05s;
}
.rbtn.pressed,.rbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #7a123f;}

.startsel{display:flex;gap:22px;justify-content:center;margin-top:14px;}
.pill{
  border:none;background:#4a4952;color:#d0cfd8;cursor:pointer;
  padding:5px 16px;border-radius:12px;font-size:9px;letter-spacing:1px;
  transform:rotate(-20deg);
  box-shadow:0 3px 0 #26252c;transition:transform .05s,box-shadow .05s;
}
.pill.pressed,.pill:active{transform:rotate(-20deg) translateY(2px);box-shadow:0 1px 0 #26252c;color:#fff;}

/* ---- Side panel ---- */
.panel{
  width:320px;max-width:94vw;
  background:rgba(33,26,43,0.85);
  border:1px solid rgba(198,35,104,0.3);
  border-radius:14px;padding:16px;
  backdrop-filter:blur(6px);
  animation:drop .7s ease both;animation-delay:.2s;
}
.dropzone{
  border:2px dashed rgba(198,35,104,0.5);
  border-radius:10px;padding:22px 10px;text-align:center;cursor:pointer;
  transition:.15s;background:rgba(198,35,104,0.05);
}
.dropzone:hover,.dropzone.over{
  border-color:var(--accent);background:rgba(198,35,104,0.15);transform:scale(1.01);
}
.dz-icon{font-size:28px;}
.dz-title{font-weight:700;margin-top:6px;font-size:14px;}
.dz-sub{font-size:11px;color:#b8a8c8;margin-top:2px;}

.rom-info{
  margin-top:14px;background:rgba(0,0,0,0.3);border-radius:8px;padding:10px 12px;
  font-size:12px;min-height:40px;
}
.ri-empty{color:#8a7f98;font-style:italic;}
.ri-row{display:flex;justify-content:space-between;gap:8px;padding:2px 0;border-bottom:1px dotted rgba(255,255,255,0.08);}
.ri-row:last-child{border-bottom:none;}
.ri-k{color:#c68ab0;font-size:10px;letter-spacing:1px;}
.ri-v{color:#efe9f2;text-align:right;word-break:break-all;}

.ctrls{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap;}
.ctrl{
  flex:1;min-width:90px;border:none;cursor:pointer;
  background:linear-gradient(160deg,var(--accent),var(--accent2));
  color:#fff;padding:9px;border-radius:8px;font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:600;transition:.1s;
}
.ctrl:hover{filter:brightness(1.15);}
.ctrl:active{transform:translateY(1px);}

.sel-label{font-size:11px;color:#c68ab0;display:flex;flex-direction:column;gap:4px;flex:1;}
.sel{
  background:#2a2130;color:#efe9f2;border:1px solid rgba(198,35,104,0.4);
  border-radius:6px;padding:6px;font-family:'IBM Plex Mono',monospace;font-size:12px;
}
.chk{font-size:11px;color:#c9b8d8;display:flex;align-items:center;gap:6px;}

.legend{margin-top:14px;background:rgba(0,0,0,0.25);border-radius:8px;padding:10px 12px;}
.legend-title{font-size:9px;letter-spacing:2px;color:#c68ab0;margin-bottom:6px;}
.legend-grid{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:11px;}
.legend-grid span:nth-child(odd){color:#8ef5c0;font-weight:600;}
.legend-grid span:nth-child(even){color:#c9b8d8;}

.status{
  margin-top:14px;font-size:12px;color:#9ef59e;min-height:18px;
  background:rgba(0,0,0,0.3);border-radius:6px;padding:8px 10px;line-height:1.4;
}
.status.err{color:#ffb0b0;}

#footer{
  margin-top:26px;text-align:center;font-size:11px;color:#8a7f98;
  display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;
}
#footer a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;}
#footer a:hover{border-bottom-color:var(--accent);}

@keyframes drop{from{opacity:0;transform:translateY(-18px);}to{opacity:1;transform:none;}}

@media (max-width:720px){
  #stage{flex-direction:column;align-items:center;}
  .panel{order:-1;}
}
</parameter>