/* The league court drawing (shared by the live tracker, dashboard and View/Edit)
   and the live court stage: the stretched court box, shot markers and the
   on-court selector arcs. Geometry is drawn in feet by app/court.js; this file
   only styles it.

   The floor is a near-black plank surface in both themes; lines are the
   off-white court line token and the rim is the orange opponent-miss token.
   Floor shades are declared once here (they are not theme colours). */
.court.league-court {
  --court-floor: #121110;
  --court-floor-plank: #1b1918;
  --court-floor-paint: #1d1b1a;
  --court-rim: var(--mark-def-miss);
  --court-stroke: var(--court-line);
}
.court.league-court .court-floor-base { fill: var(--court-floor); }
.court.league-court .court-plank { stroke: var(--court-floor-plank); stroke-width: 0.05px; }
.court.league-court #court-floor .court-shell { stroke: none; opacity: 1; }
.court.league-court #court-floor .court-paint { fill: var(--court-floor-paint); opacity: 1; stroke: none; }

/* Lines: square caps, one crisp non-scaling stroke at any size. */
.court.league-court #court-markings > .court-line {
  fill: none;
  stroke: var(--court-stroke);
  stroke-width: 2.25px;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  opacity: 1;
}
.court.league-court #court-markings > .court-restricted { stroke-width: 1.5px; opacity: 0.8; }
.court.league-court #court-markings > .court-hash { stroke-width: 1.75px; }
.court.league-court #court-markings > .court-ft-circle-inner { stroke-dasharray: 8 7; stroke-linecap: butt; }
.court.league-court #court-markings > .court-deep { stroke-width: 1.25px; stroke-dasharray: 3 7; stroke-linecap: butt; opacity: 0.32; }
.court.league-court #court-markings > .court-backboard { stroke-width: 4px; }
.court.league-court #court-markings > .court-stem { stroke-width: 1.75px; }
.court.league-court #court-markings > .court-rim { stroke: var(--court-rim); stroke-width: 2.5px; }
.court.league-court #court-markings > .court-block { fill: var(--court-stroke); stroke: none; }

/* Faint small-caps distance labels. */
.court.league-court .court-distance {
  fill: var(--court-line);
  opacity: 0.32;
  font-family: var(--font-display);
  font-size: 0.95px;
  font-weight: 700;
  letter-spacing: 0.1px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
/* Region numbers and the hover tint read against a dark floor. */
.court.league-court .label { fill: var(--court-line); }
.court.league-court .region:hover { fill: color-mix(in srgb, var(--court-line) 10%, transparent); }
.court.league-court .region.active { fill: color-mix(in srgb, var(--brand-ink) 24%, transparent); }
.court.league-court .pending-v2 { fill: none; stroke: var(--court-line); stroke-width: 0.2px; }

/* ---------------------------------------------------------------- live court stage */
.lv-court-slot {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  container-type: size;
}
/* Fixed geometry: only the slot's size decides the court box (the court is the
   league ratio stretched ~1.15 horizontally); selectors never take layout space. */
.lv-court {
  --lv-ratio: 1.2;
  position: relative;
  width: min(100cqw, calc(100cqh * var(--lv-ratio)));
  aspect-ratio: var(--lv-ratio);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--line);
}
/* Whose ball: the court border takes the side colour. */
.lv-court[data-side="offense"] { box-shadow: 0 0 0 2px var(--lv-us, var(--brand-ink)); }
.lv-court[data-side="defense"] { box-shadow: 0 0 0 2px var(--lv-opp, var(--defense)); }
.lv-court[data-side="defense"] .lv-court-watermark { color: color-mix(in srgb, var(--defense) 9%, transparent); }
.lv-court > .court { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.lv-court .region { cursor: pointer; }
.lv-court.is-locked .region { cursor: default; }
.lv-court .region.is-unavailable { fill: color-mix(in srgb, #000 55%, transparent); cursor: not-allowed; }
.lv-court .region.is-unavailable:hover { fill: color-mix(in srgb, #000 55%, transparent); }
.lv-court.is-locked .region:hover { fill: transparent; }
.lv-court-watermark {
  position: absolute;
  inset: auto 0 6% 0;
  text-align: center;
  font: 700 clamp(48px, 10cqw, 120px) / 1 var(--font-display);
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--court-line) 5%, transparent);
  pointer-events: none;
  user-select: none;
}
/* Our shots: green make / red miss; opponent: blue / orange (tokens). */
.lv-court .marker-off-make { fill: var(--mark-make); stroke: var(--court-floor); stroke-width: 0.14px; }
.lv-court .marker-def-make { fill: var(--mark-def-make); stroke: var(--court-floor); stroke-width: 0.14px; }
.lv-court .marker-off-miss path { stroke: var(--mark-miss); stroke-width: 2px; fill: none; vector-effect: non-scaling-stroke; }
.lv-court .marker-def-miss path { stroke: var(--mark-def-miss); stroke-width: 2px; fill: none; vector-effect: non-scaling-stroke; }

/* ---------------------------------------------------------------- selector arcs */
.lv-arc {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.lv-arc > * { pointer-events: auto; }
.lv-arc-stems { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.lv-arc-stems line { stroke: color-mix(in srgb, var(--court-line) 55%, transparent); stroke-width: 1.5; stroke-linecap: round; }
.lv-choice, .lv-bubble, .lv-chip {
  font: inherit;
  color: var(--ink);
}
.lv-choice {
  position: absolute;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 4px 6px;
  border: 1.5px solid var(--lv-tone, var(--line-strong));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--lv-tone, var(--line-strong)) 22%, var(--surface));
  font-weight: 700;
  font-size: calc(14px * var(--lv-arc-scale, 1));
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 6px 18px #00000066;
  cursor: pointer;
  transition: transform var(--dur, 0.12s) var(--ease, ease), background var(--dur, 0.12s) var(--ease, ease);
}
.lv-choice:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--lv-tone, var(--line-strong)) 38%, var(--surface)); }
.lv-choice[aria-pressed="true"] { background: var(--lv-tone, var(--brand)); color: var(--on-brand); }
.lv-choice small { display: block; font-size: 0.72em; font-weight: 500; opacity: 0.8; }
.lv-choice kbd { position: absolute; top: 2px; right: 4px; font: 600 10px var(--font-mono, monospace); opacity: 0.7; background: none; border: 0; padding: 0; }
.lv-choice.is-major { font-size: calc(19px * var(--lv-arc-scale, 1)); }
.lv-choice.is-minor { font-size: calc(12px * var(--lv-arc-scale, 1)); font-weight: 600; }
.lv-choice.tone-make { --lv-tone: var(--mark-make); }
.lv-choice.tone-miss { --lv-tone: var(--mark-miss); }
.lv-choice.tone-gold { --lv-tone: var(--warning); }
.lv-choice.tone-neutral { --lv-tone: var(--line-strong); }
.lv-choice.tone-us { --lv-tone: var(--brand-ink); }
.lv-choice.tone-opp { --lv-tone: var(--defense); }
.lv-choice:focus-visible, .lv-chip:focus-visible, .lv-bubble:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lv-bubble {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px #00000066;
}
button.lv-bubble { cursor: pointer; }
.lv-bubble small { font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 0.8; }
.lv-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 8px;
  max-width: 94%;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-pop);
}
.lv-card h3 { margin: 0; font: 700 15px var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.lv-card .lv-card-grid { display: grid; grid-template-columns: repeat(var(--lv-card-cols, 3), minmax(112px, 1fr)); gap: 8px; }
.lv-card .lv-bubble { position: relative; justify-self: center; }
.lv-card .lv-choice { position: relative; min-height: 48px; }
.lv-card ul { margin: 0; padding-left: 18px; color: var(--ink-muted); font-size: 13px; }
.lv-chips {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 94%;
  pointer-events: auto;
}
.lv-chip {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.lv-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.lv-chip-group { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lv-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
.lv-chip .lv-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; min-width: 0; border-radius: 0; }
.lv-chips .lv-chip-label { align-self: center; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
/* A game card over the court (between periods). */
.lv-court-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 22px 30px;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-pop);
}
.lv-court-card h3 { margin: 0; font: 700 22px var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.lv-court-card p { margin: 0; color: var(--ink-muted); max-width: 34ch; }

/* The 5-second drain of an optional question. */
.lv-drain { display: block; height: 3px; width: 100%; min-width: 48px; overflow: hidden; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 16%, transparent); }
.lv-drain::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--brand-ink);
  transform-origin: left center;
  animation: lv-drain var(--lv-drain-ms, 5000ms) linear var(--lv-drain-delay, 0ms) forwards;
}
.lv-root.is-paused .lv-drain::after { animation-play-state: paused; }
@keyframes lv-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .lv-choice { transition: none; }
}
.lv-chip[data-late] { opacity: 0; animation: lv-show 0s linear 450ms forwards; }
@keyframes lv-show { to { opacity: 1; } }
.lv-choice { overflow: hidden; min-width: 0; }
.lv-choice-label, .lv-choice small, .lv-bubble strong, .lv-bubble small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-bubble { max-width: 100%; overflow: hidden; }
.lv-chip { max-width: 100%; }

/* The optional-questions fan */
.lv-fan-block { position: absolute; display: grid; align-content: center; gap: 4px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 6px 18px #00000066; overflow: hidden; }
.lv-fan-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 10px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.lv-fan-chips { display: grid; gap: 4px; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.lv-fan-block[data-cols="1"] .lv-fan-chips { --cols: 1; }
.lv-fan-block[data-area="left"] .lv-fan-chips { --cols: 2; }
.lv-fan-block[data-area="right"] .lv-fan-chips { --cols: 1; }
.lv-fan-block[data-area="top"] .lv-fan-chips { --cols: 2; }
.lv-fan-block[data-area="bottom"] { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 3px 6px; background: none; border: 0; box-shadow: none; overflow: visible; }
.lv-fan-chips .lv-chip { min-height: 26px; padding: 0 8px; font-size: 12px; }
.lv-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lv-fan-block[data-area="bottom"] .lv-chip { min-height: 28px; }