/* V2 puzzle-page-shell: replay gate on the board cell, first-play tip, no permanent legend bar. */

html.is-play body #playMain.puzzle-page-shell .board-wrap > :is(.board-legend, .cb-legend) {
  display: none !important;
}

html.is-play-gated body #playMain.puzzle-page-shell .board-wrap > :is(.board-legend, .cb-legend) {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

html.is-play body #playMain.puzzle-page-shell .board-wrap > #startGate.is-already-played {
  grid-area: 1 / 1;
  position: relative;
  inset: auto;
  z-index: 14;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  left: auto;
  right: auto;
  transform: none;
  align-items: stretch;
  justify-content: flex-start;
  align-self: start;
  padding: 10px;
  box-sizing: border-box;
  overflow: visible;
  background: color-mix(in srgb, var(--paper-bright, #fff9ed) 90%, transparent);
}

html.is-play body #playMain.puzzle-page-shell .board-wrap > #startGate.is-already-played .start-card {
  width: min(100%, 390px);
  max-height: none;
  margin-inline: auto;
  overflow: visible;
}

@media (max-width: 760px) {
  html.is-play body #playMain.puzzle-page-shell .board-wrap > #startGate.is-already-played {
    padding: 8px;
  }
}

/* First-play tip: compact overlay on the board only; never competes with gates/win/pause. */
html.is-play body #playMain.puzzle-page-shell .board-wrap > .play-first-tip {
  grid-area: 1 / 1;
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 10px;
  box-sizing: border-box;
  pointer-events: none;
}

html.is-play body #playMain.puzzle-page-shell .board-wrap > .play-first-tip[hidden] {
  display: none !important;
}

html.is-play-gated .play-first-tip,
html.is-play-board-obscured .play-first-tip,
html.is-play body #playMain.puzzle-page-shell .board-wrap:has(> #startGate:not(.is-dismissed):not([hidden])) > .play-first-tip {
  display: none !important;
}

.play-first-tip-card {
  pointer-events: auto;
  position: relative;
  width: min(100%, 22rem);
  max-height: min(70%, 16rem);
  overflow: auto;
  margin: 0;
  padding: 12px 36px 12px 14px;
  border: 1px solid var(--line, #dcc9a2);
  border-radius: 12px;
  background: var(--paper-bright, #fff9ed);
  color: var(--ink, #2b2419);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 8px 24px #241a1420;
}

.play-first-tip-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink, #2b2419);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.play-first-tip-close:hover {
  background: color-mix(in srgb, var(--line, #dcc9a2) 35%, transparent);
}

.play-first-tip-close:focus-visible {
  outline: 2px solid var(--cta, #946526);
  outline-offset: 2px;
}