/* Play: the preview -------------------------------------------------------- */

/* The game's own surface, the loudest in the studio — its three colours blown
   out behind a big halftone — because it is where the game itself is. It was
   the rail's until the rail became this mode (spec.md §6). */
.play-mode {
  background-color: var(--look-deep);
  background-image:
    radial-gradient(oklch(0.12 0.03 300 / 0.34) 9px, transparent 9.5px),
    radial-gradient(oklch(0.12 0.03 300 / 0.22) 3.5px, transparent 4px),
    linear-gradient(180deg, oklch(0.16 0.04 300 / 0.1), oklch(0.16 0.04 300 / 0.42)),
    radial-gradient(520px 400px at 14% 6%, color-mix(in oklab, var(--look-primary) 62%, transparent), transparent 62%),
    radial-gradient(440px 540px at 96% 30%, color-mix(in oklab, var(--look-accent) 56%, transparent), transparent 60%),
    radial-gradient(620px 460px at 24% 88%, oklch(0.46 0.14 320 / 0.45), transparent 66%),
    radial-gradient(300px 320px at 78% 66%, color-mix(in oklab, var(--look-highlight) 22%, transparent), transparent 70%);
  background-size: 18px 18px, 18px 18px, auto, auto, auto, auto, auto;
  background-position: 0 0, 9px 9px, 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* Play is the game and, when it has any, its tweaks, each side scrolling on
   its own so the game stays on screen while a number is tried (2026-10-05):
   under the game while Play is narrow, the game taking GAME_SHARE of it
   (main.js), and beside it from 700px across, where they can be put away for
   a bigger game. A container query, because Play's width is the pane's and
   not the window's — the sidebar takes 260 of a laptop's. */
.play-mode { flex: 1; min-height: 0; display: flex; flex-direction: column; container-type: inline-size; }
.play-split { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.play-split.has-tweaks > .play-game { flex: 0 1 auto; max-height: 60%; }
/* Where the tweaks scroll away under the game. */
.play-split > .tweaks { border-top: 1px solid color-mix(in oklab, var(--look-primary) 35%, transparent); }
.preview-foot .tweaks-toggle { display: none; }
@container (min-width: 700px) {
  .play-split { flex-direction: row; }
  .play-split.has-tweaks > .play-game { flex: 1 1 0; max-height: none; }
  .play-split > .tweaks {
    flex: 0 0 320px;
    border-top: none;
    border-left: 1px solid color-mix(in oklab, var(--look-primary) 35%, transparent);
    background: oklch(0.12 0.03 300 / 0.45);
  }
  .play-split.tweaks-shut > .tweaks { display: none; }
  .preview-foot .tweaks-toggle { display: inline-block; }
}

.preview-wrap { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 9px; flex: 0 0 auto; }
/* Square at the foot, where the preview's own controls carry on under it. */
.preview-frame {
  width: 100%;
  border: 1px solid color-mix(in oklab, var(--look-primary) 55%, transparent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--panel-3);
  display: block;
}
/* The placeholder is room and nothing else: its height and the frame's width
   are written by placePreview, from the shape the reader is trying the game
   in, and the live frame laid exactly over it carries the border. A border
   here as well would draw a second one around the frame the moment the shape
   is narrower than the pane. */
.preview-frame.slot { border-color: transparent; background: none; }
/* The live frame is one node on the body, never moved — an <iframe> reloads
   whenever it leaves the document, and render() rebuilds the tree — laid over
   the placeholder Play holds for it (main.js, placePreview): its size and
   place come from the placeholder's rectangle, so nothing else is said here.
   Under the banner and every dialog. */
.preview-frame.live { position: fixed; z-index: 3; margin: 0; }
/* Under the frame: the controls, the best score in highlight, then the shape
   and Open. They belong to the preview, so they live on the preview. */
.preview-foot {
  /* As wide as the frame over it, whatever shape that is — --frame-w is
     placePreview's, and 100% is the shape that fills the pane. */
  width: var(--frame-w, 100%);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -9px;
  padding: 9px 12px;
  background: color-mix(in oklab, var(--look-primary) 22%, transparent);
  border: 1px solid color-mix(in oklab, var(--look-primary) 55%, transparent);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.preview-foot .best {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--num);
  margin-right: auto;
}
.preview-foot button.icon {
  font-size: 12.5px;
  font-weight: 600;
  padding: 2px 6px;
  white-space: nowrap;
  color: color-mix(in oklab, var(--look-primary) 25%, white);
}
.preview-foot button.icon:hover:not(:disabled) { color: #fff; background: oklch(0.98 0.01 300 / 0.12); }
/* The preview player's own (preview-player.js): paused, at another speed, or
   the robot playing is a state the game is in, so the button saying so is lit
   in the studio's cyan — behind it too, since 🤖 is an emoji and no colour of
   text reaches it. */
.preview-foot button.icon.on {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 24%, transparent);
}
.preview-foot button.icon svg { display: block; }
/* An inline-flex anchor propagates its underline to the button inside it. */
.preview-foot a { display: inline-flex; text-decoration: none; }
/* The list of speeds is a column of short numbers, not a menu of words. */
.preview-foot .menu { min-width: 0; }
.preview-note { font-size: 11px; margin: 4px auto 0; width: var(--frame-w, 100%); padding: 0 4px; }
/* What the robot found, in the note's place: the game's error, and the way
   back to just before it. */
.robot-note {
  width: var(--frame-w, 100%);
  margin: 6px auto 0;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.robot-note .hint, .tweaks .hint { font-size: 12px; margin: 0; }

/* Under the game: the tweaks — the game's tuning files as fields, tried in
   the running game and written only on Save (tweaks.js). A row being tried
   wears the studio's cyan and a dot: it is a state the game is in, and the eye
   has to find what to undo. */
.tweaks { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.tweaks-head { display: flex; align-items: baseline; gap: 8px; }
.tweaks button.tweaks-file { align-self: flex-start; font-family: var(--mono); font-size: 12px; text-decoration: none; }
.tweaks .cfg { padding: 0; }
.tweaks .cfg-row.tweaked .cfg-name { color: var(--accent); }
.tweaks .cfg-row.tweaked .cfg-name::after { content: ' ●'; }
.tweaks-bar { gap: 6px; justify-content: flex-end; }