:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #06111f; color: #f6fbff; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { min-block-size: 100vh; margin: 0; display: grid; place-items: center; overflow-x: hidden; background: radial-gradient(ellipse at 50% 110%, #0e6c70 0%, transparent 41%), radial-gradient(ellipse at 8% 6%, #133f70 0%, transparent 35%), linear-gradient(135deg, #06111f, #091c31 54%, #080e19); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .17; background: repeating-linear-gradient(90deg, transparent 0 12.3%, #9fdcff 12.4% 12.55%, transparent 12.7% 25%), repeating-linear-gradient(0deg, transparent 0 24.7%, #9fdcff 24.8% 25%); transform: perspective(500px) rotateX(57deg) scale(1.65) translateY(34%); transform-origin: bottom; }
.broadcast { width: min(1100px, calc(100% - 32px)); min-height: min(680px, calc(100vh - 32px)); display: grid; grid-template-rows: auto 1fr auto; gap: clamp(16px, 3vw, 36px); padding: clamp(18px, 4vw, 52px); position: relative; }
.masthead, .match-meta, .score-heading, .team { display: grid; align-items: center; }
.masthead { grid-template-columns: 1fr auto; letter-spacing: .13em; font-size: clamp(.7rem, 1.5vw, .9rem); font-weight: 700; }
.brand { color: #a9d9f7; }
.live-status { display: inline-flex; align-items: center; gap: .55em; padding: .65em .9em; border: 1px solid #435972; border-radius: 999px; font-size: .75rem; letter-spacing: .1em; background: #081a2bb8; }
.live-status::before { content: ""; inline-size: .62em; block-size: .62em; border-radius: 50%; background: #8190a0; box-shadow: 0 0 0 4px #8190a026; }
.live-status[data-state="live"]::before { background: #ff4e59; box-shadow: 0 0 0 4px #ff4e5926; }
.live-status[data-state="terminal"]::before { background: #65d5a0; box-shadow: 0 0 0 4px #65d5a026; }
.live-status[data-state="stale"], .live-status[data-state="unavailable"]::before { background: #ffbd4a; box-shadow: 0 0 0 4px #ffbd4a26; }
.scoreboard { display: grid; grid-template-rows: auto 1fr 1fr; align-self: stretch; border-radius: 28px; overflow: hidden; box-shadow: 0 28px 85px #0009, 0 0 0 1px #b4e7ff24; background: #071522e8; }
.score-heading { grid-template-columns: minmax(0, 1fr) clamp(54px, 10vw, 104px) clamp(64px, 12vw, 126px) clamp(88px, 17vw, 170px); min-height: 42px; padding-inline: clamp(16px, 4vw, 42px); color: #93aac0; font-size: clamp(.62rem, 1.35vw, .82rem); letter-spacing: .13em; font-weight: 700; text-align: center; }
.score-heading span:first-child { grid-column: 2; }.score-heading span:nth-child(2) { grid-column: 3; }.score-heading span:last-child { grid-column: 4; }
.team { grid-template-columns: minmax(0, 1fr) clamp(54px, 10vw, 104px) clamp(64px, 12vw, 126px) clamp(88px, 17vw, 170px); padding-inline: clamp(16px, 4vw, 42px); min-height: 150px; }
.team-a { background: linear-gradient(100deg, #0e5797, #0a315d); }.team-b { background: linear-gradient(100deg, #a12d41, #59182b); }
.team-name { min-width: 0; display: flex; align-items: center; gap: clamp(9px, 1.5vw, 17px); font-size: clamp(1.35rem, 5.5vw, 4.4rem); font-weight: 800; letter-spacing: -.055em; text-wrap: balance; overflow-wrap: anywhere; }
.scores { display: contents; }.scores strong { display: grid; place-items: center; min-width: 0; font-size: clamp(2.35rem, 9vw, 7.4rem); line-height: .9; font-variant-numeric: tabular-nums; letter-spacing: -.08em; }.scores .points { font-size: clamp(3.3rem, 13vw, 10.5rem); text-shadow: 0 6px 18px #0004; }
.match-meta { grid-template-columns: 1fr auto; gap: 12px; min-height: 24px; color: #aec0cf; font-size: clamp(.7rem, 1.5vw, .9rem); letter-spacing: .08em; text-transform: uppercase; }.match-meta span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .broadcast { width: 100%; min-height: 100vh; padding: 18px; }.scoreboard { border-radius: 20px; }.team { min-height: 176px; }.team-name { align-self: start; padding-block-start: 20px; }.scores strong { align-self: end; padding-block-end: 22px; }.score-heading { min-height: 35px; }.match-meta { grid-template-columns: 1fr; }.match-meta span:last-child { text-align: left; } }
@media (prefers-reduced-motion: no-preference) { .team { transition: background-color 180ms ease-out; } }