:root{
  --bg:#0a0a0f;
  --panel:#14141c;
  --panel2:#1b1b26;
  --red:#e60012;
  --red-glow:#ff2a3a;
  --cyan:#39d7ff;
  --amber:#ffb427;
  --green:#43e97b;
  --text:#d8d8e4;
  --dim:#6a6a80;
  --border:#2a2a3a;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);color:var(--text);font-family:'VT323',monospace;}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(230,0,18,.10), transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(57,215,255,.08), transparent 50%),
    var(--bg);
  padding-bottom:40px;
  overflow-x:hidden;
}
#scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:999;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 4px);
  mix-blend-mode:multiply;opacity:.5;
}

/* Header */
#masthead{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;border-bottom:2px solid var(--red);
  background:linear-gradient(180deg,#000 0%,#0e0e15 100%);
}
.logo{
  font-family:'Archivo Black',sans-serif;font-size:clamp(24px,5vw,44px);
  letter-spacing:1px;line-height:.9;
  background:linear-gradient(180deg,#ff5a68,var(--red) 60%,#8a0009);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}
.logo span{display:block;font-size:.55em;color:transparent;
  background:linear-gradient(180deg,#fff,#8aa0b0);-webkit-background-clip:text;background-clip:text;}
.subtitle{font-size:18px;color:var(--dim);letter-spacing:3px;margin-top:4px;}
.badge{
  font-family:'Archivo Black',sans-serif;font-size:14px;padding:8px 12px;
  border:2px solid var(--cyan);color:var(--cyan);border-radius:6px;
  animation:blink 1.4s steps(2,end) infinite;
  box-shadow:0 0 12px rgba(57,215,255,.4);
}
@keyframes blink{50%{opacity:.35;}}

main{max-width:1200px;margin:0 auto;padding:20px 16px;}

.panel{
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  padding:16px;margin-bottom:18px;
}

/* Loader */
#dropzone{
  border:2px dashed #3a3a52;border-radius:10px;padding:28px;text-align:center;
  transition:.15s;cursor:pointer;
}
#dropzone.drag{border-color:var(--red);background:rgba(230,0,18,.08);}
.cart-icon{font-size:48px;color:var(--red);line-height:1;}
.dz-main{font-size:24px;margin-top:8px;}
.dz-main b{color:var(--amber);}
.dz-sub{color:var(--dim);font-size:18px;margin:6px 0 14px;}
#insertBtn,.ctl{
  font-family:'Archivo Black',sans-serif;font-size:13px;letter-spacing:.5px;
  background:var(--red);color:#fff;border:none;padding:10px 18px;border-radius:6px;
  cursor:pointer;transition:.12s;box-shadow:0 3px 0 #8a0009;
}
#insertBtn:hover,.ctl:hover{filter:brightness(1.15);}
#insertBtn:active,.ctl:active{transform:translateY(2px);box-shadow:0 1px 0 #8a0009;}

.rom-info{margin-top:14px;background:var(--panel2);border-radius:8px;padding:12px;font-size:19px;}
.ri-row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed #2a2a3a;}
.ri-row span{color:var(--dim);letter-spacing:1px;}
.ri-row b{color:var(--cyan);}
.ri-verdict{margin-top:8px;padding:6px 10px;border-radius:6px;font-size:18px;}
.ri-verdict.good{background:rgba(67,233,123,.15);color:var(--green);}
.ri-verdict.warnv{background:rgba(255,180,39,.14);color:var(--amber);}

/* Stage layout */
#stage{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start;}
@media(max-width:900px){#stage{grid-template-columns:1fr;}}

/* Console bezel */
.bezel{
  background:linear-gradient(160deg,#2a2a34,#0c0c12);
  border:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.5);
}
.bezel-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.power-led{width:12px;height:12px;border-radius:50%;background:#400;box-shadow:inset 0 0 4px #000;}
.power-led.on{background:var(--red-glow);box-shadow:0 0 12px var(--red-glow),inset 0 0 4px #fff5;}
.console-brand{font-family:'Archivo Black',sans-serif;font-size:13px;color:#888;letter-spacing:2px;}
.screen-frame{
  position:relative;background:#000;border-radius:6px;padding:8px;
  border:2px solid #000;box-shadow:inset 0 0 30px rgba(0,0,0,.9);
}
#canvas{
  width:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;
  aspect-ratio:320/224;background:#000;border-radius:3px;
}
#crtOverlay{
  position:absolute;inset:8px;pointer-events:none;border-radius:3px;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 3px),
    radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.5) 100%);
}

.controlbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;}
.ctl{font-size:12px;padding:8px 12px;}
.ctl.active{background:var(--amber);box-shadow:0 3px 0 #a06a00;color:#221800;}
.slider-lbl{display:flex;align-items:center;gap:6px;font-size:16px;color:var(--dim);}
.slider-lbl input{width:70px;accent-color:var(--red);}
.crt-toggle{font-size:16px;color:var(--dim);display:flex;align-items:center;gap:5px;}
.crt-toggle input{accent-color:var(--cyan);}
.readout{margin-left:auto;font-size:18px;color:var(--cyan);
  background:#000;padding:3px 8px;border-radius:4px;border:1px solid var(--border);}

/* Monitor */
#monitor{font-size:17px;}
.tabs{display:flex;gap:4px;margin-bottom:10px;}
.tab{
  flex:1;font-family:'Archivo Black',sans-serif;font-size:12px;padding:8px 4px;
  background:var(--panel2);color:var(--dim);border:1px solid var(--border);
  border-radius:6px;cursor:pointer;transition:.12s;
}
.tab.active{background:var(--red);color:#fff;border-color:var(--red);}
.tab-body{min-height:120px;}
.reg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 14px;margin-bottom:6px;}
.reg-grid.small{grid-template-columns:repeat(3,1fr);font-size:15px;}
.reg-grid span{color:var(--dim);}
.reg-grid b{color:var(--cyan);font-weight:normal;}
.reg-line{margin:4px 0;color:var(--dim);}
.reg-line b{color:var(--amber);font-weight:normal;}
.reg-line.dim{color:#4a4a5c;font-size:15px;}
.flags{display:flex;gap:6px;align-items:center;}
.flag{padding:2px 7px;border:1px solid var(--border);border-radius:4px;color:var(--dim);}
.flag.set{background:var(--green);color:#032;border-color:var(--green);}
.vram-bar{height:8px;background:#000;border:1px solid var(--border);border-radius:4px;overflow:hidden;margin:4px 0;}
.vram-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--red));}
.palette{display:grid;grid-template-columns:repeat(16,1fr);gap:2px;margin-top:4px;}
.sw{width:100%;aspect-ratio:1;border-radius:2px;border:1px solid #0006;}
.chans{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 10px;}
.ch{padding:4px 8px;border:1px solid var(--border);border-radius:5px;color:var(--dim);font-size:14px;}
.ch.live{border-color:var(--green);color:var(--green);animation:pulse 1s infinite;}
@keyframes pulse{50%{opacity:.5;}}

.log-title{margin-top:12px;font-size:13px;letter-spacing:1px;color:var(--red);font-family:'Archivo Black',sans-serif;}
#log{
  margin-top:6px;background:#050508;border:1px solid var(--border);border-radius:6px;
  padding:8px;height:150px;overflow-y:auto;font-size:15px;line-height:1.35;
}
.lg{color:var(--dim);white-space:pre-wrap;word-break:break-word;}
.lg.ok{color:var(--green);}
.lg.warn{color:var(--amber);}
.lg.dim{color:#4a4a5c;}

/* Gamepad */
#gamepad{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.dpad{position:relative;width:120px;height:120px;}
.dbtn{
  position:absolute;width:40px;height:40px;background:#25252f;color:#888;
  border:1px solid #000;font-size:14px;cursor:pointer;user-select:none;
}
.dbtn.up{top:0;left:40px;border-radius:6px 6px 0 0;}
.dbtn.down{bottom:0;left:40px;border-radius:0 0 6px 6px;}
.dbtn.left{top:40px;left:0;border-radius:6px 0 0 6px;}
.dbtn.right{top:40px;right:0;border-radius:0 6px 6px 0;}
.dbtn.center{top:40px;left:40px;background:#1a1a22;cursor:default;}
.dbtn.pressed{background:var(--red);color:#fff;}
.startbtn{
  padding:10px 22px;border-radius:20px;background:#25252f;color:#aaa;
  border:1px solid #000;font-family:'Archivo Black',sans-serif;font-size:12px;cursor:pointer;
}
.startbtn.pressed{background:var(--amber);color:#221800;}
.pad-right{display:flex;gap:12px;}
.face{
  width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3a48,#15151d);
  color:#ccc;border:1px solid #000;font-family:'Archivo Black',sans-serif;font-size:18px;cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,.5);user-select:none;
}
.face.pressed{background:radial-gradient(circle at 35% 30%,var(--red-glow),var(--red));color:#fff;}
.keymap{text-align:center;color:var(--dim);font-size:16px;margin-top:-6px;margin-bottom:18px;}

footer{text-align:center;color:var(--dim);font-size:16px;padding:0 16px;line-height:1.5;}
footer a{color:var(--red);text-decoration:none;}
footer a:hover{text-decoration:underline;}

#toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:#000;border:1px solid var(--red);color:var(--text);
  padding:12px 20px;border-radius:8px;font-size:18px;z-index:1000;
  box-shadow:0 0 20px rgba(230,0,18,.35);max-width:90vw;text-align:center;
}
.hidden{display:none;}
</parameter>
</invoke>