/* Blue / white competition workspace */
:root{--blue:#1763ef;--ink:#172d50;--muted:#697c96;--line:#dfE8f4;--bg:#f0f5fc}
body{background:radial-gradient(ellipse at 90% 0%,#dceaff80,transparent 48%),var(--bg);-webkit-font-smoothing:antialiased}
button{font-weight:550;border-radius:10px;transition:box-shadow .18s,background .18s,transform .18s}button:hover:not(:disabled){background:#edf4ff;border-color:#aac8f5}.primary,.score-button{background:linear-gradient(115deg,#2679ff,#1452db);box-shadow:0 5px 12px #1763ef25}.primary:hover:not(:disabled),.score-button:hover:not(:disabled){background:linear-gradient(115deg,#176af2,#1048c8);box-shadow:0 6px 18px #1763ef35}
.topbar{height:84px;background:#ffffffed;box-shadow:0 3px 18px #294e8605;padding:0 40px;border-bottom:1px solid #dce6f5}.brand{gap:12px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:12px;background:linear-gradient(140deg,#378bff,#1853de);color:white;font-size:32px!important;box-shadow:0 5px 12px #1763ef25}.brand>span:not(.brand-mark){font-size:22px;color:#183665}.brand small{font-size:9px;color:#7b8da5;margin-top:1px}.avatar{border-radius:12px;background:#e9f1ff;border:1px solid #d5e4fb;color:#2763bf}.connection{background:#f0f7ff;color:#517298;border:1px solid #dce9f9;border-radius:20px;padding:6px 12px}.top-right .quiet{border-left:1px solid var(--line);border-radius:0;margin-left:6px}
#app{padding:28px 36px 40px;max-width:1480px}.tournament-hero{position:relative;overflow:hidden;background:linear-gradient(110deg,#103d9f,#1766df 65%,#378afb);border:1px solid #337cee;border-radius:18px;padding:30px 32px;min-height:178px;color:white;box-shadow:0 10px 28px #1255c21c;margin-bottom:22px}.tournament-hero:after{content:'';position:absolute;width:370px;height:370px;right:-40px;top:-135px;border:1px solid #ffffff25;border-radius:50%;box-shadow:0 0 0 40px #ffffff07,0 0 0 80px #ffffff05;pointer-events:none}.tournament-hero>div:first-child{position:relative;z-index:1;max-width:80%}.tournament-hero h1{font-size:25px;line-height:1.6;letter-spacing:.3px;margin-bottom:12px}.tournament-hero .eyebrow{font-size:10px;letter-spacing:2px;color:#b8d8ff;margin-bottom:12px}.tournament-hero small{color:#d2e5ff;font-size:13px}.hero-emblem{position:relative;z-index:1;min-width:140px;text-align:center}.hero-emblem span{display:block;font-size:68px;font-weight:800;line-height:1.2;font-style:italic;color:#ffffffdb;text-shadow:5px 5px 0 #ffffff15}.hero-emblem small{font-size:8px;letter-spacing:2px}
.overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:26px}.stat{position:relative;display:flex;align-items:center;gap:14px;padding:20px;background:#ffffffd9;border:1px solid #e0e9f5;border-radius:13px;box-shadow:0 4px 14px #294e8604}.stat-icon{display:grid;place-items:center;width:43px;height:43px;background:#edf4ff;color:#2e70d8;border:1px solid #e0ebfd;border-radius:12px;font-size:25px}.stat div>span{font-size:12px;color:#6d809b}.stat strong{display:block;font-size:29px;line-height:1.3;letter-spacing:-.8px;font-variant-numeric:tabular-nums}.stat strong small{font-size:11px;font-weight:400;letter-spacing:0}.stat-en{position:absolute;right:12px;top:14px;font-size:8px;letter-spacing:1px;color:#98a8bf}.filters{padding:16px;background:#ffffffb8;border:1px solid var(--line);border-radius:12px;margin-bottom:16px}input,select,textarea{border-color:#dbe5f2;background:#fff;box-shadow:0 2px 3px #13387103}input:hover,select:hover{border-color:#9fbeec}.segmented{background:#eaf0f8}.segmented button.active{box-shadow:0 2px 6px #1b4c9710}.tabs{gap:26px;margin-bottom:20px}.tabs button{color:#637895}.tabs small{display:inline-block;background:#e5edf8;border-radius:6px;padding:1px 6px;font-size:10px;color:#6982a4}.tabs .active small{background:#deebff;color:#1763ef}.tabs button.active:after{border-radius:3px 3px 0 0;height:3px}
.match-grid{gap:20px}.match-card{display:flex;flex-direction:column;border-radius:14px;box-shadow:0 4px 16px #2c538208;transition:transform .2s,box-shadow .2s,border-color .2s}.match-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px #1d53a016;border-color:#8eb6f6}.card-head{padding:14px 18px;background:linear-gradient(110deg,#f7faff,#fff);border-bottom:1px solid #eaf0f8}.card-head strong{font-size:13px;letter-spacing:.5px}.card-head strong:before{content:'';display:inline-block;width:3px;height:12px;background:#3a7eea;border-radius:3px;margin-right:9px;vertical-align:-1px}.badge{border-radius:6px;font-weight:500}.badge.live{background:#EFF6FF;color:#2563EB}.badge.live:before{content:'';width:5px;height:5px;margin-right:6px;background:currentColor;border-radius:50%}.is-live{border-color:#9bc0f7}.versus{padding:26px 12px;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);flex:1}.versus>div{min-width:0;overflow-wrap:anywhere}.versus strong{font-size:19px}.versus em{font-style:italic;font-size:17px;color:#8ea5c5}.versus small{display:block;font-size:15px;line-height:1.6}.card-foot{background:#f8fbff;padding:13px 14px;border-top:1px solid #edf2fa;font-size:14px;flex-direction:row;align-items:center;gap:8px;white-space:nowrap}.card-foot span:last-child{flex-shrink:0}.card-foot span:last-child{font-weight:600}
.arena{border-radius:18px;box-shadow:0 8px 32px #234c8610;padding:24px 28px;border-color:#d9e6f7}.arena-head{padding-bottom:18px;border-bottom:1px solid #e8eff8}.arena-head h2:before{content:'';display:inline-block;width:4px;height:19px;border-radius:3px;background:var(--blue);margin-right:10px;vertical-align:-2px}.match-meta .back{border:1px solid #dbe5f2;border-radius:10px;padding:2px 15px;background:white}.match-clock{border:1px solid #dbe5f2;background:white;padding:6px 16px;border-radius:10px}.match-clock strong{color:#2369d0;font-family:ui-monospace,monospace}.scoreboard{padding:10px 0}.digits{color:#185bc5;font-size:76px;letter-spacing:-2px}.team-title{font-weight:650}.serve-note{font-size:12px;letter-spacing:.4px}.court{border:2px solid #77a5ec;background:linear-gradient(135deg,#eff7ff,#dcecff);box-shadow:inset 0 0 40px #5795eb12,0 5px 16px #2766bd09;border-radius:9px}.court:before{border-color:#a7c6f2}.court:after{border-color:#6296dc}.player i{background:linear-gradient(145deg,#4893ff,#1b5dcc);box-shadow:0 0 0 5px #edf5ff,0 5px 15px #2565c52b;border:2px solid white}.half:nth-child(2) .player i{background:linear-gradient(145deg,#8ca9d0,#4b6e9f)}.player>span{background:#f4f9ffd9;border-radius:5px;padding:2px 9px;font-weight:550}.player small{box-shadow:0 2px 8px #2e64ad12}.court-actions button{color:#5478a7}.score-button{border-radius:12px;min-height:72px}.toolbar{padding:12px;background:#e7eef8;border:1px solid #dce6f4;border-radius:14px}.toolbar button{font-size:13px}.prepare-controls{padding-top:20px;border-top:1px solid #e8eff8}.result-title{background:linear-gradient(180deg,#f0f6ff,#fff);padding:1px 10px 20px;margin-top:20px;border-radius:12px}th{background:#f5f8fd;color:#5b7190}dialog{border:1px solid #dbe7f9}dialog::backdrop{background:#0c23496b;backdrop-filter:blur(4px)}
.login{background:#f8fbff}.login-art{position:relative;background:radial-gradient(ellipse at 70% 60%,#287af1,transparent 62%),linear-gradient(145deg,#0c2e79,#1558c9);color:white;padding:44px 48px}.login-art:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:44px 44px;pointer-events:none}.login-art>*{position:relative}.login-art .brand>span:not(.brand-mark){color:white}.login-art .brand small,.login-art>small{color:#a9cbff}.login-art .brand-mark{background:#ffffff20;border:1px solid #ffffff40;box-shadow:none}.login-art h1{font-size:44px;font-weight:650;letter-spacing:1px}.login-art p{color:#bfd9ff}.login-art .eyebrow{font-size:11px}.mini-court{height:185px;width:300px;background:linear-gradient(135deg,#78b8ff30,#ffffff08);border-color:#8cc7ff;box-shadow:0 0 45px #6db5ff30,inset 0 0 30px #75b7ff15;transform:perspective(600px) rotateX(35deg) rotateZ(-20deg);margin:45px auto}.mini-court:before,.mini-court:after,.mini-court i{border-color:#9ac9ff9c}.mini-court span{color:white;text-shadow:0 0 25px #9ecfff}.login-form{background:radial-gradient(ellipse at 100% 0,#e5f0ff,transparent 55%)}.login-box{width:390px;padding:34px;background:#ffffffd9;border:1px solid #e2eaf5;border-radius:20px;box-shadow:0 18px 65px #194c8e0b}.login-box h2{font-size:30px}.login-box .muted{line-height:1.8;margin-bottom:28px}.pill{border:1px solid #dce8ff;border-radius:20px;letter-spacing:1px}.login-box label{font-size:13px;color:#405779}.login-box input{border-radius:9px;font-size:16px}.login-box .wide{min-height:52px}.demo{font-size:11px}.login-foot{font-size:11px}
@media(max-width:1100px){.stat-en{display:none}.stat{padding:16px}.tournament-hero h1{font-size:22px}.hero-emblem{min-width:100px}.login-art h1{font-size:36px}.login-art{padding:36px}.login-box{padding:28px}.tabs{gap:20px}}
@media(max-width:850px){#app{padding:22px}.topbar{padding:0 22px}.tournament-hero{padding:24px}.tournament-hero>div:first-child{max-width:100%}.hero-emblem{display:none}.overview{gap:10px}.stat{gap:10px;padding:14px 10px}.stat-icon{width:32px;height:36px;font-size:21px}.stat strong{font-size:25px}.arena{padding:20px}.digits{font-size:58px}.login-art{padding:28px}.mini-court{width:230px}.login-form{padding:22px}.login-box{padding:24px}}
@media(max-width:600px){.topbar{height:72px;padding:0 16px}.brand-mark{width:36px;height:36px}.brand>span:not(.brand-mark){font-size:19px}#app{padding:18px 14px}.tournament-hero{padding:22px 20px;border-radius:14px}.tournament-hero h1{font-size:20px}.tournament-hero small{font-size:12px}.overview{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:18px}.stat{padding:14px}.stat-en{display:block;font-size:7px}.filters{gap:10px;padding:12px}.filters input{min-width:0;flex:1}.filters .segmented{flex:1}.filters .segmented button{padding:6px 12px}.tabs{gap:7px;justify-content:space-between}.tabs button{padding:10px 2px;font-size:12px}.tabs small{display:none}.arena{padding:15px 12px}.digits{font-size:43px}.team-title{font-size:14px}.toolbar{gap:8px;padding:10px}.login-box{width:100%;max-width:390px;padding:28px}.login-form{padding:20px}.login-foot{bottom:18px}.card-foot{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}

/* Match cards stay at least 320px wide, or fit the available width on small screens. */
.topbar{gap:20px}.topbar .brand,.topbar .top-right{flex-shrink:0}.topbar-title{flex:1;min-width:0;margin:0;text-align:center;font-size:18px;line-height:1.5;color:#183665}
.match-grid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:16px}
@media(max-width:1100px){.topbar{gap:16px}.topbar-title{font-size:16px}}
@media(max-width:850px){.topbar{height:auto;min-height:84px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.topbar-title{order:3;flex-basis:100%;font-size:16px}}
@media(max-width:600px){.topbar{min-height:72px;gap:10px}.topbar-title{font-size:14px}.match-grid{grid-template-columns:1fr}}

/* Keep the side-by-side matchup, with a colored score beneath it. */
.versus.has-score{row-gap:18px}
.versus .card-scoreline{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);align-items:center;width:100%;font-variant-numeric:tabular-nums;line-height:1.2}
.card-scoreline b{font-size:30px;font-weight:750;color:var(--ink)}
.card-scoreline span{font-size:22px;color:#8195b1}
.card-scoreline b.score-leading{color:#2369c9}

/* Court markings follow the reference; partners occupy separate service courts. */
.court{height:clamp(300px,36vw,440px);border:0;border-radius:4px;background:#218c70;box-shadow:0 5px 16px #184e3314;isolation:isolate}
.court:before,.court:after,.half:before{content:none}
.court-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#e3f5e9;stroke-width:2;vector-effect:non-scaling-stroke}
.court-lines path{vector-effect:non-scaling-stroke}
.court-lines .court-net{stroke:#fff;stroke-width:3;stroke-dasharray:6 4}
.court .half{background:none;display:grid;grid-template-rows:1fr 1fr;justify-items:center;align-items:center;padding:7.54% 29.55% 7.54% 11.34%;min-width:0}
.court .half:nth-of-type(2){padding-left:29.55%;padding-right:11.34%}
.court .player{width:100%;min-width:0;gap:12px;color:white;text-align:center;align-self:center}

.court .player i{width:54px;height:54px;background:#ed897b;box-shadow:0 3px 10px #13473733;border:2px solid #ffffffdf}
.court .half:nth-of-type(2) .player i{background:#9655c6}
.court .player>span{background:transparent;padding:0 4px;color:white;font-weight:600;overflow-wrap:anywhere}
.court .player small{position:absolute;top:100%;margin-top:3px;white-space:nowrap;color:#724606;background:#fff3cf;font-size:11px;padding:1px 6px;box-shadow:none}
@media(max-width:600px){.court{height:300px}.court .player i{width:42px;height:42px;font-size:19px}.court .player{font-size:12px}.court .player small{font-size:10px;padding:1px 3px}}

.court .player small.receiving{color:#174c77;background:#e1f2ff}

/* Match navigation keeps preparation controls above the fold on tablets. */
.match-nav{display:grid;grid-template-columns:minmax(130px,1fr) minmax(0,2fr) minmax(110px,1fr);align-items:center;gap:16px;min-height:88px;padding:12px 36px;background:white;border-bottom:1px solid var(--line)}
.match-nav-back{display:flex;align-items:center;gap:12px;width:fit-content;font-weight:600}
.match-nav-back>.brand-mark{flex-shrink:0}
.match-nav-back>div{white-space:nowrap}
.match-nav-back small{display:block;font-weight:400;font-size:11px;margin-top:3px}
.match-nav-info{text-align:center;min-width:0}
.match-nav-rules{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 16px;font-size:14px}
.match-nav-players{margin-top:8px;font-size:13px;overflow-wrap:anywhere}
.match-nav-players>span{margin:0 16px;font-size:11px;color:var(--muted)}
.match-nav-clock{text-align:right;font-variant-numeric:tabular-nums}
.match-nav-clock strong{display:block;font-size:23px;line-height:1.3}
.match-nav-clock small{display:block;margin-top:3px;font-size:10px}
#app.preparing{padding-top:16px;padding-bottom:16px}
.preparing .arena{padding:18px 24px}
.preparing .arena-head{padding-bottom:12px;margin-bottom:16px}
.preparing .court{height:clamp(270px,calc(100dvh - 330px),440px)}
.preparing .court-actions{margin-top:6px}
.preparing .prepare-controls{margin-top:8px;padding-top:12px;gap:12px}
@media(min-width:601px) and (max-width:850px){.preparing .prepare-controls{display:grid;grid-template-columns:1fr 1fr}.preparing .prepare-controls label{justify-content:space-between}.preparing .court{height:clamp(250px,calc(100dvh - 390px),440px)}}
@media(max-width:600px){.match-nav{padding:10px 14px;grid-template-columns:90px minmax(0,1fr) 75px;gap:8px;min-height:88px}.match-nav-back{gap:6px;font-size:12px}.match-nav-rules{font-size:11px;gap:3px 8px}.match-nav-rules strong{flex-basis:100%}.match-nav-players{font-size:11px;margin-top:5px}.match-nav-players>span{margin:0 6px}.match-nav-clock strong{font-size:15px}.preparing .arena{padding:12px}.preparing .court{height:250px}.preparing .prepare-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preparing .prepare-controls label{grid-column:1 / -1}.preparing .arena-head{margin-bottom:12px}}

/* Two navigation type sizes, with consistent matchup weight. */
.match-nav{font-family:inherit;font-size:16px}
.match-nav-back,.match-nav-rules,.match-nav-rules strong,.match-nav-clock strong{font-size:16px}
.match-nav-back small,.match-nav-players,.match-nav-players>span,.match-nav-clock small{font-size:13px}
.match-nav-info,.match-nav-info strong{font-weight:600}
.match-nav-back>span{font-size:16px}
.court .swap-players{position:absolute;left:8px;top:50%;transform:translateY(-50%);z-index:2;width:44px;min-height:44px;padding:0;font-size:24px;line-height:1;background:#fff;color:#405b73;border:1px solid #dce5ec;border-radius:7px;box-shadow:0 2px 6px #173b2920}
.court .half:nth-of-type(2) .swap-players{left:auto;right:8px}
.court .swap-players:hover{background:#eaf3ff}
@media(max-width:600px){.match-nav{grid-template-columns:114px minmax(0,1fr) 72px;gap:6px}.match-nav-back,.match-nav-rules,.match-nav-rules strong,.match-nav-clock strong,.match-nav-back>span{font-size:13px}.match-nav-back small,.match-nav-players,.match-nav-players>span,.match-nav-clock small{font-size:11px}.court .swap-players{left:2px;width:32px;min-height:44px;font-size:20px}.court .half:nth-of-type(2) .swap-players{right:2px}}

/* Quiet circular position controls, with a consistent drawn icon. */
.court .swap-players{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;border-radius:50%;border:1px solid #ffffff80;background:#f4fbf8;color:#236952;box-shadow:0 2px 8px #103c2626;transition:background .15s,box-shadow .15s}
.court .swap-players svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.court .swap-players:hover:not(:disabled){background:#fff;border-color:#fff;box-shadow:0 3px 12px #103c2633}
.court .swap-players:active:not(:disabled){transform:translateY(-50%);background:#d9eee4;box-shadow:none}
@media(max-width:600px){.court .swap-players{width:40px;height:44px;padding:9px}}

/* Keep the dropdown indicator comfortably inset from the control edge. */
.prepare-controls select{appearance:none;-webkit-appearance:none;padding:10px 42px 10px 14px;border-radius:9px;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%235d7190' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;min-width:110px;max-width:100%}

/* Balanced preparation controls, with the primary action at court center. */
.preparing .prepare-controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
.prepare-selects{display:flex;align-items:center;gap:12px;min-width:0}
.preparing .prepare-selects label{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:12px;min-width:0}
.preparing .prepare-selects select{min-width:0;width:100%;font-size:13px;padding-left:10px;padding-right:34px;background-position:right 10px center}
.preparing #start{min-width:144px;min-height:48px}
.preparing #toss{justify-self:end;width:auto;color:var(--blue);background:#edf4ff;border-color:#cbdffd}
.arena-head{position:relative}.game-indicator{position:absolute;left:50%;transform:translateX(-50%);font-size:14px;color:var(--blue);font-weight:600;background:#edf4ff;border:1px solid #cbdffd;border-radius:6px;padding:4px 14px}
.toss-content{text-align:center;padding-top:10px}.coin-options{display:flex;justify-content:space-evenly;gap:24px;margin:26px 0 30px}.coin-options strong{display:block;margin-top:14px;font-size:18px}.coin-face{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;color:white;border:3px solid #ffffff50;box-shadow:inset 0 0 0 6px #ffffff16,0 6px 14px #18345812}.coin-face span{font-size:52px;font-weight:750;font-style:italic}.coin-red{background:#f27d6d}.coin-blue{background:#3e83ef}.coin-stage{height:220px;display:grid;place-items:center;perspective:900px}.flipping-coin{position:relative;width:140px;height:140px;transform-style:preserve-3d}.flipping-coin .coin-face{position:absolute;inset:0;backface-visibility:hidden}.flipping-coin .coin-blue{transform:rotateY(180deg)}.coin-result{display:flex;justify-content:center;padding:22px 0}.toss-result{font-size:20px;font-weight:600;margin:12px 0}.toss-content .muted{font-size:13px}.toss-content~footer{display:grid;grid-template-columns:auto 1fr}.toss-content~footer .primary{min-height:48px}
@media(max-width:700px){.preparing .prepare-controls{grid-template-columns:minmax(0,1fr) auto;gap:12px}.prepare-selects{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr}.preparing .prepare-selects label{grid-column:auto;width:100%}.preparing #start{width:100%}.preparing #toss{width:auto}.coin-face,.flipping-coin{width:110px;height:110px}.coin-face span{font-size:42px}}

/* Restore comfortable inline labels without squeezing the selectors. */
.preparing .prepare-controls{grid-template-columns:minmax(0,1fr) auto auto;gap:24px}
.prepare-selects{gap:24px;flex-wrap:wrap}
.preparing .prepare-selects label{flex-direction:row;align-items:center;gap:10px;font-size:15px;white-space:nowrap}
.preparing .prepare-selects select{width:auto;min-width:110px;font-size:15px;padding:10px 42px 10px 14px;background-position:right 14px center}
.preparing .prepare-selects #server{min-width:155px}
@media(max-width:900px){.preparing .prepare-controls{grid-template-columns:minmax(0,1fr) auto;gap:16px}.prepare-selects{grid-column:1 / -1;display:flex;gap:24px}.preparing .prepare-selects label{width:auto}.preparing #start{justify-self:center;width:auto}.preparing #toss{justify-self:end}}
@media(max-width:600px){.prepare-selects{display:grid;grid-template-columns:1fr;gap:12px}.preparing .prepare-selects label{width:100%;justify-content:space-between}.preparing .prepare-selects select{width:65%}.preparing #start{justify-self:stretch}}
.coin-result{cursor:pointer}

/* Anchor the primary action to the exact center independently of side widths. */
.preparing .prepare-controls{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 160px minmax(0,1fr);gap:20px}
.preparing .prepare-selects{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;gap:12px 20px}
.preparing #start{grid-column:2;grid-row:1;justify-self:center;width:160px}
.preparing #toss{grid-column:3;grid-row:1;justify-self:end;width:auto}
@media(max-width:1100px){.preparing .prepare-selects{flex-direction:column;align-items:flex-start}.preparing .prepare-selects label{width:auto}}
@media(max-width:700px){.preparing .prepare-controls{grid-template-columns:minmax(0,1fr) 144px minmax(0,1fr);gap:12px}.preparing .prepare-selects{grid-column:1 / -1;grid-row:1;flex-direction:row;justify-content:space-between}.preparing #start{grid-column:2;grid-row:2;width:144px}.preparing #toss{grid-column:3;grid-row:2;padding:10px 8px;font-size:12px;white-space:nowrap}.preparing .prepare-selects select{width:auto}}
@media(max-width:420px){.preparing .prepare-selects{flex-direction:column;align-items:stretch}.preparing .prepare-selects label{width:100%;justify-content:space-between}.preparing .prepare-selects select{width:65%}}

.toss-content~footer{display:flex;justify-content:center}
.toss-content~footer #close-dialog[hidden]{display:none}
.toss-content~footer #confirm-dialog{width:min(100%,320px);min-height:48px}

/* Tournament entry shares the match workspace palette, spacing and card treatment. */
.tournaments-page{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:auto;scrollbar-color:#91acd1 #e5edf8;color:var(--ink)}
.tournaments-page>.topbar{flex-shrink:0}
.tournaments-list{width:100%;max-width:1480px;margin:0 auto;padding:28px 36px 40px;flex:0 0 auto;min-height:0;overflow:visible}
.tournaments-page::-webkit-scrollbar{width:10px}
.tournaments-page::-webkit-scrollbar-track{background:#e5edf8;border-radius:8px}
.tournaments-page::-webkit-scrollbar-thumb{background:#91acd1;border:2px solid #e5edf8;border-radius:8px}
.tournaments-page::-webkit-scrollbar-thumb:hover{background:#678dbc}
.tournament-card{display:flex;align-items:center;gap:24px;background:linear-gradient(110deg,#f7faff,#fff 50%);border:1px solid var(--line);border-radius:14px;padding:24px 28px;box-shadow:0 4px 16px #2c538208;transition:transform .2s,box-shadow .2s,border-color .2s}
.tournament-card+.tournament-card{margin-top:20px}
.tournament-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px #1d53a016;border-color:#8eb6f6}
.tournament-content{flex:1;min-width:0}
.tournament-heading{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-bottom:18px}
.tournament-heading h2{font-size:20px;line-height:1.5;margin:0;overflow-wrap:anywhere}
.tournament-heading h2:before{content:'';display:inline-block;width:4px;height:19px;border-radius:3px;background:var(--blue);margin-right:10px;vertical-align:-2px}
.tournament-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap}
.tournament-status i{width:5px;height:5px;background:currentColor;border-radius:50%}
.tournament-status.upcoming{color:#697c96;background:#edf2f9}.tournament-status.live{color:#18876e;background:#e7f7f4}.tournament-status.paused{color:#aa690b;background:#fff3dc}.tournament-status.done{color:#8590a2;background:#f0f2f5}
.tournament-content p{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--muted);margin:10px 0 0;line-height:1.5}
.tournament-card svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.tournament-content p svg{width:20px;height:20px;color:#5478a7}
.tournament-arrow{width:36px;height:36px;padding:7px;border-radius:10px;background:#edf4ff;color:var(--blue)}
@media(max-width:600px){.tournaments-list{padding:18px 14px}.tournament-card{padding:20px 18px;gap:12px}.tournament-heading{gap:10px;margin-bottom:16px}.tournament-heading h2{font-size:18px}.tournament-content p{font-size:13px;gap:8px}.tournament-content p svg{width:18px;height:18px}.tournament-arrow{width:30px;height:30px;padding:5px}}
@media(prefers-reduced-motion:reduce){.tournament-card{transition:none}.tournament-card:hover{transform:none}}

.tournament-filter-panel{flex-shrink:0;background:var(--bg);padding:24px 36px 16px;border-bottom:1px solid var(--line)}
.tournament-filters{max-width:1408px;margin:0 auto;background:#f8fbff;box-shadow:0 4px 14px #294e8608}
.tournaments-list{padding-top:16px}
@media(max-width:600px){.tournament-filter-panel{padding:18px 14px 12px}.tournaments-list{padding-top:12px}}
.tournament-date{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.tournament-date input{font-size:14px;max-width:190px}
.tournament-status-options{padding:4px;gap:2px;flex-wrap:wrap}
.tournament-status-options label{position:relative;cursor:pointer;border-radius:8px;color:#637895}
.tournament-status-options input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;padding:0}
.tournament-status-options span{display:block;padding:8px 16px;font-size:14px;white-space:nowrap}
.tournament-status-options label.active{background:white;color:var(--blue);box-shadow:0 2px 6px #1b4c9710;font-weight:600}
.tournament-status-options label:focus-within{outline:3px solid #a8c4ff;outline-offset:2px}
.tournament-refresh{margin-left:auto;white-space:nowrap}
.tournament-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.tournament-actions .tournament-refresh{margin-left:0}.tournament-actions button{white-space:nowrap}.tournament-download-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#172d5066;backdrop-filter:blur(3px)}.tournament-download-overlay[hidden]{display:none}.tournament-download-panel{width:min(420px,100%);padding:28px;background:white;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 70px #172d5038;color:var(--ink)}.tournament-download-panel strong{display:block;margin-bottom:12px;font-size:18px}.tournament-download-panel>span{display:block;min-height:22px;margin-bottom:18px;font-size:14px;color:#405779;overflow-wrap:anywhere}.tournament-download-meter{display:flex;align-items:center;gap:14px}.tournament-download-meter progress{flex:1;height:10px;accent-color:var(--blue)}.tournament-download-meter span{min-width:42px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--blue)}
@media(max-width:700px){.tournament-status-options{order:3;width:100%;justify-content:space-between}.tournament-status-options span{padding:8px 10px}.tournament-filters{gap:10px}.tournament-date{flex:1}.tournament-date input{min-width:0;width:145px}.tournament-refresh{padding:10px 12px}}

/* Live scoring workspace: keep both scoring sides and referee actions in view. */
#app.officiating{padding:16px 24px;max-width:1480px}
.officiating .arena{padding:16px 20px}
.officiating .arena-head{min-height:46px;padding-bottom:12px}
.officiating .arena-head h2{font-size:16px}
.officiating .arena-head>small{font-size:14px}
.live-court{position:relative;display:grid;grid-template-columns: minmax(76px,14%) 1fr minmax(76px,14%);gap:12px;height:clamp(260px,calc(100dvh - 320px),450px);margin-top:16px}
.live-score{grid-row:1;height:100%;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;border:1px solid #d5e4fb;box-shadow:0 4px 14px #294e8608;border-radius:12px;padding:8px}
.live-score-0{grid-column:1;background:linear-gradient(160deg,#edf4ff,#e1edff);color:#2369c9}
.live-score-1{grid-column:3;background:linear-gradient(160deg,#f5f8fc,#e9eff7);color:#4b6e9f;border-color:#dbe5f2}
.live-score b{font-size:48px;margin:0}.live-score span{font-size:14px;color:var(--ink)}
.live-score-0:hover:not(:disabled){background:#deebff;border-color:#aac8f5;box-shadow:0 6px 18px #1763ef16}.live-score-1:hover:not(:disabled){background:#e1eaf6;border-color:#afc3de;box-shadow:0 6px 18px #294e8612}
.court.live-players{grid-column:2;grid-row:1;margin-inline:clamp(0px,calc(15vw - 90px),110px);height:100%;background:transparent;box-shadow:none;pointer-events:none}
.live-players .half,.live-players .half:nth-of-type(2){padding:0;grid-template-columns:1fr;justify-items:start;align-content:space-around}
.live-players .half:nth-of-type(2){justify-items:end}
.live-players .player{width:95px;color:var(--ink);gap:12px}
.live-players .player>span{color:var(--ink)}
.live-players .player i{width:64px;height:64px;background:linear-gradient(145deg,#4893ff,#1b5dcc);border:2px solid white;box-shadow:0 0 0 4px #edf4ff,0 4px 12px #2565c51a}
.live-players .half:nth-of-type(2) .player i{background:linear-gradient(145deg,#8ca9d0,#4b6e9f);box-shadow:0 0 0 4px #f0f4f9,0 4px 12px #294e861a}
.live-players .swap-players{pointer-events:auto;left:26px;width:40px;height:40px;min-height:40px;background:#f0f5fc;color:#5478a7;border-color:var(--line);box-shadow:none}
.live-players .half:nth-of-type(2) .swap-players{left:auto;right:26px}
.live-players .player small{position:static;margin:0;font-size:11px;border-radius:5px;padding:2px 7px}.live-players .player small.serving{background:#edf4ff;color:#2369c9}.live-players .player small.receiving{background:#edf2f8;color:#4b6e9f}
.live-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:24px}
.live-center .scoreboard{display:block;margin:0;padding:0}
.live-center .digits{display:flex;align-items:center;gap:14px;font-size:clamp(64px,7vw,88px);white-space:nowrap}
.live-center .digits b{font-weight:700;color:#2369c9}.live-center .digits b:last-child{color:#4b6e9f}
.live-center .digits span{margin:0;color:#657084;font-size:48px}
.officiating .toolbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:12px;padding:12px;background:#eaf0f8;border-color:#dce6f4;box-shadow:0 4px 14px #294e8604}
.officiating .toolbar button{min-height:50px;padding:10px 6px;background:white;border-color:#dbe5f2;color:#405779;border-radius:10px;font-size:14px;box-shadow:0 2px 5px #1b4c9705}
.officiating .toolbar button:hover:not(:disabled),.score-details-button:hover:not(:disabled),.match-nav-actions>button:hover:not(:disabled){background:#edf4ff;border-color:#aac8f5;color:var(--blue);box-shadow:0 3px 8px #1763ef0d}
.officiating #details{grid-column:1 / 3;justify-self:start;padding:8px 18px;min-height:42px}
.officiating>p.muted{margin:8px 0 0!important}
.officiating .banner{margin-bottom:10px;padding:10px 16px}
.officiating:has(.banner) .live-court{height:clamp(220px,calc(100dvh - 400px),350px)}
@media(max-width:600px){
 #app.officiating{padding:10px}.officiating .arena{padding:12px 8px}
 .live-court{grid-template-columns:54px 1fr 54px;gap:4px;height:280px}
 .live-score b{font-size:30px}.live-players .player{width:58px;font-size:12px}
 .live-players .player i{width:42px;height:42px;font-size:20px}
 .live-players .swap-players{left:9px}.live-players .half:nth-of-type(2) .swap-players{right:9px}
 .live-center{gap:20px}.live-center .digits{font-size:42px;gap:4px}.live-center .digits span{font-size:26px}
 .live-center button{font-size:12px;padding:8px;min-height:44px}
 .officiating .toolbar{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px}
 .officiating #details{grid-column:1 / -1}
}

/* Athlete notes stay above the avatar without shifting service positions. */
.court .player-avatar{position:relative;display:block;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;flex-shrink:0}
.player-edit{position:absolute;right:-3px;bottom:-2px;display:grid;place-items:center;width:22px;height:22px;border:1.5px solid white;border-radius:50%;background:#76a9ed;color:white;box-shadow:0 1px 4px #173b2933}
.player-edit svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.player-note{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:max-content;max-width:150px;margin-bottom:14px;font-size:14px;font-weight:750;line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.player-note:hover{display:block;z-index:3;background:#176c57;border-radius:4px;padding:3px}
.live-players .player-note:hover{background:white}
/* Match the note dialog to the workspace cards and form controls. */
dialog:has(.player-note-form,.penalty-form){padding:0;width:min(480px,92vw);border:1px solid var(--line);border-radius:16px;background:white;color:var(--ink);box-shadow:0 20px 64px #173b6429;overflow:hidden}
dialog:has(.player-note-form,.penalty-form)>h2{display:flex;align-items:center;gap:10px;margin:0;padding:22px 28px;background:linear-gradient(110deg,#f7faff,#fff);border-bottom:1px solid var(--line);color:var(--ink);font-size:18px;font-weight:650}
dialog:has(.player-note-form,.penalty-form)>h2:before{content:'';width:4px;height:18px;border-radius:3px;background:var(--blue)}
.player-note-form,.penalty-form{padding:24px 28px 28px}
.player-note-form label{display:block;margin-bottom:10px;font-size:14px;font-weight:600;color:var(--ink)}
.player-note-form input{width:100%;height:48px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#f8fbff;font-size:14px;color:var(--ink);box-shadow:0 2px 3px #13387103}
.player-note-form input::placeholder{color:var(--muted)}
.player-note-form input:hover{border-color:#9fbeec}
.player-note-form input:focus{border-color:var(--blue);background:white;outline:3px solid #1763ef14;outline-offset:0}
.note-tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.note-tags button{padding:8px 10px;min-height:40px;border:1px solid #d5e4fb;border-radius:8px;font-size:13px;color:#3769ad;background:#edf4ff;white-space:nowrap;box-shadow:none}
.note-tags button:hover:not(:disabled){background:#deebff;border-color:#aac8f5;color:var(--blue)}
dialog:has(.player-note-form,.penalty-form)>footer{margin:0;padding:18px 28px;background:#f8fbff;border-top:1px solid var(--line);gap:12px}
dialog:has(.player-note-form,.penalty-form)>footer button{min-width:88px;min-height:44px;padding:10px 20px;border-radius:9px;font-size:14px}
dialog:has(.player-note-form,.penalty-form) #close-dialog{border:1px solid var(--line);background:white;color:var(--muted);box-shadow:none}
dialog:has(.player-note-form,.penalty-form) #close-dialog:hover{background:#edf4ff;border-color:#aac8f5;color:var(--ink)}
@media(max-width:600px){.player-note{font-size:12px;max-width:100px}.preparing .court{min-height:310px}.player-note-form,.penalty-form{padding:20px}.note-tags{gap:10px}.note-tags button{padding:8px 4px}dialog:has(.player-note-form,.penalty-form)>h2{padding:20px}dialog:has(.player-note-form,.penalty-form)>footer{padding:16px 20px}}

/* Clickable notes retain the existing bold text appearance. */
.court button.player-note{min-height:0;padding:0;border:0;border-radius:4px;background:transparent;color:inherit;box-shadow:none;font-weight:750}
.court button.player-note:hover:not(:disabled){background:#176c57;color:white;text-decoration:underline;text-underline-offset:3px}
.court button.player-note:active:not(:disabled){transform:translateX(-50%)}
.note-delete-confirm>p{margin:0;line-height:1.7;font-size:14px}
.note-delete-confirm .note-delete-preview{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#f8fbff;color:var(--muted);overflow-wrap:anywhere}

/* Service highlights follow the role labels as scoring and ends change. */
.live-players .player:has(>small.serving){--role-ring:#1763ef;--role-glow:#1763ef26;--role-label:#1452c4}
.live-players .player:has(>small.receiving){--role-ring:#368ab5;--role-glow:#368ab526;--role-label:#246b91}
.live-players .half .player:has(>small) i{border:3px solid white;box-shadow:0 0 0 3px var(--role-ring),0 0 0 8px var(--role-glow),0 5px 16px var(--role-glow)}
.live-players .player:has(>small)>span{font-weight:750}
.live-players .player small.serving,.live-players .player small.receiving{color:white;background:var(--role-label);border:1px solid var(--role-label);border-radius:6px;padding:3px 9px;font-size:12px;font-weight:650;line-height:1.4;box-shadow:0 2px 6px var(--role-glow)}
.live-players .player small.serving:before{content:'●';font-size:9px;margin-right:5px;vertical-align:1px}
.live-players .player small.receiving:before{content:'◎';font-size:11px;margin-right:5px}
@media(max-width:600px){.live-players .player small.serving,.live-players .player small.receiving{font-size:10px;padding:2px 4px;white-space:nowrap}.live-players .player small.serving:before,.live-players .player small.receiving:before{margin-right:3px}}

/* Include the shuttle count in the centered group with clear button spacing. */
.live-center .match-ball-count{margin-top:4px;color:var(--ink);font-size:14px;font-weight:700;line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:600px){.live-center .match-ball-count{font-size:12px}}

/* Full-screen translucent interval overlay keeps the match visible underneath. */
.break-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(0,0,0,.58);color:white;text-align:center;padding:24px;overflow-y:auto;overscroll-behavior:contain}
body:has(.break-overlay){overflow:hidden}
.break-panel{width:min(100%,440px)}
.break-panel>.primary{display:block;width:220px;max-width:100%;min-height:60px;margin:24px auto 12px;padding:14px 28px;font-size:18px;font-weight:650;border-radius:12px}
.break-panel h2{font-size:36px;margin:0 0 16px}.break-panel>p{font-size:20px;margin:0 0 20px}
.break-panel h2,.break-panel>p{color:#fff176;text-shadow:0 1px 3px #0009}
.break-timer{display:flex;justify-content:center;align-items:baseline;gap:10px;background:white;color:var(--ink);border-radius:10px;padding:10px 24px;margin:0 auto 16px;width:fit-content;font-variant-numeric:tabular-nums}
.break-timer strong{font-size:48px;line-height:1.2;color:var(--blue)}.break-timer span{font-size:48px;line-height:1.2;font-weight:600;white-space:nowrap}
.break-panel #break-hint{font-size:16px;font-weight:600}.break-panel .quiet{font-size:18px;color:#e0eaff;margin:0}


@media(max-width:380px){.break-timer strong,.break-timer span{font-size:40px}.break-timer{padding:10px 16px}}

/* Penalty selection uses the same card, footer and primary controls as notes. */
dialog:has(.penalty-form){max-height:90dvh;overflow:auto}
.penalty-form fieldset{border:0;padding:0;margin:0 0 24px;min-width:0}
.penalty-form fieldset:last-of-type{margin-bottom:0}
.penalty-form legend{padding:0;margin-bottom:12px;font-size:14px;font-weight:600;color:var(--ink)}
.penalty-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.penalty-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.penalty-team{display:grid;align-content:start;gap:12px}
.penalty-choice{position:relative;display:block;cursor:pointer;min-width:0}
.penalty-choice input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;margin:0}
.penalty-choice span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:10px 8px;border:1px solid #d5e4fb;border-radius:8px;background:#edf4ff;color:#3769ad;font-size:14px;font-weight:550;overflow-wrap:anywhere;transition:background .18s,box-shadow .18s}
.penalty-choice:hover span{background:#deebff;border-color:#aac8f5;color:var(--blue)}
.penalty-choice input:checked+span{border-color:var(--blue);background:linear-gradient(115deg,#2679ff,#1452db);color:white;box-shadow:0 4px 10px #1763ef20}
.penalty-choice input:focus-visible+span{outline:3px solid #a8c4ff;outline-offset:3px}
.referee-picker{padding:18px 28px 20px}
dialog:has(.referee-picker){padding:0;width:min(860px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 24px 80px #14213940}
dialog:has(.referee-picker)>h2{display:flex;align-items:center;justify-content:space-between;margin:0;padding:22px 28px;font-size:20px;border-bottom:1px solid var(--line)}
.referee-dismiss{border:0;background:transparent;color:var(--ink);font-size:28px;font-weight:300;line-height:1;min-width:36px;min-height:36px;padding:0}
.referee-search{display:flex;align-items:center;gap:12px;background:#f3f5f9;border-radius:8px;padding:0 16px;margin-bottom:18px}
.referee-search span{font-size:28px;color:#52617a;line-height:1}
.referee-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;box-shadow:none;font-size:16px}
.referee-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.referee-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:96px;padding:24px 5px 8px;border:1px solid #e0e6ef;border-radius:7px;background:#fff;cursor:pointer;text-align:center}
.referee-card[hidden]{display:none}
.referee-card input{position:absolute;top:7px;right:7px;width:17px;height:17px;min-height:0;margin:0;padding:0;accent-color:var(--blue);cursor:pointer}
.referee-card-name{font-size:15px;font-weight:650;overflow-wrap:anywhere}
.referee-card small{font-size:11px;color:var(--muted)}
.referee-card:has(input:checked){border-color:var(--blue);background:#f5f9ff;box-shadow:0 0 0 1px #1763ef20}
.referee-card:focus-within{outline:3px solid #a8c4ff;outline-offset:2px}
.referee-empty{text-align:center;color:var(--muted);margin:16px 0 0}
dialog:has(.referee-picker)>.error{margin:0 28px}
dialog:has(.referee-picker)>footer{display:flex;align-items:center;gap:12px;margin:0;padding:16px 28px;border-top:1px solid var(--line)}
.referee-count{margin-right:auto;color:var(--muted)}
.referee-count strong{color:var(--blue)}
dialog:has(.referee-picker)>footer button{min-width:112px}
@media(max-width:600px){.referee-picker{padding:16px}.referee-choices{gap:6px}.referee-card{min-height:78px;padding:22px 2px 6px}.referee-card-name{font-size:12px}.referee-card small{font-size:10px}.referee-card input{top:5px;right:5px;width:14px;height:14px}dialog:has(.referee-picker)>h2,dialog:has(.referee-picker)>footer{padding:16px}dialog:has(.referee-picker)>footer button{min-width:72px;padding:8px}}
.preparing .prepare-selects #referee{flex:1;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:inherit;padding:10px 28px 10px 10px;background:#fff;border:1px solid #d5e4fb;color:var(--ink)}
.preparing .prepare-selects #referee:hover{border-color:#aac8f5;background:#f8fbff}
.preparing .prepare-selects button#server{flex:1;width:0;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:inherit;padding:10px 26px 10px 10px;background:#fff;border:1px solid #d5e4fb;color:var(--ink)}
.preparing .prepare-selects button#server:hover{border-color:#aac8f5;background:#f8fbff}
dialog:has(.server-picker){padding:0;width:min(490px,calc(100vw - 32px));border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 24px 80px #14213940}
dialog:has(.server-picker)>h2{display:flex;align-items:center;justify-content:space-between;margin:0;padding:18px 22px 8px;font-size:18px}
.server-picker{padding:0 22px 18px}
.server-picker>p{color:var(--muted);margin:0 0 20px;font-size:13px}
.server-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.server-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:138px;padding:24px 8px 12px;border:1px solid #e0e6ef;border-radius:6px;background:#fff;cursor:pointer;text-align:center}
.server-card input{position:absolute;top:10px;right:10px;width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--blue);cursor:pointer}
.server-card span{font-size:18px;font-weight:650;overflow-wrap:anywhere}
.server-card small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.server-card:has(input:checked){border-color:var(--blue);background:#f5f9ff;box-shadow:0 0 0 1px #1763ef20}
.server-card:focus-within{outline:3px solid #a8c4ff;outline-offset:2px}
dialog:has(.server-picker)>.error{margin:0 28px}
dialog:has(.server-picker)>footer{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:12px 22px;border-top:1px solid var(--line)}
dialog:has(.server-picker)>footer button{width:100%;min-height:44px}
@media(max-width:600px){.preparing .prepare-selects button#server{width:100%;min-height:44px;padding-left:6px;padding-right:6px}.server-picker{padding:0 16px 16px}.server-choices{gap:8px}.server-card{min-height:110px;padding:22px 4px 8px}.server-card span{font-size:16px}.server-card small{font-size:11px}.server-card input{top:8px;right:8px;width:16px;height:16px}dialog:has(.server-picker)>h2,dialog:has(.server-picker)>footer{padding:16px}}
@media(max-width:600px){.referee-choices{gap:6px}.referee-choices .penalty-choice span{font-size:12px;padding:8px 2px}.preparing .prepare-selects #referee{width:100%;min-height:44px;padding-left:6px;padding-right:6px}}
.penalty-error{color:#c33e3e;margin:18px 0 0;font-size:13px}
@media(max-width:600px){.penalty-types{gap:10px}.penalty-players{gap:20px}}

/* Independent match records and persistent paper-style score sheet. */
.score-sheet-module{margin-top:20px;padding:22px;background:#fff;border:1px solid #d7e3f5;border-radius:14px;min-width:0}
.score-sheet-module h2{margin:0;font-size:18px;color:#225ee7}.score-sheet-module h2 small{margin-left:12px;font-weight:400}.score-sheet-module p{font-size:12px;margin:10px 0 18px}.sheet-game h3{font-size:14px;margin:18px 0 10px}.sheet-scroll{overflow-x:auto;padding-bottom:8px}.badminton-sheet{width:100%;table-layout:fixed;min-width:1120px;font-size:12px;border-collapse:collapse}.badminton-sheet caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.badminton-sheet th,.badminton-sheet td{border:1px solid #cdd2d9;text-align:center;height:38px;padding:5px;width:40px;color:#182338}.badminton-sheet th{width:138px;position:sticky;left:0;background:#f2f4f7;color:#182338;z-index:1}.badminton-sheet tr:nth-child(-n+2) td{background:#f2f4f7}.badminton-sheet .sheet-final{font-weight:700;border-left:2px solid #a9b5c7}.match-records{margin:20px 0}.match-records summary{cursor:pointer;color:#225ee7;font-weight:600;margin-bottom:12px}.record-score{white-space:nowrap}.history td{overflow-wrap:anywhere}.score-sheet-module+.muted{margin-top:10px}
.badminton-sheet td{position:relative;height:44px}.sheet-marks{display:flex;flex-direction:column;align-items:center;font-size:11px;line-height:13px;font-weight:600;color:#263a5e}.sheet-final:after{content:'';position:absolute;left:6px;right:6px;top:-1px;bottom:-1px;border-left:1.6px solid #263a5e;border-right:1.6px solid #263a5e;pointer-events:none}.sheet-final.seal-0:after{border-top:1.6px solid #263a5e;border-radius:50% 50% 0 0}.sheet-final.seal-3:after{border-bottom:1.6px solid #263a5e;border-radius:0 0 50% 50%}.sheet-slash:after{content:'';position:absolute;top:-2px;height:calc(100% + 4px);width:1.6px;background:#263a5e;transform:rotate(13deg)}.slash-0:after{left:85%}.slash-1:after{left:62%}.slash-2:after{left:38%}.slash-3:after{left:15%}
.break-record-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:24px}.break-record-actions button{color:#253e66;font-size:14px}.sheet-marks>span+span{border-top:1px solid #b8c0ce;width:100%}
.badminton-sheet th{white-space:nowrap}

/* Score details entry and horizontally scrollable modal. */
.live-court{min-height:340px}
.score-details-button{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);min-width:140px;min-height:44px;color:#405779;border-color:#dbe5f2;background:white;box-shadow:0 2px 5px #1b4c9705;font-weight:600}
dialog:has(.score-details-content){width:min(1080px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow-y:auto;box-shadow:0 24px 90px #14213940}
dialog:has(.score-details-content)::backdrop{background:#18233880}
.score-details-content{min-width:0}
.score-details-content .score-sheet-module{margin:0;padding:0;border:0;border-radius:0}
.score-details-content .score-sheet-module>h2{display:none}
.score-details-content .sheet-scroll{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.score-details-content .sheet-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.score-details-hint{font-size:13px;color:var(--blue)}
@media(max-width:600px){dialog:has(.score-details-content){padding:18px}.score-details-button{min-width:112px;font-size:12px}}

/* Keep audit access beside the clock and court actions in one row. */
.match-nav:has(#details){grid-template-columns:minmax(130px,1fr) minmax(0,2fr) minmax(220px,1fr);padding-right:16px}
.match-nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:20px;min-width:0}
.match-nav-actions>button{white-space:nowrap;min-height:44px;color:#405779;background:white;border-color:#dbe5f2;box-shadow:0 2px 5px #1b4c9705}
.match-nav-actions .match-nav-clock{flex-shrink:0}
.officiating .toolbar{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:600px){
 .match-nav:has(#details){grid-template-columns:114px minmax(0,1fr);padding-right:14px}
 .match-nav:has(#details) .match-nav-actions{grid-column:1 / -1;gap:16px}
 .match-nav-actions>button{font-size:12px;padding:8px 12px}
 .officiating .toolbar{grid-template-columns:repeat(6,minmax(76px,1fr));overflow-x:auto}
}

/* End-of-game confirmation follows the existing blue and white dialog theme. */
.score-confirmation{text-align:center}
.score-confirmation h2{margin-bottom:8px}
.confirmed-scores{margin:24px 0;display:grid;gap:16px}
.confirmed-game{padding:14px;background:#f5f8ff;border:1px solid var(--line);border-radius:12px}
.confirmed-game>small{display:block;text-align:left;margin-bottom:8px}
.confirmed-score-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center;text-align:center}
.confirmed-score-row>span{overflow-wrap:anywhere;font-size:15px}
.confirmed-score-row strong{font-size:24px;font-variant-numeric:tabular-nums;white-space:nowrap}
.confirmed-score-row em{font-style:normal;color:var(--muted);padding:0 12px}
.confirmed-winner{color:var(--blue);font-weight:600}
.score-confirmation footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:600px){.confirmed-score-row{gap:8px}.confirmed-score-row>span{font-size:13px}.confirmed-score-row strong{font-size:21px}.confirmed-score-row em{padding:0 6px}.confirmed-game{padding:10px}}

 .game-preparation{display:flex;align-items:center;justify-content:center;padding:18px;margin-top:16px;background:#f5f8ff;border:1px solid var(--line);border-radius:12px}
.game-preparation-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);width: min(300px,38%);text-align:center;color:var(--ink);font-size:14px;line-height:1.5}
.game-preparation-hint p{margin:6px 0 0;color:var(--muted);font-size:13px}
@media(max-width:600px){.live-court:has(.game-preparation-hint){min-height:410px}.game-preparation-hint{top:8px;width:calc(100% - 120px);max-width:280px;font-size:13px}.game-preparation-hint p{font-size:12px}.game-preparation{padding:14px}}

/* Show only the active dialog when opening a record during a break. */
body:has(#dialog[open]) .break-overlay{display:none}

/* Keep game scores and signing together in the first result screen. */
#app.showing-result{padding-top:16px;padding-bottom:16px}
.result .arena-head{padding-bottom:12px}
.result .confirmed-scores{margin:12px 0;gap:8px}
.result .confirmed-game{padding:8px 12px}
.result .confirmed-game>small{margin-bottom:2px}
.result .signature-head{margin-top:12px;min-height:44px;gap:8px}
.result .signature-head h3{margin:0}
.result #signature{height:clamp(120px,22vh,180px)}
.result .wide{margin-top:10px}
@media(max-width:600px){
 #app.showing-result{padding:10px 14px}
 .result .confirmed-score-row strong{font-size:20px}
 .result .confirmed-game{padding:6px 8px}
 .result .confirmed-scores{gap:6px}
}

.point-notice{width:min(440px,calc(100vw - 48px));padding:32px 24px;background:transparent;border:0;box-shadow:none;color:white;text-align:center}
.point-notice::backdrop{background:rgba(0,0,0,.58);backdrop-filter:none}
.point-notice .break-panel{width:100%}
.point-notice .break-panel h2{color:#e53935}

/* Keep pre-match controls above the court, directly below the heading. */
.preparing .arena-head{margin-bottom:0}
.preparing .prepare-controls{margin-top:0;padding-top:12px;padding-bottom:16px;border-top:0}

/* Pre-match court swap button. */
.preparing .court-actions{margin-top:14px}
.preparing .court-actions button[data-action="swap"]{min-width:144px;min-height:44px;padding:10px 22px;border:1px solid #cbdffd;border-radius:10px;background:#edf4ff;color:var(--blue);font-weight:600}
.preparing .court-actions button[data-action="swap"]:hover{background:#dfeaff;border-color:#a8c4ff}
.preparing .court-actions button[data-action="swap"]:active{background:#d2e2ff}

.live-players .player small.serving:before{content:none}
.court .player small.serving,.court .player small.receiving,.live-players .player small.serving,.live-players .player small.receiving{display:none}

/* A separate shuttle badge sits beside the serving player avatar. */
.court .player .serving-marker{position:absolute;left:calc(50% + 36px);top:8px;width:36px;height:36px;object-fit:contain;pointer-events:none;filter:brightness(0) saturate(100%) invert(85%) sepia(39%) saturate(617%) hue-rotate(350deg) brightness(103%) contrast(94%);transform:rotate(45deg)}
.live-players .player .serving-marker{left:calc(50% + 42px);top:14px;filter:brightness(0) saturate(100%) invert(30%) sepia(96%) saturate(2120%) hue-rotate(211deg) brightness(94%) contrast(94%)}
@media(max-width:600px){.court .player .serving-marker{left:calc(50% + 29px);top:6px;width:30px;height:30px}}

/* Keep match information in one line and reserve the right-hand actions. */
.match-nav,.match-nav:has(#details){grid-template-columns:auto minmax(0,1fr) auto;gap:24px}
.match-nav .match-nav-info{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:22px;font-weight:700;line-height:1.5;text-align:center;border:0;border-radius:8px;background:transparent;padding:8px 0;color:var(--ink)}
.match-nav .match-nav-info:hover{background:#f5f8ff}
.match-nav .match-nav-actions{grid-column:3;flex-wrap:nowrap;flex-shrink:0}
.match-nav-actions>button{flex-shrink:0}
.match-info-full{font-size:22px;overflow-wrap:anywhere}
@media(max-width:600px){.match-nav,.match-nav:has(#details){gap:8px;padding:10px 14px}.match-nav:has(#details) .match-nav-actions{grid-column:3;gap:8px}.match-nav-back{white-space:nowrap}.match-nav-actions>button{padding:8px}.match-nav .match-nav-info{text-align:left}}

/* Keep player names and notes at the same font size. */
.court .player>span,.court .player .player-note{font-size:15px;line-height:1.5}

.result-score-details{color:var(--blue);justify-content:space-between}
#signature[role="button"]{cursor:pointer}
.signature-hint{display:block;text-align:center;margin-top:4px}
dialog.signature-dialog{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;border-radius:0;padding:24px;overflow:hidden}
dialog.signature-dialog[open]{display:flex;flex-direction:column;gap:12px}
.signature-dialog h2,.signature-dialog p{margin:0}
.signature-workspace{flex:1;min-height:0;position:relative}
.signature-workspace canvas{position:absolute;inset:0;width:100%;height:100%;background:#fafcff}
.signature-dialog footer{margin:0;flex-wrap:wrap}
.signature-dialog #clear-full-sign{margin-right:auto}
@media(max-width:600px){dialog.signature-dialog{padding:16px}.signature-dialog footer{gap:8px}.signature-dialog footer button{padding:10px 12px}}

/* Live athletes use large name cards, with service cues kept on the card. */
.court.live-players{margin-inline:clamp(4px,2vw,28px)}
.live-players .half,.live-players .half:nth-of-type(2){padding:0;min-width:0}
.court.live-players .player{width:88%;max-width:280px;gap:0}
.court.live-players .player>span{display:flex;align-items:center;justify-content:center;width:100%;min-height:76px;padding:14px 30px;border:1px solid #e2eaf5;border-radius:12px;background:#f2f5fa;color:var(--ink);font-size:clamp(22px,2.5vw,34px);font-weight:650;line-height:1.3;overflow-wrap:anywhere;box-shadow:0 3px 10px #234c8606}
.court.live-players .player:has(>small)>span{border-color:#cbdcf5;background:#eaf2ff;box-shadow:none;color:var(--role-label)}
.court.live-players .player:has(>small.receiving)>span{border-color:#d2e3ec;background:#edf5f9}
.court.live-players .player small.serving,.court.live-players .player small.receiving{display:none}
.court.live-players .player .serving-marker{left:auto;right:12px;top:50%;width:28px;height:28px;transform:translateY(-50%) rotate(45deg)}
.court.live-players .player .player-note{margin-bottom:8px}
@media(max-width:600px){
 .court.live-players .player{width:94%}
 .court.live-players .player>span{min-height:62px;padding:10px 18px 10px 6px;font-size:22px;border-radius:9px}
 .court.live-players .player .serving-marker{right:8px;width:20px;height:20px}
 .court.live-players .player small.serving,.court.live-players .player small.receiving{margin-top:6px}
}

/* Reserve an independent score column; athlete cards consume only remaining space. */
.live-court{grid-template-columns:175px minmax(0,1fr) max-content minmax(0,1fr) 175px;column-gap:clamp(8px,1.5vw,24px)}
.live-score-1{grid-column:5}
.court.live-players{display:contents}
.court.live-players .half{grid-column:2;grid-row:1;padding:0;grid-template-columns:minmax(0,1fr)}
.court.live-players .half:nth-of-type(2){grid-column:4;padding:0}
.court.live-players .player{width:100%;max-width:none}
.court.live-players .player>span{min-height:0;padding:clamp(12px,1.5vw,20px) clamp(8px,1vw,16px);font-size:clamp(16px,2.5vw,34px)}
.court.live-players .player:has(.serving-marker)>span{padding-right:44px}
.live-center{position:static;grid-column:3;grid-row:1;align-self:center;justify-self:center;transform:none;min-width:0}
.live-center .digits{font-size:clamp(36px,6vw,88px);gap:clamp(4px,1vw,14px)}
.live-center .digits span{font-size:.55em}
@media(max-width:600px){
 .live-court{grid-template-columns:175px repeat(2,minmax(0,1fr)) 175px;grid-template-rows:auto minmax(0,1fr);gap:12px 10px;height:auto;min-height:380px;padding-bottom:58px}
 .live-score-0{grid-column:1;grid-row:1 / 3}
 .live-score-1{grid-column:4;grid-row:1 / 3}
 .live-center{grid-column:2 / 4;grid-row:1;gap:4px;padding-top:8px}
 .live-center .digits{font-size:clamp(36px,9vw,54px)}
 .court.live-players .half{grid-column:2;grid-row:2}
 .court.live-players .half:nth-of-type(2){grid-column:3;grid-row:2}
 .court.live-players .player>span{font-size:clamp(16px,4.5vw,24px);padding:10px 6px}
 .court.live-players .player:has(.serving-marker)>span{padding-right:32px}
 .live-court .game-preparation-hint{position:static;grid-column:2 / 4;grid-row:1;transform:none;width:100%;max-width:none}
 .live-court:has(.game-preparation-hint) .live-center{padding-top:100px}
}

/* Keep dialog autofocus feedback inside the button instead of an outer ring. */
.point-notice .primary{-webkit-appearance:none;appearance:none}
.point-notice .primary:focus{outline:none}
.point-notice .primary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #ffffff80}

/* Keep preparation choices and actions on one fluid row. */
.preparing .prepare-controls{grid-template-columns:minmax(0,1fr) auto auto;gap:clamp(8px,2vw,24px)}
.preparing .prepare-selects{grid-column:1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(8px,1.5vw,20px);width:100%;max-width:370px}
.preparing .prepare-selects label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:100%;min-width:0;gap:8px;font-size:clamp(12px,1.4vw,15px)}
.preparing .prepare-selects select,.preparing .prepare-selects #server{flex:1;width:0;min-width:0;max-width:100%;font-size:inherit;padding:10px 26px 10px 10px;background-position:right 8px center;background-size:14px;text-overflow:ellipsis}
.preparing #start{grid-column:2;grid-row:1;width:auto;min-width:0;padding:10px clamp(10px,2vw,28px);white-space:nowrap}
.preparing #toss{grid-column:3;grid-row:1;width:auto;min-width:0;padding:10px clamp(8px,1.5vw,18px);white-space:nowrap}
@media(max-width:600px){
 .preparing .prepare-controls{gap:6px;align-items:end}
 .preparing .prepare-selects{gap:6px;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
 .preparing .prepare-selects label{flex-direction:column;align-items:stretch;gap:4px;font-size:12px}
 .preparing .prepare-selects select,.preparing .prepare-selects #server{flex:auto;width:100%;padding-left:6px;padding-right:20px;background-position:right 4px center;min-height:44px}
 .preparing #start,.preparing #toss{font-size:12px;padding:10px 6px;min-height:44px}
}


/* A simple cross separates the four service positions. */
.live-court-surface{grid-column:2 / 5;grid-row:1;position:relative;align-self:stretch;min-width:0;min-height:0;pointer-events:none}
.live-court-surface svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#9ab5d3;stroke-width:2}
.live-court-surface svg path{vector-effect:non-scaling-stroke}
.court.live-players .half{z-index:1}
.live-center{z-index:1;background:white;padding:12px 8px}
.live-court .score-details-button{z-index:1}
@media(max-width:600px){
 .live-court-surface{grid-column:2 / 4;grid-row:2}
 .live-center{padding:8px}
}

/* End the court divider above the score details button. */
@media(min-width:601px){
 .live-court-surface{clip-path:inset(0 0 58px 0)}
}

/* Prevent double-tap zoom across the page while keeping scrolling responsive. */
html{touch-action:manipulation}



/* Product logo; navigation arrows retain their existing button styling. */
.brand-logo{display:block;width:43px;height:43px;object-fit:contain;flex-shrink:0}
@media(max-width:600px){.brand-logo{width:36px;height:36px}}

/* Account for the supplied logo's transparent padding when aligning its visible edges. */
.tournaments-page .brand-logo-frame{position:relative;display:block;width:44px;height:44px;flex-shrink:0;overflow:hidden}
.tournaments-page .brand-logo-frame .brand-logo{position:absolute;width:126.7%;height:126.7%;max-width:none;left:-13.1%;top:-14.65%}
.tournaments-page .brand>.brand-name{line-height:28px}
.tournaments-page .brand-name small{line-height:14px;margin-top:2px}
@media(max-width:600px){
 .tournaments-page .brand-logo-frame{width:40px;height:40px}
 .tournaments-page .brand>.brand-name{line-height:25px}
 .tournaments-page .brand-name small{line-height:13px}
}

.tournament-pagination{display:flex;justify-content:center;align-items:center;gap:24px;padding:20px}.tournament-pagination a{color:var(--blue);padding:10px}

.tournaments-page .top-right .account-name,.tournaments-page .top-right .quiet,.matches-topbar .top-right .account-name,.matches-topbar .top-right .quiet{font-size:16px;line-height:1.5;color:var(--ink)}
.tournaments-page .top-right .account-name,.matches-topbar .top-right .account-name{font-weight:700}

.tournaments-list .tournament-empty,.match-empty{font-size:22px;line-height:1.7}
.tournaments-list .tournament-empty small,.match-empty small{font-size:16px;line-height:1.8}
.match-empty:empty{display:none}
@media(max-width:600px){.match-empty{padding:60px 16px}}
/* Tournament notice follows the workspace's blue and white panels. */
#tournament-notice{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:16px;background:white;color:var(--ink);box-shadow:0 24px 80px #173b6440;overflow:auto}
#tournament-notice::backdrop{background:#182f5266;backdrop-filter:blur(3px)}
.tournament-notice-header{padding:19px 24px;background:linear-gradient(110deg,var(--blue),#1754df);color:white}
#tournament-notice-title{margin:0;font-size:17px;font-weight:650;line-height:1.5;letter-spacing:.5px}
.tournament-notice-body{display:flex;align-items:center;gap:16px;padding:32px 24px;min-height:124px}
.tournament-notice-icon{display:grid;place-items:center;flex:0 0 44px;height:44px;border:1px solid #dce8ff;border-radius:12px;background:#edf4ff;color:var(--blue)}
.tournament-notice-icon svg{width:25px;height:25px}
#tournament-notice-message{margin:0;font-size:15px;line-height:1.8;color:#29456d;overflow-wrap:anywhere}
#tournament-notice form{margin:0}
#tournament-notice footer{margin:0;padding:16px 24px;border-top:1px solid var(--line);background:#f5f8fd}
#tournament-notice button{min-width:96px;min-height:44px;padding:10px 22px;border-radius:9px;font-size:14px}
#tournament-notice button:focus-visible{outline:2px solid white;outline-offset:-5px}
@media(max-width:480px){.tournament-notice-header{padding:16px 20px}.tournament-notice-body{padding:26px 20px;gap:12px}#tournament-notice footer{padding:14px 20px}}

/* Equal side columns keep the match-list title centered in the page. */
.matches-topbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)}
.matches-topbar .brand{justify-self:start}
.matches-topbar .topbar-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.matches-topbar .top-right{justify-self:end;min-width:0}
.matches-topbar .top-right .account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.matches-topbar .top-right .avatar{flex-shrink:0}
.matches-topbar .top-right form{flex-shrink:0;margin:0}
@media(max-width:850px){
  .matches-topbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .matches-topbar .topbar-title{grid-column:1/-1;grid-row:2;order:0}
  .matches-topbar .top-right{grid-column:2;grid-row:1}
}

/* Match time-period switch follows the tournament status switch. */
#match-period{padding:4px;gap:2px;flex-wrap:wrap}
#match-period button{min-height:0;padding:8px 16px;border:0;border-radius:8px;font-size:14px;line-height:1.5;font-weight:400;color:#637895;white-space:nowrap}
#match-period button.active{background:white;color:var(--blue);box-shadow:0 2px 6px #1b4c9710;font-weight:600}
#match-period button:focus-visible{outline:3px solid #a8c4ff;outline-offset:2px}
@media(max-width:700px){#match-period{order:3;width:100%;justify-content:space-between}#match-period button{padding:8px 10px}}

/* Keep the court selector arrow comfortably inset from the right edge. */
#match-court{
  -webkit-appearance:none;
  appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23183665' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:14px 14px;
}
#match-court[hidden]{display:none}
#match-date,#match-court-trigger,#match-refresh{height:46px;min-height:46px;max-height:46px}
#match-date{padding-top:0;padding-bottom:0}
#match-refresh{display:inline-flex;align-items:center;justify-content:center}
#match-period{min-height:46px;align-items:center}
#match-period button{min-height:38px}
#match-court-trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-width:120px;border:1px solid #dbe5f2;background:#fff;font-weight:400}
#match-court-trigger span{display:flex;align-items:center;justify-content:center;width:14px;height:14px;flex:none}
#match-court-trigger svg{display:block}
#match-court-dialog{padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--line);border-radius:14px}
#match-court-dialog>h2{display:flex;align-items:center;justify-content:space-between;margin:0;padding:22px 28px;font-size:20px;border-bottom:1px solid var(--line)}
.court-picker{padding:18px 28px}
.court-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.court-card{position:relative;display:flex;align-items:center;justify-content:center;min-height:72px;padding:20px 5px 8px;border:1px solid #e0e6ef;border-radius:7px;background:#fff;color:var(--ink);cursor:pointer;text-align:center}
.court-card input{position:absolute;top:7px;right:7px;width:17px;height:17px;min-height:0;margin:0;padding:0;accent-color:var(--blue);cursor:pointer}
.court-card span{font-size:15px;font-weight:650;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.court-card:has(input:checked){border-color:var(--blue);background:#f5f9ff;box-shadow:0 0 0 1px #1763ef20}
.court-card:focus-within{outline:3px solid #a8c4ff;outline-offset:2px}
#match-court-dialog>footer{display:flex;align-items:center;gap:12px;margin:0;padding:16px 28px;border-top:1px solid var(--line)}
#match-court-dialog .court-count{margin-right:auto;color:var(--muted)}
#match-court-dialog>footer button{min-width:112px}
@media(max-width:600px){#match-court-dialog>h2,#match-court-dialog>footer{padding:16px}.court-picker{padding:16px}.court-choices{gap:6px}.court-card{min-height:64px;padding:18px 2px 6px}.court-card span{font-size:12px}.court-card input{top:5px;right:5px;width:14px;height:14px}#match-court-dialog>footer button{min-width:72px;padding:8px}}

.card-foot .match-action{color:var(--blue);font-weight:600;flex-shrink:0}

/* Withdrawals in the match list. */
.versus .withdrawn-side strong{color:var(--muted)}
.versus.has-withdrawal{grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr)}
.versus.has-withdrawal>div:first-child{grid-column:1;grid-row:1}
.versus.has-withdrawal>div:nth-child(3){grid-column:3;grid-row:1}
.versus.has-withdrawal>em{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;align-self:center}
.versus.has-withdrawal .card-scoreline{display:contents}
.versus.has-withdrawal .card-scoreline>b{grid-row:2;align-self:center;font-variant-numeric:tabular-nums;line-height:1.2}
.versus.has-withdrawal .card-scoreline>b:first-child{grid-column:1}
.versus.has-withdrawal .card-scoreline>b:last-child{grid-column:3}
.versus.has-withdrawal .card-scoreline>span{display:none}
.withdrawal-badge{display:block;padding:5px 17px;border-radius:8px;background:#ffd9e3;color:#a80000;font-size:18px;font-weight:700;font-style:normal;line-height:1.5;white-space:nowrap}
.card-scoreline b.score-withdrawn{color:var(--muted)}
.card-scoreline b.score-withdrawn small{font-size:13px;line-height:1.4;color:inherit;font-weight:600}

.versus .losing-side strong,.versus .losing-side small,.card-scoreline b.score-losing{color:var(--muted)}

/* Keep every page navigation visible while its content scrolls. */
.topbar,.match-nav{position:sticky;top:0;z-index:20;flex-shrink:0;background:#fff}
/* Keep the match list header on its own layer during touch scrolling. */
.matches-topbar{position:fixed;inset:0 0 auto;width:100%;transform:translateZ(0);backface-visibility:hidden}
#app[data-page="remote-list"]{margin-top:var(--matches-header-height,60px)}
/* Keep the navigation height consistent across tournament, match list, and match screens. */
.topbar,.match-nav{height:60px;min-height:60px;padding-top:0;padding-bottom:0}
.topbar .brand-mark,.match-nav-back>.brand-mark{width:36px;height:36px;border-radius:12px}
.topbar .brand-mark svg,.match-nav-back>.brand-mark svg{width:22px;height:22px}
@media(max-width:850px){
  .topbar{flex-wrap:nowrap}
  .topbar-title{order:0;flex-basis:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .matches-topbar{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)}
  .matches-topbar .topbar-title{grid-column:2;grid-row:1}
  .matches-topbar .top-right{grid-column:3;grid-row:1}
}
@media(max-width:600px){.topbar .top-right .account-name{display:none}}
.athlete-gender{display:inline-block;width:1.15em;height:1.15em;margin-left:.18em;vertical-align:-.18em;object-fit:contain}
#match-grid .versus>div>strong{white-space:normal;overflow-wrap:anywhere}
@media(min-width:720px){#match-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.live-center .digits b.point-score{color:#e53935}