.match-actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Series table: the sticky header stays above the rows' coloured left bars
   (WIN/LIVE, z-10), which otherwise scroll over it. */
.table-header-sticky { z-index: 20; }
/* The table sits 1px border + 2px margin inside the panel: rounded that much
   less, so no light sliver shows in the corners next to the dark header. The
   panel's spotlight band (style.css: 2px + 2px * --s, floored to device
   pixels) is never narrower than that gap, so it reaches the table with no
   seam; its z-index keeps it over the table, whose container query makes it a
   stacking context. */
.table-outer { border-radius: calc(0.75rem - 1px - 2px * var(--s)); }

/* Beside the heroes (md+) an empty column balances their left inset, so they stay
   centred; its top padding is the team titles' room. */
@media (min-width: 768px) {
    .match-actions { padding-top: calc(26.5px * var(--s)); }
}

@media (max-width: 639px) {
    .match-details-layout {
        row-gap: 12px;
    }
}

/* A map's full statistics, a button under the map: on its own page (live_match.html) and
   under a finished map's details on the dashboard (renderMatchDetails). In capitals; the
   label's box is trimmed to them (text-box), so centring it centres the letters, not a line
   with room for descenders, and they sit level with the chevron. On hover the site's
   spotlight outline (style.css .spotlight-border), positioned against the button. */
.lp-detail-row { display: flex; justify-content: center; margin-top: calc(16px * var(--s)); }
.match-detail-row { margin-top: 0; padding-bottom: calc(20px * var(--s)); }
.lp-detail-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--s));
    min-height: calc(44px * var(--s));
    padding: 0 calc(16px * var(--s)) 0 calc(20px * var(--s));
    /* The hero cards' border (hero-card.css), as quiet as theirs. */
    border: 1px solid rgba(51, 65, 85, .55);
    border-radius: .5rem;
    background: var(--lp-surface, #0e1526);
    color: #e2e8f0;
    font-size: max(12px, calc(13px * var(--s)));
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.lp-detail-text { text-box: trim-both cap alphabetic; }
.lp-detail-link svg { width: calc(20px * var(--s)); height: calc(20px * var(--s)); flex: none; transition: transform .15s ease; }
.lp-detail-link:hover { border-color: rgba(129, 140, 248, .55); color: #fff; }
.lp-detail-link:hover svg { color: #a5b4fc; transform: translateX(2px); }
.lp-detail-link:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }

/* An item's slot: the hero cards' tiles (hero-card.css) and the phone roster's row. */
.hero-item-slot { display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 34 / 26; overflow: hidden; border: 1px solid #334155; border-radius: 3px; background: #101827; }
.hero-item-slot.empty { border-color: #293548; background: #111927; }
.hero-item-slot.neutral { margin-left: 2px; border-color: rgba(158, 143, 239, .38); box-shadow: 0 0 0 1px rgba(158, 143, 239, .06), 0 0 7px rgba(158, 143, 239, .10); }
.hero-item-slot.neutral.empty { border-color: rgba(158, 143, 239, .28); }
.hero-item { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-item-fallback { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #94a3b8; font: 9px 'Inter', sans-serif; }

/* 640–767px: the heroes drop the left inset that balances the empty column on wider
   screens and stay centred. */
@media (min-width: 640px) and (max-width: 767px) {
    .match-details-layout .grid-cols-2 { padding-left: 0; }
}

/* A team's hero cards fit their column's width (hero-card.css). */
.hero-column { container-type: inline-size; }

/* Tablets: the heroes in two columns over the panel, as on desktops but without the
   empty column and the insets that balance it there; the panel's edges and the
   columns' gap a little narrower, for the cards (hero-card.css). */
@media (min-width: 640px) and (max-width: 1050px) {
    .match-details-layout { padding-right: .75rem; padding-left: .75rem; }
    .match-details-layout > .grid,
    .live-main > .grid { column-gap: 1rem; padding-left: 0; }
    .match-actions { display: none; }
}