:root { --red:#df1230; --red-dark:#a90922; --ink:#131925; --muted:#657083; --line:#dce1e8; --soft:#f3f5f8; --green:#07894e; --amber:#a86500; --white:#fff; font-family: Inter, "Segoe UI", Arial, sans-serif; color:var(--ink); background:var(--soft); }
* { box-sizing:border-box; }
body { margin:0; background:var(--soft); }
button, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
.hidden { display:none !important; }
.shell { width:min(1440px,100%); min-height:100vh; margin:auto; padding:18px clamp(12px,3vw,32px) 48px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:900; text-decoration:none; }
.brand-mark { display:grid; width:45px; height:45px; place-items:center; border-radius:10px; color:#fff; background:var(--red); font-size:13px; }
.brand small { display:block; color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.top-links { display:flex; gap:13px; align-items:center; }
.top-links a { color:var(--ink); font-size:13px; font-weight:800; text-decoration:none; }
.hero { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:22px 0; }
.eyebrow { margin:0 0 7px; color:var(--red); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { margin:0; font-size:clamp(30px,5vw,52px); letter-spacing:-.045em; line-height:1; }
.hero-copy { margin:10px 0 0; color:var(--muted); line-height:1.5; }
.status-pill { display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border-radius:999px; color:#075e3a; background:#dff6ea; font-size:12px; font-weight:850; white-space:nowrap; }
.status-pill::before { width:8px; height:8px; border-radius:50%; background:var(--green); content:""; }
.status-pill.complete { color:#fff; background:var(--red); }
.status-pill.complete::before { background:#fff; }
.card { border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 9px 28px rgba(28,36,53,.07); }
.section { margin-top:18px; padding:20px; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; margin-bottom:14px; }
.section-head h2 { margin:0; font-size:23px; letter-spacing:-.025em; }
.section-head p { margin:0; color:var(--muted); font-size:13px; }
.button { min-height:44px; border:0; border-radius:11px; padding:0 16px; color:#fff; background:var(--red); font-weight:900; cursor:pointer; text-decoration:none; }
.button:hover { background:var(--red-dark); }
.button.secondary { color:var(--ink); background:#e8ebf0; }
.button.green { background:var(--green); }
.button:disabled { cursor:not-allowed; opacity:.45; }
.empty { padding:45px 20px; text-align:center; }
.empty h2 { margin:0 0 8px; }
.empty p { max-width:600px; margin:0 auto 18px; color:var(--muted); line-height:1.5; }
.board-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:12px; }
.board { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:#fff; }
.board header { display:flex; justify-content:space-between; padding:12px 14px; color:#fff; background:var(--red); font-size:12px; font-weight:900; text-transform:uppercase; }
.board.waiting header { background:#656f7f; }
.board-body { padding:13px; }
.match-player { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:49px; padding:10px 12px; border-radius:10px; background:var(--soft); font-weight:850; }
.match-player + .match-player { margin-top:7px; }
.match-player.winner { color:#fff; background:var(--green); }
.match-player strong { font-size:20px; }
.versus { margin:5px; color:var(--muted); font-size:10px; font-weight:850; text-align:center; }
.round-meta { display:flex; justify-content:space-between; gap:8px; margin-bottom:9px; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.result-box { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.result-prompt { margin-bottom:7px; color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.result-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.result-actions button { min-height:42px; border:1px solid #cbd1db; border-radius:9px; color:var(--ink); background:#edf0f4; font-size:12px; font-weight:900; cursor:pointer; }
.result-actions button.selected { color:#fff; border-color:var(--green); background:var(--green); }
.score-actions { display:flex; flex-wrap:wrap; gap:7px; }
.score-actions button { min-width:64px; min-height:40px; border:0; border-radius:9px; color:#fff; background:var(--red); font-weight:900; cursor:pointer; }
.scorer-link { display:block; margin-top:8px; padding:11px; border-radius:9px; color:#fff; background:var(--green); font-size:12px; font-weight:900; text-align:center; text-decoration:none; }
.up-next { margin:10px 0 0; padding-top:9px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.4; }
.up-next strong { color:var(--ink); }
.groups-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }
.group-table { overflow:hidden; border:1px solid var(--line); border-radius:14px; }
.group-table h3 { display:flex; justify-content:space-between; margin:0; padding:12px 14px; color:#fff; background:var(--ink); font-size:15px; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th,td { padding:9px 7px; border-bottom:1px solid var(--line); text-align:center; }
th:nth-child(2),td:nth-child(2) { text-align:left; }
th { color:var(--muted); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
tr.qualifier td { background:#e5f7ed; }
.bracket { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,1fr); gap:14px; overflow-x:auto; padding-bottom:8px; }
.round-column h3 { margin:0 0 9px; font-size:14px; text-transform:uppercase; }
.bracket-match { margin-bottom:10px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.bracket-match.playing { border:2px solid var(--red); }
.podium { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.podium div { padding:16px; border-radius:14px; background:var(--soft); }
.podium span { display:block; color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; }
.podium strong { display:block; margin-top:7px; font-size:17px; }
.podium .champion { color:#fff; background:var(--red); }
.podium .champion span { color:#fff; }
.login { width:min(430px,100%); margin:9vh auto; padding:28px; }
.login h1 { font-size:34px; }
.login p { color:var(--muted); line-height:1.5; }
label { display:block; margin-bottom:7px; font-size:12px; font-weight:850; }
input { width:100%; min-height:50px; border:1px solid #bfc7d2; border-radius:11px; padding:0 13px; color:var(--ink); background:#fff; font-weight:800; }
.login .button { width:100%; margin-top:10px; }
.message { margin-top:12px; color:var(--red-dark); font-size:12px; font-weight:800; }
.control-actions { display:flex; flex-wrap:wrap; gap:8px; }
.readiness { display:grid; gap:8px; margin:16px 0; }
.ready-row { display:flex; justify-content:space-between; gap:10px; padding:11px; border-radius:10px; background:var(--soft); font-size:13px; }
.ready-row strong.good { color:var(--green); }
.player-call { padding:23px; color:#fff; background:var(--ink); }
.player-call.playing { background:var(--red); }
.player-call.on-deck { background:var(--amber); }
.player-call h1 { font-size:clamp(30px,9vw,54px); }
.player-call p { color:rgba(255,255,255,.86); }
.notify { margin-top:10px; }
.fixture-list { display:grid; gap:8px; }
.fixture { display:grid; grid-template-columns:90px 1fr auto; gap:10px; align-items:center; padding:12px; border-radius:10px; background:var(--soft); font-size:12px; }
.fixture.playing { color:#fff; background:var(--red); }
.fixture.complete { opacity:.74; }
.fixture strong:last-child { font-size:16px; }
.footer { margin-top:28px; color:var(--muted); font-size:11px; text-align:center; }
@media(max-width:700px){ .shell{padding-top:11px}.top-links a:not(:last-child){display:none}.hero,.section-head{align-items:flex-start;flex-direction:column}.section{padding:14px}.podium{grid-template-columns:1fr 1fr}.fixture{grid-template-columns:72px 1fr auto}.bracket{grid-auto-columns:minmax(235px,85vw)} }

/* Large-format display mode for venue televisions and 4K browser devices. */
body.tv-mode { overflow-x:hidden; background:#eef1f5; }
.tv-mode .shell { width:100vw; max-width:none; padding:1.2vh 1.25vw 2vh; }
.tv-mode .top { min-height:7vh; margin-bottom:.8vh; }
.tv-mode .brand { gap:.8vw; font-size:clamp(22px,1.35vw,52px); }
.tv-mode .brand-mark { width:clamp(58px,3.6vw,138px); height:clamp(58px,3.6vw,138px); border-radius:.7vw; font-size:clamp(16px,1vw,38px); }
.tv-mode .brand small { margin-top:.3vh; font-size:clamp(14px,.72vw,28px); }
.tv-mode .top-links { display:none; }
.tv-mode .hero { min-height:10vh; align-items:center; margin:.7vh 0 1.2vh; }
.tv-mode .hero h1 { font-size:clamp(42px,2.8vw,108px); }
.tv-mode .hero-copy { margin-top:.8vh; font-size:clamp(18px,1vw,38px); }
.tv-mode .eyebrow { margin-bottom:.45vh; font-size:clamp(14px,.72vw,28px); }
.tv-mode .status-pill { padding:.7vh .9vw; font-size:clamp(16px,.8vw,31px); }
.tv-mode .section { margin-top:1.1vh; padding:1vw; border-radius:1vw; }
.tv-mode .section-head { margin-bottom:1vh; }
.tv-mode .section-head h2 { font-size:clamp(28px,1.55vw,60px); }
.tv-mode .section-head p { font-size:clamp(15px,.8vw,31px); }
.tv-mode .board-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8vw; }
.tv-mode .board { min-height:24vh; border-radius:.8vw; }
.tv-mode .board header { padding:1vh .8vw; font-size:clamp(16px,.86vw,33px); }
.tv-mode .board-body { padding:.8vw; }
.tv-mode .round-meta { margin-bottom:.7vh; font-size:clamp(14px,.7vw,27px); }
.tv-mode .match-player { min-height:6.2vh; padding:.8vh .8vw; border-radius:.55vw; font-size:clamp(22px,1.25vw,48px); }
.tv-mode .match-player strong { font-size:clamp(26px,1.5vw,58px); }
.tv-mode .versus { margin:.5vh; font-size:clamp(14px,.68vw,26px); }
.tv-mode .groups-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8vw; }
.tv-mode .group-table { border-radius:.75vw; }
.tv-mode .group-table h3 { padding:1vh .8vw; font-size:clamp(19px,1vw,38px); }
.tv-mode table { font-size:clamp(16px,.84vw,32px); }
.tv-mode th,.tv-mode td { padding:.75vh .4vw; }
.tv-mode th { font-size:clamp(13px,.67vw,26px); }
.tv-mode .bracket { grid-auto-columns:minmax(22vw,1fr); gap:.8vw; }
.tv-mode .round-column h3 { font-size:clamp(18px,.95vw,36px); }
.tv-mode .bracket-match { padding:.65vw; border-radius:.65vw; }
.tv-mode .podium strong { font-size:clamp(20px,1.1vw,42px); }
.tv-mode .empty { min-height:50vh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tv-mode .empty h2 { font-size:clamp(42px,3vw,116px); }
.tv-mode .empty p { max-width:60vw; font-size:clamp(22px,1.3vw,50px); }
.tv-mode .footer { display:none; }

@media (max-width:1100px) {
  .tv-mode .board-grid,.tv-mode .groups-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}