:root { --background:#10252f; --foreground:#fff; --accent:#e9cd73; color-scheme:dark; font-family:Arial,sans-serif; background:var(--background); color:var(--foreground); }
* { box-sizing: border-box; }
body { margin:0; background:var(--background); isolation:isolate; }
/* The TV uses optimized copies of the approved phone photographs, never a top-view court drawing. */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.38; background-image:linear-gradient(to bottom,transparent 10%,var(--background) 100%),url("scoreboard-court.webp"); background-position:center,center 45%; background-size:cover; }
body[data-mode="light"]::before { opacity:.3; }
body[data-background="satin"]::before { background-image:linear-gradient(to bottom,transparent 10%,var(--background) 100%),url("scoreboard-satin.webp"); background-position:center,center 28%; }
body[data-background="aurora"]::before { background-image:linear-gradient(to bottom,transparent 10%,var(--background) 100%),url("scoreboard-aurora.webp"); background-position:center,center 42%; }
main { height: 100vh; height: 100dvh; padding: 4vh 4vw; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 3vh; }
header { display:flex; justify-content:space-between; align-items:center; gap:3vw; min-height:2em; font-size:clamp(14px,1.6vw,40px); line-height:1.3; }
header > span:first-child { font-weight:700; letter-spacing:.01em; flex-shrink:0; }
#status { text-align:right; max-width:60%; overflow-wrap:anywhere; }
.scores { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; min-height: 0; }
article { min-width:0; min-height:0; border:2px solid var(--accent); border-radius:3vh; padding:3vh 2.8vw; display:grid; grid-template-rows:minmax(2.4em,auto) minmax(0,1fr) 1.5em; align-items:center; text-align:center; --team:#263d49; background:linear-gradient(135deg,#ffffff18,transparent 60%),var(--team); }
article.serving { border-color:var(--accent); box-shadow:0 0 0 .35vh var(--glow,#e9cd7355),0 0 2.2vh .2vh var(--glow,#e9cd7355); }
h1 { margin:0; font-size:clamp(16px,2.6vw,88px); line-height:1.2; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
strong { display:block; font-size:min(25vw,40vh); line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; text-shadow:0 1px 1px #00000020; }
.serve { min-height:1.3em; font-size:clamp(14px,1.9vw,64px); line-height:1.3; white-space:nowrap; }
footer { justify-self:center; text-align:center; font-size:clamp(14px,2vw,64px); line-height:1.25; min-height:1.2em; max-width:100%; padding:.3em 1.1em; border:1px solid var(--accent); border-radius:100px; }
.stale #status { font-weight:700; text-decoration:underline; text-underline-offset:.2em; }
.stale .scores { opacity: .65; }
.audio-only main,.audio-only::before { display:none; }
@media (max-aspect-ratio:1/1) { main { gap:2vh; } header { flex-direction:column; align-items:flex-start; gap:.3em; } #status { max-width:100%; text-align:left; } h1 { font-size:4vw; } .serve { font-size:2.8vw; } }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }