:root {
  color-scheme: dark;
  --brand-green: #00dc00;
  --brand-lime: #a0f000;
  --brand-navy: #041126;
  --brand-navy-deep: #020a17;
  --surface: #0a1b36;
  --surface-raised: #102644;
  --border: #28456c;
  --border-soft: rgba(142, 178, 224, 0.2);
  --text: #f7fbff;
  --muted: #a9bbd3;
  --blue: #2f84ff;
  --blue-deep: #1256b8;
  --green-soft: rgba(0, 220, 0, 0.12);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--brand-navy-deep);
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 50% -20%, rgba(49, 124, 255, 0.25), transparent 42%),
    linear-gradient(180deg, #071a36 0%, var(--brand-navy) 52%, #030b19 100%);
  color: var(--text);
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 16px
    max(32px, env(safe-area-inset-bottom));
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px 24px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-mark {
  width: 52px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 220, 0, 0.23));
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(1.65rem, 6vw, 2.15rem);
  letter-spacing: -0.04em;
}

.brand-lockup p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.98rem;
}

.icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  background: rgba(10, 27, 54, 0.8);
  cursor: pointer;
}

form {
  display: grid;
  gap: 16px;
}

.form-card,
.match-id-card {
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(19, 46, 82, 0.96), rgba(7, 25, 52, 0.96));
  box-shadow: var(--shadow);
  padding: 20px;
  backdrop-filter: blur(16px);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}

.section-title.compact {
  margin-bottom: 13px;
}

.section-title h2 {
  font-size: 1.16rem;
  letter-spacing: -0.02em;
}

.section-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-lime));
  color: var(--brand-navy);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0, 220, 0, 0.28);
}

.grid {
  display: grid;
  gap: 15px;
}

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

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

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 15px;
}

.grid .field {
  margin-bottom: 0;
}

.field label,
.direction-field legend {
  color: #dbe8f7;
  font-size: 0.88rem;
  font-weight: 650;
}

.field label span {
  color: var(--muted);
  font-weight: 500;
}

input,
select {
  width: 100%;
  min-height: 51px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: rgba(3, 15, 34, 0.72);
  color: var(--text);
  padding: 0 14px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

input::placeholder {
  color: #6f86a5;
}

input:focus,
select:focus {
  border-color: var(--blue);
  background: rgba(6, 24, 50, 0.92);
  box-shadow: 0 0 0 4px rgba(47, 132, 255, 0.13);
}

.direction-field {
  border: 0;
  padding: 0;
  margin: 19px 0 0;
}

.direction-field legend {
  margin-bottom: 9px;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(3, 15, 34, 0.72);
}

.segmented label {
  cursor: pointer;
}

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

.segmented span {
  display: grid;
  place-items: center;
  min-height: 45px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--muted);
  font-weight: 750;
  text-align: center;
  transition: all 150ms ease;
}

.segmented input:checked + span {
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: white;
  box-shadow: 0 8px 18px rgba(47, 132, 255, 0.26);
}

.field-help {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.match-id-card {
  border-color: rgba(0, 220, 0, 0.48);
  background: linear-gradient(145deg, rgba(10, 58, 56, 0.94), rgba(5, 37, 46, 0.96));
}

.match-id-value {
  overflow-wrap: anywhere;
  color: var(--brand-lime);
  font-size: clamp(1.02rem, 4.2vw, 1.45rem);
  font-weight: 850;
  letter-spacing: 0.015em;
}

.match-id-card > p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.85rem;
}

.primary-button,
.secondary-button {
  min-height: 57px;
  border: 0;
  border-radius: 15px;
  text-decoration: none;
  display: grid;
  place-items: center;
  font-weight: 850;
  cursor: pointer;
}

.primary-button {
  width: 100%;
  background: linear-gradient(135deg, #348cff, #1153b9);
  color: white;
  box-shadow: 0 14px 32px rgba(19, 94, 202, 0.38);
}

.primary-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.secondary-button {
  margin-top: 20px;
  background: var(--surface-raised);
  color: white;
  border: 1px solid var(--border);
}

.form-message {
  display: none;
  padding: 14px 16px;
  border-radius: 12px;
  line-height: 1.45;
}

.form-message.error {
  display: block;
  color: #ffd7dd;
  border: 1px solid rgba(255, 102, 119, 0.45);
  background: rgba(129, 23, 40, 0.35);
}

.form-message.success {
  display: block;
  color: #caffd4;
  border: 1px solid rgba(0, 220, 0, 0.42);
  background: var(--green-soft);
}

.control-placeholder {
  text-align: center;
}

.status-pill {
  display: inline-block;
  padding: 8px 12px;
  margin-bottom: 18px;
  border-radius: 999px;
  color: #caffd4;
  background: var(--green-soft);
  border: 1px solid rgba(0, 220, 0, 0.35);
  font-size: 0.84rem;
  font-weight: 800;
}

.control-placeholder h2 {
  font-size: clamp(1.6rem, 7vw, 2.3rem);
}

.large-code {
  margin-top: 8px;
  color: var(--brand-lime);
  overflow-wrap: anywhere;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 24px 0;
  text-align: left;
}

.summary-grid div {
  padding: 14px;
  border-radius: 12px;
  background: rgba(3, 15, 34, 0.52);
  border: 1px solid var(--border-soft);
}

.summary-grid dt {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.summary-grid dd {
  margin: 5px 0 0;
  font-weight: 700;
}

.placeholder-copy {
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 640px) {
  .app-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .form-card,
  .match-id-card {
    padding: 17px;
    border-radius: 17px;
  }

  .grid.two,
  .grid.three {
    grid-template-columns: 1fr;
  }

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

  .brand-mark {
    width: 47px;
    height: 36px;
  }
}

/* Brand-critical override. Keep this at the end of the stylesheet. */
.section-number {
  background-color: #00dc00 !important;
  background-image: linear-gradient(135deg, #00dc00 0%, #a0f000 100%) !important;
  color: #041126 !important;
  border: 1px solid rgba(160, 240, 0, 0.80) !important;
  box-shadow:
    0 0 0 3px rgba(0, 220, 0, 0.10),
    0 8px 18px rgba(0, 220, 0, 0.34) !important;
}


/* Wings Live v0.2: pregame direction workflow */
.section-note,
.title-help {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.section-note {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(160, 240, 0, 0.18);
  background: rgba(0, 220, 0, 0.06);
}

.match-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(19, 46, 82, 0.96), rgba(7, 25, 52, 0.96));
  box-shadow: var(--shadow);
}

.team-block {
  display: grid;
  gap: 4px;
}

.team-block.right { text-align: right; }
.team-block strong { font-size: clamp(1.15rem, 5vw, 1.7rem); }
.team-block > span:last-child { color: var(--muted); font-weight: 750; }
.team-role,
.direction-team-role {
  color: var(--brand-green-light, #A0F000);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.versus-block {
  display: grid;
  place-items: center;
  color: var(--muted);
}
.versus-block span { font-size: 1.4rem; font-weight: 900; color: white; }
.versus-block small { margin-top: 4px; white-space: nowrap; }

.pregame-card,
.direction-card,
.start-card { margin-bottom: 16px; }

.pregame-status-grid {
  display: grid;
  gap: 10px;
}

.status-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: start;
  padding: 13px 14px;
  border-radius: 13px;
  background: rgba(3, 15, 34, 0.52);
  border: 1px solid var(--border-soft);
}
.status-row strong,
.status-row small { display: block; }
.status-row small { margin-top: 3px; color: var(--muted); line-height: 1.4; }
.status-dot {
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-radius: 50%;
  background: #657792;
  box-shadow: 0 0 0 5px rgba(101, 119, 146, 0.13);
}
.status-dot.ready {
  background: #00DC00;
  box-shadow: 0 0 0 5px rgba(0, 220, 0, 0.13);
}

.direction-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.direction-choice {
  min-height: 128px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(3, 15, 34, 0.72);
  color: white;
  padding: 15px;
  display: grid;
  align-content: center;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.direction-choice:active { transform: scale(0.985); }
.direction-choice strong { font-size: 1.1rem; }
.direction-arrow {
  color: var(--muted);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}
.direction-choice.selected {
  border-color: #00DC00;
  background: linear-gradient(145deg, rgba(0, 220, 0, 0.18), rgba(7, 45, 48, 0.85));
  box-shadow: 0 0 0 3px rgba(0, 220, 0, 0.10), 0 12px 28px rgba(0, 220, 0, 0.12);
}
.direction-choice.selected .direction-arrow { color: #A0F000; }

.confirm-direction-button {
  width: 100%;
  margin-top: 14px;
}
.confirm-direction-button:disabled,
.start-match-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.start-match-button.live {
  background: linear-gradient(135deg, #00DC00, #59d84c);
  color: #041126;
}

.summary-strip {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}
.summary-strip > div {
  padding: 13px 15px;
  border-radius: 13px;
  background: rgba(3, 15, 34, 0.46);
  border: 1px solid var(--border-soft);
}
.summary-strip span,
.summary-strip strong { display: block; }
.summary-strip span {
  color: var(--muted);
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.summary-strip strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.text-link {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  padding: 10px 4px;
}

@media (max-width: 520px) {
  .match-hero { padding: 15px 13px; gap: 8px; }
  .direction-choice-grid { grid-template-columns: 1fr; }
  .direction-choice { min-height: 105px; }
  .versus-block small { font-size: 0.72rem; }
}

/* Welcome screen and global navigation */
.header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  font-weight: 850;
}

.home-button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.welcome-body {
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
}

.welcome-shell {
  position: relative;
  width: min(620px, 100%);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 20px
           max(26px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.welcome-nav {
  display: flex;
  justify-content: flex-end;
}

.welcome-panel {
  align-self: center;
  width: min(460px, 100%);
  margin: 0 auto;
  padding: 22px 14px 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.welcome-logo {
  width: min(235px, 61vw);
  height: auto;
  max-height: 190px;
  object-fit: contain;
  margin-bottom: 28px;
  filter: drop-shadow(0 20px 42px rgba(0, 220, 0, 0.16));
}

.welcome-product-name {
  margin: 0;
  color: var(--text);
  font-size: clamp(2.6rem, 12vw, 4.15rem);
  font-weight: 850;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.welcome-primary-button {
  width: min(360px, 100%);
  min-height: 60px;
  margin-top: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(160, 240, 0, 0.5);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-lime));
  color: var(--brand-navy-deep);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow:
    0 16px 34px rgba(0, 220, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 140ms ease, filter 140ms ease;
}

.welcome-primary-button:active {
  transform: translateY(1px) scale(0.995);
  filter: brightness(0.96);
}

.welcome-endorsement {
  padding-bottom: 2px;
  text-align: center;
  color: #7388a5;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.075em;
  line-height: 1.55;
  text-transform: uppercase;
}

.welcome-endorsement p {
  margin: 0;
}

.help-card {
  max-width: 620px;
  margin: 7vh auto 0;
  text-align: center;
  padding-top: 34px;
}

.help-symbol {
  width: 66px;
  height: 66px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand-navy-deep);
  background: linear-gradient(135deg, var(--brand-green), var(--brand-lime));
  box-shadow: 0 13px 28px rgba(0, 220, 0, 0.24);
  font-size: 1.8rem;
  font-weight: 900;
}

.help-card h2 {
  font-size: clamp(1.7rem, 7vw, 2.2rem);
}

.help-card p {
  max-width: 520px;
  margin: 14px auto 0;
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 480px) {
  .welcome-panel {
    padding-left: 8px;
    padding-right: 8px;
  }

  .welcome-logo {
    width: min(270px, 78vw);
  }

  .welcome-primary-button {
    margin-top: 36px;
  }
}

/* Wings Live mobile dashboard */
.dashboard-shell { width: min(760px, 100%); }
.dashboard-header { padding-bottom: 14px; }
.dashboard-brand { color: inherit; text-decoration: none; }
.demo-pill,
.model-chip,
.pending-chip,
.health-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.demo-pill { color: #041126; background: linear-gradient(135deg, #00DC00, #A0F000); }
.model-chip { color: #9fc6ff; background: rgba(47,132,255,.13); border: 1px solid rgba(75,145,255,.25); }
.pending-chip { color: #ffd976; background: rgba(255,198,46,.11); border: 1px solid rgba(255,198,46,.27); }
.health-pill { color: #9df4c8; background: rgba(0,220,0,.10); border: 1px solid rgba(0,220,0,.24); }
.health-pill.warning { color: #ffd976; background: rgba(255,198,46,.10); border-color: rgba(255,198,46,.28); }

.demo-controller {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 20;
  display: grid;
  grid-template-columns: auto 82px 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  padding: 9px;
  border: 1px solid rgba(142,178,224,.22);
  border-radius: 15px;
  background: rgba(4,17,38,.91);
  box-shadow: 0 14px 35px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
}
.demo-play-button {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  color: #041126;
  background: linear-gradient(135deg, #00DC00, #A0F000);
  font-weight: 850;
  cursor: pointer;
}
.demo-controller select { min-height: 40px; padding: 0 8px; }
.demo-controller input[type="range"] { min-height: auto; padding: 0; border: 0; background: transparent; accent-color: #00DC00; }
.demo-wall-time { color: var(--muted); font-size: .72rem; font-weight: 700; white-space: nowrap; }

.dashboard-card {
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid rgba(142,178,224,.18);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(16,38,68,.97), rgba(6,22,46,.97));
  box-shadow: 0 16px 40px rgba(0,0,0,.23);
}
.score-hero {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  align-items: center;
  gap: 9px;
  padding: 20px 14px;
}
.score-team { display: grid; gap: 3px; text-align: center; }
.score-team strong { font-size: clamp(2.8rem, 14vw, 4.8rem); line-height: .95; letter-spacing: -.06em; }
.score-team small { min-height: 18px; color: #ffd65d; font-size: .72rem; }
.score-team-code { color: var(--muted); font-size: .83rem; font-weight: 850; text-transform: uppercase; }
.home-team strong, .home-accent { color: #39B8FF; }
.away-team strong, .away-accent { color: #A0F000; }
.score-clock { display: grid; place-items: center; gap: 4px; text-align: center; }
.score-clock > span { font-size: clamp(1.7rem, 8vw, 2.7rem); font-weight: 900; letter-spacing: -.04em; }
.score-clock > strong { color: #88f4ba; font-size: .83rem; text-transform: uppercase; letter-spacing: .06em; }
.score-clock > small { color: var(--muted); font-size: .7rem; line-height: 1.3; }

.dashboard-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.dashboard-title-row h2 { margin-top: 2px; font-size: 1.18rem; letter-spacing: -.02em; }
.dashboard-kicker { color: #88a0be; font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.metric-value { color: #A0F000; font-size: 1.8rem; line-height: 1; }
.dashboard-note { margin-top: 13px; color: #8ea3be; font-size: .77rem; line-height: 1.5; }

.probability-values { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 9px; }
.probability-values strong { font-size: 1.7rem; }
.probability-values span { padding-bottom: 4px; color: var(--muted); font-size: .75rem; text-align: center; }
.probability-track { height: 13px; margin-top: 11px; border-radius: 999px; background: #39B8FF; overflow: hidden; box-shadow: inset 0 1px 4px rgba(0,0,0,.38); }
.probability-track div { height: 100%; width: 50%; border-right: 2px solid #041126; background: linear-gradient(90deg, #39B8FF 0%, #00DC00 100%); transition: width 180ms linear; }

.forecast-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; text-align: center; }
.forecast-score div { display: grid; gap: 3px; }
.forecast-score span { color: var(--muted); font-size: .78rem; font-weight: 750; }
.forecast-score strong { font-size: 2.7rem; line-height: 1; letter-spacing: -.05em; }
.forecast-score div:first-child strong { color: #39B8FF; }
.forecast-score div:last-child strong { color: #A0F000; }
.forecast-dash { font-size: 2rem !important; }
.forecast-margin { margin-top: 13px; color: #dce8f6; text-align: center; font-size: .85rem; }

.dashboard-chart { display: block; width: 100%; border-radius: 10px; background: rgba(3,15,34,.35); }
.chart-scale { display: flex; justify-content: space-between; margin-top: 6px; color: #7086a3; font-size: .66rem; }
.half-toggle { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: rgba(3,15,34,.6); }
.half-toggle button { border: 0; border-radius: 7px; padding: 7px 10px; color: var(--muted); background: transparent; font-weight: 750; cursor: pointer; }
.half-toggle button.active { color: #041126; background: linear-gradient(135deg, #00DC00, #A0F000); }
.quintile-note { margin: -3px 0 13px; color: #8ea3be; font-size: .72rem; }
.quintile-list { display: grid; gap: 10px; }
.quintile-row { display: grid; grid-template-columns: 58px 38px 1fr 38px; align-items: center; gap: 7px; }
.quintile-label { font-weight: 850; }
.quintile-label small { display: block; color: #7086a3; font-size: .55rem; font-weight: 650; }
.quintile-percent { font-size: .75rem; font-weight: 850; text-align: center; }
.quintile-bar { display: flex; height: 11px; overflow: hidden; border-radius: 999px; background: rgba(132,157,190,.12); }
.quintile-bar i { background: #39B8FF; }
.quintile-bar b { background: #A0F000; }

.zone-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zone-team-card { padding: 14px; border-radius: 14px; background: rgba(3,15,34,.45); border: 1px solid var(--border-soft); }
.zone-team-card h3 { margin: 0 0 10px; }
.home-zone h3 { color: #39B8FF; }
.away-zone h3 { color: #A0F000; }
.zone-team-card dl { display: grid; gap: 8px; margin: 0; }
.zone-team-card dl div { display: flex; justify-content: space-between; gap: 7px; }
.zone-team-card dt { color: var(--muted); font-size: .72rem; }
.zone-team-card dd { margin: 0; font-size: .85rem; font-weight: 850; }
.zone-chart { margin-top: 13px; }

.strike-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.strike-summary-grid div { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 12px; border-radius: 12px; background: rgba(3,15,34,.45); }
.strike-summary-grid span { color: var(--muted); font-size: .72rem; }
.strike-summary-grid strong { grid-row: span 2; font-size: 1.7rem; }
.strike-summary-grid div:first-child strong { color: #39B8FF; }
.strike-summary-grid div:last-child strong { color: #A0F000; }
.strike-summary-grid small { color: #d9e5f4; }
.strike-pitch { display: block; width: 100%; border-radius: 12px; background: rgba(2,20,20,.4); }
.recent-strikes { display: grid; gap: 7px; margin-top: 11px; }
.recent-strikes > div { display: grid; grid-template-columns: 48px 1fr auto; gap: 9px; padding: 8px 10px; border-radius: 10px; background: rgba(3,15,34,.4); font-size: .75rem; }
.recent-strikes span { font-weight: 850; }
.recent-strikes small { color: var(--muted); }

.possession-pending { padding: 14px; border-radius: 13px; border: 1px dashed rgba(255,198,46,.35); background: rgba(255,198,46,.06); }
.possession-pending strong { color: #ffe18a; }
.possession-pending p { margin-top: 7px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.support-grid, .health-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 12px; }
.support-grid div, .health-grid div { padding: 12px; border-radius: 11px; background: rgba(3,15,34,.42); }
.support-grid span, .health-grid span { display: block; color: var(--muted); font-size: .68rem; }
.support-grid strong, .health-grid strong { display: block; margin-top: 3px; font-size: .91rem; }

.dashboard-event-list { display: grid; }
.dashboard-event-row { display: grid; grid-template-columns: 42px 43px minmax(0,1fr) 28px 43px; gap: 6px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(142,178,224,.10); font-size: .75rem; }
.dashboard-event-row:last-child { border-bottom: 0; }
.dashboard-event-row time { color: var(--muted); font-variant-numeric: tabular-nums; }
.event-team { font-weight: 850; }
.event-description { display: grid; min-width: 0; }
.event-description strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-description small { color: var(--muted); }
.event-points { color: #A0F000; font-weight: 850; text-align: right; }
.event-score { font-weight: 850; text-align: right; font-variant-numeric: tabular-nums; }
.empty-state { margin: 0; padding: 12px 0; color: var(--muted); font-size: .8rem; }
.health-grid { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 580px) {
  .demo-controller { grid-template-columns: 1fr 76px auto; }
  .demo-controller input[type="range"] { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .demo-wall-time { text-align: right; }
  .dashboard-card { padding: 16px; }
  .stacked-mobile { align-items: stretch; flex-direction: column; }
  .half-toggle { width: 100%; }
}

@media (max-width: 390px) {
  .score-hero { grid-template-columns: .9fr 1.2fr .9fr; padding-left: 8px; padding-right: 8px; }
  .score-team strong { font-size: 2.65rem; }
  .score-clock > span { font-size: 1.6rem; }
  .zone-summary-grid { grid-template-columns: 1fr; }
  .dashboard-event-row { grid-template-columns: 39px 40px minmax(0,1fr) 25px 37px; font-size: .69rem; }
}

/* ---------------------------------------------------------
   Dashboard touch and scrolling stability: hard lock
   --------------------------------------------------------- */

html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-x: none;
}

/* The frame, not the canvas, owns geometry. `contain: strict` prevents a
   canvas backing-store change from affecting layout or scroll dimensions. */
.chart-frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  contain: strict;
  isolation: isolate;
  border-radius: 10px;
  background: rgba(3, 15, 34, .35);
  pointer-events: none;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.chart-frame-fatigue { height: 170px; min-height: 170px; max-height: 170px; }
.chart-frame-zone {
  height: 115px;
  min-height: 115px;
  max-height: 115px;
  margin-top: 13px;
}
.chart-frame-strike {
  height: 210px;
  min-height: 210px;
  max-height: 210px;
  border-radius: 12px;
  background: rgba(2, 20, 20, .4);
}

/* The graphic is a painted surface only. It cannot receive taps, drags,
   double-taps, selection, callouts or pinch gestures. */
.chart-frame > canvas,
.dashboard-chart,
.strike-pitch {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border-radius: inherit;
  pointer-events: none !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Vertical gestures over any chart card belong to page scrolling. */
.chart-section,
.dashboard-card {
  min-width: 0;
  max-width: 100%;
  touch-action: pan-y;
}

/* The playback slider is the only horizontal touch surface in the viewer. */
.demo-controller input[type="range"] {
  pointer-events: auto;
  touch-action: pan-x;
}

/* ---------------------------------------------------------
   Dashboard analytics v3
   --------------------------------------------------------- */
:root {
  --home-live-colour: #39B8FF;
  --away-live-colour: #A0F000;
}

.home-team strong,
.home-accent,
.home-zone h3,
.strike-summary-grid div:first-child strong { color: var(--home-live-colour); }
.away-team strong,
.away-accent,
.away-zone h3,
.strike-summary-grid div:last-child strong { color: var(--away-live-colour); }

.metric-value-unit {
  max-width: 44%;
  font-size: 1.35rem;
  text-align: right;
}

.chart-frame-fatigue {
  height: 190px;
  min-height: 190px;
  max-height: 190px;
}

.fatigue-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 13px;
}

.fatigue-stat-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(142, 178, 224, .12);
  border-radius: 12px;
  background: rgba(3, 15, 34, .42);
}

.fatigue-stat-grid span {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.3;
}

.fatigue-stat-grid strong {
  display: block;
  margin-top: 4px;
  color: #e9f2fb;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.fatigue-status-stat strong { color: #ffcb52; }

.stacked-half-panels {
  display: grid;
  gap: 14px;
}

.half-analysis-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(142, 178, 224, .14);
  border-radius: 15px;
  background: rgba(3, 15, 34, .36);
}

.half-panel-heading {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.half-panel-heading > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.half-panel-heading > div:first-child > span {
  color: #f0f6fc;
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.half-panel-heading > div:first-child > strong {
  color: #8ea3be;
  font-size: .67rem;
  font-weight: 750;
  text-align: right;
}

.direction-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(142, 178, 224, .12);
  border-radius: 9px;
  background: rgba(7, 24, 48, .7);
}

.direction-strip i {
  color: #647b99;
  font-size: .53rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .12em;
}

.direction-team {
  overflow: hidden;
  font-size: .72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.direction-team:last-child { text-align: right; }

.territory-band-labels {
  display: grid;
  grid-template-columns: 27fr 13fr 20fr 13fr 27fr;
  gap: 3px;
  margin-bottom: 9px;
  text-align: center;
}

.territory-band-labels span {
  display: grid;
  place-content: center;
  min-width: 0;
  min-height: 36px;
  padding: 4px 2px;
  border-radius: 7px;
  background: rgba(142, 178, 224, .065);
  font-size: .56rem;
  line-height: 1.12;
}

.territory-band-labels strong {
  display: block;
  overflow: hidden;
  font-size: .58rem;
  text-overflow: ellipsis;
}

.territory-band-labels small {
  display: block;
  font-size: .52rem;
  font-weight: 750;
}

.territory-quintile-cards {
  display: grid;
  gap: 9px;
}

.territory-quintile-card {
  padding: 9px 10px 8px;
  border: 1px solid rgba(142, 178, 224, .10);
  border-radius: 10px;
  background: rgba(8, 28, 54, .58);
}

.territory-quintile-card.is-empty { opacity: .62; }

.territory-quintile-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.territory-quintile-heading strong {
  color: #eef5fc;
  font-size: .72rem;
}

.territory-quintile-heading span {
  color: #7188a5;
  font-size: .59rem;
  font-variant-numeric: tabular-nums;
}

.territory-segmented-bar {
  display: flex;
  width: 100%;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(132, 157, 190, .12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
}

.territory-segmented-bar i {
  display: block;
  height: 100%;
  min-width: 0;
}

.territory-percentage-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-top: 5px;
  text-align: center;
}

.territory-percentage-row span {
  overflow: hidden;
  font-size: .58rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

.strike-half-stack { margin-top: 2px; }
.strike-half-panel { padding-bottom: 13px; }
.strike-half-panel .chart-frame { margin-top: 0; }

.recent-strikes > div {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.recent-strikes strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .fatigue-stat-grid { grid-template-columns: 1fr 1fr; }
  .half-analysis-panel { padding: 11px; }
  .territory-band-labels { gap: 2px; }
  .territory-band-labels span { min-height: 34px; font-size: .51rem; }
  .territory-band-labels small { font-size: .48rem; }
  .territory-quintile-card { padding-left: 8px; padding-right: 8px; }
  .direction-team { font-size: .66rem; }
}

/* Dashboard viewer and public match centre v4 */
.viewer-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  color: #a8bdd6;
  font-size: .78rem;
  font-weight: 750;
  text-decoration: none;
}

.viewer-secondary-link:hover,
.viewer-secondary-link:focus-visible { color: #A0F000; }

.viewer-body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(0, 220, 0, .11), transparent 34%),
    #041126;
  color: #eef5fc;
}

.viewer-shell {
  width: min(100%, 760px);
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}

.viewer-header {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 18px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(4, 17, 38, .98) 68%, rgba(4, 17, 38, 0));
}

.viewer-hero {
  margin: 8px 0 28px;
  padding: 24px 20px;
  border: 1px solid rgba(160, 240, 0, .18);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(10, 35, 65, .96), rgba(4, 20, 44, .96));
  box-shadow: 0 18px 55px rgba(0, 0, 0, .24);
}

.viewer-hero h2 {
  margin: 5px 0 8px;
  font-size: clamp(1.75rem, 8vw, 2.6rem);
  line-height: .98;
}

.viewer-hero p {
  max-width: 540px;
  margin: 0;
  color: #9eb3cc;
  line-height: 1.55;
}

.viewer-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin: 0 2px 12px;
}

.viewer-section-heading h2 {
  margin: 2px 0 0;
  font-size: 1.15rem;
}

.viewer-match-list {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.viewer-match-card,
.viewer-empty-card {
  display: block;
  padding: 16px;
  border: 1px solid rgba(136, 167, 207, .13);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(9, 31, 59, .98), rgba(5, 22, 46, .98));
  box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
  color: inherit;
  text-decoration: none;
}

.viewer-match-card.status-live {
  border-color: rgba(0, 220, 0, .42);
  box-shadow: 0 0 0 1px rgba(0, 220, 0, .08), 0 14px 36px rgba(0, 0, 0, .18);
}

.viewer-match-card.status-demo { border-color: rgba(160, 240, 0, .28); }

.viewer-card-topline,
.viewer-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.viewer-card-topline small,
.viewer-card-footer span {
  overflow: hidden;
  color: #8299b5;
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #dce8f4;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.viewer-status i,
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7f92aa;
  box-shadow: 0 0 0 4px rgba(127, 146, 170, .10);
}

.status-live .viewer-status i,
.status-live.status-dot {
  background: #00DC00;
  box-shadow: 0 0 0 4px rgba(0, 220, 0, .12), 0 0 13px rgba(0, 220, 0, .65);
}

.status-demo .viewer-status i { background: #A0F000; }

.viewer-fixture {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  text-align: center;
}

.viewer-fixture strong {
  font-size: clamp(1.65rem, 9vw, 2.35rem);
  line-height: 1;
}

.viewer-fixture span {
  color: #6f87a4;
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.viewer-card-footer b {
  flex: 0 0 auto;
  color: #A0F000;
  font-size: .72rem;
}

.viewer-empty-card {
  display: grid;
  gap: 5px;
  color: #9eb3cc;
}

.viewer-empty-card strong { color: #eef5fc; }

.viewer-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 4px 6px;
  color: #6f87a4;
  font-size: .65rem;
}

.coach-considerations-card {
  border-color: rgba(160, 240, 0, .18);
  background:
    linear-gradient(145deg, rgba(10, 38, 61, .96), rgba(5, 24, 47, .98));
}

.coach-consideration-title {
  margin: 14px 0 7px;
  color: #eef5fc;
  font-size: 1.05rem;
}

.coach-consideration-message {
  margin: 0;
  color: #b5c6d9;
  font-size: .86rem;
  line-height: 1.58;
}

.coach-consideration-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 11px;
  border-top: 1px solid rgba(145, 177, 214, .11);
  color: #7188a5;
  font-size: .61rem;
}

.territory-pressure-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 26px;
  margin: 4px 0 9px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(4, 17, 38, .42);
  color: #9eb3cc;
  font-size: .65rem;
  text-align: center;
}

.territory-pressure-summary span { font-weight: 850; }
.territory-pressure-summary small { color: #7188a5; }

.zone-half-breakdown {
  margin: 12px 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(145, 177, 214, .10);
  color: #8098b4;
  font-size: .61rem;
  line-height: 1.45;
}

.pending-match-card,
.operator-login-card {
  width: min(100%, 560px);
  margin: min(14vh, 110px) auto 0;
  padding: 26px 20px;
  border: 1px solid rgba(160, 240, 0, .17);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(10, 35, 65, .98), rgba(4, 20, 44, .98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  text-align: center;
}

.pending-match-card > .status-dot {
  display: block;
  margin: 0 auto 18px;
}

.pending-scoreline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
}

.pending-scoreline div { display: grid; gap: 4px; }
.pending-scoreline strong { font-size: 1.75rem; }
.pending-scoreline span { color: #8197b1; font-size: .65rem; line-height: 1.25; }
.pending-scoreline b { color: #6f87a4; }
.pending-match-card h2 { margin: 8px 0; }
.pending-match-card > p { color: #9eb3cc; line-height: 1.5; }
.pending-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin: 18px 0; color: #7188a5; font-size: .68rem; }
.compact-button { width: auto; min-width: 190px; padding-inline: 20px; }

.operator-login-card .welcome-logo { width: 66px; margin-bottom: 18px; }
.operator-login-card h1 { margin: 5px 0 8px; font-size: 2rem; }
.operator-login-card > p { color: #9eb3cc; line-height: 1.5; }
.operator-login-card form { display: grid; gap: 10px; margin-top: 22px; text-align: left; }
.operator-login-card label { color: #b8c9db; font-size: .72rem; font-weight: 750; }
.operator-login-card input { width: 100%; box-sizing: border-box; }
.form-error { min-height: 20px; margin: 0; color: #ff8a7d; font-size: .7rem; text-align: center; }

@media (max-width: 520px) {
  .viewer-shell { padding-left: 13px; padding-right: 13px; }
  .viewer-hero { padding: 20px 17px; }
  .viewer-match-card { padding: 15px 14px; }
  .viewer-card-footer span { max-width: 58%; }
  .coach-consideration-footer { flex-direction: column; gap: 4px; }
  .territory-pressure-summary { flex-wrap: wrap; }
}


/* Wings v6 base + v7 additions */
.welcome-app-icon{width:min(190px,48vw);height:auto;border-radius:24%;box-shadow:0 18px 48px rgba(0,0,0,.32)}
.operator-login-card .welcome-app-icon{width:92px;border-radius:23%}
.archive-control-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}.archive-status-pill{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border-radius:999px;font-size:.76rem;font-weight:850}.archive-status-pill.visible{background:rgba(0,220,0,.14);border:1px solid rgba(160,240,0,.36);color:#A0F000}.archive-status-pill.archived{background:rgba(255,139,24,.13);border:1px solid rgba(255,139,24,.4);color:#ffad55}.archive-status-copy{max-width:630px;margin:10px 0 0;color:var(--muted);line-height:1.5}.archive-toggle-button{min-width:150px}
.halftime-bridge-card{overflow:hidden}.bridge-headline{margin:4px 0 18px}.bridge-headline h3{margin:0 0 6px;font-size:clamp(1.2rem,5vw,1.7rem);letter-spacing:-.025em}.bridge-headline p{margin:0;color:var(--muted);line-height:1.48}.bridge-score-grid{display:grid;grid-template-columns:1fr minmax(118px,1.2fr) 1fr;gap:12px;align-items:stretch;margin:0 0 20px}.bridge-team,.bridge-score-centre{min-width:0;padding:14px 10px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075);text-align:center}.bridge-team span,.bridge-score-centre span,.bridge-score-centre small{display:block;color:var(--muted);font-size:.72rem;font-weight:800}.bridge-team strong{display:block;margin-top:4px;font-size:2.2rem;line-height:1}.bridge-home strong{color:var(--home-live-colour,#39B8FF)}.bridge-away strong{color:var(--away-live-colour,#A0F000)}.bridge-score-centre{display:grid;align-content:center;gap:5px}.bridge-score-centre strong{font-size:.9rem;line-height:1.25;color:#ffad55}
.bridge-track{position:relative;display:grid;grid-template-columns:42fr 16fr 42fr;height:18px;margin-top:4px;overflow:visible;border-radius:999px;background:rgba(255,255,255,.05)}.bridge-track-segment:first-child{border-radius:999px 0 0 999px}.bridge-track-segment:last-child{border-radius:0 999px 999px 0}.bridge-track-pre,.bridge-track-post{background:linear-gradient(90deg,rgba(0,220,0,.18),rgba(160,240,0,.34))}.bridge-track-break{background:repeating-linear-gradient(135deg,rgba(161,175,197,.28) 0 5px,rgba(161,175,197,.12) 5px 10px)}.bridge-track-events{position:absolute;inset:0;pointer-events:none}.bridge-score-dot{position:absolute;top:50%;width:12px;height:12px;border:2px solid #041126;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(255,139,24,.38)}.bridge-track-labels{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:5px;margin-top:8px;color:var(--muted);font-size:.66rem}.bridge-track-labels span:nth-child(2),.bridge-track-labels span:nth-child(3){text-align:center}.bridge-track-labels span:last-child{text-align:right}.bridge-leg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.bridge-leg-grid article{display:grid;gap:4px;padding:13px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.bridge-leg-grid span,.bridge-leg-grid small{color:var(--muted);font-size:.72rem;font-weight:750}.bridge-leg-grid strong{font-size:1.35rem}
@media(max-width:620px){.archive-control-row{grid-template-columns:1fr}.archive-toggle-button{width:100%}.bridge-score-grid{grid-template-columns:1fr 1.15fr 1fr;gap:7px}.bridge-team,.bridge-score-centre{padding:12px 6px}.bridge-team strong{font-size:1.85rem}.bridge-score-centre strong{font-size:.78rem}.bridge-track-labels{font-size:.6rem}}

/* Wings v7: Flight Control match library and kickoff thumbnails */
.operator-home-shell { width: min(760px, 100%); }
.operator-header-icon { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; }
.operator-hero {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin: 6px 0 28px;
  padding: 22px;
  border: 1px solid rgba(255, 139, 24, .18);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(10, 35, 65, .98), rgba(4, 20, 44, .98));
  box-shadow: 0 22px 58px rgba(0, 0, 0, .24);
}
.operator-hero-icon { width: 96px; height: 96px; border-radius: 24%; box-shadow: 0 16px 34px rgba(0,0,0,.28); }
.operator-hero h2 { margin: 4px 0 8px; font-size: clamp(1.55rem, 6vw, 2.25rem); line-height: 1.02; }
.operator-hero p { margin: 0; color: #9eb3cc; line-height: 1.5; }
.operator-action-grid { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.operator-primary-button { margin-top: 0; width: 100%; }
.operator-live-link { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 18px; border: 1px solid rgba(136,167,207,.18); border-radius: 16px; color: #b9cbe0; text-decoration: none; font-weight: 800; white-space: nowrap; }
.operator-match-card.status-complete { border-color: rgba(108, 157, 213, .24); }
.operator-match-card.status-archived { border-color: rgba(255, 139, 24, .28); opacity: .88; }
.status-complete .viewer-status i { background: #70a9e8; box-shadow: 0 0 0 4px rgba(112,169,232,.11); }
.status-archived .viewer-status i { background: #ff8b18; box-shadow: 0 0 0 4px rgba(255,139,24,.12); }

.thumbnail-control-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr); gap: 18px; align-items: center; }
.operator-thumbnail-frame,
.kickoff-thumbnail-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(136, 167, 207, .16);
  border-radius: 16px;
  background: rgba(3, 14, 31, .72);
}
.operator-thumbnail-frame img,
.kickoff-thumbnail-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.operator-thumbnail-frame.empty { display: grid; place-items: center; color: #7188a5; font-size: .78rem; text-align: center; }
.thumbnail-control-copy { display: grid; gap: 10px; align-content: center; }
.thumbnail-control-copy > strong { font-size: 1.05rem; }
.thumbnail-control-copy p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.thumbnail-control-copy code { color: #9fc6ff; font-size: .72rem; }
.thumbnail-control-copy .secondary-button { width: 100%; margin-top: 3px; }

.kickoff-thumbnail-card { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(145,177,214,.11); }
.kickoff-thumbnail-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.kickoff-thumbnail-heading h3 { margin: 2px 0 0; font-size: 1rem; }
.kickoff-thumbnail-placeholder { position: absolute; inset: 0; display: grid; place-content: center; gap: 5px; padding: 22px; text-align: center; color: #7188a5; }
.kickoff-thumbnail-placeholder strong { color: #aebfd3; font-size: .86rem; }
.kickoff-thumbnail-placeholder span { font-size: .69rem; line-height: 1.45; }

@media (max-width: 620px) {
  .operator-hero { grid-template-columns: 74px minmax(0, 1fr); gap: 15px; padding: 18px 16px; }
  .operator-hero-icon { width: 74px; height: 74px; }
  .operator-action-grid { grid-template-columns: 1fr; }
  .operator-live-link { width: 100%; }
  .thumbnail-control-grid { grid-template-columns: 1fr; }
}

/* Wings Flight Control v0.9: Setup → Staging → Match Control */
.flight-control-shell { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
.flight-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}
.flight-tab {
  min-width: 0;
  min-height: 72px;
  padding: 10px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background: rgba(3, 15, 34, .52);
  color: white;
  text-decoration: none;
}
.flight-tab > span {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(111, 135, 164, .18);
  color: #90a8c5;
  font-weight: 900;
}
.flight-tab strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.flight-tab small { color: var(--muted); font-size: .66rem; }
.flight-tab.active { border-color: rgba(160, 240, 0, .52); background: linear-gradient(145deg, rgba(0,220,0,.15), rgba(7,37,52,.9)); box-shadow: 0 0 0 3px rgba(0,220,0,.08); }
.flight-tab.active > span { background: linear-gradient(135deg,#00dc00,#a0f000); color: #041126; }
.flight-tab.complete > span { background: rgba(0,220,0,.18); color: #a0f000; }
.flight-tab.locked { opacity: .55; }

.stream-staging-grid { display: grid; grid-template-columns: minmax(250px, 1.15fr) minmax(250px, .85fr); gap: 16px; align-items: stretch; }
.stream-preview-frame {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(160,240,0,.22);
  background: #020b18;
}
.stream-preview-frame img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; }
.stream-preview-frame > div { min-height: 240px; display: grid; place-content: center; gap: 6px; padding: 24px; text-align: center; color: var(--muted); }
.stream-preview-frame > div strong { color: white; font-size: 1.05rem; }
.stream-staging-copy { display: grid; gap: 12px; align-content: start; }
.stream-meta-grid, .control-health-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.stream-meta-grid > div, .control-health-grid > div { padding: 11px; border-radius: 12px; background: rgba(3,15,34,.52); border: 1px solid var(--border-soft); }
.stream-meta-grid span, .stream-meta-grid strong, .control-health-grid span, .control-health-grid strong { display: block; }
.stream-meta-grid span, .control-health-grid span { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; }
.stream-meta-grid strong, .control-health-grid strong { margin-top: 4px; overflow-wrap: anywhere; font-size: .79rem; }
.button-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 9px; }
.compact-button { width: 100%; min-height: 48px; padding: 10px 14px; }
.status-dot.error { background: #ff674d; box-shadow: 0 0 0 5px rgba(255,103,77,.13); }
.direction-choice:disabled { opacity: .42; cursor: not-allowed; }

.control-scoreboard {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px 12px;
  border: 1px solid rgba(160,240,0,.25);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 0%, rgba(0,220,0,.11), transparent 38%), linear-gradient(145deg,rgba(19,46,82,.98),rgba(7,25,52,.98));
  box-shadow: var(--shadow);
}
.control-score-team { min-width: 0; display: grid; gap: 4px; text-align: center; }
.control-score-team span { color: var(--muted); font-size: .76rem; font-weight: 900; }
.control-score-team strong { font-size: clamp(3rem,15vw,5rem); line-height: .88; letter-spacing: -.07em; }
.control-score-team.home strong { color: #39B8FF; }
.control-score-team.away strong { color: #A0F000; }
.control-score-team small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .66rem; }
.control-clock-block { display: grid; place-items: center; gap: 5px; text-align: center; }
.control-clock-block > span { font-size: clamp(1.8rem,8vw,3rem); font-weight: 950; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.control-clock-block > strong { color: #88f4ba; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.control-clock-block > small { color: var(--muted); font-size: .62rem; }
.phase-action-button { width: 100%; }
.team-control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.team-event-panel { display: grid; gap: 8px; padding: 12px; border-radius: 16px; border: 1px solid var(--border-soft); background: rgba(3,15,34,.55); }
.team-event-panel header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.team-event-panel header span { color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.team-event-panel header strong { font-size: 1.05rem; }
.team-event-panel button, .card-event {
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(142,178,224,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: white;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.team-event-panel button b { color: #A0F000; }
.team-event-panel button:active, .card-event:active { transform: scale(.985); }
.team-event-panel button:disabled, .card-event:disabled, .clip-marker-button:disabled { opacity: .42; cursor: not-allowed; }
.home-panel { border-top-color: rgba(57,184,255,.5); }
.away-panel { border-top-color: rgba(160,240,0,.5); }
.discipline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.card-event { justify-content: center; }
.card-event.yellow { border-color: rgba(255,214,93,.4); background: rgba(255,214,93,.11); color: #ffe07a; }
.card-event.red { border-color: rgba(255,88,88,.45); background: rgba(255,88,88,.12); color: #ff8a8a; }
.clip-marker-button, .undo-event-button { width: 100%; min-height: 48px; }
.control-event-list { display: grid; }
.control-event-row { display: grid; grid-template-columns: 48px 48px minmax(0,1fr) 34px 48px; gap: 7px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(142,178,224,.10); font-size: .74rem; }
.control-event-row:last-child { border-bottom: 0; }
.control-event-row time { color: var(--muted); font-variant-numeric: tabular-nums; }
.control-event-team { font-weight: 900; }
.control-event-row div { min-width: 0; display: grid; }
.control-event-row div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-event-row div small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-event-row b { color: #A0F000; text-align: right; }
.control-event-row em { font-style: normal; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.control-event-empty { padding: 18px; border-radius: 13px; background: rgba(3,15,34,.45); color: var(--muted); text-align: center; }
.compact-admin-card { margin-top: 16px; }

@media (max-width: 680px) {
  .flight-tabs { gap: 5px; }
  .flight-tab { min-height: 64px; padding: 8px 6px; grid-template-columns: 23px minmax(0,1fr); column-gap: 5px; }
  .flight-tab > span { width: 23px; height: 23px; font-size: .7rem; }
  .flight-tab strong { font-size: .67rem; }
  .flight-tab small { font-size: .56rem; }
  .stream-staging-grid { grid-template-columns: 1fr; }
  .stream-preview-frame, .stream-preview-frame img, .stream-preview-frame > div { min-height: 205px; }
  .stream-meta-grid, .control-health-grid { grid-template-columns: 1fr; }
  .team-control-grid { gap: 8px; }
  .team-event-panel { padding: 8px; }
  .team-event-panel button { min-height: 46px; padding: 9px 8px; font-size: .72rem; }
  .discipline-grid { gap: 7px; }
  .card-event, .clip-marker-button, .undo-event-button { font-size: .72rem; }
  .control-event-row { grid-template-columns: 42px 42px minmax(0,1fr) 28px 40px; gap: 5px; font-size: .66rem; }
}

/* Wings Flight Control v1.0: Live and Replay operating modes */
.operating-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.operating-mode-choice { position:relative; display:grid; gap:5px; min-height:128px; padding:18px; border:1px solid var(--border-soft); border-radius:16px; background:rgba(3,15,34,.52); cursor:pointer; transition:.16s ease; }
.operating-mode-choice input { position:absolute; opacity:0; pointer-events:none; }
.operating-mode-choice:hover { border-color:rgba(160,240,0,.38); }
.operating-mode-choice.selected { border-color:#A0F000; box-shadow:0 0 0 2px rgba(160,240,0,.12); background:linear-gradient(145deg,rgba(17,46,62,.9),rgba(4,23,48,.92)); }
.operating-mode-choice strong { color:white; font-size:1.05rem; }
.operating-mode-choice small { color:var(--muted); line-height:1.45; }
.mode-choice-kicker { color:#A0F000; font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.09em; }
.operating-mode-pill { display:inline-flex; align-items:center; justify-content:center; margin-top:6px; padding:4px 8px; border-radius:999px; font-size:.58rem; letter-spacing:.09em; }
.operating-mode-pill.live { color:#8ddcff; border:1px solid rgba(57,184,255,.42); background:rgba(57,184,255,.12); }
.operating-mode-pill.replay { color:#A0F000; border:1px solid rgba(160,240,0,.42); background:rgba(160,240,0,.11); }
.youtube-shell { position:relative; aspect-ratio:16/9; min-height:0 !important; overflow:hidden; background:#020916; }
.youtube-player, .youtube-player iframe { width:100% !important; height:100% !important; min-height:240px; display:block; }
.youtube-player-loading { position:absolute; inset:0; display:grid; place-content:center; gap:6px; text-align:center; pointer-events:none; background:linear-gradient(145deg,rgba(6,21,46,.95),rgba(2,9,22,.96)); color:var(--muted); }
.youtube-player-loading[hidden] { display:none; }
.youtube-player-loading strong { color:white; font-size:1.05rem; }
.replay-console { margin-top:16px; padding:15px; border-radius:16px; border:1px solid rgba(160,240,0,.22); background:rgba(3,15,34,.62); }
.replay-time-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:stretch; }
.replay-time-field { margin:0; }
.replay-time-field input { font-variant-numeric:tabular-nums; font-size:1.15rem; font-weight:850; }
.replay-time-inputs { display:grid; grid-template-columns:minmax(64px,1fr) auto minmax(74px,1fr) auto minmax(74px,1fr); gap:7px; align-items:end; }
.replay-time-part { display:grid; gap:5px; margin:0; }
.replay-time-part span { color:var(--muted); font-size:.63rem; text-transform:uppercase; letter-spacing:.07em; }
.replay-time-part input { width:100%; min-width:0; text-align:center; padding-left:8px; padding-right:8px; }
.replay-time-separator { align-self:center; padding-top:18px; color:#A0F000; font-size:1.45rem; font-weight:900; }

.replay-time-field small { display:block; margin-top:6px; color:var(--muted); line-height:1.4; }
.replay-live-readout { display:grid; align-content:center; gap:3px; padding:14px; border-radius:13px; background:rgba(8,31,60,.72); border:1px solid var(--border-soft); }
.replay-live-readout span, .control-video-readouts span { color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.07em; }
.replay-live-readout strong { font-size:1.75rem; font-variant-numeric:tabular-nums; }
.replay-live-readout small { color:var(--muted); }
.replay-live-readout small b { color:#A0F000; font-variant-numeric:tabular-nums; }
.replay-button-grid { display:grid; grid-template-columns:1.15fr 1.35fr repeat(4,.55fr) 1fr; gap:8px; margin-top:12px; }
.replay-button-grid.compact { grid-template-columns:repeat(4,1fr); }
.replay-button-grid.compact .replay-play-toggle { grid-column:1/-1; }
.replay-nudge { min-height:44px; border:1px solid var(--border-soft); border-radius:12px; background:rgba(15,42,76,.72); color:white; font-weight:850; cursor:pointer; }
.replay-nudge:active { transform:scale(.98); }
.replay-play-toggle { min-height:44px; }
.control-video-card { border-color:rgba(57,184,255,.24); }
.control-video-card.replay-mode { border-color:rgba(160,240,0,.24); }
.control-video-grid { display:grid; grid-template-columns:minmax(280px,1.45fr) minmax(210px,.55fr); gap:14px; align-items:stretch; }
.control-video-tools { display:grid; gap:12px; align-content:start; }
.control-video-readouts { display:grid; grid-template-columns:1fr; gap:8px; }
.control-video-readouts > div { padding:12px; border-radius:12px; border:1px solid var(--border-soft); background:rgba(3,15,34,.58); }
.control-video-readouts strong { display:block; margin-top:4px; font-size:1.05rem; font-variant-numeric:tabular-nums; }

@media(max-width:720px){
  .operating-mode-grid { grid-template-columns:1fr; }
  .operating-mode-choice { min-height:110px; }
  .replay-time-grid, .control-video-grid { grid-template-columns:1fr; }
  .replay-time-inputs { grid-template-columns:minmax(58px,1fr) auto minmax(66px,1fr) auto minmax(66px,1fr); gap:5px; }
  .replay-button-grid { grid-template-columns:1fr 1fr; }
  .replay-button-grid .replay-play-toggle { grid-column:1/-1; }
  .youtube-player, .youtube-player iframe { min-height:205px; }
}


/* v1.0.1: source-video verification link */
.summary-source-link { min-width: 0; }
.summary-source-link a {
  display: inline-block;
  max-width: 100%;
  color: #7ee6b5;
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.summary-source-link a:hover,
.summary-source-link a:focus-visible { text-decoration: underline; }

/* v1.0.2 — pregame Edit Setup workflow */
.edit-setup-banner,
.staging-edit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid rgba(70, 214, 159, 0.28);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(70, 214, 159, 0.10), rgba(9, 28, 58, 0.94));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}
.edit-setup-banner > div,
.staging-edit-toolbar > div { display: grid; gap: 4px; }
.edit-setup-banner strong,
.staging-edit-toolbar strong { color: #f4f8ff; font-size: 1rem; }
.edit-setup-banner small,
.staging-edit-toolbar small { color: rgba(224, 235, 250, 0.72); line-height: 1.4; }
.edit-setup-kicker,
.staging-edit-toolbar span {
  color: #48d7a0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.configuration-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}
.configuration-action-row .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  text-decoration: none;
}
.flight-tab.editable { border-color: rgba(70, 214, 159, 0.42); }
.flight-tab.editable small { color: #48d7a0; }
.field input[readonly],
.field select:disabled {
  opacity: 0.72;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.035);
}
.field > small {
  display: block;
  margin-top: 6px;
  color: rgba(224, 235, 250, 0.56);
  font-size: 0.72rem;
}
@media (max-width: 720px) {
  .edit-setup-banner,
  .staging-edit-toolbar { align-items: stretch; flex-direction: column; }
  .configuration-action-row { grid-template-columns: 1fr; }
  .configuration-action-row .secondary-button { min-height: 48px; }
}

/* v1.0.8 destructive testing control */
.destructive-card { border-color: rgba(255, 95, 95, .35); }
.danger-button {
  appearance: none;
  border: 1px solid rgba(255, 95, 95, .75);
  background: rgba(124, 22, 32, .45);
  color: #fff;
  border-radius: 12px;
  padding: .85rem 1rem;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.danger-button:disabled { opacity: .55; cursor: default; }


/* v1.0.8 authenticated-source controls */
.source-auth-box { margin-top: 1rem; border: 1px solid rgba(255,255,255,.10); border-radius: 18px; padding: 1rem; background: rgba(255,255,255,.025); }
.source-auth-toggle { display:flex; gap:.8rem; align-items:flex-start; cursor:pointer; }
.source-auth-toggle input { margin-top:.3rem; width:1.15rem; height:1.15rem; accent-color:#43d58b; }
.source-auth-toggle span { display:flex; flex-direction:column; gap:.2rem; }
.source-auth-toggle small, .auth-security-note { opacity:.72; }
.source-auth-fields { margin-top:1rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.source-auth-fields[hidden] { display:none !important; }
.source-auth-fields .auth-security-note { grid-column:1 / -1; margin:0; }
@media (max-width:720px) { .source-auth-fields { grid-template-columns:1fr; } }

/* v1.0.8 authenticated/server replay restart position */
.server-replay-restart-card {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.server-replay-restart-card p { margin: .35rem 0 .8rem; color: var(--muted); }
.server-replay-restart-card small { display: block; margin-top: .55rem; color: var(--muted); }


/* ==========================================================
   MATCH CONTROL — ANALYTICS V2
   ========================================================== */

.match-control-card {
  overflow: hidden;
}

.match-control-team-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
}

.match-control-team-row strong {
  font-size: .92rem;
  letter-spacing: .08em;
}

.match-control-team-row strong:last-child {
  text-align: right;
}

.match-control-team-row span {
  color: var(--muted, #81909f);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.match-control-metric {
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.match-control-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 9px;
}

.match-control-label > strong {
  font-size: .9rem;
}

.match-control-label > span {
  color: var(--muted, #81909f);
  font-size: .75rem;
  text-align: right;
}

.match-control-value-row {
  display: grid;
  grid-template-columns: 62px 1fr 62px;
  gap: 12px;
  align-items: center;
}

.match-control-value-row > strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.match-control-value-row > strong:last-child {
  text-align: right;
}

.match-control-track {
  position: relative;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #25313d;
}

.match-control-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  transition: width .3s ease;
}

.match-control-track b {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: rgba(255, 255, 255, .9);
  border-radius: 2px;
}

.match-control-card .dashboard-note {
  margin-bottom: 0;
}

@media (max-width: 620px) {
  .match-control-value-row {
    grid-template-columns: 52px 1fr 52px;
    gap: 8px;
  }

  .match-control-value-row > strong {
    font-size: 1rem;
  }

  .match-control-label {
    gap: 10px;
  }
}


/* =========================================================
   DOVETALE ANALYTICS V2
   DETECTED EVENTS + WIDTH OF PLAY
   ========================================================= */

.detected-events-content {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 2px 4px;
}

.detected-events-content > strong {
  font-size: clamp(54px, 8vw, 92px);
  line-height: .9;
  letter-spacing: -.055em;
  font-weight: 900;
}

.detected-events-content > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.detected-events-content span {
  font-size: 15px;
  font-weight: 800;
}

.detected-events-content small {
  color: #7188a5;
  max-width: 420px;
}


.width-half-body {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

.width-team-panel {
  padding: 14px;
  border: 1px solid rgba(118, 145, 177, .18);
  border-radius: 12px;
  background: rgba(7, 20, 40, .28);
}

.width-team-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.width-team-heading strong {
  font-size: 18px;
  font-weight: 900;
}

.width-team-heading span {
  color: #7188a5;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.width-quintile-card {
  margin-top: 10px;
}

.width-quintile-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}

.width-quintile-heading strong {
  font-size: 12px;
  font-weight: 900;
}

.width-quintile-heading span {
  color: #7188a5;
  font-size: 11px;
}

.width-lanes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  min-height: 76px;
}

.width-lane {
  min-width: 0;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 8px 3px 6px;
  border-radius: 6px;
  border: 1px solid rgba(170, 192, 218, .12);
  overflow: hidden;
  text-align: center;
}

.width-lane strong {
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .62);
}

.width-lane small {
  font-size: 9px;
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .72);
}

.width-lane.is-empty {
  opacity: .45;
}


@media (max-width: 720px) {

  .detected-events-content {
    gap: 16px;
  }

  .width-team-panel {
    padding: 10px;
  }

  .width-lanes {
    gap: 2px;
  }

  .width-lane {
    min-height: 68px;
    padding-left: 1px;
    padding-right: 1px;
  }

  .width-lane strong {
    font-size: 12px;
  }

  .width-lane small {
    font-size: 7px;
  }
}


/* =========================================================
   WIDTH OF PLAY V2
   Territory = stacked horizontal bars.
   Width = stacked vertical columns.
   ========================================================= */

.width-team-panel {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px !important;
  align-items: end;
}

.width-team-heading {
  grid-column: 1 / -1;
}

.width-quintile-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 285px;
}

.width-quintile-heading {
  min-height: 48px;
}

.width-lanes {
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 0 !important;
  height: 220px !important;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(19, 34, 55, .24);
  border: 1px solid rgba(152, 171, 195, .16);
}

.width-lane {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.width-lane strong {
  font-size: 10px !important;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

.width-lane small {
  display: none !important;
}

@media (max-width: 700px) {
  .width-team-panel {
    gap: 4px !important;
  }

  .width-quintile-card {
    height: 245px;
  }

  .width-lanes {
    height: 180px !important;
  }

  .width-quintile-heading span {
    font-size: 9px;
  }
}

/* Retain legacy possession DOM for JS compatibility,
   but do not display the redundant card. */
.possession-card {
  display: none !important;
}

/* ============================================================
   Kickoff thumbnail visibility
   Respect the HTML hidden attribute even where component
   display rules specify block/grid.
   ============================================================ */

.kickoff-thumbnail-frame img[hidden],
.kickoff-thumbnail-placeholder[hidden] {
  display: none !important;
}



/* ==========================================================
   SCOREBOARD CONTROL v1
   Outcome control derived from time-integrated Win Probability.
   Fixed scale: HOME -50 | 0 | +50 AWAY
   ========================================================== */

.scoreboard-control {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.scoreboard-control[hidden] {
  display: none !important;
}

.scoreboard-control-heading,
.scoreboard-control-teams,
.scoreboard-control-scale {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.scoreboard-control-heading {
  margin-bottom: 5px;
}

.scoreboard-control-heading strong {
  grid-column: 1 / 3;
  font-size: .82rem;
  font-weight: 850;
}

.scoreboard-control-heading span {
  justify-self: end;
  font-size: 1.08rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.scoreboard-control-teams {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .04em;
}

.scoreboard-control-teams span:nth-child(2) {
  padding: 0 9px;
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  opacity: .78;
}

.scoreboard-control-teams span:last-child {
  text-align: right;
}

.scoreboard-control-track {
  position: relative;
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(57,184,255,.28);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.38);
}

.scoreboard-control-centre {
  position: absolute;
  z-index: 3;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: rgba(255,255,255,.82);
}

.scoreboard-control-fill {
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  width: 0;
  left: 50%;
  transition:
    left 180ms linear,
    width 180ms linear;
}

.scoreboard-control-fill.is-home {
  background: linear-gradient(
    90deg,
    #00DC00 0%,
    rgba(0,220,0,.42) 100%
  );
}

.scoreboard-control-fill.is-away {
  background: linear-gradient(
    90deg,
    rgba(57,184,255,.42) 0%,
    #39B8FF 100%
  );
}

.scoreboard-control-marker {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 2px solid #041126;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 1px 5px rgba(0,0,0,.45);
  transition: left 180ms linear;
}

.scoreboard-control-scale {
  margin-top: 5px;
  color: var(--muted);
  font-size: .63rem;
  font-variant-numeric: tabular-nums;
}

.scoreboard-control-scale span:nth-child(2) {
  text-align: center;
}

.scoreboard-control-scale span:last-child {
  text-align: right;
}