html.is-play.ds-root { --accent: #5C4A3D; --ms-covered: #c4b5a3; }
/* F01: Ready, replay and pause cover the whole .play stage
   (clock, board, Reveal/Flag). Shared rules keep those cards inside .board-wrap.
   Futoshiki positions that wrap, so it stops being the containing block while a
   gate is up. Premium stays off in the shared shell config; this file does not add it. */
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .play {
  position: relative;
  min-width: 0;
}
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .board-wrap.is-gated > #startGate.start-gate .start-card,
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell #pauseOverlay .pause-card,
html.is-play body.ds-minesweeper #boom .boom-card,
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell #win .win-card {
  max-height: none;
  overflow: visible;
}
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .play:has(> .board-wrap > #startGate.start-gate:not(.is-pending):not(.hidden):not([hidden])),
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .play:has(> .board-wrap > #pauseOverlay:not(.hidden):not([hidden])),
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .play:has(> .board-wrap > #win.win:not(#boom):not(.hidden):not([hidden])) {
  min-height: 30rem;
}
html.is-play body.ds-minesweeper #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-minesweeper #playMain.puzzle-page-shell .play:has(> .board-wrap > #pauseOverlay:not(.hidden):not([hidden])) > .board-wrap,
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .play:has(> .board-wrap > #win.win:not(#boom):not(.hidden):not([hidden])) > .board-wrap {
  position: static;
  isolation: auto;
  overflow: visible;
  z-index: 30;
  pointer-events: none;
  /* The hidden grid must not stretch the mask into a second screen. */
  height: 0;
  min-height: 0;
  padding: 0;
  border-width: 0;
}
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .board-wrap > #startGate.start-gate:not(.is-pending):not(.hidden):not([hidden]),
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .board-wrap > #pauseOverlay.pause-overlay:not(.hidden):not([hidden]),
html.is-play body.ds-minesweeper #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-minesweeper #playMain.puzzle-page-shell .board-wrap.is-gated:has(> #startGate.is-already-played) > #startGate.is-already-played.start-gate:not(.hidden):not([hidden]),
html.is-play body.ds-minesweeper #boom.win:not(.hidden):not([hidden]),
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .board-wrap > #win.win:not(#boom):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;
  pointer-events: auto;
}
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .board-wrap > #startGate.start-gate:not(.is-pending):not(.hidden):not([hidden]),
html.is-play body.ds-minesweeper #boom.win:not(.hidden):not([hidden]),
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .board-wrap > #win.win:not(#boom):not(.hidden):not([hidden]) {
  background-color: var(--paper, #fce9b8);
  background-image: none;
}
html.is-play body.ds-minesweeper #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-minesweeper #playMain.puzzle-page-shell #startGate.start-gate:not(.is-already-played):not(.is-pending) .start-card,
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell #pauseOverlay .pause-card,
html.is-play body.ds-minesweeper #boom .boom-card,
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell #win .win-card {
  width: min(22rem, 100%);
  flex: 0 1 auto;
  margin-inline: auto;
}
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell #startGate.is-already-played .start-card {
  width: min(100%, 390px);
  margin-inline: auto;
}
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell :is(#startGate, #pauseOverlay, #boom, #win) :is(button, a) {
  min-width: 44px;
  min-height: 44px;
}
/* Retry after BOOM is the existing Premium paywall control, not a solution reveal. */
html.is-play body.ds-minesweeper #boomRetry {
  background: var(--play-premium, #62417A);
  color: var(--play-premium-ink, #F4D675);
  border: 1px solid var(--play-premium-deep, #4E3363);
}
html.is-play body.ds-minesweeper #board .ms-cell {
  min-width: 0;
  min-height: 0;
}
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .play-tool-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .play-tool-row > button {
  min-height: 44px;
  padding: 8px 6px;
}
/* Shared shell stacks clock, board, then controls below 1024px and puts the clock and controls on the right from 1024px. Do not open a second track in between. */
/* BOOM and victory sit on top of the grid. Keep any private mine text out of the painted board. */
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .board-wrap:has(> #win.win:not(#boom):not(.hidden):not([hidden])) > #board {
  visibility: hidden;
}
/* BOOM is a compact paper card. Pause and victory keep the full-stage mask. */
html.is-play body.ds-minesweeper #boom.win:not(.hidden):not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 900;
  width: 100%;
  max-width: none;
  top: var(--play-viewport-top, 0px);
  bottom: auto;
  height: var(--play-viewport-height, 100dvh);
  min-height: 0;
  margin: 0;
  padding: 16px;
  background: rgb(0 0 0 / 25%);
  overflow: auto;
}
html.is-play body.ds-minesweeper #boom .boom-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--ink, #1a1a1a);
  font-size: clamp(1.25rem, 4.2vw, 1.5rem);
  line-height: 1.2;
}
html.is-play body.ds-minesweeper #boom .ms-boom-mark {
  font-size: 1.35rem;
  line-height: 1;
}
html.is-play body.ds-minesweeper #boom .boom-card {
  width: min(22rem, 100%);
  padding: 16px 18px;
  border: none;
  border-radius: 14px;
  background: var(--paper-bright, #fff9ed);
  color: var(--ink, #1a1a1a);
  box-shadow: 0 8px 22px rgba(32, 22, 14, 0.16);
}
html.is-play body.ds-minesweeper #boom .boom-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
html.is-play body.ds-minesweeper #boom .boom-actions :is(button, a) {
  width: 100%;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.25;
}
@media (min-width: 768px) {
  html.is-play body.ds-minesweeper #boom .boom-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  html.is-play body.ds-minesweeper #boom .boom-actions :is(button, a) {
    width: auto;
    flex: 1 1 9rem;
  }
}

/* Preserve every genuine column; only the board card scrolls horizontally. */
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .board-wrap:not(.is-gated) {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell .board-wrap > #board {
  width: calc(var(--n, 9) * 30px - 2px);
  max-width: none;
  grid-auto-rows: 28px;
  gap: 2px;
  padding: 0;
  border: 0;
}
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell #board .ms-cell {
  width: 28px;
  height: 28px;
}
html.is-play body.ds-minesweeper #playMain.puzzle-page-shell #resetBoard {
  grid-column: 1 / -1;
  width: 100%;
}
html.is-play body.ds-minesweeper #boom .boom-card {
  box-sizing: border-box;
  max-height: calc(var(--play-viewport-height, 100dvh) - 32px);
  overflow-y: auto;
}

/* The shared body portal escapes board scrolling and header stacking contexts. */
html.is-play body.ds-minesweeper:has(> #boom.win:not(.hidden):not([hidden])) #board {
  visibility: hidden;
  pointer-events: none;
}