/* public/football/odds.css
   Odds Board — modern sportsbook UI
   Self-contained token system (no dependency on football.css variables).

   Design tokens
   -------------
   Color    void #070b14 · surface #101728 · surface-2 #171f34 · line #212b42
            live #ff4757 · up #17c974 · down #ff5470 · gold #f0a93a · focus #4d9fff
   Type     display/UI: Manrope · body: Inter · odds/numbers: JetBrains Mono (tabular)
   Signature  odds-ticker cells in monospace with directional flash on change,
              a client-interpolated live clock, and a segmented market switcher on mobile.
*/

:root {
    --void:        #070b14;
    --surface:     #101728;
    --surface-2:   #171f34;
    --surface-3:   #1d2740;
    --line:        #212b42;
    --line-soft:   #182036;

    --text:        #eef1f7;
    --text-dim:    #8891a8;
    --text-faint:  #5b6580;

    --live:        #ff4757;
    --live-dim:    rgba(255, 71, 87, 0.14);
    --up:          #17c974;
    --up-dim:      rgba(23, 201, 116, 0.16);
    --down:        #ff5470;
    --down-dim:    rgba(255, 84, 112, 0.16);
    --gold:        #f0a93a;
    --gold-dim:    rgba(240, 169, 58, 0.14);
    --focus:       #4d9fff;

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

    --font-ui:   'Manrope', 'Segoe UI', Tahoma, sans-serif;
    --font-body: 'Inter', 'Segoe UI', Tahoma, sans-serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    /* Single source of truth for the board's column layout — shared by the
       header labels (.odds-col-labels) and every row (.mc-card) so they can
       never drift apart. minmax() lets the market columns settle at their
       ideal 168px on wide screens while still surviving 1280px viewports
       without breaking the layout. */
    --odds-grid-cols: 78px minmax(150px, 1fr) minmax(140px, 168px) minmax(140px, 168px) minmax(140px, 168px);
}

/* Border-box everywhere: padding/border no longer add on top of a flex/grid
   item's computed size. Without this, elements that mix a track/flex size
   with their own padding+border (odds cells, inputs, badges) render a few
   pixels larger than their box, which is what let long team names and odds
   buttons crowd into each other. */
*, *::before, *::after {
    box-sizing: border-box;
}

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

/* ── Reset / Base ─────────────────────────────────────────────────────────── */
.odds-page-body {
    font-family: var(--font-body);
    background:
        radial-gradient(1200px 480px at 15% -10%, rgba(23, 201, 116, 0.06), transparent 60%),
        radial-gradient(900px 420px at 90% 0%, rgba(255, 71, 87, 0.05), transparent 55%),
        var(--void);
    color: var(--text);
    margin: 0;
    padding: 0;
    padding-top: 58px; /* room for the now fixed (not in-flow) .odds-topbar */
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

.odds-page-body *:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Top Bar ─────────────────────────────────────────────────────────────── */
.odds-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: rgba(9, 14, 26, 0.86);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line);
}

.odds-topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.odds-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
}

.odds-logo img { height: 60px; }

.odds-logo-text {
    font-family: var(--font-ui);
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
}

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

.odds-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.odds-nav-link {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.odds-nav-link:hover { color: var(--text); background: var(--surface-2); }

.odds-nav-link.active {
    color: var(--text);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
}

.odds-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

.odds-updated-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 6px 12px;
    border-radius: 999px;
}

/* Connection state: live socket vs. polling fallback */
.odds-updated-badge[data-conn="live"] .dot-pulse { background: var(--up); }
.odds-updated-badge[data-conn="live"] .dot-pulse::after { border-color: var(--up); }
.odds-updated-badge[data-conn="polling"] .dot-pulse { background: var(--gold); }
.odds-updated-badge[data-conn="polling"] .dot-pulse::after { border-color: var(--gold); }
.odds-updated-badge[data-conn="offline"] .dot-pulse { background: var(--text-faint); animation: none; }
.odds-updated-badge[data-conn="offline"] .dot-pulse::after { display: none; }

.dot-pulse {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--up);
    flex-shrink: 0;
}

.dot-pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--up);
    animation: pulse-ring 1.8s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

@keyframes pulse-ring {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* ── User Stats Bar (Phase 1) ─────────────────────────────────────────────── */
.user-stats-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.stat-chip-icon {
    font-size: 13px;
    line-height: 1;
}

.stat-chip-value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
}

.stat-chip-label {
    color: var(--text-faint);
}

/* ── Main ─────────────────────────────────────────────────────────────────── */
.odds-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 20px 64px;
}

/* ── League Banner ────────────────────────────────────────────────────────── */
.odds-league-banner {
    margin-bottom: 16px;
}

.league-banner-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(120deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
}

.league-banner-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--up) 0%, transparent 3px);
    opacity: 0.5;
}

.league-banner-flag {
    width: 26px;
    height: 20px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--line);
}

.league-banner-info { flex: 1; min-width: 0; }

.league-banner-title {
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 2px;
    letter-spacing: -0.3px;
}

.league-banner-sub {
    font-size: 12.5px;
    color: var(--text-dim);
}

.league-banner-stats {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.stat-badge {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--surface-3);
    border: 1px solid var(--line);
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.stat-badge.stat-live {
    color: var(--live);
    background: var(--live-dim);
    border-color: rgba(255, 71, 87, 0.35);
}

/* ── Filter Controls ──────────────────────────────────────────────────────── */
.odds-controls {
    position: sticky;
    top: 58px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    margin-bottom: 4px;
    background: linear-gradient(180deg, var(--void) 70%, transparent);
}

.odds-filter-group {
    position: relative;
    display: flex;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.odds-filter-group::-webkit-scrollbar { display: none; }

.odds-filter-btn {
    position: relative;
    z-index: 1;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.odds-filter-btn:hover { color: var(--text); }

.odds-filter-btn.active {
    color: #05130c;
    background: var(--up);
}

.odds-filter-btn.active[data-filter="LIVE"] {
    color: #fff;
    background: var(--live);
}

.odds-search-wrap { flex-shrink: 0; }

.odds-search-input {
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 16px;
    width: 220px;
    max-width: 44vw;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, width 0.15s ease;
}

.odds-search-input::placeholder { color: var(--text-faint); }

.odds-search-input:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(77, 159, 255, 0.15);
    width: 260px;
    max-width: 60vw;
}

/* ── Column Labels (desktop only) ─────────────────────────────────────────── */
.odds-col-labels {
    display: grid;
    grid-template-columns: var(--odds-grid-cols);
    gap: 10px;
    padding: 0 18px;
    margin: 10px 0 6px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ocl-time  { min-width: 0; }
.ocl-match { min-width: 0; }
.ocl-market { text-align: center; min-width: 0; }

/* ── Match List ───────────────────────────────────────────────────────────── */
.odds-match-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Native "virtual rendering": rows far offscreen skip layout/paint until
   scrolled near. Cheaper and safer than JS windowing for a variable-height,
   frequently-live-patched list — the browser still measures via
   contain-intrinsic-size so scrollbar height stays stable. */
.mc-card {
    /* `auto` keeps the browser's real last-measured height once a card has
       painted at least once; 92px is only the *pre-paint fallback* and must
       match this breakpoint's actual row height (desktop ≈ one grid row).
       The mobile breakpoint below overrides this fallback because the
       stacked mobile card is far taller — leaving it at 92px there caused
       content-visibility to reserve/clip newly-inserted (not-yet-painted)
       cards, especially the first card on load, to 92px. */
    content-visibility: auto;
    contain-intrinsic-size: auto 98px;

    display: grid;
    grid-template-columns: var(--odds-grid-cols);
    gap: 12px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
    animation: card-in 0.35s ease both;
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mc-card:hover {
    background: var(--surface-2);
    border-color: var(--line);
    transform: translateY(-1px);
}

.mc-card.mc-live {
    border-left-color: var(--live);
    background: linear-gradient(90deg, var(--live-dim) 0%, var(--surface) 14%);
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.08);
}

.mc-card.mc-live:hover {
    border-color: rgba(255, 71, 87, 0.35);
    box-shadow: 0 0 16px rgba(255, 71, 87, 0.16);
}

/* ── HOT MATCH BANNER (Phase 2.3) ───────────────────────────────────────── */
.hot-match-banner {
    background: linear-gradient(120deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface) 100%);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 12px rgba(240, 169, 58, 0.08);
    animation: hot-banner-in 0.25s ease-out both;
}

@keyframes hot-banner-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hot-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.hot-badge-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex-shrink: 0;
}

.hot-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #241503;
    background: linear-gradient(135deg, #f0a93a 0%, #ff8c00 100%);
    padding: 3px 9px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(240, 169, 58, 0.3);
    text-transform: uppercase;
}

.hot-status {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-dim);
}

.hot-match-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.hot-league {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hot-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hot-team {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.hot-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 14px;
    flex-shrink: 0;
}

.hot-logo img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.hot-name {
    font-family: var(--font-ui);
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hot-vs {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
    padding: 0 2px;
    flex-shrink: 0;
}

.hot-cta-btn {
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 800;
    color: #241503;
    background: var(--gold);
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(240, 169, 58, 0.25);
}

.hot-cta-btn:hover {
    background: #ffb74d;
    transform: translateY(-1px);
}

.hot-cta-btn:active {
    transform: translateY(0);
}

/* Card highlight pulse after CTA click */
.mc-card.card-highlight {
    animation: card-pulse-highlight 1.2s ease;
}

@keyframes card-pulse-highlight {
    0%   { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(240, 169, 58, 0.4); }
    100% { box-shadow: none; }
}

/* ── LIVE Match Hero Panel (Phase 2.1) ────────────────────────────────────── */
.live-match-hero {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.12) 0%, var(--surface-2) 60%, var(--surface) 100%);
    border: 1px solid rgba(255, 71, 87, 0.3);
    border-left: 4px solid var(--live);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 15px rgba(255, 71, 87, 0.1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hero-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.hero-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--live);
    padding: 4px 10px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(255, 71, 87, 0.4);
}

.dot-pulse-live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: live-blink 1.1s ease-in-out infinite;
}

.hero-league-tag {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-match-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.hero-teams-scores {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-team-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hero-team-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 16px;
    flex-shrink: 0;
}

.hero-team-logo img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.hero-team-name {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-team-score {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 800;
    color: var(--gold);
    background: var(--surface-3);
    padding: 2px 12px;
    border-radius: 6px;
    border: 1px solid var(--line);
    flex-shrink: 0;
    min-width: 36px;
    text-align: center;
}

.hero-timeline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(7, 11, 20, 0.6);
    border: 1px solid var(--line);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    margin-top: 4px;
}

.hero-event-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-3);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--line-soft);
}

.hero-market-tabs {
    display: none;
}

.hero-odds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.hero-market {
    min-width: 0;
}

.hero-market-label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mc-card.mc-ended {
    opacity: 0.72;
}

/* Time column */
.mc-time {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    font-family: var(--font-mono);
}

.mc-date { font-size: 11px; color: var(--text-faint); }
.mc-clock { font-size: 13px; font-weight: 600; color: var(--text-dim); }

.mc-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--live);
    padding: 3px 8px;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(255, 71, 87, 0.35);
}

.mc-live-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: live-blink 1.1s ease-in-out infinite;
}

@keyframes live-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

.mc-minute { font-family: var(--font-mono); }

.mc-ft-badge {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--text-dim);
    background: var(--surface-3);
    border: 1px solid var(--line);
    padding: 3px 8px;
    border-radius: 5px;
}

/* Teams column */
.mc-teams {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.mc-team-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mc-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 14px;
    flex-shrink: 0;
}

.mc-crest { width: 20px; height: 20px; object-fit: contain; }

.mc-team-name {
    /* Must be a block-level box for overflow/text-overflow to actually take
       effect — as a plain inline span (the previous default) it has no
       constrained width to truncate against, so long names like "Brighton
       and Hove Albion" or "Nottingham Forest" just kept growing and pushed
       into the odds columns. flex:1 + min-width:0 lets it shrink below its
       own text width inside the row instead of forcing the row wider. */
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-score {
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--gold);
    margin-top: 3px;
}

/* Market columns */
.mc-market { min-width: 0; }

/* ── MARKET ACTIVITY HEATMAP (Phase 2.4) ─────────────────────────────────── */
.mc-market-head,
.hero-market-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 18px;
    margin-bottom: 4px;
}

@media (min-width: 961px) {
    .mc-market-label {
        display: none;
    }
    .mc-market-head {
        justify-content: flex-end;
    }
}

.heat-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-ui);
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-transform: uppercase;
    flex-shrink: 0;
}

.heat-badge.heat-hot {
    color: #f0a93a;
    background: rgba(240, 169, 58, 0.16);
    border: 1px solid rgba(240, 169, 58, 0.4);
    box-shadow: 0 0 8px rgba(240, 169, 58, 0.2);
    animation: heat-pulse 1.8s ease-in-out infinite;
}

.heat-badge.heat-very-hot {
    color: #ff4757;
    background: rgba(255, 71, 87, 0.2);
    border: 1px solid rgba(255, 71, 87, 0.5);
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.35);
    animation: heat-breath 2.2s ease-in-out infinite;
}

@keyframes heat-pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50%      { transform: scale(1.04); opacity: 1; box-shadow: 0 0 12px rgba(240, 169, 58, 0.35); }
}

@keyframes heat-breath {
    0%, 100% { transform: scale(1); opacity: 0.85; box-shadow: 0 0 8px rgba(255, 71, 87, 0.25); }
    50%      { transform: scale(1.05); opacity: 1; box-shadow: 0 0 16px rgba(255, 71, 87, 0.5); }
}

/* ── SMART BETTING TREND PANEL (Phase 2.5) ───────────────────────────────── */
.trend-panel {
    background: var(--surface-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.trend-title {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.trend-sentiment {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--gold);
    background: var(--gold-dim);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.trend-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trend-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trend-label {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-dim);
    width: 65px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trend-track {
    flex: 1;
    height: 6px;
    background: var(--void);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.trend-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: width;
}

.trend-fill.fill-home {
    background: var(--up);
    box-shadow: 0 0 6px rgba(23, 201, 116, 0.3);
}

.trend-fill.fill-draw {
    background: var(--gold);
    box-shadow: 0 0 6px rgba(240, 169, 58, 0.3);
}

.trend-fill.fill-away {
    background: var(--focus);
    box-shadow: 0 0 6px rgba(77, 159, 255, 0.3);
}

.trend-pct {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text);
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

.trend-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-faint);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 4px;
    margin-top: 2px;
}

.mc-odds-row {
    display: flex;
    gap: 6px;
}

.mc-odd {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: var(--surface-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 7px 6px;
    cursor: default;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.mc-odd:hover {
    background: var(--surface-2);
    border-color: var(--focus);
}

.mc-odd-label {
    /* Same block-level fix as .mc-team-name: a plain inline span never
       actually clips, so a long handicap selection (e.g. "Brighton and Hove
       Albion +1.5") could overflow the button instead of ellipsizing. */
    display: block;
    width: 100%;
    text-align: center;
    font-size: 10px;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-odd-price {
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Two-digit-whole-number odds ("13.00") and rarer 3-digit odds ("100.00")
   need to shrink to still fit the same narrow cell that "1.14" fits in.
   Applied by JS based on the formatted price string length. */
.mc-odd-price.mc-odd-price-sm { font-size: 12.5px; letter-spacing: -0.02em; }
.mc-odd-price.mc-odd-price-xs { font-size: 11px;   letter-spacing: -0.03em; }

.mc-odd-na .mc-odd-price { color: var(--text-faint); }

/* Directional flash when a price changes (Pinnacle / SBOBET style) */
.mc-odd.flash-up   { animation: flash-up 900ms cubic-bezier(0.25, 1, 0.5, 1); }
.mc-odd.flash-down { animation: flash-down 900ms cubic-bezier(0.25, 1, 0.5, 1); }

@keyframes flash-up {
    0% {
        background: var(--up-dim);
        border-color: var(--up);
        box-shadow: 0 0 12px var(--up-dim), inset 0 0 0 1px var(--up);
        transform: translateY(-2px);
    }
    30% {
        background: var(--up-dim);
        border-color: var(--up);
        box-shadow: 0 0 14px var(--up-dim), inset 0 0 0 1px var(--up);
        transform: translateY(-2px);
    }
    100% {
        background: var(--surface-3);
        border-color: var(--line-soft);
        box-shadow: none;
        transform: translateY(0);
    }
}

@keyframes flash-down {
    0% {
        background: var(--down-dim);
        border-color: var(--down);
        box-shadow: 0 0 12px var(--down-dim), inset 0 0 0 1px var(--down);
        transform: translateY(2px);
    }
    30% {
        background: var(--down-dim);
        border-color: var(--down);
        box-shadow: 0 0 14px var(--down-dim), inset 0 0 0 1px var(--down);
        transform: translateY(2px);
    }
    100% {
        background: var(--surface-3);
        border-color: var(--line-soft);
        box-shadow: none;
        transform: translateY(0);
    }
}

.mc-odd.flash-up .mc-odd-price { color: var(--up); }
.mc-odd.flash-down .mc-odd-price { color: var(--down); }

.mc-odd.flash-up .mc-odd-price::after {
    content: ' ▲';
    color: var(--up);
    font-size: 11px;
    font-weight: 800;
    margin-left: 2px;
    display: inline-block;
}

.mc-odd.flash-down .mc-odd-price::after {
    content: ' ▼';
    color: var(--down);
    font-size: 11px;
    font-weight: 800;
    margin-left: 2px;
    display: inline-block;
}

.mc-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 44px;
    font-size: 11.5px;
    color: var(--text-faint);
    background: var(--surface-3);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
}

/* Mobile market switcher (segmented control) — hidden on desktop */
.mc-market-tabs {
    display: none;
}

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.odds-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skel-row {
    height: 84px;
    border-radius: var(--radius-md);
    background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
    background-size: 220% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border: 1px solid var(--line);
}

@keyframes shimmer {
    0%   { background-position: 140% 0; }
    100% { background-position: -60% 0; }
}

/* ── Empty State ──────────────────────────────────────────────────────────── */
.odds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 64px 20px;
    text-align: center;
    color: var(--text-dim);
}

.odds-empty-icon { font-size: 34px; opacity: 0.6; }

.odds-empty-title {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.odds-empty-desc { font-size: 13px; color: var(--text-dim); max-width: 320px; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.odds-footer {
    border-top: 1px solid var(--line);
    padding: 18px 20px;
    margin-top: 24px;
}

.odds-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    font-size: 12px;
    color: var(--text-faint);
    text-align: center;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .odds-col-labels { display: none; }

    .mc-card {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
        /* Mobile stacks time + teams + market-tabs + one market block
           vertically, so the pre-paint placeholder height must be much
           taller than the desktop 92px single-row fallback used above —
           otherwise content-visibility:auto clips freshly-inserted cards
           (most visibly the first one) to 92px before they've painted. */
        contain-intrinsic-size: auto 340px;
    }

    .mc-time {
        /* min-width:0 now lives on the base .mc-time rule above and applies
           here too — without it, on narrow phones the date/clock/LIVE-badge
           content could force the single 1fr column wider than the
           viewport, producing page-wide horizontal overflow. */
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .mc-time .mc-date::after { content: '·'; margin: 0 6px; color: var(--text-faint); }

    /* Segmented control to switch between 1X2 / Handicap / O-U instead of
       cramming three market columns into a narrow viewport. */
    .mc-market-tabs {
        display: flex;
        gap: 4px;
        background: var(--surface-3);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 3px;
    }

    .mc-market-tab {
        flex: 1;
        text-align: center;
        font-family: var(--font-ui);
        font-size: 11.5px;
        font-weight: 700;
        color: var(--text-dim);
        background: transparent;
        border: none;
        padding: 6px 4px;
        border-radius: 999px;
        cursor: pointer;
    }

    .mc-market-tab.active {
        color: #05130c;
        background: var(--up);
    }

    .mc-market {
        display: none;
    }

    .mc-market.mc-market-visible {
        display: block;
    }

    /* Live Hero mobile market switcher */
    .hero-market-tabs {
        display: flex;
        gap: 4px;
        background: var(--surface-3);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 3px;
        margin-bottom: 10px;
    }

    .hero-market-tab {
        flex: 1;
        text-align: center;
        font-family: var(--font-ui);
        font-size: 11.5px;
        font-weight: 700;
        color: var(--text-dim);
        background: transparent;
        border: none;
        padding: 6px 4px;
        border-radius: 999px;
        cursor: pointer;
    }

    .hero-market-tab.active {
        color: #05130c;
        background: var(--up);
    }

    .hero-odds-grid {
        grid-template-columns: 1fr;
    }

    .hero-market {
        display: none;
    }

    .hero-market.hero-market-visible {
        display: block;
    }
}

@media (max-width: 600px) {
    .hot-match-banner {
        padding: 10px 12px;
    }

    .hot-banner-inner {
        flex-wrap: wrap;
        gap: 8px;
    }

    .hot-badge-wrap {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    .hot-match-info {
        width: 100%;
    }

    .hot-name {
        font-size: 13.5px;
    }

    .hot-cta-btn {
        padding: 6px 12px;
        font-size: 11.5px;
        margin-left: auto;
    }

    .odds-topbar-inner { gap: 6px; padding: 0 10px; }

    .odds-nav {
        display: flex;
        gap: 2px;
        flex-shrink: 0;
    }
    .odds-nav-link {
        padding: 8px 9px;
        font-size: 15px;
    }
    .odds-nav-link-label { display: none; }

    .odds-topbar-right { flex-shrink: 0; gap: 6px; }
    .odds-updated-badge { padding: 6px 8px; gap: 0; }
    .odds-updated-badge span:not(.dot-pulse) { display: none; }

    /* Compact chips: icon + value only, drop the text label to save space
       next to the connection badge on narrow phones. */
    .user-stats-bar { gap: 4px; }
    .stat-chip { padding: 4px 6px; gap: 4px; }
    .stat-chip-label { display: none; }

    .odds-main { padding: 14px 14px 48px; }

    .league-banner-inner { padding: 12px 14px; flex-wrap: wrap; }
    .league-banner-stats { width: 100%; justify-content: flex-start; }

    .odds-controls {
        /* .odds-topbar-inner is 58px tall at every breakpoint (only its
           horizontal padding/gap changes above) — this must stay in sync
           with the base rule's `top: 58px`, otherwise the sticky filter bar
           settles under the topbar (z-index 100 > 90) and its top edge gets
           clipped/hidden while scrolling. */
        flex-direction: column;
        align-items: stretch;
    }

    .odds-search-input,
    .odds-search-input:focus { width: 100%; max-width: none; }

    .mc-team-name { font-size: 13.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BET SLIP / TOAST / BALANCE / MOBILE DRAWER
   Migrated from football_old.css, re-themed onto the odds-board design
   tokens above (--surface/--line/--gold/--live/--up etc.) instead of the
   legacy panel palette, so it reads as one UI rather than two bolted together.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Board + Bet Slip side-by-side layout ────────────────────────────────── */
.odds-board-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.odds-board-col {
    flex: 1;
    min-width: 0;
}

.betslip-column {
    margin-top: 10px;
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Clickable odds cells (bet selection) ────────────────────────────────── */
.mc-odd:not(.mc-odd-na) { cursor: pointer; }

.mc-odd.mc-odd-active {
    background: var(--gold-dim);
    border-color: var(--gold);
    /* box-shadow (not an extra border) so the highlight never changes the
       button's box size or nudges the text — same padding, same footprint
       as every other odds button. */
    box-shadow: inset 0 0 0 1px var(--gold);
}

.mc-odd.mc-odd-active .mc-odd-price { color: var(--gold); }
.mc-odd.mc-odd-active .mc-odd-label { color: var(--text); }

/* ── Bet Slip Panel ───────────────────────────────────────────────────────── */
.betslip-mobile-toggle { display: none; }

.betslip-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    position: sticky;
    top: 74px; /* clears the 58px sticky topbar + a little breathing room */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 94px);
    overflow: hidden;
}

.betslip-header {
    background: var(--surface-2);
    padding: 12px 16px;
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text);
}

.btn-clear-all {
    background: transparent;
    border: 1px solid var(--down);
    color: var(--down);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.2s;
}

.btn-clear-all:hover { background: var(--down); color: #fff; }

.betslip-info-bar {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--void);
    font-size: 12px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
}

.betslip-content {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
}

.betslip-empty {
    text-align: center;
    color: var(--text-dim);
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.betslip-empty-icon { font-size: 38px; margin-bottom: 10px; }

.betslip-empty-title {
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text);
}

.betslip-empty-desc { font-size: 12px; line-height: 1.4; }

.bet-item {
    background: var(--surface-3);
    border: 1px solid var(--line-soft);
    padding: 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    position: relative;
}

.bet-item-title {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 5px;
    padding-right: 20px;
    color: var(--text);
}

.bet-item-match { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.bet-item-market { font-size: 11px; color: var(--text-faint); }

.bet-item-odds {
    color: var(--gold);
    font-family: var(--font-mono);
    font-weight: 700;
}

.bet-item-remove {
    position: absolute;
    top: 5px;
    right: 8px;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
}

.bet-item-remove:hover { color: var(--text); }

.betslip-footer {
    padding: 14px 16px;
    background: var(--surface-2);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-top: 1px solid var(--line);
}

.bet-balance-group,
.bet-input-group,
.bet-return-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-dim);
}

.bet-balance-group span,
.bet-input-group label,
.bet-return-group label { color: var(--text-dim); }

#user-balance { color: var(--up); font-family: var(--font-mono); font-weight: 700; }

.bet-input-group input {
    /* flex: 0 0 120px + min-width:0 pins this to exactly 120px no matter
       what — width alone isn't enough to stop a flex item from stretching
       if a parent/browser default ever gives it flex-grow, and a bare
       number input has no natural max-width of its own. */
    flex: 0 0 120px !important;
    width: 120px !important;
    max-width: 120px !important;
    min-width: 0 !important;
    background: var(--void);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 8px;
    border-radius: var(--radius-sm);
    text-align: right;
    outline: none;
    font-family: var(--font-mono);
}

.bet-input-group input:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(77, 159, 255, 0.15);
}

.bet-return-group { color: var(--gold); font-size: 15px; font-weight: 700; }
.bet-return-group span { color: var(--gold); font-family: var(--font-mono); }

.bet-profit-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    margin-top: -6px;
    font-size: 12px;
    color: var(--text-dim);
}

.bet-profit-group label { color: var(--text-dim); }
.bet-profit-group span { color: var(--up); font-family: var(--font-mono); font-weight: 700; }

.btn-place-bet {
    width: 100%;
    background: var(--gold);
    color: #241503;
    border: none;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-place-bet:hover { filter: brightness(1.08); }

.btn-place-bet:disabled {
    background: var(--surface-3);
    cursor: not-allowed;
    color: var(--text-faint);
}

/* ── Toast Notifications ──────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: var(--surface-2);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    min-width: 260px;
    max-width: 320px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    animation: toastIn 0.3s ease forwards;
    pointer-events: auto;
}

.toast.toast-won,
.toast.toast-success { border-left-color: var(--up); }
.toast.toast-lost     { border-left-color: var(--down); }
.toast.toast-void     { border-left-color: var(--text-faint); }
.toast.toast-error    { border-left-color: var(--down); }

.toast-title {
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.toast-body { font-size: 15px; font-weight: 700; }

.toast.hiding { animation: toastOut 0.3s ease forwards; }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); }
}

/* ── Responsive: bet slip becomes a bottom drawer ────────────────────────── */
@media (max-width: 960px) {
    .odds-board-layout {
        flex-direction: column;
        /* Desktop uses align-items:flex-start (row layout) so the board
           column and bet-slip column don't stretch to match each other's
           height. Once flex-direction flips to column here, flex-start
           becomes the *cross-axis* (horizontal) alignment, which makes
           .odds-board-col shrink-to-fit its content width instead of
           filling the viewport — this is what was squeezing .mc-card down
           to ~276px with a gap on the right. Overriding to stretch makes
           both columns take the full 100% width in the stacked layout. */
        align-items: stretch;
    }

    .betslip-column {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 500;
    }

    .betslip-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: var(--surface-2);
        border: none;
        border-top: 2px solid var(--gold);
        color: var(--text);
        padding: 0 16px;
        font-family: var(--font-ui);
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        height: 48px;
    }

    .toggle-count {
        background: var(--gold);
        color: #241503;
        border-radius: 999px;
        padding: 2px 8px;
        font-size: 12px;
        min-width: 22px;
        text-align: center;
        font-weight: 700;
    }

    .betslip-panel {
        position: static;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        border-radius: 0;
    }

    .betslip-panel.mobile-open {
        max-height: 26vh;
        overflow-y: auto;
    }

    .betslip-header > span { display: none; }
    .betslip-header { justify-content: flex-end; padding: 8px 15px; }

    /* Leave room at the bottom of the page for the fixed toggle bar */
    .odds-main { padding-bottom: 64px; }
}

/* ── LIVE TICKET TICKER (Phase 2.6) ──────────────────────────────────────── */
.ticket-ticker {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin-bottom: 8px;
    overflow: hidden;
    min-height: 44px;
    position: relative;
}

.ticker-label {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-dim);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    padding-right: 8px;
    border-right: 1px solid var(--line);
}

.ticker-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 30px;
}

.ticker-track {
    display: flex;
    align-items: center;
    gap: 12px;
    will-change: transform;
    /* Animation applied via JS */
}

/* Ticket cards */
.ticket-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface-3);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 5px 10px;
    white-space: nowrap;
    flex-shrink: 0;
    animation: ticket-fadein 400ms ease both;
}

@keyframes ticket-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ticket-user {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--focus);
    letter-spacing: 0.02em;
}

.ticker-sep {
    font-size: 9px;
    color: var(--text-faint);
}

.ticket-stake {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--up);
}

.ticket-selection {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text);
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-odds {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--gold);
}

/* Ticker fade edges (left/right vignette) */
.ticker-viewport::before,
.ticker-viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    z-index: 2;
    pointer-events: none;
}

.ticker-viewport::before {
    left: 0;
    background: linear-gradient(to right, var(--surface-2), transparent);
}

.ticker-viewport::after {
    right: 0;
    background: linear-gradient(to left, var(--surface-2), transparent);
}

/* Mobile: slightly smaller text */
@media (max-width: 480px) {
    .ticket-ticker {
        padding: 5px 8px;
        gap: 7px;
    }
    .ticker-label {
        font-size: 9.5px;
    }
    .ticket-user,
    .ticket-stake,
    .ticket-selection,
    .ticket-odds {
        font-size: 9.5px;
    }
}

/* ── SMART ODDS BOOST BADGE (Phase 2.7A) ─────────────────────────────────── */
.odds-badge {
    display: block;
    font-family: var(--font-ui);
    font-size: 8.5px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
    text-align: center;
    margin-bottom: 2px;
    /* width matches the cell — badge never forces the cell wider */
    align-self: stretch;
}

/* BOOST — gold/orange */
.odds-badge-boost {
    color: var(--gold);
    background: var(--gold-dim);
    border: 1px solid rgba(240, 169, 58, 0.35);
    animation: badge-glow 3s ease-in-out infinite;
}

/* VALUE — green */
.odds-badge-value {
    color: var(--up);
    background: var(--up-dim);
    border: 1px solid rgba(23, 201, 116, 0.35);
    animation: badge-pulse 2.4s ease-in-out infinite;
}

/* BEST PRICE — blue/focus */
.odds-badge-best {
    color: var(--focus);
    background: rgba(77, 159, 255, 0.13);
    border: 1px solid rgba(77, 159, 255, 0.35);
    animation: badge-shimmer 2.8s ease-in-out infinite;
}

@keyframes badge-glow {
    0%, 100% { opacity: 0.85; box-shadow: none; }
    50%       { opacity: 1;    box-shadow: 0 0 8px rgba(240, 169, 58, 0.4); }
}

@keyframes badge-pulse {
    0%, 100% { opacity: 0.8;  transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.03); }
}

@keyframes badge-shimmer {
    0%, 100% { opacity: 0.8; }
    50%       { opacity: 1; box-shadow: 0 0 7px rgba(77, 159, 255, 0.35); }
}

/* Ensure the odds cell stays flex-column so badge stacks above price */
.mc-odd {
    flex-direction: column;
}

/* Tighten cell on very small viewports so badges never overflow */
@media (max-width: 480px) {
    .odds-badge {
        font-size: 7.5px;
        padding: 2px 3px;
        letter-spacing: 0.02em;
    }
}

/* ── LIVE WINNING POPUP (Phase 2.7B) ─────────────────────────────────────── */
.live-winning-popup {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 9900;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* never block card clicks */
    max-width: 340px;
    width: 340px;
}

.win-popup-card {
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35), 0 4px 20px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
    position: relative;
}

/* Gold left accent line */
.win-popup-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gold), var(--up));
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.win-popup-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.win-popup-trophy {
    font-size: 15px;
    flex-shrink: 0;
}

.win-popup-user {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--focus);
    white-space: nowrap;
    flex-shrink: 0;
}

.win-popup-label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    flex-shrink: 0;
}

.win-popup-amount {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
    color: var(--up);
    margin-left: auto;
    white-space: nowrap;
}

.win-popup-row-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 2px;
}

.win-popup-ball {
    font-size: 12px;
    flex-shrink: 0;
}

.win-popup-selection {
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Entry animation */
.popup-enter {
    animation: popup-enter 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Exit animation */
.popup-exit {
    animation: popup-exit 350ms ease-in both;
}

@keyframes popup-enter {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popup-exit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* Mobile */
@media (max-width: 600px) {
    .live-winning-popup {
        bottom: 72px; /* above mobile betslip toggle bar */
        left: 12px;
        right: 12px;
        width: auto;
        max-width: calc(100vw - 24px);
    }
}

/* ── PHASE 2.9 — MARKET GROUP CARD + ODDS HOVER GLOW + BIGGER ODDS (UI ONLY) ─ */
@media (min-width: 1024px) {

    :root {
        --odds-grid-cols:
            80px
            minmax(210px, 240px)
            minmax(166px, 1fr)
            minmax(166px, 1fr)
            minmax(166px, 1fr);
    }

    .odds-col-labels,
    .mc-card {
        grid-template-columns: var(--odds-grid-cols);
        gap: 14px;
        padding: 14px 18px;
    }

    .odds-col-labels {
        padding: 0 18px;
    }

    /* Phase 2.9.1: SOFTER MARKET GROUP CARD — container, not a focus */
    .mc-market {
        min-width: 0;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: var(--radius-md);
        padding: 8px 7px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        position: relative;
        box-shadow: none;
        transition: border-color 0.2s ease;
    }

    .mc-market:hover {
        border-color: rgba(255, 255, 255, 0.09);
    }

    .mc-market-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 16px;
        margin-bottom: 2px;
    }

    .mc-market-label {
        display: block;
        font-family: var(--font-ui);
        font-size: 10px;
        font-weight: 800;
        color: var(--text-faint);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .mc-odds-row {
        display: flex;
        gap: 4px;
        min-width: 0;
    }

    /* Phase 2.9.1: CLEANER ODDS CELL + HOVER GLOW PRESERVED */
    .mc-odd {
        flex: 1 1 0;
        min-width: 0;
        min-height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: var(--surface-2);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        padding: 8px 2px;
        cursor: pointer;
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
        will-change: transform, box-shadow;
    }

    .mc-odd:hover {
        background: var(--surface-3);
        border-color: var(--gold);
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(240, 169, 58, 0.18);
        z-index: 2;
    }

    .mc-odd:active {
        transform: translateY(0);
        box-shadow: none;
    }

    .odds-badge {
        font-size: 7px;
        padding: 1.5px 3px;
        letter-spacing: 0;
        margin-bottom: 2px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Phase 2.9.2: 1X2 SPORTSBOOK UX REFACTOR — compact 1 / X / 2 label */
    .mc-odd-label {
        display: block;
        width: 100%;
        text-align: center;
        font-family: var(--font-ui);
        font-size: 9.5px;
        font-weight: 700;
        color: var(--text-dim);
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: auto;
        max-width: 100%;
    }

    /* Phase 2.9.1: BIGGER + DOMINANT ODDS */
    .mc-odd-price {
        display: block;
        width: 100%;
        text-align: center;
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: var(--gold);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    }

    /* Two-digit-whole-number odds ("13.00") and rarer 3-digit odds ("100.00")
       need to shrink to still fit the same narrow cell "1.14" fits in —
       especially when a badge (BEST/VALUE/BOOST) also occupies the cell.
       Applied by JS based on the formatted price string length. */
    .mc-odd-price.mc-odd-price-sm { font-size: 11.5px; letter-spacing: -0.03em; }
    .mc-odd-price.mc-odd-price-xs { font-size: 10px;   letter-spacing: -0.04em; }

    /* OBJECTIVE 4: TREND PANEL DESKTOP POLISH */
    .trend-panel {
        max-width: 240px;
        padding: 6px 8px;
        gap: 4px;
        margin-top: 6px;
    }

    .trend-header {
        gap: 4px;
    }

    .trend-title {
        font-size: 9.5px;
    }

    .trend-sentiment {
        font-size: 9px;
        padding: 1px 4px;
        max-width: 130px;
    }

    .trend-label {
        font-size: 9px;
        width: 48px;
    }

    .trend-track {
        height: 5px;
    }

    .trend-pct {
        font-size: 9px;
        width: 26px;
    }

    .trend-footer {
        font-size: 8.5px;
        padding-top: 3px;
        margin-top: 1px;
    }
}