/* ═══════════════════════════════════════════════════════
   Fixture360 — Design System
   Single-accent · Glassmorphic · Dark + Light
   Accent: Emerald #10b981

   Theming contract
   ────────────────
   Every colour below is a variable. `:root` holds the dark
   palette; `[data-theme="light"]` overrides only the tokens
   that differ. Views must never hardcode a colour — use the
   tokens so both themes stay correct.

   Token roles that are easy to get wrong:
     --accent       fills, bars, borders, glows. Same in both
                    themes so the brand mark stays constant.
     --accent-text  accent used as TEXT. Darkens in light mode
                    because #10b981 is only ~2.5:1 on white.
     --on-accent    text placed ON an --accent fill.
═══════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Accent ──────────────────────────────────────── */
  --accent:        #10b981;
  --accent-text:   #10b981;
  --accent-rgb:    16, 185, 129;
  --accent-dim:    rgba(16, 185, 129, 0.12);
  --accent-border: rgba(16, 185, 129, 0.35);
  --accent-glow:   rgba(16, 185, 129, 0.22);
  --on-accent:     #050810;

  /* ── Semantic ────────────────────────────────────── */
  --live:          #ef4444;
  --live-text:     #ef4444;
  --live-dim:      rgba(239, 68, 68, 0.14);
  --live-border:   rgba(239, 68, 68, 0.35);

  --gold:          #ffd700;
  --gold-glow:     rgba(255, 215, 0, 0.20);
  --crimson:       #ff4444;
  --crimson-glow:  rgba(255, 68, 68, 0.25);
  --sky:           #00b4fc;
  --sky-text:      #38bdf8;
  --sky-glow:      rgba(0, 180, 252, 0.20);

  /* Category colours. Each has a `-text` twin because the mid-tone
     versions used for fills drop below 4.5:1 on a white background. */
  --amber:        #f59e0b;
  --amber-text:   #f59e0b;
  --amber-dim:    rgba(245, 158, 11, 0.13);
  --amber-border: rgba(245, 158, 11, 0.35);
  --orange:      #f97316;
  --orange-text: #f97316;
  --violet:      #8b5cf6;
  --violet-text: #8b5cf6;
  --cyan:        #06b6d4;
  --cyan-text:   #06b6d4;
  --rose:        #f87171;
  --rose-text:   #f87171;
  --blue:        #3b82f6;
  --blue-text:   #3b82f6;
  --pink:        #ec4899;
  --pink-text:   #ec4899;
  --teal:        #14b8a6;
  --teal-text:   #14b8a6;

  /* Neutral = the "draw" / no-result slot in prediction UI. Lightened from
     #64748b so the dark --on-accent badge text clears AA (4.21 → 4.69). */
  --neutral:      #6b7c91;
  --neutral-text: #94a3b8;
  --neutral-dim:  rgba(148, 163, 184, 0.12);
  --neutral-border: rgba(148, 163, 184, 0.35);

  /* Text sitting on a SOLID fill that is the same colour in both themes
     (a red danger button, a W/D/L result swatch). Unlike --text-primary
     this must not invert, or the label vanishes into its own button. */
  --on-solid: #ffffff;

  /* ── Tinted callout chips ────────────────────────────────────────
     A dark ground with pale text in dark mode; a pale ground with dark
     text in light mode. Each hue is a bg / text / border trio. */
  --info-bg:      #1e3a5f;  --info-text:    #93c5fd;  --info-border:    #3b82f6;
  --success-bg:   #064e3b;  --success-text: #34d399;  --success-border: #065f46;
  --danger-bg:    #450a0a;  --danger-text:  #fca5a5;  --danger-border:  #7f1d1d;
  --warn-bg:      #1c1917;  --warn-text:    #fdba74;  --warn-border:    #c2410c;
  --magic-bg:     #3b0764;  --magic-text:   #c4b5fd;  --magic-border:   #8b5cf6;

  /* Inline <code> chips. Unlike a console pane these sit in running prose,
     so they follow the theme. */
  --code-bg:        #0f172a;

  /* Log/console panes stay dark in both themes — a terminal that turns
     white stops reading as a terminal. */
  --console-bg:     #020602;
  --console-rule:   #0a1a0a;
  --console-text:   #8a8a8a;

  /* Legacy aliases — the palette used to carry a second green
     (#00e676). Both now resolve to the single brand emerald. */
  --pitch-green:      var(--accent);
  --pitch-green-glow: var(--accent-glow);

  /* ── Surfaces ────────────────────────────────────── */
  --bg-base:          #050810;
  --bg-surface:       rgba(255, 255, 255, 0.04);
  --bg-surface-hover: rgba(255, 255, 255, 0.07);
  --bg-surface-active:var(--accent-dim);
  --surface-raised:   rgba(255, 255, 255, 0.07);

  /* Aliases for the shorter names some views reference. */
  --surface:       var(--bg-surface);
  --surface-hover: var(--bg-surface-hover);

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-active: var(--accent-border);

  /* Chrome = sidebar, top bar, dropdown panels. Tinted glass
     over the base colour, so it must flip with the theme. */
  --chrome-bg:       rgba(5, 8, 16, 0.78);
  --chrome-bg-solid: rgba(5, 8, 16, 0.95);
  --backdrop:        rgba(0, 0, 0, 0.6);
  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
  --shadow-panel:    0 12px 36px rgba(0, 0, 0, 0.55);
  --shadow-card:     none;

  /* ── Typography ──────────────────────────────────── */
  --text-primary:   #ffffff;
  --text-secondary: #e2e8f0;
  /* .45 measured 4.48:1 — just under AA, and this token carries most of the
     body copy on the site. .48 clears it at 4.99:1 with no visible change. */
  --text-muted:     rgba(255, 255, 255, 0.48);
  --text-faint:     #94a3b8;
  --text-accent:    var(--accent-text);
  --label-color:    var(--text-muted);

  /* ── Mesh background tints ───────────────────────── */
  --mesh-1: rgba(16, 185, 129, 0.07);
  --mesh-2: rgba(0, 180, 252, 0.06);
  --mesh-3: rgba(255, 215, 0, 0.04);
  --mesh-4: rgba(255, 68, 68, 0.04);

  /* ── Layout ──────────────────────────────────────── */
  --sidebar-w:   260px;
  --blur-glass:  blur(20px) saturate(180%);
  --radius-card: 16px;
  --radius-pill: 9999px;
}

/* ═══════════════════════════════════════════════════════
   Light theme
   Only the tokens that actually differ are restated.
═══════════════════════════════════════════════════════ */
[data-theme="light"] {
  color-scheme: light;

  /* Brand emerald is kept for fills/bars/borders, but as text
     it fails contrast on white — hence the darker --accent-text. */
  --accent-text:   #047857;
  --accent-dim:    rgba(16, 185, 129, 0.14);
  --accent-border: rgba(16, 185, 129, 0.45);
  --accent-glow:   rgba(16, 185, 129, 0.28);

  --live:        #dc2626;
  --live-text:   #b91c1c;
  --live-dim:    rgba(220, 38, 38, 0.10);
  --live-border: rgba(220, 38, 38, 0.32);

  --gold:        #b45309;
  --gold-glow:   rgba(180, 83, 9, 0.18);
  --crimson:     #dc2626;
  --crimson-glow:rgba(220, 38, 38, 0.22);
  --sky:         #0284c7;
  --sky-text:    #0369a1;
  --sky-glow:    rgba(3, 105, 161, 0.18);

  /* Fills keep their mid-tone; only the `-text` twins darken. */
  --amber-text:   #b45309;
  --amber-dim:    rgba(180, 83, 9, 0.10);
  --amber-border: rgba(180, 83, 9, 0.30);
  --orange-text: #c2410c;
  --violet-text: #6d28d9;
  --cyan-text:   #0e7490;
  --rose-text:   #b91c1c;
  --blue-text:   #1d4ed8;
  --pink-text:   #be185d;
  --teal-text:   #0f766e;

  --neutral:        #6b7c91;
  --neutral-text:   #475569;
  --neutral-dim:    rgba(100, 116, 139, 0.10);
  --neutral-border: rgba(100, 116, 139, 0.30);

  /* Callout chips invert: pale ground, dark text. --on-solid and the
     console tokens deliberately do not appear here — they stay fixed. */
  --code-bg:      #e2e8f0;

  --info-bg:      #dbeafe;  --info-text:    #1e40af;  --info-border:    #93c5fd;
  --success-bg:   #d1fae5;  --success-text: #065f46;  --success-border: #6ee7b7;
  --danger-bg:    #fee2e2;  --danger-text:  #991b1b;  --danger-border:  #fca5a5;
  --warn-bg:      #ffedd5;  --warn-text:    #9a3412;  --warn-border:    #fdba74;
  --magic-bg:     #ede9fe;  --magic-text:   #5b21b6;  --magic-border:   #c4b5fd;

  --bg-base:          #f4f6fa;
  --bg-surface:       rgba(255, 255, 255, 0.80);
  --bg-surface-hover: rgba(255, 255, 255, 0.97);
  --bg-surface-active:var(--accent-dim);
  --surface-raised:   #ffffff;

  --border:        rgba(15, 23, 42, 0.12);
  --border-strong: rgba(15, 23, 42, 0.28);

  --chrome-bg:       rgba(255, 255, 255, 0.82);
  --chrome-bg-solid: rgba(255, 255, 255, 0.97);
  --backdrop:        rgba(15, 23, 42, 0.35);
  --scrollbar-thumb: rgba(15, 23, 42, 0.20);
  --shadow-panel:    0 12px 36px rgba(15, 23, 42, 0.16);
  /* Light-mode cards need a shadow to read as raised — the
     low-contrast border alone doesn't separate them. */
  --shadow-card:     0 1px 2px rgba(15, 23, 42, 0.04),
                     0 2px 8px rgba(15, 23, 42, 0.05);

  --text-primary:   #0f172a;
  --text-secondary: #1e293b;
  --text-muted:     rgba(15, 23, 42, 0.64);  /* 5.16:1 — see note in :root */
  --text-faint:     #64748b;

  --mesh-1: rgba(16, 185, 129, 0.10);
  --mesh-2: rgba(0, 180, 252, 0.08);
  --mesh-3: rgba(255, 193, 7, 0.07);
  --mesh-4: rgba(255, 68, 68, 0.05);
}

/* ── Reset & base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; height: 100%; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background-color: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Animated mesh background ─────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%,   var(--mesh-1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 10%,  var(--mesh-2) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 50% 100%, var(--mesh-3) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 80%,  var(--mesh-4) 0%, transparent 50%);
  pointer-events: none;
  animation: meshDrift 18s ease-in-out infinite alternate;
}

@keyframes meshDrift {
  0%   { opacity: 1;  transform: scale(1);    }
  100% { opacity: .85; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ── Glass utility classes ─────────────────────────── */
.glass {
  background:  var(--bg-surface);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.glass-hover {
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.glass-hover:hover {
  background:   var(--bg-surface-hover);
  border-color: var(--border-active);
  box-shadow:   0 0 24px var(--accent-glow);
}

.glass-active {
  background:   var(--bg-surface-active) !important;
  border-color: var(--border-active) !important;
  color: var(--accent-text) !important;
}

/* ── Glow pills ────────────────────────────────────── */
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .65rem;
  border-radius: var(--radius-pill);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  background: var(--live-dim);
  border: 1px solid var(--live-border);
  color: var(--live-text);
  text-transform: uppercase;
}
.badge-live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 6px var(--live);
  animation: pulse 1.2s ease-in-out infinite;
}

.badge-ft {
  display: inline-flex;
  padding: .2rem .65rem;
  border-radius: var(--radius-pill);
  font-size: .7rem;
  font-weight: 700;
  background: var(--bg-surface-hover);
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-transform: uppercase;
}

@keyframes pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.75); }
}

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

/* ── Custom scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-glow); }

/* ── Themed logo ───────────────────────────────────────
   Both variants are in the markup and CSS picks one. Selecting server-side
   instead would leave the logo a page-load behind the toggle, and would bake
   a theme choice into output-cached HTML. */
.logo-light { display: none; }
[data-theme="light"] .logo-dark  { display: none; }
[data-theme="light"] .logo-light { display: block; }

/* ── Always-dark islands ───────────────────────────────
   The vidiprinter emulates a terminal, so it stays dark in both themes.
   That means every text token used INSIDE it must also stay on its dark
   value — otherwise light mode paints #065f46 onto a near-black pane.
   Re-declaring the tokens on the container scopes them to the subtree. */
.console-pane {
  --text-primary:   #ffffff;
  --text-secondary: #e2e8f0;
  --text-muted:     rgba(255, 255, 255, 0.48);
  --accent-text:    #10b981;
  --success-text:   #34d399;
  --info-text:      #93c5fd;
  --danger-text:    #fca5a5;
  --warn-text:      #fdba74;
  --magic-text:     #c4b5fd;
  --amber-text:     #f59e0b;
  --live-text:      #ef4444;
  --rose-text:      #f87171;
  --sky-text:       #38bdf8;
  --cyan-text:      #06b6d4;
  --neutral-text:   #94a3b8;
  --border:         rgba(255, 255, 255, 0.08);
  --bg-surface:     rgba(255, 255, 255, 0.04);
  --shadow-card:    none;
  color-scheme: dark;
}

/* ── Typography helpers ────────────────────────────── */
/* Replaces Tailwind's `text-white`, which hardcodes #fff and so survives
   the theme flip as white-on-white. */
.text-primary { color: var(--text-primary); }
.text-pitch   { color: var(--accent-text); }
.text-gold    { color: var(--gold); }
.text-crimson { color: var(--crimson); }
.text-sky     { color: var(--sky); }
.text-muted   { color: var(--text-muted); }

/* ── Stat card number ──────────────────────────────── */
.stat-number {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

/* ── Score display ─────────────────────────────────── */
.score-display {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  text-shadow: 0 0 30px var(--accent-glow);
}
/* The glow reads as a smudge against a light background. */
[data-theme="light"] .score-display { text-shadow: none; }

/* ── Fixture hero teams grid ───────────────────────── */
/* The key rule: grid children must have min-width:0 so  */
/* 1fr columns can actually shrink on narrow viewports.  */
.fixture-hero-team-col {
  min-width: 0;
}
.fixture-hero-team-name {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* ── Sidebar layout ────────────────────────────────── */
.layout-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--chrome-bg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-right: 1px solid var(--border);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  overflow-x: hidden;
}

.main-content {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.page-body {
  flex: 1;
  padding: 2rem 2.5rem;
  overflow-wrap: break-word;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.app-footer {
  flex-shrink: 0;
  width: 100%;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}

.app-footer-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2.5rem 1.25rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Top bar (inside main) ─────────────────────────── */
.top-bar {
  flex-shrink: 0;
  position: relative;
  z-index: 50;
  background: var(--chrome-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: .875rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ── Theme toggle ──────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.theme-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-border);
  outline-offset: 2px;
}
/* Each glyph shows only in the theme it switches AWAY from. */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ── Nav items ─────────────────────────────────────── */
.nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  transition: all .18s;
  margin: 1px 0;
  white-space: nowrap;
}
.nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
  border-color: var(--border);
}
.nav-item.active {
  color: var(--accent-text);
  background: var(--bg-surface-active);
  border-color: var(--border-active);
  box-shadow: 0 0 12px var(--accent-glow);
}
.nav-item svg { flex-shrink: 0; }
.nav-divider {
  height: 1px;
  background: var(--border);
  margin: .75rem 1rem;
}
.nav-section-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: .5rem 1rem .25rem;
}

.nav-dropdown { width: 100%; }
.nav-dropdown-menu { display: none; flex-direction: column; }

/* ── Page header ────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.page-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
}

/* ── Buttons ───────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.5rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: .875rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .2s, box-shadow .2s;
}
.btn-primary:hover {
  opacity: .9;
  box-shadow: 0 0 20px var(--accent-glow);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1.25rem;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: .875rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
}
.btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* ── Responsive: collapse sidebar on mobile ─────────── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .page-body { padding: 1.25rem 1rem; }
  .top-bar { padding: .75rem 1rem; }
  .app-footer-inner { padding: .9rem 1rem 1.1rem; }
  .fixture-hero-card { padding: 1.75rem 1rem 1.5rem !important; }
  .score-display { font-size: 2rem; }
  .fixture-hero-teams { gap: .6rem !important; }
  .fixture-hero-team-logo { width: 52px !important; height: 52px !important; }
  .fixture-hero-team-name { font-size: .85rem !important; }
}

.sidebar-backdrop       { display: none; position: fixed; inset: 0; z-index: 90; background: var(--backdrop); backdrop-filter: blur(4px); }
.sidebar-backdrop.show  { display: block; }

/* ── Identity Area overrides ─────────────────────────── */
.identity-page-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.identity-card {
  width: 100%;
  max-width: 440px;
}
.identity-card input[type="email"],
.identity-card input[type="password"],
.identity-card input[type="text"] {
  width: 100%;
  padding: .65rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: .9rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.identity-card input:focus {
  border-color: var(--border-active);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.identity-card label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .35rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Fixture card: responsive (narrow phones) ──────── */
@media (max-width: 480px) {
  .fixture-card { padding: .75rem .8rem !important; gap: .5rem !important; }
  .fixture-card-row { gap: .4rem !important; }
  .fixture-card-team { gap: .4rem !important; }
  .fixture-card-logo { width: 24px !important; height: 24px !important; }
  .fixture-card-team-name { font-size: .72rem !important; white-space: normal !important; line-height: 1.15; }
  .fixture-card-score-col { min-width: 56px !important; gap: .2rem !important; }
  .fixture-card-score-col .score-display { font-size: 1.1rem !important; }
  .fixture-card-chevron { display: none !important; }
  .fixture-card-wdl-row { gap: .4rem !important; }
  .fixture-card-wdl-mid { min-width: 56px !important; }
}