:root{
  --bg:#0a0a12;
  --panel:#14141f;
  --accent:#ff3355;
  --accent2:#39a0ff;
  --ink:#e8e8f0;
  --dim:#7a7a92;
  --bezel:#1a1a26;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(circle at 20% 0%, #1b1230 0%, transparent 50%),
    radial-gradient(circle at 80% 100%, #0d1b2a 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:'Bricolage Grotesque',sans-serif;
  min-height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:16px;
  -webkit-tap-highlight-color:transparent;
}
#app{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;gap:18px}

#topbar{text-align:center;margin-top:4px}
#topbar .title{font-weight:800;font-size:2.1rem;letter-spacing:-1px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#topbar .subtitle{font-weight:200;color:var(--dim);font-size:.85rem;letter-spacing:1px;text-transform:uppercase}

main{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}

#bezel{
  width:100%;max-width:560px;
  background:linear-gradient(160deg,#22222f,#0e0e16);
  border-radius:24px;padding:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  border:1px solid #2a2a3a;
}
#screen-wrap{
  position:relative;border-radius:8px;overflow:hidden;
  background:#000;
  box-shadow:inset 0 0 40px rgba(0,0,0,.9), 0 0 24px rgba(57,160,255,.08);
  aspect-ratio:256/192;
  transition:box-shadow .2s;
}
#screen-wrap.drag{box-shadow:inset 0 0 0 3px var(--accent), 0 0 30px var(--accent)}
#canvas{
  display:block;width:100%;height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
#crt-overlay{
  display:none;position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.25) 3px);
  mix-blend-mode:multiply;
}
#screen-wrap::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.4) 100%);
}
#placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:10px;
  background:rgba(4,4,10,.5);
}
#placeholder .ph-big{font-weight:800;color:var(--accent);letter-spacing:2px;font-size:1.2rem;
  animation:blink 1.6s steps(2,end) infinite}
#placeholder .ph-small{font-weight:200;color:var(--dim);font-size:.8rem}
@keyframes blink{50%{opacity:.3}}

#controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.btn{
  font-family:inherit;font-weight:400;font-size:.9rem;
  background:var(--panel);color:var(--ink);
  border:1px solid #2c2c3c;border-radius:10px;
  padding:9px 14px;cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;gap:6px;
}
.btn:hover{border-color:var(--accent2);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(90deg,var(--accent),#d81f45);border:none;font-weight:800}
.btn.toggle.on{background:var(--accent2);color:#04121f;border-color:var(--accent2);font-weight:800}
input[type=range]{accent-color:var(--accent2);width:90px}
.fps{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--accent2);min-width:56px;text-align:center}

#rominfo{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--dim);text-align:center;min-height:1em}

/* Gamepad */
#gamepad{width:100%;max-width:520px;display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.dpad{position:relative;width:132px;height:132px}
.dbtn{
  position:absolute;width:44px;height:44px;background:var(--panel);color:var(--dim);
  border:1px solid #2c2c3c;font-size:.9rem;cursor:pointer;user-select:none;
}
.dbtn.up{top:0;left:44px;border-radius:8px 8px 0 0}
.dbtn.down{bottom:0;left:44px;border-radius:0 0 8px 8px}
.dbtn.left{left:0;top:44px;border-radius:8px 0 0 8px}
.dbtn.right{right:0;top:44px;border-radius:0 8px 8px 0}
.dcenter{position:absolute;left:44px;top:44px;width:44px;height:44px;background:var(--panel);border:1px solid #2c2c3c}
.dbtn.active{background:var(--accent2);color:#04121f}
.abtns{display:flex;flex-direction:column;align-items:center;gap:14px}
.fire{display:flex;gap:16px}
.rbtn{
  font-family:inherit;font-weight:800;background:linear-gradient(160deg,#2a2a3a,#16161f);
  color:var(--ink);border:1px solid #33334a;cursor:pointer;user-select:none;
}
.rbtn.b1,.rbtn.b2{width:60px;height:60px;border-radius:50%;font-size:1.3rem;
  box-shadow:0 4px 0 #0b0b12}
.rbtn.b1{color:var(--accent)}
.rbtn.b2{color:var(--accent2)}
.rbtn.start{padding:8px 18px;border-radius:20px;font-size:.75rem;letter-spacing:1px}
.rbtn.active{transform:translateY(3px);box-shadow:none;filter:brightness(1.4)}

#debug{width:100%;max-width:520px;background:#05050b;border:1px solid #22223a;border-radius:10px;padding:12px}
#debug.hidden{display:none}
#dbgtext{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#8affc0;white-space:pre-wrap;line-height:1.5}

.legend{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--dim);text-align:center}

footer{margin-top:20px;padding:16px;display:flex;flex-direction:column;gap:6px;align-items:center;
  font-size:.75rem;color:var(--dim)}
footer a{color:var(--accent2);text-decoration:none;font-weight:800}
footer a:hover{text-decoration:underline}

@media(max-width:520px){
  #topbar .title{font-size:1.6rem}
  #bezel{padding:14px;border-radius:16px}
  .rbtn.b1,.rbtn.b2{width:52px;height:52px}
  .dpad{width:120px;height:120px}
  .dbtn,.dcenter{width:40px;height:40px}
  .dbtn.up,.dbtn.down{left:40px}.dbtn.left,.dbtn.right{top:40px}.dcenter{left:40px;top:40px}
}