/* debug.css — in-iframe debug desktop + mobile chrome.
 * All colours/sizes come from theme.js CSS variables (see :root there). */

/* ---- shell: header + stage + footer inside the emulator iframe ----
   Header/footer are hidden while embedded and shown only in fullscreen, so the
   embedded iframe looks unchanged. One live instance across every toggle. */
body.sh { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; height:100%; }
.sh-header, .sh-footer { flex:0 0 auto; display:none; align-items:center; background:#11151c; color:#e8eef5;
  font:14px/1.2 system-ui,-apple-system,sans-serif; }
body.sh-fs .sh-header, body.sh-fs .sh-footer,
body.sh-standalone .sh-header, body.sh-standalone .sh-footer { display:flex; }
.sh-header { height:46px; padding:0 12px; border-bottom:1px solid #222b36; }
.sh-logo { display:flex; align-items:center; text-decoration:none; }
.sh-title { flex:1; text-align:center; font-weight:600; font-size:15px; color:#dfeaf3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-title-link { text-decoration:none; }
.sh-title-link:hover { color:#4ee08a; }
.sh-x { background:none; border:0; color:#9fb; cursor:pointer; font-size:18px; padding:4px 6px; text-decoration:none; line-height:1; }
.sh-x:hover { color:#4ee08a; }
.sh-footer { gap:10px; padding:7px 12px; border-top:1px solid #222b36; }   /* a touch tighter to the content */
.sh-picks { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
.sh-rom { background:#0e131a; color:#e8eef5; border:1px solid #2a3642; border-radius:6px; padding:5px 8px; font:inherit; max-width:180px; }
.sh-btns { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.sh-btn { background:#34c574; color:#062012; border:1px solid #2aa862; border-radius:6px; padding:4px 11px; font:600 13px/1 system-ui,sans-serif; cursor:pointer; }
.sh-pp { min-width:66px; text-align:center; }   /* fixed width so Play/Pause never reflows the row */
.sh-snd { min-width:62px; text-align:center; }   /* fixed width so Sound/Mute never reflows the row */
.sh-btn:hover { background:#4ee08a; }
.sh-btn.on { box-shadow:inset 0 0 0 2px #06210f; }

.sh-stage { flex:1 1 auto; position:relative; display:flex; flex-direction:column; min-height:0; background:#000; overflow:hidden; }
.sh-screen { flex:1 1 0; display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden; }
body.sh .sh-screen #screen, body.sh .sh-screen canvas { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
/* keyboard: hidden by default; when on it takes --split% of the stage, the rest
   is screen. The input view fills the padded panel in BOTH width and height by
   normal layout — rows share the height, keys share the width. We only touch
   sizing; the key colours/borders/radius/gap/font stay the view's own. Even 8px
   gap all round. No transforms. */
.sh-kbd { display:none; flex:0 0 auto; background:#0c0f14; overflow:hidden; min-height:0; box-sizing:border-box; }
body.sh-kbd-on .sh-kbd { display:flex; padding:8px; flex:0 0 calc(var(--split,50) * 1%); }
.sh-kbd .okb, .sh-kbd .gp { width:100%; height:100%; box-sizing:border-box; }
.sh-kbd .okb-row { flex:1 1 0; min-height:0; }
.sh-kbd .okb-key { height:auto; min-height:0; }
/* draggable splitter between screen and keyboard */
.sh-divider { display:none; flex:0 0 9px; background:#161c26; cursor:ns-resize; position:relative; touch-action:none; }
body.sh-kbd-on .sh-divider { display:block; }
.sh-divider::after { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:3px; border-radius:2px; background:#3a4a5e; }
.sh-divider:hover, .sh-divider.drag { background:#22303f; }
.sh-divider:hover::after, .sh-divider.drag::after { background:#4ee08a; }
/* footer dropdown labels — "Machine", "ROM" before each select, like the page */
.sh-lab { display:flex; align-items:center; gap:5px; color:#9fb2c4; font-size:13px; white-space:nowrap; }

/* ---- desktop shell ---- */
.emu-desktop { position:absolute; inset:0; display:none; background:var(--desk-bg);
  color:var(--win-text); font:var(--win-text-size,12px)/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; z-index:50; user-select:none; }
.emu-desktop input, .emu-desktop textarea { user-select:text; }
body.emu-debug .emu-desktop { display:block; }
body.emu-debug > #screen, body.emu-debug > canvas#screen { display:none; }

/* ---- sidebar / rail ---- */
.dt-rail { position:absolute; left:0; top:0; bottom:0; width:var(--sb-w,76px); background:var(--sb-bg);
  display:flex; flex-direction:column; gap:2px; padding:8px 0; overflow:hidden auto; z-index:6; }
.dt-ico { background:none; border:0; color:var(--sb-icon); cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:3px; padding:7px 2px; font:inherit; width:100%; }
.dt-ico .ico { font-size:calc(var(--sb-icon-size) * var(--sb-scale,1)); color:var(--sb-icon); line-height:0; }
.dt-ico .ico svg { display:block; }
.dt-ico-t { font-size:calc(var(--sb-text-size) * var(--sb-scale,1)); color:var(--sb-text); letter-spacing:.02em; }
.dt-ico:hover, .dt-ico:hover .ico, .dt-ico:hover .dt-ico-t { color:var(--sb-hover); }
.dt-settings { margin-top:auto; }
.dt-rail-edge { position:absolute; top:0; bottom:0; right:0; width:var(--sb-edge-w); background:var(--sb-edge);
  cursor:ew-resize; z-index:7; }
.dt-rail-edge:hover { background:var(--win-border-hover); }
.dt-surface { position:absolute; left:var(--sb-w,76px); right:0; top:0; bottom:0; overflow:hidden; }
/* raised during a drag/resize so nothing underneath can be hovered/clicked */
.dt-shield { position:fixed; inset:0; z-index:100000; display:none; }

/* ---- windows ---- */
.dwin { position:absolute; box-sizing:border-box; min-width:120px; min-height:64px; background:var(--win-bg);
  border:var(--win-border-w) solid var(--win-border-u); border-radius:5px;
  box-shadow:0 6px 24px rgba(0,0,0,.5); display:flex; flex-direction:column; }
.dwin.focus { border-color:var(--win-border-f); box-shadow:0 10px 34px rgba(0,0,0,.66); }
/* hover / resize highlight overlay — sides lit individually by wm.js.
   Sits above everything in the window (incl. the scrollbar). */
.dwin-hot { position:absolute; inset:0; pointer-events:none; border:var(--win-border-hover-w) solid transparent;
  border-radius:5px; z-index:30; }
.dwin-title { display:flex; align-items:center; gap:6px; padding:4px 8px; background:var(--tu-bg);
  cursor:move; user-select:none; font-size:var(--title-text-size); font-weight:700; border-radius:3px 3px 0 0; }
.dwin.focus .dwin-title { background:var(--tf-bg); }
.dwin-t { flex:1; color:var(--tu-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dwin.focus .dwin-t { color:var(--tf-text); }
.dwin-x { background:none; border:0; color:var(--tu-icon); cursor:pointer; padding:0 1px; font-size:1.05em; display:flex; }
.dwin.focus .dwin-x { color:var(--tf-icon); }
.dwin-x:hover { color:#ff7676; }
.dwin-body { flex:1; overflow:auto; position:relative; background:var(--win-bg); color:var(--win-text); border-radius:0 0 4px 4px; }
.dwin ::selection { background:var(--win-sel); color:#04120a; }

/* resize handles (added only to resizable windows) */
.rh { position:absolute; z-index:5; }
.rh-n{ top:-4px;left:8px;right:8px;height:8px;cursor:ns-resize } .rh-s{ bottom:-4px;left:8px;right:8px;height:8px;cursor:ns-resize }
.rh-e{ right:-4px;top:8px;bottom:8px;width:8px;cursor:ew-resize } .rh-w{ left:-4px;top:8px;bottom:8px;width:8px;cursor:ew-resize }
.rh-ne{ top:-4px;right:-4px;width:12px;height:12px;cursor:nesw-resize } .rh-nw{ top:-4px;left:-4px;width:12px;height:12px;cursor:nwse-resize }
.rh-se{ bottom:-4px;right:-4px;width:12px;height:12px;cursor:nwse-resize } .rh-sw{ bottom:-4px;left:-4px;width:12px;height:12px;cursor:nesw-resize }

/* ---- window toolbar ---- */
.dwin-tools { display:flex; align-items:center; gap:6px; padding:4px 6px; background:var(--tb-bg-u); }
.dwin.focus .dwin-tools { background:var(--tb-bg-f); }

/* ---- buttons (bevelled) ---- */
.dbtn { --bc:var(--btn-sec); color:var(--btn-sec-text); background:var(--bc); cursor:pointer; font:inherit;
  padding:6px 10px; border-radius:4px; border-style:solid; border-width:var(--btn-border-w);
  border-top-color:color-mix(in srgb, var(--bc), #fff 38%); border-left-color:color-mix(in srgb, var(--bc), #fff 30%);
  border-bottom-color:color-mix(in srgb, var(--bc), #000 45%); border-right-color:color-mix(in srgb, var(--bc), #000 38%);
  display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.dbtn:hover { --bc:var(--btn-sec-hover); }
.dbtn.primary { --bc:var(--btn-pri); color:var(--btn-pri-text); }
.dbtn.primary:hover { --bc:var(--btn-pri-hover); }
.dbtn:disabled { opacity:.33; cursor:default; }
.dbtn .ico { font-size:1.25em; line-height:0; pointer-events:none; }

/* ---- inputs ---- */
.dinp { background:var(--in-bg-u); border:var(--in-border-w) solid var(--in-border-u); color:var(--in-text-u);
  font:inherit; border-radius:4px; padding:3px 5px; }
.dwin.focus .dinp { background:var(--in-bg-f); border-color:var(--in-border-f); color:var(--in-text-f); }

/* ---- custom scrollbars ----
   Chrome: style ::-webkit-scrollbar only (a classic, always-visible, space-
   taking bar). We deliberately do NOT set the standard scrollbar-width here —
   doing so switches Chrome to the standard model, which on macOS renders an
   overlay bar (0px, invisible). Firefox (no ::-webkit-scrollbar) is themed via
   the @supports fallback below. */
.scroll::-webkit-scrollbar { width:var(--sc-w); height:var(--sc-w); background:var(--sc-bg); }
.scroll::-webkit-scrollbar-thumb { background:var(--sc-fg); border-radius:calc(var(--sc-w)/2); border:2px solid var(--sc-bg); }
.scroll::-webkit-scrollbar-track { background:var(--sc-bg); }
.scroll::-webkit-scrollbar-corner { background:var(--sc-bg); }
@supports not selector(::-webkit-scrollbar) {
  .scroll { scrollbar-width:auto; scrollbar-color:var(--sc-fg) var(--sc-bg); }
}

/* ---- screen window ---- */
.dw-screen { display:flex; align-items:center; justify-content:center; background:#000; overflow:hidden; }
.dw-canvas { image-rendering:pixelated; }

/* ---- registers ---- */
.dw-regs { padding:8px; }
.rf { display:grid; grid-template-columns:auto auto; gap:5px 16px; }
.rf-cell { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rf-n { color:var(--win-text2); } .rf-v { color:var(--win-sel); }
.rf-in { text-align:right; text-transform:uppercase; padding:2px 5px; color:var(--win-sel); }
.rf-flags { display:flex; gap:3px; margin-top:10px; flex-wrap:wrap; }
.rf-flag { width:19px; height:19px; display:flex; align-items:center; justify-content:center; border-radius:3px;
  background:#0000; color:var(--win-text2); box-shadow:inset 0 0 0 1px var(--in-border-u); font-size:11px; }
.rf-flag.on { color:var(--win-sel); box-shadow:inset 0 0 0 1px var(--win-sel); }

/* ---- run controls ---- */
.dw-run { padding:10px; }
.drow { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.drow .dbtn { flex:1; }
.dspeed-l { color:var(--win-text2); }
.dfps { width:56px; }
/* range slider: track = secondary button colour, fill (left of thumb) + thumb = primary */
.dspeed { flex:1; -webkit-appearance:none; appearance:none; height:16px; background:transparent; cursor:pointer; }
.dspeed::-webkit-slider-runnable-track { height:6px; border-radius:3px;
  background:linear-gradient(to right, var(--btn-pri) var(--fill,50%), var(--btn-sec) var(--fill,50%)); }
.dspeed::-webkit-slider-thumb { -webkit-appearance:none; margin-top:-4px; width:14px; height:14px; border-radius:50%;
  background:var(--btn-pri); border:1px solid color-mix(in srgb, var(--btn-pri), #000 35%); }
.dspeed::-moz-range-track { height:6px; border-radius:3px; background:var(--btn-sec); }
.dspeed::-moz-range-progress { height:6px; border-radius:3px; background:var(--btn-pri); }
.dspeed::-moz-range-thumb { width:14px; height:14px; border:1px solid color-mix(in srgb, var(--btn-pri), #000 35%); border-radius:50%; background:var(--btn-pri); }

/* ---- memory window ---- */
.dw-mem { display:flex; flex-direction:column; }
.mbar { display:flex; align-items:center; gap:6px; padding:5px 6px; background:var(--tb-bg-u); flex-wrap:wrap; }
.dwin.focus .mbar { background:var(--tb-bg-f); }
.maddr { width:74px; text-transform:uppercase; }
.mstep { padding:3px 6px; }
.mat { color:var(--win-text2); }
.mbody { flex:1; position:relative; overflow:hidden; }

/* always-visible custom scrollbar (memory views) */
.noscroll { scrollbar-width:none; }
.noscroll::-webkit-scrollbar { width:0; height:0; }
.has-dsc { right:var(--sc-w) !important; }
.dsc-track { position:absolute; width:var(--sc-w); background:var(--sc-bg); z-index:4; border-radius:calc(var(--sc-w)/2); }
.dsc-thumb { position:absolute; left:1px; right:1px; background:var(--sc-fg); border-radius:calc(var(--sc-w)/2); min-height:22px; cursor:default; }

/* virtual list (hex) */
.vl-space { position:relative; width:1px; } .vl-layer { position:absolute; left:0; right:0; top:0; }

.hx { position:absolute; inset:0; overflow-x:auto; overflow-y:scroll; padding:2px 0; }
.hx:focus { outline:none; }
.hx-row { display:flex; gap:12px; padding:0 8px; white-space:nowrap; align-items:center; }
.hx-off { color:var(--win-text2); }
.hx-b { display:flex; } .hx-v { color:var(--win-text); width:1.55em; text-align:center; border-radius:2px; }
.hx-v.edit { cursor:text; } .hx-v.gap { margin-left:.5em; }
.hx-a { color:var(--win-text2); letter-spacing:1px; cursor:text; }
.hx-a .gap { margin-left:.4em; }
/* selection: primary side (the one you're dragging/editing) + secondary (mirror) */
.hx-v.sel-p, .hx-a span.sel-p { background:var(--sel-bg); color:var(--sel-fg); }
.hx-v.sel-s, .hx-a span.sel-s { background:var(--sel2-bg); color:var(--sel2-fg); }

/* bits view */
.bits { position:absolute; inset:0; overflow-x:auto; overflow-y:scroll; }
.bits canvas { display:block; image-rendering:pixelated; }

/* disasm */
.da { position:absolute; inset:0; overflow-x:auto; overflow-y:scroll; }
.da-space { position:relative; } .da-layer { position:absolute; left:0; right:0; }
.da-off { position:absolute; left:0; width:58px; color:var(--win-text2); padding-left:6px; box-sizing:border-box; }
.da-off.pc { color:var(--win-sel); }
.da-ins { position:absolute; box-sizing:border-box; background:color-mix(in srgb,var(--win-bg),#fff 6%);
  border:1px solid var(--in-border-u); border-radius:3px; padding:0 5px; overflow:hidden; display:flex; align-items:flex-start; }
.da-ins .da-m { white-space:nowrap; }
.da-ins.raw { color:var(--win-text2); background:color-mix(in srgb,var(--win-bg),#000 20%); }
.da-ins.pc { border-color:var(--win-sel); box-shadow:inset 0 0 0 1px var(--win-sel); }
/* execution breakpoints: red address + red-ringed instruction */
.da-off.bp { color:#e5484d; font-weight:700; }
.da-off.bp.pc { color:#ff7a7d; }
.da-ins.bp { border-color:#e5484d; box-shadow:inset 0 0 0 1px #e5484d; }
.da-ins.pc.bp { box-shadow:inset 0 0 0 1px var(--win-sel), inset 0 0 0 2px #e5484d; }
.da-none { padding:12px; color:var(--win-text2); }

/* on-screen keyboard (views/keyboard.js) — colours are set inline per machine */
.okb { padding:7px; border-radius:9px; display:flex; flex-direction:column; gap:5px; user-select:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 4px rgba(0,0,0,.25); }
.okb-row { display:flex; gap:5px; }
.okb-key { flex:1 1 0; min-width:0; height:34px; border:1px solid; border-radius:5px; cursor:pointer;
  font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center; padding:0 3px; box-shadow:0 1px 0 rgba(0,0,0,.35); }
.okb-key.down { box-shadow:none; transform:translateY(1px); }
/* label: never spill past the key edge — clip with an ellipsis */
.okb-cap { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }

/* MOBILE (?mobile): the keyboard fills the whole pad area, keys grow to fit */
body.emu-mobile .m-pad .okb { width:100%; height:100%; gap:1vh; padding:1vh; }
body.emu-mobile .okb-row { flex:1 1 0; gap:1.2vw; min-height:0; }
body.emu-mobile .okb-key { height:auto; min-height:0; font-size:clamp(9px, 2.8vw, 19px); letter-spacing:0; border-radius:1.1vw; padding:0 1px; }

/* tiles */
.ti { position:absolute; inset:0; overflow:auto; background:#0a0d12; }
.ti canvas { image-rendering:pixelated; display:block; }

/* ---- settings window ---- */
.dw-set { display:flex; flex-direction:column; }
.set-actions { gap:8px; }                 /* .dwin-tools supplies the toolbar bg */
.set-scheme { color:var(--win-text2); }
.set-actions .dinp { flex:1; min-width:0; }
.set-body { position:relative; flex:1; }  /* only THIS area scrolls (not the toolbar) */
.set-scroll { position:absolute; inset:0; overflow-y:scroll; }
.set-grp { padding:8px 10px 2px; color:var(--win-sel); font-size:.9em; text-transform:uppercase; letter-spacing:.04em; }
.set-row { display:flex; align-items:center; gap:8px; padding:3px 10px; }
.set-row label { flex:1; color:var(--win-text2); }
.set-row input[type=color] { width:34px; height:22px; padding:0; border:1px solid var(--in-border-u); background:none; border-radius:3px; }
.set-row input[type=number] { width:64px; }

/* ---- gamepad (desktop window + mobile) ---- */
.dw-pad { padding:10px; container-type:inline-size; }
.gp { display:flex; align-items:center; justify-content:space-evenly; gap:16px 12px; flex-wrap:wrap; min-width:0; box-sizing:border-box; }
.gp-dpad { display:grid; grid-template-columns:repeat(3,40px); grid-template-rows:repeat(3,40px); }
.gp-d { background:var(--btn-sec); border:1px solid var(--in-border-f); color:var(--win-text); border-radius:6px; font-size:14px; cursor:pointer; }
.gp-d.down { background:var(--btn-pri); color:var(--btn-pri-text); }
.gp-up { grid-area:1/2; } .gp-left { grid-area:2/1; } .gp-right { grid-area:2/3; } .gp-down { grid-area:3/2; }
.gp-act { display:flex; gap:14px; }
.gp-btn { width:54px; height:54px; border-radius:50%; background:#3a2030; border:1px solid #5a2f45; color:#fff; font-size:18px; cursor:pointer; }
.gp-btn.down { background:var(--btn-pri); color:var(--btn-pri-text); }
.gp-sys { display:flex; gap:10px; width:100%; justify-content:center; order:3; }
.gp-pill { padding:6px 16px; border-radius:14px; background:var(--btn-sec); border:1px solid var(--in-border-f); color:var(--win-text); cursor:pointer; }
.gp-pill.down { background:var(--btn-pri); color:var(--btn-pri-text); }

/* ---- mobile page ---- */
/* Full-viewport column: header (fixed) + screen + drag divider + keyboard pad.
   --split is the keyboard's share (%) of the screen+pad area; the divider drags
   it and it is remembered in localStorage. Nothing spills off the bottom. */
body.emu-mobile { --split:52; display:flex; flex-direction:column; align-items:stretch;
  background:#11151c; overflow:hidden; width:100vw; height:100vh; height:100dvh; }
body.emu-mobile .m-header, body.emu-mobile .m-screen, body.emu-mobile .m-pad { min-width:0; box-sizing:border-box; max-width:100vw; }
body.emu-mobile .m-screen #screen, body.emu-mobile .m-screen canvas { width:100%; height:100%; min-width:0; object-fit:contain; }
body.emu-mobile > #screen, body.emu-mobile > canvas#screen { display:none; }

/* top bar — matches the main site: near-black bar, green logo + wordmark, green close */
.m-header { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  height:52px; padding:0 14px; background:#11151c; border-bottom:1px solid #222a33; }
.m-brand { display:flex; align-items:center; gap:9px; color:#4ee08a; text-decoration:none;
  font:700 17px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.m-brand img { width:30px; height:30px; display:block; }
.m-close { color:#4ee08a; text-decoration:none; font-size:22px; line-height:1; padding:6px 4px; }

.m-screen { flex:calc(100 - var(--split)) 1 0; min-height:0; display:flex; align-items:center; justify-content:center; background:#000; }
.m-divider { flex:0 0 auto; height:18px; display:flex; align-items:center; justify-content:center;
  background:#1a212c; cursor:row-resize; touch-action:none; }
.m-divider::before { content:''; width:46px; height:4px; border-radius:2px; background:#55607a; }
.m-divider:active::before, .m-divider.drag::before { background:#4ee08a; }
.m-pad { flex:var(--split) 1 0; min-height:0; display:flex; align-items:stretch; padding:6px; background:#11151c; }
.m-pad .gp { width:100%; }