:root {
  --bg: #0b1220;
  --bg-card: #141f33;
  --bg-tile: #1b2942;
  --accent: #d4f000;
  --accent-dark: #a8c000;
  --danger: #ff5a5a;
  --warn: #ffb84d;
  --text: #f4f7fb;
  --text-dim: #9fb0c9;
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  /* svh (not dvh) deliberately - dvh tracks Safari's address/tab bar as it
     auto-hides and reappears on scroll/tap, so a dvh-based full-height
     layout visibly resizes on every touch (the court diagram's aspect-ratio
     box growing/shrinking with it looks like an unwanted zoom, and content
     can get clipped when it shrinks back). svh is pinned to the smallest
     size (chrome fully shown) and never changes, trading a little unused
     space when the chrome is hidden for a layout that stays put. */
  height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 20px;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
}

#top-nav {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid #24314c;
  flex: 0 0 auto;
}

.nav-home {
  color: var(--accent);
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 700;
}

#app {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 24px;
  width: 100%;
  max-width: min(760px, 94vw);
  margin: 0 auto;
}

/* On a landscape tablet (this app is mounted courtside on phones AND
   tablets), the 760px cap tuned for phone-width reading leaves a huge dead
   margin on both sides instead of using the extra width - widen the cap
   once there's real landscape width to give it. Gated on both orientation
   and min-width so phone landscape (short edge as height) doesn't also
   balloon to this. */
@media (orientation: landscape) and (min-width: 900px) {
  #app {
    max-width: min(1200px, 94vw);
  }
}

h1 {
  font-size: 2.4rem;
  margin: 0.2em 0 0.4em;
}

h2 {
  font-size: 1.8rem;
}

h3.group-heading {
  font-size: 1.2rem;
  color: var(--text-dim);
  margin-top: 1.6em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

p.hint {
  color: var(--text-dim);
  font-size: 1.05rem;
}

/* Page title + its instruction line sharing one row instead of stacking, to
   reclaim the vertical space a separate hint paragraph used to take. */
.title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.title-hint {
  margin: 0;
  text-align: right;
}

.hint-italic {
  font-style: italic;
}

p.hint-error {
  color: var(--danger);
  font-weight: 600;
}

a {
  color: var(--accent);
}

/* Home grid */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.tile {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 32px 16px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 1.3rem;
  font-weight: 700;
  border: 2px solid transparent;
  transition: transform 0.1s ease, border-color 0.1s ease;
}

.tile:active {
  transform: scale(0.97);
}

.tile-primary {
  background: var(--accent);
  color: #0b1220;
}

.tile-icon {
  font-size: 3rem;
}

.tile-sublabel {
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.75;
}

/* Buttons */
.btn {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 14px;
  border: none;
  background: var(--bg-tile);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--accent);
  color: #0b1220;
}

.btn-secondary {
  background: #2a4a6b;
  color: var(--text);
}

.btn-danger {
  background: var(--danger);
  color: #2a0000;
}

.btn-small {
  font-size: 0.9rem;
  padding: 8px 14px;
}

.btn-large {
  font-size: 1.5rem;
  padding: 22px 32px;
  flex: 1 1 auto;
}

.action-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  flex: 0 0 auto;
}

/* Inputs */
.input {
  font-size: 1.1rem;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #24314c;
  background: var(--bg-tile);
  color: var(--text);
  width: 100%;
}

.stepper-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
  margin: 20px 0;
}

/* Sized way up now that the stepper is the only way to log a result (voice
   input is disabled here until it's reliable) - big enough to hit
   confidently without looking, from across the court. */
.stepper-btn {
  font-size: 4rem;
  font-weight: 800;
  padding: 0 48px;
  min-height: 140px;
  border-radius: 24px;
  background: var(--accent);
  color: #0b1220;
  line-height: 1;
}

.stepper-input {
  flex: 0 0 auto;
  width: 110px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
}

/* Custom stepper buttons replace the native number spinner, which only
   ever shows on mouse hover and often doesn't appear at all on touch
   devices - not usable on a phone mounted courtside. */
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stepper-input {
  -moz-appearance: textfield;
}

textarea.input {
  font-family: inherit;
  resize: vertical;
}

.add-row {
  display: flex;
  gap: 10px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.add-row .input {
  flex: 1;
  min-width: 160px;
}

.add-row-wide .input {
  min-width: 200px;
}

form label {
  display: block;
  margin-bottom: 14px;
  color: var(--text-dim);
  font-size: 0.95rem;
}

form label .input,
form label textarea,
form label select {
  margin-top: 6px;
}

.form-inline {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.form-inline label {
  flex: 1;
  min-width: 140px;
}

/* Lists */
.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

/* End-of-session results table: drills down the rows, players across the
   columns, so a coach can scan one player's whole session left-to-right or
   compare players on one drill top-to-bottom. Horizontally scrollable as a
   safety net for a 4-player session with long drill names, rather than
   truncating either and losing information. */
.results-table-wrap {
  overflow-x: auto;
  margin: 4px 0 12px;
}

.results-table {
  border-collapse: collapse;
  width: 100%;
}

.results-table th,
.results-table td {
  padding: 10px 14px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid #24314c;
}

.results-table th {
  color: var(--text);
  font-weight: 800;
  font-size: 0.95rem;
  border-bottom: 2px solid var(--accent);
}

.results-table td.results-table-drill,
.results-table th:first-child {
  text-align: left;
  white-space: normal;
}

.results-table td.results-table-drill {
  font-weight: 600;
  color: var(--text);
}

.results-table tbody tr:nth-child(even) {
  background: var(--bg-tile);
}

.list-row {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.list-row-main {
  flex: 1;
}

.list-row-sub {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-top: 4px;
}

.list-row-actions {
  display: flex;
  gap: 8px;
}

/* .list/.list-row is shared with the Players and Drills browsing screens,
   which are fine at normal text size - but this is the per-drill results
   readout shown mid-session, same "readable from across the court" bar as
   the rest of the session runner (player-value, drill-countdown, etc.), so
   it needs its own larger size rather than inheriting the browsing-list
   default. */
.results-recorded-row {
  font-size: 1.7rem;
  font-weight: 800;
  padding: 18px 22px;
  /* .list-row-main's flex:1 pushes the value to the row's far edge - fine
     on a phone-width card, but on a wider one (desktop, landscape tablet)
     that stretches a one-word name and a one-digit value apart across the
     full card width, reading as a giant, disconnected gap. Capping the row
     keeps name and value close together regardless of how wide the card
     itself gets. */
  max-width: 480px;
}

/* Player performance cards (Players screen) */
.player-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.player-card-name {
  font-size: 1.3rem;
  font-weight: 800;
}

.player-card-meta {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.player-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.bar-row .bar-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 3px;
}

.bar-row .bar-label-row span:last-child {
  font-weight: 800;
  color: var(--text);
}

.bar-bg {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-tile);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
}

.bar-fill.weak {
  background: var(--danger);
}

.bar-fill.mid {
  background: var(--warn);
}

.bar-fill.strong {
  background: var(--accent);
}

.bests-list {
  margin-top: 6px;
}

.bests-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 6px 0;
  border-bottom: 1px solid #24314c;
}

.bests-row:last-child {
  border-bottom: none;
}

.bests-row span:last-child {
  color: var(--accent);
  font-weight: 800;
}

.player-card-actions {
  margin-top: 12px;
  text-align: right;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}

.tab {
  background: var(--bg-card);
  color: var(--text-dim);
  border: none;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.tab-active {
  background: var(--accent);
  color: #0b1220;
}

/* Checkboxes */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

/* Skills step: reuses the .area-section/.area-section-header styling below
   (Today's Drills) so both steps open a hierarchy level the same way. */
.skill-groups {
  margin-top: 6px;
}

/* Whole-tile toggle chip: tap anywhere on the box to select it. The
   underlying checkbox stays in the DOM (for label semantics/state) but is
   visually hidden - the tile itself shows selection via its background. */
.checkbox-row {
  position: relative;
  background: var(--bg-tile);
  border: 2px solid transparent;
  padding: 8px 12px;
  border-radius: 14px;
  height: 78px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.checkbox-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkbox-row:has(input:checked) {
  background: var(--accent);
  color: #0b1220;
  border-color: var(--accent-dark);
}

/* Small performance badge overlaid in the corner of a tile (e.g. Focus
   categories), showing today's participating players' current standing. */
.kpi-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: #0b1220;
}

.kpi-badge.weak {
  color: var(--danger);
}

.kpi-badge.mid {
  color: var(--warn);
}

.kpi-badge.strong {
  color: var(--accent);
}

.kpi-badge.neutral {
  color: var(--text-dim);
}

.all-btn-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.kpi-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 4px 0 10px;
}

.kpi-legend span::before {
  content: "●";
  margin-right: 4px;
}

.kpi-legend .weak::before {
  color: var(--danger);
}

.kpi-legend .mid::before {
  color: var(--warn);
}

.kpi-legend .strong::before {
  color: var(--accent);
}

.kpi-legend .neutral::before {
  color: var(--text-dim);
}

/* Large variant: for short lists (2-4 players) where each choice is a
   frequent, critical tap - e.g. a phone mounted courtside. Tiles are much
   bigger than the compact grid used for longer lists like Focus. */
.checkbox-grid-large {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 10px 0;
}

.checkbox-grid-large .checkbox-row {
  height: auto;
  min-height: 130px;
  font-size: 1.6rem;
  border-radius: 20px;
}

/* Full-width toggle rows for longer-text lists (e.g. drill names) where a
   multi-column tile grid wouldn't read well. Same tap-to-select behavior:
   deselecting removes it, no separate Remove button needed. */
.toggle-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

.toggle-list-row {
  position: relative;
  background: var(--bg-tile);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.toggle-list-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* One line per drill: name truncates instead of wrapping so it never grows
   past one line; duration sits right next to the selection circle so times
   form a scannable column down the right edge. */
.toggle-list-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toggle-list-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.toggle-list-duration {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-dim);
  min-width: 3.2em;
  text-align: right;
}

.toggle-list-row:has(input:checked) .toggle-list-duration {
  color: #0b1220;
  opacity: 0.75;
}

/* A drill listed again under a second skill it also serves - deliberately
   not a checkbox row, so it doesn't read as a separate selectable item. */
.toggle-list-row-dup {
  padding: 12px 20px;
  border-radius: 14px;
  border: 2px dashed #24314c;
  color: var(--text-dim);
  font-size: 0.9rem;
  font-style: italic;
}

.area-sections {
  margin-top: 18px;
}

.area-section {
  margin: 0 0 16px;
  padding-top: 14px;
  border-top: 1px solid #24314c;
}

.area-section-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.area-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Sequential position in the (weakest-first) review order - a plain count
   reads faster than a fold arrow ever did, and there's nothing left to
   fold: areas no longer expand/collapse, "Edit" replaces that entirely. */
.area-number {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #0b1220;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
}

.area-title {
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--text);
}

.area-time {
  font-weight: 600;
  color: var(--text-dim);
  font-size: 1rem;
}

/* Skill sub-level nested inside an expanded Skill Area: sized and weighted
   between the Area title above it and the Drill rows below it, with a left
   border to read as visually nested rather than a sibling section. Drill
   rows get extra indent on top of this so the Area > Skill > Drill depth is
   visible at a glance, not just implied by type size. */
.skill-subsection {
  margin: 14px 0 14px 4px;
  padding-left: 32px;
  border-left: 3px solid #24314c;
}

.skill-subsection .toggle-list {
  padding-left: 24px;
}

.skill-subtitle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.skill-subtitle-text {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
}

.skill-sub-time {
  font-weight: 600;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* Read-only stand-in for .toggle-list-row (no checkbox) - used outside Edit
   mode, where the list is a summary of what's already selected, not
   something you can tap to change. Same accent-filled look as a selected
   row so it reads as "this is in your plan" without implying it's tappable
   the way a real checkbox row does. */
.plan-drill-row {
  background: var(--accent);
  color: #0b1220;
  border-radius: 14px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
}

.plan-drill-row .toggle-list-duration {
  color: #0b1220;
  opacity: 0.75;
}

.plan-empty-hint {
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.95rem;
  margin: 0 0 8px;
}

.area-edit-btn {
  flex: 0 0 auto;
  padding: 8px 18px;
  font-size: 0.95rem;
}

.duration-total {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 4px 0 12px;
  flex: 0 0 auto;
}

.duration-total .over {
  color: var(--warn);
}

.duration-total .under {
  color: var(--text-dim);
}

.duration-total .ontarget {
  color: var(--accent);
}

.toggle-list-row:has(input:checked) {
  background: var(--accent);
  color: #0b1220;
  border-color: var(--accent-dark);
}

/* Badges */
.badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.badge {
  background: var(--bg-tile);
  color: var(--text-dim);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
}

/* Overlay / modal forms */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 24px;
  z-index: 100;
}

.overlay-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 640px;
  width: 100%;
}

/* Session runner */
.runner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.runner-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}

.runner-home-link {
  font-size: 1.8rem;
  text-decoration: none;
  opacity: 0.55;
  padding: 6px 10px 6px 0;
  line-height: 1;
}

.runner-home-link:active {
  opacity: 1;
}

/* Sits in the header (see runner-header) so it's in the same spot no
   matter which step is showing - the one consistent signal that voice
   commands are live, instead of each step needing its own indicator (or
   worse, none at all outside the results screen's own mic UI). */
.voice-indicator {
  display: none;
  align-self: center;
  font-size: 2.4rem;
  line-height: 1;
  animation: voice-indicator-pulse 1.4s ease-in-out infinite;
}

/* More pronounced than mic-icon's plain opacity blink (mic-blink) - this
   one's meant to catch a coach's eye from across the court at a glance,
   not just be noticeable up close, so it also grows/shrinks a little. */
@keyframes voice-indicator-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.15);
  }
}

/* Overlaid on the current step's card (top-right corner) rather than
   taking up its own row - this element never moves in the DOM (still a
   plain child of runner-header, same as home-link/voice-indicator), it's
   purely positioned on top of the card below it. .runner (its nearest
   positioned ancestor) is what top/right are measured from - top accounts
   for runner-header's own height plus the card's top padding, right
   matches the card's own right padding, so it visually lands in that
   corner regardless of which step is showing. */
.session-timer {
  position: absolute;
  top: 64px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.05;
  z-index: 2;
}

.timer-elapsed {
  color: var(--accent);
  font-size: 3.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.timer-clock {
  color: var(--text-dim);
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.step-flow {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.drill-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px 24px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.drill-card h1 {
  margin: 0.1em 0 0.2em;
}

.step-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  overflow-y: auto;
  /* Wide enough to grab with a finger on a courtside touchscreen, not just
     a mouse pointer. */
  scrollbar-width: auto;
  scrollbar-color: var(--text-dim) var(--bg-tile);
}

/* Opt-out of the centering above for steps whose content should read
   top-down under the heading (e.g. a results list) instead of floating in
   the middle of the card's full height. */
.step-body-top {
  justify-content: flex-start;
}

.step-body::-webkit-scrollbar {
  width: 16px;
}

.step-body::-webkit-scrollbar-track {
  background: var(--bg-tile);
  border-radius: 8px;
}

.step-body::-webkit-scrollbar-thumb {
  background: var(--text-dim);
  border-radius: 8px;
  border: 3px solid var(--bg-tile);
}

.drill-progress {
  color: var(--text-dim);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.feeder-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0;
  flex: 0 0 auto;
}

.feeder-line {
  background: var(--accent);
  color: #0b1220;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 10px 16px;
  border-radius: 12px;
  display: inline-block;
}

/* Feeder's own countdown - same visual weight as the main drill-countdown
   (literally the same class, reused), stacked under its own name label the
   same way the drill's h1 name sits above the main one, instead of a small
   side note easy to glance past. */
.feeder-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.feeder-name-label {
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
}

.player-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin: 0;
}

.player-tile {
  background: var(--bg-tile);
  border-radius: var(--radius);
  padding: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.player-name {
  font-size: 1.1rem;
  font-weight: 700;
}

.player-value {
  font-size: 6rem;
  font-weight: 800;
  color: var(--accent);
  min-width: 1.4em;
  text-align: center;
  line-height: 140px;
}

.mic-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  flex: 0 0 auto;
}

.mic-icon {
  font-size: 4rem;
  opacity: 0.35;
}

.mic-icon.mic-live {
  animation: mic-blink 1s ease-in-out infinite;
}

@keyframes mic-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.mic-status {
  color: var(--text-dim);
  font-size: 1rem;
}

/* Drill countdown - big enough to read from across the court. A 5-char
   "12:00" needs more width than the card's own text padding allows on a
   phone-width screen, so this bleeds out into the card's side padding
   (negative margin) to claim the full card width, then scales with the
   viewport via clamp() so it keeps growing on larger phones/tablets
   instead of topping out at a size only a narrow phone can safely fit. */
.drill-countdown {
  font-size: clamp(4.5rem, calc(32vw - 16px), 12rem);
  font-weight: 800;
  color: var(--accent);
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin: 12px -24px;
  padding: 0 10px;
  flex: 0 0 auto;
}

/* Result collection: one player at a time. */
.collect-title {
  text-align: center;
}

.collect-unit-hint {
  color: var(--text-dim);
  font-size: 1rem;
  text-align: center;
  margin: -0.6em 0 0.6em;
}

.collect-progress {
  color: var(--text-dim);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  flex: 0 0 auto;
}

/* Court diagram */
.court-wrap {
  flex: 1 1 auto;
  min-height: 0;
  align-self: center;
  aspect-ratio: 700 / 360;
  max-width: 100%;
  max-height: 100%;
  margin: 16px auto;
}

@media (orientation: portrait) {
  .court-wrap {
    aspect-ratio: 340 / 740;
  }
}

/* A fed drill's Active step already has the big drill-countdown claiming
   most of the screen - this sits alongside it as a supporting visual (who's
   feeding right now), not the main event, so it's capped small instead of
   flex-filling the remaining space like the Setup step's full-size one. */
.court-wrap-compact {
  flex: 0 0 auto;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 700 / 360;
  max-height: 30vh;
  margin: 4px auto;
}

@media (orientation: portrait) {
  .court-wrap-compact {
    max-width: 220px;
    aspect-ratio: 340 / 740;
    max-height: 34vh;
  }
}

.court-diagram {
  width: 100%;
  height: 100%;
  display: block;
}

/* KPI question banner */
.kpi-question {
  background: var(--bg-tile);
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
  flex: 0 0 auto;
}

.kpi-question-icon {
  font-size: 1.6rem;
}