/* ============================================================
   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 {
    --bg-base:      #0d0d0f;
    --bg-surface:   #141416;
    --bg-elevated:  #1c1c20;
    --bg-hover:     #242428;
    --bg-card:      #18181c;

    --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.08);
    --border-accent: rgba(255,102,0,0.3);

    --shadow-sm: 0 1px 4px rgba(0,0,0,.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,.5);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.6);

    --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:  32px;
    --subheader-h: 48px;
    --header-bg:  #0a0a0c;
    --marquee-bg: #0a0a0c;
    --subheader-bg: #101013;
    --ticker-h:  32px;
    --container: 1240px;
    --sidebar-w: 280px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-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}
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
   ============================================================ */

/* ── Marquee bar ── */
.marquee-bar{display:flex;align-items:stretch;height:var(--marquee-h);background:var(--marquee-bg);border-bottom:1px solid var(--border);overflow:hidden;position:relative;z-index:1001}
.marquee-label{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:0 14px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--red);border-right:1px solid var(--border);white-space:nowrap;background:var(--marquee-bg)}
.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 55s linear infinite}
.marquee-track:hover{animation-play-state:paused}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{display:inline-flex;align-items:center;gap:6px;padding:0 4px;font-size:12px;color:var(--text-secondary);text-decoration:none;transition:color .15s;white-space:nowrap}
.marquee-item:hover{color:var(--accent)}
.marquee-item--prediction{color:var(--text-secondary)}
.marquee-item__label{font-weight:600;color:var(--text-primary);font-family:var(--font-display)}
.marquee-item__text{color:var(--text-secondary)}
.marquee-sep{color:var(--text-muted);font-size:8px;padding:0 14px;flex-shrink:0;opacity:.4}

/* ── 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:64px;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:200;box-shadow:var(--shadow-lg)}
.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}
.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 (redesigned) ── */
.page-header-bar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: 24px 0 20px;
    margin-bottom: 28px;
}
.page-header-bar .container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* 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}
.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%)}
.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__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:#fff;background:var(--promo-accent,var(--accent));border-radius:6px;transition:opacity .15s}
.sidebar-promo-banner__cta:hover{opacity:.85;color:#fff}

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

/* ============================================================
   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{padding:10px 0;border-bottom:1px solid var(--border);background:var(--bg-surface);font-size:12px;color:var(--text-muted)}
.breadcrumb-bar .container{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.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)}

/* ============================================================
   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}
    .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}}

/* ── Moderator Bar ── */
.moderator-bar{background:var(--bg-elevated);border-bottom:2px solid var(--accent);padding:8px 0;position:sticky;top:0;z-index:200}
.moderator-bar .container{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.moderator-bar span{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--accent)}

/* ── 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{position:relative;overflow:hidden;background:var(--bg-surface);margin-bottom:0;border-radius:var(--radius-md)}
/* hp-slider-col replaces news-slider-wrap on homepage */
.news-slider{position:relative;height:420px;overflow:hidden}
.news-slide{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .5s;opacity:0;pointer-events:none}
.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,.9) 0%,rgba(0,0,0,.3) 60%,transparent 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}
.news-slide-meta{font-size:12px;color:rgba(255,255,255,.6);display:flex;gap:8px}
/* ── Slider controls bar (below the slider on homepage) ── */
.news-slider-dots{display:flex;gap:6px;align-items:center}
.slider-dot{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;cursor:pointer;transition:all .2s;padding:0;flex-shrink:0;min-width:8px}
.slider-dot.is-active{background:var(--accent);width:22px;border-radius:4px}
/* arrows are flex buttons inside .hp-slider-controls — NOT absolute */
/* .slider-arrow: hidden — only dots shown below slider */
.slider-arrow{display:none !important}

/* ── News Grid ── */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-bottom:28px}
.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 ── */
.page-layout--article{grid-template-columns:1fr 300px}
.article-main{max-width:780px}
.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{background:var(--bg-elevated);border:1px solid var(--border-accent);border-radius:var(--radius-lg);padding:16px;margin-bottom:24px}
.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)}

/* ── Sidebar widgets ── */
.sidebar-widget{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:14px}
.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 10px;padding-bottom:8px;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: 10px 0 2px;
    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) ── */
/* height + arrows controlled by hp-slider-col context — no overrides here */
.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)}

/* ── 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:14px;font-weight:700;letter-spacing:.3px}
.prediction-widget__header-link{margin-left:auto;font-size:12px;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:14px;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:10px;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:15px;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:11px;color:var(--text-muted);display:flex;gap:4px;margin-bottom:3px;line-height:1.3}
.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:12px;color:var(--text-muted);margin:0 0 12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@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); }

/* Responsive adjustments */
@media (max-width: 640px) {
    .prediction-match-header [style*="grid-template-columns:1fr auto 1fr"] {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* ============================================================
   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-label { padding: 0 8px; font-size: 10px; }
    .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-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;
}
.betting-row:last-child { border-bottom: none; }
.betting-row:hover { background: var(--bg-hover); }

/* Logo cell */
.betting-row__logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.betting-logo-img {
    max-height: 32px;
    max-width: 130px;
    object-fit: contain;
    width: auto;
    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: Logo → Odds side-by-side → CTA ── */
    .betting-row {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto auto;
        gap: 4px 8px;
        padding: 12px 14px;
        min-height: auto;
    }
    .betting-row__logo {
        grid-column: 1 / -1;
        grid-row: 1;
        padding: 0 0 6px;
    }
    .betting-logo-img { max-height: 22px; max-width: 110px; }
    .betting-row__t1-odds {
        grid-column: 1;
        grid-row: 2;
        padding: 0;
        display: flex !important;
        justify-content: flex-start;
        align-items: center;
    }
    .betting-row__t2-odds {
        grid-column: 2;
        grid-row: 2;
        padding: 0;
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
    }
    .betting-row__cta {
        grid-column: 1 / -1;
        grid-row: 3;
        padding: 6px 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 — offer text spans full width */
    .betting-row--no-odds .betting-row__t1-odds {
        grid-column: 1 / -1;
        justify-content: center;
    }
    .betting-row--no-odds .betting-row__t2-odds {
        display: none !important;
    }
    .betting-row--no-odds .betting-offer-text {
        font-size: 13px;
    }
    /* 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);
}

/* ============================================================
   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: 28px;
        --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: 12px; }
    .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: 768px) {
    .news-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (min-width: 480px) and (max-width: 768px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- 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; gap: 20px; }
    .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-dot, .slider-arrow, .dropdown-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .slider-dot { min-height: 24px; min-width: 24px; }
    .slider-arrow { min-height: 40px; min-width: 40px; }
}

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



/* ============================================================
   HOMEPAGE GRID — unified layout, identical columns to .page-layout
   Desktop:  [1fr]     [var(--sidebar-w) = 280px]
   Row A:    Slider    SEO Panel
   Row B:    Matches   Sidebar widgets
   Mobile:   single column, explicit order via order property
   ============================================================ */

.hp-grid {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-w);
    grid-template-rows: auto auto;
    grid-template-areas:
        "slider  seo"
        "matches sidebar";
    column-gap: 24px;   /* same gap as .page-layout */
    row-gap: 20px;
    padding-top: 20px;
    padding-bottom: 40px;
    align-items: start;   /* rows below use start */
}
/* Row 1: slider + seo stretch to same height */
.hp-area-slider { align-self: stretch; }
.hp-area-seo    { align-self: stretch; }

/* ── Grid area assignments ── */
.hp-area-slider  { grid-area: slider; }
.hp-area-seo     { grid-area: seo; }
.hp-area-matches { grid-area: matches; }
.hp-area-sidebar { grid-area: sidebar; }

/* ── Slider column ── */
.hp-slider-col {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    height: 100%;          /* fills the SEO-panel-determined row height */
}

.hp-slider-col .news-slider {
    position: relative;
    min-height: 280px;    /* minimum so it never collapses */
    overflow: hidden;
    flex: 1;              /* grows to fill remaining col height after controls */
}

/* Controls bar — dots only, centered below slider */
.hp-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.hp-slider-controls .news-slider-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ── SEO Panel (sidebar column, top row) ── */
.hp-seo-col {
    display: flex;
    flex-direction: column;
    /* column width comes from grid definition */
}

.hp-seo-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;         /* fills same row height as slider */
    box-sizing: border-box;
}

.hp-seo-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--red, #ef4444);
    font-family: var(--font-display);
    align-self: flex-start;
}

.hp-seo-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -.2px;
}

.hp-seo-desc {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.hp-seo-links {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hp-seo-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 6px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background .12s;
}
.hp-seo-link:hover { background: var(--bg-hover); }

.hp-seo-link__icon {
    width: 20px;
    text-align: center;
    font-size: 13px;
    flex-shrink: 0;
}
.hp-seo-link__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.hp-seo-link__label {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.hp-seo-link__sub {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.2;
}
.hp-seo-link__arr {
    color: var(--text-muted);
    font-size: 13px;
    flex-shrink: 0;
}

/* ── Sidebar column (bottom row) ── */
.hp-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── News list (HLTV-style rows) ── */
.news-list {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.news-list__item {
    border-bottom: 1px solid var(--border);
}
.news-list__item:last-child { border-bottom: none; }
.news-list__item--breaking {
    border-left: 3px solid var(--red, #ef4444);
}
.news-list__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background .15s;
}
.news-list__link:hover {
    background: var(--bg-elevated, #1e1e24);
}
.news-list__thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-card);
}
.news-list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-list__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.news-list__cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--accent);
    font-family: var(--font-display);
}
.news-list__title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-list__link:hover .news-list__title {
    color: var(--accent);
}
.news-list__meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 90px;
    text-align: right;
}
.news-list__time {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.news-list__comments {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Mobile news list adjustments */
@media (max-width: 640px) {
    .news-list__link { gap: 10px; padding: 10px 12px; }
    .news-list__thumb { width: 40px; height: 40px; border-radius: 4px; }
    .news-list__title { font-size: 13px; }
    .news-list__meta { min-width: 70px; }
    .news-list__time { font-size: 11px; }
    .news-list__comments { font-size: 10px; }
}

/* ──────────────────────────────────────────────────────
   MOBILE — single column, specific order
   Order: Slider(1) → SEO(2) → Matches(3) → Sidebar(4)
   ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hp-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "slider"
            "seo"
            "matches"
            "sidebar";
        row-gap: 14px;
        padding-top: 14px;
        padding-bottom: 24px;
    }

    /* Slider height on tablet */
    .hp-slider-col .news-slider { height: 260px; }

    /* SEO panel: 2-col link grid on tablet */
    .hp-seo-links { flex-direction: row; flex-wrap: wrap; gap: 2px; }
    .hp-seo-link  { flex: 0 0 calc(50% - 1px); }
    .hp-seo-link__sub { display: none; }
    .hp-seo-title { font-size: 15px; }
}

@media (max-width: 640px) {
    /* Slider height on phone */
    .hp-slider-col .news-slider { height: 210px; }
    .hp-slider-controls { padding: 8px 12px; gap: 8px; }

    /* SEO: 2-col links, no sub-labels */
    .hp-seo-panel { padding: 14px 12px; gap: 10px; }
    .hp-seo-title { font-size: 14px; }
    .hp-seo-desc  { font-size: 11.5px; }

    /* News list is always visible — unified list layout */
}

@media (max-width: 400px) {
    .hp-slider-col .news-slider { height: 180px; }
    .hp-seo-link { flex: 0 0 100%; }
}

/* ── 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}

.pred-teams-row{padding:28px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
@media(max-width:600px){.pred-teams-row{grid-template-columns:1fr;gap:12px;padding:20px 16px}}

.pred-team{display:flex;align-items:center;gap:14px}
.pred-team--right{flex-direction:row-reverse}
.pred-team__logo{width:56px;height:56px;object-fit:contain;flex-shrink:0}
.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}
.pred-team__name{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--text-primary);line-height:1.1}
.pred-team__name--winner{color:var(--green)}
.pred-team__name--pick{color:var(--accent)}
.pred-team__badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.pred-team__badges--right{justify-content:flex-end}
.pred-team__loc{font-size:12px;color:var(--text-muted);margin-top:3px}

/* Tags / badges */
.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)}

/* Center score */
.pred-center{text-align:center}
.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}

/* 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;
}
.pred-odds-card:hover {
    border-color: var(--border-accent) !important;
    background: var(--bg-elevated) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.pred-odds-card--featured:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px rgba(255,165,0,.2), var(--shadow-md);
}

/* ============================================================
   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;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    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); }

.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;
}

/* Body scroll lock when overlay is open */
body.more-overlay-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ============================================================
   MOBILE OVERRIDES — Show bottom nav, hide hamburger
   ============================================================ */
@media (max-width: 768px) {
    .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;
    }

    /* Push footer content above the bottom nav */
    body {
        padding-bottom: 64px;
    }

    /* Ensure footer has spacing above bottom nav */
    .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: 0 0 8px;
    }
    .betting-logo-img { max-height: 24px; max-width: 100px; }
    .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);
    border-left: 3px solid var(--accent);
    max-width: 900px;
}
.seo-intro p {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text-secondary, var(--text-muted));
    margin: 0;
}

/* ── 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; }
}

/* ═══════════════════════════════════════════════════
   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{font-size:15px;line-height:1.75;color:var(--text-primary)}
.guide-article h2{font-size:22px;font-family:var(--font-display);font-weight:700;margin:32px 0 12px;color:var(--text)}
.guide-article h3{font-size:18px;font-family:var(--font-display);font-weight:700;margin:24px 0 10px;color:var(--text)}
.guide-article p{margin:0 0 16px}
.guide-article ul,.guide-article ol{margin:0 0 16px;padding-left:24px}
.guide-article li{margin-bottom:6px}
.guide-article img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:16px 0}
.guide-article blockquote{border-left:3px solid var(--accent);margin:16px 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:16px 0;font-size:13px}
.guide-article th,.guide-article td{padding:10px 12px;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}
.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}

/* ── 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);
}

/* ── Content section card ── */
.content-section {
    padding: 32px;
    margin-top: 36px;
}
.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-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .tip-stats-row .tip-stat-card { min-width: 0; }
    .tip-stats-bar { flex-direction: column; }
    .tip-record-card { min-width: 0; }
}
@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; }
}

/* ============================================================
   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: calc(64px + env(safe-area-inset-bottom, 0px) + 10px);
        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-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;
}

/* ── Responsive: Team Charts ── */
@media (max-width: 768px) {
    .tp-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tp-chart-card {
        flex-direction: row;
        gap: 18px;
        align-items: center;
    }
    .tp-ring {
        width: 110px;
        height: 110px;
        flex-shrink: 0;
    }
    .tp-ring__value {
        font-size: 22px;
    }
    .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-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;
    }
}