/* Wins over futoshiki/play-shell (ds-grid-shell) and the shared board column.
   The old 28rem / 36rem cap left a 12×12 near 35px. Size to the play column,
   and also to the viewport height, without a min-width that overflows 320/390. */
html.is-play.ds-root { --accent: #5C4A3D; }

html.is-play body.ds-tents #playMain.puzzle-page-shell .board-wrap .tents-grid {
  justify-self: center;
  align-self: start;
  width: min(100%, calc(100dvh - 8.5rem));
  max-width: 100%;
  min-width: 0;
  height: auto;
  margin-inline: auto;
}

html.is-play body.ds-tents #playMain.puzzle-page-shell .board-wrap .board-tents {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  max-height: none;
  aspect-ratio: var(--cols, 1) / var(--rows, 1);
}

/* Shared pause hides [data-pause-mask] with display:none. Clues live outside #board,
   so the wrapper carries the same attribute. This rule covers the class even if
   the attribute is applied a paint later. Do not override the shared board hide. */
html.is-play-board-obscured body.ds-tents .tents-grid {
  display: none !important;
}

/* Ready keeps the stage size but must not show nested clues through the transparent gate.
   The shared visibility rule only matches a direct-child board. */
html.is-play-gated body.ds-tents #playMain.puzzle-page-shell .board-wrap.is-gated:not(.is-replay) > .tents-grid,
html.is-start-unresolved body.ds-tents #playMain.puzzle-page-shell .board-wrap:not(.is-replay) > .tents-grid {
  visibility: hidden;
  pointer-events: none;
}

/* Already-played: the empty or square tents stage was stretching the shared gate
   into a blank plaque. Drop that stage out of flow so the gate keeps its own height. */
html.is-play body.ds-tents #playMain.puzzle-page-shell .play.is-gated:has(> .board-wrap.is-replay) {
  min-height: 0;
}
html.is-play body.ds-tents #playMain.puzzle-page-shell .board-wrap.is-gated.is-replay {
  width: min(100%, 390px) !important;
  max-width: 390px;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  justify-self: center;
  align-self: start;
  margin-inline: auto;
  overflow: visible;
}
html.is-play body.ds-tents #playMain.puzzle-page-shell .board-wrap.is-gated.is-replay > .tents-grid,
html.is-play body.ds-tents #playMain.puzzle-page-shell .board-wrap.is-gated.is-replay > #board.board-tents {
  position: absolute;
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  aspect-ratio: auto;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
html.is-play body.ds-tents #playMain.puzzle-page-shell .board-wrap.is-gated.is-replay > .board-loading {
  display: none;
}
html.is-play body.ds-tents #playMain.puzzle-page-shell .board-wrap.is-gated.is-replay > #startGate.is-already-played.start-gate {
  position: relative;
  inset: auto;
  grid-area: auto;
  align-self: start;
  justify-self: center;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  overflow: visible;
}
html.is-play body.ds-tents #playMain.puzzle-page-shell .board-wrap.is-gated.is-replay > #startGate.is-already-played .start-card {
  width: min(100%, 390px);
  height: auto;
  min-height: 0;
  max-height: none;
  flex: 0 0 auto;
  align-self: center;
  overflow: visible;
  margin-inline: auto;
}

/* Shared fallback writes the already-played summary into #board when the grid
   never mounts. Keep that block the compact card, not a square stage. */
html.is-play body.ds-tents #playMain.puzzle-page-shell .board-wrap .tents-grid:has(> #board.is-recorded-summary) {
  width: min(100%, 390px);
  height: auto;
}
html.is-play body.ds-tents #playMain.puzzle-page-shell .board-wrap .tents-grid:has(> #board.is-recorded-summary) > :is(.tents-col-clues, .tents-row-clues) {
  display: none;
}
html.is-play body.ds-tents #playMain.puzzle-page-shell #board.board-tents.is-recorded-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 390px);
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  margin-inline: auto;
}

html.is-play body.ds-tents #playMain.puzzle-page-shell .board-wrap .board-tents > button.cell {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  line-height: 0;
}

@media (max-height: 500px) and (orientation: landscape) {
  html.is-play body.ds-tents #playMain.puzzle-page-shell .board-wrap .tents-grid {
    width: min(100%, 100%);
    max-height: 100%;
  }
  html.is-play body.ds-tents #playMain.puzzle-page-shell .board-wrap .board-tents {
    width: 100%;
    height: auto;
    max-height: 100%;
  }
}