/* First-paint start mask. No JS.
   The gate covers only the board cell inside .board-wrap.
   Givens stay in the DOM. Rankings, comments, clock, and help stay outside. */

html.is-start-unresolved .board-wrap > :is(#board, .board, .cb-board),
html.is-play-gated .board-wrap > :is(#board, .board, .cb-board) {
  visibility: hidden;
}

/* Empty shells need a stage; a populated SSR board keeps its own height.
   The gated rule beats play.css min-height:0 / aspect-ratio:1 so showGate
   cannot collapse the cell or shove the clock. */
html.is-start-unresolved .board-wrap > :is(#board, .cb-board):empty,
html.is-play.is-start-unresolved body #playMain.puzzle-page-shell .board-wrap.is-gated > :is(#board, .cb-board):empty {
  min-height: min(70vw, 24rem);
  aspect-ratio: auto;
}

/* showGate adds .is-gated. play.css then sets min-height:0 on a square board.
   That drops a 1:1 stage off its border box (Sudoku 332px → 325px) and the clock,
   which sits under the board below 1024px, jumps. Keep the pre-gate minimum.
   Do not set aspect-ratio here: classic boards are already 1:1, and auto is shorter. */
html.is-play.is-start-unresolved body #playMain.puzzle-page-shell .board-wrap.is-gated > #board:not(:empty),
html.is-play.is-play-gated body #playMain.puzzle-page-shell .board-wrap.is-gated > #board:not(:empty) {
  min-height: auto;
}

/* Paused reload already owns the stage. Do not also show Ready. */
html.is-play-board-obscured #startGate {
  display: none !important;
}

html.is-play body #playMain #startGate.start-gate {
  position: absolute;
  grid-area: 1 / 1;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  transform: none;
  padding: 12px;
  box-sizing: border-box;
  overflow: visible;
  /* Visible frame lives on .start-card (ds/states); avoid a full-cell cream plaque. */
  background-color: transparent;
  background-image: none;
}

html.is-play body #playMain #startGate .start-card {
  width: min(22rem, 100%);
  max-width: 100%;
  flex: 0 1 auto;
  box-sizing: border-box;
}

html.is-start-unresolved #startGate.is-pending .start-card {
  min-height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ready copy and CTAs stay in the DOM for locale/SSR, hidden until play state resolves. */
html.is-start-unresolved #startGate.is-pending > .start-card > :is(
  #startGateKicker,
  #startGateTitle,
  #startGateSub,
  #startGateReplayNote,
  #startAccountNote,
  #startGateActions,
  #startGateError
) {
  visibility: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

#startGate .start-pending {
  display: none;
  margin: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

html.is-start-unresolved #startGate.is-pending .start-pending {
  display: flex;
}

.start-pending-mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted, #6b645b);
}

@media (prefers-reduced-motion: no-preference) {
  .start-pending-mark {
    animation: start-pending-pulse 1.2s ease-in-out infinite;
  }
}

@keyframes start-pending-pulse {
  50% { opacity: 0.35; }
}

#startGate .start-noscript {
  margin: 0 0 12px;
}