:root {
  --bg: #15130f;
  --panel: #201d17;
  --line: #3a342a;
  --text: #e9e2d0;
  --muted: #a39a86;
  --accent: #d9a441;
  --accent-ink: #1b1508;
  --bad: #e0775f;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* `display` rules below (#game's grid) would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Segoe UI", system-ui, sans-serif;
}

code { font-family: Consolas, ui-monospace, monospace; font-size: 0.92em; color: var(--accent); }

#setup {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 16px 3rem;
}

h1 { font-size: 1.7rem; margin: 0 0 0.25rem; letter-spacing: 0.01em; }
h1 span { color: var(--muted); font-weight: 400; }
h2 { font-size: 1.05rem; margin: 0 0 0.75rem; display: flex; gap: 0.6rem; align-items: center; }
.n {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: 0.85rem; font-weight: 700;
}
.lede { color: var(--muted); margin: 0 0 1.5rem; }

section, details {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
}
summary { cursor: pointer; font-weight: 600; }

label { display: block; margin: 0.5rem 0; color: var(--muted); }
label.check { display: flex; gap: 0.5rem; align-items: baseline; }
input[type="text"], textarea {
  display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.6rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  font: 14px Consolas, ui-monospace, monospace;
}
textarea { resize: vertical; }

button {
  padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid var(--line);
  background: #2c2820; color: var(--text); font: inherit; cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }

.row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
/* The pop-out window is game-sized: the setup page there drops its outer margin. */
body.popout #setup { padding-top: 1rem; }
.go { margin-top: 1.25rem; }
.note { color: var(--muted); font-size: 0.9rem; margin: 0.5rem 0 0; }
/* The alternative to step 2 (P183): set apart from the numbered steps. */
section.alt { background: transparent; border-style: dashed; }
section.alt h2 { color: var(--muted); }
/* A row of buttons under a note gets air (sam-2026-10-09). */
.note + .row { margin-top: 0.85rem; }
/* The details inside the dashed section is not a second box. */
section.alt details { background: none; border: 0; padding: 0; margin: 0; }
section.alt details[open] summary { margin-bottom: 0.25rem; }
#keep-row { font-size: 0.9rem; margin-top: 0.75rem; }
#keep-row input { flex: none; }
#saved-row { margin-top: 0.5rem; }
#saved-row .note { margin: 0; }
/* The saved copy's progress in the bar (P183). */
#cache-progress { color: var(--muted); font: 12px Consolas, ui-monospace, monospace; white-space: nowrap; }
#cache-progress.bad { color: var(--bad); }
.bad { color: var(--bad); }

/* The game: the stage fills the window above the bar; present.js sizes and centres the canvas in
   it (on whole device pixels) for the chosen scaling mode, and the canvas box is always exactly
   the image, which the pointer mapping relies on. The one column is `minmax(0, 1fr)`, never the
   default `auto`: an `auto` column grows to the bar's min-content width, which is the whole
   status line (nowrap), so a long status made the stage wider than the window and the image,
   centred in it, sat right of centre and ran off the right edge (the pop-out's black column on
   the left, P28). */
#game {
  position: fixed; inset: 0; display: grid;
  grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  background: #000;
}
#stage { position: relative; overflow: hidden; }
#stage canvas {
  position: absolute; left: 0; top: 0;
  outline: none;
  cursor: default;
}
#bar {
  display: flex; align-items: center; gap: 0.75rem; min-height: 1.8rem; padding: 0.15rem 0.75rem;
  background: #0d0c0a; border-top: 1px solid var(--line);
}
/* The connection indicator (.link below) takes the bar's free width, left. */
#status { flex: 1; min-width: 0; }
#link-text { overflow: hidden; text-overflow: ellipsis; }
/* Focusable (a paste needs an editable target) but off-screen and invisible. */
#clip {
  position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; opacity: 0;
  padding: 0; border: 0; resize: none;
}
.scaling { margin: 0; display: flex; gap: 0.4rem; align-items: center; font-size: 12px; white-space: nowrap; }
.scaling select {
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 4px;
  font: 12px "Segoe UI", system-ui, sans-serif; padding: 0.1rem 0.3rem;
}

/* Master volume, just left of the scaling menu (volume.js). */
.volume { display: flex; gap: 0.3rem; align-items: center; font-size: 12px; }
.volume button {
  background: none; border: 0; padding: 0 0.1rem; color: var(--text); cursor: pointer;
  font: 13px "Segoe UI Emoji", "Segoe UI", system-ui, sans-serif; line-height: 1;
}
.volume input[type=range] { width: 5.5rem; margin: 0; accent-color: var(--muted); }

/* Connection indicator, left of the volume (linkinfo.js): a dot and the state. */
.link { display: flex; gap: 0.35rem; align-items: center; font: 12px Consolas, ui-monospace, monospace; color: var(--muted); white-space: nowrap; }
.link .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.link.good .dot { background: #5fb36a; }
.link.bad .dot { background: var(--bad); }
.link.bad { color: var(--bad); }

/* Fullscreen button, right of the scaling menu (fullscreen.js). */
.barbtn {
  display: grid; place-items: center; width: 1.4rem; height: 1.4rem; padding: 0;
  background: none; border: 0; border-radius: 4px; color: var(--text);
}
.barbtn:hover:not(:disabled) { background: #2c2820; }