/* Shared reading scale. Mobile changes layout, never shrinks supporting copy. */
:root { --muted: #b2bcaa; --reading: #c4ccbd; }
body { font-size: 16px; line-height: 1.5; }
button, a { touch-action: manipulation; }
p { line-height: 1.7; }
.eyebrow, .section-kicker, .mode-note, .card-top, .modal-kicker { letter-spacing: .06em; }
nav a, nav button, .play-tabs button span, .primary-button, .play-actions .primary-button,
.secondary-button>span, .dialog-buttons .primary-button, .dialog-buttons .secondary-button { font-size: 16px; }
.intro p, .historical-context p, .challenge-card>p:not(.challenge-date), .coach-card>p,
.coach-call p, .log-text strong, .roster-player strong, .roster-note, dialog p, dialog li,
.player-card-heading p, .about-section p, .how-strip p { font-size: 16px; color: var(--reading); line-height: 1.7; }
.section-kicker, .eyebrow, .playbook-footnote, .playbook .playbook-footnote, .clock-hint,
.record-card>p, .log-text small, .empty-log small, .defense-label, .mode-note,
.challenge-date, .challenge-metrics span, .record-values>div>span, .small-muted,
.field-footer, .field-footer>span:last-child, footer p, footer>div>span,
.guide-page footer p, .roster-panel small, .player-stat-grid span, .profile-source p,
.stats-cutoff small, dialog .player-data-note { color: var(--muted); line-height: 1.6; }
.site-header { min-height: 88px; height: auto; padding-block: 16px; gap: 24px; flex-wrap: wrap; }
.site-header nav { min-height: 44px; }
.site-header nav a, .site-header nav button { min-height: 44px; }
.header-tools .icon-button { width: 40px; height: 40px; }
.mode-tabs { gap: 24px; flex-wrap: wrap; }
.mode-tabs button { font-size: 16px; }
.mode-bar { gap: 12px; flex-wrap: wrap; }
.mode-note { padding-bottom: 12px; }
.historical-context { gap: 18px; }
.historical-context small { display: block; }
.historical-context>a { flex-shrink: 0; }
.arena-topline { gap: 10px; flex-wrap: wrap; letter-spacing: .02em; }
.simulation-label { color: var(--muted); letter-spacing: 0; }
.scoreboard { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 12px; padding: 20px 18px; }
.team { flex-wrap: wrap; gap: 6px 10px; }
.team-city { display: block; font-size: 14px; letter-spacing: 0; line-height: 1.4; }
.team strong { font-size: 26px; letter-spacing: .02em; }
.team-score { font-size: 38px; margin: 0; }
.team-away .team-score { margin: 0; }
.score-clock { min-width: 0; width: 142px; margin: 0; }
.quarter, .clock-state { font-size: 14px; letter-spacing: 0; line-height: 1.4; }
.score-clock strong { font-size: 44px; }
.situation-bar { font-size: 15px; gap: 8px 16px; flex-wrap: wrap; }
#drive-objective { font-size: 14px; letter-spacing: 0; }
.field-top-label, .field-bottom-label { font-size: 14px; letter-spacing: 0; gap: 8px; }
.field-top-label>span:last-child, .field-footer>span:last-child { font-size: 14px; }
.field-top-label, .field-bottom-label { color: #e0e8d7; text-shadow: 0 1px 3px #082516; }
.player .compact-name { display: none; }
.player text { pointer-events: none; }
.field-bottom-label { flex-wrap: wrap; }
#formation-name { color: #d6e1cd; }
.field-footer { gap: 8px 20px; flex-wrap: wrap; }
.broadcast-bar { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
.broadcast-bar strong, .broadcast-bar small, .broadcast-controls button { font-size: 14px; }
.broadcast-bar small { color: var(--reading); line-height: 1.5; }
.broadcast-controls { flex-wrap: wrap; }
.broadcast-controls button { min-height: 40px; padding: 8px 12px; }
.playbook .section-heading { flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.playbook .section-heading h2 { font-size: 32px; line-height: 1.15; margin-top: 6px; }
.tempo-control { gap: 4px; flex-wrap: wrap; }
.tempo-control>span { color: var(--muted); padding-inline: 8px; }
.playbook .tempo-control button { font-size: 14px; min-height: 40px; padding: 8px 12px; }
.play-tabs { justify-content: space-between; gap: 8px; }
.play-tabs button { padding: 8px 6px 12px; min-height: 48px; }
.play-tabs button span { margin-left: 3px; }
.playbook .play-card { padding: 17px 16px 17px 96px; min-height: 128px; }
.playbook .route-mini { left: 12px; top: 45px; width: 70px; height: 48px; }
.playbook .play-card .card-kicker { font-size: 14px; letter-spacing: .02em; color: #bac5ad; line-height: 1.5; }
.playbook .play-card h3 { font-size: 28px; line-height: 1.15; margin: 5px 0 10px; }
.playbook .play-stats { font-size: 14px!important; flex-wrap: wrap; justify-content: flex-start; gap: 6px 16px; line-height: 1.5; }
.playbook .play-card .risk { position: static; font-size: 14px; color: #b8c4aa; margin-top: 9px; }
.playbook .target-picker { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.target-picker>span { width: 100%; color: var(--muted); margin-bottom: 3px; }
.playbook .target-picker button { min-height: 44px; font-size: 16px; padding: 8px 10px; flex: 1; }
.playbook .target-picker small { font-size: 14px; }
.playbook .clock-hint { font-size: 14px; }
.play-actions { gap: 10px; }
.play-actions .primary-button { min-height: 50px; padding: 14px 16px; }
.secondary-button { min-height: 48px; }
.playbook .playbook-footnote { font-size: 14px; }
.last-play span { font-size: 16px; }
.last-play small { font-size: 14px; }
.drive-panel .section-heading { flex-wrap: wrap; }
.drive-panel h2 { font-size: 28px; }
.drive-panel h2>span { display: inline-block; font-size: 14px; }
.log-text { min-width: 0; }
.log-text small, .log-time, .log-index { font-size: 14px; }
.empty-log { font-size: 16px; line-height: 1.7; }
.challenge-metrics, .record-values { gap: 12px; }
.challenge-metrics>div, .record-values>div { min-width: 0; flex: 1; }
.challenge-metrics span, .record-values>div>span { letter-spacing: 0; }
.reset-row { gap: 10px; flex-wrap: wrap; }
.roster-panel>summary { flex-wrap: wrap; }
/* Keep the roster outside the sticky field's containing block. */
.game-layout>.roster-panel { margin-top: 24px; }
.return-to-calls { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid #687d55; border-radius: 5px; color: #dceacb; font-size: 15px; font-weight: 600; }
.return-to-calls:hover { border-color: var(--orange); color: var(--orange); background: #293522; }
.broadcast-bar>.return-to-calls { width: 100%; justify-content: center; }
.roster-return { margin-bottom: 20px; }
.playbook { scroll-margin-top: 20px; }
/* A field taller than the viewport should scroll normally, not pin controls offscreen. */
@media(max-height:1100px) { .game-main>.arena { position: static; } }
.roster-player small, .roster-panel small, .stats-cutoff>span, .stats-cutoff small,
.profile-source a, .profile-source p, .profile-source code, .player-stat-grid span { font-size: 14px; }
.player-card-heading h2 { line-height: 1.15; }
.profile-source { overflow-wrap: anywhere; }
dialog { max-width: 640px; }
.modal-kicker { padding-right: 30px; }
.dialog-note { font-size: 16px!important; }
.result-score { gap: 16px; flex-wrap: wrap; }
.stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
footer { align-items: flex-start; flex-wrap: wrap; }
footer>div { flex-wrap: wrap; }
footer button, footer>div>a, .guide-page footer>div>a { font-size: 14px; min-height: 32px; display: inline-flex; align-items: center; }
.guide-hero>div>p, .guide-section p, .guide-section li, .guide-finish p,
.guide-steps p, .guide-callout p, .guide-mode-cards p, .source-list p,
.guide-section details>p, .clock-comparison p, .score-example p, .engine-steps span { font-size: 17px; line-height: 1.8; color: var(--reading); }
.guide-section .guide-small, .source-list .source-license, .toc-note { font-size: 15px; line-height: 1.7; color: var(--muted); }
.guide-toc nav>a, .guide-page .site-header nav>a { font-size: 16px; }
.guide-toc nav>a>span { font-size: 14px; }
.guide-summary>div>span { max-width: none; font-size: 14px; }
.guide-summary>div { align-items: flex-start; flex-direction: column; gap: 5px; }
.guide-summary>a { font-size: 16px; }
.guide-table, .guide-table td { font-size: 16px; }
.guide-table th, .guide-table caption, .guide-table td>small { font-size: 14px; }
.guide-table td>small { color: var(--muted); }
.guide-section details>summary { font-size: 17px; }
.score-equation { flex-wrap: wrap; justify-content: flex-start; gap: 18px; }
.score-equation small { font-size: 14px; line-height: 1.5; }
.score-equation>span { min-width: 90px; }
.grade-key>span { font-size: 15px; }
.guide-meta, .source-status, .reference-type { letter-spacing: .03em; line-height: 1.6; }
@media(max-width:1100px) {
  .game-main { display: flex; flex-direction: column; gap: 20px; }
  .game-main>* { width: 100%; min-width: 0; }
  .arena { position: static; order: 0; }
  .playbook { order: 1; }
  .drive-panel { order: 2; }
  .roster-panel { order: 3; }
  .game-sidebar { grid-template-columns: 1fr 1fr; }
  .guide-layout { grid-template-columns: 190px minmax(0,1fr); gap: 32px; }
}
@media(max-width:740px) {
  .site-header, .guide-page .site-header { height: auto; gap: 8px 16px; padding-block: 14px; }
  .site-header nav { order: 3; width: 100%; justify-content: space-between; gap: 16px; }
  .site-header nav>a, body:not(.guide-page) .site-header nav>a, .site-header nav button,
  .guide-page .site-header nav>a { font-size: 16px; }
  .site-header nav button:last-child { display: block; }
  .header-tools { margin-left: auto; }
  .brand img { width: 160px; }
  .intro .eyebrow, .guide-hero .eyebrow { font-size: 14px; line-height: 1.6; letter-spacing: .03em; }
  .intro h1 { font-size: 38px; }
  .intro p, .guide-hero>div>p { font-size: 16px; }
  .mode-tabs { gap: 0 20px; justify-content: flex-start; }
  .mode-tabs button { font-size: 16px; }
  .mode-badge { display: none; }
  .historical-context h2 { font-size: 28px; }
  .historical-context>a { font-size: 14px; }
  .arena-topline .simulation-label { width: 100%; order: 3; font-size: 14px; }
  .scoreboard { gap: 8px; padding: 16px 12px; }
  .score-clock { width: 112px; }
  .score-clock strong { font-size: 38px; }
  .team { flex-direction: column; align-items: flex-start; }
  .team-away { align-items: flex-end; }
  .team-away .team-score { order: 2; }
  .team-city { font-size: 14px; }
  .team strong { font-size: 24px; }
  .team-score { font-size: 34px; }
  .situation-bar { padding: 12px; }
  .situation-bar>span { width: 100%; }
  .field-top-label, .field-top-label>span:last-child, .field-bottom-label { font-size: 14px; }
  .field-bottom-label { position: static; padding: 10px 12px; background: #153e2c; }
  .field-bottom-label>span { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
  .field-footer { display: none; }
  .player .full-name { display: none; }
  .player .compact-name { display: block; }
  .player .player-number { font-size: 22px; }
  .playbook { padding: 18px; }
  .playbook .section-heading h2 { font-size: 32px; }
  .play-tabs { gap: 0; }
  .playbook .play-card { padding-left: 78px; }
  .playbook .route-mini { left: 8px; width: 60px; }
  .playbook .play-card h3 { font-size: 28px; }
  .game-sidebar { grid-template-columns: 1fr; }
  .record-card { grid-column: auto; }
  .challenge-card, .coach-card, .record-card { padding: 22px; }
  .how-strip { grid-template-columns: 1fr; gap: 22px; }
  .how-strip>div+div { border: 0; padding-left: 0; }
  .about-section { grid-template-columns: 1fr; gap: 16px; }
  .player-stat-grid>div { padding: 12px; }
  .dialog-buttons { flex-wrap: wrap; }
  .dialog-buttons>button { flex: 1 1 150px; }
  .guide-layout { grid-template-columns: 1fr; }
  .guide-toc nav>a { font-size: 16px; }
  .guide-summary { gap: 12px; }
  .guide-summary>div>span { font-size: 14px; }
  .clock-comparison { grid-template-columns: 1fr; }
  .score-equation>span { min-width: 80px; }
}
@media(max-width:380px) {
  .playbook { padding: 14px; }
  .play-tabs button { padding-inline: 3px; }
  .play-tabs button span { font-size: 16px; }
  .target-picker button { flex: 1 1 80px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .guide-toc nav { grid-template-columns: 1fr; }
}