/* =============================================================================
   Ararat WC2026 — Design System  (Phase 8a)
   Layer: loads AFTER Bootstrap 5.3 and style.css.
   Single dark mode only. Mobile-first: 375px → 1200px+.
   ============================================================================= */


/* =============================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================================= */

:root {
  /* --- Background --- */
  --bg-image: url('/assets/images/mainbackground.webp');
  --bg-overlay: rgba(0, 0, 0, 0.15);

  /* --- Surface --- */
  --card-bg: rgba(20, 8, 30, 0.65);
  --card-border: rgba(255, 255, 255, 0.1);

  /* --- Brand Colors --- */
  --color-primary: #7C3AED;      /* purple — CTA */
  --color-accent:  #A855F7;      /* lavender — hover */
  --color-navy:    #1E3A5F;      /* depth */
  --color-link:    #3B82F6;      /* royal blue */

  /* --- Semantic Colors --- */
  --color-success: #00C853;      /* electric green — wins */
  --color-live:    #00E5FF;      /* cyan — live pulse */
  --color-energy:  #CCFF00;      /* lime — streaks / highlights */

  /* --- Text --- */
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-muted:     rgba(255, 255, 255, 0.4);

  /* --- Typography --- */
  --font-heading: 'Bebas Neue', sans-serif;
  --font-ui:      'Barlow Condensed', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* --- Font Scale (modular) --- */
  --fs-xs:   0.75rem;    /*  12px */
  --fs-sm:   0.875rem;   /*  14px */
  --fs-base: 1rem;       /*  16px */
  --fs-lg:   1.25rem;    /*  20px */
  --fs-xl:   1.5rem;     /*  24px */
  --fs-2xl:  2rem;       /*  32px */
  --fs-3xl:  2.5rem;     /*  40px */
  --fs-4xl:  3.5rem;     /*  56px */

  /* --- Spacing (8px grid) --- */
  --space-1: 0.5rem;     /*  8px */
  --space-2: 1rem;       /* 16px */
  --space-3: 1.5rem;     /* 24px */
  --space-4: 2rem;       /* 32px */
  --space-5: 3rem;       /* 48px */
  --space-6: 4rem;       /* 64px */

  /* --- Border Radii --- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-glow-live: 0 0 20px rgba(0, 229, 255, 0.5);
  --shadow-glow-win:  0 0 20px rgba(0, 200, 83, 0.5);

  /* --- Transitions --- */
  --transition-fast: 250ms var(--ease-out-expo);
  --transition-base: 400ms var(--ease-out-expo);
  --transition-slow: 600ms var(--ease-out-expo);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-lux:       cubic-bezier(0.05, 0.9, 0.1, 1);
}


/* =============================================================================
   2. KEYFRAME ANIMATIONS
   ============================================================================= */

@keyframes pulse-live {
  0%, 100% {
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.4), 0 0 0 0 rgba(0, 229, 255, 0.3);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.9), 0 0 40px rgba(0, 229, 255, 0.2);
    opacity: 0.85;
  }
}

/* Vibrant red breathing dot for the LIVE status indicator */
@keyframes pulse-red {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.55), 0 0 6px rgba(255, 59, 48, 0.85);
    opacity: 1;
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 0 5px rgba(255, 59, 48, 0), 0 0 11px rgba(255, 59, 48, 0.95);
    opacity: 0.85;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Placeholder — filled in Phase 8c (celebration overlay) */
@keyframes confetti-burst {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translateY(-200px) rotate(720deg) scale(0.5); }
}


/* =============================================================================
   3. GLOBAL BASE STYLES
   ============================================================================= */

/* 3a. Body — fixed magenta background with dark overlay */
html {
  min-height: 100%;
  overflow-x: hidden;
  background-color: #14081e;
}

body {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-primary);
  background-image: var(--bg-image);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-color: #14081e; /* fallback if image is slow */
  overflow-x: hidden;
  /* Sticky footer: body fills full viewport height.
     dvh tracks the phone's shrinking/growing toolbar so the page is never
     taller than the visible area (no dead scroll gap at the bottom). */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* iOS Safari fix: background-attachment: fixed causes blank screen */
@supports (-webkit-touch-callout: none) {
  body {
    background-attachment: scroll;
  }
}

/* Dark overlay via ::before so content layers above */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  pointer-events: none;
  z-index: 0;
}

/* Push content above the ::before overlay — scoped to avoid broad stacking context.
   Only the live bar and main content need explicit z-index; nav uses its own z-index.
   DO NOT put transform on body or set position:relative on <nav> here —
   that would break position:sticky by creating a new containing block. */
.pg-livebar,
.pg-main {
  position: relative;
  z-index: 1;
}


/* 3b. Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

/* Mobile: scale down 20% */
@media (max-width: 767.98px) {
  h1 { font-size: calc(var(--fs-4xl) * 0.8); }
  h2 { font-size: calc(var(--fs-3xl) * 0.8); }
  h3 { font-size: calc(var(--fs-2xl) * 0.8); }
  h4 { font-size: calc(var(--fs-xl)  * 0.8); }
  h5 { font-size: calc(var(--fs-lg)  * 0.8); }
  h6 { font-size: calc(var(--fs-base)* 0.8); }
}
@media (min-width: 768px) {
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  h3 { font-size: var(--fs-2xl); }
  h4 { font-size: var(--fs-xl); }
  h5 { font-size: var(--fs-lg); }
  h6 { font-size: var(--fs-base); }
}


/* 3c. Links */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover,
a:focus-visible {
  color: var(--color-accent);
}


/* 3d. Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
  background: rgba(0, 0, 0, 0.4);
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}
select option {
  background: #14081e;
  color: var(--text-primary);
}

/* Bootstrap form-control override for dark glass */
.form-control,
.form-select {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-color: var(--card-border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}
.form-control:focus,
.form-select:focus {
  background-color: rgba(0, 0, 0, 0.4) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25) !important;
  color: var(--text-primary) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }


/* =============================================================================
   4. BUTTON OVERRIDES
   ============================================================================= */

/* Primary CTA button — overrides Bootstrap .btn-primary */
.btn-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-1) var(--space-3) !important;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.45) !important;
}
.btn-primary:active {
  transform: translateY(0);
}

/* Outline variant — overrides Bootstrap .btn-outline-primary (was Bootstrap blue) */
.btn-outline-primary {
  background: transparent !important;
  border-color: var(--color-primary) !important;
  color: var(--color-accent) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-1) var(--space-3) !important;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.40) !important;
}
.btn-outline-primary:active {
  transform: translateY(0);
}


/* =============================================================================
   5. CARD — FROSTED GLASS (.card-glass)
   ============================================================================= */

.card-glass {
  background: rgba(15, 7, 25, 0.70);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
.card-glass:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Mobile: tighter padding */
@media (max-width: 767.98px) {
  .card-glass {
    padding: var(--space-2);
  }
}

/* Bootstrap .card override to match glass aesthetic site-wide */
.card {
  background: rgba(15, 7, 25, 0.70) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm);
}
.card:hover {
  box-shadow: var(--shadow-md);
}


/* =============================================================================
   6. SPECIALIST COMPONENT CLASSES
   ============================================================================= */

/* Score display — monospaced bold number */
.score-display {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
@media (max-width: 767.98px) {
  .score-display { font-size: var(--fs-2xl); }
}

/* Team / Country name */
.team-name {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1.1;
}


/* =============================================================================
   7. UTILITY CLASSES
   ============================================================================= */

/* Text color utilities */
.text-success  { color: var(--color-success) !important; }
.text-live     { color: var(--color-live)    !important; }
.text-energy   { color: var(--color-energy)  !important; }
.text-muted    { color: var(--text-muted)    !important; }
.text-secondary-ds { color: var(--text-secondary) !important; }

/* Frosted glass background — standalone */
.bg-glass {
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--card-border);
}

/* Accent stripe — 8px top border using WC26 gradient */
.stripe-accent-top {
  border-top: 4px solid transparent;
  border-image: linear-gradient(
    90deg,
    #7C3AED 0%,
    #A855F7 25%,
    #00E5FF 50%,
    #00C853 75%,
    #CCFF00 100%
  ) 1;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Live pulse — cyan glow expand/contract */
.pulse-live {
  animation: pulse-live 2s ease-in-out infinite;
  color: var(--color-live);
}

/* Fade-in entrance — fade + rise + subtle scale (the "Ararat" curve). */
.fade-in {
  animation: fade-in 650ms var(--ease-out-expo) both;
}

/* Page-header cascade — title then subtitle reveal sequentially, exactly
   like the login hero. Overrides the block-level .fade-in so children stagger. */
@media (prefers-reduced-motion: no-preference) {
  .pg-page-header.fade-in,
  .matches-header.fade-in { animation: none; opacity: 1; }

  .pg-page-header__title,
  .matches-header__title {
    opacity: 0;
    animation: pg-hero-slide-up 650ms var(--ease-out-expo) 100ms forwards;
  }
  .pg-page-header__sub,
  .matches-header__sub {
    opacity: 0;
    animation: pg-hero-slide-up 650ms var(--ease-out-expo) 200ms forwards;
  }
}

/* Staggered section reveal — gives every page the match-feed cascade.
   Put .pg-reveal on each major section and set --reveal-i: 0,1,2,… */
@media (prefers-reduced-motion: no-preference) {
  .pg-reveal {
    opacity: 0;
    animation: fade-in 650ms var(--ease-out-expo) both;
    animation-delay: calc(80ms + var(--reveal-i, 0) * 90ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pg-reveal { opacity: 1 !important; animation: none !important; }
}


/* =============================================================================
   8. NAVIGATION OVERRIDES (dark-only)
   ============================================================================= */

.pg-nav {
  background: rgba(14, 5, 22, 0.85) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--card-border) !important;
}

.pg-nav .nav-link {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-secondary) !important;
  transition: color var(--transition-fast);
  letter-spacing: 0.02em;
}
.pg-nav .nav-link:hover,
.pg-nav .nav-link:focus-visible {
  color: var(--text-primary) !important;
}

.pg-brand {
  font-family: var(--font-heading) !important;
  font-size: var(--fs-xl) !important;
  letter-spacing: 0.06em !important;
  color: var(--color-accent) !important;
}
.pg-brand:hover,
.pg-brand:focus { color: var(--color-primary) !important; }

.pg-admin-link { color: var(--color-energy) !important; }


/* =============================================================================
   9. FOOTER OVERRIDES (dark-only)
   ============================================================================= */

.pg-footer {
  background: rgba(14, 5, 22, 0.85) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top-color: var(--card-border) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  flex-shrink: 0; /* sticky footer: never compress */
}

/* Footer brand: Ararat icon + "ARARAT PREDICTION by darthskywalker" + AM flag */
.pg-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.pg-footer-by { color: var(--text-secondary); font-weight: 400; }
.pg-footer-ararat {
  height: 22px;
  width: auto;
  mix-blend-mode: screen;   /* drops the black background of the white mountain logo */
}
.pg-footer-flag {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .pg-footer-brand { font-size: var(--fs-sm); flex-wrap: wrap; gap: 0.4rem; }
  .pg-footer-ararat { height: 18px; }
}

/* Credit inside the mobile hamburger menu (reuses the footer brand pieces). */
.pg-menu-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--card-border);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}


/* =============================================================================
   10. SUPPRESS LIGHT-MODE OVERRIDES FROM style.css
   ============================================================================= */

/* The site is now dark-only. Neutralise any light-theme CSS that style.css
   applied under [data-bs-theme="light"]. If the theme toggle cookie is still
   set to "light", the html attribute will still flip, but the design-system
   keeps the dark glass aesthetic. */

[data-bs-theme="light"] body {
  background-image: var(--bg-image) !important;
  background-color: #14081e !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="light"] .card,
[data-bs-theme="light"] .card-glass {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--card-border) !important;
}
[data-bs-theme="light"] .pg-nav { background: rgba(14, 5, 22, 0.85) !important; }
[data-bs-theme="light"] .pg-footer { background: rgba(14, 5, 22, 0.85) !important; }
[data-bs-theme="light"] .pg-admin-nav { background: rgba(20, 8, 30, 0.55) !important; }
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
  background-color: rgba(0, 0, 0, 0.3) !important;
  color: var(--text-primary) !important;
  border-color: var(--card-border) !important;
}


/* =============================================================================
   11. MISCELLANEOUS / POLISH
   ============================================================================= */

/* Scrollbar — dark webkit */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

/* Selection */
::selection {
  background: rgba(124, 58, 237, 0.4);
  color: #fff;
}

/* Focus-visible ring — brand color */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

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


/* =============================================================================
   12. PHASE 8b — NAVBAR REDESIGN
   ============================================================================= */

/* Heights used across multiple components */
:root {
  --nav-h:     64px;   /* desktop navbar */
  --nav-h-sm:  56px;   /* mobile navbar */
  --bottom-nav-h: 60px;/* mobile bottom-nav */
}

/* Override the Phase 8a nav block — keep frosted glass, tighten height */
.pg-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--nav-h);
  background: rgba(14, 5, 22, 0.85) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border) !important;
}
@media (max-width: 991.98px) {
  .pg-nav { height: var(--nav-h-sm); }
}

/* ── True-center desktop nav ──
   DOM: .container-xl > [brand] [div.d-lg-none(mobile)] [#pg-nav-collapse([ul.navbar-nav][div.d-flex(right)])]
   At ≥ lg the collapse is inline; we absolute-position the links to the
   true horizontal midpoint of container-xl so left/right width imbalance
   has zero effect. Mobile (< 992px) resets everything to normal flow.   */
@media (min-width: 992px) {
  /* Stacking context for the absolute links */
  .pg-nav .container-xl {
    position: relative;
  }

  /* Links: lift out of flow, pin to true center of container */
  .pg-nav #pg-nav-collapse .navbar-nav {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;   /* kill Bootstrap mx-auto */
    /* flex-direction stays row (Bootstrap default at lg) */
  }

  /* Collapse: only the right-actions div remains in flow.
     flex-grow: 0 so it doesn't stretch and eat left half.
     margin-left: auto pushes it to the far right. */
  .pg-nav #pg-nav-collapse {
    flex-grow: 0 !important;
    margin-left: auto;
  }
}

/* Mobile: undo absolutely-positioned links so the dropdown stacks normally */
@media (max-width: 991.98px) {
  .pg-nav #pg-nav-collapse .navbar-nav {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }
}

/* Brand — PREDICTIONS in Bebas Neue, lime */
.pg-brand {
  font-family: var(--font-heading) !important;
  font-size: var(--fs-xl) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  color: var(--color-energy) !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.pg-brand:hover,
.pg-brand:focus { color: var(--color-accent) !important; }

/* Brand logo sits left of the league-name wordmark */
.pg-brand__logo {
  height: 1.5em;
  width: auto;
  margin-right: 0.5em;
  border-radius: 6px;
  flex: 0 0 auto;
  display: block;
}
/* Smaller brand on phones so the league name doesn't crowd search + menu */
@media (max-width: 575.98px) {
  .pg-brand { font-size: var(--fs-base) !important; }
  .pg-brand__logo { height: 1.3em; margin-right: 0.4em; }
}

/* Nav links — Barlow Condensed 600 */
.pg-nav__link {
  font-family: var(--font-ui) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--text-secondary) !important;
  padding: 0.25rem 0 !important;
  position: relative;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

/* Animated underline via pseudo-element */
.pg-nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-energy);
  transition: width var(--transition-base);
  border-radius: 1px;
}
.pg-nav__link:hover,
.pg-nav__link:focus-visible {
  color: var(--text-primary) !important;
}
.pg-nav__link:hover::after,
.pg-nav__link:focus-visible::after,
.pg-nav__link.nav-link--active::after {
  width: 100%;
}
.pg-nav__link.nav-link--active {
  color: var(--color-energy) !important;
}

/* Admin link stays lime always */
.pg-admin-link { color: var(--color-energy) !important; }
.pg-admin-link::after { background: var(--color-energy); }

/* Search icon button */
.pg-nav__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.375rem;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.pg-nav__search-btn:hover,
.pg-nav__search-btn:focus-visible {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

/* Logout button — purple outline → filled on hover */
.pg-nav__logout-btn {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-accent);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.875rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
  white-space: nowrap;
}
.pg-nav__logout-btn:hover,
.pg-nav__logout-btn:focus-visible {
  background: var(--color-primary);
  color: #fff;
}

/* Bootstrap navbar-toggler override */
.pg-nav__toggler {
  border-color: var(--card-border) !important;
  color: var(--text-secondary) !important;
  padding: 0.3rem 0.5rem;
  min-width: 44px;
  min-height: 44px;
}
.pg-nav__toggler .navbar-toggler-icon {
  /* Crisp white hamburger (Bootstrap's default is a dark, dimmed SVG). */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
  filter: none;
}
.pg-nav__toggler:focus { box-shadow: none !important; }

/* ── Mobile collapsed menu — frosted glass dropdown ───────────────── */
@media (max-width: 991.98px) {
  #pg-nav-collapse {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
  #pg-nav-collapse.show,
  #pg-nav-collapse.collapsing {
    /* Solid background (no backdrop-filter) — blur repaints every frame and
       makes the height animation stutter. Opaque keeps the open/close smooth. */
    background: #15071c;
    border-top: 1px solid var(--card-border);
    padding: var(--space-2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  }
  /* Simple, smooth height open/close. */
  #pg-nav-collapse.collapsing {
    transition: height 280ms ease;
    overflow: hidden;
    will-change: height;
  }

  /* Links: full-width tappable rows with hover/active wash. */
  #pg-nav-collapse .navbar-nav {
    width: 100%;
    gap: 2px !important;
  }
  .pg-nav__link {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0.85rem 0.85rem !important;
    min-height: 48px;
    line-height: 1;
    border-radius: var(--radius-sm);
  }
  .pg-nav__link::after { display: none; }
  .pg-nav__link:hover,
  .pg-nav__link.nav-link--active {
    background: rgba(255, 255, 255, 0.06);
  }

  /* Right actions (balance + logout): divider, stacked full-width, centered. */
  #pg-nav-collapse > .d-flex {
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    margin-top: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--card-border);
  }
  #pg-nav-collapse > .d-flex .pg-balance-pill { align-self: center; }
  #pg-nav-collapse > .d-flex form { width: 100%; margin: 0; }
  .pg-nav__logout-btn { width: 100%; justify-content: center; }
}



/* =============================================================================
   13. PHASE 8g — LIVE BAR (TV Scoreboard redesign)
   ============================================================================= */

/* Floating island wrapper — transparent centering strip */
.pg-livebar {
  position: sticky;
  top: var(--nav-h);
  z-index: 999;
  display: flex;
  justify-content: center;
  padding: var(--space-2) var(--space-2);
  transition: opacity var(--transition-fast);
}
@media (max-width: 991.98px) {
  .pg-livebar {
    top: var(--nav-h-sm);
    padding: var(--space-1) var(--space-2);
  }
}

.pg-livebar--fading { opacity: 0; }

/* ─────────────────────────────────────────────────────────────
   THE ISLAND  —  stacked status header + 3-column match row
   ───────────────────────────────────────────────────────────── */

/* Transparent centering strip for the card */
.pg-livebar__content {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* MASTER CONTAINER — stacks the DETACHED status label above the island scoreboard */
.top-bar-master-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 900px;          /* equal to the 900px match-card column */
}
.top-bar-master-container--idle { gap: 0; }

/* ── DETACHED STATUS LABEL — floating capsule, fully above the scoreboard ── */
.detached-status-label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1.625rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  line-height: 1;
  white-space: nowrap;
}
.detached-status-label--live { color: #ff3b30; }
.detached-status-label .highlight {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-energy);
}
.detached-status-label .highlight--near { color: var(--color-live); animation: pulse-live 2s ease-in-out infinite; }
.detached-status-label .highlight--live { color: #ff3b30; }

/* The Island scoreboard — gradient border + glass; stretches full container width */
.live-island-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;                 /* stretch to fill the 1200px container */
  max-width: 100%;
  padding: 1.5rem 1.75rem;
  border-radius: 30px;
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(12, 5, 20, 0.92), rgba(12, 5, 20, 0.92)) padding-box,
    linear-gradient(90deg, #7C3AED 0%, #A855F7 25%, #00E5FF 50%, #00C853 75%, #CCFF00 100%) border-box;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
  transition: background var(--transition-base);
  cursor: pointer;   /* whole island opens the match detail */
}
.pg-livebar--live .live-island-wrapper {
  background:
    linear-gradient(rgba(0, 20, 24, 0.92), rgba(0, 20, 24, 0.92)) padding-box,
    linear-gradient(90deg, #7C3AED 0%, #A855F7 25%, #00E5FF 50%, #00C853 75%, #CCFF00 100%) border-box;
}

/* Pulsating LIVE indicator (vibrant red, breathes infinitely) */
.live-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  flex-shrink: 0;
  animation: pulse-red 1.4s ease-in-out infinite;
}

/* ── BODY: full-width 3-column — teams at edges, center pill in the middle ── */
.island-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

/* Side cells — equal flex so center column is perfectly centered */
.team-side {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}
/* Left side: flag ← edge-spaced | code → pulled toward score */
.team-left  { padding-left: 0.75rem; }
/* Right side: code ← pulled toward score | flag → edge-spaced */
.team-right { padding-right: 0.75rem; justify-content: flex-end; }

.island-flag {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
.island-code {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  white-space: nowrap;
}
/* Left team: push code toward score (right) with auto left margin, small right gap */
.team-left  .island-code { margin-left: auto; margin-right: 0.5rem; }
/* Right team: push code toward score (left) with auto right margin, small left gap */
.team-right .island-code { margin-right: auto; margin-left: 0.5rem; }

/* Center column — INNER PILL wrapping [score] (logo) [score], never shrinks */
.island-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 1.375rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
}
.pg-livebar--live .island-center {
  background: rgba(0, 229, 255, 0.06);
  border-color: rgba(0, 229, 255, 0.18);
}
.island-score {
  font-family: var(--font-mono);
  font-size: 4.125rem;            /* largest, heaviest numeric — anchors center */
  font-weight: 800;
  line-height: 1;
  min-width: 1ch;
  text-align: center;
  color: var(--text-primary);
}
.pg-livebar--live .island-score { color: var(--text-primary); }

/* FIFA 26 World Cup logo — replaces the old VS circle */
.island-logo {
  height: 4.125rem;
  width: auto;
  flex-shrink: 0;
  /* Transparent logo: glow follows the trophy shape (no boxy frame). */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 10px rgba(251, 191, 36, 0.25));
}

/* Live state: plain ":" separator instead of the trophy logo. */
.island-colon {
  font-family: var(--font-mono);
  font-size: 4.125rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
  flex-shrink: 0;
  padding: 0 0.2rem;
  /* Colon glyph sits low in the line box — nudge up to optically center it. */
  position: relative;
  top: -0.084em;
}

/* ── Tablet / phone scale-down ── */
@media (max-width: 991.98px) {
  .live-island-wrapper { padding: 1.3125rem 1.625rem; }
  .island-body { gap: 1.125rem; }
  .island-flag  { width: 60px; height: 60px; }
  .island-code  { font-size: 1.9rem; }
  .island-score { font-size: 3.25rem; }
  .island-logo  { height: 3.25rem; }
  .island-colon { font-size: 3.25rem; }
}
@media (max-width: 767px) {
  .pg-livebar { padding: 0.5rem var(--space-1); }
  .top-bar-master-container { max-width: 100%; gap: 0.5rem; }
  .live-island-wrapper {
    max-width: 100%;
    padding: 0.9375rem 1rem;
    border-radius: 24px;
  }
  .detached-status-label {
    padding: 0.3125rem 0.875rem;
    font-size: var(--fs-sm);
    gap: 0.375rem;
  }
  .island-body { gap: 0.625rem; }
  .team-side { gap: 0.375rem; }
  .team-left  { padding-left: 0.375rem; }
  .team-right { padding-right: 0.375rem; }
  .team-left  .island-code { margin-right: 0.25rem; }
  .team-right .island-code { margin-left: 0.25rem; }
  .island-flag  { width: 42px; height: 42px; }
  .island-code  { font-size: 1.4rem; }
  .island-score { font-size: 2.35rem; }
  .island-colon { font-size: 2.35rem; }
  .island-center { padding: 0.3125rem 0.75rem; gap: 0.5rem; }
  .island-logo { height: 2.35rem; }
}

/* ── Multi-match toggle — "show other game" (2+ concurrent matches) ── */
.lb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.125rem;
  padding: 0.3rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, rgba(255,255,255,0.8));
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.lb-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-primary);
}
.lb-toggle:active { transform: scale(0.96); }
.lb-toggle__icon { font-size: 1rem; line-height: 1; }
.lb-toggle__count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-energy);
  letter-spacing: 0.04em;
}


/* =============================================================================
   14. PHASE 8b — SEARCH OVERLAY
   ============================================================================= */

.pg-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}
.pg-search-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Dark semi-transparent backdrop */
.pg-search-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Floating panel */
.pg-search-overlay__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  margin: 0 var(--space-2);
  background: rgba(20, 8, 30, 0.95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md), 0 0 60px rgba(124, 58, 237, 0.15);
  transform: translateY(-8px);
  transition: transform var(--transition-base);
}
.pg-search-overlay--visible .pg-search-overlay__panel {
  transform: translateY(0);
}

/* Input row */
.pg-search-overlay__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--card-border);
}

.pg-search-overlay__icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.pg-search-overlay__input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  padding: 0.25rem 0 !important;
  width: 100%;
  /* Remove browser search clear button */
  -webkit-appearance: none;
}
.pg-search-overlay__input::placeholder { color: var(--text-muted) !important; }
.pg-search-overlay__input::-webkit-search-cancel-button { display: none; }

.pg-search-overlay__close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
  flex-shrink: 0;
}
.pg-search-overlay__close:hover { color: var(--text-primary); }

/* Results area */
.pg-search-overlay__results {
  padding: var(--space-3);
  max-height: 60vh;
  overflow-y: auto;
}

/* Collapse results box when empty — hides the blank space below the input */
.pg-search-overlay__results:empty {
  display: none;
  padding: 0;
}

/* When results are empty/hidden, the header no longer needs its bottom border
   (the panel tightly hugs the input row). Using :has() for modern browsers;
   the fallback keeps the border which is the current behaviour. */
.pg-search-overlay__panel:has(.pg-search-overlay__results:empty) .pg-search-overlay__header {
  border-bottom: none;
}
.pg-search-overlay__placeholder {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  text-align: center;
  margin: 0;
  padding: var(--space-3) 0;
}

/* Prevent body scroll while overlay is open */
body.pg-search-open { overflow: hidden; }


/* =============================================================================
   15. PHASE 8b — MOBILE BOTTOM NAVIGATION BAR
   ============================================================================= */

.pg-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(14, 5, 22, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--card-border);
  display: flex;
  align-items: stretch;
}

.pg-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-muted);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast);
  min-height: 48px; /* touch target */
}
.pg-bottom-nav__item:hover,
.pg-bottom-nav__item:focus-visible {
  color: var(--text-secondary);
}
.pg-bottom-nav__item--active,
.pg-bottom-nav__icon--active {
  color: var(--color-energy) !important;
}

.pg-bottom-nav__icon { font-size: 1.25rem; line-height: 1; }
.pg-bottom-nav__label {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}


/* =============================================================================
   16. PHASE 8b — CONTENT OFFSET (account for sticky nav + live bar)
   ============================================================================= */

/* pg-main grows to fill available space → footer always sticks to bottom */
.pg-main {
  flex: 1 0 auto;
  padding: var(--space-3) 0 var(--space-4);
}
@media (min-width: 992px) {
  .pg-main {
    padding-bottom: var(--space-5);
  }
}
/* Mobile: lift the footer clear of the fixed bottom-nav (incl. iOS safe area).
   Clearance applies ONLY when the bottom-nav is actually visible, so the footer
   sits flush on every page that lacks it (no per-page exceptions to maintain):
     - login page : nav not rendered → no .pg-bottom-nav in DOM → :has() fails
     - admin pages : nav present but display:none → :not(.pg-admin-body) excludes
   Default (no match) = flush footer, which never floats. */
@media (max-width: 991.98px) {
  body:not(.pg-admin-body):has(.pg-bottom-nav) .pg-footer {
    margin-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  }
}


/* =============================================================================
   17. PHASE 8c — MATCH CARD (.mc-card)
   ============================================================================= */

/* ── Card shell ── */
.mc-card {
  position: relative;
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  /* Top / sides match; bottom trimmed since the action row was removed */
  padding: 0.5rem 0.75rem 0.375rem;
  margin-bottom: 0.5rem;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
  overflow: hidden;
  /* Left accent border */
  border-left-width: 4px;
  border-left-style: solid;
  /* Cluster content centrally so rows don't fly to the edges */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.mc-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(124, 58, 237, 0.25),
    0 4px 20px rgba(124, 58, 237, 0.15);
  background-color: rgba(30, 15, 48, 0.80);
}

/* Left-border accent colours */
.mc-accent--upcoming   { border-left-color: var(--color-link); }
.mc-accent--locked     { border-left-color: #EA580C; }
.mc-accent--live       { border-left-color: var(--color-live); }
.mc-accent--finished   { border-left-color: rgba(255,255,255,0.15); }
.mc-accent--cancelled  { border-left-color: rgba(255,255,255,0.08); }

/* Cyan glow on live cards */
.mc-card--live {
  box-shadow: inset 0 0 40px rgba(0, 229, 255, 0.04), var(--shadow-sm);
}
.mc-card--live:hover {
  box-shadow: inset 0 0 40px rgba(0, 229, 255, 0.06), var(--shadow-md);
}

/* Cancelled / postponed — greyed out, not counted */
.mc-card--cancelled {
  opacity: 0.4;
  filter: grayscale(0.7);
  pointer-events: auto;   /* still clickable for details */
}
.mc-card--cancelled:hover {
  opacity: 0.55;
  filter: grayscale(0.5);
  transform: translateY(-2px);
}
.mc-cancelled-banner {
  align-self: center;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.4rem;
  padding: 2px 14px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

/* ── Final match — gold treatment + banner ── */
.mc-card--final {
  border-left-color: #FFC400 !important;
  box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.30), 0 6px 24px rgba(255, 196, 0, 0.12);
}
.mc-card--final:hover {
  box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.50), 0 12px 32px rgba(255, 196, 0, 0.18);
}
.mc-final-banner {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-bottom: 0.4rem;
  padding: 2px 14px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFD84D;
  background: rgba(18, 7, 28, 0.88);
  border: 1px solid rgba(255, 196, 0, 0.55);
  box-shadow: 0 2px 10px rgba(255, 196, 0, 0.18);
}
.mc-final-banner__icon {
  height: 1.4em;
  width: auto;
  display: block;
}

/* Mobile padding */
@media (max-width: 767.98px) {
  .mc-card { padding: 0.375rem 0.5rem 0.25rem; }
}

/* ── Top row ── */
.mc-card__top {
  /* 3-column: kickoff (left) · actual-score badge (center) · save/net (right) */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  padding-bottom: 0.25rem;
  /* Gradient divider: fades in from card-left-edge, peaks center, fades out */
  border-bottom: none;
  box-shadow: 0 1px 0 0 transparent;
  position: relative;
}
.mc-card__top > :first-child { justify-self: start; }
.mc-card__top > :last-child  { justify-self: end; }
/* Kickoff time is always pinned to the top-left edge, even when it is the
   sole child of the row (hero card) — overrides the :last-child rule above. */
.mc-card__top .mc-kickoff { justify-self: start; text-align: left; }
.mc-top-spacer { display: block; min-width: 1px; }
.mc-card__top::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.13) 30%, rgba(255,255,255,0.13) 70%, transparent 100%);
}

/* ── Matchup grid (hero row) — inset glass frame ── */
.mc-card__matchup {
  display: grid;
  /* Fractional left + auto center + fractional right => harmonious 3-col split */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-1);
  /* Inset frame: slightly darker surface + etched border + rounded corners */
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  margin: 0.25rem 0 0;
}
@media (max-width: 767.98px) {
  .mc-card__matchup {
    gap: 0.3rem;
    padding: 0.375rem;
  }
}

.mc-team {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.mc-team--home {
  justify-content: center;
  text-align: center;
  padding-right: var(--space-1);
}
.mc-team--away {
  justify-content: center;
  text-align: center;
  padding-left: var(--space-1);
}
@media (max-width: 767.98px) {
  .mc-team--home,
  .mc-team--away { padding-left: 0; padding-right: 0; }
}

.mc-team__name {
  font-family: var(--font-ui);
  font-size: clamp(1.05rem, 2.1vw, var(--fs-xl));
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  line-height: 1.1;
  /* Truncate long names */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .mc-team__name { font-size: var(--fs-base); max-width: 110px; }
}

.mc-team__flag {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .mc-team__flag { width: 30px; height: 30px; }
}

/* Center: VS or score */
.mc-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mc-vs {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  color: var(--text-muted);
  letter-spacing: 0.1em;
}
@media (max-width: 767.98px) {
  .mc-vs { font-size: var(--fs-xl); }
}

.mc-score {
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.mc-score--live          { color: rgba(255,255,255,0.95); }
.mc-score--tier-exact   { color: #4ade80; }
.mc-score--tier-outcome { color: #22d3ee; }
.mc-score--tier-wrong   { color: #f87171; }
.mc-score--tier-dnf     { color: rgba(255,255,255,0.95); }
.mc-score--tier-none    { color: rgba(255,255,255,0.95); }
@media (max-width: 767.98px) {
  .mc-score { font-size: var(--fs-2xl); }
}
.mc-score__sep {
  color: var(--text-muted);
  margin: 0 0.1rem;
}

.mc-kickoff {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.mc-pred-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Prediction status pills */
.mc-pred-status {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.mc-pred-status--exact   { color: var(--color-success); background: rgba(0,200,83,.15); }
.mc-pred-status--outcome { color: var(--color-live);    background: rgba(0,229,255,.1); }
.mc-pred-status--wrong   { color: #f87171;              background: rgba(248,113,113,.1); }
.mc-pred-status--muted   { color: var(--text-muted);    background: transparent; }

.mc-pred-form {
  padding: var(--space-1) 0 var(--space-1);
  border-top: 1px solid var(--card-border);
  margin-top: var(--space-1);
}

.mc-pred-form__inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--space-1);
}

.mc-pred-form__input {
  font-family: var(--font-mono) !important;
  font-size: var(--fs-xl) !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 70px !important;
  padding: var(--space-1) 0.25rem !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-primary) !important;
  /* Hide spinner arrows */
  -moz-appearance: textfield;
}
.mc-pred-form__input::-webkit-inner-spin-button,
.mc-pred-form__input::-webkit-outer-spin-button { -webkit-appearance: none; }
.mc-pred-form__input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.25) !important;
  outline: none !important;
}

.mc-pred-form__sep {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  color: var(--text-muted);
  padding: 0 0.25rem;
}

.mc-pred-form__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.mc-pred-form__submit {
  background: var(--color-primary);
  border: none;
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.4rem 1.25rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 44px;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.mc-pred-form__submit:hover { background: var(--color-accent); transform: translateY(-1px); }

.mc-pred-form__cancel {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 0.4rem;
  transition: color var(--transition-fast);
}
.mc-pred-form__cancel:hover { color: var(--text-primary); }

.mc-pred-form__msg {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  margin-left: 0.25rem;
}


/* =============================================================================
   18. PHASE 8c — MATCHES PAGE
   ============================================================================= */

/* Page header */
.matches-header {
  padding: var(--space-3) 0 var(--space-2);
}
.matches-header__title {
  font-family: var(--font-heading) !important;
  font-size: var(--fs-4xl) !important;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  line-height: 1;
}
@media (max-width: 767.98px) {
  .matches-header__title { font-size: calc(var(--fs-4xl) * 0.7) !important; }
}
.matches-header__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin: 0;
}

/* Tab bar */
.mc-tabs {
  margin-bottom: var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mc-tabs::-webkit-scrollbar { display: none; }

/* Scroll affordance: fade off-screen tabs instead of clipping them flat.
   .mc-tabs--ovf / --start / --end are toggled by setupTabScroll() in matches.js,
   so the fade shows only when the row actually overflows, and only on the side
   that still has hidden tabs. */
.mc-tabs--ovf:not(.mc-tabs--start):not(.mc-tabs--end) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.mc-tabs--ovf.mc-tabs--start:not(.mc-tabs--end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.mc-tabs--ovf.mc-tabs--end:not(.mc-tabs--start) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px);
          mask-image: linear-gradient(to right, transparent 0, #000 24px);
}

/* Very narrow phones: tighten tabs so fewer need scrolling at all. */
@media (max-width: 400px) {
  .mc-tabs__tab { padding-left: 0.7rem; padding-right: 0.7rem; letter-spacing: 0.02em; }
}

.mc-tabs__inner {
  display: inline-flex;
  background: rgba(0,0,0,0.3);
  border-radius: var(--radius-pill);
  padding: 5px;
  gap: 3px;
  white-space: nowrap;
}

.mc-tabs__tab {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.mc-tabs__tab:hover { color: var(--text-primary); }
.mc-tabs__tab--active {
  background: var(--color-primary);
  color: #fff !important;
}

/* Live tab dot — dim when nothing live, pulsing red when a match is live */
.mc-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.mc-tab-dot--live {
  background: #ff3b30;
  animation: pulse-red 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mc-tab-dot--live { animation: none; }
}

/* ── Tab row: tabs left, filter button right ── */
.mc-tabrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: nowrap;
}
.mc-tabrow .mc-tabs {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* Filter button */
.mc-filter-wrap {
  position: relative;
  flex-shrink: 0;
}

.mc-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.875rem;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background var(--transition-fast);
  min-height: 44px;
}
.mc-filter-btn:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.45);
}
.mc-filter-btn--active {
  color: var(--color-energy);
  border-color: var(--color-energy);
  background: rgba(204, 255, 0, 0.06);
}
.mc-filter-btn--active:hover {
  border-color: var(--color-energy);
  background: rgba(204, 255, 0, 0.10);
}

/* Active filter count badge */
.mc-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-energy);
  color: #000;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

/* Glass dropdown panel */
.mc-filter-panel {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 500;
  width: 260px;
  background: rgba(20, 8, 30, 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), 0 0 40px rgba(124, 58, 237, 0.12);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}
.mc-filter-panel--open {
  opacity: 1;
  transform: translateY(0);
}

.mc-filter-form {
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mc-filter-section {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mc-filter-label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ── Combobox (searchable team picker) ── */
.mc-combo {
  position: relative;
}

.mc-combo__input {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-base);   /* 16px — stops iOS zoom-on-focus */
  padding: 0.45rem 2.25rem 0.45rem 0.75rem;
  cursor: text;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.mc-combo__input::placeholder { color: var(--text-muted); }
.mc-combo__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

/* Chevron icon, absolute inside the combo wrapper */
.mc-combo__chevron {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: transform var(--transition-fast);
  user-select: none;
}
.mc-combo__chevron--open {
  transform: translateY(-50%) rotate(180deg);
}

/* Listbox dropdown */
.mc-combo__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 600;
  background: rgba(18, 6, 28, 0.98);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md), 0 0 30px rgba(124, 58, 237, 0.1);
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.mc-combo__list::-webkit-scrollbar { width: 4px; }
.mc-combo__list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
}

.mc-combo__opt {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding: 0.4rem 0.625rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-combo__opt:hover,
.mc-combo__opt--focused {
  background: rgba(124, 58, 237, 0.18);
  color: var(--text-primary);
}
.mc-combo__opt--selected {
  color: var(--color-energy);
}
.mc-combo__opt--selected::after {
  content: ' ✓';
  font-size: 0.625rem;
  vertical-align: middle;
}
/* Hide filtered-out options cleanly */
.mc-combo__opt[hidden] { display: none; }

/* ── Native date input ── */
.mc-filter-date {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-base);   /* 16px — stops iOS zoom-on-focus */
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  /* Force dark calendar icon on webkit */
  color-scheme: dark;
}
.mc-filter-date:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}
.mc-filter-date::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
}

/* Divider before actions */
.mc-filter-actions {
  display: flex;
  gap: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: var(--space-1);
}

.mc-filter-apply {
  flex: 1;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.45rem var(--space-2);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  min-height: 44px;
}
.mc-filter-apply:hover { background: var(--color-accent); transform: translateY(-1px); }
.mc-filter-apply:active { transform: translateY(0); }

.mc-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.45rem 0.875rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  min-height: 44px;
  white-space: nowrap;
}
.mc-filter-clear:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Mobile: anchor under the button, right-aligned, capped to the viewport
   so it never overflows off-screen. */
@media (max-width: 479px) {
  .mc-filter-panel {
    width: min(320px, calc(100vw - var(--space-4)));
    left: auto;
    right: 0;
    transform: translateY(-6px);
  }
  .mc-filter-panel--open {
    transform: translateY(0);
  }
}

/* Date group header */
.mc-date-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-2);
}
.mc-date-group:first-child { margin-top: 0; }

.mc-date-group__label {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .mc-date-group__label { font-size: var(--fs-base); }
}
.mc-date-group__line {
  flex: 1;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.12) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 1px;
}

/* Empty state */
.mc-empty {
  text-align: center;
  padding: var(--space-5) 0;
}
.mc-empty__text {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.mc-empty__mascot {
  display: block;
  margin: 0 auto;
  height: 200px;
  width: auto;
  opacity: 0.85;
}

/* Pagination */
.mc-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}
.mc-pagination__item {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  min-width: 36px;
  text-align: center;
}
.mc-pagination__item:hover { color: var(--text-primary); background: rgba(255,255,255,.05); }
.mc-pagination__item--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}


/* =============================================================================
   19. PHASE 8c — MATCH DETAIL PAGE
   ============================================================================= */

/* Back link */
.md-back {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-2) 0;
  transition: color var(--transition-fast);
  letter-spacing: 0.02em;
}
.md-back:hover { color: var(--text-primary); }

/* Hero card — large matchup */
.md-hero { margin-bottom: var(--space-2); }

.md-hero__matchup {
  padding: 0.625rem var(--space-2);
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(255, 255, 255, 0.04);
  margin-bottom: 0;
}

.md-hero__name {
  font-size: clamp(var(--fs-2xl), 3vw, var(--fs-3xl)) !important;
  max-width: 260px !important;
}
@media (max-width: 767.98px) {
  .md-hero__name { font-size: calc(var(--fs-2xl)) !important; max-width: 110px !important; }
}

.md-hero__flag { width: 48px !important; height: 48px !important; }
@media (max-width: 767.98px) { .md-hero__flag { width: 32px !important; height: 32px !important; } }

.md-hero__score {
  font-size: var(--fs-4xl) !important;
}
@media (max-width: 767.98px) {
  .md-hero__score { font-size: var(--fs-3xl) !important; }
}

.md-hero__vs {
  font-size: var(--fs-3xl) !important;
  color: var(--text-muted);
}

/* Glass section cards */
.md-section {
  margin-bottom: var(--space-3);
}

.md-section__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}

.md-section__title {
  font-family: var(--font-heading) !important;
  font-size: var(--fs-xl) !important;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
  letter-spacing: 0.04em;
}
/* When the title sits inside the flex header, the header owns the bottom
   rhythm — drop the title's own margin to avoid a doubled gap. */
.md-section__header .md-section__title {
  margin-bottom: 0;
}

.md-section__count {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Prediction form on detail page — centred */
.md-pred-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Score input row — spacing below prevents button overlap */
.md-pred-form .mc-pred-form__inputs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

/* Update button wrapper */
.md-pred-form .mc-pred-form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.md-pred-form .pg-pred-form__msg {
  margin-left: 0;
  margin-top: 12px;
  font-size: var(--fs-xs);
  text-align: center;
}

.pg-pred-form__msg:empty {
  display: none !important;
}

.md-pred-current {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  text-align: center;
}

.md-pred-score {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-primary);
  display: block;
  margin-bottom: var(--space-1);
}

.md-pred-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.md-pred-dnf {
  font-family: var(--font-ui);
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
  text-align: center;
}

/* ── Finished prediction outcome: emoji · big score · tier+net ──────
   3-column spread so it fills the full panel width symmetrically;
   collapses to a centered stack on phones. Sizes scale with viewport. */
.md-pred-outcome {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: center;
}
.md-pred-outcome .md-pred-score {
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
}
.md-pred-score--muted { color: var(--text-muted); }

.md-pred-emoji {
  font-size: clamp(2.6rem, 7vw, 3.8rem);
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

/* Tier-tint the scoreline so it echoes the hero score colour */
.md-pred-outcome--exact   .md-pred-score { color: var(--tier-exact-fg); }
.md-pred-outcome--outcome .md-pred-score { color: var(--tier-outcome-fg); }
.md-pred-outcome--wrong   .md-pred-score { color: var(--tier-wrong-fg); }

.md-pred-meta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Net P/L pill — colour comes from .pg-pos / .pg-neg / .pg-zero */
.md-pred-net {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.28rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.04);
}

/* Locked / pre-result: keep it simple + centered (no emoji) */
.md-pred-outcome--locked {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Phones: stack the 3 columns into a centered column */
@media (max-width: 767.98px) {
  .md-pred-outcome {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .md-pred-meta { flex-direction: row; flex-wrap: wrap; }
}

/* ── Unified control panel (countdown + prediction, side by side) ── */
.prediction-control-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.prediction-control-panel--dual {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.pc-panel__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.prediction-control-panel--dual .pc-panel__left {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: var(--space-3);
}

.pc-panel__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.prediction-control-panel--dual .pc-panel__right {
  padding-left: var(--space-3);
}

@media (max-width: 767.98px) {
  .prediction-control-panel {
    padding: var(--space-3);
  }
  .prediction-control-panel--dual {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .prediction-control-panel--dual .pc-panel__left {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: var(--space-3);
  }
  .prediction-control-panel--dual .pc-panel__right {
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .prediction-control-panel--dual .md-prematch__num {
    font-size: var(--fs-xl);
    min-width: 50px;
    padding: 0.3rem var(--space-1);
  }
  .prediction-control-panel--dual .md-prematch__sep {
    font-size: var(--fs-xl);
    padding-bottom: 14px;
  }
  .prediction-control-panel--dual .md-prematch__countdown {
    gap: var(--space-1);
  }
}

/* "Predictions Open" pill badge */
.md-prematch__label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-success);
  margin-bottom: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* glassware-in-glass inset pill */
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-pill);
  padding: 0.3rem 1rem;
}

.md-prematch__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
  animation: pulse-live 2s ease-in-out infinite;
}

/* Countdown */
.md-prematch__countdown {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.md-prematch__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.md-prematch__num {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  padding: 0.375rem var(--space-2);
  min-width: 64px;
  text-align: center;
  transition: color var(--transition-base);
}

.md-prematch__sep {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
  align-self: center;
  padding-bottom: 18px; /* aligns with num box center */
}

.md-prematch__unit-label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Phones: shrink the 4-unit countdown so it never overflows the card. */
@media (max-width: 575.98px) {
  .md-prematch__countdown { gap: var(--space-1); }
  .md-prematch__num {
    font-size: var(--fs-xl);
    min-width: 52px;
    padding: 0.3rem 0.4rem;
  }
  .md-prematch__sep {
    font-size: var(--fs-xl);
    padding-bottom: 14px;
  }
}

/* Entry fee footer */
.md-prematch__entry {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: var(--space-2);
  margin-top: var(--space-1);
}

.md-prematch__entry strong {
  font-family: var(--font-mono);
  color: var(--color-energy);
}

/* Near: < 1 h — lime numbers */
.md-prematch--near .md-prematch__num,
.prediction-control-panel--near .md-prematch__num {
  color: var(--color-energy);
}

@media (max-width: 575.98px) {
  .md-prematch__num  {
    font-size: var(--fs-xl);
    min-width: 50px;
    padding: 0.3rem var(--space-1);
  }
  .md-prematch__sep  { font-size: var(--fs-xl); padding-bottom: 14px; }
  .md-prematch__countdown { gap: var(--space-1); }
}

/* House row */
.md-house-row {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  background: rgba(251,191,36,.06);
  border-left: 3px solid #FBBF24;
  padding: 0.5rem var(--space-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--space-2);
}

/* Predictions section header toggle */
.md-section__header--toggled {
  align-items: center;
}
.md-section__header--toggled .lb-view-toggle-wrap {
  margin-bottom: 0;
  text-align: left;
}

/* Match Statistics Bars */
.md-stats-wrap {
  padding-top: var(--space-1);
}
.md-stats-empty {
  font-family: var(--font-ui);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-3) 0;
  font-style: italic;
}
.md-stat-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 12px;
}
.md-stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--text-primary);
  min-width: 60px;
  text-align: right;
  letter-spacing: -0.02em;
}
.md-stat-bar-track {
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.04);
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.md-stat-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0.4));
}

/* Tier Colors (Match Finished) */
.md-stat-bar--exact {
  background: linear-gradient(90deg, rgba(0,200,83,0.6), rgba(0,200,83,0.9)); /* Success Green */
  box-shadow: 0 0 10px rgba(0,200,83,0.2);
}
.md-stat-bar--outcome {
  background: linear-gradient(90deg, rgba(0,229,255,0.6), rgba(0,229,255,0.9)); /* Live Cyan */
  box-shadow: 0 0 10px rgba(0,229,255,0.2);
}
.md-stat-bar--wrong {
  background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2)); /* Muted Grey */
  box-shadow: none;
}

/* Outcome Colors (Match Not Finished) */
.md-stat-bar--home {
  background: linear-gradient(90deg, rgba(59,130,246,0.6), rgba(59,130,246,0.9)); /* Link Blue */
  box-shadow: 0 0 10px rgba(59,130,246,0.2);
}
.md-stat-bar--draw {
  background: linear-gradient(90deg, rgba(168,85,247,0.6), rgba(168,85,247,0.9)); /* Accent Lavender */
  box-shadow: 0 0 10px rgba(168,85,247,0.2);
}
.md-stat-bar--away {
  background: linear-gradient(90deg, rgba(204,255,0,0.6), rgba(204,255,0,0.9)); /* Energy Lime */
  box-shadow: 0 0 10px rgba(204,255,0,0.2);
}
.md-stat-count {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  min-width: 60px;
  font-weight: 600;
}
.md-stat-count-lbl {
  font-weight: 400;
  color: var(--text-muted);
}

/* Predictions table */
.md-table-wrap {
  overflow-x: auto;
}

.md-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--text-primary);
}
.md-table thead th {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--card-border);
  text-align: left;
}
.md-table__rank   { width: 70px; }
.md-table__payout { width: 110px; text-align: right; }

.md-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background var(--transition-fast);
}
.md-table tbody tr:hover { background: rgba(255,255,255,.03); }
.md-table tbody td { padding: 0.3rem 0.5rem; vertical-align: middle; }

.md-table__row--exact   { background: rgba(0,200,83,.05); }
.md-table__row--outcome { background: rgba(0,229,255,.04); }
.md-table__row--dnf     { opacity: 0.6; }

.md-table__player     { color: var(--color-link); text-decoration: none; }
.md-table__player:hover { color: var(--color-accent); }
.md-table__player--dnf { color: var(--text-muted); font-style: italic; }

.md-table__pred     { font-family: var(--font-mono); font-size: var(--fs-base); }
.md-table__pred--dnf { color: var(--text-muted); }
.md-table__payout   { font-family: var(--font-mono); text-align: right; }

/* Alerts */
.md-alert {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.md-alert--warning { background: rgba(234,88,12,.15); border: 1px solid #EA580C; color: #FB923C; }
.md-alert--danger  { background: rgba(248,113,113,.1); border: 1px solid #f87171; color: #f87171; }
.md-alert--info    { background: rgba(59,130,246,.1);  border: 1px solid #3B82F6; color: #93C5FD; }

/* Meta footer */
.md-meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: var(--space-3) 0 var(--space-4);
}
.md-meta code {
  background: rgba(255,255,255,.05);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.md-meta__badge {
  background: rgba(255,255,255,.1);
  border: 1px solid var(--card-border);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* =============================================================================
   20. PHASE 8d-1 — LOGIN & LEADERBOARD REDESIGN
   ============================================================================= */

/* Hide nav and livebar on login page */
body:has(.pg-login-page) .pg-nav,
body:has(.pg-login-page) .pg-livebar,
body:has(.pg-login-page) .pg-bottom-nav {
  display: none !important;
}

/* Hide the live match bar on the Rules page only */
body:has(.pg-rules-page) .pg-livebar {
  display: none !important;
}

/* Tighter vertical rhythm so the whole login stack (logo, mascots, card)
   fits on laptop viewports without pushing the sign-in fields off-screen. */
.pg-login-page {
  padding-top: clamp(0.75rem, 3vh, 2rem) !important;
  padding-bottom: clamp(0.75rem, 3vh, 2rem) !important;
}

/* Mascot Animations */
.mascot-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.45rem;   /* side mascots a little closer to the centred eagle */
  margin-bottom: 1.9rem;
}
.mascot {
  opacity: 0;
  animation: fadeUpIn 800ms var(--ease-out-expo) forwards;
}
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(32px) var(--mascot-rotate, rotate(0deg)); }
  to   { opacity: 1; transform: translateY(0)    var(--mascot-rotate, rotate(0deg)); }
}
.mascot.zayu {
  animation-delay: 300ms;
  height: 150px;
  --mascot-rotate: rotate(-5deg);
  transform: rotate(-5deg) translateY(32px);
}
.mascot.clutch {
  animation-delay: 480ms;
  height: 184px;
  z-index: 2;
  transform: translateY(32px);
}
.mascot.maple {
  animation-delay: 660ms;
  height: 150px;
  --mascot-rotate: rotate(5deg);
  transform: rotate(5deg) translateY(32px);
}
@media (max-width: 767px) {
  /* Show all three on phones, scaled together to fit (was: hide the side two).
     vw-based clamp shrinks them fluidly down to the narrowest screens. */
  .mascot-container { gap: 0.4rem; max-width: 100%; }
  .mascot.zayu, .mascot.maple { height: clamp(68px, 22vw, 132px); }
  .mascot.clutch              { height: clamp(84px, 27vw, 158px); }
}

/* Form Entrance Animation */
.login-form-wrapper {
  animation: fadeIn 700ms var(--ease-out-quart) 800ms both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .login-form-wrapper { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Podium Styles */
.pg-podium-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.pg-podium-card {
  flex: 1;
  text-align: center;
  padding: 1.5rem;
  position: relative;
}
.pg-podium-card.rank-1 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  box-shadow: var(--shadow-glow-win);
  border-color: var(--color-success);
}
.pg-podium-card .trophy {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
@media (max-width: 767px) {
  .pg-podium-container {
    flex-direction: column;
    align-items: stretch;
  }
  .pg-podium-card.rank-1 {
    order: -1;
  }
}

/* Leaderboard custom self-row */
.pg-leaderboard__self {
  background-color: rgba(124,58,237,0.15) !important;
}

/* NOTE: .stripe-accent-top is defined in section 7 above — do not redefine here */

/* Sidebar match card */
.sidebar-match-card {
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sidebar-match-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar-match-badge {
  background: rgba(255,255,255,0.1);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sidebar-match-card__teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar-match-card__team {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sidebar-match-card__team-name {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--text-primary);
}
.sidebar-match-card__flag {
  font-size: 1.5rem;
}
.sidebar-match-card__score {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-primary);
}
.sidebar-match-card__btn {
  width: 100%;
  text-align: center;
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-accent);
  padding: 0.4rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.sidebar-match-card__btn:hover {
  background: var(--color-primary);
  color: white;
}

/* =============================================================================
   21. PHASE 8d-2 — PROFILE, RULES, CHANGE PASSWORD
   ============================================================================= */

/* Profile Custom Styles */
.pg-profile-name {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  line-height: 1;
}
@media (max-width: 767.98px) {
  .pg-profile-name { font-size: var(--fs-3xl); }
}
.profile-badge {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1);
  color: var(--text-secondary);
}
.profile-badge--admin {
  background: rgba(251, 191, 36, 0.2);
  color: #FBBF24;
}

/* Rules Custom List */
.rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rules-list-item {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.75rem;
}
.rules-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 3px;
  background-color: var(--color-energy);
  border-radius: 2px;
}
.rules-table {
  width: 100%;
  border-collapse: collapse;
}
.rules-table th {
  color: var(--color-energy);
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.rules-table td {
  padding: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Prediction Badges */
.badge-pill-exact {
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--color-success);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.badge-pill-outcome {
  background-color: rgba(0, 229, 255, 0.15);
  color: var(--color-live);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.badge-pill-miss {
  background-color: rgba(255, 107, 107, 0.12);
  color: #FF6B6B;
  border: 1px solid rgba(255, 107, 107, 0.5);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}
.badge-pill-dnf {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}
.badge-pill-pending {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

/* =============================================================================
   22. PHASE 8e — SEARCH OVERLAY & RESULTS
   ============================================================================= */

/* States */
.pg-search-loading,
.pg-search-error {
  text-align: center;
  padding: 2rem;
  font-family: var(--font-ui);
  color: var(--text-muted);
}
.pg-search-empty {
  text-align: center;
  padding: 3rem 1rem;
}
.pg-search-empty p {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  color: var(--text-muted);
  margin-top: 1rem;
}

/* Sections */
.pg-search-section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 1.1rem 1.15rem 0.55rem;
  letter-spacing: 0.06em;
}

/* Items */
.pg-search-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.95rem 1.15rem;
  text-decoration: none;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background-color var(--transition-fast);
  cursor: pointer;
}
.pg-search-item:last-child {
  border-bottom: none;
}
.pg-search-item:hover,
.pg-search-item--focused {
  background-color: rgba(255, 255, 255, 0.05);
  outline: none;
}

/* Player Item */
.pg-search-item-left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.pg-search-item-right {
  font-family: var(--font-mono);
  font-weight: 700;
}
.pg-search-icon {
  font-size: 1.5rem;
}
.pg-search-player-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-lg);
}

/* Match Item */
.pg-search-match-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
}
.pg-search-flag {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}
.pg-search-vs {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pg-search-match-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}
.pg-search-date {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pg-search-status-pill {
  background: rgba(255,255,255,0.1);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  text-transform: uppercase;
}

/* Country Item */
.pg-search-country-name {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
}
.pg-search-match-count {
  color: var(--text-muted);
  font-weight: normal;
  font-size: var(--fs-base);
  font-family: var(--font-ui);
}

/* Filter Banner */
.country-filter-banner {
  background: rgba(255,255,255,0.02);
}


/* =============================================================================
   23. BALANCE PILL (navbar) + POS/NEG COLOR UTILITIES
   ============================================================================= */

/* --fs-md alias — between base and lg, used in search results */
:root { --fs-md: 1.125rem; /* 18px */ }

/* Balance pill shown in top nav */
.pg-balance-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pg-balance-pill.pg-pos {
  color: var(--color-success);
  border-color: rgba(0, 200, 83, 0.35);
  background: rgba(0, 200, 83, 0.08);
}
.pg-balance-pill.pg-neg {
  color: #FF6B6B;
  border-color: rgba(255, 107, 107, 0.35);
  background: rgba(255, 107, 107, 0.08);
}
.pg-balance-pill.pg-zero {
  color: var(--text-muted);
  border-color: var(--card-border);
  background: transparent;
}

/* Small trophy icon before the "Leaderboard" nav item */
.pg-nav__trophy {
  height: 20px;
  width: auto;
  vertical-align: -0.24em;
  margin-right: 0.4em;
}
@media (max-width: 575.98px) {
  .pg-nav__trophy { height: 18px; }
}

/* Inline pos/neg color helpers used in tables */
.pg-pos { color: var(--color-success) !important; }
.pg-neg { color: #FF6B6B !important; }
.pg-zero { color: var(--text-muted) !important; }


/* =============================================================================
   PHASE 8f-1 — ADMIN PANEL
   ============================================================================= */

/* Hide Live Bar and bottom nav on admin pages */
.pg-admin-body .pg-livebar,
.pg-admin-body .pg-bottom-nav {
  display: none !important;
}

/* Flush admin sub-nav against top navbar — remove pg-main's top padding */
.pg-admin-body .pg-main {
  padding-top: 0;
}

/* Secondary Navigation */
.pg-admin-nav {
  background: rgba(20, 8, 30, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-3);
}

/* Hide scrollbar for cleaner look */
.pg-admin-nav::-webkit-scrollbar {
  display: none;
}
.pg-admin-nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.pg-admin-nav .container-xl {
  padding-top: 0;
  padding-bottom: 0;
  gap: var(--space-3);
}

.pg-admin-nav__link {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-1);
  padding-bottom: calc(var(--space-2) + 4px);
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.pg-admin-nav__link:hover {
  color: var(--text-primary);
}

.pg-admin-nav__link.is-active {
  color: var(--color-energy);
  border-bottom-color: var(--color-energy);
}

/* Admin Panels (Dashboard Cards & Forms) */
.pg-stat {
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}
.pg-stat__label {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  margin-bottom: 0;
  line-height: 1.2;
}
.pg-stat__value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.pg-stat__value.pg-cron-health--green { color: var(--color-success); }
.pg-stat__value.pg-cron-health--yellow { color: var(--color-energy); }
.pg-stat__value.pg-cron-health--red { color: #FF3B30; }

a.pg-form-card {
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
a.pg-form-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-energy);
  box-shadow: var(--shadow-md);
}

.pg-btn--danger {
  background: transparent !important;
  border-color: #FF3B30 !important;
  color: #FF3B30 !important;
}
.pg-btn--danger:hover,
.pg-btn--danger:focus-visible {
  background: #FF3B30 !important;
  color: #fff !important;
}

/* Phase 8f-2 Utilities */
.pg-active-border {
  border-left: 4px solid var(--color-energy) !important;
}

.font-heading { font-family: var(--font-heading) !important; }
.font-mono { font-family: var(--font-mono) !important; }

.pg-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}
.pg-status-dot--green {
  background-color: var(--color-success);
  box-shadow: 0 0 8px var(--color-success);
  animation: pulse-green 2s infinite;
}
.pg-status-dot--red {
  background-color: #FF3B30;
  box-shadow: 0 0 8px #FF3B30;
}
.pg-status-dot--muted {
  background-color: var(--text-muted);
}
@keyframes pulse-green {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}


/* =============================================================================
   PHASE 8f-2 + AUDIT — PAGE HEADER, PROFILE, RULES, SHARED COMPONENTS
   ============================================================================= */

/* ── Universal page heading block ── */
.pg-page-header {
  padding: var(--space-3) 0 var(--space-2);
}
.pg-page-header__title {
  font-family: var(--font-heading) !important;
  font-size: var(--fs-4xl) !important;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  line-height: 1;
}
@media (max-width: 767.98px) {
  .pg-page-header__title { font-size: calc(var(--fs-4xl) * 0.7) !important; }
}
.pg-page-header__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin: 0;
}

/* Leaderboard hero trophy — sits above the LEADERBOARD title */
.lb-trophy {
  display: block;
  height: 104px;
  width: auto;
  margin: 0 auto var(--space-2);
  filter: drop-shadow(0 8px 18px rgba(255, 196, 0, 0.38));
  animation: lb-trophy-float 3.6s ease-in-out infinite;
}
@keyframes lb-trophy-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (max-width: 767.98px) {
  .lb-trophy { height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-trophy { animation: none; }
}

/* Small trophy beside the rank-1 leader's name */
.lb-winner-trophy {
  height: 1.3em;
  width: auto;
  vertical-align: -0.22em;
  margin-right: 0.35em;
  filter: drop-shadow(0 1px 3px rgba(255, 196, 0, 0.5));
}

/* Login/landing hero — text block (ARARAT + subtitle) on the left,
   trophy on the right spanning both lines, the pair centered as a group. */
.pg-login-hero-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 1.4vw, 0.85rem);   /* tighter — trophy reads as part of the logo */
  margin-top: clamp(10px, 2vw, 18px);    /* nudge the logo block down off the top edge */
  margin-bottom: var(--space-3);
}
.pg-login-hero-text {
  text-align: center;
  width: fit-content;   /* tight logo block: subtitle centers under the title */
}
.pg-login-trophy {
  /* smaller again so it supports, not dominates, the title */
  height: clamp(66px, 13vw, 100px);
  width: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 18px rgba(255, 196, 0, 0.30));
  animation: lb-trophy-float 3.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pg-login-trophy { animation: none; }
}

/* ── Section title inside cards (h2) — replaces inline style usage ── */
.pg-section-title {
  font-family: var(--font-heading) !important;
  font-size: var(--fs-xl) !important;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ── Stat block (profile stats row) ── */
.pg-stat-block__label {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin-bottom: 0.375rem;
}
.pg-stat-block__value {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 767.98px) {
  .pg-stat-block__label { font-size: var(--fs-sm); }
  .pg-stat-block__value { font-size: var(--fs-xl); }
}

/* ── Profile chart height (was an inline <style> block) ── */
.pg-profile-chart {
  position: relative;
  width: 100%;
  height: 180px;
}
@media (min-width: 768px) {
  .pg-profile-chart { height: 250px; }
}

/* ── Prediction history table ── */
.pg-pred-table {
  width: 100%;
}
.pg-pred-table thead th {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 500;
  border: none;
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pg-pred-table thead th:first-child { padding-left: 1.25rem; }
.pg-pred-table thead th:last-child  { padding-right: 1.25rem; }
.pg-pred-table tbody td {
  border: none;
  padding: 0 0.75rem;
  height: 70px;                 /* fixed row height so the card shows exactly 5 rows */
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: middle;
}
.pg-pred-table tbody td:first-child { padding-left: 1.25rem; }
.pg-pred-table tbody td:last-child  { padding-right: 1.25rem; }
.pg-pred-table__match {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
}
.pg-pred-table__pred {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
}
.pg-pred-table__amount {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
}

/* Fixed-height, internally-scrollable history (~5 rows) with a sticky header. */
/* History: a fixed header + an internally-scrolling body. The header reserves
   the same 12px the body's scrollbar gutter takes, so columns line up, the bar
   starts below the header, and the top-right corner has no gap. */
.pg-pred-history {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.pg-pred-table--fixed { table-layout: fixed; width: 100%; }
.pg-col-match   { width: 38%; }
.pg-col-pred    { width: 20%; }
.pg-col-outcome { width: 20%; }
.pg-col-win     { width: 22%; }

.pg-pred-history__head {
  background: #160b20;
  padding-right: 12px;   /* matches the body scrollbar gutter → columns align + fills the corner */
}

.pg-pred-scroll {
  max-height: 355px;            /* exactly 5 rows (5 × 71px incl. border) */
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.pg-pred-scroll::-webkit-scrollbar { width: 12px; }
.pg-pred-scroll::-webkit-scrollbar-track { background: transparent; }
.pg-pred-scroll::-webkit-scrollbar-thumb {
  /* Floating thin pill: transparent border + content-box clip → ~4px visible. */
  background: rgba(255, 255, 255, 0.16);
  border: 4px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
.pg-pred-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
  background-clip: content-box;
}

/* Phones: shrink the history table so the fixed columns don't overflow. */
@media (max-width: 575.98px) {
  .pg-pred-table thead th { font-size: var(--fs-xs); padding: 0.6rem 0.4rem; }
  .pg-pred-table thead th:first-child { padding-left: 0.6rem; }
  .pg-pred-table thead th:last-child  { padding-right: 0.6rem; }
  .pg-pred-table tbody td  { padding: 0 0.4rem; height: 58px; }
  .pg-pred-table tbody td:first-child { padding-left: 0.6rem; }
  .pg-pred-table tbody td:last-child  { padding-right: 0.6rem; }
  .pg-pred-table__match  { font-size: var(--fs-sm); }
  .pg-pred-table__pred,
  .pg-pred-table__amount { font-size: var(--fs-sm); }
  .pg-col-match   { width: 40%; }
  .pg-col-pred    { width: 14%; }
  .pg-col-outcome { width: 22%; }
  .pg-col-win     { width: 24%; }
  .pg-pred-scroll { max-height: 295px; }   /* 5 × ~59px */
  /* Smaller outcome badges so they fit the narrower column. */
  .pg-pred-table .badge-pill-exact,
  .pg-pred-table .badge-pill-outcome,
  .pg-pred-table .badge-pill-miss,
  .pg-pred-table .badge-pill-dnf,
  .pg-pred-table .badge-pill-pending {
    font-size: var(--fs-xs);
    padding: 0.1rem 0.4rem;
  }
}

/* ── Rules scoring table ── */
.rules-scoring-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
}
.rules-scoring-table thead th {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--card-border);
  text-align: left;
}
.rules-scoring-table tbody td {
  padding: 1rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-primary);
  font-size: var(--fs-lg);
}
.rules-scoring-table tbody tr:last-child td { border-bottom: none; }
.rules-scoring-table__tier {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-energy);
}
.rules-scoring-table__badge {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: 700;
}
.rules-scoring-table__badge--exact   { background: rgba(0,200,83,.15);  color: var(--color-success); }
.rules-scoring-table__badge--outcome { background: rgba(0,229,255,.12); color: var(--color-live); }
.rules-scoring-table__badge--house   { background: rgba(248,113,113,.12); color: #f87171; }

/* ── Math example block (rules page) ── */
.pg-math-block {
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--color-energy);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pg-math-block__label {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.pg-math-block__content {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--text-primary);
  margin: 0;
}

/* ── Admin dashboard heading ── */
.pg-admin-page-title {
  font-family: var(--font-heading) !important;
  font-size: var(--fs-2xl) !important;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ── Admin quick-action card ── */
.pg-action-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  height: 100%;
  transition: transform var(--transition-base), border-color var(--transition-base),
              box-shadow var(--transition-base);
}
.pg-action-card:hover {
  transform: translateY(-4px);
  border-color: rgba(204,255,0,0.35) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
.pg-action-card__title {
  font-family: var(--font-heading) !important;
  font-size: var(--fs-lg) !important;
  color: var(--color-energy) !important;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.1;
}
.pg-action-card__desc {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* ── Admin section label ── */
.pg-admin-section-label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* ── Empty state shared ── */
.pg-empty {
  text-align: center;
  padding: var(--space-5) 0;
}
.pg-empty__icon {
  display: block;
  margin: 0 auto var(--space-2);
  height: 180px;
  width: auto;
  opacity: 0.8;
}
.pg-empty__title {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}
.pg-empty__text {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--text-muted);
}


/* =============================================================================
   PHASE 8g — ANIMATIONS & MICRO-INTERACTIONS
   Lightweight. GPU-only (transform + opacity). No heavy/looping effects.
   All blocks gated with prefers-reduced-motion: no-preference.
   ============================================================================= */


/* =============================================================================
   8g-0 — BOOTSTRAP CONFLICT REMOVAL
   ============================================================================= */

.btn {
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-fast),
    transform var(--transition-base),
    box-shadow var(--transition-base) !important;
}
.form-control,
.form-select {
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast) !important;
}
.nav-link {
  transition: color var(--transition-fast) !important;
}
.fade-in { opacity: 1 !important; }


/* =============================================================================
   8g-1 — PAGE ENTRANCE (opacity + translateY, fires once)
   ============================================================================= */

/*
  PAGE ENTRANCE — CRITICAL ARCHITECTURE NOTES
  ============================================
  - The nav (<nav class="pg-nav">) is position:sticky + z-index:1000.
    ANY transform on a flex ancestor (body) OR a preceding flex sibling
    that displaces document flow will push the nav out of the viewport.
  - <main class="pg-main page-enter"> is a flex sibling of <nav>.
    translate3d(0, Npx, 0) on <main> at first paint shifts the ENTIRE
    flex layout down by Npx, clipping the nav from the top.
  - SOLUTION: Initial load uses OPACITY-ONLY fade (zero layout impact).
    The translateY slide-up is reserved for JS re-entries (bfcache/popstate)
    where <main> is already rendered and the nav position is stable.
*/

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

/* Used only by JS re-entry (triggerPageEnter) — safe because main is
   already in normal flow when this fires, nav position is stable. */
@keyframes page-enter-slide {
  from { opacity: 0; transform: translate3d(0, 32px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,   0); }
}

/* Base: hidden before animation fires. Opacity-only so no layout shift. */
.page-enter {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* Initial page load: pure opacity fade — no transform, no layout impact.
     This cannot clip the nav because translateY is never applied. */
  .page-enter {
    animation: page-enter-fade 900ms var(--ease-out-expo) forwards;
  }

  /* JS re-entry (bfcache / popstate): safe to slide because main is already
     rendered. The class is swapped by triggerPageEnter() via transitions. */
  .page-enter--active {
    animation: none;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
      opacity   1000ms var(--ease-out-expo),
      transform 1200ms var(--ease-lux);
  }

  .page-enter--pre {
    animation: none;
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition: none;
  }

  /* Page-out: quick, subtle up-slide so navigation feels instant but smooth.
     (Kept short — this delay blocks the next page load.) */
  .pg-main.page-leaving {
    animation: none !important;
    opacity: 0 !important;
    transform: translate3d(0, -10px, 0) !important;
    transition:
      opacity   240ms var(--ease-out-quart),
      transform 240ms var(--ease-out-quart) !important;
    pointer-events: none;
    will-change: opacity, transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-enter {
    opacity: 1;
    animation: none;
  }
  .page-enter--active,
  .page-enter--pre,
  .pg-main.page-leaving {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}


/* =============================================================================
   8g-2 — MATCH CARD ENTRANCE (simple fade-up, no stagger delay > 200ms)
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  @keyframes card-enter {
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }

  .mc-card {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.96);
    animation: card-enter 650ms var(--ease-out-expo) forwards;
    animation-delay: calc(80ms + var(--card-index, 0) * 80ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* =============================================================================
   8g-3 — CARD HOVER POLISH (translateY + shadow, GPU-safe)
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .card-glass:hover {
    transform: translateY(-3px);
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 4px 16px rgba(124, 58, 237, 0.12);
    transition:
      transform var(--transition-base),
      box-shadow var(--transition-base);
  }
}


/* =============================================================================
   8g-4 — NAV LINK UNDERLINE (scaleX — GPU-friendly)
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .pg-nav__link::after {
    width: 100% !important;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-base);
  }

  .pg-nav__link:hover::after,
  .pg-nav__link:focus-visible::after,
  .pg-nav__link.nav-link--active::after {
    transform: scaleX(1);
  }
}


/* =============================================================================
   8g-5 — SEARCH BUTTON ACTIVE SCALE
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .pg-nav__search-btn {
    transition:
      color var(--transition-fast),
      background var(--transition-fast),
      transform 100ms ease-out;
  }
  .pg-nav__search-btn:active {
    transform: scale(0.88);
  }
}


/* =============================================================================
   8g-6 — LOGOUT BUTTON FILL-FROM-LEFT (scaleX pseudo — GPU-safe)
   ============================================================================= */

.pg-nav__logout-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

@media (prefers-reduced-motion: no-preference) {
  .pg-nav__logout-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-fast);
    z-index: -1;
    border-radius: inherit;
  }
  .pg-nav__logout-btn:hover::before,
  .pg-nav__logout-btn:focus-visible::before {
    transform: scaleX(1);
  }
  .pg-nav__logout-btn:hover,
  .pg-nav__logout-btn:focus-visible {
    color: #fff;
    background: transparent;
  }
}


/* =============================================================================
   8g-7 — FORM INPUT FOCUS RING
   ============================================================================= */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  will-change: box-shadow;
}


/* =============================================================================
   8g-8 — BUTTON :ACTIVE PRESS
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .btn:active,
  .mc-pred-form__submit:active {
    transform: scale(0.97) !important;
    transition-duration: 80ms !important;
  }
}


/* =============================================================================
   8g-9 — BUTTON LOADING SPINNER
   ============================================================================= */

.btn--loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}

.btn--loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes btn-spin {
    to { transform: rotate(360deg); }
  }
  .btn--loading::after {
    animation: btn-spin 600ms linear infinite;
  }
}


/* =============================================================================
   8g-10 — LIVE BAR CYAN TINT TRANSITION
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .live-island-wrapper {
    transition:
      background 400ms ease-out,
      opacity var(--transition-fast);
  }
}


/* =============================================================================
   8g-11 — TAB SWITCHING CONTENT FADE
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .mc-list {
    transition: opacity 120ms ease-out;
  }
  .mc-list--switching {
    opacity: 0;
  }
}


/* =============================================================================
   8g-12 — NUMBER COUNTER TABULAR NUMS
   ============================================================================= */

[data-counter] {
  font-variant-numeric: tabular-nums;
}


/* =============================================================================
   8g-13 — SIDEBAR BUTTON TRANSITION FIX
   ============================================================================= */

.sidebar-match-card__btn {
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast) !important;
}


/* =============================================================================
   8g-14 — SEARCH OVERLAY PANEL
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .pg-search-overlay__panel {
    will-change: transform, opacity;
    transition:
      transform var(--transition-base),
      opacity var(--transition-base);
  }
}


/* =============================================================================
   8g-15 — VISIBILITY PAUSE HOOK (JS adds .anim-paused when tab hidden)
   ============================================================================= */

.anim-paused,
.anim-paused * {
  animation-play-state: paused !important;
}


/* =============================================================================
   8g-16 — LEADERBOARD TABLE ROW FADE-IN
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  @keyframes row-fade-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .lb-row-enter {
    opacity: 0;
    animation: row-fade-in 650ms var(--ease-out-expo) forwards;
    animation-delay: calc(120ms + var(--row-index, 0) * 45ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb-row-enter {
    opacity: 1 !important;
    animation: none !important;
  }
}


/* =============================================================================
   PHASE 8h — ERROR PAGES + ZAYU MASCOT PLACEMENT
   ============================================================================= */

/* ── Error page shell ── */
.pg-error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: var(--space-4) var(--space-2);
}

.pg-error-card {
  background: rgba(15, 7, 25, 0.70);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  max-width: 520px;
  width: 100%;
  animation: fade-in 600ms var(--ease-out-expo) both;
}

.pg-error-mascot-trio {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.pg-error-mascot-trio img {
  height: 140px;
  width: auto;
  flex-shrink: 0;
  opacity: 0;
  animation: fadeUpIn 0.5s ease-out forwards;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}

/* Staggered delays — left to right */
.pg-error-mascot-trio img:nth-child(1) { animation-delay: 0.10s; }
.pg-error-mascot-trio img:nth-child(2) { animation-delay: 0.25s; height: 168px; } /* center tallest */
.pg-error-mascot-trio img:nth-child(3) { animation-delay: 0.40s; }

.pg-error-code {
  font-family: var(--font-mono);
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: 1;
  color: var(--color-energy);
  margin-bottom: var(--space-1);
}

.pg-error-title {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.pg-error-sub {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .pg-error-card {
    padding: var(--space-3) var(--space-2);
  }
  .pg-error-mascot-trio {
    gap: var(--space-2);
  }
  .pg-error-mascot-trio img {
    height: 90px;
  }
  .pg-error-mascot-trio img:nth-child(2) {
    height: 110px;
  }
  .pg-error-code {
    font-size: var(--fs-3xl);
  }
}



/* =============================================================================
   PHASE 9 — CODE HYGIENE: EXTRACTED INLINE STYLES (index.php)
   ============================================================================= */

/* Login page hero text */
.pg-login-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-2xl), 8vw, var(--fs-4xl));
  /* Lift the title's stacking context so the Ararat easter-egg image (inside it)
     paints above the mascots / subtitle / login panel. */
  position: relative;
  z-index: 3000;
}

.pg-login-hero-sub {
  font-family: var(--font-ui);
  color: var(--text-secondary);
  /* Sized down + lightly tracked so the line sits at ~the ARARAT title width,
     forming one clean logo block (no fake spacing used). */
  font-size: clamp(0.74rem, 2.6vw, 0.92rem);
  letter-spacing: 0.06em;
  white-space: nowrap;
  max-width: 100%;
  margin-inline: auto;
}

/* Chromatic divider bar below hero title */
.pg-login-hero-rule {
  height: 3px;
  max-width: 240px;
  margin: 0 auto 1.1rem;
  background: linear-gradient(90deg, #7C3AED 0%, #A855F7 25%, #00E5FF 50%, #00C853 75%, #CCFF00 100%);
  border-radius: 2px;
}

/* Hero text cascade — sequential reveal layered on top of page-enter. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pg-hero-slide-up {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes pg-hero-rule-grow {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
  }
  .pg-login-hero-title {
    opacity: 0;
    animation: pg-hero-slide-up 650ms var(--ease-out-expo) 120ms forwards;
  }
  .pg-login-hero-sub {
    opacity: 0;
    animation: pg-hero-slide-up 650ms var(--ease-out-expo) 220ms forwards;
  }
  .pg-login-hero-rule {
    opacity: 0;
    transform-origin: center;
    animation: pg-hero-rule-grow 700ms var(--ease-out-expo) 320ms forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pg-login-hero-title,
  .pg-login-hero-sub,
  .pg-login-hero-rule { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ── Easter egg: hover "ARARAT" → Mount Ararat fades in (slow, smooth) ── */
.pg-ararat-egg {
  position: relative;
  display: inline-block;
  cursor: help;
}
.pg-ararat-egg__img {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: min(380px, 80vw);
  border-radius: 14px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateX(-50%) translateY(12px) scale(0.96);
  transform-origin: top center;
  pointer-events: none;
  z-index: 3000;   /* above everything */
  /* slow + smooth in/out — the reference curve reused site-wide */
  transition: opacity 650ms var(--ease-out-expo), transform 650ms var(--ease-out-expo);
}
.pg-ararat-egg:hover .pg-ararat-egg__img,
.pg-ararat-egg:focus-visible .pg-ararat-egg__img {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .pg-ararat-egg__img {
    transition: opacity 250ms linear;
    transform: translateX(-50%);
  }
  .pg-ararat-egg:hover .pg-ararat-egg__img,
  .pg-ararat-egg:focus-visible .pg-ararat-egg__img { transform: translateX(-50%); }
}

/* Login/register form wrapper max-width */
.pg-login-wrapper {
  max-width: 400px;
}

/* Form panel heading (SIGN IN / JOIN THE GAME) */
.pg-form-heading {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
}

/* Form field label */
.pg-form-label {
  font-family: var(--font-ui);
  color: var(--text-secondary);
}

/* Form hint text below inputs */
.pg-form-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Hero CTA button (submit on login/register) */
.pg-btn-hero {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  letter-spacing: 0.06em;
}

/* Panel-switch anchor link */
.pg-panel-switch-link {
  font-family: var(--font-ui);
  color: var(--text-secondary);
  text-decoration: none;
}
.pg-panel-switch-link:hover {
  color: var(--text-primary);
}

/* Inline form alert (danger) */
.pg-alert-danger {
  border: 1px solid #f87171;
  background: rgba(248, 113, 113, 0.1) !important;
  color: #f87171;
}


/* =============================================================================
   PHASE 9 — PORTED FROM style.css (deprecation migration)
   ============================================================================= */

/* Sparkline canvas */
canvas.pg-sparkline {
  display: block;
  vertical-align: middle;
}

/* Footer tournament label */
.pg-footer-tournament {
  opacity: 0.8;
}

/* Win-tier badges (match detail + history table) */
.pg-tier-badge { letter-spacing: 0.02em; }
.pg-tier-exact   { background-color: var(--color-energy); color: #0a1929; }
.pg-tier-outcome { background-color: #c0c0c0; color: #0a1929; }
.pg-tier-wrong   { background-color: #6c757d; color: #fff; }
.pg-tier-dnf     {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px dashed currentColor;
  opacity: 0.7;
}

/* Toast notification system (rendered by matches.js) */
.pg-toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
@media (max-width: 575.98px) {
  .pg-toast-container {
    bottom: auto;
    right: 0.5rem;
    left: 0.5rem;
    top: 0.5rem;
    align-items: center;
  }
}
.pg-toast {
  pointer-events: auto;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(14, 5, 22, 0.95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--text-primary);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-md);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity var(--transition-base), transform var(--transition-base);
  max-width: 90vw;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}
.pg-toast--in      { opacity: 1; transform: translateY(0); }
.pg-toast--success { border-color: var(--color-success); }
.pg-toast--error   { border-color: #f87171; }
.pg-toast--info    { border-color: var(--color-link); }


/* =============================================================================
   PHASE 9 — LEADERBOARD PODIUM POLISH (Top 3 metallic rank treatment)
   ============================================================================= */

/* Gold — rank #1 */
.lb-rank--gold {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 40%, #FFD700 70%, #FFECB3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(255, 200, 0, 0.35));
}

/* Silver — rank #2 */
.lb-rank--silver {
  background: linear-gradient(135deg, #C0C0C0 0%, #E8E8E8 40%, #A8A8A8 70%, #D8D8D8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(200, 200, 200, 0.25));
}

/* Bronze — rank #3 */
.lb-rank--bronze {
  background: linear-gradient(135deg, #CD7F32 0%, #E8A055 40%, #B8732C 70%, #DDA070 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(205, 127, 50, 0.3));
}

/* Podium row left-border accent */
.lb-row--gold   { border-left: 3px solid rgba(255, 210, 0, 0.5) !important; }
.lb-row--silver { border-left: 3px solid rgba(192, 192, 192, 0.4) !important; }
.lb-row--bronze { border-left: 3px solid rgba(205, 127, 50, 0.4) !important; }

/* Sidebar section title variant */
.pg-section-title--sidebar {
  color: var(--text-secondary);
  font-size: var(--fs-lg) !important;
}

/* House balance card (leaderboard) */
/* BANK row — single compact row matching one leaderboard table row */
.lb-bank-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(15, 7, 25, 0.70), rgba(15, 7, 25, 0.70)) padding-box,
    linear-gradient(90deg, #7C3AED 0%, #A855F7 25%, #00E5FF 50%, #00C853 75%, #CCFF00 100%) border-box;
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  white-space: nowrap;
}
.lb-bank-row__icon { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.lb-bank-row__title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);          /* match leaderboard player-name size */
  letter-spacing: 0.08em;
  color: #FBBF24;
}
.lb-bank-row__stats {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
}
.lb-bank-row__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}
.lb-bank-row__stat-label {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.lb-bank-row__stat-value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);          /* match leaderboard player-name size */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.lb-bank-row__stat-value--gold { color: #FBBF24; }
@media (max-width: 575.98px) {
  .lb-bank-row { gap: 0.4rem; padding: 0.45rem 0.7rem; }
  .lb-bank-row__stats { gap: 0.75rem; }
  .lb-bank-row__stat-label { font-size: var(--fs-xs); }
  .lb-bank-row__stat-value { font-size: var(--fs-base); }
}

/* Leaderboard table (replaces inline CSS vars on the table element) */
.pg-leaderboard__table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
}
.pg-leaderboard__thead-row {
  border-bottom: 1px solid var(--card-border);
}
.pg-leaderboard__th {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Leaderboard table cell helpers (replaces inline styles) */
.pg-leaderboard__player-link {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-lg);
}
.pg-leaderboard__you-badge {
  background-color: var(--color-primary);
  font-size: var(--fs-xs);
  vertical-align: middle;
  position: relative;
  top: -1px;            /* optically center against the larger player name */
}
.pg-leaderboard__balance {
  font-size: var(--fs-lg);
}
.pg-leaderboard__stat {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
}


/* =============================================================================
   LEADERBOARD — CENTRALIZED SINGLE-COLUMN LAYOUT
   ============================================================================= */

/* Page wrapper: single centered column */
.lb-page-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* Title + trophy centered together as one group */
.lb-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.lb-title-trophy {
  height: 48px;
  width: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 14px rgba(255, 196, 0, 0.30));
  animation: lb-trophy-float 3.6s ease-in-out infinite;
}
@media (max-width: 767.98px) {
  .lb-title-trophy { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-title-trophy { animation: none; }
}

/* Main content column: full width of wrapper */
.lb-main-col {
  width: 100%;
  /* light gap below the header — table sits a touch higher */
  margin-top: clamp(8px, 2vw, 18px);
}

/* Leaderboard table: bigger padding + font across all cells */
.pg-leaderboard__th {
  padding: 14px 16px;
  font-size: var(--fs-base);
}
.pg-leaderboard__table td {
  padding: 14px 16px;
}
.pg-leaderboard__table .ps-3 {
  padding-left: 20px !important;
}
.pg-leaderboard__table .pe-3 {
  padding-right: 20px !important;
}
.pg-leaderboard__player-link {
  font-size: var(--fs-xl);
}
.pg-leaderboard__balance {
  font-size: var(--fs-xl);
}
.pg-leaderboard__stat {
  font-size: var(--fs-md);
}
/* Rank numbers scale up too */
.lb-rank--gold,
.lb-rank--silver,
.lb-rank--bronze {
  font-size: 1.35rem;
}
.font-mono.text-muted {
  font-size: var(--fs-lg);
}

/* Sparkline canvas wider in full-width layout */
.pg-sparkline {
  width: 100px;
}

/* Mobile-only stat line under player name — surfaces the Exact/Outcome
   columns that are hidden (d-none d-md-table-cell) on small screens. */
.lb-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
}
.lb-row-meta__item {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.lb-row-meta__item b {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .lb-page-wrap { padding: 0 var(--space-2); }
  .pg-leaderboard__th { padding: 10px 12px; }
  .pg-leaderboard__table td { padding: 10px 12px; }
}

/* =============================================================================
   PHASE 10a — RULES PAGE: MASCOT TRIO SEAL
   ============================================================================= */

.pg-rules-trio {
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

/* Thin gradient rule above the trio */
.pg-rules-trio__line {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 30%,
    rgba(255,255,255,0.12) 70%,
    transparent 100%);
  margin-bottom: var(--space-2);
}

.pg-rules-trio__mascots {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Overlap achieved via translateX on left/right mascots */
}

.pg-rules-trio__mascot {
  opacity: 0.82;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.55));
  transition: opacity var(--transition-base), transform var(--transition-base);
  flex-shrink: 0;
}
.pg-rules-trio__mascot:hover { opacity: 1; }

.pg-rules-trio__mascot--left {
  height: 96px;
  width: auto;
  transform: rotate(-8deg) translateX(12px);
  opacity: 0;
  animation: fadeUpIn 0.5s ease-out 0.1s forwards;
}
.pg-rules-trio__mascot--center {
  height: 120px;
  width: auto;
  z-index: 2;
  opacity: 0;
  animation: fadeUpIn 0.5s ease-out 0.25s forwards;
}
.pg-rules-trio__mascot--right {
  height: 96px;
  width: auto;
  transform: rotate(8deg) translateX(-12px);
  opacity: 0;
  animation: fadeUpIn 0.5s ease-out 0.4s forwards;
}

/* Caption text */
.pg-rules-trio__caption {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-2) 0 0;
}

@media (max-width: 479px) {
  .pg-rules-trio__mascot--left,
  .pg-rules-trio__mascot--right { height: 72px; }
  .pg-rules-trio__mascot--center { height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-rules-trio__mascot--left,
  .pg-rules-trio__mascot--center,
  .pg-rules-trio__mascot--right {
    opacity: 0.82 !important;
    animation: none !important;
  }
}


/* =============================================================================
   PHASE 10b — MATCHES: LIVE HYPE PANEL
   ============================================================================= */

.pg-live-hype {
  margin-bottom: var(--space-3);
  background: rgba(0, 229, 255, 0.03);
  border: 1px solid rgba(0, 229, 255, 0.10);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.pg-live-hype__label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-live);
  margin-bottom: var(--space-1);
}

.pg-live-hype__mascots {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pg-live-hype__mascot {
  filter: drop-shadow(0 4px 16px rgba(0, 229, 255, 0.18));
  flex-shrink: 0;
  opacity: 0;
}

.pg-live-hype__mascot--left {
  height: 80px;
  width: auto;
  transform: rotate(-6deg) translateX(10px);
  animation: fadeUpIn 0.45s ease-out 0.05s forwards;
}
.pg-live-hype__mascot--center {
  height: 100px;
  width: auto;
  z-index: 2;
  animation: fadeUpIn 0.45s ease-out 0.15s forwards;
}
.pg-live-hype__mascot--right {
  height: 80px;
  width: auto;
  transform: rotate(6deg) translateX(-10px);
  animation: fadeUpIn 0.45s ease-out 0.25s forwards;
}

@media (max-width: 575.98px) {
  .pg-live-hype__mascot--left,
  .pg-live-hype__mascot--right { height: 60px; }
  .pg-live-hype__mascot--center { height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-live-hype__mascot--left,
  .pg-live-hype__mascot--center,
  .pg-live-hype__mascot--right {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}


/* =============================================================================
   PHASE 11 — SPA-LIKE PAGE TRANSITIONS
   Outgoing fade now scoped to .pg-main via .page-leaving (see page-enter block).
   This avoids fading the whole <body> to opacity 0 (which exposed raw <html>
   behind the background-image and produced a black flash mid-navigation).
   ============================================================================= */


/* =============================================================================
   PHASE 12 — TOP LOADING BAR (shown during page transitions)
   ============================================================================= */

.pg-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-accent) 40%,
    var(--color-live) 70%,
    var(--color-energy) 100%
  );
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 0 12px rgba(168, 85, 247, 0.8),
    0 0 24px rgba(204, 255, 0, 0.3);
  transform: translateZ(0);
  will-change: width, opacity;
}

@media (prefers-reduced-motion: no-preference) {
  .pg-loading-bar.is-active {
    opacity: 1;
    width: 80%;
    transition:
      width 8s cubic-bezier(0.05, 0.95, 0.1, 1),
      opacity 200ms ease-out;
  }
  .pg-loading-bar.is-done {
    opacity: 0;
    width: 100%;
    transition:
      width 220ms ease-out,
      opacity 380ms ease-out 120ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-loading-bar { display: none !important; }
}


/* =============================================================================
   PHASE 12 — LOGIN ↔ REGISTER PANEL CROSS-FADE
   Both panels share a single grid cell so they overlap visually during the
   transition — no layout collapse, no footer-jump. inert attribute hides the
   inactive panel from keyboard/AT focus.
   ============================================================================= */

.pg-panels-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

/* Trim the sign-in/register card top padding so it feels less tall.
   Scoped + !important to beat Bootstrap's .p-4 utility. */
.pg-login-page .pg-panel {
  padding-top: 1.1rem !important;
}
.pg-panel {
  grid-column: 1;
  grid-row: 1;
  transform-origin: top center;
  opacity: 0;
  transform: translateY(-12px) scale(0.985);
  pointer-events: none;
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.pg-panel.pg-panel--active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  height: auto;
  overflow: visible;
}

.pg-panel.pg-panel--leaving {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  pointer-events: none;
  visibility: visible; /* keep visible until transition completes */
  height: auto;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .pg-panel {
    transition:
      opacity    600ms var(--ease-out-expo),
      transform  600ms var(--ease-out-expo),
      visibility 0s linear 600ms;
    will-change: opacity, transform;
  }
  .pg-panel.pg-panel--active,
  .pg-panel.pg-panel--leaving {
    transition:
      opacity    600ms var(--ease-out-expo),
      transform  600ms var(--ease-out-expo),
      visibility 0s linear 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-panel {
    transition: none !important;
    transform: none !important;
  }
  .pg-panel.pg-panel--active {
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: visible;
  }
  .pg-panel:not(.pg-panel--active) {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
  }
}



/* =============================================================================
   PHASE 13 — INLINE CENTER PREDICTION (matches feed cards)
   ============================================================================= */

/* ── Tier color tokens for finished real-score chip ────────────── */
:root {
  --tier-exact-fg:   #4ade80;                   /* green  — T1 Exact Score */
  --tier-exact-bg:   rgba(74, 222, 128, 0.15);
  --tier-exact-bd:   rgba(74, 222, 128, 0.4);
  --tier-outcome-fg: #22d3ee;                   /* cyan   — T2 Correct Outcome */
  --tier-outcome-bg: rgba(34, 211, 238, 0.12);
  --tier-outcome-bd: rgba(34, 211, 238, 0.35);
  --tier-wrong-fg:   #f87171;                   /* red    — wrong / nobody correct */
  --tier-wrong-bg:   rgba(248, 113, 113, 0.12);
  --tier-wrong-bd:   rgba(248, 113, 113, 0.40);
}

/* ── Center column container ───────────────────────────────────── */
.mc-center {
  flex-direction: column;
  gap: 0;
  /* No min-width: let the chunky inputs define column size naturally so the
     1fr team columns absorb the remaining width and center their content. */
}

/* ── Pre-match: inline editable form (Save above, scores below) ── */
.mc-center-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  width: 100%;
}

.mc-save-btn {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.9rem;
  cursor: pointer;
  min-height: 0;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.4);
}
.mc-save-btn:hover {
  background: var(--color-accent);
  transform: translateY(-1px);
}
.mc-save-btn:active {
  transform: scale(0.96);
}
.mc-save-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.mc-save-btn.is-saved {
  background: var(--color-success);
  box-shadow: 0 2px 8px rgba(0, 200, 83, 0.35);
}

/* Row containing [home input] VS [away input] */
.mc-center-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1;
}
.mc-center-row--big { gap: 0.7rem; }

/* ── Inline editable score inputs ───────────────────────────────── */
.mc-score-input {
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  /* Chunky tappable chip — always visible as a box, never just bare text */
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  width: 3.2ch;
  min-width: 3.2ch;
  min-height: 2.6rem;
  padding: 0.3rem 0.35rem;
  line-height: 1;
  caret-color: var(--color-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  /* Strip native number-input UI */
  -moz-appearance: textfield;
  appearance: textfield;
}
.mc-score-input::-webkit-inner-spin-button,
.mc-score-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.mc-score-input::placeholder {
  color: var(--text-muted);
  opacity: 0.55;
}
.mc-score-input:hover:not(:disabled):not([readonly]) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.mc-score-input:focus {
  outline: none;
  background: rgba(124, 58, 237, 0.18);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.mc-score-input:disabled,
.mc-score-input[readonly] {
  cursor: not-allowed;
  background: transparent;
  border-color: transparent;
  color: var(--text-primary);
  opacity: 0.85;
}
@media (max-width: 767.98px) {
  .mc-score-input {
    font-size: var(--fs-2xl);
    width: 2.8ch;
    min-width: 2.8ch;
    min-height: 2.2rem;
    padding: 0.25rem 0.3rem;
  }
}

/* ── Static (non-editable) score numbers ────────────────────────── */
.mc-score-static {
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  padding: 0 0.2rem;
  letter-spacing: -0.01em;
}
.mc-score-static--big {
  font-size: calc(var(--fs-3xl) * 1.15);
}
.mc-score-static--muted {
  color: var(--text-muted);
  opacity: 0.7;
}
@media (max-width: 767.98px) {
  .mc-score-static { font-size: var(--fs-2xl); }
  .mc-score-static--big { font-size: var(--fs-3xl); }
}

/* Bigger VS for finished/scaled state */
.mc-vs--big {
  font-size: var(--fs-3xl);
}
@media (max-width: 767.98px) {
  .mc-vs--big { font-size: var(--fs-2xl); }
}

/* ── Actual (real) score chip — rendered in the card top row ───── */
.mc-actual {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
}
.mc-actual--exact {
  color: var(--tier-exact-fg);
  background: var(--tier-exact-bg);
  border-color: var(--tier-exact-bd);
}
.mc-actual--outcome {
  color: var(--tier-outcome-fg);
  background: var(--tier-outcome-bg);
  border-color: var(--tier-outcome-bd);
}
.mc-actual--wrong {
  color: var(--tier-wrong-fg);
  background: var(--tier-wrong-bg);
  border-color: var(--tier-wrong-bd);
}
.mc-actual--live {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}
.mc-actual--neutral,
.mc-actual--dnf {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}

/* ── Settlement P/L badge (top-right, finished matches only) ───── */
.mc-net-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  margin-left: auto;
}
/* Gain — neon green (reuses T1 Exact Score theme tokens) */
.mc-net-badge.badge-profit {
  color: var(--tier-exact-fg);
  background: var(--tier-exact-bg);
  border-color: var(--tier-exact-bd);
}
/* Loss — red */
.mc-net-badge.badge-loss {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.35);
}
/* Flat — net zero (rare: no charge, no payout) */
.mc-net-badge.badge-flat {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}

/* ── Inline form message slot (validation / network errors) ────── */
.mc-center-form .pg-pred-form__msg {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-align: center;
  min-height: 0;
}
.mc-center-form .pg-pred-form__msg:empty { display: none; }

/* ── Block click-through from form interior to card-level <article> ── */
.mc-center input,
.mc-center button,
.mc-center label {
  position: relative;
  z-index: 2;
}

/* ── Top row: fit to content ─────── */
.mc-card__top {
  min-height: 0;
}


/* =============================================================================
   MOBILE OPTIMISATION  (phones ≤ 767.98px)
   - Cut backdrop-filter cost (blur is the #1 scroll-jank source on phones).
     The match feed can paint 20 blurred cards at once; drop their blur and
     compensate with a more opaque surface so it still reads as a solid card.
   - Bigger, finger-friendly tap targets on the filter controls.
   ============================================================================= */
@media (max-width: 767.98px) {
  /* Per-card blur off (feed paints many at once) — opaque bg instead. */
  .mc-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(18, 8, 28, 0.94);
  }

  /* Large glass surfaces: lighter blur instead of 16px. */
  .card-glass {
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    background: rgba(15, 7, 25, 0.86);
  }

  /* Filter controls: ≥44px touch height. */
  .mc-combo__input,
  .mc-filter-date,
  .mc-filter-btn {
    min-height: 44px;
  }
  .mc-combo__opt {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}


/* ─────────────────────────────────────────────────────────────
   Leaderboard view toggle (Rankings ⇄ Crossboard) + Crossboard
   ───────────────────────────────────────────────────────────── */
.lb-view-toggle-wrap { text-align: center; margin-bottom: 16px; }
.lb-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lb-view-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 7px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.lb-view-toggle__btn:hover { color: #fff; }
.lb-view-toggle__btn.is-active {
  background: var(--color-energy, #ffd24a);
  color: #0a1929;
}
/* Progressive enhancement: only hide the inactive panel when JS is present.
   Without JS, .js is never set and both panels render (stacked, reachable). */
html.js .lb-view--js-hidden { display: none; }

.cb-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling on iOS without momentum scroll jank */
  scroll-behavior: auto;
  /* Make this a container so children can size relative to it! */
  container-type: inline-size;
}
.cb-table {
  border-collapse: separate;
  border-spacing: 0;
  /* Let the table fill the scroll container but never force overflow */
  width: max-content;
  min-width: 100%;
  font-size: 1.05rem;
  table-layout: fixed;
}
.cb-th, .cb-td {
  padding: 13px 11px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--card-border);
}
/* Match columns: fluid width — fit 8 per container viewport but never go below 58px */
.cb-th--match {
  width: clamp(58px, calc((100cqw - 144px) / 8), 110px);
  min-width: 58px;
}
.cb-td:not(.cb-sticky-rank):not(.cb-sticky-name) {
  width: clamp(58px, calc((100cqw - 144px) / 8), 110px);
  min-width: 58px;
}
/* Rank column — locked width so the sticky Name column never overlaps it */
.cb-th--rank, .cb-td--rank {
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding-left: 4px;
  padding-right: 4px;
}
/* Name column — flexible but constrained */
.cb-th--name,
.cb-td--name {
  min-width: 100px;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-th {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  vertical-align: bottom;
  /* Use solid background for headers so scrolling text doesn't bleed through */
  background: #14081e;
}
.cb-th--match { line-height: 1.3; }
.cb-match-teams {
  display: block;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.cb-match-vs { opacity: 0.4; margin: 0 3px; }
.cb-match-score {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0;
  color: #f5c451;
}
/* rank width now set above via fluid rules */
.cb-th--name, .cb-td--name { text-align: left; }
.cb-td--rank { font-variant-numeric: tabular-nums; }
.cb-td--rank .font-mono { color: var(--text-muted); font-size: var(--fs-lg); }
.cb-td--name { font-family: var(--font-ui); }
.cb-player-link { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-lg); }
.cb-you {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--color-primary);
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}

.cb-cell { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.1rem; }
/* Bold the winners (green/cyan), dim the misses (red), grey the live picks. */
.cb-cell--exact {
  color: var(--color-success);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(0, 200, 83, 0.4);
}
.cb-cell--outcome {
  color: var(--color-live);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.32);
}
.cb-cell--wrong { color: rgba(255, 255, 255, 0.38); font-weight: 500; }
.cb-cell--live { color: rgba(255, 255, 255, 0.5); font-weight: 600; font-style: italic; }
.cb-cell--dnf  { color: rgba(255, 255, 255, 0.18); }
/* Faint tile tint behind the scoring cells, echoing the tier colors. */
td.cb-cell--exact   { background: rgba(0, 200, 83, 0.09); }
td.cb-cell--outcome { background: rgba(0, 229, 255, 0.06); }

.cb-row:hover { background: rgba(255, 255, 255, 0.03); }

/* Clickable name reuses .md-table__player (royal-blue, lavender hover). */
.cb-player-link { text-decoration: none; transition: color 0.15s ease; }
.cb-player-link:hover { text-decoration: underline; }

/* Live match header: red score + pulsing dot. */
.cb-th--live .cb-match-score--live { color: #ff6b6b; }
.cb-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 6px rgba(255, 77, 77, 0.85);
  vertical-align: middle;
  animation: cb-live-pulse 1.4s ease-in-out infinite;
}
@keyframes cb-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .cb-live-dot { animation: none; } }

/* ── Mobile crossboard: tighter padding + smaller text ── */
@media (max-width: 640px) {
  .cb-th, .cb-td {
    padding: 8px 5px;
  }
  /* Allow match columns to shrink down to 48px on mobile to fit more on screen */
  .cb-th--match { width: clamp(48px, calc((100vw - 124px) / 8), 80px); min-width: 48px; }
  .cb-td:not(.cb-sticky-rank):not(.cb-sticky-name) { width: clamp(48px, calc((100vw - 124px) / 8), 80px); min-width: 48px; }
  
  .cb-table {
    font-size: 0.9rem;
  }
  .cb-cell {
    font-size: 0.88rem;
  }
  /* Let name column shrink harder on phones */
  .cb-td--name,
  .cb-th--name {
    min-width: 80px;
    max-width: 120px;
  }
  /* Rank column must stay EXACTLY the same width (44px) so left: 44px still works */
  .cb-th--rank, .cb-td--rank {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
  }
  /* Player name link: clip overflow cleanly */
  .cb-player-link {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
  /* Match column header: shrink team names */
  .cb-match-teams {
    font-size: 0.78rem;
    letter-spacing: 0;
  }
  .cb-match-score {
    font-size: 0.85rem;
  }
}

/* Sticky identity columns — opaque wine so rows occlude while scrolling. */
.cb-sticky-rank,
.cb-sticky-name {
  position: sticky;
  z-index: 2;
  background: #1b0c27; /* solid */
}
.cb-sticky-rank { left: 0; }
.cb-sticky-name { left: 44px; box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.55); }
.cb-th.cb-sticky-rank,
.cb-th.cb-sticky-name { z-index: 3; background: #150920; }

/* Self row — purple wash (matches .pg-leaderboard__self). */
.pg-leaderboard__self.cb-row { background-color: rgba(124, 58, 237, 0.15); }
/* Make sure the sticky columns in the self row are fully opaque so nothing bleeds through */
.pg-leaderboard__self .cb-sticky-rank,
.pg-leaderboard__self .cb-sticky-name { background: #2c1642; }

/* Podium left accent on the sticky rank cell. */
.cb-row--gold   .cb-sticky-rank { box-shadow: inset 3px 0 0 rgba(255, 210, 0, 0.6); }
.cb-row--silver .cb-sticky-rank { box-shadow: inset 3px 0 0 rgba(192, 192, 192, 0.5); }
.cb-row--bronze .cb-sticky-rank { box-shadow: inset 3px 0 0 rgba(205, 127, 50, 0.5); }

/* ─────────────────────────────────────────────────────────────
   Standings readability — near-opaque cards + higher-contrast text.
   Scoped to the leaderboard page so the rest of the site is unchanged.
   ───────────────────────────────────────────────────────────── */
.lb-page-wrap .card-glass { background: rgba(16, 8, 26, 0.94); }

/* Brighter player names on both views (royal blue was low on wine). */
.lb-page-wrap .md-table__player        { color: #86abff; }
.lb-page-wrap .md-table__player:hover  { color: #c4b5fd; }

/* Crossboard contrast */
.lb-page-wrap .cb-th { color: rgba(255, 255, 255, 0.72); background: rgba(10, 4, 18, 0.92); }
.lb-page-wrap .cb-match-teams         { color: rgba(255, 255, 255, 0.9); }
.lb-page-wrap .cb-td--rank .font-mono { color: rgba(255, 255, 255, 0.6); }
.lb-page-wrap .cb-cell--wrong { color: rgba(255, 255, 255, 0.7); font-style: normal; }
.lb-page-wrap .cb-cell--live  { color: rgba(255, 255, 255, 0.85); font-style: normal; }
.lb-page-wrap .cb-cell--dnf   { color: rgba(255, 255, 255, 0.4); }
.cb-sticky-rank, .cb-sticky-name              { background: #1c0d29; }
.cb-th.cb-sticky-rank, .cb-th.cb-sticky-name  { background: #100617; }
.pg-leaderboard__self .cb-sticky-rank,
.pg-leaderboard__self .cb-sticky-name         { background: #2c1547; }

/* Rankings table contrast */
.lb-page-wrap .pg-leaderboard__th    { color: rgba(255, 255, 255, 0.72); }
.lb-page-wrap .pg-leaderboard__stat  { color: rgba(255, 255, 255, 0.78); }
.lb-page-wrap .font-mono.text-muted  { color: rgba(255, 255, 255, 0.6); }

/* Rank-movement indicator (Trend column): ▲ up / ▼ down / – unchanged. */
.lb-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1;
}
.lb-delta__arrow { font-size: 0.82em; }
.lb-delta--up   { color: var(--color-success); }
.lb-delta--down { color: #FF6B6B; }
.lb-delta--same { color: rgba(255, 255, 255, 0.55); font-weight: 600; }

/* Upcoming (not-yet-started) matches on the crossboard. */
.cb-match-score--upcoming { color: var(--text-muted); font-weight: 600; font-size: var(--fs-xs); }
.cb-cell--locked   { color: rgba(255, 255, 255, 0.16); }   /* no pick yet */
.cb-cell--has-pred { color: rgba(255, 255, 255, 0.35); letter-spacing: 0.06em; } /* predicted, hidden */
.cb-cell--pending  { color: rgba(255, 255, 255, 0.5); font-style: italic; } /* viewer's own pending pick */

/* Columns fill the card and stay comfortable; scroll only when truly narrow. */
.cb-th--match, .cb-cell { min-width: 58px; }
.cb-td--name, .cb-th--name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }

/* Long display names truncate with an ellipsis instead of overflowing the
   leaderboard row — most aggressive on narrow / mobile widths. */
.lb-page-wrap .pg-leaderboard__player-link {
  display: inline-block;
  max-width: min(52vw, 360px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}