/* The scroll drive on the game page (T-185). Loads after tokens.css and style.css, so every colour, size and
   radius is a token (no hex here; tests/site/test_build_site.py checks it). No shadows, gradients or glows.
   Default = the static version: a paper window holding the poster, the headline cards one under another.
   The pinned scroll scene exists only where script can run and motion is welcome (the same query as drive.js),
   so the page never flashes between layouts and never hides content from a failed script. */

main.game { flex: 1; padding-bottom: calc(var(--space-4) * 3); }
main.game > .wrap { padding-top: var(--space-4); }
.game .after { padding-top: 0; }

/* Skip link: keyboard users can jump past the 700-screen-tall scene. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  display: inline-flex; align-items: center; min-height: var(--touch-target); padding: 0 var(--space-4);
  background: var(--stage-tone); color: var(--text-on-dark); border: var(--button-ring) solid var(--accent-on-dark); border-radius: var(--radius-control);
  font-family: var(--font-display); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: var(--upper-tracking);
}
.skip:focus { position: fixed; left: var(--space-3); top: var(--space-3); }

.drive { padding: 0 var(--space-4); }
.view { position: relative; max-width: 390px; margin: 0 auto; }
.paper { position: relative; aspect-ratio: 390 / 844; overflow: hidden; background: var(--paper); border-radius: var(--radius-window); }
.poster, .frames { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.frames { opacity: 0; }
.frames.on { opacity: 1; }

/* Attribution: a graphite bar along the top of the map, always on screen with it (D-99). Its bottom edge doubles
   as the drive's progress strip (accent-on-dark on graphite), a pure function of p. */
.attrib {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2);
  min-height: var(--touch-target); padding: 0 var(--space-3);
  background: var(--stage); color: var(--text-on-dark); border-bottom: var(--hairline) solid var(--stage-border);
  font-family: var(--font-text); font-size: 12px; line-height: 1.2;
}
.attrib a { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--text-on-dark); }
.attrib a:hover { color: var(--accent-on-dark); }
.attrib .note { color: var(--text-dim); font-size: var(--text-11); padding-bottom: 0; }
@media (max-width: 24rem) { .attrib .note { flex-basis: 100%; margin-top: -10px; padding-bottom: var(--space-2); } }
.attrib::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px;
  background: var(--accent-on-dark); transform: scaleX(var(--p, 0)); transform-origin: left; pointer-events: none;
}

.cue { display: none; }

/* Headline cards: graphite, the same card in both versions. */
.headlines { margin-top: var(--space-4); }
.headline {
  margin: 0 0 var(--space-3); padding: var(--space-4);
  background: var(--stage-tone); color: var(--text-on-dark); border: var(--hairline) solid var(--stage-border); border-radius: var(--radius-window);
}
.headline h2 { margin: 0; font-size: clamp(26px, 7.4vw, 34px); line-height: 1.04; color: var(--text-on-dark); text-wrap: balance; }
.headline p { margin: var(--space-2) 0 0; padding-top: var(--space-2); max-width: 34ch; font-size: var(--text-15); line-height: 1.4; color: var(--text-dim); border-top: var(--dotted-rule) dotted var(--stage-border); }

/* The scroll scene: the stage pins for (track - one screen) of scrolling. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .drive { height: 700vh; height: 700svh; padding: 0; }
  .stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; justify-content: center; align-items: center; }
  .view { height: 100%; width: min(100%, calc(100vh * 390 / 844)); width: min(100%, calc(100svh * 390 / 844)); max-width: none; margin: 0; }
  .paper { position: absolute; inset: 0; aspect-ratio: auto; }
  .frames { transition: opacity 120ms linear; }

  .cue {
    position: absolute; z-index: 2; left: var(--space-3); top: calc(var(--touch-target) + var(--space-3)); margin: 0;
    display: flex; gap: 6px; align-items: center; padding: var(--space-2) var(--space-3);
    font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.2; text-transform: uppercase; letter-spacing: var(--upper-tracking);
    color: var(--text-on-dark); background: var(--stage-tone); border: var(--hairline) solid var(--stage-border); border-radius: var(--radius-control);
    opacity: var(--cue, 1); pointer-events: none;
  }
  .cue svg { color: var(--accent-on-dark); }

  /* Cards sit low over the map; they enter by wiping up, hold, and leave upward. --enter and --exit (0..1) are
     pure functions of scroll progress. Hidden until drive.js turns one on; the same text is in the page below. */
  .headlines { position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); margin: 0; padding: 0 var(--space-3); pointer-events: none; }
  .headline {
    position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0; margin: 0;
    --enter: 1; --exit: 0;
    transform: translateY(calc((1 - var(--enter)) * 28px - var(--exit) * 56px));
    clip-path: inset(0 0 calc((1 - var(--enter)) * 100%) 0 round var(--radius-window));
    opacity: calc(1 - var(--exit));
    visibility: hidden;
  }
  .headline.on { visibility: visible; }
}
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) and (max-height: 700px) {
  .headline { padding: var(--space-3); }
  .headline h2 { font-size: clamp(22px, 6.4vw, 28px); }
  .headline p { margin-top: 6px; padding-top: 6px; font-size: var(--text-13); line-height: 1.35; }
}
/* Wide landscape screens: the cards move out onto the stage, left of the map window. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) and (min-width: 60rem) and (orientation: landscape) {
  .headlines { left: auto; right: calc(100% + var(--space-4) * 2); bottom: 12%; width: 22rem; padding: 0; }
  .headline { left: 0; right: 0; }
}