:root{
  --bg:#0d0d18;
  --panel:#161628;
  --magenta:#ff2e97;
  --cyan:#25e0e6;
  --lime:#b6ff3a;
  --ink:#e8e8f4;
  --dim:#7a7a9a;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:
    radial-gradient(circle at 20% 0%, #241033 0%, transparent 55%),
    radial-gradient(circle at 90% 100%, #04222a 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:'JetBrains Mono',monospace;
  min-height:100%;
  padding:14px;
  display:flex;justify-content:center;
}
#app{width:100%;max-width:760px;display:flex;flex-direction:column;gap:16px;}

#topbar{text-align:center;padding-top:6px;}
#topbar h1{
  font-family:'VT323',monospace;
  font-size:64px;line-height:0.9;letter-spacing:2px;
  color:var(--cyan);
  text-shadow:0 0 14px rgba(37,224,230,.5), 3px 3px 0 var(--magenta);
}
#topbar h1 .dot{color:var(--magenta);}
.subtitle{color:var(--dim);font-size:12px;letter-spacing:1px;margin-top:2px;}

/* Dropzone */
#dropzone{
  border:2px dashed var(--magenta);
  border-radius:14px;
  padding:22px;
  background:linear-gradient(135deg, rgba(255,46,151,.06), rgba(37,224,230,.05));
  transition:.2s;
}
#dropzone.drag-over{border-color:var(--lime);background:rgba(182,255,58,.1);transform:scale(1.01);}
#dropzone.loaded{padding:12px;border-style:solid;border-color:#333;}
.dz-inner{text-align:center;}
.dz-icon{font-size:40px;}
.dz-text{margin:8px 0 12px;font-size:15px;}
.dz-text em{color:var(--lime);font-style:normal;}
#browseBtn{
  font-family:'JetBrains Mono',monospace;font-weight:700;
  background:var(--magenta);color:#fff;border:none;
  padding:10px 22px;border-radius:8px;cursor:pointer;font-size:14px;
  box-shadow:0 4px 0 #a81264;
}
#browseBtn:active{transform:translateY(3px);box-shadow:none;}
#romInfo{margin-top:10px;font-size:12px;color:var(--cyan);}

/* Stage */
.screen-wrap{position:relative;display:flex;justify-content:center;}
#screen{
  width:100%;max-width:512px;
  image-rendering:pixelated;image-rendering:crisp-edges;
  background:#000;
  border:3px solid #2a2a44;border-radius:8px;
  box-shadow:0 0 30px rgba(37,224,230,.25), inset 0 0 20px rgba(0,0,0,.6);
  aspect-ratio:256/192;
}
#modeBadge{
  position:absolute;top:8px;left:8px;z-index:2;
  font-family:'VT323',monospace;font-size:18px;
  background:rgba(0,0,0,.6);color:var(--lime);
  padding:1px 8px;border-radius:4px;border:1px solid var(--lime);
}
#fpsCounter{
  position:absolute;top:8px;right:8px;z-index:2;
  font-size:11px;background:rgba(0,0,0,.6);color:var(--cyan);
  padding:2px 6px;border-radius:4px;
}

/* Controls */
#controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;}
.ctl{
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;
  background:var(--panel);color:var(--ink);
  border:1px solid #2e2e4a;border-radius:8px;
  padding:9px 12px;cursor:pointer;transition:.15s;
}
.ctl:hover{border-color:var(--cyan);color:var(--cyan);}
.ctl.active{background:var(--cyan);color:#04222a;border-color:var(--cyan);}
.ctl:active{transform:translateY(2px);}
.speed{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);}
.speed input{width:90px;accent-color:var(--magenta);}
#speedVal{color:var(--lime);width:28px;}

/* Gamepad */
#gamepad{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 8px;}
.dpad{position:relative;width:150px;height:150px;}
.pad{
  font-family:'VT323',monospace;font-size:22px;
  background:var(--panel);color:var(--ink);
  border:2px solid #3a3a58;border-radius:10px;
  cursor:pointer;user-select:none;
}
.pad.pressed,.pad:active{background:var(--magenta);color:#fff;border-color:var(--magenta);}
.dpad .pad{position:absolute;width:48px;height:48px;}
.dpad .up{top:0;left:51px;}
.dpad .down{bottom:0;left:51px;}
.dpad .left{top:51px;left:0;}
.dpad .right{top:51px;right:0;}
.actionbtns{display:flex;align-items:center;gap:12px;}
.pad.act{
  width:64px;height:64px;border-radius:50%;font-size:26px;font-weight:700;
  background:radial-gradient(circle at 35% 30%, #ff5bb0, #c81a6e);
  border-color:#c81a6e;color:#fff;
}
.pad.act:active,.pad.act.pressed{background:radial-gradient(circle at 35% 30%,#ffd,#ff2e97);}
.pad.pausebtn{width:44px;height:44px;border-radius:8px;font-size:16px;
  background:var(--cyan);color:#04222a;border-color:var(--cyan);}
.keymap{text-align:center;font-size:11px;color:var(--dim);}

/* Debug */
#debug{
  background:var(--panel);border:1px solid #2e2e4a;border-radius:10px;
  padding:12px;font-size:12px;
}
#debug h3{color:var(--magenta);font-family:'VT323',monospace;font-size:18px;margin-bottom:4px;}
#debug pre{color:var(--lime);white-space:pre-wrap;line-height:1.5;margin-bottom:10px;}

/* Footer */
#footer{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:var(--dim);border-top:1px solid #22223a;
  padding-top:10px;flex-wrap:wrap;gap:6px;
}
#footer a{color:var(--magenta);text-decoration:none;}
#footer a:hover{color:var(--cyan);text-decoration:underline;}

@media(max-width:520px){
  #topbar h1{font-size:48px;}
  #gamepad{flex-direction:column;gap:24px;}
  .ctl{font-size:12px;padding:8px 10px;}
}
</parameter>