html.is-play.ds-root { --accent: #5C4A3D; }
/* Four on-demand difficulties use the shared start-gate Play green. */
html.is-play body.ds-higher-lower-number #startGate.is-on-demand .start-card .start-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html.is-play body.ds-higher-lower-number #startGate.is-on-demand .start-actions > [data-on-demand-difficulty] {
  --start-action-bg: var(--game-action-bg, var(--game-play-bg, #187B40));
  --start-action-hover: var(--game-action-bg-hover, var(--game-play-bg-hover, #146635));
  --start-action-ink: var(--game-action-ink, #fff);
  font-weight: 800;
}
html.is-play body.ds-higher-lower-number #startGate.is-on-demand .start-actions > [data-on-demand-difficulty]::before {
  content: "";
  width: 12px;
  height: 14px;
  flex: 0 0 12px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
html.is-play body.ds-higher-lower-number #startGate.is-on-demand .start-actions > #startGateCancel {
  grid-column: 1 / -1;
}
/* Natural-height session board inside the canonical V2 shell. */
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell #board.board-higher-lower-number {
  display: flex; width: min(100%, 28rem); max-width: 28rem; min-width: 0;
  height: auto; min-height: 0; max-height: none; aspect-ratio: auto; overflow: visible;
}
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .board-wrap,
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .board-wrap:is(.is-gated, .is-board-loading) {
  width: min(100%, 28rem) !important; max-width: 28rem;
  height: auto; min-height: 0; max-height: none; aspect-ratio: auto;
}
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .play {
  position: relative; min-width: 0;
}
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .play.is-gated { min-height: 0; }
/* Wall-clock deadline cannot pause. Hide the clock control only; Reprendre stays on the overlay. */
html.is-play body.ds-higher-lower-number #pause { display: none !important; }
/* Preserve SSR nodes and masking. The empty board stays out of flow so it cannot paint a square. */
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .board-wrap.is-gated > #board,
html.is-play.is-start-unresolved body.ds-higher-lower-number #playMain.puzzle-page-shell .board-wrap > #board {
  position: absolute; visibility: hidden; pointer-events: none;
}
/* Pending seed stays a compact in-flow marker. Resolved gates are staged below. */
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .board-wrap.is-gated > #startGate.start-gate.is-pending,
html.is-play.is-start-unresolved body.ds-higher-lower-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-higher-lower-number #playMain.puzzle-page-shell .board-wrap.is-gated > #startGate.start-gate .start-card,
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell #pauseOverlay .pause-card {
  max-height: none; overflow: visible;
}
/* D01: Ready, replay, and pause cover the whole play stage (board, clock, keypad),
   centered like the shared cards. Futoshiki's positioned .board-wrap would trap them
   in the left column, so that wrap stops being the containing block while a gate is up. */
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .play:has(> .board-wrap > #startGate.start-gate:not(.is-pending):not(.hidden):not([hidden])),
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .play:has(> .board-wrap > #pauseOverlay:not(.hidden):not([hidden])) {
  min-height: 30rem;
}
html.is-play body.ds-higher-lower-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-higher-lower-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-higher-lower-number #playMain.puzzle-page-shell .board-wrap > #startGate.start-gate:not(.is-pending):not(.hidden):not([hidden]),
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .board-wrap > #pauseOverlay.pause-overlay:not(.hidden):not([hidden]),
html.is-play body.ds-higher-lower-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-higher-lower-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-higher-lower-number #playMain.puzzle-page-shell .board-wrap > #startGate.start-gate:not(.is-pending):not(.hidden):not([hidden]) {
  background-color: var(--paper, #fce9b8);
}
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .board-wrap > #pauseOverlay.pause-overlay:not(.hidden):not([hidden]) {
  background-color: var(--paper-bright, #fff9ed);
}
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell #startGate.start-gate:not(.is-already-played):not(.is-pending) .start-card {
  width: min(22rem, 100%); flex: 0 1 auto; margin-inline: auto;
}
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell #startGate.is-already-played .start-card {
  width: min(100%, 390px); margin-inline: auto;
}
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell #pauseOverlay .pause-card {
  width: min(100%, 22rem); margin-inline: auto;
}
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell :is(#startGate, #pauseOverlay) :is(button, a) {
  min-width: 44px; min-height: 44px;
}
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .board-wrap > .board-loading {
  min-height: 80px;
  max-height: none;
}
html.is-play body.ds-higher-lower-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-higher-lower-number #playMain.puzzle-page-shell .board-wrap:has(> #startGate.is-pending) > .board-loading {
  position: relative; inset: auto; min-height: 80px;
}
/* Keypad column sits with the clock. Mobile stays one column, capped like the board. */
html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .play > .side {
  min-width: 0;
  width: min(100%, 28rem) !important;
  max-width: 28rem;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .play {
    grid-template-columns: minmax(0, 28rem) minmax(240px, 320px);
    justify-content: center;
    align-items: start;
  }
  html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .play > .side {
    width: 100% !important;
    max-width: none;
    min-width: 240px;
    margin-inline: 0;
  }
  /* Keep both columns while the board is masked, so the gate is not only the keypad rail. */
  html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .play:has(> .board-wrap > #startGate.start-gate:not(.is-pending):not(.hidden):not([hidden])),
  html.is-play body.ds-higher-lower-number #playMain.puzzle-page-shell .play:has(> .board-wrap > #pauseOverlay:not(.hidden):not([hidden])) {
    grid-template-columns: minmax(28rem, 28rem) minmax(240px, 320px);
  }
}