/* ==========================================================================
   PH Sports Live — styles.css
   Mobile-first, dark-mode, CLS-safe (Core Web Vitals compliant)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted Inter (variable weight).
   Place the woff2 file at /fonts/Inter-Variable.woff2 (download once from
   https://rsms.me/inter/ or https://github.com/rsms/inter/releases).
   While the file is missing the browser falls back to system UI fonts via
   the --font-family stack below — no FOIT, just slightly less polished
   typography until the binary is dropped in.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/Inter-Variable.woff2") format("woff2-variations"),
       url("/fonts/Inter-Variable.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Backgrounds */
  --bg-primary:    #0d1117;
  --bg-secondary:  #161b22;
  --bg-card:       #1c2330;
  --bg-card-hover: #21293a;

  /* Borders */
  --border-color:  #30363d;

  /* Text */
  --text-primary:   #e6edf3;
  --text-secondary: #8b949e;
  --text-muted:     #6e7681;

  /* Accents */
  --accent-red:   #e94560;
  --accent-blue:  #1f6feb;
  --accent-gold:  #d4a017;
  --accent-green: #3fb950;

  /* Live indicator */
  --live-color: #ff4444;
  --live-glow:  rgba(255, 68, 68, 0.3);

  /* Per-sport accent palette — applied via [data-sport] on .match-card */
  --sport-basketball: #f97316;  /* orange */
  --sport-football:   #22c55e;  /* green */
  --sport-boxing:     #ef4444;  /* crimson */
  --sport-baseball:   #3b82f6;  /* navy */
  --sport-volleyball: #ec4899;  /* pink */
  --sport-tennis:     #eab308;  /* yellow */
  --sport-hockey:     #06b6d4;  /* cyan */
  --sport-mma:        #a855f7;  /* purple */
  --sport-cricket:    #84cc16;  /* lime */
  --sport-rugby:      #14b8a6;  /* teal */
  --sport-golf:       #10b981;  /* emerald */
  --sport-motorsport: #f43f5e;  /* rose */

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadow */
  --shadow-card:     0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.6);

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Motion */
  --transition: 0.2s ease;

  /* Layout */
  --container-padding: 1rem;
  --header-height: 60px;
}

/* Light theme override */
[data-theme="light"] {
  --bg-primary:    #f6f7f9;
  --bg-secondary:  #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #f3f4f6;

  --border-color:  #e2e6ea;

  --text-primary:   #0d1117;
  --text-secondary: #4b5563;
  --text-muted:     #6b7280;

  --shadow-card:     0 4px 20px rgba(15, 23, 42, 0.08);
  --shadow-elevated: 0 8px 32px rgba(15, 23, 42, 0.12);
}

/* Theme-toggle button (mounted in the header by header.js) */
.theme-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

[data-theme="light"] .theme-toggle {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .theme-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Prevent layout shift from scrollbar appearing */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img, iframe, video {
  max-width: 100%;
  display: block;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}

ul, ol { list-style: none; }

/* --------------------------------------------------------------------------
   Layout Helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --------------------------------------------------------------------------
   Typography Scale (fluid via clamp — prevents CLS from reflow)
   -------------------------------------------------------------------------- */
h1 { font-size: clamp(1.5rem, 5vw, 2.5rem);  font-weight: 800; line-height: 1.2; }
h2 { font-size: clamp(1.2rem, 4vw, 1.75rem); font-weight: 700; line-height: 1.3; }
h3 { font-size: clamp(1rem,   3vw, 1.25rem); font-weight: 600; line-height: 1.4; }

/* --------------------------------------------------------------------------
   Accessibility — focus ring
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Print stylesheet — strip chrome, show only readable content
   -------------------------------------------------------------------------- */
@media print {
  /* Hide navigation, header, footer, stream player, interactive chrome */
  #header-container, #footer-container,
  .site-header, .mobile-nav, .mobile-nav-backdrop,
  .categories, .stream-responsive, .stream-sources,
  .btn-predict, .match-card__cta, .match-card__footer,
  .predict-modal, .search-overlay, .toast-stack,
  .theme-toggle, .hamburger, .header__actions,
  .flag-strip, .hero__stats, .faq-section nav,
  button, [role="tab"] { display: none !important; }

  /* Ensure white background + black text for all content */
  body, .match-page, .prose, .pm-panel, .prediction-card {
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
    border-color: #ccc !important;
  }

  /* Remove hero decorative gradient */
  .hero { background: none !important; padding: 1rem 0 !important; }
  .hero__title { color: #111 !important; font-size: 1.4rem !important; }

  /* Make links visible as text */
  a::after { content: " (" attr(href) ")"; font-size: 0.75rem; color: #555; }
  a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }

  /* Ensure match cards print legibly */
  .match-card { border: 1px solid #ccc !important; break-inside: avoid; margin-bottom: 0.75rem; }
  .prediction-card { break-inside: avoid; }

  /* Page margins */
  @page { margin: 1.5cm; }
}

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

/* ==========================================================================
   CONTENT PROTECTION — disable text selection and drag on page content
   (inputs/textareas/buttons are excluded so usability is unaffected)
   ========================================================================== */
body {
  -webkit-user-select: none;
  -moz-user-select:    none;
  user-select:         none;
}
input, textarea, select, [contenteditable] {
  -webkit-user-select: text;
  -moz-user-select:    text;
  user-select:         text;
}

/* ==========================================================================
   HEADER  (injected by header.js into #header-container)
   Fully opaque so the area at the top never shows scrolled content
   "bleeding" through.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  height: var(--header-height);
  display: flex;
  align-items: center;
  /* Reserve exact height to prevent CLS */
  min-height: var(--header-height);
}

.header__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.1rem;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.header__logo-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: block;
  border-radius: 6px;
  /* Subtle drop-shadow so the logo reads cleanly on the dark header */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.header__logo-accent { color: var(--accent-red); }

/* Desktop nav — hidden on mobile */
.header__nav { display: none; }

.header__nav-list {
  display: flex;
  gap: 0.25rem;
}

.header__nav-link {
  display: block;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.header__nav-link:hover,
.header__nav-link.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.header__search-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.95rem;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}

.header__search-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

[data-theme="light"] .header__search-btn {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .header__search-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   SEARCH OVERLAY  (mounted lazily by app.js when triggered)
   ========================================================================== */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 2rem;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 0.18s ease;
}

.search-overlay[hidden] { display: none; }

[data-theme="light"] .search-overlay {
  background: rgba(15, 23, 42, 0.45);
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.search-overlay__panel {
  width: 100%;
  max-width: 560px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px -16px rgba(0, 0, 0, 0.6);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.search-overlay__input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.search-overlay__input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 1rem;
  font-family: inherit;
  padding: 0.4rem 0;
  outline: none;
}

.search-overlay__close {
  background: none;
  border: 0;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.search-overlay__hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  text-align: center;
}

.search-overlay__results {
  margin-top: 0.75rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.search-result {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), transform var(--transition);
}

.search-result:hover {
  border-color: var(--accent-blue);
  transform: translateX(2px);
}

.search-result__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.search-result__meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.5rem;
}

.search-result__meta .badge {
  background: rgba(31, 111, 235, 0.12);
  color: var(--accent-blue);
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  font-weight: 700;
}

.search-result__meta .live {
  color: var(--live-color);
  font-weight: 700;
}

.search-overlay__empty {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 1.5rem 0.75rem;
}

.header__live-badge {
  background: var(--live-color);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  animation: pulse-badge 2s ease-in-out infinite;
  white-space: nowrap;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}

/* Hamburger button */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  gap: 5px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  transition: background var(--transition);
  flex-shrink: 0;
}

.hamburger:hover { background: rgba(255, 255, 255, 0.12); }

.hamburger__line {
  width: 18px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

.hamburger.open .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open .hamburger__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav — backdrop overlay */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.28s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mobile-nav-backdrop.open {
  display: block;
  opacity: 1;
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(300px, 82vw);
  background: var(--bg-secondary);
  z-index: 999;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  border-right: 1px solid var(--border-color);
  -webkit-overflow-scrolling: touch;
}

.mobile-nav.open { transform: translateX(0); }

/* Drawer header row */
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: var(--header-height);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.mobile-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mobile-nav__brand strong { color: var(--accent); }

.mobile-nav__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.mobile-nav__close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
}

.mobile-nav__link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
}

.mobile-nav__link.active {
  background: rgba(31, 111, 235, 0.15);
  color: var(--accent);
  font-weight: 600;
}

.mobile-nav__link--secondary {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.mobile-nav__divider {
  height: 1px;
  background: var(--border-color);
  margin: 0 0.75rem;
}

/* Tablet+ — show desktop nav, hide hamburger */
@media (min-width: 768px) {
  .header__nav   { display: block; }
  .hamburger     { display: none; }
  :root { --container-padding: 1.5rem; }
}

@media (min-width: 1024px) {
  :root { --container-padding: 2rem; }
}

/* ==========================================================================
   HERO  — animated gradient-mesh backdrop
   Three soft blurred radials drift across the hero. GPU-accelerated, ~3 KB.
   ========================================================================== */
.hero {
  position: relative;
  padding: 2.5rem 0 1.75rem;
  background: #0d1117;
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
  isolation: isolate;
}

.hero::before,
.hero::after,
.hero > .hero__mesh-3 {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}

.hero::before {
  top: -20%; left: -10%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, #e94560 0%, transparent 70%);
  animation: drift-1 18s ease-in-out infinite;
}

.hero::after {
  bottom: -30%; right: -10%;
  width: 55%; aspect-ratio: 1;
  background: radial-gradient(circle, #1f6feb 0%, transparent 70%);
  animation: drift-2 22s ease-in-out infinite;
}

.hero__mesh-3 {
  top: 30%; left: 40%;
  width: 40%; aspect-ratio: 1;
  background: radial-gradient(circle, #d4a017 0%, transparent 70%);
  animation: drift-3 26s ease-in-out infinite;
  opacity: 0.4;
}

@keyframes drift-1 {
  0%, 100% { transform: translate(0, 0)      scale(1); }
  50%      { transform: translate(8%, 12%)   scale(1.1); }
}
@keyframes drift-2 {
  0%, 100% { transform: translate(0, 0)      scale(1); }
  50%      { transform: translate(-10%, -8%) scale(1.15); }
}
@keyframes drift-3 {
  0%, 100% { transform: translate(0, 0)      scale(1); }
  33%      { transform: translate(-15%, 10%) scale(0.9); }
  66%      { transform: translate(15%, -8%)  scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .hero__mesh-3 { animation: none; }
  /* Explicitly stop the pulsing LIVE badge — the wildcard rule above sets
     duration to 0.01ms which still runs; none is cleaner for this case. */
  .header__live-badge { animation: none; }
}

/* Mobile perf: hide the animated mesh blobs entirely on small screens.
   They are decorative-only and create GPU compositing layers on low-end
   Android devices. The hero background colour still shows through. */
@media (max-width: 640px) {
  .hero::before,
  .hero::after,
  .hero__mesh-3 {
    display: none;
  }
}

.hero__content {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.hero__title { margin-bottom: 0.75rem; }

/* Tight eyebrow above the title — replaces the long subtitle */
.hero__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 100px;
  padding: 0.3rem 0.75rem;
  margin-bottom: 0.875rem;
}

/* Compact variant when the featured card sits below — keeps both balanced */
.hero__title--compact {
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0;
}

.hero__accent {
  color: var(--accent-red);
  display: block;
}

.hero__subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 1.75rem;
  line-height: 1.6;
}

.hero__stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.stat__number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-red);
  line-height: 1;
  /* Reserve space to prevent CLS when number updates */
  min-width: 2ch;
  text-align: center;
}

.stat__label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   SPORT CATEGORY NAV
   Sticks to the VERY TOP of the viewport (top: 0) with a z-index higher
   than the site header — so when the user scrolls past the hero, the
   categories strip rises up and pins itself flush against the top edge.
   Before scrolling, both the header and categories are visible in their
   natural document positions.
   ========================================================================== */
.categories {
  padding: 0.75rem 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  /* Pin to the very top of the viewport — covers the sticky header on
     scroll so there is NEVER a visible gap above the category buttons. */
  position: sticky;
  top: 0;
  /* Higher than .site-header (z-index 1000) so it rises above on scroll */
  z-index: 1100;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.85);
}

/* Gradient fade indicators (left + right) — show only on overflow */
.categories .container {
  position: relative;
}

.categories .container::before,
.categories .container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.categories .container::before {
  left: var(--container-padding);
  background: linear-gradient(to right, var(--bg-secondary) 40%, transparent);
}

.categories .container::after {
  right: var(--container-padding);
  background: linear-gradient(to left, var(--bg-secondary) 40%, transparent);
}

/* Toggle classes added by app.js based on scrollLeft / scrollWidth */
.categories .container.has-overflow-left::before  { opacity: 1; }
.categories .container.has-overflow-right::after  { opacity: 1; }

.categories__nav {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  /* Smooth scroll when scrollIntoView() is called for active button */
  scroll-behavior: smooth;
  /* Ensure scroll snap works on mobile if user flicks */
  scroll-snap-type: x proximity;
}

.categories__nav::-webkit-scrollbar { display: none; }

.cat-btn { scroll-snap-align: start; }

.cat-btn {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  min-height: 44px; /* WCAG AA touch-target minimum */
  border-radius: 100px;
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
  line-height: 1;
}

.cat-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

.cat-btn.active {
  background: var(--accent-red);
  color: #fff;
  border-color: var(--accent-red);
}

/* ==========================================================================
   SECTION STRUCTURE
   ========================================================================== */
.matches-section { padding: 1.5rem 0; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  font-weight: 400;
}

.section-filter select {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-family: var(--font-family);
  cursor: pointer;
}

/* Live pulse dot — shared across header, cards, and match page */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--live-color);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1);   box-shadow: 0 0 0 0 var(--live-glow); }
  50%       { opacity: 0.8; transform: scale(1.15); box-shadow: 0 0 0 5px transparent; }
}

/* ==========================================================================
   MATCH CARDS GRID
   ========================================================================== */
.matches-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}

@media (min-width: 640px) {
  .matches-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .matches-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Match Card
   -------------------------------------------------------------------------- */
.match-card {
  /* Each card resolves --accent from its data-sport attribute (see below)
     and uses it for the sport pill, hover glow, and arrow tint. */
  --accent: var(--accent-red);

  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  min-height: 180px;
  display: flex;
  flex-direction: column;
}

/* Per-sport accent assignment — drives sport pill colour + hover glow */
.match-card[data-sport="basketball"] { --accent: var(--sport-basketball); }
.match-card[data-sport="football"]   { --accent: var(--sport-football); }
.match-card[data-sport="boxing"]     { --accent: var(--sport-boxing); }
.match-card[data-sport="baseball"]   { --accent: var(--sport-baseball); }
.match-card[data-sport="volleyball"] { --accent: var(--sport-volleyball); }
.match-card[data-sport="tennis"]     { --accent: var(--sport-tennis); }
.match-card[data-sport="hockey"]     { --accent: var(--sport-hockey); }
.match-card[data-sport="mma"]        { --accent: var(--sport-mma); }
.match-card[data-sport="cricket"]    { --accent: var(--sport-cricket); }
.match-card[data-sport="rugby"]      { --accent: var(--sport-rugby); }
.match-card[data-sport="golf"]       { --accent: var(--sport-golf); }
.match-card[data-sport="motorsport"] { --accent: var(--sport-motorsport); }

/* Top edge accent strip — 3px gradient bar in the sport's colour */
.match-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent 80%);
  opacity: 0.85;
  z-index: 1;
}

/* Sport pill picks up the accent */
.match-card__sport {
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

.match-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
  border-color: rgba(255, 255, 255, 0.14);
}

.match-card--live {
  border-color: rgba(255, 68, 68, 0.4);
  box-shadow: 0 0 24px rgba(255, 68, 68, 0.1);
}

.match-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0;
}

.match-card__sport {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-blue);
  background: rgba(31, 111, 235, 0.12);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  line-height: 1.6;
}

.match-card__status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status--live     { color: var(--live-color); }
.status--upcoming { color: var(--text-muted); }

/* Teams row — acts as a link to the match page */
.match-card__teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  gap: 0.5rem;
  flex: 1;
  /* Underline removal on the anchor */
  text-decoration: none;
}

.team-display {
  flex: 1;
  text-align: center;
  min-width: 0;
}

/* Fixed-size avatar prevents CLS */
.team-display__initial {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 auto 0.4rem;
  flex-shrink: 0;
  /* Explicit size prevents reflow */
  min-width: 42px;
  min-height: 42px;
}

/* Live-score readout — sits under the team name on live cards */
.team-display__score {
  display: block;
  margin-top: 0.35rem;
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.match-card--has-score .team-display__score {
  color: var(--accent);
}

/* Live clock in the middle column on cards */
.match-card__clock {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--live-color);
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
  min-height: 0.85em;
}

.team-display__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  /* Allow up to two lines — no awkward ellipsis on longer names */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  hyphens: auto;
  /* Keep a minimum two-line height so cards stay balanced */
  min-height: 2.3em;
  padding: 0 0.15rem;
}

@media (min-width: 480px) {
  .team-display__name {
    font-size: 1rem;
  }
}

.match-card__vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  padding: 0 0.25rem;
}

.vs-text {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.match-card__time {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

/* Odds row */
.match-card__odds {
  display: flex;
  border-top: 1px solid var(--border-color);
}

.odds-pill {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0.2rem;
  border-right: 1px solid var(--border-color);
  cursor: pointer;
  transition: background var(--transition);
}

.odds-pill:last-child { border-right: none; }

.odds-pill:hover { background: rgba(255, 255, 255, 0.04); }

.odds-pill__label {
  display: block;
  font-size: 0.58rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.odds-pill__value {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-gold);
}

/* Card footer — action buttons */
.match-card__footer {
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid var(--border-color);
}

.btn-predict {
  flex: 1;
  background: linear-gradient(135deg, #1f6feb, #0d4f9e);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  transition: opacity var(--transition), transform var(--transition);
  line-height: 1;
}

.btn-predict:hover  { opacity: 0.9; transform: scale(1.02); }
.btn-predict:active { transform: scale(0.97); }

.btn-predict.loading {
  opacity: 0.6;
  pointer-events: none;
}

.btn-watch {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--accent-red);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.875rem;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  transition: opacity var(--transition);
}

.btn-watch:hover { opacity: 0.88; }

/* In-card stream (live matches only) */
.match-card__stream {
  display: none;
  padding: 0 1rem 1rem;
}

.match-card__stream.visible { display: block; }

/* CLS-safe 16:9 iframe container */
.stream-responsive {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.stream-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Loading / skeleton states */
.matches-loading {
  color: var(--text-muted);
  text-align: center;
  padding: 2.5rem 1rem;
  font-size: 0.875rem;
  grid-column: 1 / -1;
}

/* Skeleton shimmer placeholder card */
.skeleton {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  min-height: 180px;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.7; }
}

/* ==========================================================================
   FEATURED PREDICTIONS SECTION
   ========================================================================== */
.predictions-featured {
  padding: 1.5rem 0 3rem;
  background: linear-gradient(180deg, transparent, rgba(31, 111, 235, 0.04));
}

.predictions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}

@media (min-width: 768px) {
  .predictions-grid { grid-template-columns: repeat(2, 1fr); }
}

.prediction-card {
  background: var(--bg-card);
  border: 1px solid rgba(31, 111, 235, 0.2);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.prediction-card__match {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.prediction-card__pick {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(63, 185, 80, 0.12);
  border: 1px solid rgba(63, 185, 80, 0.3);
  color: var(--accent-green);
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.prediction-card__reasoning {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.65;
  /* Truncate to 3 lines for uniform card height */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prediction-card__confidence {
  margin-top: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.confidence-bar {
  flex: 1;
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
}

.confidence-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
  border-radius: 2px;
  transition: width 1.2s ease;
}

.confidence-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   MATCH DETAIL PAGE  (/matches/*.html)
   ========================================================================== */
.match-page { padding: 1.25rem 0 4rem; }

/* Breadcrumb */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 0.5rem;
  opacity: 0.4;
}

.breadcrumb a { color: var(--accent-blue); }
.breadcrumb a:hover { text-decoration: underline; }

/* Match article card */
.match-detail {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.match-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.match-detail__sport-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent-blue);
  background: rgba(31, 111, 235, 0.12);
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Teams display */
.match-detail__teams {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 2rem 1.25rem;
  gap: 1rem;
}

.team { flex: 1; text-align: center; }

.team__logo-placeholder {
  width: 64px;
  height: 64px;
  /* Reserve exact size to prevent CLS */
  min-width: 64px;
  min-height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0 auto 0.75rem;
}

.team--home .team__logo-placeholder {
  background: linear-gradient(135deg, #1f6feb, #0d4f9e);
}

.team--away .team__logo-placeholder {
  background: linear-gradient(135deg, #e94560, #8b1a2e);
}

.team__name {
  font-size: clamp(0.875rem, 3vw, 1.1rem);
  font-weight: 700;
  line-height: 1.3;
}

.match-detail__vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.match-detail__vs .vs-text {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.625rem;
}

.match-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* Odds section (detail page) */
.odds-section {
  padding: 1.25rem;
  border-top: 1px solid var(--border-color);
}

.odds-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.875rem;
}

.odds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.odds-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.875rem 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.odds-item:hover { border-color: var(--accent-gold); background: rgba(212, 160, 23, 0.06); }

.odds-label {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.odds-value {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-gold);
}

/* Prediction section (detail page) */
.prediction-section {
  padding: 1.25rem;
  border-top: 1px solid var(--border-color);
  background: rgba(31, 111, 235, 0.025);
}

.prediction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.prediction-title { font-size: 1rem; font-weight: 700; }

.prediction-badge {
  font-size: 0.68rem;
  color: var(--accent-blue);
  background: rgba(31, 111, 235, 0.1);
  border: 1px solid rgba(31, 111, 235, 0.2);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
}

.prediction-content {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

.prediction-content p         { margin-bottom: 0.75rem; }
.prediction-content p:last-child { margin-bottom: 0; }

.prediction-disclaimer {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.last-updated {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.last-updated time {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* ==========================================================================
   POLYMARKET CONSENSUS PANEL  (match-template.html + watch.html)
   Mirrors the .prediction-card__pm-pill look from predictions.html but
   expanded into a full probability bar chart.
   ========================================================================== */
.pm-panel {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}

.pm-panel--empty {
  background: rgba(100, 116, 139, 0.06);
  border-color: rgba(100, 116, 139, 0.2);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.pm-panel--empty .pm-panel__logo { margin-top: 0.1rem; }

.pm-panel--empty .pm-panel__no-market {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.pm-panel__header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.pm-panel__logo {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0.15rem;
}

.pm-panel__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.pm-panel__event {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #10b981;
}

.pm-panel__question {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-panel__link {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #10b981;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity var(--transition);
}
.pm-panel__link:hover { opacity: 1; }

/* Probability bars */
.pm-panel__bars {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.pm-bar {
  display: grid;
  grid-template-columns: 140px 1fr 44px;
  align-items: center;
  gap: 0.6rem;
}

@media (max-width: 480px) {
  .pm-bar { grid-template-columns: 100px 1fr 40px; }
}

.pm-bar__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-bar--fav .pm-bar__label { color: #10b981; }

.pm-bar__track {
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}

.pm-bar__fill {
  height: 100%;
  background: rgba(100, 116, 139, 0.5);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.pm-bar--fav .pm-bar__fill {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.pm-bar__pct {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pm-bar--fav .pm-bar__pct { color: #10b981; }

/* Footer row */
.pm-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(16, 185, 129, 0.15);
}

.pm-panel__volume {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.pm-panel__conviction {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.pm-panel__conviction--high {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.pm-panel__conviction--mid {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.pm-panel__conviction--low {
  color: var(--text-muted);
  background: rgba(100, 116, 139, 0.1);
  border: 1px solid rgba(100, 116, 139, 0.2);
}

/* h4 section headings inside Gemini prediction content */
.prediction-content h4 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-blue);
  border-left: 3px solid var(--accent-blue);
  padding-left: 0.6rem;
  margin: 1.1rem 0 0.4rem;
}

.prediction-content h4:first-child { margin-top: 0; }

/* "Our Pick" heading gets the green accent to stand out */
.prediction-content h4:last-of-type {
  color: #10b981;
  border-left-color: #10b981;
}

/* ==========================================================================
   EXTERNAL CONTEXT GRID  (Wikipedia / Reddit / YouTube on match page)
   ========================================================================== */
.external-section {
  padding: 1.25rem;
  border-top: 1px solid var(--border-color);
}

.external-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 700px) {
  .external-grid { grid-template-columns: repeat(3, 1fr); }
}

.external-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
}

.external-card__title {
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.external-card__body {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.55;
  min-height: 4em;
}

.external-card__body[data-loading="true"] {
  color: var(--text-muted);
  font-style: italic;
}

.external-card__body a {
  color: var(--accent-blue);
  text-decoration: none;
}
.external-card__body a:hover { text-decoration: underline; }

.external-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.external-card__list li {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.4rem;
  font-size: 0.78rem;
}
.external-card__list li:last-child { border-bottom: none; padding-bottom: 0; }

/* ==========================================================================
   RELATED MATCHES  (bottom of every generated match page)
   Internal-linking signal for Google + helps users find their next watch.
   ========================================================================== */
.related-matches {
  margin-top: 2rem;
}

.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px)  { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .related-grid { grid-template-columns: repeat(4, 1fr); } }

.related-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.875rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), border-color var(--transition);
}

.related-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
}

.related-card__league {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-blue);
  background: rgba(31, 111, 235, 0.12);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  align-self: flex-start;
}

.related-card__teams {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.related-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.related-card__status .live-dot { width: 6px; height: 6px; }

/* FAQ accordion on category pages */
.faq-section {
  padding: 2rem 0 3rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 800px;
  margin: 1.5rem auto 0;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 0.875rem 1.125rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-size: 1.2rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.faq-item[open] summary::after { content: "−"; }

.faq-item summary:hover { background: rgba(255, 255, 255, 0.03); }

.faq-item__body {
  padding: 0 1.125rem 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.faq-item__body p:not(:last-child) { margin-bottom: 0.5rem; }

/* Stream section (detail page — always last) */
.stream-section {
  padding: 1.25rem;
  border-top: 1px solid var(--border-color);
}

.stream-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.stream-locked {
  background: var(--bg-secondary);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: 3rem 1.5rem;
  text-align: center;
}

.stream-locked__icon {
  margin-bottom: 0.875rem;
  opacity: 0.4;
}
.stream-locked__icon svg { width: 2.5rem; height: 2.5rem; display: block; margin: 0 auto; }

.stream-locked__text    { color: var(--text-secondary); margin-bottom: 0.5rem; font-size: 0.9rem; }
.stream-locked__countdown { font-size: 0.85rem; color: var(--text-muted); }

/* ==========================================================================
   MODAL  (bottom-sheet on mobile, centered dialog on desktop)
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal[hidden] { display: none; }

@media (min-width: 640px) {
  .modal {
    align-items: center;
    padding: 1.5rem;
  }
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal__content {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem;
  z-index: 1;
  animation: slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {
  .modal__content {
    border-radius: var(--radius-xl);
    max-width: 520px;
    max-height: 82vh;
    animation: scale-in 0.2s ease;
  }
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes scale-in {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.25rem;
  color: var(--text-secondary);
  transition: background var(--transition);
  z-index: 2;
}

.modal__close:hover { background: rgba(255, 255, 255, 0.15); }

.modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 1rem;
  color: var(--text-secondary);
  text-align: center;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Modal prediction layout */
.modal-prediction { padding-top: 0.25rem; }

.modal-prediction__match {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  padding-right: 2.5rem; /* clear the close button */
  line-height: 1.3;
}

.modal-prediction__sport {
  font-size: 0.72rem;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.modal-prediction__pick {
  background: rgba(63, 185, 80, 0.1);
  border: 1px solid rgba(63, 185, 80, 0.25);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.modal-prediction__pick-icon   { font-size: 1.5rem; flex-shrink: 0; }
.modal-prediction__pick-label  { display: block; font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.15rem; }
.modal-prediction__pick-value  { display: block; font-size: 1rem; font-weight: 700; color: var(--accent-green); }

.modal-prediction__analysis {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

.modal-prediction__odds-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.modal-prediction__odds-item {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.5rem;
  text-align: center;
}

.modal-prediction__odds-label { display: block; font-size: 0.68rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.modal-prediction__odds-value { display: block; font-size: 1.1rem; font-weight: 700; color: var(--accent-gold); }

.modal-prediction__disclaimer {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-color);
  line-height: 1.5;
}

/* ==========================================================================
   FOOTER  (injected by footer.js into #footer-container)
   ========================================================================== */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 2.5rem 0 1.5rem;
  margin-top: auto;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.footer__brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.footer__brand-logo-accent { color: var(--accent-red); }

.footer__brand p {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.footer__col-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-primary);
  margin-bottom: 0.875rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer__links a {
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: color var(--transition);
}

.footer__links a:hover { color: var(--text-primary); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer__privacy {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(31, 111, 235, 0.08);
  border: 1px solid rgba(31, 111, 235, 0.25);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.footer__disclaimer {
  margin-top: 1.25rem;
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.65;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

/* ==========================================================================
   MATCH CARD — clickable body (link to match page) + footer with a separate
   "Predictions & Preview" button that opens the Gemini modal.
   ========================================================================== */

.match-card__body {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 1;
  cursor: pointer;
}

.match-card__footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-color);
}

/* CTA pill — "View Match Preview →" (link out to match page) */
.match-card__cta {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  transition: background var(--transition), border-color var(--transition);
}

.match-card__cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.match-card--live .match-card__cta {
  color: var(--live-color);
  background: rgba(255, 68, 68, 0.08);
  border-color: rgba(255, 68, 68, 0.25);
}

.match-card--live .match-card__cta:hover {
  background: rgba(255, 68, 68, 0.16);
}

/* "Predictions & Preview" button — opens the modal */
.btn-predict {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  background: linear-gradient(135deg, #1f6feb, #0d4f9e);
  color: #fff;
  border: 1px solid rgba(31, 111, 235, 0.5);
  cursor: pointer;
  transition: transform var(--transition), opacity var(--transition);
}

.btn-predict:hover { opacity: 0.92; transform: translateY(-1px); }
.btn-predict:active { transform: translateY(0); }
.btn-predict[aria-busy="true"] { opacity: 0.6; cursor: progress; }

.match-card__arrow {
  display: inline-block;
  transition: transform var(--transition);
}

.match-card__cta:hover .match-card__arrow {
  transform: translateX(3px);
}

/* =========================================================================
   PREDICTION MODAL
   ========================================================================= */

.predict-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.predict-modal[hidden] { display: none; }

@media (min-width: 640px) {
  .predict-modal {
    align-items: center;
    padding: 1.5rem;
  }
}

.predict-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.predict-modal__content {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem;
  z-index: 1;
  animation: slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {
  .predict-modal__content {
    border-radius: var(--radius-xl);
    max-width: 600px;
    max-height: 82vh;
    animation: scale-in 0.2s ease;
  }
}

.predict-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.25rem;
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  z-index: 2;
}

.predict-modal__close:hover { background: rgba(255, 255, 255, 0.15); }

.predict-modal__head {
  padding-right: 3rem;
  margin-bottom: 1rem;
}

.predict-modal__title {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.predict-modal__sub {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-blue);
  font-weight: 600;
}

.predict-modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 1rem;
  color: var(--text-secondary);
  text-align: center;
}

.predict-modal__loading-step {
  font-size: 0.82rem;
  color: var(--text-muted);
  min-height: 1.2em;
}

.predict-modal__body {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

.predict-modal__body p { margin-bottom: 0.85rem; }
.predict-modal__body p:last-child { margin-bottom: 0; }
.predict-modal__body strong { color: var(--text-primary); }
.predict-modal__body h4 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-gold);
  margin: 1.25rem 0 0.5rem;
}

.predict-modal__disclaimer {
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.predict-modal__error {
  background: rgba(233, 69, 96, 0.08);
  border: 1px solid rgba(233, 69, 96, 0.25);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  color: var(--text-primary);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.predict-modal__retry {
  background: rgba(233, 69, 96, 0.15);
  border: 1px solid rgba(233, 69, 96, 0.35);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
}
.predict-modal__retry:hover { background: rgba(233, 69, 96, 0.28); }

.predict-modal__cta {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.875rem;
  border-radius: var(--radius-sm);
  background: var(--accent-red);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.predict-modal__cta:hover { opacity: 0.9; }

/* ==========================================================================
   UPCOMING BANNER + STREAM STATUS PILL  (match detail page)
   ========================================================================== */

.upcoming-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  background: linear-gradient(135deg, rgba(212, 160, 23, 0.18), rgba(212, 160, 23, 0.04));
  border: 1px solid rgba(212, 160, 23, 0.35);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.upcoming-banner strong { color: var(--accent-gold); font-weight: 700; }

.upcoming-banner #countdown-timer { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Pill next to "Stream Player" title indicating upcoming status */
.stream-status-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold);
  background: rgba(212, 160, 23, 0.15);
  border: 1px solid rgba(212, 160, 23, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Stream loading placeholder (keeps 16:9 ratio to prevent CLS) */
.stream-loading {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.stream-loading .spinner,
.stream-loading span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.stream-loading .spinner { top: calc(50% - 30px); }

.stream-loading span {
  top: calc(50% + 10px);
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   STREAM SOURCE SWITCHER
   Surfaced under the iframe when the upstream returns multiple streams.
   Lets the user hop sources when the primary one HLS-errors out — the
   only practical recovery path for cross-origin embed failures.
   ========================================================================== */
.stream-sources {
  margin-top: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.stream-sources__hint {
  margin: 0 0 0.625rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.stream-sources__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.stream-source-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 100px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stream-source-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.18);
}

.stream-source-btn--active {
  background: var(--accent-red);
  color: #fff;
  border-color: var(--accent-red);
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent-red) 60%, transparent);
}

.stream-source-btn--active::before {
  content: "▶ ";
  font-size: 0.7em;
}

/* Light theme variants */
[data-theme="light"] .stream-sources {
  background: #f3f4f6;
}
[data-theme="light"] .stream-source-btn {
  background: #ffffff;
}
[data-theme="light"] .stream-source-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Prediction card → now a link (for the home + predictions pages) */
a.prediction-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color var(--transition), transform var(--transition);
}

a.prediction-card:hover {
  border-color: rgba(31, 111, 235, 0.5);
  transform: translateY(-2px);
}

.prediction-card__league {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-blue);
  background: rgba(31, 111, 235, 0.12);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.625rem;
}

.prediction-card__cta {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-blue);
}

/* Polymarket consensus pill on prediction cards */
.prediction-card__pm-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   TEAM BADGE IMAGES  (real badges from Streamed Images API)
   ========================================================================== */

/* Wrapper — same fixed dimensions as the initial-letter fallback (prevents CLS) */
.team-badge-wrapper {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
}

/* The <img> itself — object-fit so badges with transparent BG look clean */
.team-badge {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

/* Larger variant used on the match detail page */
.team-badge-wrapper--lg {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  margin: 0 auto 0.75rem;
}

.team-badge--lg {
  width: 64px;
  height: 64px;
}

/* Skeleton animation for category buttons while sports API loads */
.cat-btn--skeleton {
  width: 96px;
  pointer-events: none;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Basketball featured highlight — slightly larger, gold border */
.cat-btn--featured {
  border-color: var(--accent-gold);
  color: var(--text-primary);
}

.cat-btn--featured.active {
  background: linear-gradient(135deg, var(--accent-gold), #b8860b);
  border-color: var(--accent-gold);
  color: #000;
}

/* ==========================================================================
   UTILITY
   ========================================================================== */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  grid-column: 1 / -1;
}

.empty-state__icon { display: block; margin: 0 auto 0.75rem; opacity: 0.5; }
.empty-state__icon svg { width: 2.5rem; height: 2.5rem; display: block; }
.empty-state__text { font-size: 0.9rem; }
.empty-state__link { color: var(--accent); text-decoration: underline; }
.empty-state__link:hover { opacity: 0.85; }

/* ==========================================================================
   FEATURED MATCH HERO CARD  (rendered into #featured-match by app.js)
   ========================================================================== */
.featured-match-slot {
  margin-top: 1.5rem;
  min-height: 1px;
}

.featured-match {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, #1e2a3a 0%, #11192a 100%);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.7);
  transition: transform var(--transition), box-shadow var(--transition);
  isolation: isolate;
}

.featured-match[data-sport="basketball"] { --accent: var(--sport-basketball); }
.featured-match[data-sport="football"]   { --accent: var(--sport-football); }
.featured-match[data-sport="boxing"]     { --accent: var(--sport-boxing); }
.featured-match[data-sport="baseball"]   { --accent: var(--sport-baseball); }
.featured-match[data-sport="volleyball"] { --accent: var(--sport-volleyball); }
.featured-match { --accent: var(--accent-red); }

.featured-match:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 56px -16px rgba(0, 0, 0, 0.8),
    0 0 24px -6px color-mix(in srgb, var(--accent) 40%, transparent);
}

.featured-match__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(13, 17, 23, 0.85) 0%,
    rgba(13, 17, 23, 0.55) 50%,
    rgba(13, 17, 23, 0.92) 100%
  );
  z-index: 0;
}

.featured-match__inner {
  position: relative;
  z-index: 1;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .featured-match__inner { padding: 2rem; }
}

.featured-match__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  align-self: flex-start;
}

.featured-match__teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.featured-match__matchup {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.featured-match__title {
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0;
  word-break: break-word;
}

.featured-match__vs {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0.3rem 0;
}

.featured-match__meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.featured-match__cta-row {
  display: flex;
  justify-content: center;
}

.featured-match__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ==========================================================================
   FILIPINO FLAG ACCENT STRIP
   Thin tricolour bar at the very top of every page (blue, red, gold) —
   subtle nationalism = trust signal for the PH market.
   ========================================================================== */
.ph-flag-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Bumped from 3px → 4px so it's actually visible at typical viewing distance */
  height: 4px;
  background: linear-gradient(
    90deg,
    #0038a8 0%,        /* PH flag blue */
    #0038a8 33%,
    #ce1126 33%,       /* PH flag red */
    #ce1126 66%,
    #fcd116 66%,       /* PH flag gold */
    #fcd116 100%
  );
  /* Sits ABOVE the sticky header (z 1000) but won't interfere with hit-testing */
  z-index: 1500;
  pointer-events: none;
}

/* ==========================================================================
   CARD COUNTDOWN PILL  (upcoming matches — sits on top of teams area)
   ========================================================================== */
.match-card__countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  font-variant-numeric: tabular-nums;
}

.match-card__countdown::before {
  content: "⏱";
  font-size: 0.75rem;
}

/* ==========================================================================
   POSTER BACKGROUND  (when match.poster_url is available)
   ========================================================================== */
.match-card--with-poster {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-card); /* fallback */
  isolation: isolate;
}

.match-card--with-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 17, 23, 0.92) 0%,
    rgba(13, 17, 23, 0.78) 50%,
    rgba(13, 17, 23, 0.98) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.match-card--with-poster > * { position: relative; z-index: 1; }

/* ==========================================================================
   HOVER MICRO-INTERACTIONS
   ========================================================================== */

/* Card lift + accent glow */
.match-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color));
  box-shadow:
    0 8px 32px -8px rgba(0, 0, 0, 0.6),
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent),
    0 0 24px -4px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Badge bounce on hover */
.match-card:hover .team-badge,
.match-card:hover .team-display__initial {
  animation: badge-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-bounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Arrow slide already exists — strengthen it */
.match-card:hover .match-card__arrow {
  transform: translateX(5px);
  color: var(--accent);
}

/* ==========================================================================
   SHIMMER SKELETON  (diagonal sweep across placeholder)
   ========================================================================== */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  min-height: 180px;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 70%
  );
  animation: shimmer-sweep 1.6s infinite;
}

@keyframes shimmer-sweep {
  100% { transform: translateX(100%); }
}

/* Override the older opacity-pulse shimmer */
.skeleton { animation: none !important; opacity: 1; }

/* ==========================================================================
   ENRICHED EMPTY STATES  (illustration + secondary CTA)
   ========================================================================== */
.empty-state {
  padding: 3.5rem 1.5rem;
}

.empty-state__icon {
  display: block;
  margin: 0 auto 0.875rem;
  filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.05));
}
.empty-state__icon svg { width: 3rem; height: 3rem; display: block; opacity: 0.55; }

.empty-state__heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.empty-state__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.55rem 1rem;
  background: var(--accent-blue);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.825rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity var(--transition);
}

.empty-state__cta:hover { opacity: 0.9; }

/* ==========================================================================
   TOAST NOTIFICATIONS  (live-shift alerts, etc.)
   ========================================================================== */
.toast-stack {
  position: fixed;
  /* Respect iOS home-indicator and Android nav gestures */
  bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.75rem));
  right:  max(1rem, calc(env(safe-area-inset-right)  + 0.75rem));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 5000;
  pointer-events: none;
}

@media (min-width: 768px) {
  .toast-stack {
    bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1.25rem));
    right:  max(1.5rem, calc(env(safe-area-inset-right)  + 1.25rem));
  }
}

.toast {
  pointer-events: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--live-color);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.7);
  padding: 0.75rem 0.875rem;
  max-width: 320px;
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  animation: toast-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast.toast--leaving {
  animation: toast-out 0.2s ease-in forwards;
}

.toast__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.toast__icon svg { width: 1.1rem; height: 1.1rem; }
/* Pulsing red dot used for "match is live" toasts */
.toast__live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-red, #e94560);
  animation: live-pulse 1.4s ease-in-out infinite;
}

.toast__body {
  flex: 1;
  min-width: 0;
}

.toast__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.toast__sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast__cta {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-red);
  text-decoration: none;
}

.toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  margin-left: 0.25rem;
}

@keyframes toast-in {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

@keyframes toast-out {
  to { transform: translateX(120%); opacity: 0; }
}

/* ==========================================================================
   LIGHT MODE — comprehensive overrides for components that hardcoded
   dark colours. Activated by [data-theme="light"] on <body>.
   ========================================================================== */

[data-theme="light"] .hero {
  background: #f6f7f9;
}

/* Lighter, softer mesh blobs so the hero doesn't look garish on white */
[data-theme="light"] .hero::before {
  background: radial-gradient(circle, rgba(233, 69, 96, 0.35) 0%, transparent 70%);
  opacity: 0.6;
}
[data-theme="light"] .hero::after {
  background: radial-gradient(circle, rgba(31, 111, 235, 0.30) 0%, transparent 70%);
  opacity: 0.6;
}
[data-theme="light"] .hero__mesh-3 {
  background: radial-gradient(circle, rgba(212, 160, 23, 0.28) 0%, transparent 70%);
  opacity: 0.5;
}

/* Eyebrow + accent on the title */
[data-theme="light"] .hero__eyebrow {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Featured match — flip the dark overlay to a light one */
[data-theme="light"] .featured-match {
  background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .featured-match__overlay {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.92) 100%
  );
}

/* Card poster overlay — flip to a light wash */
[data-theme="light"] .match-card--with-poster::after {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.78) 50%,
    rgba(255, 255, 255, 0.98) 100%
  );
}

/* Upcoming banner — softer amber for light theme */
[data-theme="light"] .upcoming-banner {
  background: linear-gradient(135deg, rgba(212, 160, 23, 0.12), rgba(212, 160, 23, 0.02));
  border-color: rgba(212, 160, 23, 0.35);
  color: #1f1f1f;
}
[data-theme="light"] .upcoming-banner strong { color: #b8860b; }

/* Toast — keep the colour accents but lighter card bg */
[data-theme="light"] .toast {
  background: #ffffff;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18);
}

/* Header buttons + actions */
[data-theme="light"] .hamburger {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .hamburger:hover { background: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .hamburger__line { background: var(--text-primary); }

/* Mobile nav drawer */
[data-theme="light"] .mobile-nav {
  background: #ffffff;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .mobile-nav-backdrop {
  background: rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .mobile-nav__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-primary);
}
[data-theme="light"] .mobile-nav__link:hover {
  background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .mobile-nav__link.active {
  background: rgba(31, 111, 235, 0.1);
}

/* Header nav active state */
[data-theme="light"] .header__nav-link:hover,
[data-theme="light"] .header__nav-link.active {
  background: rgba(0, 0, 0, 0.06);
}

/* Category buttons on light bg */
[data-theme="light"] .cat-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .cat-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.14);
}

/* Stream loading placeholder */
[data-theme="light"] .stream-loading,
[data-theme="light"] .stream-locked {
  background: #f3f4f6;
}

/* Modal backdrop slightly lighter */
[data-theme="light"] .predict-modal__backdrop {
  background: rgba(15, 23, 42, 0.55);
}

/* Modal close button */
[data-theme="light"] .predict-modal__close,
[data-theme="light"] .modal__close {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary);
}

/* Skeleton shimmer is brighter on white */
[data-theme="light"] .skeleton::after {
  background: linear-gradient(
    100deg, transparent 30%,
    rgba(0, 0, 0, 0.04) 50%,
    transparent 70%
  );
}

/* Match-card hover ring uses sport accent + a softer base */
[data-theme="light"] .match-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, rgba(0, 0, 0, 0.1));
  box-shadow:
    0 8px 32px -8px rgba(15, 23, 42, 0.15),
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent),
    0 0 18px -4px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* FAQ summary hover */
[data-theme="light"] .faq-item summary:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   MINIMALIST SVG ICON UTILITIES
   .icon      — inline SVG rendered by window.PHIcons; aligns to text baseline.
   .cat-btn__label — text portion inside a category button (after the icon).
   ========================================================================== */
.icon {
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
  pointer-events: none;
}

/* Page hero h1 icon — 28px SVG beside the heading text */
.page-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.15em;
  margin-right: 0.2em;
  opacity: 0.85;
}
.page-icon svg { flex-shrink: 0; }

/* Category button: icon + text sit side-by-side with a small gap */
.cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.cat-btn__label {
  /* prevent wrapping on narrow screens */
  white-space: nowrap;
}

/* Nav links: icon + label side-by-side */
.header__nav-link,
.mobile-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}