:root {
    /* ── Brand Palette ── */
    --gold-bright: #d4af37;
    --gold-light: #f0d060;
    --gold-mid: #b8860b;
    --gold-deep: #7a5800;
    --gold-faint: #3a2c00;
    /* ── Surface Stack ── */
    --surface-void: #060502;
    --surface-base: #0a0804;
    --surface-card: #100e07;
    --surface-elevated: #181309;
    --surface-overlay: #201a0c;
    --surface-overlay-rgb: 32,26,12;
    /* ── Semantic Colours ── */
    --color-success: #3d9e5f;
    --color-danger: #c93030;
    --color-warning: #d4af37; /* reuse gold */
    --color-info: #3a78c9;
    --success-rgb: 61,158,95;
    --danger-rgb: 201,48,48;
    --info-rgb: 58,120,201;
    --black-rgb: 0,0,0;
    --white-rgb: 255,255,255;
    /* ── Text ── */
    --text-primary: #f5edd4;
    --text-secondary: #a89060;
    --text-muted: #5a4a2a;
    --text-disabled: #382e18;
    --text-on-gold: #060401;
    --text-on-accent: #060401;
    --text-on-danger: #ffffff;
    --text-on-success: #ffffff;
    --color-scheme-mode: dark;
    --inset-highlight: rgba(255,255,255,0.2);

    /* ── Themed Surface/Background Values ── */
    --navbar-bg: rgba(8,6,2,0.92);
    --hero-bg-solid: #070602;
    --hero-radial-secondary: rgba(120,80,0,0.2);
    --hero-radial-tertiary: rgba(60,40,0,0.15);
    --hero-bg-clear: #07060300;
    --card-gradient-start: rgba(18,14,6,1);
    --card-gradient-end: rgba(10,8,3,1);
    --card-gradient-alt-start: rgba(16,12,5,1);
    --card-gradient-alt-end: rgba(10,8,3,1);
    --footer-bg: #030201;
    --ticker-strip-accent: rgba(184,134,11,0.08);
    --section-header-accent: rgba(184,134,11,0.05);

    /* ── Status / Utility Colours ── */
    --status-live: #e03030;
    --status-live-bg: rgba(220,30,30,0.1);
    --status-live-border: rgba(220,30,30,0.3);
    --status-up: #4caf70;
    --status-down: #e04040;
    --rank-silver: #c0c0c0;
    --rank-bronze: #cd7f32;
    --danger-hover-bg: #e03535;
    --danger-shadow: rgba(201,48,48,0.35);
    --success-shadow: rgba(61,158,95,0.35);
    --alert-info-bg: rgba(58,120,201,0.1);
    --alert-info-border: rgba(58,120,201,0.25);
    --alert-danger-bg: rgba(201,48,48,0.1);
    --alert-danger-border: rgba(201,48,48,0.25);
    --alert-success-bg: rgba(61,158,95,0.1);
    --alert-success-border: rgba(61,158,95,0.25);
    --icon-remove-hover: #f7e09a;

    /* ── Theme Assets ── */
    --logo-image: url('/images/logo.svg');
    --logo-fill: #d4af37;
    --logo-default-display: block;
    --logo-custom-display: none;

    /* ── Borders ── */
    --border-faint: var(--accent-soft-10);
    --border-mid: var(--accent-soft-22);
    --border-strong: var(--accent-soft-50);
    --gold-border: var(--border-mid);
    --gold-border-hi: var(--border-strong);
    /* ── Shadows ── */
    --shadow-gold-sm: 0 2px 12px var(--accent-soft-12);
    --shadow-gold-md: 0 4px 30px var(--accent-soft-18);
    --shadow-gold-lg: 0 8px 60px var(--accent-soft-28);
    --shadow-gold: var(--shadow-gold-md);
    --gold-glow: var(--accent-soft-10);
    --accent-rgb: 212,175,55;
    --accent-soft-025: rgba(var(--accent-rgb), 0.025);
    --accent-soft-02: rgba(var(--accent-rgb), 0.02);
    --accent-soft-03: rgba(var(--accent-rgb), 0.03);
    --accent-soft-04: rgba(var(--accent-rgb), 0.04);
    --accent-soft-05: rgba(var(--accent-rgb), 0.05);
    --accent-soft-055: rgba(var(--accent-rgb), 0.055);
    --accent-soft-06: rgba(var(--accent-rgb), 0.06);
    --accent-soft-07: rgba(var(--accent-rgb), 0.07);
    --accent-soft-08: rgba(var(--accent-rgb), 0.08);
    --accent-soft-10: rgba(var(--accent-rgb), 0.10);
    --accent-soft-12: rgba(var(--accent-rgb), 0.12);
    --accent-soft-14: rgba(var(--accent-rgb), 0.14);
    --accent-soft-15: rgba(var(--accent-rgb), 0.15);
    --accent-soft-16: rgba(var(--accent-rgb), 0.16);
    --accent-soft-18: rgba(var(--accent-rgb), 0.18);
    --accent-soft-20: rgba(var(--accent-rgb), 0.20);
    --accent-soft-22: rgba(var(--accent-rgb), 0.22);
    --accent-soft-25: rgba(var(--accent-rgb), 0.25);
    --accent-soft-28: rgba(var(--accent-rgb), 0.28);
    --accent-soft-30: rgba(var(--accent-rgb), 0.30);
    --accent-soft-35: rgba(var(--accent-rgb), 0.35);
    --accent-soft-40: rgba(var(--accent-rgb), 0.40);
    --accent-soft-45: rgba(var(--accent-rgb), 0.45);
    --accent-soft-50: rgba(var(--accent-rgb), 0.50);
    --accent-soft-60: rgba(var(--accent-rgb), 0.60);
    /* ── Radius ── */
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 14px;
    /* ── Motion ── */
    --ease-out: cubic-bezier(0.2,0.8,0.2,1);
    --duration: 0.22s;
    --transition: all var(--duration) var(--ease-out);
    /* ── Typography ── */
    --font-display: 'Bebas Neue', sans-serif;
    --font-ui: 'Barlow Condensed', sans-serif;
    --font-body: 'Barlow', sans-serif;
    --font-copy: var(--font-body);
}

/* ── RESET / BASE ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--surface-void);
    color: var(--text-primary);
    overflow-x: hidden;
    min-height: 100vh;
    cursor: default;
}

    /* Subtle grain texture overlay */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
        opacity: 0.025;
        pointer-events: none;
        z-index: 9999;
    }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
}

.font-display {
    font-family: var(--font-display);
}

.text-gold {
    color: var(--gold-bright) !important;
}

.text-muted-gold {
    color: var(--text-secondary);
}

/* ═══════════════════════════════════
   NAVBAR
═══════════════════════════════════ */
.navbar-gridiron {
    background: var(--navbar-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--gold-border);
    padding: 0.9rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-brand {
    font-family: var(--font-display);
    font-size: 1.9rem;
    letter-spacing: 0.12em;
    color: var(--gold-bright);
    filter: drop-shadow(0 0 12px var(--accent-soft-40));
    text-decoration: none;
}

    .navbar-brand span {
        font-size: 0.55rem;
        letter-spacing: 0.35em;
        display: block;
        color: var(--gold-light);
        margin-top: -6px;
    }

.nav-link-gold {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary) !important;
    padding: 0.5rem 1rem !important;
    transition: var(--transition);
    position: relative;
}

    .nav-link-gold::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 1rem;
        right: 1rem;
        height: 1px;
        background: var(--gold-bright);
        transform: scaleX(0);
        transition: transform 0.25s ease;
    }

    .nav-link-gold:hover {
        color: var(--gold-bright) !important;
    }

        .nav-link-gold:hover::after {
            transform: scaleX(1);
        }

    .nav-link-gold.active {
        color: var(--gold-bright) !important;
    }

        .nav-link-gold.active::after {
            transform: scaleX(1);
        }

.btn-nav-cta {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--gold-mid), var(--gold-bright));
    color: var(--text-on-accent) !important;
    border: none;
    padding: 0.5rem 1.4rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    text-decoration: none;
}

    .btn-nav-cta:hover {
        background: linear-gradient(135deg, var(--gold-bright), var(--gold-light));
        box-shadow: 0 0 20px var(--accent-soft-40);
        transform: translateY(-1px);
    }

.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--status-live);
    background: var(--status-live-bg);
    border: 1px solid var(--status-live-border);
    border-radius: 3px;
    padding: 0.25rem 0.6rem;
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-live);
    animation: livepulse 1.2s ease-in-out infinite;
}

@keyframes livepulse {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: 0.4;
        transform: scale(0.8)
    }
}

/* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 65% 40%, var(--accent-soft-12) 0%, transparent 55%), radial-gradient(ellipse at 10% 80%, var(--hero-radial-secondary) 0%, transparent 50%), radial-gradient(ellipse at 90% 90%, var(--hero-radial-tertiary) 0%, transparent 40%), var(--hero-bg-clear);
    background-color: var(--hero-bg-solid);
}

/* Field lines perspective */
.hero-field {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    overflow: hidden;
}

.hero-field-inner {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient( 90deg, transparent, transparent 79px, var(--accent-soft-055) 79px, var(--accent-soft-055) 80px );
    transform: perspective(600px) rotateX(55deg) translateY(40%);
    transform-origin: bottom center;
}

.hero-field-hlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient( 0deg, transparent, transparent 59px, var(--accent-soft-04) 59px, var(--accent-soft-04) 60px );
    transform: perspective(600px) rotateX(55deg) translateY(40%);
    transform-origin: bottom center;
}

/* Gold diagonal accent */
.hero-slash {
    position: absolute;
    top: -10%;
    right: 5%;
    width: 2px;
    height: 120%;
    background: linear-gradient(180deg, transparent, var(--accent-soft-30) 30%, var(--accent-soft-15) 70%, transparent);
    transform: rotate(15deg);
}

.hero-slash-2 {
    position: absolute;
    top: -10%;
    right: 8%;
    width: 1px;
    height: 120%;
    background: linear-gradient(180deg, transparent, var(--accent-soft-15) 30%, transparent);
    transform: rotate(15deg);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 8rem 0 6rem;
}

.hero-eyebrow {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .hero-eyebrow::before {
        content: '';
        display: block;
        width: 40px;
        height: 1px;
        background: var(--gold-bright);
    }

.hero-headline {
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 9rem);
    line-height: 0.9;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}

    .hero-headline .line-gold {
        color: var(--gold-bright);
        filter: drop-shadow(0 0 25px var(--accent-soft-35));
        display: block;
    }

    .hero-headline .line-white {
        color: var(--text-primary);
        display: block;
    }

.hero-sub {
    font-family: var(--font-copy);
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--text-secondary);
    max-width: 440px;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.btn-primary-gold {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--gold-mid) 0%, var(--gold-bright) 50%, var(--gold-light) 100%);
    color: var(--text-on-accent);
    border: none;
    padding: 0.9rem 2.5rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 20px var(--accent-soft-30), inset 0 1px 0 var(--inset-highlight);
}

    .btn-primary-gold:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 40px var(--accent-soft-50), inset 0 1px 0 var(--inset-highlight);
        background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-light) 100%);
        color: var(--text-on-accent);
    }

.btn-ghost-gold {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: transparent;
    color: var(--gold-bright);
    border: 1px solid var(--gold-border-hi);
    padding: 0.85rem 2rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
}

    .btn-ghost-gold:hover {
        background: var(--gold-glow);
        border-color: var(--gold-bright);
        color: var(--gold-light);
        transform: translateY(-2px);
    }

/* ═══════════════════════════════════
   BOOTSTRAP BUTTON OVERRIDES
   Remap standard .btn-* classes to
   the Gridiron Gold palette so every
   existing btn-primary / btn-secondary
   etc. picks up gold theming site-wide.
═══════════════════════════════════ */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    transition: all var(--duration) var(--ease-out);
}

/* Primary — gold gradient */
.btn-primary {
    background: linear-gradient(135deg, var(--gold-mid), var(--gold-bright)) !important;
    border-color: transparent !important;
    color: var(--text-on-gold) !important;
    box-shadow: 0 3px 14px var(--accent-soft-25);
}

    .btn-primary:hover {
        background: linear-gradient(135deg, var(--gold-bright), var(--gold-light)) !important;
        color: var(--text-on-gold) !important;
        box-shadow: 0 5px 24px var(--accent-soft-45);
        transform: translateY(-2px);
    }

    .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px var(--accent-soft-30);
    }

/* Secondary — subtle gold outline */
.btn-secondary {
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-secondary) !important;
}

    .btn-secondary:hover {
        background: var(--accent-soft-10) !important;
        border-color: var(--gold-bright) !important;
        color: var(--gold-bright) !important;
    }

/* Outline variants */
.btn-outline-primary {
    background: transparent !important;
    border-color: var(--gold-bright) !important;
    color: var(--gold-bright) !important;
}

    .btn-outline-primary:hover {
        background: var(--accent-soft-12) !important;
        border-color: var(--gold-light) !important;
        color: var(--gold-light) !important;
    }

.btn-outline-secondary {
    background: transparent !important;
    border-color: var(--border-strong) !important;
    color: var(--text-secondary) !important;
}

    .btn-outline-secondary:hover {
        background: var(--accent-soft-08) !important;
        border-color: var(--gold-bright) !important;
        color: var(--gold-bright) !important;
    }

/* Danger */
.btn-danger {
    background: var(--color-danger) !important;
    border-color: transparent !important;
    color: var(--text-on-danger) !important;
}

    .btn-danger:hover {
        background: var(--danger-hover-bg) !important;
        box-shadow: 0 4px 18px var(--danger-shadow);
    }

/* Success */
.btn-success {
    background: var(--color-success) !important;
    border-color: transparent !important;
    color: var(--text-on-success) !important;
}

    .btn-success:hover {
        box-shadow: 0 4px 18px var(--success-shadow);
    }

/* Link button */
.btn-link {
    color: var(--gold-bright) !important;
    text-decoration: none;
}

    .btn-link:hover {
        color: var(--gold-light) !important;
    }

/* Prevent standalone buttons from stretching full-width
   inside the flex-column page content container. */
.content > button,
.content > .btn {
    align-self: flex-start;
}

/* ═══════════════════════════════════
   BOOTSTRAP NAV-TABS OVERRIDES
   Remap .nav-tabs / .nav-link to the
   Gridiron Gold palette so all tab
   navigation uses gold theming.
═══════════════════════════════════ */
.nav-tabs {
    border-bottom: 1px solid var(--border-mid) !important;
}

    .nav-tabs .nav-link {
        font-family: var(--font-body);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--text-secondary) !important;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        background: transparent !important;
        padding: 0.6rem 1rem;
        transition: color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
    }

        .nav-tabs .nav-link:hover {
            color: var(--gold-bright) !important;
            border-bottom-color: var(--accent-soft-30) !important;
        }

        .nav-tabs .nav-link.active {
            color: var(--gold-bright) !important;
            border-bottom-color: var(--gold-bright) !important;
            background: transparent !important;
        }

/* Also style .nav-pills if used */
.nav-pills .nav-link {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-xs);
    transition: all var(--duration) var(--ease-out);
}

    .nav-pills .nav-link:hover {
        color: var(--gold-bright) !important;
        background: var(--accent-soft-08) !important;
    }

    .nav-pills .nav-link.active {
        color: var(--text-on-gold) !important;
        background: linear-gradient(135deg, var(--gold-mid), var(--gold-bright)) !important;
    }

/* General anchor/link colour override */
a {
    color: var(--gold-bright);
    transition: color var(--duration) var(--ease-out);
}

    a:hover {
        color: var(--gold-light);
    }

/* ═══════════════════════════════════
   BOOTSTRAP FORM OVERRIDES
   Gold-themed inputs, cards, alerts.
   Native <select> overrides removed —
   all dropdowns use Syncfusion
   SfDropDownList (themed in
   gridiron-gold-syncfusion.css).
═══════════════════════════════════ */

/* Native <input> text fields */
.form-control {
    background-color: var(--surface-elevated) !important;
    border-color: var(--border-mid) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body);
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

/* Bootstrap card overrides */
.card {
    background: var(--surface-card) !important;
    border-color: var(--border-mid) !important;
    color: var(--text-primary) !important;
}

.card-header {
    background: var(--accent-soft-06) !important;
    border-bottom-color: var(--border-mid) !important;
    color: var(--gold-bright) !important;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Alert overrides */
.alert-info {
    background: var(--alert-info-bg) !important;
    border-color: var(--alert-info-border) !important;
    color: var(--text-primary) !important;
}

.alert-danger {
    background: var(--alert-danger-bg) !important;
    border-color: var(--alert-danger-border) !important;
    color: var(--text-primary) !important;
}

.alert-success {
    background: var(--alert-success-bg) !important;
    border-color: var(--alert-success-border) !important;
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════
   BOOTSTRAP ACCORDION OVERRIDES
   Remap default blue accents to the
   current theme palette.
═══════════════════════════════════ */
.accordion {
    --bs-accordion-bg: var(--surface-card);
    --bs-accordion-color: var(--text-primary);
    --bs-accordion-border-color: var(--border-mid);
    --bs-accordion-btn-color: var(--text-primary);
    --bs-accordion-btn-bg: var(--surface-elevated);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem var(--accent-soft-30);
    --bs-accordion-active-bg: var(--accent-soft-08);
    --bs-accordion-active-color: var(--gold-bright);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a89060'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d4af37'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-item {
    border-color: var(--border-mid) !important;
}

.accordion-button {
    font-family: var(--font-body);
    font-weight: 600;
}

    .accordion-button:not(.collapsed) {
        color: var(--gold-bright) !important;
        background-color: var(--accent-soft-08) !important;
        box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--border-mid) !important;
    }

    .accordion-button:focus {
        box-shadow: 0 0 0 0.2rem var(--accent-soft-30) !important;
    }

.accordion-body {
    background: var(--surface-card);
    color: var(--text-primary);
}

/* Global accent colour for browser controls */
:root {
    accent-color: var(--gold-bright);
    color-scheme: var(--color-scheme-mode);
}

/* Hero stats strip */
.hero-stats {
    display: flex;
    gap: 0;
    margin-top: 4rem;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--accent-soft-03);
    backdrop-filter: blur(10px);
    max-width: 520px;
}

.hero-stat {
    flex: 1;
    padding: 1.25rem 1.5rem;
    text-align: center;
    border-right: 1px solid var(--gold-border);
    transition: var(--transition);
}

    .hero-stat:last-child {
        border-right: none;
    }

    .hero-stat:hover {
        background: var(--gold-glow);
    }

.hero-stat-val {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0.05em;
    color: var(--gold-bright);
    filter: drop-shadow(0 0 8px var(--accent-soft-40));
    line-height: 1;
}

.hero-stat-lbl {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ═══════════════════════════════════
   TICKER STRIP
═══════════════════════════════════ */
.ticker-wrap {
    background: linear-gradient(135deg, var(--accent-soft-12), var(--ticker-strip-accent));
    border-top: 1px solid var(--gold-border);
    border-bottom: 1px solid var(--gold-border);
    padding: 0.6rem 0;
    overflow: hidden;
    position: relative;
}

.ticker-label {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--gold-bright);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    z-index: 2;
}

.ticker-track {
    display: flex;
    gap: 3rem;
    animation: ticker 28s linear infinite;
    white-space: nowrap;
    padding-left: 140px;
}

    .ticker-track:hover {
        animation-play-state: paused;
    }

@keyframes ticker {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

.ticker-item {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .ticker-item .team {
        color: var(--text-primary);
    }

    .ticker-item .spread {
        color: var(--gold-bright);
    }

    .ticker-item .up {
        color: var(--status-up);
    }

    .ticker-item .down {
        color: var(--status-down);
    }

.ticker-sep {
    color: var(--gold-deep);
    opacity: 0.6;
}

/* ═══════════════════════════════════
   SECTION STYLES
═══════════════════════════════════ */
.section {
    padding: 5rem 0;
}

.section-alt {
    background: var(--accent-soft-02);
}

.section-eyebrow {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

    .section-eyebrow::before {
        content: '';
        width: 28px;
        height: 1px;
        background: var(--gold-bright);
        flex-shrink: 0;
    }

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.section-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-bright), transparent);
    margin: 1.25rem 0 2rem;
}

/* ═══════════════════════════════════
   MATCHUP CARDS
═══════════════════════════════════ */
.matchup-card {
    background: linear-gradient(160deg, var(--card-gradient-start) 0%, var(--card-gradient-end) 100%);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    height: 100%;
}

    .matchup-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .matchup-card:hover {
        border-color: var(--gold-border-hi);
        box-shadow: var(--shadow-gold);
        /*transform: translateY(-4px);*/
    }

        .matchup-card:hover::before {
            opacity: 1;
        }

.matchup-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.matchup-week {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.matchup-live-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--status-live);
    background: var(--status-live-bg);
    border: 1px solid var(--status-live-border);
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.matchup-upcoming {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--text-muted);
}

.matchup-teams {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.team-side {
    text-align: center;
    width: 38%;
}

.team-city {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.team-abbr {
    font-family: var(--font-display);
    font-size: 2.4rem;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    line-height: 1;
}

.team-record {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 3px;
}

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

.vs-text {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--text-muted);
}

.vs-score {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--gold-bright);
    letter-spacing: 0.1em;
    filter: drop-shadow(0 0 8px var(--accent-soft-40));
}

.odds-strip {
    display: flex;
    gap: 0.5rem;
    border-top: 1px solid var(--accent-soft-10);
    padding-top: 1rem;
}

.odds-btn {
    flex: 1;
    background: var(--accent-soft-06);
    border: 1px solid var(--accent-soft-15);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

    .odds-btn:hover, .odds-btn.selected {
        background: var(--accent-soft-15);
        border-color: var(--gold-bright);
    }

.odds-type {
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
}

.odds-val {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--gold-bright);
    letter-spacing: 0.05em;
}

/* ═══════════════════════════════════
   LEADERBOARD
═══════════════════════════════════ */
.leaderboard-card {
    background: linear-gradient(160deg, var(--card-gradient-start), var(--card-gradient-end));
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.lb-header {
    background: linear-gradient(135deg, var(--accent-soft-10), var(--section-header-accent));
    border-bottom: 1px solid var(--gold-border);
    padding: 1.2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lb-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    color: var(--gold-bright);
}

.lb-period {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lb-row {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid var(--accent-soft-06);
    transition: var(--transition);
}

    .lb-row:hover {
        background: var(--accent-soft-04);
    }

    .lb-row.top-1 {
        background: var(--accent-soft-07);
    }

    .lb-row:last-child {
        border-bottom: none;
    }

.lb-rank {
    font-family: var(--font-display);
    font-size: 1.5rem;
    width: 40px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.lb-row.top-1 .lb-rank {
    color: var(--gold-bright);
    filter: drop-shadow(0 0 6px var(--accent-soft-50));
}

.lb-row.top-2 .lb-rank {
    color: var(--rank-silver);
}

.lb-row.top-3 .lb-rank {
    color: var(--rank-bronze);
}

.lb-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-deep), var(--gold-mid));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--gold-light);
    flex-shrink: 0;
    margin-right: 0.75rem;
    border: 1px solid var(--gold-border);
}

.lb-info {
    flex: 1;
}

.lb-name {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

.lb-sub {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.lb-score {
    text-align: right;
}

.lb-pts {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    color: var(--gold-bright);
}

.lb-delta {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--status-up);
    letter-spacing: 0.1em;
}

    .lb-delta.neg {
        color: var(--status-down);
    }

/* ═══════════════════════════════════
   MY PICKS / BET SLIP
═══════════════════════════════════ */
.picks-panel {
    background: linear-gradient(160deg, var(--card-gradient-start), var(--card-gradient-end));
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.picks-header {
    background: linear-gradient(135deg, var(--accent-soft-10), var(--section-header-accent));
    border-bottom: 1px solid var(--gold-border);
    padding: 1.2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.picks-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    color: var(--gold-bright);
}

.picks-count {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--text-on-accent);
    background: var(--gold-bright);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pick-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--accent-soft-06);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: var(--transition);
}

    .pick-item:hover {
        background: var(--accent-soft-03);
    }

.pick-match {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

.pick-type {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 2px;
}

.pick-selection {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gold-bright);
    margin-top: 4px;
    letter-spacing: 0.05em;
}

.pick-odds-val {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--gold-bright);
    text-align: right;
}

.pick-remove {
    font-size: 0.6rem;
    color: var(--text-muted);
    cursor: pointer;
    text-align: right;
    margin-top: 2px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: var(--transition);
}

    .pick-remove:hover {
        color: var(--status-down);
    }

.picks-footer {
    padding: 1.25rem 1.5rem;
    background: var(--accent-soft-04);
}

.picks-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.picks-total-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.picks-total-val {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--gold-bright);
    filter: drop-shadow(0 0 8px var(--accent-soft-40));
}

/* ═══════════════════════════════════
   FEATURES
═══════════════════════════════════ */
.feature-card {
    background: linear-gradient(160deg, var(--card-gradient-alt-start), var(--card-gradient-alt-end));
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    height: 100%;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

    .feature-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .feature-card:hover {
        border-color: var(--gold-border-hi);
        transform: translateY(-5px);
        box-shadow: var(--shadow-gold);
    }

        .feature-card:hover::after {
            opacity: 1;
        }

.feature-icon {
    width: 52px;
    height: 52px;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    background: var(--accent-soft-07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    transition: var(--transition);
}

.feature-card:hover .feature-icon {
    background: var(--accent-soft-14);
    border-color: var(--gold-border-hi);
}

.feature-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

.feature-desc {
    font-family: var(--font-copy);
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--gold-border);
    padding: 4rem 0 2rem;
}

.footer-brand {
    font-family: var(--font-display);
    font-size: 2.5rem;
    letter-spacing: 0.12em;
    color: var(--gold-bright);
    margin-bottom: 0.75rem;
}

.footer-tagline {
    font-family: var(--font-copy);
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--text-muted);
    max-width: 280px;
    line-height: 1.6;
}

.footer-heading {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin-bottom: 1.2rem;
}

.footer-link {
    font-family: var(--font-copy);
    font-size: 0.88rem;
    font-weight: 300;
    color: var(--text-muted);
    text-decoration: none;
    display: block;
    margin-bottom: 0.6rem;
    transition: var(--transition);
}

    .footer-link:hover {
        color: var(--gold-bright);
        padding-left: 4px;
    }

.footer-bottom {
    border-top: 1px solid var(--accent-soft-08);
    padding-top: 1.5rem;
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.footer-legal {
    font-family: var(--font-copy);
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--text-muted);
}

.gambling-warning {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-deep);
    background: var(--accent-soft-06);
    border: 1px solid var(--accent-soft-12);
    padding: 0.35rem 0.8rem;
    border-radius: 3px;
}

/* ═══════════════════════════════════
   UTILITIES / BOOTSTRAP OVERRIDES
═══════════════════════════════════ */
.container {
    max-width: 1240px;
}

/* Page load animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    animation: fadeUp 0.7s ease both;
}

.fade-up-1 {
    animation-delay: 0.1s;
}

.fade-up-2 {
    animation-delay: 0.22s;
}

.fade-up-3 {
    animation-delay: 0.34s;
}

.fade-up-4 {
    animation-delay: 0.46s;
}

.fade-up-5 {
    animation-delay: 0.58s;
}

/* Gold horizontal rule */
.gold-hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-border-hi), transparent);
    margin: 0;
}

/*Wager Remove Selection*/
.icon-remove {
    display: inline-block;
    width: 31px;
    height: 31px;
    background-color: var(--gold-bright); /* Controlled by your theme */
    /* The SVG is encoded into the mask */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

    /* Hover State */
    .icon-remove:hover {
        /* Brighten the icon slightly */
        background-color: var(--icon-remove-hover);
        /* Add a subtle sharp glow directly to the icon lines */
        filter: drop-shadow(0 0 2px var(--accent-soft-60));
    }

        .icon-remove:hover::after {
            opacity: 0.6; /* Reveal the soft background glow */
        }

/* Container using your Surface Stack */
.twl-content-area {
    padding-top: 5px;
}

.twl-segmented-control {
    position: relative;
    display: flex;
    background: var(--surface-void); /* Deepest black from your theme */
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--surface-overlay);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.9);
    margin-bottom: 0rem;
}

.twl-nav-btn {
    flex: 1;
    z-index: 2;
    background: transparent;
    border: none;
    color: var(--gold-mid); /* Muted gold for inactive */
    padding: 10px 0;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}

    .twl-nav-btn.active {
        color: var(--surface-void); /* Dark text on gold background */
    }

/* The Glowing Gold Glider */
.twl-glider {
    position: absolute;
    height: calc(100% - 8px);
    top: 4px;
    left: 0;
    background: linear-gradient(180deg, var(--gold-light), var(--gold-mid));
    box-shadow: 0 0 15px var(--gold-faint);
    border-radius: 6px;
    z-index: 1;
    /* Using a smooth "snappy" transition */
    transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* Optional: Slight hover effect on buttons */
.twl-nav-btn:hover:not(.active) {
    color: var(--gold-bright);
}

/* Sticky wrapper when SegmentedToggle includes a header */
.twl-nav-wrapper--with-header {
    position: sticky;
    top: var(--site-header-offset, 5.25rem);
    z-index: 150;
    background: var(--surface-base);
    margin-top: -1.1rem;
    padding-top: 1.1rem;
    padding-bottom: 0.0rem;
    border-bottom: 1px solid var(--border-faint);
}

@media (max-width: 767.98px) {
    .twl-segmented-control {
        flex-wrap: wrap;
        gap: 4px;
    }

    .twl-nav-btn {
        flex: 0 0 auto;
        padding: 8px 12px;
        font-size: 0.7rem;
    }

    .twl-glider {
        display: none;
    }

    .twl-nav-btn.active {
        background: linear-gradient(180deg, var(--gold-light), var(--gold-mid));
        border-radius: 6px;
    }

    .twl-nav-wrapper--with-header {
        top: var(--site-header-offset, 4rem);
    }
}