/* Game page: one full-screen arcade machine. */
.play-page { background: var(--navy); color: var(--white); min-height: 100dvh; }
.play-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter-r) 10px var(--gutter); background: var(--navy); border-bottom: 3px solid var(--yellow); }
.play-header h1 { font-size: clamp(11px, 2vw, 16px); line-height: 1.4; color: var(--yellow); text-align: center; }
.play-back { font: 10px/1.5 var(--f-display); color: var(--white); text-decoration: none; white-space: nowrap; }
.play-back:hover { color: var(--yellow); }

.play-hiscore { margin: 0; padding: 8px var(--gutter); background: var(--navy); color: var(--yellow); font: 20px/1.3 var(--f-score); letter-spacing: .04em; text-align: center; border-bottom: 2px solid var(--yellow); }
.play-challenge { margin: 0; padding: 10px var(--gutter); background: var(--pink); color: var(--white); font: 20px/1.3 var(--f-score); text-align: center; }

.play-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px var(--gutter-r) 32px var(--gutter); max-width: 1400px; margin-inline: auto; }
.play-stage { grid-column: 1; height: calc(100dvh - 120px); min-height: 420px; border: 3px solid var(--yellow); background: #000; }
.play-stage iframe { display: block; width: 100%; height: 100%; border: 0; }

.play-results { grid-column: 1; color: var(--navy); }
.play-results > .eyebrow { margin: 0; text-align: center; font-size: 14px; }
.results-score { margin: 8px 0 24px; text-align: center; font: clamp(72px, 14vw, 140px)/1 var(--f-score); color: var(--yellow); text-shadow: 5px 5px 0 var(--pink); }
.results-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.results-share { grid-column: 1 / -1; }
.results-share h2 { font-size: clamp(14px, 2.4vw, 20px); }
.results-share:has([data-share-mode="native"]) h2 { display: none; }
.results-steps > li { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.results-steps h2 { font-size: 11px; line-height: 1.6; }
.results-steps p { margin: 0; font-size: 14px; line-height: 1.5; }
.results-steps form { display: grid; gap: 8px; }
.results-steps label { font: 16px/1.2 var(--f-score); letter-spacing: .04em; }
.results-steps label span { color: var(--ink-soft); }
.results-steps input, .results-steps textarea { width: 100%; border: 2px solid var(--navy); padding: 10px; font: 16px var(--f-body); color: var(--navy); background: var(--white); }
.results-steps input { text-transform: uppercase; }
.results-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }


@media (max-width: 900px) {
  .play-main { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
    .results-steps { grid-template-columns: minmax(0, 1fr); }
  .play-stage { height: calc(100dvh - 130px); min-height: 360px; }
}
@media (max-width: 480px) {
  .play-main { padding-inline: 0; }
  .play-stage { border-width: 0; }
  .play-results,   .play-header .btn-sm { padding-inline: 10px; }
}