/* Results, the season, team selection and the match view. */
.results { width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.results-hero { display: grid; gap: var(--s3); justify-items: start; }
.results-hero h1 { font-size: var(--t-3xl); line-height: 1; }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s5); align-items: start; }

.standings { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); counter-reset: rank; }
.standings li { counter-increment: rank; display: grid; grid-template-columns: 2ch auto minmax(0, 1fr) minmax(80px, 2fr) auto; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--surface-2); }
.standings li::before { content: counter(rank); font: 500 15px/1.15 var(--font-label); color: var(--muted); }
.standings li:first-child::before { color: var(--accent); }
.standings li.is-mine { outline: 1px solid var(--c-paper); }
.standings-name { display: grid; min-width: 0; line-height: 1.1; }
.standings-score { font: 500 15px/1.15 var(--font-label); }
.meter { height: 8px; border-radius: var(--r-small); overflow: hidden; background: var(--c-panel); }
.meter span { display: block; height: 100%; width: calc(var(--fill) * 100%); background: var(--team-bright); }
.buys { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s2); }
.buys li > * { margin-right: var(--s2); }
.squad-card { border-top: 8px solid var(--team-bright); }
.squad-title { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-body); }
.squad-card .squad-list { padding: var(--s3) 0 0; }

.season { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.season-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.season-cta > div { flex: 1 1 340px; display: grid; gap: var(--s2); }
.season-cta h2 { font-size: var(--t-xl); }
.season-cta-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s2); }
.season-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); padding: var(--s5); border-top: 8px solid var(--team-bright); }
.season-hero > div { flex: 1 1 240px; min-width: 0; display: grid; gap: var(--s2); justify-items: start; }
.season-hero h2 { font-size: var(--t-3xl); line-height: 1; }
.season-hero .crest { animation: stamp-crest 240ms var(--tick); }
@keyframes stamp-crest { from { transform: scale(1.5); } }
.season-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }

.playoffs, .league { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); align-items: start; }
.league { margin-top: var(--s3); }
.league-leg { margin-top: var(--s4); }
.league-leg-title { font: 500 15px/1.15 var(--font-label); text-transform: uppercase; color: var(--muted); }
.league-toggle { cursor: pointer; margin: 0; }
.match-card { display: grid; gap: var(--s1); align-content: start; padding: var(--s3); background: var(--surface-2); }
.match-card.is-final { grid-column: 1 / -1; outline: 1px solid var(--c-paper); }
.match-label { font: var(--t-micro)/1.1 var(--font-micro); text-transform: uppercase; color: var(--accent); }
.match-venue { display: grid; font-size: var(--t-body); color: var(--fg-2); line-height: 1.15; }
.match-venue small { color: var(--muted); font-size: var(--t-body); }
.score-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2); color: var(--fg-2); }
.score-row.is-winner { color: var(--fg); font-weight: 400; }
.score-team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-runs { font: 600 15px/1.2 var(--font-body); }
.score-runs small { font-weight: 400; font-size: var(--t-body); color: var(--muted); }
.match-result { color: var(--good); font-size: var(--t-body); }
.match-more summary { cursor: pointer; font-size: var(--t-body); color: var(--muted); }
.rested { margin: 0; }

.scorecard { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); margin-top: var(--s2); font-size: var(--t-body); }
.scorecard-head { display: flex; align-items: center; margin-bottom: var(--s1); font-weight: 400; }
.scorecard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.scorecard li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s1); }
.scorecard li.bowl { color: var(--fg-2); }
.scorecard li.bowl:first-of-type, .scorecard li:not(.bowl) + li.bowl { margin-top: var(--s1); padding-top: var(--s1); border-top: 1px solid var(--line); }
.scorecard .form-notes { grid-column: 1 / -1; }
.scorecard .form-notes li, .scorecard .ball-notes li { display: block; }
.scorecard .form-notes li.is-hot::before { content: '+ '; color: var(--good); font-weight: 400; }
.scorecard .form-notes li.is-cold::before { content: '- '; color: var(--bad); font-weight: 400; }
.scorecard .pressure-notes li.is-x { color: var(--accent); }
.ball-age { display: grid; gap: var(--s1); margin: 0 0 var(--s1); }
.ball-age-split { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.age { padding: 0 var(--s1); font: var(--t-micro)/1.1 var(--font-micro); background: var(--c-paper-3); color: var(--c-ink); }

.awards { display: grid; gap: var(--s2); }
.award { display: grid; gap: 2px; padding: var(--s2) var(--s3); background: var(--surface-2); border-left: 6px solid var(--award, var(--c-paper)); }
.award-orange { --award: #e0770f; }
.award-purple { --award: #7a3fd0; }
.award-mvp { --award: var(--c-paper); }
.award-hs { --award: var(--c-grass); }
.award-title { font: var(--t-micro)/1.1 var(--font-micro); text-transform: uppercase; color: var(--fg-2); }
.award-name { display: flex; align-items: center; gap: var(--s2); font-weight: 400; }
.award-stat { color: var(--fg-2); }

.table-wrap { overflow-x: auto; margin-top: var(--s3); }
.points { width: 100%; border-collapse: collapse; }
.points th { font: 600 var(--t-micro)/1.3 var(--font-micro); color: var(--muted); text-align: right; padding: var(--s1) var(--s2); border-bottom: 1px solid var(--c-paper); }
.points td { text-align: right; padding: var(--s1) var(--s2); border-bottom: 1px solid var(--line); }
.points th:nth-child(-n+2), .points td:nth-child(-n+2) { text-align: left; }
.points tr.is-qualified td:first-child { color: var(--accent); font-weight: 400; }
.points tr.is-mine td { background: var(--surface-2); }
.points-team { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.points .pos { color: var(--good); }
.points .neg { color: var(--bad); }

.xis { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s2); }
.xi { background: var(--surface-2); border-left: 6px solid var(--team-bright); }
.xi summary { display: flex; align-items: center; gap: var(--s2); padding: var(--s2); cursor: pointer; font-weight: 400; }
.xi ol { margin: 0; padding: 0 var(--s3) var(--s2) var(--s5); display: grid; gap: 2px; font-size: var(--t-body); }
.xi li > span { margin-right: var(--s1); }
.xi-tags { display: inline-flex; flex-wrap: wrap; gap: 2px; vertical-align: middle; }
.rating-badge { cursor: help; }
.form-arrow { margin-left: 2px; font-size: 0.8em; }
.form-up, .streak-hot { color: var(--good); }
.form-down, .streak-cold { color: var(--bad); }
.captain-card { display: grid; gap: var(--s2); }
.captain-pick { display: grid; gap: var(--s1); }
.captain-mark { color: var(--accent); font-weight: 400; }

.season-play { display: grid; gap: var(--s4); }
.season-timer { justify-self: center; padding: var(--s1) var(--s3); border-radius: var(--r-small); background: var(--c-black); color: var(--c-paper); font: 500 15px/1.15 var(--font-label); }
.season-continue { display: flex; justify-content: center; }
.season-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s4); align-items: start; }
.recent-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.recent-results li { display: grid; }
.sheet-wait { text-align: center; padding-block: var(--s6); display: grid; gap: var(--s2); justify-items: center; }

.pixel-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; image-rendering: pixelated; }
.toss-view { display: grid; gap: var(--s3); }
.toss-panel { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.toss-panel h2 { margin: 0; font-size: 24px; }
.toss-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.toss-actions .btn { flex: 1 1 130px; flex-wrap: wrap; }
.toss-note { font: 500 12px/1.2 var(--font-micro); opacity: 0.85; }
@media (min-width: 760px) {
  .toss-view { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; }
}

body.is-presenting { overflow: hidden; }
.trophy-show {
  position: fixed; inset: 0; z-index: 70; overflow: auto;
  display: grid; place-content: center; justify-items: center; gap: var(--s3);
  padding: max(var(--s3), env(safe-area-inset-top)) max(var(--s3), env(safe-area-inset-right)) max(var(--s3), env(safe-area-inset-bottom)) max(var(--s3), env(safe-area-inset-left));
  background: var(--c-black);
}
.trophy-frame { position: relative; overflow: hidden; width: min(calc(100vw - 24px), calc((100dvh - 96px) * 16 / 9), 1120px); }
.trophy-stage { position: relative; aspect-ratio: 16 / 9; background: var(--c-ink); }
.trophy-stage .ceremony-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.trophy-caption {
  position: absolute; inset: auto 0 0; display: grid; justify-items: center; gap: 2px; padding: var(--s2) var(--s3);
  background: rgb(17 20 15 / 0.84); color: var(--c-paper); text-align: center;
  font: 500 clamp(15px, 2.4vw, 22px)/1.2 var(--font-label); text-transform: uppercase; letter-spacing: 0.03em;
}
.trophy-caption.is-final b { color: var(--c-gold); font: 700 clamp(20px, 4vw, 36px)/1.15 var(--font-label); }
.trophy-caption small { font: 500 clamp(12px, 1.8vw, 16px)/1.2 var(--font-micro); text-transform: none; letter-spacing: 0; }
.trophy-caption .trophy-eyebrow { color: var(--c-gold); text-transform: uppercase; letter-spacing: 0.08em; }
.trophy-caption span { font: 500 clamp(12px, 1.8vw, 16px)/1.25 var(--font-body); text-transform: none; letter-spacing: 0; }
.trophy-caption .trophy-honours { color: var(--c-mint); }
@media (max-width: 600px) {
  /* An upright phone: a square picture, with the words underneath instead of over it. */
  .trophy-stage { aspect-ratio: 1; }
  .trophy-caption { position: static; }
}

.team-sheet { display: grid; gap: var(--s4); }
.sheet-head { display: flex; align-items: center; gap: var(--s4); justify-content: space-between; }
.sheet-head > div { min-width: 0; text-align: center; flex: 1; display: grid; gap: var(--s1); }
.sheet-head h2 { font-size: var(--t-xl); }
.sheet-head .muted { color: var(--fg-2); }
.sheet-actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; align-items: center; }
.sheet-note { text-align: center; margin: 0; }
.sheet-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.sheet-sub { margin: var(--s3) 0 var(--s1); font: 500 15px/1.15 var(--font-label); text-transform: uppercase; color: var(--muted); }
.sheet-advice { display: grid; gap: var(--s1); }
.advice { padding: var(--s1) var(--s3); border-radius: var(--r-small); background: var(--c-panel); color: var(--c-paper); border-left: 4px solid var(--line); font-size: 14px; }
.advice-problem { border-left-color: var(--c-red); }
.advice-warn { border-left-color: var(--c-gold); }
.advice-tip { border-left-color: var(--c-mint); }
.scout-list, .xi-list { margin: var(--s2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s1); }
.scout-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s2); }
.scout-name { font-weight: 400; }
.scout-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px; }
.xi-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.xi-pos { width: 1.5rem; text-align: right; font: 500 15px/1.15 var(--font-label); color: var(--muted); }
.xi-name { flex: 1 1 8rem; min-width: 0; font-weight: 500; line-height: 1.2; }
.xi-actions { display: flex; gap: var(--s2); }
.xi-actions .btn-icon { min-width: 26px; min-height: 26px; padding: 0 2px; font-size: 13px; }
.bench-list { list-style: none; margin: 0; display: grid; gap: var(--s2); }
.bench-list li { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.bench-list .btn { min-height: 30px; text-transform: none; }
.sub-pick { display: inline-flex; align-items: center; gap: var(--s1); margin-left: auto; padding: 0 var(--s2); min-height: 30px; border: 1px solid var(--line); font: var(--t-micro)/1.1 var(--font-micro); cursor: pointer; }
.sub-pick.is-on { border-color: var(--accent); color: var(--accent); }
.impact-picker, .super-over-picker { display: grid; gap: var(--s2); }
.impact-body { display: grid; gap: var(--s2); }
.impact-body .field { display: grid; gap: var(--s1); }
.impact-body select { width: 100%; min-width: 0; min-height: 36px; }
.impact-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.impact-note { color: var(--accent); margin: 0; }
.overs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s3); margin-top: var(--s2); }
.over-row { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); align-items: center; gap: var(--s2); padding-left: var(--s1); border-left: 6px solid var(--line); }
.over-row.phase-pp { border-left-color: var(--c-blue); }
.over-row.phase-mid { border-left-color: var(--c-grass); }
.over-row.phase-death { border-left-color: var(--c-red); }
.over-no { font: var(--t-micro)/1.1 var(--font-micro); color: var(--muted); text-align: right; }
.over-row select { min-width: 0; width: 100%; min-height: 30px; padding: 0 var(--s1); font-size: var(--t-body); }
.over-usage { margin-top: var(--s2); }

.match-player { display: grid; gap: var(--s3); }
.match-panel { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.stadium-frame { position: relative; overflow: hidden; background: var(--c-ink); }
.stadium-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; }
.match-stage { display: grid; gap: var(--s2); min-width: 0; }
.stadium-3d { position: absolute; inset: 0; }
.stadium-3d canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.stadium-flash { position: absolute; top: var(--s2); left: 50%; transform: translateX(-50%); padding: 2px var(--s3); background: var(--c-paper); color: var(--c-ink); font: 700 clamp(18px, 4vw, 28px)/1.2 var(--font-label); white-space: nowrap; }
.stadium-flash[data-kind='six'] { background: var(--c-gold); }
.stadium-flash[data-kind='wicket'] { background: var(--c-red); color: var(--c-white); }
.view-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.view-tabs .btn[aria-pressed='true'] { background: var(--c-paper); color: var(--c-ink); }
@media (max-width: 600px) {
  .view-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s1); }
  .view-tabs .btn { padding-inline: 2px; min-width: 0; }
}
.stadium-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(17 24 28 / 0.86); padding: var(--s4); overflow: auto; }
.result-card { text-align: center; display: grid; gap: var(--s2); justify-items: center; }
.result-innings { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s6); }
.result-innings > div { display: grid; justify-items: center; }
.scoreboard { display: grid; gap: var(--s1); padding: var(--s3); }
.score-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); }
.score-main .score-runs { font: var(--t-xl)/1 var(--font-display); color: var(--c-paper); }
.score-rate { margin-left: auto; }
.score-chase { color: var(--accent); min-height: 1.3em; }
.score-players { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.over-chips { display: flex; flex-wrap: wrap; gap: var(--s1); min-height: 24px; }
.over-chip { display: grid; place-items: center; width: 24px; height: 24px; background: var(--surface-2); font: var(--t-micro)/1.1 var(--font-micro); }
.chip-four { background: var(--c-blue); color: var(--c-ink); }
.chip-six { background: var(--c-paper); color: var(--c-ink); }
.chip-wicket { background: var(--c-red); color: var(--c-white); }
.chip-wide, .chip-noball { width: auto; min-width: 24px; padding: 0 4px; background: var(--c-steel); color: var(--c-ink); }
.free-hit { padding: 1px 6px; background: var(--c-gold); color: var(--c-ink); font: var(--t-micro)/1.4 var(--font-micro); text-transform: uppercase; }
.commentary { min-height: 2.6em; color: var(--fg); font-size: var(--t-body); }
.player-controls { display: flex; flex-wrap: wrap; gap: var(--s3); }
.player-controls .btn[aria-pressed='true'] { background: var(--c-paper); color: var(--c-ink); }
.key-moments-box summary { font: 500 15px/1.15 var(--font-label); text-transform: uppercase; cursor: pointer; }
.key-moments { margin: var(--s2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s1); font-size: var(--t-body); }

@media (min-width: 1000px) {
  .match-player { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; }
}
/* The break pickers and Next match: across the full width under the match. */
.match-extras { grid-column: 1 / -1; display: grid; gap: var(--s3); min-width: 0; }
.match-extras:not(:has(> :not([hidden]))) { display: none; }
.match-extras > .full-only { display: none; }

/* Live and Scorecard tabs beside the stadium. */
.match-tabs { margin: 0; }
.match-live, .match-card { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.stage-bar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: start; }
.stage-bar .view-tabs { flex: 1 1 auto; }
.full-btn { margin-left: auto; }
@media (max-width: 600px) {
  .stage-bar .view-tabs { flex-basis: 100%; }
  .full-btn { flex: 1 1 100%; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The scorecard: one innings at a time, the classic columns. */
.match-scorecard { display: grid; gap: var(--s3); padding: var(--s3); background: var(--c-black); border: 1px solid var(--line); border-radius: var(--r); font-size: var(--t-body); }
.sc-innings { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sc-innings .btn { gap: var(--s2); text-transform: none; }
.sc-innings .btn[aria-pressed='true'] { background: var(--c-paper); color: var(--c-ink); }
.sc-body, .sc-match { display: grid; gap: var(--s2); }
.sc-match:empty { display: none; }
.sc-wrap { overflow-x: auto; }
.sc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sc-table thead th { font: 600 var(--t-micro)/1.3 var(--font-micro); color: var(--muted); text-align: right; padding: var(--s1) var(--s2); border-bottom: 1px solid var(--c-paper); }
.sc-table thead th:first-child { text-align: left; padding-left: 0; }
.sc-table tbody th { text-align: left; font-weight: 400; padding: var(--s1) var(--s2) var(--s1) 0; }
.sc-table td { text-align: right; padding: var(--s1) var(--s2); vertical-align: top; }
.sc-table tbody tr > * { border-bottom: 1px solid var(--line); }
.sc-table tbody tr.sc-total > * { border-bottom: 0; }
.sc-table tbody th small { display: block; color: var(--muted); font-size: var(--t-micro); }
.sc-name { font-weight: 600; }
.sc-runs { font-weight: 700; color: var(--c-paper); }
.sc-table tr.is-in .sc-name { color: var(--good); }
.sc-total th { font-weight: 600; }
.sc-line { font-size: 14px; color: var(--fg-2); }
.sc-line b { color: var(--fg); font-weight: 600; }
.sc-result { font: 500 20px/1.2 var(--font-label); text-transform: uppercase; color: var(--c-paper); }

/* Full screen: the stadium fills the screen, the score on top, the buttons along the bottom,
   and the scorecard slides over from the side. */
.full-score, .full-bar { display: none; }
html.match-full-open, html.match-full-open body { overflow: hidden; }
.match-player.is-full { position: fixed; inset: 0; z-index: 50; display: block; background: var(--c-black); }
.is-full .match-stage { position: absolute; inset: 0; display: block; }
.is-full .stage-bar, .is-full .match-panel { display: none; }
.is-full .stadium-frame { position: absolute; inset: 0; border: 0; border-radius: 0; }
.is-full .stadium-canvas { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.is-full .stadium-flash { top: calc(56px + env(safe-area-inset-top, 0px)); }
.is-full .full-score {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); position: absolute; inset: 0 0 auto; pointer-events: none;
  padding: calc(var(--s2) + env(safe-area-inset-top, 0px)) calc(var(--s4) + env(safe-area-inset-right, 0px)) var(--s5) calc(var(--s4) + env(safe-area-inset-left, 0px));
  background: linear-gradient(rgb(17 20 15 / 0.88), rgb(17 20 15 / 0));
}
.full-score b { font: var(--t-xl)/1 var(--font-display); color: var(--c-paper); }
.is-full .full-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); position: absolute; inset: auto 0 0; z-index: 4;
  padding: var(--s5) calc(var(--s4) + env(safe-area-inset-right, 0px)) calc(var(--s2) + env(safe-area-inset-bottom, 0px)) calc(var(--s4) + env(safe-area-inset-left, 0px));
  background: linear-gradient(rgb(17 20 15 / 0), rgb(17 20 15 / 0.88));
}
.full-bar .player-controls, .full-bar .view-tabs { gap: var(--s1); }
.full-bar > .btn[aria-pressed='true'] { background: var(--c-paper); color: var(--c-ink); }
.full-exit { margin-left: auto; }
/* While the scorecard is open, the bar keeps just Scorecard and Exit, under the picture beside the card. */
.match-player.is-full { --sheet-w: min(460px, 46%); --bar-h: calc(60px + env(safe-area-inset-bottom, 0px)); }
.is-full.sheet-open .full-bar { right: var(--sheet-w); }
.is-full.sheet-open .full-bar .view-tabs, .is-full.sheet-open .full-bar .player-controls { display: none; }
.is-full.sheet-open .match-panel {
  display: grid; align-content: start; gap: var(--s3); position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: var(--sheet-w); overflow-y: auto;
  padding: calc(var(--s3) + env(safe-area-inset-top, 0px)) calc(var(--s3) + env(safe-area-inset-right, 0px)) calc(var(--s3) + env(safe-area-inset-bottom, 0px)) var(--s3);
  background: var(--c-board); box-shadow: -8px 0 24px rgb(0 0 0 / 0.5);
}
/* Full screen: the break pickers and Next match float over the stadium, above the bar, so they can be used
   without leaving full screen. Only what is showing catches clicks; the stadium stays visible around it. */
.is-full .match-extras {
  position: absolute; z-index: 5; inset: calc(56px + env(safe-area-inset-top, 0px)) 0 var(--full-bar-h, var(--bar-h)) 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--s2);
  padding: var(--s3) calc(var(--s3) + env(safe-area-inset-right, 0px)) var(--s3) calc(var(--s3) + env(safe-area-inset-left, 0px));
  overflow-y: auto; pointer-events: none;
}
.is-full .match-extras:not(:has(> :not([hidden], .full-only))) { display: none; }
.is-full .match-extras > * { pointer-events: auto; width: min(520px, 100%); flex: none; }
.is-full .match-extras > .full-only { display: block; width: auto; }
.is-full .match-extras > .card { background: var(--c-board); box-shadow: 0 8px 24px rgb(0 0 0 / 0.5); }
.is-full.sheet-open .match-extras { right: var(--sheet-w); }
/* While a picker is up, the break card (Target, Super Over) moves to the top so the picker doesn't cover it. */
.is-full:has(.match-extras > .card:not([hidden])) .stadium-overlay { place-items: start center; padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
/* Short screens: a picker and the break card can't both fit, and the score is along the top anyway. */
@media (max-height: 700px) {
  .is-full:has(.match-extras > .card:not([hidden])) .stadium-overlay { display: none; }
}
/* A phone held upright: the card takes the screen above the bar. */
@media (max-width: 700px) and (orientation: portrait) {
  .is-full.sheet-open .full-bar { right: 0; }
  .is-full.sheet-open .match-panel { width: 100%; bottom: var(--bar-h); padding-bottom: var(--s3); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .match-player.is-full { --sheet-w: 58%; }
  .full-score b { font-size: 22px; }
  .full-bar .btn { min-height: 36px; padding: 0 var(--s2); font-size: 13px; }
}
@media (max-width: 980px) { .sheet-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .season-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .season-hero { padding: var(--s4); }
  .results-hero h1, .season-hero h2 { font-size: var(--t-2xl); }
  .season-hero .crest-xl { --size: 84px; }
  .standings li { grid-template-columns: 2ch auto minmax(0, 1fr) auto; }
  .standings .meter { display: none; }
  .points th, .points td { padding-inline: var(--s1); }
  .sheet-head { gap: var(--s2); }
  .sheet-head .crest-lg { --size: 48px; }
  .sheet-head h2 { font-size: 22px; }
  /* One row, so the sticky top bar stays the 58px the Confirm row below pins itself under. */
  .results-topbar { flex-wrap: nowrap; }
  .results-topbar .room-code small { display: none; }
  .results-topbar .btn { padding-inline: var(--s2); }
  .sheet-actions { position: sticky; top: 58px; z-index: 5; flex-wrap: nowrap; margin-inline: calc(var(--s2) * -1); padding: var(--s2); background: var(--c-board); }
  .sheet-actions .btn-primary { flex: 1; min-height: 48px; }
  .season-play .xi-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; column-gap: var(--s2); }
  .season-play .xi-pos { grid-row: 1 / span 3; }
  .season-play .xi-name { grid-column: 2; overflow-wrap: anywhere; }
  .season-play .xi-row > small { grid-column: 2; }
  .season-play .xi-row > .tag { grid-column: 2; justify-self: start; }
  .season-play .xi-actions { grid-column: 3; grid-row: 1 / span 3; gap: var(--s1); }
}
/* The smallest phones: History and New auction need the brand's room (New auction goes home too). */
@media (max-width: 359px) { .results-topbar .brand { display: none; } }
.season-play .xi-row { flex-wrap: nowrap; }
.season-play .xi-actions { margin-left: auto; }
.sheet-rest { display: flex; justify-content: center; }

@media (pointer: coarse) {
  .xi-actions .btn-icon { min-width: 38px; min-height: 38px; font-size: 15px; }
  .bench-list .btn { min-height: 44px; }
  .over-row select { min-height: 42px; font-size: 16px; }
  .key-moments-box summary, .match-more summary { padding-block: var(--s3); }
}

/* A phone held sideways: the ground beside the score, rather than a ground taller than the screen. */
@media (orientation: landscape) and (max-height: 500px) {
  .match-player { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}