.referee-page{background:var(--ref-bg,#f4f3ef)}
.referee{--ref-bg:#f4f3ef;--ref-card:#fff;--ref-ink:#171719;--ref-muted:#55555e;--ref-border:#b8b8bd;--ref-accent:#f3da95;--ref-other:#dbe8f5;max-width:1280px;margin:auto;padding:16px 24px 28px;color:var(--ref-ink);min-height:100dvh}
[data-theme=dark] .referee{--ref-bg:#0b0b0d;--ref-card:#19191d;--ref-ink:#f5f5f7;--ref-muted:#bcbcc5;--ref-border:#51515e;--ref-accent:#e8ca7a;--ref-other:#b9cee7}
.referee-page:has([data-ref]){background:#f4f3ef}[data-theme=dark] .referee-page{background:#0b0b0d}
.ref-top{display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:700;min-height:48px}.ref-top a{padding:12px 0}.referee button,.referee select{touch-action:manipulation;min-height:52px;border:1px solid var(--ref-border);border-radius:14px;font:inherit;font-weight:700;background:var(--ref-card);color:var(--ref-ink);padding:12px 20px;cursor:pointer}.referee button:focus-visible{outline:4px solid #c78a12;outline-offset:4px}.referee button:disabled{cursor:default}.referee .gold{background:var(--ref-accent);color:#151519;border-color:var(--ref-accent)}.ref-feedback{height:28px;margin:3px 0;color:var(--ref-muted);font-size:14px}.ref-scorebar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.ref-scorebar h1{font-size:24px;margin:0 auto 0 0}.ref-scorebar strong{font-size:25px}.ref-scorebar>span{color:var(--ref-muted);font-size:14px}.ref-court{display:grid;grid-template-columns:1fr 1fr;gap:20px}.referee .ref-point{border:0;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;min-height:clamp(250px,48dvh,490px);padding:24px 16px;user-select:none;-webkit-user-select:none;color:#141418;box-shadow:inset 0 -5px 0 #0002;opacity:1}.referee .ref-side-0{background:var(--ref-accent)}.referee .ref-side-1{background:var(--ref-other)}.ref-point:active:not(:disabled){transform:scale(.985);box-shadow:inset 0 4px 0 #0002}.ref-player{font-size:clamp(20px,2.7vw,34px);line-height:1.15;overflow-wrap:anywhere}.ref-serve{height:30px;margin-top:12px;font-size:17px}.ref-number{font-size:clamp(90px,17dvh,180px);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.05em}.ref-point-label{font-size:20px;margin-top:10px}.ref-bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}.referee .ref-undo{min-height:72px;font-size:22px;border-width:2px}.referee .ref-undo:disabled{opacity:.45}.referee .ref-swap{justify-self:end;align-self:center}.ref-finish{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font-size:20px}.ref-finish button{min-height:64px}.ref-sets{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;color:var(--ref-muted)}.ref-sets span{padding:8px 12px;border:1px solid var(--ref-border);border-radius:8px}.ref-sets b{margin-left:8px;color:var(--ref-ink)}.ref-server-choice{font-size:22px;font-weight:700;margin:0 0 16px}.ref-summary{max-width:680px;margin:8vh auto;text-align:center}.ref-summary h1{font-size:clamp(26px,4vw,42px);line-height:1.3}.ref-versus{display:block;font-size:18px;margin:18px;color:var(--ref-muted)}.ref-summary label{display:block;margin:30px auto 20px;max-width:240px;text-align:left}.ref-summary select{width:100%;margin-top:8px}.ref-summary button{min-height:72px;font-size:22px}.ref-final{display:block;font-size:100px}.ref-retry{margin-bottom:14px}.referee-page #toast{bottom:20px}
@media(orientation:portrait) and (min-width:600px){.referee .ref-point{min-height:43dvh}.ref-number{font-size:19vw}.ref-player{font-size:28px}.ref-scorebar{margin-top:20px}}
@media(max-width:599px){.referee{padding:12px}.ref-top{font-size:13px;gap:8px}.referee .ref-screen{font-size:12px;padding:8px}.ref-court,.ref-bottom{gap:10px}.referee .ref-point{min-height:280px;padding:14px 8px}.ref-number{font-size:90px}.ref-player{font-size:20px}.ref-serve{font-size:14px}.ref-scorebar>span{width:100%}.referee .ref-undo{font-size:18px;padding:10px}.referee .ref-swap{font-size:14px;padding:10px}.ref-finish{flex-direction:column;align-items:stretch}.ref-sets{font-size:13px}}
/* Keep scoring controls distinct from the site's general dark button styles. */
html[data-theme=dark] .referee button{background:var(--ref-card);color:var(--ref-ink);border-color:var(--ref-border)}
html[data-theme=dark] .referee .ref-point{background:#222226;color:#f5f5f7;border:2px solid #555563}
html[data-theme=dark] .referee .ref-side-0{border-color:#e8ca7a}
html[data-theme=dark] .referee .ref-side-1{border-color:#8ba9ca}
html[data-theme=dark] .referee .ref-point:hover{background:#29292f;color:#fff}
html[data-theme=dark] .referee .gold{background:#e8ca7a;color:#151519;border-color:#e8ca7a}