:root {
  color-scheme: light;
  --page: #f4f4f4;
  --surface: #fff;
  --surface-soft: #f6f6f6;
  --surface-muted: #ededed;
  --ink: #252525;
  --secondary: #626262;
  --border: #d5d5d5;
  --border-strong: #939393;
  --focus: #252525;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-title: 26px;
  --text-hero: 34px;
  --text-score: 80px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius: 8px;
  --content-width: 390px;
  --tap-target: 48px;
  --audio-size: 88px;
  --compact-audio-size: 64px;
  --result-media-size: 96px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font); font-size: var(--text-base); line-height: 1.65; overflow-wrap: anywhere; }
button, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
button, a, summary, textarea { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
h1:focus, #main:focus { outline: none; }
h1, h2, h3, p, ol, ul { margin: 0; }
h1 { font-size: var(--text-title); line-height: 1.45; letter-spacing: -.035em; font-weight: 650; text-wrap: pretty; }
h2, h3 { font-size: var(--text-lg); line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 5; padding: var(--space-3); background: var(--ink); color: white; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.app-frame { width: 100%; max-width: var(--content-width); min-height: 100svh; margin: 0 auto; background: var(--surface); display: flex; flex-direction: column; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6); }
.wordmark { font-size: 21px; font-weight: 750; letter-spacing: -.8px; }
.wordmark > span { padding-left: 1px; }
.site-name { font-size: var(--text-xs); color: var(--secondary); }
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.screen { padding: var(--space-8) var(--space-6); flex: 1; display: flex; flex-direction: column; }
.screen-heading { margin-bottom: var(--space-6); }
.eyebrow { font-size: var(--text-sm); color: var(--secondary); margin-bottom: var(--space-2); }
.supporting { color: var(--secondary); font-size: var(--text-sm); line-height: 1.65; }
.site-footer { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-4) var(--space-6); font-size: var(--text-xs); color: var(--secondary); }
.home-screen { justify-content: center; padding-block: var(--space-10); }
.home-intro { text-align: center; margin-block: auto; padding-block: var(--space-6) var(--space-10); }
.listen-icon { width: 80px; height: 80px; stroke: var(--border-strong); stroke-width: 2; margin-bottom: var(--space-6); }
.home-intro h1 { font-size: var(--text-hero); line-height: 1.45; max-width: 330px; margin: 0 auto; text-wrap: balance; }
.home-intro .description { margin-top: var(--space-5); color: var(--secondary); font-size: var(--text-base); }
.home-start { padding-top: var(--space-8); }
.prototype-note { margin-top: var(--space-3); text-align: center; font-size: var(--text-xs); color: var(--secondary); }
.button { display: flex; width: 100%; min-height: 56px; justify-content: center; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid var(--ink); font-size: var(--text-base); font-weight: 600; text-decoration: none; line-height: 1.5; }
.button > span[aria-hidden] { margin-left: auto; flex-shrink: 0; }
.button-primary { background: var(--ink); color: var(--surface); }
.button-primary:hover { background: #414141; }
.button-primary:active { background: #111; }
.button-outline { background: var(--surface); border-color: var(--border-strong); }
.button-outline:hover { background: var(--surface-soft); border-color: var(--ink); }
.button-disabled { color: var(--secondary); background: var(--surface-soft); border: 1px dashed var(--border-strong); font-weight: 400; }
.progress { padding: var(--space-3) var(--space-6) 0; }
.progress-label { display: flex; justify-content: space-between; color: var(--secondary); font-size: var(--text-xs); margin-bottom: var(--space-3); }
.progress-track { display: flex; gap: var(--space-2); list-style: none; padding: 0; }
.progress-track li { height: 3px; flex: 1; background: var(--surface-muted); }
.progress-track li.current { background: var(--ink); }
.progress-track li.complete { background: var(--border-strong); }
.audio-choice { text-align: center; }
.audio-control { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding-block: var(--space-5); }
.play-placeholder { width: var(--audio-size); height: var(--audio-size); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--border); background: var(--surface-soft); color: var(--border-strong); }
.play-placeholder svg { width: 32px; height: 32px; fill: currentColor; transform: translateX(-2px); }
.play-placeholder:not(:disabled) { color: var(--ink); border-color: var(--border-strong); }
.play-placeholder:not(:disabled):hover { background: var(--surface-muted); }
.play-placeholder[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.play-placeholder[aria-pressed="true"] svg { transform: none; }
.audio-status, .audio-label { font-size: var(--text-sm); color: var(--secondary); }
.audio-label { display: block; color: var(--ink); font-weight: 600; }
.audio-compact .play-placeholder { width: var(--compact-audio-size); height: var(--compact-audio-size); }
.audio-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); padding-top: var(--space-5); }
.audio-comparison .audio-control { padding-top: var(--space-3); }
.audio-replay .audio-control { flex-direction: row; justify-content: center; padding-block: var(--space-3); }
.audio-replay .play-placeholder { width: var(--tap-target); height: var(--tap-target); }
.audio-replay .play-placeholder svg { width: 24px; height: 24px; }
.replay-group { margin-top: var(--space-5); }
.replay-group-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.replay-group-pair .audio-control { flex-direction: column; gap: var(--space-2); }
.transcript-disclosure { text-align: center; color: var(--secondary); font-size: var(--text-sm); }
summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--space-2); }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: var(--text-lg); font-weight: 400; margin-left: auto; }
details[open] > summary::after { content: '−'; }
.transcript-disclosure > summary { justify-content: center; gap: var(--space-2); }
.transcript-disclosure > summary::after { margin-left: 0; }
.transcript { font-size: var(--text-base); line-height: 1.65; padding: var(--space-3) 0; color: var(--secondary); }
.answer-fieldset { margin: var(--space-6) 0 0; padding: 0; border: 0; min-width: 0; }
.answer-options { display: grid; gap: var(--space-3); }
.answer-options-pair { grid-template-columns: 1fr 1fr; }
.answer-option { width: 100%; min-height: 60px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: var(--text-base); font-weight: 500; }
.answer-option:hover { background: var(--surface-soft); border-color: var(--ink); }
.answer-option:active { background: var(--surface-muted); }
.round-note { margin-top: var(--space-4); text-align: center; color: var(--secondary); font-size: var(--text-sm); }
.reveal-status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.reveal-status strong { font-weight: 500; }
.answer-recap { font-size: var(--text-sm); color: var(--secondary); margin-top: var(--space-2); }
.listening-cue { margin-top: var(--space-6); font-size: var(--text-base); line-height: 1.8; }
.continue-area { padding-top: var(--space-8); margin-top: auto; }
.sprint-intro-screen { text-align: center; }
.sprint-intro-screen .screen-heading { order: 1; }
.sprint-intro-content { display: contents; }
.station-count { order: 0; display: flex; align-items: baseline; justify-content: center; gap: var(--space-2); margin-block: var(--space-4) var(--space-6); color: var(--secondary); }
.station-count strong { font-size: var(--text-score); color: var(--ink); line-height: 1.1; font-weight: 500; }
.sprint-intro-copy { order: 2; font-size: var(--text-base); color: var(--secondary); }
.sprint-intro-screen .continue-area { order: 3; }
.sprint-score { text-align: center; margin-bottom: var(--space-6); }
.sprint-score-line { display: flex; justify-content: center; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.sprint-score-line strong { font-size: var(--text-hero); line-height: 1.3; }
.sprint-score-line span { font-size: var(--text-sm); color: var(--secondary); }
.sprint-reveals { border-top: 1px solid var(--border); }
.station-reveal { border-bottom: 1px solid var(--border); }
.station-reveal > summary { min-height: 64px; font-size: var(--text-base); }
.station-number { color: var(--secondary); font-size: var(--text-xs); width: 20px; flex-shrink: 0; }
.station-answer { font-weight: 500; }
.station-result { margin-left: auto; font-size: var(--text-xs); color: var(--secondary); }
.station-reveal > summary::after { margin-left: var(--space-2); }
.station-reveal-content { padding-bottom: var(--space-4); }
.station-reveal .audio-control { justify-content: flex-start; }
.station-reveal > div > .supporting { margin-top: var(--space-3); }
.results-screen { padding-top: var(--space-4); }
.results-screen .screen-heading { text-align: center; margin-bottom: var(--space-4); }
.results-screen h1 { font-size: var(--text-lg); font-weight: 500; }
.results-card { text-align: center; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); }
.share-reward { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.reward-copy { font-size: var(--text-base); margin-bottom: var(--space-3); }
.score { display: flex; align-items: baseline; justify-content: center; gap: var(--space-2); line-height: 1; margin-block: var(--space-2) var(--space-3); }
.score strong { font-size: var(--text-score); font-weight: 600; letter-spacing: -.06em; }
.score > span { color: var(--secondary); font-size: var(--text-title); }
.score-caption { font-size: var(--text-sm); color: var(--secondary); }
.takeaway { padding-top: var(--space-8); margin-top: var(--space-8); border-top: 1px solid var(--border); font-size: var(--text-base); line-height: 1.8; }
.takeaway h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.takeaway p { color: var(--secondary); }
.cta-group { display: grid; gap: var(--space-5); }
.cta-group .button { text-align: left; justify-content: flex-start; font-weight: 500; gap: var(--space-2); }
.cta-note { color: var(--secondary); font-size: var(--text-xs); margin-top: var(--space-2); text-align: center; }
.score-details { font-size: var(--text-sm); color: var(--secondary); margin-top: var(--space-2); }
.score-details > summary { justify-content: center; }
.score-details > summary::after { margin-left: 0; }
.score-breakdown { display: flex; justify-content: space-between; padding-block: var(--space-4); font-size: var(--text-sm); }
.score-breakdown > div { text-align: center; }
.score-breakdown strong { display: block; font-weight: 500; }
.score-details > .supporting + .supporting { margin-top: var(--space-2); }
dialog { max-width: 390px; width: calc(100% - 32px); max-height: calc(100dvh - 48px); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); overscroll-behavior: contain; }
dialog::backdrop { background: rgb(0 0 0 / 35%); }
body:has(dialog[open]) { overflow: hidden; }
.dialog-header { display: flex; justify-content: flex-end; }
.close-button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; font-size: 24px; }
dialog h2 { font-size: 24px; line-height: 1.5; margin-block: var(--space-2) var(--space-5); font-weight: 600; }
dialog > p { margin-bottom: var(--space-5); }
.share-preview { margin-block: var(--space-4) var(--space-6); font-size: var(--text-sm); color: var(--secondary); }
.share-preview textarea { width: 100%; margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); background: var(--surface-soft); font-size: var(--text-sm); line-height: 1.7; resize: vertical; min-height: 160px; border-radius: var(--radius); }
.share-preview .supporting { font-size: var(--text-xs); margin-top: var(--space-2); }
.inline-message:empty { display: none; }
.text-button { border: 0; background: transparent; display: block; min-height: var(--tap-target); margin: var(--space-2) auto 0; padding: var(--space-2); font-size: var(--text-sm); color: var(--secondary); text-decoration: underline; text-underline-offset: 4px; }
.guide-placeholder, .destination-placeholder { margin-block: var(--space-6); }
.guide-placeholder h3 { margin-bottom: var(--space-3); }
.dialog-status { font-size: var(--text-sm); color: var(--secondary); }
.share-inline-status { margin-top: var(--space-2); color: var(--secondary); font-size: var(--text-sm); line-height: 1.65; }
.share-confirmation-copy { margin-bottom: var(--space-3); color: var(--secondary); font-size: var(--text-base); line-height: 1.65; }
.share-manual + .button { margin-top: var(--space-3); }
.share-copy-fallback { margin-top: 0; }
.share-manual { margin-top: var(--space-3); color: var(--secondary); font-size: var(--text-sm); }
.share-manual textarea { width: 100%; min-height: 160px; margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); resize: vertical; font-size: var(--text-base); line-height: 1.6; }
@media (min-width: 768px) {
  .app-frame { border-inline: 1px solid var(--border); }
}
@media (max-height: 700px) {
  .home-intro { padding-block: var(--space-2) var(--space-4); }
  .home-screen { padding-block: var(--space-5); }
  .listen-icon { width: 64px; height: 64px; margin-bottom: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* V4: image composition and stage changes, still intentionally low fidelity. */
.home-screen { padding-block: var(--space-6); }
.home-intro { padding-block: 0; text-align: left; }
.home-intro h1 { font-size: 32px; text-wrap: pretty; margin: 0; }
.home-intro .description { margin-top: var(--space-3); }
.media-slot { position: relative; display: block; width: 100%; margin: 0; overflow: hidden; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-soft); }
.media-slot svg { display: block; width: 100%; height: 100%; }
.media-slot svg g { stroke: var(--border-strong); stroke-width: 2; fill: none; }
.media-slot svg circle, .media-slot svg rect { fill: var(--surface-muted); }
.media-slot figcaption { position: absolute; inset: auto 0 0; padding: var(--space-1) var(--space-2); color: var(--secondary); background: var(--surface-soft); text-align: center; font-size: var(--text-xs); line-height: 1.5; }
.media-slot-home { aspect-ratio: 16 / 10; margin-top: var(--space-6); }
.home-intro .media-slot { order: 2; }
.media-slot-journey { aspect-ratio: 2 / 1; order: 0; margin-block: var(--space-3) var(--space-6); }
.listening-stage { position: relative; min-height: 200px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-soft); overflow: hidden; }
.stage-label { position: absolute; top: var(--space-2); left: var(--space-3); font-size: var(--text-xs); color: var(--secondary); z-index: 1; }
.stage-backdrop { position: absolute; inset: 42px 36px 30px; border: 1px solid var(--border); border-radius: 50%; }
.stage-backdrop::before { content: ''; position: absolute; inset: 12px -18px; border: 1px solid var(--border); border-radius: 50%; }
.listening-stage .audio-comparison, .listening-stage .audio-single { position: relative; padding: var(--space-8) var(--space-3) var(--space-3); }
.listening-stage .audio-control { padding-block: var(--space-3); gap: var(--space-2); }
.listening-stage .play-placeholder { background: var(--surface); }
.listening-stage + .transcript-disclosure { margin-top: var(--space-2); }
.word-focus { text-align: center; margin-top: var(--space-4); }
.word-focus p { font-size: 40px; line-height: 1.4; font-weight: 500; letter-spacing: -.04em; }
.word-focus mark { color: inherit; background: transparent; border-bottom: 3px solid var(--ink); }
.word-focus > span { color: var(--secondary); font-size: var(--text-xs); }
.word-focus + .listening-cue { margin-top: var(--space-4); }
.station-reveal-content .word-focus { margin-block: var(--space-3); }
.result-visual-row { display: grid; grid-template-columns: var(--result-media-size) minmax(0, 1fr); gap: var(--space-4); align-items: center; margin-top: var(--space-4); }
.media-slot-result { width: var(--result-media-size); height: 110px; }
.media-slot-result svg { transform: scale(1.6); transform-origin: 50% 36%; }
.media-slot-result figcaption { font-size: 11px; }
.result-visual-row .score strong { font-size: 72px; }
.result-visual-row .score-caption { white-space: nowrap; font-size: var(--text-xs); }
.share-invitation { margin-top: var(--space-5); font-size: var(--text-base); }
.share-reward { margin-top: var(--space-4); }
.share-reward .button { padding-inline: var(--space-3); gap: var(--space-1); }
@media (max-height: 700px) {
  .home-screen { padding-block: var(--space-4); }
  .home-intro h1 { font-size: 28px; }
  .media-slot-home { aspect-ratio: 2 / 1; margin-top: var(--space-4); }
  .home-start { padding-top: var(--space-5); }
}

/* V4.1: answer explanations only. Keep the rest of V4 unchanged. */
.answer-reveal-screen .screen-heading { margin-bottom: var(--space-4); }
.reveal-answer, .reveal-comment { display: block; }
.reveal-comment { margin-top: var(--space-2); color: var(--secondary); font-size: var(--text-base); line-height: 1.65; font-weight: 400; letter-spacing: 0; }
.answer-feedback { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-5); color: var(--secondary); font-size: var(--text-sm); }
.answer-feedback strong { color: var(--ink); font-weight: 500; }
.answer-feedback strong > span { color: var(--secondary); font-weight: 400; }
.pronunciation-lesson { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.lesson-label, .lesson-replay-label { color: var(--secondary); font-size: var(--text-sm); }
.pronunciation-lesson .word-focus { text-align: left; margin: var(--space-1) 0 var(--space-3); }
.pronunciation-lesson .word-focus p { font-size: var(--text-hero); line-height: 1.4; }
.pronunciation-lesson .word-focus mark { border-bottom-width: 2px; }
.lesson-cue { font-size: var(--text-base); line-height: 1.8; }
.lesson-replay { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.lesson-audios-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pronunciation-lesson .audio-control { flex-direction: row; justify-content: flex-start; gap: var(--space-2); padding-block: var(--space-2); text-align: left; }
.pronunciation-lesson .play-placeholder { background: var(--surface); }
.pronunciation-lesson .audio-status { font-size: var(--text-base); }
.pronunciation-lesson .transcript-disclosure { text-align: left; }
.pronunciation-lesson .transcript-disclosure > summary { justify-content: flex-start; }
.pronunciation-lesson .transcript-disclosure > summary::after { margin-left: auto; }
.answer-reveal-screen .continue-area { padding-top: var(--space-6); }
.station-reveal-content .pronunciation-lesson { margin-top: var(--space-3); }
@media (max-width: 389px) { .pronunciation-lesson { padding: var(--space-4); } }

/* V4.4: longer focus groups wrap between complete words; reveal all stations together. */
.focus-word { display: inline-block; }
.answer-option:has(.accent-flag) { display: flex; align-items: center; justify-content: center; gap: var(--space-1); }
.accent-flag { filter: grayscale(1); flex-shrink: 0; }
.sprint-reveal-screen { animation: reveal-content 180ms ease-out; }
@keyframes reveal-content { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sprint-reveal-screen { animation: none; } }

/* V4.2: the sprint countdown sits beside the station, separate from game progress. */
.progress-label:has(.sprint-meta) { align-items: center; gap: var(--space-2); }
.sprint-meta { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.sprint-clock { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 114px; justify-content: center; padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); color: var(--ink); font-size: var(--text-sm); line-height: 1.5; }
.sprint-clock svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.sprint-clock-seconds { min-width: 2ch; text-align: center; font-size: var(--text-lg); font-variant-numeric: tabular-nums; font-weight: 600; }
.sprint-clock[data-urgent="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.sprint-untimed { font-size: var(--text-sm); padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); }
.sprint-mode-option { order: 2; display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; align-self: center; margin-top: var(--space-3); padding: var(--space-2); font-size: var(--text-sm); color: var(--secondary); cursor: pointer; }
.sprint-mode-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }

/* V4.3: completion, message, and both actions are present together. */
.results-screen { --result-media-size: 64px; --result-title-size: 24px; --result-score-size: 40px; }
.results-card { padding: var(--space-4); text-align: left; }
.results-card .result-visual-row { margin-top: 0; }
.results-card .media-slot-result { height: 72px; }
.results-card .media-slot-result svg { transform: none; }
.results-card .media-slot-result figcaption { padding: 0 var(--space-1); font-size: var(--text-xs); line-height: 1.25; }
.results-card .score { justify-content: flex-start; gap: var(--space-2); margin: 0; line-height: 1.2; }
.results-card .result-visual-row .score strong { font-size: var(--result-score-size); }
.results-card .score > span { font-size: var(--text-lg); }
.results-card .score > .score-unit { font-size: var(--text-base); }
.results-card .score-caption { margin-top: var(--space-1); }
.result-message { margin-top: var(--space-4); }
.results-card .result-message h1 { font-size: var(--result-title-size); font-weight: 650; line-height: 1.4; text-wrap: balance; }
.result-message-copy { margin-top: var(--space-2); color: var(--secondary); font-size: var(--text-base); line-height: 1.65; }
.results-card .share-reward { padding-top: var(--space-3); }
.results-screen .cta-group { gap: var(--space-4); }
.result-details { margin-top: var(--space-2); }
.sprint-summary { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-3); font-size: var(--text-base); color: var(--secondary); }
.sprint-summary strong { color: var(--ink); font-size: inherit; font-weight: 500; white-space: nowrap; }
.sprint-answer-list { list-style: none; padding: 0; margin-block: var(--space-3); border-top: 1px solid var(--border); }
.sprint-answer-list li { padding-block: var(--space-3); border-bottom: 1px solid var(--border); }
.sprint-answer-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); color: var(--ink); font-size: var(--text-base); }
.sprint-answer-row .station-number { margin-right: var(--space-2); }
.sprint-answer-status { flex-shrink: 0; font-size: var(--text-sm); color: var(--secondary); }
.sprint-answer-list li > p { margin-top: var(--space-1); }
.booking-cta .button-outline { color: var(--ink); }
.reward-panel { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border); scroll-margin-top: var(--space-5); }
.reward-panel h2 { font-size: var(--text-title); line-height: 1.45; }
#reward-title:focus { outline: none; }
.reward-intro { color: var(--secondary); margin-top: var(--space-2); }
.reward-preview { display: block; margin-block: var(--space-5) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #f5f3fc; }
.reward-preview img { display: block; width: 100%; height: auto; }
.reward-save-note { margin-top: var(--space-2); }
.reward-video { margin-top: var(--space-8); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.reward-video h3 { font-size: var(--result-title-size, var(--text-title)); line-height: 1.4; font-weight: 650; text-wrap: balance; }
.reward-video-hook { margin-top: var(--space-2); color: var(--secondary); }
.reward-video-preview { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; margin-block: var(--space-4); border-radius: var(--radius); background: var(--surface-muted); color: var(--ink); }
.reward-video-preview img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.reward-video-play { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); box-shadow: 0 2px 8px rgb(0 0 0 / 15%); }
.reward-video-play svg { width: 28px; height: 28px; fill: currentColor; }
.reward-video-preview:hover .reward-video-play { transform: scale(1.06); }
.reward-video-help { margin-top: var(--space-2); }
.reward-video-help > summary { justify-content: center; font-size: var(--text-sm); color: var(--secondary); }
.reward-video-help > summary::after { margin-left: var(--space-2); }
.reward-video-status { color: var(--secondary); font-size: var(--text-sm); margin-top: var(--space-3); }
.reward-practice { list-style: none; padding: 0; margin-block: var(--space-3) 0; display: grid; gap: var(--space-3); }
.reward-practice li { display: grid; grid-template-columns: 3em 1fr; gap: var(--space-3); }
.reward-practice strong { font-weight: 500; }
@media (max-width: 389px) { .results-screen { --result-title-size: 22px; } }