.match-stats-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: calc(40px * var(--s));
    height: calc(40px * var(--s));
    margin-inline: auto;
    border: 1px solid rgba(51, 65, 85, 0.5);
    border-radius: calc(8px * var(--s));
    background: rgba(30, 41, 59, 0.5);
    color: #cbd5e1;
    box-shadow: none;
    text-decoration: none;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.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; }
/* ── Glass panel edge ──
   The coloured spotlight near the cursor starts at the outer edge of the grey
   1px border and covers it and the 2px gap inside, reaching half a pixel over
   the content so the rounded edges leave no seam. It used to start inside the
   border (a grey and a coloured line). Its width is padding, not border:
   borders snap to whole pixels and left a hairline. The content-box mask keeps
   its inner edge rounded; z-index keeps it over the table, whose container
   query makes it a stacking context. */
.glass-panel::before {
    inset: -1px;
    z-index: 1;
    border: 0;
    padding: calc(1.5px + 2px * var(--s));
    background-origin: border-box;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
/* 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. */
.table-outer { border-radius: calc(0.75rem - 1px - 2px * var(--s)); }

.match-stats-link svg {
    width: calc(21px * var(--s));
    height: calc(21px * var(--s));
    flex: 0 0 auto;
}

.match-stats-label {
    display: none;
}

/* Beside the heroes (md+): the match's stats link as large as a hero card
   (hero-card.css) and level with the third. The column spans the team titles and
   the cards; its top padding, the titles' room, puts its middle at the cards'. */
@media (min-width: 768px) {
    .match-actions { padding-top: calc(26.5px * var(--s)); }
    .match-stats-link { width: calc(64px * var(--s)); height: calc(64px * var(--s)); border-radius: calc(10px * var(--s)); }
    .match-stats-link svg { width: calc(28px * var(--s)); height: calc(28px * var(--s)); }
}

/* The Dotabuff link is hidden for now; its markup and styles stay (renderMatchDetails).
   Beside the heroes (md+) its column keeps its room, so the heroes stay centred;
   under them (below md) the empty row goes too. */
.match-stats-link { display: none; }
@media (max-width: 767px) {
    .match-actions { display: none; }
}

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

    .match-actions { width: 100%; align-items: stretch; }

    .match-stats-link {
        width: 100%;
        height: 42px;
        gap: 10px;
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
    }

    .match-stats-label {
        display: inline;
    }
}

.match-stats-link:hover,
.match-stats-link:focus-visible {
    background: #1e293b;
}

.match-stats-link:focus-visible {
    outline: 2px solid var(--accent-glow);
    outline-offset: 3px;
}

.match-stats-link:active {
    background: #1e293b;
}

@media (prefers-reduced-motion: reduce) {
    .match-stats-link {
        transition: none;
    }
}

/* 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 action column moves under the heroes, so the heroes drop the
   left inset that balances it on wider screens and stay centred. */
@media (min-width: 640px) and (max-width: 767px) {
    .match-details-layout .grid-cols-2 { padding-left: 0; }
    /* Under the heroes the buttons sit in one centred row, with their labels. */
    .match-actions { flex-direction: row; width: 100%; }
    .match-stats-link { width: auto; height: 36px; margin-inline: 0; padding: 0 14px; gap: 8px; font-size: 12px; font-weight: 500; line-height: 1; }
    .match-stats-label { display: inline; }
}

/* 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
   insets that balance the action column there (its link is hidden); 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; }
}