:root { color-scheme: light dark; font: 16px/1.5 system-ui, sans-serif; --bg: #10161d; --panel: #1b242e; --line: #354352; --text: #edf2f7; --muted: #b2c0ce; --accent: #91caff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--text); background: var(--bg); }
a { color: var(--accent); }
button, .button { display: inline-block; font: inherit; font-weight: 600; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--panel); color: var(--text); cursor: pointer; text-decoration: none; }
button:hover, .button:hover { border-color: var(--accent); }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.app-header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); }
.brand { color: var(--text); text-decoration: none; }
.account { display: flex; gap: 1rem; align-items: center; }
main { width: min(100% - 2rem, 62rem); margin: 1.5rem auto 4rem; }
h1 { margin: .3rem 0; font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.25; }
h2 { margin-top: 0; font-size: 1.1rem; }
p { margin: .5rem 0 1rem; }
.muted { color: var(--muted); }
.simulation-banner { background: #493b15; color: #ffe8a0; border: 1px solid #917a36; border-radius: .65rem; padding: .75rem 1rem; margin-bottom: 1.5rem; }
.heading, .actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel { padding: 1.2rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--panel); margin-top: 1.25rem; }
.facts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.badge { border: 1px solid var(--line); border-radius: 2rem; padding: .3rem .75rem; }
.players { padding: 0; list-style: none; margin-bottom: 0; }
.player { display: flex; gap: 1rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--line); }
.number { flex: 0 0 2rem; color: var(--muted); text-align: center; }
.player-name { font-weight: 600; }
details { margin-top: 1.5rem; color: var(--muted); }
code { overflow-wrap: anywhere; font-size: .8rem; }
.error { border-left: 4px solid #e98181; }
@media (max-width: 520px) { .app-header { padding: .8rem 1rem; } .account { gap: .5rem; } #account { display: none; } .heading { align-items: flex-start; flex-wrap: wrap; } .panel { padding: 1rem; } }
:root[data-theme="light"] { --bg: #f3f6f9; --panel: #fff; --line: #cbd5df; --text: #172838; --muted: #526474; --accent: #14598d; }
:root[data-theme="light"] .simulation-banner { background: #fff3cf; color: #664b06; }

.eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
.signed-in { color: var(--muted); margin-top: 1rem; }
.primary { background: var(--accent); color: var(--bg); }
.login-panel { max-width: 35rem; }
.simulation-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding: 1rem 0; }
.simulation-row > div { min-width: 0; }
.simulation-row small { display: block; overflow-wrap: anywhere; }
.simulation-row .button { flex-shrink: 0; }
h3 { font-size: 1rem; }
.back-link { display: inline-block; margin-bottom: 1rem; }
.scorables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .8rem; }
.scorable-link { display: grid; gap: .3rem; border: 1px solid var(--line); border-radius: .55rem; padding: 1rem; text-decoration: none; color: var(--text); }
.scorable-link:hover { border-color: var(--accent); }
@media (max-width: 520px) { .simulation-row { align-items: stretch; flex-direction: column; } .simulation-row .button { text-align: center; } }

.player { flex-wrap: wrap; }
.player-identity { flex: 1; min-width: 8rem; }
.player-identity span { display: block; }
.late-arrival-warning { color: #eab95d; font-size: .85rem; }
.presence-label { color: #72ca9b; font-size: .85rem; }
.presence-error { flex-basis: 100%; color: #e98181; }
:root[data-theme="light"] .late-arrival-warning { color: #865609; }
:root[data-theme="light"] .presence-label { color: #12683a; }


/* Referees operate this screen beside the court, usually on a phone. */
main { width: min(100% - 1rem, 46rem); margin-top: .65rem; }
.app-header { padding: .45rem .75rem; }
.app-header button { padding: .35rem .6rem; }
h1 { font-size: 1.35rem; }
h2, h3 { margin-bottom: .5rem; }
p { margin: .25rem 0 .55rem; }
button, .button { min-height: 44px; padding: .45rem .65rem; }
button:disabled { cursor: default; }
.back-link { margin-bottom: .45rem; }
.simulation-banner { padding: .3rem .55rem; margin-bottom: .5rem; font-size: .8rem; }
.heading { gap: .5rem; align-items: center; flex-wrap: nowrap; }
.heading > div { min-width: 0; }
.heading button { flex-shrink: 0; }
.facts { gap: .3rem; margin: .4rem 0; font-size: .8rem; }
.badge { padding: .15rem .5rem; }
.panel { margin-top: .65rem; padding: .6rem; }
.players { margin: .4rem 0 0; }
.player { flex-wrap: nowrap; gap: .4rem; padding: .35rem 0; min-height: 54px; }
.number { flex: 0 0 auto; min-width: 1.1rem; font-size: .75rem; font-variant-numeric: tabular-nums; }
.player-identity { min-width: 0; }
.player-name { font-size: .9rem; overflow-wrap: anywhere; }
.player-identity small { display: block; font-size: .7rem; line-height: 1.2; }
.attendance-choices { display: flex; flex-shrink: 0; gap: .25rem; }
.attendance-choices button { min-width: 46px; font-size: .75rem; padding: .25rem .35rem; }
.attendance-choices .selected { opacity: 1; border-width: 2px; font-weight: 800; }
.present { background: #164b35; color: #d4ffe8; border-color: #61c393; }
.absent { background: #692a30; color: #ffe6e8; border-color: #f195a1; }
.absence-label { color: var(--muted); }
.qualification { padding: .4rem .6rem; border-left: 3px solid var(--accent); font-size: .8rem; }
.qualification p:last-child { margin-bottom: 0; }
.match-actions { display: flex; flex-wrap: wrap; gap: .4rem; position: sticky; bottom: 0; background: var(--bg); padding: .6rem 0; }
.match-actions small { width: 100%; }
.action-feedback { color: #e98181; font-size: .85rem; }
.action-feedback:empty { display: none; }
.action-feedback button { margin-left: .4rem; }
.scoring-player .player-name { flex: 1; }
.scoring-player button { min-width: 64px; }
.danger { border-color: #d96770; }
.scoring-panel > button { margin: .4rem .4rem .4rem 0; }
.score-table { width: 100%; border-collapse: collapse; margin-top: .7rem; font-size: .9rem; }
.score-table th, .score-table td { padding: .35rem; text-align: left; border-bottom: 1px solid var(--line); }
.score-table th:last-child, .score-table td:last-child { text-align: right; }
select { font: inherit; max-width: 40%; min-height: 44px; }
@media (max-width: 520px) { .panel { padding: .5rem; } .app-header { padding: .4rem .6rem; } }

.app-menu { position: relative; margin: 0 0 0 auto; color: var(--text); }
.app-menu summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; border: 1px solid var(--line); border-radius: .55rem; list-style: none; }
.app-menu summary::-webkit-details-marker { display: none; }
.app-menu nav { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 10; display: grid; min-width: 220px; padding: .5rem; background: var(--panel); border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 5px 20px #0003; }
.app-menu nav a, .app-menu nav button { display: block; text-align: left; padding: .6rem; min-height: 44px; text-decoration: none; }
.app-menu #account { padding: .4rem .6rem; font-size: .8rem; color: var(--muted); }
.heading-tools { display: flex; flex: 0 0 auto; gap: .3rem; }
.icon-button { display: inline-flex; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 0; }
.icon-button svg { width: 22px; height: 22px; }
.help-button { font-size: 1.25rem; }
.help-button[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.confirmed-points { color: var(--accent); white-space: nowrap; font-weight: 700; }
.score-table caption { text-align: left; color: var(--muted); font-size: .8rem; padding: .4rem 0; }
@media (max-width: 520px) { .brand { display: none; } .app-header { padding: .15rem .5rem; } }

/* Score sheet: input first on phones; full overview beside it on wide screens. */
.score-toolbar { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: .3rem; align-items: center; margin: .65rem 0; }
.score-toolbar.first-game { grid-template-columns: 1.6fr 1fr; }
.score-toolbar > * { min-width: 0; text-align: center; white-space: nowrap; font-size: .8rem; padding: .4rem .25rem; }
.scoring-columns { display: grid; gap: .65rem; }
.scoring-columns .panel { margin: 0; min-width: 0; }
.game-input { grid-area: input; }
.game-overview { grid-area: overview; }
.standings-panel { grid-area: standings; }
.scoring-columns { grid-template-areas: "input" "overview" "standings"; }
.game-score-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.game-score-table th { text-align: left; font-size: .8rem; color: var(--muted); padding: .3rem .15rem; }
.game-score-table th:last-child { width: 66px; text-align: center; }
.game-score-table td { padding: .1rem .15rem; border-top: 1px solid var(--line); }
.score-identity { display: flex; gap: .3rem; align-items: center; }
.score-identity .player-name { min-width: 0; font-size: .85rem; }
.player-number { padding: .1rem .2rem; min-width: 38px; min-height: 44px; border: 0; color: var(--accent); background: transparent; flex-shrink: 0; font-size: .75rem; font-variant-numeric: tabular-nums; }
.points { width: 100%; min-height: 44px; padding: .2rem; font-variant-numeric: tabular-nums; }
.points:not(:disabled) { border-color: var(--accent); color: var(--accent); font-weight: 800; }
.recorded-points:disabled { opacity: .75; background: transparent; border-color: transparent; }
.score-recorded .player-name { color: var(--muted); }
.score-winner .player-name { color: var(--text); }
.score-winner .recorded-points { border-width: 2px; }
.game-input > .primary { width: 100%; margin-top: .65rem; }
.score-matrix-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.score-matrix { --number-width: 40px; --player-width: 96px; --total-width: 58px; border-collapse: separate; border-spacing: 0; table-layout: fixed; width: calc(var(--number-width) + var(--player-width) + var(--total-width) + 48px * var(--game-count)); min-width: 100%; font-size: .8rem; }
.score-matrix th, .score-matrix td { border-bottom: 1px solid var(--line); text-align: center; padding: .15rem .25rem; }
.score-matrix tr > :not(.matrix-number):not(.matrix-player):not(.matrix-total) { position: relative; z-index: 0; }
.score-matrix .matrix-number, .score-matrix .matrix-player, .score-matrix .matrix-total { position: sticky; z-index: 1; background: var(--panel); }
.score-matrix .matrix-number { left: 0; width: var(--number-width); padding-left: 0; padding-right: 0; }
.score-matrix .matrix-player { left: var(--number-width); width: var(--player-width); text-align: left; border-right: 1px solid var(--line); }
.score-matrix .matrix-total { right: 0; width: var(--total-width); border-left: 1px solid var(--line); }
.score-matrix .player-name { display: block; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-matrix thead button { min-width: 44px; padding: .15rem; border-color: transparent; }
.score-matrix thead button[aria-current] { color: var(--text); border-color: var(--action); }
.next-match { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.next-match .button { display: block; text-align: center; }
.next-match p { margin-top: .4rem; font-size: .8rem; }
.total-points { font-weight: 800; }
.forfeit-dialog { max-width: min(90vw, 360px); border: 1px solid var(--line); border-radius: .75rem; color: var(--text); background: var(--panel); padding: 1rem; }
.forfeit-dialog::backdrop { background: #0007; }
.forfeit-dialog button { margin: .5rem .35rem .3rem 0; }
@media (min-width: 1100px) {
  main { width: min(100% - 2rem, 1400px); }
  .scoring-columns { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .85fr) minmax(240px, .75fr); grid-template-areas: "overview input standings"; align-items: start; }
  .score-toolbar { max-width: 460px; }
}

/* Familiar referee controls, with a neutral page and readable light/dark rows. */
:root { --action: #377e13; --action-text: #fff; --navigation: #40394f; --navigation-text: #f2effb; --navigation-border: #a399b5; --recorded: #59332f; --recorded-text: #ffece8; --latest: #963124; --undo: #b52c1f; }
.primary { background: var(--action); color: var(--action-text); border-color: var(--action); }
.primary:hover { border-color: #70ac40; }
.navigation-button { background: var(--navigation); color: var(--navigation-text); border-color: var(--navigation-border); }
.navigation-button:disabled { opacity: .4; }
.game-score-table .score-recorded .player-name { color: var(--text); }
.game-score-table .recorded-points:disabled { color: var(--recorded-text); background: var(--recorded); border-color: var(--recorded); opacity: 1; }
.points:not(:disabled) { border-color: var(--action); color: var(--text); background: var(--panel); }
.points.undo-points:not(:disabled) { background: var(--undo); border: 2px solid #61170f; color: #fff; }
.game-score-table .score-forfeit .points { background: var(--navigation); color: var(--navigation-text); border-color: var(--navigation-border); }
.header-context { display: none; }
:root[data-theme="light"] { --navigation: #e0dced; --navigation-text: #393148; --recorded: #f3d1c8; --recorded-text: #52251f; --latest: #a54639; }

@media (max-width: 600px) {
  .app-header .brand { display: none; }
  .app-header { gap: .5rem; }
  .header-context { display: block; min-width: 0; margin: 0; padding: .3rem .5rem; font-size: .75rem; overflow-wrap: anywhere; }
  main > .simulation-banner { display: none; }
}

.simulation-scoring { margin-bottom: .75rem; }
.simulation-scoring p { margin: .4rem 0 0; font-size: .8rem; }

.configuration-warning { border-left: 3px solid #b98316; padding: .4rem .55rem; font-size: .8rem; }
.three-strikes-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .85rem; }
.three-strikes-table th, .three-strikes-table td { border-bottom: 1px solid var(--line); padding: .25rem 1px; text-align: center; }
.three-strikes-table th:first-child, .three-strikes-table td:first-child { text-align: left; }
.three-strikes-table .strike-column { width: 38px; }
.three-strikes-table .strikes-total { width: 42px; font-weight: 700; }
.three-strikes-table .points { width: 36px; min-width: 0; min-height: 44px; padding: .2rem; }
.three-strikes-table .score-identity { gap: .2rem; }
.three-strikes-table .player-name { font-size: .8rem; }
.three-strikes-table .player-number { min-width: 24px; padding: .15rem; }
.three-strikes-table .recorded-points:disabled { background: var(--recorded); color: var(--recorded-text); border-color: var(--recorded); opacity: 1; }

.finish-three-strikes { width: 100%; margin-top: .7rem; }

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.header-controls { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.header-controls .app-menu { margin-top: 0; }
#theme-toggle { min-width: 44px; font-size: 1.3rem; }