:root {
  color-scheme: light;
  --app-bg: #f1f3f5;
  --app-bg-strong: #e5e7eb;
  --app-surface: rgba(255, 255, 255, 0.9);
  --app-surface-solid: #ffffff;
  --app-surface-muted: #f6f7f9;
  --app-border: rgba(31, 41, 55, 0.14);
  --app-text: #151a21;
  --app-muted: #626b77;
  --app-primary: #0f8f72;
  --app-primary-rgb: 15, 143, 114;
  --app-primary-strong: #086751;
  --app-primary-strong-rgb: 8, 103, 81;
  --app-accent: #d69a2d;
  --app-accent-rgb: 214, 154, 45;
  --app-danger: #c73d4b;
  --app-danger-rgb: 199, 61, 75;
  --app-success: #1f6b31;
  --app-success-rgb: 31, 107, 49;
  /* Action pair: the fill and the ink that stays legible on it. */
  --app-action: #1e7a4a;
  --app-action-ink: #ffffff;
  --app-action-hover: #17693f;
  --app-on-danger: #ffffff;
  --app-warning-ink: #8a5a0b;
  /* Status tints: quiet fills that still clear AA against their own ink. */
  --app-tint-success: #e3f3e8;
  --app-tint-success-ink: #14532d;
  --app-tint-danger: #fbe4e5;
  --app-tint-danger-ink: #8c1f1a;
  --app-tint-warning: #faedd4;
  --app-tint-warning-ink: #6b4708;
  --app-tint-neutral: #e9ecef;
  --app-tint-neutral-ink: #151a21;
  --app-on-dark-band: #e9ecef;
  --app-shadow: 0 18px 45px rgba(18, 41, 31, 0.12);
  --app-shadow-soft: 0 8px 22px rgba(18, 41, 31, 0.09);
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-link-color: var(--app-primary-strong);
  /* Bootstrap 5.3 paints links from the -rgb triplet; --bs-link-color alone is inert. */
  --bs-link-color-rgb: var(--app-primary-strong-rgb);
  --bs-link-hover-color: var(--app-primary);
  --bs-danger-rgb: var(--app-danger-rgb);
  --bs-warning-rgb: var(--app-accent-rgb);
  --bs-success-rgb: var(--app-success-rgb);
  --bs-border-color: var(--app-border);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.4rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-font-sans-serif: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --app-bg: #090b0f;
  --app-bg-strong: #141821;
  --app-surface: rgba(25, 29, 38, 0.9);
  --app-surface-solid: #171b23;
  --app-surface-muted: #202631;
  --app-border: rgba(226, 232, 240, 0.14);
  --app-text: #f2f5f9;
  --app-muted: #a7b0bd;
  --app-primary: #28c59c;
  --app-primary-rgb: 40, 197, 156;
  --app-primary-strong: #6ee7c6;
  --app-primary-strong-rgb: 110, 231, 198;
  --app-accent: #f0b84c;
  --app-accent-rgb: 240, 184, 76;
  --app-danger: #ff6f7b;
  --app-danger-rgb: 255, 111, 123;
  --app-success: #9fe870;
  --app-success-rgb: 159, 232, 112;
  /* Matches the match room's felt action, so one green runs through the app. */
  --app-action: #5ecf92;
  --app-action-ink: #0a2517;
  --app-action-hover: #7fdca6;
  --app-on-danger: #2a0a0e;
  --app-warning-ink: #f0b84c;
  /* Status tints: quiet fills that still clear AA against their own ink. */
  --app-tint-success: #1b4d2e;
  --app-tint-success-ink: #d8f3e0;
  --app-tint-danger: #5c1d21;
  --app-tint-danger-ink: #ffd8da;
  --app-tint-warning: #5a4310;
  --app-tint-warning-ink: #ffe9b8;
  --app-tint-neutral: #232a35;
  --app-tint-neutral-ink: #f2f5f9;
  --app-on-dark-band: #e9ecef;
  --app-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
  --app-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.3);
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-link-color: var(--app-primary-strong);
  --bs-link-color-rgb: var(--app-primary-strong-rgb);
  --bs-link-hover-color: var(--app-primary);
  --bs-danger-rgb: var(--app-danger-rgb);
  --bs-warning-rgb: var(--app-accent-rgb);
  --bs-success-rgb: var(--app-success-rgb);
}

* {
  letter-spacing: 0;
}

[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -8%, rgba(148, 163, 184, 0.2), transparent 28rem),
    radial-gradient(circle at 88% 4%, rgba(100, 116, 139, 0.12), transparent 24rem),
    linear-gradient(180deg, var(--app-bg-strong), var(--app-bg) 18rem);
}

.page-shell {
  width: min(100% - 1.5rem, 1320px);
  margin: 0 auto;
  padding: 1.25rem 0 3rem;
}

.page-shell > .container,
.page-shell > .container-fluid,
.page-shell > .row,
.page-shell > h2,
.page-shell > h3,
.page-shell > p,
.page-shell > form {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

.app-navbar {
  --bs-navbar-color: rgba(255, 255, 255, 0.78);
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-brand-hover-color: #ffffff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.26);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.84%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background: #071c16;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.26);
}

.app-navbar .container-xl {
  justify-content: flex-start;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 800;
  margin-right: 0;
}

.brand-mark {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.09);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
}

.side-menu-toggle {
  flex: 0 0 auto;
  margin-left: 0.75rem;
}

.theme-toggle {
  flex: 0 0 auto;
  margin-left: 0.5rem;
}

.side-menu-toggle .bi {
  font-size: 1.25rem;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.app-side-menu {
  --bs-offcanvas-width: min(86vw, 20rem);
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(var(--app-primary-rgb), 0.14), transparent 16rem),
    #071c16;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.app-side-menu .offcanvas-header {
  align-items: flex-start;
  padding: 1.2rem 1.2rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.app-side-menu .offcanvas-title {
  margin: 0;
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.1;
}

.side-menu-eyebrow {
  margin-bottom: 0.2rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.side-menu-nav {
  display: grid;
  gap: 0.4rem;
}

.side-menu-account {
  display: grid;
  gap: 0.4rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.side-menu-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 2.75rem;
  padding: 0.72rem 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0.5rem;
}

.side-menu-link:hover,
.side-menu-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.12);
}

.side-menu-link i {
  width: 1.25rem;
  flex: 0 0 auto;
  color: var(--app-primary-strong);
  font-size: 1.1rem;
  text-align: center;
}

.navbar-nav {
  gap: 0.25rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.52rem 0.78rem;
  font-weight: 650;
}

.nav-link:hover,
.nav-link.active {
  background: rgba(255, 255, 255, 0.12);
}

.nav-tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  box-shadow: var(--app-shadow-soft);
}

.nav-tabs .nav-item {
  display: flex;
}

.nav-tabs .nav-link {
  min-height: 44px;
  margin: 0;
  color: var(--app-muted);
  background: transparent;
  border: 0;
  border-radius: 0.4rem;
}

.nav-tabs .nav-link:hover {
  color: var(--app-text);
  background: var(--app-surface-muted);
}

.nav-tabs .nav-link.active {
  color: var(--app-text);
  background: var(--app-surface-solid);
  box-shadow: inset 0 0 0 1px var(--app-border), 0 2px 8px rgba(15, 23, 42, 0.08);
}

.btn {
  --bs-btn-border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  font-weight: 700;
  box-shadow: none;
}

.btn-primary,
.btn-success {
  --bs-btn-bg: var(--app-action);
  --bs-btn-border-color: var(--app-action);
  --bs-btn-hover-bg: var(--app-action-hover);
  --bs-btn-hover-border-color: var(--app-action-hover);
  --bs-btn-active-bg: var(--app-action-hover);
  --bs-btn-active-border-color: var(--app-action-hover);
  --bs-btn-color: var(--app-action-ink);
  --bs-btn-hover-color: var(--app-action-ink);
  --bs-btn-active-color: var(--app-action-ink);
  color: var(--app-action-ink);
}

/* Bootstrap hardcodes #0d6efd on :checked and ignores every --bs-* variable. */
.form-check-input:checked {
  background-color: var(--app-action);
  border-color: var(--app-action);
}

.form-check-input:focus {
  border-color: var(--app-action);
  box-shadow: 0 0 0 0.25rem rgba(var(--app-primary-rgb), 0.3);
}

/* Outside the match room this fell through to Bootstrap's #6c757d and read as disabled. */
.btn-outline-secondary {
  --bs-btn-color: var(--app-text);
  --bs-btn-border-color: var(--app-border);
  --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-bg: var(--app-surface-muted);
  --bs-btn-hover-border-color: var(--app-muted);
  --bs-btn-active-color: var(--app-text);
  --bs-btn-active-bg: var(--app-surface-muted);
  --bs-btn-active-border-color: var(--app-muted);
}

/*
 * Status badges repeat on every row of the archive, standings and admin tables,
 * so they use quiet tints rather than saturated fills; each tint names its own ink.
 */
.badge.bg-danger {
  background-color: var(--app-tint-danger) !important;
  color: var(--app-tint-danger-ink) !important;
}

.badge.bg-success {
  background-color: var(--app-tint-success) !important;
  color: var(--app-tint-success-ink) !important;
}

.badge.bg-warning {
  background-color: var(--app-tint-warning) !important;
  color: var(--app-tint-warning-ink) !important;
}

.badge.bg-secondary,
.badge.bg-light {
  background-color: var(--app-tint-neutral) !important;
  color: var(--app-tint-neutral-ink) !important;
}

/* Stock outline-warning is #ffc107 text on white: unreadable. Warning ink
   carries the label; the tint fills on press. */
.btn-outline-warning {
  --bs-btn-color: var(--app-warning-ink);
  --bs-btn-border-color: var(--app-tint-warning);
  --bs-btn-hover-color: var(--app-warning-ink);
  --bs-btn-hover-bg: var(--app-tint-warning);
  --bs-btn-hover-border-color: var(--app-warning-ink);
  --bs-btn-active-color: var(--app-warning-ink);
  --bs-btn-active-bg: var(--app-tint-warning);
  --bs-btn-active-border-color: var(--app-warning-ink);
}

.btn-danger {
  --bs-btn-bg: var(--app-danger);
  --bs-btn-border-color: var(--app-danger);
  --bs-btn-color: var(--app-on-danger);
  --bs-btn-hover-color: var(--app-on-danger);
  --bs-btn-active-color: var(--app-on-danger);
}

/*
 * .text-bg-* sets its fill and a white ink in one shot, so the --bs-*-rgb bindings
 * above never reach it. Each helper needs its fill and its ink named together.
 */
/* Badges are never solid: every status chip is a quiet tint, no exceptions. */
.text-bg-primary,
.text-bg-info {
  background-color: var(--app-tint-neutral) !important;
  color: var(--app-tint-neutral-ink) !important;
}

.text-bg-success {
  background-color: var(--app-tint-success) !important;
  color: var(--app-tint-success-ink) !important;
}

.text-bg-danger {
  background-color: var(--app-tint-danger) !important;
  color: var(--app-tint-danger-ink) !important;
}

.text-bg-warning {
  background-color: var(--app-tint-warning) !important;
  color: var(--app-tint-warning-ink) !important;
}

.text-bg-secondary,
.text-bg-light {
  background-color: var(--app-tint-neutral) !important;
  color: var(--app-tint-neutral-ink) !important;
}

/*
 * App-level disclosure, mirroring .match-room-disclosure-row: a full-width
 * pressable row whose small line previews what is inside before you open it.
 */
.app-disclosure-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 1rem;
  text-align: left;
  color: var(--app-text);
  background: var(--app-surface-solid);
  border: 1px solid var(--app-border);
  border-radius: 0.65rem;
}

.app-disclosure-row:hover,
.app-disclosure-row:focus-visible,
.app-disclosure-row[aria-expanded="true"] {
  border-color: var(--app-action);
}

.app-disclosure-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.app-disclosure-copy strong {
  font-weight: 750;
}

.app-disclosure-copy small {
  color: var(--app-muted);
  overflow-wrap: anywhere;
}

.app-disclosure-chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  color: var(--app-text);
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  transition: transform 140ms ease;
}

.app-disclosure-row[aria-expanded="true"] .app-disclosure-chevron {
  transform: rotate(180deg);
}

.app-disclosure-panel {
  padding: 1rem;
  margin-top: 0.5rem;
  background: var(--app-surface-solid);
  border: 1px solid var(--app-border);
  border-radius: 0.65rem;
}

@media (prefers-reduced-motion: reduce) {
  .app-disclosure-chevron {
    transition: none;
  }}

/*
 * One back affordance for the whole app, mirroring .match-room-back-link:
 * a bordered raised shape with a leading arrow, never a bare link.
 */
.app-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.35rem 1rem;
  color: var(--app-text);
  font-weight: 750;
  text-decoration: none;
  background: var(--app-surface-solid);
  border: 1px solid var(--app-border);
  border-radius: 0.65rem;
}

.app-back-link:hover,
.app-back-link:focus-visible,
.app-back-link:active {
  color: var(--app-text);
  border-color: var(--app-action);
}

/*
 * .table-dark stays a dark band in both themes, so it needs its own ink: the
 * light theme's muted grey lands at 2.86:1 on it.
 */
.table-dark th,
.table thead.table-dark th {
  color: var(--app-on-dark-band);
}

/* Digits that sit in columns must line up. */
.table {
  font-variant-numeric: tabular-nums;
}

.table .cell-num,
.cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * Tone classes for values, not fills. Bootstrap's .text-warning would be amber on
 * white (about 2.2:1) in the light theme, so warning-as-text gets its own ink.
 */
.tone-danger,
.table .tone-danger {
  color: var(--app-danger);
  font-weight: 650;
}

.tone-warning,
.table .tone-warning {
  color: var(--app-warning-ink);
  font-weight: 650;
}

/* Archive rows state the score once, as data; only the winner carries weight. */
.archive-scoreline {
  color: var(--app-muted);
  font-variant-numeric: tabular-nums;
}

.archive-scoreline b {
  font-weight: 650;
}

.archive-scoreline-winner {
  color: var(--app-text);
}

.archive-scoreline-winner b {
  font-weight: 800;
}

.btn-outline-primary {
  --bs-btn-color: var(--app-primary-strong);
  --bs-btn-border-color: rgba(var(--app-primary-rgb), 0.48);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
}

.btn-warning {
  --bs-btn-bg: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: #c9871e;
  --bs-btn-hover-border-color: #c9871e;
  color: #15110a;
}

.btn-icon {
  /* The match room enforces 44px on every tappable; the shell owes the same. */
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

/* Bootstrap's .btn:hover/:active outrank a bare .btn-icon and swap in the
   variantless defaults, which resolve to the body text colour. The navbar stays
   dark in both themes, so in light mode that turned these buttons near-black on
   dark green and dropped their box - the theme toggle vanished under the cursor
   as you reached for it. Hold the icon treatment across every state. */
.btn.btn-icon:hover,
.btn.btn-icon:focus,
.btn.btn-icon:focus-visible,
.btn.btn-icon:active,
.btn.btn-icon.active {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.18);
}

.card,
.list-group,
.alert {
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
}

.card,
.list-group-item {
  color: var(--app-text);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-soft);
}

.card-header {
  font-weight: 800;
  color: var(--app-text);
  background: var(--app-surface-muted);
  border-bottom-color: var(--app-border);
}

.shadow-sm {
  box-shadow: var(--app-shadow-soft) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--app-text);
  font-weight: 850;
}

h2 {
  margin-bottom: 1rem;
}

.metric-label {
  color: var(--app-primary-strong);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

/*
 * Landing page. One persuade arc: a centered hero with the live board as
 * its centerpiece, a feature ticker, an accordion of the four screens, a
 * pinned tour whose shots scale in as they scroll, then the action band.
 * Geist carries the display type, as it does in the match room.
 */
.landing-page {
  overflow-x: clip;
}

.landing-page .page-shell {
  padding-top: 0;
}

.landing-section {
  padding-block: clamp(5rem, 12vw, 9rem);
  padding-inline: clamp(0.5rem, 3vw, 2rem);
}

.home-hero {
  --landing-glow: 0.2;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(2.25rem, 5vw, 3.75rem);
  min-height: clamp(30rem, 78vh, 46rem);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(0.5rem, 3vw, 2rem) clamp(3rem, 8vw, 5.5rem);
  text-align: center;
}

[data-bs-theme="dark"] .home-hero {
  --landing-glow: 0.3;
}

/* The wash bleeds to the viewport edges; the body clips the scrollbar slack. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -2;
  background:
    radial-gradient(60rem 30rem at 50% -8rem, rgba(var(--app-primary-rgb), var(--landing-glow)), transparent 70%),
    radial-gradient(40rem 18rem at 50% 112%, rgba(var(--app-primary-rgb), 0.1), transparent 70%),
    color-mix(in srgb, var(--app-surface-solid), rgb(var(--app-primary-rgb)) 6%);
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  opacity: 0.09;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.landing-hero {
  margin-bottom: 0;
}

.landing-hero-copy {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 64rem;
  min-width: 0;
  text-align: center;
}

.home-hero h1 {
  max-width: 64rem;
  margin: 0 auto;
  font-family: Geist, "Segoe UI", system-ui, sans-serif;
  /* Two lines across the wide container at desktop, never four. */
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.home-hero .lead {
  max-width: 44rem;
  margin: 1.35rem auto 0;
  color: var(--app-muted);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 500;
  text-wrap: pretty;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.landing-hero-actions .btn {
  min-height: 3.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding-inline: 1.4rem;
  font-weight: 700;
}

.landing-preview {
  width: min(100%, 46rem);
  text-align: left;
}

/* The hero's product shot is the widest thing on the page -- deliberately
   wider than the copy above it -- so it reads as the subject rather than an
   illustration parked under the buttons. The bezel gives the replica
   something to sit in: a dark card on a dark page has no edge at all. */
.landing-hero-stage {
  width: min(100%, 68rem);
  padding: 0.6rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 1.35rem;
  box-shadow:
    0 36px 74px rgba(0, 0, 0, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

[data-bs-theme="light"] .landing-hero-stage {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62));
  border-color: rgba(10, 35, 25, 0.16);
  box-shadow:
    0 36px 74px rgba(10, 35, 25, 0.2),
    0 4px 14px rgba(10, 35, 25, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Inside the stage the replica fills the bezel instead of keeping its own
   narrower ceiling. */
.landing-hero-stage .landing-preview {
  width: 100%;
}

/* The shot follows the buttons closely: every rem between them is a rem of
   the shot pushed under the fold. */
.landing-hero .landing-hero-stage {
  margin-top: clamp(-1.5rem, -2vw, -0.5rem);
}

/* A match night in progress: the Live chip breathes. The count-up and the
   round bar are tweens in landing.js, but a chip needs no timeline. */
@media (prefers-reduced-motion: no-preference) {
  .landing-hero-stage .match-room-state-live {
    animation: landing-live-pulse 2.6s ease-in-out infinite;
  }
}

@keyframes landing-live-pulse {
  50% {
    opacity: 0.5;
  }
}

/* Feature ticker: one row, duplicated once, scrolled by a CSS keyframe. */
.landing-marquee {
  --landing-marquee-gap: 3rem;
  display: flex;
  gap: var(--landing-marquee-gap);
  overflow: hidden;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--app-border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.landing-marquee-track {
  display: flex;
  flex-shrink: 0;
  justify-content: space-around;
  gap: var(--landing-marquee-gap);
  min-width: 100%;
  animation: landing-marquee 36s linear infinite;
}

.landing-marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  white-space: nowrap;
  color: var(--app-muted);
  font-family: Geist, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.landing-marquee-track span::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--app-action);
  opacity: 0.8;
}

@keyframes landing-marquee {
  to {
    transform: translateX(calc(-100% - var(--landing-marquee-gap)));
  }
}

.landing-section-title {
  max-width: 60rem;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  font-family: Geist, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* A sliver of felt set into the heading, sized to the cap height. */
.landing-inline-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 2.7em;
  height: 0.92em;
  margin: 0 0.1em;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 25%, #2f9a63, #14532d 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 8px 20px rgba(20, 83, 45, 0.35);
  color: #eafff1;
  font-size: 0.9em;
  transform: translateY(-0.08em);
}

.landing-inline-pill span {
  font-size: 0.4em;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.landing-inline-pill span + span {
  margin-left: 0.5em;
  padding-left: 0.5em;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.landing-proof-section {
  display: grid;
  gap: 1.5rem;
}

/*
 * Horizontal accordion: four slices in one row. The hovered or focused
 * slice widens and unfolds its copy; idle, the first slice holds the
 * open state so the row never shows four closed cards.
 */
.landing-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 0.75rem;
  transition: grid-template-columns 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.landing-proof-item {
  position: relative;
  min-width: 0;
  min-height: 17rem;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 0.5rem;
  padding: 1.35rem;
  background: var(--app-surface-solid);
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.landing-proof-item i {
  color: var(--app-primary-strong);
  font-size: 1.5rem;
}

.landing-proof-item h2 {
  margin: 0.35rem 0 0;
  font-family: Geist, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.landing-proof-item p,
.landing-confidence {
  margin: 0;
  color: var(--app-muted);
  overflow-wrap: anywhere;
}

.landing-proof-reveal {
  display: grid;
  grid-template-rows: 1fr;
  align-self: end;
  opacity: 1;
  transition: grid-template-rows 0.5s ease, opacity 0.4s ease 0.1s;
}

.landing-proof-reveal > div {
  min-height: 0;
  display: grid;
  gap: 0.6rem;
  overflow: hidden;
}

.landing-confidence {
  max-width: 58rem;
  font-weight: 700;
}

.landing-feature-link {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.landing-feature-link:hover,
.landing-feature-link:focus-visible {
  border-color: rgba(var(--app-primary-rgb), 0.45);
  box-shadow: var(--app-shadow-soft);
  color: inherit;
}

.landing-feature-link:focus-visible {
  outline: 3px solid rgba(var(--app-primary-rgb), 0.25);
  outline-offset: 3px;
}

.landing-feature-link-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--app-primary-strong);
  font-size: 0.86rem;
  font-weight: 850;
}

@media (min-width: 992px) {
  @supports selector(:has(a)) {
    .landing-proof-grid:not(:has(.landing-proof-item:is(:hover, :focus-visible))),
    .landing-proof-grid:has(.landing-proof-item:nth-child(3n + 1):is(:hover, :focus-visible)) {
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .landing-proof-grid:has(.landing-proof-item:nth-child(3n + 2):is(:hover, :focus-visible)) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    }

    .landing-proof-grid:has(.landing-proof-item:nth-child(3n + 3):is(:hover, :focus-visible)) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
    }

    .landing-proof-grid .landing-proof-reveal {
      grid-template-rows: 0fr;
      opacity: 0;
    }

    .landing-proof-item:is(:hover, :focus-visible) .landing-proof-reveal,
    .landing-proof-grid:not(:has(.landing-proof-item:is(:hover, :focus-visible))) .landing-proof-item:first-child .landing-proof-reveal {
      grid-template-rows: 1fr;
      opacity: 1;
    }

    .landing-proof-item:is(:hover, :focus-visible),
    .landing-proof-grid:not(:has(.landing-proof-item:is(:hover, :focus-visible))) .landing-proof-item:first-child {
      background: color-mix(in srgb, var(--app-surface-solid), rgb(var(--app-primary-rgb)) 8%);
      border-color: rgba(var(--app-primary-rgb), 0.4);
    }
  }
}

/*
 * Product tour: the rail on the left stays pinned while the four shots
 * scroll past on the right; landing.js scales each shot in and dims the
 * frame on the way out, and moves the rail's active mark.
 */
.landing-feature-tour {
  padding-top: 0;
}

.landing-tour {
  display: grid;
  grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.landing-tour-rail {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: 1.5rem;
}

.landing-tour-rail h2 {
  margin: 0;
  font-family: Geist, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.landing-tour-rail nav {
  display: grid;
}

.landing-tour-rail a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 0 0.75rem 1.1rem;
  border-top: 1px solid var(--app-border);
  color: var(--app-muted);
  font-weight: 750;
  text-decoration: none;
  transition: color 0.25s ease;
}

.landing-tour-rail a:last-child {
  border-bottom: 1px solid var(--app-border);
}

.landing-tour-rail a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: var(--app-action);
  transform: translateY(-50%);
  transition: height 0.3s ease;
}

.landing-tour-rail a:hover,
.landing-tour-rail a:focus-visible,
.landing-tour-rail a[aria-current="true"] {
  color: var(--app-text);
}

.landing-tour-rail a[aria-current="true"]::before {
  height: 60%;
}

.landing-tour-track {
  display: grid;
  gap: clamp(4rem, 9vw, 7.5rem);
}

.landing-feature-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  scroll-margin-top: 5.75rem;
}

.landing-feature-copy {
  max-width: 40rem;
}

.landing-feature-copy h2 {
  margin: 0;
  font-family: Geist, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.landing-feature-copy p {
  margin: 0.75rem 0 0;
  color: var(--app-muted);
  font-size: 1.05rem;
  font-weight: 550;
  text-wrap: pretty;
}

.landing-shot-frame {
  min-width: 0;
}

.landing-product-shot {
  min-width: 0;
  transform-origin: 50% 100%;
}

/*
 * Action band: one dark felt-lit block in both themes, so it carries its
 * own action pair and link colors rather than the page's.
 */
.landing-cta {
  padding-bottom: clamp(2rem, 5vw, 3rem);
}

.landing-cta-band {
  --app-action: #5ecf92;
  --app-action-ink: #0a2517;
  --app-action-hover: #7fdca6;
  --app-primary: #6ee7c6;
  --app-primary-rgb: 110, 231, 198;
  --app-primary-strong: #dff9ee;
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  color: var(--app-on-dark-band);
  text-align: center;
  background:
    radial-gradient(50rem 22rem at 50% 125%, rgba(94, 207, 146, 0.3), transparent 70%),
    #0d1512;
}

.landing-cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.12;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.landing-cta-band h2 {
  max-width: 40rem;
  margin: 0;
  color: #ffffff;
  font-family: Geist, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.landing-cta-band p {
  max-width: 36rem;
  margin: 0;
  color: rgba(233, 236, 239, 0.8);
  font-size: 1.1rem;
  font-weight: 500;
  text-wrap: pretty;
}

.landing-cta-actions {
  margin-top: 1.25rem;
}

.landing-cta-band .btn-outline-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.45);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --bs-btn-hover-border-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
}

.landing-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--app-border);
  color: var(--app-muted);
}

.landing-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--app-text);
  font-weight: 800;
  text-decoration: none;
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.landing-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--app-muted);
  font-weight: 650;
  text-decoration: none;
}

.landing-footer-links a:hover,
.landing-footer-links a:focus-visible {
  color: var(--app-text);
}

.landing-footer p {
  margin: 0;
  font-weight: 600;
}

/* landing: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .landing-marquee-track {
    animation: none;
  }

  .landing-marquee-track[aria-hidden="true"] {
    display: none;
  }

  .landing-proof-grid,
  .landing-proof-reveal,
  .landing-feature-link,
  .landing-tour-rail a,
  .landing-tour-rail a::before {
    transition: none;
  }
}

/*
 * One shell for every account screen: log in, sign up, reset, change, log
 * out. Narrow, centered, one solid action, links stacked underneath.
 */
.auth-shell {
  width: 100%;
  max-width: 27rem;
  margin: 0 auto;
}

.auth-links {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  text-align: center;
}

.auth-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  color: var(--app-primary-strong);
  font-weight: 650;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.content-panel {
  max-width: 980px;
  margin: 0 auto;
}

.content-panel-wide {
  max-width: 1120px;
  margin: 0 auto;
}

.page-card {
  padding: clamp(1rem, 2vw, 1.4rem);
}

.text-muted {
  color: var(--app-muted) !important;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: 0.78rem 0.85rem;
}

.table thead th {
  color: var(--app-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  border-bottom-width: 1px;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: rgba(var(--app-primary-rgb), 0.045);
}

.table-bordered {
  border-color: var(--app-border);
}

.table-responsive {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
}

.table-responsive .table {
  min-width: 42rem;
}

.table-responsive[data-table-zoom] {
  overflow: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-y pinch-zoom;
}

.zoomable-table-scale {
  width: max-content;
  min-width: 100%;
  transform-origin: top left;
}

.table-responsive[data-table-zoom][data-table-scaled="true"] {
  min-height: var(--table-zoom-scaled-height);
}

.form-control,
.form-select,
form p input,
form p select,
form p textarea {
  display: block;
  width: 100%;
  min-height: 2.45rem;
  padding: 0.45rem 0.75rem;
  color: var(--app-text);
  background-color: var(--app-surface-solid);
  border-color: var(--app-border);
  border-style: solid;
  border-width: 1px;
  border-radius: 0.5rem;
}

.form-control:focus,
.form-select:focus,
form p input:focus,
form p select:focus,
form p textarea:focus {
  outline: 0;
  border-color: rgba(var(--app-primary-rgb), 0.75);
  box-shadow: 0 0 0 0.22rem rgba(var(--app-primary-rgb), 0.16);
}

.schedule-date-tools {
  padding: 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  background: var(--app-surface);
}

.schedule-date-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 2.2rem;
  margin-top: 0.9rem;
}

.schedule-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.3rem 0.45rem 0.3rem 0.65rem;
  border: 1px solid rgba(var(--app-primary-rgb), 0.28);
  border-radius: 999px;
  background: rgba(var(--app-primary-rgb), 0.08);
  color: var(--app-text);
  font-weight: 700;
}

.schedule-date-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  color: var(--app-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  line-height: 1;
}

.schedule-date-chip-remove:hover,
.schedule-date-chip-remove:focus {
  color: var(--app-text);
  background: rgba(var(--app-primary-rgb), 0.14);
}

form p label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--app-muted);
  font-weight: 750;
}

form p .helptext {
  display: block;
  margin-top: 0.3rem;
  color: var(--app-muted);
  font-size: 0.86rem;
}

.badge {
  border-radius: 999px;
  padding: 0.45em 0.7em;
}

.alert {
  color: var(--app-text);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-soft);
}

.alert-info {
  --bs-alert-border-color: rgba(var(--app-primary-rgb), 0.22);
  --bs-alert-bg: rgba(var(--app-primary-rgb), 0.09);
}

.alert-success {
  --bs-alert-border-color: rgba(25, 135, 84, 0.24);
  --bs-alert-bg: rgba(25, 135, 84, 0.12);
}

.alert-warning {
  --bs-alert-border-color: rgba(var(--app-accent-rgb), 0.28);
  --bs-alert-bg: rgba(var(--app-accent-rgb), 0.12);
}

.alert-danger {
  --bs-alert-border-color: rgba(var(--app-danger-rgb), 0.32);
  --bs-alert-bg: rgba(var(--app-danger-rgb), 0.12);
}

/*
 * The tints above only set Bootstrap's --bs-alert-* variables, but .alert here
 * re-declares `background` and `border` as shorthands, and a shorthand beats
 * Bootstrap's `background-color: var(--bs-alert-bg)`. Every level therefore
 * rendered as the same neutral surface and an error read as an info notice.
 * Re-apply each level's own tint over the shared surface.
 */
.alert-info,
.alert-success,
.alert-warning,
.alert-danger {
  background: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
}

.scorecard-command-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: normal;
}

#scorecard-save-retry {
  min-height: 2.75rem;
  min-width: 2.75rem;
}

.round-overview-grid .card {
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.round-overview-grid .card-body {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0.5rem 0.6rem !important;
  font-size: 0.86rem;
  line-height: 1.25;
}

.round-status-card .table-status-item .badge,
.round-status-card .next-up-item .badge {
  justify-self: start;
}

.round-status-card .table-status-empty .text-muted {
  display: none;
}

.scorecard-save-status .btn-link {
  min-height: 2.75rem;
  padding: 0 0.35rem;
  color: inherit;
  font-weight: 800;
}

.scorecard-page .btn.btn-sm {
  min-height: 2.75rem;
}

.scorecard-page .btn.btn-primary,
.scorecard-page .btn.btn-success {
  --bs-btn-bg: #086751;
  --bs-btn-border-color: #086751;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #064c3c;
  --bs-btn-hover-border-color: #064c3c;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #064c3c;
  --bs-btn-active-border-color: #064c3c;
  --bs-btn-active-color: #fff;
  color: #fff;
}

.scorecard-page .btn.btn-outline-primary {
  --bs-btn-hover-bg: #086751;
  --bs-btn-hover-border-color: #086751;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #086751;
  --bs-btn-active-border-color: #086751;
  --bs-btn-active-color: #fff;
}

.player-total-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--app-border);
}

[data-bs-theme="dark"] .scorecard-page .btn.btn-primary,
[data-bs-theme="dark"] .scorecard-page .btn.btn-success {
  --bs-btn-bg: #6ee7c6;
  --bs-btn-border-color: #6ee7c6;
  --bs-btn-color: #071c16;
  --bs-btn-hover-bg: #8ff0d7;
  --bs-btn-hover-border-color: #8ff0d7;
  --bs-btn-hover-color: #071c16;
  --bs-btn-active-bg: #8ff0d7;
  --bs-btn-active-border-color: #8ff0d7;
  --bs-btn-active-color: #071c16;
  color: #071c16;
}

[data-bs-theme="dark"] .scorecard-page .btn.btn-outline-primary {
  --bs-btn-hover-bg: #6ee7c6;
  --bs-btn-hover-border-color: #6ee7c6;
  --bs-btn-hover-color: #071c16;
  --bs-btn-active-bg: #6ee7c6;
  --bs-btn-active-border-color: #6ee7c6;
  --bs-btn-active-color: #071c16;
}

[data-bs-theme="dark"] .round-card .card {
  background: #202631 !important;
  border-color: rgba(226, 232, 240, 0.16) !important;
}

[data-bs-theme="dark"] .round-card .table {
  --bs-table-bg: #1a1f29;
  --bs-table-color: #f2fbf6;
  --bs-table-border-color: rgba(226, 232, 240, 0.18);
  --bs-table-striped-bg: #202631;
  --bs-table-striped-color: #f2fbf6;
}

[data-bs-theme="dark"] .round-card .table thead th {
  color: #d8dee8;
  background: #262d39;
}

[data-bs-theme="dark"] .round-card .form-control {
  background: #11151c;
  border-color: rgba(226, 232, 240, 0.2);
}

@keyframes scorecard-live-update {
  0% { background-color: rgba(var(--app-primary-rgb), 0.24); }
  100% { background-color: transparent; }}

.scorecard-support-rail .card {
  box-shadow: none;
}

.substitution-form .form-label {
  color: var(--app-muted);
  font-weight: 750;
}

.bg-light,
.border-light {
  background-color: var(--app-surface-muted) !important;
  border-color: var(--app-border) !important;
}

.list-group-item {
  border-color: var(--app-border);
}

/* Shot Trainer: a table room on the match room's token language. The table
   itself (walnut rail, blue cloth) is drawn in Konva and stays the same in
   both themes; the room around it follows the app theme. */
.shot-trainer {
  --shot-trainer-bg: #101312;
  --shot-trainer-surface: #181c1a;
  --shot-trainer-surface-raised: #202523;
  --shot-trainer-ink: #f2f5f3;
  --shot-trainer-muted: #a6aeaa;
  --shot-trainer-action: #5ecf92;
  --shot-trainer-action-ink: #0a2517;
  --shot-trainer-action-hover: #7fdca6;
  --shot-trainer-border: #363e3a;
  --shot-trainer-danger: #ff8f86;
  --shot-trainer-focus: #8adcac;
  --shot-trainer-stage: radial-gradient(120% 90% at 50% 40%, #1b201e 0%, #0f1211 70%);
  --shot-trainer-table-shadow: 0 18px 32px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 0.85rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  color: var(--shot-trainer-ink);
  background: var(--shot-trainer-bg);
  border: 1px solid var(--shot-trainer-border);
  border-radius: 0.85rem;
  box-shadow: 0 1rem 2.6rem rgba(3, 15, 11, 0.24);
  color-scheme: dark;
}

[data-bs-theme="light"] .shot-trainer {
  --shot-trainer-bg: #f2f3f2;
  --shot-trainer-surface: #ffffff;
  --shot-trainer-surface-raised: #e7e9e8;
  --shot-trainer-ink: #191d1b;
  --shot-trainer-muted: #545c58;
  --shot-trainer-action: #1e7a4a;
  --shot-trainer-action-ink: #ffffff;
  --shot-trainer-action-hover: #17693f;
  --shot-trainer-border: #c6ccc9;
  --shot-trainer-danger: #9d251e;
  --shot-trainer-focus: #1e6b42;
  --shot-trainer-stage: radial-gradient(120% 90% at 50% 40%, #e3e7e4 0%, #d2d7d4 70%);
  --shot-trainer-table-shadow: 0 18px 32px rgba(10, 35, 25, 0.28);
  color-scheme: light;
  box-shadow: 0 1rem 2.6rem rgba(10, 35, 25, 0.12);
}

.shot-trainer-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.shot-trainer-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.shot-trainer-lede {
  max-width: 52ch;
  margin: 0.25rem 0 0;
  color: var(--shot-trainer-muted);
  font-size: 0.9rem;
}

.shot-trainer-actions {
  display: flex;
  gap: 0.5rem;
}

.shot-trainer .btn.shot-trainer-btn {
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  color: var(--shot-trainer-ink);
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--shot-trainer-surface-raised);
  border: 1px solid var(--shot-trainer-border);
  border-radius: 0.65rem;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.shot-trainer .btn.shot-trainer-btn:hover {
  color: var(--shot-trainer-ink);
  background: var(--shot-trainer-surface);
  border-color: var(--shot-trainer-muted);
}

.shot-trainer .btn.shot-trainer-btn:active {
  transform: translateY(1px);
}

.shot-trainer .btn.shot-trainer-btn:focus-visible {
  outline: 2px solid var(--shot-trainer-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.shot-trainer .btn.shot-trainer-btn:disabled {
  opacity: 0.45;
}

.shot-trainer .btn.shot-trainer-btn-primary {
  color: var(--shot-trainer-action-ink);
  background: var(--shot-trainer-action);
  border-color: transparent;
}

.shot-trainer .btn.shot-trainer-btn-primary:hover {
  color: var(--shot-trainer-action-ink);
  background: var(--shot-trainer-action-hover);
  border-color: transparent;
}

.shot-trainer .btn.shot-trainer-btn-danger {
  color: var(--shot-trainer-danger);
}

.shot-trainer .btn.shot-trainer-btn[aria-pressed="true"] {
  color: var(--shot-trainer-action-ink);
  background: var(--shot-trainer-action);
  border-color: transparent;
}

.shot-trainer .btn.shot-trainer-btn[aria-pressed="true"]:hover {
  color: var(--shot-trainer-action-ink);
  background: var(--shot-trainer-action-hover);
}

.shot-trainer-toolbar-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.shot-trainer .btn.shot-trainer-btn-danger:hover {
  color: var(--shot-trainer-danger);
}

.table-container,
#table-container {
  width: 100%;
}

.shot-trainer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.shot-trainer-zoom-controls {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.shot-trainer-zoom-controls .btn,
#removeSelectedBall {
  min-height: 44px;
}

.shot-trainer-shot-controls {
  gap: 0.9rem;
}

.shot-trainer-spin,
.shot-trainer-speed {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.shot-trainer-control-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--shot-trainer-muted);
}

.shot-trainer-control-value {
  min-width: 4.5rem;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--shot-trainer-ink);
}

/* The cue ball seen from behind: press or drag to put the tip somewhere on
   it. The crosshair is drawn with gradients so there is nothing to lay out. */
.shot-trainer-spin-face {
  position: relative;
  width: 44px;
  height: 44px;
  background:
    linear-gradient(var(--shot-trainer-border), var(--shot-trainer-border)) 50% 50% / 1px 70% no-repeat,
    linear-gradient(var(--shot-trainer-border), var(--shot-trainer-border)) 50% 50% / 70% 1px no-repeat,
    radial-gradient(circle at 38% 32%, #ffffff 0%, #d9ddda 62%, #b4bab6 100%);
  border: 1px solid var(--shot-trainer-border);
  border-radius: 50%;
  cursor: crosshair;
  touch-action: none;
}

.shot-trainer-spin-face:focus-visible {
  outline: 2px solid var(--shot-trainer-focus);
  outline-offset: 2px;
}

.shot-trainer-spin-tip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  background: var(--shot-trainer-action);
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.shot-trainer-speed-input {
  width: 92px;
  accent-color: var(--shot-trainer-action);
}

.shot-trainer-readout {
  margin: 0;
  min-height: 1.35rem;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--shot-trainer-ink);
}

.shot-trainer-readout:empty {
  color: transparent;
}

/* Drills: one card each, the goal in prose, then the score entry and the
   history Django renders for it. */
/* The app's disclosure row, pointed at the trainer's tokens: the shape and the
   behaviour are shared, but this page is its own dark table room. Wrapping the
   button in the h3 keeps the outline intact above the drill names. */
.shot-trainer-subtitle.shot-trainer-disclosure {
  margin: 0.35rem 0 0;
  font-size: inherit;
  font-weight: inherit;
}

.shot-trainer .app-disclosure-row {
  color: var(--shot-trainer-ink);
  background: var(--shot-trainer-surface);
  border-color: var(--shot-trainer-border);
}

.shot-trainer .app-disclosure-row:hover,
.shot-trainer .app-disclosure-row:focus-visible,
.shot-trainer .app-disclosure-row[aria-expanded="true"] {
  border-color: var(--shot-trainer-action);
}

.shot-trainer .app-disclosure-row:focus-visible {
  outline: 2px solid var(--shot-trainer-focus);
  outline-offset: 2px;
}

.shot-trainer .app-disclosure-copy strong {
  font-size: 1rem;
  font-weight: 650;
}

.shot-trainer .app-disclosure-copy small {
  color: var(--shot-trainer-muted);
}

.shot-trainer .app-disclosure-chevron {
  color: var(--shot-trainer-ink);
  background: var(--shot-trainer-surface-raised);
  border-color: var(--shot-trainer-border);
}

.shot-trainer-drills {
  display: grid;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

.shot-trainer-drill {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--shot-trainer-surface);
  border: 1px solid var(--shot-trainer-border);
  border-radius: 0.6rem;
}

.shot-trainer-drill-head {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.shot-trainer-drill-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--shot-trainer-ink);
}

.shot-trainer-drill-goal {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--shot-trainer-muted);
}

.shot-trainer-drill-log-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.86rem;
}

.shot-trainer-drill-log-form label,
.shot-trainer-drill-of {
  color: var(--shot-trainer-muted);
}

.shot-trainer .shot-trainer-drill-made {
  width: 4.5rem;
  min-height: 44px;
}

.shot-trainer-drill-error {
  margin: 0;
  font-size: 0.82rem;
  color: var(--shot-trainer-danger);
}

.shot-trainer-drill-error:empty {
  display: none;
}

.shot-trainer-drill-history {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--shot-trainer-border);
}

.shot-trainer-drill-scores {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.shot-trainer-drill-latest {
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--shot-trainer-ink);
}

.shot-trainer-drill-best,
.shot-trainer-drill-empty {
  margin: 0;
  font-size: 0.82rem;
  color: var(--shot-trainer-muted);
}

/* preserveAspectRatio="none" stretches the polyline to the box, so the stroke
   has to opt out of the same stretch or it goes wedge shaped. */
.shot-trainer-drill-spark {
  width: 100%;
  height: 28px;
  overflow: visible;
}

.shot-trainer-drill-spark polyline {
  fill: none;
  stroke: var(--shot-trainer-action);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.shot-trainer-drill-log {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
}

.shot-trainer-drill-log-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.15rem 0;
  font-variant-numeric: tabular-nums;
  color: var(--shot-trainer-muted);
}

.shot-trainer-drill-log-score {
  margin-left: auto;
  color: var(--shot-trainer-ink);
}

.shot-trainer .shot-trainer-drill-log-row .btn {
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  min-height: 0;
}

/* Registered so pool_table.js can read the computed px value; 0px = no cap.
   The landscape media query sets it in small-viewport units, which do not
   change when the mobile URL bar shows and hides. */
@property --stage-max-height {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.table-container {
  --stage-max-height: 0px;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.shot-trainer-stage {
  padding: clamp(0.65rem, 1.8vw, 1.2rem);
  background: var(--shot-trainer-stage);
  border-radius: 0.75rem;
  box-shadow: inset 0 0 0 1px var(--shot-trainer-border);
  transition: box-shadow 0.15s ease;
}

.shot-trainer-stage svg {
  display: block;
  width: 100%;
  height: auto;
}

.shot-trainer-stage.is-drop-target {
  box-shadow: inset 0 0 0 2px var(--shot-trainer-action);
}

#table-container {
  width: max-content;
  min-width: 100%;
}

#table-container .konvajs-content {
  margin: 0 auto;
  touch-action: pan-x pan-y;
}

#table-container canvas {
  display: block;
  touch-action: pan-x pan-y;
}

/* Only the first (rail) canvas needs the shadow; the ball and aim canvases
   above it are transparent overlays. */
#table-container .konvajs-content canvas:first-child {
  filter: drop-shadow(var(--shot-trainer-table-shadow));
}

.shot-trainer-tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  background: var(--shot-trainer-surface);
  border: 1px solid var(--shot-trainer-border);
  border-radius: 0.75rem;
}

.shot-trainer-tray-label {
  margin-right: 0.25rem;
  color: var(--shot-trainer-muted);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.shot-trainer-ball {
  --ball-color: #ffffff;
  --ball-light: color-mix(in srgb, var(--ball-color) 65%, white);
  --ball-dark: color-mix(in srgb, var(--ball-color) 60%, black);
  --ball-shading: radial-gradient(circle at 35% 30%, var(--ball-light) 0%, var(--ball-color) 45%, var(--ball-dark) 100%);
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ball-shading);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.15s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.shot-trainer-ball.is-stripe {
  background:
    linear-gradient(transparent 27%, rgba(255, 255, 255, 0.92) 27%, rgba(255, 255, 255, 0.92) 73%, transparent 73%),
    var(--ball-shading);
}

.shot-trainer-ball-number {
  width: 18px;
  height: 18px;
  color: #111111;
  font: 700 10px/18px system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
  background: #f7f7f2;
  border-radius: 50%;
}

.shot-trainer-ball:hover {
  transform: translateY(-2px);
}

.shot-trainer-ball:active {
  cursor: grabbing;
  transform: scale(0.96);
}

.shot-trainer-ball:focus-visible {
  outline: 2px solid var(--shot-trainer-focus);
  outline-offset: 3px;
}

/* Held long enough to pick up: the ball lifts off the tray. */
.shot-trainer-ball.is-lifting {
  cursor: grabbing;
  transform: translateY(-4px) scale(1.12);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.shot-trainer-ball.is-on-table {
  background: transparent;
  border: 2px dashed var(--shot-trainer-border);
  box-shadow: none;
  cursor: default;
  opacity: 0.7;
  transform: none;
}

.shot-trainer-ball.is-on-table .shot-trainer-ball-number {
  visibility: hidden;
}

.shot-trainer-ball-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1030;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5);
  transition: none;
}

.shot-trainer-ball-ghost.is-visible {
  opacity: 1;
}

.shot-trainer-hint {
  margin: 0;
  color: var(--shot-trainer-muted);
  font-size: 0.8rem;
}

.shot-trainer-hint kbd {
  padding: 0.05rem 0.35rem;
  color: inherit;
  font-size: 0.75rem;
  background: var(--shot-trainer-surface-raised);
  border: 1px solid var(--shot-trainer-border);
  border-radius: 0.3rem;
}

.shot-trainer-save {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.shot-trainer-field label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--shot-trainer-muted);
  font-size: 0.8rem;
}

.shot-trainer .form-control.shot-trainer-input {
  min-height: 44px;
  color: var(--shot-trainer-ink);
  background: var(--shot-trainer-surface);
  border: 1px solid var(--shot-trainer-border);
  border-radius: 0.65rem;
  box-shadow: none;
}

.shot-trainer .form-control.shot-trainer-input:focus {
  border-color: var(--shot-trainer-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shot-trainer-focus) 30%, transparent);
}

.shot-trainer-subtitle {
  margin: 0.35rem 0 0;
  font-size: 1rem;
  font-weight: 650;
}

.shot-trainer-empty {
  margin: 0;
  color: var(--shot-trainer-muted);
  font-size: 0.9rem;
}

.shot-trainer-shots {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shot-trainer-shots:empty {
  display: none;
}

.shot-trainer-shot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.45rem 0.45rem 0.9rem;
  font-size: 0.92rem;
  background: var(--shot-trainer-surface);
  border: 1px solid var(--shot-trainer-border);
  border-radius: 0.7rem;
}

.shot-trainer-shot-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.shot-trainer-shot-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.4rem;
}

.shot-trainer-shot-actions .btn.shot-trainer-btn {
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
}

@media (max-width: 575.98px) {
  .shot-trainer-save {
    grid-template-columns: minmax(0, 1fr);
  }

  .shot-trainer-actions {
    width: 100%;
  }

  .shot-trainer-actions .btn.shot-trainer-btn {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shot-trainer-ball,
  .shot-trainer-stage,
  .shot-trainer .btn.shot-trainer-btn {
    transition: none;
  }

  .shot-trainer-ball:hover {
    transform: none;
  }
}

.league-admin-dashboard {
  display: grid;
  /* Grid items default to min-width:auto and so refuse to shrink below
     max-content. `.table-responsive .table` sets min-width: 42rem, so a card
     holding a table stretched its track to 672px and the whole page scrolled
     sideways on a phone -- the wrapper's overflow-x: auto was useless because
     its containing block was already that wide. minmax(0, 1fr) lets the track
     shrink, so the table scrolls inside its wrapper instead. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.admin-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  box-shadow: var(--app-shadow-soft);
}

.admin-page-header h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
}

.admin-summary-grid,
.stats-summary-grid,
.admin-section-grid,
.admin-action-grid {
  display: grid;
  gap: 1rem;
}

/* Six numbers that flow, rather than stacking one per row on a phone. */
.admin-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

/* Seven stats, so they flow: repeat(6) stranded the seventh alone on row two. */
.stats-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.activity-summary-grid {
  grid-template-columns: repeat(3, minmax(14rem, 1fr));
}

.admin-summary-tile,
.stats-summary-tile,
.admin-action-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--app-text);
  text-decoration: none;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  box-shadow: var(--app-shadow-soft);
}

.admin-summary-tile,
.stats-summary-tile {
  min-height: 6.75rem;
  padding: 1rem;
  /* Single-word labels ("AVERAGE") otherwise sit flush against the number. */
  justify-content: space-between;
}

.stats-summary-tile .metric-label {
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

.admin-summary-copy {
  min-width: 0;
}

.admin-summary-tile strong {
  display: block;
  margin-top: 0.15rem;
  font-size: 2rem;
  line-height: 1;
  overflow-wrap: anywhere;
}

/*
 * Label above the number, not beside it. Side by side, both columns were
 * floored at max-content, so the tile could not shrink to its 1/6 track and a
 * three or four digit total ("1000") pushed itself outside the card. Stacked,
 * each line gets the tile's full width and no digit count can overflow.
 */
.stats-summary-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 0.3rem;
  /* 6.75rem was headroom for the old side-by-side tile wrapping to two lines.
     Stacked, that is dead space, and there are seven of these on a phone. */
  min-height: 5.5rem;
}

.stats-summary-tile strong {
  display: block;
  min-width: 0;
  margin-top: 0;
  font-size: clamp(1.5rem, 1.9vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  overflow-wrap: normal;
  text-align: left;
  white-space: nowrap;
  word-break: keep-all;
}

.activity-summary-grid .admin-summary-tile strong {
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.08;
}

.admin-summary-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--app-primary-strong);
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
}

.admin-section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.admin-section-heading h2 {
  margin: 0;
  font-size: 1.25rem;
}

.reports-match-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, auto);
  gap: 1rem;
  align-items: start;
}

.reports-round-block + .reports-round-block {
  margin-top: 1.25rem;
}

.reports-table-scroll {
  max-width: 100%;
}

.admin-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-family {
  display: grid;
  gap: 1rem;
}

.activity-search-form {
  display: grid;
  grid-template-columns: minmax(16rem, 1.5fr) minmax(10rem, 0.75fr) minmax(10rem, 0.75fr) auto;
  align-items: end;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.activity-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.activity-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(var(--app-primary-rgb), 0.35);
  border-radius: 0.5rem;
}

.activity-filter-grid .btn {
  border: 0;
  border-radius: 0;
  min-height: 2.55rem;
}

.activity-filter-grid .btn + .btn {
  border-left: 1px solid rgba(var(--app-primary-rgb), 0.35);
}

.activity-filter-grid .btn-outline-primary {
  background: transparent;
}

.admin-action-link {
  min-height: 4rem;
  padding: 0.85rem;
  font-weight: 750;
}

.admin-action-copy {
  min-width: 0;
}

.admin-action-copy strong,
.admin-action-copy span {
  overflow-wrap: anywhere;
}

.admin-action-link i {
  color: var(--app-primary-strong);
  font-size: 1.1rem;
}

/* The "Complete" badge otherwise ends the row, and a done step stops looking
   like somewhere you can still go back into. */
.admin-action-link .admin-action-go {
  flex: none;
  margin-left: 0.15rem;
  color: var(--app-muted);
  font-size: 0.9rem;
  transition: transform 0.15s ease;
}

.admin-action-link:hover .admin-action-go,
.admin-action-link:focus-visible .admin-action-go {
  transform: translateX(0.15rem);
}

@media (prefers-reduced-motion: reduce) {
  .admin-action-link .admin-action-go {
    transition: none;
  }
}

.billing-step-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
}

.billing-step-copy {
  min-width: 0;
}

.billing-step-copy strong,
.billing-step-copy span {
  overflow-wrap: anywhere;
}

.billing-step-card .badge {
  justify-self: end;
  white-space: nowrap;
}

.billing-check-list {
  display: grid;
  gap: 0.75rem;
}

.billing-check-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.85rem;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  box-shadow: var(--app-shadow-soft);
}

.billing-check-item i {
  color: var(--app-primary-strong);
  font-size: 1.1rem;
}

.billing-check-copy {
  min-width: 0;
}

.billing-check-copy strong,
.billing-check-copy span {
  overflow-wrap: anywhere;
}

.billing-check-item .badge {
  justify-self: end;
  white-space: nowrap;
}

.league-card-slug {
  overflow-wrap: anywhere;
}

.league-card-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

.league-card-actions .admin-action-link {
  min-width: 0;
}

.league-card-actions .admin-action-link span {
  overflow-wrap: anywhere;
}

.team-accordion {
  display: grid;
  gap: 0.65rem;
}

.team-panel {
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  background: var(--app-surface);
  box-shadow: var(--app-shadow-soft);
}

.team-panel-archived {
  background: var(--app-surface-muted);
}

.team-panel-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 4rem;
  padding: 0.85rem 1rem;
  color: var(--app-text);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  appearance: none;
  box-shadow: none;
}

.team-panel-toggle:hover,
.team-panel-toggle:focus-visible {
  background: rgba(var(--app-primary-rgb), 0.08);
  outline: 0;
}

.team-panel-toggle:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(var(--app-primary-rgb), 0.5);
}

.team-panel-title {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.team-panel-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem 1rem;
  color: var(--app-muted);
  font-size: 0.9rem;
  font-weight: 650;
}

.team-panel-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.team-panel-meta .bi {
  color: var(--app-primary-strong);
  font-size: 1rem;
}

.team-panel-chevron {
  color: var(--app-muted);
  transition: transform 0.15s ease;
}

.team-panel-toggle:not(.collapsed) .team-panel-chevron {
  transform: rotate(180deg);
}

.team-maintenance-panel {
  border-top: 1px solid var(--app-border);
  background: var(--app-surface-muted);
}

.team-maintenance-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(14rem, 1.15fr) minmax(10rem, 0.7fr);
  gap: 1rem;
  padding: 1rem;
}

.player-panel-grid {
  grid-template-columns: minmax(16rem, 1.5fr) minmax(11rem, 0.6fr);
}

.team-maintenance-section {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.85rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
}

.team-maintenance-section h3 {
  margin: 0;
  color: var(--app-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.team-edit-form,
.team-member-list,
.team-maintenance-actions {
  display: grid;
  gap: 0.5rem;
}

.team-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--app-border);
}

.team-member-row:last-child {
  border-bottom: 0;
}

.team-member-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.team-member-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.teams-archive-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--app-border);
}

.season-timeline-table {
  border-collapse: separate;
  border-spacing: 0 0.55rem;
}

.season-timeline-table thead th {
  border-bottom: 0;
}

.season-row > * {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: var(--app-surface-solid);
  border-top: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
}

.season-row > :first-child {
  border-left: 1px solid var(--app-border);
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.season-row > :last-child {
  border-right: 1px solid var(--app-border);
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.admin-attention-list .list-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.captain-payment-snapshot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
}

.captain-payment-snapshot > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.7rem;
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: var(--bs-border-radius);
}

@media (max-width: 768px) {
  .captain-payment-snapshot {
    display: grid;
    grid-template-columns: 1fr;
  }

  .captain-payment-snapshot > span {
    justify-content: space-between;
  }}

@media (max-width: 991.98px) {

  .app-navbar {
    width: 100%;
  }

  .app-navbar .container-xl {
    width: 100%;
    max-width: none;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .navbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
  }

  .navbar-actions .btn {
    min-height: 2.75rem;
    padding: 0.58rem 0.85rem;
  }

  .navbar-actions .btn-icon {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
  }

  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .landing-hero-actions .btn {
    width: 100%;
  }

  .landing-proof-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-proof-item {
    min-height: 0;
  }

  .landing-feature-section,
  .landing-feature-section-phone,
  .landing-tour {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-replica-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The rail's list repeats the accordion on a phone; the heading stays. */
  .landing-tour-rail {
    position: static;
  }

  .landing-tour-rail nav {
    display: none;
  }


  .activity-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-section-grid,
  .admin-action-grid {
    /* Bare 1fr is minmax(auto, 1fr): one row's min-content widens every
       row and the page scrolls sideways at phone widths. */
    grid-template-columns: minmax(0, 1fr);
  }

  .activity-search-form {
    grid-template-columns: 1fr 1fr;
  }

  .activity-search-form > :first-child,
  .activity-search-actions {
    grid-column: 1 / -1;
  }

  .activity-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activity-filter-grid .btn:nth-child(3) {
    border-left: 0;
  }

  .activity-filter-grid .btn:nth-child(n + 3) {
    border-top: 1px solid rgba(var(--app-primary-rgb), 0.35);
  }

  .league-card-actions {
    grid-template-columns: 1fr;
  }

  .team-panel-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .team-panel-meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .team-maintenance-grid {
    grid-template-columns: 1fr;
  }

  .team-member-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .team-member-actions {
    justify-content: flex-start;
  }}

@media (max-width: 575.98px) {
  .page-shell {
    width: min(100% - 1rem, 1320px);
    padding-top: 0.85rem;
  }

  .scorecard-page .btn,
  .scorecard-page .form-control,
  .scorecard-page .form-select {
    min-height: 2.75rem;
  }

  .scorecard-command-actions .btn {
    flex: 1 1 100%;
  }

  .round-overview-grid .card-body {
    padding: 0.42rem 0.5rem !important;
    font-size: 0.82rem;
  }

  .round-status-card .round-activity-heading.mt-2 {
    margin-top: 0.35rem !important;
  }

  .scorecard-table-wrap.table-responsive .scorecard-round-table,
  .scorecard-round-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .scorecard-status-cell .d-flex {
    justify-content: stretch !important;
  }

  .table {
    font-size: 0.9rem;
  }

  .table > :not(caption) > * > * {
    padding: 0.62rem 0.5rem;
  }

  .page-shell .btn-sm {
    min-height: 44px;
    padding: 0.45rem 0.7rem;
  }

  .stats-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activity-search-form {
    grid-template-columns: 1fr;
  }

  .activity-search-form > :first-child,
  .activity-search-actions {
    grid-column: auto;
  }

  .activity-filter-grid {
    grid-template-columns: 1fr;
  }

  .activity-filter-grid .btn + .btn {
    border-left: 0;
    border-top: 1px solid rgba(var(--app-primary-rgb), 0.35);
  }

  .reports-match-summary {
    grid-template-columns: 1fr;
  }

  .app-navbar .container-xl {
    gap: 0.5rem;
  }

  .navbar-brand span:last-child {
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .side-menu-toggle {
    margin-left: 0;
  }

  .navbar-actions {
    width: 100%;
    margin-left: 0;
  }

  .navbar-actions .btn:not(.btn-icon) {
    flex: 1 1 7rem;
  }}

@media (max-height: 500px) and (orientation: landscape) {
  .page-shell {
    padding-top: 0.35rem;
  }

  .shot-trainer {
    gap: 0.5rem;
    padding: 0.6rem;
  }

  .shot-trainer-title {
    font-size: 1.15rem;
  }

  .shot-trainer-lede {
    display: none;
  }

  .shot-trainer-stage {
    /* Whole table on screen under the sticky nav and title row. */
    --stage-max-height: calc(100svh - 7.5rem);
    padding: 0.4rem;
  }

  .shot-trainer-tray {
    padding: 0.4rem 0.6rem;
  }}

/* Captain Match Room: phone-first live sports broadcast workspace. */
.match-room {
  --match-room-bg: #101312;
  --match-room-surface: #181c1a;
  --match-room-surface-raised: #202523;
  --match-room-ink: #f2f5f3;
  --match-room-muted: #a6aeaa;
  --match-room-action: #5ecf92;
  --match-room-action-ink: #0a2517;
  --match-room-action-hover: #7fdca6;
  --match-room-live: #e0b231;
  --match-room-border: #363e3a;
  --match-room-success: #9fe870;
  --match-room-danger: #ff8f86;
  --match-room-focus: #8adcac;
  --match-room-dock-clearance: 7.25rem;
  --match-room-z-sticky: 1010;
  --match-room-z-dock: 1020;
  width: 100%;
  min-width: 0;
  max-width: 72rem;
  margin-inline: auto;
  color: var(--match-room-ink);
  background: var(--match-room-bg);
  border: 1px solid var(--match-room-border);
  border-radius: 0.85rem;
  box-shadow: 0 1rem 2.6rem rgba(3, 15, 11, 0.24);
  color-scheme: dark;
  overflow-x: clip;
  scroll-padding-bottom: calc(6rem + env(safe-area-inset-bottom));
}

[data-bs-theme="light"] .match-room {
  --match-room-bg: #f2f3f2;
  --match-room-surface: #ffffff;
  --match-room-surface-raised: #e7e9e8;
  --match-room-ink: #191d1b;
  --match-room-muted: #545c58;
  --match-room-action: #1e7a4a;
  --match-room-action-ink: #ffffff;
  --match-room-action-hover: #17693f;
  --match-room-live: #755800;
  --match-room-border: #c6ccc9;
  --match-room-success: #1f6b31;
  --match-room-danger: #9d251e;
  --match-room-focus: #1e6b42;
  color-scheme: light;
  box-shadow: 0 1rem 2.6rem rgba(10, 35, 25, 0.12);
}

.match-room *,
.match-room *::before,
.match-room *::after {
  box-sizing: border-box;
}

.match-room-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
  padding: 1.1rem clamp(1rem, 3vw, 2rem);
  background: var(--match-room-surface);
  border-bottom: 1px solid var(--match-room-border);
}

.match-room-header-copy {
  min-width: 0;
}

.match-room-mobile-summary {
  display: none;
}

.match-room-kicker {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
  color: var(--match-room-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.match-room-kicker span {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  background: var(--match-room-live);
  border-radius: 50%;
}

.match-room-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.45rem, 2vw, 1rem);
  width: 100%;
  max-width: 64rem;
  margin: 0;
  color: var(--match-room-ink);
  font-family: Geist, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.25rem, 5.8vw, 2.35rem);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.match-room-title > span:not(.match-room-versus) {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.match-room-title > span:last-child {
  text-align: right;
}

.match-room-versus {
  color: var(--match-room-live);
  font-size: 0.52em;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.match-room-view-state {
  display: grid;
  justify-items: end;
  gap: 0.15rem;
  min-width: 7rem;
  color: var(--match-room-muted);
  font-size: 0.72rem;
  text-align: right;
  text-transform: uppercase;
}

.match-room-view-state strong {
  color: var(--match-room-live);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.match-room-readonly {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--match-room-muted);
  font-weight: 750;
}

.match-room-content {
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: clamp(0.85rem, 2.5vw, 1.5rem);
  padding-bottom: calc(var(--match-room-dock-clearance) + env(safe-area-inset-bottom));
}

.match-room-content > *,
.match-room-score-view > *,
.match-room-lineup-grid > * {
  min-width: 0;
}

.match-room h2,
.match-room h3,
.match-room h4,
.match-room p,
.match-room label,
.match-room legend,
.match-room li,
.match-room small,
.match-room .text-muted {
  color: inherit;
}

.match-room .text-muted,
.match-room small,
.match-room-game-meta,
.match-room-section-heading p {
  color: var(--match-room-muted) !important;
}

.match-room-section-heading {
  display: grid;
  gap: 0.25rem;
}

.match-room-section-heading h2,
.match-room-section-heading p,
.match-room-panel-heading h3,
.match-room-panel-heading p {
  margin: 0;
}

.match-room-panel,
.match-room-next,
.match-room-scoreboard,
.match-room-round-summary,
.match-room-game,
.match-room-finder {
  color: var(--match-room-ink);
  background: var(--match-room-surface);
  border: 1px solid var(--match-room-border);
  border-radius: 0.7rem;
  box-shadow: none;
}

.match-room-panel,
.match-room-next {
  padding: 1rem;
}

.match-room-panel.card {
  padding: 0;
}

.match-room-panel-heading,
.match-room-game-heading,
.match-room-table-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.match-room-panel-heading {
  margin-bottom: 0.75rem;
}

.match-room-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.55rem;
  color: var(--match-room-muted);
  background: var(--match-room-surface-raised);
  border: 1px solid var(--match-room-border);
  border-radius: 0.3rem;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.match-room-state-live {
  color: #261d00;
  background: var(--match-room-live);
  border-color: var(--match-room-live);
}

.match-room-state-complete {
  color: var(--match-room-action-ink);
  background: var(--match-room-action);
  border-color: var(--match-room-action);
}

[data-bs-theme="light"] .match-room-state-live,
[data-bs-theme="light"] .match-room-state-complete {
  color: #ffffff;
}

.match-room-scoreboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
  padding: 1rem;
  border-left: 0.3rem solid var(--match-room-live);
}

.match-room-scoreboard-main,
.match-room-scoreboard > div {
  min-width: 0;
}

.match-room-section-title,
.match-room-scoreboard h2 {
  margin: 0 0 0.4rem;
  color: var(--match-room-muted);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.match-room-total-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  line-height: 1.15;
}

.match-room-total-line > span:first-child,
.match-room-total-line > span:last-child {
  min-width: 0;
  overflow: hidden;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-room-total-line > span:last-child {
  text-align: right;
}

.match-room-total-line strong {
  color: var(--match-room-ink);
  font-size: clamp(1.55rem, 7vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.match-room-progress-copy {
  display: grid;
  justify-items: end;
  gap: 0.2rem;
  color: var(--match-room-muted);
  font-size: 0.85rem;
  text-align: right;
}

.match-room-progress-copy strong {
  color: var(--match-room-ink);
}

.match-room-leader-copy {
  margin: 0.35rem 0 0;
  color: var(--match-room-muted);
  font-size: 0.9rem;
  font-weight: 750;
}

.match-room-handicap-note {
  margin: 0.15rem 0 0;
  color: var(--match-room-muted);
  font-size: 0.82rem;
}

.match-room-handicap-note:empty {
  display: none;
}

[data-match-room-total-line][data-leader="home"] [data-match-room-home-total],
[data-match-room-total-line][data-leader="away"] [data-match-room-away-total] {
  color: var(--match-room-action);
}

.match-room-live-updated {
  border-radius: 0.25rem;
  animation: match-room-live-update 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes match-room-live-update {
  0% { background-color: color-mix(in srgb, var(--match-room-live) 35%, transparent); }
  100% { background-color: transparent; }}

@media (prefers-reduced-motion: reduce) {
  .match-room-live-updated {
    animation: none;
  }}

.match-room-filter-nav {
  display: flex;
  gap: 0.5rem;
  max-width: 100%;
  overflow-x: auto;
  padding: 0.15rem 0.1rem 0.4rem;
  scrollbar-width: thin;
}

.match-room-filter-nav > * {
  flex: 0 0 auto;
}

.match-room-round-summary .card-body,
.match-room-game .card-body,
.match-room-finder .card-body {
  padding: 1rem;
}

.match-room-round-summary h3,
.match-room-round-summary p {
  margin-top: 0;
}

.match-room .progress {
  height: 0.45rem;
  background: var(--match-room-surface-raised);
}

.match-room .progress-bar {
  background: var(--match-room-action);
}

/* Score stage: one column of cards on phones; the wrappers become the desktop columns. */
.match-room-score-view {
  display: grid;
  gap: 1rem;
}

.match-room-score-context,
.match-room-score-main {
  display: contents;
}

.match-room-score-context > *,
.match-room-score-main > * {
  min-width: 0;
}

.match-room-empty-tables {
  margin: 0 0 0.6rem;
  color: var(--match-room-muted);
}

.match-room-round-by-round .match-room-panel-heading p {
  margin: 0;
  color: var(--match-room-muted);
  font-size: 0.85rem;
}

.match-room-active-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 0.65rem;
}

.match-room-table-link {
  display: grid;
  align-content: center;
  gap: 0.45rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.85rem;
  color: var(--match-room-ink);
  background: var(--match-room-surface-raised);
  border: 1px solid var(--match-room-border);
  border-left: 0.25rem solid var(--match-room-live);
  border-radius: 0.55rem;
  overflow-wrap: anywhere;
}

.match-room-table-link:hover {
  color: var(--match-room-ink);
  border-color: var(--match-room-action);
}

.match-room [data-match-room-player-totals] {
  display: grid;
  gap: 0.45rem;
  padding-left: 1.15rem;
  color: var(--match-room-muted);
}

.match-room-next {
  border-left: 0.3rem solid var(--match-room-action);
}

.match-room-lineup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 0.85rem;
  margin-top: 1rem;
}

.match-room-lineup-form,
.match-room-field {
  display: grid;
  gap: 0.45rem;
}

.match-room-lineup-form {
  gap: 0.75rem;
}

.match-room-field label,
.match-room .form-label,
.match-room legend {
  margin: 0;
  color: var(--match-room-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.match-room .form-control,
.match-room .form-select,
.match-room .form-check-input {
  color: var(--match-room-ink);
  background-color: var(--match-room-surface-raised);
  border-color: var(--match-room-border);
}

.match-room .form-control::placeholder {
  color: var(--match-room-muted);
  opacity: 1;
}

.match-room .form-control:disabled,
.match-room .form-select:disabled,
.match-room .form-check-input:disabled {
  opacity: 0.7;
}

.match-room-game-heading {
  align-items: center;
}

.match-room-game-heading h2,
.match-room-game-meta {
  margin: 0;
  overflow-wrap: anywhere;
}

.match-room-game-meta {
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.match-room-score-entry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.match-room-score-field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.match-room-score-field .form-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-room-score-field .form-control {
  min-height: 4rem;
  padding: 0.45rem;
  font-size: 2rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.match-room-game-actions,
.match-room-dialog-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.match-room-dialog-actions {
  justify-content: flex-end;
}

.match-room-save-state {
  color: var(--match-room-muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.match-room-save-state[data-save-state="saving"],
.match-room-save-state[data-save-state="queued"] {
  color: var(--match-room-live);
}

.match-room-save-state[data-save-state="error"] {
  color: var(--match-room-danger);
}

.match-room-runout-sheet {
  position: fixed;
  right: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;
  width: min(calc(100% - 1rem), 34rem);
  max-height: calc(100dvh - 1rem - env(safe-area-inset-top));
  margin-inline: auto !important;
  padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  color: var(--match-room-ink);
  background: var(--match-room-surface);
  border-color: var(--match-room-border);
  overflow-y: auto;
}

.match-room-runout-sheet .form-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.55rem 0.65rem 0.55rem 2.35rem;
  background: var(--match-room-surface-raised);
  border: 1px solid var(--match-room-border);
  border-radius: 0.5rem;
}

.match-room-runout-sheet .form-check + .form-check {
  margin-top: 0.45rem;
}

.match-room-runout-sheet .btn-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.9;
}

[data-bs-theme="light"] .match-room-runout-sheet .btn-close {
  filter: none;
}

.match-room-finder,
.match-room-payment-row {
  background: var(--match-room-surface);
}

.match-room-pending-options {
  max-height: 21rem;
  padding-right: 0.2rem;
  overflow-y: auto;
}

.match-room-pending-option {
  flex-shrink: 0;
}

.match-room-pending-option,
.match-room-payment-row {
  min-height: 44px;
  color: var(--match-room-ink);
  background: var(--match-room-surface-raised);
  border-color: var(--match-room-border) !important;
  overflow-wrap: anywhere;
}

.match-room-pending-option:has(input:checked) {
  border-color: var(--match-room-action) !important;
}

.match-room-back-link,
.match-room .match-room-tool-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 0.75rem;
  padding: 0.35rem 1rem;
  color: var(--match-room-ink);
  font-weight: 750;
  text-decoration: none;
  background: var(--match-room-surface-raised);
  border: 1px solid var(--match-room-border);
  border-radius: 0.65rem;
}

.match-room-back-link:hover,
.match-room-back-link:active,
.match-room .match-room-tool-back:hover,
.match-room .match-room-tool-back:active {
  color: var(--match-room-ink);
  border-color: var(--match-room-action);
}

.match-room-table-link-open {
  border-left-color: var(--match-room-action);
}

.match-room-table-action {
  color: var(--match-room-action);
}

.match-room-finder .form-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  margin-right: 0.75rem;
}

.match-room-finder .form-check-input {
  flex: 0 0 auto;
  margin-top: 0;
}

.match-room-finder .form-check-label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}

.match-room-round-totals-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--match-room-ink);
  --bs-table-border-color: var(--match-room-border);
  font-variant-numeric: tabular-nums;
}

.match-room-round-totals-table small {
  color: var(--match-room-muted);
}

.match-room-round-totals-table [data-state="pending"] {
  --bs-table-color: var(--match-room-muted);
}

.match-room-total-list .list-group-item {
  color: var(--match-room-ink);
  background: var(--match-room-surface);
  border-color: var(--match-room-border);
}

.match-room-total-list [data-player-total-trigger],
.match-room-total-list [data-round-game] {
  color: inherit;
  min-height: 44px;
}

.match-room-round-header {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: 0.35rem;
}

.match-room-round-header .match-room-state {
  margin-left: auto;
}

.match-room-round-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  min-height: 2.4rem;
  font-size: 1.35rem;
  line-height: 1;
  text-decoration: none;
}

a.match-room-round-step {
  color: var(--match-room-ink);
  background: var(--match-room-surface-raised);
  border: 1px solid var(--match-room-border);
  border-radius: 0.5rem;
}

a.match-room-round-step:hover,
a.match-room-round-step:active {
  color: var(--match-room-ink);
  border-color: var(--match-room-action);
}

.match-room-round-picker-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.4rem;
  padding: 0 0.75rem;
  color: inherit;
  font: inherit;
  background: var(--match-room-surface-raised);
  border: 1px solid var(--match-room-border);
  border-radius: 0.5rem;
}

.match-room-round-picker-toggle:hover,
.match-room-round-picker-toggle:active {
  border-color: var(--match-room-action);
}

.match-room-round-picker-toggle[aria-expanded="true"] .match-room-mobile-summary-caret-glyph {
  transform: rotate(180deg);
}

.match-room-round-picker-toggle .match-room-mobile-summary-caret-glyph {
  color: var(--match-room-muted);
  font-size: 0.8rem;
}

.match-room-mobile-summary-caret-glyph {
  display: inline-block;
}

.match-room-add-table {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  color: var(--match-room-ink);
  font: inherit;
  font-weight: 750;
  text-align: left;
  background: var(--match-room-surface-raised);
  border: 1px dashed var(--match-room-border);
  border-radius: 0.65rem;
}

.match-room-add-table small {
  color: var(--match-room-muted);
  font-weight: 600;
}

.match-room-add-table:hover,
.match-room-add-table:active {
  border-color: var(--match-room-action);
}

.match-room-disclosure-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  margin-top: 0.75rem;
  padding: 0.55rem 0.85rem;
  color: var(--match-room-ink);
  font: inherit;
  text-align: left;
  background: var(--match-room-surface-raised);
  border: 1px solid var(--match-room-border);
  border-radius: 0.65rem;
}

.match-room-disclosure-row:hover,
.match-room-disclosure-row:active {
  border-color: var(--match-room-action);
}

.match-room-disclosure-copy {
  display: grid;
  gap: 0.05rem;
}

.match-room-disclosure-copy strong {
  font-size: 0.9rem;
}

.match-room-disclosure-copy small {
  color: var(--match-room-muted);
}

.match-room-disclosure-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  margin-left: auto;
  color: var(--match-room-ink);
  background: var(--match-room-bg);
  border-radius: 999px;
  font-size: 0.75rem;
}

.match-room-disclosure-row[aria-expanded="true"] .match-room-mobile-summary-caret-glyph {
  transform: rotate(180deg);
}

.match-room-round-totals-table [data-round-total-link] {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--match-room-muted);
}

.match-room-player-detail .list-group-item {
  color: var(--match-room-ink);
  background: var(--match-room-surface);
  border-color: var(--match-room-border);
}

.match-room-more {
  min-width: 0;
}

.match-room .match-room-tool-link,
.match-room .match-room-member-row,
.team-members-panel .match-room-member-row,
.match-room .match-room-tool-back {
  min-height: 44px;
}

.match-room .match-room-tool-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  color: var(--match-room-ink);
  background: var(--match-room-surface-raised);
  border: 1px solid var(--match-room-border);
  border-radius: 0.65rem;
  text-decoration: none;
}

.match-room .match-room-tool-link:hover,
.match-room .match-room-tool-link:active {
  color: var(--match-room-ink);
  border-color: var(--match-room-action);
}

.match-room .match-room-tool-link > span:first-child {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.match-room .match-room-tool-link > span[aria-hidden="true"] {
  flex: 0 0 auto;
  color: var(--match-room-action);
  font-size: 1.5rem;
  line-height: 1;
}

.match-room .match-room-tool-form,
.team-members-panel .match-room-tool-form,
.match-room .match-room-member-list,
.team-members-panel .match-room-member-list {
  display: grid;
  gap: 0.85rem;
}

.match-room .match-room-tool-screen {
  min-width: 0;
  padding-bottom: calc(var(--match-room-dock-clearance) + env(safe-area-inset-bottom));
}

.match-room-content:has(.match-room-tool-screen) {
  padding-bottom: 0;
}

.match-room .match-room-tool-context {
  color: var(--match-room-ink);
  font-weight: 750;
}

.match-room .match-room-substitution-round-fields {
  display: grid;
  gap: 0.85rem;
}

.match-room .match-room-substitution-round-fields[hidden] {
  display: none;
}

.match-room .match-room-member-list,
.team-members-panel .match-room-member-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.match-room .match-room-member-row,
.team-members-panel .match-room-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.65rem 0;
  color: var(--match-room-ink);
  background: transparent;
  border-bottom: 1px solid var(--match-room-border);
}

.match-room .match-room-member-row:last-child {
  border-bottom: 0;
}

.match-room .match-room-member-row,
.team-members-panel .match-room-member-row > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.match-room .match-room-member-actions,
.team-members-panel .match-room-member-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.6rem;
}

.match-room .match-room-member-actions,
.team-members-panel .match-room-member-actions form {
  flex: 0 0 auto;
}

.match-room-rail {
  display: contents;
}

.match-room-dock a small {
  display: none;
}

.match-room-dock {
  position: fixed;
  z-index: var(--match-room-z-dock);
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 72rem);
  min-height: 44px;
  margin-inline: auto;
  padding: 0.55rem max(0.55rem, env(safe-area-inset-right)) max(0.85rem, env(safe-area-inset-bottom)) max(0.55rem, env(safe-area-inset-left));
  background: var(--match-room-surface);
  border-top: 1px solid var(--match-room-border);
  box-shadow: 0 -0.6rem 1.4rem rgba(3, 15, 11, 0.2);
}

.match-room-dock a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.55rem 0.25rem;
  color: var(--match-room-muted);
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
}

.match-room-dock a[aria-current="page"] {
  color: var(--match-room-action-ink);
  background: var(--match-room-action);
}

.match-room .btn,
.match-room .form-control,
.match-room .form-select,
.match-room .form-check-label,
.match-room-primary-action,
.match-room-secondary-action {
  min-height: 44px;
}

.match-room .btn-primary {
  color: var(--match-room-action-ink);
  background: var(--match-room-action);
  border-color: var(--match-room-action);
  font-weight: 850;
}

.match-room .btn-primary:hover,
.match-room .btn-primary:active {
  color: var(--match-room-action-ink);
  background: var(--match-room-action-hover);
  border-color: var(--match-room-action-hover);
}

.match-room .btn-outline-primary,
.match-room .btn-outline-secondary,
.match-room .btn-link {
  color: var(--match-room-ink);
  border-color: var(--match-room-border);
}

.match-room .text-success {
  color: var(--match-room-success) !important;
}

.match-room .text-danger {
  color: var(--match-room-danger) !important;
}

.match-room .btn-outline-success {
  color: var(--match-room-success);
  border-color: var(--match-room-success);
}

.match-room .btn-outline-success:hover,
.match-room .btn-outline-success:active {
  color: #102000;
  background: var(--match-room-success);
  border-color: var(--match-room-success);
}

[data-bs-theme="light"] .match-room .btn-outline-success:hover,
[data-bs-theme="light"] .match-room .btn-outline-success:active {
  color: #ffffff;
}

.match-room .btn-outline-primary:hover,
.match-room .btn-outline-secondary:hover,
.match-room .btn-link:hover {
  color: var(--match-room-bg);
  background: var(--match-room-ink);
  border-color: var(--match-room-ink);
}

.match-room :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--match-room-focus);
  outline-offset: 3px;
  box-shadow: none;
}

@media (max-width: 767.98px) {
  /* Keyed on the stage rail, not on .match-room: the landing page embeds the
     room as a product shot, and matching that stripped its page gutters. */
  .page-shell:has(.match-room-rail) {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  body:has(.match-room-rail) .app-navbar {
    position: static !important;
  }

  .match-room {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .match-room-header {
    display: none;
  }

  .match-room-mobile-summary {
    position: sticky;
    z-index: var(--match-room-z-sticky);
    top: 0;
    display: grid;
    gap: 0.45rem;
    padding: 0.8rem max(0.85rem, env(safe-area-inset-right)) 0.7rem max(0.85rem, env(safe-area-inset-left));
    color: var(--match-room-ink);
    background: var(--match-room-surface);
    border-bottom: 1px solid var(--match-room-border);
    box-shadow: 0 0.35rem 0.7rem rgba(3, 15, 11, 0.22);
  }

  .match-room-mobile-summary-toggle {
    display: grid;
    gap: 0.45rem;
    width: 100%;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
    background: transparent;
    border: 0;
  }

  .match-room-mobile-summary-caret {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-self: center;
    padding: 0.3rem 0.85rem;
    color: var(--match-room-ink);
    background: var(--match-room-surface-raised);
    border: 1px solid var(--match-room-border);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  .match-room-mobile-summary-toggle[aria-expanded="true"] .match-room-mobile-summary-caret-glyph {
    transform: rotate(180deg);
  }

  .match-room-mobile-summary [data-round-totals-panel] {
    max-height: 45vh;
    padding-top: 0.45rem;
    overflow-y: auto;
    border-top: 1px solid var(--match-room-border);
  }

  .match-room-mobile-summary-score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
  }

  .match-room-mobile-team {
    min-width: 0;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .match-room-mobile-team-away {
    text-align: right;
  }

  .match-room-mobile-score {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
  }

  .match-room-mobile-score strong {
    font-size: 2.1rem;
    line-height: 1;
  }

  .match-room-mobile-summary .match-room-handicap-note {
    margin: 0;
    text-align: center;
  }

  .match-room-mobile-summary-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--match-room-muted);
    font-size: 0.82rem;
  }

  .match-room-mobile-summary-meta > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .match-room-mobile-summary-meta strong {
    color: var(--match-room-ink);
  }

  .match-room-scoreboard {
    display: none;
  }

  .match-room-view-state span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .match-room-content {
    padding-inline: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-bottom: calc(var(--match-room-dock-clearance) + env(safe-area-inset-bottom));
  }

  .match-room-lineup-grid,
  .match-room-active-grid {
    grid-template-columns: 1fr;
  }

  /* Phones stay single-pane: a focused game replaces the overview. */
  .match-room-content:has(.match-room-game) > .match-room-score-view {
    display: none;
  }

  /* The sticky summary already carries round-by-round totals on phones. */
  .match-room-round-by-round {
    display: none;
  }

  .match-room-game-actions > .btn,
  .match-room-dialog-actions > .btn {
    flex: 1 1 8rem;
  }

  .match-room-save-state {
    flex: 1 1 100%;
    order: 3;
  }}

/* ---- Match room desktop console. Scoped to the real room (it owns a dock) so the landing replica keeps its look. ---- */
@media (min-width: 768px) {
  /* A stage rail down the left; the column is painted by the room so it runs the full height. */
  .match-room:has(> .match-room-rail) {
    --match-room-dock-clearance: 0;
    --match-room-rail-width: 13.5rem;
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    align-items: start;
    background:
      linear-gradient(
        to right,
        var(--match-room-surface) 0 var(--match-room-rail-width),
        var(--match-room-border) var(--match-room-rail-width) calc(var(--match-room-rail-width) + 1px),
        var(--match-room-bg) calc(var(--match-room-rail-width) + 1px)
      );
  }

  .match-room-rail {
    display: grid;
    position: sticky;
    z-index: 3;
    top: 3.75rem;
    grid-column: 1;
    align-content: start;
    gap: 1.25rem;
    padding: 1.25rem 0.85rem;
  }

  .match-room:has(> .match-room-rail) > .match-room-mobile-summary,
  .match-room:has(> .match-room-rail) > .match-room-content {
    grid-column: 2;
  }

  .match-room-rail .match-room-header {
    display: grid;
    gap: 0.4rem;
    padding: 0 0.35rem;
    background: transparent;
    border: 0;
  }

  .match-room-rail .match-room-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 0.1rem;
    font-size: 1.15rem;
    line-height: 1.15;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .match-room-rail .match-room-title > span {
    min-width: 0;
    text-align: left;
  }

  .match-room-rail .match-room-versus {
    font-size: 0.7rem;
  }

  .match-room-view-state {
    display: none;
  }

  .match-room-rail .match-room-readonly {
    margin: 0;
    font-size: 0.8rem;
  }

  /* The stage dock becomes the rail's vertical stage list with per-stage state. */
  .match-room-rail .match-room-dock {
    position: static;
    z-index: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border-top: 0;
    box-shadow: none;
  }

  .match-room-rail .match-room-dock a {
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    text-align: left;
  }

  .match-room-rail .match-room-dock a small {
    display: inline;
    flex: 0 0 auto;
    color: var(--match-room-muted);
    font-size: 0.74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* `.match-room small` forces the muted colour with !important; the active pill needs its ink. */
  .match-room-rail .match-room-dock a[aria-current="page"] small {
    color: var(--match-room-action-ink) !important;
  }

  .match-room-rail .match-room-dock a:hover:not([aria-current="page"]) {
    color: var(--match-room-ink);
    background: var(--match-room-surface-raised);
  }

  .match-room-content {
    padding-bottom: clamp(0.85rem, 2.5vw, 1.5rem);
  }

  /* Scoreboard reads as one scoreline and stays in view below the app navbar. */
  .match-room-content .match-room-scoreboard {
    position: sticky;
    z-index: 2;
    top: 3.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    box-shadow: 0 0.5rem 1.2rem rgba(3, 15, 11, 0.22);
  }

  .match-room-content .match-room-scoreboard-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 1.25rem;
  }

  .match-room-content .match-room-scoreboard h2 {
    flex-basis: 100%;
    margin-bottom: 0.2rem;
  }

  .match-room-content .match-room-total-line {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    gap: 0.6rem;
  }

  .match-room-active-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Runout bonuses: a centred dialog instead of a phone bottom sheet. */
  .match-room-runout-sheet {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(calc(100vw - 2rem), 28rem);
    max-height: calc(100dvh - 2rem);
    padding-bottom: 1rem !important;
    transform: translate(-50%, -50%);
  }
}

@media (min-width: 992px) {
  /* Two columns: tables, next game, and the focused game on the left; round context on the right. */
  .match-room-content:has(> .match-room-score-view) {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "board board"
      "main context";
    align-items: start;
  }

  .match-room-content:has(> .match-room-game) {
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "board board"
      "game context"
      "main context";
  }

  .match-room-score-view {
    display: contents;
  }

  .match-room-content > .match-room-game {
    grid-area: game;
  }

  .match-room-score-view > .match-room-scoreboard {
    grid-area: board;
  }

  .match-room-score-main {
    grid-area: main;
    display: grid;
    gap: 1rem;
    align-content: start;
  }

  .match-room-score-context {
    grid-area: context;
    display: grid;
    gap: 1rem;
    align-content: start;
  }

  .match-room-active-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Round games are always in view beside the tables, so the disclosure reads as a heading. */
  .match-room-score-context .match-room-disclosure-row {
    cursor: default;
  }
}

@media (max-width: 479.98px) {
  .match-room-header {
    align-items: start;
  }

  .match-room-view-state {
    min-width: 0;
  }

  .match-room-scoreboard {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .match-room-progress-copy {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    text-align: left;
  }

  .match-room-progress-copy small {
    text-align: right;
  }

  .match-room-score-entry {
    gap: 0.55rem;
  }

  .match-room-score-field .form-control {
    min-height: 4.5rem;
  }

  .match-room-panel-heading,
  .match-room-game-heading {
    align-items: flex-start;
  }}

@media (prefers-reduced-motion: reduce) {
  .match-room *,
  .match-room *::before,
  .match-room *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }}

/*
 * Leaderboard as a standings sheet. Hairlines instead of stripes and a dark
 * band; the columns that decide the order (matches won, games won, average)
 * in ink while the rest sit muted; a large rank numeral; and one felt rule on
 * the leader so green coverage stays near zero.
 */
.leaderboard-sheet {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  margin-bottom: 0;
}

.leaderboard-sheet > :not(caption) > * > * {
  padding: 0.55rem 0.5rem;
  color: var(--app-muted);
  background: transparent;
  border-bottom: 1px solid var(--app-border);
}

.leaderboard-sheet thead th {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--app-muted);
  border-bottom: 2px solid var(--app-border);
}

.leaderboard-sheet thead .leaderboard-bands th {
  padding-bottom: 0.1rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 0;
}

.leaderboard-sheet thead .leaderboard-bands th.leaderboard-band {
  border-bottom: 1px solid var(--app-border);
}

.leaderboard-sheet .leaderboard-sep {
  border-left: 1px solid var(--app-border);
}

.leaderboard-sheet .leaderboard-key {
  color: var(--app-text);
  font-weight: 600;
}

.leaderboard-sheet thead th.leaderboard-key {
  font-weight: 700;
}

.leaderboard-sheet .leaderboard-rank-head {
  width: 2.6rem;
}

.leaderboard-sheet .leaderboard-rank {
  padding-left: 0.6rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--app-text);
  border-left: 3px solid transparent;
}

.leaderboard-sheet .leaderboard-lead .leaderboard-rank {
  border-left-color: var(--app-action);
}

.leaderboard-sheet .leaderboard-name {
  font-weight: 700;
  color: var(--app-text);
  white-space: nowrap;
}

.leaderboard-sheet .leaderboard-pts {
  font-weight: 700;
  color: var(--app-text);
}

.leaderboard-sheet tbody tr:last-child > * {
  border-bottom: 0;
}

/*
 * Reading aids on desktop: hover lifts the row you are tracing, a click (or
 * Enter / Space, rows are focusable) pins it until you click again, and the
 * signed-in person's own row is tinted so they find themselves at a glance.
 */
[data-leaderboard-pins] tbody tr[data-leaderboard-row] {
  cursor: pointer;
}

@media (hover: hover) {
  .leaderboard-sheet tbody tr[data-leaderboard-row]:hover > * {
    background: var(--app-surface-muted);
  }}

.leaderboard-sheet tbody tr[data-leaderboard-row]:focus-visible {
  outline: 2px solid var(--app-action);
  outline-offset: -2px;
}

.leaderboard-sheet .leaderboard-pinned > * {
  background: var(--app-tint-neutral);
  color: var(--app-text);
}

.leaderboard-sheet .leaderboard-pinned .leaderboard-rank {
  border-left-color: var(--app-text);
}

.leaderboard-sheet .leaderboard-lead.leaderboard-pinned .leaderboard-rank {
  border-left-color: var(--app-action);
}

.leaderboard-sheet .leaderboard-you > * {
  background: var(--app-tint-success);
}

.leaderboard-you-label {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--app-tint-success-ink);
  background: var(--app-tint-success);
  border: 1px solid var(--app-action);
  border-radius: 0.4rem;
}

.leaderboard-phone-row.leaderboard-you summary {
  background: var(--app-tint-success);
  border-radius: 0.5rem;
}

/* Repeated per row, so a quiet tint, and none at all for a zero. */
.leaderboard-chip {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  color: var(--app-tint-success-ink);
  background: var(--app-tint-success);
  border-radius: 0.4rem;
}

.leaderboard-chip-zero {
  font-weight: 400;
  color: var(--app-muted);
  background: transparent;
}

/*
 * Leaderboard on a phone. The ten-column sheet fits only by zooming to about
 * 6.6px, so under 768px the standings become a disclosure list instead: rank,
 * team, record and points stay visible, the rest opens per row.
 */
.leaderboard-phone,
.payments-phone {
  display: none;
}

.leaderboard-phone-row,
.payments-phone-row {
  border-bottom: 1px solid var(--app-border);
}

.leaderboard-phone-row:last-child,
.payments-phone-row:last-child {
  border-bottom: 0;
}

.leaderboard-phone-row summary,
.payments-phone-row summary {
  display: grid;
  grid-template-columns: 2rem 1fr auto 1.9rem;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.45rem 0.15rem 0.45rem 0;
  cursor: pointer;
  list-style: none;
}

.leaderboard-phone-row summary::-webkit-details-marker,
.payments-phone-row summary::-webkit-details-marker {
  display: none;
}

.leaderboard-phone-rank {
  padding-left: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-left: 3px solid transparent;
}

.leaderboard-phone-row.leaderboard-lead .leaderboard-phone-rank {
  border-left-color: var(--app-action);
}

.leaderboard-phone-team {
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.leaderboard-phone-record {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--app-muted);
}

.leaderboard-phone-points {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.leaderboard-phone-chevron,
.payments-phone-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  transition: transform 140ms ease;
}

.leaderboard-phone-row[open] .leaderboard-phone-chevron,
.payments-phone-row[open] .payments-phone-chevron {
  transform: rotate(180deg);
}

.leaderboard-phone-detail,
.payments-phone-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: 0.4rem;
  padding: 0 0.15rem 0.7rem 2.6rem;
}

.leaderboard-phone-detail div,
.payments-phone-detail > div {
  padding: 0.4rem 0.45rem;
  background: var(--app-surface-muted);
  border-radius: 0.45rem;
}

.leaderboard-phone-detail b,
.payments-phone-detail b {
  display: block;
  font-variant-numeric: tabular-nums;
}

.leaderboard-phone-detail span,
.payments-phone-detail > div > span {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-muted);
}

@media (prefers-reduced-motion: reduce) {
  .leaderboard-phone-chevron {
    transition: none;
  }}

@media (max-width: 767.98px) {
  .leaderboard-table-wrap,
  .payments-table-wrap {
    display: none;
  }

  .leaderboard-phone,
  .payments-phone {
    display: block;
  }}

/*
 * Payments on a phone. Eight columns per envelope is a lot of card to scroll
 * past when you are looking for the one match that is short, so each row
 * collapses to match, status and what the captain handed in, and opens to the
 * full breakdown. Same disclosure the standings use, minus the rank column.
 */
.payments-phone-row summary {
  grid-template-columns: minmax(0, 1fr) auto 1.9rem;
  padding-left: 0.5rem;
}

.payments-phone-match {
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.payments-phone-meta {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--app-muted);
}

.payments-phone-detail {
  padding-left: 0.5rem;
}

/* The review link is an action, not a figure, so it spans instead of tiling. */
.payments-phone-detail .btn {
  grid-column: 1 / -1;
  justify-self: start;
}

/* A night of five wins, marked where it happens: the match room's totals. */
.match-room-five-zero {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  color: var(--match-room-action-ink);
  background: var(--match-room-action);
  border-radius: 0.4rem;
}

/* Bootstrap ships .btn-close at 32x32, below the touch minimum. */
.app-side-menu .btn-close {
  min-width: 44px;
  min-height: 44px;
  background-position: center;
}

@media (max-width: 767.98px) {
  .form-select,
  .form-control {
    min-height: 44px;
  }

  .btn {
    min-height: 44px;
  }

  .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The switch itself is 16px; the row and its label carry the tap area. */
  .form-check {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .form-check-label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }}

/*
 * Wide admin tables scroll sideways inside .table-responsive, which pushes the
 * later columns and row actions off a phone. Pinning the identity column keeps
 * every value attached to the row it belongs to.
 */
.table-freeze th:first-child,
.table-freeze td:first-child {
  position: sticky;
  left: 0;
  min-width: 7.5rem;
  z-index: 2;
  background: var(--app-surface-solid);
  box-shadow: 1px 0 0 var(--app-border);
}

.table-freeze thead th:first-child {
  z-index: 3;
  background: var(--app-bg-strong);
}

/*
 * Stacked admin tables.
 *
 * A five-to-eleven column admin table is the right shape on a desktop and the
 * wrong one on a phone: `.table-responsive` turns it into a sideways drag, so
 * most of every row sits off the right edge and `.table-freeze` only rescues
 * the identity column. Below the md breakpoint each `<tr>` becomes its own
 * record card instead -- `.stack-title` is the card's heading and every other
 * cell is a label/value line whose label comes from `data-label`, so the phone
 * names each value with the same word the desktop column header uses.
 *
 * One table serves both, so the desktop layout is untouched and there is no
 * second markup path to keep in sync.
 */
@media (max-width: 767.98px) {
  .table-stack {
    /* Nothing is wider than the screen any more, so the scroll frame would
       only draw a redundant box around the cards. */
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }

  .table-stack .table {
    min-width: 0;
  }

  .table-stack thead {
    /* Hidden from sight, not from the accessibility tree: a screen reader
       walking the table still needs the column names. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table-stack .table,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
  }

  .table-stack tbody tr {
    margin-bottom: 0.7rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    box-shadow: var(--app-shadow-soft);
  }

  .table-stack tbody tr:last-child {
    margin-bottom: 0;
  }

  .table-stack tbody td {
    /*
     * The label is absolutely positioned rather than a grid or flex sibling:
     * a cell can hold several elements (roles stacks two spans, the actions
     * cell a row of forms) and every one of them would become its own grid
     * item, so a badge would stretch to the column width and a two-span cell
     * would split across the label. Out of flow, the cell's own content lays
     * itself out exactly as it does in the table.
     */
    position: relative;
    display: block;
    padding: 0.5rem 0.85rem 0.5rem 9rem;
    border: 0;
    overflow-wrap: anywhere;
    text-align: right;
    text-wrap: balance;
  }

  .table-stack tbody td::before {
    content: attr(data-label);
    position: absolute;
    top: 0.5rem;
    left: 0.85rem;
    width: 7.6rem;
    color: var(--app-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.45;
    text-align: left;
    text-transform: uppercase;
  }

  .table-stack tbody td:last-child {
    padding-bottom: 0.7rem;
  }

  /*
   * Three cells show no label: the one that names the record, an actions cell
   * (marked `data-label=""`, because a row of buttons needs the full width
   * and describes itself), and a colspan empty-state row, which is a sentence
   * rather than a record. All three are one full-width block.
   */
  .table-stack tbody td.stack-title,
  .table-stack tbody td[data-label=""],
  .table-stack tbody td[colspan] {
    padding-left: 0.85rem;
    text-align: left;
  }

  .table-stack tbody td.stack-title::before,
  .table-stack tbody td[data-label=""]::before,
  .table-stack tbody td[colspan]::before {
    content: none;
  }

  .table-stack tbody td.stack-title {
    padding-top: 0.7rem;
    padding-bottom: 0.55rem;
    color: var(--app-text);
    font-size: 1.02rem;
    font-weight: 800;
    border-bottom: 1px solid var(--app-border);
  }

  /*
   * An editable cell puts its label above and hands the control the full card
   * width. A text input squeezed into the value column is about 11rem wide on
   * a phone, which is not enough to read an address you are correcting.
   */
  .table-stack tbody td:not(.stack-title):has(.form-control),
  .table-stack tbody td:not(.stack-title):has(.form-select) {
    padding-top: 1.75rem;
    padding-left: 0.85rem;
    text-align: left;
  }

  .table-stack tbody td:not(.stack-title):has(.form-control)::before,
  .table-stack tbody td:not(.stack-title):has(.form-select)::before {
    top: 0.6rem;
    width: auto;
  }

  /* The freeze and the season timeline both style a table that no longer
     exists at this width. */
  .table-stack.table-freeze tbody td:first-child {
    /* `relative`, not `static`: it un-sticks the cell and still anchors the
       absolutely positioned label. */
    position: relative;
    min-width: 0;
    background: transparent;
    box-shadow: none;
  }

  .table-stack .season-timeline-table {
    border-spacing: 0;
  }

  .table-stack .season-row > * {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .table-stack .season-row > .stack-title {
    padding-top: 0.7rem;
    border-bottom: 1px solid var(--app-border);
  }
}

/*
 * Landing replicas. Each product shot is the real screen's own markup and
 * classes (match room, leaderboard, roster, payments, stats), so the app's
 * stylesheet renders it and it follows the theme. These rules only strip
 * page-level chrome, keep the desktop layout at every width, and make the
 * shots decorative.
 */
.landing-replica {
  pointer-events: none;
  user-select: none;
}

.landing-replica-body {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
}

.landing-replica-page {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .landing-replica .match-room-header,
  .landing-replica .match-room-scoreboard {
    display: grid;
  }
}

/* The band is sticky in the real room; in a shot it would follow the scroll. */
.landing-replica .match-room-mobile-summary {
  position: static;
}

.landing-replica .match-room-title {
  font-size: clamp(1.25rem, 2.6vw, 2rem);
}

.landing-replica .match-room-total-line strong {
  font-size: clamp(1.55rem, 3vw, 2.4rem);
}

.landing-replica span.match-room-round-step {
  color: var(--match-room-ink);
  background: var(--match-room-surface-raised);
  border: 1px solid var(--match-room-border);
  border-radius: 0.5rem;
}

.landing-replica .match-room-round-picker-toggle .h5 {
  font-size: 1.1rem;
  font-weight: 700;
}

.landing-replica .match-room-round-summary .my-2 {
  color: var(--match-room-ink);
}

.landing-replica-h1 {
  margin: 0;
  color: var(--app-text);
  font-family: Geist, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.landing-replica .page-card {
  box-shadow: var(--app-shadow);
}

.landing-replica .table {
  margin-bottom: 0;
  font-size: 0.88rem;
}

.landing-replica .leaderboard-table-wrap td:nth-child(2) {
  white-space: nowrap;
}

@media (min-width: 992px) {
  .landing-replica-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*
 * Phone demo: the match room's score screen inside a device frame. The
 * room's phone layout lives in media queries, so the rules it needs at
 * desktop width are restated here under .landing-phone.
 */
/* The phone sits beside its copy, so this stop is no taller than the others. */
@media (min-width: 992px) {
  .landing-feature-section-phone {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }
}

.landing-feature-section-phone .landing-shot-frame {
  min-width: 0;
}

.landing-phone-shot {
  display: grid;
  justify-items: center;
  transform-origin: 50% 0;
}

.landing-phone {
  width: min(100%, 24rem);
  padding: 0.8rem;
  background: #0b0d0c;
  border-radius: 3rem;
  box-shadow: 0 1.5rem 3rem rgba(3, 15, 11, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.landing-phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 2.25rem;
}

.landing-phone .landing-phone-room {
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.landing-phone .match-room-mobile-summary {
  display: grid;
  gap: 0.45rem;
  padding: 1.4rem 0.85rem 0.7rem;
  background: var(--match-room-surface);
  border-bottom: 1px solid var(--match-room-border);
  box-shadow: 0 0.35rem 0.7rem rgba(3, 15, 11, 0.22);
}

.landing-phone .match-room-mobile-summary-toggle {
  display: grid;
  gap: 0.45rem;
  width: 100%;
}

.landing-phone .match-room-mobile-summary-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.landing-phone .match-room-mobile-team {
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-phone .match-room-mobile-team-away {
  text-align: right;
}

.landing-phone .match-room-mobile-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

.landing-phone .match-room-mobile-score strong {
  font-size: 2.1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.landing-phone .match-room-mobile-summary-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--match-room-muted);
  font-size: 0.82rem;
}

.landing-phone .match-room-mobile-summary-meta strong {
  color: var(--match-room-ink);
}

.landing-phone .match-room-mobile-summary-caret {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  color: var(--match-room-muted);
  background: var(--match-room-surface-raised);
  border: 1px solid var(--match-room-border);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.landing-phone .match-room-content {
  padding: 0.85rem 0.75rem 1rem;
}

.landing-phone .match-room-game-actions > .btn {
  flex: 1 1 8rem;
}

.landing-phone .match-room-save-state {
  flex: 1 1 100%;
  order: 3;
}

.landing-phone .match-room-score-field .form-control {
  min-height: 4.5rem;
}

.landing-phone .match-room-dock {
  position: static;
  width: 100%;
  padding-bottom: 1.4rem;
}

/*
 * Operator dashboard. Four collapsed sections behind the app disclosure row,
 * a hairline summary strip instead of tiles, and one health word per league:
 * only the exceptions carry a tint, so a healthy page stays quiet.
 */
.operator-dashboard {
  gap: 1.1rem;
}

.operator-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.operator-header h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.operator-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
}

.operator-strip > div {
  padding: 0.9rem 0;
}

.operator-strip > div + div {
  padding-left: 1.25rem;
  border-left: 1px solid var(--app-border);
}

.operator-strip dd {
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.operator-strip dt {
  margin-top: 0.3rem;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--app-muted);
}

.operator-strip-alert dd {
  color: var(--app-danger);
}

.operator-sections {
  display: grid;
  gap: 0.75rem;
}

.operator-count {
  margin-left: 0.35rem;
  font-weight: 500;
  color: var(--app-muted);
  font-variant-numeric: tabular-nums;
}

.operator-count-alert {
  color: var(--app-danger);
  font-weight: 600;
}

.operator-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.operator-chip-danger {
  background: var(--app-tint-danger);
  color: var(--app-tint-danger-ink);
}

.operator-chip-warning {
  background: var(--app-tint-warning);
  color: var(--app-tint-warning-ink);
}

.operator-chip-neutral {
  background: var(--app-tint-neutral);
  color: var(--app-tint-neutral-ink);
}

.operator-health-ok {
  color: var(--app-muted);
}

/* Queue rows: league, reason, one action. The stripe is the only colour. */
.operator-queue {
  display: grid;
}

.operator-queue-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--app-border);
}

.operator-queue-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.operator-queue-league {
  padding-left: 0.9rem;
  border-left: 3px solid transparent;
}

.operator-tone-danger .operator-queue-league {
  border-left-color: var(--app-danger);
}

.operator-tone-warning .operator-queue-league {
  border-left-color: var(--app-accent);
}

.operator-queue-why {
  font-size: 0.95rem;
}

.operator-queue-why .operator-chip {
  margin-right: 0.35rem;
}

/* The sheet: flagged rows get a faint wash, healthy rows nothing. */
/* The panel is surface-solid, so the frozen header cell must match it, not the page band. */
.operator-sheet.table-freeze thead th:first-child {
  background: var(--app-surface-solid);
}

.operator-table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--app-muted);
}

.table .operator-row-danger > td {
  background: color-mix(in srgb, var(--app-tint-danger) 45%, transparent);
}

.table .operator-row-warning > td {
  background: color-mix(in srgb, var(--app-tint-warning) 45%, transparent);
}

.operator-row-links {
  white-space: nowrap;
  text-align: right;
}

.operator-row-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.4rem;
  color: var(--app-muted);
  font-weight: 500;
  text-decoration: none;
}

/* One green word per row, not three: Dashboard is the primary destination. */
.operator-row-links a:first-child {
  color: var(--bs-link-color);
  font-weight: 600;
}

.operator-row-links a:hover,
.operator-row-links a:focus-visible {
  color: var(--app-text);
  text-decoration: underline;
}

/* Phone list: the leaderboard's details pattern, one row per league. */
/* Owner grouping on the operator dashboard: a quiet band that separates one
   customer's leagues from the next without competing with the health tones. */
.operator-owner-row th,
.operator-owner-heading {
  background: var(--app-surface-2, rgba(127, 127, 127, 0.08));
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  margin: 1rem 0 0.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.75rem;
}

.operator-owner-name {
  font-weight: 750;
}

.operator-owner-meta {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--app-muted);
}

.operator-phone {
  display: none;
}

.operator-phone-row {
  border-bottom: 1px solid var(--app-border);
}

.operator-phone-row:last-child {
  border-bottom: 0;
}

.operator-phone-row summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.9rem;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 0;
  cursor: pointer;
  list-style: none;
}

.operator-phone-row summary::-webkit-details-marker {
  display: none;
}

.operator-phone-row[open] summary .app-disclosure-chevron {
  transform: rotate(180deg);
}

.operator-phone-row.operator-row-danger summary {
  box-shadow: inset 3px 0 0 var(--app-danger);
  padding-left: 0.75rem;
}

.operator-phone-row.operator-row-warning summary {
  box-shadow: inset 3px 0 0 var(--app-accent);
  padding-left: 0.75rem;
}

.operator-phone-league {
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.operator-phone-league small {
  font-weight: 400;
}

.operator-phone-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem 0.75rem;
  padding: 0.25rem 0 0.9rem;
  font-size: 0.9rem;
}

.operator-phone-detail > div > b {
  display: block;
  font-variant-numeric: tabular-nums;
}

.operator-phone-detail > div > span {
  font-size: 0.78rem;
  color: var(--app-muted);
}

.operator-phone-latest,
.operator-phone-links {
  grid-column: 1 / -1;
}

.operator-phone-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.operator-phone-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  color: var(--app-text);
  font-weight: 500;
  text-decoration: none;
}

/* Activity, grouped by day. */
.operator-day {
  margin: 0.9rem 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--app-muted);
}

.operator-day:first-child {
  margin-top: 0;
}

.operator-act {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--app-border);
  font-size: 0.92rem;
}

.operator-act-time {
  color: var(--app-muted);
  font-variant-numeric: tabular-nums;
}

.operator-act-who {
  text-align: right;
  font-size: 0.85rem;
}

@media (max-width: 991.98px) {
  .operator-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operator-strip > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  .operator-sheet {
    display: none;
  }

  .operator-phone {
    display: block;
  }

  .operator-queue-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .operator-act {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  .operator-act-who {
    grid-column: 2;
    text-align: left;
  }
}
/*
 * The profile reads as your record first, the money second behind one closed
 * row, and the password change last. Three stacked cards said all three were
 * equally worth your attention; they are not.
 */
.profile-page {
  display: grid;
  gap: 0.75rem;
}

/*
 * One page-header shape for the player screens: title block on the left, a
 * single action on the right, both wrapping on a phone. Not .admin-page-header,
 * whose 3.4rem title belongs to the admin surfaces.
 */
.app-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.app-page-header h1 {
  margin: 0 0 0.15rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  /* A username is user data and can be one long unbroken string. */
  overflow-wrap: anywhere;
}

/*
 * Seven numbers, so the strip flows rather than holding a fixed column count:
 * a fixed grid leaves a dead cell on the last row at most widths.
 */
.profile-record {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.profile-record > div {
  padding: 0.6rem 0.7rem;
  background: var(--app-surface-solid);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
}

.profile-record dd {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.profile-record dt {
  margin-top: 0.3rem;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-muted);
  /* A 6rem tile would otherwise hyphenate "Runouts" into "Runo uts". */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

.profile-empty {
  margin: 0;
  padding: 1rem;
  color: var(--app-muted);
  background: var(--app-surface-solid);
  border: 1px solid var(--app-border);
  border-radius: 0.65rem;
}

/* Shaped like a disclosure row, but it leaves the page instead of opening. */
.profile-account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--app-surface-solid);
  border: 1px solid var(--app-border);
  border-radius: 0.65rem;
}

/* On a phone the copy claims the row and the button drops below it. */
.profile-account-row .app-disclosure-copy {
  flex: 1 1 14rem;
}

/*
 * Payment history, shared by the profile and My Stats: six columns where there
 * is room for them, one disclosure per night where there is not. The profile's
 * copy used to be an unwrapped table, so a phone scrolled the whole page
 * sideways to reach the status column.
 */
.payment-phone {
  display: none;
}

.payment-phone-row {
  border-bottom: 1px solid var(--app-border);
}

.payment-phone-row:last-child {
  border-bottom: 0;
}

.payment-phone-row summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.9rem;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 0;
  cursor: pointer;
  list-style: none;
}

.payment-phone-row summary::-webkit-details-marker {
  display: none;
}

.payment-phone-title {
  min-width: 0;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.payment-phone-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--app-muted);
  overflow-wrap: anywhere;
}

.payment-phone-status {
  font-size: 0.82rem;
  font-weight: 650;
  text-align: right;
}

.payment-phone-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: 0.4rem;
  padding: 0 0 0.7rem;
}

.payment-phone-detail div {
  padding: 0.4rem 0.45rem;
  background: var(--app-surface-muted);
  border-radius: 0.45rem;
}

.payment-phone-detail b {
  display: block;
  font-variant-numeric: tabular-nums;
}

.payment-phone-detail span {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-muted);
}

.payment-phone-row[open] summary .app-disclosure-chevron {
  transform: rotate(180deg);
}

@media (max-width: 767.98px) {
  .payment-table-wrap {
    display: none;
  }

  .payment-phone {
    display: block;
  }
}

/*
 * Active matches read as a launcher. The match room only opens on match day,
 * so matches group under the day they are played and tonight's group says so
 * instead of sitting flush with a match three weeks out.
 */
.match-list-page {
  display: grid;
  gap: 0.9rem;
}

/* One date heading for the match list and the games history. */
.app-day-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-muted);
}

.app-day-heading-now {
  color: var(--app-action);
}

.app-day-heading span {
  font-weight: 400;
  color: var(--app-muted);
}

.app-day-heading-note {
  margin-left: auto;
  letter-spacing: 0.02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* The day's card now hangs off its disclosure row. */
.match-day-list {
  margin-top: 0.5rem;
}

.match-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--app-border);
}

.match-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.match-row:last-child {
  padding-bottom: 0;
}

.match-row-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding-left: 0.9rem;
  border-left: 3px solid transparent;
}

/* A broken roster is the one row state worth marking down the edge. */
.match-row-flagged .match-row-copy {
  border-left-color: var(--app-danger);
}

.match-row-teams {
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.match-row-side {
  font-size: 0.85rem;
  color: var(--app-muted);
  overflow-wrap: anywhere;
}

.match-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.match-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Not an action, so it does not get a button's shape. */
.match-row-pending {
  font-size: 0.85rem;
  color: var(--app-muted);
  white-space: nowrap;
}

.match-list-empty strong {
  display: block;
  margin-bottom: 0.25rem;
}

@media (max-width: 575.98px) {
  .match-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }

  .match-row-actions {
    padding-left: 0.9rem;
  }
}

/*
 * Games in a selection. Five columns of table on a phone meant scrolling
 * sideways to find out whether you won; each game is now one row that reflows,
 * and the score carries the result the way the archive's scoreline does.
 */
.game-night + .game-night {
  margin-top: 1.5rem;
}

.game-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.game-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.15rem 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--app-border);
}

.game-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.game-row:last-child {
  padding-bottom: 0;
}

.game-row-round {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--app-muted);
  font-variant-numeric: tabular-nums;
}

.game-row-opponent {
  min-width: 0;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.game-row-result {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.game-row-score {
  color: var(--app-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The win carries weight, the way the archive states a result. A tie is not a
   loss, so it keeps full-strength ink without the weight. */
.game-row-won .game-row-score {
  color: var(--app-text);
  font-weight: 800;
}

.game-row-tied .game-row-score {
  color: var(--app-text);
}

.game-row-runout {
  padding: 0.05rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--app-tint-success-ink);
  background: var(--app-tint-success);
  border-radius: 0.4rem;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .game-row {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .game-row-result {
    grid-column: 2;
    justify-content: flex-start;
  }
}

/*
 * The two-mode roster form (match room team tool, My Team, the admin add-player
 * page) carried aria-pressed but had no pressed style anywhere outside the shot
 * trainer, so both buttons looked identical and nothing said which mode you were
 * in. Scoped to the form's own hook so it lands on all three surfaces.
 */
[data-team-member-form] .btn[aria-pressed="true"] {
  color: var(--app-action-ink);
  background: var(--app-action);
  border-color: var(--app-action);
}

[data-team-member-form] .btn[aria-pressed="true"]:hover,
[data-team-member-form] .btn[aria-pressed="true"]:focus-visible {
  color: var(--app-action-ink);
  background: var(--app-action-hover);
  border-color: var(--app-action-hover);
}

/* A captain's note is prose, so it sits under the row's figures, not beside. */
.payment-phone-note {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  color: var(--app-muted);
  overflow-wrap: anywhere;
}

/*
 * The frozen header cell paints --app-bg-strong, which reads as a grey band
 * inside a surface-solid panel. Same override the operator sheet needs.
 */
.payment-breakdown.table-freeze thead th:first-child {
  background: var(--app-surface-solid);
}

/*
 * Match archive. A lookup surface: the filters and every match sit closed, so
 * the page is a scannable index rather than a column of cards you scroll past.
 */
.archive-page {
  display: grid;
  gap: 0.75rem;
}

.archive-list {
  display: grid;
  gap: 0.5rem;
}

/* A night's matches hang off its disclosure row, the way the match list's card
   does, and sit in from it so two levels of row stay tellable apart. */
.archive-day-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-left: clamp(0rem, 2vw, 1rem);
}

/* The row's identity line is long ("Home vs Away - May 11, 2026"). */
.archive-row .app-disclosure-copy strong {
  overflow-wrap: anywhere;
}

.archive-panel {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
}

.archive-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.archive-panel-tags:empty {
  display: none;
}

.archive-panel-note {
  color: var(--app-muted);
  overflow-wrap: anywhere;
}

.archive-empty strong {
  display: block;
  margin-bottom: 0.25rem;
}

/*
 * The admin section's launcher lives in the menu, so the section costs no page
 * space. The group opens on arrival when you are already inside it, and stays
 * shut everywhere else so the menu keeps its usual length.
 */
.side-menu-group {
  width: 100%;
  text-align: left;
  background: none;
  font: inherit;
}

.side-menu-caret {
  margin-left: auto;
  font-size: 0.7rem;
  transition: transform 140ms ease;
}

.side-menu-group[aria-expanded="true"] .side-menu-caret {
  transform: rotate(180deg);
}

.side-menu-subnav {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.side-menu-sublink {
  padding-left: 1.9rem;
  font-size: 0.94rem;
}

@media (prefers-reduced-motion: reduce) {
  .side-menu-caret {
    transition: none;
  }
}

/*
 * Season dates grouped by what they describe. Seven ungrouped fields stacked
 * one per row on a phone with nothing saying which date belonged to which
 * phase of the season.
 */
.season-form-group {
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
}

.season-form-group:last-child {
  margin-bottom: 0;
}

.season-form-legend {
  float: none;
  width: auto;
  margin-bottom: 0.5rem;
  padding: 0;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-muted);
}

/*
 * Editing a match is a date change. Cancel, restore and delete share one closed
 * row so the destructive half of the page is not most of the page.
 */
.match-edit-page {
  display: grid;
  gap: 0.9rem;
}

.match-edit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.match-edit-tags:empty {
  display: none;
}

.match-edit-lifecycle {
  display: grid;
  gap: 1.25rem;
}

.match-edit-action h3 {
  margin-bottom: 0.3rem;
}

/* The one action nothing undoes gets the only red edge on the page. */
.match-edit-destructive {
  padding-left: 0.9rem;
  border-left: 3px solid var(--app-danger);
}

/* ---------------------------------------------------------------------------
 * Schedule setup: a step rail beside one working panel. Only one step renders,
 * so a redirect after a save lands on the step the admin was in rather than
 * the top of a four-form stack.
 * ------------------------------------------------------------------------ */

.schedule-layout {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 62em) {
  .schedule-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1.75rem;
  }
}

/* Wrapping is the rail's default, so it fits whatever box it is given: a
   phone, or the landing page's shot, which has no schedule-layout around it
   and would otherwise stack five full-width rows above the panel. It was a
   horizontal scroll strip once, which hid half of what the season still needs
   behind a swipe -- and hid it for good inside a pointer-events: none replica. */
.schedule-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.4rem;
  align-content: start;
}

/* Only the real page puts the rail in a 15rem column of its own, and there it
   is one step per row again. */
@media (min-width: 62em) {
  .schedule-layout .schedule-rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
}

/* The landing page's shot is the same screen at a third the width, so the rail
   keeps its proportion rather than its 15rem, and the summary sizes to the
   frame: a decorative replica is pointer-events: none, so anything past the
   edge of it can never be scrolled into view. */
@media (min-width: 62em) {
  .landing-replica .schedule-layout {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1rem;
  }

  .landing-replica .schedule-layout th {
    white-space: normal;
  }

  .landing-replica .schedule-layout .table-responsive .table {
    min-width: 0;
  }
}

.schedule-rail-step {
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  color: var(--app-muted);
  text-decoration: none;
}

.schedule-rail-step:hover,
.schedule-rail-step:focus-visible {
  background: var(--app-surface-muted);
  color: var(--app-text);
}

.schedule-rail-step[aria-current="step"] {
  background: var(--app-surface-solid);
  border-color: var(--app-border);
  color: var(--app-text);
  box-shadow: var(--app-shadow-soft);
}

.schedule-rail-mark {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 1.5px solid var(--app-border);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.schedule-rail-step.is-done .schedule-rail-mark {
  background: var(--app-action);
  border-color: var(--app-action);
  color: var(--app-action-ink);
}

/* :not(.is-done) or this wins over the filled done mark below it and paints
   the check green on green. */
.schedule-rail-step[aria-current="step"]:not(.is-done) .schedule-rail-mark {
  border-color: var(--app-action);
  color: var(--app-action);
}

.schedule-rail-text {
  min-width: 0;
}

.schedule-rail-title {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
}

.schedule-rail-note {
  display: block;
  font-size: 0.76rem;
  color: var(--app-muted);
}

.schedule-panel {
  background: var(--app-surface-solid);
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  padding: clamp(1rem, 2vw, 1.4rem);
}

.schedule-team-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.schedule-team-roster li {
  padding: 0.3rem 0.65rem;
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
}

.schedule-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  margin-bottom: 1rem;
  color: var(--app-muted);
  font-size: 0.88rem;
  text-align: center;
  border: 1px dashed var(--app-border);
  border-radius: 0.6rem;
}

.schedule-capacity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: 0.6rem;
  font-size: 0.88rem;
  color: var(--app-muted);
}

.schedule-capacity b {
  color: var(--app-text);
  font-variant-numeric: tabular-nums;
}

.schedule-capacity.is-short {
  background: var(--app-tint-warning);
  border-color: transparent;
  color: var(--app-tint-warning-ink);
}

.schedule-capacity.is-short b {
  color: var(--app-tint-warning-ink);
}

.schedule-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0.05rem 0.4rem;
  background: var(--app-tint-neutral);
  color: var(--app-tint-neutral-ink);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.schedule-count.is-warn {
  background: var(--app-tint-warning);
  color: var(--app-tint-warning-ink);
}

.schedule-division-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  margin-bottom: 1.25rem;
}

.schedule-division-card {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 0.8rem;
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: 0.65rem;
}

.schedule-division-card > header,
.schedule-dest-col > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ---- Assign step: a pool of unassigned teams beside the divisions ---- */

.schedule-transfer {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48em) {
  .schedule-transfer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  }
}

.schedule-pool,
.schedule-dests {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.schedule-pool > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.schedule-col-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--app-muted);
}

.schedule-dest-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.schedule-dest-col {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 0.7rem;
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: 0.6rem;
}

.schedule-chip-list {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  max-height: 19rem;
  overflow-y: auto;
  /* The scrollbar sits inside the box and clipped the chip borders without it. */
  padding-right: 0.4rem;
}

.schedule-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  background: var(--app-surface-solid);
  border: 1px solid var(--app-border);
  border-radius: 0.55rem;
  cursor: pointer;
}

.schedule-chip:hover {
  border-color: var(--app-action);
}

.schedule-chip:has(input:checked) {
  border-color: var(--app-action);
  box-shadow: inset 0 0 0 1px var(--app-action);
}

.schedule-chip:has(input:focus-visible) {
  outline: 2px solid var(--app-action);
  outline-offset: 2px;
}

.schedule-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.9rem;
}

.schedule-selbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.7rem 0.85rem;
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: 0.6rem;
}

.schedule-selcount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.schedule-selcount.is-empty {
  font-weight: 600;
  color: var(--app-muted);
}

.schedule-selbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.schedule-selbar-actions .form-select {
  width: auto;
  min-width: 9rem;
}


/* Tournament bracket: a port of Tournament Manager's grid, so the two apps
   read alike. Cards are absolutely placed by a server-computed row offset
   and js/tournament_bracket.js draws the connectors onto the canvas. */
.bracket-canvas {
  max-width: 100%;
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  background: var(--app-surface-muted);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
.bracket-canvas:focus-visible {
  outline: 3px solid rgba(var(--app-primary-rgb), 0.35);
  outline-offset: 2px;
}
.bracket-stage {
  --bracket-card-width: 18rem;
  --bracket-card-height: 13rem;
  --bracket-match-step: 14rem;
  --bracket-round-gap: 4rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--bracket-round-count), var(--bracket-card-width));
  column-gap: var(--bracket-round-gap);
  width: max-content;
  min-width: 100%;
  height: calc(3rem + (var(--bracket-base-matches) - 1) * var(--bracket-match-step) + var(--bracket-card-height) + 1rem);
  padding: 0 1rem 1rem;
}
.bracket-connectors {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bracket-round {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 100%;
}
.bracket-round__heading {
  display: flex;
  height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--app-border);
  color: var(--app-primary-strong);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bracket-round__heading span:last-child {
  color: var(--app-muted);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.bracket-round__matches {
  position: relative;
  height: calc(100% - 3rem);
}
.match-card {
  position: absolute;
  inset-inline: 0;
  top: calc(0.75rem + var(--layout-offset) * var(--bracket-match-step));
  display: flex;
  height: var(--bracket-card-height);
  flex-direction: column;
  gap: 0.4rem;
  overflow-y: auto;
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: var(--app-surface-solid);
  box-shadow: var(--app-shadow-soft);
}
.match-card--current {
  border-color: var(--app-primary);
  background: rgba(var(--app-primary-rgb), 0.08);
}
.match-card--next-up {
  border-color: var(--app-accent);
}
.match-card--completed,
.match-card--bye {
  background: var(--app-surface-muted);
  color: var(--app-muted);
}
.match-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--app-muted);
  font-size: 0.78rem;
}
.match-state-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  background: var(--app-tint-neutral);
  color: var(--app-tint-neutral-ink);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.match-state-badge--current {
  background: var(--app-primary);
  color: #fff;
}
.match-state-badge--next-up {
  background: var(--app-accent);
  color: #fff;
}
.match-card__players {
  display: grid;
  gap: 0.2rem;
}
.match-card__player {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.match-card__player--winner {
  color: var(--app-text);
  font-weight: 700;
}
.match-card__player--empty {
  color: var(--app-muted);
}
.match-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.match-card .input-group {
  margin-top: auto;
}
.match-card__player--action {
  width: 100%;
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  padding: 0.3rem 0.55rem;
  background: var(--app-surface-solid);
  color: var(--app-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
}
.match-card__player--action:hover,
.match-card__player--action:focus-visible {
  border-color: var(--app-primary);
  background: rgba(var(--app-primary-rgb), 0.12);
}
.match-card__action-label {
  color: var(--app-primary-strong);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}
/* A bracket asked to fit its screen is scaled by js/tournament_bracket.js;
   the scaled stage still lays out at full width, so hide that overflow. */
.bracket-canvas[data-fit] {
  overflow: hidden;
}
.bracket-canvas[data-fit] .bracket-stage {
  transform-origin: top left;
}
.tournament-board .bracket-canvas {
  border: 0;
  background: transparent;
}
/* No buttons on the board, so its cards need less height and the whole
   bracket scales down less. */
.tournament-board .bracket-stage {
  --bracket-card-height: 7.5rem;
  --bracket-match-step: 8.5rem;
}
/* The landing page's sample bracket: the board's compact cards, smaller
   still so three rounds read at a glance inside the tour frame. */
.landing-replica .bracket-stage {
  --bracket-card-width: 12.5rem;
  --bracket-card-height: 7.25rem;
  --bracket-match-step: 8rem;
  --bracket-round-gap: 2.5rem;
}
.landing-replica .match-card {
  overflow: hidden;
}
.landing-replica .match-card__header span:first-child {
  white-space: nowrap;
}
.landing-replica .bracket-canvas {
  border: 0;
  background: transparent;
}