/* ============================================================================
   Matches Page Card Redesign (mc-v2)
   ----------------------------------------------------------------------------
   Sits as a modifier on top of the existing .event-card and .live-match-card
   so we keep IntersectionObserver hooks (.event-card.visible) and the live
   grid layout, but completely replace the inner DOM + visuals.

   Design highlights (per esports HOD reference):
   - Adaptive Neutral game tile background (works in both light/dark themes).
   - Tournament logo + name + status badge on a single header row.
   - LIVE pip with pulsing dot in the top-right corner for live matches.
   - Centered horizontal team layout with score / VS pill.
   - Footer row: Best of N · Round chip · Watch Live / Replay CTA.
   - Falcons-green highlight on Falcons team name.
   - Mobile: vertical stack mirroring the phone mockup.
   - RTL flip for /matches-ar.html.
   ============================================================================ */

/* ---------- Adaptive Neutral palette ----------------------------------- */
.mc-v2 {
    --mcr-card-bg: var(--card-bg, #122126);
    --mcr-card-border: rgba(255, 255, 255, 0.08);
    --mcr-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    --mcr-tile-bg: rgba(255, 255, 255, 0.04);
    --mcr-tile-border: rgba(255, 255, 255, 0.08);
    --mcr-text: var(--text-color, #ffffff);
    --mcr-text-muted: rgba(255, 255, 255, 0.65);
    --mcr-text-faint: rgba(255, 255, 255, 0.45);
    --mcr-divider: rgba(255, 255, 255, 0.08);
    --mcr-chip-bg: rgba(255, 255, 255, 0.05);
    --mcr-falcons: #01BE6E;
    --mcr-falcons-soft: rgba(1, 190, 110, 0.12);
    --mcr-live: #ff3b3b;
    --mcr-live-soft: rgba(255, 59, 59, 0.12);
}

[data-theme="light"] .mc-v2 {
    --mcr-card-bg: #ffffff;
    --mcr-card-border: rgba(15, 23, 42, 0.08);
    --mcr-card-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    --mcr-tile-bg: rgba(15, 23, 42, 0.04);
    --mcr-tile-border: rgba(15, 23, 42, 0.08);
    --mcr-text: #0f172a;
    --mcr-text-muted: rgba(15, 23, 42, 0.65);
    --mcr-text-faint: rgba(15, 23, 42, 0.45);
    --mcr-divider: rgba(15, 23, 42, 0.08);
    --mcr-chip-bg: rgba(15, 23, 42, 0.04);
}

/* ---------- Outer card override ---------------------------------------- */
/* The card is a vertical flex stack:
     [.mcr__top-section]  ── ~70% visual weight, contains game tile + main
     [.mcr__footer]       ── ~30%, full-width with a divider that runs edge-to-edge
   Padding lives on the top-section and footer (NOT the card), so the
   divider and footer chips can extend to the very edges of the card. */
.event-card.mc-v2,
.live-match-card.mc-v2 {
    background: var(--mcr-card-bg);
    border: 1px solid var(--mcr-card-border);
    box-shadow: var(--mcr-card-shadow);
    border-radius: 16px;
    padding: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 0;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    margin: 0;
}

.event-card.mc-v2:hover,
.live-match-card.mc-v2:hover {
    transform: translateY(-2px);
    border-color: rgba(1, 190, 110, 0.45);
    box-shadow: 0 12px 32px rgba(1, 190, 110, 0.18);
}

/* Knock out legacy event-card heavy borders / left bars / opacity.
   Use !important because matches.css applies a 2px green border on
   .event-card:not(.ewc-match-card) which would otherwise override our
   subtle adaptive-neutral border. */
.event-card.mc-v2.past-event,
.event-card.mc-v2.upcoming-event,
.event-card.mc-v2.live-match,
.event-card.mc-v2:not(.ewc-match-card) {
    border: 1px solid var(--mcr-card-border) !important;
    box-shadow: var(--mcr-card-shadow) !important;
    opacity: 1;
}

.event-card.mc-v2.past-event {
    opacity: 0.92;
}

/* Subtle accent bar for state — kept inside the card so the border stays clean */
.event-card.mc-v2::before,
.live-match-card.mc-v2::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: var(--mcr-falcons);
    opacity: 0.0;
    transition: opacity 0.18s ease;
}
.event-card.mc-v2.upcoming-event::before { opacity: 0.6; background: var(--mcr-falcons); }
.event-card.mc-v2.live-event::before,
.event-card.mc-v2.live-match::before,
.live-match-card.mc-v2::before { opacity: 0.85; background: var(--mcr-live); }
.event-card.mc-v2.past-event::before { opacity: 0.4; background: var(--mcr-text-faint); }

/* ---------- Top section (game tile + main) ----------------------------- */
/* This is the upper ~70% of the card. The game tile sits in the TOP-LEFT
   corner aligned with .mcr__title-row; the rest of the row holds the main
   content column.

   align-items: center keeps team logos comfortably away from the divider.
   We also pin a min-height so short cards (no countdown chip, no round
   chip) still look balanced and never clip team logos at the bottom. */
.mc-v2 .mcr__top-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.1rem;
    padding: 1.4rem 1.5rem 1.4rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 116px;
}

/* ---------- Adaptive Neutral game tile (top-left corner) --------------- */
.mc-v2 .mcr__game-tile {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--mcr-tile-bg);
    border: 1px solid var(--mcr-tile-border);
    display: grid;
    place-items: center;
    padding: 10px;
    /* Sit at the TOP so the tile aligns with the title row above the meta. */
    align-self: flex-start;
    box-sizing: border-box;
}
.mc-v2 .mcr__game-tile img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* ---------- Per-game adaptive tile background -------------------------- */
/* Games with dark/black logos need a light tile in dark mode; otherwise the
   logo is invisible. We keep it light in both themes so it always reads as
   a "logo card" and the brand glyph stays legible. */
.mc-v2[data-game="callofduty"] .mcr__game-tile,
.mc-v2[data-game="counterstrike"] .mcr__game-tile,
.mc-v2[data-game="cs2"] .mcr__game-tile,
.mc-v2[data-game="apexlegends"] .mcr__game-tile,
.mc-v2[data-game="valorant"] .mcr__game-tile {
    background: #f6f7f9;
    border-color: rgba(0, 0, 0, 0.10);
}

/* Optional accent tints per game so cards still feel branded, while keeping
   the body of the tile high-contrast. Adjust these as design refines them. */
.mc-v2[data-game="rocketleague"] .mcr__game-tile {
    background: linear-gradient(135deg, rgba(33, 100, 200, 0.14), rgba(33, 100, 200, 0.06));
    border-color: rgba(33, 100, 200, 0.2);
}
.mc-v2[data-game="mobilelegends"] .mcr__game-tile,
.mc-v2[data-game="mlbb"] .mcr__game-tile {
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.16), rgba(255, 153, 0, 0.06));
    border-color: rgba(255, 153, 0, 0.22);
}
.mc-v2[data-game="overwatch"] .mcr__game-tile {
    background: linear-gradient(135deg, rgba(243, 145, 30, 0.16), rgba(243, 145, 30, 0.06));
    border-color: rgba(243, 145, 30, 0.22);
}
.mc-v2[data-game="rainbowsix"] .mcr__game-tile {
    background: linear-gradient(135deg, rgba(255, 200, 0, 0.14), rgba(0, 0, 0, 0.06));
    border-color: rgba(255, 200, 0, 0.22);
}

/* ---------- Page-level grid override ---------------------------------- */
/* matches.css gives `.matches-cards-grid` a `repeat(auto-fit, minmax(400px, 1fr))`
   which puts cards in 2 columns at desktop widths and squeezes our redesigned
   layout. Per the HOD reference, each card is full-width / one-per-row. */
.matches-cards-grid:has(.mc-v2),
.matches-grid:has(.mc-v2) {
    grid-template-columns: 1fr !important;
}

/* ---------- Main content column (flex, NOT grid) ----------------------- */
/* Lives inside .mcr__top-section, beside the game tile. Holds .mcr__top
   (head + match line). The footer is NOT inside .mcr__main any more —
   it's a sibling of .mcr__top-section so the divider runs edge-to-edge. */
.mc-v2 .mcr__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.mc-v2 .mcr__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-width: 0;
}
.mc-v2 .mcr__head {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.mc-v2 .mcr__match {
    flex: 0 0 auto;
}

/* ---------- Title row -------------------------------------------------- */
.mc-v2 .mcr__title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    min-width: 0;
}
.mc-v2 .mcr__title-area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    min-width: 0;
}
.mc-v2 .mcr__title {
    color: var(--mcr-text);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.mc-v2 .mcr__status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    /* Per HOD note: status badge keeps its tinted background but drops the
       bold weight so it reads as a label, not a shout. */
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
    border: 1px solid transparent;
}
/* Both the legacy compact-card status name (`upcoming-event`) and the
   v2 short name (`upcoming`) get a tinted Falcons-green background so the
   chip is always readable, never a transparent floating word. */
.mc-v2 .mcr__status-badge--upcoming,
.mc-v2 .mcr__status-badge--upcoming-event {
    background: var(--mcr-falcons-soft);
    color: var(--mcr-falcons);
    border-color: rgba(1, 190, 110, 0.25);
}
.mc-v2 .mcr__status-badge--live-event,
.mc-v2 .mcr__status-badge--live {
    background: var(--mcr-live-soft);
    color: var(--mcr-live);
    border-color: rgba(255, 59, 59, 0.25);
}
.mc-v2 .mcr__status-badge--past-event,
.mc-v2 .mcr__status-badge--completed {
    background: rgba(255, 255, 255, 0.08);
    color: var(--mcr-text-muted);
    border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="light"] .mc-v2 .mcr__status-badge--past-event,
[data-theme="light"] .mc-v2 .mcr__status-badge--completed {
    background: rgba(15, 23, 42, 0.07);
    border-color: rgba(15, 23, 42, 0.10);
}

/* ---------- LIVE pip (top-right pulse, absolute-positioned) ------------ */
/* Sits in the top-right corner of the card so it's always visible regardless
   of the grid layout below. */
.mc-v2 .mcr__live-pip {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: var(--mcr-live-soft);
    color: var(--mcr-live);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
}
[dir="rtl"] .mc-v2 .mcr__live-pip {
    right: auto;
    left: 0.85rem;
}
/* When a LIVE pip is present, give the title-row some right-side breathing
   room so it can never collide with the pip on narrow / mobile widths. */
.mc-v2:has(.mcr__live-pip) .mcr__title-row {
    padding-right: 4.5rem;
}
[dir="rtl"] .mc-v2:has(.mcr__live-pip) .mcr__title-row {
    padding-right: 0;
    padding-left: 4.5rem;
}
.mc-v2 .mcr__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mcr-live);
    box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6);
    animation: mcr-pulse 1.6s ease-out infinite;
}
@keyframes mcr-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 59, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}

/* ---------- Meta row (time / countdown) -------------------------------- */
.mc-v2 .mcr__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    color: var(--mcr-text-muted);
    font-size: 0.9rem;
}
.mc-v2 .mcr__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1;
}
.mc-v2 .mcr__meta-item small {
    color: var(--mcr-text-faint);
    font-size: 0.78rem;
    font-weight: 600;
    margin-left: 0.05rem;
}
.mc-v2 .mcr__meta-item i {
    color: var(--mcr-text-faint);
    font-size: 0.85rem;
    width: 1em;
    text-align: center;
}
.mc-v2 .mcr__meta-sep {
    color: var(--mcr-text-faint);
}
.mc-v2 .mcr__countdown {
    color: var(--mcr-text);
    font-weight: 600;
}

/* ---------- Match line: teams + score ---------------------------------- */
/* Sits on the right of .mcr__top on desktop. Teams + center are centered as
   a unit so the trio always reads as "logo · NAME · VS · NAME · logo" with
   even visual weight on either side of the center pill. Vertical padding
   gives team logos breathing room above the divider. */
.mc-v2 .mcr__match {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 0;
    min-width: 0;
    flex: 0 0 auto;
}
/* Make sure the right-hand team mirrors the left so logos sit on the
   outside edges and names lean toward the center pill. */
.mc-v2 .mcr__team--left {
    flex-direction: row;
    text-align: right;
}
.mc-v2 .mcr__team--right {
    flex-direction: row-reverse;
    text-align: left;
}
.mc-v2 .mcr__team {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 220px;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    /* No overflow:hidden here — team-name has its own ellipsis rules; we
       don't want to clip the logo if it has any horizontal/vertical halo. */
}
.mc-v2 .mcr__team-logo {
    width: 52px;
    height: 52px;
    /* Per HOD note: no background / border — logos sit on the card directly.
       overflow:visible (no hidden) so any image with a transparent halo or
       slight horizontal extent isn't visually clipped — the 52px box is the
       layout footprint, not a hard mask. */
    background: transparent;
    border: none;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    overflow: visible;
    padding: 0;
    box-sizing: border-box;
}
.mc-v2 .mcr__team-logo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.mc-v2 .mcr__team-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mcr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
/* Per HOD note: Falcons team name should stay in the body text colour
   (white in dark, near-black in light) — NOT green. */
.mc-v2 .mcr__team.is-falcons .mcr__team-name {
    color: var(--mcr-text);
}

/* ---------- Center: VS / score ----------------------------------------- */
.mc-v2 .mcr__center {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 60px;
}
/* Per HOD note: VS is plain text — no pill background, no border. */
.mc-v2 .mcr__vs {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mcr-text-faint);
    letter-spacing: 0.12em;
    padding: 0;
    background: transparent;
    border: none;
}
.mc-v2 .mcr__score {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-variant-numeric: tabular-nums;
}
.mc-v2 .mcr__score-num {
    font-size: 1.8rem;
    font-weight: 800;
    /* Default scores are dimmed; the winner gets the brand green via .is-win. */
    color: var(--mcr-text-muted);
    line-height: 1;
}
.mc-v2 .mcr__score-num.is-win {
    color: var(--mcr-falcons);
}
.mc-v2 .mcr__score-dash {
    color: var(--mcr-text-faint);
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0 0.25rem;
}

/* ---------- Footer row (sibling of .mcr__top-section) ------------------ */
/* The footer is now a direct child of the card so the top-border runs the
   FULL width of the card edge-to-edge. We give it ~30% visual weight via a
   generous min-height + padding while .mcr__top-section claims the rest. */
.mc-v2 .mcr__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.95rem 1.5rem;
    border-top: 1px solid var(--mcr-divider);
    margin-top: 0;
    min-height: 60px;
    flex: 0 0 auto;
    background: var(--mcr-footer-bg, transparent);
}
.mc-v2 .mcr__footer-meta { flex: 1 1 auto; }
.mc-v2 .mcr__footer .mcr__cta { flex: 0 0 auto; }
.mc-v2 .mcr__footer-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--mcr-text-muted);
    font-size: 0.88rem;
    min-width: 0;
}
.mc-v2 .mcr__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: var(--mcr-chip-bg);
    color: var(--mcr-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
}
.mc-v2 .mcr__chip i {
    font-size: 0.78rem;
    color: var(--mcr-text-faint);
}
.mc-v2 .mcr__chip--game i { color: var(--mcr-falcons); }
.mc-v2 .mcr__chip--round i { color: var(--mcr-falcons); }
.mc-v2 .mcr__chip-sep {
    color: var(--mcr-text-faint);
    margin: 0 0.15rem;
}

/* ---------- CTA (Watch Live / Watch Replay) ---------------------------- */
.mc-v2 .mcr__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    background: transparent;
    color: var(--mcr-falcons);
    border: 1px solid rgba(1, 190, 110, 0.4);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.mc-v2 .mcr__cta:hover {
    background: var(--mcr-falcons);
    color: #ffffff;
    border-color: var(--mcr-falcons);
    transform: translateY(-1px);
}
.mc-v2 .mcr__cta-ext {
    font-size: 0.7rem;
    opacity: 0.75;
}
.mc-v2 .mcr__cta.is-live {
    background: var(--mcr-live-soft);
    border-color: rgba(255, 59, 59, 0.35);
    color: var(--mcr-live);
}
.mc-v2 .mcr__cta.is-live:hover {
    background: var(--mcr-live);
    color: #ffffff;
    border-color: var(--mcr-live);
}

/* ---------- Live match cards: always vertical stack ------------------- */
/* Live cards live in `.live-matches-grid` which uses
   `repeat(auto-fit, minmax(340px, 560px))` — they're capped at ~560px
   wide on every viewport, including desktop. The default horizontal
   head/match flex layout (`.mcr__top` is `flex-direction: row`) gets
   crushed at that width: the tournament title wraps to 3 lines, the
   meta info collides with the team logos, and the LIVE pip overlaps
   the title row. Force the same stacked layout the mobile breakpoint
   uses so live cards render cleanly at any viewport size. */
.live-match-card.mc-v2 .mcr__top {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
}
.live-match-card.mc-v2 .mcr__match {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0;
}
.live-match-card.mc-v2 .mcr__team,
.live-match-card.mc-v2 .mcr__team--left,
.live-match-card.mc-v2 .mcr__team--right {
    flex: 0 1 36%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    max-width: 36%;
}
.live-match-card.mc-v2 .mcr__team-name {
    white-space: normal;
}
.live-match-card.mc-v2 .mcr__center {
    min-width: 64px;
    flex: 0 0 auto;
}

/* ---------- Mobile: ≤ 768px (per phone reference) ---------------------- */
@media (max-width: 768px) {
    .event-card.mc-v2,
    .live-match-card.mc-v2 {
        padding: 0;
        gap: 0;
        border-radius: 14px;
    }
    .mc-v2 .mcr__top-section {
        padding: 0.95rem 1rem 0.95rem;
        gap: 0.85rem;
        min-height: 0;
        align-items: flex-start;
    }
    .mc-v2 .mcr__footer { padding: 0.85rem 1rem; }
    .mc-v2 .mcr__game-tile {
        width: 48px;
        height: 48px;
        padding: 7px;
        border-radius: 10px;
    }
    .mc-v2 .mcr__team-logo {
        width: 56px;
        height: 56px;
    }
    /* Mobile: collapse .mcr__top to a vertical stack so head sits on top
       of teams, exactly like the phone reference mockup. */
    .mc-v2 .mcr__top {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
    .mc-v2 .mcr__head { gap: 0.4rem; }
    .mc-v2 .mcr__title { font-size: 1rem; }
    /* Mobile mockup: teams + center stay on a single row, centered as a
       group, with each team a vertical stack of [logo][name] so they read
       like the phone screenshot. */
    .mc-v2 .mcr__match {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.85rem;
        padding: 0.4rem 0;
    }
    .mc-v2 .mcr__team,
    .mc-v2 .mcr__team--left,
    .mc-v2 .mcr__team--right {
        flex: 0 1 36%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.5rem;
        max-width: 36%;
    }
    .mc-v2 .mcr__team-name {
        font-size: 0.92rem;
        white-space: normal;
    }
    .mc-v2 .mcr__center {
        min-width: 64px;
        flex: 0 0 auto;
    }
    .mc-v2 .mcr__vs {
        font-size: 1rem;
        padding: 0;
    }
    .mc-v2 .mcr__score-num { font-size: 1.5rem; }
    .mc-v2 .mcr__footer { gap: 0.6rem; padding-top: 0.7rem; }
    .mc-v2 .mcr__footer-meta { gap: 0.4rem; }
    .mc-v2 .mcr__chip {
        font-size: 0.78rem;
        padding: 0.28rem 0.6rem;
    }
    .mc-v2 .mcr__cta {
        padding: 0.5rem 0.85rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .mc-v2 .mcr__live-pip {
        font-size: 0.68rem;
        padding: 0.22rem 0.5rem;
    }
    .mc-v2 .mcr__footer-meta { flex: 1 1 100%; }
    .mc-v2 .mcr__cta { width: 100%; justify-content: center; }
}

/* ---------- RTL (matches-ar.html) -------------------------------------- */
[dir="rtl"] .mc-v2 .mcr__team--left {
    flex-direction: row-reverse;
    text-align: right;
}
[dir="rtl"] .mc-v2 .mcr__team--right {
    flex-direction: row;
    text-align: left;
}
[dir="rtl"] .event-card.mc-v2::before,
[dir="rtl"] .live-match-card.mc-v2::before {
    left: auto;
    right: 0;
}

/* ---------- Animation entry (works with .event-card.visible) ---------- */
.event-card.mc-v2 {
    /* The legacy .event-card sets opacity:0 + translateY(20px) and adds
       .visible to fade in via IntersectionObserver. We keep that hook. */
}