/* The Playground (templates/playground.html, frontend/src/playground/app.ts): the set on the left, the code on the right;
   on a phone (640px and narrower) the two stack, the set (and its board) first. Built from the site's own parts: .panel
   sheets, .tab-list tabs, the set page's .board, .fragment, .seat badges, .clock, .replay controls and .move-list, the
   .notice and .dlg dialogs. Only what is new is here, in style.css's tokens; the site is dark only (base.html). The
   editor's own styles are in areas/playground-editor.css. */

.area-playground .page-head { margin-bottom: 1.25rem; }
.pg-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.pg-layout > .panel { margin: 0; min-width: 0; padding: 1.1rem 1.25rem 1.25rem; }
.pg-head { margin-bottom: 0.75rem; }
.pg-head h2 { font-size: 1.375rem; }
.pg-note { margin: 0.35rem 0 0; font-size: 0.875rem; max-width: 62ch; }
.pg-empty { margin: 0.5rem 0 0; font-size: 0.875rem; }
.area-playground h3 { font-size: 1rem; margin: 1.25rem 0 0.45rem; }
.area-playground h3 .muted { font-weight: 500; font-size: 0.875rem; margin-left: 0.35rem; }

/* The choices: Format and Opponent side by side, the time limit beside Run. */
.pg-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.pg-field select { width: 100%; }
.pg-field select:disabled { opacity: 0.6; cursor: not-allowed; }

/* Tabs as buttons: the set page's .tab-list look (style.css), without a button's fill. */
.area-playground .pg-tabs { margin: 1rem 0 0.85rem; overflow-x: auto; scrollbar-width: none; }
.area-playground .pg-tabs .tab { background: transparent; color: var(--ink-2); border: 0; border-bottom: 2px solid transparent; border-radius: 0; min-height: 2.75rem; padding: 0.5rem 0.9rem; font-weight: 650; gap: 0.45rem; }
.area-playground .pg-tabs .tab:hover { background: var(--hover); color: var(--ink); border-color: transparent; border-bottom-color: var(--rule-strong); }
.area-playground .pg-tabs .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.area-playground .pg-tabs .tab:disabled { opacity: 0.5; }
.area-playground .pg-tabs .tab:disabled:hover { background: transparent; border-bottom-color: transparent; }
.area-playground .pg-tabs .tab[aria-selected="true"]:disabled:hover { border-bottom-color: var(--accent); }
.area-playground .pg-tabs .tab:focus-visible { outline-offset: -2px; }
.pg-tab-note { font-weight: 500; font-size: 0.8125rem; color: var(--ink-2); }

/* The board: the set page's frame (4:3, the slate), with the two player bars above it. */
.pg-board.board { margin: 0; }
.pg-players { display: flex; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.pg-player { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.3rem 0.6rem 0.3rem 0.4rem; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--paper); }
.pg-player.on-move { border-color: var(--rule-strong); }
.pg-player .badge { --seat-c: var(--seat-e); }
.pg-player-note { font-size: 0.75rem; font-weight: 650; white-space: nowrap; }
.pg-player-note:empty { display: none; }
.pg-player .clock { margin-left: 0.15rem; }
.pg-fragment .board-msg-nojs { display: none; }
.area-playground[data-playground] .pg-fragment:not([data-shown]) .ag-board .board-msg { visibility: hidden; }
.pg-board-msg { display: grid; place-items: center; height: 100%; padding: 1rem; text-align: center; color: var(--slate-ink-2); visibility: visible; }
.pg-fragment .ag-board { display: grid; place-items: center; }

/* The transport: the set page's replay controls, a step back and forward, and the 2D / 3D switch. */
.pg-replay { margin-top: 0.65rem; }
.pg-replay .replay-controls { gap: 0.5rem; }
.pg-replay .replay-controls .replay-scrub { flex: 1 1 10rem; }
.pg-replay .pg-step { width: 2.25rem; padding: 0; }
.pg-replay .pg-step svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-replay .replay-slider:disabled { opacity: 0.45; }
.pg-style { display: inline-flex; border: 1.5px solid var(--rule-strong); border-radius: var(--r-control); overflow: hidden; }
.pg-style[hidden] { display: none; }
.pg-style button { min-height: 2.25rem; padding: 0.3rem 0.8rem; border: 0; border-radius: 0; background: transparent; color: var(--ink-2); font-size: 0.875rem; }
.pg-style button:hover { background: var(--hover); color: var(--ink); }
.pg-style button[aria-pressed="true"] { background: var(--action); color: var(--on-action); }
.pg-style button:focus-visible { outline-offset: -3px; }

/* The result: one card for the set, a line per game. */
.pg-result { margin: 1rem 0 0; padding: 0.8rem 1rem; background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--rule-strong); border-radius: var(--r-sheet); }
.pg-result[data-kind="won"] { border-left-color: var(--check); }
.pg-result[data-kind="lost"], .pg-result[data-kind="error"] { border-left-color: var(--err); }
.pg-result[data-kind="drawn"] { border-left-color: var(--ink); }
.pg-result-title { margin: 0; font-size: 1.125rem; }
.pg-result[data-kind="won"] .pg-result-title { color: var(--check); }
.pg-result-games { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.9375rem; }
.pg-result-games li { margin: 0.2rem 0; }

/* The moves, in words: the set page's move list. */
.pg-moves h3 { margin-top: 1.25rem; }
.pg-moves ol.move-list { max-height: 18rem; }
.pg-moves ol.move-list .mv { grid-template-columns: 2.75rem minmax(0, 7.5rem) minmax(0, 1fr) auto; }
.pg-mv-text { font-size: 0.875rem; min-width: 0; }
.pg-moves ol.move-list:empty { display: none; }

/* The code panel. */
.pg-langs { margin-top: 0; }
.pg-toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.pg-view { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.pg-view .pg-size { min-width: 2.4rem; padding-inline: 0.5rem; font-weight: 700; }
.pg-size-now { min-width: 3.1rem; text-align: center; font-family: var(--font-mono); font-size: 0.75rem; }
.pg-full-btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.pg-full-btn .ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Full screen (app.ts enterFull): the editor block fills the screen, through the Fullscreen API where the browser has it
   and as a fixed layer over the page where it does not (an iPhone); Run, Stop, the progress line and the console move
   into .pg-dock under the editor while it lasts. */
html.pg-noscroll, html.pg-noscroll body { overflow: hidden; }
.pg-editor-wrap.is-full { position: fixed; inset: 0; z-index: 150; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 0.5rem; padding: 0.75rem max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  background: var(--paper); }
.pg-editor-wrap.is-full:fullscreen { width: 100%; height: 100%; }
.pg-editor-wrap.is-full .pg-toolbar { margin: 0; }
.pg-editor-wrap.is-full .pg-editor-slot { min-height: 0; }
.pg-editor-wrap.is-full .pg-editor-lang, .pg-editor-wrap.is-full .pg-editor-slot .pg-editor { height: 100%; }
.pg-editor-wrap.is-full .pg-status { margin: 0; }
.pg-dock[hidden] { display: none; }
.pg-dock { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "act prog" "out out"; align-items: center; gap: 0.4rem 0.9rem; }
.pg-dock .pg-actions { grid-area: act; margin: 0; }
.pg-dock .pg-progress { grid-area: prog; margin: 0; }
.pg-dock .pg-out { grid-area: out; }
.pg-dock .pg-out h3 { margin-top: 0; }
.pg-dock .pg-console { max-height: 22vh; }
.pg-toolbar button:disabled { opacity: 0.45; }
.pg-editor-slot { position: relative; border: 1px solid var(--rule-strong); border-radius: var(--r-sheet); overflow: hidden; background: var(--field); min-height: 12rem; }
.pg-editor-slot .pg-editor { height: 24rem; }
@media (min-width: 900px) { .pg-editor-slot .pg-editor { height: 30rem; } }
.pg-editor-lang[hidden] { display: none; }
.pg-editor-wait { margin: 0; padding: 1rem; font-size: 0.875rem; }
.area-playground.is-running .pg-editor-slot { border-color: var(--rule); }
.pg-status { margin: 0.4rem 0 0; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.6; overflow-wrap: anywhere; }
.pg-status.pg-too-big { color: var(--err); }
.pg-status .pg-note-inline { font-family: var(--font); font-size: 0.8125rem; color: var(--ink); }
.pg-status button.linklike { min-height: 0; font: 600 0.8125rem var(--font); color: var(--teal); text-decoration: underline; text-underline-offset: 0.2em; }
.pg-contract { margin: 0.9rem 0 0; font-size: 0.9375rem; }
.pg-run-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin-top: 1rem; }
.pg-run-row .pg-field { flex: 0 1 12rem; }
.pg-actions { flex: 1 1 auto; }
.pg-actions .pg-run { min-width: 10rem; min-height: 2.75rem; font-size: 1rem; }
.pg-actions [hidden] { display: none; }
.pg-progress { margin: 0.6rem 0 0; padding: 0.5rem 0.75rem; font-size: 0.875rem; background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--teal); border-radius: var(--r-control); }
.pg-progress[hidden] { display: none; }

.pg-claude { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.pg-claude .pg-claude-h { margin: 0 0 0.5rem; font-size: 0.9375rem; }
.pg-claude .actions { gap: 0.5rem; }
.pg-claude-status { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--ink); }
.pg-claude-status[hidden] { display: none; }

.pg-how { margin-top: 1rem; padding: 0.6rem 0.85rem; border: 1px solid var(--rule); border-radius: var(--r-sheet); background: var(--paper); }
.pg-how ol { margin: 0.6rem 0 0.25rem; padding-left: 1.2rem; font-size: 0.9rem; }
.pg-how p { margin: 0.5rem 0 0.1rem; font-size: 0.875rem; color: var(--ink-2); }

/* The bot's moves and the console: text that scrolls in its own box. */
.pg-out h3 { margin-top: 1.25rem; }
.pg-botmoves { list-style: none; margin: 0; padding: 0; max-height: 11rem; overflow-y: auto; border: 1px solid var(--rule); border-radius: var(--r-sheet); background: var(--paper); }
.pg-botmoves:empty { display: none; }
.pg-bm { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) auto; gap: 0.75rem; align-items: baseline; margin: 0; padding: 0.3rem 0.75rem; border-bottom: 1px solid var(--rule); font-size: 0.8125rem; }
.pg-bm:last-child { border-bottom: 0; }
.pg-bm-n { color: var(--ink-2); white-space: nowrap; }
.pg-bm-move { font-family: var(--font-mono); font-size: 0.75rem; background: none; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-bm-ms { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-2); text-align: right; white-space: nowrap; }
.pg-bm-bad .pg-bm-ms { color: var(--err); font-family: var(--font); font-weight: 650; }
.pg-console-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; }
.pg-console-head h3 { margin: 0; }
.pg-console { margin-top: 0.45rem; max-height: 14rem; min-height: 4rem; overflow: auto; padding: 0.5rem 0.75rem; background: var(--slate); border: 1px solid var(--rule); border-radius: var(--r-sheet); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.55; }
.pg-console .pg-empty { font-family: var(--font); margin: 0; }
.pg-line { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.pg-line.pg-stderr { color: var(--slate-err); border-left: 2px solid var(--err-line); padding-left: 0.5rem; margin-left: -0.6rem; }
.pg-line.pg-info { color: var(--ink-2); font-style: italic; }
.pg-foot { margin: 1.25rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-size: 0.9375rem; }

.pg-runner { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }

/* The Claude dialogs (style.css's .dlg). */
dialog.pg-dialog { width: min(620px, calc(100vw - 32px)); }
.pg-dialog .dlg-copy { min-height: 14rem; }
.pg-dialog-said { margin: 0 0 0.5rem; font-size: 0.875rem; }
.pg-dialog-said:empty { display: none; }
.pg-dialog [role="alert"] { color: var(--err); }

/* Tablet: the panels stack once the code would get too narrow, the set (with the board) first. */
@media (max-width: 960px) {
  .pg-layout { grid-template-columns: minmax(0, 1fr); }
}
/* Phone: the site's 16px gutter (style.css); the panels go edge to edge of it with less padding. */
@media (max-width: 640px) {
  .area-playground .page-head { margin-top: 1.25rem; }
  .area-playground .page-head h1 { font-size: 1.875rem; }
  .pg-layout > .panel { padding: 0.9rem 0.85rem 1rem; }
  .pg-choices { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .pg-players { gap: 0.4rem; }
  .pg-player { flex: 1 1 100%; justify-content: space-between; }
  .pg-player .clock { margin-left: auto; }
  .pg-replay .replay-controls .replay-scrub { flex-basis: 100%; order: 5; }
  .pg-view { margin-left: 0; flex: 1 1 100%; }
  .pg-view .pg-full-btn { margin-left: auto; }
  .pg-dock .pg-console { max-height: 18vh; }
  .pg-run-row .pg-field { flex: 1 1 100%; }
  .pg-actions .pg-run { flex: 1 1 auto; }
  .pg-moves ol.move-list .mv { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .pg-moves ol.move-list .mv .mv-seat { display: none; }
  .pg-bm { grid-template-columns: minmax(0, 1fr) auto; }
  .pg-bm-n { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .pg-result:not([hidden]) { animation: board-in 0.25s ease-out; }
}
/* A notice, the status lines and the result stay hidden until the script shows them (.notice's own display would show them). */
.area-playground [hidden] { display: none !important; }
.pg-botmoves, .pg-console, .pg-moves ol.move-list { scrollbar-color: var(--rule-strong) transparent; scrollbar-width: thin; }