/*
  Drop Shot components. Requires tokens.css.
  Blocks prefixed ds- (ds-board), elements (ds-board__row), modifiers
  (ds-btn--primary), states (is-you, is-serving, is-win). See docs/design.md.
*/

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.ds {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ds-paper-1);
  color: var(--ds-ink-1);
  font: 400 var(--ds-fs-body)/var(--ds-lh-body) var(--ds-font);
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ds-court); }
:focus-visible { outline: 3px solid var(--ds-court); outline-offset: 2px; }
.ds-masthead :focus-visible, .ds-board :focus-visible { outline-color: var(--ds-ball); }

.ds-num { font-variant-numeric: tabular-nums; }
.ds-muted { color: var(--ds-ink-3); }
.ds-nowrap { white-space: nowrap; }

/* ------------------------------------------------------------------ layout */
.ds-page {
  flex: 1;
  width: 100%;
  max-width: var(--ds-page-max);
  margin: 0 auto;
  padding: var(--ds-s5) var(--ds-gutter) var(--ds-s8);
  display: grid;
  gap: var(--ds-s7);
  align-content: start;
}
.ds-page > *, .ds-split > *, .ds-stack > *, .ds-match > * { min-width: 0; }
.ds-split { display: grid; gap: var(--ds-s6); align-items: start; }
.ds-stack { display: grid; gap: var(--ds-s5); align-content: start; }

@media (min-width: 960px) {
  .ds-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .ds-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Section head: display caps over a thick-over-thin rule */
.ds-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-s3);
  padding-top: var(--ds-s2);
  border-top: 3px solid var(--ds-ink-1);
  box-shadow: inset 0 3px 0 var(--ds-paper-1), inset 0 4px 0 var(--ds-ink-1);
  margin-bottom: var(--ds-s4);
}
.ds-head h2 {
  padding-top: var(--ds-s2);
  font-size: var(--ds-fs-h2);
  font-weight: 850;
  font-variation-settings: 'wdth' 118;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.ds-head__aside { font-size: var(--ds-fs-small); color: var(--ds-ink-3); }

.ds-label {
  font-size: var(--ds-fs-label);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ds-ink-3);
}

/* ------------------------------------------------------------------ masthead */
.ds-masthead {
  background: var(--ds-night-1);
  color: var(--ds-chalk-1);
  border-bottom: 4px solid var(--ds-line);
  box-shadow: 0 4px 0 var(--ds-court);
}
.ds-masthead__inner {
  max-width: var(--ds-page-max);
  margin: 0 auto;
  padding: var(--ds-s3) var(--ds-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-s3) var(--ds-s6);
}
.ds-wordmark {
  display: flex;
  align-items: center;
  gap: var(--ds-s2);
  color: var(--ds-chalk-1);
  text-decoration: none;
}
.ds-wordmark:hover { color: var(--ds-chalk-1); }
.ds-wordmark svg { width: 44px; height: 30px; }
.ds-wordmark span {
  font-size: 1.6rem;
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}
.ds-nav {
  display: flex;
  gap: var(--ds-s1);
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.ds-nav a {
  position: relative;
  padding: var(--ds-s2) var(--ds-s3);
  font-size: var(--ds-fs-small);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-chalk-2);
  text-decoration: none;
  white-space: nowrap;
}
.ds-nav a:hover { color: var(--ds-chalk-1); }
.ds-nav a.is-current { color: var(--ds-chalk-1); box-shadow: inset 0 -3px 0 var(--ds-ball); }
.ds-nav__count {
  display: inline-block;
  min-width: 1.5em;
  margin-left: 4px;
  padding: 0 5px;
  background: var(--ds-ball);
  color: var(--ds-night-3);
  border-radius: 999px;
  font-size: 0.7rem;
  text-align: center;
  letter-spacing: 0;
}
.ds-academy {
  font-size: var(--ds-fs-small);
  color: var(--ds-chalk-2);
  white-space: nowrap;
}
.ds-academy b { color: var(--ds-chalk-1); font-weight: 650; }

.ds-strip { background: var(--ds-night-2); color: var(--ds-chalk-2); font-size: var(--ds-fs-small); }
.ds-strip__inner {
  max-width: var(--ds-page-max);
  margin: 0 auto;
  padding: 6px var(--ds-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s1) var(--ds-s5);
}
.ds-strip b { color: var(--ds-chalk-1); font-weight: 600; }
.ds-strip__live::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ds-ball);
  box-shadow: 0 0 6px var(--ds-ball);
  vertical-align: 1px;
}

/* ------------------------------------------------------------------ page title */
.ds-title { display: grid; gap: var(--ds-s1); }
.ds-title h1 {
  font-size: var(--ds-fs-h1);
  font-weight: 900;
  font-variation-settings: 'wdth' 120;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.005em;
}
.ds-title p { color: var(--ds-ink-2); }

/* ------------------------------------------------------------------ surface chip */
.ds-surface {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ds-fs-label);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-ink-2);
  white-space: nowrap;
}
.ds-surface::before {
  content: '';
  width: 14px; height: 10px;
  background: var(--ds-court);
  box-shadow: inset 0 0 0 1.5px var(--ds-line), 0 0 0 1px var(--ds-surround);
}
.ds-surface--clay::before { background: var(--ds-clay); box-shadow: inset 0 0 0 1.5px var(--ds-line), 0 0 0 1px #8f411d; }
.ds-surface--grass::before { background: var(--ds-grass); box-shadow: inset 0 0 0 1.5px var(--ds-line), 0 0 0 1px #2f5a20; }
.ds-surface--indoor::before { background: var(--ds-indoor); box-shadow: inset 0 0 0 1.5px var(--ds-line), 0 0 0 1px #3c3263; }

/* ------------------------------------------------------------------ buttons */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--ds-s4);
  border: 1.5px solid var(--ds-ink-1);
  border-radius: var(--ds-r-1);
  background: var(--ds-paper-0);
  color: var(--ds-ink-1);
  font: 650 var(--ds-fs-small)/1 var(--ds-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
}
.ds-btn:hover { background: var(--ds-paper-2); color: var(--ds-ink-1); }
.ds-btn--primary { background: var(--ds-ink-1); color: var(--ds-paper-0); }
.ds-btn--primary:hover { background: var(--ds-ink-2); color: var(--ds-paper-0); }

/* ------------------------------------------------------------------ the board (live / final score) */
.ds-board {
  background: var(--ds-night-1);
  color: var(--ds-chalk-1);
  border: 1px solid var(--ds-night-3);
  box-shadow: inset 0 0 0 1px var(--ds-night-edge);
}
.ds-board__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ds-s1) var(--ds-s4);
  padding: var(--ds-s2) var(--ds-s4);
  background: var(--ds-night-2);
  font-size: var(--ds-fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ds-chalk-2);
}
.ds-board__top b { color: var(--ds-ball); font-weight: 700; }
.ds-board__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.ds-board__row { display: contents; }
.ds-board__who {
  display: flex;
  align-items: center;
  gap: var(--ds-s3);
  padding: var(--ds-s3) var(--ds-s4);
  min-width: 0;
}
.ds-board__row + .ds-board__row > * { border-top: 1px solid var(--ds-night-edge); }
.ds-board__cc {
  font-size: var(--ds-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ds-chalk-2);
  width: 2.6em;
}
.ds-board__name {
  font-size: 1.25rem;
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-board__seed { color: var(--ds-chalk-2); font-weight: 500; font-size: 0.9rem; }
.ds-board__serve {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: none;
  margin-left: auto;
}
.is-serving .ds-board__serve { background: var(--ds-ball); box-shadow: 0 0 8px rgba(216, 240, 60, 0.7); }
.ds-board__sets { display: flex; }
.ds-board__set, .ds-board__game {
  display: grid;
  place-items: center;
  width: 46px;
  font-size: 1.5rem;
  font-weight: 800;
  font-variation-settings: 'wdth' 110;
  font-variant-numeric: tabular-nums;
  color: var(--ds-chalk-2);
  border-left: 1px solid var(--ds-night-edge);
}
.ds-board__set.is-won { color: var(--ds-chalk-1); }
.ds-board__set sup { font-size: 0.6em; margin-left: 1px; }
.ds-board__game {
  width: 64px;
  background: var(--ds-night-3);
  color: var(--ds-ball);
}
.is-you .ds-board__name::after {
  content: 'Yours';
  margin-left: var(--ds-s2);
  padding: 1px 6px;
  border: 1px solid var(--ds-ball);
  color: var(--ds-ball);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  vertical-align: 3px;
}

@media (max-width: 520px) {
  .ds-board__name { font-size: 1rem; }
  .ds-board__set { width: 34px; font-size: 1.15rem; }
  .ds-board__game { width: 48px; font-size: 1.15rem; }
  .ds-board__who { padding: var(--ds-s2) var(--ds-s3); gap: var(--ds-s2); }
  .is-you .ds-board__name::after { display: none; }
}

/* ------------------------------------------------------------------ the match view */
.ds-match { display: grid; gap: var(--ds-s4); }
@media (min-width: 1040px) {
  .ds-match { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}
.ds-hawkeye {
  position: relative;
  background: var(--ds-night-2);
  border: 1px solid var(--ds-night-3);
  padding: var(--ds-s2);
}
.ds-hawkeye svg { width: 100%; height: auto; }
.ds-hawkeye__call {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-s1) var(--ds-s3);
  padding: var(--ds-s2) var(--ds-s2) var(--ds-s1);
  color: var(--ds-chalk-1);
}
.ds-hawkeye__call b {
  font-size: 1.05rem;
  font-weight: 850;
  font-variation-settings: 'wdth' 115;
  text-transform: uppercase;
  color: var(--ds-ball);
}
.ds-hawkeye__call span { color: var(--ds-chalk-2); font-size: var(--ds-fs-small); }
.ds-hawkeye__controls { margin-left: auto; display: flex; gap: var(--ds-s2); }
.ds-hawkeye__controls button {
  min-height: 30px;
  padding: 0 var(--ds-s3);
  border: 1px solid var(--ds-night-edge);
  background: transparent;
  color: var(--ds-chalk-1);
  font: 650 var(--ds-fs-label)/1 var(--ds-font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.ds-hawkeye__controls button:hover { border-color: var(--ds-ball); color: var(--ds-ball); }

/* Court drawing (SVG, metres) */
.ds-court__surround { fill: var(--ds-surround); }
.ds-court__in { fill: var(--ds-court); }
.ds-court__line { stroke: var(--ds-line); stroke-width: 0.1; fill: none; }
.ds-court__net { stroke: var(--ds-net); stroke-width: 0.16; }
.ds-court__post { fill: var(--ds-net); }
.ds-court__track { stroke: var(--ds-ball); stroke-width: 0.11; fill: none; stroke-linecap: round; opacity: 0.95; }
.ds-court__track--carry { stroke-dasharray: 0.25 0.3; opacity: 0.55; }
.ds-court__bounce { fill: var(--ds-ball); stroke: var(--ds-night-3); stroke-width: 0.05; }
.ds-court__bounce--last { fill: none; stroke: var(--ds-ball); stroke-width: 0.12; }
.ds-court__ballshadow { fill: rgba(7, 15, 30, 0.45); }
.ds-court__ball { fill: var(--ds-ball); stroke: var(--ds-ball-deep); stroke-width: 0.04; }
.ds-court__player { stroke: var(--ds-line); stroke-width: 0.08; }
.ds-court__player--you { fill: var(--ds-night-1); stroke: var(--ds-ball); stroke-width: 0.12; }
.ds-court__player--opp { fill: #8a2a24; }
.ds-court__initials { fill: var(--ds-line); font: 800 0.62px var(--ds-font); text-anchor: middle; dominant-baseline: central; }
.ds-court__tag { fill: var(--ds-line); font: 700 0.55px var(--ds-font); letter-spacing: 0.04px; opacity: 0.85; }

/* Match stats: paired bars out from the middle */
.ds-stats { background: var(--ds-paper-0); border: 1px solid var(--ds-rule-1); padding: var(--ds-s4); display: grid; gap: var(--ds-s3); }
.ds-stats__head { display: flex; justify-content: space-between; font-size: var(--ds-fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ds-stat { display: grid; grid-template-columns: 3.2em 1fr 3.2em; gap: 2px var(--ds-s2); align-items: center; font-size: var(--ds-fs-data); font-variant-numeric: tabular-nums; }
.ds-stat__name { grid-column: 1 / -1; text-align: center; font-size: var(--ds-fs-label); color: var(--ds-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ds-stat__bars { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 6px; }
.ds-stat__bars i { display: block; height: 100%; background: var(--ds-rule-1); position: relative; }
.ds-stat__bars i::after { content: ''; position: absolute; top: 0; bottom: 0; width: var(--v); background: var(--ds-ink-1); }
.ds-stat__bars i:first-child::after { right: 0; background: var(--ds-court); }
.ds-stat__bars i:last-child::after { left: 0; background: var(--ds-loss); }
.ds-stat > :last-child { text-align: right; }

/* ------------------------------------------------------------------ the legal pad */
.ds-pads { display: grid; gap: var(--ds-s5); }
.ds-pad {
  position: relative;
  padding: var(--ds-s5) var(--ds-s4) var(--ds-s4) 52px;
  background-color: var(--ds-pad);
  background-image:
    linear-gradient(90deg, transparent 38px, var(--ds-pad-margin) 38px, var(--ds-pad-margin) 39.5px, transparent 39.5px, transparent 42px, var(--ds-pad-margin) 42px, var(--ds-pad-margin) 43px, transparent 43px),
    repeating-linear-gradient(180deg, transparent 0, transparent 27px, var(--ds-pad-rule) 27px, var(--ds-pad-rule) 28px);
  background-position: 0 0, 0 18px;
  box-shadow: var(--ds-shadow-pad);
  color: var(--ds-ink-1);
  /* torn top edge */
  -webkit-mask: radial-gradient(4px at 6px 0, transparent 97%, #000) -6px 0 / 12px 100% repeat-x;
  mask: radial-gradient(4px at 6px 0, transparent 97%, #000) -6px 0 / 12px 100% repeat-x;
}
.ds-pad:nth-child(even) { transform: rotate(0.35deg); }
.ds-pad:nth-child(odd) { transform: rotate(-0.25deg); }
.ds-pad__from { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--ds-s3); line-height: 28px; }
.ds-pad__from b { font-size: var(--ds-fs-label); font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.ds-pad__from span { font-size: var(--ds-fs-label); color: var(--ds-ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.ds-pad__note {
  font-family: var(--ds-font-hand);
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 28px;
  color: var(--ds-pad-ink);
}
.ds-pad__note em { font-style: normal; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ds-pad__cost { font-size: var(--ds-fs-small); line-height: 28px; color: var(--ds-ink-2); }
.ds-pad__acts { display: flex; flex-wrap: wrap; gap: var(--ds-s2); margin-top: var(--ds-s2); }
.ds-pad--info .ds-pad__acts { display: none; }

/* ------------------------------------------------------------------ your player */
.ds-player { background: var(--ds-paper-0); border: 1px solid var(--ds-rule-1); box-shadow: var(--ds-shadow-paper); }
.ds-player__top { display: flex; gap: var(--ds-s4); align-items: center; padding: var(--ds-s4); border-bottom: 1px solid var(--ds-rule-1); }
.ds-player__face { width: 72px; height: 72px; flex: none; }
.ds-player__name { font-size: 1.5rem; font-weight: 900; font-variation-settings: 'wdth' 118; text-transform: uppercase; line-height: 1.05; }
.ds-player__meta { font-size: var(--ds-fs-small); color: var(--ds-ink-2); }
.ds-player__rank { margin-left: auto; text-align: right; }
.ds-player__rank b { display: block; font-size: 2.2rem; font-weight: 900; font-variation-settings: 'wdth' 112; line-height: 1; font-variant-numeric: tabular-nums; }
.ds-player__next { display: grid; gap: 2px; padding: var(--ds-s3) var(--ds-s4); background: var(--ds-night-1); color: var(--ds-chalk-1); }
.ds-player__next .ds-label { color: var(--ds-ball); }
.ds-player__next b { font-weight: 750; font-variation-settings: 'wdth' 110; text-transform: uppercase; }
.ds-player__next span { font-size: var(--ds-fs-small); color: var(--ds-chalk-2); }
.ds-skills { display: grid; gap: var(--ds-s2) var(--ds-s5); padding: var(--ds-s4); }
@media (min-width: 560px) { .ds-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-skill { display: grid; grid-template-columns: 6.5em 2.2em 1fr; gap: var(--ds-s2); align-items: center; font-size: var(--ds-fs-data); }
.ds-skill__val { font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
/* 0-100 scale; the whisker is the coach's uncertainty */
.ds-grade { position: relative; height: 10px; background: linear-gradient(90deg, var(--ds-paper-2) 0 50%, var(--ds-rule-1) 50% calc(50% + 1px), var(--ds-paper-2) calc(50% + 1px)); }
.ds-grade__bar { position: absolute; left: 0; top: 2px; bottom: 2px; width: calc(var(--v) * 1%); background: var(--ds-court); }
.ds-grade__whisker { position: absolute; top: -1px; bottom: -1px; left: calc(var(--lo) * 1%); width: calc((var(--hi) - var(--lo)) * 1%); border-left: 1.5px solid var(--ds-ink-1); border-right: 1.5px solid var(--ds-ink-1); }
.ds-grade__whisker::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--ds-ink-1); }
.ds-player__foot { padding: 0 var(--ds-s4) var(--ds-s4); font-size: var(--ds-fs-small); color: var(--ds-ink-3); }

/* ------------------------------------------------------------------ program tables */
.ds-table-wrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-data); font-variation-settings: 'wdth' 92; font-variant-numeric: tabular-nums; }
.ds-table th {
  padding: var(--ds-s2) var(--ds-s3);
  border-bottom: 2px solid var(--ds-ink-1);
  font-size: var(--ds-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ds-ink-2);
  white-space: nowrap;
}
.ds-table td { padding: var(--ds-s2) var(--ds-s3); border-bottom: 1px solid var(--ds-rule-1); white-space: nowrap; }
.ds-table .r { text-align: right; }
.ds-table tr.is-you td { background: var(--ds-you); }
.ds-table tr:hover td { background: var(--ds-paper-2); }
.ds-table tr.is-you:hover td { background: #e3f2a6; }
.ds-table__name { font-weight: 650; }
.ds-mood { font-size: var(--ds-fs-small); }
.ds-mood--up { color: var(--ds-win); }
.ds-mood--down { color: var(--ds-loss); }

/* ------------------------------------------------------------------ the draw sheet */
/* Each match is two names on ruled lines; a bracket joins the lines and a stub runs on to the next round. */
.ds-draw { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); min-width: 820px; }
.ds-draw__round { display: flex; flex-direction: column; }
.ds-draw__round h3 { font-size: var(--ds-fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-ink-3); padding-bottom: var(--ds-s2); }
.ds-draw__slots { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.ds-draw__match { position: relative; margin: var(--ds-s3) 18px var(--ds-s3) 0; }
.ds-draw__round:last-child .ds-draw__match { margin-right: 0; }
.ds-draw__p {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 30px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ds-ink-1);
  font-size: var(--ds-fs-data);
  font-variation-settings: 'wdth' 92;
  white-space: nowrap;
}
.ds-draw__match::after {
  content: '';
  position: absolute;
  right: 0;
  top: 29px;
  height: 31px;
  border-right: 1px solid var(--ds-ink-1);
}
.ds-draw__match::before {
  content: '';
  position: absolute;
  left: 100%;
  top: 44px;
  width: 18px;
  border-top: 1px solid var(--ds-ink-1);
}
.ds-draw__round:last-child .ds-draw__match::before,
.ds-draw__round:last-child .ds-draw__match::after { display: none; }
.ds-draw__p.is-win { font-weight: 700; }
.ds-draw__p.is-you { background: var(--ds-you); }
.ds-draw__p.is-tbd { color: var(--ds-ink-3); font-style: italic; }
.ds-draw__cc { font-size: var(--ds-fs-label); color: var(--ds-ink-3); letter-spacing: 0.06em; font-weight: 500; }
.ds-draw__score { margin-left: auto; padding-right: 6px; word-spacing: 0.3em; white-space: normal; text-align: right; font-size: 0.72rem; color: var(--ds-ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.ds-draw__live { margin-left: auto; padding-right: 6px; font-size: var(--ds-fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-court); }
.ds-draw__note { margin-top: var(--ds-s3); font-size: var(--ds-fs-small); color: var(--ds-ink-3); }

/* Order of play */
.ds-oop { display: grid; gap: 0; }
.ds-oop li { display: grid; grid-template-columns: 6.5em 1fr auto; gap: var(--ds-s3); padding: var(--ds-s2) 0; border-bottom: 1px solid var(--ds-rule-1); font-size: var(--ds-fs-data); align-items: baseline; }
.ds-oop__court { font-size: var(--ds-fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-ink-2); }
.ds-oop li.is-you { background: var(--ds-you); }

/* Money tiles */
.ds-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: 1px solid var(--ds-rule-2); border-left: 1px solid var(--ds-rule-1); }
.ds-tile { padding: var(--ds-s3) var(--ds-s4); border-right: 1px solid var(--ds-rule-1); border-bottom: 1px solid var(--ds-rule-1); background: var(--ds-paper-0); }
.ds-tile b { display: block; font-size: 1.6rem; font-weight: 850; font-variation-settings: 'wdth' 110; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ds-tile .ds-win { color: var(--ds-win); }

/* Errors land here */
.ds-banner { padding: var(--ds-s3) var(--ds-s4); background: var(--ds-loss); color: #fff; font-weight: 600; }

/* Mockup only: section index */
.ds-mocknote { font-size: var(--ds-fs-small); color: var(--ds-ink-3); border-left: 3px solid var(--ds-ball-deep); padding-left: var(--ds-s3); }