/* Head 2 Head (under Preparation). Uses the colour/spacing variables from index.css. */

.h2h-page {
    max-width: 2400px;
    margin: 0 auto;
    padding: 56px var(--pad) 96px;
}

.page-head {
    margin-bottom: 28px;
    text-align: center;
}

.eyebrow {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
}

.page-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 60px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
}

.page-lead {
    margin: 10px auto 0;
    max-width: 640px;
    color: var(--text-dim);
}

.notice--error {
    padding: 12px 16px;
    margin-bottom: 16px;
    background: rgba(255, 122, 122, 0.08);
    border: 1px solid rgba(255, 122, 122, 0.35);
    border-radius: var(--radius-sm);
    color: #ff7a7a;
    font-size: 14px;
    font-weight: 600;
}

/* A plain button that opens the filters popup (see the <dialog> styles further down) - it used
   to be a column in the dashboard; taking it out gives the data columns that width back. */
.h2h-filters-btn {
    margin-bottom: 16px;
}

/* ---------- one wide dashboard row: A's 3 columns | centre | B's 3 columns ---------- */

.h2h-dashboard {
    /* No 1fr anywhere: an flexible (fr) track always claims its full share of leftover grid
       width even when its content doesn't need it - that's what kept leaving empty space
       (first inside the solo column, then pushed into the Matches columns once those became
       the only 1fr tracks left). Every column now sizes to its own content and stops, and the
       grid itself shrinks to fit (width: fit-content) instead of stretching to fill the page. */
    display: grid;
    grid-template-columns: fit-content(380px) fit-content(280px) fit-content(480px) 240px fit-content(380px) fit-content(280px) fit-content(480px);
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    gap: 16px;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 8px;
    /* Still scrollable sideways on a narrow window (drag, trackpad, shift+wheel) - just without
       the browser's own scrollbar track/arrows cluttering the bottom of the page. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.h2h-dashboard::-webkit-scrollbar {
    display: none;
}

.h2h-page {
    overflow-x: auto;
}

.h2h-col,
.h2h-center {
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    /* Nothing (a logo, an icon) can visually poke past the card's own rounded corner. */
    overflow: hidden;
}

.h2h-col h3 {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text);
}

/* ---------- centre strip: Team A pick, a divider, the map, a divider, Team B pick ---------- */

.h2h-center {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.h2h-center-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.h2h-teampick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
}

.h2h-teampick-row select {
    flex: 1 1 60px;
    min-width: 0;
    padding: 5px 4px;
    font-size: 11px;
}

.h2h-team-select {
    width: 100%;
    font-weight: 700;
    font-family: var(--font-display);
    text-align: center;
    text-transform: uppercase;
}

.h2h-center select,
.h2h-center input {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color-scheme: dark;
    padding: 7px 8px;
    font-size: 13px;
}

.h2h-center-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

/* A clear arrow pointing at whichever team's 3 columns that divider sits next to - the top one
   points left at Team A's columns, the bottom one points right at Team B's. */
.h2h-center-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 0;
}

.h2h-center-arrow {
    font-size: 15px;
    line-height: 1;
    color: var(--primary);
}

.h2h-center-arrow-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.h2h-center-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.h2h-center-map .fld {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h2h-center-map .fld span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.h2h-center-mapimg {
    width: 100%;
    aspect-ratio: 1 / 2;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

#swapBtn {
    margin-top: 4px;
}

#setCount {
    font-size: 12px;
}

/* ---------- filters popup ---------- */

.h2h-filters-dialog {
    width: min(520px, 92vw);
    padding: 22px 24px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
}

.h2h-filters-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.h2h-filters-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.h2h-filters-dialog-head h2 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
}

.h2h-filters-dialog-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 8px 0 4px;
}

.h2h-filters-dialog .fld {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h2h-filters-dialog .fld span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.h2h-sidebar-heading {
    margin-top: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.h2h-filters-dialog select,
.h2h-filters-dialog input {
    width: 100%;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color-scheme: dark;
}

.h2h-toggles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0 0;
    margin-top: 10px;
    border: 0;
    border-top: 1px solid var(--border);
}

.h2h-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
}

.h2h-toggle input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.h2h-toggle span {
    flex: 0 1 auto;
}

.h2h-credit {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 560px) {
    .h2h-filters-dialog-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- table content shared by both sides' columns ---------- */

/* Auto width, not 100%: a table with only 1 icon (Brawlers) is naturally narrower than one with
   2 (Duos) - stretching either to fill the whole column is what was spreading the Picks/Win Rate
   cells apart from the picture with a big gap. Left it hugs its own content instead. */
.h2h-table {
    width: auto;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 12px;
}

/* "Win Rate" must never wrap onto 2 lines - if it does, that header row gets taller than the
   Brawlers table's next to it, and every row below ends up misaligned between the two. Both this
   and every data row below get a FIXED height (matched by .h2h-matchtable-head/.h2h-matchrow in
   the Recent Matches column), so a given row number lines up at the same Y in all 3 columns. */
.h2h-table th {
    height: 22px;
    box-sizing: border-box;
    text-align: left;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.h2h-table th:not(:first-child),
.h2h-table td.h2h-num {
    text-align: right;
}

/* The Duo column's header sits over a 2-chip pair, not a single icon+name like the other
   first-column headers - centering it over the pair reads better than hugging the left edge. */
.h2h-table th.h2h-th-duo {
    text-align: center;
}

/* Sortable headers (picksort.js): Picks / Win rate sort their table, a roster player's name shows only that player's brawlers. The header
   keeps its fixed height and the arrow sits in the gap beside the column (absolute), so nothing shifts when the sort changes. */
.h2h-sort {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
}

.h2h-sort:hover {
    color: var(--text);
}

.h2h-sort:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 3px;
}

.h2h-sort[data-dir],
.h2h-sort[aria-pressed="true"] {
    color: var(--primary);
}

.h2h-sort[aria-pressed="true"] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.h2h-sort[data-dir]::after {
    content: '';
    position: absolute;
    left: calc(100% + 3px);
    top: 50%;
    margin-top: -2px;
    border: 3px solid transparent;
    border-top: 4px solid currentColor;
    border-bottom: 0;
}

.h2h-sort[data-dir="asc"]::after {
    border-top: 0;
    border-bottom: 4px solid currentColor;
}

/* "Most Picked - Nowy": one line that never widens its column (a longer name is cut short; the full title is on hover) */
.h2h-col h3.h2h-col-title--clip {
    width: 0;
    min-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.h2h-table td {
    height: 48px;
    box-sizing: border-box;
    padding: 3px 6px;
    border-top: 1px solid var(--border);
    vertical-align: middle;
}

.h2h-table td:first-child {
    padding-left: 0;
    padding-right: 8px;
    white-space: nowrap;
}

.h2h-table td:last-child {
    padding-right: 0;
}

.h2h-num {
    text-align: right;
    font-size: 16px;
    font-weight: 800;
    font-family: var(--font-display);
    white-space: nowrap;
}

/* Per-player pick counts on the Most Picked table are a secondary stat next to Picks/Win
   rate, so they're smaller and plainer instead of competing with those for attention. */
.h2h-player-count {
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--text-dim);
    line-height: 1;
}

.h2h-pct--good { color: var(--primary); }
.h2h-pct--mid  { color: #e0c53f; }
.h2h-pct--bad  { color: #ff7a7a; }
/* a win rate: one colour per percent from red (38 and under) through amber and yellow (50) to green (62 and over) - winColor() in the scripts */
.h2h-pct--w38 { color: #f04c4c; } .h2h-pct--w39 { color: #f0594c; } .h2h-pct--w40 { color: #f0644c; } .h2h-pct--w41 { color: #f0724c; }
.h2h-pct--w42 { color: #f07d4c; } .h2h-pct--w43 { color: #f08b4c; } .h2h-pct--w44 { color: #f0994c; } .h2h-pct--w45 { color: #f0a44c; }
.h2h-pct--w46 { color: #f0b14c; } .h2h-pct--w47 { color: #f0bc4c; } .h2h-pct--w48 { color: #f0ca4c; } .h2h-pct--w49 { color: #f0d54c; }
.h2h-pct--w50 { color: #f0e34c; } .h2h-pct--w51 { color: #f0ee4c; } .h2h-pct--w52 { color: #ebf04c; } .h2h-pct--w53 { color: #e0f04c; }
.h2h-pct--w54 { color: #d5f04c; } .h2h-pct--w55 { color: #caf04c; } .h2h-pct--w56 { color: #bff04c; } .h2h-pct--w57 { color: #b7f04c; }
.h2h-pct--w58 { color: #acf04c; } .h2h-pct--w59 { color: #a1f04c; } .h2h-pct--w60 { color: #99f04c; } .h2h-pct--w61 { color: #8ef04c; }
.h2h-pct--w62 { color: #83f04c; }

/* A brawler's picture (uploaded in Admin > Brawlers), or a 3-letter fallback if it has none yet -
   either way a small, fixed-size circle, so a row of 3 or 6 never wraps onto its own lines. */
.h2h-brawler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
}

.h2h-brawler--text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.h2h-brawler-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A pick made by someone other than the official roster's players (a sub/pick-up) - greyed
   out so the regulars' own picks stand out at a glance (toggle in Filters). */
.h2h-brawler--sub .h2h-brawler-icon {
    filter: grayscale(1);
    opacity: 0.55;
}

.h2h-brawler--sub.h2h-brawler--text {
    opacity: 0.55;
}

.h2h-duo {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* One row: this team's 3 picks | score | the opponent's 3 picks | who the opponent was. The blank
   head spacer and the fixed row height match the Brawlers/Duos tables' 22px header and 42px rows
   exactly, so row N here lines up with row N over there. */
.h2h-matchtable {
    display: flex;
    flex-direction: column;
}

/* Flex, not grid: a grid's "auto" columns can grow to soak up the row's own leftover width
   (the same trap fixed elsewhere on this page) - flex just sizes each part to its own content,
   and the player labels line up with the row below simply by sharing the same left padding. */
.h2h-matchtable-head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 22px;
    padding: 0 8px 0 4px;
}

.h2h-matchrow {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    box-sizing: border-box;
    padding: 3px 8px 3px 4px;
    border-radius: 4px;
}

.h2h-matchrow:nth-child(even) {
    background: var(--surface-2);
}

/* Our own side: one fixed-width slot per official roster player, in the same order as the
   header labels above, so a given slot always means the same player down the whole column. */
.h2h-match-ours {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
}

.h2h-match-playerlabel {
    width: 48px;
    flex-shrink: 0;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
}

/* Nobody filled this slot this set (rarer - e.g. a 4-player roster with only 3 in the game) -
   an empty space the same size as a brawler icon, so the columns don't shift row to row. */
.h2h-brawler--empty {
    width: 48px;
    height: 36px;
    flex-shrink: 0;
}

.h2h-match-score {
    flex-shrink: 0;
    min-width: 46px;
    text-align: center;
    font-weight: 800;
    font-family: var(--font-display);
    font-size: 14px;
}

.h2h-match-score--extra {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: help;
}

.h2h-score-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.h2h-extra-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    white-space: nowrap;
}

.h2h-score-wrap:hover .h2h-extra-popup,
.h2h-score-wrap.is-open .h2h-extra-popup {
    display: block;
}

.h2h-extra-popup-title {
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}

/* when the set was played, under the title of the unknown team's popup */
.h2h-unknown-when {
    margin: -2px 0 6px;
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
}

.h2h-extra-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.h2h-extra-row:last-child {
    margin-bottom: 0;
}

.h2h-extra-result {
    min-width: 34px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
}

.h2h-match-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.h2h-match-logo--text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-dim);
}

/* ---------- charts ---------- */

.h2h-charts {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content: center;
    gap: 20px;
}

.h2h-chart-card--wide {
    grid-column: 1 / -1;
}

.h2h-chart {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
}

.h2h-chart h3 {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
}

.h2h-chart svg {
    display: block;
    margin: 0 auto;
}

.h2h-chart--wide {
    text-align: left;
}

.h2h-chart--wide svg {
    display: block;
    width: 100%;
}

.h2h-pie-total {
    font-family: var(--font-display);
    font-size: 24px;
}

.h2h-pie-sub {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.h2h-line-axis {
    font-size: 9px;
}

.h2h-legend {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    font-size: 12px;
    color: var(--text-dim);
}

/* 2x2, since a set-result pie always has exactly 4 slices (2-0/2-1/1-2/0-2). */
.h2h-legend--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
}

.h2h-legend--grid li {
    justify-content: flex-start;
}

.h2h-legend-label {
    flex: 1;
}

.h2h-legend li strong {
    color: var(--text);
    font-weight: 700;
}

.h2h-legend--row {
    flex-direction: row;
    gap: 16px;
    margin-bottom: 8px;
}

.h2h-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.h2h-legend-swatch {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .h2h-page {
        padding-top: 36px;
    }

    .h2h-charts {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* Below 900px the seven-column row cannot be read: the page's own fit (headtohead.js) shrinks it to 60% and then squeezes its columns - to
   about 40px each on a phone (headings cut to "MO PIC"), and on a tablet the win-rate column of every table was cut off. So the row is
   rearranged (the `!important`s beat the page's inline zoom / width): the team and map pickers first, then team A's three columns and team B's
   three, each starting with whose it is (--team-a / --team-b are set by headtohead.js). One column on a phone, two (A | B) on a tablet. */
@media (max-width: 900px) {
    .h2h-dashboard {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        zoom: 1 !important;
        gap: 12px;
        overflow: visible;
    }

    .h2h-center { order: -1; }
    .h2h-center-divider { display: none; }
    .h2h-col { overflow-x: auto; }

    .h2h-dashboard > .h2h-col:nth-child(-n+3)::before,
    .h2h-dashboard > .h2h-col:nth-child(n+5)::before {
        display: block;
        margin: -4px 0 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
        font-family: var(--font-display);
        font-size: 18px;
        text-align: center;
    }

    .h2h-dashboard > .h2h-col:nth-child(-n+3)::before { content: var(--team-a, ''); color: var(--primary); }
    .h2h-dashboard > .h2h-col:nth-child(n+5)::before { content: var(--team-b, ''); color: #4d8ee0; }
}

/* (Two cards side by side only from 750px: below that each card has under ~300px, and the Most Picked table with its player columns (~320-355px)
   was cut off by the card's edge. A narrower tablet or a phone turned sideways gets the single column, where every card has room.) */
/* (Only on this page: the Matches page draws the same dashboard in one column (matches.css), and B's panels placed in a second column here ended up in a
   column of their own beside it, outside the page.) */
@media (min-width: 750px) and (max-width: 900px) {
    .h2h-page .h2h-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row dense;
        align-items: start;
    }

    .h2h-page .h2h-center { grid-column: 1 / -1; }
    .h2h-page .h2h-dashboard > .h2h-col:nth-child(-n+3) { grid-column: 1; }
    .h2h-page .h2h-dashboard > .h2h-col:nth-child(n+5) { grid-column: 2; }
}

/* A wide screen that still cannot hold the seven-column row at its smallest scale (a tablet on its side, a small laptop - under roughly 1480px, more
   with four players): the script (fitDashboard here, fit() on the Matches page) puts `is-stacked` on the dashboard, and it gets the layout of a narrower
   screen - the pickers on top, then A's three cards in one column and B's three in the other. Squeezed instead, the tracks shrank below their content
   and each card cut its table or its match rows off at the edge. (The same rules as the 900px block above - keep them in step.) */
.h2h-dashboard.is-stacked {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row dense;
    width: 100% !important;
    max-width: 100% !important;
    zoom: 1 !important;
    gap: 12px;
    overflow: visible;
    align-items: start;
}
.h2h-dashboard.is-stacked > .h2h-center { grid-column: 1 / -1; order: -1; }
.h2h-dashboard.is-stacked .h2h-center-divider { display: none; }
.h2h-dashboard.is-stacked > .h2h-col { overflow-x: auto; }
.h2h-dashboard.is-stacked > .h2h-col:nth-child(-n+3) { grid-column: 1; }
.h2h-dashboard.is-stacked > .h2h-col:nth-child(n+5) { grid-column: 2; }
.h2h-dashboard.is-stacked > .h2h-col:nth-child(-n+3)::before,
.h2h-dashboard.is-stacked > .h2h-col:nth-child(n+5)::before {
    display: block;
    margin: -4px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: 18px;
    text-align: center;
}
.h2h-dashboard.is-stacked > .h2h-col:nth-child(-n+3)::before { content: var(--team-a, ''); color: var(--primary); }
.h2h-dashboard.is-stacked > .h2h-col:nth-child(n+5)::before { content: var(--team-b, ''); color: #4d8ee0; }

/* an unknown opponent: hover (or focus) its badge to see the players who were on it */
.h2h-unknown { cursor: help; }
.h2h-unknown:hover .h2h-extra-popup, .h2h-unknown:focus-within .h2h-extra-popup, .h2h-unknown.is-open .h2h-extra-popup { display: block; }
.h2h-unknown-popup { left: auto; right: 0; transform: none; min-width: 150px; }
.h2h-unknown-players { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.6; }
.h2h-unknown-players li { padding: 0 2px; color: var(--text); }

/* Most recent matches on a phone: a row (3 picks, the score, 3 picks, the opponent's badge) was ~414px wide and ran out of its card on both
   sides. Everything in it now scales with the screen - --bw is one pick's width: 40px on a big phone, ~33px at 360px, 26px at 320px -
   so the whole row fits on one screen. (Three classes deep so it wins over the page-by-page sizes in matches.css, mapstatistics.css, scouting.css.) */
@media (max-width: 640px) {
    .h2h-matchtable { --bw: clamp(24px, calc((88.5vw - 125px) / 6), 40px); } /* (the card is ~89% of the screen, less its padding; the rest of the row is ~90px) */
    .h2h-matchtable .h2h-matchrow .h2h-brawler,
    .h2h-matchtable .h2h-matchrow .h2h-brawler--empty { width: var(--bw); height: calc(var(--bw) * 0.75); }
    .h2h-matchtable .h2h-matchtable-head .h2h-match-playerlabel { width: var(--bw); font-size: 8.5px; letter-spacing: 0; }
    .h2h-matchtable .h2h-matchrow .h2h-match-ours,
    .h2h-matchtable .h2h-matchtable-head .h2h-match-ours,
    .h2h-matchtable .h2h-matchrow .h2h-duo { gap: 3px; }
    .h2h-matchtable .h2h-matchrow,
    .h2h-matchtable .h2h-matchtable-head { gap: 6px; padding-left: 2px; padding-right: 2px; }
    .h2h-matchtable .h2h-matchrow { height: 38px; }
    .h2h-matchtable .h2h-matchrow .h2h-match-score { min-width: 34px; font-size: 13px; }
    .h2h-matchtable .h2h-matchrow .h2h-match-logo { width: 22px; height: 22px; font-size: 8px; }
}

/* ---------- a card sized by its column: its tables and match rows fit the card's own width ----------
   Where a page puts its panels in columns whose width does not come from their content (Head 2 Head under 900px, Map Statistics and Scouting under
   1100px), each panel is a size container (`container-type: inline-size`, set by that page's own stylesheet: a container's width cannot come from
   what is inside it). A table with player columns is up to ~355px wide and a match row ~414px (~466px with a fourth player); in a card narrower than
   that they were cut off by the card's edge (the card scrolled sideways, the last columns and the opponent's picks hidden). These rules look at the
   card's own width, so they hold on any page that makes its panels containers. */
@supports (width: 1cqw) {
    /* the pick tables: tighter cells and smaller pictures (the sort arrow sits in the gap beside a header, so the headers keep a little more room) */
    @container (max-width: 359px) {
        .h2h-table td { padding-left: 3px; padding-right: 3px; }
        .h2h-table th { padding-left: 4px; padding-right: 4px; }
        .h2h-table td:first-child { padding-left: 0; padding-right: 4px; }
        .h2h-table td:last-child { padding-right: 0; }
        .h2h-table .h2h-brawler { width: 40px; height: 30px; }
    }
    @container (max-width: 319px) {
        .h2h-table td { padding-left: 2px; padding-right: 2px; }
        .h2h-table th { padding-left: 3px; padding-right: 3px; }
        .h2h-table td:first-child { padding-right: 3px; }
        .h2h-table td:last-child { padding-right: 0; }
    }
    /* the match rows: one pick's width is what is left of the card after the score, the badge, the gaps and the padding (78px), shared by the row's
       picks - our team's (one per roster player; --slots counts them with the opponent's 3, set by the page's script) and the opponent's. So a
       roster of 4 or 5 fits too, at any width. */
    @container (max-width: 519px) {
        .h2h-matchtable { --bw: clamp(20px, calc((100cqw - 78px - 3px * (var(--slots, 6) - 2)) / var(--slots, 6)), 44px); }
        .h2h-matchtable .h2h-matchrow .h2h-brawler,
        .h2h-matchtable .h2h-matchrow .h2h-brawler--empty { width: var(--bw); height: calc(var(--bw) * 0.75); }
        .h2h-matchtable .h2h-matchtable-head .h2h-match-playerlabel { width: var(--bw); font-size: 8.5px; letter-spacing: 0; }
        .h2h-matchtable .h2h-matchrow .h2h-match-ours,
        .h2h-matchtable .h2h-matchtable-head .h2h-match-ours,
        .h2h-matchtable .h2h-matchrow .h2h-duo { gap: 3px; }
        .h2h-matchtable .h2h-matchrow,
        .h2h-matchtable .h2h-matchtable-head { gap: 6px; padding-left: 2px; padding-right: 2px; }
        .h2h-matchtable .h2h-matchrow { height: 38px; }
        .h2h-matchtable .h2h-matchrow .h2h-match-score { min-width: 34px; font-size: 13px; }
        .h2h-matchtable .h2h-matchrow .h2h-match-logo { width: 22px; height: 22px; font-size: 8px; }
    }
    /* Head 2 Head's own panels, while the dashboard is stacked (a little less padding too: the container's own padding cannot be changed from inside) */
    @media (max-width: 900px) {
        .h2h-dashboard > .h2h-col { container-type: inline-size; padding-left: 12px; padding-right: 12px; }
    }
    .h2h-dashboard.is-stacked > .h2h-col { container-type: inline-size; padding-left: 12px; padding-right: 12px; }
}