/* Game layout is independent of the public landing page. The scene gets a
   real-sized track; phrase and agency controls grow with text and never clip. */
body.game-page {
  background: #fffaf0;
  color: #17324d;
  font-family: "Avenir Next", ui-rounded, system-ui, sans-serif;
}

.game-page .game-shell {
  width: min(1080px, 100%);
  min-height: 0;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 28px max(20px, env(safe-area-inset-left, 0px));
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "header header" "scene phrases" "progress progress" "levels levels";
  gap: 24px;
  align-items: start;
}

.game-page .top-bar { grid-area: header; align-items: center; gap: 18px; }
.game-page .stage { grid-area: scene; min-height: 0; }
.game-page .phrase-panel { grid-area: phrases; min-width: 0; gap: 14px; align-content: start; }
.game-page .progress-strip { grid-area: progress; }
.game-page .scene-nav { grid-area: levels; }
.game-page h1 { font-size: clamp(1.85rem, 4vw, 2.75rem); font-weight: 750; line-height: 1.1; }
.game-page .eyebrow { font-size: 0.75rem; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 6px; }
.game-page .top-controls { width: auto; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.game-page .sensory-help { flex-basis: 100%; margin: 0; max-width: 36rem; color: #506879; font-size: 0.76rem; line-height: 1.45; text-align: left; }
.game-page :is(#voiceToggle, #quietToggle) { min-height: 44px; white-space: nowrap; }
.game-page .control-button { min-height: 44px; padding: 8px 12px; font-weight: 600; font-size: 0.85rem; box-shadow: none; background: #eee9df; }
.game-page .control-button[aria-pressed="true"] { background: #d6eee2; }
.game-page .all-done-control { background: #f8e9b0; }
.game-page .grown-ups-button { margin-left: 0; order: 0; flex-basis: auto; }
.game-page .launch-meter { display: none; }

.game-page .scene-art { height: 390px; min-height: 0; border-radius: 26px; box-shadow: none; }
.game-page .scene-art.space { background: #132b45; }
.game-page.quiet-mode .scene-art.space { background: #203d50; }
.game-page .rocket-wrap { width: 110px; height: 200px; bottom: 55px; }
.game-page .launch-pad { bottom: 25px; height: 12px; width: 150px; background: #ffffff18; }
.game-page .rocket-tap-cue { font-weight: 650; box-shadow: none; bottom: -10px; }
.game-page .planet-one { width: 62px; top: 25%; }
.game-page .planet-two { width: 40px; top: 20%; }
.game-page .star { width: 5px; box-shadow: none; }
.game-page .phrase-bubble { top: 12px; max-width: calc(100% - 24px); font-size: 1rem; font-weight: 600; padding: 8px 12px; }

.game-page .prompt { font-size: 1rem; line-height: 1.45; font-weight: 500; }
.game-page .phrase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; order: 0; }
.game-page .phrase-button {
  min-width: 0;
  min-height: 116px;
  padding: 12px 7px;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  gap: 7px;
  box-shadow: 0 4px 0 #17324d20;
}
.game-page .phrase-icon { min-width: 0; min-height: 38px; padding: 0; background: none; }
.game-page .phrase-picture { width: 38px; height: 38px; }
.game-page .tone-coral { background: #ff917d; }
.game-page .tone-mint { background: #88d9ae; }
.game-page .tone-blue { background: #8abafd; }
.game-page .phrase-repeat-cue { font-size: 0.75rem; font-weight: 600; }
.game-page .regulation-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; order: 0; margin-top: 4px; }
.game-page .regulation-button { min-height: 88px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 12px 8px; font-weight: 600; box-shadow: none; }
.game-page .regulation-button .phrase-picture { width: 32px; height: 32px; }
.game-page .regulation-button.tone-soft-blue,
.game-page .regulation-button.tone-soft-mint { background: #eee9e0; }
.game-page .regulation-button.tone-soft-coral { background: #ffddd3; }
.game-page .regulation-button.tone-soft-gold { background: #f8e9b0; }
.game-page .action-row { display: grid; grid-template-columns: 1fr; gap: 12px; order: 0; }
.game-page .launch-button,
.game-page .again-button,
.game-page .next-button { min-width: 0; min-height: 88px; width: 100%; font-weight: 700; font-size: 1.4rem; box-shadow: 0 4px 0 #17324d20; }
.game-page .remix-strip { order: 0; }
.game-page .progress-card,
.game-page .sticker-shelf { box-shadow: none; background: #f1ede4; }
.game-page .progress-card { font-weight: 500; }
.game-page .public-footer { max-width: 1040px; font-weight: 500; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
.game-page .public-footer a { font-weight: 500; }
.game-page .purchase-panel { flex-wrap: wrap; padding: 18px; }
.game-page .purchase-copy strong { font-weight: 700; }
.game-page .purchase-copy span { font-weight: 500; }

/* First play needs one scene and its choices, not a duplicate level card.
   The progress total remains visible and accessible below the child controls. */
.game-page.first-session-mode .progress-strip { grid-template-columns: 1fr; }
.game-page.first-session-mode .progress-card:first-child,
.game-page.first-session-mode .sticker-shelf,
.game-page.first-session-mode .scene-nav { display: none; }
.game-page.first-session-mode .progress-total { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; }
.game-page.first-session-mode .progress-total > span:last-child { margin-left: auto; }

@media (max-width: 760px) {
  .game-page .game-shell { padding: max(18px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; grid-template-areas: "header" "scene" "phrases" "progress" "levels"; gap: 14px; }
  .game-page .top-bar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .game-page .top-controls { width: 100%; justify-content: flex-start; gap: 6px; }
  .game-page .control-button { font-size: 0.78rem; padding: 8px 10px; }
  .game-page .grown-ups-button { margin-left: auto; }
  .game-page .scene-art { height: 340px; }
  .game-page .scene-art.space { height: 240px; }
  .game-page .scene-art.space .rocket-wrap { width: 88px; height: 176px; bottom: 34px; }
  .game-page .launch-pad { bottom: 14px; }
  .game-page .rocket-tap-cue { min-height: 26px; font-size: 0.7rem; padding: 4px 8px; }
  .game-page .phrase-panel { gap: 12px; }
  .game-page .phrase-grid { gap: 9px; }
  .game-page .phrase-button { min-height: 116px; font-size: 0.94rem; }
  .game-page .regulation-button { min-height: 88px; }
  .game-page .regulation-row { gap: 10px; margin-top: 4px; }
  .game-page .public-footer { gap: 8px; }
}

@media (max-width: 350px) {
  .game-page .game-shell { padding-left: 12px; padding-right: 12px; }
  .game-page .phrase-grid { gap: 8px; }
  .game-page .phrase-button { font-size: 0.86rem; }
  .game-page .regulation-button { font-size: 0.9rem; }
}