:root{
  --sega-red:#C8102E;
  --sega-red-dark:#8f0a20;
  --plastic:#1c1c1e;
  --plastic-lite:#2a2a2d;
  --silver:#b8bcc2;
  --ink:#e9e6df;
  --green:#3ec46d;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  background:#0a0a0b radial-gradient(circle at 50% 0%, #1a0508, #0a0a0b 60%);
  color:var(--ink);
  -webkit-user-select:none; user-select:none;
  min-height:100vh;
}
#app{max-width:640px;margin:0 auto;padding:16px 14px 40px;}

/* Header / cartridge label */
#header{margin-bottom:18px;}
.cart-label{
  position:relative;
  background:linear-gradient(180deg,#111,#000);
  border:2px solid var(--sega-red);
  border-radius:10px;
  padding:18px 20px 16px;
  overflow:hidden;
  box-shadow:0 0 0 1px #000, 0 10px 30px rgba(200,16,46,.15);
  animation:dropIn .5s cubic-bezier(.2,.8,.2,1) both;
}
.cart-stripe{
  position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--sega-red) 0 24px,#000 24px 30px);
}
.cart-label h1{
  font-weight:800;font-size:clamp(38px,11vw,64px);letter-spacing:-3px;line-height:.9;
  color:#fff;margin-top:8px;
}
.cart-label h1 .dot{color:var(--sega-red);}
.subtitle{font-weight:200;font-size:13px;color:var(--silver);margin-top:6px;letter-spacing:.3px;}
.berry{filter:saturate(1.4);}

/* Dropzone */
#dropzone{
  border:2px dashed #444;border-radius:12px;background:rgba(255,255,255,.02);
  padding:26px 18px;text-align:center;transition:.2s;margin-bottom:16px;
}
#dropzone.drag{border-color:var(--sega-red);background:rgba(200,16,46,.08);transform:scale(1.01);}
#dropzone.loaded{padding:14px;border-color:#333;}
.dz-icon{font-size:34px;color:var(--sega-red);letter-spacing:-4px;}
.dz-title{font-weight:700;font-size:18px;margin:8px 0 4px;}
.dz-sub{font-size:12px;color:var(--silver);font-weight:200;}
.dz-sub code{font-family:'JetBrains Mono',monospace;background:#000;padding:1px 5px;border-radius:4px;color:var(--green);font-size:11px;}
.rom-info{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--green);margin-top:10px;}

/* Bezel */
#stage{margin-bottom:16px;}
.bezel{
  background:linear-gradient(160deg,#2a2a2d,#101011);
  border-radius:18px;padding:16px 16px 20px;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.06),inset 0 -6px 20px rgba(0,0,0,.7),0 14px 40px rgba(0,0,0,.6);
  position:relative;
}
.bezel-badge{
  text-align:center;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:3px;
  color:var(--silver);opacity:.6;margin-bottom:10px;
}
.screen-wrap{
  position:relative;background:#000;border-radius:6px;overflow:hidden;
  aspect-ratio:256/192;
  box-shadow:inset 0 0 40px rgba(0,0,0,.9),inset 0 0 6px rgba(80,120,255,.15);
}
#canvas{
  width:100%;height:100%;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}
.scanlines::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.5));
}
.scanlines.off{display:none;}
.boot-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;}
.boot-flash.flash{animation:flash .7s ease-out;}
.bezel-feet{height:4px;}

/* Controls */
#controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px;}
.hw-btn{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:14px;
  background:linear-gradient(180deg,#333,#1a1a1c);color:var(--ink);
  border:1px solid #000;border-top:1px solid #555;
  border-radius:8px;padding:10px 14px;cursor:pointer;
  box-shadow:0 3px 0 #000,0 4px 6px rgba(0,0,0,.4);transition:.08s;
}
.hw-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #000;}
.hw-btn.active{background:linear-gradient(180deg,var(--sega-red),var(--sega-red-dark));border-top-color:#ff5a72;}
.hw-btn.accent{background:linear-gradient(180deg,var(--sega-red),var(--sega-red-dark));border-top-color:#ff5a72;color:#fff;}
.hw-btn.ghost{background:transparent;box-shadow:none;border:1px solid #444;}
.hw-btn:disabled{opacity:.4;cursor:not-allowed;}
.stat{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--green);
  display:flex;align-items:center;padding:0 10px;
  border:1px solid #222;border-radius:8px;background:#000;
}

/* Gamepad */
#pad{display:flex;justify-content:space-between;align-items:center;padding:0 4px;margin-bottom:12px;}
.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:2px;}
.pad-btn{
  background:linear-gradient(180deg,#3a3a3d,#161618);border:1px solid #000;border-radius:6px;
  color:var(--silver);font-size:14px;cursor:pointer;
}
.pad-btn.pressed{background:var(--sega-red);color:#fff;}
.pad-btn.up{grid-area:1/2;} .pad-btn.left{grid-area:2/1;}
.pad-btn.center{grid-area:2/2;background:#0d0d0e;border-radius:2px;cursor:default;}
.pad-btn.right{grid-area:2/3;} .pad-btn.down{grid-area:3/2;}
.face-btns{display:flex;gap:12px;align-items:center;}
.round-btn{
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#4a4a4d,#161618);
  border:1px solid #000;color:var(--ink);font-weight:700;font-size:18px;cursor:pointer;
  box-shadow:0 4px 8px rgba(0,0,0,.5);
}
.round-btn.pressed{background:radial-gradient(circle at 35% 30%,#ff5a72,var(--sega-red-dark));color:#fff;}
.round-btn.pause{width:44px;height:44px;font-size:14px;}

.legend{text-align:center;font-size:11px;color:var(--silver);font-weight:200;margin-bottom:16px;}
.legend b{color:var(--ink);font-weight:700;}

/* Debug */
#debugToggle{text-align:center;margin-bottom:10px;}
#debug{
  background:#000;border:1px solid #222;border-radius:10px;padding:14px;margin-bottom:16px;
}
#debug.hidden{display:none;}
#dbgOut{
  font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.5;color:var(--green);
  white-space:pre-wrap;word-break:break-word;
}

/* Footer */
footer{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:var(--silver);font-weight:200;
  border-top:1px solid #1c1c1e;padding-top:14px;
}
footer a{color:var(--sega-red);text-decoration:none;font-weight:700;}
footer a:hover{text-decoration:underline;}

@keyframes dropIn{from{opacity:0;transform:translateY(-16px);}to{opacity:1;transform:none;}}
@keyframes flash{0%{opacity:.9;}100%{opacity:0;}}

@media(max-width:420px){
  .round-btn{width:48px;height:48px;}
  .dpad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);}
  .hw-btn{font-size:12px;padding:9px 11px;}
}