/* ── Grid games: shared chrome ─────────────────────────────────────────────
   The home stats strip, the solved tick, and the victory summary line, shared
   by Queens and Pipes. No stars anywhere — a puzzle is solved or not, and what
   we show is the time and the hints it took. Tokens only. */

.pz-statstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  width: min(92vw, 440px);
  margin-top: var(--space-8);
}
.pz-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-2);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.pz-stat b { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--accent); }
.pz-stat span {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
}

.pz-done { display: inline-flex; color: var(--green); }
.pz-done svg {
  width: var(--icon); height: var(--icon);
  fill: none; stroke: currentColor; stroke-width: var(--stroke);
  stroke-linecap: round; stroke-linejoin: round;
}

.pz-summary {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  color: var(--dim);
  margin-top: var(--space-2);
}

/* the banner shown when a solved puzzle is reopened to view the saved answer */
.pz-review {
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-5);
  border: var(--hairline) solid var(--success-line);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--green);
  text-align: center;
}


/* ══ the shared play-control clusters (src/ui/play-options.js) ═══════════════
   .q-sub — the top bar's footer: a thin mono strip under the chrome, moves on
   the left, time/etc on the right. .q-ur — undo/redo, riding DOM order: as the
   second-to-last child of the play column it sits just above the foot, and in
   the landscape row it stands just left of the right rail. .po-chip — any
   option that is not a digit still wears the numgrid chip so every game's
   controls are the same square; icons inherit the stroke style, swatches fill
   most of the chip. */

.q-sub {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-1) var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--dim);
}
.q-sub:not(:has(span:not(:empty))) { display: none; }

.q-ur { display: flex; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--space-5) var(--space-3); }
/* disabled undo/redo stays clearly findable — chip-level presence, quiet ink.
   0.3 opacity read as "nothing there" and players never discovered the pair. */
.q-ur .icon-btn:disabled { opacity: 0.55; color: var(--mute); background: var(--surface); }

.po-chip svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor;
  stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
/* mode toggles (drag:false options) read as tools, not values — the eraser's
   dashed vocabulary */
.ng-chip.po-mode { background: var(--surface); border-style: dashed; color: var(--dim); }
.ng-chip.po-mode.armed { border-style: solid; }
.po-chip .po-swatch { width: 62%; height: 62%; border-radius: 9px; display: block; }
.po-chip .po-flip { display: inline-flex; transform: scaleX(-1); }
.ng-ghost.po-ghost { background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); }
.ng-ghost.po-ghost svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor;
  stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.ng-ghost.po-ghost .po-swatch { width: 62%; height: 62%; border-radius: 9px; display: block; }

/* ══ landscape rails — every grid game, one system ═══════════════════════════
   Below 700px of height the portrait stack wastes the whole width, so the play
   screen turns sideways: the top chrome becomes a LEFT rail of icons, the foot
   becomes a RIGHT rail with the game's selection palette (numbers / colours /
   brushes / modes) standing vertically — the same shape as circuits' card deck —
   and the board takes the whole middle. Text goes: no titles, no pill labels;
   every control is its icon. Boards that size themselves in JS measure .q-stage,
   so they pick up the reclaimed room with no help.

   Per-game files may only add BOARD sizing and palette quirks under the same
   gate — chrome/foot rules live here and nowhere else (the old copy of these
   rules in queens.css was unscoped and broke every other game's landscape).

   Every selector rides the `.screen` compound: this file loads BEFORE the
   per-game sheets, a media query adds no specificity, and the game files set
   flex-direction/padding on the same bare classes — without the extra class
   the bases would win the cascade and the rails would silently not exist. */
@media (orientation: landscape) and (max-height: 700px) {
  .screen.queens-play, .screen.pipes-play, .screen.bonds-play, .screen.mambo-play, .screen.mosaic-play, .screen.tower-play,
  .screen.nono-play, .screen.snap-play, .screen.lits-play, .screen.shikaku-play, .screen.sets-play, .screen.lo-play,
  .screen.kk-play, .screen.sky-play, .screen.sg-play { flex-direction: row; }

  /* ── left rail: navigation + undo/redo + menu, icons only ── */
  .screen .q-chrome, .screen .lits-chrome {
    flex-direction: column;
    border-bottom: none;
    border-right: var(--hairline) solid var(--line);
    padding: var(--space-4);
    padding-left: calc(var(--space-4) + var(--sal));
  }
  .screen .q-chrome .spacer, .screen .lits-chrome .spacer { flex: 1; }
  /* the level/daily name earns nothing at this height — the icons say it all */
  .screen .q-chrome .q-title, .screen .q-chrome .q-tag { display: none; }

  /* ── right rail: the game's OPTIONS, standing vertically, nothing else ── */
  .screen .q-foot, .screen .lits-foot {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: none;
    border-left: var(--hairline) solid var(--line);
    padding: var(--space-4);
    padding-right: calc(var(--space-4) + var(--sar));
    padding-bottom: calc(var(--space-4) + var(--sab));
  }
  /* a foot with no tenants (games without a palette) folds away entirely */
  .screen .q-foot:empty, .screen .lits-foot:empty,
  .screen .q-foot:not(:has(> :not(:empty))) { display: none; }
  /* the rail must never be squeezed by the board row — it is sized by its options */
  .screen .q-foot, .screen .lits-foot { flex: none; }
  /* number chips are built to SHARE A ROW (flex:1 1 0); standing in a column
     that collapses them — pin their size instead */
  .screen .q-foot .ng-chip { flex: none; width: 44px; }

  .screen .q-stage { padding: var(--space-4); }

  /* the info strip becomes a slim second-left rail; undo/redo a slim rail just
     left of the options — both fall out of the same DOM order as portrait */
  .screen .q-sub {
    flex-direction: column; justify-content: space-between; align-items: center;
    border-right: var(--hairline) solid var(--line);
    padding: var(--space-4) var(--space-2);
  }
  .screen .q-ur {
    flex-direction: column; justify-content: center; align-items: center;
    padding: var(--space-2);
  }

  /* ── palettes turn vertical (wrap into a second column before overflowing) ── */
  .screen .q-foot .ng-pal, .screen .q-foot .sg-pal, .screen .q-foot .sky-pal,
  .screen .q-foot .mo-palette {
    flex-direction: column; flex-wrap: wrap;
    max-height: 100%; min-height: 0;
  }
  .screen .pi-mode { flex-direction: column; margin-right: 0; }
  .screen .pi-mode-opt span { display: none; }
  .screen .pi-mode-opt + .pi-mode-opt { border-left: none; border-top: var(--hairline) solid var(--line); }
  .screen .no-brush { flex-direction: column; }
  .screen .no-bt { font-size: 0; gap: 0; padding: var(--space-4); }
  .screen .no-bt + .no-bt { border-left: none; border-top: var(--hairline) solid var(--line); }
  .screen .no-bt .no-swatch { font-size: 12px; }
}

/* ══ very narrow portrait: the foot goes icon-only ═══════════════════════════
   Under 340px (Fold cover, SE 1st gen) the labelled Hint/Restart pills plus a
   mode toggle cannot share one row — the pills were drawing OVER pipes'
   Turn/Lock switch. Same cure as the landscape rail: icons carry the meaning. */
@media (max-width: 340px) {
  .screen .q-foot, .screen .lits-foot { gap: var(--space-3); }
}