/* WHAT: Isolated portrait OBS presentation. WHY: Broadcast capture must contain only the programme and fit the source without scrolling. HOW: A bounded 9:16 frame scales typography with its width; selectors affect only the dedicated route. */
html[data-broadcast="pong"], html[data-broadcast="pong"] body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #090f13; }
html[data-broadcast="pong"] body > :not(main) { display: none !important; }
html[data-broadcast="pong"] #nl-badge-frame, html[data-broadcast="pong"] iframe { display: none !important; }
html[data-broadcast="pong"] #main { display: grid; place-items: center; width: 100vw; height: 100dvh; max-width: none; padding: 0; margin: 0; outline: none; }
html[data-broadcast="pong"] .loading-state, html[data-broadcast="pong"] .empty-state { color: #c0d7d4; font-size: clamp(16px, 3vw, 32px); }
/* WHAT: Single capture frame and its constrained rows. WHY: Court, scores and dialogue must all remain visible at 1080×1920 and smaller sizes. HOW: Gives flexible height to the court and explicit compact rows to surrounding presentation. */
.broadcast-frame { width: min(100vw, 56.25dvh); height: min(100dvh, 177.777778vw); container-type: inline-size; padding: min(3vw, 1.6875dvh); box-sizing: border-box; display: grid; grid-template-rows: 5.5% 12% 3.5% minmax(0, 1fr) 5.5% 10% 4%; gap: 1%; overflow: hidden; background: radial-gradient(ellipse at top left, #173c3c 0, transparent 48%), radial-gradient(ellipse at bottom right, #3a252e 0, transparent 55%), #0b151a; color: #f0fff9; }
.broadcast-frame * { min-width: 0; box-sizing: border-box; }
.broadcast-frame h1, .broadcast-frame h2, .broadcast-frame p { margin: 0; }
.broadcast-frame .alpha { color: #5de4d1; }.broadcast-frame .beta { color: #ff9784; }
/* WHAT: Branding and mirrored scoreboard. WHY: Rival identities and points must be readable on a phone-sized stream. HOW: Large tabular numerals and consistent team colors dominate the top of the frame. */
.broadcast-brand { display: flex; align-items: center; gap: 2cqw; }
.broadcast-mark { font-weight: 950; font-size: 5cqw; color: #0d2725; background: #5de4d1; border-radius: 1.5cqw; width: 7cqw; height: 7cqw; display: grid; place-items: center; }
.broadcast-brand h1 { font-size: 3.5cqw; letter-spacing: -.1cqw; font-weight: 900; }.broadcast-brand h1 span { color: #a2b8ba; font-weight: 400; }
.broadcast-pill { margin-left: auto; border: 1px solid #547171; border-radius: 4cqw; padding: .7cqw 1.6cqw; font-size: 1.8cqw; font-weight: 750; letter-spacing: .25cqw; }
.broadcast-scoreboard { display: grid; grid-template-columns: 1fr .6fr 1fr; align-items: center; border-bottom: 1px solid #496260; padding-bottom: 1cqw; }
.broadcast-team { display: grid; justify-items: center; line-height: 1.05; gap: .8cqw; }
.broadcast-team > span { font-size: 4cqw; font-weight: 900; letter-spacing: .2cqw; }.broadcast-team > strong { font-size: 11cqw; font-weight: 900; font-variant-numeric: tabular-nums; }
.broadcast-team small { font-size: 1.8cqw; letter-spacing: .1cqw; }.broadcast-versus { text-align: center; color: #9eb0b4; }.broadcast-versus > span { font-size: 3cqw; }.broadcast-versus small { display: block; font-size: 1.5cqw; margin-top: 1.5cqw; }
.broadcast-match { display: flex; align-items: center; justify-content: space-between; font-size: 1.65cqw; color: #9eb7b8; letter-spacing: .1cqw; }.broadcast-match strong { color: #effff8; font-size: 1.8cqw; }
/* WHAT: Tall shared court and explicit outage screen. WHY: An outage must cover frozen play rather than imply fresh action. HOW: Canvas fits its grid area exactly and the cover stays within the same bounds. */
.broadcast-court { min-height: 0; position: relative; border: 1px solid #537574; border-radius: 2cqw; overflow: hidden; box-shadow: 0 0 5cqw #0005; }
.broadcast-court canvas { display: block; width: 100%; height: 100%; }
.broadcast-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: 6cqw; text-align: center; background: #0c1c22f5; }
.broadcast-cover[hidden] { display: none; }.broadcast-cover-label { color: #5de4d1; font-size: 2cqw; letter-spacing: .4cqw; }.broadcast-cover h2 { font-size: 4cqw; line-height: 1.2; }.broadcast-cover p { font-size: 2.5cqw; color: #a8bebf; max-width: 60cqw; }.broadcast-cover button { font-size: 2.4cqw; padding: 1.8cqw 3cqw; }
/* WHAT: Powers, dialogue and stream/audio state. WHY: These are part of the broadcast, while site controls are excluded. HOW: Two effect slots and a bounded caption preserve space for the court; audio unlock is the only normal interaction. */
.broadcast-powers { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; align-items: center; }.broadcast-powers > div { border-left: .4cqw solid currentColor; padding-left: 1.5cqw; }.broadcast-powers span { display: block; font-size: 1.6cqw; letter-spacing: .12cqw; opacity: .75; }.broadcast-powers strong { display: block; font-size: 2.2cqw; line-height: 1.3; margin-top: .6cqw; }
.broadcast-dialogue { border: 1px solid #4a5e62; background: #14242ace; border-radius: 1.5cqw; padding: 2cqw 2.5cqw; overflow: hidden; }.broadcast-dialogue > div { display: flex; justify-content: space-between; gap: 1cqw; align-items: center; }.broadcast-dialogue [data-speaker] { color: #5de4d1; font-size: 2cqw; font-weight: 850; }.broadcast-dialogue small { color: #a4b5b6; font-size: 1.5cqw; }.broadcast-dialogue p { font-size: 3cqw; font-weight: 600; line-height: 1.3; margin-top: 1.5cqw; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.broadcast-status { display: flex; align-items: center; gap: 1.2cqw; font-size: 1.45cqw; color: #9fbcbb; }.broadcast-status [data-audio-status] { margin-left: auto; white-space: nowrap; }.broadcast-status button { font-size: 1.6cqw; padding: 1cqw 1.3cqw; white-space: nowrap; }.broadcast-status button[hidden] { display: none; }