/* WORLD ON AIR visual rollout. Existing game/audio/share state remains owned
   by app.js. Historic direction query modes have no data-prototype attribute. */
body[data-prototype="world-on-air"] {
  --page: #eaf6fb;
  --surface: #fff;
  --surface-soft: #eaf6fb;
  --surface-muted: #edf2f8;
  --ink: #002664;
  --secondary: #526078;
  --border: #d7e2ed;
  --border-strong: #97aec5;
  --focus: #00a1d1;
  --radius: 14px;
  --prototype-header-height: 68px;
  --prototype-progress-height: 46px;
  background: var(--page);
  color: var(--ink);
  font-size: 16px;
}
body[data-prototype] .app-frame { min-height: 100dvh; background: #fff; border-color: #d7e2ed; }
body[data-prototype] #main { min-height: calc(100dvh - var(--prototype-header-height)); }
body[data-prototype] .site-header { flex: 0 0 var(--prototype-header-height); height: var(--prototype-header-height); padding: 12px 20px; }
body[data-prototype] .prototype-site-header > svg,
body[data-prototype] .prototype-site-header > img,
body[data-prototype] .prototype-site-header .prototype-logo { display: block; width: 142px; height: auto; max-height: 42px; }
body[data-prototype] .prototype-logo > svg,
body[data-prototype] .prototype-logo > img { display: block; width: 100%; height: auto; }
body[data-prototype] .prototype-edition { color: inherit; font-size: 10px; line-height: 1.35; font-weight: 800; letter-spacing: .15em; text-align: right; }
body[data-prototype] .site-footer { display: none; }
body[data-prototype]:has(#main[data-screen="home"]) .site-header { display: none; }
body[data-prototype]:has(#main[data-screen="home"]) #main { min-height: 100dvh; }
body[data-prototype] .prototype-home-screen { padding: 0; }
body[data-prototype] .prototype-home-screen > .current-landing { border: 0; border-radius: 0; }
body[data-prototype][data-prototype-tone="dark"] .app-frame { background: #002664; color: #fff; }
body[data-prototype][data-prototype-tone="dark"] .site-header { color: #fff; }
body[data-prototype] .screen { padding: 16px 20px 20px; }
body[data-prototype] h1 { font-size: 29px; font-weight: 800; line-height: 1.35; letter-spacing: -.035em; }
body[data-prototype] .button { min-height: 52px; border-radius: 14px; padding: 13px 16px; font-size: 16px; font-weight: 750; text-align: left; justify-content: flex-start; }
body[data-prototype] .button-primary { background: #ffca00; border-color: #ffca00; color: #002664; }
body[data-prototype] .button-primary:hover { background: #f0bd00; border-color: #f0bd00; }
body[data-prototype] .button-outline { background: transparent; border-color: #97aec5; color: #002664; }
body[data-prototype] button:focus-visible,
body[data-prototype] a:focus-visible,
body[data-prototype] summary:focus-visible { outline: 3px solid #00a1d1; outline-offset: 4px; }
body[data-prototype] .progress { flex: 0 0 auto; min-height: var(--prototype-progress-height); padding: 9px 20px 0; }
body[data-prototype] .progress-label { align-items: center; margin-bottom: 10px; font-size: 13px; color: #526078; font-weight: 700; }
body[data-prototype] .progress-track { gap: 5px; }
body[data-prototype] .progress-track li { height: 3px; background: #d7e2ed; border-radius: 3px; }
body[data-prototype] .progress-track li.current,
body[data-prototype] .progress-track li.complete { background: #002664; }
body[data-prototype] #main[data-tone="dark"] .progress-label { color: #d5e3f0; }
body[data-prototype] #main[data-tone="dark"] .progress-track li { background: #345380; }
body[data-prototype] #main[data-tone="dark"] .progress-track li.current,
body[data-prototype] #main[data-tone="dark"] .progress-track li.complete { background: #ffca00; }

/* TUNE IN: the flexible listening surface meets the response controls with one
   explicit gap. Added height grows the listening focus, not an empty spacer. */
body[data-prototype] .prototype-question-screen { min-height: calc(100dvh - var(--prototype-header-height) - var(--prototype-progress-height)); display: flex; flex-direction: column; gap: 0; }
body[data-prototype] .prototype-question-heading,
body[data-prototype] .prototype-rush-heading { flex: 0 0 auto; margin-bottom: 18px; }
body[data-prototype] .prototype-question-heading > p,
body[data-prototype] .prototype-rush-heading > p { margin-bottom: 8px; color: inherit; font-size: 11px; line-height: 1.4; font-weight: 800; letter-spacing: .15em; }
body[data-prototype] .prototype-listening { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 240px; padding: 18px 16px 12px; border: 1px solid #cddfea; border-radius: 22px; background: #eaf6fb; }
body[data-prototype] .prototype-receiver-topline { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; width: 100%; color: #526078; font-size: 11px; font-weight: 750; letter-spacing: .1em; }
body[data-prototype] .prototype-frequency-mark { display: flex; align-items: center; height: 18px; gap: 7px; }
body[data-prototype] .prototype-frequency-mark i { width: 1px; height: 8px; background: #7d9db8; }
body[data-prototype] .prototype-frequency-mark i:nth-child(odd) { height: 13px; }
body[data-prototype] .prototype-frequency-mark i.is-center { width: 2px; height: 18px; background: #002664; }
body[data-prototype] .prototype-wave { display: flex; flex: 1; min-height: 68px; align-items: center; justify-content: center; padding: 16px 0; }
body[data-prototype] .prototype-wave > svg { display: block; width: 100%; max-width: 290px; height: clamp(72px, 17dvh, 160px); overflow: visible; }
body[data-prototype] .woa-wave-cyan { fill: #00a1d1; }
body[data-prototype] .woa-wave-yellow { fill: #ffca00; }
body[data-prototype] .prototype-wave rect,
body[data-prototype] .prototype-sprint-wave rect { transform-box: fill-box; transform-origin: center; }
body[data-prototype] .prototype-listening:has([data-play-state="playing"]) .prototype-wave rect,
body[data-prototype] .prototype-signal-core:has([data-play-state="playing"]) .prototype-sprint-wave rect { animation: prototype-wave 1.2s ease-in-out infinite alternate; }
body[data-prototype] .prototype-wave rect:nth-child(3n),
body[data-prototype] .prototype-sprint-wave rect:nth-child(3n) { animation-delay: -.3s; }
body[data-prototype] .prototype-wave rect:nth-child(3n + 1),
body[data-prototype] .prototype-sprint-wave rect:nth-child(3n + 1) { animation-delay: -.7s; }
body[data-prototype] .prototype-listening .listening-stage { display: flex; flex: 0 0 auto; min-height: 132px; flex-direction: column; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
body[data-prototype] .prototype-listening .stage-label { position: static; order: 0; display: block; margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #002664; text-align: center; font-weight: 650; }
body[data-prototype] .prototype-listening .stage-backdrop { display: none; }
body[data-prototype] .prototype-listening .audio-comparison,
body[data-prototype] .prototype-listening .audio-single { width: 100%; margin: 0; padding: 0; gap: 8px; }
body[data-prototype] .prototype-listening .audio-choice { padding: 10px 8px; min-width: 0; min-height: 92px; background: #fff; border: 1px solid transparent; border-radius: 12px; }
body[data-prototype] .prototype-listening .audio-choice:has([data-play-state="playing"]) { border-color: #00a1d1; }
body[data-prototype] .prototype-listening .audio-single .audio-choice { max-width: 230px; margin: auto; }
body[data-prototype] .prototype-listening .audio-label { margin-bottom: 5px; color: #002664; font-size: 13px; }
body[data-prototype] .prototype-listening .audio-control { flex-direction: row; justify-content: center; gap: 8px; padding: 0; min-height: 44px; }
body[data-prototype] .prototype-listening .audio-status { font-size: 12px; line-height: 1.4; text-align: left; }
body[data-prototype] .prototype-listening .play-placeholder { width: 44px; height: 44px; background: #fff; color: #002664; border-color: #c4d6e3; }
body[data-prototype] .prototype-listening .play-placeholder svg { width: 23px; height: 23px; }
body[data-prototype] .prototype-listening .play-placeholder[data-play-state="playing"] { background: #002664; color: #fff; border-color: #002664; }
body[data-prototype] .prototype-response { flex: 0 0 auto; margin-top: 22px; }
body[data-prototype] .prototype-response .answer-fieldset { margin: 0; }
body[data-prototype] .answer-options { gap: 10px; }
body[data-prototype] .prototype-question-screen .answer-options-pair { grid-template-columns: 1fr; }
body[data-prototype] .answer-option { min-height: 54px; padding: 13px 16px; border: 1px solid #97aec5; border-radius: 12px; background: #fff; color: #002664; font-weight: 650; text-align: left; }
body[data-prototype] .answer-option:hover { border-color: #002664; background: #eaf6fb; }
body[data-prototype] .answer-option:disabled { opacity: .48; }
body[data-prototype] .accent-flag { filter: none; }
body[data-prototype] .round-note { margin: 10px 0 0; color: #526078; font-size: 13px; line-height: 1.5; }
body[data-prototype] .prototype-question-hint { margin-top: 10px; color: #526078; font-size: 13px; line-height: 1.5; text-align: center; }

/* SIGNAL RUSH keeps the real countdown node and audio controls. The same
   visual slot changes from listening wave to five-second ring after ended. */
body[data-prototype] .prototype-sprint-screen,
body[data-prototype] .prototype-sprint-intro-screen { min-height: calc(100dvh - var(--prototype-header-height) - var(--prototype-progress-height)); display: flex; flex-direction: column; text-align: left; }
body[data-prototype] .prototype-sprint-intro-screen .screen-heading,
body[data-prototype] .prototype-sprint-intro-screen .prototype-rush-rules,
body[data-prototype] .prototype-sprint-intro-screen .continue-area { order: initial; }
body[data-prototype] .prototype-rush-heading > p { color: #ffca00; }
body[data-prototype] .prototype-sprint-screen .prototype-scene-kicker,
body[data-prototype] .prototype-sprint-intro-screen .prototype-scene-kicker { color: #ffca00; }
body[data-prototype] .prototype-rush-heading h1 { font-size: 29px; }
body[data-prototype] .prototype-station-nodes { display: flex; flex: 0 0 auto; position: relative; justify-content: space-between; list-style: none; padding: 0; margin: 0 0 14px; }
body[data-prototype] .prototype-station-nodes::before { content: ''; position: absolute; top: 16px; left: 24px; right: 24px; height: 1px; background: #496791; }
body[data-prototype] .prototype-station-nodes li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #bad0e4; font-size: 11px; }
body[data-prototype] .prototype-station-nodes li > span:first-child { display: grid; width: 33px; height: 33px; place-items: center; background: #002664; border: 1px solid #7490b0; border-radius: 50%; font-size: 11px; font-weight: 750; }
body[data-prototype] .prototype-station-nodes li.is-current { color: #ffca00; }
body[data-prototype] .prototype-station-nodes li.is-current > span:first-child { background: #ffca00; border-color: #ffca00; color: #002664; }
body[data-prototype] .prototype-station-nodes li.is-complete > span:first-child { background: #00a1d1; border-color: #00a1d1; color: #002664; }
body[data-prototype] .prototype-signal-core { display: grid; position: relative; flex: 1; min-height: 230px; width: 100%; grid-template-rows: minmax(140px,1fr) auto; align-items: center; justify-items: center; gap: 14px; }
body[data-prototype] .prototype-signal-core .sprint-clock,
body[data-prototype] .prototype-intro-clock { position: relative; display: flex; flex: 0 0 auto; width: min(100%, 320px); aspect-ratio: 1; height: auto; flex-direction: column; gap: 10px; border: 0; border-radius: 50%; padding: 0; background: transparent; color: #fff; overflow: visible; }
body[data-prototype] .prototype-signal-core .sprint-clock > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #345380; stroke-width: 5; }
body[data-prototype] .prototype-signal-core .sprint-clock { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 140px; aspect-ratio: auto; align-items: center; justify-content: center; }
body[data-prototype] .prototype-signal-core .sprint-clock > svg { transform: rotate(-90deg); }
body[data-prototype] .prototype-signal-core .prototype-ring-base { stroke: #345380; }
body[data-prototype] .prototype-signal-core .prototype-ring-progress { stroke: #ffca00; stroke-linecap: round; stroke-dashoffset: calc(100 - var(--sprint-progress, 1) * 100); transition: stroke-dashoffset 180ms linear, stroke 700ms ease; }
body[data-prototype] .prototype-signal-core .sprint-clock-seconds { position: relative; font-size: clamp(70px, 13dvh, 104px); min-width: auto; line-height: 1; font-weight: 750; letter-spacing: -.06em; }
body[data-prototype] .prototype-signal-core .sprint-clock-label { position: relative; order: 1; color: #d5e3f0; font-size: 13px; font-weight: 500; }
body[data-prototype] #main:not([data-sprint-phase="running"]):not([data-sprint-phase="paused"]) .prototype-signal-core .sprint-clock-label { margin-top: 76px; }
body[data-prototype] .prototype-signal-core .sprint-clock-unit { display: none; }
body[data-prototype] .prototype-signal-core .sprint-clock-track { display: none; }
body[data-prototype] .prototype-sprint-wave { display: none; position: relative; grid-area: 1 / 1; width: min(68%, 220px); margin-top: -24px; pointer-events: none; }
body[data-prototype] .prototype-sprint-wave svg { display: block; width: 100%; height: auto; }
body[data-prototype] #main:not([data-sprint-phase="running"]):not([data-sprint-phase="paused"]) .prototype-signal-core .sprint-clock-seconds { visibility: hidden; }
body[data-prototype] #main:not([data-sprint-phase="running"]):not([data-sprint-phase="paused"]) .prototype-sprint-wave { display: block; }
body[data-prototype] .prototype-signal-core .listening-stage { grid-area: 2 / 1; display: flex; width: 100%; min-height: 78px; flex-direction: column; align-items: center; overflow: visible; border: 0; background: transparent; }
body[data-prototype] .prototype-signal-core .stage-label { position: static; color: #d5e3f0; font-size: 14px; text-align: center; }
body[data-prototype] .prototype-signal-core .stage-backdrop { display: none; }
body[data-prototype] .prototype-signal-core .audio-single { padding: 0; }
body[data-prototype] .prototype-signal-core .audio-control { flex-direction: row; padding: 8px 0 0; gap: 8px; }
body[data-prototype] .prototype-signal-core .play-placeholder { width: 44px; height: 44px; border-color: #7490b0; background: transparent; color: #fff; }
body[data-prototype] .prototype-signal-core .play-placeholder svg { width: 22px; height: 22px; }
body[data-prototype] .prototype-signal-core .audio-status { font-size: 13px; color: #bad0e4; }
body[data-prototype] #main[data-sprint-phase="running"] .prototype-signal-core .audio-single,
body[data-prototype] #main[data-sprint-phase="paused"] .prototype-signal-core .audio-single { display: none; }
body[data-prototype] #main[data-sprint-phase="running"] .prototype-signal-core .listening-stage,
body[data-prototype] #main[data-sprint-phase="paused"] .prototype-signal-core .listening-stage { min-height: 21px; }
body[data-prototype] .prototype-sprint-screen .prototype-response { margin-top: 18px; }
body[data-prototype] .prototype-sprint-screen .answer-options-pair { grid-template-columns: 1fr; }
body[data-prototype] .prototype-sprint-screen .answer-option { justify-content: flex-start; gap: 10px; background: transparent; border-color: #7490b0; color: #fff; }
body[data-prototype] .prototype-sprint-screen .answer-option:not(:disabled):hover { background: #163d76; border-color: #fff; }
body[data-prototype] .prototype-sprint-screen .round-note { color: #bad0e4; }
body[data-prototype] #main[data-sprint-phase="running"][data-sprint-urgency="warning"]::after { border-color: #d86b75; }
body[data-prototype] #main[data-sprint-phase="running"][data-sprint-urgency="critical"]::after { border-width: 4px; border-color: #ef939b; }
body[data-prototype] .sprint-clock[data-urgent="true"] { background: transparent; color: #ffd1d5; }
body[data-prototype] .prototype-signal-core .sprint-clock[data-urgent="true"] .prototype-ring-progress { stroke: #ef939b; }
body[data-prototype] .prototype-signal-core .sprint-clock[data-critical="true"] > svg { stroke-width: 7; }
body[data-prototype] .prototype-signal-intro { grid-template-rows: minmax(180px,1fr); }
body[data-prototype] .prototype-intro-clock { grid-area: 1 / 1; display: flex; justify-content: center; align-items: center; align-self: center; margin-block: auto; border: 4px solid #ffca00; max-width: 280px; min-height: 200px; }
body[data-prototype] .prototype-intro-clock strong { font-size: 96px; font-weight: 750; line-height: 1; }
body[data-prototype] .prototype-intro-clock span { color: #d5e3f0; font-size: 14px; }
body[data-prototype] .prototype-rush-rules { margin-top: 16px; color: #d5e3f0; font-size: 16px; line-height: 1.6; text-align: center; }
body[data-prototype] .prototype-sprint-intro-screen .continue-area { margin-top: 22px; padding: 0; }

/* The result ticket owns surplus height. Related CTAs remain together at the
   safe lower edge, while unlocked content and answer details stay available. */
body[data-prototype] .results-screen { padding: 0 20px 24px; }
body[data-prototype] .prototype-result-hero { display: flex; flex-direction: column; min-height: calc(100dvh - var(--prototype-header-height)); padding: 16px 0 max(20px, env(safe-area-inset-bottom)); gap: 28px; }
body[data-prototype] .prototype-listening-pass { display: flex; position: relative; flex: 1; flex-direction: column; min-height: min-content; padding: 22px 20px 0; color: #002664; background: #fff; border-radius: 16px; box-shadow: 0 5px 0 rgba(0,161,209,.25); }
body[data-prototype] .prototype-pass-label { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; color: #526078; font-size: 11px; line-height: 1.5; font-weight: 750; letter-spacing: .1em; }
body[data-prototype] .prototype-pass-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #00a1d1; }
body[data-prototype] .prototype-pass-score-row { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 24px; }
body[data-prototype] .prototype-pass-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; line-height: 1; font-variant-numeric: tabular-nums; }
body[data-prototype] .prototype-pass-score > strong { font-size: 84px; font-weight: 750; letter-spacing: -.07em; }
body[data-prototype] .prototype-pass-score > span { font-size: 28px; }
body[data-prototype] .prototype-pass-score > small { flex-basis: 100%; margin-top: 6px; color: #526078; font-size: 13px; line-height: 1.4; }
body[data-prototype] .prototype-pass-name { min-width: 0; max-width: 155px; }
body[data-prototype] .prototype-pass-name > p { margin: 0 0 6px; color: #526078; font-size: 12px; }
body[data-prototype] .prototype-pass-name > h2 { font-size: 22px; font-weight: 750; line-height: 1.4; text-wrap: balance; }
body[data-prototype] .prototype-pass-ticket-edge { position: relative; height: 1px; margin-inline: -20px; border-top: 1px dashed #b7cad9; }
body[data-prototype] .prototype-pass-ticket-edge::before,
body[data-prototype] .prototype-pass-ticket-edge::after { content: ''; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: #002664; }
body[data-prototype] .prototype-pass-ticket-edge::before { left: -8px; }
body[data-prototype] .prototype-pass-ticket-edge::after { right: -8px; }
body[data-prototype] .prototype-pass-message { flex: 0 0 auto; padding: 24px 0 26px; }
body[data-prototype] .prototype-pass-message > h1 { font-size: 22px; line-height: 1.45; text-wrap: balance; }
body[data-prototype] .prototype-pass-message > p { margin-top: 8px; color: #526078; font-size: 16px; line-height: 1.6; }
body[data-prototype] .prototype-result-actions { flex: 0 0 auto; display: grid; gap: 10px; }
body[data-prototype] .prototype-result-actions .share-reward { margin: 0; padding: 0; border: 0; }
body[data-prototype] .prototype-result-actions .reward-copy { margin: 0 0 10px; color: #d5e3f0; font-size: 13px; line-height: 1.45; text-align: center; }
body[data-prototype] .prototype-result-actions .button { min-height: 52px; }
body[data-prototype] .prototype-result-actions .button-outline { border-color: #d5e3f0; color: #fff; }
body[data-prototype] .prototype-result-actions .button-outline:hover { background: rgba(234,246,251,.1); }
body[data-prototype] .prototype-result-actions .cta-note { color: #bad0e4; font-size: 11px; line-height: 1.5; }
body[data-prototype] .prototype-result-actions .share-inline-status,
body[data-prototype] .prototype-result-actions .share-confirmation-copy,
body[data-prototype] .prototype-result-actions .text-button,
body[data-prototype] .prototype-result-actions .share-manual { color: #d5e3f0; }
body[data-prototype] .prototype-result-actions .share-manual textarea { color: #002664; background: #eaf6fb; }
body[data-prototype] .result-details { margin-top: 20px; color: #d5e3f0; }
body[data-prototype] .score-details { color: #d5e3f0; }
body[data-prototype] .score-details summary { min-height: 48px; }
body[data-prototype] .score-breakdown strong,
body[data-prototype] .sprint-answer-row { color: #fff; }
body[data-prototype] .sprint-answer-list,
body[data-prototype] .sprint-answer-list li { border-color: #345380; }
body[data-prototype] .sprint-answer-status,
body[data-prototype] .score-details .supporting,
body[data-prototype] .station-number { color: #bad0e4; }
body[data-prototype] .restart-game { color: #d5e3f0; }
body[data-prototype] .reward-panel { padding: 24px 16px; border: 0; border-radius: 18px; background: #fff; color: #002664; scroll-margin-top: 16px; }
body[data-prototype] .reward-panel .supporting { color: #526078; }
body[data-prototype] .reward-panel .reward-video { border-color: #d7e2ed; background: #eaf6fb; }
body[data-prototype] .reward-panel .reward-video-preview img { filter: none; }
body[data-prototype] .reward-asset-card { display: grid; grid-template-columns: 106px minmax(0,1fr); gap: 16px; align-items: center; margin-top: 20px; }
body[data-prototype] .reward-asset-card .reward-preview { margin: 0; }
body[data-prototype] .reward-asset-name { font-size: 16px; margin-bottom: 12px; }
body[data-prototype] .reward-asset-actions .button { font-size: 14px; padding-inline: 10px; }

/* Reveal screens inherit the same type and audio components, with the complete
   sentence next to its pronunciation cue. No content or replay behavior hides. */
body[data-prototype] .answer-reveal-screen { padding-top: 18px; }
body[data-prototype] .answer-reveal-screen .screen-heading { margin-bottom: 16px; }
body[data-prototype] .reveal-answer { font-size: 27px; }
body[data-prototype] .reveal-comment { font-size: 16px; color: #526078; }
body[data-prototype] .answer-feedback { margin-bottom: 16px; color: #526078; }
body[data-prototype] .pronunciation-lesson { padding: 18px; border-color: #cddfea; background: #eaf6fb; border-radius: 16px; }
body[data-prototype] .inline-transcript { padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid #cddfea; }
body[data-prototype] .inline-transcript-label { color: #526078; font-size: 12px; margin-bottom: 6px; }
body[data-prototype] .inline-transcript .transcript { padding: 0; color: #002664; font-size: 18px; line-height: 1.5; }
body[data-prototype] .pronunciation-lesson .word-focus p { font-size: 34px; }
body[data-prototype] .word-focus mark { border-color: #00a1d1; }
body[data-prototype] .lesson-cue { line-height: 1.7; }
body[data-prototype] .lesson-label,
body[data-prototype] .lesson-replay-label { color: #526078; font-size: 13px; }
body[data-prototype] .lesson-replay { border-color: #cddfea; }
body[data-prototype] .lesson-audios .audio-status { font-size: 14px; }
body[data-prototype] .pronunciation-lesson .play-placeholder { background: #fff; border-color: #97aec5; color: #002664; }
body[data-prototype] .pronunciation-lesson .play-placeholder[data-play-state="playing"] { background: #002664; color: #fff; }
body[data-prototype] .answer-reveal-screen .continue-area { padding-top: 20px; }

@media (min-height: 780px) {
  body[data-prototype] .prototype-pass-score-row { flex-direction: column; justify-content: center; gap: 8px; padding-block: 22px; }
  body[data-prototype] .prototype-pass-score { justify-content: center; }
  body[data-prototype] .prototype-pass-score > strong { font-size: 128px; }
  body[data-prototype] .prototype-pass-score > small { text-align: center; }
  body[data-prototype] .prototype-pass-name { max-width: 100%; text-align: center; }
  body[data-prototype] .prototype-pass-name > p { display: none; }
  body[data-prototype] .prototype-pass-name > h2 { font-size: 24px; }
}
@media (max-height: 700px) {
  body[data-prototype] { --prototype-header-height: 60px; --prototype-progress-height: 42px; }
  body[data-prototype] .site-header { padding-block: 9px; }
  body[data-prototype] .prototype-site-header > svg,
  body[data-prototype] .prototype-site-header > img { width: 130px; }
  body[data-prototype] .screen { padding-top: 10px; padding-bottom: 16px; }
  body[data-prototype] .prototype-question-heading,
  body[data-prototype] .prototype-rush-heading { margin-bottom: 12px; }
  body[data-prototype] h1,
  body[data-prototype] .prototype-rush-heading h1 { font-size: 26px; }
  body[data-prototype] .prototype-listening { min-height: 198px; padding: 12px; }
  body[data-prototype] .prototype-wave { padding-block: 10px; }
  body[data-prototype] .prototype-wave > svg { height: 72px; }
  body[data-prototype] .prototype-listening .listening-stage { min-height: 114px; }
  body[data-prototype] .prototype-listening .stage-label { margin-bottom: 8px; }
  body[data-prototype] .prototype-listening .audio-choice { min-height: 76px; padding: 7px 5px; }
  body[data-prototype] .prototype-response { margin-top: 16px; }
  body[data-prototype] .prototype-signal-core { min-height: 190px; gap: 8px; }
  body[data-prototype] .prototype-signal-core .sprint-clock { width: 100%; }
  body[data-prototype] .prototype-signal-core .sprint-clock-seconds { font-size: 76px; }
  body[data-prototype] .prototype-intro-clock { max-width: 210px; min-height: 180px; }
  body[data-prototype] .prototype-intro-clock strong { font-size: 78px; }
  body[data-prototype] .prototype-rush-rules { margin-top: 12px; font-size: 15px; }
  body[data-prototype] .results-screen { padding-top: 0; }
  body[data-prototype] .prototype-result-hero { padding-top: 8px; gap: 20px; }
  body[data-prototype] .prototype-listening-pass { padding-top: 14px; }
  body[data-prototype] .prototype-pass-score-row { padding-block: 10px 16px; }
  body[data-prototype] .prototype-pass-score > strong { font-size: 62px; }
  body[data-prototype] .prototype-pass-name > h2 { font-size: 20px; }
  body[data-prototype] .prototype-pass-message { padding-block: 16px 18px; }
  body[data-prototype] .prototype-pass-message > h1 { font-size: 20px; }
  body[data-prototype] .prototype-pass-message > p { margin-top: 6px; line-height: 1.5; }
  body[data-prototype] .prototype-result-actions .reward-copy { margin-bottom: 8px; }
}
@media (max-width: 360px) {
  body[data-prototype] .site-header { padding-inline: 16px; }
  body[data-prototype] .progress { padding-inline: 16px; }
  body[data-prototype] .screen { padding-inline: 16px; }
  body[data-prototype] .prototype-listening { padding-inline: 10px; }
  body[data-prototype] .prototype-listening .audio-control { gap: 4px; }
  body[data-prototype] .prototype-listening .audio-status { font-size: 11px; }
  body[data-prototype] .prototype-listening-pass { padding-inline: 16px; }
  body[data-prototype] .prototype-pass-ticket-edge { margin-inline: -16px; }
  body[data-prototype] .prototype-pass-name > h2 { font-size: 19px; }
  body[data-prototype] .prototype-pass-message > h1 { font-size: 20px; }
}
@keyframes prototype-wave { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  body[data-prototype] .prototype-wave rect,
  body[data-prototype] .prototype-sprint-wave rect { animation: none !important; }
  body[data-prototype] .prototype-ring-progress { transition: none !important; }
}

/* A size-contained shared landing needs a definite host height. Override the
   general screen padding so its own CURRENT composition owns the viewport. */
body[data-prototype] #main .prototype-home-screen {
  flex: 0 0 auto;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  justify-content: stretch;
}
body[data-prototype] .prototype-home-screen > .current-landing { flex: 1; height: 100%; }