/*
 * Match Tracker — Stadium / Pitch theme.
 *
 * Mobile-first PWA for tracking Gaelic sports matches. Design tokens live in
 * :root, components use them. Self-hosted fonts so the app works offline
 * from first launch.
 */

/* ===== Empty-state message ===== */
.empty-message {
  color: var(--chalk);
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  font-size: 1rem;
  line-height: 1.5;
}

/* ===== Landscape lock overlay ===== */
#landscape-lock {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: linear-gradient(180deg, #0B1F14 0%, #081A11 100%);
  color: #f3f4f6;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
#landscape-lock .landscape-lock-inner {
  max-width: 28rem;
}
#landscape-lock .landscape-lock-icon {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 1rem;
  display: inline-block;
  animation: landscape-rotate 1.6s ease-in-out infinite;
  color: #34D399;
}
#landscape-lock h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.75rem;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
}
#landscape-lock p {
  font-size: 0.95rem;
  color: #9ca3af;
  margin: 0;
}
@keyframes landscape-rotate {
  0%, 40% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}
@media screen and (orientation: landscape) and (max-height: 500px) {
  #landscape-lock { display: flex; }
  body > header,
  body > main { display: none !important; }
}

/* ===== Self-hosted fonts (offline-first) ===== */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bebas-neue.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/manrope.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/manrope.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/manrope.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/manrope.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Design tokens ===== */
:root {
  /* Surfaces */
  --pitch-900: #0B1F14;
  --pitch-800: #103024;
  --pitch-700: #16442F;
  --pitch-line: #E9F2E5;
  --touchline:  #1F5A3E;

  /* Floodlight & ink */
  --floodlight: #F4F1E6;
  --chalk:      #C7D1C2;
  --mist:       #8A998E;

  /* Accents */
  --scoreboard-amber: #FFB628;
  --scoreboard-glow:  #FFD36B;
  --primary:          #2FB36B;
  --primary-press:    #228954;

  /* Semantic — flag meanings preserved */
  --flag-goal:  #1FA85B;
  --flag-point: #F4F1E6;
  --flag-2pt:   #FF8A1F;
  --card-yellow: #FFCC1F;
  --card-red:    #D43A3A;
  --card-black:  #111;
  --danger: #D43A3A;
  --warning: #FFCC1F;
  --muted: var(--mist);

  /* Typography */
  --font-display: 'Bebas Neue', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Spacing (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Radii */
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;

  /* Shadows */
  --sh-card:  0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.45);
  --sh-board: 0 0 0 1px rgba(233,242,229,.12) inset, 0 12px 36px rgba(0,0,0,.55);
  --sh-glow:  0 0 24px rgba(255,182,40,.45);

  --font-size-base: 16px;
}

/* ===== Reset & base ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0 !important;
  padding: 0 !important;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  background-color: var(--pitch-900);
  color: var(--floodlight);
  font-size: var(--font-size-base);
  line-height: 1.45;
  position: relative;
  min-height: 100vh;
}

/* Atmospheric layers for non-match views: deep gradient + subtle pitch arc */
body:not(.match-view-active)::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(47, 179, 107, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255, 182, 40, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--pitch-900) 0%, #081A11 100%);
}

/* Grain texture on every screen — inline SVG, no extra requests */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

/* Don't show the body background layers when match view's grass is active */
body.match-view-active::after { display: none; }

/* Don't allow text selection on UI elements */
button, img, svg, .match-card, .event-item {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* Input width safety */
input, select, textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===== Headings ===== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--floodlight);
  margin: 0;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; letter-spacing: 0.06em; }

/* ===== Header ===== */
header {
  background-color: transparent !important;
  background: none !important;
  padding: var(--sp-2) var(--sp-4) 0 var(--sp-4);
  text-align: center;
  color: var(--floodlight);
  box-shadow: none;
  border-bottom: 1px solid rgba(233, 242, 229, 0.10);
}

header h1 {
  font-size: 1.25rem;
  letter-spacing: 0.10em;
  font-weight: 400;
  margin: 0;
  padding-bottom: var(--sp-2);
}

main {
  padding: var(--sp-4);
  /* Push content below the Dynamic Island / status bar on iOS */
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--sp-4));
}

.view {
  margin-top: var(--sp-3);
}

/* ===== Buttons ===== */
.primary-btn,
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-align: center;
  min-height: 44px;
  transition: transform 80ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.primary-btn {
  background-color: var(--primary);
  color: var(--pitch-900);
  font-weight: 700;
}

.primary-btn:hover:not(:disabled) { background-color: var(--primary-press); }
.primary-btn:active:not(:disabled) { transform: scale(0.96); }
.primary-btn:disabled { background-color: var(--mist); cursor: not-allowed; opacity: 0.55; }

.secondary-btn {
  background-color: var(--pitch-700);
  color: var(--floodlight);
  border: 1px solid var(--touchline);
}
.secondary-btn:hover { background-color: var(--touchline); }
.secondary-btn:active { transform: scale(0.96); }

/* Override blue Tailwind buttons so they pick up the pitch palette without rewriting markup */
/* Primary CTA pill styling: ONLY fires on buttons that are explicitly
   `.primary-btn` (Cancel / Done / etc.). Previously this selector also
   caught any button with `bg-blue-600` — which is how the JS toggles the
   "selected" state on chips and player rows — so every selected chip
   inherited the pill shape + Bebas Neue uppercase. */
button.bg-blue-600.primary-btn {
  background-color: var(--primary) !important;
  color: var(--pitch-900) !important;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill) !important;
  font-weight: 700;
}
button.bg-blue-600.primary-btn:hover,
button.hover\:bg-blue-700.primary-btn:hover {
  background-color: var(--primary-press) !important;
}
button.bg-blue-600.primary-btn:active { transform: scale(0.96); }

/* Green/red secondary action variants in modals */
button.bg-green-600 { background-color: var(--primary) !important; color: var(--pitch-900) !important; border-radius: var(--r-pill) !important; }
button.bg-gray-600 { background-color: var(--pitch-700) !important; color: var(--floodlight) !important; border-radius: var(--r-pill) !important; border: 1px solid var(--touchline) !important; }

/* ===== Forms ===== */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 100%;
}

.form-row label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--chalk);
}

.form-row input,
.form-row select,
.form-row textarea {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  padding: 0.625rem 0.75rem;
  background-color: var(--pitch-700);
  color: var(--floodlight);
  border: 1px solid var(--touchline);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  min-height: 48px;
  box-sizing: border-box;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: var(--mist);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--scoreboard-glow);
  box-shadow: 0 0 0 2px rgba(255, 211, 107, 0.35);
}

/* Select with custom dropdown arrow */
.form-row select,
select.p-2 {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23F4F1E6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 2.5rem !important;
}

/* Inputs with Tailwind p-2 utility — match the form-row look */
input.p-2,
select.p-2,
textarea.p-2 {
  min-height: 48px !important;
  background-color: var(--pitch-700) !important;
  color: var(--floodlight) !important;
  border: 1px solid var(--touchline) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
  box-sizing: border-box !important;
}

textarea.p-2 {
  min-height: auto !important;
  height: auto;
  padding: 0.625rem 0.75rem !important;
}

input.p-2:focus,
select.p-2:focus,
textarea.p-2:focus {
  outline: none !important;
  border-color: var(--scoreboard-glow) !important;
  box-shadow: 0 0 0 2px rgba(255, 211, 107, 0.35) !important;
}

/* Date input — special handling for cross-browser quirks */
input[type="date"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
  padding: 0.625rem 0.75rem !important;
  border: 1px solid var(--touchline) !important;
  background-color: var(--pitch-700) !important;
  color: var(--floodlight) !important;
  border-radius: var(--r-sm) !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  height: 48px !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  font-family: var(--font-body) !important;
}

@supports (-webkit-touch-callout: none) {
  input[type="date"] {
    width: calc(100% - 2px) !important;
    max-width: calc(100% - 2px) !important;
  }
}

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.7;
  cursor: pointer;
  filter: invert(0.85);
}

/* ===== Home view ===== */
#home-view {
  margin-top: 0;
}

.home-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 78vh;
  padding-top: env(safe-area-inset-top, 0px);
  position: relative;
}

.home-shell::before {
  content: '';
  position: absolute;
  inset: -10% -20% auto -20%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(47, 179, 107, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

.home-title {
  font-family: var(--font-display);
  font-size: 3.25rem;
  letter-spacing: 0.10em;
  color: var(--floodlight);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--sp-7);
  text-shadow: 0 0 22px rgba(244, 241, 230, 0.18);
  line-height: 1;
}

.home-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 2px;
  margin: var(--sp-3) auto 0;
  background-color: var(--scoreboard-amber);
  box-shadow: 0 0 12px rgba(255, 182, 40, 0.55);
}

.home-actions {
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.home-btn {
  position: relative;
  width: 100%;
  min-height: 92px;
  background: linear-gradient(180deg, var(--pitch-800) 0%, var(--pitch-700) 100%) !important;
  color: var(--floodlight) !important;
  border: 1px solid var(--touchline) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-4) var(--sp-5) !important;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  cursor: pointer;
  font-family: var(--font-display) !important;
  font-size: 1.625rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  text-align: left;
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: transform 120ms ease, border-color 140ms ease, background 140ms ease;
}

.home-btn::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background-color: var(--scoreboard-amber);
  opacity: 0.35;
  transition: opacity 140ms ease, height 140ms ease;
  box-shadow: 0 0 0 transparent;
}

.home-btn:hover {
  border-color: var(--primary) !important;
}
.home-btn:hover::after {
  opacity: 0.85;
  box-shadow: 0 0 12px rgba(255, 182, 40, 0.55);
}
.home-btn:active {
  transform: translateY(1px) scale(0.99);
}
.home-btn:active::after {
  height: 3px;
  opacity: 1;
}

.home-btn-icon {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 8px rgba(47, 179, 107, 0.35));
  flex-shrink: 0;
}

.home-btn-label {
  font-family: var(--font-display);
  flex: 1;
}

/* ===== Match list + Player Panels: sticky header + search, scrollable list ===== */
#player-panels-view {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - 44px);
  overflow: hidden;
}

#player-panels-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#player-panels-list.is-scrolled {
  mask-image: linear-gradient(to bottom, transparent 0px, black 24px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 24px);
}

#match-list-view {
  display: flex;
  flex-direction: column;
  /* Fill the viewport minus main's top/bottom padding and view margin */
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - 44px);
  overflow: hidden;
}

#match-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Fade the top of the list only once content has scrolled under the header */
#match-list.is-scrolled {
  mask-image: linear-gradient(to bottom, transparent 0px, black 24px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 24px);
}

/* ===== Match list cards ===== */
.match-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.match-card {
  background-color: var(--pitch-800) !important;
  border: 1px solid var(--touchline) !important;
  border-left: 4px solid var(--primary) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-4) !important;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  cursor: pointer;
  position: relative;
  box-shadow: var(--sh-card);
  transition: transform 140ms ease, border-left-width 140ms ease, background-color 140ms ease;
}

.match-card:hover {
  background-color: var(--pitch-700) !important;
  transform: translateY(-1px);
}
.match-card:active {
  border-left-width: 6px !important;
  transform: translateY(0);
}

/* The first child in match-card is competition name (per script.js render) */
.match-card > div:first-child {
  font-family: var(--font-display) !important;
  letter-spacing: 0.06em;
  color: var(--floodlight) !important;
  font-size: 1.375rem !important;
  font-weight: 400 !important;
  line-height: 1.1;
}

/* Teams line (vs) */
.match-card > div:nth-child(2) {
  font-family: var(--font-body);
  color: var(--chalk) !important;
  font-size: 0.9375rem;
}

/* Score line */
.match-card > div:nth-child(3) {
  font-family: var(--font-mono) !important;
  font-weight: 600;
  color: var(--scoreboard-amber) !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em;
  text-align: left !important;
  margin-top: var(--sp-1) !important;
}

/* Date line */
.match-card > div:nth-child(4) {
  font-family: var(--font-body);
  color: var(--mist) !important;
  font-size: 0.8125rem !important;
}

/* ===== Match Details — the scoreboard ===== */
#match-details-view {
  height: 100vh;
  position: relative;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-y pan-x;
}

#match-details-view > * {
  position: relative;
  z-index: 1;
}

/* Scoreboard module: subtle backing panel framing the period + timer so
   they read as a discrete "scoreboard segment" rather than floating digits.
   Uses :has() to target the wrapper that contains #timer-display. */
#match-details-view div:has(> #timer-display) {
  background: linear-gradient(180deg, rgba(11, 31, 20, 0.55) 0%, rgba(11, 31, 20, 0.78) 100%);
  border: 1px solid rgba(199, 209, 194, 0.16);
  border-radius: var(--r-md);
  padding: 4px 12px 6px 12px;
  backdrop-filter: blur(6px) saturate(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

/* Period label above the timer — slightly more compact letter-spacing
   inside the panel */
#period-display {
  font-family: var(--font-display);
  font-size: 0.8125rem !important;
  letter-spacing: 0.16em;
  color: var(--scoreboard-amber);
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 182, 40, 0.35);
  margin-bottom: -2px;
}

/* Timer — floodlit ivory, modern scoreboard digit */
#timer-display {
  font-family: var(--font-mono) !important;
  font-weight: 700;
  font-size: 3rem !important;
  color: var(--floodlight);
  text-shadow: 0 0 14px rgba(244, 241, 230, 0.30);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Team cards — bezel'd panels */
#match-details-view .team-card {
  background: linear-gradient(180deg, rgba(11, 31, 20, 0.78) 0%, rgba(17, 43, 29, 0.88) 100%) !important;
  border: 1px solid var(--touchline) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-board);
  backdrop-filter: blur(6px) saturate(1.05);
  padding: var(--sp-5) var(--sp-4) !important;
  position: relative;
}

/* Halfway line between the two team cards */
#team-cards {
  position: relative;
}
#team-cards::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  border-top: 1px dashed rgba(233, 242, 229, 0.18);
  pointer-events: none;
}

/* Team name */
#match-details-view .team-name {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em;
  color: var(--floodlight);
  text-transform: uppercase;
}

/* Inset the scoreboard so it sits cleanly between the goal flag (left, 56px)
   and the point flag (right, 56px). Score is perfectly centered. */
#match-details-view .score-display {
  left: 72px !important;
  right: 72px !important;
}

/* Score digits — sized so double digits (e.g. 12-18) fit between the flag pills */
#match-details-view .score-goals,
#match-details-view .score-points {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  font-size: 2.75rem !important;
  line-height: 1 !important;
  color: var(--floodlight) !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(244, 241, 230, 0.22);
  display: inline-block;
}

#match-details-view .score-row .mx-1 {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  color: var(--scoreboard-amber) !important;
  font-size: 2.25rem !important;
}

#match-details-view .score-total {
  font-family: var(--font-display) !important;
  font-size: 1.125rem !important;
  letter-spacing: 0.14em;
  color: var(--chalk) !important;
  text-transform: uppercase;
  margin-top: var(--sp-1) !important;
}

/* Score flip animation — triggered via .flash class on score spans */
@media (prefers-reduced-motion: no-preference) {
  .score-goals.flash,
  .score-points.flash {
    animation: scoreFlip 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes scoreFlip {
    0%   { transform: scale(1);    color: var(--floodlight); text-shadow: 0 0 18px rgba(244, 241, 230, 0.22); }
    35%  { transform: scale(1.22); color: var(--scoreboard-amber); text-shadow: var(--sh-glow); }
    100% { transform: scale(1);    color: var(--floodlight); text-shadow: 0 0 18px rgba(244, 241, 230, 0.22); }
  }

  #timer-display.is-running {
    animation: timerPulse 1.6s ease-in-out infinite;
  }
  @keyframes timerPulse {
    0%, 100% { text-shadow: 0 0 14px rgba(244, 241, 230, 0.30); }
    50%      { text-shadow: 0 0 20px rgba(244, 241, 230, 0.55), 0 0 32px rgba(244, 241, 230, 0.15); }
  }
}

/* Flag pill buttons — goals/points/2-pointer */
.team-goal-btn,
.team-point-btn,
.team-two-pointer-btn {
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--r-pill) !important;
  background-color: rgba(22, 68, 47, 0.85) !important;
  border: 1px solid var(--touchline) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 100ms ease, box-shadow 140ms ease, border-color 140ms ease;
  padding: 0 !important;
}

/* .hidden must always win over the flag-pill display rule */
.team-goal-btn.hidden,
.team-point-btn.hidden,
.team-two-pointer-btn.hidden {
  display: none !important;
}

.team-goal-btn img,
.team-point-btn img,
.team-two-pointer-btn img {
  width: 48px !important;
  height: 48px !important;
}

.team-goal-btn:active,
.team-point-btn:active,
.team-two-pointer-btn:active {
  transform: scale(0.94);
  border-color: var(--scoreboard-glow) !important;
  box-shadow: 0 0 0 2px rgba(255, 211, 107, 0.45), 0 0 18px rgba(255, 211, 107, 0.35);
}

/* ===== Ghost-circle icon buttons (chrome) =====
   Subtle always-visible ring/fill so icon-only buttons read as tap targets on
   touch devices (no hover state available). Ring hugs the icon tightly. */
button.cursor-pointer,
.team-event-btn,
.team-edit-btn,
#show-events-btn,
#last-event-display button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background-color: rgba(11, 31, 20, 0.50) !important;
  border: 1px solid rgba(199, 209, 194, 0.18) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  transition: background-color 120ms ease, border-color 140ms ease, transform 80ms ease, box-shadow 140ms ease;
  flex-shrink: 0;
}

button.cursor-pointer:active,
.team-event-btn:active,
.team-edit-btn:active,
#show-events-btn:active,
#last-event-display button:active {
  background-color: rgba(22, 68, 47, 0.95) !important;
  border-color: rgba(255, 211, 107, 0.55) !important;
  transform: scale(0.94);
  box-shadow: 0 0 0 2px rgba(255, 211, 107, 0.30);
}

/* Icon hugs the ring — only ~4px breathing room each side */
button.cursor-pointer > img,
.team-event-btn > img,
.team-edit-btn > img,
#show-events-btn > img,
#last-event-display button > img {
  width: 28px !important;
  height: 28px !important;
}

/* Larger plus/minus on time editor — keep the bigger ring + image */
#minus-1-min-btn,
#plus-1-min-btn {
  width: 60px !important;
  height: 60px !important;
}
#minus-1-min-btn > img,
#plus-1-min-btn > img {
  width: 44px !important;
  height: 44px !important;
}

/* ===== Last-event ticker (pinned bottom in match view) ===== */
#match-details-view #last-event-display {
  background-color: rgba(11, 31, 20, 0.82) !important;
  border: 1px solid var(--touchline) !important;
  border-top: 2px solid var(--scoreboard-amber) !important;
  position: fixed !important;
  bottom: 1rem !important;
  left: 1rem !important;
  right: 1rem !important;
  margin: 0 !important;
  padding: var(--sp-3) var(--sp-4) !important;
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: var(--r-md) !important;
  z-index: 10 !important;
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: var(--sh-card);
  align-items: center !important;
  min-height: 0 !important;
}

/* Live ticker text */
#match-details-view #last-event-display * {
  font-family: var(--font-body);
}

/* Force the content column to shrink so the right-side actions can never
   overflow the card edge, even if a Tailwind utility (min-w-0) isn't loaded. */
#match-details-view #last-event-display > div:first-child {
  min-width: 0;
  flex: 1 1 0%;
}

/* Headline: bold team + outcome chip on one line */
.last-event-headline {
  margin-bottom: 2px;
}
.last-event-team {
  font-family: var(--font-display) !important;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  color: var(--floodlight);
  text-transform: uppercase;
  line-height: 1.1;
}
.last-event-outcome {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background-color: var(--pitch-700);
  color: var(--chalk);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--touchline);
}

/* Subtitle: all meta in muted text — wraps to a second line when needed,
   capped at 2 lines so a long note doesn't blow up the card height. */
.last-event-subtitle {
  font-family: var(--font-body) !important;
  color: var(--mist);
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Grass background for match view ===== */
.match-view-active {
  background-image: url('icons/grassbackground.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: pan-y pan-x !important;
}

html.match-view-active {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: pan-y pan-x !important;
  background-image: url('icons/grassbackground.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Atmospheric overlay: dark vignette + subtle pitch-line pattern (inline SVG) */
html.match-view-active::before,
body.match-view-active::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

html.match-view-active::before {
  /* Vignette + subtle pitch-line halfway pattern */
  background:
    radial-gradient(ellipse 90% 70% at center, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.55) 75%, rgba(0, 0, 0, 0.78) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='none'><g fill='none' stroke='%23E9F2E5' stroke-width='1.2' opacity='0.10'><line x1='0' y1='400' x2='400' y2='400'/><circle cx='200' cy='400' r='60'/><rect x='130' y='40' width='140' height='80'/><rect x='130' y='680' width='140' height='80'/><circle cx='200' cy='400' r='4' fill='%23E9F2E5' stroke='none'/></g></svg>");
  background-size: cover, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

body.match-view-active::before {
  /* Soft additional darken on top — preserves contrast over bright grass patches */
  background-color: rgba(0, 0, 0, 0.18);
}

.match-view-active header {
  background: none !important;
  position: relative;
  padding-top: env(safe-area-inset-top, 0px) !important;
  flex-shrink: 0 !important;
  z-index: 1 !important;
  margin-bottom: 0 !important;
  border-bottom: none;
}

.match-view-active header::before {
  display: none;
}

.match-view-active main {
  padding: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  max-width: none !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: 0 !important;
  z-index: 1 !important;
}

.match-view-active #match-details-view {
  padding: 1rem;
  flex: 1 1 auto;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
  display: flex;
  flex-direction: column;
  z-index: auto !important;
  isolation: auto !important;
  position: relative;
}

.match-view-active main {
  z-index: auto !important;
  isolation: auto !important;
}

/* ===== Modal shell ===== */
/* Modal backdrop — replaces brightness(0.4) blunt approach */
.fixed.inset-0[id$="-modal"] {
  background-color: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(4px) saturate(1.05);
  z-index: 100 !important;
}

/* The inner modal panel — apply via existing inner div */
.fixed.inset-0[id$="-modal"] > div {
  background-color: var(--pitch-800) !important;
  border: 1px solid var(--touchline) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-card);
}

/* Modal headers — the title row */
.fixed.inset-0[id$="-modal"] > div > div:first-child {
  border-bottom: 1px solid rgba(31, 90, 62, 0.65);
  padding-bottom: var(--sp-2);
}

.fixed.inset-0[id$="-modal"] h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: var(--floodlight);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Modal header icons — share the same icon family as the Add Event chooser
   (foulevent / kickoutevent / subevent / noteevent / missevent), each of
   which is a self-contained circular badge with its own pitch-700 backdrop
   and white stroke. Size them up so the circular frame reads cleanly. */
.fixed.inset-0[id$="-modal"] h3 img {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0;
}

/* Modal entry animation */
@media (prefers-reduced-motion: no-preference) {
  .fixed.inset-0[id$="-modal"]:not(.hidden) > div {
    animation: modalIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes modalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* ===== Player Selection view — themed pick-list, team-sheet vocabulary ===== */
#player-selection-view .fixed.inset-0 > div {
  background-color: var(--pitch-800) !important;
  border: 1px solid var(--touchline) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-card);
  /* Clip the sticky header + scrollable list to the rounded panel so the top
     corners read as round (the sticky child's own bg was painting over them). */
  overflow: hidden;
}

/* Sticky header: chalk-tinted bottom divider so the amber halfway-stripe
   below it reads as the accent layer, not the only line. */
#player-selection-view .fixed.inset-0 .sticky.top-0,
#player-selection-view .sticky.top-0 {
  background-color: var(--pitch-800) !important;
  border-bottom: 1px solid rgba(199, 209, 194, 0.14) !important;
  position: relative;
}

/* Amber halfway-stripe under the header — same accent used on Edit Players
   and Panel Editor section headers. */
#player-selection-view .sticky.top-0::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: -1px;
  width: 36px;
  height: 2px;
  background: var(--scoreboard-amber);
  box-shadow: 0 0 10px rgba(255, 182, 40, 0.45);
  pointer-events: none;
}

#player-selection-view h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--floodlight);
}

/* "FILLING JERSEY [5]" — mono uppercase caption with a glowing scoreboard
   digit for the number being filled. */
#player-selection-jersey-info {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--mist);
  text-transform: uppercase;
  margin-bottom: var(--sp-3) !important;
}

.player-selection-jersey-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 8px;
  color: var(--scoreboard-amber);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255, 182, 40, 0.30);
  text-transform: none;
}

/* Panel dropdown — themed select with a custom chevron. */
#player-selection-panel-dropdown {
  background-color: var(--pitch-900) !important;
  color: var(--floodlight) !important;
  border: 1px solid var(--touchline) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 36px 10px 12px !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 0.9375rem !important;
  width: 100% !important;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23F4F1E6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>") !important;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  transition: border-color 140ms ease, box-shadow 160ms ease;
}

#player-selection-panel-dropdown:focus {
  border-color: var(--scoreboard-glow) !important;
  box-shadow: 0 0 0 1px rgba(255, 211, 107, 0.35);
}

/* Scroll area — slightly tighter padding so cards have room to breathe. */
#player-selection-view .flex-1.overflow-y-auto {
  padding: var(--sp-3) var(--sp-4) var(--sp-4) var(--sp-4) !important;
}

/* List wrapper — flex column with gap, override Tailwind space-y-3 */
#player-selection-list-page {
  display: flex !important;
  flex-direction: column;
  gap: var(--sp-2);
}

#player-selection-list-page > * + * {
  margin-top: 0 !important;
}

/* Player option rows — team-sheet stripe, no jersey slot. Whole row is the
   tap target (selects the name into the chosen jersey slot). */
#player-selection-list-page button {
  display: flex !important;
  align-items: center;
  width: 100%;
  padding: 14px 16px !important;
  background-color: var(--pitch-800) !important;
  background-image: none !important;
  color: var(--floodlight) !important;
  border: 1px solid var(--touchline) !important;
  border-left: 3px solid var(--primary) !important;
  border-radius: var(--r-md) !important;
  text-align: left !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 4px 12px rgba(0, 0, 0, 0.30) !important;
  transition: transform 140ms ease, background-color 140ms ease, border-left-width 140ms ease;
}

/* Jersey chip inside a player option — keeps the boxed chip treatment rather
   than the full-cell scoreboard digit used in the editable team-sheet rows. */
#player-selection-list-page button .player-selection-chip {
  margin-right: var(--sp-3);
}

#player-selection-list-page button:hover {
  background-color: rgba(22, 68, 47, 0.55) !important;
}

#player-selection-list-page button:active {
  border-left-width: 5px !important;
  transform: scale(0.995);
}

/* Empty / placeholder text */
#player-selection-list-page p {
  text-align: center !important;
  color: var(--chalk) !important;
  padding: var(--sp-5) var(--sp-3) !important;
  font-size: 0.9375rem !important;
  font-family: var(--font-body) !important;
  border: 1px dashed rgba(199, 209, 194, 0.20) !important;
  border-radius: var(--r-md) !important;
  background-color: rgba(11, 31, 20, 0.30) !important;
  margin: 0 !important;
}

/* Stagger reveal */
@media (prefers-reduced-motion: no-preference) {
  #player-selection-list-page button {
    animation: rowIn 280ms ease-out both;
    animation-delay: calc(var(--i, 0) * 18ms);
  }
}

/* Stats modal sticky header */
#match-stats-modal .sticky.top-0 {
  background-color: var(--pitch-800) !important;
  border-bottom: 1px solid var(--touchline) !important;
}

/* Event meta info banner inside modals — same accent vocabulary as the
   swap-mode banner (amber left rule + soft amber wash) so all
   instructional/contextual banners across the app read as one element. */
[id$="-event-meta"],
#event-type-meta {
  background: linear-gradient(180deg,
              rgba(255, 182, 40, 0.10) 0%,
              rgba(255, 182, 40, 0.04) 100%) !important;
  border: 1px solid rgba(255, 182, 40, 0.35) !important;
  border-left: 3px solid var(--scoreboard-amber) !important;
  color: var(--floodlight) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  padding: 10px 14px !important;
  margin-bottom: var(--sp-3) !important;
}

/* Event-type selection cards in event-type-modal */
.event-type-option {
  border: 1px solid var(--touchline) !important;
  background-color: var(--pitch-800) !important;
  color: var(--floodlight) !important;
  border-radius: var(--r-md) !important;
  border-left: 4px solid var(--primary) !important;
  cursor: pointer;
  transition: transform 100ms ease, background-color 140ms ease, border-left-color 140ms ease;
  font-family: var(--font-display) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-type-option:hover {
  background-color: var(--pitch-700) !important;
  border-left-color: var(--scoreboard-amber) !important;
}
.event-type-option:active {
  transform: scale(0.97);
}

/* Override the bg-blue-600 on event-type-option so the new style wins */
.event-type-option.bg-blue-600 {
  background-color: var(--pitch-800) !important;
  color: var(--floodlight) !important;
  border-left: 4px solid var(--primary) !important;
}

/* Foul / Card / Kick-out type chips — same vocabulary as Score Type and
   Shot Type chips in the Score Event modal so all picker chips look alike. */
.foul-type-option,
.card-type-option,
.kickout-outcome-option {
  background-color: var(--pitch-800) !important;
  background-image: none !important;
  color: var(--chalk) !important;
  border: 1px solid var(--touchline) !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 12px !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-align: left !important;
  margin-bottom: 4px !important;
  transition: background-color 140ms ease, border-color 160ms ease,
              color 140ms ease, box-shadow 160ms ease;
}

.foul-type-option:hover,
.card-type-option:hover,
.kickout-outcome-option:hover {
  background-color: rgba(22, 68, 47, 0.55) !important;
  border-color: rgba(199, 209, 194, 0.30) !important;
  color: var(--floodlight) !important;
}

/* Selected state for these option chips — amber, matching the rest of the
   app's selection language. Replaces the previous vivid-green-pill treatment
   so foul/card/kickout pickers look like every other selectable option. */
.foul-type-option.bg-blue-600,
.card-type-option.bg-blue-600,
.kickout-outcome-option.bg-blue-600 {
  background-color: rgba(255, 182, 40, 0.10) !important;
  color: var(--floodlight) !important;
  border-color: var(--scoreboard-amber) !important;
  box-shadow: 0 0 0 1px rgba(255, 182, 40, 0.30),
              0 0 12px rgba(255, 182, 40, 0.18);
}

/* Mini-captions inside foul / kickout / substitution modals. Same vocabulary
   as the Score Event modal so every event modal reads as one system. */
#foul-event-modal .text-sm.font-medium.text-gray-300,
#kickout-event-modal .text-sm.font-medium.text-gray-300,
#substitution-event-modal .text-sm.font-medium.text-gray-300,
#note-event-modal label,
#foul-event-modal label,
#kickout-event-modal label,
#substitution-event-modal label {
  font-family: var(--font-mono) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--mist) !important;
  text-transform: uppercase !important;
  margin-bottom: var(--sp-2) !important;
}

/* Textareas/inputs inside event modals — themed surface, focus glow. */
#note-event-modal textarea,
#foul-event-modal textarea,
#kickout-event-modal textarea,
#substitution-event-modal textarea {
  background-color: var(--pitch-900) !important;
  color: var(--floodlight) !important;
  border: 1px solid var(--touchline) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  padding: 10px 12px !important;
  outline: none;
  transition: border-color 140ms ease, box-shadow 160ms ease;
}

#note-event-modal textarea:focus,
#foul-event-modal textarea:focus,
#kickout-event-modal textarea:focus,
#substitution-event-modal textarea:focus {
  border-color: var(--scoreboard-glow) !important;
  box-shadow: 0 0 0 1px rgba(255, 211, 107, 0.35);
}

/* Player-list containers inside modals — soft inset surface */
#score-player-list,
#foul-player-list,
#kickout-player-list,
#substitution-player-off-list,
#substitution-player-on-list {
  background-color: var(--pitch-900) !important;
  border: 1px solid var(--touchline) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-2) !important;
}

/* Player option buttons inside the modal lists — compact card-row variant.
   Smaller padding + smaller jersey chip so more players fit on screen. */
#score-player-list > button,
#foul-player-list > button,
#kickout-player-list > button,
#substitution-player-off-list > button,
#substitution-player-on-list > button {
  background-color: var(--pitch-800) !important;
  background-image: none !important;
  color: var(--floodlight) !important;
  border: 1px solid var(--touchline) !important;
  border-left: 3px solid var(--primary) !important;
  border-radius: var(--r-md) !important;
  padding: 6px 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
  transition: background-color 140ms ease, border-left-width 140ms ease;
}

#score-player-list > button:last-child,
#foul-player-list > button:last-child,
#kickout-player-list > button:last-child,
#substitution-player-off-list > button:last-child,
#substitution-player-on-list > button:last-child {
  margin-bottom: 0 !important;
}

#score-player-list > button:hover,
#foul-player-list > button:hover,
#kickout-player-list > button:hover,
#substitution-player-off-list > button:hover,
#substitution-player-on-list > button:hover {
  background-color: rgba(22, 68, 47, 0.55) !important;
}

/* Selected state — JS toggles bg-blue-600 + text-white; repurpose to amber. */
#score-player-list > button.bg-blue-600,
#foul-player-list > button.bg-blue-600,
#kickout-player-list > button.bg-blue-600,
#substitution-player-off-list > button.bg-blue-600,
#substitution-player-on-list > button.bg-blue-600 {
  background-color: rgba(255, 182, 40, 0.14) !important;
  border-left-color: var(--scoreboard-amber) !important;
  border-left-width: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 182, 40, 0.30);
}

/* ===== Score Event modal — unified picker system =====
   Three pickers (Score Type, Shot Type, Player) share ONE selection language
   (amber-on) but use TWO densities: compact chips for secondary qualifiers,
   full card-rows for the primary player pick. */

/* Captions: mono uppercase mini-caption, same vocabulary as "30 PLAYERS" /
   "FILLING JERSEY". Replaces the inconsistent text-sm/font-medium Tailwind
   utilities the JS render uses. */
#score-event-modal #score-player-header,
#score-event-modal .text-sm.font-medium.text-gray-300,
#score-event-modal label[for="score-notes"] {
  font-family: var(--font-mono) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--mist) !important;
  text-transform: uppercase !important;
  margin-bottom: var(--sp-2) !important;
}

/* Score Type / Shot Type chips — compact pitch-800 chip, sentence-case body
   font, stays the SAME shape and casing in default + active states. The
   active state only changes border + wash + text brightness. */
#score-type-list button {
  display: block !important;
  width: 100% !important;
  background-color: var(--pitch-800) !important;
  background-image: none !important;
  color: var(--chalk) !important;
  border: 1px solid var(--touchline) !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 12px !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-align: left !important;
  margin-bottom: 4px !important;
  transition: background-color 140ms ease, border-color 160ms ease,
              color 140ms ease, box-shadow 160ms ease;
}

#score-type-list button:hover {
  background-color: rgba(22, 68, 47, 0.55) !important;
  border-color: rgba(199, 209, 194, 0.30) !important;
  color: var(--floodlight) !important;
}

/* Active chip — amber border + soft inner wash. Wins against the global
   `.bg-blue-600 !important` alias to --primary that lives in
   tailwind-minimal.css (and is what was making selected chips render as
   vivid green pills). */
#score-type-list button.bg-blue-600 {
  background-color: rgba(255, 182, 40, 0.10) !important;
  border-color: var(--scoreboard-amber) !important;
  color: var(--floodlight) !important;
  box-shadow: 0 0 0 1px rgba(255, 182, 40, 0.30),
              0 0 12px rgba(255, 182, 40, 0.18);
}

/* Notes textarea — same themed surface as the panel-name input. */
#score-event-modal #score-notes {
  background-color: var(--pitch-900) !important;
  color: var(--floodlight) !important;
  border: 1px solid var(--touchline) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  padding: 10px 12px !important;
  outline: none;
  transition: border-color 140ms ease, box-shadow 160ms ease;
}

#score-event-modal #score-notes:focus {
  border-color: var(--scoreboard-glow) !important;
  box-shadow: 0 0 0 1px rgba(255, 211, 107, 0.35);
}

/* Foul/kickout/card option buttons already get themed below but use r-sm —
   bump them to r-md for visual consistency with the player option cards. */

/* ===== Events list rows ===== */
#events-list,
.events-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0;
}

#events-list .event-item,
.events-list .event-item {
  list-style: none !important;
  background-color: var(--pitch-800) !important;
  /* Default state: 1px touchline on top/right/bottom, 4px accent on the left.
     The accent colour is driven by --event-accent (set per event-type below). */
  --event-accent: var(--mist);
  border: 1px solid var(--touchline) !important;
  border-left: 4px solid var(--event-accent) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-3) var(--sp-4) !important;
  font-family: var(--font-body);
  color: var(--floodlight);
  transition: background-color 120ms ease;
}

.events-list .event-item:hover {
  background-color: var(--pitch-700) !important;
}

/* Team-2 events: accent on the right edge instead of the left, so a glance
   tells you which team owns the row. The opposite side reverts to the plain
   touchline border (no tint bleed). */
#events-list .event-item.event-team-2 {
  border-left: 1px solid var(--touchline) !important;
  border-right: 4px solid var(--event-accent) !important;
}

/* Per-event-type accent colour. Impactful events (scores, cards, period
   markers) get bright/semantic colours. Routine bookkeeping (sub, note,
   kickout, plain fouls) keeps the default muted mist. */
#events-list .event-item.event-type-goal        { --event-accent: var(--flag-goal); }
#events-list .event-item.event-type-point       { --event-accent: var(--flag-point); }
#events-list .event-item.event-type-twopt       { --event-accent: var(--flag-2pt); }
#events-list .event-item.event-type-card-yellow { --event-accent: var(--card-yellow); }
#events-list .event-item.event-type-card-red    { --event-accent: var(--card-red); }
#events-list .event-item.event-type-card-black  { --event-accent: #4B5563; }
#events-list .event-item.event-type-period      { --event-accent: var(--scoreboard-amber); }

/* Stagger reveal — set --i in JS render loops via inline style */
@media (prefers-reduced-motion: no-preference) {
  #events-list .event-item,
  #match-list .match-card {
    animation: rowIn 280ms ease-out both;
    animation-delay: calc(var(--i, 0) * 24ms);
  }
  @keyframes rowIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ===== Edit Players view =====
   "Team-sheet" treatment: one stripe per player, jersey number set like a
   scoreboard digit, name in body type, edit slot at the far right. Inherits
   the 4px left accent vocabulary from .match-card so the screen sits in the
   same visual family as Matches, Events, and Player Panels. */

.players-edit-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.team-players {
  background: none;
  border: none;
  padding: 0;
}

/* --- Team header: title + count on the left, swap toggle on the right.
   Halfway-line marker below echoes the dashed halfway line in match details. */
.team-players-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(199, 209, 194, 0.14);
  position: relative;
}

.team-players-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.team-players-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  letter-spacing: 0.08em;
  color: var(--floodlight);
  line-height: 1.0;
}

/* Small mono "30 PLAYERS" caption beneath the team name (rendered by JS). */
.team-players-count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--mist);
  text-transform: uppercase;
}

/* Right-hand action cluster: Import (pre-throw-in only) beside Swap. */
.team-players-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* --- Import button: same ghost pill as Swap, but an action rather than a
   mode toggle, so it has no active state and uses a download glyph. */
.panel-import-btn {
  font-family: var(--font-display) !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  padding: 7px 14px !important;
  background-color: rgba(11, 31, 20, 0.55) !important;
  background-image: none !important;
  color: var(--chalk) !important;
  border: 1px solid rgba(199, 209, 194, 0.28) !important;
  border-radius: var(--r-pill) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: background-color 140ms ease, border-color 140ms ease,
              color 140ms ease, box-shadow 160ms ease;
}

.panel-import-btn::before {
  content: '\2193'; /* ↓ */
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--mist);
}

.panel-import-btn:hover {
  border-color: var(--scoreboard-amber) !important;
  color: var(--floodlight) !important;
  box-shadow: 0 0 0 1px rgba(255, 182, 40, 0.25),
              0 0 14px rgba(255, 182, 40, 0.18);
}

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

/* Short amber stripe under the header — pitch halfway-line reference. */
.team-players-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 36px;
  height: 2px;
  background: var(--scoreboard-amber);
  box-shadow: 0 0 10px rgba(255, 182, 40, 0.45);
}

/* --- Swap toggle: distinct mode-toggle vocabulary, NOT a save/cancel button.
   Ghost pill with a chalk border, amber when on, with a ⇅ glyph prefix that
   rotates 180° on activation. */
#swap-players-btn {
  font-family: var(--font-display) !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  padding: 7px 14px !important;
  background-color: rgba(11, 31, 20, 0.55) !important;
  background-image: none !important;
  color: var(--chalk) !important;
  border: 1px solid rgba(199, 209, 194, 0.28) !important;
  border-radius: var(--r-pill) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 140ms ease, border-color 140ms ease,
              color 140ms ease, box-shadow 160ms ease;
}

#swap-players-btn::before {
  content: '\21C5'; /* ⇅ */
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--mist);
  transition: color 140ms ease, transform 200ms ease;
}

#swap-players-btn:hover {
  border-color: var(--scoreboard-amber) !important;
  color: var(--floodlight) !important;
}
#swap-players-btn:hover::before {
  color: var(--scoreboard-amber);
}

#swap-players-btn.is-on {
  background-color: rgba(255, 182, 40, 0.16) !important;
  border-color: var(--scoreboard-amber) !important;
  color: var(--scoreboard-amber) !important;
  box-shadow: 0 0 0 1px rgba(255, 182, 40, 0.35),
              0 0 16px rgba(255, 182, 40, 0.25);
}
#swap-players-btn.is-on::before {
  color: var(--scoreboard-amber);
  transform: rotate(180deg);
}

/* --- Player row: the team-sheet stripe.
   3-column grid — jersey | name | action. */
.player-row {
  display: grid;
  grid-template-columns: 56px 1fr 44px;
  align-items: stretch;
  padding: 0;
  background-color: var(--pitch-800);
  border: 1px solid var(--touchline);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 6px 16px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  position: relative;
  transition: background-color 140ms ease, border-left-width 140ms ease,
              transform 140ms ease;
}

.player-row:hover {
  background-color: rgba(22, 68, 47, 0.55);
}

.player-row:active {
  border-left-width: 5px;
}

.team-players .player-row + .player-row {
  margin-top: var(--sp-2);
}

/* --- Jersey badge: the small chip used in score / foul / kick-out / sub
   modals when listing players. Compact badge so it doesn't dominate. */
.jersey-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  background-color: var(--pitch-900);
  color: var(--floodlight);
  border: 1px solid var(--touchline);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Inside an Edit Players or Panel Editor row the chip is rendered as the
   team-sheet's scoreboard digit instead — full-cell, no box, amber + glow. */
.player-row .jersey-chip,
.panel-player-row .jersey-chip {
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--scoreboard-amber);
  border: none;
  border-right: 1px solid rgba(199, 209, 194, 0.10);
  border-radius: 0;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(255, 182, 40, 0.30);
}

/* --- Name input: borderless, type-forward. Focus reveals an amber underline. */
.player-row input.player-row-name {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 13px 16px;
  background-color: transparent;
  color: var(--floodlight);
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.005em;
  outline: none;
  transition: background-color 140ms ease, box-shadow 160ms ease;
}

.player-row input.player-row-name::placeholder {
  color: var(--mist);
}

.player-row input.player-row-name:focus {
  background-color: rgba(11, 31, 20, 0.45);
  box-shadow: inset 0 -2px 0 0 var(--scoreboard-glow);
}

/* --- Action button: ghost slot at the row's right edge. */
.player-row .player-row-action,
button.player-row-action {
  flex-shrink: 0;
  align-self: stretch;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-left: 1px solid rgba(199, 209, 194, 0.10) !important;
  border-radius: 0 !important;
  cursor: pointer;
  padding: 0 !important;
  overflow: hidden;
  position: relative;
  transition: background-color 140ms ease;
}

.player-row .player-row-action img {
  width: 24px;
  height: 24px;
  opacity: 0.72;
  transition: opacity 140ms ease, transform 140ms ease;
}

.player-row .player-row-action:hover,
button.player-row-action:hover {
  background-color: rgba(22, 68, 47, 0.6) !important;
}

.player-row .player-row-action:hover img {
  opacity: 1;
}

.player-row .player-row-action:active img {
  transform: scale(0.92);
}

/* --- Swap mode states. */
#players-edit-container[data-swap-mode="on"] .player-row {
  cursor: pointer;
  border-left-color: rgba(199, 209, 194, 0.30);
  grid-template-columns: 56px 1fr; /* collapse the hidden action column */
}

#players-edit-container[data-swap-mode="on"] .player-row input.player-row-name {
  pointer-events: none;
}

#players-edit-container[data-swap-mode="on"] .player-row input.player-row-name:focus {
  background-color: transparent;
  box-shadow: none;
}

#players-edit-container[data-swap-mode="on"] .player-row .player-row-action {
  display: none !important;
}

#players-edit-container[data-swap-mode="on"] .player-row.is-swap-selected {
  border-left-color: var(--scoreboard-amber);
  border-left-width: 4px;
  background-color: rgba(255, 182, 40, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
              0 6px 16px rgba(0, 0, 0, 0.35),
              0 0 0 1px rgba(255, 182, 40, 0.45),
              0 0 22px rgba(255, 182, 40, 0.18);
}

#players-edit-container[data-swap-mode="on"] .player-row.is-swap-selected .jersey-chip {
  color: var(--scoreboard-glow);
  text-shadow: 0 0 16px rgba(255, 211, 107, 0.55);
}

/* --- Swap mode in the Panel Editor. Same vocabulary; panel rows have no
   action column to collapse, so the grid is left alone. */
#panel-players-list[data-swap-mode="on"] .panel-player-row {
  cursor: pointer;
  border-left-color: rgba(199, 209, 194, 0.30);
}

#panel-players-list[data-swap-mode="on"] .panel-player-row input.panel-player-name {
  pointer-events: none;
}

#panel-players-list[data-swap-mode="on"] .panel-player-row input.panel-player-name:focus {
  background-color: transparent;
  box-shadow: none;
}

#panel-players-list[data-swap-mode="on"] .panel-player-row.is-swap-selected {
  border-left-color: var(--scoreboard-amber);
  border-left-width: 4px;
  background-color: rgba(255, 182, 40, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
              0 6px 16px rgba(0, 0, 0, 0.35),
              0 0 0 1px rgba(255, 182, 40, 0.45),
              0 0 22px rgba(255, 182, 40, 0.18);
}

#panel-players-list[data-swap-mode="on"] .panel-player-row.is-swap-selected .jersey-chip {
  color: var(--scoreboard-glow);
  text-shadow: 0 0 16px rgba(255, 211, 107, 0.55);
}

/* --- Commit pulse: ripple of amber outwards from both rows when a swap fires. */
@keyframes swap-pulse {
  0%   { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset,
                     0 6px 16px rgba(0,0,0,.35),
                     0 0 0 0 rgba(255, 182, 40, 0.7); }
  60%  { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset,
                     0 6px 16px rgba(0,0,0,.35),
                     0 0 0 12px rgba(255, 182, 40, 0); }
  100% { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset,
                     0 6px 16px rgba(0,0,0,.35),
                     0 0 0 0 rgba(255, 182, 40, 0); }
}

.player-row.is-swap-pulse,
.panel-player-row.is-swap-pulse {
  animation: swap-pulse 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Banner: matches the event-meta vocabulary used inside modals
   (3px amber left rule + soft amber wash). */
.swap-banner {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  background: linear-gradient(180deg,
              rgba(255, 182, 40, 0.12) 0%,
              rgba(255, 182, 40, 0.05) 100%);
  border: 1px solid rgba(255, 182, 40, 0.35);
  border-left: 3px solid var(--scoreboard-amber);
  color: var(--floodlight);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  margin-bottom: var(--sp-3);
  box-shadow: 0 0 18px rgba(255, 182, 40, 0.10);
}

.swap-banner::before {
  content: '\21C5'; /* ⇅ */
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--scoreboard-amber);
  font-size: 1rem;
  flex-shrink: 0;
}

.swap-banner.is-visible {
  display: flex;
}

/* --- Stagger reveal — same `rowIn` keyframe used elsewhere. */
@media (prefers-reduced-motion: no-preference) {
  .team-players .player-row {
    animation: rowIn 280ms ease-out both;
    animation-delay: calc(var(--i, 0) * 18ms);
  }
}

.players-edit-actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

/* ===== Panel Editor view =====
   Reuses the team-sheet vocabulary from Edit Players: borderless name slot,
   ghost delete slot, 4px primary-green left accent, drop shadow. Panel rows
   have no jersey number (panels are nameless rosters), so the row layout is
   a 2-column grid: name | delete. */

/* Panel name field at the top — primary-green accented to echo the row stripe */
#panel-editor-view .form-row label[for="panel-name"] {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--mist);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

#panel-editor-view #panel-name {
  background-color: var(--pitch-800);
  color: var(--floodlight);
  border: 1px solid var(--touchline);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  outline: none;
  transition: border-color 140ms ease, box-shadow 160ms ease;
}

#panel-editor-view #panel-name::placeholder {
  color: var(--mist);
}

#panel-editor-view #panel-name:focus {
  border-color: var(--scoreboard-glow);
  box-shadow: 0 0 0 1px rgba(255, 211, 107, 0.35);
}

/* Section header — same treatment as Edit Players team header */
#panel-editor-view .panel-players-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(199, 209, 194, 0.14);
  position: relative;
}

#panel-editor-view .panel-players-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 36px;
  height: 2px;
  background: var(--scoreboard-amber);
  box-shadow: 0 0 10px rgba(255, 182, 40, 0.45);
}

#panel-editor-view .panel-players-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  letter-spacing: 0.08em;
  color: var(--floodlight);
  line-height: 1.0;
}

/* Panel Swap toggle — labelled ghost pill, same family as the Edit Players Swap */
#panel-editor-view #swap-panel-players-btn {
  font-family: var(--font-display) !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  padding: 7px 14px !important;
  background-color: rgba(11, 31, 20, 0.55) !important;
  background-image: none !important;
  color: var(--chalk) !important;
  border: 1px solid rgba(199, 209, 194, 0.28) !important;
  border-radius: var(--r-pill) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex-shrink: 0;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 160ms ease;
}

#panel-editor-view #swap-panel-players-btn::before {
  content: '⇅';
  font-size: 1rem;
  line-height: 1;
  transition: transform 160ms ease;
}

#panel-editor-view #swap-panel-players-btn:hover {
  border-color: var(--scoreboard-amber) !important;
  color: var(--floodlight) !important;
  box-shadow: 0 0 0 1px rgba(255, 182, 40, 0.25),
              0 0 14px rgba(255, 182, 40, 0.18);
}

/* Active swap mode — amber pill, matching the Edit Players toggle. */
#panel-editor-view #swap-panel-players-btn.is-on {
  background-color: rgba(255, 182, 40, 0.16) !important;
  border-color: var(--scoreboard-amber) !important;
  color: var(--scoreboard-amber) !important;
  box-shadow: 0 0 0 1px rgba(255, 182, 40, 0.35),
              0 0 18px rgba(255, 182, 40, 0.22);
}

#panel-editor-view #swap-panel-players-btn.is-on::before {
  transform: rotate(180deg);
}

/* Drop the boxy gray border around the player list — each row is a card now */
#panel-editor-view #panel-players-list {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Neutralise the Tailwind space-y-2 utility on children — flex gap handles it */
#panel-editor-view #panel-players-list > * + * {
  margin-top: 0 !important;
}

/* Each player row — team-sheet stripe with a fixed jersey slot */
#panel-players-list .panel-player-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: stretch;
  flex-shrink: 0;
  padding: 0;
  background-color: var(--pitch-800);
  border: 1px solid var(--touchline);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 6px 16px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  margin: 0;
  transition: background-color 140ms ease, border-left-width 140ms ease;
}

#panel-players-list .panel-player-row:hover {
  background-color: rgba(22, 68, 47, 0.55);
}

#panel-players-list .panel-player-row input {
  width: 100%;
  min-width: 0;
  padding: 13px 16px;
  background-color: transparent;
  color: var(--floodlight);
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.005em;
  outline: none;
  transition: background-color 140ms ease, box-shadow 160ms ease;
}

#panel-players-list .panel-player-row input::placeholder {
  color: var(--mist);
}

#panel-players-list .panel-player-row input:focus {
  background-color: rgba(11, 31, 20, 0.45);
  box-shadow: inset 0 -2px 0 0 var(--scoreboard-glow);
}

/* Stagger reveal on panel rows — same animation as everywhere else */
@media (prefers-reduced-motion: no-preference) {
  #panel-players-list .panel-player-row {
    animation: rowIn 280ms ease-out both;
    animation-delay: calc(var(--i, 0) * 18ms);
  }
}

/* ===== Time/Period editor ===== */
#time-period-editor-view {
  max-width: 600px;
  margin: 0 auto;
}

#time-editor-display {
  font-family: var(--font-mono) !important;
  font-weight: 700;
  color: var(--floodlight);
  text-shadow: 0 0 14px rgba(244, 241, 230, 0.30);
  font-variant-numeric: tabular-nums;
}

#timer-click-area {
  outline: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

#timer-click-area:active {
  opacity: 0.7;
}

/* ===== Period swap animation ===== */
@media (prefers-reduced-motion: no-preference) {
  #period-display.swapping {
    animation: periodSwap 380ms ease-out;
  }
  @keyframes periodSwap {
    0%   { opacity: 1; transform: translateY(0); }
    40%  { opacity: 0; transform: translateY(-6px); }
    60%  { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

/* ===== Buttons-row helper ===== */
.buttons-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
}

/* ===== Misc Tailwind text-color overrides for new palette ===== */
.bg-yellow-900 {
  background-color: rgba(212, 58, 58, 0.18) !important;
  border-color: rgba(212, 58, 58, 0.5) !important;
  color: var(--floodlight) !important;
}

/* The yellow warning banner in the time editor */
.bg-yellow-900.border-yellow-700 {
  background-color: rgba(255, 182, 40, 0.12) !important;
  border-color: rgba(255, 182, 40, 0.45) !important;
  color: var(--floodlight) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-body);
}

/* Match details Pause/Resume/End buttons — compact pills, sized so the
   wider "START HALF" label still clears the centered clock panel. */
#end-period-btn, #pause-timer-btn, #resume-timer-btn {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-pill) !important;
  padding: 3px 10px !important;
  font-size: 0.9375rem !important;
  min-height: 30px !important;
}

/* Color-code timer controls so opposite actions read at a glance.
   END HALF and PAUSE are "stop" actions → amber.
   RESUME is the "go" action → stays primary green (default). */
#end-period-btn.bg-blue-600,
#pause-timer-btn.bg-blue-600 {
  background-color: var(--scoreboard-amber) !important;
  color: var(--pitch-900) !important;
}
#end-period-btn.bg-blue-600:hover,
#pause-timer-btn.bg-blue-600:hover,
#end-period-btn.hover\:bg-blue-700:hover,
#pause-timer-btn.hover\:bg-blue-700:hover {
  background-color: var(--scoreboard-glow) !important;
}

/* Top-bar action trio: more breathing room between share / stats / edit */
#match-details-view > div:first-child > div.flex.items-center {
  gap: var(--sp-4);
}
#match-details-view > div:first-child > div.flex.items-center > .mr-3 {
  margin-right: 0 !important;
}

/* ===== Scrollbars (subtle, themed) ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--touchline) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--touchline);
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary);
}

/* ===== Responsive ===== */
@media (min-width: 600px) {
  .timer-controls {
    flex-direction: row;
    justify-content: center;
  }
  .timer-controls button {
    flex: 1;
    margin: 0 0.25rem;
    width: auto;
  }
  .buttons-row {
    justify-content: flex-end;
  }
}

/* ===== Live score sharing ===== */
/* Dot on the toolbar button showing a broadcast is currently active. */
.live-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background-color: var(--danger);
  border: 2px solid var(--pitch-900);
  animation: live-dot-pulse 2s ease-in-out infinite;
}

@keyframes live-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

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