/*
 * Fútbol Mundial — main stylesheet
 * Extracted verbatim from the design source `fm/index.html` (prototype's inline <style> block).
 * Tailwind utilities are still loaded from CDN and used inline; this file holds the
 * design-specific tokens, animations, and component overrides.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Barlow+Condensed:wght@600;700&display=swap');

:root {
    --red: #E30613;
    --dark: #0a0e12;
    --darker: #050709;
    --accent-green: #00ff88;
    --accent-amber: #ffaa00;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: #050709;
    color: #e2e8f0;
}

.heading-condensed {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.futbol-red { color: var(--red); }
.section-header {
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
}

/* Nav links share the same vertical box (transparent 2px border) so the
 * active item doesn't sit a couple of pixels higher than its siblings. */
.nav-active {
    color: white;
    border-bottom-color: var(--red);
}

/* Ticker bar stays dark in both themes — matches prototype.html. The pill
 * colors (emerald / red / slate) only read well against this dark surface. */
.odds-ticker {
    background: #11151a;
    border-bottom: 1px solid #1e2937;
    overflow: hidden;
    white-space: nowrap;
    color: #e2e8f0;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0 30px;
    font-size: 1.5rem;
    font-family: ui-monospace, monospace;
}

/* Moneyline favorite — a lighter, bolder green than the matchup label with a
 * subtle glow so the likeliest winner reads at a glance. */
.ticker-fav {
    color: #6ee7b7 !important;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(16, 185, 129, 0.45);
}

/* Edge match — the line-shop engine found a price gap on this fixture. The
 * EDGE pill, the edge-side price chip and the alpha number all pulse + glow to
 * pull the eye; the baseline rows stay calm. */
.ticker-edge-pill {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    padding: 2px 9px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(90deg, #E30613, #c8102e);
    animation: ticker-edge-pulse 1.5s ease-in-out infinite;
}

/* Edge-side price chip (the outcome carrying the value) — bold + glowing box. */
.ticker-edge-chip {
    font-weight: 700 !important;
    animation: ticker-edge-chip-pulse 1.5s ease-in-out infinite;
}

/* Alpha % number on an edge row — bold (set inline) + glowing text. */
.ticker-edge-alpha {
    animation: ticker-edge-text-pulse 1.5s ease-in-out infinite;
}

@keyframes ticker-edge-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 6px rgba(227, 6, 19, 0.55);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 16px rgba(227, 6, 19, 0.95);
    }
}

@keyframes ticker-edge-chip-pulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(227, 6, 19, 0.4);
        text-shadow: 0 0 4px rgba(227, 6, 19, 0.35);
    }
    50% {
        box-shadow: 0 0 14px rgba(227, 6, 19, 0.9);
        text-shadow: 0 0 12px rgba(227, 6, 19, 0.95);
    }
}

@keyframes ticker-edge-text-pulse {
    0%, 100% { text-shadow: 0 0 4px rgba(227, 6, 19, 0.35); }
    50% { text-shadow: 0 0 14px rgba(227, 6, 19, 1); }
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 9999px;
    box-shadow: 0 0 8px #ef4444;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.signal-card { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.signal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
}

.alpha-value {
    font-size: 2.25rem;
    line-height: 1;
    font-weight: 800;
    font-family: 'Barlow Condensed', sans-serif;
}

.platform-comparison {
    background: #11151a;
    border: 1px solid #334155;
}

.video-container {
    position: relative;
    background: #000;
    border-radius: 1rem;
    border: 1px solid rgb(30 41 59);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
}

.play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    transition: background 0.2s;
}
.play-overlay:hover { background: rgba(0,0,0,0.2); }

.scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ff88, transparent);
    animation: scan 2.2s linear infinite;
    pointer-events: none;
    opacity: 0.15;
}

@keyframes scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(400px); }
}

.nav-link {
    transition: color 0.1s;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}
.nav-link:hover { color: #f1f5f9; }

.story-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.story-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.metric-value { font-variant-numeric: tabular-nums; }

.futbol-header {
    background: linear-gradient(90deg, #E30613, #c8102e);
    box-shadow: 0 4px 6px -1px rgb(227 6 19 / 0.2);
}

/* Ticker animation.
 *
 * The track is duplicated in JS (items × 2), so translating to -50% advances
 * exactly one full set and loops seamlessly. For that math to hold the track
 * MUST hug its content width — `.ticker-track` carries Tailwind's `flex`
 * (block-level), which otherwise stretches it to the flex parent's width, i.e.
 * the viewport. When that happens -50% is half the *viewport*, so on narrow
 * screens the track scrolls only a sliver before looping and you see a single
 * match repeating. `width: max-content` makes the percentage content-relative,
 * giving identical, seamless scrolling on every screen size. */
.ticker-track {
    width: max-content;
    flex-wrap: nowrap;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Content width is now viewport-independent, so the pixel speed is identical
 * across breakpoints. On narrow screens that reads as too fast relative to the
 * small visible window, so mobile gets a longer duration (slower scroll). */
.animate-marquee { animation: marquee 90s linear infinite; }
/* Pause-on-hover is a mouse affordance only. iOS Safari gives taps a STICKY
 * :hover state that persists until the user taps elsewhere — and these bars
 * are pinned right where thumbs land to scroll, so on touch devices the
 * marquee would freeze indefinitely and look broken/static. */
@media (hover: hover) and (pointer: fine) {
    .animate-marquee:hover { animation-play-state: paused; }
}

@media (max-width: 768px) {
    .animate-marquee { animation-duration: 220s; }
}

/* ------------------------------------------------------------------ *
 * World Cup scores ticker — a second marquee stacked directly under   *
 * the odds bar. Sky/blue accent distinguishes it from the red/green   *
 * odds bar, and it scrolls LEFT→RIGHT (reverse of the odds keyframe).  *
 * ------------------------------------------------------------------ */
.scores-ticker {
    background: #0d1620;
    border-bottom: 1px solid #1e2937;
    border-top: 1px solid rgba(56, 189, 248, 0.25);
    overflow: hidden;
    white-space: nowrap;
    color: #e2e8f0;
}

/* Blue variant of the pulsing live dot in the bar label. */
.live-dot--blue {
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
}

.scores-item {
    display: inline-flex;
    align-items: center;
    /* Never let the flex track squish an item to fit the viewport. On narrow
     * screens a shrinking item collapses below its content width, wrapping the
     * score/team internally and leaving the track no wider than the screen —
     * so there's nothing to scroll. Holding natural width keeps the marquee
     * overflowing (and therefore animating) on mobile. */
    flex: 0 0 auto;
    gap: 10px;
    padding: 0 26px;
    font-size: 1.05rem;
    font-family: ui-monospace, monospace;
    white-space: nowrap;
}

.scores-team {
    font-weight: 600;
    color: #e2e8f0;
}

/* Round country badge. */
.scores-logo {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
}

/* Initials fallback when a badge image is missing / 404s. */
.scores-logo--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #cbd5e1;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

.scores-score {
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    padding: 0 4px;
    letter-spacing: 1px;
}

/* Finished results lead the bar — make the score and its "FINAL SCORE" tag
 * loud so a result reads instantly, and quiet the upcoming rows so they don't
 * compete. */
.scores-item--result .scores-team {
    color: #f8fafc;
    font-weight: 700;
}

.scores-item--result .scores-score {
    font-size: 1.45rem;
    color: #ffffff;
    background: rgba(56, 189, 248, 0.16);
    border: 1px solid rgba(56, 189, 248, 0.6);
    border-radius: 7px;
    padding: 2px 11px;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.scores-item--soon {
    opacity: 0.7;
}

.scores-vs {
    color: #94a3b8;
    font-size: 0.85rem;
    padding: 0 2px;
}

/* Status pills. */
.scores-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.scores-live {
    color: #fff;
    background: linear-gradient(90deg, #E30613, #c8102e);
    animation: scores-live-pulse 1.5s ease-in-out infinite;
}

.scores-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}

/* Big, unmissable "FINAL SCORE" tag sitting right next to a finished match. */
.scores-final {
    color: #08121d;
    background: #38bdf8;
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 13px;
    border-radius: 8px;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.6);
}

.scores-soon {
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.14);
}

@keyframes scores-live-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(227, 6, 19, 0.55); }
    50% { box-shadow: 0 0 16px rgba(227, 6, 19, 0.95); }
}

/* Left→right marquee — reverse of the odds keyframe. The track is duplicated
 * in JS, so starting at -50% and moving to 0 makes items travel left→right.
 * translate3d promotes the track to its own GPU layer so the scroll stays
 * smooth (no main-thread paint hitches / sub-pixel stutter). */
@keyframes scores-marquee {
    0% { transform: translate3d(-50%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* Duration is set inline by scores-ticker.js (constant px/sec). The durations
 * below are only ever consumed by clients running a stale cached copy of the
 * JS that predates the inline duration — for them a fixed duration means the
 * speed scales with track width, so keep these LONG: a stale client erring
 * slow looks fine, one racing across the bar is what gets reported as broken. */
.animate-scores-marquee {
    /* Size the track to its content (the JS lays down two copies of the set)
     * so translateX(-50%) advances by exactly one copy for a seamless loop,
     * and the track overflows its clipped parent on every viewport width. */
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: scores-marquee 120s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}
/* Mouse-only pause — see the .animate-marquee note above (sticky iOS :hover). */
@media (hover: hover) and (pointer: fine) {
    .animate-scores-marquee:hover { animation-play-state: paused; }
}

@media (max-width: 768px) {
    .animate-scores-marquee { animation-duration: 240s; }
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* Alpha flash animation */
@keyframes alphaFlash {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(16, 185, 129, 0.2); }
}

.alpha-flash { animation: alphaFlash 0.6s ease-out; }

/* Hide scrollbar but allow scrolling */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Modern dark-theme scrollbar */
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.18) transparent;
}
.custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    transition: background-color 0.2s ease;
}
.custom-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(148, 163, 184, 0.35); }
.custom-scroll::-webkit-scrollbar-corner { background: transparent; }

/* Custom tooltips */
[data-tip] { position: relative; display: inline-block; }
[data-tip]::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    border: 5px solid transparent;
    border-bottom-color: #1e293b;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 1001;
    pointer-events: none;
}
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 5px);
    background: #1e293b;
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 400;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border: 1px solid #334155;
}
[data-tip]:hover::before, [data-tip]:hover::after { opacity: 1; visibility: visible; }

/* === EXPLICIT THEME OVERRIDES (don't rely on Tailwind CDN JIT for dark variants) ===
   These use `html.dark body` / `html:not(.dark) body` so they beat the Tailwind
   `bg-[#f8fafc]` and `dark:bg-fm-darker` utilities by specificity (0,0,1,1 > 0,0,1,0). */
html.dark body      { background:#050709; color:#e2e8f0; }
html:not(.dark) body { background:#f8fafc; color:#1e293b; }
html:not(.dark) .section-header { color:#475569; }
html:not(.dark) .platform-comparison { background:#ffffff; border-color:#e2e8f0; }
/* Intentionally NOT overriding .odds-ticker / .scores-ticker in light mode — bars stay dark. */
html:not(.dark) .video-container { border-color:#e2e8f0; }
html:not(.dark) .skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
}
html:not(.dark) .custom-scroll { scrollbar-color: #cbd5e1 transparent; }
html:not(.dark) .custom-scroll::-webkit-scrollbar-thumb { background-color:#cbd5e1; }
html:not(.dark) .custom-scroll::-webkit-scrollbar-thumb:hover { background-color:#94a3b8; }

/* === HEADER (red gradient in BOTH themes) === */
.futbol-header, .futbol-header a, .futbol-header button, .futbol-header span, .futbol-header i { color:#ffffff; }
.futbol-header .fa-futbol, .futbol-header [class*="text-[#E30613]"] { color:#E30613 !important; }
.futbol-header .nav-link:hover { color: rgba(255,255,255,0.85); }

/* Active language toggle pill */
.active-lang { background:#ffffff; color:#E30613; }

/* Open Predictive Scanner button — explicit hover/idle so we don't depend on
   Tailwind CDN generating bg-fm-red / text-fm-red custom tokens. */
.fm-scanner-btn               { background:#ffffff;          color:#E30613;          border-color:rgba(227,6,19,.3); }
.fm-scanner-btn:hover         { background:#E30613;          color:#ffffff;          border-color:#E30613; }
.fm-scanner-btn:hover i,
.fm-scanner-btn:hover span    { color:#ffffff; }

/* === PODCAST DOCK PLAYER === */
.fm-pod-dock {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 90;
    transform: translateY(120%);
    transition: transform .5s cubic-bezier(.22,1,.36,1);
    background: linear-gradient(180deg, rgba(15,18,24,.94) 0%, rgba(8,10,14,.97) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(227,6,19,.4);
    box-shadow: 0 -24px 60px rgba(0,0,0,.55);
    color: #fff;
}
html:not(.dark) .fm-pod-dock {
    background: linear-gradient(180deg, rgba(20,22,28,.94) 0%, rgba(11,13,18,.97) 100%);
}
.fm-pod-dock.open { transform: translateY(0); }
.fm-pod-dock::before {
    content:''; position:absolute; left:0; right:0; top:-1px; height:1px;
    background: linear-gradient(90deg, transparent, #E30613 50%, transparent);
    opacity:.7;
}

.fm-pod-vinyl {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    background:
        radial-gradient(circle at 50% 50%, #E30613 0 14%, #2a0507 14% 19%, #15171d 19% 100%),
        repeating-radial-gradient(circle at 50% 50%, transparent 0 1px, rgba(255,255,255,.04) 1px 2px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 0 0 4px rgba(15,18,24,.9),
        0 8px 24px rgba(227,6,19,.4),
        inset 0 0 18px rgba(0,0,0,.7);
    position: relative;
}
.fm-pod-vinyl::after {
    content:''; position:absolute; inset: 44%;
    background:#fff; border-radius:50%;
    box-shadow: 0 0 0 2px #E30613;
}
.fm-pod-vinyl.spinning { animation: fm-pod-spin 8s linear infinite; }
@keyframes fm-pod-spin { to { transform: rotate(360deg); } }

.fm-pod-eq { display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.fm-pod-eq span {
    display:block; width:3px; height:30%;
    background: linear-gradient(180deg,#ff4d5e,#E30613);
    border-radius:1px;
}
.fm-pod-eq.playing span { animation: fm-pod-eq 1s ease-in-out infinite; }
.fm-pod-eq span:nth-child(2) { animation-delay:.15s; }
.fm-pod-eq span:nth-child(3) { animation-delay:.3s; }
.fm-pod-eq span:nth-child(4) { animation-delay:.45s; }
@keyframes fm-pod-eq { 0%,100%{height:25%;} 50%{height:100%;} }

.fm-pod-progress {
    position: relative; height: 4px; background: rgba(255,255,255,.08);
    cursor: pointer;
}
.fm-pod-progress-fill {
    height:100%; width:0%;
    background: linear-gradient(90deg,#E30613 0%,#ff4d5e 100%);
    box-shadow: 0 0 8px rgba(227,6,19,.5);
    transition: width .1s linear;
    position: relative;
}
.fm-pod-progress-fill::after {
    content:''; position:absolute; right:-6px; top:50%;
    width:12px; height:12px; border-radius:50%;
    background:#fff; transform: translateY(-50%);
    box-shadow: 0 0 0 2px #E30613, 0 0 12px rgba(227,6,19,.7);
    opacity:0; transition: opacity .2s;
}
.fm-pod-progress:hover .fm-pod-progress-fill::after { opacity:1; }
.fm-pod-progress:hover { height: 6px; transition: height .15s; }

.fm-pod-btn {
    width:36px; height:36px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.85);
    transition: all .15s;
    border: none; cursor: pointer;
}
.fm-pod-btn:hover { background: rgba(255,255,255,.12); color:#fff; }
.fm-pod-btn-play {
    width:48px; height:48px;
    background: linear-gradient(135deg,#E30613 0%,#b30410 100%);
    color:#fff;
    box-shadow: 0 6px 20px rgba(227,6,19,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.fm-pod-btn-play:hover {
    transform: scale(1.06);
    background: linear-gradient(135deg,#ff1f30 0%,#c8102e 100%);
    box-shadow: 0 8px 24px rgba(227,6,19,.65), inset 0 1px 0 rgba(255,255,255,.25);
}

.fm-pod-art-glow {
    position:absolute; inset:-8px; border-radius:50%;
    background: radial-gradient(circle, rgba(227,6,19,.5), transparent 70%);
    filter: blur(8px); opacity:0; transition: opacity .4s;
    pointer-events: none; z-index:-1;
}
.fm-pod-vinyl.spinning + .fm-pod-art-glow,
.fm-pod-vinyl.spinning ~ .fm-pod-art-glow { opacity:.8; animation: fm-pod-pulse 2s ease-in-out infinite; }
@keyframes fm-pod-pulse { 0%,100%{opacity:.5;} 50%{opacity:.95;} }

/* Standard WordPress alignments + post body content basics */
.entry-content > * + * { margin-top: 1.25rem; }
.entry-content h2 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; }
.entry-content h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.entry-content p { line-height: 1.75; }
.entry-content a { color: #E30613; text-decoration: underline; }
.entry-content blockquote {
    border-left: 4px solid #E30613;
    padding-left: 1rem;
    font-style: italic;
    color: #94a3b8;
}
html:not(.dark) .entry-content blockquote { color: #475569; }
.entry-content img { max-width: 100%; height: auto; border-radius: 0.75rem; }

/* In-content GAM ad slots — keep collapsed if empty */
.fm-ad-slot { margin: 2rem 0; text-align: center; min-height: 1px; }
.fm-ad-slot[data-empty="true"] { display: none; }
.fm-ad-slot-label {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 1.5px;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Where to Watch + Results — competition filter checkbox.
   The checkbox itself is appearance-none + checked:bg-fm-red (Tailwind),
   which gives us a solid red square on select. We paint a white check
   glyph on top via a tiny inline SVG so the selected state reads "on"
   rather than just "filled". Selector is scoped via data-attr to avoid
   touching any other checkbox in the theme. */
input[data-w2w-comp-toggle]:checked,
input[data-results-comp-toggle]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 5'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 75%;
}

/* Responsive helpers */
@media (max-width: 767px) {
    .video-container { border-radius: 0.5rem; }
    .fm-pod-dock .fm-pod-vinyl { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------------ */
/* Results page — status pills (live / finished / upcoming / warn).   */
/* ------------------------------------------------------------------ */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.status-pill-upcoming {
    background: #f1f5f9;
    color: #475569;
}
.dark .status-pill-upcoming {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}

.status-pill-finished {
    background: #e2e8f0;
    color: #334155;
}
.dark .status-pill-finished {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.status-pill-live {
    background: #E30613;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.15);
}

.status-pill-warn {
    background: #fef3c7;
    color: #92400e;
}
.dark .status-pill-warn {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.status-pill .status-dot {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: fm-results-live-pulse 1.4s ease-out infinite;
}

@keyframes fm-results-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65); }
    70%  { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .status-pill .status-dot { animation: none; }
}

/* Hide a date group / comp card when JS toggles .hidden — Tailwind .hidden
   already does this, but we declare it explicitly so the page degrades
   even if Tailwind's preflight is overridden. */
[data-results-match].hidden,
[data-results-comp-card].hidden,
[data-results-date-group].hidden { display: none !important; }

/* === WC COUNTDOWN ====================================================
 * Full-bleed dark band counting down to FIFA World Cup 2026 kickoff.
 * Self-contained — only depends on .heading-condensed, .metric-value,
 * and the --red token already declared at the top of this file.
 * ==================================================================== */
.fm-wc-countdown {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 85% 20%, rgba(227, 6, 19, 0.32) 0%, rgba(227, 6, 19, 0) 65%),
        radial-gradient(ellipse 60% 80% at 10% 90%, rgba(227, 6, 19, 0.18) 0%, rgba(227, 6, 19, 0) 60%),
        linear-gradient(180deg, #050709 0%, #0a0e12 50%, #050709 100%);
    border-bottom: 1px solid rgba(227, 6, 19, 0.25);
}
html:not(.dark) .fm-wc-countdown {
    /* Stays dark in light mode — section is meant to feel like a stadium tunnel. */
    background:
        radial-gradient(ellipse 80% 60% at 85% 20%, rgba(227, 6, 19, 0.42) 0%, rgba(227, 6, 19, 0) 65%),
        radial-gradient(ellipse 60% 80% at 10% 90%, rgba(227, 6, 19, 0.24) 0%, rgba(227, 6, 19, 0) 60%),
        linear-gradient(180deg, #0a0e12 0%, #11151a 50%, #0a0e12 100%);
}

/* Animated red glow behind the digits. */
.fm-wc-countdown__bg {
    position: absolute;
    inset: -10% -5%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 75% 50%, rgba(227, 6, 19, 0.28) 0%, transparent 45%);
    filter: blur(60px);
    animation: fm-wc-glow 9s ease-in-out infinite;
}
@keyframes fm-wc-glow {
    0%, 100% { opacity: 0.55; transform: translate3d(0, 0, 0); }
    50%      { opacity: 0.95; transform: translate3d(0, -6px, 0); }
}

/* Faint engineering grid underlay. */
.fm-wc-countdown__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 60% 90% at 50% 50%, #000 35%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 60% 90% at 50% 50%, #000 35%, transparent 100%);
}

/* Pulsing live dot in the eyebrow. */
.fm-wc-pulse {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--red);
    box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.7);
    animation: fm-wc-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes fm-wc-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(227, 6, 19, 0); }
    100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0); }
}

/* Clock row. Sep characters absorb extra horizontal space so units stay
 * tightly grouped on wider viewports. */
.fm-wc-clock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: stretch;
}
@media (min-width: 640px) {
    .fm-wc-clock {
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
        gap: 0.75rem;
    }
}

.fm-wc-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.fm-wc-unit__face {
    position: relative;
    width: 100%;
    padding: 0.4rem 0.4rem;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(180deg, #11151a 0%, #0a0e12 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 24px -16px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(227, 6, 19, 0.04);
    overflow: hidden;
    text-align: center;
}
@media (min-width: 768px) {
    .fm-wc-unit__face { padding: 0.55rem 0.5rem; }
}

/* Subtle horizontal seam at the vertical midpoint — flip-clock visual reference. */
.fm-wc-unit__face::before {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    pointer-events: none;
}

.fm-wc-unit__digits {
    display: block;
    color: #ffffff;
    font-size: clamp( 1.35rem, 3.2vw, 2.1rem );
    line-height: 1;
    letter-spacing: -0.03em;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    text-shadow: 0 2px 14px rgba(227, 6, 19, 0.3);
}

.fm-wc-unit__label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #94a3b8;
}
@media (min-width: 768px) {
    .fm-wc-unit__label { font-size: 0.6rem; }
}

/* Colon separators — hidden on narrow widths where we use a 4-col grid. */
.fm-wc-sep {
    display: none;
    color: rgba(227, 6, 19, 0.55);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp( 1.1rem, 2.6vw, 1.6rem );
    align-self: center;
    line-height: 1;
    user-select: none;
    animation: fm-wc-sep-blink 1.4s steps(1, end) infinite;
}
@media (min-width: 640px) {
    .fm-wc-sep { display: block; }
}
@keyframes fm-wc-sep-blink {
    0%, 60%   { opacity: 0.85; }
    61%, 100% { opacity: 0.25; }
}

.fm-wc-clock.is-fired .fm-wc-unit__digits {
    color: var(--red);
    text-shadow: 0 0 30px rgba(227, 6, 19, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .fm-wc-countdown__bg,
    .fm-wc-pulse,
    .fm-wc-sep { animation: none; }
}

/* ------------------------------------------------------------------
 * Ad slots
 * Generic centering + per-slot min-heights so the slot reserves space
 * (and the page doesn't shift when an ad fills). When GAM is in test
 * mode every slot gets a sample Google creative; in production an
 * unfilled slot collapses via collapseEmptyDivs and the surrounding
 * layout closes up.
 * ------------------------------------------------------------------ */
.fm-ad-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.fm-ad-slot--fm_home_top,
.fm-ad-slot--fm_home_inrail_1,
.fm-ad-slot--fm_home_inrail_2,
.fm-ad-slot--fm_home_footer,
.fm-ad-slot--fm_article_top,
.fm-ad-slot--fm_article_below {
    min-height: 90px;
}
.fm-ad-slot--fm_home_adhesion,
.fm-ad-slot--fm_article_adhesion {
    min-height: 50px;
}
.fm-ad-slot--fm_home_hero_aside,
.fm-ad-slot--fm_article_side_1,
.fm-ad-slot--fm_archive_side_1 {
    width: 100%;
    max-width: 300px;
}
.fm-ad-slot iframe { display: block; margin: 0 auto; }

/* Local "TEST AD" placeholders rendered when fm_gam_test_mode is on.
 * Pure CSS — no external request, no consent surface, no fill-rate
 * dependency. Sized inline by render_placeholder() to match the slot's
 * largest registered dimensions so the layout matches production. */
.fm-ad-placeholder {
    background: repeating-linear-gradient(
        45deg,
        #f1f5f9,
        #f1f5f9 10px,
        #e2e8f0 10px,
        #e2e8f0 20px
    );
    border: 2px dashed #94a3b8;
    color: #475569;
    border-radius: 8px;
    box-sizing: border-box;
}
.fm-ad-placeholder__inner {
    text-align: center;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
}
.fm-ad-placeholder__label {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #334155;
}
.fm-ad-placeholder__size {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    color: #64748b;
}
.fm-ad-placeholder__slot {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.625rem;
    color: #94a3b8;
    word-break: break-all;
}
:is(.dark) .fm-ad-placeholder {
    background: repeating-linear-gradient(
        45deg,
        #1e293b,
        #1e293b 10px,
        #0f172a 10px,
        #0f172a 20px
    );
    border-color: #475569;
    color: #cbd5e1;
}
:is(.dark) .fm-ad-placeholder__label { color: #e2e8f0; }
:is(.dark) .fm-ad-placeholder__size { color: #94a3b8; }
:is(.dark) .fm-ad-placeholder__slot { color: #64748b; }

/* Responsive placeholders: when a slot has a sizeMapping (every slot below
 * the fold per the 2026-05 client direction), render_placeholder() emits
 * two stacked variants — mobile (300×250) and desktop (largest registered
 * size) — wrapped in .fm-ad-placeholder--responsive. The breakpoint here
 * mirrors GPT's sizeMapping threshold (768px) so the visual stand-in always
 * matches what googletag would request at runtime. The container itself
 * does NOT carry its own background — only the active viewport child does. */
.fm-ad-placeholder--responsive {
    background: none;
    border: 0;
    padding: 0;
    width: auto;
    height: auto;
    display: block;
}
.fm-ad-placeholder--responsive .fm-ad-placeholder__viewport {
    background: repeating-linear-gradient(
        45deg,
        #f1f5f9,
        #f1f5f9 10px,
        #e2e8f0 10px,
        #e2e8f0 20px
    );
    border: 2px dashed #94a3b8;
    color: #475569;
    border-radius: 8px;
    box-sizing: border-box;
    margin: 0 auto;
}
:is(.dark) .fm-ad-placeholder--responsive .fm-ad-placeholder__viewport {
    background: repeating-linear-gradient(
        45deg,
        #1e293b,
        #1e293b 10px,
        #0f172a 10px,
        #0f172a 20px
    );
    border-color: #475569;
    color: #cbd5e1;
}
.fm-ad-placeholder--responsive .fm-ad-placeholder__viewport--mobile { display: none; }
.fm-ad-placeholder--responsive .fm-ad-placeholder__viewport--desktop { display: flex; }
@media (max-width: 767px) {
    .fm-ad-placeholder--responsive .fm-ad-placeholder__viewport--mobile { display: flex; }
    .fm-ad-placeholder--responsive .fm-ad-placeholder__viewport--desktop { display: none; }
}

/* House ads: static client creatives served through the slot system while
 * GAM stays in placeholder mode (render_house_ad). Reuses the responsive
 * viewport swap above but drops the dashed "TEST AD" skin so only the image
 * shows. The 2x creatives are displayed at their 1x slot dimensions. */
.fm-ad-house .fm-ad-placeholder__viewport {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.fm-ad-house__link { display: block; }
.fm-ad-house img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Hero aside: real GAM slot. Reserve the half-page height so the card keeps
 * its shape; the slot fills with a live ad or collapses when unfilled. */
.fm-hero-aside__inner {
    min-height: 600px;
}

/* ============================================================
   Match Center (Por TV) — broadcaster chips + section visuals
   ============================================================ */

/* Broadcaster chip: logo or text fallback, slate background. */
.mc-broadcaster-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    min-height: 1.5rem;
}
.dark .mc-broadcaster-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Text-fallback chip label (used when no SVG logo ships for this broadcaster). */
.mc-broadcaster-chip__label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #475569;
    line-height: 1;
    white-space: nowrap;
}
.dark .mc-broadcaster-chip__label { color: #cbd5e1; }

/* "+N más" reveal pill. */
.mc-broadcaster-more {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #475569;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mc-broadcaster-more:hover {
    background: #E30613;
    color: #fff;
    border-color: #E30613;
}
.dark .mc-broadcaster-more {
    border-color: rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}

/* ---------- Odds chips (DraftKings moneyline + totals 2.5) ----------
   Rendered on upcoming match rows only. Dark square chips with a small
   header ("Home / Tie / Away / Goals") and the American price below. */
.mc-odds-group {
    display: inline-flex;
    align-items: stretch;
    gap: 0.25rem;
}
.mc-odds-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    padding: 0.3rem 0.5rem;
    background: #0f172a;            /* slate-900 */
    border: 1px solid #1e293b;      /* slate-800 */
    border-radius: 0.375rem;
    color: #f8fafc;                 /* slate-50  */
    line-height: 1;
    text-align: center;
}
.mc-odds-chip--wide { min-width: 4.5rem; }
.dark .mc-odds-chip {
    background: #020617;            /* slate-950 */
    border-color: rgba(255, 255, 255, 0.08);
}
.mc-odds-chip__head {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;                 /* slate-400 */
    margin-bottom: 0.2rem;
}
.mc-odds-chip__price {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #f8fafc;
}
.mc-odds-chip__price--stack {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.7rem;
}

/* Hide rows / cards / sections that the filter pass marks as hidden, even
   when Tailwind's display utilities aren't winning the cascade. */
[data-mc-match][data-mc-hidden] { display: none !important; }

/* =====================================================================
   MATCH CENTER — May 2026 mockup styles
   ===================================================================== */

/* ---------- Filter bar ---------- */
.mc-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.75rem;
    position: sticky;
    top: 4rem;
    z-index: 20;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.dark .mc-filter-bar {
    background: #0f172a;
    border-color: rgba(255,255,255,0.08);
}
@media (min-width: 768px) {
    .mc-filter-bar {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1rem;
    }
}
.mc-filter-bar__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}
.mc-filter-bar__search-icon {
    position: absolute;
    left: 0.875rem;
    width: 1rem;
    height: 1rem;
    color: #94a3b8;
    pointer-events: none;
}
.mc-filter-bar__input {
    width: 100%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 0.55rem 2.5rem 0.55rem 2.25rem;
    font-size: 0.875rem;
    color: #0f172a;
}
.mc-filter-bar__input::placeholder { color: #64748b; }
.mc-filter-bar__input:focus {
    outline: none;
    border-color: #dc2626;
}
.dark .mc-filter-bar__input {
    background: rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.08);
    color: #ffffff;
}
.dark .mc-filter-bar__input::placeholder { color: rgba(255,255,255,0.5); }
.mc-filter-bar__sliders {
    position: absolute;
    right: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    color: #475569;
    background: transparent;
}
.mc-filter-bar__sliders:hover { background: #e2e8f0; }
.dark .mc-filter-bar__sliders { color: #cbd5e1; }
.dark .mc-filter-bar__sliders:hover { background: rgba(255,255,255,0.08); }
.mc-filter-bar__sliders svg { width: 1.125rem; height: 1.125rem; }
@media (min-width: 768px) {
    .mc-filter-bar__sliders { display: none; }
}
.mc-filter-bar__chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mc-filter-bar__chips::-webkit-scrollbar { display: none; }
.mc-filter-bar__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    transition: background-color 120ms, color 120ms, border-color 120ms;
}
.dark .mc-filter-bar__chip {
    border-color: rgba(255,255,255,0.12);
    color: #cbd5e1;
}
.mc-filter-bar__chip:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.dark .mc-filter-bar__chip:hover {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
}
.mc-filter-bar__chip.is-active {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}
.mc-filter-bar__chip.is-active:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* ---------- Section heading (LIVE / PRÓXIMOS / RESULTADOS) ---------- */
.mc-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.mc-section-head__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f172a;
}
.dark .mc-section-head__title { color: #ffffff; }
.mc-section-head__title.text-fm-red { color: #dc2626; }
.mc-section-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}
.mc-section-head__icon svg { width: 100%; height: 100%; }
.mc-section-head__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
}
.mc-section-head__link:hover { color: #dc2626; }
.dark .mc-section-head__link { color: #94a3b8; }
.dark .mc-section-head__link:hover { color: #ef4444; }

/* ---------- Date group wrapper (each date in upcoming / finished) ---------- */
.mc-date-group { display: block; }
.mc-date-group + .mc-date-group { margin-top: 0.75rem; }

/* ---------- Competition card (date strip + comp logo + rows) ---------- */
.mc-comp-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    overflow: hidden;
}
.dark .mc-comp-card {
    background: #0f172a;
    border-color: rgba(255,255,255,0.08);
}
.mc-comp-card + .mc-comp-card { margin-top: 0.5rem; }
.mc-comp-card--live { border-color: rgba(220,38,38,0.4); }
.dark .mc-comp-card--live { border-color: rgba(239,68,68,0.4); }

.mc-comp-card__strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.dark .mc-comp-card__strip {
    background: rgba(255,255,255,0.02);
    border-bottom-color: rgba(255,255,255,0.06);
}
.mc-comp-card__date {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #334155;
}
.dark .mc-comp-card__date { color: #e2e8f0; }
.mc-comp-card__comp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.mc-comp-card__logo {
    width: 1.125rem;
    height: 1.125rem;
    object-fit: contain;
    flex-shrink: 0;
}
.mc-comp-card__label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .mc-comp-card__label { color: #cbd5e1; }
.mc-comp-card__rows {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ---------- Match row (live / upcoming / finished) ---------- */
.mc-row {
    border-bottom: 1px solid #f1f5f9;
}
.dark .mc-row { border-bottom-color: rgba(255,255,255,0.04); }
.mc-row:last-child { border-bottom: none; }

/* Desktop layout — May 2026 mockup style: fixed LEFT-aligned team columns.
   Every column has a fixed width so teams pin to identical x-positions on
   every row regardless of what extras (odds + broadcasters) carry.
   Layout: time | home(fixed) | vs(fixed) | away(fixed) | 1fr-spacer | extras | chevron
   Team columns are FIXED widths (not 1fr), so empty extras can't redistribute
   space to grow the team columns and shift the cluster. The 1fr spacer
   absorbs all leftover width and pushes extras+chevron to the right edge. */
.mc-row__inner {
    display: grid;
    grid-template-columns:
        3.25rem     /* time pill */
        9rem        /* home — logo + name, left-aligned, fixed */
        1.75rem     /* vs/score */
        9rem        /* away — logo + name, left-aligned, fixed */
        1fr         /* flexible spacer — absorbs leftover row width */
        auto;       /* extras (odds + broadcasters) */
    grid-template-areas: "time home score away . extras";
    align-items: center;
    column-gap: 0.625rem;
    row-gap: 0.375rem;
    padding: 0.75rem 0.875rem;
}
.mc-row__time     { grid-area: time;    }
.mc-row__home     { grid-area: home;    }
.mc-row__score    { grid-area: score;   }
.mc-row__away     { grid-area: away;    }
.mc-row__extras   { grid-area: extras;  }

@media (min-width: 768px) {
    .mc-row__inner {
        column-gap: 0.875rem;
        padding: 0.875rem 1.25rem;
        grid-template-columns:
            3.5rem
            minmax(0, 13rem)  /* home — caps at 13rem, shrinks (name ellipsizes) under pressure */
            2rem
            minmax(0, 13rem)  /* away */
            minmax(0, 1fr)    /* spacer collapses first so odds never overflow the card */
            auto;
    }
}

/* Mobile (<768px): no room for flexible spacers — teams take the full row 1
   width with minmax(0,1fr) and the home/away cluster around "vs" via
   justify-content rules below. Extras wraps to row 2 so chip pressure never
   collapses team names. Chevron stays pinned to the right of row 1. */
@media (max-width: 767px) {
    .mc-row__inner {
        grid-template-areas:
            "time home  score away"
            "time extras extras extras";
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);
    }
    .mc-row__extras:empty { display: none; }
    .mc-row__extras {
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 100%;
    }
}

/* ---- Time column ---- */
.mc-row__time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    min-width: 3rem;
}
.mc-row__time-top {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.dark .mc-row__time-top { color: #ffffff; }
.mc-row__time-sub {
    margin-top: 0.125rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}
.dark .mc-row__time-sub { color: #64748b; }

.mc-row__time-top--live {
    color: #dc2626;
}
.dark .mc-row__time-top--live { color: #ef4444; }
.mc-row__time-sub--live {
    color: #dc2626;
}
.dark .mc-row__time-sub--live { color: #ef4444; }

.mc-row__time-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}
.mc-row__time-pill--final {
    background: #f1f5f9;
    color: #475569;
}
.dark .mc-row__time-pill--final {
    background: rgba(255,255,255,0.06);
    color: #cbd5e1;
}
.mc-row__time-pill--warn {
    background: #fef3c7;
    color: #92400e;
}
.dark .mc-row__time-pill--warn {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
}

/* ---- Team columns ----
   Mockup style: logo + name left-aligned in a fixed-width column. The
   column doesn't flex with content, so teams pin to identical x-positions
   on every row. Long names ellipsis. */
.mc-row__home, .mc-row__away {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    justify-content: flex-start;
}
.mc-row__logo {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .mc-row__logo { width: 1.75rem; height: 1.75rem; }
}
.mc-row__name {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Score / vs ---- */
.mc-row__score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 2.5rem;
    font-variant-numeric: tabular-nums;
}
.mc-row__score-num {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}
.mc-row__score-dash {
    color: #94a3b8;
    font-weight: 600;
}
.mc-row__vs {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: lowercase;
}
.dark .mc-row__vs { color: #64748b; }

/* ---- Right block ----
   The outer .mc-row__inner grid places extras in an `auto`-sized column
   right before the chevron, with a 1fr spacer absorbing leftover width so
   extras hugs the right edge. Inside extras we use simple inline-flex so
   odds + broadcasters sit next to each other, gap-separated, just like the
   May 2026 mockup. No sub-grid needed because the outer team columns are
   fixed-width — empty extras doesn't shift team positions. */
.mc-row__extras {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    justify-self: end;
}
.mc-row__broadcasters {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: nowrap;
}
.mc-row__overflow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0 1rem 0.75rem;
}
.mc-row__overflow.hidden { display: none; }

/* ---- Inline odds (mockup style: flat label + price pairs, no box) ---- */
.mc-odds-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    white-space: nowrap;
}
.mc-odds-inline__pair {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3125rem;
    font-size: 0.8rem;
    line-height: 1;
}
.mc-odds-inline__label {
    font-weight: 500;
    color: #94a3b8;
}
.dark .mc-odds-inline__label { color: #64748b; }
.mc-odds-inline__price {
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.dark .mc-odds-inline__price { color: #ffffff; }

/* Mobile keeps the odds visible — they wrap to row 2 of the row grid
   alongside the broadcaster chip(s), so team names retain their full
   first-row width budget. */

/* ---------- Sidebar competitions filter ---------- */
.mc-sidebar-comps {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1rem 1.125rem;
}
.dark .mc-sidebar-comps {
    background: #0f172a;
    border-color: rgba(255,255,255,0.08);
}
.mc-sidebar-comps__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.mc-sidebar-comps__title {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f172a;
    margin: 0;
}
.dark .mc-sidebar-comps__title { color: #ffffff; }
.mc-sidebar-comps__edit {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #dc2626;
    background: transparent;
}
.mc-sidebar-comps__edit:hover { text-decoration: underline; }
.dark .mc-sidebar-comps__edit { color: #ef4444; }

.mc-sidebar-comps__list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 28rem;
    overflow-y: auto;
}
.mc-sidebar-comps__item + .mc-sidebar-comps__item {
    border-top: 1px solid #f1f5f9;
}
.dark .mc-sidebar-comps__item + .mc-sidebar-comps__item {
    border-top-color: rgba(255,255,255,0.04);
}
.mc-sidebar-comps__row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0;
    cursor: pointer;
}
.mc-sidebar-comps__check {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid #cbd5e1;
    border-radius: 0.25rem;
    background: transparent;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: background-color 100ms, border-color 100ms;
}
.dark .mc-sidebar-comps__check { border-color: #475569; }
.mc-sidebar-comps__check:checked {
    background: #dc2626;
    border-color: #dc2626;
}
.mc-sidebar-comps__check:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: -1px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.mc-sidebar-comps__logo {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mc-sidebar-comps__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Soccer-ball fallback shown when a competition logo is missing (e.g. the
   World Cup, which has no CDN crest). Revealed by the img onerror handler. */
.mc-sidebar-comps__logo-fallback {
    display: none;
    font-size: 0.8rem;
    color: #64748b;
}
.mc-sidebar-comps__logo.is-fallback .mc-sidebar-comps__logo-fallback {
    display: inline-flex;
}
.dark .mc-sidebar-comps__logo-fallback { color: #475569; }
.dark .mc-sidebar-comps__logo {
    background: #f1ece2;
    padding: 0.125rem;
    border-radius: 0.25rem;
}
.mc-sidebar-comps__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.825rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .mc-sidebar-comps__name { color: #e2e8f0; }
.mc-sidebar-comps__count {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.mc-sidebar-comps__foot {
    margin-top: 0.75rem;
    text-align: center;
}
.mc-sidebar-comps__view-all {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #dc2626;
    text-decoration: none;
}
.mc-sidebar-comps__view-all:hover { text-decoration: underline; }
.dark .mc-sidebar-comps__view-all { color: #ef4444; }