*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0d1a;--bg2:#1a1a2e;--bg3:#2a2a4a;
  --amber:#e68a00;--amber-dim:#a05800;
  --text:#e0e0e0;--text-dim:#888;
  --green:#00cc66;--red:#cc3333;--blue:#4488ff;--purple:#aa66ff;
  --font-pixel:'Press Start 2P',monospace;
  --font-mono:'JetBrains Mono',monospace;
}
html,body{background:var(--bg);color:var(--text);font-family:var(--font-mono);overflow-x:hidden;min-height:100vh;-webkit-tap-highlight-color:transparent}
#app-container{max-width:1400px;margin:0 auto;padding:12px}

header{text-align:center;padding:18px 12px 10px;background:linear-gradient(180deg,var(--bg2),var(--bg));border-bottom:2px solid var(--amber-dim);position:relative;overflow:hidden}
header::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px);pointer-events:none}
header h1{font-family:var(--font-pixel);font-size:clamp(14px,3vw,22px);color:var(--amber);text-shadow:0 0 12px rgba(230,138,0,.4);letter-spacing:1px}
.subtitle{font-size:clamp(7px,1.4vw,11px);color:var(--text-dim);margin-top:6px;font-family:var(--font-pixel);line-height:1.6}

#main-layout{display:flex;gap:8px;margin-top:12px;align-items:flex-start}
#left-panel{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px}

.upload-zone{border:2px dashed var(--amber);border-radius:12px;padding:24px 16px;text-align:center;cursor:pointer;background:rgba(230,138,0,.04);transition:all .2s;width:100%;max-width:660px;min-height:44px}
.upload-zone:hover,.upload-zone.drag-over{background:rgba(230,138,0,.1);border-color:#ffaa33;box-shadow:0 0 20px rgba(230,138,0,.15)}
.cartridge-icon{font-size:40px;margin-bottom:8px}
.upload-text{font-family:var(--font-pixel);font-size:clamp(10px,2.5vw,13px);color:var(--amber)}
.upload-sub{font-size:clamp(10px,2vw,12px);color:var(--text-dim);margin-top:6px}
.upload-hint{font-size:clamp(8px,1.5vw,10px);color:var(--text-dim);margin-top:4px;opacity:.6}
.rom-info{margin-top:8px;padding:6px 12px;background:var(--bg3);border-radius:6px;font-size:11px;color:var(--green);word-break:break-all}
.hidden{display:none!important}

.crt-bezel{background:linear-gradient(135deg,#3a2a1a,#5a4030,#3a2a1a);border-radius:18px;padding:16px;box-shadow:0 8px 32px rgba(0,0,0,.6),inset 0 2px 4px rgba(255,255,255,.05);position:relative;width:100%;max-width:660px}
.crt-bezel::before{content:'';position:absolute;left:0;right:0;top:0;bottom:0;border-radius:18px;background:repeating-linear-gradient(90deg,rgba(90,64,48,.3) 0px,rgba(90,64,48,.3) 2px,rgba(58,42,26,.3) 2px,rgba(58,42,26,.3) 6px);pointer-events:none}
.crt-screen-border{background:#111;border-radius:10px;overflow:hidden;position:relative;box-shadow:inset 0 0 30px rgba(0,0,0,.8)}
#screen{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:-moz-crisp-edges;aspect-ratio:160/192;background:#000}
.crt-overlay{position:absolute;inset:0;pointer-events:none;display:none;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.2) 1px,rgba(0,0,0,.2) 2px);mix-blend-mode:multiply}
.crt-overlay.active{display:block}
.powerup{position:absolute;inset:0;background:white;border-radius:50%;animation:powerup .6s ease-out forwards}
@keyframes powerup{0%{opacity:1;transform:scale(0.01);border-radius:50%}40%{opacity:.9;transform:scale(0.05);border-radius:50%}100%{opacity:0;transform:scale(3);border-radius:0}}

/* Touch Controls */
#touch-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  max-width:660px;
  padding:10px 4px;
}
.touch-dpad{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.dpad-mid-row{
  display:flex;
  align-items:center;
  gap:2px;
}
.dpad-center{
  width:40px;
  height:40px;
  background:var(--bg3);
  border-radius:4px;
}
.touch-btn{
  font-family:var(--font-pixel);
  font-size:12px;
  color:var(--text);
  background:var(--bg3);
  border:2px solid var(--amber-dim);
  border-radius:8px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  min-width:44px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.touch-btn:active{
  background:var(--amber);
  color:#000;
}
.dpad-up,.dpad-down{width:44px;height:44px}
.dpad-left,.dpad-right{width:44px;height:44px}
.fire-btn{
  width:80px;
  height:80px;
  border-radius:50%;
  font-size:14px;
  background:linear-gradient(180deg,var(--amber),var(--amber-dim));
  color:#000;
  border:3px solid #ffaa33;
  font-weight:700;
}
.fire-btn:active{
  background:linear-gradient(180deg,#ffcc44,var(--amber));
}
.touch-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.touch-mini-btns{
  display:flex;
  gap:6px;
}
.mini-btn{
  font-size:8px;
  min-width:40px;
  min-height:32px;
  padding:4px 8px;
}

.controls-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.arcade-btn{font-family:var(--font-pixel);font-size:clamp(8px,1.8vw,10px);padding:10px 14px;background:linear-gradient(180deg,var(--amber),var(--amber-dim));color:#000;border:2px solid #ffaa33;border-radius:8px;cursor:pointer;text-shadow:0 1px 0 rgba(255,255,255,.2);box-shadow:0 3px 0 #704000,0 4px 8px rgba(0,0,0,.4);transition:all .1s;user-select:none;-webkit-user-select:none;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation}
.arcade-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #704000}
.arcade-btn.small{font-size:8px;padding:6px 10px;min-height:36px}
.arcade-btn.active{background:linear-gradient(180deg,#ffcc44,var(--amber));box-shadow:0 3px 0 #704000,0 0 12px rgba(230,138,0,.5)}

.switches-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.switch-label{font-size:clamp(7px,1.5vw,9px);font-family:var(--font-pixel);color:var(--text-dim);display:flex;flex-direction:column;align-items:center;gap:4px}
.switch-wrap{position:relative;width:44px;height:24px}
.switch-wrap input{opacity:0;width:0;height:0;position:absolute}
.switch-slider{position:absolute;inset:0;background:var(--bg3);border-radius:12px;cursor:pointer;transition:.2s;border:1px solid #555}
.switch-slider::before{content:'';position:absolute;width:18px;height:18px;left:2px;top:2px;background:var(--text-dim);border-radius:50%;transition:.2s}
.switch-wrap input:checked+.switch-slider{background:var(--amber)}
.switch-wrap input:checked+.switch-slider::before{transform:translateX(20px);background:#fff}

.keymap-card{margin-top:8px;padding:8px 10px;background:var(--bg2);border:1px solid var(--bg3);border-radius:6px;font-size:clamp(8px,1.5vw,10px);color:var(--text-dim);text-align:center;line-height:1.6}

#controls-panel{width:100%;max-width:660px}

#debug-panel{width:320px;min-width:280px;background:var(--bg2);border:1px solid var(--bg3);border-radius:8px;overflow:hidden;max-height:calc(100vh - 100px);display:flex;flex-direction:column}
.debug-header{display:flex;align-items:center;gap:8px;padding:8px;background:var(--bg3);border-bottom:1px solid #444}
.debug-title{font-family:var(--font-pixel);font-size:10px;color:var(--amber)}
#debug-content{overflow-y:auto;padding:6px;flex:1}
.debug-section{margin-bottom:8px;border:1px solid var(--bg3);border-radius:6px;overflow:hidden}
.debug-section h3{font-family:var(--font-pixel);font-size:9px;color:var(--amber);padding:4px 6px;background:rgba(230,138,0,.08)}
.mono-grid,.reg-table-wrap{font-family:var(--font-mono);font-size:10px;padding:4px;line-height:1.5}
.reg-table{width:100%;border-collapse:collapse;font-size:9px}
.reg-table th{text-align:left;color:var(--amber);padding:2px 4px;font-weight:700;border-bottom:1px solid var(--bg3);position:sticky;top:0;background:var(--bg2)}
.reg-table td{padding:1px 4px;border-bottom:1px solid rgba(255,255,255,.03)}
.reg-table tr.flash td{background:rgba(230,138,0,.2);transition:background .3s}
.reg-pf td{color:#66cc88}.reg-pl td{color:#6688ff}.reg-ms td{color:#aa77ff}.reg-au td{color:#e68a00}.reg-ct td{color:#999}

.cpu-reg{display:inline-block;margin:0 6px 3px 0;padding:2px 4px;background:var(--bg3);border-radius:3px;font-size:clamp(9px,1.5vw,11px)}
.cpu-reg .label{color:var(--amber);font-weight:700}
.flag-on{color:var(--green);font-weight:700}.flag-off{color:#444}

#beam-display{padding:4px 6px}
.beam-bar{height:12px;background:var(--bg);border-radius:3px;position:relative;overflow:hidden;margin:3px 0}
.beam-hblank{position:absolute;left:0;width:29.8%;height:100%;background:rgba(255,255,255,.05)}
.beam-pos{position:absolute;height:100%;width:2px;background:var(--amber);box-shadow:0 0 4px var(--amber)}
.beam-info{font-size:9px;color:var(--text-dim)}

#stats-bar{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:6px 8px;background:var(--bg2);border-top:1px solid var(--bg3);font-family:var(--font-mono);font-size:clamp(8px,1.8vw,11px);color:var(--green);margin-top:8px;border-radius:6px}

footer{text-align:center;padding:12px;margin-top:12px}
footer a{color:var(--amber);text-decoration:none;font-family:var(--font-pixel);font-size:10px}
footer a:hover{text-decoration:underline}

.ram-byte{display:inline-block;width:22px;text-align:center;color:var(--text-dim);font-size:clamp(8px,1.2vw,10px)}
.ram-byte.changed{color:var(--green)}
.ram-addr{color:var(--amber);display:inline-block;width:28px;text-align:right;margin-right:4px;font-size:clamp(8px,1.2vw,10px)}

/* Desktop-only elements */
.desktop-only{display:block}

/* Mobile (<=768px) */
@media(max-width:768px){
  #app-container{padding:6px}
  #main-layout{flex-direction:column}
  #debug-panel{width:100%;max-height:350px;min-width:0}
  .desktop-only{display:none}
  .upload-zone{padding:20px 12px}
  .cartridge-icon{font-size:32px}
  .crt-bezel{padding:10px;border-radius:12px}
  .controls-row{gap:4px}
  .arcade-btn{padding:8px 10px;font-size:8px}
  .switches-row{gap:6px}
  header{padding:12px 8px 8px}
  #stats-bar{gap:8px;font-size:8px}
  .reg-table{font-size:8px}
  .mono-grid{font-size:8px}
}

/* Tablet */
@media(min-width:769px) and (max-width:1024px){
  #main-layout{flex-direction:column}
  #debug-panel{width:100%;max-height:400px}
}