/* Playground layout. Colors come from the shared brand system
   (../assets/brand.css); this file owns only structure. */

html, body { height: 100%; }
/* Mobile browsers grow and shrink the visible area as their chrome collapses.
   `100%` resolves against the tall end of that range, which leaves the bottom
   pane cut off below the address bar until the user scrolls; `dvh` tracks it. */
@supports (height: 100dvh) { html, body { height: 100dvh; } }
body { display: flex; flex-direction: column; overflow: hidden; }

/* --- header ------------------------------------------------------------ */
.pg-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.pg-header .brand { display: flex; align-items: center; gap: 0.55rem; }
.pg-header .sub { color: var(--muted); font-size: 0.9rem; }
.pg-header nav { display: flex; gap: 1.2rem; }
.pg-header nav a { color: var(--muted); font-weight: 500; font-size: 0.9rem; }
.pg-header nav a:hover { color: var(--text); text-decoration: none; }

/* --- toolbar ----------------------------------------------------------- */
.pg-toolbar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 1.1rem; border-bottom: 1px solid var(--border);
  background: var(--surface-2); flex-wrap: wrap;
}
.pg-toolbar .spacer { flex: 1; }
.pg-toolbar .status { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.pg-toolbar .backend {
  color: var(--muted); font-size: 0.78rem; margin-right: 0.9rem;
  padding: 0.15rem 0.5rem; border: 1px solid var(--border); border-radius: 999px;
}
.pg-toolbar .status.err { color: var(--danger); }
/* One height for every toolbar control, border-box so the value is the final
   row height regardless of each element's own font metrics — a <select> and a
   <button> don't share line-height math, so matching padding alone left them a
   few px apart. */
.pg-toolbar select, .pg-toolbar .btn, .pg-toolbar #args {
  box-sizing: border-box; height: 2.1rem;
}
.pg-toolbar select {
  font: inherit; font-size: 0.88rem; padding: 0 0.5rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
}
/* Narrower than brand.css's .btn, which is sized for the landing page's calls
   to action rather than for a row of controls. Scoped so that page keeps its. */
.pg-toolbar .btn { padding: 0 0.8rem; }
.pg-toolbar #args {
  font: inherit; font-size: 0.85rem; font-family: var(--mono, ui-monospace, monospace);
  padding: 0 0.55rem; min-width: 14rem; flex: 0 1 22rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
}
.pg-toolbar #args::placeholder { color: var(--muted); opacity: 0.8; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:disabled:hover { border-color: var(--border); }

/* --- split panes ------------------------------------------------------- */
.pg-main {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0;
}
.pg-editor {
  min-height: 0; margin: 0; overflow: auto;
  background: var(--code-bg); border-right: 1px solid var(--border);
}
/* CodeMirror mounts its own DOM inside #editor; fill the pane. */
.pg-editor .cm-editor { height: 100%; }

/* --- right side: tabs + panes ------------------------------------------ */
.pg-right { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pg-tabs {
  display: flex; gap: 0.2rem; padding: 0.4rem 0.6rem 0;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.pg-tab {
  font: inherit; font-size: 0.85rem; padding: 0.4rem 0.9rem;
  border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-2); color: var(--muted); cursor: pointer;
  position: relative; top: 1px;
}
.pg-tab.active { background: var(--bg); color: var(--text); border-bottom: 1px solid var(--bg); }
.pg-tab:hover:not(.active) { color: var(--text); }
.pg-tabs .spacer { flex: 1; }
/* An action on the pane below rather than a tab, so it sits flat in the strip
   instead of wearing a tab's raised edges. Hidden for a pane it cannot act on
   (app.js) — the strip is shared, but clearing only means anything for Output. */
.pg-tab-action {
  font: inherit; font-size: 0.8rem; padding: 0.25rem 0.7rem;
  align-self: center; margin-bottom: 0.35rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.pg-tab-action:hover { color: var(--text); }
.pg-tab-action[hidden] { display: none; }

.pg-panes { flex: 1; min-height: 0; position: relative; }
.pg-pane { display: none; height: 100%; min-height: 0; overflow: auto; }
.pg-pane.active { display: block; }

.pg-output {
  margin: 0; border: 0; padding: 1rem 1.2rem; font-family: var(--font-mono);
  font-size: 0.92rem; line-height: 1.55; tab-size: 2;
  background: var(--bg); color: var(--text); white-space: pre-wrap;
  word-break: break-word;
}
.pg-output.err { color: var(--danger); }
.pg-output .placeholder { color: var(--muted); }

/* xterm.js fills the TUI pane; it manages its own internal canvas sizing
   from the fixed cols/rows given at construction (see app.js), not from
   this container's box — the padding just keeps the game off the edges. */
.pg-tui { padding: 0.6rem; background: #000; }

/* Canvas pane: centre the framebuffer and scale it up with crisp (nearest-
   neighbour) pixels, so a 160x160 game fills the pane without blurring. */
.pg-canvas {
  display: flex; align-items: center; justify-content: center;
  background: #000; outline: none;
}
.pg-canvas canvas {
  image-rendering: pixelated;
  /* Fill the pane's width, but never its height: a replaced element with a
     natural ratio keeps it under max-height by giving width back (CSS 2.1
     §10.4), so any framebuffer shape — square 160x160, wide 640x380 —
     letterboxes instead of cropping or squishing. The element box stays
     equal to the drawn pixels, which sendMouse's coordinate mapping needs. */
  width: 100%;
  height: auto;
  max-height: 100%;
}

@media (max-width: 720px) {
  .pg-main { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .pg-editor { border-right: 0; border-bottom: 1px solid var(--border); }
  .pg-header { padding: 0.6rem 0.9rem; }
  .pg-header .sub { display: none; }

  /* The toolbar wraps to three rows on a phone — controls, arguments, status —
     and takes a quarter of the screen with it. Ordering the argument box last
     folds the status back onto the control row, so it costs two rows and
     nothing is hidden. The backend badge does go: it reports which wasm build
     loaded, which is diagnostic rather than something to act on. */
  .pg-toolbar { padding: 0.45rem 0.7rem; gap: 0.4rem; }
  .pg-toolbar .backend, .pg-toolbar .spacer { display: none; }
  .pg-toolbar #args { order: 1; flex: 1 1 100%; min-width: 0; }
  /* The picker sizes itself to its longest example title, which alone is wider
     than half a phone. Letting it flex instead makes it take what the row has
     left, which is also what the spacer was there to do. */
  .pg-toolbar select { flex: 1 1 6rem; min-width: 0; }

  /* 16px is the threshold below which iOS Safari zooms the page in on focus,
     leaving the layout scrolled sideways with no way back but a pinch. It
     applies to the editor too: CodeMirror's surface is contenteditable. The
     taller controls are the same trade — nearer a thumb-sized tap target. */
  .pg-toolbar select, .pg-toolbar .btn, .pg-toolbar #args { height: 2.4rem; }
  .pg-toolbar select, .pg-toolbar #args { font-size: 16px; }
  .pg-main .pg-editor .cm-editor { font-size: 16px; }
  .pg-tab { padding: 0.5rem 1rem; }
  .pg-tab-action { padding: 0.35rem 0.8rem; }
}

/* --- embed mode (?embed=1) --------------------------------------------- */
/* A page hosting the Playground in an iframe brings its own branding and
   supplies the source through ?code=, so the standalone header, the example
   picker and the argument box have nothing to do here. Run/Stop, the status
   and the panes stay: they are the part that is being embedded. */
.embed .pg-header,
.embed .example-select,
.embed #args,
.embed .backend { display: none; }
.embed .pg-toolbar { padding: 0.45rem 0.8rem; }
/* Stacked at every width, not just the phone one the standalone page splits
   at: a host page gives the frame the full column width but only a few
   hundred pixels of height, so side by side leaves the source wrapping in
   half the width while the output's few lines waste the other half. The
   source takes the larger share — it is the thing the host is showing. */
.embed .pg-main { grid-template-columns: 1fr; grid-template-rows: 1.35fr 1fr; }
.embed .pg-editor { border-right: 0; border-bottom: 1px solid var(--border); }

/* --- canvas-only mode (?view=canvas) ------------------------------------ */
/* A poster-and-play-button host wants just the running game — no source,
   no Run/Stop/status, no tab strip. .pg-editor is gone, so .pg-main drops
   to a single column instead of leaving its half of the grid empty; the
   canvas pane (already flex: 1 inside .pg-right) fills what remains. */
.canvas-only .pg-toolbar,
.canvas-only .pg-tabs,
.canvas-only .pg-editor { display: none; }
/* grid-template-rows needs stating explicitly: with .pg-editor gone,
   .pg-right is the grid's only item, and an unset (auto) row sizes to its
   content height rather than stretching to fill .pg-main — leaving the
   canvas pane's own #000 short of the bottom and the host page's
   background showing through beneath it. */
.canvas-only .pg-main { grid-template-columns: 1fr; grid-template-rows: 1fr; }
/* .pg-pane's base overflow: auto is for the Output/TUI panes, which can
   genuinely grow past their box; the canvas pane never needs to scroll,
   and a few px of sub-pixel layout slop was enough to paint a scrollbar
   sliver along the edge. */
.canvas-only .pg-canvas { overflow: hidden; }