/* ============================================================================
 * The room the television is in. Deliberately almost nothing: the cartridge is
 * 256×240 and everything on this page exists to keep the eye inside that
 * rectangle. The page is dark because a lit page around a lit screen makes the
 * screen look grey, which is the one thing a CRT pastiche cannot survive.
 * ========================================================================== */

:root {
  --room: #0a0a0c;
  --panel: #141419;
  --edge: #26262e;
  --ink: #8a8a96;
  --hot: #fc9838;      /* the cartridge's own gold */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--room);
  color: var(--ink);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
}

.rig {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
}

/* The set. A 256×240 picture scaled by whole numbers only — a fractional scale
 * puts uneven rows into the picture, and there is no such thing on hardware. */
.bezel {
  position: relative;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 8px;
  box-shadow: 0 0 0 1px #000 inset, 0 20px 60px rgba(0, 0, 0, 0.8);
  line-height: 0;
}

#screen {
  display: block;
  width: 768px;              /* 256 × 3 — the default until main.js fits it */
  height: 720px;             /* 240 × 3 */
  /* THE SCALE IS THE HOST'S JOB (audit M17). These max-* rules used to do the
   * fitting and produced fractional scales on any window under ~900px — the
   * exact uneven rows this comment forbids. main.js `fitScreen()` now picks
   * the largest whole-number multiple that clears both axes. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  border-radius: 3px;
}

.overlay {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid var(--edge);
  border-radius: 4px;
  color: #cfcfd8;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre;
  pointer-events: none;
}
.overlay.hidden { display: none; }
.overlay b { color: var(--hot); }

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  max-width: 820px;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.legend b { color: #d8d8e2; font-weight: 600; }
.legend .sep { color: #3a3a44; }
.legend .brand { color: var(--hot); font-weight: 700; letter-spacing: 0.14em; }
.legend a { color: var(--hot); text-decoration: none; border-bottom: 1px dotted; }
.legend a:hover { color: #f0bc3c; }
.controller-legend, .save-status { flex-basis: 100%; text-align: center; }
.save-status { color: #9aaba2; font-size: 10px; }
.save-status[data-state="error"], .save-status[data-state="blocked"] { color: #fc9838; }
.legend a:focus-visible { outline: 2px solid var(--hot); outline-offset: 4px; }

.legend button { background: transparent; border: 1px solid var(--edge); color: var(--hot); font: inherit; padding: 1px 6px; cursor: pointer; }
.legend button:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }

.language-control { display:inline-flex; align-items:center; gap:6px; }
.language-control select { font:inherit; color:inherit; background:#183c5c; border:1px solid currentColor; padding:4px 6px; max-width:200px; }
.language-control select:focus-visible { outline:2px solid #fc9838; outline-offset:3px; }
/* Keyboard settings use the browser's focus and form behavior. */
#controls-dialog { width:min(30rem,90vw); max-height:85vh; overflow:auto; color:#f4efe0; background:#171c20; border:2px solid #c9ae73; padding:1.5rem; font:16px/1.5 system-ui,sans-serif; }
#controls-dialog::backdrop { background:rgba(0,0,0,.8); }
#controls-dialog h2 { margin:0; }
#control-bindings { display:grid; gap:.5rem; }
#control-bindings label { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
#controls-dialog select, #controls-dialog button { color:#fff; background:#28333b; border:1px solid #adbdc4; padding:.5rem; font:inherit; }
#controls-dialog :focus-visible { outline:3px solid #ffdc79; outline-offset:3px; }
.controls-actions { display:flex; flex-wrap:wrap; gap:.6rem; }
#controls-message { min-height:1.5em; color:#ffdc79; }

/* ============================================================================
 * THE WIDE FRAME (slice D0) — a ballgame at THE PALACE with the HD layer
 * drawing (src/bobble/host.js sets the class and the sizes; nothing here
 * applies until it does). The picture is a 16:9 frame fitted to the window:
 * the bezel, its padding and the footer go, the 3D canvas takes the frame, the
 * HD layer sits over it, and the 8-bit canvas — still drawing — is an
 * integer-scaled overlay in the middle for what the layer has not replaced yet.
 * `!important` because main.js still writes the classic size to #screen inline.
 * ========================================================================== */
.rig.hd-wide { padding: 0; gap: 0; }
.rig.hd-wide .legend { display: none; }
.rig.hd-wide .bezel { width: var(--fw); height: var(--fh); padding: 0; border: 0; border-radius: 0; background: #000; box-shadow: none; overflow: hidden; }
.rig.hd-wide #screen {
  position: absolute !important; left: var(--sx) !important; top: var(--sy) !important;
  width: var(--sw) !important; height: var(--sh) !important; z-index: 3 !important; border-radius: 0;
}
.rig.hd-wide .overlay { z-index: 9; }