/* VolleyPlus Scoreboard v1 - basic styling */
:root{
  --bg1:#00167A;
  --bg2:#00167A;
  --panel: rgba(255,255,255,.08);
  --panel2: rgba(0,0,0,.22);
  --stroke: rgba(255,255,255,.14);
  --text:#ffffff;
  --muted: rgba(255,255,255,.70);
  --brand:#30B5F6;
  --brand2:#2C65AD;
  --accent:#F2A018;
  --good:#36d399;
  --danger:#ff6b6b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
  background:
    radial-gradient(1200px 700px at 15% 15%, rgba(48,181,246,.12), transparent 60%),
    radial-gradient(1000px 700px at 90% 20%, rgba(242,160,24,.08), transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
}

.sb{
  height:100vh;
  padding: clamp(14px, 2.2vw, 28px);
  display:flex;
  flex-direction:column;
  gap: clamp(10px, 1.6vw, 18px);
}

/* Pre-match mode: remove the duplicated top bar so the teams can be larger */
body.isPrematch .sbHeader{ display:none; }
body.isPrematch .sb{ padding: clamp(10px, 1.8vw, 22px); }
body.isPrematch .preMatchInner{ max-width: 1400px; }
body.isPrematch .preMatchTeam{ min-height: clamp(220px, 34vh, 420px); }
  
/* Prematch: maximize usable space, court label on first line, bigger team logos/names */
body.isPrematch .preMatch{
  align-items: stretch;
  justify-content: flex-start;
}

/* Match started (first point scored): compact header (no logo) and ALL pills on one line */
body.matchStarted .sb{
  padding-top: 10px;
  gap: clamp(8px, 1.2vw, 14px);
}

/* Put Division/Ref (matchMeta) and Court/Set/Live (pills) on the SAME row */
body.matchStarted .sbHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body.matchStarted .brand{ display:none; }

body.matchStarted .matchMeta{
  display: block;
  flex: 1 1 auto;
  justify-self: unset;
  max-width: none;
  white-space: nowrap; /* keep it to one line */
  text-transform: uppercase;
}

body.matchStarted .pills{
  flex: 0 0 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
}

body.matchStarted .pill{
  padding: 9px 13px;
}
body.isPrematch .preMatchInner{
  flex: 1;
  height: 100%;
  width: 100%;
  max-width: 100%;
  padding: clamp(2px, 0.6vw, 8px) clamp(8px, 1.2vw, 16px) clamp(8px, 1.2vw, 16px);
  gap: clamp(8px, 1.4vw, 14px);
  align-items: stretch;
}
body.isPrematch .preMatchBar{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(2px, 0.6vh, 8px) 0 clamp(8px, 1.2vh, 14px) 0;
}

.preMatchTopPills{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 18px);
}

.preMatchTopPills .checkinPill{
  font-size: clamp(16px, 2.0vw, 34px);
  padding: 8px 16px;
  min-width: clamp(220px, 22vw, 360px);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}


body.isPrematch .preMatchBarCourt{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 2.8vw, 46px);
  padding: 6px 14px;
  border-radius: 999px;

  /* pill look */
  background: rgba(255,255,255,0.14);
  border: 2px solid rgba(255,255,255,0.22);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);

  color: rgba(255,255,255,.95);
  letter-spacing: .12em;
  font-weight: 950;
  text-transform: uppercase;
  line-height: 1;

  max-width: min(28vw, 360px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.isPrematch .preMatchBarDivision{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 2.8vw, 46px);
  padding: 6px 14px;
  border-radius: 999px;

  /* pill look */
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.20);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);

  color: rgba(255,255,255,.92);
  font-weight: 850;
  text-transform: uppercase;
  line-height: 1;

  max-width: min(42vw, 620px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.isPrematch .preMatchBarTime{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 2.8vw, 46px);
  padding: 6px 14px;
  border-radius: 999px;

  /* pill look */
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.20);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);

  color: rgba(255,255,255,.92);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;

  max-width: min(24vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.isPrematch .preMatchTeams{
  width: 100%;
  max-width: 100%;
  flex: 1;
  align-items: stretch;
}
body.isPrematch .preMatchTeam{
  min-height: clamp(260px, 42vh, 560px);
  padding: clamp(14px, 2vw, 24px);
}
body.isPrematch .preMatchTeamName{
  width: 100%;
  margin-top: clamp(10px, 2.4vh, 26px);
  font-size: clamp(30px, 5.2vw, 98px);
}
/* Team logos should display in a 3:2 box (matches myTeam upload guidance) */
body.isPrematch .teamProfilePic{
  width: min(765px, 80%);
  max-width: 765px;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: contain;
}
min-width: 0;

.sbHeader{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:16px;
}

.matchMeta{
  justify-self:center;
  min-width: 0;
  padding:8px 14px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background: var(--panel2);
  color: var(--muted);
  font-weight:800;
  letter-spacing:.04em;
  font-size: clamp(12px, 1.3vw, 20px);
  text-align:center;
  max-width: min(58vw, 980px);
  white-space: normal;
  overflow:hidden;
  text-overflow: ellipsis;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width: 240px;
}
.logo{
  height: clamp(44px, 5.4vw, 78px);
  width:auto;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.25));
}

.pills{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}
.pill{
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--panel);
  border:1px solid var(--stroke);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  font-size: clamp(12px, 1.5vw, 18px);
  letter-spacing:.2px;
  white-space:nowrap;
}
.pill strong{font-weight:800}
.pill .dim{opacity:.7; font-weight:800; margin-left:2px}
.pill.muted{color: var(--muted)}
.pill.ghost{
  background: rgba(0,0,0,.18);
}

.pill.conn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.pill.conn .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.45);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.pill.conn.live .dot{ background: var(--good); box-shadow: 0 0 0 3px rgba(54,211,153,.15); }
.pill.conn.reconnecting .dot{ background: var(--accent); box-shadow: 0 0 0 3px rgba(242,160,24,.14); }
.pill.conn.offline .dot{ background: var(--danger); box-shadow: 0 0 0 3px rgba(255,107,107,.16); }


.preMatch{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.preMatchInner{
  width: 100%;
  max-width: 1200px;
  padding: clamp(14px, 2.2vw, 28px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(10px, 1.8vw, 18px);
}
.preMatchLogo{
  height: clamp(70px, 10vw, 150px);
  width:auto;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.25));
}
.preMatchBar{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(10px, 1.4vh, 18px) 0;
}
.preMatchBarNext{
  padding: 12px 18px;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(0,0,0,.26);
  /* darker segment */
  display:flex;
  align-items:center;
  justify-content:center;
  white-space: nowrap;
}
.preMatchBarSep{
  width: 1px;
  background: rgba(255,255,255,.12);
}
.preMatchBarInfo{
  padding: 12px 18px;
  background: rgba(0,0,0,.14);
  color: var(--muted);
  font-weight: 900;
  letter-spacing: .04em;
  font-size: clamp(12px, 1.6vw, 22px);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  display:flex;
  align-items:center;
}
.preMatchTeams{
  margin-top: clamp(6px, 1.2vw, 14px);
  width: 100%;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
.preMatchTeam{
  min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18));
  box-shadow: 0 18px 38px rgba(0,0,0,.22);
  padding: clamp(16px, 2.2vw, 26px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 18px;
  min-height: clamp(180px, 28vh, 320px);
}

/* Accent strip above each pre-match team panel (like remote.php) */
.preMatchTeam.homeTint::before,
.preMatchTeam.awayTint::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 10px;
  pointer-events:none;
}
.preMatchTeam.homeTint::before{
  background: linear-gradient(90deg, rgba(48,182,245,.85), rgba(48,182,245,.35));
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
}
/* Pre-match: make the two team cards meet cleanly in the middle (no VS, no gap) */
body.isPrematch .preMatchTeam.homeTint{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
body.isPrematch .preMatchTeam.awayTint{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* Accent strip corners when joined */
body.isPrematch .preMatchTeam.homeTint::before{
  border-top-right-radius: 0;
}
body.isPrematch .preMatchTeam.awayTint::before{
  border-top-left-radius: 0;
}

.preMatchTeam.awayTint::before{
  background: linear-gradient(90deg, rgba(242,171,59,.35), rgba(242,171,59,.85));
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
}

/* Pre-match team panel tints (subtle brand color backgrounds) */
.preMatchTeam.homeTint{
  /* stronger, clearly-visible home brand tint */
  background:
    linear-gradient(180deg, rgba(48,182,245,.52), rgba(48,182,245,.12)),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18));
  border-color: rgba(48,182,245,.40);
  box-shadow:
    0 18px 38px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
.preMatchTeam.awayTint{
  /* stronger, clearly-visible away brand tint */
  background:
    linear-gradient(180deg, rgba(242,171,59,.52), rgba(242,171,59,.12)),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18));
  border-color: rgba(242,171,59,.38);
  box-shadow:
    0 18px 38px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
.preMatchTeamName{
  min-width: 0;
  font-weight: 1000;
  font-size: clamp(26px, 4.4vw, 72px);
  line-height:1.15;
  /* keep logo row aligned even when name wraps to 2 lines */
  min-height: calc(2.10em);
  text-shadow: 0 18px 30px rgba(0,0,0,.30);
  max-width: 100%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  flex-wrap:nowrap; /* keep check-in pill + team name on one line */
}

.preMatchTeamName > span#preHomeName,
.preMatchTeamName > span#preAwayName{
  line-height:1.15;
  padding-bottom: .10em;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-align: center;
}

.preMatchTeamName .checkinPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 2.1vw, 26px);
  padding: 6px 12px;
  min-width: clamp(34px, 4.6vw, 58px);
  border-radius: 999px;

  /* pill look */
  background: rgba(255,255,255,0.16);
  border: 2px solid rgba(255,255,255,0.22);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);

  /* spacing before team name is handled by flex gap */
  margin-right: 0;

  color: rgba(255,255,255,0.95);
  font-weight: 800;
  line-height: 1;
}
.preMatchVs{
  font-weight: 900;
  letter-spacing: 2px;
  opacity: .9;
  font-size: clamp(18px, 2.6vw, 34px);

  display:none;
}
.teamProfilePic{
  width: min(620px, 86%);
  max-width: 620px;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 16px 28px rgba(0,0,0,.22);
  opacity: .96;
}
@media (max-width: 900px){
  .preMatchTeams{ grid-template-columns: 1fr; }
  .preMatchVs{ display:none; 
  display:none;
}
  /* Always keep pill + name on one line (truncate name instead) */
  .preMatchTeamName{ white-space: nowrap; }
  min-width: 0;
  .teamProfilePic{
    width: min(520px, 92%);
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: contain;
  }
}


.empty{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  font-size: clamp(18px, 2.6vw, 32px);
  color: var(--muted);
}

.sbMain{
  flex:1;
  display:grid;
  /* No middle column: make team panels touch so they can be wider */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items:stretch;
  min-height: 0;
}

.teamCard{
  position: relative;
  border-radius: 26px;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18));
  box-shadow: 0 18px 38px rgba(0,0,0,.22);
  padding: clamp(16px, 2.2vw, 26px);
  min-height: 0;
  min-width: 0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap: clamp(12px, 1.8vw, 18px);

  /* Shared height so logo + score align perfectly */
  --rowH: clamp(190px, 26vh, 340px);
}

/* Accent strip above each team panel (like remote.php) */
.teamCard::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 10px;
  pointer-events:none;
  background: rgba(255,255,255,.14);
}
.teamCard.home::before{
  background: linear-gradient(90deg, rgba(48,182,245,.85), rgba(48,182,245,.35));
  border-top-left-radius: 26px;
  border-top-right-radius: 0;
}
.teamCard.away::before{
  background: linear-gradient(90deg, rgba(242,171,59,.35), rgba(242,171,59,.85));
  border-top-left-radius: 0;
  border-top-right-radius: 26px;
}

/* Remove the inner rounded corners so the two team cards meet cleanly */
.teamCard.home{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.teamCard.away{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.teamCard.home{outline: 2px solid rgba(48,181,246,.20)}
.teamCard.away{outline: 2px solid rgba(242,160,24,.08)}

/* Match started: tint team panels with brand colours (like pre-match) */
body.matchStarted .teamCard.home{
  background:
    linear-gradient(180deg, rgba(48,182,245,.32), rgba(48,182,245,.10)),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18));
  border-color: rgba(48,182,245,.30);
}
body.matchStarted .teamCard.away{
  background:
    linear-gradient(180deg, rgba(242,171,59,.32), rgba(242,171,59,.10)),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18));
  border-color: rgba(242,171,59,.28);
}

/* Make the two team panels join seamlessly in the middle */
.teamCard.home{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.teamCard.away{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.teamTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  min-width:0;
}

.teamName{
  font-weight: 900;
  font-size: clamp(26px, 3.9vw, 64px);
  line-height:1.15;
  letter-spacing:.2px;
  text-shadow: 0 18px 30px rgba(0,0,0,.30);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.teamName > span#homeName,
.teamName > span#awayName{
  display:block;
  line-height:1.15;
  padding-bottom: .10em;
  min-width: 0;
  flex: 1 1 auto;
  overflow:hidden;
  text-overflow: ellipsis;
}

.checkinPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: clamp(34px, 4.2vw, 54px);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border:1px solid var(--stroke);
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
  font-size: clamp(14px, 1.8vw, 22px);
  font-weight: 1000;
  letter-spacing: .2px;
  flex: 0 0 auto;
}

.setsWon{
  color: var(--muted);
  font-size: clamp(14px, 1.7vw, 22px);
  font-weight: 800;
  white-space:nowrap;
  text-align:right;
}
.setsWon strong{ color: var(--text); font-weight: 1000; }

.serveDot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
  flex: 0 0 auto;
}
.serveDot.on{
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(48,181,246,.18), 0 0 22px rgba(48,181,246,.35);
}

.teamBody{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 2.2vw, 30px);
  align-items:stretch;
  min-width:0;
}

/* Center the logo + points block between the team name and the bottom of the card */
.teamMid{
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  align-items:center;
}

.teamLogoWrap{
  height: var(--rowH);
  /* Keep the logo box at a 3:2 ratio */
  width: min(100%, calc(var(--rowH) * 1.5));
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  border-radius: 18px;
  border: none;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.24));
  box-shadow: none;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
}

/* Once a match has begun, make the logos slightly larger (about +10%). */
body.matchStarted .teamLogoWrap{
  height: calc(var(--rowH) * 1.10);
  width: min(100%, calc(var(--rowH) * 1.5 * 1.10));
}

.teamLogo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  opacity: .96;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

.teamScore{
  height: var(--rowH);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:0;
  overflow:hidden;
}

.points{
  margin: 0;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  font-size: min(calc(var(--rowH) * 1.10), 18vw);
  line-height: .78;
  display: inline-block;
  transform: translateY(-0.06em);
  text-align: center;
  text-shadow: 0 26px 45px rgba(0,0,0,.35);
}

/* Team card responsive: stack on narrow screens */
@media (max-width: 900px){
  .teamTop{ flex-wrap:wrap; }
  .teamName{ white-space: normal; }
  .teamBody{ grid-template-columns: 1fr; }
  .teamLogoWrap{
    height: auto;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 3 / 2;
    margin: 0 auto;
  }
  body.matchStarted .teamLogoWrap{
    max-width: 704px; /* ~10% larger */
  }
  .teamScore{ height: auto; }
  .points{ font-size: clamp(90px, 16vw, 220px); }
}
.pointsLabel{
  margin-top: 10px;
  color: var(--muted);
  font-size: clamp(12px, 1.3vw, 18px);
}

.centerCol{
  border-radius: 26px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.16);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  padding: 14px;
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
}

.vs{
  font-weight: 900;
  letter-spacing: 2px;
  opacity: .9;
  font-size: clamp(16px, 2.2vw, 28px);
}

/* Serve arrow (center) */
.serveIndicator{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 2px 0;
  color: rgba(255,255,255,.25);
}
.serveIndicator.home{ color: var(--brand); }
.serveIndicator.away{ color: var(--accent); }
.serveIndicator.none{ opacity: .45; }


.serveArrowImg{
  height: clamp(34px, 4vw, 58px);
  width: auto;
  max-width: 140px;
  display: none; /* shown by JS when serve is set */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}


.setsTable{
  border-radius: 22px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.16);
  overflow:hidden;
  box-shadow: 0 18px 38px rgba(0,0,0,.18);

  /* Make the whole area a bit taller even when content is small */
  min-height: clamp(120px, 14vh, 190px);
}

.setsTable table{
  width:100%;
  border-collapse: collapse;
}
.setsTable thead th{
  text-align:left;
  padding: 12px 14px;
  font-size: clamp(12px, 1.3vw, 16px);
  color: var(--muted);
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.10);
  letter-spacing:.3px;
  text-transform:uppercase;
}
.setsTable tbody td{
  padding: 12px 14px;
  font-size: clamp(14px, 1.6vw, 20px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.setsTable tbody tr:last-child td{border-bottom:none}
.setsTable tbody tr.active{
  background: linear-gradient(90deg, rgba(48,181,246,.18), rgba(242,160,24,.08));
}
.setsTable tbody tr.active td{
  font-weight: 900;
}


/* Compact horizontal scorecard (SET columns 1..5, rows HOME/AWAY) */
.setsCardTable{
  width:100%;
  border-collapse: collapse;
}
.setsCardTable thead th{
  padding: 8px 10px;
  text-align:center;
  font-size: clamp(13px, 1.25vw, 18px);
  color: var(--muted);
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.10);
  letter-spacing:.3px;
  text-transform:uppercase;
}
.setsCardTable .rowHead{
  text-align:left;
  width: 90px;
}
.setsCardTable tbody th{
  padding: 8px 10px;
  font-size: clamp(14px, 1.35vw, 19px);
  color: rgba(255,255,255,.85);
  text-transform:uppercase;
  letter-spacing:.3px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.setsCardTable td{
  padding: 8px 10px;
  text-align:center;
  font-size: clamp(32px, 3.4vw, 40px) !important;
  font-weight: 900;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-left: 1px solid rgba(255,255,255,.06);
}
.setsCardTable tbody tr:last-child th,
.setsCardTable tbody tr:last-child td{ border-bottom:none; }

.setsCardTable td.win{
  font-weight: 900;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.10);
}
.setsCardTable td.win.homeWin{
  background: #30b6f5;
  color: #061321;
}
.setsCardTable td.win.awayWin{
  background: #f2ab3b;
  color: #241300;
}

/* Make the footer take less space */
.setsTable{
  margin-top: 12px;
}

@media (max-width: 900px){
  .sbMain{grid-template-columns: 1fr}
  .centerCol{display:none}
  .teamName{white-space:normal}
  /* When stacked, restore rounded corners on all sides */
  .teamCard.home,
  .teamCard.away{
    border-top-left-radius: 26px;
    border-top-right-radius: 26px;
    border-bottom-left-radius: 26px;
    border-bottom-right-radius: 26px;
  }
}


.rotateBadge{
  margin-left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: clamp(10px, 1.1vw, 14px);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.06);
  animation: rotatePulse .9s ease-in-out infinite;
}
@keyframes rotatePulse{
  0%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.05); opacity: .95; }
  100%{ transform: scale(1); opacity: 1; }
}


/* --- Header layout (court left, time added, meta centered, equal-width small pills) --- */
.sbHeader{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.sbHeaderSide{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sbHeaderLeft{ justify-content: flex-start; }
.sbHeaderRight{ justify-content: flex-end; }

.pill.pillSmall{
  width: 140px;
  justify-content: center;
  text-align: center;
}
body.matchStarted .sbHeader .pill.pillSmall{ width: 160px; }


.pill.pillMeta{
  justify-self: center;
  max-width: 70vw;
  text-align: center;
}

/* --- Match-started second row (checked-in pills) --- */
.sbSubHeader{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 0 16px;
}
.sbSubHeader .subGroup{
  display:flex;
  align-items:center;
  gap: 14px;
}
.sbSubHeader .subGroup.left{ justify-content:flex-start; }
.sbSubHeader .subGroup.right{ justify-content:flex-end; }

.pillSetsWon{
  width: 260px;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .03em;
}
.pillSetsWon strong{
  font-weight: 900;
}



.pill.pillSmall.pillSetsWon{
  width: 280px;
  justify-content: center;
  text-align: center;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  letter-spacing: .03em;
}
.pill.pillSmall.pillCheckin{
  width: 260px;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .03em;
}

#homeCheckedInBar{ justify-self: start; }
#awayCheckedInBar{ justify-self: end; }

/* Center VS + serve arrow in the sub-header row */

body.matchStarted .vsBar .pillVs,
body.matchStarted .vsBar .pillServe{
  padding: 12px 16px;
}
.vsBar{
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.vsBar .vsRow{
  display: grid;
    grid-template-columns: 200px 140px 200px; /* left serve pill slot | VS | right serve pill slot */
  align-items: center;
  justify-items: center;
  column-gap: 12px;
}

.pill.pillSmall.pillVs{
  width: 140px; /* keep consistent with other small pills */
  letter-spacing: .12em;
}

.serveSlot{
  width: 200px; /* must match grid column to keep VS locked center */
  display: flex;
  align-items: center;
  justify-content: center;
}

.pill.pillSmall.pillServe{
  width: 200px;
  text-align: center;
  letter-spacing: .10em;
  font-weight: 1000;
  visibility: hidden; /* shown by JS */
}

.pill.pillSmall.pillServe.home{
  background: rgba(48,181,246,.18);
  border-color: rgba(48,181,246,.28);
}

.pill.pillSmall.pillServe.away{
  background: rgba(242,160,24,.20);
  border-color: rgba(242,160,24,.30);
}

.pill.pillSmall.pillServe.rotate{
  animation: rotatePulse .9s ease-in-out infinite;
}

/* --- v21: Make top two header rows easier to read from a distance --- */
body.matchStarted .sbHeader .pill,
body.matchStarted .sbHeader .matchMeta,
body.matchStarted .sbSubHeader .pill{
  font-size: clamp(16px, 2.0vw, 24px);
  line-height: 1.15;
}

body.matchStarted .sbHeader .pill{
  padding: 12px 16px;
}

body.matchStarted .sbSubHeader .pill{
  padding: 12px 16px;
}

body.matchStarted .sbSubHeader{
  padding: 12px 0 18px;
}
/* --- v22: Header pills background colour --- */
/* All pills in the top two rows should use the dark brand background, except SERVING / ROTATE pills. */
body.matchStarted .sbHeader .pill:not(.pillServe):not(.rotateBadge),
body.matchStarted .sbSubHeader .pill:not(.pillServe):not(.rotateBadge),
body.matchStarted .sbHeader .matchMeta{
  background: #001679;
}