:root {
  --bg: #1e1e2a;
  --bg-panel: #2a2a3a;
  --fg: #e8e8f0;
  --accent: #6cc8ff;
  --border: #444458;
  --danger: #ff6b6b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#menu-bar {
  /* Below the floating windows normally (they never go under it, see
     floatingwindow.js _place), above them while a menu is open so the
     dropdown shows over them (their z-index grows as they are clicked). */
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: 600;
  margin-right: 16px;
  color: var(--accent);
}
.brand a { color: inherit; text-decoration: none; }
.brand a:hover { text-decoration: underline; }
.brand .version {
  font-weight: 400;
  font-size: 0.8em;
  opacity: 0.7;
  margin-left: 4px;
}

#menu-bar:has(.menu.open) { z-index: 1000000; }

.menu {
  position: relative;
}

.menu-btn {
  background: transparent;
  color: var(--fg);
  border: 1px solid transparent;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.menu-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.menu-btn:hover {
  border-color: var(--border);
  background: rgba(255,255,255,0.05);
}

/* Quick bar (js/ui/quickbar.js): icons for the menu items used most, at the
   right of the menus, or on a row of their own when the window is narrow. */
#quick-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 2px;
  margin-left: auto;
}

.quick-group {
  display: flex;
  gap: 1px;
  padding: 0 5px;
  border-left: 1px solid var(--border);
}

.quick-group:first-child { border-left: none; }

.quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.quick-btn svg {
  width: 18px;
  height: 18px;
}

.quick-btn:hover:not(:disabled) {
  border-color: var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--accent);
}

.quick-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.quick-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.menu-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 200px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px;
  flex-direction: column;
  gap: 2px;
}

.menu.open .menu-panel {
  display: flex;
}

.menu-panel button,
.menu-panel .menu-file {
  background: transparent;
  color: var(--fg);
  border: none;
  text-align: left;
  padding: 6px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  display: block;
}

.menu-panel button:hover,
.menu-panel .menu-file:hover {
  background: rgba(255,255,255,0.08);
}

.menu-panel button:disabled {
  opacity: 0.4;
  cursor: default;
  background: transparent;
}

/* Flyout submenus (Machine > Type / Keyboard / ROMs / Cartridge). Opened by
   menu.js (hover or click), not CSS :hover, so a flyout holding a file
   picker stays open while the file dialog is up. */
.submenu {
  position: relative;
}

.menu-panel .submenu-label {
  display: flex;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}

.submenu-label::after {
  content: "\25B8";
  margin-left: auto;
  padding-left: 16px;
  opacity: 0.6;
}

.submenu.open > .submenu-label {
  background: rgba(255, 255, 255, 0.08);
}

.submenu-label span {
  margin-left: 0.4em;
  color: var(--accent);
}

.submenu-panel {
  display: none;
  position: absolute;
  top: -7px;
  left: calc(100% + 6px);
  z-index: 11;
  min-width: 200px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.submenu.open > .submenu-panel {
  display: flex;
}

.submenu.flip > .submenu-panel {
  left: auto;
  right: calc(100% + 6px);
}

.submenu.disabled > .submenu-label {
  opacity: 0.4;
  cursor: default;
}

.submenu.disabled > .submenu-panel {
  display: none;
}

/* A slider row in a menu (Machine > Sound > Drive Volume). */
.menu-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--fg);
  white-space: nowrap;
}

.menu-slider input[type="range"] {
  flex: 1;
  min-width: 90px;
  accent-color: var(--accent);
}

.menu-slider-value {
  min-width: 3.5em;
  text-align: right;
  color: var(--accent);
}

.menu-slider.disabled {
  opacity: 0.4;
}

.menu-file input[type="file"] {
  display: none;
}

.rom-slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-top: 1px solid var(--border);
}

.rom-slot:first-child { border-top: none; }

.rom-slot .rom-slot-label {
  font-size: 12px;
  opacity: 0.85;
}

.rom-slot .rom-slot-status {
  font-size: 11px;
  color: var(--accent);
}

.rom-slot .rom-slot-status.missing {
  color: var(--danger);
}

.banner {
  padding: 8px 14px;
  background: #4a3b1a;
  color: #ffdca8;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.banner-error {
  background: #4a1a1a;
  color: #ffb3b3;
  cursor: pointer;
}

/* A file is being dragged over the page (see main.js drag and drop). */
body.drop-target #screen-wrapper {
  outline: 3px dashed var(--accent, #6cf);
  outline-offset: -8px;
}

#screen-wrapper {
  flex: 1;
  /* May shrink below the canvas: video_canvas.js sizes the canvas from the
     wrapper, so letting the wrapper grow to the canvas would stop Fit from
     ever getting smaller again. */
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  padding: 4px;
  overflow: auto;
}

/* Machine > Screen > Screen Only: just the CPC screen. The menu bar comes
   back as an overlay while the pointer is at the top edge (every key goes
   to the CPC, so there is no keyboard way out). */
body.screen-only #status-bar,
body.screen-only .banner { display: none; }
body.screen-only #menu-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  transition: transform 0.15s ease 0.3s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
body.screen-only #menu-bar:hover,
body.screen-only #menu-bar:has(.menu.open),
body.screen-only #menu-bar.peek {
  transform: none;
  transition-delay: 0s;
}
#menu-reveal { display: none; }
body.screen-only #menu-reveal {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 49;
}

/* Light pen on (Machine menu): aim with a crosshair; no touch scrolling. */
#screen.lightpen {
  cursor: crosshair;
  touch-action: none;
}

#screen {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  /* Fallback shape ONLY for the very first paint, before video_canvas.js's
     first blit() has run and set explicit pixel style.width/height. Once
     that runs, this has no effect (both dimensions become explicit), which
     is deliberate: letting the browser pick a size itself -- via this
     aspect-ratio combined with max-width/max-height -- meant the actual
     displayed size could land on a non-integer multiple of the canvas's
     backing-buffer resolution (e.g. 592.867px for an 816px-wide buffer).
     With `image-rendering: pixelated`, that fractional resize is
     nearest-neighbor too, so it silently dropped source pixel columns
     unevenly across the image -- the same class of cropping bug already
     fixed once inside video_canvas.js's own drawImage step, just recurring
     here one layer further out. video_canvas.js now computes the largest
     INTEGER scale factor that fits the wrapper and sets style.width/height
     explicitly, so this fixed ratio is never actually relied on again. */
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  /* The size video_canvas.js sets is the picture's own, border outside it
     (with the page's border-box the border ate 2 pixels, which the browser
     then squeezed out of the picture). */
  box-sizing: content-box;
}

#status-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 12px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  font-size: 12px;
  opacity: 0.85;
}

/* "A new version is available" (desktop app, js/ui/updatetoast.js), just
   above the status bar. Outside #status-bar so its opacity doesn't apply. */
#update-toast-anchor {
  position: relative;
  height: 0;
  z-index: 50;
}
.toast {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 14px;
  background: #4a3b1a;
  color: #ffdca8;
  border: 1px solid #8a6d2e;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  white-space: nowrap;
}
.toast[hidden] { display: none; }
.toast a {
  color: #fff;
  font-weight: bold;
}
.toast button {
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.toast button:hover { color: #fff; }
body.screen-only #update-toast-anchor { display: none; }

#status-bar-main {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Live diagnostic readouts (CPU/IO/CRTC/Gate Array) added while debugging
   real gameplay -- their text length varies a lot frame to frame (e.g. the
   CRTC/GA lines can grow well past the visible width), which on a single
   flex row with no wrapping forced the browser to keep reflowing/resizing
   the whole status bar every frame, visibly shaking the page. Wrapping
   this row onto as many lines as it needs (instead of forcing everything
   onto one line) keeps the bar's layout stable regardless of content
   length. */
#status-bar-debug,
#status-bar-debug2,
#status-bar-debug3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}

/* Disk activity LED -- mirrors a real drive's motor-on light (see
   diskui.js's _updateActivity()). Dim by default; lit amber while the FDC
   has a command in flight, so a loader stuck polling FDC status shows as a
   solid light instead of a normal command's brief flicker. */
.disk-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.4);
  transition: background-color 0.1s ease, box-shadow 0.1s ease;
}

.disk-led.active {
  background: #ffab40;
  box-shadow: 0 0 4px 1px rgba(255, 171, 64, 0.8);
}

/* Tools > Record Video / Record Sound in progress; click to stop. */
.rec-indicator {
  padding: 0 6px;
  border: none;
  border-radius: 3px;
  background: none;
  color: #ff5252;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.rec-indicator:hover { background: rgba(255, 82, 82, 0.15); }

/* Chooser for a .zip holding several disks, and askChoice's questions
   (js/ui/pickdialog.js). */
.pick-dialog {
  min-width: 260px;
  max-width: min(90vw, 480px);
  padding: 12px;
  background: var(--bg-panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.pick-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.pick-dialog h2 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.pick-list {
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  overflow-y: auto;
}
.pick-dialog button {
  padding: 6px 10px;
  background: none;
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: 4px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.pick-dialog button:hover,
.pick-dialog button:focus-visible {
  background: var(--bg);
  border-color: var(--border);
  outline: none;
}
.pick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
/* askChoice's question and its main answer. */
.pick-dialog p { margin: 0 0 4px; font-size: 13px; line-height: 1.45; }
.pick-dialog .pick-actions button { border-color: var(--border); text-align: center; }
.pick-dialog button.pick-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.pick-dialog button.pick-primary:hover,
.pick-dialog button.pick-primary:focus-visible { background: var(--accent); filter: brightness(1.12); border-color: var(--fg); }

/* Snapshot > State Slots (js/ui/stateslots.js), in a .pick-dialog. */
.slots-dialog { max-width: min(96vw, 1000px); }
.slots-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-height: 70vh;
  overflow-y: auto;
}
@media (max-width: 720px) { .slots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slot-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
}
.slot-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.slot-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #000;
  color: var(--fg);
  opacity: 0.9;
  font-style: italic;
}
.slot-card.empty .slot-thumb { background: var(--bg); opacity: 0.5; }
.slot-thumb img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.slot-info { min-height: 3.6em; line-height: 1.2; }
.slot-disk { opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.slots-dialog .slot-actions button { padding: 2px 6px; border-color: var(--border); font-size: 12px; text-align: center; }
.slots-dialog button:disabled { opacity: 0.4; cursor: default; }
.slots-dialog button.pick-primary:disabled { background: none; border-color: var(--border); color: var(--fg); font-weight: normal; filter: none; }
.slots-note { margin-top: 8px !important; opacity: 0.8; }

/* Machine > Upper ROMs (js/ui/romboard.js), in a .pick-dialog. */
.romboard-dialog { max-width: min(94vw, 560px); }
.romboard-list { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.romboard-row {
  display: grid;
  grid-template-columns: 2em auto 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 13px;
}
.romboard-row.off .romboard-name { opacity: 0.55; }
.romboard-row input[type=checkbox]:disabled { visibility: hidden; }
.romboard-slot { text-align: right; opacity: 0.7; font-variant-numeric: tabular-nums; }
.romboard-name { overflow-wrap: anywhere; }
.romboard-name.empty { opacity: 0.7; font-style: italic; }
.romboard-name.unseen { text-decoration: line-through; }
.romboard-detail { opacity: 0.7; font-size: 12px; }
.romboard-dialog .romboard-btn {
  padding: 2px 8px;
  border: 1px solid var(--border);
  font-size: 12px;
  text-align: center;
}
.romboard-dialog label.romboard-btn { border-radius: 4px; cursor: pointer; }
.romboard-dialog label.romboard-btn:hover { background: var(--bg); }
.romboard-dialog label.romboard-btn input { display: none; }
.romboard-dialog .romboard-btn:disabled { opacity: 0.4; cursor: default; }
.romboard-note { margin-top: 8px !important; font-size: 12px !important; opacity: 0.8; }
/* A phone: the buttons on a line of their own under the name. */
@media (max-width: 480px) {
  .romboard-row { row-gap: 2px; padding: 4px 0; border-bottom: 1px solid var(--border); }
  .romboard-name { grid-column: 3 / 6; }
  .romboard-row > label.romboard-btn { grid-column: 4; }
  .romboard-row > button.romboard-btn { grid-column: 5; }
}