/* Approved design, readable sizing. No theme, artwork or motion changes.
   rem floors respect the browser's text preference; small screens reflow. */
:root {
  --ui-body: 1rem;
  --ui-support: .875rem;
  --ui-label: .75rem;
  --ui-action: 1.25rem;
  --ui-cover-action: 1.375rem;
  --ui-control: 3rem;
  --ui-gap: 1rem;
  --ui-content-max: 86rem;
  --ui-gutter: clamp(1rem, 2.5vw, 2rem);
}
.shell { width: min(var(--ui-content-max), 100%); padding-inline: var(--ui-gutter); }
.topbar { height: auto; min-height: 76px; flex-wrap: wrap; }
.topbar-right { flex-wrap: wrap; min-width: 0; }
.nav-btn { font-size: var(--ui-body); line-height: 1.4; }
.primary-btn { font-size: var(--ui-action); line-height: 1.3; min-height: var(--ui-control); }
.small-btn, .text-btn, .text-link { font-size: var(--ui-support); line-height: 1.45; }

/* The three covers keep their headings, illustration scale and print styling. */
.game-cover > .cover-rule { font-size: var(--ui-body); line-height: 1.5; min-height: 1.5em; }
.game-cover h3 { text-wrap: wrap; }
.game-cover .mode-status { font-size: var(--ui-support); line-height: 1.5; min-height: 1.5em; }
.game-cover .mode-ticket-bottom { gap: .75rem; }
.game-cover .mode-ticket-bottom button { font-size: var(--ui-cover-action); line-height: 1.3; min-height: 3.25rem; }
.game-cover .cover-art { flex: none; height: 232px; min-height: 0; margin-block: auto; }
.edition-context > div, .edition-context #homeDate { font-size: var(--ui-support); flex-wrap: wrap; }
.edition-label, .edition-reset { font-size: var(--ui-label); line-height: 1.5; }
.edition-reset b { font-size: var(--ui-support); }
#home .sport-scope, #home .sport-heading p { font-size: var(--ui-support); line-height: 1.5; }
#home .sport-heading { flex-wrap: wrap; gap: .5rem 1rem; }
.cover-set .sweep-home { flex-wrap: wrap; gap: var(--ui-gap); }
.sweep-title { max-width: 19rem; }
.sweep-title > b { font-size: 1.375rem; line-height: 1.25; }
.sweep-title small { font-size: var(--ui-support); line-height: 1.5; }
.home-sweep-stamps { flex-wrap: wrap; }
.home-sweep-stamps > span, .home-sweep-stamps > span > span { font-size: var(--ui-support); line-height: 1.35; }
.cover-set #playAllButton { font-size: var(--ui-body); min-height: var(--ui-control); white-space: normal; }
.cover-set .daily-meta { font-size: var(--ui-support); line-height: 1.5; }
#home .unlimited-ticket { grid-template-columns: 64px minmax(8rem, 1fr) minmax(0, auto) auto; }
#home .unlimited-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); width: 26rem; max-width: 100%; gap: var(--ui-gap); min-width: 0; align-items: end; }
#home .unlimited-controls > * { min-width: 0; }
#home .unlimited-controls .menu-difficulty { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; margin: 0; padding: 0; width: 100%; min-width: 0; max-width: none; }
.mode-select, .menu-difficulty label, .practice-controls > label:not(.mode-select) { font-size: var(--ui-support); line-height: 1.4; }
#home .unlimited-controls select, .practice-controls select {
  font-size: var(--ui-body); line-height: 1.4; min-height: var(--ui-control);
  max-width: 100%; width: 100%; padding: .625rem 1.5rem .625rem .75rem;
}
#home .unlimited-ticket > .primary-btn { font-size: 1.125rem; line-height: 1.4; min-height: var(--ui-control); }
#home .record-summary, #homeStatsButton, #home .menu-bottom .text-btn, .page-foot > div a { font-size: var(--ui-support); line-height: 1.5; }
#home .player-record { flex-wrap: wrap; gap: .5rem 1rem; margin-block: 1rem .5rem; }

/* Live boards: grow the text, and let the existing cards grow with it. */
#gameView .mode-instructions { font-size: var(--ui-body); line-height: 1.55; margin-block: .75rem 1rem; }
.round-label, .modebar #countdown { font-size: var(--ui-support); line-height: 1.5; }
.round-label { max-width: none; }
.modebar { flex-wrap: wrap; }
.game-intro { flex-wrap: wrap; }
.practice-controls { flex-wrap: wrap; min-width: 0; }
.practice-controls .mode-select { min-width: 0; }
#meshArena { grid-template-columns: minmax(0, 1fr) 20rem; gap: 0 1.5rem; }
#meshArena > .arena-rim { flex-wrap: wrap; gap: .5rem; }
#meshArena > .arena-rim > span:first-child { font-size: var(--ui-label); }
#meshArena > .board-heading { position: static; grid-column: 1 / -1; grid-row: 2; margin-bottom: .5rem; }
#board { grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; }
#board .tile-top { flex-wrap: wrap; }
#board .tile-state { max-width: 100%; overflow-wrap: anywhere; }
#meshArena .lineup-heading { grid-row: 4; }
#meshArena .lineup-shelf { grid-row: 5 / 7; }
#meshArena > .lineup-search { grid-row: 5; }
#meshArena > .game-footer { grid-row: 6; }
#meshArena .save-panel { grid-row: 4 / 6; }
#shortlistCards { grid-row: 4 / 7; }
[data-game-mode="shortlist"] #meshArena > .game-footer { grid-row: 5; }
.head-actions .text-btn, .rail-search { font-size: var(--ui-support); line-height: 1.4; }
#board .press-clue { min-height: 10rem; padding: .75rem; }
#board .tile-content strong { font-size: 1.5rem; line-height: 1.12; }
#board .tile-content small, #board .match-names { font-size: var(--ui-support); line-height: 1.45; }
#board .tile-state { font-size: var(--ui-support); line-height: 1.4; white-space: normal; }
.category-type { font-size: var(--ui-label); line-height: 1.3; }
#meshArena .lineup-heading > span { font-size: 1.25rem; }
.press-player, .has-result .press-player, [data-game-mode="save"] .press-player { height: auto; min-height: 15rem; }
.athlete-info, [data-game-mode="save"] .athlete-info { height: auto; min-height: 15rem; padding: 2rem .625rem 2.75rem; }
.player-given { font-size: var(--ui-support); line-height: 1.35; }
.player-family, .has-result .player-family { font-size: 1.75rem; line-height: 1.08; }
.player-years, .player-summary { font-size: var(--ui-label); line-height: 1.4; }
.contribution-patch, .triple-card .contribution-patch { font-size: var(--ui-support); line-height: 1.3; min-height: 1.75rem; }
.empty-slot strong { font-size: 1.125rem; line-height: 1.35; }
.empty-slot small { font-size: var(--ui-support); line-height: 1.4; }
.picker-label { font-size: var(--ui-body); line-height: 1.4; }
.picker-wrap input { font-size: var(--ui-body); height: auto; min-height: var(--ui-control); line-height: 1.5; }
.microcopy, .first-pick-tip p { font-size: var(--ui-support); line-height: 1.5; }
.suggestion { font-size: var(--ui-body); line-height: 1.4; min-height: var(--ui-control); flex-wrap: wrap; }
.suggestion small { font-size: var(--ui-support); line-height: 1.4; }
.suggestions { max-height: min(24rem, 50dvh); }
#meshArena > .game-footer .submit-btn { font-size: var(--ui-action); line-height: 1.4; min-height: var(--ui-control); }
.submission-notes p, .submission-notes .text-btn { font-size: var(--ui-support) !important; line-height: 1.45; max-width: none; }
#meshArena > .arena-caption, .arena-caption > span:last-child { font-size: var(--ui-support); line-height: 1.5; flex-wrap: wrap; }
.scope-note, .under-board p, .under-board .text-btn, .inspection-strip p { font-size: var(--ui-support); line-height: 1.5; }
.under-board { flex-wrap: wrap; }
#meshArena .save-steps { font-size: var(--ui-support); line-height: 1.4; }
#meshArena .save-panel #saveSummary { font-size: var(--ui-body); line-height: 1.5; overflow-wrap: anywhere; }
.save-cancel-actions { flex-wrap: wrap; }
.save-cancel-actions button { font-size: var(--ui-support); }
.save-card-controls > span { font-size: var(--ui-label); line-height: 1.35; }
.save-card-controls button { font-size: var(--ui-support); line-height: 1.4; min-height: var(--ui-control); overflow-wrap: anywhere; }
.shortlist-card strong { font-size: 1.5rem; line-height: 1.15; overflow-wrap: anywhere; }
.shortlist-card small { font-size: var(--ui-support); line-height: 1.4; }
.has-result #shortlistCards { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row: 7; }
.has-result .shortlist-card strong { font-size: 1.125rem; line-height: 1.25; }
.has-result .shortlist-card small { font-size: var(--ui-support); }
.has-result #meshArena .lineup-shelf { grid-row: 5; }
.mode-reveal-status { font-size: var(--ui-body); line-height: 1.5; flex-wrap: wrap; }

/* Result tickets and existing dialogs share the functional type scale. */
.has-result .game { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.has-result .game-layout { flex: 1 1 44rem; }
.has-result .result-panel { flex: 1 1 22rem; }
.result-panel { min-width: 0; overflow-wrap: anywhere; }
.result-panel .mode-stamps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr)); }
.result-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr)); }
.result-actions > *, .result-copy { min-width: 0; max-width: 100%; }
.result-panel .text-btn { white-space: normal; }
.result-topline, .result-metrics span, .result-personal, .result-mode-detail,
.result-share-tools .text-btn, .sweep-heading > span, .mode-stamps span,
.daily-progress-strip small { font-size: var(--ui-support); line-height: 1.45; }
.result-copy p, .result-insight { font-size: var(--ui-body); line-height: 1.5; }
.result-actions .primary-btn { font-size: 1.125rem; line-height: 1.4; min-height: var(--ui-control); white-space: normal; }
.result-actions .small-btn { font-size: var(--ui-support); line-height: 1.4; min-height: var(--ui-control); white-space: normal; }
.sweep-heading { flex-wrap: wrap; }
.trilogy-result-extra .daily-progress-strip { min-width: 0; max-width: 100%; }
.modal { width: min(38rem, calc(100% - 2rem)); padding: 1.5rem; }
.modal p, .setting-row b, .setting-row select, .history-row { font-size: var(--ui-body); line-height: 1.5; }
.modal .eyebrow, .stat span, .legend small, .setting-row small { font-size: var(--ui-support); line-height: 1.5; }
.setting-row { flex-wrap: wrap; }
.setting-row select { max-width: 100%; }
.dialog-actions, .transfer-actions { flex-wrap: wrap; }

@media (max-width: 75rem) {
  #home .unlimited-ticket { grid-template-columns: 54px minmax(0, 1fr) auto; }
  #home .unlimited-controls { grid-column: 2; grid-row: 2; flex-wrap: wrap; }
  #home .unlimited-ticket > .primary-btn { grid-column: 3; grid-row: 1 / 3; }
  #home .open-play-art { grid-row: 1 / 3; }
  .has-result .game { display: block; }
  .result-panel { position: static; margin-top: 1.5rem; }
}
@media (max-width: 64rem) {
  #meshArena { display: flex; flex-direction: column; gap: 0; }
  #meshArena .lineup-shelf, #meshArena > .lineup-search, #meshArena .save-panel, #meshArena > .game-footer { width: 100%; align-self: stretch; }
  #meshArena > .lineup-search, #meshArena .save-panel { margin-top: 1rem; }
  #meshArena > .game-footer { margin-top: 1rem; }
  #shortlistCards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-cover .cover-art { height: 185px; }
}
@media (max-width: 40rem) {
  .topbar { min-height: 64px; gap: .5rem; }
  .topbar .brand { flex: 0 0 44px; }
  .topbar-right { flex: 1; justify-content: flex-end; }
  .nav-btn { font-size: var(--ui-body); padding-inline: .375rem; }
  .topbar .icon-btn, .stats-nav { width: 2.5rem; min-width: 2.5rem; }
  .cover-masthead { display: flex; flex-wrap: wrap; gap: 1rem; }
  .cover-masthead > .edition-context { margin-left: auto; max-width: 100%; }
  .edition-context #homeDate { padding-left: 0; }
  .edition-reset { max-width: none; }
  .game-cover .cover-art { height: 158px; min-height: 158px; margin: 1rem 0; }
  .game-cover .mode-ticket-bottom { flex-wrap: wrap; }
  .game-cover .mode-status { max-width: none; flex: 1 1 8rem; }
  .game-cover .mode-ticket-bottom button { min-width: 0; margin-left: auto; white-space: normal; }
  .sweep-title { max-width: none; }
  .cover-set .sweep-home { grid-template-columns: minmax(0, 1fr); }
  .home-sweep-stamps { justify-content: flex-start; }
  .home-sweep-stamps > span > span { display: inline; }
  .home-sweep-stamps > span { flex: 1; }
  #home .unlimited-ticket { grid-template-columns: 45px minmax(0, 1fr); }
  #home .open-play-art { grid-row: 1; }
  #home .unlimited-controls { grid-row: 2; grid-column: 1 / -1; width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
  #home .unlimited-ticket > .primary-btn { grid-row: 3; grid-column: 1 / -1; width: 100%; margin: 0; }
  .practice-controls .mode-select { flex-wrap: wrap; }
  .game-sport-switch { float: none; margin: .5rem 0; }
  #gameView .game-intro h1 { max-width: none; }
  #board { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: .75rem; }
  #board .tile-content strong { font-size: 1.375rem; }
  #selectedList { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .75rem; }
  .player-family, .has-result .player-family { font-size: 1.5rem; }
  #shortlistCards, .has-result #shortlistCards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
  .head-actions { flex-wrap: wrap; }
  .arena-rim > span:last-child { white-space: normal; }
  .result-head, .result-metrics { flex-wrap: wrap; }
  .result-panel { padding: 1rem; }
  .modal { padding: 1.25rem; }
}