/* Arithmetic steps have natural height, never a square grid stage. */
html.is-play body.ds-target-number #playMain.puzzle-page-shell #board.board-target-number {
  display: flex; width: min(100%, 28rem); height: auto; min-height: 0;
  max-height: none; aspect-ratio: auto; overflow: visible;
}
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap,
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap:is(.is-gated, .is-board-loading) {
  width: min(100%, 28rem) !important; height: auto; min-height: 0;
  max-height: none; aspect-ratio: auto;
}
html.is-play body.ds-target-number #playMain.puzzle-page-shell .play.is-gated { min-height: 0; }
/* Preserve SSR nodes and masking; the empty board stays out of flow. */
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap.is-gated > #board,
html.is-play.is-start-unresolved body.ds-target-number #playMain.puzzle-page-shell .board-wrap > #board {
  position: absolute; visibility: hidden; pointer-events: none;
}
/* Pending seed stays the shared clipped marker plus a compact loader. */
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap.is-gated > #startGate.start-gate.is-pending,
html.is-play.is-start-unresolved body.ds-target-number #playMain.puzzle-page-shell .board-wrap > #startGate.start-gate.is-pending {
  position: relative; inset: auto; grid-area: 1 / 1; padding: 0;
  align-items: flex-start; height: auto; min-height: 0;
}
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap > .board-loading { min-height: 80px; }
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap.is-gated:has(> #startGate:not(.hidden):not(.is-pending)) > .board-loading { display: none; }
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap.is-gated > #startGate.start-gate .start-card,
html.is-play body.ds-target-number #playMain.puzzle-page-shell #pauseOverlay .pause-card {
  max-height: none; overflow: visible;
}
/* While resolving access, keep the shared clipped pending gate and a small loader. */
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap:has(> #startGate.is-pending) > .board-loading {
  position: relative; inset: auto; min-height: 80px;
}
/* Resolved Ready, unlock, replay, and pause cover the whole .play stage.
   Shared rules keep these cards inside .board-wrap (grid-area 1 / 1, 28rem).
   Futoshiki also positions that wrap, so it stops being the containing block
   while a gate is up. Card chrome stays the shared start/replay/pause template. */
html.is-play body.ds-target-number #playMain.puzzle-page-shell .play:has(> .board-wrap > #startGate.start-gate:not(.is-pending):not(.hidden):not([hidden])),
html.is-play body.ds-target-number #playMain.puzzle-page-shell .play:has(> .board-wrap > #pauseOverlay:not(.hidden):not([hidden])) {
  min-height: 30rem;
}
html.is-play body.ds-target-number #playMain.puzzle-page-shell .play:has(> .board-wrap > #startGate.start-gate:not(.is-pending):not(.hidden):not([hidden])) > .board-wrap,
html.is-play body.ds-target-number #playMain.puzzle-page-shell .play:has(> .board-wrap > #pauseOverlay:not(.hidden):not([hidden])) > .board-wrap {
  position: static; isolation: auto; overflow: visible; z-index: 30;
}
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap > #startGate.start-gate:not(.is-pending):not(.hidden):not([hidden]),
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap > #pauseOverlay.pause-overlay:not(.hidden):not([hidden]),
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap.is-gated.is-replay > #startGate.is-already-played.start-gate:not(.hidden):not([hidden]),
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap.is-gated:has(> #startGate.is-already-played) > #startGate.is-already-played.start-gate:not(.hidden):not([hidden]) {
  position: absolute; inset: 0; z-index: 5;
  display: flex !important; align-items: center; justify-content: center;
  align-self: auto; justify-self: auto;
  grid-area: auto; grid-column: auto; grid-row: auto;
  width: auto; max-width: none; height: auto; min-height: 0; margin: 0;
  left: 0; right: 0; top: 0; bottom: 0;
  padding: 16px; box-sizing: border-box; transform: none; overflow: visible;
}
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap > #startGate.start-gate:not(.is-pending):not(.hidden):not([hidden]) {
  background-color: var(--paper, #fce9b8);
  background-image: none;
}
html.is-play body.ds-target-number #playMain.puzzle-page-shell .board-wrap > #pauseOverlay.pause-overlay:not(.hidden):not([hidden]) {
  background-color: var(--paper-bright, #fff9ed);
  background-image: none;
}
html.is-play body.ds-target-number #playMain.puzzle-page-shell :is(#startGate, #pauseOverlay) :is(button, a) {
  min-width: 44px; min-height: 44px;
}