/* ============================================================
   CS2BET.IO — Main Stylesheet
   HLTV-inspired dark esports theme
   Fonts: Rajdhani (headings/UI), Inter (body), JetBrains Mono (scores/code)
   ============================================================ */

/* Screen-reader only — SEO H1 tags hidden visually */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

:root {
    color-scheme: dark;
    /* Dark palette — 6 distinct layers so cards/sections/hover states are clearly readable.
       Base is the canvas, each step up adds ~6-8 luminance units for clear separation. */
    --bg-base:      #0b0c10;   /* page canvas (darker than before) */
    --bg-surface:   #191b23;   /* primary card surface (clearly lifted from base) */
    --bg-card:      #1f222c;   /* cards that sit on top of surface */
    --bg-elevated:  #2a2e3a;   /* section headers, inputs, inner tables */
    --bg-hover:     #353a48;   /* hover / active state */

    --accent:       #ff6600;
    --accent-dim:   rgba(255,102,0,0.15);
    --accent-hover: #ff7a1a;

    --green:   #00c853;
    --red:     #ef4444;
    --yellow:  #f5c518;
    --blue:    #3b82f6;

    --text-primary:   #f0f0f0;
    --text-secondary: #a0a0b0;
    --text-muted:     #606070;
    --text-accent:    #ff6600;

    --border:        rgba(255,255,255,0.11);   /* bumped from .08 so card edges show */
    --border-accent: rgba(255,102,0,0.35);

    --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03);
    --shadow-md: 0 4px 16px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.65);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --font-display: 'Rajdhani', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    --header-h:   96px;
    --marquee-h:  48px;
    --subheader-h: 0px;     /* subheader removed; height kept as token for legacy --sky-top calc */
    --header-bg:  #13151c;    /* lifted from page canvas so the header "sits" on top */
    --marquee-bg: #0e1015;    /* slightly darker than header = visual hierarchy */
    --subheader-bg: #181a22;  /* between header and canvas */
    --ticker-h:  32px;
    --container: 1240px;
    --sidebar-w: 280px;
}

/* ── Light Theme — crisp, HLTV-inspired white ── */
[data-theme="light"] {
    color-scheme: light;
    --bg-base:      #f0f1f3;
    --bg-surface:   #f7f7f8;
    --bg-elevated:  #f0f1f3;
    --bg-hover:     #e8e9ec;
    --bg-card:      #ffffff;

    --accent:       #e55c00;
    --accent-dim:   rgba(229,92,0,0.08);
    --accent-hover: #cc5200;

    --green:   #16a34a;
    --red:     #dc2626;
    --yellow:  #b45309;
    --blue:    #2563eb;

    --text-primary:   #1a1a1f;
    --text-secondary: #52525b;
    --text-muted:     #a1a1aa;
    --text-accent:    #e55c00;

    --border:        rgba(0,0,0,0.09);
    --border-accent: rgba(229,92,0,0.25);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 2px 8px rgba(0,0,0,.08);
    --shadow-lg: 0 4px 16px rgba(0,0,0,.10);

    --header-bg:    #ffffff;
    --marquee-bg:   #1a1a1e;
    --subheader-bg: #ffffff;
}

/* ── Light-mode component overrides ── */
[data-theme="light"] body{color-scheme:light}

/* Header & Navigation */
[data-theme="light"] .site-header{border-bottom:1px solid rgba(0,0,0,.07);box-shadow:0 1px 3px rgba(0,0,0,.04);backdrop-filter:none;background:#fff}
[data-theme="light"] .subheader-bar{background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
[data-theme="light"] .nav-link{color:#52525b}
[data-theme="light"] .nav-link:hover,.nav-link.is-active{color:var(--accent)}
[data-theme="light"] .nav-dropdown__menu{background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 4px 20px rgba(0,0,0,.1)}
[data-theme="light"] .dropdown-link{color:#52525b}
[data-theme="light"] .dropdown-link:hover{background:#f5f5f5;color:var(--accent)}
[data-theme="light"] .primary-nav.is-open{background:#fff}
[data-theme="light"] .subheader-tab{color:#71717a}
[data-theme="light"] .subheader-tab:hover{color:#1a1a1f}
[data-theme="light"] .subheader-tab.is-active{color:var(--accent);border-bottom-color:var(--accent)}
[data-theme="light"] .sh-btn--ghost{color:#52525b;border-color:rgba(0,0,0,.12);background:#fff}
[data-theme="light"] .sh-btn--ghost:hover{background:#f5f5f5;color:#1a1a1f}

/* Logo — invert to black */
[data-theme="light"] .site-logo__img{filter:brightness(0) saturate(100%)}
[data-theme="light"] .footer-logo-img{filter:brightness(0) saturate(100%)}
[data-theme="light"] .more-overlay__logo img{filter:brightness(0) saturate(100%)}

/* Search */
[data-theme="light"] .search-wrap{background:#f5f5f5;border:1px solid rgba(0,0,0,.1)}
[data-theme="light"] .search-input{color:#1a1a1f}
[data-theme="light"] .search-input::placeholder{color:#a1a1aa}
[data-theme="light"] .search-suggestions{background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 30px rgba(0,0,0,.12)}

/* Breadcrumbs & Page Headers */
[data-theme="light"] .breadcrumb-bar{background:transparent;border-bottom:0}
[data-theme="light"] .page-header-bar{background:transparent}
[data-theme="light"] .page-header-bar .container{background:#fff;border-color:rgba(0,0,0,.06)}

/* Cards — clean white with subtle borders */
[data-theme="light"] .match-card{background:#fff;border-color:rgba(0,0,0,.07);box-shadow:0 1px 2px rgba(0,0,0,.03)}
[data-theme="light"] .match-card:hover{background:#fff;border-color:rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.06)}
[data-theme="light"] .news-card{background:#fff;border-color:rgba(0,0,0,.07)}
[data-theme="light"] .news-card:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(0,0,0,.08)}
[data-theme="light"] .guide-card{background:#fff;border-color:rgba(0,0,0,.07)}
[data-theme="light"] .guide-card:hover{background:#fafafa;border-color:var(--accent)}
[data-theme="light"] .prediction-card{background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.04)}
[data-theme="light"] .prediction-card:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.06)}
[data-theme="light"] .sidebar-widget{background:#fff;border-color:rgba(0,0,0,.07)}
[data-theme="light"] .legal-card{background:#fff;border-color:rgba(0,0,0,.07)}
[data-theme="light"] .legal-notice{background:#f9f9fa;border-color:rgba(0,0,0,.05)}
[data-theme="light"] .legal-feature{background:#f9f9fa;border-color:rgba(0,0,0,.05)}
[data-theme="light"] .seo-faq details{background:#fff;border-color:rgba(0,0,0,.07)}
[data-theme="light"] .seo-faq summary{color:#1a1a1f;font-weight:600}
[data-theme="light"] .cs2bet-empty{background:#fff}
[data-theme="light"] .tournaments-grid .tournament-card{background:#fff;border-color:rgba(0,0,0,.07)}
[data-theme="light"] .hp-card{background:#fff;border-color:rgba(0,0,0,.07)}

/* Matches section cards */
[data-theme="light"] .matches-section-card{background:#fff;border-color:rgba(0,0,0,.07);box-shadow:0 1px 3px rgba(0,0,0,.04)}
[data-theme="light"] .matches-section-card--live{border-color:rgba(220,38,38,.25);background:linear-gradient(180deg,rgba(220,38,38,.04) 0%,#fff 100%);box-shadow:0 1px 4px rgba(220,38,38,.1)}
[data-theme="light"] .matches-section-card--live .match-card{background:rgba(220,38,38,.02);border-color:rgba(220,38,38,.1)}
[data-theme="light"] .matches-section-card--live .match-card:hover{background:rgba(220,38,38,.04);border-color:rgba(220,38,38,.2)}
[data-theme="light"] .matches-section-header{border-bottom-color:rgba(0,0,0,.05)}
[data-theme="light"] .matches-date-header{background:#f9f9fa}
[data-theme="light"] .matches-event-header{background:#f9f9fa}

/* Homepage match center — light mode */
[data-theme="light"] .hp-mc-section .match-card{border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .hp-mc-section .match-card:hover{background:#fafafa}
[data-theme="light"] .hp-mc-tournament-group + .hp-mc-tournament-group{border-top-color:#e8e8ec}

/* Theme-aware logos — team logos */
.team-logo--light{display:none}
.team-logo--dark{display:inline}
[data-theme="light"] .team-logo--light{display:inline}
[data-theme="light"] .team-logo--dark{display:none}

/* Theme-aware logos — betting provider logos */
.betting-logo--light{display:none}
.betting-logo--dark{display:inline}
[data-theme="light"] .betting-logo--light{display:inline}
[data-theme="light"] .betting-logo--dark{display:none}

/* Filters */
[data-theme="light"] .filter-widget{background:#fff;border-color:rgba(0,0,0,.07)}
[data-theme="light"] .filter-group__toggle{color:#1a1a1f}
[data-theme="light"] .filter-group__body{border-top-color:rgba(0,0,0,.04)}
[data-theme="light"] .filter-option{color:#52525b}
[data-theme="light"] .filter-option:hover{background:#f5f5f5}
[data-theme="light"] .filter-search{background:#f5f5f5;border-color:rgba(0,0,0,.07);color:#1a1a1f}
[data-theme="light"] .filter-preset{background:#f5f5f5;border-color:rgba(0,0,0,.08);color:#52525b}
[data-theme="light"] .filter-preset:hover,.filter-preset.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Tabs */
[data-theme="light"] .tab-bar{background:#f5f5f5;border-color:rgba(0,0,0,.06)}
[data-theme="light"] .tab-btn{color:#71717a}
[data-theme="light"] .tab-btn:hover{color:#1a1a1f}
[data-theme="light"] .tab-btn.is-active{background:#fff;color:#1a1a1f;box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* Buttons */
[data-theme="light"] .btn--ghost{color:#52525b;border-color:rgba(0,0,0,.12);background:#fff}
[data-theme="light"] .btn--ghost:hover{background:#f5f5f5;color:#1a1a1f}
[data-theme="light"] .btn--outline{color:var(--accent);border-color:var(--accent);background:#fff}
[data-theme="light"] .btn--outline:hover{background:var(--accent);color:#fff}
[data-theme="light"] .btn--primary{background:var(--accent);color:#fff}
[data-theme="light"] .matches-view-btn{background:#f5f5f5;border-color:rgba(0,0,0,.08);color:#71717a}
[data-theme="light"] .matches-view-btn--active{background:#fff;color:#1a1a1f;border-color:rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* Entity heroes */
[data-theme="light"] .entity-hero{background:linear-gradient(180deg,#f0f1f3 0%,#f7f7f8 100%)}
[data-theme="light"] .match-hero{background:linear-gradient(180deg,#f0f1f3 0%,#f7f7f8 100%)}
[data-theme="light"] .team-logo{filter:none}

/* Related links */
[data-theme="light"] .related-links{background:#f5f5f5;border-top:1px solid rgba(0,0,0,.05)}
[data-theme="light"] .related-links__card{background:#fff;border-color:rgba(0,0,0,.07)}
[data-theme="light"] .related-links__card:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.06)}
[data-theme="light"] .related-links h2{color:#1a1a1f}

/* Footer */
[data-theme="light"] .site-footer{background:#f0f1f3;border-top:1px solid rgba(0,0,0,.06)}
[data-theme="light"] .footer-bottom{border-top-color:rgba(0,0,0,.06)}
[data-theme="light"] .footer-heading{color:#1a1a1f}
[data-theme="light"] .footer-nav-col a{color:#52525b}
[data-theme="light"] .footer-nav-col a:hover{color:var(--accent)}

/* Brackets & Tournaments */
[data-theme="light"] .bracket-round{background:#fff;border-color:rgba(0,0,0,.05)}
[data-theme="light"] .bracket-match{background:#fff;border-color:rgba(0,0,0,.07)}

/* Mobile */
[data-theme="light"] .mobile-bottom-nav{background:#fff;border-top:1px solid rgba(0,0,0,.07);box-shadow:0 -1px 4px rgba(0,0,0,.04)}
[data-theme="light"] .bottom-nav__item{color:#71717a}
[data-theme="light"] .bottom-nav__item.is-active{color:var(--accent)}
[data-theme="light"] .more-overlay{background:#fff}
[data-theme="light"] .more-overlay__header{border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .more-section__title{color:#a1a1aa}
[data-theme="light"] .more-nav__item{color:#52525b}
[data-theme="light"] .more-nav__item:hover{background:#f5f5f5;color:#1a1a1f}

/* Misc */
[data-theme="light"] .giveaway-float{background:#fff;border-color:rgba(0,0,0,.1);box-shadow:0 4px 20px rgba(0,0,0,.12)}
[data-theme="light"] .responsible-gambling-disclaimer{background:rgba(229,92,0,.04);border-color:rgba(229,92,0,.12)}
[data-theme="light"] .page-btn{background:#fff;border-color:rgba(0,0,0,.1);color:#52525b}
[data-theme="light"] .page-btn:hover{background:#f5f5f5;color:#1a1a1f}
[data-theme="light"] .page-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Prediction widgets */
[data-theme="light"] .prediction-widget{background:#fff;border-color:rgba(0,0,0,.07)}
[data-theme="light"] .prediction-widget__header{background:#f9f9fa;border-bottom-color:rgba(0,0,0,.05)}

/* Notification bell — header */
.header-push-bell{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);color:var(--text-secondary);transition:color .15s,background .15s;cursor:pointer;flex-shrink:0;background:none;border:none;padding:0;-webkit-appearance:none;appearance:none;position:relative}
.header-push-bell:hover{color:var(--accent);background:var(--accent-dim)}
.header-push-bell.pwa-push--active{color:var(--accent)}
.header-push-bell.pwa-push--active::after{content:'';position:absolute;top:6px;right:6px;width:7px;height:7px;background:var(--green,#34c759);border-radius:50%;border:2px solid var(--header-bg,#0d0d0f)}

/* Push toast notification */
.push-toast{position:fixed;top:calc(var(--header-h,96px) + 16px);right:16px;z-index:10003;background:var(--bg-card,#1c1c1e);border:1px solid var(--border);border-radius:12px;padding:14px 18px;box-shadow:0 8px 32px rgba(0,0,0,.4);transform:translateX(120%);transition:transform .35s cubic-bezier(.4,0,.2,1);max-width:340px;display:flex;align-items:center;gap:12px;pointer-events:auto}
.push-toast--show{transform:translateX(0)}
.push-toast__icon{flex-shrink:0;color:var(--accent)}
.push-toast__text{font-size:13px;color:var(--text-secondary);line-height:1.4}
.push-toast__text strong{display:block;font-size:14px;color:var(--text-primary);margin-bottom:2px}

/* Theme toggle button */
.theme-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);color:var(--text-secondary);transition:color .15s,background .15s;cursor:pointer;flex-shrink:0}
.theme-toggle:hover{color:var(--accent);background:var(--accent-dim)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme="light"] .theme-toggle .icon-sun{display:block}
[data-theme="light"] .theme-toggle .icon-moon{display:none}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg-base);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font:inherit}
code{font-family:var(--font-mono)}

/* ── Layout ── */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.page-layout{display:grid;grid-template-columns:1fr var(--sidebar-w);gap:24px;padding-top:24px;padding-bottom:40px;align-items:start}
.content-main{min-width:0}
.content-sidebar{min-width:0}
.py-lg{padding-top:40px;padding-bottom:40px}

/* ============================================================
   HEADER
   ============================================================ */
/* ============================================================
   HEADER SYSTEM v3 — Marquee + Main + Subheader
   ============================================================ */

/* ── Operator bar (replaces marquee) ── */
.marquee-bar{display:flex;align-items:center;height:var(--marquee-h);background:var(--bg-surface);border-bottom:1px solid var(--border);overflow:hidden;position:relative;z-index:1001}
.live-dot-xs{display:inline-block;width:5px;height:5px;background:var(--red);border-radius:50%;animation:livePulse 1.5s ease-in-out infinite;flex-shrink:0}
.marquee-viewport{flex:1;overflow:hidden;display:flex;align-items:center}
.marquee-track{display:flex;align-items:center;gap:0;white-space:nowrap;animation:marqueeScroll 40s linear infinite;will-change:transform}
.marquee-track:hover{animation-play-state:paused}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
.marquee-op{display:inline-flex;align-items:center;gap:8px;padding:6px 20px;text-decoration:none;flex-shrink:0;transition:opacity .15s}
.marquee-op:hover{opacity:.7}
.marquee-op__logo{height:24px;width:auto;max-width:80px;object-fit:contain}
.marquee-op__offer{font-size:11px;font-weight:600;color:var(--accent);white-space:nowrap;font-family:var(--font-display)}

/* ── Main header ── */
.site-header{position:sticky;top:0;z-index:1000;height:var(--header-h);background:var(--header-bg);border-bottom:1px solid var(--border);backdrop-filter:blur(12px)}
.header-inner{display:flex;align-items:center;height:100%;gap:36px}

/* ── Logo ── */
.site-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.site-logo:hover{opacity:.85}
.site-logo__img{height:36px;width:auto;object-fit:contain;filter:brightness(1);display:block}
/* Footer logo */
.footer-logo-link{display:inline-flex;align-items:center;margin-bottom:10px}
.footer-logo-img{height:28px;width:auto;object-fit:contain;opacity:.9}

.primary-nav{display:flex;align-items:center;gap:1px;flex:1}
.nav-link{display:inline-flex;align-items:center;gap:5px;padding:9px 15px;font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.3px;color:var(--text-secondary);border-radius:var(--radius-sm);transition:color .15s,background .15s;white-space:nowrap;cursor:pointer;background:transparent;border:none}
.nav-link:hover,.nav-link.is-active{color:var(--text-primary);background:var(--bg-hover)}
.nav-link.is-active{color:var(--accent)}
.nav-link--live{color:var(--red);font-weight:700}
.nav-link--live:hover{color:#ff6666;background:rgba(239,68,68,.1)}
.nav-chevron{width:10px;height:6px;flex-shrink:0;opacity:.5;transition:transform .15s}
.nav-dropdown:hover .nav-chevron{transform:rotate(180deg)}

.nav-dropdown{position:relative}
.nav-dropdown__trigger{padding:6px 10px;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-secondary);border-radius:var(--radius-sm);transition:all .15s}
.nav-dropdown__trigger:hover{color:var(--text-primary);background:var(--bg-hover)}
.nav-dropdown__menu{display:none;position:absolute;top:calc(100% + 0px);left:0;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:6px;min-width:140px;z-index:1100;box-shadow:var(--shadow-lg)}
.nav-dropdown{position:relative;z-index:1100}/* parent must own a stacking context so dropdown clears any z:1000 siblings (header itself) */
.nav-dropdown:hover .nav-dropdown__menu{display:block}
.dropdown-link{display:block;padding:8px 12px;font-size:13px;color:var(--text-secondary);border-radius:var(--radius-sm);transition:all .12s}
.dropdown-link:hover{color:var(--text-primary);background:var(--bg-hover)}

.header-live-badge{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted);margin-left:auto;white-space:nowrap}
#live-match-count{color:var(--red);font-weight:700}

.mobile-menu-btn{display:none;flex-direction:column;gap:5px;padding:8px;min-width:44px;min-height:44px;align-items:center;justify-content:center;cursor:pointer}
.mobile-menu-btn span{display:block;width:22px;height:2px;background:var(--text-secondary);border-radius:2px}

/* ============================================================
   LIVE TICKER
   ============================================================ */
/* kept for backward compat — actual ticker replaced by marquee */
.live-ticker-bar{display:none}
.ticker-label,.ticker-scroll,.ticker-item,.ticker-score{display:none}

/* ============================================================
   LIVE INDICATORS
   ============================================================ */
.live-dot,.live-pulse{display:inline-block;width:8px;height:8px;background:var(--red);border-radius:50%;animation:livePulse 1.5s ease-in-out infinite}
.live-dot-sm{display:inline-block;width:6px;height:6px;background:var(--red);border-radius:50%;animation:livePulse 1.5s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.3px;transition:all .15s;cursor:pointer;white-space:nowrap}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-hover)}
.btn--outline{background:transparent;color:var(--accent);border:1px solid var(--border-accent)}
.btn--outline:hover{background:var(--accent-dim)}
.btn--ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}
.btn--ghost:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn--sm{padding:5px 12px;font-size:12px}
.btn--full{width:100%;justify-content:center}

/* ============================================================
   PAGE HEADER BAR
   ============================================================ */
/* ── Page Header Bar (constrained to container width to clear takeover banners) ──
   Background is now applied to the inner .container only — so the bar reads as a
   "card" floating on the page background, NOT as a full-bleed strip that would
   cover the takeover wallpapers on the left/right sides of the viewport.            */
.page-header-bar {
    background: transparent;
    border-bottom: 0;
    /* Tightened — was 24/0/20 + 28 margin = 72px combined wasted space.
       Now matches the rest of the dashboard's 16px card-rhythm. */
    padding: 12px 0 0;
    margin-bottom: 16px;
}
.page-header-bar .container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    box-shadow: var(--shadow-sm);
}
/* Top row: H1 + optional nav actions */
.page-header-bar__top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.page-header-bar h1 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .5px;
    margin: 0;
    line-height: 1.25;
}
.page-header-bar__meta {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}
.page-header-bar__actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
.page-header-bar--live h1 { color: var(--red); }
.live-count-badge{padding:4px 12px;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);border-radius:20px;font-size:12px;color:var(--red);font-weight:600}

/* SEO intro inside header */
.page-header-bar .seo-intro {
    margin: 10px 0 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    max-width: 720px;
}
.page-header-bar .seo-intro p {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}

/* Social share row */
.page-header-bar__share {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.page-header-bar__share-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-right: 4px;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.share-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--text);
}
.share-btn svg { width: 15px; height: 15px; }
.share-btn--x:hover { color: #fff; background: #000; border-color: #333; }
.share-btn--ig:hover { color: #fff; background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: #dc2743; }
.share-btn--wa:hover { color: #fff; background: #25d366; border-color: #25d366; }
.share-btn--tg:hover { color: #fff; background: #0088cc; border-color: #0088cc; }

/* ============================================================
   HERO BANNER (Homepage)
   ============================================================ */
.hero-banner{background:linear-gradient(135deg,#0d0d0f 0%,#15101a 50%,#0d0d0f 100%);border-bottom:1px solid var(--border);padding:40px 0;position:relative;overflow:hidden}
.hero-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(255,102,0,.06) 0%,transparent 60%);pointer-events:none}
.hero-content{display:flex;align-items:center;justify-content:space-between;gap:24px}
.hero-text h1{font-family:var(--font-display);font-size:36px;font-weight:700;letter-spacing:1px;background:linear-gradient(135deg,#f0f0f0 0%,#ff6600 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-text p{color:var(--text-secondary);margin-top:6px;font-size:14px}
.hero-stats{display:flex;gap:32px}
.hero-stat{text-align:center}
.stat-number{display:block;font-family:var(--font-mono);font-size:32px;font-weight:700;color:var(--accent)}
.stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}

/* ============================================================
   TAB NAVIGATION
   ============================================================ */
.tab-nav{display:flex;gap:2px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md) var(--radius-md) 0 0;padding:6px}
.tab-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-muted);border-radius:var(--radius-sm);transition:all .15s;letter-spacing:.3px}
.tab-btn:hover{color:var(--text-primary);background:var(--bg-hover)}
.tab-btn.is-active{color:var(--accent);background:var(--accent-dim)}
.tab-badge{background:var(--red);color:#fff;font-size:10px;padding:1px 5px;border-radius:10px;font-weight:700}
.tab-panel{display:none}
.tab-panel.is-active{display:block}

/* ============================================================
   MATCH CARDS
   ============================================================ */
.matches-list{display:flex;flex-direction:column;gap:8px}

/* ── Results grouped by day ── */
.results-day { margin-bottom: 24px; }
.results-day:last-child { margin-bottom: 0; }
.results-day__heading {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 10px;
    padding: 8px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    letter-spacing: .3px;
}

/* ── Match Card v2 (vertical team layout, provider odds column) ── */
.match-card{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-left:3px solid transparent;border-radius:var(--radius-md);overflow:hidden;transition:background .15s,border-color .15s,box-shadow .15s;color:var(--text-primary)}
.match-card:hover{background:var(--bg-elevated);border-color:var(--border-accent);border-left-color:var(--accent);box-shadow:var(--shadow-md)}
.match-card--live{border-left-color:var(--red);background:rgba(239,68,68,.03)}
.match-card--live:hover{border-left-color:var(--red);background:rgba(239,68,68,.06)}
.match-card--finished{opacity:.85}
.team-match-wrap--won .match-card{border-left-color:var(--green)}
.team-match-wrap--won .match-card:hover{border-left-color:var(--green)}
.team-match-wrap--lost .match-card{border-left-color:var(--red)}
.team-match-wrap--lost .match-card:hover{border-left-color:var(--red)}

/* meta row */
.match-card__meta{display:flex;align-items:center;gap:6px;padding:7px 14px 5px;font-size:11px;color:var(--text-muted);border-bottom:1px solid var(--border)}
.meta-league-logo{width:13px;height:13px;object-fit:contain;border-radius:2px;flex-shrink:0}
.match-meta-tournament{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.match-format{background:var(--bg-hover);padding:1px 6px;border-radius:3px;font-size:10px;font-weight:700;color:var(--text-muted);font-family:var(--font-display);flex-shrink:0}

/* body: time | teams | odds */
.match-card__body2{display:grid;grid-template-columns:56px 1fr auto;align-items:center;padding:0}

/* time/score column */
.mc2-time{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 10px;border-right:1px solid var(--border);min-height:60px}
.mc2-clock{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text-primary);line-height:1;text-align:center}
.mc2-format{font-size:9px;font-weight:700;color:var(--text-muted);font-family:var(--font-display);text-align:center;letter-spacing:.4px;margin-top:3px}
.mc2-score{display:flex;align-items:center;gap:3px;font-family:var(--font-mono)}
.score-val{font-size:16px;font-weight:700;color:var(--text-secondary);min-width:18px;text-align:center;line-height:1}
.score-val.score--win{color:var(--text-primary)}
.score-sep{color:var(--text-muted);font-size:13px}

/* teams column */
.mc2-teams{display:flex;flex-direction:column;gap:0;padding:0 12px;justify-content:center;min-height:60px;min-width:0}
.mc2-team{display:flex;align-items:center;gap:8px;padding:6px 0}
.mc2-team+.mc2-team{border-top:1px solid rgba(255,255,255,.04)}
.mc2-team--lost .mc2-team-name{opacity:.45}
.mc2-team--lost .team-logo{opacity:.4}
.mc2-team-name{font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* odds column */
.mc2-odds{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 12px;border-left:1px solid var(--border);min-height:60px;min-width:72px;cursor:pointer;transition:background .15s}
.mc2-odds:hover{background:rgba(255,102,0,.06)}
.mc2-odds-logo{display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.mc2-provider-logo{max-width:52px;max-height:18px;object-fit:contain;filter:brightness(.85)}
.mc2-provider-name{font-size:9px;font-weight:700;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase}
.mc2-odds-vals{display:flex;flex-direction:column;gap:2px;width:100%}
.mc2-odd{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent);text-align:center;background:rgba(255,102,0,.08);border-radius:3px;padding:1px 4px;line-height:1.4}

/* footer */
.match-card__footer{display:flex;align-items:center;gap:8px;padding:4px 14px 6px;border-top:1px solid var(--border)}
.match-time-label{font-size:11px;color:var(--text-muted)}

/* ── Status Badges ── */
.status-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;font-family:var(--font-display);padding:2px 7px;border-radius:3px;letter-spacing:.5px}
.status-live{background:rgba(239,68,68,.2);color:var(--red)}
.status-upcoming{background:rgba(59,130,246,.15);color:#60a5fa}
.status-finished{background:rgba(255,255,255,.06);color:var(--text-muted)}
.status-canceled{background:rgba(255,255,255,.04);color:var(--text-muted);text-decoration:line-through}
.status-postponed{background:rgba(245,197,24,.1);color:var(--yellow)}

/* ── Team Logos ── */
.team-logo{object-fit:contain;flex-shrink:0;filter:drop-shadow(0 0 1px rgba(255,255,255,.35)) drop-shadow(0 0 4px rgba(255,255,255,.1))}
.team-logo--sm{width:28px;height:28px}
.team-logo--md{width:40px;height:40px}
.team-logo--lg{width:64px;height:64px}
.team-logo--xl{width:96px;height:96px}
.team-logo--placeholder{display:flex;align-items:center;justify-content:center;background:var(--bg-hover);border-radius:var(--radius-sm);font-family:var(--font-display);font-weight:700;font-size:11px;color:var(--text-muted)}

/* ============================================================
   MATCH HERO (Detail Page)
   ============================================================ */
.match-hero{background:linear-gradient(180deg,#12121a 0%,var(--bg-base) 100%);border-bottom:1px solid var(--border);padding:32px 0}
.match-hero--live{background:linear-gradient(180deg,#180a0a 0%,var(--bg-base) 100%);border-bottom-color:rgba(239,68,68,.3)}

.match-context{display:flex;align-items:center;gap:8px;margin-bottom:24px;font-size:12px;color:var(--text-muted);flex-wrap:wrap}
.context-league-logo{width:18px;height:18px;object-fit:contain}
.context-link{color:var(--text-secondary);transition:color .15s}
.context-link:hover{color:var(--accent)}
.context-sep{opacity:.4}
.context-format{background:var(--bg-hover);padding:2px 8px;border-radius:3px;font-weight:700;font-family:var(--font-display);font-size:11px}

.match-hero-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.match-hero-team{display:flex;align-items:center;gap:16px}
.match-hero-team--right{flex-direction:row-reverse;text-align:right}
.hero-team-logo{flex-shrink:0}
.hero-team-name{font-family:var(--font-display);font-size:28px;font-weight:700;display:block;transition:color .15s}
.hero-team-name:hover{color:var(--accent)}
.hero-team-country{font-size:13px;color:var(--text-muted)}

.match-hero-scoreboard{text-align:center;min-width:180px}
.scoreboard--live{}
.scoreboard-live-label{font-size:12px;color:var(--red);font-weight:700;font-family:var(--font-display);letter-spacing:2px;margin-bottom:8px}
.scoreboard-scores{display:flex;align-items:center;justify-content:center;gap:8px}
.scoreboard-score{font-family:var(--font-mono);font-size:48px;font-weight:700;color:var(--text-muted);line-height:1;min-width:52px;text-align:center}
.scoreboard-score.score--win{color:var(--text-primary)}
.scoreboard-colon{font-size:32px;color:var(--text-muted)}
.scoreboard-time{font-size:12px;color:var(--text-muted);margin-top:8px;font-family:var(--font-mono)}

.match-streams{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.streams-label{font-size:12px;color:var(--text-muted)}
.stream-link{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);border-radius:var(--radius-sm);font-size:12px;color:#60a5fa;transition:all .15s}
.stream-link:hover{background:rgba(59,130,246,.2)}

/* ============================================================
   LIVE MATCH PANEL (WebSocket)
   ============================================================ */
.live-match-panel{background:var(--bg-surface);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-lg);padding:20px;margin-bottom:24px}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.panel-title{font-family:var(--font-display);font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}

.ws-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted)}
.ws-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted)}
.ws-status.ws-connected .ws-dot{background:var(--green);animation:livePulse 1.5s infinite}
.ws-status.ws-error .ws-dot{background:var(--red)}

.live-map-info{padding:10px 14px;background:var(--bg-elevated);border-radius:var(--radius-sm);font-size:13px;color:var(--text-secondary);margin-bottom:12px}

.live-round-scores{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;background:var(--bg-elevated);border-radius:var(--radius-md);padding:16px;margin:12px 0}
.round-team{text-align:center}
.round-team-name{display:block;font-family:var(--font-display);font-size:12px;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.round-score-display{display:flex;align-items:center;gap:4px;justify-content:center}
.ct-score,.t-score{font-family:var(--font-mono);font-size:18px;font-weight:700}
.ct-score{color:#60a5fa}
.t-score{color:var(--yellow)}
.slash{color:var(--text-muted)}
.round-total{display:block;font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--text-primary);margin-top:4px}
.round-info{text-align:center}
.round-number{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--accent);display:block;margin-bottom:4px}
.round-phase{font-size:11px;color:var(--text-muted)}

.live-player-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.player-stats-team h4{font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.stats-table{width:100%;border-collapse:collapse;font-size:12px;min-width:420px}
.stats-table th{text-align:center;padding:6px 8px;font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid var(--border);white-space:nowrap}
.stats-table th:first-child{text-align:left}
.stats-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.04);font-family:var(--font-mono);text-align:center}
.stats-table td:first-child{text-align:left;font-family:var(--font-display);font-weight:600}
.stats-table tr:hover td{background:var(--bg-hover)}
.stats-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.stats-loading{text-align:center;color:var(--text-muted);font-size:11px;padding:16px!important}

.live-events-panel{margin-top:16px}
.live-events-panel h3{font-family:var(--font-display);font-size:14px;font-weight:700;margin-bottom:10px;color:var(--text-secondary)}
.events-list{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.events-list::-webkit-scrollbar{width:4px}
.events-list::-webkit-scrollbar-track{background:var(--bg-base)}
.events-list::-webkit-scrollbar-thumb{background:var(--border)}

.event-item{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--bg-elevated);border-radius:var(--radius-sm);font-size:12px;border-left:2px solid transparent;animation:eventSlideIn .3s ease}
@keyframes eventSlideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.event-item.event-kill{border-left-color:var(--red)}
.event-item.event-bomb_exploded{border-left-color:var(--yellow)}
.event-item.event-bomb_defused{border-left-color:var(--blue)}
.event-item.event-round_end{border-left-color:var(--green)}
.event-time{font-family:var(--font-mono);color:var(--text-muted);font-size:10px;min-width:40px;flex-shrink:0}
.event-icon{font-size:14px;flex-shrink:0}
.event-desc{color:var(--text-secondary);flex:1}
.events-empty{padding:24px;text-align:center;color:var(--text-muted);font-size:13px}

/* Live frame cards (homepage/live page) */
.live-scoreboard-panel{margin-top:20px}
.live-frame-card{background:var(--bg-surface);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-md);padding:14px;margin-bottom:8px}
.frame-header{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:14px;font-weight:600;margin-bottom:10px}
.frame-detail-link{margin-left:auto;font-size:12px;color:var(--accent);transition:opacity .15s}
.frame-detail-link:hover{opacity:.7}
.frame-scores{font-size:13px;color:var(--text-secondary)}
.connecting-msg{font-size:12px;color:var(--text-muted);font-style:italic}
.frame-teams{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.frame-score{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--text-primary)}
.frame-connecting{font-size:12px;color:var(--text-muted)}

/* ============================================================
   GAME CARDS
   ============================================================ */
.match-games-section{margin-bottom:24px}
.games-list{display:flex;flex-direction:column;gap:8px}
.game-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.game-card--live{border-color:rgba(239,68,68,.3)}
.game-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border)}
.game-map{font-family:var(--font-display);font-weight:600;font-size:14px}
.game-team-scores{display:flex;flex-direction:column;gap:4px;padding:12px 14px}
.game-team-score{display:flex;align-items:center;gap:10px;font-size:13px;padding:6px 8px;border-radius:var(--radius-sm)}
.game-team--winner{background:rgba(0,200,83,.07)}
.game-team-rounds{margin-left:auto;font-family:var(--font-mono);font-weight:700;font-size:18px}
.winner-crown{font-size:14px}
.game-rounds-toggle{padding:0 14px 12px}
.game-rounds-detail{padding:14px;border-top:1px solid var(--border)}
.game-status-badge{}

/* ============================================================
   TEAMS GRID
   ============================================================ */
.teams-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:20px 0}
.team-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:all .15s;text-align:center;color:var(--text-primary)}
.team-card:hover{border-color:var(--border-accent);background:var(--bg-elevated);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.team-card-logo{width:64px;height:64px}
.team-card-name{font-family:var(--font-display);font-size:14px;font-weight:700}
.team-card-location,.team-card-players{font-size:11px;color:var(--text-muted)}

/* ============================================================
   VIEW TOGGLE (grid/list)
   ============================================================ */
.view-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    transition: all .15s;
    cursor: pointer;
}
.view-toggle__btn:hover { color: var(--text-primary); border-color: var(--border-accent); }
.view-toggle__btn--active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}

/* ============================================================
   PLAYERS — CARD GRID
   ============================================================ */
.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 12px;
}
.player-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--text-primary);
    text-decoration: none;
    transition: all .15s;
}
.player-card:hover {
    border-color: var(--border-accent);
    background: var(--bg-elevated);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.player-card__rank {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-muted);
    opacity: .6;
}
.player-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-elevated);
    flex-shrink: 0;
}
.player-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.player-card__name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
}
.player-card__realname {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: -4px;
}
.player-card__team {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}
.player-card__team img {
    width: 16px;
    height: 16px;
    border-radius: 2px;
}
.player-card__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    margin-top: 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}
.player-card__stat {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .players-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .player-card { padding: 14px 10px 12px; }
    .player-card__avatar { width: 44px; height: 44px; }
    .player-card__name { font-size: 13px; }
    .player-card__stats { font-size: 10px; gap: 4px 6px; }
}

/* ============================================================
   PLAYERS DATABASE (list view)
   ============================================================ */
.players-database,.players-table{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-top:8px}
.players-table-header{display:grid;padding:10px 16px;font-size:11px;font-weight:700;font-family:var(--font-display);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--bg-elevated)}
.player-row{display:grid;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);transition:background .12s;color:var(--text-primary)}
.player-row:last-child{border-bottom:none}
.player-row:hover{background:var(--bg-elevated)}
.player-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}
.player-avatar img{width:100%;height:100%;object-fit:cover}
.player-avatar-placeholder{width:40px;height:40px;background:var(--bg-hover);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--text-muted);flex-shrink:0}
.player-info{display:flex;flex-direction:column;gap:2px}
.player-nickname{font-family:var(--font-display);font-size:14px;font-weight:600}
.player-nation{font-size:11px;color:var(--text-muted)}
.player-team{display:flex;align-items:center;gap:8px;font-size:13px}
.player-role{font-size:12px;color:var(--text-muted);text-transform:capitalize}
.text-muted{color:var(--text-muted)}

.players-table-row{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);transition:background .12s;color:var(--text-primary)}
.players-table-row:hover{background:var(--bg-elevated)}
.player-col-main{display:flex;align-items:center;gap:10px}
.player-table-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}
.player-realname{font-size:11px;color:var(--text-muted);display:block}
.player-nationality{font-size:13px}

/* ============================================================
   ENTITY HERO
   ============================================================ */
.entity-hero{background:linear-gradient(180deg,#12121a 0%,var(--bg-base) 100%);border-bottom:1px solid var(--border);padding:36px 0}
.entity-hero--tournament{background:linear-gradient(180deg,#13130f 0%,var(--bg-base) 100%)}
[data-theme="light"] .entity-hero{background:linear-gradient(180deg,#e8e9ec 0%,var(--bg-base) 100%)}
[data-theme="light"] .entity-hero--tournament{background:linear-gradient(180deg,#e2e0d8 0%,var(--bg-base) 100%)}
.entity-hero-content{display:flex;align-items:center;gap:24px}
.entity-hero-logo{flex-shrink:0}
.entity-hero-logo img{width:80px;height:80px;object-fit:contain}
.entity-hero-logo-placeholder{font-size:56px;width:80px;text-align:center}
.entity-hero-name{font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:.5px;margin-bottom:6px}
.entity-acronym{font-size:18px;color:var(--text-muted);font-weight:400}
.entity-hero-sub{font-size:14px;color:var(--text-secondary);margin-bottom:10px}
.entity-hero-meta{display:flex;flex-wrap:wrap;gap:8px}
.entity-breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);margin-bottom:8px}
.entity-breadcrumb a:hover{color:var(--accent)}

.player-hero-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover}
.player-avatar-placeholder--xl{width:96px;height:96px;font-size:32px}

/* ── Meta Tags ── */
.meta-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1px solid var(--border);border-radius:20px;font-size:12px;color:var(--text-secondary);background:var(--bg-elevated)}
.meta-tag--live{border-color:rgba(239,68,68,.4);color:var(--red);background:rgba(239,68,68,.08)}
.meta-tag--team{border-color:var(--border-accent);color:var(--accent)}
.meta-tag--tier{font-weight:700;font-family:var(--font-display);letter-spacing:.5px}
.tier-s{border-color:rgba(245,197,24,.5);color:var(--yellow);background:rgba(245,197,24,.08)}
.tier-a{border-color:rgba(255,102,0,.5);color:var(--accent);background:var(--accent-dim)}
.tier-b{border-color:rgba(156,163,175,.4);color:#9ca3af}
.tier-c{border-color:var(--border);color:var(--text-muted)}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:16px}
.stat-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;text-align:center}
.stat-card-value{display:block;font-family:var(--font-mono);font-size:24px;font-weight:700;color:var(--accent)}
.stat-card-label{display:block;font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text-secondary);margin-top:4px;text-transform:capitalize}
.stat-card-desc{display:block;font-size:11px;color:var(--text-muted);margin-top:2px}

/* ============================================================
   TOURNAMENTS
   ============================================================ */
.tournaments-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:24px}
.tournament-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;transition:all .15s;color:var(--text-primary)}
.tournament-card:hover{border-color:var(--border-accent);background:var(--bg-elevated);transform:translateY(-1px)}
.tournament-card-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.tournament-league-logo{width:32px;height:32px;object-fit:contain;flex-shrink:0;border-radius:4px}
.tournament-names{flex:1;min-width:0}
.tournament-card-name{display:block;font-family:var(--font-display);font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tournament-card-serie{display:block;font-size:12px;color:var(--text-muted);margin-top:2px}
.tournament-live-badge{font-size:10px;font-weight:700;color:var(--red);background:rgba(239,68,68,.1);padding:2px 6px;border-radius:3px;white-space:nowrap;flex-shrink:0}
.tournament-card-meta{display:flex;flex-wrap:wrap;gap:6px}
.tournament-tier{font-size:10px;font-weight:700;padding:2px 7px;border-radius:3px;font-family:var(--font-display)}
.tournament-prize{font-size:12px;color:var(--yellow)}
.tournament-dates{font-size:11px;color:var(--text-muted)}

/* Filter tabs */
.filter-tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.filter-tab{padding:6px 14px;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);transition:all .15s}
.filter-tab:hover{color:var(--text-primary);background:var(--bg-hover)}
.filter-tab.is-active{color:var(--accent);border-color:var(--border-accent);background:var(--accent-dim)}

/* ============================================================
   STANDINGS
   ============================================================ */
.standings-table{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-top:8px}
.standings-header{display:grid;grid-template-columns:36px 1fr 60px 60px 60px;padding:10px 14px;font-size:11px;font-family:var(--font-display);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;background:var(--bg-elevated);border-bottom:1px solid var(--border)}
.standings-row{display:grid;grid-template-columns:36px 1fr 60px 60px 60px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);transition:background .12s}
.standings-row:last-child{border-bottom:none}
.standings-row:hover{background:var(--bg-elevated)}
.standings-rank{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);font-weight:700}
.standings-team{display:flex;align-items:center;gap:8px;font-size:14px}
.standings-team a:hover{color:var(--accent)}
.standings-wins{text-align:center;font-family:var(--font-mono);font-weight:700;color:var(--green)}
.standings-losses{text-align:center;font-family:var(--font-mono);font-weight:700;color:var(--red)}
.standings-diff{text-align:center;font-family:var(--font-mono);font-weight:700;font-size:13px}
.text-green{color:var(--green)}
.text-red{color:var(--red)}

/* ============================================================
   BRACKETS
   ============================================================ */
.brackets-container{display:flex;gap:20px;overflow-x:auto;padding:16px 0;-webkit-overflow-scrolling:touch}
.brackets-container::-webkit-scrollbar{height:4px}
.brackets-container::-webkit-scrollbar-thumb{background:var(--border)}
.bracket-round{flex-shrink:0;min-width:200px}
.bracket-round-title{font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:1px;margin-bottom:12px;padding:5px 10px;background:var(--bg-elevated);border-radius:var(--radius-sm)}
.bracket-matches{display:flex;flex-direction:column;gap:10px}
.bracket-match{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .15s;color:var(--text-primary)}
.bracket-match:hover{border-color:var(--border-accent)}
.bracket-team{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:12px;border-bottom:1px solid var(--border)}
.bracket-team:last-child{border-bottom:none}
.bracket-team--win{background:rgba(0,200,83,.07)}
.bracket-score{margin-left:auto;font-family:var(--font-mono);font-weight:700;font-size:14px}
.bracket-match--loser{opacity:.6}

/* ── Serie Bracket Accordion ── */
.serie-brackets-accordion{width:100vw;margin-left:calc(-50vw + 50%);padding:0 20px}
.bracket-accordion-toggle:hover{background:var(--bg-hover)!important}
.bracket-accordion-toggle.is-open .bracket-accordion-chevron{transform:rotate(180deg)}
.bracket-accordion-body{will-change:max-height}
@media(min-width:1280px){.serie-brackets-accordion{padding:0 calc((100vw - var(--container)) / 2 + 20px)}}

/* ============================================================
   LEAGUES & SERIES
   ============================================================ */
.leagues-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:20px 0}
.league-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:all .15s;color:var(--text-primary)}
.league-card:hover{border-color:var(--border-accent);background:var(--bg-elevated)}
.league-card-logo img{width:48px;height:48px;object-fit:contain}
.league-logo-placeholder{font-size:36px;width:48px;text-align:center}
.league-card-info h3{font-family:var(--font-display);font-size:14px;font-weight:700}
.league-card-url{font-size:11px;color:var(--text-muted)}

.series-list{display:flex;flex-direction:column;gap:2px}
.serie-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:all .12s;color:var(--text-primary)}
.serie-row:hover{border-color:var(--border-accent);background:var(--bg-elevated)}
.serie-row-img{width:28px;height:28px;object-fit:contain;flex-shrink:0}
.serie-row-info{flex:1;min-width:0}
.serie-row-name{font-family:var(--font-display);font-size:14px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serie-row-league,.serie-row-year{font-size:11px;color:var(--text-muted)}
.serie-row-dates{font-size:12px;color:var(--text-muted);white-space:nowrap}
.serie-row-arrow{font-size:14px;color:var(--text-muted);margin-left:auto;flex-shrink:0}

.series-tournaments-list{display:flex;flex-direction:column;gap:4px;margin-bottom:24px}
.serie-tournament-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);transition:all .12s;color:var(--text-primary)}
.serie-tournament-row:hover{border-color:var(--border-accent)}
.st-name{font-family:var(--font-display);font-size:14px;font-weight:600;flex:1}
.st-prize{font-size:12px;color:var(--yellow)}
.st-arrow{margin-left:auto;color:var(--text-muted)}

/* ============================================================
   ROSTERS
   ============================================================ */
.match-rosters-section{margin-top:24px}
.rosters-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.roster-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.roster-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg-elevated);border-bottom:1px solid var(--border)}
.roster-team-link{font-family:var(--font-display);font-size:15px;font-weight:700;transition:color .15s}
.roster-team-link:hover{color:var(--accent)}
.roster-players{padding:8px 0}
.roster-player-row{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid var(--border);transition:background .12s;color:var(--text-primary)}
.roster-player-row:last-child{border-bottom:none}
.roster-player-row:hover{background:var(--bg-elevated)}
.roster-player-row img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
.roster-player-info{flex:1}
.roster-player-name{font-family:var(--font-display);font-size:14px;font-weight:600;display:block}
.roster-player-nat{font-size:12px}
.roster-player-role{font-size:11px;color:var(--text-muted);text-transform:capitalize;flex-shrink:0}
.no-roster{padding:16px;color:var(--text-muted);font-size:13px;text-align:center}

.roster-mini-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.roster-mini-header{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg-elevated);border-bottom:1px solid var(--border)}
.roster-mini-players{padding:8px 0}
.roster-mini-player{display:block;padding:6px 14px;font-size:13px;color:var(--text-secondary);transition:all .12s}
.roster-mini-player:hover{color:var(--accent);background:var(--bg-hover)}

/* ============================================================
   SIDEBAR WIDGETS
   ============================================================ */
.content-sidebar{display:flex;flex-direction:column;gap:12px}
.sidebar-widget{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.widget-title{padding:12px 14px;font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-secondary);border-bottom:1px solid var(--border);background:var(--bg-elevated)}
.sidebar-item{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--border);transition:background .12s;color:var(--text-primary)}
.sidebar-item:last-of-type{border-bottom:none}
.sidebar-item:hover{background:var(--bg-elevated)}
.sidebar-item-img{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.sidebar-item-text{flex:1;min-width:0}
.sidebar-item-name{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-item-sub{display:block;font-size:11px;color:var(--text-muted)}
.sidebar-item-status{font-size:10px;font-weight:700;color:var(--red);background:rgba(239,68,68,.1);padding:2px 6px;border-radius:3px;flex-shrink:0}
.sidebar-team{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border);transition:background .12s;color:var(--text-primary);font-size:13px}
.sidebar-team:hover{background:var(--bg-elevated)}
.team-location{margin-left:auto;font-size:11px;color:var(--text-muted)}
.sidebar-empty{padding:14px;font-size:12px;color:var(--text-muted);text-align:center}
.sidebar-link-more{display:block;padding:8px 14px;font-size:12px;color:var(--accent);border-top:1px solid var(--border);transition:opacity .15s}
.sidebar-link-more:hover{opacity:.7}

/* ── Sidebar Promo Banner ── */
.sidebar-promo-banner{position:relative;display:flex;flex-direction:column;justify-content:space-between;border-radius:var(--radius-md);overflow:hidden;margin-bottom:14px;padding:20px 16px;gap:20px;aspect-ratio:5/7;background-color:#1a1a1a;background-size:cover;background-position:center;background-repeat:no-repeat}
.sidebar-promo-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 35%,transparent 50%,rgba(0,0,0,.75) 100%);pointer-events:none}
.sidebar-promo-banner__18{position:relative;z-index:1;display:block;text-align:center;font-size:9px;font-weight:700;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.4);border-radius:3px;padding:1px 5px;line-height:1.3;align-self:center;width:fit-content}
.sidebar-promo-banner__logo-link{position:relative;z-index:1;display:block;text-align:center}
.sidebar-promo-banner__logo{height:32px;width:auto;display:inline-block}
.sidebar-promo-banner__odds{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px}
.sidebar-promo-banner__odd{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);border-radius:6px;padding:10px 12px;text-decoration:none;color:inherit;transition:background .15s}
.sidebar-promo-banner__odd:hover{background:rgba(0,0,0,.65)}
.sidebar-promo-banner__team{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sidebar-promo-banner__value{font-size:16px;font-weight:700;color:var(--promo-accent,var(--accent));font-family:var(--font-display)}
.sidebar-promo-banner__meta{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);border-radius:8px;padding:8px 12px}
.sidebar-promo-banner__serie{font-size:11px;font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sidebar-promo-banner__date{font-size:10px;color:rgba(255,255,255,.6)}
.sidebar-promo-banner__cta{position:relative;z-index:1;display:block;width:100%;padding:12px 0;text-align:center;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--promo-btn-color,#fff);background:var(--promo-accent,var(--accent));border-radius:6px;transition:opacity .15s}
.sidebar-promo-banner__cta:hover{opacity:.85;color:var(--promo-btn-color,#fff)}

@media(max-width:1024px){
    .sidebar-promo-banner{aspect-ratio:auto;padding:20px 16px;gap:16px}
}

/* ── Wide Promo Banner (horizontal, between match groups) ── */
.wide-promo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 24px;
    margin-bottom: 24px;
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: #1a1a1a;
    border: 1px solid var(--border);
    transition: border-color .2s, box-shadow .2s;
}
.wide-promo:hover {
    border-color: var(--promo-accent, var(--accent));
    box-shadow: 0 0 20px rgba(255,102,0,.15);
    color: #fff;
}
.wide-promo__bg {
    position: absolute;
    inset: 0;
    background: var(--promo-bg) center / cover no-repeat;
    opacity: .25;
    pointer-events: none;
}
.wide-promo__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.7) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.7) 100%);
}
.wide-promo__18 {
    position: relative;
    z-index: 1;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 3px;
    padding: 1px 4px;
    line-height: 1.3;
    flex-shrink: 0;
    align-self: flex-start;
}
.wide-promo__logo {
    position: relative;
    z-index: 1;
    height: 26px;
    max-width: 120px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}
.wide-promo__matchup {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.wide-promo__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(255,255,255,.85);
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 4px;
}
.wide-promo__serie {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.wide-promo__date {
    white-space: nowrap;
    opacity: .7;
}
.wide-promo__teams {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    justify-content: center;
}
.wide-promo__team {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.wide-promo__team-logo {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}
.wide-promo__team-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.wide-promo__odd {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--promo-accent, var(--accent));
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    padding: 6px 14px;
    border-radius: 4px;
    flex-shrink: 0;
}
.wide-promo__vs {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,.5);
    flex-shrink: 0;
}
.wide-promo__cta {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--promo-btn-color, #fff);
    background: var(--promo-accent, var(--accent));
    border-radius: 5px;
    transition: opacity .15s;
    white-space: nowrap;
}
.wide-promo:hover .wide-promo__cta { opacity: .9; }

/* Wide promo — mobile: stacked layout like sidebar promo */
@media (max-width: 768px) {
    .wide-promo {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 20px 16px;
        text-align: center;
    }
    .wide-promo__18 {
        align-self: center;
    }
    .wide-promo__logo {
        height: 28px;
        max-width: 140px;
    }
    .wide-promo__matchup {
        width: 100%;
        gap: 8px;
    }
    .wide-promo__teams {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .wide-promo__team {
        width: 100%;
        justify-content: center;
        background: rgba(0,0,0,.45);
        backdrop-filter: blur(6px);
        border-radius: 8px;
        padding: 10px 14px;
    }
    .wide-promo__team-name {
        flex: 1;
        text-align: left;
    }
    .wide-promo__vs { display: none; }
    .wide-promo__cta {
        width: 100%;
        text-align: center;
        padding: 12px;
        border-radius: 8px;
    }
    .wide-promo__serie { max-width: 180px; }
}

/* ============================================================
   INFO LIST
   ============================================================ */
.info-list{padding:14px}
.info-list dt{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:10px}
.info-list dt:first-child{margin-top:0}
.info-list dd{font-size:13px;color:var(--text-primary);margin-top:2px}
.info-list dd a:hover{color:var(--accent)}
.info-list code{font-size:11px;background:var(--bg-elevated);padding:2px 6px;border-radius:3px}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.section-title{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:.5px;margin:24px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.section-block{margin-bottom:32px}
.section-heading{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin:20px 0 10px;display:flex;align-items:center;gap:8px}
.subsection-label{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;padding:6px 12px;background:var(--bg-elevated);border-radius:var(--radius-sm);display:flex;align-items:center;gap:6px}

/* ============================================================
   BREADCRUMB
   ============================================================ */
/* Breadcrumb bar — never full-bleed. Always renders as the top row of a card-
   style block constrained to .container width. When followed by .page-header-bar
   the two visually fuse into a single card via negative margin + matched radii.
   Works in all browsers (no :has() dependency). */
.breadcrumb-bar{padding:12px 0 0;background:transparent;font-size:12px;color:var(--text-muted);margin-bottom:-1px;position:relative;z-index:1}
.breadcrumb-bar .container{
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-bottom:0;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:10px 22px 8px;
}
[data-theme="light"] .breadcrumb-bar .container{background:#fff;border-color:rgba(0,0,0,.06)}

/* When followed by page-header-bar, fuse: kill the page-header-bar's top
   padding/border-radius so they read as one continuous card. */
.breadcrumb-bar + .page-header-bar{padding-top:0}
.breadcrumb-bar + .page-header-bar .container{
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-top:0;
    padding-top:14px;
}
.breadcrumb-bar a:hover{color:var(--accent)}
.sep{color:var(--text-muted);opacity:.4}

/* ============================================================
   SEARCH FORM
   ============================================================ */
.search-form{display:flex;gap:6px;align-items:center;margin-left:auto}
.search-input{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);padding:7px 12px;border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-body);outline:none;transition:border-color .15s;width:220px}
.search-input:focus{border-color:var(--border-accent)}
.search-input::placeholder{color:var(--text-muted)}

/* ============================================================
   PAGINATION
   ============================================================ */
.cs2bet-pagination{display:flex;gap:4px;justify-content:center;margin:24px 0}
.page-btn{padding:7px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;color:var(--text-secondary);transition:all .12s;font-family:var(--font-display);font-weight:600}
.page-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.page-btn.active{background:var(--accent-dim);border-color:var(--border-accent);color:var(--accent)}

/* ============================================================
   LOAD MORE / EMPTY / ERROR
   ============================================================ */
.load-more-wrap{text-align:center;padding:20px 0}
.cs2bet-empty{padding:48px 24px;text-align:center;color:var(--text-muted)}
.empty-icon{font-size:40px;margin-bottom:12px}
.cs2bet-empty p{font-size:14px}
.cs2bet-error-box{display:flex;gap:14px;padding:20px;background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-md);margin:16px 0}
.error-icon{font-size:24px;flex-shrink:0}
.error-content strong{display:block;font-size:14px;margin-bottom:4px}
.error-content p{font-size:13px;color:var(--text-secondary)}
.error-content a{color:var(--accent)}

/* Skeleton loaders */
.skeleton{background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--bg-hover) 50%,var(--bg-elevated) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}
.skeleton--match{height:76px;margin-bottom:2px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:#080809;border-top:1px solid var(--border);padding:40px 0 24px}
.footer-inner{}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
.footer-brand{}
.footer-logo{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:12px}
.footer-brand p{font-size:13px;color:var(--text-muted);line-height:1.6;max-width:280px}
.footer-badge{margin-top:16px}
.footer-badge img{height:20px;opacity:.6}
.footer-nav-col .footer-heading{display:block;font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:12px}
.footer-nav-col nav{display:flex;flex-direction:column;gap:8px}
.footer-nav-col nav a{font-size:13px;color:var(--text-secondary);transition:color .15s}
.footer-nav-col nav a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;display:flex;flex-direction:column;gap:4px}
.footer-bottom p{font-size:12px;color:var(--text-muted)}
.footer-bottom a{color:var(--text-secondary);transition:color .15s}
.footer-bottom a:hover{color:var(--accent)}
.footer-data-attribution{font-size:11px;color:var(--text-muted);opacity:.8;margin-top:8px}
/* TL;DR answer box — designed for AI-citation extractability */
.tldr-box{background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-md,12px);padding:16px 18px;margin:0 0 24px;display:flex;flex-direction:column;gap:8px}
.tldr-box__title{display:inline-block;font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 2px}
.tldr-box__answer{font-size:14.5px;line-height:1.6;color:var(--text-primary);margin:0}
.tldr-box__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 14px;margin:6px 0 0}
.tldr-box__stat{display:flex;flex-direction:column;gap:2px}
.tldr-box__stat dt{font-size:11px;color:var(--text-muted);letter-spacing:.03em;text-transform:uppercase;font-weight:600;margin:0}
.tldr-box__stat dd{font-size:14px;font-family:var(--font-display);font-weight:700;color:var(--text-primary);margin:0}

/* Fact table — clean stat table for guides (closes "no tables" content gap vs HLTV) */
.fact-table-wrap{overflow-x:auto;margin:16px 0;border-radius:var(--radius-md,12px);border:1px solid var(--border)}
.fact-table{width:100%;border-collapse:collapse;min-width:380px;font-size:13.5px}
.fact-table__caption{text-align:left;font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:10px 14px 8px;background:var(--bg-surface)}
.fact-table thead{background:var(--bg-surface)}
.fact-table th,.fact-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border)}
.fact-table thead th{font-family:var(--font-display);font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--text-muted)}
.fact-table tbody tr:last-child th,.fact-table tbody tr:last-child td{border-bottom:none}
.fact-table tbody th{font-weight:600;color:var(--text-primary)}
.fact-table tbody tr:nth-child(even){background:rgba(255,255,255,.02)}

.footer-responsible-gambling{font-size:11px;color:var(--text-muted);opacity:.85;margin-top:8px;letter-spacing:.3px}
.footer-responsible-gambling a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}
.footer-responsible-gambling a:hover{color:var(--accent)}
.footer-rg-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:4px;font-size:11px;color:var(--text-muted)}
.footer-rg-links a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}
.footer-rg-links a:hover{color:var(--accent)}
.footer-rg-us{font-size:11px;color:var(--text-muted);margin-top:6px;opacity:.75;letter-spacing:.2px}
.footer-rg-us a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}
.footer-rg-us a:hover{color:var(--accent)}

/* Footer Legal Links — horizontal inline */
.footer-legal-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:8px}
.footer-legal-links a{font-size:11px;color:var(--text-muted);opacity:.6;transition:color .15s,opacity .15s;text-decoration:none}
.footer-legal-links a:hover{color:var(--accent);opacity:1}
.footer-legal-links a:not(:last-child)::after{content:"|";margin-left:6px;color:var(--text-muted);opacity:.3;font-size:10px}

/* Responsible Gambling Disclaimer — inline on betting pages */
.responsible-gambling-disclaimer{background:rgba(255,102,0,.06);border:1px solid rgba(255,102,0,.2);border-radius:var(--radius-md);padding:16px 20px;margin:24px 0}
.responsible-gambling-disclaimer p{font-size:13px;line-height:1.6;color:var(--text-secondary);margin:0}
.responsible-gambling-disclaimer strong{color:var(--accent);font-weight:600}
.responsible-gambling-disclaimer a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.responsible-gambling-disclaimer a:hover{color:var(--text-primary)}

/* ── Legal Pages — card-based layout ── */
.legal-page{display:flex;flex-direction:column;gap:20px;max-width:100%;margin-bottom:40px}
.legal-page--narrow{max-width:100%}
.legal-updated{font-size:13px;color:var(--text-muted);margin:0}
.legal-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 32px}
.legal-card h2{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.legal-card h3{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--text-primary);margin:18px 0 8px}
.legal-card h3:first-of-type{margin-top:12px}
.legal-card p{font-size:14px;line-height:1.7;color:var(--text-secondary);margin:0 0 10px}
.legal-card p:last-child{margin-bottom:0}
.legal-card ul{margin:8px 0 12px 0;padding-left:20px;list-style:disc}
.legal-card li{font-size:14px;line-height:1.7;color:var(--text-secondary);margin-bottom:6px}
.legal-card li:last-child{margin-bottom:0}
.legal-card li strong{color:var(--text-primary)}
.legal-card a{color:var(--accent);text-decoration:none;transition:color .15s}
.legal-card a:hover{color:#ff8533;text-decoration:underline;text-underline-offset:2px}
.legal-card strong{color:var(--text-primary)}
.legal-notice{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 22px}
.legal-notice p{margin:0 0 6px}
.legal-notice p:last-child{margin-bottom:0}
.legal-notice h3{font-size:14px;font-weight:600;color:var(--text-primary);margin:0 0 8px}
.legal-features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:8px}
.legal-feature{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 22px}
.legal-feature h3{font-size:15px;font-weight:600;color:var(--text-primary);margin:0 0 8px}
.legal-feature p{font-size:13px;color:var(--text-muted);margin:0;line-height:1.6}
/* Contact page two-column */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:none}
.contact-info-block{margin-bottom:18px}
.contact-info-block h3{font-size:14px;font-weight:600;color:var(--text-primary);margin:0 0 6px}
.contact-info-block p{font-size:14px;color:var(--text-secondary);margin:0 0 4px}
/* ── Matches Section Cards — unified live + upcoming styling ── */
.matches-section-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0;margin-bottom:20px;overflow:hidden}
.matches-section-card--live{border-color:rgba(239,68,68,.25);background:linear-gradient(180deg,rgba(239,68,68,.04) 0%,var(--bg-card) 100%)}
.matches-section-header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border)}
.matches-section-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.matches-section-dot--live{background:var(--red);animation:pulse 1.5s infinite;box-shadow:0 0 6px rgba(239,68,68,.5)}
.matches-section-title{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text-primary);margin:0;letter-spacing:.3px}
.matches-section-count{font-size:12px;color:var(--text-muted);font-weight:500}
.matches-section-link{margin-left:auto;font-size:12px;color:var(--accent);font-weight:600;text-decoration:none;transition:color .15s;white-space:nowrap}
.matches-section-link:hover{color:#ff8533}
.matches-section-card .matches-list{padding:0}
.matches-section-card .matches-date-group{padding:0}
.matches-section-card .matches-date-header{padding:10px 20px;background:rgba(255,255,255,.02)}
.matches-section-empty{padding:40px 20px;text-align:center}
.matches-section-empty p{font-size:14px;color:var(--text-muted);margin:0 0 6px}
.matches-section-empty p:last-child{margin-bottom:0;font-size:12px;opacity:.7}
.matches-section-refresh{font-size:11px;color:var(--text-muted);text-align:right;padding:8px 20px;margin:0;border-top:1px solid var(--border);opacity:.6}

@media(max-width:768px){
    .matches-section-header{padding:12px 14px;gap:8px}
    .matches-section-card .matches-date-header{padding:8px 14px}
    .matches-section-refresh{padding:6px 14px}
}

@media(max-width:768px){
    .contact-grid{grid-template-columns:1fr}
    .legal-card{padding:20px 18px}
    .legal-features-grid{grid-template-columns:1fr}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    :root{--sidebar-w:240px}
    .hero-text h1{font-size:28px}
    .stat-number{font-size:24px}
    .tournaments-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}

@media (max-width: 900px) {
    .page-layout{grid-template-columns:1fr}
    .content-sidebar{order:2}
    .footer-grid{grid-template-columns:1fr 1fr}
    .live-player-stats{grid-template-columns:1fr}
    .rosters-grid{grid-template-columns:1fr}
    .match-hero-score{grid-template-columns:1fr auto 1fr}
    .scoreboard-score{font-size:36px}
    .hero-team-name{font-size:20px}
}

@media (max-width: 768px) {
    :root{--header-h:50px}
    .primary-nav{display:none}
    .mobile-menu-btn{display:flex}
    .primary-nav.is-open{display:flex;flex-direction:column;position:fixed;top:var(--header-h);left:0;right:0;background:#0a0a0c;border-bottom:1px solid var(--border);padding:12px;z-index:999;gap:4px}
    .hero-content{flex-direction:column;gap:20px}
    .hero-stats{justify-content:center}
    .mc2-team-name{font-size:13px}
    .mc2-clock{font-size:13px}
    .score-val{font-size:17px}
    .footer-grid{grid-template-columns:1fr 1fr;gap:20px}
    .footer-brand{grid-column:1/-1}
    .brackets-container{gap:10px}
    .standings-header,.standings-row{grid-template-columns:36px 1fr 50px 50px 50px;font-size:12px}
}

@media (max-width: 520px) {
    .match-hero-score{gap:12px}
    .scoreboard-score{font-size:28px}
    .hero-team-name{font-size:16px}
    .entity-hero-name{font-size:22px}
    .tab-btn{padding:7px 10px;font-size:12px}
    .rosters-grid{grid-template-columns:1fr}
    .teams-grid{grid-template-columns:repeat(2,1fr)}
    .stats-cards-grid{grid-template-columns:repeat(2,1fr)}
    .page-header-bar__top { flex-wrap: wrap; }
    .page-header-bar__actions { margin-left: 0; width: 100%; }
    .search-form{margin-left:0;width:100%}
    .search-input{flex:1}
}

/* ============================================================
   EXTENDED STYLES — News, Moderator, Featured, Hierarchy
   ============================================================ */

/* btn--accent (orange filled) */
.btn--accent{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.btn--accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* status-badge (used in match cards & mod panel) */
.status-badge{display:inline-block;font-family:var(--font-display);font-size:10px;font-weight:700;padding:2px 7px;border-radius:3px;text-transform:uppercase;letter-spacing:.5px}
.status-live{background:#e74c3c;color:#fff;animation:pulse-badge 1.5s infinite}
.status-upcoming,.status-not_started{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border)}
.status-finished{background:var(--bg-elevated);color:var(--text-muted)}
.status-publish{background:#27ae60;color:#fff}
.status-draft{background:#f39c12;color:#fff}
.status-pending{background:#8e44ad;color:#fff}
@keyframes pulse-badge{0%,100%{opacity:1}50%{opacity:.7}}

/* ── Entity Social Links ── */
.entity-social {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.entity-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    color: var(--text-muted);
    transition: all .15s;
    text-decoration: none;
}
.entity-social__link:hover {
    background: var(--accent);
    color: #fff;
}
[data-theme="light"] .entity-social__link {
    background: rgba(0,0,0,.06);
}
[data-theme="light"] .entity-social__link:hover {
    background: var(--accent);
    color: #fff;
}

/* ── Moderator Topbar (persistent on all pages for logged-in mods) ── */
.mod-topbar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: 0;
    margin-bottom: 8px;
    z-index: 190;
    font-family: var(--font-body);
}
.mod-topbar__inner {
    display: flex;
    align-items: center;
    gap: 0;
    height: 36px;
}
.mod-topbar__label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent);
    padding: 0 14px 0 0;
    margin-right: 8px;
    border-right: 1px solid var(--border);
    white-space: nowrap;
    line-height: 36px;
}
.mod-topbar__nav {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}
.mod-topbar__link {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0 12px;
    line-height: 36px;
    white-space: nowrap;
    transition: color .12s, background .12s;
    border-bottom: 2px solid transparent;
}
.mod-topbar__link:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.mod-topbar__link.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}
.mod-topbar__logout {
    font-size: 11px;
    font-weight: 600;
    color: var(--red);
    text-decoration: none;
    padding: 0 12px;
    line-height: 36px;
    margin-left: auto;
    white-space: nowrap;
    transition: opacity .12s;
}
.mod-topbar__logout:hover {
    opacity: .7;
    color: var(--red);
}
@media (max-width: 640px) {
    .mod-topbar__label { display: none; }
    .mod-topbar__link { padding: 0 8px; font-size: 11px; }
    .mod-topbar__logout { padding: 0 8px; }
}

/* ── Breaking News Bar ── */
.breaking-news-bar{background:var(--red);padding:8px 0}
.breaking-news-bar .container{display:flex;align-items:center;gap:12px}
.breaking-label{font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:1px;color:#fff;white-space:nowrap}
.breaking-news-bar a{color:#fff;font-weight:600;font-size:13px;font-family:var(--font-display)}

/* ── News Slider ── */
/* .news-slider-wrap is the layout spacer (the .container handles centering); the card is .news-slider-card */
.news-slider-wrap{margin-top:16px;margin-bottom:24px}
.news-slider-card{position:relative;overflow:hidden;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.news-slider{position:relative;height:420px;overflow:hidden}
.news-slide{position:absolute;inset:0;transition:opacity .5s;opacity:0;pointer-events:none;background-size:cover;background-position:center}
.news-slide__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.news-slide.is-active{opacity:1;pointer-events:auto}
.news-slide-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,.05) 100%)}
.news-slide-content{position:absolute;bottom:0;left:0;right:0;padding:28px 32px;max-width:860px}
.news-slide-cat,.breaking-badge{display:inline-block;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 10px;border-radius:3px;margin-bottom:10px;background:var(--accent);color:#fff}
.breaking-badge{background:var(--red)}
.news-slide-title{font-family:var(--font-display);font-size:clamp(18px,3vw,28px);font-weight:700;color:#fff;margin:0 0 8px;line-height:1.25}
.news-slide-title a{color:#fff;text-decoration:none}
.news-slide-title a:hover{color:#fff;text-decoration:underline}
.news-slide-meta{font-size:12px;color:rgba(255,255,255,.7);display:flex;gap:8px}

/* Slider dot pager — bottom-center inside the card */
.news-slider-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;z-index:3}
.slider-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);border:none;cursor:pointer;transition:all .2s;padding:0;flex-shrink:0;min-width:8px}
.slider-dot:hover{background:rgba(255,255,255,.6)}
.slider-dot.is-active{background:var(--accent);width:22px;border-radius:4px}

/* Slider arrows — circular buttons over the card */
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .15s;z-index:3;backdrop-filter:blur(6px)}
.slider-arrow:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-50%) scale(1.05)}
.slider-prev{left:14px}
.slider-next{right:14px}

@media (max-width:720px){
    .news-slider{height:280px}
    .news-slide-content{padding:18px 20px}
    .slider-arrow{width:30px;height:30px;font-size:18px}
    .slider-prev{left:8px}
    .slider-next{right:8px}
}

/* ── News Grid ── */
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:20px}
.news-promo-break{margin-bottom:20px}
.news-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:all .15s;display:flex;flex-direction:column}
.news-card:hover{border-color:var(--border-accent);transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.news-card--breaking{border-color:var(--red)}
.news-card-img-wrap{display:block;position:relative;overflow:hidden;aspect-ratio:16/9}
.news-card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.news-card:hover .news-card-img-wrap img{transform:scale(1.04)}
.news-img-badge{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-family:var(--font-display);font-size:10px;font-weight:800;padding:3px 8px;border-radius:3px;letter-spacing:.5px}
.news-card-body{padding:14px 16px;flex:1;display:flex;flex-direction:column;gap:8px}
.news-card-cat{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--accent)}
.news-card-title{font-family:var(--font-display);font-size:15px;font-weight:700;line-height:1.35;margin:0}
.news-card-title a{color:var(--text-primary)}
.news-card-title a:hover{color:var(--accent)}
.news-card-excerpt{font-size:13px;color:var(--text-secondary);line-height:1.5;margin:0;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.news-card-meta{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted)}
.news-author{font-weight:600}
.news-edit-link{margin-left:auto;opacity:.6;font-size:14px}
.news-edit-link:hover{opacity:1}

/* ── Article Single ── */
/* Use the same column ratio as the standard listing layout so the article + sidebar
   spacing matches the rest of the site. Gap inherited from .page-layout (24px). */
.page-layout--article{grid-template-columns:minmax(0,1fr) 300px}
.article-main{min-width:0}
/* Card wrap around the article body — gives it a clear surface, matching news cards */
.article-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 32px;box-shadow:var(--shadow-sm)}
@media (max-width:720px){
    .article-card{padding:20px 18px}
}

/* ── Sidebar widgets — shared styles (Predictions + Latest News, used on news single) ── */
.sidebar-widget__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.sidebar-widget__head .widget-title{margin:0}
.sidebar-widget__link{font-size:12px;color:var(--text-muted);text-decoration:none;font-weight:600;flex-shrink:0}
.sidebar-widget__link:hover{color:var(--accent)}

/* Predictions sidebar cards */
.sw-pred-card{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;text-decoration:none;color:inherit;margin-bottom:8px;transition:border-color .15s,background .15s}
.sw-pred-card:last-child{margin-bottom:0}
.sw-pred-card:hover{border-color:var(--accent);background:var(--bg-hover)}
.sw-pred-event-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sw-pred-event{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.sw-pred-type{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:3px;flex-shrink:0}
.sw-pred-type--ai{background:rgba(59,130,246,.15);color:#60a5fa}
.sw-pred-type--expert{background:rgba(34,197,94,.15);color:#4ade80}
.sw-pred-matchup{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.sw-pred-team{display:flex;align-items:center;gap:6px;min-width:0}
.sw-pred-team--right{justify-content:flex-end}
.sw-pred-name{font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-pred-name--pick{color:var(--text-primary)}
.sw-pred-center{font-size:10px;color:var(--text-muted);text-align:center;flex-shrink:0;min-width:36px}
.sw-pred-vs{font-weight:700}
.sw-pred-time{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)}
.sw-pred-live{display:inline-flex;align-items:center;gap:3px;color:var(--red);font-weight:700;font-size:10px}
.sw-pred-live .live-dot-xs{width:5px;height:5px;background:var(--red);border-radius:50%;animation:pulse-dot 1.5s infinite}
.sw-pred-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.sw-pred-pill{font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;letter-spacing:.02em}
.sw-pred-pill--default{background:rgba(255,102,0,.12);color:var(--accent)}
.sw-pred-pill--correct{background:rgba(34,197,94,.15);color:#4ade80}
.sw-pred-pill--wrong{background:rgba(239,68,68,.15);color:#f87171}
.sw-pred-conf{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-muted)}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}

/* Latest news sidebar list */
.sw-news-row{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:6px;text-decoration:none;color:inherit;transition:background .12s}
.sw-news-row:hover{background:var(--bg-hover)}
.sw-news-row + .sw-news-row{border-top:1px solid var(--border);border-radius:0;margin-top:0}
.sw-news-title{font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sw-news-time{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE TOPICAL HERO — owns brand + aggregator queries,
   routes traffic to subpages (anti-cannibalisation cluster)
   ═══════════════════════════════════════════════════════════════ */
/* Stack wrapper — lets us reorder hero below match content on mobile
   while keeping HTML order intact for crawlers (hero stays first in DOM). */
.hp-stack{display:block}
@media (max-width:768px){
    .hp-stack{display:flex;flex-direction:column}
    .hp-stack__hero{order:2}    /* hero pushed below match grid on mobile */
    .hp-stack__main{order:1}
    .hp-topical-hero{margin-top:8px}
}

/* Match width + spacing of the .hp-grid-v2 below: same .container parent + same gap rhythm.
   bg-card to align with the rest of the homepage card surfaces (LIVE EVENTS, sidebar widgets). */
.hp-topical-hero{padding:18px 18px 16px;margin-top:14px;margin-bottom:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.hp-topical-hero__h1{font-family:var(--font-display);font-size:clamp(20px,2.6vw,26px);font-weight:800;line-height:1.18;color:var(--text-primary);margin:0 0 8px;letter-spacing:-.01em}
.hp-topical-hero__lede{font-size:13.5px;line-height:1.6;color:var(--text-secondary);max-width:none;margin:0 0 10px}
.hp-topical-hero__lede:last-of-type{margin-bottom:14px}
.hp-topical-hero__lede strong{color:var(--text-primary);font-weight:600}
.hp-topical-hero__cluster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.hp-cluster-link{display:flex;flex-direction:column;gap:2px;padding:9px 11px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:6px;text-decoration:none;color:inherit;transition:border-color .15s,background .15s,transform .12s;min-height:54px}
.hp-cluster-link:hover{border-color:var(--accent);background:var(--bg-hover);transform:translateY(-1px)}
.hp-cluster-link__label{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--text-primary);letter-spacing:.01em;line-height:1.25}
.hp-cluster-link__sub{font-size:11px;color:var(--text-muted);line-height:1.4}
@media (max-width:960px){
    .hp-topical-hero__cluster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
    .hp-topical-hero__cluster{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════
   AUTHOR BIO RICH CARD — at the bottom of news singles
   (replaces generic 'CS2bet Team' default with named persona)
   ═══════════════════════════════════════════════════════════════ */
.author-bio-card--rich{display:flex;gap:18px;align-items:flex-start;margin-top:32px;padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm)}
.author-bio-card__avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bg-elevated)}
.author-bio-card__body{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
.author-bio-card__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.author-bio-card__name{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--text-primary);text-decoration:none}
.author-bio-card__name:hover{color:var(--accent)}
.author-bio-card__role{font-size:11.5px;color:var(--text-muted);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.author-bio-card__bio{font-size:13.5px;line-height:1.55;color:var(--text-secondary);margin:0}
.author-bio-card__expertise{font-size:12px;color:var(--text-muted);margin-top:2px}
.author-bio-card__label{color:var(--text-primary);font-weight:600}
.author-bio-card__links{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:12px}
.author-bio-card__link{color:var(--accent);text-decoration:none;font-weight:600}
.author-bio-card__link:hover{text-decoration:underline}
.author-bio-card__link--primary{margin-left:auto;color:var(--text-primary)}
@media (max-width:520px){
    .author-bio-card--rich{flex-direction:column;align-items:stretch;text-align:left}
    .author-bio-card__avatar{margin:0}
}

/* ═══════════════════════════════════════════════════════════════
   EDITORIAL STANDARDS PAGE — named editor cards + sidebar TOC
   ═══════════════════════════════════════════════════════════════ */
.editor-card{display:flex;gap:18px;align-items:flex-start;padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;margin:14px 0;scroll-margin-top:120px}
.editor-card__avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bg-elevated)}
.editor-card__body{min-width:0;flex:1}
.editor-card__name{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--text-primary);margin:0}
.editor-card__role{font-family:var(--font-display);font-size:11.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:2px 0 6px}
.editor-card__bio{font-size:13.5px;line-height:1.55;color:var(--text-secondary);margin:0 0 8px}
.editor-card__meta{font-size:12px;color:var(--text-muted);margin:6px 0}
.editor-card__meta strong{color:var(--text-primary)}
.editor-card__links{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;margin-top:6px}
.editor-card__links a{color:var(--accent);text-decoration:none;font-weight:600}
.editor-card__links a:hover{text-decoration:underline}
@media (max-width:520px){
    .editor-card{flex-direction:column;align-items:stretch}
}
.sidebar-toc{display:flex;flex-direction:column;gap:2px}
.sidebar-toc a{padding:6px 10px;border-radius:5px;color:var(--text-secondary);font-size:13px;text-decoration:none;transition:background .12s,color .12s}
.sidebar-toc a:hover{background:var(--bg-hover);color:var(--text-primary)}

/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE — content-visibility on off-screen match cards
   so styling/layout doesn't cost time outside the viewport
   ═══════════════════════════════════════════════════════════════ */
.matches-list .match-card,
.news-grid .news-card{content-visibility:auto;contain-intrinsic-size:auto 120px}

/* PHASE 4 — Programmatic SEO content block on team + player pages.
   Wraps the 4 question H2s + paragraphs with consistent card chrome
   matching the rest of the entity profile layout. */
.entity-seo-block{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 26px;box-shadow:var(--shadow-sm)}
.entity-seo-block .section-title{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--text-primary);margin:18px 0 8px;letter-spacing:-.005em}
.entity-seo-block .section-title:first-child{margin-top:0}
.entity-seo-block p{font-size:14.5px;line-height:1.7;color:var(--text-secondary);margin:0 0 12px}
.entity-seo-block p strong{color:var(--text-primary);font-weight:600}
.entity-seo-block a{color:var(--accent);text-decoration:none}
.entity-seo-block a:hover{text-decoration:underline}
@media (max-width:720px){
    .entity-seo-block{padding:18px 16px}
    .entity-seo-block .section-title{font-size:16px}
    .entity-seo-block p{font-size:14px}
}

/* ── Empty-state CTA (used on /predictions/ when no live picks) ─── */
.empty-cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:48px 28px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:32px;box-shadow:var(--shadow-sm)}
.empty-cta__icon{width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,102,0,.18) 0%,rgba(255,102,0,.04) 100%);border:1px solid rgba(255,102,0,.25);border-radius:50%;color:var(--accent)}
.empty-cta__title{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--text-primary);margin:0;letter-spacing:-.01em}
.empty-cta__text{max-width:560px;margin:0;font-size:14.5px;line-height:1.6;color:var(--text-secondary)}
.empty-cta__text strong{color:var(--text-primary)}
.empty-cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.empty-cta__actions .btn--lg{padding:11px 22px;font-size:14px;font-weight:700;letter-spacing:.02em}
.empty-cta__mod{margin:8px 0 0;font-size:12px;color:var(--text-muted)}
.empty-cta__mod a{color:var(--accent);text-decoration:none}
.empty-cta__mod a:hover{text-decoration:underline}
@media (max-width:480px){
    .empty-cta{padding:32px 18px}
    .empty-cta__title{font-size:18px}
    .empty-cta__actions .btn--lg{width:100%}
}

/* ── News single — TL;DR · entities · prev/next · reading time · archive chip ─── */
.news-tldr{margin:18px 0 22px;padding:16px 18px;background:linear-gradient(180deg, rgba(255,102,0,.08) 0%, rgba(255,102,0,.02) 100%);border:1px solid rgba(255,102,0,.25);border-left:4px solid var(--accent);border-radius:8px}
.news-tldr__label{font-family:var(--font-display);font-size:11px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.news-tldr__answer p{margin:0;font-size:15px;line-height:1.6;color:var(--text-primary);font-weight:500}

.article-reading-time{color:var(--text-muted);font-family:var(--font-mono);font-size:12px}

.article-entities{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:20px 0 12px;padding:12px 14px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px}
.article-entities__label{font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.article-entity-chip{display:inline-flex;align-items:center;padding:4px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;color:var(--text-primary);font-size:12px;font-weight:600;text-decoration:none;transition:border-color .15s,background .15s}
.article-entity-chip:hover{border-color:var(--accent);background:var(--bg-hover);color:var(--text-primary)}

.article-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.article-prevnext__item{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.article-prevnext__item:hover{border-color:var(--accent);background:var(--bg-hover)}
.article-prevnext__item--next{text-align:right;grid-column:2}
.article-prevnext__item--prev{grid-column:1}
.article-prevnext__label{font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.article-prevnext__title{font-size:13.5px;font-weight:600;color:var(--text-primary);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:720px){
    .article-prevnext{grid-template-columns:1fr}
    .article-prevnext__item--next{text-align:left;grid-column:1}
}

/* News archive chips (category / tag / date pages) */
.news-archive-chip{display:inline-block;padding:3px 10px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:4px;font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px}

/* Tag cloud (in news-tag sidebar) */
.news-tag-cloud{display:flex;flex-wrap:wrap;gap:6px}
.news-tag-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:20px;color:var(--text-secondary);font-size:12px;text-decoration:none;transition:border-color .15s,color .15s}
.news-tag-chip:hover{border-color:var(--accent);color:var(--text-primary)}
.news-tag-chip span{color:var(--text-muted);font-family:var(--font-mono);font-size:10.5px}

/* ── Best Sportsbooks for Betting (sidebar widget) ─── */
.sidebar-widget--sportsbooks .sw-sportsbook__list{display:flex;flex-direction:column;gap:10px}
.sw-sportsbook{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;transition:border-color .15s}
.sw-sportsbook:hover{border-color:var(--accent)}
.sw-sportsbook__top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px}
.sw-sportsbook__logo{display:flex;align-items:center;justify-content:flex-start;height:32px;min-width:0;flex:1;overflow:hidden;text-decoration:none}
.sw-sportsbook__img{max-height:30px;max-width:100%;width:auto;object-fit:contain}
.sw-sportsbook__img--light{display:none}
[data-theme="light"] .sw-sportsbook__img--light{display:block}
[data-theme="light"] .sw-sportsbook__img--dark{display:none}
.sw-sportsbook__name-fallback{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--text-primary)}
.sw-sportsbook__rating{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-mono);font-weight:700;font-size:11px;color:#facc15;flex-shrink:0;background:rgba(234,179,8,.1);padding:2px 6px;border-radius:3px;border:1px solid rgba(234,179,8,.25)}
.sw-sportsbook__rating svg{flex-shrink:0}
.sw-sportsbook__offer{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--text-primary);line-height:1.35;letter-spacing:.01em}
.sw-sportsbook__code{display:flex;align-items:center;gap:6px;font-size:11px}
.sw-sportsbook__code-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.sw-sportsbook__code code{font-family:var(--font-mono);background:var(--bg-card);border:1px dashed var(--border);padding:2px 6px;border-radius:3px;color:var(--accent);font-weight:700;font-size:11px}
.sw-sportsbook__cta{display:block;text-align:center;background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:8px 12px;border-radius:6px;text-decoration:none;transition:background .15s,transform .12s}
.sw-sportsbook__cta:hover{background:var(--accent-hover,var(--accent));transform:translateY(-1px);color:#fff}
.sw-sportsbook__disclaimer{margin:10px 0 0;padding:0;text-align:center;font-size:10px;color:var(--text-muted);letter-spacing:.02em}
.article-breaking-banner{background:var(--red);color:#fff;font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:1px;padding:6px 14px;border-radius:3px;display:inline-block;margin-bottom:14px}
.article-category{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px}
.article-title{font-family:var(--font-display);font-size:clamp(22px,3.5vw,36px);font-weight:800;line-height:1.2;margin:0 0 12px;color:var(--text-primary)}
.article-excerpt{font-size:17px;color:var(--text-secondary);line-height:1.6;margin:0 0 16px;border-left:3px solid var(--accent);padding-left:14px}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:24px;font-size:13px;color:var(--text-muted)}
.article-author{font-weight:600;color:var(--text-secondary)}
.article-source{color:var(--accent);font-weight:600}
.article-updated{font-size:11px;color:var(--text-muted)}
.article-hero-img{margin:0 0 28px;border-radius:var(--radius-md);overflow:hidden}
.article-hero-img img{width:100%;height:auto;display:block}
.article-content{font-size:15px;line-height:1.8;color:var(--text-secondary)}
.article-content h2{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text-primary);margin:28px 0 12px;padding-top:8px;border-top:1px solid var(--border)}
.article-content h3{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--text-primary);margin:20px 0 8px}
.article-content p{margin:0 0 16px}
.article-content a{color:var(--accent);text-decoration:underline}
.article-content ul,.article-content ol{padding-left:20px;margin:0 0 16px}
.article-content li{margin-bottom:6px}
.article-content blockquote{border-left:3px solid var(--accent);margin:20px 0;padding:12px 20px;background:var(--bg-elevated);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--text-secondary)}
.article-content img{max-width:100%;border-radius:var(--radius-sm)}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding-top:16px;border-top:1px solid var(--border)}
.article-tag{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);padding:4px 10px;border-radius:20px;font-size:12px;transition:all .15s}
.article-tag:hover{border-color:var(--border-accent);color:var(--accent)}
.article-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;padding:16px;background:var(--bg-elevated);border-radius:var(--radius-md)}
.article-share .share-btn{padding:7px 14px;border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-display);font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);transition:all .15s;width:auto;height:auto}
.article-share .share-btn:hover{border-color:var(--border-accent);color:var(--accent)}
.article-share .share-btn--twitter:hover{border-color:#1da1f2;color:#1da1f2}
.article-share .share-btn--reddit:hover{border-color:#ff4500;color:#ff4500}
.related-news-item{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border);color:var(--text-primary)}
.related-news-item:last-child{border-bottom:none}
.related-news-title{display:block;font-family:var(--font-display);font-size:13px;font-weight:600;line-height:1.3}
.related-news-date{display:block;font-size:11px;color:var(--text-muted);margin-top:3px}

/* ── League Hierarchy Breadcrumb ── */
.hierarchy-breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 0;margin-bottom:4px}
.hb-logo{width:20px;height:20px;object-fit:contain}
.hb-sep{color:var(--text-muted);font-size:12px}
.hb-item{font-size:12px;font-family:var(--font-display);font-weight:600;padding:2px 8px;border-radius:3px;transition:all .12s}
.hb-league{color:var(--accent);background:var(--accent-dim)}
.hb-league:hover{background:var(--accent);color:#fff}
.hb-serie{color:var(--text-secondary);background:var(--bg-elevated)}
.hb-serie:hover{color:var(--text-primary)}
.hb-tournament{color:var(--text-muted);background:var(--bg-elevated)}
.hb-tournament:hover{color:var(--text-primary)}

/* ── Featured Badge (on tournament cards) ── */
.featured-badge{background:var(--accent);color:#fff;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.5px;padding:4px 10px;border-radius:3px;display:inline-block;margin-bottom:8px}
.tournament-card--featured{border:1px solid var(--accent);background:var(--accent-dim)}
.tournament-card--featured:hover{border-color:var(--accent);background:var(--bg-elevated)}
.tournament-card-league{display:block;font-size:11px;color:var(--accent);font-family:var(--font-display);font-weight:700;letter-spacing:.3px;margin-bottom:2px}
.tournament-logo-wrap{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.tournament-logo-fallback{font-size:24px}

/* ── Featured Tournament Section (matches/live pages) ── */
.featured-tournament-section{--ft-gradient:linear-gradient(180deg,rgba(0,0,0,.55) 0%,var(--bg-elevated) 100%);background:var(--bg-elevated);border:1px solid var(--border-accent);border-radius:var(--radius-lg);padding:16px;margin-bottom:24px;max-width:100%;overflow:hidden;box-sizing:border-box}
[data-theme="light"] .featured-tournament-section{--ft-gradient:linear-gradient(180deg,rgba(255,255,255,.55) 0%,var(--bg-elevated) 100%)}
.featured-tourn-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.ft-logo{width:48px;height:48px;object-fit:contain}
.ft-info{flex:1;min-width:0}
.ft-league{display:block;font-size:11px;color:var(--accent);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.ft-name{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text-primary)}
.ft-name a{color:var(--text-primary)}
.ft-name a:hover{color:var(--accent)}
.ft-prize{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--yellow);white-space:nowrap}
.ft-group-label{font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.8px;text-transform:uppercase;padding:8px 4px 4px;margin-top:4px}

/* ── Featured Tournament Sidebar Widget ── */
.featured-sidebar-widget{}
.ft-sidebar-link{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);margin-bottom:8px;color:var(--text-primary)}
.ft-sidebar-link:hover{color:var(--accent)}

/* ── Player Rating Badge ── */
.player-rating-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 20px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);min-width:120px;text-align:center;margin-left:auto}
.rating-label{font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.rating-value{font-family:var(--font-mono);font-size:48px;font-weight:700;line-height:1}

/* ── Stat Cards ── */
.stats-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:4px}
.stat-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;text-align:center;display:flex;flex-direction:column;gap:4px}
.stat-card-value{font-family:var(--font-mono);font-size:24px;font-weight:700;color:var(--text-primary)}
.stat-card-label{font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.stat-card-desc{font-size:10px;color:var(--text-muted)}

/* ── Match Hero ── */
.match-hero{background:linear-gradient(135deg,var(--bg-surface) 0%,var(--bg-elevated) 100%);border-bottom:1px solid var(--border);padding:32px 0}
.match-hero--live{background:linear-gradient(135deg,#1a0505 0%,var(--bg-elevated) 100%);border-bottom-color:var(--red)}
.match-hero--live::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);animation:pulse 2s infinite}
.match-context{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:13px;flex-wrap:wrap}
.context-league-logo{width:20px;height:20px;object-fit:contain}
.context-link{color:var(--text-secondary);font-family:var(--font-display);font-weight:600}
.context-link:hover{color:var(--accent)}
.context-sep{color:var(--text-muted)}
.context-format{background:var(--bg-elevated);border:1px solid var(--border);padding:2px 8px;border-radius:3px;font-family:var(--font-mono);font-size:11px;font-weight:700}

/* ── Entity Hero ── */
.entity-hero{background:linear-gradient(135deg,var(--bg-surface) 0%,var(--bg-elevated) 100%);border-bottom:1px solid var(--border);padding:28px 0}
.entity-hero-content{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.entity-hero-logo{flex-shrink:0}
.entity-hero-info{flex:1;min-width:0}
.entity-hero-name{font-family:var(--font-display);font-size:clamp(22px,4vw,36px);font-weight:800;margin:4px 0;color:var(--text-primary)}
.entity-hero-sub{font-size:13px;color:var(--text-muted);font-family:var(--font-display);font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.entity-hero-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.player-hero-avatar{width:100px;height:100px;border-radius:12px;object-fit:cover;border:2px solid var(--border)}

/* meta-tag helpers */
.meta-tag{display:inline-flex;align-items:center;gap:4px;background:var(--bg-elevated);border:1px solid var(--border);padding:3px 10px;border-radius:3px;font-family:var(--font-display);font-size:11px;font-weight:600;color:var(--text-secondary);white-space:nowrap}
.meta-tag--live{border-color:var(--red);color:var(--red);background:rgba(231,76,60,.1)}
.meta-tag--team{color:var(--accent);border-color:var(--border-accent);background:var(--accent-dim)}
.meta-tag--tier,.tier-s{background:#ffd700;color:#000}
.tier-a{background:#e67e22;color:#fff}
.tier-b{background:#7f8c8d;color:#fff}
.tier-c,.tier-d{background:var(--bg-elevated);color:var(--text-muted)}

/* ── Breadcrumb Bar ── */
.breadcrumb-bar{background:var(--bg-surface);border-bottom:1px solid var(--border);padding:10px 0}
.breadcrumb-bar .container{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--text-muted)}
.breadcrumb-bar a{color:var(--text-secondary);transition:color .12s}
.breadcrumb-bar a:hover{color:var(--accent)}
.breadcrumb-bar .sep{color:var(--text-muted)}

/* ── Info list (sidebar bio) ── */
.info-list{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;margin:0;padding:0}
.info-list dt{font-weight:700;color:var(--text-muted);font-family:var(--font-display);font-size:11px;text-transform:uppercase;letter-spacing:.3px;align-self:center}
.info-list dd{color:var(--text-primary);margin:0;align-self:center}
.info-list dd a{color:var(--accent)}

/* ── Subsection labels ── */
.subsection-label{font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);padding:10px 4px 4px;margin-top:4px;border-top:1px solid var(--border)}

/* ── Roster cards ── */
.roster-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.roster-header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--bg-surface)}
.roster-team-link{font-family:var(--font-display);font-weight:700;color:var(--text-primary);font-size:14px}
.roster-team-link:hover{color:var(--accent)}
.roster-players{display:flex;flex-direction:column}
.roster-player-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);color:var(--text-primary);transition:background .12s;font-size:13px}
.roster-player-row:last-child{border-bottom:none}
.roster-player-row:hover{background:var(--bg-hover)}
.roster-player-info{flex:1;min-width:0}
.roster-player-name{font-family:var(--font-display);font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-player-nat{font-size:14px}
.roster-player-role{font-size:11px;color:var(--text-muted);text-transform:capitalize;white-space:nowrap}
.player-avatar-placeholder{width:40px;height:40px;background:var(--bg-hover);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--text-muted);flex-shrink:0}

/* ── Serie rows ── */
.series-list{display:flex;flex-direction:column;gap:4px}
.serie-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);transition:all .12s;color:var(--text-primary)}
.serie-row:hover{background:var(--bg-hover);border-color:var(--border-accent)}
.serie-row-img{width:28px;height:28px;object-fit:contain;flex-shrink:0}
.serie-row-info{flex:1;min-width:0}
.serie-row-name{display:block;font-family:var(--font-display);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serie-row-league{display:block;font-size:11px;color:var(--text-muted);margin-top:1px}
.serie-row-dates{font-size:12px;color:var(--text-muted);white-space:nowrap;text-align:right}
.serie-row-arrow{color:var(--text-muted);font-size:16px;flex-shrink:0}

/* ── Serie tournament rows ── */
.serie-tournament-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);transition:all .12s;color:var(--text-primary);margin-bottom:4px}
.serie-tournament-row:hover{background:var(--bg-hover);border-color:var(--border-accent)}
.st-name{flex:1;font-family:var(--font-display);font-weight:600;font-size:14px}
.st-prize{font-size:12px;color:var(--yellow);font-weight:700;font-family:var(--font-display)}
.st-arrow{color:var(--text-muted);font-size:16px;flex-shrink:0}

/* ── Leagues grid ── */
.leagues-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.league-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;display:flex;align-items:center;gap:12px;transition:all .15s;color:var(--text-primary)}
.league-card:hover{border-color:var(--border-accent);background:var(--bg-elevated);transform:translateY(-1px)}
.league-card-logo{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.league-card-logo img{width:48px;height:48px;object-fit:contain}
.league-logo-placeholder{font-size:32px}
.league-card-info h3{font-family:var(--font-display);font-size:14px;font-weight:700;margin:0 0 3px;color:var(--text-primary)}

/* ── Teams grid ── */
.teams-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.team-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:all .15s;color:var(--text-primary);text-align:center}
.team-card:hover{border-color:var(--border-accent);transform:translateY(-2px);background:var(--bg-elevated)}
.team-card-name{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text-primary)}
.team-card-location{font-size:12px;color:var(--text-muted)}
.team-card-players{font-size:11px;color:var(--text-muted)}

/* ── Players table ── */
.players-database{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.players-table-header{display:grid;padding:10px 16px;font-size:11px;font-weight:700;font-family:var(--font-display);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--bg-elevated)}
.player-row{display:grid;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);transition:background .12s;color:var(--text-primary);font-size:13px;text-decoration:none}
.player-row:hover{background:var(--bg-hover)}
.player-info{display:flex;flex-direction:column;gap:2px}
.player-nickname{font-family:var(--font-display);font-weight:700;font-size:14px}
.player-nation{font-size:11px;color:var(--text-muted)}
.player-realname{display:block;font-size:11px;color:var(--text-muted)}
.player-team{display:flex;align-items:center;gap:6px;font-size:13px}
.player-role{font-size:12px;color:var(--text-muted);text-transform:capitalize}

/* ── Player/Team table column layouts (class-driven for mobile override) ── */
/* 8-col: #, Player, Team, Rating, K/D, ADR, KAST, HS%  — page-players, cs2-stats */
.ptable--8col .players-table-header,
.ptable--8col .player-row{grid-template-columns:32px 1fr 100px 58px 52px 52px 48px 48px}
/* 7-col: #, Player, Team, Rating, K/D, ADR, KAST  — leaderboard players */
.ptable--7col .players-table-header,
.ptable--7col .player-row{grid-template-columns:32px 1fr 100px 58px 52px 52px 48px}
/* 6-col: #, Team, Matches, W-L, Win%, Rating  — leaderboard teams */
.ptable--teams .players-table-header,
.ptable--teams .player-row{grid-template-columns:32px 1fr 65px 65px 65px 60px}
/* 6-col: Team, W, L, Win%, ADR, Rating — tournament team stats */
.ptable--tourn-teams .players-table-header,
.ptable--tourn-teams .player-row{grid-template-columns:1fr 48px 48px 58px 58px 58px}
/* 7-col: Player, K, D, A, ADR, Rating, KAST — tournament player stats + recent match perf */
.ptable--tourn-players .players-table-header,
.ptable--tourn-players .player-row{grid-template-columns:1fr 48px 48px 48px 58px 62px 58px}
/* 8-col: Map, Maps, K, D, A, ADR, Rating, KAST — player per-map stats */
.ptable--mapstats .players-table-header,
.ptable--mapstats .player-row{grid-template-columns:100px 48px 48px 48px 48px 58px 62px 55px}

/* Mobile: compact tables — show rank + name + rating only */
@media(max-width:768px){
    .ptable--8col .players-table-header,
    .ptable--8col .player-row{grid-template-columns:26px 1fr 44px 44px;padding:8px 10px}
    /* hide Team(3), Maps(4), K-D Diff(5), ADR(7) — show #, Player, K/D, Rating */
    .ptable--8col .players-table-header>span:nth-child(3),
    .ptable--8col .player-row>*:nth-child(3),
    .ptable--8col .players-table-header>span:nth-child(4),
    .ptable--8col .player-row>*:nth-child(4),
    .ptable--8col .players-table-header>span:nth-child(5),
    .ptable--8col .player-row>*:nth-child(5),
    .ptable--8col .players-table-header>span:nth-child(7),
    .ptable--8col .player-row>*:nth-child(7){display:none}

    .ptable--7col .players-table-header,
    .ptable--7col .player-row{grid-template-columns:26px 1fr 48px 44px 44px;padding:8px 10px}
    /* hide Team(3), KAST(7) */
    .ptable--7col .players-table-header>span:nth-child(3),
    .ptable--7col .player-row>*:nth-child(3),
    .ptable--7col .players-table-header>span:nth-child(7),
    .ptable--7col .player-row>*:nth-child(7){display:none}

    .ptable--teams .players-table-header,
    .ptable--teams .player-row{grid-template-columns:26px 1fr 52px 52px;padding:8px 10px}
    /* hide Matches(3), W-L(4) on mobile — show #, Team, Win%, Rating */
    .ptable--teams .players-table-header>span:nth-child(3),
    .ptable--teams .player-row>*:nth-child(3),
    .ptable--teams .players-table-header>span:nth-child(4),
    .ptable--teams .player-row>*:nth-child(4){display:none}

    .ptable--tourn-teams .players-table-header,
    .ptable--tourn-teams .player-row{grid-template-columns:1fr 36px 36px 48px 48px;padding:8px 10px}
    /* hide ADR(5) */
    .ptable--tourn-teams .players-table-header>span:nth-child(5),
    .ptable--tourn-teams .player-row>*:nth-child(5){display:none}

    .ptable--tourn-players .players-table-header,
    .ptable--tourn-players .player-row{grid-template-columns:1fr 36px 36px 48px 48px;padding:8px 10px}
    /* hide A(4), KAST(7) */
    .ptable--tourn-players .players-table-header>span:nth-child(4),
    .ptable--tourn-players .player-row>*:nth-child(4),
    .ptable--tourn-players .players-table-header>span:nth-child(7),
    .ptable--tourn-players .player-row>*:nth-child(7){display:none}

    .ptable--mapstats .players-table-header,
    .ptable--mapstats .player-row{grid-template-columns:70px 36px 36px 36px 48px 48px;padding:8px 10px}
    /* hide A(5), KAST(8) */
    .ptable--mapstats .players-table-header>span:nth-child(5),
    .ptable--mapstats .player-row>*:nth-child(5),
    .ptable--mapstats .players-table-header>span:nth-child(8),
    .ptable--mapstats .player-row>*:nth-child(8){display:none}

    /* Shared mobile table typography */
    .players-table-header{padding:8px 10px;font-size:9px;letter-spacing:.3px}
    .player-row{padding:8px 10px;font-size:11px}
    .player-info-cell{gap:8px}
    .player-info-cell__name{font-size:12px}
    .player-info-cell img,
    .player-info-cell .team-logo,
    .player-table-avatar,
    .player-avatar-fallback{width:28px!important;height:28px!important}
    .player-realname{display:none}
    .rank-cell{font-size:11px}
    .stat-cell{font-size:10px}
    .stat-cell--primary{font-size:11px}
    .team-info-cell{font-size:10px;gap:4px}
    .team-info-cell img{width:14px!important;height:14px!important}
    /* Tournament table stat cells on mobile */
    .ptable--tourn-teams .player-row span,
    .ptable--tourn-players .player-row span{font-size:11px}
}
@media(max-width:400px){
    .ptable--8col .players-table-header,
    .ptable--8col .player-row{grid-template-columns:22px 1fr 42px}
    /* Also hide K/D(6) on very small — show #, Player, Rating only */
    .ptable--8col .players-table-header>span:nth-child(6),
    .ptable--8col .player-row>*:nth-child(6){display:none}

    .ptable--7col .players-table-header,
    .ptable--7col .player-row{grid-template-columns:22px 1fr 42px}
    .ptable--7col .players-table-header>span:nth-child(5),
    .ptable--7col .player-row>*:nth-child(5),
    .ptable--7col .players-table-header>span:nth-child(6),
    .ptable--7col .player-row>*:nth-child(6){display:none}

    .ptable--teams .players-table-header,
    .ptable--teams .player-row{grid-template-columns:22px 1fr 42px}
    /* Also hide Win Rate(5) on very small */
    .ptable--teams .players-table-header>span:nth-child(5),
    .ptable--teams .player-row>*:nth-child(5){display:none}

    .ptable--tourn-teams .players-table-header,
    .ptable--tourn-teams .player-row{grid-template-columns:1fr 30px 30px 42px}
    /* Also hide Rating(6) */
    .ptable--tourn-teams .players-table-header>span:nth-child(6),
    .ptable--tourn-teams .player-row>*:nth-child(6){display:none}

    .ptable--tourn-players .players-table-header,
    .ptable--tourn-players .player-row{grid-template-columns:1fr 30px 30px 42px}
    /* Also hide ADR(5) */
    .ptable--tourn-players .players-table-header>span:nth-child(5),
    .ptable--tourn-players .player-row>*:nth-child(5){display:none}

    .ptable--mapstats .players-table-header,
    .ptable--mapstats .player-row{grid-template-columns:60px 30px 30px 42px}
    /* Also hide D(4), ADR(6) */
    .ptable--mapstats .players-table-header>span:nth-child(4),
    .ptable--mapstats .player-row>*:nth-child(4),
    .ptable--mapstats .players-table-header>span:nth-child(6),
    .ptable--mapstats .player-row>*:nth-child(6){display:none}
}

/* ── Bracket styles ── */
.brackets-container{display:flex;gap:0;min-width:600px;padding-bottom:10px}
.bracket-round{display:flex;flex-direction:column;min-width:200px;flex-shrink:0}
.bracket-round-title{font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);text-align:center;padding:8px 12px;background:var(--bg-elevated);border:1px solid var(--border);border-bottom:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.bracket-matches{display:flex;flex-direction:column;gap:8px;padding:10px 8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:0 0 var(--radius-sm) var(--radius-sm);flex:1;justify-content:space-around}
.bracket-match{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .12s;display:flex;flex-direction:column}
.bracket-match:hover{border-color:var(--border-accent)}
.bracket-team{display:flex;align-items:center;gap:6px;padding:7px 10px;font-size:12px;border-bottom:1px solid var(--border)}
.bracket-team:last-child{border-bottom:none}
.bracket-team--win{background:rgba(39,174,96,.1);color:var(--green)}
.bracket-score{font-family:var(--font-mono);font-weight:700;font-size:13px;margin-left:auto;padding-left:8px}

/* ── Standings ── */
.standings-table{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.standings-header{display:grid;padding:10px 14px;font-size:11px;font-weight:700;font-family:var(--font-display);color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid var(--border);background:var(--bg-elevated)}
.standings-row{display:grid;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;transition:background .1s}
.standings-row:hover{background:var(--bg-hover)}
.standings-rank{font-family:var(--font-mono);font-weight:700;color:var(--text-muted);text-align:center}
.standings-team{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600}
.standings-team a{color:var(--text-primary)}
.standings-team a:hover{color:var(--accent)}
.standings-wins{color:var(--green);font-family:var(--font-mono);font-weight:700;text-align:center}
.standings-losses{color:var(--red);font-family:var(--font-mono);text-align:center}
.standings-diff{font-family:var(--font-mono);font-weight:700;text-align:center}
.text-green{color:var(--green)}
.text-red{color:var(--red)}

/* ── Tab Nav ── */
.tab-nav{display:flex;gap:0;border-bottom:1px solid var(--border);overflow-x:auto}
.tab-btn{background:transparent;border:none;border-bottom:2px solid transparent;padding:10px 18px;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:all .15s;display:flex;align-items:center;gap:6px;margin-bottom:-1px}
.tab-btn:hover{color:var(--text-primary)}
.tab-btn.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-panel{display:none}
.tab-panel.is-active{display:block}
.tab-badge{background:var(--red);color:#fff;font-size:10px;font-weight:800;padding:1px 6px;border-radius:10px;font-family:var(--font-mono)}

/* Homepage tab panels — consistent styling */
.hp-tab-panel{background:var(--bg-surface);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);padding:18px;overflow:hidden;box-sizing:border-box}
.hp-tab-cta{margin-top:18px;text-align:center}
.hp-pred-header{margin-top:28px}

/* ── Sidebar widgets ── */
.sidebar-widget{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px;margin-bottom:0}
.widget-title{font-family:var(--font-display);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.sidebar-team{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-primary);transition:color .12s}
.sidebar-team:last-child{border-bottom:none}
.sidebar-team:hover{color:var(--accent)}
.team-location{font-size:11px;color:var(--text-muted);margin-left:auto}

/* ── Sidebar Ranking Widget ── */
.sb-ranking { display: flex; flex-direction: column; }
.sb-ranking__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    transition: color .12s, background .12s;
    border-radius: var(--radius-sm);
}
.sb-ranking__row:last-child { border-bottom: none; }
.sb-ranking__row:hover { color: var(--accent); background: var(--bg-hover); }
.sb-ranking__rank {
    width: 20px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}
.sb-ranking__row:nth-child(1) .sb-ranking__rank { color: var(--accent); }
.sb-ranking__row:nth-child(2) .sb-ranking__rank { color: var(--text-secondary); }
.sb-ranking__row:nth-child(3) .sb-ranking__rank { color: var(--text-secondary); }
.sb-ranking__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-elevated);
}
.sb-ranking__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.sb-ranking__more {
    display: block;
    text-align: center;
    padding: 8px 0 0;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: color .12s;
}
.sb-ranking__more:hover { color: var(--accent-hover); }

/* ── Match card lost team ── */
.match-team--lost{opacity:.5}

/* ── Hero stats ── */
.hero-banner{background:linear-gradient(135deg,#0a0a0c 0%,#111115 100%);border-bottom:1px solid var(--border);padding:32px 0}
.hero-content{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hero-text h1{font-family:var(--font-display);font-size:clamp(22px,4vw,36px);font-weight:800;color:var(--text-primary);margin:0 0 6px}
.hero-text p{font-size:14px;color:var(--text-muted);margin:0}
.hero-stats{display:flex;gap:24px;flex-wrap:wrap}
.hero-stat{text-align:center}
.stat-number{display:block;font-family:var(--font-mono);font-size:32px;font-weight:700;color:var(--text-primary);line-height:1}
.stat-label{display:block;font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}

/* ── Page pagination ── */
.cs2bet-pagination{display:flex;gap:6px;justify-content:center;padding:24px 0;flex-wrap:wrap}
.page-btn{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);padding:7px 13px;border-radius:var(--radius-sm);font-family:var(--font-display);font-size:13px;font-weight:600;transition:all .12s}
.page-btn:hover{background:var(--bg-hover);border-color:var(--border-accent);color:var(--text-primary)}
.page-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── Misc ── */
.py-lg{padding-top:28px;padding-bottom:28px}
.page-layout{display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:start}
.content-main{}
.content-sidebar{}
.section-title{font-family:var(--font-display);font-size:18px;font-weight:700;margin:0 0 14px;color:var(--text-primary);display:flex;align-items:center;gap:8px}
.cs2bet-empty{text-align:center;padding:48px 20px;background:var(--bg-surface);border:1px dashed var(--border);border-radius:var(--radius-md)}
.cs2bet-empty .empty-icon{font-size:40px;margin-bottom:12px}
.cs2bet-empty p{color:var(--text-muted);font-size:14px;margin:0}
.cs2bet-error-box{background:rgba(231,76,60,.08);border:1px solid rgba(231,76,60,.3);padding:16px 20px;border-radius:var(--radius-md);display:flex;gap:14px;align-items:flex-start}
.cs2bet-error-box strong{font-family:var(--font-display);font-size:14px;color:var(--text-primary)}
.cs2bet-error-box p{font-size:13px;color:var(--text-secondary);margin:4px 0 0}

/* ── Responsive ── */
@media(max-width:900px){
  .page-layout{grid-template-columns:1fr}
  .page-layout--article{grid-template-columns:1fr}
  .entity-hero-content{gap:14px}
  .player-rating-badge{margin-left:0}
  .news-slider{height:280px}
  .news-slide-content{padding:16px 18px}
  .hero-stats{gap:14px}
  .stat-number{font-size:24px}
}
@media(max-width:600px){
  .news-grid{grid-template-columns:1fr}
  .teams-grid{grid-template-columns:repeat(2,1fr)}
  .brackets-container{min-width:0}
  .match-hero .match-vs-display{font-size:28px}
}

/* ══════════════════════════════════════════════
   STREAM PLAYER
═══════════════════════════════════════════════ */
.stream-section{padding:16px 0 0}
.stream-picker{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.streams-label{font-size:11px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.stream-picker-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s;font-family:inherit;line-height:1.2}
.stream-picker-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent)}
.stream-picker-btn.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}
.stream-picker-btn svg{flex-shrink:0}
.stream-lang{font-size:10px;opacity:.65;background:rgba(255,255,255,.15);padding:1px 4px;border-radius:3px;margin-left:3px}
.stream-player-wrap{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px;background:#000;margin-top:8px}
.stream-player-wrap iframe,.stream-player-wrap>div{position:absolute;top:0;left:0;width:100%;height:100%}

/* ══════════════════════════════════════════════
   FEATURED TOURNAMENT IMPROVEMENTS
═══════════════════════════════════════════════ */
.ft-group-label--live{color:var(--red)!important}
.ft-view-all{display:block;text-align:center;font-size:12px;color:var(--accent);padding:10px 0 4px;font-weight:600;transition:opacity .15s}
.ft-view-all:hover{opacity:.75}

/* ══════════════════════════════════════════════
   SIDEBAR ITEM – NEWS VARIANT
═══════════════════════════════════════════════ */
.sidebar-item--news{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.sidebar-item--news:last-child{border-bottom:none}
.sidebar-item--news .sidebar-item-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.sidebar-item--news .sidebar-item-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:12px;color:var(--text-primary)}
.sidebar-item--news .sidebar-item-sub{font-size:11px;color:var(--text-muted)}

/* ══════════════════════════════════════════════
   MATCH CARD STATUS BADGE (hidden, for JS)
═══════════════════════════════════════════════ */
.match-card .status-badge{position:absolute;top:6px;right:6px;font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;display:none}
.match-card{position:relative}

/* ── News Slider (second block merged/cleaned) ── */
.slider-nav{display:none}  /* old nav class — hidden */

/* ══════════════════════════════════════════════
   WS STATUS STATES
═══════════════════════════════════════════════ */
.ws-polling .ws-dot{background:var(--text-muted);animation:none}
.ws-polling #ws-status-text{color:var(--text-muted)}
.ws-connected .ws-dot{background:var(--green)}
.ws-connected #ws-status-text{color:var(--green)}
.ws-error .ws-dot{background:var(--red);animation:none}

/* ══════════════════════════════════════════════
   ROUNDS GRID
═══════════════════════════════════════════════ */
.rounds-grid{display:flex;flex-wrap:wrap;gap:4px;padding:8px 0}
.round-row{display:flex;align-items:center;gap:6px;background:var(--bg-elevated);border-radius:4px;padding:4px 8px;font-size:11px}
.round-num{font-family:var(--font-mono);color:var(--text-muted);width:20px;text-align:center;flex-shrink:0}
.round-winner{font-weight:700;font-family:var(--font-display)}
.winner-ct{color:#5bc8f5}
.winner-t{color:#f5c518}
.round-reason{color:var(--text-muted);text-transform:capitalize;font-size:10px}

/* ══════════════════════════════════════════════
   MODERATOR IMAGE UPLOAD
═══════════════════════════════════════════════ */
#thumb-img{width:100%;max-height:140px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:block}

/* ============================================================
   PREDICTIONS
   ============================================================ */

/* ── Prediction listing cards ─────────────────────────────── */
.prediction-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.prediction-card{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.prediction-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-accent)}
.prediction-card__header{background:var(--bg-elevated);padding:14px 16px;border-bottom:1px solid var(--border)}
.prediction-card__meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted);margin-bottom:10px;flex-wrap:wrap}
.prediction-card__teams{display:flex;align-items:center;justify-content:space-between;gap:10px}
.prediction-card__team{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.prediction-card__team--right{justify-content:flex-end}
.prediction-card__team-name{font-family:var(--font-display);font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prediction-card__team-name--pick{color:var(--green)}
.prediction-card__vs{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);flex-shrink:0}
.prediction-card__body{padding:16px;flex:1;display:flex;flex-direction:column;gap:12px}
.prediction-card__title{font-family:var(--font-display);font-size:15px;font-weight:700;margin:0;line-height:1.35}
.prediction-card__title a{color:var(--text-primary);text-decoration:none}
.prediction-card__title a:hover{color:var(--accent)}
.prediction-card__excerpt{font-size:13px;color:var(--text-secondary);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.prediction-card__pick{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--radius-sm);margin-top:auto}
.prediction-card__pick--default{background:rgba(0,200,83,.08);border:1px solid rgba(0,200,83,.2)}
.prediction-card__pick--correct{background:rgba(0,200,83,.1);border:1px solid rgba(0,200,83,.3)}
.prediction-card__pick--wrong{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25)}
.prediction-card__pick-label{font-size:12px;color:var(--text-muted)}
.prediction-card__pick-name{font-family:var(--font-display);font-weight:700;font-size:13px}
.prediction-card__pick-name--correct{color:var(--green)}
.prediction-card__pick-name--wrong{color:var(--red)}
.prediction-card__pick-name--default{color:var(--green)}
.prediction-card__pick-conf{margin-left:auto;font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}
.prediction-card__footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.prediction-card__footer-link{font-size:12px;color:var(--text-muted);text-decoration:none;transition:color .15s}
.prediction-card__footer-link:hover{color:var(--accent)}

/* Result badges (shared) */
.prediction-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:3px;line-height:1.6}
.prediction-badge--correct{background:rgba(0,200,83,.15);color:var(--green);border:1px solid rgba(0,200,83,.3)}
.prediction-badge--wrong{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.25)}
.prediction-badge--ai{background:rgba(59,130,246,.12);color:var(--blue);border:1px solid rgba(59,130,246,.25)}
.prediction-badge--expert{background:rgba(255,102,0,.12);color:var(--accent);border:1px solid rgba(255,102,0,.25)}

/* ── Match-page prediction widget ─────────────────────────── */
.prediction-widget{background:var(--bg-card);border:1px solid var(--border-accent);border-radius:var(--radius-md);overflow:hidden;margin-bottom:24px}
.prediction-widget__header{background:linear-gradient(90deg,rgba(255,102,0,.12),transparent);padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.prediction-widget__header-icon{font-size:16px}
.prediction-widget__header-title{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.3px}
.prediction-widget__header-link{margin-left:auto;font-size:13px;color:var(--accent);text-decoration:none}
.prediction-widget__header-link:hover{text-decoration:underline}
.prediction-widget__body{padding:16px}
.prediction-widget__teams{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.prediction-widget__team{flex:1;display:flex;align-items:center;gap:8px}
.prediction-widget__team--right{justify-content:flex-end}
.prediction-widget__team-name{font-family:var(--font-display);font-size:16px;font-weight:700}
.prediction-widget__team-name--pick{color:var(--green)}
.prediction-widget__team-name--muted{color:var(--text-secondary)}
.prediction-widget__winprob{display:flex;flex-direction:column;align-items:center;gap:2px}
.prediction-widget__winprob-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.prediction-widget__winprob-values{display:flex;gap:3px;align-items:center}
.prediction-widget__winprob-pct{font-family:var(--font-mono);font-size:18px;font-weight:700}
.prediction-widget__winprob-pct--lead{color:var(--green)}
.prediction-widget__winprob-pct--trail{color:var(--text-muted)}
.prediction-widget__winprob-sep{color:var(--text-muted);font-size:12px}
.prediction-widget__confbar{height:4px;background:var(--bg-elevated);border-radius:2px;overflow:hidden;margin-bottom:14px;display:flex}
.prediction-widget__confbar-fill{background:var(--green);transition:width .5s}
.prediction-widget__confbar-rest{flex:1;background:var(--red)}
.prediction-widget__pros-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.prediction-widget__pro-item{font-size:13px;color:var(--text-secondary);display:flex;gap:5px;margin-bottom:4px;line-height:1.4}
.prediction-widget__pro-icon{flex-shrink:0}
.prediction-widget__pro-icon--pos{color:var(--green)}
.prediction-widget__pro-icon--neg{color:var(--red)}
.prediction-widget__summary{font-size:14px;color:var(--text-secondary);margin:0 0 14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prediction-widget__pick-mark{color:var(--green);font-weight:700;margin:0 2px}
.prediction-widget__cta-analysis{display:block;text-align:center;margin-top:4px}
.prediction-widget__bet-ribbon{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:linear-gradient(90deg,var(--accent),#e55a00);color:#fff;font-family:var(--font-display);font-size:14px;font-weight:700;text-decoration:none;letter-spacing:.3px;transition:filter .2s}
.prediction-widget__bet-ribbon:hover{filter:brightness(1.1);color:#fff}
.prediction-widget__bet-ribbon-text{white-space:nowrap}
.prediction-widget__bet-ribbon-logo{height:28px;width:auto;max-width:120px;object-fit:contain;flex-shrink:0}
.prediction-widget__bet-ribbon-name{text-decoration:underline}

@media(max-width:640px){
    .prediction-cards-grid{grid-template-columns:1fr}
    .prediction-widget__pros-grid{grid-template-columns:1fr}
    .prediction-widget__teams{flex-direction:column;gap:8px}
    .prediction-widget__winprob{flex-direction:row;gap:8px}
}

/* Single page – analytics body */
.prediction-analytics p           { margin-bottom: 1em; }
.prediction-analytics ul,
.prediction-analytics ol           { padding-left: 1.4em; margin-bottom: 1em; }
.prediction-analytics li           { margin-bottom: .3em; }
.prediction-analytics strong       { color: var(--text-primary); }
.prediction-analytics h2           { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 1.4em 0 .5em; color: var(--text-primary); }
.prediction-analytics h3           { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin: 1.2em 0 .4em; color: var(--accent); }

/* Win/Loss form chart */
.form-chart                        { display: flex; flex-direction: column; gap: 8px; }
.form-chart__label                 { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--text-primary); }
.form-chart__stats                 { display: flex; gap: 12px; font-size: 13px; font-family: var(--font-mono); flex-wrap: wrap; }
.form-w                            { color: var(--green); font-weight: 700; }
.form-d                            { color: var(--yellow); }
.form-l                            { color: var(--red); }
.form-pct                          { color: var(--text-muted); margin-left: auto; }
.form-chart__blocks                { display: flex; gap: 3px; flex-wrap: wrap; }
.form-block                        { width: 16px; height: 16px; border-radius: 3px; transition: opacity .1s; cursor: default; }
.form-block:hover                  { opacity: .7; }
.form-chart__bar                   { display: flex; height: 8px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; margin-top: 4px; }

/* Compact match-page widget — see full styles above in prediction section */

/* H2H row hover */
.h2h-match-row:hover               { background: var(--bg-hover); }

/* Moderator prediction form */
.pred-match-row:hover              { background: var(--bg-hover) !important; }
.pred-winner-opt                   { user-select: none; }
.pred-winner-opt:hover             { border-color: rgba(0,200,83,.4) !important; }
.mod-editor                        { background: var(--bg-elevated); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 12px; font-size: 14px; line-height: 1.7; color: var(--text-primary); min-height: 160px; outline: none; }
.mod-editor:focus                  { border-color: var(--accent); }
.mod-editor-toolbar                { display: flex; gap: 4px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 6px 8px; }
.ed-btn                            { padding: 3px 8px; font-size: 12px; font-family: var(--font-display); font-weight: 600; color: var(--text-secondary); background: var(--bg-hover); border-radius: 3px; transition: all .12s; border: 1px solid transparent; }
.ed-btn:hover                      { color: var(--text-primary); background: var(--bg-surface); border-color: var(--border); }

/* ── Prediction Single — Hero + Match Card ── */
.pred-title {
    font-family: var(--font-display); font-size: 22px; font-weight: 800;
    line-height: 1.3; color: var(--text-primary); margin: 0 0 10px;
}
.pred-intro {
    margin: 0 0 16px !important; padding: 14px 18px !important;
}
.pred-intro p { margin: 0; }

/* Teams row — desktop */
.pred-teams-row {
    padding: 24px; display: grid;
    grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.pred-team { display: flex; align-items: center; gap: 12px; }
.pred-team--right { flex-direction: row-reverse; }
.pred-team--right .pred-team__info { text-align: right; }
.pred-team--right .pred-team__badges { justify-content: flex-end; }
.pred-team__logo {
    width: 48px; height: 48px; object-fit: contain; flex-shrink: 0;
}
.pred-team__logo--placeholder {
    background: var(--bg-elevated); border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.pred-team__name {
    font-family: var(--font-display); font-size: 20px; font-weight: 800;
    line-height: 1.15; color: var(--text-primary);
}
.pred-team__badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.pred-team__loc { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

.pred-badge {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 3px;
    line-height: 1.4; white-space: nowrap;
}
.pred-badge--pick { background: rgba(255,165,0,.15); color: var(--accent); border: 1px solid rgba(255,165,0,.3); }
.pred-badge--won  { background: rgba(0,200,83,.15);  color: var(--green);  border: 1px solid rgba(0,200,83,.3); }
.pred-badge--lost { background: rgba(239,68,68,.12); color: var(--red);    border: 1px solid rgba(239,68,68,.25); }

.pred-center { text-align: center; min-width: 60px; }
.pred-score {
    font-family: var(--font-mono); font-size: 30px; font-weight: 800;
    color: var(--text-primary); line-height: 1;
}
.pred-vs { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-muted); }
.pred-date { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.pred-status-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; letter-spacing: .05em; }
.pred-format { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ── Prediction Mobile ── */
@media (max-width: 640px) {
    .pred-title { font-size: 18px; margin-bottom: 6px; }
    .pred-intro { padding: 10px 14px !important; margin-bottom: 12px !important; }
    .pred-intro p { font-size: 13px; }

    /* [Logo1] Name1   2-1   Name2 [Logo2]  — ONE horizontal row */
    .pred-teams-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        padding: 12px 10px; gap: 0 6px;
        align-items: center;
    }
    /* Keep row direction — DO NOT stack vertically */
    .pred-team { flex-direction: row; align-items: center; gap: 6px; }
    .pred-team--right { flex-direction: row-reverse; }
    .pred-team--right .pred-team__info { text-align: right; }
    .pred-team__logo { width: 26px; height: 26px; }
    .pred-team__logo--placeholder { font-size: 14px; width: 26px; height: 26px; }
    .pred-team__name { font-size: 13px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
    .pred-team__badges { display: none; }
    .pred-team__loc { display: none; }
    /* Score sits between the two teams */
    .pred-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 40px; }
    .pred-score { font-size: 20px; }
    .pred-vs { font-size: 13px; }
    .pred-status-label { font-size: 9px; }
    .pred-format { font-size: 9px; margin-top: 1px; }
}

/* ============================================================
   SUBHEADER BAR v3 — Quick-links + Search + CTA
   ============================================================ */

.subheader-bar {
    position: sticky;
    top: var(--header-h);
    z-index: 999;
    height: var(--subheader-h);
    background: var(--subheader-bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
}
.subheader-inner {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 10px;
}

/* Quick tabs */
.subheader-tabs { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.subheader-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: all .15s;
    white-space: nowrap;
    text-decoration: none;
}
.subheader-tab:hover { color: var(--text-primary); background: var(--bg-elevated); }
.subheader-tab.is-active {
    color: var(--text-primary);
    background: var(--bg-elevated);
    border-color: var(--border);
}
.subheader-tab svg { opacity: .6; }
.subheader-tab.is-active svg { opacity: 1; }

/* Divider between tabs and search */
.subheader-inner::after {
    content: '';
    display: none;
}

/* Universal search */
.subheader-search {
    flex: 1;
    position: relative;
    max-width: 540px;
    margin: 0 8px;
}
.search-wrap {
    display: flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0 14px;
    gap: 8px;
    transition: border-color .15s, box-shadow .15s;
    height: 32px;
}
.search-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}
.search-icon-svg { color: var(--text-muted); flex-shrink: 0; }
.search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--text-primary);
    min-width: 0;
}
.search-input::placeholder { color: var(--text-muted); }
.search-clear-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color .12s;
}
.search-clear-btn:hover { color: var(--text-primary); }

/* Search suggestions dropdown */
.search-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 2000;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
}
.search-suggestions[hidden] { display: none; }
.search-group-label {
    padding: 8px 14px 4px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
}
.search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background .1s;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover, .search-item.is-focused { background: var(--bg-hover); }
.search-item__img {
    width: 32px; height: 32px;
    border-radius: 4px;
    object-fit: contain;
    background: var(--bg-surface);
    flex-shrink: 0;
}
.search-item__img-placeholder {
    width: 32px; height: 32px;
    border-radius: 4px;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
}
.search-item__body { min-width: 0; flex: 1; }
.search-item__label {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-item__sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.search-item__badge {
    font-size: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}
.search-badge--team       { background: rgba(59,130,246,.15); color: #3b82f6; }
.search-badge--player     { background: rgba(245,197,24,.15); color: #f5c518; }
.search-badge--match      { background: rgba(239,68,68,.12); color: #ef4444; }
.search-badge--news       { background: rgba(0,200,83,.12); color: #00c853; }
.search-badge--prediction { background: var(--accent-dim); color: var(--accent); }

.search-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.search-loading {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

/* CTA buttons */
.subheader-ctas { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.sh-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 20px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: all .15s;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: none;
}
.sh-btn--ghost {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.sh-btn--ghost:hover { color: var(--text-primary); background: var(--bg-hover); }
.sh-btn--accent {
    background: var(--accent);
    color: #fff;
    border: 1px solid transparent;
}
.sh-btn--accent:hover { background: var(--accent-hover); }
.sh-btn--outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.sh-btn--outline:hover { border-color: var(--accent); color: var(--accent); }

/* ── Sticky offset for page content ── */
.site-main { padding-top: 0; }

/* ── Mobile header ── */
@media (max-width: 1024px) {
    .subheader-ctas .sh-btn--ghost { display: none; }
}
@media (max-width: 768px) {
    :root { --header-h: 52px; --subheader-h: 40px; }
    .primary-nav { display: none; }
    .primary-nav.is-open {
        display: flex; flex-direction: column; position: fixed;
        top: calc(var(--marquee-h) + var(--header-h)); left: 0; right: 0;
        background: var(--header-bg); border-bottom: 1px solid var(--border);
        padding: 12px; z-index: 998; gap: 4px; max-height: 70vh; overflow-y: auto;
    }
    .mobile-menu-btn { display: flex; }
    .subheader-ctas { display: none; }
    .subheader-search { max-width: none; margin: 0; }
    .subheader-tabs { display: none; }
    .marquee-op__offer { display: none; }
    .marquee-op__logo { height: 20px; max-width: 60px; }
    .site-logo__img { height: 28px; }
}
@media (max-width: 480px) {
    .subheader-bar { display: none; }
}

/* ============================================================
   BETTING WIDGET — Match Pages
   ============================================================ */

.betting-widget {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 0;
    font-size: 13px;
}
.betting-widget--compact { margin-top: 20px; }
.betting-widget-inner {
    padding: 20px 0;
}

/* Header row */
.betting-widget__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}
.betting-widget__title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--accent);
}
.betting-widget__title svg { stroke: var(--accent); }
.betting-widget__teams {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.betting-widget__vs { color: var(--border); }
.betting-odds__promo-code-col {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 20px;
    font-size: 11px;
    color: var(--accent);
}

/* Provider rows */
.betting-widget__body { }
.betting-row {
    display: grid;
    grid-template-columns: 180px 1fr 120px 160px;
    align-items: center;
    min-height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    transition: background .1s;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.betting-row:last-child { border-bottom: none; }
.betting-row:hover { background: var(--bg-hover); text-decoration: none; color: inherit; }
.betting-row:visited { color: inherit; }

/* Logo cell */
.betting-row__logo,
.betting-row__logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.betting-logo-img {
    height: 28px;
    width: 130px;
    object-fit: contain;
    filter: brightness(1.1);
    transition: filter .15s;
}
.betting-row:hover .betting-logo-img { filter: brightness(1.3); }
.betting-logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
}

/* Offer text / odds cells */
.betting-row__t1-odds,
.betting-row__t2-odds {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
}
.betting-offer-text {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-weight: 600;
}
.betting-offer-text svg { stroke: var(--accent); flex-shrink: 0; }

/* Odds display */
.odds-value {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: .5px;
}
.odds-trend {
    stroke: var(--green);
    flex-shrink: 0;
    opacity: .8;
}

/* CTA / bonus code cell */
.betting-row__cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.betting-code-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s, color .15s;
    cursor: pointer;
}
.betting-code-btn:hover {
    background: var(--accent);
    color: #fff;
}
.betting-no-code {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* Footer */
.betting-widget__footer {
    padding: 8px 20px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
}

/* ── Container wrapper (matches page width) ── */
.betting-widget-wrap {
    padding: 0 0 24px;
}

/* ============================================================
   BETTING LISTING PAGE — /cs2-betting/
   ============================================================ */

/* Hero */
.page-hero-betting {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
    border-bottom: 1px solid var(--border);
    padding: 40px 0 32px;
}
.page-hero-betting__title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 10px;
}
.page-hero-betting__desc {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 680px;
    margin-bottom: 16px;
    line-height: 1.6;
}
.page-hero-betting__badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.hero-badge svg { stroke: var(--accent); }

/* Two-column layout */
.betting-listing-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
}

/* Column headers */
.betting-listing-header {
    display: grid;
    grid-template-columns: 50px 160px 1fr 110px 140px 130px;
    align-items: center;
    padding: 8px 16px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin-bottom: 0;
}

/* Provider listing rows */
.betting-listing-row {
    display: grid;
    grid-template-columns: 50px 160px 1fr 110px 140px 130px;
    grid-template-rows: auto auto auto;
    align-items: center;
    border: 1px solid var(--border);
    border-top: none;
    background: var(--bg-card);
    transition: background .12s;
    position: relative;
}
.betting-listing-row:last-of-type { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.betting-listing-row:hover { background: var(--bg-elevated); }

/* Main grid cells */
.blr-rank, .blr-brand, .blr-offer, .blr-rating, .blr-code, .blr-cta {
    padding: 16px 12px;
    grid-row: 1;
}

/* Rank */
.blr-rank { display:flex;align-items:center;justify-content:center; }
.blr-rank__badge {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items:center; justify-content:center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
}
.blr-rank__badge--gold   { background: #ffd700; color: #000; }
.blr-rank__badge--silver { background: #c0c0c0; color: #000; }
.blr-rank__badge--bronze { background: #cd7f32; color: #fff; }
.blr-rank__num { font-size: 15px; font-weight: 700; color: var(--text-muted); }

/* Brand */
.blr-brand__link { display:block;margin-bottom:4px; }
.blr-brand__logo { max-height: 36px; max-width: 130px; object-fit:contain; width:auto; filter:brightness(1.1); }
.blr-brand__text { font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--text-primary); }
.blr-brand__desc { font-size:11px;color:var(--text-muted);margin:0;line-height:1.4; }

/* Offer */
.blr-offer { display:flex;align-items:flex-start;gap:6px;font-size:13px;font-weight:600; }
.blr-offer__icon { stroke:var(--accent);flex-shrink:0;margin-top:1px; }

/* Rating */
.blr-rating { display:flex;align-items:center;gap:2px; }
.blr-rating__num { font-size:12px;font-weight:700;color:var(--accent);margin-left:4px; }

/* Code */
.blr-code { display:flex;align-items:center; }
.blr-code__btn {
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 12px;
    background:transparent;
    color:var(--accent);
    border:1px solid var(--accent);
    border-radius:var(--radius-sm);
    font-family:var(--font-display);font-size:12px;font-weight:700;
    letter-spacing:.5px;text-transform:uppercase;
    cursor:pointer;transition:all .15s;
    white-space:nowrap;
}
.blr-code__btn:hover { background:var(--accent);color:#fff; }
.blr-code__copy { flex-shrink:0; }
.blr-no-code { font-size:12px;color:var(--text-muted);font-style:italic; }

/* CTA */
.blr-cta { display:flex;align-items:center;justify-content:flex-end;padding-right:16px; }
.blr-cta__btn {
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 18px;
    background:var(--accent);color:#fff;
    border-radius:var(--radius-sm);
    font-family:var(--font-display);font-size:13px;font-weight:700;
    text-decoration:none;transition:background .15s;white-space:nowrap;
}
.blr-cta__btn:hover { background:var(--accent-hover); }

/* Expand row */
.blr-expand-row {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
}
.blr-expand-btn {
    display:inline-flex;align-items:center;gap:4px;
    background:none;border:none;cursor:pointer;
    font-size:11px;color:var(--text-muted);
    transition:color .12s;
}
.blr-expand-btn:hover { color:var(--accent); }
.blr-expand-btn svg { transition:transform .2s; }

/* Details panel */
.blr-details {
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 16px 24px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
}
.blr-details__inner h3 { font-size:16px;margin-bottom:8px; }
.blr-details__inner p { font-size:13px;color:var(--text-secondary);margin-bottom:12px;line-height:1.6; }

/* Sidebar */
.sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 16px;
}
.sidebar-card--info { background: var(--bg-elevated); }
.sidebar-card--warn { background: rgba(239,68,68,.06); border-color:rgba(239,68,68,.2); }
.sidebar-card__title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}
.sidebar-nav { display:flex;flex-direction:column;gap:6px; }
.sidebar-nav__link {
    display:flex;align-items:center;padding:6px 8px;
    border-radius:var(--radius-sm);border:1px solid var(--border);
    transition:border-color .12s;
}
.sidebar-nav__link:hover { border-color:var(--accent); }
.sidebar-nav__logo { max-height:22px;max-width:80px;object-fit:contain;filter:brightness(1.1); }
.sidebar-criteria { list-style:none;padding:0;display:flex;flex-direction:column;gap:10px; }
.sidebar-criteria li { font-size:12px;color:var(--text-secondary);line-height:1.5; }
.sidebar-criteria li strong { display:block;color:var(--text-primary); }

/* Disclaimer */
.betting-disclaimer {
    display:flex;align-items:flex-start;gap:8px;
    margin-top:24px;padding:14px 16px;
    background:var(--bg-elevated);border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:12px;color:var(--text-muted);line-height:1.5;
}
.betting-disclaimer svg { flex-shrink:0;margin-top:1px;stroke:var(--text-muted); }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .betting-listing-layout { grid-template-columns: 1fr; }
    .betting-listing-sidebar { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
}
@media (max-width: 900px) {
    .betting-listing-header { display:none; }
    .betting-listing-row {
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto auto auto auto;
        padding: 12px 0;
    }
    .blr-rank  { grid-column:1;grid-row:1;justify-content:center;align-self:start;padding-top:16px; }
    .blr-brand { grid-column:2;grid-row:1; }
    .blr-offer { grid-column:1/-1;grid-row:2;padding:4px 16px 4px 72px; }
    .blr-rating{ grid-column:1/-1;grid-row:3;padding:4px 16px 4px 72px; }
    .blr-code  { grid-column:1/-1;grid-row:4;padding:4px 16px 4px 72px; }
    .blr-cta   { grid-column:1/-1;grid-row:5;padding:4px 16px 12px 72px;justify-content:flex-start; }
    .blr-expand-row { grid-row:6; }
    .blr-details    { grid-row:7; }
}
@media (max-width: 640px) {
    /* ── Betting rows: T1 odds | Logo (centered) | T2 odds  →  CTA below ── */
    .betting-row {
        grid-template-columns: 1fr auto 1fr !important;
        grid-template-rows: auto auto;
        gap: 6px 0;
        padding: 12px 14px;
        min-height: auto;
        align-items: center;
    }
    .betting-row__t1-odds {
        grid-column: 1;
        grid-row: 1;
        padding: 0;
        display: flex !important;
        justify-content: flex-start;
        align-items: center;
    }
    .betting-row__logo {
        grid-column: 2;
        grid-row: 1;
        padding: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .betting-logo-img { height: 28px; width: 120px; object-fit: contain; }
    .betting-row__t2-odds {
        grid-column: 3;
        grid-row: 1;
        padding: 0;
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
    }
    .betting-row__cta {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 4px 0 0;
        justify-content: stretch;
    }
    .betting-code-btn {
        width: 100%;
        justify-content: center;
        min-height: 36px;
        border-radius: 8px;
        font-size: 12px;
    }
    .betting-no-code {
        font-size: 11px;
        color: var(--text-muted);
        display: block;
        text-align: center;
        width: 100%;
    }
    /* When provider has no odds — logo centered, offer below */
    .betting-row--no-odds {
        grid-template-columns: 1fr !important;
        justify-items: center;
        text-align: center;
        padding-top: 18px;
    }
    .betting-row--no-odds .betting-row__logo {
        grid-column: 1;
        grid-row: 1;
        padding: 0 0 10px;
    }
    .betting-row--no-odds .betting-logo-img {
        height: 32px; width: 150px; object-fit: contain;
    }
    .betting-row--no-odds .betting-row__t1-odds {
        grid-column: 1;
        grid-row: 2;
        justify-content: center;
    }
    .betting-row--no-odds .betting-row__t2-odds {
        display: none !important;
    }
    .betting-row--no-odds .betting-offer-text {
        font-size: 13px;
    }
    .betting-row--no-odds .betting-row__cta {
        grid-row: 3;
    }
    /* Odds pills — tappable button style */
    .odds-value {
        font-size: 16px !important;
        background: rgba(255,102,0,.1);
        border: 1px solid rgba(255,102,0,.15);
        padding: 6px 14px;
        border-radius: 8px;
        min-width: 70px;
        text-align: center;
    }
    .odds-trend { display: none; }
    .betting-widget__teams { display: none; }
    .page-hero-betting__title { font-size: 22px; }
    .betting-listing-sidebar { grid-template-columns: 1fr; }
}

/* ============================================================
   CS2 MAPS — Listing Page
   ============================================================ */

.maps-hero {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
    border-bottom: 1px solid var(--border);
    padding: 44px 0 36px;
}
.maps-hero__title {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    margin: 0 0 10px;
    letter-spacing: .5px;
}
.maps-hero__sub {
    color: var(--text-secondary);
    font-size: 15px;
    max-width: 680px;
    margin-bottom: 16px;
    line-height: 1.6;
}
.maps-hero__meta { display:flex;gap:10px;flex-wrap:wrap; }
.maps-hero__chip {
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 12px;
    background:var(--bg-elevated);border:1px solid var(--border);
    border-radius:20px;font-size:12px;font-weight:600;color:var(--text-secondary);
}

.maps-page-container { padding-top:40px;padding-bottom:40px; }

.maps-section-label {
    display:flex;align-items:center;margin-bottom:16px;
}
.maps-section-label span {
    font-family:var(--font-display);font-size:13px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
    background:var(--bg-elevated);border:1px solid var(--border);
    padding:4px 14px;border-radius:20px;
}

/* Rich map card grid */
.maps-grid-rich {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.maps-grid-rich--casual {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ── Map card ── */
.map-card-rich {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s, border-color .18s, box-shadow .18s;
}
.map-card-rich:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.map-card-rich--casual { opacity: .85; }
.map-card-rich--casual:hover { opacity: 1; }

/* Image hero */
.map-card-rich__img-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    text-decoration: none;
}
.map-card-rich__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.map-card-rich:hover .map-card-rich__img { transform: scale(1.04); }

/* Name overlay */
.map-card-rich__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.1) 55%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 14px 16px;
}
.map-card-rich__name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
    letter-spacing: .3px;
}
.map-card-rich__pool-badge {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--accent);
    background: rgba(0,0,0,.6);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 3px 7px;
    backdrop-filter: blur(4px);
}
.map-card-rich__pool-badge--casual {
    color: var(--text-muted);
    border-color: var(--text-muted);
}

/* Games played badge */
.map-card-rich__games-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,.65);
    border-radius: 12px;
    padding: 3px 9px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.12);
}

/* Card body */
.map-card-rich__body {
    padding: 14px 16px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.map-card-rich__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.map-card-rich__label {
    font-size: 12px;
    color: var(--text-muted);
}
.map-card-rich__value {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Balance bar */
.map-balance-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
    gap: 1px;
}
.map-balance-bar__t {
    background: linear-gradient(90deg, #ff6a00, #ee9731);
    display: flex;
    align-items: center;
    border-radius: 3px 0 0 3px;
}
.map-balance-bar__ct {
    background: linear-gradient(90deg, #4a90d9, #2a5faa);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 0 3px 3px 0;
}
.map-balance-bar__label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
}
.map-balance-bar--small { height: 8px; margin:0; border-radius:4px; }

/* Difficulty badge */
.map-diff-badge {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: .04em;
}
.diff--easy { background: rgba(0,200,83,.15); color: var(--green); }
.diff--med  { background: rgba(255,165,0,.15); color: #ffa500; }
.diff--hard { background: rgba(239,68,68,.15);  color: var(--red); }

/* Tags */
.map-card-rich__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}
.map-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 9px;
    transition: border-color .12s, color .12s;
}
.map-card-rich:hover .map-tag {
    border-color: rgba(255,102,0,.3);
}

/* CTA footer link */
.map-card-rich__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    background: transparent;
    transition: background .12s;
}
.map-card-rich__cta:hover {
    background: rgba(255,102,0,.07);
}
.map-card-rich__cta svg { flex-shrink:0; stroke:var(--accent); }

/* ============================================================
   CS2 MAPS — Single / Detail Page
   ============================================================ */

.map-single-header {
    padding-top: 28px;
    padding-bottom: 20px;
}
.map-single-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 3.5vw, 36px);
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: .3px;
}
.map-single-tagline {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 700px;
    line-height: 1.6;
    margin: 0;
}

/* Hero: large image + sidebar */
.map-single-hero-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
    margin-bottom: 24px;
}
.map-single-img-wrap {
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 8.5;
    background: var(--bg-elevated);
}
.map-single-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Info cards in sidebar */
.map-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
}
.map-info-card__title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.map-info-card__title svg { stroke: var(--accent); }
.map-key-areas {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.map-key-areas li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--text-secondary);
}
.map-key-area__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.map-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.map-stat-row strong { color: var(--text-primary); font-weight: 700; }

/* Playstyle + Betting Tip row */
.map-single-tips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}
.map-tip-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 22px;
}
.map-tip-card--accent {
    background: var(--bg-elevated);
    border-color: rgba(255,102,0,.25);
}
.map-tip-card__title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.map-tip-card__title svg { stroke: var(--accent); }
.map-tip-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin:0; }

/* How to bet */
.map-single-content { margin-bottom: 36px; }
.map-how-to-bet {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px 28px;
}
.map-how-to-bet h2 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
}
.map-how-to-bet h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    margin: 20px 0 10px;
}
.map-how-to-bet p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}
.map-bet-factors {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.map-bet-factors li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
}
.map-bet-factors li strong { color: var(--text-primary); }

/* Recent matches on this map */
.map-single-matches { margin-bottom: 40px; }
.map-matches-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.map-match-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s;
    border: 1px solid var(--border);
}
.map-match-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.map-match-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(.45) saturate(.7);
    transition: filter .2s;
}
.map-match-card:hover .map-match-card__bg { filter: brightness(.55) saturate(.9); }
.map-match-card__inner {
    position: relative;
    z-index: 1;
    padding: 12px 14px;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 100%);
}
.map-match-card__status {
    margin-bottom: 6px;
}
.map-match-card__teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.map-match-team {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.map-match-team:last-child { text-align: right; }
.map-match-score {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    color: var(--accent);
    white-space: nowrap;
    margin: 0 4px;
}
.map-match-score--vs {
    color: var(--text-muted);
    font-size: 11px;
}
.map-match-card__date {
    font-size: 10px;
    color: rgba(255,255,255,.5);
    margin-top: 4px;
}

/* Related maps */
.map-single-related { margin-bottom: 48px; }
.map-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.map-related-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 16/9;
    display: block;
    text-decoration: none;
    border: 1px solid var(--border);
    transition: transform .18s, border-color .18s;
}
.map-related-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.map-related-card__img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s;
}
.map-related-card:hover .map-related-card__img { transform: scale(1.05); }
.map-related-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 55%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px 12px;
}
.map-related-card__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

/* ============================================================
   MATCH PAGE — MAP RESULTS GAME CARDS w/ MAP IMAGES
   ============================================================ */

/* Map hero header replacing old plain game-header */
.game-card__map-hero {
    background-size: cover;
    background-position: center;
    position: relative;
    height: 90px;
    overflow: hidden;
}
.game-card__map-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.55) 60%,
        rgba(0,0,0,.3) 100%
    );
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.game-map-badge--hero {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--accent);
    background: rgba(0,0,0,.5);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 3px 9px;
}
.game-map-name-link { text-decoration:none; }
.game-map-name-hero {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
    letter-spacing: .3px;
    transition: color .12s;
}
.game-map-name-link:hover .game-map-name-hero { color: var(--accent); }
.game-map-live-badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--red);
    background: rgba(0,0,0,.5);
    border-radius: 4px;
    padding: 3px 9px;
    animation: pulseBlink .8s ease-in-out infinite;
}
.game-map-done-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}
@keyframes pulseBlink { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .maps-grid-rich { grid-template-columns: repeat(2, 1fr); }
    .map-single-hero-grid { grid-template-columns: 1fr; }
    .map-single-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .map-matches-grid { grid-template-columns: repeat(2, 1fr); }
    .map-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .maps-grid-rich { grid-template-columns: 1fr; }
    .map-single-tips-grid { grid-template-columns: 1fr; }
    .map-matches-grid { grid-template-columns: 1fr 1fr; }
    .map-related-grid { grid-template-columns: 1fr 1fr; }
    .map-single-sidebar { grid-template-columns: 1fr; }
    .map-card-rich__name { font-size: 18px; }
}
@media (max-width: 480px) {
    .map-matches-grid { grid-template-columns: 1fr; }
    .map-related-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   CS2 FALLBACK IMAGE — universal entity placeholder
   ============================================================ */

/* Replace the old text/initials placeholder styles */
.team-logo--placeholder,
.team-logo--fallback {
    object-fit: contain;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    padding: 3px;
}

.entity-logo-fallback,
.player-avatar-fallback {
    object-fit: contain;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    opacity: .65;
}

/* Circular fallback for players */
.player-avatar-fallback,
.player-avatar-fallback[style*="border-radius:50%"] {
    border-radius: 50%;
    padding: 4px;
}

/* League/serie/tournament row logos */
.league-logo-fallback {
    width: 28px;
    height: 28px;
    object-fit: contain;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    opacity: .6;
}

/* Make sure AVIF displays consistently */
img.entity-logo-fallback,
img.team-logo--fallback,
img.player-avatar-fallback,
img.league-logo-fallback {
    display: inline-block;
    flex-shrink: 0;
    filter: brightness(.75) saturate(0);
}

/* Light mode: invert the white fallback so it's visible on light backgrounds */
[data-theme="light"] img.entity-logo-fallback,
[data-theme="light"] img.team-logo--fallback,
[data-theme="light"] img.player-avatar-fallback,
[data-theme="light"] img.league-logo-fallback {
    filter: brightness(.3) saturate(0);
}

/* Hide Top Teams / Top Players sidebar on mobile (shown at bottom of frontpage) */
@media (max-width: 768px) {
    .hp-sidebar-rankings { display: none; }
}

/* ============================================================
   NEW COMPONENTS + MOBILE-FIRST RESPONSIVE OVERHAUL
   ============================================================ */

/* ── Dropdown bridge (prevent gap causing hover loss) ── */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px; /* bridges the 0px gap so mouse doesn't slip */
}

/* ── Featured Tournament Sidebar — quicklinks ── */
.ft-quicklink {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    transition: all .12s;
    text-decoration: none;
}
.ft-quicklink:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ── MVP Sidebar Widget ── */
.mvp-widget { border-color: var(--accent) !important; }
.mvp-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.mvp-avatar { flex-shrink: 0; }
.mvp-info { min-width: 0; }
.mvp-name {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mvp-name:hover { color: var(--accent); }
.mvp-team { font-size: 12px; color: var(--text-muted); }
.mvp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    text-align: center;
}
.mvp-stat-item { padding: 6px 0; }
.mvp-stat-val {
    display: block;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
}
.mvp-stat-lbl {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 2px;
}

/* ── Player Stats Table (live match) — K D A ADR HS% Rating KAST ── */
.player-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 8px;
}
.player-stats-table th {
    text-align: center;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 6px 4px 4px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    white-space: nowrap;
}
.player-stats-table th:first-child { text-align: left; }
.player-stats-table td {
    padding: 6px 4px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
}
.player-stats-table td:first-child {
    text-align: left;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}
.player-stats-table tr:hover td { background: var(--bg-hover); }
.player-stats-table .rating-high { color: var(--green); }
.player-stats-table .rating-mid  { color: var(--yellow); }
.player-stats-table .rating-low  { color: var(--red); }
.player-stats-table .stat-adr    { color: var(--accent); }
.player-stats-team-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 4px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ── Stream section open state ── */
.stream-player-wrap.is-open { display: block !important; }

/* ═══════════════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE — Complete overhaul
   Base styles = mobile, then scale up with min-width
   ═══════════════════════════════════════════════════════ */

/* --- GLOBAL CONTAINER --- */
.container { padding: 0 16px; }

/* --- HEADER --- */
@media (max-width: 768px) {
    :root {
        --header-h: 52px;
        --marquee-h: 42px;
        --subheader-h: 38px;
        --sidebar-w: 280px;
    }
    .header-inner { gap: 12px; padding: 0 16px; }
    .primary-nav { display: none; }
    .mobile-menu-btn { display: flex; }
    .primary-nav.is-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--header-h);
        left: 0; right: 0;
        background: var(--header-bg);
        border-bottom: 1px solid var(--border);
        padding: 8px 16px 16px;
        z-index: 999;
        gap: 2px;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
    }
    /* Mobile dropdowns expand inline */
    .nav-dropdown { width: 100%; }
    .nav-dropdown__trigger { width: 100%; text-align: left; justify-content: space-between; }
    .nav-dropdown__menu {
        position: static !important;
        display: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--border-accent);
        border-radius: 0;
        padding: 4px 0 4px 12px;
        background: transparent;
        margin-top: 2px;
    }
    .nav-dropdown.is-open .nav-dropdown__menu { display: block; }
    .nav-dropdown.is-open .nav-chevron { transform: rotate(180deg); }
    .nav-link { width: 100%; padding: 10px 12px; font-size: 14px; }
    .header-live-badge { display: none; }
    .site-logo__img { height: 30px; }
}

/* --- PAGE LAYOUT --- */
@media (max-width: 960px) {
    .page-layout {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-top: 16px;
        padding-bottom: 24px;
    }
    .content-sidebar { order: 2; } /* sidebar below main content on mobile */
}

/* --- MATCHES VIEW TOGGLE mobile --- */
@media (max-width: 768px) {
    .matches-view-btn { padding: 7px 12px; font-size: 12px; gap: 4px; }
    .matches-date-header, .matches-event-header { padding: 6px 10px; gap: 8px; }
    .matches-date-label, .matches-event-label { font-size: 12px; }
    .matches-event-label { white-space: normal; }
}

/* --- MATCH CARDS --- */
@media (max-width: 768px) {
    .match-card { font-size: 13px; }
    .match-card__body { grid-template-columns: 1fr 64px 1fr; gap: 8px; }
    .match-team-logo { width: 28px; height: 28px; }
    .mc2-team-name { font-size: 12px; }
    .score-val { font-size: 16px; min-width: 28px; }
    .match-card__meta { flex-wrap: wrap; gap: 4px; font-size: 10px; }
    .match-card__footer { padding: 6px 10px; }
}

/* --- MATCH HERO (match single) --- */
@media (max-width: 768px) {
    .match-hero { padding: 16px 0; }
    .match-hero-score { gap: 8px; padding: 16px; }
    .scoreboard-score { font-size: 32px; min-width: 48px; }
    .hero-team-name { font-size: 15px; }
    .hero-team-logo { width: 48px; height: 48px; }
    .match-hero-format { font-size: 12px; }
    .match-hero-meta { flex-wrap: wrap; gap: 6px; font-size: 11px; justify-content: center; }
}
@media (max-width: 480px) {
    .match-hero-score { grid-template-columns: 1fr auto 1fr; }
    .scoreboard-score { font-size: 26px; min-width: 36px; }
    .hero-team-name { font-size: 13px; }
    .hero-team-logo { width: 36px; height: 36px; }
}

/* --- STREAM SECTION --- */
@media (max-width: 768px) {
    .stream-picker { flex-wrap: wrap; gap: 6px; }
    .stream-picker-btn { font-size: 11px; padding: 5px 10px; }
}

/* --- GAME CARDS (Map Results) --- */
@media (max-width: 768px) {
    .game-card { margin-bottom: 12px; }
    .game-card__map-hero { height: 100px; }
    .game-team-scores { padding: 10px; gap: 6px; }
    .game-team-score { gap: 8px; }
    .game-team-rounds { font-size: 20px; min-width: 32px; }
    /* Player stats table on small screens */
    .player-stats-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- LIVE MATCH PANEL --- */
@media (max-width: 768px) {
    .live-match-panel { padding: 12px; }
    .live-tabs { gap: 4px; overflow-x: auto; flex-wrap: nowrap; }
    .live-tab-btn { white-space: nowrap; padding: 6px 10px; font-size: 11px; }
    .live-stats-grid { grid-template-columns: 1fr; gap: 8px; }
}

/* --- SIDEBAR WIDGETS --- */
@media (max-width: 960px) {
    .sidebar-widget { margin-bottom: 0; }
    .mvp-stats { grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .ft-quicklink { padding: 7px 8px; font-size: 12px; }
}

/* --- H2H SECTION (big) --- */
@media (max-width: 768px) {
    .h2h-header { flex-direction: column; gap: 8px; text-align: center; }
    .h2h-grid { grid-template-columns: 1fr; gap: 8px; }
    .h2h-match-row { flex-direction: column; gap: 4px; }
}

/* --- TEAMS / PLAYERS GRIDS --- */
@media (max-width: 768px) {
    .teams-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .team-card { padding: 12px; }
    .team-card__logo { width: 48px; height: 48px; }
    .team-card__name { font-size: 13px; }
    .players-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .teams-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .team-card__logo { width: 40px; height: 40px; }
}

/* --- ENTITY HERO (team/player single) --- */
@media (max-width: 768px) {
    .entity-hero { padding: 20px 0; }
    .entity-hero-inner { flex-direction: column; gap: 16px; text-align: center; align-items: center; }
    .entity-hero-logo { width: 80px; height: 80px; }
    .entity-hero-name { font-size: 24px; }
    .entity-hero-meta { justify-content: center; flex-wrap: wrap; }
    .stats-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-card-val { font-size: 22px; }
}
@media (max-width: 480px) {
    .entity-hero-name { font-size: 20px; }
    .stats-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- ROSTERS --- */
@media (max-width: 768px) {
    .rosters-grid { grid-template-columns: 1fr; }
    .roster-player { padding: 8px 10px; gap: 10px; }
    .roster-avatar { width: 36px; height: 36px; }
    .roster-name { font-size: 13px; }
}

/* --- TOURNAMENTS GRID --- */
@media (max-width: 768px) {
    .tournaments-grid { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 480px) {
    .tournament-card { padding: 12px; }
    .tournament-logo { width: 40px; height: 40px; }
}

/* --- NEWS SLIDER (homepage) --- */
@media (max-width: 768px) {
    .news-slider { height: 260px; }
    .news-slide-content { padding: 16px; }
    .news-slide-title { font-size: 16px; }
    .slider-arrow { width: 32px; height: 32px; font-size: 16px; }
    .news-slider-wrap--contained { margin: 12px 0; border-radius: var(--radius-md); }
}
@media (max-width: 480px) {
    .news-slider { height: 200px; }
    .news-slide-title { font-size: 14px; }
    .slider-arrow { display: none; }
}

/* --- NEWS GRID --- */
@media (max-width: 600px) {
    .news-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* --- TABS (match, homepage) --- */
@media (max-width: 640px) {
    .tab-nav { overflow-x: auto; gap: 0; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
    .tab-nav::-webkit-scrollbar { display: none; }
    .tab-btn { white-space: nowrap; padding: 8px 12px; font-size: 12px; flex-shrink: 0; }
}

/* --- STANDINGS --- */
@media (max-width: 640px) {
    .standings-header, .standings-row {
        grid-template-columns: 28px 1fr 40px 40px 40px;
        font-size: 11px;
        padding: 6px 8px;
    }
}

/* --- BREADCRUMB BAR --- */
@media (max-width: 640px) {
    .breadcrumb-bar { font-size: 11px; padding: 6px 0; }
    .breadcrumb-bar .container { gap: 4px; }
}

/* --- PAGE HEADER BAR (mobile) --- */
@media (max-width: 640px) {
    .page-header-bar { padding: 16px 0 14px; }
    .page-header-bar h1 { font-size: 18px; }
    .page-header-bar__top { gap: 6px; }
    .page-header-bar__meta { font-size: 11px; }
    .page-header-bar__actions { margin-left: 0; width: 100%; }
    .page-header-bar .seo-intro { margin-top: 8px; }
    .page-header-bar .seo-intro p { font-size: 12px; line-height: 1.55; }
    .page-header-bar__share { margin-top: 10px; padding-top: 10px; }
    .share-btn { width: 28px; height: 28px; border-radius: 6px; }
    .share-btn svg { width: 13px; height: 13px; }
    .page-header-bar__share-label { font-size: 10px; }
    .search-form { width: 100%; }
    .search-input { flex: 1; min-width: 0; }
    .filter-bar { flex-wrap: wrap; gap: 4px; }
    .filter-btn { font-size: 11px; padding: 4px 10px; }
}

/* --- PREDICTION CARDS (responsive) --- */
@media (max-width: 768px) {
    .prediction-card__body { padding: 12px; }
    .prediction-card__header { padding: 12px; }
    .prediction-card__footer { padding: 10px 12px; }
    .prediction-card__pick { padding: 8px 10px; }
    .pred-team-blocks { flex-direction: column; gap: 10px; }
    .pred-odds { font-size: 13px; }
}

/* --- BETTING PROVIDERS / CS2 BETTING PAGE --- */
@media (max-width: 768px) {
    .provider-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .provider-card { padding: 14px; }
    .provider-logo { width: 80px; height: 36px; }
}

/* --- MODERATOR PANEL --- */
@media (max-width: 768px) {
    .mod-section-tabs { flex-wrap: wrap; gap: 4px; }
    .mod-tab-btn { font-size: 12px; padding: 7px 12px; }
    .mod-panel { padding: 12px; }
    .mod-grid-2, .mod-grid-3 { grid-template-columns: 1fr !important; }
}

/* --- FOOTER --- */
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom .container { flex-direction: column; gap: 8px; text-align: center; }
}
@media (max-width: 480px) {
    .footer { padding: 24px 0 16px; }
    .footer-links { flex-wrap: wrap; gap: 8px; }
}

/* --- MISC MOBILE HELPERS --- */
@media (max-width: 640px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
    .py-lg { padding-top: 20px; padding-bottom: 20px; }
    .section-block { margin-bottom: 16px; }
    .section-title { font-size: 15px; }
    .btn { padding: 9px 16px; font-size: 13px; }
    .cs2bet-pagination { gap: 4px; }
    .page-btn { min-width: 32px; height: 32px; font-size: 12px; }
}

/* Ensure images don't overflow on mobile */
img { max-width: 100%; height: auto; }

/* Touch targets: minimum 44x44px for interactive elements */
@media (max-width: 768px) {
    .nav-link, .tab-btn, .filter-btn, .btn, .page-btn,
    .slider-arrow, .dropdown-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Slider dots: override touch-target sizing, keep small dots */
    .news-slider-dots { gap: 6px; }
    .slider-dot { min-height: 8px !important; min-width: 8px !important; width: 8px; height: 8px; padding: 0; }
    .slider-dot.is-active { width: 22px; height: 8px; }
    .slider-arrow { min-height: 44px; min-width: 44px; }
    .mobile-menu-btn { min-width: 44px; min-height: 44px; }
    .bottom-nav__item { min-width: 44px; min-height: 44px; }
    .more-overlay__close { min-width: 44px; min-height: 44px; }
    .more-nav__item { min-height: 44px; }
}

/* ── Live stats placeholder ── */
.live-stats-placeholder {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
}
.live-stats-placeholder::before {
    content: '⏳ ';
}




/* ── Stats table: centre-align data cells ── */
.stats-table .tc,
.stats-table td.tc { text-align: center; }
.stats-table th.tc { text-align: center; }

/* ── Betting widget: constrained inside container ── */
.betting-widget-inner .betting-widget {
    margin-bottom: 0;
    border-radius: var(--radius-md);
}
.betting-widget-inner {
    padding: 20px 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   PREDICTION PAGES
═══════════════════════════════════════════════════════════════ */

/* Result banner — top of page on finished predictions */
.pred-result-banner{display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:var(--radius-md);margin-bottom:20px;border:1px solid}
.pred-result-banner--correct{background:rgba(0,200,83,.1);border-color:rgba(0,200,83,.3)}
.pred-result-banner--wrong{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}
.pred-result-banner__emoji{font-size:26px;flex-shrink:0}
.pred-result-banner__text{display:flex;flex-direction:column;gap:2px;flex:1}
.pred-result-banner__text strong{font-family:var(--font-display);font-size:15px;font-weight:800}
.pred-result-banner--correct .pred-result-banner__text strong{color:var(--green)}
.pred-result-banner--wrong .pred-result-banner__text strong{color:var(--red)}
.pred-result-banner__text span{font-size:13px;color:var(--text-secondary)}
.pred-result-banner__logo{width:40px;height:40px;object-fit:contain;margin-left:auto;flex-shrink:0}

/* Match header card */
.pred-match-header{padding:0;overflow:hidden;margin-bottom:20px}
.pred-topbar{background:var(--bg-elevated);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap}
.pred-topbar__crumbs{font-size:12px;color:var(--text-muted)}
.pred-topbar__right{display:flex;align-items:center;gap:10px}

/* Tags / badges (prediction cards) */
.pred-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:3px;letter-spacing:.04em;line-height:1.6}
.pred-tag--pick{background:rgba(255,165,0,.15);color:var(--accent);border:1px solid rgba(255,165,0,.3)}
.pred-tag--won{background:rgba(0,200,83,.15);color:var(--green);border:1px solid rgba(0,200,83,.3)}
.pred-tag--correct{background:rgba(0,200,83,.15);color:var(--green);border:1px solid rgba(0,200,83,.3)}
.pred-tag--wrong{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.25)}

/* Extended pred-center sub-classes */
.pred-center__score{font-family:var(--font-mono);font-size:34px;font-weight:800;color:var(--text-primary);display:flex;align-items:center;justify-content:center;gap:8px}
.pred-center__sep{color:var(--text-muted)}
.pred-center__label{font-size:11px;color:var(--text-muted);margin-top:2px;letter-spacing:.05em}
.pred-center__vs{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text-muted)}
.pred-center__date{font-size:12px;color:var(--text-muted);margin-top:4px}
.pred-center__format{font-size:11px;color:var(--text-muted);margin-top:4px}
.pred-team__name--winner{color:var(--green)}
.pred-team__name--pick{color:var(--accent)}
.pred-team__logo--empty{width:56px;height:56px;background:var(--bg-elevated);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px}

/* Prediction pick bar */
.pred-pick-bar{border-top:1px solid rgba(0,200,83,.2);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:linear-gradient(135deg,rgba(0,200,83,.1),rgba(0,200,83,.03))}
.pred-pick-bar--correct{background:linear-gradient(135deg,rgba(0,200,83,.14),rgba(0,200,83,.05));border-top-color:rgba(0,200,83,.35)}
.pred-pick-bar--wrong{background:linear-gradient(135deg,rgba(239,68,68,.1),rgba(239,68,68,.03));border-top-color:rgba(239,68,68,.3)}
.pred-pick-bar__left{display:flex;align-items:center;gap:12px}
.pred-pick-bar__icon{font-size:22px}
.pred-pick-bar__eyebrow{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.pred-pick-bar__pick{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--green)}
.pred-pick-bar--wrong .pred-pick-bar__pick{color:var(--red)}
.pred-pick-bar__verdict{font-size:13px;font-weight:700;margin-left:4px}
.pred-pick-bar__verdict--correct{color:var(--green)}
.pred-pick-bar__verdict--wrong{color:var(--red)}
.pred-pick-bar__right{display:flex;align-items:center;gap:12px}
.pred-pick-bar__conf-label{font-size:11px;color:var(--text-muted);margin-bottom:2px}
.pred-pick-bar__conf-pct{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--accent)}
.pred-donut{flex-shrink:0}

/* Section wrappers */
.pred-card-section{padding:20px;margin-bottom:20px}
.pred-card-section__title{font-family:var(--font-display);font-size:15px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.pred-section{margin-bottom:20px}
.pred-section__title{font-family:var(--font-display);font-size:15px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:8px;color:var(--text-primary)}

/* Team analysis grid */
.pred-teams-analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.pred-teams-analysis-grid{grid-template-columns:1fr}}

.pred-analysis-card{padding:0;overflow:hidden;border-color:var(--border)}
.pred-analysis-card--picked{border-color:rgba(255,165,0,.35)}
.pred-analysis-card--correct{border-color:rgba(0,200,83,.4);box-shadow:0 0 0 1px rgba(0,200,83,.15)}
.pred-analysis-card--wrong{border-color:rgba(239,68,68,.35)}
.pred-analysis-card__head{background:var(--bg-elevated);padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.pred-analysis-card__team-name{font-family:var(--font-display);font-weight:700;font-size:14px}
.pred-analysis-card__body{padding:14px;display:flex;flex-direction:column;gap:14px}

/* Pros/cons blocks */
.pred-pros-block__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.pred-pros-block__label--pro{color:var(--green)}
.pred-pros-block__label--con{color:var(--red)}
.pred-pros-block ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.pred-pros-block li{display:flex;gap:8px;font-size:13px;color:var(--text-secondary);line-height:1.4;align-items:flex-start}
.dot{flex-shrink:0;margin-top:1px;font-weight:700;font-size:14px}
.dot--pro{color:var(--green)}
.dot--con{color:var(--red)}

/* Form grid */
.pred-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.pred-form-grid{grid-template-columns:1fr}}

/* H2H */
.pred-h2h-num{font-family:var(--font-mono);font-size:36px;font-weight:800;color:var(--text-muted);margin-top:8px}
.pred-h2h-num--lead{color:var(--accent)}

/* H2H row */
.h2h-match-row{display:flex;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);gap:12px;transition:background .12s;color:var(--text-primary)}
.h2h-match-row:hover{background:var(--bg-hover)}
.h2h-match-row__date{font-size:11px;color:var(--text-muted);flex-shrink:0;min-width:68px}
.h2h-match-row__tourn{font-size:11px;color:var(--text-muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2h-match-row__score{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:13px;font-weight:700}
.h2h-match-row__num{font-family:var(--font-mono);color:var(--text-primary);background:var(--bg-elevated);padding:2px 8px;border-radius:3px}
.h2h-match-row__format{font-size:11px;color:var(--text-muted);flex-shrink:0}
.h2h-winner{color:var(--accent)}
.h2h-loser{color:var(--text-muted)}

/* Sidebar result pill */
.pred-sidebar-result{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:13px;font-weight:700;padding:8px 12px;border-radius:var(--radius-sm);margin-bottom:12px;border:1px solid}
.pred-sidebar-result--correct{background:rgba(0,200,83,.1);border-color:rgba(0,200,83,.3);color:var(--green)}
.pred-sidebar-result--wrong{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:var(--red)}

/* Analytics body */
.prediction-analytics{font-size:14px;line-height:1.8;color:var(--text-secondary)}
.prediction-analytics p{margin-bottom:1em}
.prediction-analytics ul,.prediction-analytics ol{padding-left:1.4em;margin-bottom:1em}
.prediction-analytics strong{color:var(--text-primary)}

/* Form chart (shared) */
.form-chart{display:flex;flex-direction:column;gap:8px}
.form-chart__label{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text-primary)}
.form-chart__stats{display:flex;gap:12px;font-size:13px;font-family:var(--font-mono)}
.form-w{color:var(--green);font-weight:700}
.form-d{color:var(--yellow)}
.form-l{color:var(--red)}
.form-pct{color:var(--text-muted);margin-left:auto}
.form-chart__blocks{display:flex;gap:3px;flex-wrap:wrap}
.form-block{width:16px;height:16px;border-radius:3px;transition:opacity .1s}
.form-block:hover{opacity:.7}
.form-chart__bar{display:flex;height:8px;background:var(--bg-elevated);border-radius:4px;overflow:hidden;margin-top:4px}

/* ── Prediction: Odds Cards ───────────────────────────────── */
.pred-section-heading {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--text-primary);
    letter-spacing: .2px;
}

/* ── Prediction Odds Card (redesigned 2-row layout) ── */
.pred-odds-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all .15s;
    overflow: hidden;
    margin-bottom: 8px;
}
.pred-odds-card--featured {
    background: var(--bg-elevated);
    border-color: var(--border-accent);
    margin-bottom: 10px;
}
.pred-odds-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.pred-odds-card--featured:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(255,165,0,.2), var(--shadow-md);
}

/* Top row: provider logo + offer + CTA */
.pred-odds-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.pred-odds-card--featured .pred-odds-card__top {
    padding: 14px 18px;
}
.pred-odds-card__provider {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.pred-odds-card__logo {
    max-width: 100px;
    max-height: 28px;
    object-fit: contain;
    filter: brightness(.9);
}
.pred-odds-card--featured .pred-odds-card__logo {
    max-width: 120px;
    max-height: 34px;
}
.pred-odds-card__pname {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}
.pred-odds-card__offer {
    flex: 1;
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
    text-align: right;
    line-height: 1.3;
    min-width: 0;
}
.pred-odds-card__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--border-accent);
    color: var(--accent);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.pred-odds-card__cta--primary {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    padding: 8px 16px;
    font-size: 13px;
}

/* Bottom row: odds display */
.pred-odds-card__odds {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}
.pred-odds-card--featured .pred-odds-card__odds {
    padding: 16px 18px;
}
.pred-odds-card__team {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.pred-odds-card__team--right {
    justify-content: flex-end;
}
.pred-odds-card__team-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}
.pred-odds-card__team-info {
    min-width: 0;
}
.pred-odds-card__team-name {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.pred-odds-card__odd {
    display: block;
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
}
.pred-odds-card--featured .pred-odds-card__odd { font-size: 24px; }
.pred-odds-card__odd--pick { color: var(--green); }
.pred-odds-card__vs {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ── Odds card mobile ── */
@media (max-width: 640px) {
    .pred-odds-card__top { padding: 10px 14px; gap: 10px; }
    .pred-odds-card--featured .pred-odds-card__top { padding: 12px 14px; }
    .pred-odds-card__logo { max-width: 88px; max-height: 24px; }
    .pred-odds-card--featured .pred-odds-card__logo { max-width: 100px; max-height: 28px; }
    .pred-odds-card__offer { font-size: 11px; }
    .pred-odds-card__cta { padding: 5px 10px; font-size: 11px; }
    .pred-odds-card__cta--primary { padding: 6px 12px; font-size: 12px; }
    .pred-odds-card__odds { padding: 12px 14px; gap: 8px; }
    .pred-odds-card--featured .pred-odds-card__odds { padding: 14px; }
    .pred-odds-card__team-logo { width: 22px; height: 22px; }
    .pred-odds-card__team { gap: 8px; }
    .pred-odds-card__odd { font-size: 18px; }
    .pred-odds-card--featured .pred-odds-card__odd { font-size: 20px; }
    .pred-odds-card__team-name { font-size: 11px; max-width: 70px; }
}

@media (max-width: 400px) {
    .pred-odds-card__team-name { max-width: 55px; }
    .pred-odds-card__odd { font-size: 16px; }
    .pred-odds-card--featured .pred-odds-card__odd { font-size: 18px; }
    .pred-odds-card__team-logo { width: 18px; height: 18px; }
}

/* Light mode: clean white odds cards */
[data-theme="light"] .pred-odds-card { background: #fff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .pred-odds-card--featured { background: #fff; border-color: var(--border-accent); }
[data-theme="light"] .pred-odds-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
[data-theme="light"] .pred-odds-card__top { border-color: rgba(0,0,0,.06); }
[data-theme="light"] .pred-odds-card--featured .pred-odds-card__top { border-color: rgba(229,92,0,.1); }
[data-theme="light"] .pred-odds-card__odds { border-color: rgba(0,0,0,.06); }
[data-theme="light"] .pred-odds-card__logo { filter: none; }

/* ============================================================
   GIVEAWAY CARDS & DETAIL PAGE
   ============================================================ */

/* Card — horizontal layout matching screenshot */
.giveaway-card {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all .15s;
}
.giveaway-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
}

.giveaway-card__info {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.giveaway-card__image {
    flex-shrink: 0;
    width: 320px;
    overflow: hidden;
}
.giveaway-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.giveaway-card:hover .giveaway-card__image img {
    transform: scale(1.04);
}

.giveaway-card__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.giveaway-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.4;
}
.giveaway-badge--type {
    background: var(--accent);
    color: #fff;
}
.giveaway-badge--active {
    background: #22c55e;
    color: #fff;
}
.giveaway-badge--closed {
    background: #ef4444;
    color: #fff;
}
.giveaway-badge--drawn {
    background: #eab308;
    color: #000;
}

.giveaway-card__date {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
}

.giveaway-card__title {
    font-family: var(--font-display);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    color: var(--text-primary);
}

.giveaway-card__desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.giveaway-card__footer {
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.giveaway-card__meta {
    display: flex;
    gap: 24px;
}

.giveaway-card__prize-value,
.giveaway-card__participants-value {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--text-primary);
    line-height: 1.2;
}

.giveaway-card__prize-label,
.giveaway-card__participants-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.giveaway-card__ended {
    font-size: 13px;
    color: var(--text-muted);
    padding: 8px 16px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.giveaway-card__ended--drawn {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(0,180,216,.08);
}

/* Mobile: stack vertically */
@media (max-width: 640px) {
    .giveaway-card {
        flex-direction: column-reverse;
    }
    .giveaway-card__image {
        width: 100%;
        height: 200px;
    }
    .giveaway-card__info {
        padding: 16px;
    }
    .giveaway-card__meta {
        gap: 16px;
    }
    .giveaway-card__date {
        margin-left: 0;
    }
}

/* ============================================================
   MOBILE BOTTOM NAV BAR — App-style navigation
   ============================================================ */
.mobile-bottom-nav {
    display: none;
    background: rgba(18, 18, 22, .97);
    border-top: 1px solid var(--border);
    height: 64px;
    flex-shrink: 0;
}

.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1 0 auto;
    height: 64px;
    padding: 8px 4px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 10px;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: .02em;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease;
}
.bottom-nav__item:hover,
.bottom-nav__item:active { color: var(--text-primary); }
.bottom-nav__item.is-active { color: var(--accent); }

.bottom-nav__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.bottom-nav__label {
    line-height: 1;
    white-space: nowrap;
}

.bottom-nav__badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    background: var(--red);
    color: #fff;
    border-radius: 8px;
}

/* ============================================================
   MORE OVERLAY — Fullscreen app-style menu
   ============================================================ */
.more-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: var(--bg-base);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    visibility: hidden;
}
.more-overlay.is-open {
    transform: translateY(0);
    visibility: visible;
}

.more-overlay__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    position: sticky;
    top: 0;
    background: var(--bg-base);
    z-index: 2;
    border-bottom: 1px solid var(--border);
}

.more-overlay__logo img { height: 28px; }

.more-overlay__close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.more-overlay__close svg { width: 20px; height: 20px; }
.more-overlay__close:active { background: var(--bg-hover); }

/* Theme toggle inside More overlay — match close button style */
.more-overlay .theme-toggle {
    width: 40px;
    height: 40px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
}
.more-overlay .theme-toggle:active { background: var(--bg-hover); }
.more-overlay .theme-toggle svg { width: 20px; height: 20px; }

.more-overlay__body {
    padding: 12px 16px 100px;
}

/* Search inside More */
.more-overlay__search {
    margin-bottom: 20px;
}
.more-overlay__search form {
    position: relative;
    display: flex;
    align-items: center;
}
.more-search__icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
}
.more-search__input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    color: var(--text-primary);
    font-size: 15px;
    font-family: var(--font-body);
    outline: none;
}
.more-search__input::placeholder { color: var(--text-muted); }
.more-search__input:focus { border-color: var(--accent); }

/* Sections */
.more-overlay__section {
    margin-bottom: 8px;
}
.more-section__title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    padding: 12px 4px 8px;
    margin: 0;
}

/* Nav items */
.more-nav__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--radius-md, 8px);
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s ease;
}
.more-nav__item:active { background: var(--bg-hover); }

.more-nav__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.more-nav__badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    background: var(--red);
    color: #fff;
    border-radius: 11px;
}

/* Scroll lock when overlay is open — lock the scroll container, not body */
body.more-overlay-open .app-scroll {
    overflow: hidden;
}

/* ============================================================
   MOBILE OVERRIDES — Show bottom nav, hide hamburger
   ============================================================ */
@media (max-width: 768px) {
    /* ── App Shell: body is flex column, content scrolls, nav stays pinned ── */
    html {
        height: 100%;
        overflow: hidden;
    }
    body {
        height: 100%;
        min-height: 0;          /* override base min-height:100vh */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }
    .app-scroll {
        flex: 1 1 0%;           /* 0% basis — never overflow the flex container */
        min-height: 0;          /* allow flex item to shrink below content size */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
    }
    .mobile-bottom-nav {
        display: flex;
    }

    /* Hide the old hamburger menu — replaced by bottom nav */
    .mobile-menu-btn {
        display: none !important;
    }

    /* Hide old mobile nav overlay — replaced by More overlay */
    .primary-nav.is-open {
        display: none !important;
    }

    .site-footer {
        margin-bottom: 0;
    }
}

/* Desktop: always hidden */
@media (min-width: 769px) {
    .mobile-bottom-nav { display: none !important; }
    .more-overlay { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE NATIVE APP FEEL
   Native sports-betting app experience on mobile (≤768px)
   ═══════════════════════════════════════════════════════════════════ */

/* ── New elements: hidden on desktop ── */
.mc2-team-odd,
.mc2-team-score,
.mc2-footer-time,
.mc2-footer-format { display: none; }

/* ── Stats table horizontal scroll wrapper ── */
.stats-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {

    /* ─── GLOBAL NATIVE TOUCHES ─────────────────────────────── */
    body {
        overscroll-behavior-y: contain;
        -webkit-tap-highlight-color: transparent;
    }
    .container { padding: 0 12px; }
    .page-layout {
        grid-template-columns: 1fr !important;
        padding-top: 12px !important;
        gap: 16px !important;
    }
    .page-layout--match { padding-top: 12px !important; }
    /* Sidebar BELOW main content on match pages */
    .content-sidebar { order: 10 !important; }
    .section-block { margin-bottom: 16px; }
    .section-title { font-size: 16px; }

    /* ─── PAGE HEADERS — COMPACT ────────────────────────────── */
    .page-header-bar { padding: 16px 0 14px; }
    .page-header-bar h1 { font-size: 20px; }
    .page-header-bar__actions .btn { font-size: 11px; padding: 4px 10px; }

    /* ─── HERO BANNER COMPACT ───────────────────────────────── */
    .hero-banner { padding: 20px 0; }
    .hero-text h1 { font-size: 22px; }
    .hero-stats { gap: 20px; }
    .stat-number { font-size: 24px; }
    .stat-label { font-size: 10px; }

    /* ─── MATCH CARDS — MOBILE NATIVE REDESIGN ──────────────── */
    .matches-list { gap: 8px; }

    .match-card {
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.06);
        box-shadow: 0 2px 8px rgba(0,0,0,.25);
        -webkit-tap-highlight-color: transparent;
    }
    .match-card:active {
        transform: scale(0.98);
        transition: transform .08s ease;
    }
    .match-card:hover {
        border-color: rgba(255,255,255,.06);
        transform: none;
        box-shadow: 0 2px 8px rgba(0,0,0,.25);
    }
    .match-card--live {
        border: 1px solid rgba(239,68,68,.3);
        box-shadow: 0 0 12px rgba(239,68,68,.1);
        animation: mobile-live-pulse 2s ease-in-out infinite;
    }
    .match-card--live:active { animation: none; }
    .match-card--finished { opacity: 1; }
    @keyframes mobile-live-pulse {
        0%, 100% { box-shadow: 0 0 8px rgba(239,68,68,.08); }
        50% { box-shadow: 0 0 16px rgba(239,68,68,.18); }
    }

    /* Meta row compact */
    .match-card__meta { padding: 6px 12px 5px; font-size: 10px; }
    .meta-league-logo { width: 12px; height: 12px; }

    /* Body: single column — hide time & odds columns */
    .match-card__body2 {
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    .mc2-time { display: none; }
    .mc2-odds { display: none; }

    /* Teams: full width with inline score + odds */
    .mc2-teams {
        padding: 4px 12px;
        min-height: auto;
    }
    .mc2-team {
        padding: 10px 0;
        min-height: 44px;
        gap: 10px;
    }
    .mc2-team-name {
        font-size: 14px;
        flex: 1;
        min-width: 0;
    }

    /* Inline score — visible on mobile for live/finished */
    .mc2-team-score {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-size: 17px;
        font-weight: 700;
        color: var(--text-muted);
        min-width: 28px;
        text-align: center;
    }
    .mc2-team-score--win { color: var(--text-primary); }

    /* Inline odds pill — looks like tappable betting button */
    .mc2-team-odd {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 700;
        color: var(--accent);
        background: rgba(255,102,0,.12);
        border: 1px solid rgba(255,102,0,.2);
        border-radius: 6px;
        padding: 4px 12px;
        min-width: 52px;
        text-align: center;
        flex-shrink: 0;
        cursor: pointer;
    }
    .mc2-team-odd:hover { background: rgba(255,102,0,.2); }

    /* Footer: expanded on mobile */
    .match-card__footer {
        padding: 6px 12px;
        gap: 6px;
        flex-wrap: wrap;
    }
    .mc2-footer-time {
        display: inline;
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 700;
        color: var(--text-primary);
    }
    .mc2-footer-format {
        display: inline;
        font-size: 10px;
        font-weight: 700;
        color: var(--text-muted);
        background: var(--bg-hover);
        padding: 1px 6px;
        border-radius: 3px;
        margin-left: auto;
    }
    .match-card__footer .match-time-label { display: none; }

    /* ─── MATCH PAGE — SECTION REORDERING ──────────────────── */
    .content-main {
        display: flex !important;
        flex-direction: column !important;
    }
    .section--prediction { order: 1; }
    .section--maps       { order: 2; }
    .section--rosters    { order: 3; }
    .section--h2h        { order: 4; }
    .section--stats      { order: 5; }

    /* ─── SECTION BLOCKS AS NATIVE CARDS ───────────────────── */
    .section-block {
        background: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        overflow: hidden;
        margin-bottom: 12px;
    }
    .section-block .section-title {
        padding: 14px 14px 10px !important;
        margin: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        font-size: 15px !important;
        background: var(--bg-elevated);
    }
    .section-block .games-list,
    .section-block .rosters-grid,
    .section-block .live-player-stats {
        padding: 10px;
    }

    /* ─── MATCH PAGE HERO — COMPACT ─────────────────────────── */
    .match-hero { padding: 16px 0 12px; }
    .match-context {
        margin-bottom: 12px;
        font-size: 11px;
        gap: 5px;
        flex-wrap: wrap;
    }
    .context-league-logo { width: 14px; height: 14px; }

    .match-hero-score { gap: 8px; }
    .match-hero-team { gap: 8px; }
    .match-hero-team .team-logo--xl { width: 48px !important; height: 48px !important; }
    .match-hero-team .team-logo--placeholder.team-logo--xl { width: 48px !important; height: 48px !important; font-size: 16px !important; }
    .hero-team-name { font-size: 15px; }
    .hero-team-country { font-size: 11px; }
    .winner-crown-label { font-size: 11px; }

    .match-hero-scoreboard { min-width: 60px; }
    .scoreboard-score { font-size: 26px; }
    .scoreboard-colon { font-size: 20px; }
    .scoreboard-time { font-size: 11px; display: none; }
    .scoreboard-live-label { font-size: 11px; }
    .score-upcoming-label { font-size: 16px; }

    /* Stream section compact */
    .stream-section { padding: 12px 0 0; }
    .stream-picker { gap: 6px; }
    .stream-picker-btn { padding: 5px 10px; font-size: 11px; }

    /* ─── BETTING WIDGET — MOBILE STACKED ROWS ──────────────── */
    .betting-widget-container { padding-top: 0 !important; margin-top: 0; }
    .betting-widget-inner { padding: 12px 0 0; }
    .betting-widget { border-radius: 12px; }
    .betting-widget__header { padding: 10px 14px; flex-wrap: wrap; gap: 6px; }
    .betting-widget__title { font-size: 13px; }
    .betting-widget__teams { display: flex !important; font-size: 12px; gap: 6px; }

    .betting-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 0;
        padding: 10px 14px;
        min-height: auto;
    }
    .betting-row__logo {
        grid-column: 1 / -1;
        padding: 4px 0 8px;
    }
    .betting-logo-img { height: 28px; width: 120px; object-fit: contain; }
    .betting-row__t1-odds,
    .betting-row__t2-odds {
        display: flex !important;
        padding: 0;
        gap: 4px;
    }
    .betting-row__t1-odds { justify-content: flex-start; }
    .betting-row__t2-odds { justify-content: flex-end; }
    .odds-value {
        font-size: 16px;
        background: rgba(255,102,0,.1);
        border: 1px solid rgba(255,102,0,.15);
        padding: 6px 14px;
        border-radius: 8px;
        min-width: 70px;
        text-align: center;
    }
    .betting-row__cta {
        grid-column: 1 / -1;
        padding: 8px 0 0;
        justify-content: stretch;
    }
    .betting-code-btn {
        font-size: 12px;
        padding: 6px 12px;
        width: 100%;
        justify-content: center;
        min-height: 40px;
        border-radius: 8px;
    }
    .betting-offer-text { font-size: 12px; }

    /* ─── GAME CARDS — NATIVE ──────────────────────────────── */
    .game-card {
        border-radius: 12px;
        margin-bottom: 8px;
        overflow: hidden;
    }
    .game-card__map-hero {
        border-radius: 12px 12px 0 0;
        height: 80px;
    }
    .game-team-score {
        min-height: 44px;
        padding: 10px 14px;
    }
    .game-team-name {
        font-size: 13px !important;
    }
    .game-stats-wrap {
        padding: 10px;
    }
    .game-rounds-section { margin-top: 8px; }

    /* ─── ROSTERS COMPACT ───────────────────────────────────── */
    .rosters-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .roster-card { border-radius: 12px; overflow: hidden; }
    .roster-header { padding: 10px 12px; }
    .roster-player-row { padding: 8px 12px; min-height: 44px; }
    .roster-player-avatar { width: 28px; height: 28px; }
    .roster-player-initials { width: 28px; height: 28px; font-size: 11px; }

    /* ─── STATS TABLE — SCROLLABLE ──────────────────────────── */
    .live-player-stats {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .player-stats-team h4 { font-size: 12px; margin-bottom: 6px; }
    .stats-table-scroll {
        position: relative;
        margin: 0 -10px;
        padding: 0 10px;
    }
    .stats-table {
        font-size: 11px;
        min-width: 580px;
    }
    .stats-table th,
    .stats-table td {
        padding: 6px 4px;
        white-space: nowrap;
    }
    .stats-table th:first-child,
    .stats-table td:first-child {
        position: sticky;
        left: 0;
        background: var(--bg-card);
        z-index: 1;
        min-width: 90px;
    }

    /* ─── H2H — COMPACT NATIVE ──────────────────────────────── */
    .h2h-summary-grid {
        grid-template-columns: 1fr auto 1fr !important;
        gap: 8px !important;
        padding: 16px 12px !important;
        margin-bottom: 10px;
        border-radius: 12px;
    }
    .h2h-big-score { font-size: 32px !important; }
    .h2h-team-label { font-size: 11px; }
    .h2h-vs-label { font-size: 12px; }
    .h2h-match-row { padding: 8px 10px; gap: 8px; font-size: 11px; }
    .h2h-date { display: none; }
    .h2h-tourn { font-size: 10px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ─── PREDICTION WIDGET — NATIVE CARD ────────────────────── */
    .prediction-widget {
        border-radius: 12px !important;
        border-color: rgba(255,102,0,.25) !important;
        box-shadow: 0 2px 12px rgba(255,102,0,.06);
    }
    .prediction-widget__body { padding: 14px; }
    .prediction-widget__header {
        padding: 12px 14px;
        background: linear-gradient(90deg, rgba(255,102,0,.15), transparent);
    }
    .prediction-widget__teams {
        flex-direction: row !important;
        gap: 6px;
    }
    .prediction-widget__team { gap: 6px; }
    .prediction-widget__winprob-pct { font-size: 18px; }
    .prediction-widget__winprob-label { font-size: 9px; }
    .prediction-widget__confbar {
        height: 8px;
        border-radius: 4px;
    }
    .prediction-widget__summary { font-size: 11px; }
    .prediction-widget .btn {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        border-radius: 8px;
        font-size: 13px;
    }

    /* ─── PREDICTION CARDS (listing page) ──────────────────── */
    .prediction-card { border-radius: 12px; }
    .prediction-card:hover { transform: none; }
    .prediction-card:active { transform: scale(0.98); }

    /* ─── SIDEBAR WIDGETS (below main on mobile) ────────────── */
    .sidebar-widget { border-radius: 12px; }
    .mvp-widget .mvp-card { gap: 10px; }
    .info-list dt { font-size: 12px; }
    .info-list dd { font-size: 12px; }

    /* ─── TAB NAV — SCROLLABLE ──────────────────────────────── */
    .tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-radius: 12px 12px 0 0;
    }
    .tab-nav::-webkit-scrollbar { display: none; }
    .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* ═══ EXTRA SMALL — ≤480px fine-tuning ═══ */
@media (max-width: 480px) {
    .match-hero-score { gap: 4px; }
    .match-hero-team .team-logo--xl { width: 40px !important; height: 40px !important; }
    .match-hero-team { gap: 6px; }
    .hero-team-name { font-size: 13px; }
    .scoreboard-score { font-size: 22px; }
    .mc2-team-name { font-size: 13px; }
    .mc2-team-odd { font-size: 12px; padding: 3px 8px; min-width: 44px; }
    .mc2-team-score { font-size: 15px; }
    .betting-row { padding: 8px 10px; }
    .odds-value { font-size: 14px; padding: 4px 10px; min-width: 60px; }
    .section-block .section-title { font-size: 14px; padding: 12px 12px 8px; }
    .container { padding: 0 10px; }
    .h2h-big-score { font-size: 26px !important; }
    .h2h-summary-grid { padding: 12px 10px !important; }
    .game-team-name { font-size: 12px !important; }
    .roster-player-row { padding: 6px 10px; }
}

/* ═══ SEO Content Sections ═══ */
/* ── SEO Intro Card ── */
/* seo-intro inside custom hero sections */
.maps-hero .seo-intro,
.page-hero-betting .seo-intro {
    margin: 10px 0 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    max-width: 720px;
}
.maps-hero .seo-intro p,
.page-hero-betting .seo-intro p {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}

/* seo-intro standalone (fallback, outside header bar) */
.seo-intro {
    margin: 20px 0 0;
    padding: 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
}
.seo-intro p {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text-secondary, var(--text-muted));
    margin: 0;
}

/* ── Homepage Content Sections ── */
.hp-content-section {
    padding: 48px 0 0;
}
.hp-content-section:last-of-type {
    padding-bottom: 48px;
}
.hp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.hp-section-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0;
}

/* Majors grid */
.hp-majors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.hp-major-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .15s, transform .1s;
}
.hp-major-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.hp-major-card--live { border-color: var(--red); background: linear-gradient(135deg, rgba(239,68,68,.06), var(--bg-card)); }
.hp-major-card__live { font-size: 11px; font-weight: 700; color: var(--red); letter-spacing: .04em; }
.hp-major-card__top { display: flex; align-items: center; gap: 8px; }
.hp-major-card__tier { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--accent); flex-shrink: 0; }
.hp-major-card__series { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hp-major-card__name { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.3; }
.hp-major-card__date { font-size: 12px; color: var(--text-muted); }
.hp-major-card__prize { font-size: 14px; font-weight: 700; color: var(--accent); }

/* Sidebar Major & Premier Events */
.sb-majors-list { display: flex; flex-direction: column; gap: 0; }
.sb-major-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 0; border-bottom: 1px solid var(--border);
    text-decoration: none; color: var(--text);
    transition: background .15s;
}
.sb-major-item:last-child { border-bottom: none; }
.sb-major-item:hover { background: var(--bg-hover, rgba(255,255,255,.03)); border-radius: var(--radius-sm); }
.sb-major-item--live { border-left: 2px solid var(--red); padding-left: 8px; margin-left: -2px; }
.sb-major-item__icon { width: 28px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0; object-fit: contain; margin-top: 2px; }
.sb-major-item__icon-ph { width: 28px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--bg-inset, var(--border)); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.sb-major-item__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sb-major-item__top { display: flex; align-items: center; gap: 6px; }
.sb-major-item__tier { font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--accent); text-transform: uppercase; }
.sb-major-item__live { font-size: 9px; font-weight: 700; color: var(--red); letter-spacing: .04em; }
.sb-major-item__name { font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-major-item__date { font-size: 11px; color: var(--text-muted); }
.sb-major-item__prize { font-size: 12px; font-weight: 700; color: var(--accent); }

/* Latest News Grid (homepage full-width section) */
.hp-news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 24px;
}
.hp-news-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    transition: border-color .15s, transform .1s;
}
.hp-news-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.hp-news-card__img { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-inset, var(--border)); }
.hp-news-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-news-card__img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.hp-news-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hp-news-card__meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.hp-news-card__cat { font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.hp-news-card__date { font-size: 11px; }
.hp-news-card__title { font-size: 14px; font-weight: 700; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-news-card__excerpt { font-size: 12px; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
@media(max-width:1100px) { .hp-news-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:768px)  { .hp-news-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media(max-width:480px)  { .hp-news-grid { grid-template-columns: 1fr; } }

/* Leagues grid */
.hp-leagues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.hp-league-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s;
}
.hp-league-card:hover { border-color: var(--accent); }
.hp-league-card__logo { width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0; object-fit: contain; }
.hp-league-card__info { min-width: 0; }
.hp-league-card__league { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; display: block; }
.hp-league-card__name { font-size: 14px; font-weight: 700; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-league-card__meta { font-size: 12px; color: var(--text-muted); }

/* Homepage Predictions Filler */
.hp-predictions-fill { overflow: hidden; }
.hp-pred-grid.prediction-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 1024px) {
    .hp-pred-grid.prediction-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .hp-pred-grid.prediction-cards-grid { grid-template-columns: 1fr; }
}

/* Prediction card — mirrors .match-card aesthetic */
.hp-pred-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.hp-pred-card:hover {
    background: var(--bg-elevated);
    border-color: var(--border-accent);
    border-left-color: var(--accent);
    box-shadow: var(--shadow-md);
}
.hp-pred--won { border-left-color: var(--green); }
.hp-pred--won:hover { border-left-color: var(--green); }
.hp-pred--lost { border-left-color: var(--red); }
.hp-pred--lost:hover { border-left-color: var(--red); }
.hp-pred--live { border-left-color: var(--red); background: rgba(239,68,68,.03); }
.hp-pred--live:hover { border-left-color: var(--red); background: rgba(239,68,68,.06); }

/* Meta row — league logo + event name + date */
.hp-pred-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 5px;
    font-size: 11px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.hp-pred-card__meta .meta-league-logo {
    width: 13px;
    height: 13px;
    border-radius: 2px;
    flex-shrink: 0;
}
.hp-pred-card__event {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.hp-pred-card__date {
    flex-shrink: 0;
    margin-left: auto;
    opacity: .7;
}

/* Body — teams + result */
.hp-pred-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 8px;
}
.hp-pred-card__teams {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.hp-pred-card__team {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.hp-pred-card__team .team-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.hp-pred-card__name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hp-pred-card__name--pick { color: var(--green); }
.hp-pred-card__vs {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Result badge area */
.hp-pred-card__result {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.hp-pred-card__badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.hp-pred-card__badge--won { background: rgba(0,200,83,.12); color: var(--green); }
.hp-pred-card__badge--lost { background: rgba(239,68,68,.12); color: var(--red); }
.hp-pred-card__badge--live { background: rgba(239,68,68,.15); color: var(--red); animation: pulse-badge 2s infinite; }
.hp-pred-card__conf {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
}

/* Quick Links */
.hp-quicklinks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
}
.hp-ql {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color .15s, transform .1s;
}
.hp-ql:hover { border-color: var(--accent); transform: translateY(-1px); }
.hp-ql__icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.hp-ql__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hp-ql__label { font-size: 14px; font-weight: 700; }
.hp-ql__sub { font-size: 11px; color: var(--text-muted); }

/* Guides grid */
.hp-guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.hp-guide-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px 24px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, transform .1s;
    display: block;
}
.hp-guide-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.hp-guide-card__title { font-size: 15px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.hp-guide-card__desc { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* Maps grid */
.hp-maps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}
.hp-map-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16/10;
    display: block;
    text-decoration: none;
    border: 1px solid var(--border);
    transition: border-color .15s, transform .1s;
}
.hp-map-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.hp-map-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-map-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 30%, rgba(0,0,0,.85));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 12px;
}
.hp-map-card__name { font-size: 14px; font-weight: 700; color: #fff; margin: 0; }
.hp-map-card__balance { font-size: 10px; color: rgba(255,255,255,.7); }

/* Two-column teams/players */
.hp-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
@media (max-width: 768px) {
    .hp-two-col { grid-template-columns: 1fr; }
}
.hp-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hp-ranking-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s;
}
.hp-ranking-row:hover { border-color: var(--accent); }
.hp-ranking-row__rank { font-size: 13px; font-weight: 700; color: var(--text-muted); width: 22px; text-align: center; flex-shrink: 0; }
.hp-ranking-row__avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.hp-ranking-row__name { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-ranking-row__team { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.hp-ranking-row__stat { font-size: 12px; font-weight: 700; color: var(--accent); flex-shrink: 0; }

/* ── Full-width Major & Premier Events grid ── */
.hp-majors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.hp-major-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color .15s;
}
.hp-major-card:hover { border-color: var(--accent); }
.hp-major-card--live { border-left: 3px solid var(--red); }
.hp-major-card__icon { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; border-radius: 6px; }
.hp-major-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hp-major-card__top { display: flex; align-items: center; gap: 6px; }
.hp-major-card__tier { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.hp-major-card__live { font-size: 10px; font-weight: 700; color: var(--red); text-transform: uppercase; }
.hp-major-card__name { font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-major-card__date { font-size: 11px; color: var(--text-muted); }
.hp-major-card__prize { font-size: 11px; font-weight: 600; color: var(--green); }

.hp-wide-promo-wrap {
    padding-top: 40px;
    padding-bottom: 8px;
}
.hp-seo-text-section {
    margin-bottom: 32px;
}

/* ── SEO Content (bottom of page, above FAQ) ── */
.seo-content {
    margin: 48px 0 24px;
    padding: 28px 28px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
}
.seo-content h2 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 24px 0 10px;
}
.seo-content h2:first-child { margin-top: 0; }
.seo-content p {
    margin: 0 0 12px;
    color: var(--text-muted);
}
.seo-content ul, .seo-content ol {
    margin: 0 0 12px;
    padding-left: 20px;
    color: var(--text-muted);
}

/* ── FAQ Section ── */
.seo-faq {
    margin: 48px 0 24px;
    padding: 28px 28px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
}
.seo-faq h2 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.seo-faq h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--accent);
    border-radius: 2px;
    flex-shrink: 0;
}
.seo-faq details {
    margin-bottom: 6px;
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s, background .2s;
}
.seo-faq details:hover {
    border-color: var(--border);
}
.seo-faq details[open] {
    background: color-mix(in srgb, var(--bg-card) 80%, var(--accent) 3%);
    border-color: color-mix(in srgb, var(--accent) 20%, var(--border) 80%);
}
.seo-faq summary {
    padding: 13px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: color .15s;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.seo-faq summary:hover {
    color: var(--accent);
}
.seo-faq summary::before {
    content: '\25B8';
    color: var(--accent);
    font-size: 11px;
    transition: transform .2s;
    flex-shrink: 0;
}
.seo-faq details[open] summary::before {
    transform: rotate(90deg);
}
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::marker { display: none; content: ''; }
.seo-faq .faq-answer {
    padding: 0 18px 16px 18px;
    border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
    margin-top: 0;
    padding-top: 12px;
}
.seo-faq .faq-answer p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0;
}

/* ── Responsive SEO ── */
@media (max-width: 640px) {
    .seo-intro { padding: 16px 18px; }
    .seo-faq { padding: 20px 18px 14px; }
    .seo-faq summary { padding: 11px 14px; font-size: 13px; }
    .seo-faq .faq-answer { padding: 0 14px 12px; }
}

/* ── Related Links ── */
.related-links {
    padding-top: 40px;
    padding-bottom: 20px;
}
.related-links h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.related-links__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.related-links__card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.related-links__card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.related-links__label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}
.related-links__title {
    display: block;
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
}

/* ── Responsive Related Links ── */
@media (min-width: 640px) {
    .related-links__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
    .related-links__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
    .related-links__grid { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   TRANSFERS PAGE
   ============================================================ */
.transfer-filters {
    margin-bottom: 16px;
}
.transfer-filter-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.transfer-filter-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
}
.transfer-filter-select:focus { border-color: var(--accent); outline: none; }

.transfer-list {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.transfer-row {
    display: grid;
    grid-template-columns: 48px 32px 24px 32px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}
.transfer-row:last-child { border-bottom: none; }
.transfer-row:hover { background: var(--bg-hover); }

.transfer-player-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.transfer-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.transfer-team {
    display: flex;
    align-items: center;
    justify-content: center;
}
.transfer-team img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.transfer-no-team {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 4px;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}
.transfer-arrow {
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}
.transfer-desc {
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 0;
}
.transfer-desc strong {
    color: var(--text-primary);
    font-weight: 700;
}
.transfer-date {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    text-align: right;
}
.transfer-type-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.transfer-type-badge--bench {
    background: rgba(245,197,24,.12);
    color: var(--yellow);
    border: 1px solid rgba(245,197,24,.25);
}
.transfer-type-badge--coach {
    background: rgba(59,130,246,.12);
    color: var(--blue);
    border: 1px solid rgba(59,130,246,.25);
}
.transfer-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 0;
}
.transfer-page-btn {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    transition: background .1s;
}
.transfer-page-btn:hover { background: var(--bg-hover); }
.transfer-page-info {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Sidebar Transfer Widget ── */
.sidebar-transfer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}
.sidebar-transfer-row:last-of-type { border-bottom: none; }
.sidebar-transfer-row:hover { opacity: .85; }
.sidebar-transfer-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.sidebar-transfer-avatar-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}
.sidebar-transfer-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-transfer-teams {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    flex: 1;
}
.sidebar-transfer-teams img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.sidebar-transfer-arrow {
    color: var(--text-muted);
    font-size: 12px;
}
.sidebar-transfer-no-team {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border-radius: 3px;
    padding: 1px 4px;
}
.sidebar-transfer-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-left: auto;
}
.sidebar-transfer-badge--bench {
    background: rgba(245,197,24,.12);
    color: var(--yellow);
}
.sidebar-transfer-badge--coach {
    background: rgba(59,130,246,.12);
    color: var(--blue);
}

/* ── Transfers responsive ── */
@media (max-width: 640px) {
    .transfer-row {
        grid-template-columns: 36px 24px 16px 24px 1fr auto;
        gap: 6px;
        padding: 8px 10px;
    }
    .transfer-player-avatar img,
    .transfer-avatar-placeholder { width: 32px; height: 32px; }
    .transfer-team img { width: 20px; height: 20px; }
    .transfer-desc { font-size: 12px; }
    .transfer-date { font-size: 10px; }
    .transfer-arrow { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════
   NEW PAGE COMPONENTS — Guides, Calculator, Esports,
   Leaderboards, Majors, Tips, Stats
═══════════════════════════════════════════════════ */

/* ── Utility: section spacing ── */
.section-mb     { margin-bottom: 32px; }
.section-mb-lg  { margin-bottom: 36px; }
.section-mt     { margin-top: 40px; }
.view-all-cta   { margin-top: 14px; text-align: center; }

/* ── Guide Cards Grid ── */
.guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 8px;
}
.guide-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .2s, background .15s, box-shadow .15s;
}
.guide-card:hover {
    border-color: var(--accent);
    background: var(--bg-elevated);
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.guide-card__icon {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}
.guide-card__title {
    font-size: 18px;
    font-family: var(--font-display);
    font-weight: 700;
    margin: 0 0 8px;
}
.guide-card__desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}
/* ── Guide Article — card-wrapped prose ── */
.guide-article {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.guide-article .guide-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    padding: 24px 28px;
}
.guide-article h2 {
    font-size: 20px;
    font-family: var(--font-display);
    font-weight: 700;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.guide-article h3 {
    font-size: 16px;
    font-family: var(--font-display);
    font-weight: 700;
    margin: 20px 0 8px;
    color: var(--text);
}
.guide-article h3:first-child { margin-top: 0; }
.guide-article p { margin: 0 0 14px; }
.guide-article p:last-child { margin-bottom: 0; }
.guide-article ul, .guide-article ol { margin: 0 0 14px; padding-left: 22px; }
.guide-article li { margin-bottom: 5px; }
.guide-article li:last-child { margin-bottom: 0; }
.guide-article strong { color: var(--text); }
.guide-article a { color: var(--accent); text-decoration: none; }
.guide-article a:hover { text-decoration: underline; }
.guide-article img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm, 8px);
    margin: 12px 0;
}
.guide-article blockquote {
    border-left: 3px solid var(--accent);
    margin: 14px 0;
    padding: 12px 20px;
    background: var(--bg-elevated);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
}
.guide-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 13px;
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
}
.guide-article th, .guide-article td {
    padding: 10px 14px;
    border: 1px solid var(--border);
    text-align: left;
}
.guide-article th {
    background: var(--bg-elevated);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .5px;
    color: var(--text);
}
.guide-article td {
    background: var(--bg-surface, var(--bg-card));
}
@media (max-width: 640px) {
    .guide-article .guide-section { padding: 18px 16px; }
    .guide-article h2 { font-size: 17px; }
}
.breadcrumb{font-size:12px;color:var(--text-muted)}
.breadcrumb a{color:var(--text-secondary);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}

/* ── Calculator ── */
.calc-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    padding: 28px;
    margin-bottom: 32px;
}
.calc-container h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
}
.calc-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.calc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}
.calc-label {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.calc-input,
.calc-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-surface, var(--bg-elevated));
    color: var(--text);
    font-size: 15px;
    transition: border-color .15s;
}
.calc-input:focus,
.calc-select:focus {
    outline: none;
    border-color: var(--accent);
}
.calc-results {
    margin-top: 24px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
}
.calc-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    text-align: center;
}
.calc-result-box {
    background: var(--bg-surface, var(--bg-elevated));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    padding: 18px 12px;
}
.calc-result-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.calc-result-value {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-display);
}
.calc-result-value--profit { color: var(--green, #00c853); }
.calc-result-value--payout { color: var(--text); }
.calc-result-value--prob   { color: var(--text); }

/* ── Esports Page ── */
.esports-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.ranking-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    font-size: 13px;
    transition: background .15s, border-color .15s;
}
.ranking-row:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
}
.ranking-row__rank {
    font-weight: 700;
    color: var(--text-muted);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.ranking-row__name {
    font-weight: 600;
}
.ranking-row__stat {
    margin-left: auto;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--accent-green, #00c853);
}
.ranking-row__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Explore links grid */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.explore-link {
    display: block;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    transition: background .15s, border-color .15s;
}
.explore-link:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
}

/* ── Stats: table stat cells ── */
.stat-cell {
    text-align: right;
    font-size: 12px;
    font-family: var(--font-mono, monospace);
}
.stat-cell--primary {
    font-size: 13px;
    font-weight: 600;
}
.stat-cell--good { color: var(--accent-green, #00c853); }
.stat-cell--bad  { color: var(--accent-red, #e74c3c); }
.stat-cell--muted {
    color: var(--text-muted);
}
.rank-cell {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}
.player-info-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.player-info-cell__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
}
.team-info-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

/* ── Tips / Predictions: Stats bar ── */
.tip-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 28px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    padding: 20px;
}
.tip-stats-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 280px;
}
.tip-stat-card {
    flex: 1;
    min-width: 80px;
    padding: 16px 20px;
    text-align: center;
}
.tip-stat-card__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.tip-stat-card__value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
}
.tip-stat-card__value--green  { color: var(--green, #00c853); }
.tip-stat-card__value--red    { color: var(--red, #ef4444); }
.tip-stat-card__value--accent { color: var(--accent); }
.tip-record-card {
    flex: 1;
    min-width: 280px;
    padding: 16px 20px;
}
.tip-record-bar {
    display: flex;
    height: 24px;
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    background: var(--bg-elevated);
}
.tip-record-bar__segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    min-width: 30px;
}
.tip-record-bar__segment--win  { background: var(--green, #00c853); color: #000; }
.tip-record-bar__segment--loss { background: var(--red, #ef4444); color: #fff; }
.tip-record-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

/* ── Leaderboard tabs ── */
.leaderboard-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}
.leaderboard-filters .btn--active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.leaderboard-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
}
.leaderboard-tab {
    border-radius: 6px 6px 0 0;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    transition: border-color .15s, color .15s;
}
.leaderboard-tab--active,
.leaderboard-tab.is-active {
    border-bottom-color: var(--accent);
}

/* ── Matches view toggle ── */
.matches-view-toggle{display:flex;gap:4px;margin-bottom:20px;border-bottom:2px solid var(--border);padding-bottom:0}
.matches-view-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;font-family:var(--font-display);color:var(--text-muted);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;border-radius:6px 6px 0 0;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.matches-view-btn:hover{color:var(--text-primary);background:var(--bg-elevated)}
.matches-view-btn--active{color:var(--accent);border-bottom-color:var(--accent)}
.matches-view-btn svg{flex-shrink:0}

/* Date group headers (time view) */
.matches-date-group{margin-bottom:24px}
.matches-date-header{display:flex;align-items:center;gap:10px;padding:8px 14px;margin-bottom:8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md)}
.matches-date-label{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text-primary)}
.matches-date-count{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-muted);background:var(--bg-surface);padding:2px 8px;border-radius:10px}

/* Event group headers (event view) */
.matches-event-group{margin-bottom:24px}
.matches-event-header{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md)}
.matches-event-logo{width:24px;height:24px;object-fit:contain;border-radius:4px;flex-shrink:0}
.matches-event-label{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.matches-event-count{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-muted);background:var(--bg-surface);padding:2px 8px;border-radius:10px;flex-shrink:0}

/* ── Left Sidebar Layout Modifier ── */
.page-layout--sidebar-left {
    grid-template-columns: var(--sidebar-w) 1fr;
}

/* ── Match Filter Sidebar ── */
.content-sidebar--filters { position: sticky; top: calc(var(--header-h, 96px) + 20px); align-self: start; }

.filter-widget {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.filter-widget__title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}
.filter-widget__title svg { color: var(--accent); flex-shrink: 0; }

.filter-reset-btn {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .15s;
}
.filter-reset-btn:hover { background: var(--accent); color: #fff; }

/* Filter group accordion */
.filter-group { border-bottom: 1px solid var(--border); }
.filter-group:last-of-type { border-bottom: none; }

.filter-group__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    transition: background .12s;
}
.filter-group__toggle:hover { background: var(--bg-hover); }
.filter-group__toggle .filter-chevron {
    margin-left: auto;
    transition: transform .2s;
    flex-shrink: 0;
}
.filter-group__toggle.is-open .filter-chevron { transform: rotate(180deg); }

.filter-count {
    font-size: 11px;
    color: var(--accent);
    font-weight: 700;
}

.filter-group__body { padding: 0 14px 12px; }

/* Search input inside filter */
.filter-search {
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color .15s;
}
.filter-search:focus { border-color: var(--accent); }
.filter-search::placeholder { color: var(--text-muted); }

/* Filter options list */
.filter-options {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.filter-options::-webkit-scrollbar { width: 4px; }
.filter-options::-webkit-scrollbar-track { background: transparent; }
.filter-options::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.filter-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .12s;
    font-size: 12px;
    color: var(--text-secondary);
}
.filter-option:hover { background: var(--bg-hover); }
.filter-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
}
.filter-option__img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
}
.filter-option__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Date filter */
.filter-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.filter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 32px;
}
.filter-input {
    flex: 1;
    padding: 5px 8px;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    color-scheme: dark;
}
.filter-input:focus { border-color: var(--accent); }

.filter-date-presets {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.filter-preset {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .15s;
}
.filter-preset:hover { color: var(--text-primary); border-color: var(--text-muted); }
.filter-preset.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

/* Active filter summary */
.filter-active-summary {
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
}
.filter-active-summary strong { color: var(--accent); }

/* Close button — hidden on desktop, visible on mobile */
.filter-close-btn {
    display: none;
    margin-left: 8px;
    padding: 2px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s;
    line-height: 0;
}
.filter-close-btn:hover { color: var(--text-primary); }

/* Tournament count badge */
.filter-option__count {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface);
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Mobile filter toggle button */
.mobile-filter-btn { display: none; margin-bottom: 12px; }
@media (max-width: 960px) {
    .mobile-filter-btn { display: inline-flex; align-items: center; gap: 6px; }
}

/* Filter wrap — no visual impact, just layout pass-through */
.match-filter-wrap { display: contents; }

/* ── Mobile: filter sidebar as fullscreen overlay ── */
@media (max-width: 960px) {
    .page-layout--sidebar-left {
        grid-template-columns: 1fr;
    }
    .content-sidebar--filters {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100vw;
        z-index: 1002;
        transform: translateY(100%);
        transition: transform .3s ease;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--bg-base);
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
        -webkit-overflow-scrolling: touch;
    }
    .content-sidebar--filters.is-open {
        transform: translateY(0);
    }
    .filter-close-btn {
        display: flex;
    }
    .filter-overlay-active {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
    .filter-overlay-active::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 1001;
        pointer-events: none;
    }
    /* Apply button at bottom of mobile filter */
    .filter-active-summary {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: var(--bg-card);
        border-top: 1px solid var(--border);
        padding: 14px;
        text-align: center;
    }
}

/* ── Majors table ── */
.majors-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.majors-table thead tr {
    border-bottom: 2px solid var(--border);
}
.majors-table th {
    padding: 10px 12px;
    color: var(--text-muted);
    font-weight: 600;
    text-align: left;
}
.majors-table td {
    padding: 10px 12px;
}
.majors-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}
.majors-table tbody tr:last-child {
    border-bottom: none;
}
.majors-table tbody tr:hover {
    background: var(--bg-hover, rgba(255,255,255,.03));
}
.majors-table td:first-child {
    font-weight: 500;
}

/* Major cards */
.major-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    padding: 20px;
    margin-bottom: 14px;
    transition: border-color .15s;
}
.major-card:hover {
    border-color: var(--accent);
}
.major-card__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.major-card__title {
    margin: 0 0 4px;
    font-size: 17px;
}
.major-card__date {
    font-size: 13px;
    color: var(--text-muted);
}
.major-card__prize {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
}
.major-card--live {
    border-color: var(--red);
    background: linear-gradient(135deg, rgba(239,68,68,.06), var(--bg-card));
}
.major-card__info { flex: 1; min-width: 0; }
.major-card__tier {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255,102,0,.15);
    color: var(--accent);
    margin-bottom: 6px;
}
.major-card__meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}
.major-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
a.major-card { text-decoration: none; color: inherit; display: block; }
.majors-grid { display: flex; flex-direction: column; gap: 12px; }
.majors-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.majors-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.majors-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--text); }
.majors-table tr:hover td { background: rgba(255,255,255,.02); }
.tier-badge { font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 2px 6px; border-radius: 3px; }
.tier-badge--s { background: rgba(255,215,0,.15); color: #ffd700; }
.tier-badge--a { background: rgba(255,102,0,.15); color: var(--accent); }

/* ── Content section card ── */
.content-section {
    padding: 32px;
    margin-top: 36px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.content-section:first-child {
    margin-top: 0;
}
.content-section h2 {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 800;
    margin: 0 0 16px;
}
.content-section p {
    color: var(--text-secondary, var(--text-muted));
    line-height: 1.7;
    margin-bottom: 12px;
}
.content-section p:last-child {
    margin-bottom: 0;
}

/* ── Pagination centered ── */
.pagination-center {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
    flex-wrap: wrap;
}
.pagination-center .btn {
    min-width: 36px;
    justify-content: center;
}

/* Quick nav pills (used on multiple pages) */
.quick-nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Responsive: new components ── */
@media (max-width: 768px) {
    .esports-two-col { grid-template-columns: 1fr; }
    .calc-form-row { grid-template-columns: 1fr; }
    .calc-results-grid { grid-template-columns: 1fr; }
    .tip-stats-bar { flex-direction: column; padding: 12px; gap: 8px; margin-bottom: 16px; }
    .tip-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; }
    .tip-stats-row .tip-stat-card { min-width: 0; padding: 10px 8px; }
    .tip-stat-card__value { font-size: 22px; }
    .tip-stat-card__label { font-size: 10px; letter-spacing: .8px; margin-bottom: 2px; }
    .tip-record-card { min-width: 0; padding: 10px 12px; }
    .tip-record-card .tip-stat-card__label { margin-bottom: 6px; }
    .tip-record-bar { height: 20px; }
    .tip-record-bar__segment { font-size: 10px; }
}
@media (max-width: 640px) {
    .guides-grid { grid-template-columns: 1fr; }
    .explore-grid { grid-template-columns: 1fr 1fr; }
    .guide-card { padding: 18px; }
    .ranking-row { padding: 6px 10px; font-size: 12px; }
    .tip-stats-bar { padding: 10px; gap: 6px; margin-bottom: 12px; }
    .tip-stats-row { gap: 4px; }
    .tip-stats-row .tip-stat-card { padding: 8px 6px; }
    .tip-stat-card__value { font-size: 20px; }
}

/* ============================================================
   FLOATING GIVEAWAY BANNER
   Desktop: fixed bottom-right with margin
   Mobile:  fixed above bottom nav
   ============================================================ */
/* ── Fullwidth floating giveaway banner (content-width) ── */
.giveaway-float {
    position: fixed !important;
    z-index: 1090;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    max-width: 1240px;
    background: #18181c;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0,0,0,.6);
    overflow: hidden;
    animation: gfSlideUp .4s ease-out;
}
@keyframes gfSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(24px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Close button ── */
.giveaway-float__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s;
}
.giveaway-float__close:hover { background: rgba(0,0,0,.9); }

/* ── Inner link ── */
.giveaway-float__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    text-decoration: none;
    color: #f0f0f0;
    transition: background .15s;
}
.giveaway-float__inner:hover { background: #1e1e24; }

/* ── Image wrapper — fixed aspect ratio regardless of source ── */
.giveaway-float__img-wrap {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: #111;
}
.giveaway-float__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Body ── */
.giveaway-float__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.giveaway-float__top-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.giveaway-float__badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #ff6600;
}
.giveaway-float__countdown {
    font-size: 11px;
    font-weight: 700;
    color: #ff6600;
    animation: gfBlink 1.5s ease-in-out infinite;
}
@keyframes gfBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}
.giveaway-float__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}
.giveaway-float__prize {
    font-size: 12px;
    font-weight: 600;
    color: #a0a0b0;
}

/* ── CTA ── */
.giveaway-float__cta {
    flex-shrink: 0;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: #ff6600;
    border-radius: 6px;
    white-space: nowrap;
    transition: background .15s;
}
.giveaway-float__inner:hover .giveaway-float__cta { background: #e55a00; }

/* ── Mobile — sits above bottom nav, CTA centered full-width ── */
@media (max-width: 768px) {
    .giveaway-float {
        bottom: 74px;
        width: calc(100% - 20px);
        max-width: none;
    }
    .giveaway-float__inner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
    }
    .giveaway-float__img-wrap { width: 52px; height: 52px; border-radius: 6px; }
    .giveaway-float__title { font-size: 13px; }
    .giveaway-float__prize { font-size: 11px; }
    .giveaway-float__cta {
        width: 100%;
        text-align: center;
        padding: 8px 14px;
        font-size: 12px;
        order: 10;
    }
    .giveaway-float__close { top: 6px; right: 6px; width: 24px; height: 24px; font-size: 16px; }
}

/* ============================================================
   PRIZEPICKS — Match Cards & Player Projection Tables
   ============================================================ */
.pp-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
}

/* ── Card Header ── */
.pp-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.pp-card__teams {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.pp-card__vs {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 0 4px;
}
.pp-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}
.pp-card__meta .match-format {
    background: var(--accent-dim);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 11px;
}

/* ── Team Section ── */
.pp-card__team-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.pp-card__team-section:last-of-type {
    border-bottom: none;
}
.pp-card__team-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

/* ── Projection Table ── */
.pp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pp-table thead {
    background: var(--bg-surface);
}
.pp-table th {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}
.pp-table__th--left {
    text-align: left !important;
}
.pp-table td {
    padding: 8px 12px;
    border-top: 1px solid var(--border);
}
.pp-table__player {
    text-align: left;
    white-space: nowrap;
}
.pp-table__player a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}
.pp-table__player a:hover {
    color: var(--accent);
}
.pp-table__stat {
    text-align: center;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 13px;
}
.pp-table__stat--bold {
    color: var(--text-primary);
    font-weight: 700;
}

/* ── Stat coloring (reuse match stat colors) ── */
.pp-table .stat-cell--good { color: var(--green); font-weight: 700; }
.pp-table .stat-cell--bad  { color: var(--red); }

/* ── Betting CTA ── */
.pp-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--accent-dim);
    border-top: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.pp-card__cta:hover {
    background: rgba(255,102,0,0.22);
    color: var(--text-primary);
}
.pp-card__cta-logo {
    height: 22px;
    width: auto;
    object-fit: contain;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .pp-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 14px;
    }
    .pp-card__teams {
        font-size: 13px;
    }
    .pp-card__team-section {
        padding: 12px 10px;
    }
    .pp-table th,
    .pp-table td {
        padding: 6px 8px;
    }
    /* Hide KAST on mobile */
    .pp-table th:nth-child(6),
    .pp-table td:nth-child(6) {
        display: none;
    }
}

/* ============================================================
   TEAM PERFORMANCE — Animated Ring & Bar Charts
   ============================================================ */

/* ── Layout Grid ── */
.tp-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: start;
}
.tp-rings-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 20px;
}
.tp-bars-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.tp-chart-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* ── SVG Ring Chart ── */
.tp-ring {
    position: relative;
    width: 140px;
    height: 140px;
}
.tp-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.tp-ring__bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 10;
}
.tp-ring__fill {
    fill: none;
    stroke: var(--ring-color, var(--accent));
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 326.73;
    animation: tp-ring-fill .9s ease-out forwards;
    animation-delay: .15s;
}
@keyframes tp-ring-fill {
    to { stroke-dashoffset: calc(326.73 - 326.73 * var(--pct) / 100); }
}
.tp-ring__label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.tp-ring__value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}
.tp-ring__sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Ring Legend ── */
.tp-ring-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    font-size: 12px;
    color: var(--text-secondary);
}
.tp-ring-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.tp-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.tp-ring-total {
    color: var(--text-muted);
    font-size: 11px;
}

/* ── Stat Bar Cards ── */
.tp-stats-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tp-stat-bar-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
}
.tp-stat-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.tp-stat-bar-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.tp-stat-bar-val {
    font-family: var(--font-mono, monospace);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ── Horizontal Bar Track ── */
.tp-bar-track {
    position: relative;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.tp-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 4px;
    background: var(--bar-color, var(--accent));
    width: 0;
    animation: tp-bar-grow .8s ease-out forwards;
    animation-delay: .25s;
}
@keyframes tp-bar-grow {
    to { width: calc(var(--bar-pct) * 1%); }
}

/* ============================================================
   MAP POOL — Animated Bar Rows
   ============================================================ */
.map-pool {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.map-pool__row {
    display: grid;
    grid-template-columns: 140px 1fr 56px;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    opacity: 0;
    transform: translateX(-12px);
    animation: mp-slide-in .4s ease-out forwards;
}
@keyframes mp-slide-in {
    to { opacity: 1; transform: translateX(0); }
}
.map-pool__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.map-pool__name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.map-pool__count {
    font-size: 11px;
    color: var(--text-muted);
}
.map-pool__bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.map-pool__bar-track {
    position: relative;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.map-pool__bar-wins {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 4px;
    background: var(--bar-color, var(--green));
    width: 0;
    animation: tp-bar-grow .8s ease-out forwards;
    animation-delay: .3s;
}
.map-pool__bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    font-weight: 600;
}
.map-pool__wr {
    font-family: var(--font-mono, monospace);
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

/* ── Map Breakdown — Distribution Chart ── */
.map-dist {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 8px;
}
.map-dist__heading {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 14px;
}
.map-dist__row {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}
.map-dist__name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: right;
}
.map-dist__bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 22px;
}
.map-dist__bar {
    height: 100%;
    border-radius: 3px;
    min-width: 4px;
    transition: width .6s ease-out;
}
.map-dist__count {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 20px;
}

/* ── Map Overview Cards Grid ── */
.section-subtitle {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.map-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.map-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.map-card__header {
    background: var(--bg-elevated);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}
.map-card__name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.map-card__body {
    padding: 0;
}
.map-card__stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.map-card__stat:last-child { border-bottom: none; }
.map-card__stat-label {
    color: var(--text-secondary);
}
.map-card__stat-val {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-primary);
}
.map-card__extremes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border);
}
.map-card__extreme {
    padding: 10px 14px;
    font-size: 12px;
}
.map-card__extreme + .map-card__extreme {
    border-left: 1px solid var(--border);
}
.map-card__extreme-label {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.map-card__extreme--win .map-card__extreme-label { color: var(--green); }
.map-card__extreme--loss .map-card__extreme-label { color: var(--red); }
.map-card__extreme-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.map-card__extreme-detail img {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .map-overview-grid { grid-template-columns: 1fr; }
    .map-dist__row { grid-template-columns: 60px 1fr; }
    .map-dist__name { font-size: 11px; }
    .map-card__stat { padding: 6px 12px; font-size: 12px; }
    .map-card__extreme { padding: 8px 10px; }
}

/* ── Responsive: Team Charts ── */
@media (max-width: 768px) {
    .tp-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tp-rings-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .tp-chart-card {
        gap: 10px;
    }
    .tp-ring {
        width: 100px;
        height: 100px;
        flex-shrink: 0;
    }
    .tp-ring__value {
        font-size: 20px;
    }
    .tp-ring-legend {
        gap: 6px;
        font-size: 10px;
    }
    .tp-ring-total { font-size: 9px; }
    .map-pool__row {
        grid-template-columns: 100px 1fr 48px;
        gap: 10px;
        padding: 8px 10px;
    }
    .map-pool__name {
        font-size: 13px;
    }
    .map-pool__wr {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .tp-rings-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .tp-ring {
        width: 80px;
        height: 80px;
    }
    .tp-ring__value { font-size: 17px; }
    .tp-ring__sub { font-size: 8px; }
    .tp-ring-legend { font-size: 9px; gap: 4px; }
    .tp-bars-row { grid-template-columns: 1fr; }
    .tp-chart-card {
        flex-direction: column;
    }
    .map-pool__row {
        grid-template-columns: 1fr 48px;
    }
    .map-pool__info {
        grid-column: 1 / -1;
    }
    .map-pool__bar-wrap {
        grid-column: 1;
    }
}

/* ═══════════════════════════════════════════
   AUTHOR PAGE
   ═══════════════════════════════════════════ */
.author-profile {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    padding: 28px 32px;
    margin-bottom: 32px;
}
.author-profile__avatar img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
}
.author-profile__info { flex: 1; min-width: 0; }
.author-profile__name {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 4px;
}
.author-profile__role {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--accent);
    background: rgba(255,102,0,.1);
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}
.author-profile__bio {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary, var(--text-muted));
    margin: 0 0 12px;
}
.author-profile__meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.author-profile__stat {
    font-size: 12px;
    color: var(--text-muted);
}
.author-profile__links {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}
.author-profile__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.author-profile__link:hover { text-decoration: underline; }

.author-articles__heading {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
}

@media (max-width: 640px) {
    .author-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }
    .author-profile__avatar img { width: 90px; height: 90px; }
    .author-profile__meta { justify-content: center; }
    .author-profile__links { justify-content: center; }
}

/* ── Author Byline Component (entity pages) ── */
.author-byline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    margin: 12px 0;
    font-size: 12px;
    color: var(--text-muted);
}
.author-byline__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.author-byline__name {
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}
.author-byline__name:hover { color: var(--accent); }
.author-byline__sep {
    color: var(--border);
    margin: 0 2px;
}
.author-byline__date { white-space: nowrap; }

/* ── In-Content Advertisements ── */
.cs2bet-inline-ad,
.cs2bet-in-content-ad {
    margin: 24px 0;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.cs2bet-inline-ad img,
.cs2bet-in-content-ad img,
.cs2bet-ad-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
}
.cs2bet-inline-ad a,
.cs2bet-in-content-ad a,
.cs2bet-ad-link {
    display: block;
    width: 100%;
    border-radius: 0;
}
.cs2bet-inline-ad .cs2bet-ad,
.cs2bet-in-content-ad .cs2bet-ad {
    width: 100%;
}
.cs2bet-inline-ad iframe,
.cs2bet-in-content-ad iframe {
    display: block;
    width: 100%;
    border: 0;
}
/* Show desktop image, hide mobile by default */
.cs2bet-ad-mobile { display: none !important; }
.cs2bet-ad-desktop { display: block; }
@media (max-width: 767px) {
    .cs2bet-ad-desktop { display: none !important; }
    .cs2bet-ad-mobile { display: block !important; }
}

@media (max-width: 768px) {
    h1,
    .hero-text h1,
    .page-header-bar h1,
    .hp-main-title { font-size: 24px !important; }

    .marquee-bar { min-height: 42px; }
    .marquee-op { padding: 4px 14px; }
    .marquee-op__logo { height: 20px; max-width: 60px; }
    .marquee-op__offer { display: none; }

    .breadcrumb-bar { font-size: 12px !important; }
    .page-header-bar__meta { font-size: 12px !important; }
    .page-header-bar__share-label { font-size: 12px !important; }
    .filter-btn { font-size: 12px !important; }
    .stat-label { font-size: 12px !important; }
    .tab-badge { font-size: 12px !important; }
    .match-card__meta { font-size: 12px !important; }
    .match-format { font-size: 12px !important; }
    .mc2-format { font-size: 12px !important; }
    .mc2-provider-name { font-size: 12px !important; }
    .status-badge { font-size: 12px !important; }
    .stats-table th { font-size: 12px !important; }
    .event-time { font-size: 12px !important; }
    .tournament-live-badge { font-size: 12px !important; }
    .tournament-tier { font-size: 12px !important; }
    .footer-legal-links a { font-size: 12px !important; }
    .footer-legal-links a:not(:last-child)::after { font-size: 12px !important; }
    .sidebar-promo-banner__18 { font-size: 12px !important; }
    .sidebar-promo-banner__date { font-size: 12px !important; }
    .sidebar-item-status { font-size: 12px !important; }
    .page-header-bar__actions .btn { font-size: 12px !important; }
    .matches-section-refresh { font-size: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════
   PWA — Update Toast, Install Banner, iOS Hint
   ═══════════════════════════════════════════════════════════ */

/* Update toast */
#pwa-update-toast {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    background: #1c1c1e;
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 -4px 24px rgba(0,0,0,.5);
    font-size: 14px;
}
[data-theme="light"] #pwa-update-toast {
    background: #fff;
    border-top-color: rgba(0,0,0,.08);
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
}
#pwa-update-toast.pwa-toast--show {
    transform: translateY(0);
    pointer-events: auto;
}
.pwa-toast__text { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.pwa-toast__btn {
    padding: 6px 16px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.pwa-toast__btn:hover { opacity: .85; }
.pwa-toast__close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

/* Install banner — Android */
#pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: #1c1c1e;
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 -4px 24px rgba(0,0,0,.5);
}
[data-theme="light"] #pwa-install-banner {
    background: #fff;
    border-top-color: rgba(0,0,0,.08);
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
}
#pwa-install-banner.pwa-install--show {
    transform: translateY(0);
    pointer-events: auto;
}
.pwa-install__text { flex: 1; min-width: 0; }
.pwa-install__text strong {
    display: block;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
[data-theme="light"] .pwa-install__text strong { color: #1a1a1a; }
.pwa-install__text span { font-size: 13px; color: #8e8e93; }
.pwa-install__btn {
    padding: 10px 22px;
    background: var(--accent, #ff6600);
    color: #fff;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .3px;
}
.pwa-install__btn:hover { opacity: .85; }
.pwa-install__close {
    position: relative;
    background: rgba(255,255,255,.1);
    border: none;
    color: #8e8e93;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 8px;
}
[data-theme="light"] .pwa-install__close { background: rgba(0,0,0,.06); }

/* iOS install hint */
#pwa-ios-hint {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
#pwa-ios-hint.pwa-ios-hint--show {
    transform: translateY(0);
    pointer-events: auto;
}
.pwa-ios-hint__content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: #1c1c1e;
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 -4px 24px rgba(0,0,0,.5);
    position: relative;
    margin: 0;
}
[data-theme="light"] .pwa-ios-hint__content {
    background: #fff;
    border-top-color: rgba(0,0,0,.08);
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
}
.pwa-ios-hint__content > img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.pwa-ios-hint__text {
    flex: 1;
    min-width: 0;
}
.pwa-ios-hint__text strong {
    display: block;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}
[data-theme="light"] .pwa-ios-hint__text strong { color: #1a1a1a; }
.pwa-ios-hint__text span {
    display: block;
    font-size: 13px;
    color: #8e8e93;
    line-height: 1.5;
}
.pwa-ios-hint__text span svg {
    display: inline-block;
    vertical-align: middle;
    color: #007aff;
    margin: 0 2px;
}
.pwa-ios-hint__text span b {
    color: #fff;
    font-weight: 600;
}
[data-theme="light"] .pwa-ios-hint__text span b { color: #1a1a1a; }
.pwa-ios-hint__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(255,255,255,.1);
    border: none;
    color: #8e8e93;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
[data-theme="light"] .pwa-ios-hint__close { background: rgba(0,0,0,.06); }
.pwa-ios-hint__close:hover { background: rgba(255,255,255,.2); }

/* Android install banner */
#pwa-install-banner .pwa-install__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Push notification toggle button */
[data-push-toggle] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
[data-push-toggle]:hover { border-color: var(--accent); color: var(--accent); }
[data-push-toggle].pwa-push--active { border-color: var(--green); color: var(--green); }

/* Rating breakdown grid — 5 columns on desktop, stack on mobile */
.rating-breakdown-grid { grid-template-columns: repeat(5, 1fr) !important; }
@media (max-width: 768px) {
    .rating-breakdown-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .rating-breakdown-grid { grid-template-columns: 1fr !important; }
}

/* ── Operator Carousel ── */
.hp-operator-carousel {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    position: relative;
}
.hp-operator-carousel__track {
    display: flex;
    gap: 0;
    animation: hp-carousel-scroll 30s linear infinite;
    width: max-content;
}
.hp-operator-carousel__track:hover {
    animation-play-state: paused;
}
.hp-operator-carousel__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-right: 1px solid var(--border);
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
.hp-operator-carousel__item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.hp-operator-carousel__logo {
    height: 24px;
    max-width: 80px;
    object-fit: contain;
}
.hp-operator-carousel__offer {
    color: var(--accent);
    font-weight: 600;
    font-size: 12px;
}
@keyframes hp-carousel-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ── Homepage 3-Column Grid ── */
.hp-grid-v2 {
    display: grid;
    grid-template-columns: 220px 1fr 300px;
    gap: 16px;
    align-items: start;
    padding-top: 16px;
    padding-bottom: 32px;
}

/* ── Left Navigation ── */
.hp-left-nav {
    position: sticky;
    top: calc(var(--header-h) + var(--marquee-h) + 16px);
    max-height: calc(100vh - var(--header-h) - var(--marquee-h) - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    scrollbar-width: thin;
    scrollbar-color: var(--bg-hover) transparent;
}
.hp-left-nav::-webkit-scrollbar { width: 4px; }
.hp-left-nav::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 2px; }

.hp-ln-section { border-bottom: 1px solid var(--border); }
.hp-ln-section:last-child { border-bottom: none; }

.hp-ln-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    transition: color .2s;
}
.hp-ln-header:hover { color: var(--text-primary); }

.hp-ln-arrow {
    margin-left: auto;
    font-size: 14px;
    transition: transform .2s;
    color: var(--text-muted);
}
.hp-ln-section.is-collapsed .hp-ln-arrow { transform: rotate(0deg); }
.hp-ln-section:not(.is-collapsed) .hp-ln-arrow { transform: rotate(90deg); }

.hp-ln-body {
    display: block;
    padding: 0 6px 8px;
}
.hp-ln-section.is-collapsed .hp-ln-body { display: none; }

.hp-ln-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s;
    line-height: 1.3;
}
.hp-ln-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.hp-ln-item--live { color: var(--text-primary); }

.hp-ln-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
}
.hp-ln-icon-ph {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border-radius: 2px;
    flex-shrink: 0;
}
.hp-ln-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hp-ln-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 1px 6px;
    border-radius: 10px;
    flex-shrink: 0;
}

.hp-ln-section--live .hp-ln-header {
    color: var(--red);
}

/* Left nav quick links */
.hp-ln-quicklinks {
    padding: 8px 6px;
}
.hp-ln-quicklinks .hp-ln-item {
    font-size: 12px;
    padding: 5px 8px;
    color: var(--text-muted);
}
.hp-ln-quicklinks .hp-ln-item:hover { color: var(--accent); }

/* Mobile drawer toggle */
.hp-left-nav-toggle {
    display: none;
    position: fixed;
    bottom: 80px;
    left: 16px;
    z-index: 900;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.hp-left-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 949;
}
.hp-left-nav-backdrop.is-active { display: block; }

/* ── Center Column ── */
.hp-center { min-width: 0; /* prevent grid blowout */ }

.hp-center-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
}

.hp-center-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
}
.hp-center-header__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.hp-center-header__count {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 2px 8px;
    border-radius: 10px;
}
.hp-center-header__link {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
}
.hp-center-header__link:hover { color: var(--accent); }

/* Tournament group inside center */
.hp-tourn-group { border-bottom: 1px solid var(--border); }
.hp-tourn-group:last-child { border-bottom: none; }
.hp-tourn-group__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-elevated);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.hp-tourn-group__logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
}
.hp-tourn-group__name { flex: 1; }
.hp-tourn-group__format {
    font-size: 11px;
    color: var(--text-muted);
}

/* Date separator */
.hp-date-sep {
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--bg-base);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Results accordion */
.hp-results-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
    font-family: var(--font-display);
    transition: background .2s;
}
.hp-results-toggle:hover { background: var(--bg-hover); }
.hp-results-toggle .hp-ln-arrow { margin-left: auto; }
.hp-results-body { display: none; }
.hp-results-body.is-open { display: block; }

/* No live matches message */
.hp-no-live {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* ── Homepage Match Center — spacing fixes ── */
/* Match cards inside front-page sections — flat list, thin dividers between cards */
.hp-mc-section .matches-list {
    padding: 0;
    gap: 0;
}
.hp-mc-section .match-card {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}
.hp-mc-tournament-group:last-child .matches-list .match-card:last-child {
    border-bottom: none;
}
/* Live cards keep left accent */
.hp-mc-section .match-card--live {
    border-left: 3px solid var(--red);
}

/* Keep old selectors for backward compat */
.hp-center-section .matches-list {
    padding: 0;
}
.hp-center-section .match-card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    margin-bottom: 0;
}
.hp-center-section .match-card:last-child {
    border-bottom: none;
}

/* ── Right Sidebar ── */
.hp-right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: start;
}

.hp-sidebar-widget {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    overflow: hidden;
}
.hp-sidebar-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.hp-sidebar-widget__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-display);
}
.hp-sidebar-widget__link {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
}
.hp-sidebar-widget__link:hover { color: var(--accent); }

/* Compact prediction row */
.hp-pred-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    transition: background .15s;
    font-size: 13px;
}
.hp-pred-row:last-child { border-bottom: none; }
.hp-pred-row:hover { background: var(--bg-hover); }
.hp-pred-row__teams {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
}
.hp-pred-row__vs {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 400;
}
.hp-pred-row__conf {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}
.hp-pred-row__result {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
}
.hp-pred-row__result--correct { background: rgba(0,200,83,0.15); color: var(--green); }
.hp-pred-row__result--wrong { background: rgba(239,68,68,0.15); color: var(--red); }

/* Compact news list */
.hp-news-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 14px;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}
.hp-news-row:last-child { border-bottom: none; }
.hp-news-row:hover { background: var(--bg-hover); }
.hp-news-row__title {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hp-news-row__time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Homepage Responsive ── */
@media (max-width: 1240px) {
    .hp-grid-v2 {
        grid-template-columns: 1fr 300px;
    }
    .hp-left-nav {
        display: none;
    }
    .hp-left-nav-toggle { display: flex; }
    /* Mobile drawer */
    .hp-left-nav.is-drawer-open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 950;
        border-radius: 0;
        border: none;
        border-right: 1px solid var(--border);
        max-height: 100vh;
        top: 0;
    }
}

@media (max-width: 768px) {
    .hp-grid-v2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .hp-operator-carousel__item {
        padding: 10px 16px;
        font-size: 12px;
    }
    .hp-center-header { padding: 10px 12px; }
    .hp-tourn-group__header { padding: 6px 12px; }
    .hp-date-sep { padding: 5px 12px; }
}

@media (max-width: 480px) {
    .hp-grid-v2 { padding-top: 8px; }
    .hp-left-nav-toggle {
        bottom: 70px;
        width: 42px;
        height: 42px;
    }
}

/* ── Homepage hub cards grid ── */
.hp-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; }
.hp-hub-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 14px; text-decoration: none; color: var(--text-primary); border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); transition: border-color .2s; }
.hp-hub-card:hover { border-color: var(--accent); }
.hp-hub-card img { margin-bottom: 8px; object-fit: contain; }
.hp-hub-card strong { font-size: 14px; }
.hp-hub-card span { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 768px) { .hp-hub-grid { grid-template-columns: repeat(2, 1fr); } }

/* PWA standalone mode — hide mobile browser chrome elements */
@media (display-mode: standalone) {
    .pwa-hide-standalone { display: none !important; }
    /* Slightly more padding at bottom for gesture area */
    .bottom-nav { padding-bottom: env(safe-area-inset-bottom, 8px); }
}

/* ============================================================
   EDITORIAL CONTENT BLOCKS — AI-generated team/player/match content
   ============================================================ */
.editorial-block {
    margin-bottom: 24px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.editorial-block .editorial-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.editorial-block .editorial-content p {
    margin: 0 0 12px;
}
.editorial-block .editorial-content p:last-child {
    margin-bottom: 0;
}
.editorial-block .editorial-content h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 20px 0 8px;
}
.editorial-block .editorial-content h3:first-child {
    margin-top: 0;
}

/* Social links bar */
.editorial-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.editorial-social__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}
.editorial-social__link:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.editorial-social__icon {
    font-size: 14px;
}

/* YouTube video embeds */
.editorial-videos {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.editorial-videos h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--text-primary);
}
.editorial-videos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
@media (max-width: 640px) {
    .editorial-videos__grid {
        grid-template-columns: 1fr;
    }
}

/* Match editorial — dynamic template-generated content */
.match-editorial {
    margin-top: 32px;
    padding: 0;
    background: none;
    border: none;
}
.match-editorial .editorial-content {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-secondary);
    max-width: 780px;
}
.match-editorial .editorial-content p {
    margin: 0 0 14px;
}
.match-editorial .editorial-content p:last-child {
    margin-bottom: 0;
}
.match-editorial .editorial-content h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 20px 0 6px;
}

/* ============================================================
   CROSSLINK SIDEBAR WIDGETS (shared across multiple pages)
   ============================================================ */
.guides-sw {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
}
.guides-sw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.guides-sw-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    font-family: var(--font-display);
}
.guides-sw-link {
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.guides-sw-link:hover { text-decoration: underline; }
.guides-sw-body { padding: 4px 0; }

/* Prediction Rows */
.guides-pred-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}
.guides-pred-row:last-child { border-bottom: none; }
.guides-pred-row:hover { background: var(--bg-hover); }
.guides-pred-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.guides-pred-event {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.guides-pred-type {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
    font-family: var(--font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.guides-pred-type--expert { background: rgba(255, 102, 0, .12); color: var(--accent); }
.guides-pred-type--ai { background: rgba(59, 130, 246, .12); color: var(--blue, #3b82f6); }
.guides-pred-matchup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.guides-pred-team {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.guides-pred-team--right { justify-content: flex-end; text-align: right; }
.guides-pred-name {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.guides-pred-name--pick { color: var(--accent); }
.guides-pred-center {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
}
.guides-pred-vs { font-size: 10px; color: var(--text-muted); font-weight: 700; }
.guides-pred-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #ef4444;
}
.guides-pred-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.guides-pred-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-family: var(--font-display);
}
.guides-pred-pill--correct { background: rgba(34, 197, 94, .15); color: #22c55e; }
.guides-pred-pill--wrong { background: rgba(239, 68, 68, .15); color: #ef4444; }
.guides-pred-conf {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-family: var(--font-display);
}

/* Quick Links */
.guides-quicklinks { padding: 6px 0; }
.guides-ql {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background .12s;
    border-radius: 0;
}
.guides-ql:hover { background: var(--bg-hover); }
.guides-ql-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}
.guides-ql-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.guides-ql-title {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-display);
}
.guides-ql-desc {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   Programmatic SEO components (2026-04-22)
   TL;DR answer blocks, bylines, fact tables, related modules.
   Optimized for AI Overview citation + reader scannability.
   ═══════════════════════════════════════════════════════════════ */

.tldr-block{background:var(--bg-elevated);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:12px;padding:20px 24px;margin:20px 0 32px;max-width:780px}
.tldr-block__label{display:inline-block;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin-bottom:6px}
.tldr-block__question{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--text-primary);margin:0 0 10px}
.tldr-block__answer p{font-size:14.5px;line-height:1.6;color:var(--text-primary);margin:0 0 10px}
.tldr-block__bullets{list-style:none;padding:0;margin:10px 0 0}
.tldr-block__bullets li{padding:4px 0 4px 22px;position:relative;font-size:13.5px;line-height:1.55;color:var(--text-secondary)}
.tldr-block__bullets li::before{content:"";position:absolute;left:8px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.tldr-block__bullets li strong{color:var(--text-primary)}

.article-byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted);margin:12px 0 4px;font-family:var(--font-display)}
.article-byline .byline-name{color:var(--text-primary);font-weight:600;text-decoration:none}
.article-byline .byline-name:hover{color:var(--accent)}
.article-byline .byline-role{opacity:.8}
.article-byline .byline-reviewed{opacity:.8}
.article-byline .byline-reviewed a{color:var(--text-muted);text-decoration:underline dotted}
.article-byline .byline-updated{color:var(--text-muted);font-variant:tabular-nums}
.article-byline .byline-sep{opacity:.5}

.fact-table-wrap{margin:20px 0;overflow-x:auto;border:1px solid var(--border);border-radius:10px}
.fact-table-wrap__caption{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg-surface)}
.fact-table{width:100%;border-collapse:collapse;background:var(--bg-card)}
.fact-table th,.fact-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text-primary);vertical-align:middle}
.fact-table thead th{background:var(--bg-elevated);font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.fact-table tbody tr:last-child th,.fact-table tbody tr:last-child td{border-bottom:none}
.fact-table tbody tr:hover{background:var(--bg-hover)}
.fact-table th[scope="row"]{font-weight:600;color:var(--text-primary)}

.related-module{margin:32px 0;padding:20px 0;border-top:1px solid var(--border)}
.related-module__heading{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px}
.related-module__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;list-style:none;padding:0;margin:0}
.related-module__item{margin:0}
.related-module__item a{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--text-primary);transition:border-color .15s,background .15s}
.related-module__item a:hover{border-color:var(--accent);background:var(--bg-hover)}
.related-module__item img{flex-shrink:0;border-radius:4px}
.related-module__label{flex:1;font-size:13px;font-family:var(--font-display);font-weight:600}
.related-module__meta{font-size:11px;color:var(--text-muted)}

/* Editorial / programmatic typography helper */
.section-mt{margin-top:32px}

/* ═══════════════════════════════════════════════════════════════
   GLOSSARY — hub index + single-term pages
   ═══════════════════════════════════════════════════════════════ */

/* Glossary category chip — used in both hub and single-term hero */
.glossary-category-chip{display:inline-block;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--accent);text-transform:uppercase;margin-bottom:10px;padding:4px 10px;background:rgba(255,107,0,.08);border:1px solid rgba(255,107,0,.25);border-radius:999px}
.glossary-title-expanded{font-size:22px;color:var(--text-muted);font-weight:500;display:inline-block;margin-left:6px}
.glossary-hero__jump{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.glossary-hero__jump a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:999px;text-decoration:none;color:var(--text-secondary);font-size:12.5px;font-family:var(--font-display);font-weight:600;transition:border-color .15s,color .15s}
.glossary-hero__jump a:hover{border-color:var(--accent);color:var(--text-primary)}
.glossary-hero__jump-count{display:inline-block;font-size:10px;padding:1px 6px;background:var(--bg-elevated);border-radius:999px;color:var(--text-muted);font-weight:700}

/* Glossary page — now uses site-wide .page-layout / .content-main / .content-sidebar
   pattern so sidebar (predictions + quick links) matches other content pages.
   Only keeps the back-link + body typography adjustments here. */
.glossary-page .glossary-page__back{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);font-size:14px}
.glossary-page .glossary-page__back a{color:var(--accent);text-decoration:none;font-weight:600}
.glossary-page .glossary-page__back a:hover{text-decoration:underline}
.glossary-page article > .content-section p{font-size:15.5px;line-height:1.72;color:var(--text-secondary);margin:0 0 14px}
.glossary-page article > .content-section p:last-child{margin-bottom:0}

/* Hub — categories + card grid */
.glossary-index{max-width:1040px;margin:0 auto}
.glossary-category{margin-bottom:36px;scroll-margin-top:100px}
.glossary-category__header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.glossary-category__title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text-primary);margin:0}
.glossary-category__count{font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase}
.glossary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}

/* Unified term card (hub + single-page "related terms" both use this) */
.glossary-term-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text-primary);transition:border-color .15s,background .15s,transform .15s;min-height:88px}
.glossary-term-card:hover{border-color:var(--accent);background:var(--bg-hover);transform:translateY(-1px)}
.glossary-term-card__term{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.25}
.glossary-term-card__expanded{font-family:var(--font-display);font-size:11.5px;font-weight:500;color:var(--text-muted);line-height:1.35;margin-top:1px}
.glossary-term-card__short{font-size:12.5px;line-height:1.5;color:var(--text-secondary);margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Footer copy block under glossary hub */
.glossary-footer-copy{max-width:820px;margin:40px auto 0;padding-top:28px;border-top:1px solid var(--border)}
.glossary-footer-copy h2{font-family:var(--font-display);font-size:22px;font-weight:700;margin:24px 0 10px;color:var(--text-primary)}
.glossary-footer-copy h2:first-child{margin-top:0}
.glossary-footer-copy p{font-size:15px;line-height:1.7;color:var(--text-secondary);margin:0 0 14px}
.glossary-footer-copy code{background:var(--bg-elevated);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:13px;color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ═══════════════════════════════════════════════════════════════
   PROGRAMMATIC TEMPLATES + EDITORIAL HUBS
   Scoped to .prog-page wrapper so we never leak into existing pages.
   Existing .page-header-bar and .container styling is UNTOUCHED —
   don't add any selectors that start with those classes alone.
   ═══════════════════════════════════════════════════════════════ */

.prog-page{padding:8px 0 40px}
.prog-page__layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
@media (max-width:1024px){.prog-page__layout{grid-template-columns:1fr}}
.prog-page__main{min-width:0}
.prog-page__sidebar{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px}
@media (max-width:1024px){.prog-page__sidebar{position:static}}

/* FAQ accordion — used inside .prog-page and .glossary-page only */
.prog-page .seo-faq,
.glossary-page .seo-faq{margin:28px 0 0}
.prog-page .seo-faq h2{font-family:var(--font-display);font-size:22px;font-weight:700;margin:0 0 16px;color:var(--text-primary)}
.prog-page .seo-faq details,
.glossary-page .seo-faq details{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;padding:0;transition:border-color .15s}
.prog-page .seo-faq details[open],
.glossary-page .seo-faq details[open]{border-color:var(--accent)}
.prog-page .seo-faq summary,
.glossary-page .seo-faq summary{cursor:pointer;padding:14px 18px;font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--text-primary);list-style:none;position:relative;padding-right:40px}
.prog-page .seo-faq summary::-webkit-details-marker,
.glossary-page .seo-faq summary::-webkit-details-marker{display:none}
.prog-page .seo-faq summary::after,
.glossary-page .seo-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:20px;color:var(--text-muted);font-weight:400;transition:transform .15s,color .15s}
.prog-page .seo-faq details[open] summary::after,
.glossary-page .seo-faq details[open] summary::after{content:"−";color:var(--accent)}
.prog-page .seo-faq .faq-answer,
.glossary-page .seo-faq .faq-answer{padding:0 18px 16px;color:var(--text-secondary)}
.prog-page .seo-faq .faq-answer p,
.glossary-page .seo-faq .faq-answer p{font-size:14.5px;line-height:1.65;margin:0 0 8px}

/* Typography inside programmatic article body */
.prog-page__main > h2{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text-primary);margin:28px 0 12px}
.prog-page__main > h2:first-child{margin-top:8px}
.prog-page__main > p{font-size:15.5px;line-height:1.72;color:var(--text-secondary);margin:0 0 14px}
.prog-page__main > p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prog-page__main .seo-content h2,
.prog-page__main .seo-content h3{font-family:var(--font-display);color:var(--text-primary);margin:24px 0 10px}
.prog-page__main .seo-content p{font-size:15.5px;line-height:1.72;color:var(--text-secondary);margin:0 0 14px}
.prog-page__main .matches-list{display:flex;flex-direction:column;gap:6px;margin:16px 0}
.prog-page__main .match-card{background:var(--bg-card);transition:border-color .15s,background .15s}
.prog-page__main .match-card:hover{border-color:var(--accent);background:var(--bg-hover)}

/* Responsive polish */
@media (max-width:720px){
    .glossary-hero{padding:24px 0 20px}
    .glossary-hero__title{font-size:28px}
    .glossary-hero__expanded{font-size:16px;display:block;margin-left:0;margin-top:4px}
    .glossary-hero__definition{font-size:15px}
    .glossary-page{padding:20px 0 32px}
    .glossary-category__header{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ═══════════════════════════════════════════════════════════════
   HLTV-STYLE TOURNAMENT LAYOUT — Overview tab with sidebar
   ═══════════════════════════════════════════════════════════════ */
.event-hero{position:relative;padding:24px 0;overflow:hidden;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#0a0e17 0%,#151b2a 100%)}
.event-hero__bg{position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(circle at 20% 30%, rgba(88,28,135,.25), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(30,64,175,.2), transparent 60%);
    mix-blend-mode:screen}
.event-hero--live .event-hero__bg{background:
    radial-gradient(circle at 30% 50%, rgba(220,38,38,.25), transparent 55%),
    radial-gradient(circle at 70% 50%, rgba(234,88,12,.2), transparent 60%)}
.event-hero--finished .event-hero__bg{opacity:.35}
.event-hero__inner{position:relative;display:flex;align-items:center;gap:20px;min-height:120px}
.event-hero__logo{width:104px;height:104px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.2);border-radius:12px;padding:8px}
.event-hero__logo img{max-width:100%;max-height:100%;object-fit:contain}
.event-hero__title{flex:1;min-width:0}
.event-hero__serie{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:4px}
.event-hero__serie a{color:inherit;text-decoration:none}
.event-hero__serie a:hover{color:var(--text-primary)}
.event-hero__name{font-family:var(--font-display);font-size:28px;font-weight:800;color:#fff;margin:0;letter-spacing:-.01em;line-height:1.15}
.event-hero__status{flex-shrink:0;align-self:flex-start;padding-top:6px}
.event-hero__badge{display:inline-block;padding:6px 12px;font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:4px}
.event-hero__badge--live{background:var(--red);color:#fff;animation:event-badge-pulse 1.8s infinite}
.event-hero__badge--upcoming{background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.3)}
.event-hero__badge--finished{background:rgba(148,163,184,.15);color:#94a3b8;border:1px solid rgba(148,163,184,.3)}
@keyframes event-badge-pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* Tabs row ─────────────────────────────────────────── */
.event-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin:20px 0 0;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.event-tab{appearance:none;background:transparent;border:0;font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text-muted);padding:14px 18px;cursor:pointer;position:relative;white-space:nowrap;transition:color .15s}
.event-tab:hover{color:var(--text-primary)}
.event-tab.is-active{color:var(--text-primary)}
.event-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent);border-radius:2px 2px 0 0}
.event-tab__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;font-size:11px;font-weight:800;background:var(--red);color:#fff;border-radius:9px;margin-left:6px;padding:0 6px;animation:event-badge-pulse 1.8s infinite}
.event-tab__count{color:var(--text-muted);font-weight:400;margin-left:4px;font-size:12px}

/* Tab panels ─────────────────────────────────────────── */
.event-tab-panel{display:none;padding-top:16px}
.event-tab-panel.is-active{display:block}

/* Facts bar ─────────────────────────────────────────── */
.event-facts-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:16px}
.event-fact{display:flex;flex-direction:column;gap:4px;padding:12px 16px;background:var(--bg-surface)}
.event-fact__label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.event-fact__tooltip{cursor:help;opacity:.6;font-size:10px;margin-left:2px}
.event-fact__value{font-family:var(--font-display);font-weight:700;color:var(--text-primary);font-size:15px}

/* Two-col layout (main + sidebar) ──────────────────── */
.event-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.event-layout__main{min-width:0;display:flex;flex-direction:column;gap:16px}
.event-layout__side{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px}

/* Section shared style ──────────────────────────────── */
.event-section{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.event-section__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg-elevated);gap:12px}
.event-section__title{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text-primary);margin:0;text-transform:uppercase;letter-spacing:.04em}
.event-section__hint{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.event-section__action{appearance:none;background:transparent;border:1px solid var(--border);color:var(--text-primary);font-family:var(--font-display);font-size:11px;font-weight:700;padding:5px 10px;border-radius:5px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:background .15s,border-color .15s}
.event-section__action:hover{background:var(--bg-hover);border-color:var(--accent)}

/* Brackets wrap (reuse existing bracket styles but inside section) */
.event-brackets .brackets-container{padding:16px;overflow-x:auto}

/* Teams attending grid ─────────────────────────────── */
.event-teams__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);padding:0}
.event-team-card{position:relative;background:var(--bg-card);overflow:hidden;transition:background .15s}
.event-team-card:hover{background:var(--bg-hover);z-index:2}
.event-team-card__link{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 12px 12px;text-decoration:none;color:inherit;gap:8px}
.event-team-card__badges{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:4px 6px;font-size:10px;font-weight:800;font-family:var(--font-display);pointer-events:none}
.event-team-card__badge{display:inline-block;padding:2px 6px;border-radius:3px;letter-spacing:.02em}
.event-team-card__badge--vrs{background:var(--bg-elevated);color:var(--accent);border:1px solid var(--border)}
.event-team-card__badge--world{background:rgba(234,179,8,.12);color:#facc15;border:1px solid rgba(234,179,8,.3)}
.event-team-card__logo{width:72px;height:72px;display:flex;align-items:center;justify-content:center;margin-top:10px}
.event-team-card__logo img{max-width:100%;max-height:100%;object-fit:contain}
.event-team-card__name{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text-primary);line-height:1.2;margin-top:4px}
.event-team-card__tag{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}

/* Lineup reveal: default hidden, shown on hover or when grid has .is-showing-all-lineups */
.event-team-card__lineup{position:absolute;inset:0;background:rgba(10,14,23,.96);backdrop-filter:blur(6px);padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:3px;margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;pointer-events:none}
.event-team-card:hover .event-team-card__lineup,
.event-teams__grid.is-showing-all-lineups .event-team-card__lineup{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .18s ease,transform .18s ease,visibility 0s;pointer-events:auto}
.event-team-card__lineup li{margin:0}
.event-team-card__lineup a{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:5px;text-decoration:none;color:#e5e7eb;font-size:13px;transition:background .12s}
.event-team-card__lineup a:hover{background:rgba(255,255,255,.06);color:#fff}
.event-team-card__flag{font-size:14px;width:20px;text-align:center}
.event-team-card__player{font-weight:600}
.event-team-card__coach{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(255,255,255,.15)}
.event-team-card__coachlabel{font-family:var(--font-display);font-size:9px;font-weight:800;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-right:4px}

/* Prize distribution ────────────────────────────────── */
.event-prize__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}
.event-prize__card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:14px;text-align:center;position:relative;overflow:hidden}
.event-prize__card--gold{border-color:#facc15;background:linear-gradient(180deg,rgba(234,179,8,.1),rgba(234,179,8,.02))}
.event-prize__card--silver{border-color:#94a3b8;background:linear-gradient(180deg,rgba(148,163,184,.1),rgba(148,163,184,.02))}
.event-prize__card--bronze{border-color:#b45309;background:linear-gradient(180deg,rgba(180,83,9,.08),rgba(180,83,9,.02))}
.event-prize__card:nth-child(n+3){padding:10px}
.event-prize__pos{font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.event-prize__card--gold .event-prize__pos{color:#facc15}
.event-prize__card--silver .event-prize__pos{color:#cbd5e1}
.event-prize__card--bronze .event-prize__pos{color:#fdba74}
.event-prize__amt{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--text-primary);margin-top:4px;letter-spacing:-.01em}
.event-prize__club{font-size:11px;color:var(--text-muted);margin-top:4px}

/* Matches preview section */
.event-matches-preview .matches-list{padding:8px 10px}

/* Sidebar: formats, map pool, event data, related ─── */
.event-kv{display:grid;grid-template-columns:110px 1fr;gap:6px 10px;margin:0;padding:12px 16px;font-size:13px}
.event-kv dt{color:var(--text-muted);font-weight:600;font-family:var(--font-display);font-size:11px;text-transform:uppercase;letter-spacing:.04em;align-self:center}
.event-kv dd{margin:0;color:var(--text-primary);font-weight:600;font-family:var(--font-mono)}
.event-kv dd a{color:var(--accent);text-decoration:none}
.event-kv dd a:hover{text-decoration:underline}
.event-kv--wide{grid-template-columns:130px 1fr}
.event-kv__tier{display:inline-block;padding:2px 8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:4px;font-size:11px;letter-spacing:.04em}

/* Map pool visual cards */
.event-maps__grid{display:flex;flex-direction:column;gap:4px;padding:12px}
.event-map-card{position:relative;display:block;height:44px;border-radius:6px;overflow:hidden;background:var(--bg-elevated);border:1px solid var(--border);transition:border-color .15s,transform .15s}
.event-map-card:hover{border-color:var(--accent);transform:translateX(2px)}
.event-map-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.event-map-card__name{position:relative;display:flex;align-items:center;height:100%;padding:0 14px;font-family:var(--font-display);font-size:14px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.06em;text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* Related events list */
.event-related__list{list-style:none;margin:0;padding:6px 4px}
.event-related__item a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;text-decoration:none;color:var(--text-primary);transition:background .12s}
.event-related__item a:hover{background:var(--bg-hover)}
.event-related__item img{border-radius:3px;flex-shrink:0}
.event-related__name{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-related__date{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);flex-shrink:0}

/* Responsive ────────────────────────────────────────── */
@media (max-width:960px){
    .event-layout{grid-template-columns:1fr}
    .event-layout__side{position:static;grid-row:2;flex-direction:column;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .event-layout__side > .event-section{height:100%}
    .event-teams__grid{grid-template-columns:repeat(3,1fr)}
    .event-facts-bar{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
    .event-hero__inner{gap:12px;min-height:auto}
    .event-hero__logo{width:72px;height:72px;padding:6px}
    .event-hero__name{font-size:20px}
    .event-hero__badge{font-size:10px;padding:4px 8px}
    .event-layout__side{grid-template-columns:1fr}
    .event-teams__grid{grid-template-columns:repeat(2,1fr)}
    .event-facts-bar{grid-template-columns:1fr 1fr}
    .event-prize__grid{grid-template-columns:1fr 1fr}
    .event-tab{padding:12px 12px;font-size:13px}
    .event-kv{grid-template-columns:100px 1fr;font-size:12px}
    /* Mobile: tap-to-show lineup */
    .event-team-card__lineup{pointer-events:auto}
}
@media (max-width:480px){
    .event-teams__grid{grid-template-columns:1fr 1fr}
    .event-facts-bar{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════
   CS2BET PARTNERS — showcase slider + clickable logo grid navigator
   ═══════════════════════════════════════════════════════════════ */
.cs2bet-partners{margin:16px 0 28px}

/* Shared light/dark logo swap */
.partner-showcase__img--light,
.partner-nav-grid__img--light{display:none}
[data-theme="light"] .partner-showcase__img--light,
[data-theme="light"] .partner-nav-grid__img--light{display:block}
[data-theme="light"] .partner-showcase__img--dark,
[data-theme="light"] .partner-nav-grid__img--dark{display:none}

/* ── SHOWCASE (top) ──────────────────────────────── */
.partner-showcase{position:relative;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;min-height:220px}
.partner-showcase__track{position:relative;min-height:220px}
.partner-showcase__slide{position:absolute;inset:0;display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;padding:28px 72px;opacity:0;visibility:hidden;transition:opacity .35s ease;pointer-events:none}
.partner-showcase__slide.is-active{opacity:1;visibility:visible;pointer-events:auto;position:relative}
.partner-showcase__logo{height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);border-radius:10px;padding:20px}
.partner-showcase__img{max-width:100%;max-height:100%;object-fit:contain}
.partner-showcase__fallback{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--text-primary);text-align:center}
.partner-showcase__body{min-width:0;display:flex;flex-direction:column;gap:10px}
.partner-showcase__name{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--text-primary);margin:0;line-height:1.2}
.partner-showcase__text{font-size:14px;line-height:1.65;color:var(--text-secondary);margin:0;max-width:620px}
.partner-showcase__cta{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:8px 14px;background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;border-radius:6px;text-decoration:none;margin-top:4px;transition:background .15s,transform .15s}
.partner-showcase__cta:hover{background:var(--accent-hover,var(--accent));transform:translateY(-1px);color:#fff}

/* Nav arrows on the showcase */
.partner-showcase__nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;z-index:2}
.partner-showcase__nav:hover{background:var(--bg-hover);border-color:var(--accent);transform:translateY(-50%) scale(1.05)}
.partner-showcase__nav--prev{left:14px}
.partner-showcase__nav--next{right:14px}

/* ── NAV GRID (bottom) ───────────────────────────── */
.partner-nav-grid{margin-top:12px;display:grid;gap:8px;grid-template-columns:repeat(6,minmax(0,1fr))}
.cs2bet-partners[data-columns="2"] .partner-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs2bet-partners[data-columns="3"] .partner-nav-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs2bet-partners[data-columns="4"] .partner-nav-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.cs2bet-partners[data-columns="5"] .partner-nav-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.cs2bet-partners[data-columns="7"] .partner-nav-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.cs2bet-partners[data-columns="8"] .partner-nav-grid{grid-template-columns:repeat(8,minmax(0,1fr))}

.partner-nav-grid__item{appearance:none;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:10px;height:70px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,background .15s,transform .12s;overflow:hidden}
.partner-nav-grid__item:hover{border-color:var(--accent);background:var(--bg-hover);transform:translateY(-1px)}
.partner-nav-grid__item.is-active{border-color:var(--accent);background:var(--bg-hover);box-shadow:inset 0 0 0 1px var(--accent)}
.partner-nav-grid__img{max-width:100%;max-height:100%;object-fit:contain;opacity:.85;transition:opacity .15s}
.partner-nav-grid__item:hover .partner-nav-grid__img,
.partner-nav-grid__item.is-active .partner-nav-grid__img{opacity:1}
.partner-nav-grid__label{font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--text-primary);text-align:center;letter-spacing:.02em}

/* ── Responsive ─────────────────────────────────── */
@media (max-width:720px){
    .partner-showcase{min-height:auto}
    .partner-showcase__track{min-height:auto}
    .partner-showcase__slide{grid-template-columns:1fr;gap:16px;padding:20px 20px 24px;text-align:center}
    .partner-showcase__logo{height:110px;margin:0 auto;max-width:220px;width:100%}
    .partner-showcase__body{align-items:center}
    .partner-showcase__text{text-align:left}
    .partner-showcase__cta{align-self:center}
    .partner-showcase__nav{top:auto;bottom:14px;transform:none;width:32px;height:32px}
    .partner-showcase__nav:hover{transform:scale(1.05)}
    .partner-showcase__nav--prev{left:10px}
    .partner-showcase__nav--next{right:10px}
    .partner-nav-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
    .partner-nav-grid__item{height:58px;padding:8px}
}
@media (max-width:480px){
    .partner-nav-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media (prefers-reduced-motion:reduce){
    .partner-showcase__slide{transition:none}
    .partner-showcase__nav{transition:none}
}

/* ── Editorial hub structured content polish ────────────────── */
.editorial-hub__list{margin:14px 0 18px;padding:0 0 0 22px;color:var(--text-secondary);font-size:15.5px;line-height:1.75}
.editorial-hub__list li{margin:6px 0}
.editorial-hub__list li strong{color:var(--text-primary)}
.content-muted{color:var(--text-muted);font-size:14.5px;padding:12px 14px;background:var(--bg-surface);border:1px dashed var(--border);border-radius:10px;margin:12px 0}
/* Scoped table polish inside content sections (editorial hubs, glossary pages) */
.content-section .fact-table-wrap{margin:16px 0 20px}
.content-section .fact-table{font-size:14px}
.content-section .fact-table th,
.content-section .fact-table td{padding:9px 12px;line-height:1.55}
.content-section .fact-table td a{color:var(--accent);text-decoration:none}
.content-section .fact-table td a:hover{text-decoration:underline}
/* Top-level hero table immediately under TL;DR */
.prog-page__main > .fact-table-wrap{margin:8px 0 20px}
@media (max-width:720px){
    .content-section .fact-table{font-size:13px;min-width:520px}
    .editorial-hub__list{padding-left:18px;font-size:14.5px}
}

/* ═══════════════════════════════════════════════════════════════
   v7.9.31 — UNIFIED HERO INNER-CARD PATTERN  (FINAL OVERRIDE)
   Kills full-bleed backgrounds on EVERY hero section so wallpaper
   takeovers and side strips remain visible. Backgrounds move from
   the full-width wrapper to the inner .container so each hero
   reads as a card constrained to design width (1240px).
   This block is intentionally placed at end-of-file so its rules
   win by source order over every earlier definition (no !important
   spam needed except where wrapper props had wide selectors).
   ═══════════════════════════════════════════════════════════════ */

/* 1. Strip full-bleed bg + border + outer padding from every hero wrapper.
      Uses !important because there are duplicate rules earlier in the file
      that we cannot reorder without risk. */
.hero-banner,
.match-hero,
.match-hero--live,
.entity-hero,
.entity-hero--tournament,
.event-hero,
.event-hero--live,
.event-hero--upcoming,
.event-hero--finished,
.maps-hero,
.glossary-hero,
.page-hero-betting{
    background:transparent !important;
    border-bottom:0 !important;
    padding:12px 0 0 !important;
    margin-bottom:14px !important;
    position:static !important;
    overflow:visible !important;
}

/* 2. Light-theme overrides on the wrappers also need killing. */
[data-theme="light"] .hero-banner,
[data-theme="light"] .match-hero,
[data-theme="light"] .match-hero--live,
[data-theme="light"] .entity-hero,
[data-theme="light"] .entity-hero--tournament,
[data-theme="light"] .event-hero,
[data-theme="light"] .maps-hero,
[data-theme="light"] .page-hero-betting{
    background:transparent !important;
    border-bottom:0 !important;
}

/* 3. Card chrome on inner container.
   IMPORTANT WIDTH FIX: shrink the .container by 40px (20px each side) so
   the chrome card matches the visual width of content cards below. Content
   cards sit INSIDE .container with its default `padding: 0 20px`, so their
   visible outer edges are 20px in from the .container's max-width edge.
   To make hero chrome line up with content cards, we widen the .container
   chrome inward by the same 20px → effective width = 1200px (matching
   content cards). This was the root cause of "hero is wider than content"
   on tournaments / news / etc.
   The frontpage's .hp-topical-hero uses the inner-card pattern (chrome on
   a child of .container) and was already correct — those screenshots
   confirm 1200px is the canonical card width. */
.hero-banner > .container,
.match-hero > .container,
.entity-hero > .container,
.event-hero > .container,
.maps-hero > .container,
.page-hero-betting > .container,
.page-header-bar > .container,
.breadcrumb-bar > .container{
    max-width: calc(var(--container, 1240px) - 40px) !important;  /* 1200px */
    margin: 0 auto;
}
.hero-banner > .container,
.match-hero > .container,
.entity-hero > .container,
.event-hero > .container,
.maps-hero > .container,
.page-hero-betting > .container{
    background:linear-gradient(135deg,var(--bg-surface) 0%,var(--bg-elevated) 100%);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:22px 26px;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
}

/* 4. Hero-banner (homepage) — keep its dark/orange identity inside the card */
.hero-banner > .container{
    background:linear-gradient(135deg,#0d0d0f 0%,#15101a 50%,#0d0d0f 100%);
    border-color:#22202a;
}
[data-theme="light"] .hero-banner > .container{
    background:linear-gradient(135deg,#1a1a20 0%,#241f2c 50%,#1a1a20 100%);
    border-color:rgba(0,0,0,.08);
}

/* 5. Variant tints (live, tournament, upcoming, finished). */
.match-hero--live > .container{
    background:linear-gradient(135deg,#1a0505 0%,var(--bg-elevated) 100%);
    border-color:rgba(239,68,68,.3);
}
.entity-hero--tournament > .container{
    background:linear-gradient(135deg,#1c1a14 0%,var(--bg-elevated) 100%);
}
.event-hero--live > .container{
    background:linear-gradient(135deg,#1a0505 0%,var(--bg-elevated) 100%);
    border-color:rgba(239,68,68,.3);
}
.event-hero--finished > .container{
    background:linear-gradient(135deg,#13141a 0%,#0e0f14 100%);
    opacity:.94;
}

/* 6. Light-theme card chrome */
[data-theme="light"] .match-hero > .container,
[data-theme="light"] .entity-hero > .container,
[data-theme="light"] .event-hero > .container,
[data-theme="light"] .maps-hero > .container,
[data-theme="light"] .page-hero-betting > .container{
    background:linear-gradient(135deg,#fff 0%,#f7f7f8 100%);
    border-color:rgba(0,0,0,.06);
}
[data-theme="light"] .match-hero--live > .container,
[data-theme="light"] .event-hero--live > .container{
    background:linear-gradient(135deg,#fff5f5 0%,#fff 100%);
    border-color:rgba(220,38,38,.25);
}

/* 7. Hide the legacy event-hero radial-gradient overlay — it's anchored to
   the now-transparent wrapper which would render full-bleed. The card
   chrome already provides the visual treatment. */
.event-hero__bg{display:none !important}

/* 8. When a breadcrumb-bar precedes a hero card, fuse them visually. */
.breadcrumb-bar + .hero-banner,
.breadcrumb-bar + .match-hero,
.breadcrumb-bar + .entity-hero,
.breadcrumb-bar + .event-hero,
.breadcrumb-bar + .maps-hero,
.breadcrumb-bar + .page-hero-betting{
    padding-top:0 !important;
}
.breadcrumb-bar + .hero-banner > .container,
.breadcrumb-bar + .match-hero > .container,
.breadcrumb-bar + .entity-hero > .container,
.breadcrumb-bar + .event-hero > .container,
.breadcrumb-bar + .maps-hero > .container,
.breadcrumb-bar + .page-hero-betting > .container{
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-top:0;
}

/* 9. KILL THE DUPLICATE BREADCRUMB-BAR FULL-BLEED RULE.
   Earlier in this file (line ~2049) there is a duplicate of .breadcrumb-bar
   with `background:var(--bg-surface);border-bottom:1px solid var(--border)`
   that overrides the canonical card-style rule at line ~1293. Force the
   canonical pattern to win. */
.breadcrumb-bar{
    background:transparent !important;
    border-bottom:0 !important;
    padding:12px 0 0 !important;
    margin-bottom:-1px !important;
    color:var(--text-muted) !important;
}
.breadcrumb-bar .container{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    flex-wrap:wrap !important;
    background:var(--bg-surface) !important;
    border:1px solid var(--border) !important;
    border-bottom:0 !important;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding:10px 22px 8px !important;
}
[data-theme="light"] .breadcrumb-bar .container{
    background:#fff !important;
    border-color:rgba(0,0,0,.06) !important;
}

/* 10. event-hero inner already has its own .event-hero__inner.container —
   its display:flex layout must survive the card-chrome override. */
.event-hero > .container.event-hero__inner{
    display:flex;
    align-items:center;
    gap:20px;
    min-height:120px;
}

/* 11. Tighten hero typography spacing so the card padding feels right */
.entity-hero > .container .entity-hero-content{margin:0}
.match-hero > .container .match-hero-score{margin:0}

/* 12. Mobile: cards lose horizontal padding on tiny viewports */
@media (max-width:540px){
    .hero-banner > .container,
    .match-hero > .container,
    .entity-hero > .container,
    .event-hero > .container,
    .maps-hero > .container,
    .page-hero-betting > .container{
        padding:18px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   v7.9.42 — KILL FULL-BLEED ON SECTION-LEVEL COMPONENTS
   Components like .seo-faq, .related-links, .section-block use a
   pattern of <section class="..."><div class="container">...</div></section>
   where the OUTER section has card chrome (bg, border, padding) which
   bleeds full-width across the viewport, covering takeover wallpapers
   on left/right. Move all chrome to the INNER .container so the card
   is constrained to 1200px (matching content card width) and the
   side gaps stay clear for the takeover. */

/* 1. Strip full-bleed bg/border from the OUTER section wrappers. */
.seo-faq,
.related-links,
.section-block,
.section-mb,
.content-section,
.match-editorial{
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    box-shadow:none !important;
    margin-block:24px 16px;
}

/* 2. Apply card chrome on the INNER .container (matches content-card width). */
.seo-faq > .container{
    max-width:calc(var(--container, 1240px) - 40px) !important;
    margin:0 auto;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-md, 12px);
    padding:24px 26px 18px;
    box-shadow:var(--shadow-sm);
}
[data-theme="light"] .seo-faq > .container{
    background:#fff;
    border-color:rgba(0,0,0,.06);
}

/* 3. .related-links / .section-block / .match-editorial / .content-section /
   .section-mb wrappers — keep their inner .container at content width
   without forcing chrome (they're typically transparent layout shells). */
.related-links > .container,
.section-block > .container,
.section-mb > .container,
.content-section > .container,
.match-editorial > .container{
    max-width:calc(var(--container, 1240px) - 40px) !important;
    margin:0 auto;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
}

/* 4. Mobile: tighter padding inside the card. */
@media (max-width:540px){
    .seo-faq > .container{
        padding:18px 16px 14px;
    }
}