/* Arena page — the games arena's own chrome on top of the site theme. */

.hero.slim { padding: 40px 0 20px; }
.hero.slim h1 { font-size: 30px; margin: 0 0 10px; }
.hero.slim p.lead { font-size: 16px; margin: 0 0 18px; }

.statusbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 10px; font-size: 14px;
}
.chip {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 12px; color: var(--muted); background: var(--bg2);
}
.chip b { color: var(--text); font-weight: 600; }
.chip.ok { border-color: var(--ok); color: var(--ok); }
.chip.warn { border-color: var(--warn); color: var(--warn); }
.chip.err { border-color: var(--dark-red); color: var(--ember); }
.status-text { color: var(--muted); }
.launch p { font-size: 14.5px; color: var(--muted); margin: 8px 0; }
.hint { color: var(--warn); font-size: 14px; }
.launch.demo { border-color: var(--warn); }
.launch.demo p b { color: var(--warn); }
.launch.demo p a { color: var(--warn); }

.tabs { display: flex; gap: 8px; margin: 18px 0 14px; }
.tab {
  border: 1px solid var(--line); background: var(--bg2); color: var(--muted);
  border-radius: 8px; padding: 8px 18px; font-size: 15px; cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

.game { display: none; }
.game.on { display: block; }

.controls {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 14px; font-size: 14px; color: var(--muted);
}

/* original-tetris piece legend (swatches injected from PIECE_COLORS —
   the single source; the HTML carries no color copies) */
.pielegend {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -6px 0 12px; font-size: 12.5px; color: var(--muted);
}
.pielegend .swatches { display: inline-flex; gap: 6px; }
.pielegend .swatch {
  width: 24px; height: 15px; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: rgba(0, 0, 0, 0.6);
}
.pielegend .key i {
  display: inline-block; width: 11px; height: 11px; border-radius: 2px;
  vertical-align: -1px; margin-right: 4px;
}
.pielegend .ghostkey { background: rgba(255, 255, 255, 0.35); }
.pielegend .chosenkey { background: var(--muted); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
.controls label { display: flex; align-items: center; gap: 6px; }
.controls label.demo-seed { opacity: 0.55; }
.controls input[type="text"] {
  background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 4px 8px;
}
.ctl {
  border: 1px solid var(--line); background: var(--bg2); color: var(--text);
  border-radius: 8px; padding: 8px 20px; font-size: 15px; cursor: pointer;
}
.ctl:hover { background: var(--rust); }
.ctl.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ctl.primary:disabled { opacity: 0.5; cursor: wait; }

/* Two boards per row: laya (Python) | laya (Rust), then KatGPT modelless |
   raw baseline — one column on narrow screens. */
.boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .boards { grid-template-columns: 1fr; } }
.boardcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px;
}
.boardhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.boardhead > b { color: var(--ember); font-size: 16px; }
/* Fixed 4-line note box so side-by-side board heads line up whatever each
   lane's note length (a 2-line note beside a 4-line one skewed the row). */
.lane-note {
  color: var(--muted); font-size: 12.5px; line-height: 1.45;
  flex-basis: 100%; min-height: calc(4 * 1.45em);
}
.scorebox { margin-left: auto; display: flex; gap: 10px; align-items: baseline; }
.scorebox span { color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.scorebox b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums;
}

canvas {
  display: block; width: 200px; height: 400px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
}
#game-flappy canvas { width: 160px; height: 240px; }

/* Tetris + Flappy: board left, per-decision readout in the blank space to
   its right — ONE compact column of inline label:value rows (the old fixed
   92px label column wasted the narrow side). The statline spans the card
   under both, so the board column sizes to the canvas alone. The lanes
   board is a wide 3-lane panel with no useful blank side — its readout
   stays under the board. */
#game-tetris .boardcard, #game-flappy .boardcard {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 16px; align-items: start;
  /* rows pack to the top: a card stretched to its row-mate's height must
     not spread the extra space over its rows (the board floated down) */
  align-content: start;
}
#game-tetris .boardhead, #game-flappy .boardhead { grid-column: 1 / -1; }
#game-tetris .boardcard canvas, #game-flappy .boardcard canvas { grid-column: 1; grid-row: 2; }
#game-tetris .boardcard .stats { grid-column: 1 / -1; grid-row: 3; }
#game-tetris .boardcard .readout,
#game-flappy .boardcard .readout { grid-column: 2; grid-row: 2; }

.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; }
.lanes .lane {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  min-height: 90px; padding: 8px; font-size: 12.5px; color: var(--muted);
  display: flex; flex-direction: column; gap: 4px;
}
.lanes .lane .kind { font-weight: 600; color: var(--text); }
.lanes .lane.blocked { border-color: var(--dark-red); }
.lanes .lane.blocked .kind { color: var(--ember); }
.lanes .lane.clear .kind { color: var(--ok); }
.lanes .lane.chosen { outline: 2px solid var(--ember); }
.lanes .lane .p { font-family: ui-monospace, Menlo, monospace; color: var(--ember); }

.stats { color: var(--muted); font-size: 13px; margin: 8px 0 4px; }

.readout {
  display: grid; gap: 7px; align-content: start; font-size: 12.5px;
}
/* one compact column: each field is an inline label:value row — the old
   fixed 92px label column wasted the narrow space beside the board */
.readout div { display: block; }
.readout span { color: var(--muted); letter-spacing: 0.5px; font-size: 11px; margin-right: 6px; }
.readout em {
  font-style: normal; color: var(--text); font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; overflow-wrap: anywhere;
}

/* Tetris readout: fixed-height rows so the card never reflows per piece —
   SOURCE 4 lines, STATE SENT 6, QUESTION 4, ANSWER 4, ACTION 1, TIMING 4
   (owner call; the "…" placeholders and the live Cloudflare timing jumped
   the card height every piece). Longer text clamps with an ellipsis, full
   text on hover (setReadout sets the title). */
#game-tetris .readout div {
  --rl: 4; line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  height: calc(var(--rl) * 1.55em); -webkit-line-clamp: var(--rl); line-clamp: var(--rl);
}
#game-tetris .readout div:nth-child(2) { --rl: 6; }
#game-tetris .readout div:nth-child(5) { --rl: 1; }
/* the statline too: "…ms/decision" wraps to a 2nd line mid-game — reserve
   both lines up front so the card height is fixed from the first frame */
#game-tetris .boardcard .stats {
  line-height: 1.45; height: calc(2 * 1.45em); overflow: hidden;
}

/* readout under the board: the lanes cards, and every card once the card is
   too narrow for a side-by-side board + readout */
#game-lanes .readout { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
@media (max-width: 600px) {
  #game-tetris .boardcard, #game-flappy .boardcard { grid-template-columns: 1fr; }
  #game-tetris .boardcard canvas, #game-flappy .boardcard canvas,
  #game-tetris .boardcard .stats,
  #game-tetris .boardcard .readout, #game-flappy .boardcard .readout {
    grid-column: 1; grid-row: auto;
  }
  #game-tetris .readout, #game-flappy .readout {
    margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px;
  }
}

.explain {
  margin: 18px 0 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2); padding: 10px 16px; color: var(--muted); font-size: 14.5px;
}
.explain summary { cursor: pointer; color: var(--ember); font-size: 15px; }
.explain code { color: var(--text); }

.footnote { margin: 26px 0 40px; color: var(--muted); font-size: 14px; }
.footnote code { color: var(--text); }

footer.site-foot {
  border-top: 1px solid var(--line); padding: 18px 0; color: var(--muted); font-size: 13.5px;
}

/* TL;DR — the measured lane order, rendered from data/bench.json
   (base .tldr rules live in style.css; these are the arena's per-row rules) */
.tldr ul { list-style: none; margin: 8px 0 0; padding: 0; }
.tldr li { margin: 4px 0; }
.tldr li b { color: var(--text); }
.tldr li i { font-style: normal; font-weight: 700; display: inline-block; width: 1.2em; }
.tldr li.ok i { color: var(--ok); }
.tldr li.gap i { color: var(--ember); }
.tldr li.eq i { color: var(--muted); }

/* ── Tetris: the final-result charts (arena_charts.js) + the lane figures ── */
.results {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px 10px; margin: 0 0 16px;
}
.results h3, .lanes-how h3 { margin: 0 0 8px; font-size: 16px; color: var(--text); }
.results-note { color: var(--muted); font-size: 13px; margin: 8px 0 2px; }
.ac-legend { margin: 2px 0 8px; }
.bc-mut { color: var(--muted); }
.ac-fig { margin: 6px 0 10px; }
.ac-fig figcaption { font-size: 13.5px; color: var(--text); margin-bottom: 4px; }
/* Mobile legibility (design guide §6: chart labels ≥ 11 px): arena_charts.js
   lays each chart out at the available width, never below 600 user units,
   and pins min-width to that width — the svg never scales below 1:1, so
   every label renders at its CSS size and a narrow screen scrolls INSIDE
   .ac-scroll instead of shrinking the text (scripts/arena_legibility_smoke.mjs). */
.ac-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.ac-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ac-hint, .fig-hint { display: none; color: var(--accent); }
@media (max-width: 680px) { .ac-hint { display: inline; } }
.ac-grid { stroke: var(--line); stroke-width: 1; }
.ac-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ac-axis { fill: var(--muted); font-size: 11.5px; }
.ac-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ac-dot { stroke: var(--bg2); stroke-width: 2; }
.ac-x { stroke-width: 2.5; stroke-linecap: round; }
.ac-leader { stroke: var(--line); stroke-width: 1; }
.ac-label { fill: var(--muted); font-size: 12px; }
.ac-strong { fill: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ac-rowlabel { fill: var(--text); font-size: 12.5px; }
.ac-bar { outline: none; }
.ac-bar:hover, .ac-bar:focus { filter: brightness(1.25); }
.ac-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.ac-table { font-size: 13px; color: var(--muted); margin: 4px 0; overflow-x: auto; }
.ac-table summary { cursor: pointer; color: var(--ember); }
.ac-table table { border-collapse: collapse; margin-top: 6px; width: 100%; }
.ac-table th, .ac-table td { text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ac-table th { color: var(--text); font-weight: 600; }
.ac-warn { color: var(--warn); font-size: 13px; }
.lanes-how { margin: 22px 0 8px; }
.lanes-how .sub { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.lanefig {
  margin: 0 0 14px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px 12px;
}
.lanefig figcaption { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.lanefig figcaption b { color: var(--text); }
.lanefig img { width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto; }
/* The flow figures are mermaid SVGs with 16-unit labels (render_tetris_flows.py
   FONT_SIZE_PX) and view boxes up to ~990 wide: 990 × 11/16 ≈ 681, so 690 px
   keeps every label ≥ 11 px; narrower screens scroll inside the figure. */
.lanefig .fig-x, .fw-stage { overflow-x: auto; overscroll-behavior-x: contain; }
.lanefig .fig-x img, .fw-stage svg { min-width: 690px; }
@media (max-width: 760px) { .fig-hint { display: inline; } }

/* ── lane figures: step-through animation (assets/flow_walk.js) ──
   The two rulebook figures get their mermaid SVG inlined by JS (the <img>
   stays the no-JS fallback), walked one block per step with a description
   panel under the graphic. All highlight overrides are inline styles set
   by the JS; these rules only own opacity dimming, the pulse/dash motion
   and the widget chrome. Family accent only (the theme bans yellow). */
.fw-stage svg { width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto; }
svg.fw-on .node,
svg.fw-on .flowchart-link,
svg.fw-on .edgeLabel { transition: opacity 0.45s ease; }
svg.fw-on .node:not(.fw-active) { opacity: 0.35; }
svg.fw-on .node.fw-done { opacity: 0.66; }
svg.fw-on .flowchart-link:not(.fw-edge-active) { opacity: 0.22; }
svg.fw-on .edgeLabel:not(.fw-edge-active) { opacity: 0.25; }
.fw-active { animation: fw-pulse 1.8s ease-in-out infinite; }
@keyframes fw-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent) 25%, transparent)); }
  50% { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 60%, transparent)); }
}
.flowchart-link.fw-edge-active { animation: fw-dash 1.1s linear infinite; }
@keyframes fw-dash { to { stroke-dashoffset: -24; } }

.fw-controls {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; margin-top: 10px;
}
.fw-btn {
  border: 1px solid var(--line); background: var(--bg2); color: var(--text);
  border-radius: 8px; min-width: 40px; height: 32px; padding: 0 10px;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.fw-btn:hover { border-color: var(--ember); color: var(--ember); }
.fw-btn.fw-playing { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fw-dots { display: inline-flex; gap: 7px; align-items: center; margin: 0 4px; }
.fw-dot {
  width: 11px; height: 11px; border-radius: 50%; padding: 0;
  border: 1px solid var(--muted); background: transparent; cursor: pointer;
}
.fw-dot:hover { border-color: var(--ember); }
.fw-dot.fw-done { background: var(--rust); border-color: var(--rust); }
.fw-dot[aria-current="step"] {
  background: var(--ember); border-color: var(--ember);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.fw-count { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fw-step {
  max-width: 720px; margin: 10px auto 0; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); padding: 9px 14px 10px;
  font-size: 14px; color: var(--muted); line-height: 1.5;
}
.fw-step .fw-step-title { color: var(--ember); display: block; margin-bottom: 2px; }
.fw-step .fw-step-text { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .fw-active { animation: none; }
  .flowchart-link.fw-edge-active { animation: none; }
}

/* flow_walk.js: the mini tetris board replayed from the recorded rulebook
   walk, living BESIDE the walked flow (stacked under it on narrow screens).
   Stack cells use the games palette; family tokens for chrome. */
.fw-cols { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 14px; align-items: start; }
@media (max-width: 860px) { .fw-cols { grid-template-columns: 1fr; } .fw-board { margin: 0 auto; } }
.fw-board { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fw-board svg { display: block; }
.fw-board-chip {
  margin: 0; font-size: 12px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  padding: 5px 8px; text-align: left; box-sizing: border-box; width: 100%;
  /* fixed 4-line box: step chips vary in length, the column must not jump.
     min-height (not height) so the padding is INSIDE the 4-line box — a fixed
     content-height clipped line 4 mid-glyph; the clamp ellipsizes instead. */
  --rl: 4; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(var(--rl) * 1.5em + 10px);
  -webkit-line-clamp: var(--rl); line-clamp: var(--rl);
}
.fw-board-chip b { color: var(--ember); }
.fw-swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  vertical-align: -1px; margin: 0 1px;
}
.fw-ghost { pointer-events: none; }
.fw-hl { animation: fw-ring 1.4s ease-in-out infinite; }
@keyframes fw-ring {
  0%, 100% { stroke-opacity: 0.35; }
  50% { stroke-opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-hl { animation: none; stroke-opacity: 1; }
}
/* the spot scan: one candidate at a time flashes (transparent → full →
   transparent) in the engine's option order — the layer rests at 0 so the
   static brightness underneath stays the score encoding */
.fw-try {
  opacity: 0;
  animation: fw-try var(--try-dur, 1600ms) linear infinite;
  animation-delay: var(--try-delay, 0ms);
  pointer-events: none;
}
@keyframes fw-try {
  0% { opacity: 0; }
  4% { opacity: 1; }
  12% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-try { animation: none; opacity: 0; }
}