/* ==========================================================================
   match.php — the modern skin (1 Oct 2026)
   --------------------------------------------------------------------------
   Printed by mb_open_match_shell() in match.php, after the theme stylesheet,
   and scoped to .benfica-layout.mm-page so it never reaches another page.

   Hands off, on purpose (Bruno's earlier calls):
     - the match hero (themes/default/components/hero.php .mh-themed),
     - the Tactical Formation pitch + Show Substitutions toggle (#match-tactical),
     - the Opening Squads rows, event icons and team tabs (#match-lineups).
   Nothing below selects inside those three.

   Same vocabulary as this week's redesigns (transfers.php .trf-tile,
   honours/record book): borderless cards, soft shadows, tinted icon chips,
   count-up numbers via bn-motion.js. Colours are theme tokens only.
   ========================================================================== */

.benfica-layout.mm-page {
    --mm-our: var(--theme-primary);
    --mm-our-rgb: var(--theme-primary-rgb);
    --mm-opp: color-mix(in oklab, var(--theme-ink-muted) 80%, var(--theme-ink));
    --mm-card-bg: var(--theme-surface);
    --mm-row-bg: var(--theme-surface-2);
    --mm-row-hover: color-mix(in oklab, var(--theme-primary) 5%, var(--theme-surface-2));
    --mm-soft-shadow: var(--elev-2);
    --mm-lift-shadow: var(--elev-3);
    --mm-radius: var(--theme-radius, 1rem);
}
/* Dark: the same neutral surface the sidebar panels use (.bn-panel → --bs-tertiary-bg),
   so the main column and the aside read as one set of cards. */
[data-bs-theme="dark"] .benfica-layout.mm-page {
    --mm-card-bg: var(--bs-tertiary-bg, var(--theme-surface-2));
    --mm-row-bg: color-mix(in oklab, var(--theme-ink) 7%, var(--mm-card-bg));
    --mm-row-hover: color-mix(in oklab, var(--theme-ink) 11%, var(--mm-card-bg));
}

/* ---- Shared: empty state ------------------------------------------------ */
.benfica-layout.mm-page .mm-empty {
    display: flex; align-items: center; gap: .7rem;
    padding: .8rem 1rem; border-radius: var(--mm-radius);
    background: var(--mm-card-bg); box-shadow: var(--mm-soft-shadow);
    color: var(--theme-ink-muted); font-size: .86rem; font-weight: 600;
}
.benfica-layout.mm-page .mm-empty-ico {
    flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: .75rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--theme-accent-rgb), .16); color: var(--theme-accent-700, var(--theme-accent));
}
[data-bs-theme="dark"] .benfica-layout.mm-page .mm-empty-ico { color: var(--theme-accent); }

/* ---- Status banner (postponed / abandoned / awarded / walkover) ---------
   The Bootstrap alert becomes a soft tinted card with an icon chip. The
   wording still comes from bnMatchStatusNotice() alone. */
.benfica-layout.mm-page .bn-match-status-banner {
    border: 0; border-radius: var(--mm-radius); padding: .75rem 1rem;
    box-shadow: var(--mm-soft-shadow); font-size: .9rem;
}
.benfica-layout.mm-page .bn-match-status-banner > i {
    flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: .75rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; background: color-mix(in oklab, currentColor 12%, transparent);
}

/* ---- Notices inside the tabs (login required, no votes yet, …) ----------- */
.benfica-layout.mm-page #match-tab-panel .alert {
    border: 0; border-radius: .9rem; box-shadow: none;
    border-left: 3px solid currentColor; font-size: .88rem;
}

/* ---- Goal Scorers -------------------------------------------------------
   Still no box around the section (Bruno, 27 Sep: "remove the wrap"); each
   team column gets a clean head with its count, every goal a soft row with
   the minute as a pill on the right. The phone team tabs are untouched. */
.benfica-layout.mm-page #match-goal-scorers .mm-gs-head {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .5rem; padding: .15rem .1rem .45rem;
    border-bottom: 1px solid var(--theme-border);
    font-size: .9rem; font-weight: 800; color: var(--theme-ink);
}
.benfica-layout.mm-page #match-goal-scorers .mm-gs-dot {
    flex: 0 0 auto; width: .6rem; height: .6rem; border-radius: 50%; background: var(--mm-opp);
}
.benfica-layout.mm-page #match-goal-scorers .mm-gs-dot--our {
    background: linear-gradient(135deg, var(--theme-gradient-start, var(--theme-primary)), var(--theme-gradient-end, var(--theme-primary)));
}
.benfica-layout.mm-page #match-goal-scorers .mm-gs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout.mm-page #match-goal-scorers .mm-gs-count {
    flex: 0 0 auto; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 900; font-variant-numeric: tabular-nums;
    background: rgba(var(--theme-success-rgb), .14); color: var(--theme-success-strong, var(--theme-success));
}
.benfica-layout.mm-page #match-goal-scorers .mm-gs-count.is-zero { background: var(--mm-row-bg); color: var(--theme-ink-faint); }
[data-bs-theme="dark"] .benfica-layout.mm-page #match-goal-scorers .mm-gs-count:not(.is-zero) { color: color-mix(in oklab, var(--theme-success) 70%, var(--theme-ink)); }

.benfica-layout.mm-page #match-goal-scorers .player-goal-list { display: grid; gap: .35rem; }
.benfica-layout.mm-page #match-goal-scorers .player-goal-list > li {
    display: flex; align-items: center; gap: .5rem; margin: 0 !important;
    padding: .4rem .55rem; border-radius: .75rem;
    background: var(--mm-row-bg); font-size: .9rem; font-weight: 600;
    transition: background-color var(--dur-base, .24s) ease;
}
.benfica-layout.mm-page #match-goal-scorers .player-goal-list > li:hover { background: var(--mm-row-hover); }
.benfica-layout.mm-page #match-goal-scorers .player-goal-list > li > .player-face-bubble { margin-right: 0 !important; flex: 0 0 auto; }
.benfica-layout.mm-page #match-goal-scorers .player-goal-list > li > span:not(.player-face-bubble):not(.mm-goal-min) { min-width: 0; }
.benfica-layout.mm-page #match-goal-scorers .player-goal-list a { color: var(--theme-ink); }
.benfica-layout.mm-page #match-goal-scorers .player-goal-list a:hover { color: var(--theme-link); }
.benfica-layout.mm-page #match-goal-scorers .player-goal-list .badge { font-size: .62rem; border-radius: .25rem; vertical-align: .1em; }
.benfica-layout.mm-page #match-goal-scorers .mm-goal-min {
    margin-left: auto; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .5rem; border-radius: 999px;
    font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums;
    background: var(--mm-card-bg); color: var(--theme-ink-muted);
    box-shadow: var(--elev-1);
}
.benfica-layout.mm-page #match-goal-scorers .mm-goal-min::before {
    content: "\f1e3"; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free"; font-weight: 900;
    font-size: .72rem; color: var(--theme-success);
}
.benfica-layout.mm-page #match-goal-scorers .player-goal-list > li.mm-gs-none {
    background: transparent; color: var(--theme-ink-faint); font-weight: 600; font-size: .84rem; padding-left: .2rem;
}
.benfica-layout.mm-page #match-goal-scorers .player-goal-list > li.mm-gs-none:hover { background: transparent; }

/* ---- Statistics ---------------------------------------------------------
   The dual bars keep their markup, script and count-up; the card loses its
   border, the rows breathe, the leader chip reads at a glance. */
.benfica-layout.mm-page #match-statistics .card { border: 0; box-shadow: var(--mm-soft-shadow); background: var(--mm-card-bg); }
.benfica-layout.mm-page #match-statistics .mss-stats-bars { padding: 1rem 1.1rem .8rem; }
.benfica-layout.mm-page #match-statistics .mss-stats-teams { font-size: .9rem; margin-bottom: .9rem; }
.benfica-layout.mm-page #match-statistics .mss-team-dot { width: .7rem; height: .7rem; }
.benfica-layout.mm-page #match-statistics .mss-pos { margin-bottom: 1.1rem; }
.benfica-layout.mm-page #match-statistics .mss-pos-track { height: 1.9rem; background: var(--mm-row-bg); }
.benfica-layout.mm-page #match-statistics .mss-pos-track .mss-pos-fill b { font-size: .82rem; }
.benfica-layout.mm-page #match-statistics .mss-pos-label { margin-top: .4rem; }
.benfica-layout.mm-page #match-statistics .mss-stat-row {
    gap: .7rem; margin: 0; padding: .42rem .4rem; border-radius: .7rem;
    transition: background-color var(--dur-base, .24s) ease;
}
.benfica-layout.mm-page #match-statistics .mss-stat-row:hover { background: var(--mm-row-bg); }
.benfica-layout.mm-page #match-statistics .mss-stat-value { min-width: 2.6rem; padding: .18rem .45rem; border-radius: .5rem; font-size: .84rem; }
.benfica-layout.mm-page #match-statistics .mss-stat-value:not(.mss-lead) { background: var(--mm-row-bg); }
/* The leader's chip keeps its team colour in both modes (the section's own dark rule
   came later in the cascade and greyed it out). */
.benfica-layout.mm-page #match-statistics .mss-stat-value.mss-lead { color: var(--theme-on-primary, #fff); background: linear-gradient(135deg, var(--theme-gradient-start, var(--theme-primary)), var(--theme-gradient-end, var(--theme-primary))); }
.benfica-layout.mm-page #match-statistics .mss-stat-value.mss-lead.mss-lead-opp { background: color-mix(in oklab, var(--theme-ink) 62%, var(--theme-draw)); }
[data-bs-theme="dark"] .benfica-layout.mm-page #match-statistics .mss-stat-value.mss-lead.mss-lead-opp { background: color-mix(in oklab, var(--theme-ink-faint) 75%, var(--theme-canvas)); }
.benfica-layout.mm-page #match-statistics .mss-stat-label { font-size: .68rem; color: var(--theme-ink-muted); }
.benfica-layout.mm-page #match-statistics .mss-stat-bar { height: .5rem; background: var(--mm-row-bg); }
.benfica-layout.mm-page #match-statistics .mss-stat-row:hover .mss-stat-bar { background: var(--mm-card-bg); }
@media (max-width: 575.98px) {
    .benfica-layout.mm-page #match-statistics .mss-stats-bars { padding: .8rem .6rem .6rem; }
    .benfica-layout.mm-page #match-statistics .mss-stat-row { gap: .4rem; padding: .36rem .15rem; }
    .benfica-layout.mm-page #match-statistics .mss-stat-value { min-width: 2.2rem; font-size: .78rem; }
}

/* ---- Tiles (Head-to-Head) ------------------------------------------------
   transfers.php's .trf-tile idiom: --c is an "r,g,b" triplet from the tokens. */
.benfica-layout.mm-page .mm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; padding: .1rem 0 .25rem; }
@media (max-width: 1199.98px) { .benfica-layout.mm-page .mm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.benfica-layout.mm-page .mm-tile {
    --c: var(--theme-primary-rgb);
    position: relative; min-width: 0; display: flex; align-items: center; gap: .75rem;
    padding: .85rem .95rem; border-radius: var(--mm-radius); overflow: hidden;
    background: radial-gradient(120% 120% at 0% 0%, rgba(var(--c), .10), transparent 60%), var(--mm-card-bg);
    box-shadow: var(--mm-soft-shadow);
    transition: transform var(--dur-base, .24s) ease, box-shadow var(--dur-base, .24s) ease;
}
@media (hover: hover) { .benfica-layout.mm-page .mm-tile:hover { transform: translateY(-3px); box-shadow: var(--mm-lift-shadow); } }
[data-bs-theme="dark"] .benfica-layout.mm-page .mm-tile { background: radial-gradient(120% 120% at 0% 0%, rgba(var(--c), .18), transparent 60%), var(--mm-card-bg); }
.benfica-layout.mm-page .mm-tile--neutral { --c: var(--theme-draw-rgb); }
.benfica-layout.mm-page .mm-tile--neutral .mm-tile-num { color: var(--theme-ink); }
.benfica-layout.mm-page .mm-tile--neutral .mm-tile-ico { color: var(--theme-ink-muted); background: rgba(var(--c), .35); }
.benfica-layout.mm-page .mm-tile--win { --c: var(--theme-success-rgb); }
.benfica-layout.mm-page .mm-tile--goals { --c: var(--theme-accent-rgb); }
.benfica-layout.mm-page .mm-tile--form { --c: var(--theme-info-rgb); }
.benfica-layout.mm-page .mm-tile--form .mm-tile-ico { color: var(--theme-info-strong, rgb(var(--c))); }
[data-bs-theme="dark"] .benfica-layout.mm-page .mm-tile--form .mm-tile-ico { color: rgb(var(--c)); }
.benfica-layout.mm-page .mm-tile-ico {
    flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: .8rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--c), .14); color: rgb(var(--c)); font-size: 1.05rem;
}
.benfica-layout.mm-page .mm-tile-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.benfica-layout.mm-page .mm-tile-num {
    font-size: 1.6rem; font-weight: 900; line-height: 1; color: rgb(var(--c));
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.benfica-layout.mm-page .mm-tile--goals .mm-tile-num { color: var(--theme-ink); }
.benfica-layout.mm-page .mm-tile-num small { font-size: .62em; font-weight: 800; color: var(--theme-ink-muted); margin-left: .1rem; }
.benfica-layout.mm-page .mm-tile-lbl {
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: var(--theme-ink-muted); margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.benfica-layout.mm-page .mm-wdl { display: inline-flex; align-items: baseline; gap: .12rem; }
.benfica-layout.mm-page .mm-wdl i { font-style: normal; font-size: .7em; color: var(--theme-ink-faint); }
.benfica-layout.mm-page .mm-wdl .mm-w { color: var(--theme-success); }
.benfica-layout.mm-page .mm-wdl .mm-d { color: var(--theme-ink-muted); }
.benfica-layout.mm-page .mm-wdl .mm-l { color: var(--theme-danger); }
.benfica-layout.mm-page .mm-split {
    display: flex; gap: 2px; height: 6px; margin-top: .45rem; border-radius: 99px; overflow: hidden;
    background: var(--mm-row-bg);
}
.benfica-layout.mm-page .mm-split i { display: block; height: 100%; min-width: 0; transition: width 1s cubic-bezier(.22, 1, .36, 1); }
.benfica-layout.mm-page .mm-split-w { background: var(--theme-success); }
.benfica-layout.mm-page .mm-split-d { background: var(--theme-draw); }
.benfica-layout.mm-page .mm-split-l { background: var(--theme-danger); }
/* The last-five chips: squared letters, as everywhere on the site. */
.benfica-layout.mm-page .mm-h2h-form { display: flex; align-items: center; gap: .25rem; min-height: 1.6rem; }
.benfica-layout.mm-page .mm-h2h-form .badge {
    width: 1.5rem; height: 1.5rem; padding: 0; border-radius: .25rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800; transition: transform var(--dur-fast, .12s) ease;
}
.benfica-layout.mm-page .mm-h2h-form .badge:hover { transform: translateY(-2px); }
.benfica-layout.mm-page .mm-h2h-form .badge.bg-secondary { background: var(--theme-draw) !important; color: var(--theme-draw-ink, var(--theme-ink)) !important; }
.benfica-layout.mm-page .mm-h2h-form .badge.border-warning { box-shadow: 0 0 0 2px var(--theme-accent); border: 0 !important; }
/* Phones: Played + Goals side by side, then the record and the last five full width. */
@media (max-width: 575.98px) {
    .benfica-layout.mm-page .mm-tile--neutral { order: 1; }
    .benfica-layout.mm-page .mm-tile--goals { order: 2; }
    .benfica-layout.mm-page .mm-tile--win { order: 3; grid-column: 1 / -1; }
    .benfica-layout.mm-page .mm-tile--form { order: 4; grid-column: 1 / -1; }
}
@media (max-width: 380px) {
    .benfica-layout.mm-page .mm-tiles { gap: .5rem; }
    .benfica-layout.mm-page .mm-tile { padding: .7rem .65rem; gap: .5rem; }
    .benfica-layout.mm-page .mm-tile-ico { width: 2.1rem; height: 2.1rem; border-radius: .65rem; font-size: .9rem; }
    .benfica-layout.mm-page .mm-tile-num { font-size: 1.3rem; }
    .benfica-layout.mm-page .mm-h2h-form .badge { width: 1.3rem; height: 1.3rem; font-size: .66rem; }
}

/* ---- Match Facts / Build-Up ------------------------------------------------
   includes/match_facts_functions.php owns the cards; here they lose the
   hairline border for a soft shadow, with a rounder icon chip. */
.benfica-layout.mm-page :is(#match-facts, #match-buildup) .mf-grid,
.benfica-layout.mm-page :is(#match-facts, #match-buildup) .mf-wrap { gap: .6rem; }
.benfica-layout.mm-page :is(#match-facts, #match-buildup) .mf-card {
    border: 0; border-radius: .9rem; padding: .6rem .8rem .6rem .9rem;
    background: var(--mm-card-bg); box-shadow: var(--mm-soft-shadow);
}
.benfica-layout.mm-page :is(#match-facts, #match-buildup) .mf-card.mf-lead {
    background: linear-gradient(100deg, color-mix(in oklab, var(--mf-tone, var(--theme-ink-faint)) 13%, var(--mm-card-bg)) 0%, var(--mm-card-bg) 70%);
}
@media (hover: hover) {
    .benfica-layout.mm-page :is(#match-facts, #match-buildup) .mf-card:hover { transform: translateY(-2px); box-shadow: var(--mm-lift-shadow); }
}
.benfica-layout.mm-page :is(#match-facts, #match-buildup) .mf-chip { width: 2rem; height: 2rem; border-radius: .65rem; font-size: .85rem; }
.benfica-layout.mm-page :is(#match-facts, #match-buildup) .mf-body { font-size: .85rem; }
.benfica-layout.mm-page :is(#match-facts, #match-buildup) .mf-lead .mf-body { font-size: .95rem; }

/* ---- Fan Attendance --------------------------------------------------------- */
.benfica-layout.mm-page #match-attendance-wall .card { border: 0; box-shadow: var(--mm-soft-shadow); background: var(--mm-card-bg); }
.benfica-layout.mm-page #match-attendance-wall .card-body > p.text-muted:only-child {
    display: flex; align-items: center; gap: .7rem; font-size: .86rem !important; font-weight: 600;
}
.benfica-layout.mm-page #match-attendance-wall .card-body > p.text-muted:only-child > i {
    flex: 0 0 auto; width: 2.2rem; height: 2.2rem; margin: 0 !important; border-radius: .75rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--theme-accent-rgb), .16); color: var(--theme-accent-700, var(--theme-accent));
}
[data-bs-theme="dark"] .benfica-layout.mm-page #match-attendance-wall .card-body > p.text-muted:only-child > i { color: var(--theme-accent); }

/* ---- Report, news, other plain section cards ------------------------------ */
.benfica-layout.mm-page :is(#match-report, #match-news, #match-shootout) > .card { border: 0; box-shadow: var(--mm-soft-shadow); background: var(--mm-card-bg); }
.benfica-layout.mm-page #match-report .match-report { font-size: .98rem; line-height: 1.7; }
.benfica-layout.mm-page #match-report .match-report img { border-radius: .8rem; }

/* ---- Commentary: the events timeline ----------------------------------------
   The renderer in match.php (initLiveTab) is untouched; this turns its rows
   into a rail: one line through the minute column, a pill per minute, the
   arrow reduced to a connector, and borderless cards with an edge in the
   event's colour (read from the minute badge's theme class via :has()). */
.benfica-layout.mm-page #public-live-center-root .public-live-timeline { position: relative; gap: .6rem; }
.benfica-layout.mm-page #public-live-center-root .public-live-timeline:not(:empty)::before {
    content: ""; position: absolute; top: .6rem; bottom: .6rem; left: 28px; width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, var(--theme-border-strong), var(--theme-border) 85%, transparent);
    z-index: 0;
}
.benfica-layout.mm-page #public-live-center-root .public-live-item-row { grid-template-columns: 58px 14px minmax(0, 1fr); gap: .3rem; }
.benfica-layout.mm-page #public-live-center-root .public-live-minute-col { position: relative; z-index: 1; gap: .3rem; }
.benfica-layout.mm-page #public-live-center-root .public-live-minute-badge {
    min-width: 46px; padding: .3rem .45rem; border: 0 !important; border-radius: 999px;
    font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 3px var(--mm-card-bg);
}
.benfica-layout.mm-page #public-live-center-root .public-live-minute-col > span:last-child {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mm-card-bg); box-shadow: 0 0 0 3px var(--mm-card-bg), var(--elev-1);
}
.benfica-layout.mm-page #public-live-center-root .public-live-minute-col > span:last-child .public-live-event-team-chip img { width: 22px; height: 22px; object-fit: contain; }
.benfica-layout.mm-page #public-live-center-root .public-live-minute-col > span.public-live-minute-icon { font-size: 1rem; min-height: 30px; }
.benfica-layout.mm-page #public-live-center-root .public-live-feed-arrow { width: 14px; height: 2px; margin-top: .85rem; opacity: .55; border-radius: 2px; }
.benfica-layout.mm-page #public-live-center-root .public-live-feed-arrow::after { display: none; }

.benfica-layout.mm-page #public-live-center-root .public-live-event-card {
    --ev: var(--theme-ink-faint);
    position: relative; overflow: hidden;
    border: 0; border-radius: .9rem; padding: .6rem .8rem .6rem .95rem;
    background: var(--mm-card-bg); box-shadow: var(--mm-soft-shadow);
    transition: transform var(--dur-base, .24s) ease, box-shadow var(--dur-base, .24s) ease;
}
.benfica-layout.mm-page #public-live-center-root .public-live-event-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ev);
}
@media (hover: hover) {
    .benfica-layout.mm-page #public-live-center-root .public-live-event-card:hover { transform: translateX(2px); box-shadow: var(--mm-lift-shadow); }
}
.benfica-layout.mm-page #public-live-center-root .public-live-event-card .event-title-theme-default { font-size: .72rem; font-weight: 800; letter-spacing: .06em; }
.benfica-layout.mm-page #public-live-center-root .public-live-event-card .text-muted.small { color: var(--theme-ink) !important; font-size: .86rem; margin-top: .15rem; }

/* Event colours for the card edge and tint. */
.benfica-layout.mm-page #public-live-center-root .public-live-item-row:has(.minute-theme-goal) .public-live-event-card {
    --ev: var(--theme-success);
    background: linear-gradient(100deg, color-mix(in oklab, var(--theme-success) 10%, var(--mm-card-bg)) 0%, var(--mm-card-bg) 65%);
}
.benfica-layout.mm-page #public-live-center-root .public-live-item-row:has(.minute-theme-goal) .public-live-event-card .text-muted.small { font-weight: 700; }
.benfica-layout.mm-page #public-live-center-root .public-live-item-row:has(:is(.minute-theme-yellow_card, .minute-theme-double_yellow)) .public-live-event-card { --ev: var(--theme-warning); }
.benfica-layout.mm-page #public-live-center-root .public-live-item-row:has(.minute-theme-red_card) .public-live-event-card {
    --ev: var(--theme-danger);
    background: linear-gradient(100deg, color-mix(in oklab, var(--theme-danger) 8%, var(--mm-card-bg)) 0%, var(--mm-card-bg) 65%);
}
.benfica-layout.mm-page #public-live-center-root .public-live-item-row:has(.minute-theme-substitution_in) .public-live-event-card { --ev: var(--theme-info); }
.benfica-layout.mm-page #public-live-center-root .public-live-item-row:has(.minute-theme-assist) .public-live-event-card { --ev: var(--theme-primary); }
.benfica-layout.mm-page #public-live-center-root .public-live-item-row:has(:is(.minute-theme-penalty_missed, .minute-theme-penalty_save)) .public-live-event-card { --ev: var(--theme-ink-muted); }
/* Kick-off, half-time, full time: quiet silver milestones, not more red under the hero. */
.benfica-layout.mm-page #public-live-center-root .public-live-timeline-item.public-live-system-event .public-live-event-card {
    --ev: var(--theme-ink-faint);
    border: 0; background: linear-gradient(100deg, rgba(var(--theme-draw-rgb), .38) 0%, var(--mm-card-bg) 75%);
}
.benfica-layout.mm-page #public-live-center-root .public-live-timeline-item.public-live-system-event .event-title-theme-system { color: var(--theme-ink); }
.benfica-layout.mm-page #public-live-center-root .public-live-timeline-item.public-live-system-event .text-muted.small { font-weight: 700; }

/* Minute pills: the theme tints made opaque (mixed into the card colour), so the
   rail never shows through them. */
.benfica-layout.mm-page #public-live-center-root .public-live-minute-badge { --mt: var(--theme-ink-muted); background: color-mix(in oklab, var(--mt) 16%, var(--mm-card-bg)) !important; color: color-mix(in oklab, var(--mt) 80%, var(--theme-ink)) !important; }
.benfica-layout.mm-page #public-live-center-root .public-live-minute-badge.minute-theme-goal { --mt: var(--theme-success); }
.benfica-layout.mm-page #public-live-center-root .public-live-minute-badge.minute-theme-assist { --mt: var(--theme-primary); }
.benfica-layout.mm-page #public-live-center-root .public-live-minute-badge:is(.minute-theme-yellow_card, .minute-theme-double_yellow) { --mt: var(--theme-warning); }
.benfica-layout.mm-page #public-live-center-root .public-live-minute-badge.minute-theme-red_card { --mt: var(--theme-danger); }
.benfica-layout.mm-page #public-live-center-root .public-live-minute-badge.minute-theme-substitution_in { --mt: var(--theme-info); }
.benfica-layout.mm-page #public-live-center-root .public-live-minute-badge.minute-theme-system { --mt: var(--theme-ink); }
[data-bs-theme="dark"] .benfica-layout.mm-page #public-live-center-root .public-live-minute-badge { background: color-mix(in oklab, var(--mt) 26%, var(--mm-card-bg)) !important; color: color-mix(in oklab, var(--mt) 55%, var(--theme-ink)) !important; }

/* The newest event (the feed is newest first) gets a soft entrance. */
@keyframes mmEvIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.benfica-layout.mm-page #public-live-center-root .public-live-timeline-item:first-child .public-live-event-card { animation: mmEvIn .45s var(--ease-out, ease) both; }

/* Panels above the feed: alerts, filters, replay. */
.benfica-layout.mm-page #public-live-center-root .public-live-reminder-panel,
.benfica-layout.mm-page #public-live-center-root .public-live-replay {
    border: 0; border-radius: .9rem; padding: .6rem .8rem !important; box-shadow: var(--mm-soft-shadow);
}
.benfica-layout.mm-page #public-live-center-root .public-live-reminder-panel { background: linear-gradient(100deg, rgba(var(--theme-warning-rgb), .14), var(--mm-card-bg) 75%); }
.benfica-layout.mm-page #public-live-center-root .public-live-replay { background: linear-gradient(100deg, rgba(var(--theme-primary-rgb), .08), var(--mm-card-bg) 75%); }
.benfica-layout.mm-page #public-live-center-root .public-live-filter-bar .form-select { border-radius: 999px; background-color: var(--mm-row-bg); border-color: transparent; font-weight: 600; }
.benfica-layout.mm-page #public-live-center-root .public-live-filter-bar .btn,
.benfica-layout.mm-page #public-live-center-root .public-live-replay .btn,
.benfica-layout.mm-page #public-live-center-root .public-live-reminder-panel .btn { border-radius: 999px; font-weight: 700; }

@media (max-width: 575.98px) {
    .benfica-layout.mm-page #public-live-center-root .public-live-item-row { grid-template-columns: 50px 8px minmax(0, 1fr); gap: .25rem; }
    .benfica-layout.mm-page #public-live-center-root .public-live-timeline:not(:empty)::before { left: 24px; }
    .benfica-layout.mm-page #public-live-center-root .public-live-minute-badge { min-width: 42px; font-size: .7rem; padding: .26rem .35rem; }
    .benfica-layout.mm-page #public-live-center-root .public-live-feed-arrow { width: 8px; }
    .benfica-layout.mm-page #public-live-center-root .public-live-event-card { padding: .5rem .65rem .5rem .8rem; }
}

/* ---- Sidebar: Match Info + Match Stats ------------------------------------
   The facts' icons become small tinted chips (the transfers sidebar look);
   the comparison bars use the same team colours as the Statistics section:
   club red for us, slate for the opponent. */
.benfica-layout.mm-page .bn-aside .mi-info-panel .bn-facts { gap: .45rem; }
.benfica-layout.mm-page .bn-aside .mi-info-panel .mm-fi {
    flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: .55rem;
    display: inline-flex; align-items: center; justify-content: center; font-size: .8rem;
    background: rgba(var(--theme-accent-rgb), .14); color: var(--theme-accent);
}
.benfica-layout.mm-page .bn-aside .bn-vs-bar { height: 8px; gap: 2px; background: transparent; }
.benfica-layout.mm-page .bn-aside .bn-vs-bar > span { border-radius: 99px; }
.benfica-layout.mm-page .bn-aside .bn-vs-bar .bn-vs-a { background: linear-gradient(90deg, var(--theme-gradient-start, var(--theme-primary)), var(--theme-gradient-end, var(--theme-primary))); }
.benfica-layout.mm-page .bn-aside .bn-vs-bar .bn-vs-b { background: var(--mm-opp); opacity: .55; }

/* Stadium + Referee panels (includes/matchday_sidebar_functions.php, shared with the
   matchday hub, inline-styled): on this page only, their bordered figure boxes become
   soft tiles. Matched on the inline border they carry, so nothing else is reached. */
.benfica-layout.mm-page .bn-aside .bn-panel .d-flex.flex-wrap[style*="gap:2px"] { gap: .4rem !important; margin: .25rem 0 0 !important; }
.benfica-layout.mm-page .bn-aside .bn-panel .d-flex.flex-wrap > .flex-fill[style*="border:1px solid"] {
    border: 0 !important; border-radius: .75rem !important; padding: .5rem .4rem !important;
    background: var(--mm-row-bg);
}
.benfica-layout.mm-page .bn-aside .bn-panel .d-flex.flex-wrap > .flex-fill[style*="border:1px solid"] .fw-bold { font-weight: 900 !important; font-variant-numeric: tabular-nums; }
.benfica-layout.mm-page .bn-aside .bn-panel .d-flex.flex-wrap > .flex-fill[style*="border:1px solid"] .text-uppercase { font-size: .66rem !important; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
    .benfica-layout.mm-page .mm-tile,
    .benfica-layout.mm-page .mm-split i,
    .benfica-layout.mm-page #public-live-center-root .public-live-event-card { transition: none !important; animation: none !important; }
}

/* Goal Scorers: on desktop the team switch is hidden, so its wrapper and the extra top
   padding left a gap twice the size of every other section's (Bruno, 1 Oct 2026). */
@media (min-width: 768px) {
    .benfica-layout.mm-page #match-goal-scorers .card-body > .px-2.pt-2 { display: none; }
    .benfica-layout.mm-page #match-goal-scorers .card-body { padding-top: 0 !important; }
    .benfica-layout.mm-page #match-goal-scorers .mss-pane { padding-top: 0 !important; }
}

/* ---- Opening Squads & Match Events (#match-lineups) ------------------------
   The CONTAINER only (owner's request, 1 Oct 2026). The rows are exactly as they
   were: same players, order, shirt numbers, names, captain marks, stars, event icons
   and minutes, unused subs dimmed as before. No team-colour cards, no dashed boxes
   (both rejected 27 Sep). Each team is one soft neutral card like the rest of the
   page; heads read like the Goal Scorers heads (team dot + formation pill); a hovered
   row gets the same soft fill as a goal row. Phone team tabs and the ≥768px two
   columns are untouched. */
@media (min-width: 768px) {
    .benfica-layout.mm-page #match-lineups .mss-panes { --bs-gutter-x: 1rem; }
}
/* The card is drawn by an inner box so the Bootstrap gutter stays a gutter. */
.benfica-layout.mm-page #match-lineups .mss-panes > .mss-pane {
    position: relative; padding-top: .9rem; padding-bottom: .8rem;
}
.benfica-layout.mm-page #match-lineups .mss-panes > .mss-pane::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    top: 0; bottom: 0; left: calc(var(--bs-gutter-x, 1rem) * .5); right: calc(var(--bs-gutter-x, 1rem) * .5);
    border-radius: var(--mm-radius); background: var(--mm-card-bg); box-shadow: var(--mm-soft-shadow);
}
.benfica-layout.mm-page #match-lineups .mss-panes > .mss-pane > * { position: relative; z-index: 1; margin-left: .8rem !important; margin-right: .8rem !important; }

/* Heads: XI head = team dot + name + formation pill; bench/manager heads quieter. */
.benfica-layout.mm-page #match-lineups .mss-squad-head {
    border-bottom: 1px solid var(--theme-border) !important;
    padding-bottom: .45rem !important; margin-bottom: .45rem !important;
    font-size: .9rem; font-weight: 800 !important; color: var(--theme-ink);
}
.benfica-layout.mm-page #match-lineups .mss-squad-head .fw-semibold { font-weight: 800 !important; }
.benfica-layout.mm-page #match-lineups .mss-pane > .mss-squad-head:first-child > div:first-child { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.benfica-layout.mm-page #match-lineups .mss-pane > .mss-squad-head:first-child > div:first-child > i { display: none; }
.benfica-layout.mm-page #match-lineups .mss-pane > .mss-squad-head:first-child > div:first-child::before {
    content: ""; flex: 0 0 auto; width: .6rem; height: .6rem; border-radius: 50%; background: var(--mm-opp);
}
.benfica-layout.mm-page #match-lineups .mss-pane[data-team="our"] > .mss-squad-head:first-child > div:first-child::before {
    background: linear-gradient(135deg, var(--theme-gradient-start, var(--theme-primary)), var(--theme-gradient-end, var(--theme-primary)));
}
.benfica-layout.mm-page #match-lineups .mss-squad-head .badge.text-bg-secondary {
    border-radius: 999px; padding: .28em .7em; font-weight: 800; letter-spacing: .02em;
    background: var(--mm-row-bg) !important; color: var(--theme-ink) !important;
}
.benfica-layout.mm-page #match-lineups :is(.mss-pane-subs, .mss-pane-mgr) { margin-top: .9rem !important; }
.benfica-layout.mm-page #match-lineups :is(.mss-pane-subs, .mss-pane-mgr) > .mss-squad-head {
    font-size: .78rem; font-weight: 800; letter-spacing: .02em; color: var(--theme-ink-muted);
}
.benfica-layout.mm-page #match-lineups :is(.mss-pane-subs, .mss-pane-mgr) > .mss-squad-head .fw-semibold { color: var(--theme-ink-muted); }
.benfica-layout.mm-page #match-lineups :is(.mss-pane-subs, .mss-pane-mgr) > .mss-squad-head > i { color: var(--theme-accent); }
.benfica-layout.mm-page #match-lineups .mss-pane > .mss-pane-mgr:first-child { margin-top: 0 !important; }

/* Rows: unchanged content; a soft fill on hover, like the goal rows above. */
.benfica-layout.mm-page #match-lineups .player-list { display: grid; gap: 1px; }
.benfica-layout.mm-page #match-lineups .player-item,
.benfica-layout.mm-page #match-lineups .mss-pane-mgr > p {
    margin: 0 -.45rem !important; padding: .22rem .45rem; border-radius: .6rem;
    transition: background-color var(--dur-base, .24s) ease;
}
.benfica-layout.mm-page #match-lineups .player-item:hover,
.benfica-layout.mm-page #match-lineups .mss-pane-mgr > p:hover { background: var(--mm-row-bg); }
.benfica-layout.mm-page #match-lineups .mss-pane > p.text-muted,
.benfica-layout.mm-page #match-lineups .player-list > p.text-muted { font-size: .86rem; color: var(--theme-ink-faint) !important; }

/* Empty line-ups: one calm line (markup from match.php), same as the goals one. */
.benfica-layout.mm-page #match-lineups .mm-lu-note { margin-bottom: .9rem; }
.benfica-layout.mm-page #match-lineups .mm-lu-pane-note { box-shadow: none; padding: .55rem .2rem; background: transparent; }
@media (max-width: 767.98px) {
    .benfica-layout.mm-page #match-lineups .mss-team-tabs { margin-bottom: .6rem; }
}

/* Opening Squads cards: flush with the section edges (like the tabs and heads above)
   and exactly 1rem apart (Bruno, 1 Oct 2026). The cards were drawn half a gutter in
   from each column, so they sat 8px inside the section on both sides. */
.benfica-layout.mm-page #match-lineups .card-body { padding-left: 0 !important; padding-right: 0 !important; }
.benfica-layout.mm-page #match-lineups .mss-panes { margin-left: 0; margin-right: 0; }
.benfica-layout.mm-page #match-lineups .mss-panes > .mss-pane { padding-left: 0; padding-right: 0; }
.benfica-layout.mm-page #match-lineups .mss-panes > .mss-pane::after { left: 0; right: 0; }
@media (min-width: 768px) {
    .benfica-layout.mm-page #match-lineups .mss-panes > .mss-pane:first-child { padding-right: .5rem; }
    .benfica-layout.mm-page #match-lineups .mss-panes > .mss-pane:first-child::after { right: .5rem; }
    .benfica-layout.mm-page #match-lineups .mss-panes > .mss-pane:last-child { padding-left: .5rem; }
    .benfica-layout.mm-page #match-lineups .mss-panes > .mss-pane:last-child::after { left: .5rem; }
}

/* Statistics: the rows sat 1.5rem in from the card edge (1.1rem + the row's own .4rem);
   every other card keeps its content .8rem in. Same .8rem here on wider screens, the
   row keeping its .4rem so the hover fill still has room (Bruno, 1 Oct 2026). */
@media (min-width: 576px) {
    .benfica-layout.mm-page #match-statistics .mss-stats-bars { padding-left: .4rem; padding-right: .4rem; }
    .benfica-layout.mm-page #match-statistics :is(.mss-stats-teams, .mss-pos) { padding-left: .4rem !important; padding-right: .4rem !important; }
}

/* Goal Scorers: each team in the same soft card as Opening Squads below (flush with the
   section edges, 1rem apart, content .8rem in), so the section reads like the rest
   (Bruno, 1 Oct 2026). Upcoming/empty states keep their own .mm-empty card. */
.benfica-layout.mm-page #match-goal-scorers .mss-panes { margin: 0 !important; --bs-gutter-x: 1rem; }
.benfica-layout.mm-page #match-goal-scorers .mss-panes > .mss-pane {
    position: relative; margin-top: 0 !important; padding: .9rem 0 .8rem !important;
}
.benfica-layout.mm-page #match-goal-scorers .mss-panes > .mss-pane::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none; top: 0; bottom: 0; left: 0; right: 0;
    border-radius: var(--mm-radius); background: var(--mm-card-bg); box-shadow: var(--mm-soft-shadow);
}
.benfica-layout.mm-page #match-goal-scorers .mss-panes > .mss-pane > * { position: relative; z-index: 1; margin-left: .8rem !important; margin-right: .8rem !important; }
@media (min-width: 768px) {
    .benfica-layout.mm-page #match-goal-scorers .mss-panes > .mss-pane:first-child { padding-right: .5rem !important; }
    .benfica-layout.mm-page #match-goal-scorers .mss-panes > .mss-pane:first-child::after { right: .5rem; }
    .benfica-layout.mm-page #match-goal-scorers .mss-panes > .mss-pane:last-child { padding-left: .5rem !important; }
    .benfica-layout.mm-page #match-goal-scorers .mss-panes > .mss-pane:last-child::after { left: .5rem; }
}
.benfica-layout.mm-page #match-goal-scorers .card-body { padding-left: 0 !important; padding-right: 0 !important; }
.benfica-layout.mm-page #match-goal-scorers .card-body > .px-2.pt-2 { padding-left: 0 !important; padding-right: 0 !important; }
.benfica-layout.mm-page #match-lineups .card-body { padding-top: 0 !important; }
/* The outer .card clips (overflow:hidden): with the team cards flush to its edges their
   shadows were cut off on the outer sides, top and bottom. Let them show. */
.benfica-layout.mm-page :is(#match-goal-scorers, #match-lineups) > .card { overflow: visible; background: transparent; border: 0; box-shadow: none; }

/* Statistics, compact (Bruno, 1 Oct 2026): rows ~28px instead of ~39px, a slimmer
   possession bar and tighter spacing around the team names. */
.benfica-layout.mm-page #match-statistics .mss-stats-bars { padding-top: .75rem !important; padding-bottom: .55rem !important; }
.benfica-layout.mm-page #match-statistics .mss-stats-teams { margin-bottom: .55rem; }
.benfica-layout.mm-page #match-statistics .mss-pos { margin-bottom: .6rem; }
.benfica-layout.mm-page #match-statistics .mss-pos-track { height: 1.45rem; }
.benfica-layout.mm-page #match-statistics .mss-pos-label { margin-top: .25rem; }
.benfica-layout.mm-page #match-statistics .mss-stat-row { padding-top: .2rem !important; padding-bottom: .2rem !important; }
.benfica-layout.mm-page #match-statistics .mss-stat-value { padding-top: .08rem; padding-bottom: .08rem; }
.benfica-layout.mm-page #match-statistics .mss-stat-bar { height: .42rem; }

/* Head-to-Head, compact (Bruno, 1 Oct 2026): shorter tiles, smaller chips and figures. */
.benfica-layout.mm-page .mm-tiles--h2h { gap: .55rem; padding: 0; }
.benfica-layout.mm-page .mm-tiles--h2h .mm-tile { padding: .55rem .75rem; gap: .6rem; }
.benfica-layout.mm-page .mm-tiles--h2h .mm-tile-ico { width: 2.1rem; height: 2.1rem; border-radius: .65rem; font-size: .9rem; }
.benfica-layout.mm-page .mm-tiles--h2h .mm-tile-num { font-size: 1.3rem; }
.benfica-layout.mm-page .mm-tiles--h2h .mm-tile-lbl { font-size: .64rem; margin-top: .18rem; }
.benfica-layout.mm-page .mm-tiles--h2h .mm-split { height: 5px; margin-top: .3rem; }
.benfica-layout.mm-page .mm-tiles--h2h .mm-h2h-form { min-height: 1.3rem; gap: .2rem; }
.benfica-layout.mm-page .mm-tiles--h2h .mm-h2h-form .badge { width: 1.3rem; height: 1.3rem; font-size: .66rem; }

/* No shadows on the match page's sections (Bruno, 1 Oct 2026): cards, team cards,
   facts, head-to-head tiles (hover lift too) and the sidebar panels. The tab strip and
   the pitch drawing keep theirs. */
.benfica-layout.mm-page { --mm-soft-shadow: none; --mm-lift-shadow: none; }
.benfica-layout.mm-page :is(.bn-section .card, .bn-panel, .mf-card, .mm-tile, .mm-empty),
.benfica-layout.mm-page .mm-tile:hover,
.benfica-layout.mm-page :is(#match-goal-scorers, #match-lineups) .mss-panes > .mss-pane::after { box-shadow: none !important; }
.benfica-layout.mm-page #match-tactical .card { box-shadow: none !important; }

/* Section cards wear the sidebar panels' border instead of a shadow (Bruno, 1 Oct 2026):
   the same 1px line and radius as .bn-panel (style.css), lighter line in dark mode. */
.benfica-layout.mm-page { --mm-panel-border: 1px solid rgba(0, 0, 0, .07); --mm-panel-radius: var(--theme-radius-lg, 1.1rem); }
[data-bs-theme="dark"] .benfica-layout.mm-page { --mm-panel-border: 1px solid rgba(255, 255, 255, .08); }
.benfica-layout.mm-page :is(#match-statistics .card, #match-attendance-wall .card, #match-tactical > .card, .mf-card, .mm-tile, .mm-empty),
.benfica-layout.mm-page :is(#match-goal-scorers, #match-lineups) .mss-panes > .mss-pane::after {
    border: var(--mm-panel-border) !important; border-radius: var(--mm-panel-radius) !important;
}

/* Cards as on the forum, the site's normal (Bruno, 1 Oct 2026): the .bn-panel border
   above AND the theme's soft drop shadow, like the player, manager and club pages.
   Overrides the shadow-free pass above. */
.benfica-layout.mm-page { --mm-soft-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06)); --mm-lift-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06)); }
.benfica-layout.mm-page :is(#match-statistics .card, #match-attendance-wall .card, #match-tactical > .card, .bn-panel, .mf-card, .mm-tile, .mm-tile:hover, .mm-empty),
.benfica-layout.mm-page :is(#match-goal-scorers, #match-lineups) .mss-panes > .mss-pane::after {
    box-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06)) !important;
}

/* Goal Scorers on phones: the team switch sat 28px under the heading (the card's 4px and
   its wrapper's 8px on top); now 16px like every other section (Bruno, 2 Oct 2026). */
.benfica-layout.mm-page #match-goal-scorers .card-body { padding-top: 0 !important; }
.benfica-layout.mm-page #match-goal-scorers .card-body > .px-2.pt-2 { padding-top: 0 !important; }

/* ---- Hero top row on phones (the owner, 4 Oct 2026) --------------------------
   The competition and the matchday read as ONE two-line block, its logo as tall as
   the two lines, and the action buttons sit on its right instead of a centred row
   of their own. Only when the competition has a logo; otherwise style.css's
   centred layout stays. The first pill (the competition link) becomes
   display: contents so its logo and name are grid items of the block; its text
   is still inside the link, so the name stays clickable. */
@media (max-width: 575.98px) {
    .hero-match .hero-match-top:has(.hero-comp-logo) {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        column-gap: 10px;
    }
    .hero-match .hero-match-comp:has(.hero-comp-logo) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 8px; row-gap: 1px;
        align-items: center;
        flex: 1 1 auto; min-width: 0;
        padding: 5px 12px 5px 6px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(var(--benfica-gold-rgb), 0.35);
        color: #fff;
        font-size: .8rem; font-weight: 700; line-height: 1.15;
    }
    .hero-header.mh-themed .hero-match .hero-match-comp:has(.hero-comp-logo) {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.22);
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .hero-match .hero-match-comp:has(.hero-comp-logo) > a.hero-match-pill { display: contents; color: #fff; }
    .hero-match .hero-match-comp:has(.hero-comp-logo) .hero-comp-logo {
        grid-column: 1; grid-row: 1 / span 2;
        width: 1.85rem !important; height: 1.85rem !important;
        margin: 0 !important;
        border-radius: 6px;
    }
    .hero-match .hero-match-comp:has(.hero-comp-logo) > span.hero-match-pill {
        grid-column: 2; grid-row: 2;
        display: block;
        padding: 0; border: 0; border-radius: 0; background: none;
        font-size: .7rem; font-weight: 600; opacity: .85;
    }
    .hero-match .hero-match-comp:has(.hero-comp-logo) > span.hero-match-pill > i { display: none; }
    .hero-match .hero-match-top:has(.hero-comp-logo) .hero-match-actions {
        flex: 0 0 auto;
        justify-content: flex-end;
    }
}
/* More compact (the owner, 4 Oct 2026), and the matchday line without a pill: the themed
   hero gives every .hero-match-pill a background and border at higher specificity. */
@media (max-width: 575.98px) {
    .hero-match .hero-match-top:has(.hero-comp-logo) { margin-bottom: 8px; column-gap: 8px; }
    .hero-match .hero-match-comp:has(.hero-comp-logo) {
        padding: 3px 10px 3px 4px; column-gap: 7px; row-gap: 0;
        border-radius: 11px;
        font-size: .76rem; line-height: 1.1;
    }
    .hero-match .hero-match-comp:has(.hero-comp-logo) .hero-comp-logo {
        width: 1.6rem !important; height: 1.6rem !important; border-radius: 5px;
    }
    .hero-header .hero-match .hero-match-comp:has(.hero-comp-logo) > span.hero-match-pill,
    .hero-header.mh-themed .hero-match .hero-match-comp:has(.hero-comp-logo) > span.hero-match-pill {
        background: none !important; border: 0 !important;
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
        padding: 0 !important; border-radius: 0;
        font-size: .66rem; line-height: 1.1;
        transition: none; /* the pill's .2s background fade would flash on load */
    }
}
/* The box is only as wide as its text, and the buttons always sit at the far right
   (the owner, 4 Oct 2026). It may still shrink (and wrap the name) on a narrow phone. */
@media (max-width: 575.98px) {
    .hero-match .hero-match-comp:has(.hero-comp-logo) { flex: 0 1 auto; width: auto; }
    .hero-match .hero-match-top:has(.hero-comp-logo) .hero-match-actions { margin-left: auto !important; }
}


/* matchday.php: the match's links as one compact pill bar, the look of the other pages' link
   bars (white pill, hairline border, soft shadow, red icons). Scrolls sideways when it runs out
   of room; the Follow star is gold when on. Keeps .btn / .follow-btn for follow-buttons.js. */
.benfica-layout .md-linkbar {
    display: flex; flex-wrap: nowrap; align-items: center; gap: .15rem;
    margin: 0 0 1rem; padding: .3rem;
    border: 1px solid rgba(0, 0, 0, .07); border-radius: 999px;
    background: var(--bs-body-bg); box-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06));
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
[data-bs-theme="dark"] .benfica-layout .md-linkbar { background: var(--bs-tertiary-bg, #1e1e1e); border-color: rgba(255, 255, 255, .08); }
.benfica-layout .md-linkbar::-webkit-scrollbar { display: none; }
.benfica-layout .md-linkbar > .btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .8rem !important; margin: 0 !important;
    border: 0 !important; border-radius: 999px !important;
    background: transparent !important; color: var(--theme-ink, var(--bs-body-color)) !important;
    font-size: .82rem !important; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: none !important;
}
.benfica-layout .md-linkbar > .btn i { margin: 0 !important; color: var(--theme-primary-ink, var(--theme-primary, #C8102E)); font-size: .85em; }
.benfica-layout .md-linkbar > .btn:hover { background: var(--theme-surface-2, rgba(0, 0, 0, .04)) !important; }
.benfica-layout .md-linkbar > .follow-btn i { color: var(--slb-gold, #F4B223); }
.benfica-layout .md-linkbar > .follow-btn.btn-warning { background: var(--slb-gold, #F4B223) !important; color: #1b1b1b !important; }
.benfica-layout .md-linkbar > .follow-btn.btn-warning i { color: #1b1b1b; }
@media (max-width: 575.98px) {
    .benfica-layout .md-linkbar { padding: .25rem; }
    .benfica-layout .md-linkbar > .btn { padding: .32rem .65rem !important; font-size: .78rem !important; }
}

/* ==========================================================================
   S. Matchday sidebar (#mdAside, 8 Oct 2026: "matchday.php sidebar should be more modern and
      dynamic"; includes/matchday_sidebar_functions.php mdsb* blocks). My Benfica's vocabulary:
      THE row (.mb-row, from mybenfica-modern.css — the aside carries .mb-modern) edge to edge,
      squared W/D/L chips, count-up tiles, bars that grow in, gold icons. The Tie, Referee and
      Stadium panels are shared with match.php's #matchAside, which does not load
      mybenfica-modern.css: it gets the tokens and THE row here too.
   ========================================================================== */
.benfica-layout #matchAside {
    --mb-card-bg: var(--theme-surface, var(--bs-body-bg));
    --mb-soft: var(--theme-surface-2, var(--bs-tertiary-bg));
    --mb-soft-2: var(--theme-surface-3, var(--bs-secondary-bg));
    --mb-line: var(--theme-border, var(--bs-border-color));
    --mb-ink: var(--theme-ink, var(--bs-body-color));
    --mb-muted: var(--theme-ink-muted, var(--bs-secondary-color));
    --mb-primary: var(--theme-primary, var(--bs-primary));
    --mb-primary-rgb: var(--theme-primary-rgb, 200, 16, 46);
    --mb-primary-ink: color-mix(in oklab, var(--mb-primary) 80%, var(--mb-ink));
    --mb-accent-rgb: var(--theme-accent-rgb, 244, 178, 35);
    --mb-ok: var(--theme-success, var(--bs-success));
    --mb-ok-ink: var(--theme-success-strong, var(--bs-success));
    --mb-bad: var(--theme-danger, var(--bs-danger));
}
[data-bs-theme="dark"] .benfica-layout #matchAside {
    --mb-card-bg: var(--bs-tertiary-bg, var(--theme-surface-2));
    --mb-soft: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--mb-card-bg));
    --mb-soft-2: color-mix(in oklab, var(--theme-ink, #fff) 11%, var(--mb-card-bg));
    --mb-line: color-mix(in oklab, var(--theme-ink, #fff) 12%, transparent);
    --mb-primary-ink: var(--theme-link, var(--mb-ink));
    --mb-ok-ink: color-mix(in oklab, var(--mb-ok) 58%, white);
}
.benfica-layout #matchAside .mb-rows { display: flex; flex-direction: column; }
.benfica-layout #matchAside .mb-row {
    position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; column-gap: .6rem;
    padding: .45rem .1rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
    color: var(--mb-ink); text-decoration: none; transition: background-color .18s ease;
}
.benfica-layout #matchAside .mb-rows > .mb-row:last-child { border-bottom: 0; }
.benfica-layout #matchAside a.mb-row:hover { background: color-mix(in oklab, var(--mb-soft) 70%, transparent); color: var(--mb-ink); }
.benfica-layout #matchAside .mb-row-vis { display: inline-flex; align-items: center; justify-content: center; min-width: 0; }
.benfica-layout #matchAside .mb-row-main { display: flex; flex-direction: column; min-width: 0; }
.benfica-layout #matchAside .mb-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 800; line-height: 1.3; }
.benfica-layout #matchAside .mb-row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .05rem; color: var(--mb-muted); font-size: .7rem; line-height: 1.3; }
.benfica-layout #matchAside .mb-row-side { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem; min-width: 0; }

/* Panels: the standard head, a little less air at the bottom (as My Benfica's #mbAside). */
:is(#mdAside, #matchAside) .mds-panel { padding-bottom: .75rem; overflow: hidden; }
#mdAside > .bn-panel { flex-shrink: 0; }
:is(#mdAside, #matchAside) .mds-panel h3 { margin-bottom: .7rem; }
/* A count in the head sits after the colour line, on the right. */
:is(#mdAside, #matchAside) .mds-panel h3 .mds-head-count {
    order: 1; margin-left: auto; flex: 0 0 auto; padding: .2rem .5rem; border-radius: 999px;
    background: var(--theme-primary, #C8102E); color: var(--theme-on-primary, #fff);
    font-size: .7rem; font-weight: 800; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
}
:is(#mdAside, #matchAside) .mds-panel h3 .mds-head-count i { font-style: normal; font-weight: 700; opacity: .8; }

/* THE row reaches the card's edges; the text keeps its inset. A list that ends the card sits
   on its bottom edge. */
:is(#mdAside, #matchAside) .mds-panel .mds-rows > .mb-row { margin-left: -1rem; margin-right: -1rem; padding-left: 1.05rem; padding-right: 1.05rem; }
:is(#mdAside, #matchAside) .mds-panel > h3 + .mds-rows > .mb-row:first-child,
:is(#mdAside, #matchAside) .mds-panel > h3 + [data-md-panel] > .mds-rows:first-child > .mb-row:first-child { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
:is(#mdAside, #matchAside) .mds-panel:is(:has(> .mds-rows:last-child), :has(> [data-md-panel] > .mds-rows:last-child)) { padding-bottom: 0; }
:is(#mdAside, #matchAside) .mds-panel > .mds-rows:last-child > .mb-row:last-child,
:is(#mdAside, #matchAside) .mds-panel > [data-md-panel] > .mds-rows:last-child > .mb-row:last-child { padding-bottom: .6rem; }
:is(#mdAside, #matchAside) .mds-row .mb-row-vis { width: 2rem; height: 2rem; }
:is(#mdAside, #matchAside) .mds-row .mb-row-vis img.mds-crest { width: 1.6rem !important; height: 1.6rem !important; object-fit: contain; }
:is(#mdAside, #matchAside) .mds-row .mb-row-meta i { margin-right: .3rem; color: var(--theme-accent); font-size: .9em; }
:is(#mdAside, #matchAside) .mds-row .mb-row-meta b { color: var(--mb-ink); font-weight: 800; }
:is(#mdAside, #matchAside) .mds-go { color: var(--mb-muted); font-size: .7rem; transition: transform .18s ease; }
:is(#mdAside, #matchAside) a.mb-row:hover .mds-go { transform: translateX(2px); }

/* Icon chips (gold), faces, chips, captions, notes. */
:is(#mdAside, #matchAside) .mds-ico {
    display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem;
    background: rgba(var(--mb-accent-rgb, 244, 178, 35), .16); color: var(--theme-accent);
}
:is(#mdAside, #matchAside) .mds-ico b { color: var(--mb-ink); font-size: .86rem; font-weight: 900; font-variant-numeric: tabular-nums; }
:is(#mdAside, #matchAside) .mds-ico > i[class$="-mask"] { width: 1rem; height: 1rem; }
:is(#mdAside, #matchAside) .mds-face { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
:is(#mdAside, #matchAside) .mds-chip {
    display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 999px;
    background: var(--mb-soft); color: var(--mb-ink); font-size: .68rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
}
:is(#mdAside, #matchAside) .mds-label {
    display: flex; align-items: center; gap: .4rem; margin: .8rem 0 .35rem; min-width: 0;
    color: var(--mb-muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
:is(#mdAside, #matchAside) .mds-label > i { color: var(--theme-accent); font-size: .9em; }
:is(#mdAside, #matchAside) .mds-label > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#mdAside, #matchAside) .mds-label-aside { margin-left: auto; flex: 0 0 auto; letter-spacing: 0; text-transform: none; font-size: .68rem; font-weight: 700; }
:is(#mdAside, #matchAside) .mds-rows + .mds-label, :is(#mdAside, #matchAside) .mds-panel > h3 + .mds-label,
:is(#mdAside, #matchAside) .mds-panel > h3 + [data-md-panel] > .mds-label:first-child { margin-top: .2rem; }
:is(#mdAside, #matchAside) .mds-note { display: flex; gap: .35rem; margin: -.35rem 0 .6rem; color: var(--mb-muted); font-size: .7rem; }
:is(#mdAside, #matchAside) .mds-note i { color: var(--theme-accent); margin-top: .1rem; }
:is(#mdAside, #matchAside) .mds-foot { margin-top: .35rem; }
:is(#mdAside, #matchAside) .mds-foot .mb-foot-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#mdAside, #matchAside) .mds-foot .mb-more { flex: 0 0 auto; }
:is(#mdAside, #matchAside) .mds-foot .mb-more i { color: var(--theme-accent); }
:is(#mdAside, #matchAside) .mds-rows + .mds-foot { margin-top: 0; }
:is(#mdAside, #matchAside) .mds-empty { padding: .2rem 0 .25rem; }
:is(#mdAside, #matchAside) .mds-empty > i { color: var(--theme-accent); opacity: 1; }

/* Squared W / D / L chips (also as links), the form strips, the coloured score chip. */
:is(#mdAside, #matchAside) .mds-sq {
    display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: .25rem;
    color: #fff; font-size: .64rem; font-weight: 900; line-height: 1; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
:is(#mdAside, #matchAside) .mds-sq.is-w { background: var(--mb-ok, #198754); }
:is(#mdAside, #matchAside) .mds-sq.is-d { background: var(--theme-draw, #8a8f98); color: var(--theme-draw-ink, #fff); }
:is(#mdAside, #matchAside) .mds-sq.is-l { background: var(--mb-bad, #dc3545); }
:is(#mdAside, #matchAside) a.mds-sq:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }
:is(#mdAside, #matchAside) .mds-score {
    display: inline-flex; align-items: baseline; justify-content: center; gap: .25rem; min-width: 2.6rem; padding: .14rem .45rem; border-radius: .3rem;
    color: #fff; font-size: .76rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap;
}
:is(#mdAside, #matchAside) .mds-score small { font-size: .62rem; font-weight: 700; opacity: .85; }
:is(#mdAside, #matchAside) .mds-score.is-w { background: var(--mb-ok, #198754); }
:is(#mdAside, #matchAside) .mds-score.is-d { background: var(--mb-soft-2); color: var(--mb-ink); }
:is(#mdAside, #matchAside) .mds-score.is-l { background: var(--mb-bad, #dc3545); }
#mdAside .mds-formlines { display: flex; flex-direction: column; }
#mdAside .mds-formline {
    display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: center; column-gap: .55rem;
    margin: 0 -1rem; padding: .42rem 1.05rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
}
#mdAside .mds-formline:first-child { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
#mdAside .mds-formline-crest { display: inline-flex; align-items: center; justify-content: center; }
#mdAside .mds-formline-crest img { width: 1.5rem !important; height: 1.5rem !important; object-fit: contain; }
#mdAside .mds-formline-name { display: flex; flex-direction: column; min-width: 0; font-size: .82rem; font-weight: 800; line-height: 1.25; }
#mdAside .mds-formline-name, #mdAside .mds-formline-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mdAside .mds-formline-name small { color: var(--mb-muted); font-size: .66rem; font-weight: 700; }
#mdAside .mds-formline-name small i { color: var(--theme-accent); margin-right: .25rem; }
#mdAside .mds-form { display: inline-flex; gap: .2rem; }

/* Count-up tiles: icons gold (cards in their own colours); text tiles a size down. */
:is(#mdAside, #matchAside) .mds-tiles + .mds-rec, :is(#mdAside, #matchAside) .mds-rec + .mds-tiles { margin-top: .6rem; }
:is(#mdAside, #matchAside) .mds-tile.is-yellow i { color: #f0b400; transform: scaleX(.72); }
:is(#mdAside, #matchAside) .mds-tile.is-red i { color: #dc2626; transform: scaleX(.72); }
:is(#mdAside, #matchAside) .mds-tile b small { margin-left: .1rem; color: var(--mb-muted); font-size: .7em; font-weight: 800; }
:is(#mdAside, #matchAside) .mds-tile.is-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-size: .8rem; line-height: 1.35; }
:is(#mdAside, #matchAside) .mds-rows + .mds-tiles, :is(#mdAside, #matchAside) .mds-rows + .mds-rec { margin-top: .7rem; }

/* Head-to-head: our crest | meetings | theirs, over the split. */
#mdAside .mds-vs { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 0 .7rem; }
#mdAside .mds-vs img { width: 2.1rem !important; height: 2.1rem !important; object-fit: contain; }
#mdAside .mds-vs-n { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
#mdAside .mds-vs-n b { color: var(--mb-ink); font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }
#mdAside .mds-vs-n small { color: var(--mb-muted); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

/* Status tags (injured, banned, one card away). */
#mdAside .mds-tag {
    display: inline-flex; align-items: center; gap: .3rem; padding: .14rem .5rem; border-radius: 999px;
    font-size: .66rem; font-weight: 800; white-space: nowrap;
}
#mdAside .mds-tag i { font-size: .85em; }
#mdAside .mds-tag.is-bad, #mdAside .mds-tag.is-red { background: rgba(var(--mb-bad-rgb, 220, 53, 69), .12); color: var(--mb-bad-ink, #b02a37); }
#mdAside .mds-tag.is-red i { color: #dc2626; transform: scaleX(.72); }
#mdAside .mds-tag.is-warn { background: rgba(var(--mb-accent-rgb, 244, 178, 35), .2); color: var(--mb-accent-ink, #8a6100); }
#mdAside .mds-tag.is-warn .fa-square-full { color: #f0b400; transform: scaleX(.72); }
#mdAside .mds-tag.is-info { background: rgba(var(--mb-info-rgb, 13, 202, 240), .14); color: color-mix(in oklab, var(--mb-info, #0dcaf0) 60%, var(--mb-ink)); }
#mdAside .mds-tag.is-muted { background: var(--mb-soft); color: var(--mb-muted); }
#mdAside .mds-pips { display: inline-flex; gap: 2px; margin-right: .4rem; vertical-align: 1px; }
#mdAside .mds-pips i { display: inline-block; width: .42rem; height: .58rem; border-radius: 1px; background: var(--mb-soft-2); }
#mdAside .mds-pips i.is-on { background: #f0b400; }

/* A number over a thin bar (Record Watch). */
#mdAside .mds-prog { display: inline-flex; flex-direction: column; align-items: flex-end; gap: .22rem; width: 3.3rem; }
#mdAside .mds-prog-n { line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
#mdAside .mds-prog-n b { color: var(--mb-ink); font-size: .9rem; font-weight: 900; }
#mdAside .mds-prog-n small { color: var(--mb-muted); font-size: .66rem; font-weight: 800; }
#mdAside .mds-prog-bar { position: relative; display: block; width: 100%; height: .3rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); }
#mdAside .mds-prog-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--mb-primary), color-mix(in oklab, var(--mb-primary) 55%, var(--mb-accent))); transition: width .9s var(--mb-ease); }
#mdAside .mds-rw .is-record .mds-ico { background: rgba(var(--mb-accent-rgb), .22); }
/* A number with a small word under it (scorers, familiar faces). */
#mdAside .mds-num { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
#mdAside .mds-num b { color: var(--mb-ink); font-size: .8rem; font-weight: 900; }
#mdAside .mds-num b i { color: var(--theme-accent); font-size: .85em; }
#mdAside .mds-num small { color: var(--mb-muted); font-size: .62rem; font-weight: 700; }

/* Standings: the competition row, then the table as rows edge to edge. */
:is(#mdAside, #matchAside) .mds-comp-img { width: 1.6rem; height: 1.6rem; object-fit: contain; }
#mdAside .mds-standings .mds-comp .bn-live-table { font-size: .62rem; }
#mdAside .mds-std { display: flex; flex-direction: column; }
#mdAside .mds-std-row {
    display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 1.5rem 2rem 2rem; align-items: center; column-gap: .45rem;
    margin: 0 -1rem; padding: .34rem 1.05rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
    color: var(--mb-ink); font-size: .78rem; font-variant-numeric: tabular-nums;
}
#mdAside .mds-std-row > span:nth-child(n+3) { text-align: right; }
#mdAside .mds-std-row > span:last-child b { font-weight: 900; }
#mdAside .mds-std-row.is-head { padding-top: .45rem; padding-bottom: .3rem; color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
#mdAside .mds-std-row.is-own { background: rgba(var(--mb-primary-rgb), .09); font-weight: 800; box-shadow: inset 3px 0 0 var(--mb-primary); }
#mdAside .mds-std-row.is-opp { background: rgba(var(--mb-accent-rgb), .14); font-weight: 800; box-shadow: inset 3px 0 0 var(--theme-accent); }
#mdAside .mds-std-row[data-bn-live-row] > span:first-child::after { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-left: .2rem; border-radius: 50%; background: var(--mb-bad); vertical-align: middle; animation: mdsPulse 1.4s ease-in-out infinite; }
#mdAside .mds-std-club { display: flex; align-items: center; gap: .4rem; min-width: 0; }
#mdAside .mds-std-club img { width: 1.15rem !important; height: 1.15rem !important; object-fit: contain; flex: 0 0 auto; }
#mdAside .mds-std-club > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mdAside .mds-pos { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: .3rem; background: var(--mb-soft); font-size: .68rem; font-weight: 900; }
#mdAside .mds-pos.has-zone { background: var(--zone); color: #fff; }
#mdAside .mds-std-gap { display: flex; justify-content: center; gap: .2rem; margin: 0 -1rem; padding: .3rem 0; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
#mdAside .mds-std-gap i { width: .22rem; height: .22rem; border-radius: 50%; background: var(--mb-muted); opacity: .6; }
#mdAside .mds-legend { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin-top: .55rem; color: var(--mb-muted); font-size: .64rem; font-weight: 700; }
#mdAside .mds-legend i { display: inline-block; width: .55rem; height: .55rem; margin-right: .3rem; border-radius: .15rem; vertical-align: 0; }

/* Opponent Dossier: last known XI as position lines, shirt numbers in the primary. */
#mdAside .mds-xi-meta { display: flex; align-items: center; gap: .45rem; min-width: 0; margin-bottom: .35rem; color: var(--mb-muted); font-size: .7rem; text-decoration: none; }
#mdAside .mds-xi-meta b { color: var(--mb-ink); font-size: .8rem; font-weight: 900; font-variant-numeric: tabular-nums; }
#mdAside .mds-xi-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mdAside .mds-xi { display: flex; flex-direction: column; gap: .15rem; padding: .45rem .55rem; border-radius: .75rem; background: var(--mb-soft); }
#mdAside .mds-xi-line { display: flex; gap: .5rem; align-items: baseline; font-size: .76rem; line-height: 1.4; }
#mdAside .mds-xi-pos { flex: 0 0 1.6rem; color: var(--mb-muted); font-size: .6rem; font-weight: 900; letter-spacing: .04em; }
#mdAside .mds-xi-names { display: flex; flex-wrap: wrap; gap: .05rem .55rem; min-width: 0; }
#mdAside .mds-xi-p { white-space: nowrap; }
#mdAside .mds-xi-p i { margin-right: .2rem; color: var(--mb-primary-ink); font-size: .66rem; font-style: normal; font-weight: 900; }
#mdAside .mds-xi-p a { color: var(--mb-ink); text-decoration: none; }
#mdAside .mds-xi-p a:hover { text-decoration: underline; }
#mdAside .mds-xi-p small { color: var(--mb-muted); }
/* Away-Day Guide: the ground's photo card (style.css .mds-photo), tiles, flat pills. */
#mdAside .mds-away .mds-tiles { margin-bottom: .6rem; }
#mdAside .mds-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .2rem; }
#mdAside .mds-actions .mb-pill i { color: var(--theme-accent); }
#mdAside .mds-actions .mb-pill--solid i { color: inherit; }
#mdAside .mds-pill-static { cursor: default; }
#mdAside .mds-pill-static:hover { background: var(--mb-soft); }
#mdAside .mds-oaf { margin-top: .1rem; }

/* My Matchday: the checklist as THE row, edge to edge; to-do icons breathe. */
#mdAside .mds-mm .mm { display: flex; flex-direction: column; }
#mdAside .mds-mm .mm-item {
    display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; column-gap: .6rem;
    margin: 0 -1rem; padding: .5rem 1.05rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
    color: var(--mb-ink); text-decoration: none; transition: background-color .18s ease;
}
#mdAside .mds-mm .mm > .mm-item:first-child { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
#mdAside .mds-mm a.mm-item:hover { background: color-mix(in oklab, var(--mb-soft) 70%, transparent); color: var(--mb-ink); }
#mdAside .mds-mm a.mm-item:hover .mm-go { transform: translateX(2px); }
#mdAside .mds-mm .mm-ico { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: rgba(var(--mb-accent-rgb), .16); color: var(--theme-accent); font-size: .85rem; }
#mdAside .mds-mm .mm-item.is-done .mm-ico { background: rgba(var(--mb-ok-rgb, 25, 135, 84), .14); color: var(--mb-ok-ink); }
#mdAside .mds-mm .mm-item.tone-warn .mm-ico { background: rgba(var(--mb-accent-rgb), .22); color: var(--mb-accent-ink); }
#mdAside .mds-mm .mm-item.tone-bad .mm-ico { background: rgba(var(--mb-bad-rgb, 220, 53, 69), .12); color: var(--mb-bad); }
#mdAside .mds-mm .mm-item.tone-muted { opacity: .75; }
#mdAside .mds-mm .mm-item.tone-muted .mm-ico { background: var(--mb-soft-2); color: var(--mb-muted); }
#mdAside .mds-mm .mm-item.is-todo .mm-ico { animation: mdsBreathe 2.4s ease-in-out infinite; }
#mdAside .mds-mm .mm-body { display: flex; flex-direction: column; min-width: 0; }
#mdAside .mds-mm .mm-title { display: flex; align-items: baseline; gap: .35rem; font-size: .84rem; font-weight: 800; line-height: 1.3; }
#mdAside .mds-mm .mm-val { margin-left: auto; font-size: .92rem; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
#mdAside .mds-mm .mm-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .05rem; color: var(--mb-muted); font-size: .7rem; line-height: 1.3; }
#mdAside .mds-mm .mm-sub b { color: var(--mb-ink); font-weight: 800; }
#mdAside .mds-mm .mm-star { color: var(--theme-accent); font-size: .62rem; margin-right: .08rem; }
#mdAside .mds-mm .mm-pts { color: var(--mb-ok-ink); }
#mdAside .mds-mm .mm-break { display: none; }
#mdAside .mds-mm .mm-mini { display: block; height: .25rem; margin-top: .3rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); }
#mdAside .mds-mm .mm-mini > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mb-primary), color-mix(in oklab, var(--mb-primary) 55%, var(--mb-accent))); }
#mdAside .mds-mm .mm-end { display: inline-flex; align-items: center; gap: .3rem; }
#mdAside .mds-mm .mm-tick { color: var(--mb-ok); font-size: .85rem; }
#mdAside .mds-mm .mm-go { color: var(--mb-muted); font-size: .7rem; transition: transform .18s ease; }
#mdAside .mds-mm .mm-guest { display: flex; align-items: flex-start; gap: .6rem; padding: 0 0 .7rem; color: var(--mb-ink); font-size: .8rem; line-height: 1.4; }
#mdAside .mds-mm .mm-guest > i { color: var(--theme-accent); font-size: 1.3rem; margin-top: .1rem; }
#mdAside .mds-mm .mm-guest span { color: var(--mb-muted); }
#mdAside .mds-mm .mm-cta { margin-top: .75rem; }
#mdAside .mds-mm .mm-season { margin-top: .75rem; text-decoration: none; color: inherit; }
#mdAside .mds-mm .mm-season .mds-tile { transition: background-color .18s ease; }
#mdAside .mds-mm .mm-season:hover .mds-tile { background: var(--mb-soft-2); }
#mdAside .mds-mm .mm > .mm-item:last-child { border-bottom: 0; }
/* style.css (7 Oct) inset these rows by 1.55rem and pulled the last one 1rem down: the rows
   now share every panel's 1.05rem inset, and the last sits on this panel's .75rem foot. */
html body .benfica-layout #mdAside .mds-mm > .mm > .mm-item { padding-left: 1.05rem; padding-right: 1.05rem; }
html body .benfica-layout #mdAside .mds-mm > .mm:last-child > .mm-item:last-child { margin-bottom: -.75rem; padding-bottom: calc(.5rem + .75rem); }

/* Rate & Vote: face | name over the stars and the vote share | the average over the vote. */
#mdAside .mds-rating .mdr-note { display: flex; gap: .35rem; margin-bottom: .45rem; color: var(--mb-muted); font-size: .7rem; line-height: 1.35; }
#mdAside .mds-rating .mdr-note i { color: var(--theme-accent); margin: .1rem 0 0 !important; }
#mdAside .mds-rating .mdr-note a { color: var(--mb-primary-ink); font-weight: 800; }
#mdAside .mds-rating .mdr-list { display: flex; flex-direction: column; }
#mdAside .mds-rating .mdr-row {
    display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; column-gap: .6rem;
    margin: 0 -1rem; padding: .45rem 1.05rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
    transition: background-color .18s ease;
}
#mdAside .mds-rating .mdr-list:first-of-type > .mdr-row:first-child { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
#mdAside .mds-rating .mdr-row:hover { background: color-mix(in oklab, var(--mb-soft) 70%, transparent); }
#mdAside .mds-rating .mdr-face { display: inline-flex; align-items: center; justify-content: center; }
#mdAside .mds-rating .mdr-main { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
#mdAside .mds-rating .mdr-top { display: flex; align-items: center; gap: .3rem; min-width: 0; }
#mdAside .mds-rating .mdr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-ink); font-size: .82rem; font-weight: 800; }
#mdAside .mds-rating .mdr-num { margin-right: .3rem; color: var(--mb-primary-ink); font-size: .7rem; font-weight: 900; font-variant-numeric: tabular-nums; }
#mdAside .mds-rating .mdr-lead { flex: 0 0 auto; color: var(--theme-accent); font-size: .72rem; }
#mdAside .mds-rating .mdr-stars { display: flex; gap: .04rem; }
#mdAside .mds-rating .mdr-star { cursor: pointer; font-size: .74rem; line-height: 1; color: var(--mb-soft-2); transition: color .1s, transform .1s; }
#mdAside .mds-rating .mdr-star:hover { transform: scale(1.18); }
#mdAside .mds-rating .mdr-star.on { color: var(--theme-accent); }
#mdAside .mds-rating .mdr-share { display: block; height: .2rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft); }
#mdAside .mds-rating .mdr-share > i { display: block; height: 100%; border-radius: inherit; background: var(--theme-accent); transition: width .6s var(--mb-ease); }
#mdAside .mds-rating .mdr-side { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
#mdAside .mds-rating .mdr-avg { white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1; }
#mdAside .mds-rating .mdr-avg b { color: var(--mb-ink); font-size: .92rem; font-weight: 900; }
#mdAside .mds-rating .mdr-avg i { margin-left: .15rem; color: var(--mb-muted); font-size: .64rem; font-style: normal; }
#mdAside .mds-rating .mdr-bot { display: inline-flex; align-items: center; gap: .3rem; }
#mdAside .mds-rating .mdr-vote {
    display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; padding: 0; border-radius: .4rem; cursor: pointer;
    border: 1px solid rgba(var(--mb-accent-rgb), .55); background: transparent; color: var(--theme-accent); font-size: .64rem;
    transition: background-color .15s ease, transform .15s ease;
}
#mdAside .mds-rating .mdr-vote:hover, #mdAside .mds-rating .mdr-vote.active { background: var(--theme-accent); border-color: var(--theme-accent); color: #1b1b1b; }
#mdAside .mds-rating .mdr-vote:active { transform: scale(.94); }
#mdAside .mds-rating .mdr-vote.is-yours { border-color: var(--mb-ok); color: var(--mb-ok); cursor: default; }
#mdAside .mds-rating .mdr-tally { min-width: 2.9rem; color: var(--mb-muted); font-size: .64rem; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#mdAside .mds-rating .mdr-split { display: flex; align-items: center; gap: .35rem; margin: .7rem 0 .35rem; color: var(--mb-muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#mdAside .mds-rating .mdr-split i { color: var(--theme-accent); }
#mdAside .mds-rating .mdr-split + .mdr-list > .mdr-row:first-child { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
#mdAside .mds-rating .mdr-foot { display: flex; align-items: center; justify-content: center; gap: .35rem; padding-top: .6rem; color: var(--mb-muted); font-size: .74rem; }
#mdAside .mds-rating .mdr-foot i { color: var(--theme-accent); }
#mdAside .mds-rating .mdr-foot span { color: var(--mb-ink); font-weight: 800; }

#mdAside .mds-rating .mdr-stars { min-width: 0; overflow: hidden; }
@media (max-width: 439.98px) {
    #mdAside .mds-rating .mdr-row { column-gap: .5rem; }
    #mdAside .mds-rating .mdr-star { font-size: .6rem; }
    /* The share bar under the stars carries the vote; the count steps aside for the stars. */
    #mdAside .mds-rating .mdr-tally { display: none; }
}
@keyframes mdsBreathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--mb-accent-rgb, 244, 178, 35), .35); } 55% { box-shadow: 0 0 0 .32rem rgba(var(--mb-accent-rgb, 244, 178, 35), 0); } }
@keyframes mdsPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }
@media (max-width: 379.98px) {
    #mdAside .mds-tag > span { display: none; }
    #mdAside .mds-tag { padding: .2rem .4rem; }
    #mdAside .mds-std-row { column-gap: .35rem; grid-template-columns: 1.5rem minmax(0, 1fr) 1.3rem 1.8rem 1.8rem; }
    #mdAside .mds-rating .mdr-star { font-size: .68rem; }
    #mdAside .mds-prog { width: 2.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    #mdAside .mds-mm .mm-item.is-todo .mm-ico, #mdAside .mds-std-row[data-bn-live-row] > span:first-child::after { animation: none; }
    :is(#mdAside, #matchAside) .mds-sq, :is(#mdAside, #matchAside) .mds-go, #mdAside .mds-rating .mdr-star, #mdAside .mds-rating .mdr-share > i, #mdAside .mds-prog-bar > i { transition: none !important; }
}

/* ==========================================================================
   T. Matchday main column (8 Oct 2026: "matchday.php main column should also be more modern
      and dynamic"). The My Benfica card and row, gold icons, squared W/D/L, things that move
      when they change: the live note pulses, a new event lights up, bars grow in, cards lift.
      Scoped to .benfica-layout.md-page (matchday.php); its inline <style> keeps the base
      rules, these refine them. The polling scripts' hooks (#hub-timeline, #hub-stats,
      #hub-chat-*, data-our-side) are untouched.
   ========================================================================== */
.benfica-layout.md-page {
    --md-line: color-mix(in oklab, var(--theme-border, var(--bs-border-color)) 60%, transparent);
    --md-soft: var(--theme-surface-2, var(--bs-tertiary-bg));
    --md-soft-2: var(--theme-surface-3, var(--bs-secondary-bg));
    --md-ink: var(--theme-ink, var(--bs-body-color));
    --md-muted: var(--theme-ink-muted, var(--bs-secondary-color));
    --md-primary-ink: color-mix(in oklab, var(--theme-primary, #C8102E) 80%, var(--md-ink));
    --md-accent-rgb: var(--theme-accent-rgb, 244, 178, 35);
    --md-ease: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
[data-bs-theme="dark"] .benfica-layout.md-page {
    --md-soft: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--bs-tertiary-bg, #1e1e1e));
    --md-soft-2: color-mix(in oklab, var(--theme-ink, #fff) 11%, var(--bs-tertiary-bg, #1e1e1e));
    --md-line: color-mix(in oklab, var(--theme-ink, #fff) 12%, transparent);
    --md-primary-ink: var(--theme-link, var(--md-ink));
}
/* Cards: the standard ring and shadow; a card you can act in lifts a touch on hover. */
.benfica-layout.md-page .bn-main .hub-panel { transition: box-shadow .25s ease, transform .25s ease; }
@media (hover: hover) {
    .benfica-layout.md-page .bn-main :is(.md-events, .md-chat, .md-stats, .md-mw):hover { box-shadow: var(--elev-3, 0 14px 34px rgba(0, 0, 0, .1)); }
}

/* The live note in a section head: a pulsing dot. */
.benfica-layout.md-page .md-live-note { display: inline-flex !important; align-items: center; gap: .35rem; color: var(--theme-danger, #dc3545) !important; text-transform: uppercase; letter-spacing: .05em; }
.benfica-layout.md-page .md-live-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--theme-danger, #dc3545); animation: mdLive 1.4s ease-in-out infinite; }
@keyframes mdLive { 0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, .55); } 70% { box-shadow: 0 0 0 .45rem rgba(220, 53, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } }

/* ---- Match Events: THE row, edge to edge; minute pill | icon chip | text | face -------- */
.benfica-layout.md-page .md-events .hub-event {
    display: grid; grid-template-columns: 2.7rem 2rem minmax(0, 1fr) auto; align-items: center; column-gap: .6rem;
    padding: .55rem 1rem; border-bottom: 1px solid var(--md-line); transition: background-color .18s ease;
}
.benfica-layout.md-page .md-events .hub-event:last-child { border-bottom: 0; }
.benfica-layout.md-page .md-events .hub-event:hover { background: color-mix(in oklab, var(--md-soft) 70%, transparent); }
.benfica-layout.md-page .md-events .hub-event-minute {
    flex: none; justify-self: start; min-width: 2.5rem; padding: .14rem .4rem; border-radius: 999px; text-align: center;
    background: rgba(var(--theme-primary-rgb, 200, 16, 46), .1); color: var(--md-primary-ink);
    font-size: .72rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.benfica-layout.md-page .md-events .hub-event-minute:empty { background: transparent; }
.benfica-layout.md-page .md-events .hub-event-icon {
    width: 2rem; height: 2rem; border-radius: .6rem; display: inline-grid; place-items: center;
    background: var(--md-soft); font-size: .85rem;
}
.benfica-layout.md-page .md-events .hub-event[data-type="goal"] .hub-event-icon { background: rgba(var(--theme-success-rgb, 25, 135, 84), .14); }
.benfica-layout.md-page .md-events .hub-event[data-type="own_goal"] .hub-event-icon,
.benfica-layout.md-page .md-events .hub-event[data-type$="red_card"] .hub-event-icon,
.benfica-layout.md-page .md-events .hub-event[data-type="double_yellow"] .hub-event-icon { background: rgba(var(--theme-danger-rgb, 220, 53, 69), .12); }
.benfica-layout.md-page .md-events .hub-event[data-type$="yellow_card"] .hub-event-icon { background: rgba(var(--md-accent-rgb), .2); }
.benfica-layout.md-page .md-events .hub-event[data-type="goal"] .hub-event-title { font-size: .9rem; }
.benfica-layout.md-page .md-events .hub-event-title { color: var(--md-ink); font-weight: 800; font-size: .86rem; line-height: 1.3; }
.benfica-layout.md-page .md-events .hub-event-desc { color: var(--md-muted); font-size: .76rem; line-height: 1.35; }
.benfica-layout.md-page .md-events .hub-event-bubble { margin-left: 0; }
/* A new event lights up, then settles (the script marks it .is-new on the poll it arrives). */
.benfica-layout.md-page .md-events .hub-event.is-new { animation: mdEvIn .9s var(--md-ease) both; }
@keyframes mdEvIn { 0% { opacity: 0; transform: translateY(-6px); background: rgba(var(--md-accent-rgb), .28); } 60% { opacity: 1; transform: none; background: rgba(var(--md-accent-rgb), .18); } 100% { background: transparent; } }
.benfica-layout.md-page .md-events #hub-timeline > .text-muted { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.4rem 1rem !important; }

/* ---- Fan Chat: rounder bubbles, a solid avatar, the locked state as a card ------------- */
.benfica-layout.md-page .md-chat .hub-chat-avatar { background: var(--theme-primary, #C8102E); color: var(--theme-on-primary, #fff); box-shadow: 0 0 0 2px var(--theme-surface, #fff); }
.benfica-layout.md-page .md-chat .hub-chat-bubble { border-radius: 1rem 1rem 1rem .3rem; background: var(--md-soft); color: var(--md-ink); animation: mdBubble .3s var(--md-ease) both; }
.benfica-layout.md-page .md-chat .hub-chat-row-mine .hub-chat-bubble { border-radius: 1rem 1rem .3rem 1rem; background: rgba(var(--theme-primary-rgb, 200, 16, 46), .12); }
@keyframes mdBubble { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
.benfica-layout.md-page .md-chat .input-group .form-control { border-radius: 999px 0 0 999px; }
.benfica-layout.md-page .md-chat .input-group .btn { border-radius: 0 999px 999px 0; box-shadow: none; }
.benfica-layout.md-page .md-lock {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    padding: 1.6rem 1.2rem; text-align: center; color: var(--md-muted);
}
.benfica-layout.md-page .md-lock .fw-semibold { color: var(--md-ink); font-weight: 800 !important; }
.benfica-layout.md-page .md-lock-ico {
    display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .35rem; border-radius: 1rem;
    background: rgba(var(--md-accent-rgb), .16); color: var(--theme-accent); font-size: 1.15rem;
}
.benfica-layout.md-page .md-cd {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .55rem; padding: .3rem .8rem; border-radius: 999px;
    background: var(--md-soft); color: var(--md-muted); font-size: .74rem; font-weight: 700;
}
.benfica-layout.md-page .md-cd i { color: var(--theme-accent); }
.benfica-layout.md-page .md-cd b { color: var(--md-ink); font-weight: 900; font-variant-numeric: tabular-nums; }

/* ---- Match Stats: taller bars that grow in from the middle label ---------------------- */
.benfica-layout.md-page .md-stats .hub-stat-row { padding: .55rem 1rem; border-bottom-color: var(--md-line); grid-template-columns: 2.2rem 1fr 7rem 1fr 2.2rem; }
.benfica-layout.md-page .md-stats .hub-stat-value { font-size: .98rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--md-ink); }
.benfica-layout.md-page .md-stats .hub-stat-label { font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--md-muted); }
.benfica-layout.md-page .md-stats .hub-stat-bar { height: .55rem; background: var(--md-soft); }
.benfica-layout.md-page .md-stats .hub-stat-bar > span { transition: width .6s var(--md-ease); animation: mdBarL .8s var(--md-ease) both; transform-origin: left; }
.benfica-layout.md-page .md-stats .hub-stat-bar-left > span { transform-origin: right; }
.benfica-layout.md-page .md-stats .hub-stat-bar-our > span { background: linear-gradient(90deg, var(--theme-gradient-start, var(--theme-primary)), var(--theme-gradient-end, var(--theme-primary))); }
.benfica-layout.md-page .md-stats .hub-stat-bar-opp > span { background: color-mix(in oklab, var(--md-muted) 75%, var(--md-ink)); }
@keyframes mdBarL { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- Facts (Match Facts / Build-Up / Last time out): the fact cards ARE the cards ------- */
.benfica-layout.md-page .md-facts .mf-grid, .benfica-layout.md-page .md-facts .mf-wrap { gap: .6rem; }
.benfica-layout.md-page .md-facts .mf-card {
    border: 0; border-radius: .9rem; padding: .6rem .8rem .6rem .75rem;
    background: var(--theme-surface, var(--bs-body-bg)); box-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06));
}
[data-bs-theme="dark"] .benfica-layout.md-page .md-facts .mf-card { background: var(--bs-tertiary-bg, #1e1e1e); }
.benfica-layout.md-page .md-facts .mf-card::before { display: none; }
.benfica-layout.md-page .md-facts .mf-card.mf-lead { background: linear-gradient(100deg, color-mix(in oklab, var(--mf-tone, var(--theme-ink-faint)) 13%, var(--theme-surface, var(--bs-body-bg))) 0%, var(--theme-surface, var(--bs-body-bg)) 70%); }
[data-bs-theme="dark"] .benfica-layout.md-page .md-facts .mf-card.mf-lead { background: linear-gradient(100deg, color-mix(in oklab, var(--mf-tone, var(--theme-ink-faint)) 18%, var(--bs-tertiary-bg, #1e1e1e)) 0%, var(--bs-tertiary-bg, #1e1e1e) 70%); }
@media (hover: hover) {
    .benfica-layout.md-page .md-facts .mf-card:hover { transform: translateY(-2px); box-shadow: var(--elev-3, 0 14px 34px rgba(0, 0, 0, .1)); }
}
.benfica-layout.md-page .md-facts .mf-chip { width: 2rem; height: 2rem; border-radius: .65rem; font-size: .85rem; }
.benfica-layout.md-page .md-facts .mf-body { font-size: .85rem; }
.benfica-layout.md-page .md-facts .mf-lead .mf-body { font-size: .95rem; }
.benfica-layout.md-page .md-facts > .md-panel-tools { padding: 0 0 .6rem; }

/* ---- Milestone Watch: THE row in one card (no stripes), the bar grows in -------------- */
.benfica-layout.md-page .md-mw .mw-list { gap: 0; }
.benfica-layout.md-page .md-mw .mw-card {
    gap: .6rem; padding: .55rem 1rem; border: 0; border-bottom: 1px solid var(--md-line); border-radius: 0; background: transparent;
}
.benfica-layout.md-page .md-mw .mw-card:last-child { border-bottom: 0; }
.benfica-layout.md-page .md-mw .mw-card::before { display: none; }
.benfica-layout.md-page .md-mw .mw-card:hover { background: color-mix(in oklab, var(--md-soft) 70%, transparent); }
.benfica-layout.md-page .md-mw .mw-ico { width: 2rem; height: 2rem; border-radius: .6rem; background: rgba(var(--md-accent-rgb), .16) !important; color: var(--theme-accent) !important; font-size: .85rem; }
.benfica-layout.md-page .md-mw .mw-title { font-size: .84rem; }
.benfica-layout.md-page .md-mw .mw-title a { font-weight: 800; }
.benfica-layout.md-page .md-mw .mw-prog { height: .32rem; background: var(--md-soft); }
.benfica-layout.md-page .md-mw .mw-prog span { background: linear-gradient(90deg, var(--theme-primary, #C8102E), color-mix(in oklab, var(--theme-primary, #C8102E) 55%, var(--theme-accent, #F4B223))); animation: mdBarL 1s var(--md-ease) both; transform-origin: left; }
.benfica-layout.md-page .md-mw .mw-badge { border-radius: 999px; }

/* ---- Squad Availability: the splash on the club gradient with count-ups; the out list and
        the position groups as standard cards with THE row inside (no stripes, gold icons). */
.benfica-layout.md-page .md-avail-summary { border-radius: var(--theme-radius-lg, 1.1rem); background: linear-gradient(135deg, var(--theme-gradient-start, #e8112c), var(--theme-gradient-end, #9c0f18)); box-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06)); }
.benfica-layout.md-page .md-avail-gauge-num b { font: inherit; }
.benfica-layout.md-page .md-avail-bar > span { animation: none; transition: width 1s var(--md-ease); background: linear-gradient(90deg, #4ade80, #bbf7d0); }
.benfica-layout.md-page .md-avail-stat { gap: .1rem; border: 0; background: rgba(255, 255, 255, .14); border-radius: .85rem; min-width: 4.8rem; }
.benfica-layout.md-page .md-avail-stat i { font-size: .8rem; opacity: .9; color: var(--theme-accent-on-primary, #F4B223); }
.benfica-layout.md-page .md-avail-outhead { gap: .45rem; color: var(--md-muted); font-size: .64rem; font-weight: 800; letter-spacing: .06em; }
.benfica-layout.md-page .md-avail-outhead i { color: var(--theme-accent); }
.benfica-layout.md-page .md-avail-outcount { margin-left: 0; background: var(--md-soft); color: var(--md-ink); }
.benfica-layout.md-page .md-avail-outgrid { gap: .6rem; }
.benfica-layout.md-page .md-avail-outcard {
    gap: .6rem; padding: .55rem .75rem; border: 0; border-radius: .9rem;
    background: var(--theme-surface, var(--bs-body-bg)); box-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06));
}
[data-bs-theme="dark"] .benfica-layout.md-page :is(.md-avail-outcard, .md-avail-group) { background: var(--bs-tertiary-bg, #1e1e1e); }
.benfica-layout.md-page .md-avail-outcard:hover { box-shadow: var(--elev-3, 0 14px 34px rgba(0, 0, 0, .1)); }
.benfica-layout.md-page .md-avail-tag { flex: 0 0 auto; padding: .14rem .5rem; border-radius: 999px; font-size: .66rem; font-weight: 800; white-space: nowrap; }
.benfica-layout.md-page .md-avail-tag.is-injured { background: rgba(var(--theme-danger-rgb, 220, 53, 69), .12); color: var(--theme-danger, #dc3545); }
.benfica-layout.md-page .md-avail-tag.is-suspended { background: rgba(var(--theme-danger-rgb, 220, 53, 69), .12); color: var(--theme-danger, #dc3545); }
.benfica-layout.md-page .md-avail-tag.is-doubt { background: rgba(var(--md-accent-rgb), .2); color: color-mix(in oklab, var(--theme-accent, #F4B223) 62%, var(--md-ink)); }
.benfica-layout.md-page .md-avail-tag.is-international_duty { background: rgba(var(--theme-info-rgb, 13, 202, 240), .14); color: color-mix(in oklab, var(--theme-info, #0dcaf0) 60%, var(--md-ink)); }
.benfica-layout.md-page .md-avail-tag.is-unavailable { background: var(--md-soft); color: var(--md-muted); }
[data-bs-theme="dark"] .benfica-layout.md-page .md-avail-tag:is(.is-injured, .is-suspended) { color: color-mix(in oklab, var(--theme-danger, #dc3545) 58%, white); }
.benfica-layout.md-page .md-avail-groups { gap: 1rem; }
.benfica-layout.md-page .md-avail-group { border: 0; border-radius: var(--theme-radius-lg, 1.1rem); background: var(--theme-surface, var(--bs-body-bg)); box-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06)); }
.benfica-layout.md-page .md-avail-group:hover { box-shadow: var(--elev-3, 0 14px 34px rgba(0, 0, 0, .1)); }
.benfica-layout.md-page .md-avail-group-head {
    gap: .55rem; padding: .6rem 1rem; border-bottom: 1px solid var(--md-line); background: none;
    color: var(--md-ink); font-size: .84rem; font-weight: 900; letter-spacing: 0; text-transform: none;
}
.benfica-layout.md-page .md-avail-group-ico { width: 2rem; height: 2rem; border-radius: .6rem; background: rgba(var(--md-accent-rgb), .16); color: var(--theme-accent); font-size: .85rem; }
.benfica-layout.md-page .md-avail-count { background: var(--md-soft); color: var(--md-ink); font-variant-numeric: tabular-nums; }
.benfica-layout.md-page .md-avail-player { gap: .6rem; padding: .42rem 1rem; border-bottom: 1px solid var(--md-line); transition: background-color .18s ease; }
.benfica-layout.md-page .md-avail-player:hover { padding-left: 1rem; background: color-mix(in oklab, var(--md-soft) 70%, transparent); }
.benfica-layout.md-page .md-avail-num { flex: 0 0 auto; min-width: 1.6rem; margin-right: -.2rem; color: var(--md-primary-ink); font-size: .72rem; font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; }
.benfica-layout.md-page .md-avail-name { font-weight: 700; }
.benfica-layout.md-page .md-avail-player .fa-circle-question { color: var(--theme-accent) !important; }

/* ---- Line-ups: the blocks under the pitch get standard captions, rows and coach rows ----- */
.benfica-layout.md-page .md-lineups .mdc-block { margin-top: 1rem; padding-top: 0; border-top: 0; }
.benfica-layout.md-page .md-lineups .mdc-block-h {
    display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; text-align: left;
    color: var(--md-muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.benfica-layout.md-page .md-lineups .mdc-block-h i { color: var(--theme-accent); font-size: .9em; }
.benfica-layout.md-page .md-lineups .mdc-subs { column-gap: 0; border-top: 1px solid var(--md-line); }
.benfica-layout.md-page .md-lineups .mdc-sub-row { gap: .6rem; padding: .42rem .5rem; border-bottom-color: var(--md-line); border-radius: 0; }
.benfica-layout.md-page .md-lineups .mdc-sub-row:hover { background: color-mix(in oklab, var(--md-soft) 70%, transparent); }
.benfica-layout.md-page .md-lineups .mdc-sub-num { color: var(--md-primary-ink); font-weight: 900; font-variant-numeric: tabular-nums; }
.benfica-layout.md-page .md-lineups .mdc-sub-nm { font-weight: 700; }
.benfica-layout.md-page .md-lineups .mdc-sub-on { padding: .1rem .45rem; border-radius: 999px; background: rgba(var(--theme-success-rgb, 25, 135, 84), .12); color: var(--theme-success-strong, #146c43); }
[data-bs-theme="dark"] .benfica-layout.md-page .md-lineups .mdc-sub-on { color: color-mix(in oklab, var(--theme-success, #198754) 58%, white); }
.benfica-layout.md-page .md-lineups .mdc-coaches { gap: .6rem; }
.benfica-layout.md-page .md-lineups .mdc-coach-card {
    flex-direction: row; justify-content: flex-start; gap: .65rem; padding: .55rem .75rem; text-align: left;
    border-radius: .9rem; background: var(--md-soft);
}
.benfica-layout.md-page .md-lineups .mdc-coach-card:empty { display: none; }
.benfica-layout.md-page .md-lineups .mdc-coach-av { width: 2.2rem; height: 2.2rem; }
.benfica-layout.md-page .md-lineups .mdc-coach-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; font-weight: 800; }
.benfica-layout.md-page .md-lineups .mdc-coach-role { flex: 0 0 auto; padding: .1rem .5rem; border-radius: 999px; background: var(--theme-surface, var(--bs-body-bg)); font-size: .66rem; font-weight: 800; }
@media (max-width: 420px) { .benfica-layout.md-page .md-lineups .mdc-coaches { grid-template-columns: 1fr; } }

/* ---- The event toast (matchday-hub.js showEventToast) ---------------------------------- */
.md-toast {
    display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 1rem;
    background: #17181b; color: #fff; font-size: .88rem; box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}
.md-toast-ico { flex: 0 0 auto; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .7rem; background: rgba(255, 255, 255, .1); }
.md-toast[data-type="goal"] .md-toast-ico { background: rgba(25, 135, 84, .3); }

@media (max-width: 575.98px) {
    .benfica-layout.md-page .md-events .hub-event { grid-template-columns: 2.5rem 1.8rem minmax(0, 1fr) auto; column-gap: .5rem; padding: .5rem .8rem; }
    .benfica-layout.md-page .md-events .hub-event-icon { width: 1.8rem; height: 1.8rem; }
    .benfica-layout.md-page .md-stats .hub-stat-row { grid-template-columns: 1.9rem 1fr 5.6rem 1fr 1.9rem; gap: .4rem; padding: .5rem .8rem; }
    .benfica-layout.md-page .md-avail-player { padding-left: .85rem; padding-right: .85rem; }
    /* The three counts stay one row on a phone. */
    .benfica-layout.md-page .md-avail-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: .45rem; }
    .benfica-layout.md-page .md-avail-stat { min-width: 0; padding: .45rem .3rem; }
    .benfica-layout.md-page .md-avail-stat small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
    .benfica-layout.md-page :is(.md-live-dot, .md-events .hub-event.is-new, .md-chat .hub-chat-bubble, .md-stats .hub-stat-bar > span, .md-mw .mw-prog span) { animation: none !important; }
    .benfica-layout.md-page .bn-main .hub-panel, .benfica-layout.md-page .md-facts .mf-card { transition: none; }
}
[data-bs-theme="dark"] .benfica-layout.md-page .md-events .hub-event-minute { background: rgba(var(--theme-primary-rgb, 200, 16, 46), .26); color: #fff; }
/* A ground with no photo: its long name ends in an ellipsis inside the card. */
:is(#mdAside, #matchAside) .mds-photo.is-empty .mds-cap { max-width: calc(100% - 2rem); }