/* Daily Scrims (under Public Data). Uses the colour/spacing variables from index.css, and duplicates a few
   small shared bits (page head, filter fields, credit line) per this codebase's per-page-CSS convention. */

.ds-page {
    /* wide enough for the scrims column to hold a whole row - full team names, score, badges - beside the leaderboards */
    max-width: 1640px;
    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(32px, 5vw, 48px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
}

.page-lead {
    margin: 10px auto 0;
    max-width: 600px;
    text-align: center;
    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;
}

/* ---------- filter bar ---------- */

.ds-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 28px;
}

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

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

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

.ds-datenav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* the date box takes what the two arrows and "Latest" leave. On a narrow phone (or with a longer word than "Latest" in another language)
   "Latest" goes onto a line of its own instead of out past the edge of the screen. */
.ds-datenav-row .dc-wrap {
    flex: 1 1 140px;
    min-width: 0;
}

.ds-datenav-row .dc-wrap input {
    width: 100%;
    min-width: 0;
}

.ds-step {
    min-width: 34px;
    padding-inline: 0;
    font-size: 20px;
    line-height: 1;
}

.ds-step:disabled,
#latestDay:disabled {
    opacity: 0.35;
    cursor: default;
}

.ds-empty {
    padding: 24px 0;
    text-align: center;
    color: var(--text-muted);
}

/* ---------- the day's heading + tiles ---------- */

.ds-daytitle {
    font-family: var(--font-display);
    font-size: clamp(22px, 3.4vw, 32px);
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.01em;
}

.ds-daysub {
    margin: 4px 0 22px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.ds-tiles {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.ds-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 8px 14px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}

.ds-tile strong {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--primary);
}

.ds-tile span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---------- highlights ---------- */

.ds-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.ds-hl {
    --tone: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
    background:
        linear-gradient(180deg, var(--tone-soft), transparent 70%),
        var(--surface);
    border: 1px solid var(--border-strong);
    border-top: 3px solid var(--tone);
    border-radius: var(--radius-md);
    color: inherit;
    font: inherit;
    text-align: left;
}

.ds-hl[role="button"] {
    cursor: pointer;
    transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.ds-hl[role="button"]:hover { transform: translateY(-2px); border-color: var(--tone); }

.ds-hl[role="button"]:focus-visible,
.ds-scrim-head:focus-visible,
.ds-tbar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* (plain rgba tints, not colour-mix(): the image download can't read the newer colour functions) */
.ds-hl { --tone-soft: rgba(174, 232, 117, 0.1); }
.ds-hl--gold { --tone: #f2c14e; --tone-soft: rgba(242, 193, 78, 0.1); }
.ds-hl--amber { --tone: #e8943b; --tone-soft: rgba(232, 148, 59, 0.1); }
.ds-hl--green { --tone: #78d66f; --tone-soft: rgba(120, 214, 111, 0.1); }
.ds-hl--blue { --tone: var(--blue); --tone-soft: rgba(77, 163, 255, 0.1); }
.ds-hl--purple { --tone: #a08cf2; --tone-soft: rgba(160, 140, 242, 0.1); }

.ds-hl-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tone);
}

.ds-hl-who {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.1;
    text-transform: uppercase;
}

.ds-hl-match {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ds-hl-score {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-dim);
}

.ds-hl-score b { font-weight: 400; }
.ds-hl-score b.is-win { color: var(--text); }

.ds-hl-sub {
    font-size: 12px;
    color: var(--text-dim);
}

/* ---------- team logos ---------- */

.ds-logo {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.ds-logo--text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    font-size: 9px;
    font-weight: 800;
    color: var(--text-dim);
}

.ds-logo--xl { width: 64px; height: 64px; }
.ds-logo--xl.ds-logo--text { font-size: 15px; border-radius: 14px; }

.ds-team {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.ds-team .ds-logo { width: 26px; height: 26px; }

/* A team's name is never cut short (no "LO..."): when it does not fit on one line it wraps between its words. */
.ds-team-name {
    font-family: var(--font-display);
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.15;
    overflow-wrap: break-word;
}

/* ---------- cards + layout ---------- */

.ds-grid {
    display: grid;
    /* the scrims get the wider column (a row is long); the two leaderboards need about 560px */
    grid-template-columns: minmax(0, 1.5fr) minmax(560px, 1fr);
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.ds-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ds-row3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.ds-card {
    min-width: 0;
    padding: 18px 18px 16px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
}

.ds-card--trend,
.ds-card--compare { margin-bottom: 16px; }

.ds-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 14px;
}

.ds-card-head h3 { margin-right: auto; }

/* the "Download" button at the end of a card's heading */
.ds-card-actions { display: inline-flex; align-items: center; gap: 8px; }
.ds-dl { padding: 5px 10px; font-size: 12px; }

.ds-card-head h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ds-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ds-sort span,
.ds-legend-note {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* scrims / tournament matches played: the number over a bar, against the team that played the most */
.ds-count { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; }
.ds-count b { font-family: var(--font-display); font-size: 18px; font-weight: 400; line-height: 1; color: var(--text); }
.ds-count-bar { display: block; width: 44px; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.ds-count-bar i { display: block; height: 100%; border-radius: 99px; }
.ds-count--scrim .ds-count-bar i { background: linear-gradient(90deg, rgba(174, 232, 117, 0.45), var(--primary)); }
.ds-count--tourn .ds-count-bar i { background: linear-gradient(90deg, rgba(224, 197, 63, 0.45), #e0c53f); }
.ds-count--tourn b { color: #e8d36a; }
.ds-count.is-zero b { color: var(--text-muted); }

/* a column of the rating leaderboard that sorts on click */
.ds-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ds-sortable:hover { color: var(--text); }
.ds-sortable:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }
.ds-sortable.is-sorted { color: var(--primary); }
.ds-sort-arrow { font-size: 9px; }

/* the region next to a team of the rating leaderboard (it lists every region) */
.ds-region {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Season / Last 30 days switch of the rating leaderboard */
.ds-period { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.ds-period-btn {
    padding: 5px 10px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.ds-period-btn + .ds-period-btn { border-left: 1px solid var(--border-strong); }
.ds-period-btn.is-on { background: var(--primary); color: #0b1006; font-weight: 700; } /* (dark on the green: white on it was 1.4:1) */

.ds-hint {
    margin-top: 12px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ---------- scrim rows ---------- */

.ds-scrims {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ds-scrim {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--fast) var(--ease);
}

.ds-scrim:hover,
.ds-scrim.is-open { border-color: var(--border-strong); }

.ds-scrim.ds-flash { animation: ds-flash 1.6s var(--ease); }

@keyframes ds-flash {
    0%, 60% { box-shadow: 0 0 0 2px var(--primary), 0 0 24px rgba(174, 232, 117, 0.3); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.ds-scrim-head {
    display: grid;
    /* each team's side is at least as wide as its name, logo and Pickup chip; the badges (upset, sweep...) give way first, wrapping */
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr) auto 16px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px 10px;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ds-side {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--text-dim);
}

.ds-side.is-win { color: var(--text); }
.ds-side--a { justify-content: flex-end; }
.ds-side--a .ds-team-name { text-align: right; }
.ds-side .ds-logo { width: 34px; height: 34px; }

.ds-score {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1;
}

/* (each number has the room of two digits, centred: "4-6" and "10-2" keep the dash in the same place) */
.ds-score b { min-width: max(24px, 2ch); font-weight: 400; text-align: center; color: var(--text-muted); }
.ds-score b.is-win { color: var(--text); }
.ds-score i { font-style: normal; color: var(--text-muted); }

/* Every scrim's score in ONE column. Each row used to be a grid of its own, sized by its own team names and badges (Upset, Sweep, Pickup ...), so
   the scores sat a little left or right from row to row. Wider than a phone the rows now share the columns of the list (subgrid: the widest name
   decides the width of the team columns for the whole day, and the badges column is as wide as the widest badges), so the score is at the
   same place in every row, centred between the two teams. (A browser without subgrid keeps the old rows.) */
@media (min-width: 901px) {
    @supports (grid-template-columns: subgrid) {
        .ds-scrims {
            display: grid;
            grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr) auto 16px;
            column-gap: 12px;
            row-gap: 8px;
        }
        .ds-scrims > * { grid-column: 1 / -1; }
        .ds-scrim { display: grid; grid-template-columns: subgrid; }
        .ds-scrim > * { grid-column: 1 / -1; }
        .ds-scrim-head { grid-template-columns: subgrid; }
        .ds-score { justify-content: center; }
    }
}

.ds-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
}

.ds-badge {
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ds-badge--upset { background: rgba(232, 148, 59, 0.16); color: #f0a24f; border: 1px solid rgba(232, 148, 59, 0.45); }
.ds-badge--sweep { background: rgba(120, 214, 111, 0.12); color: #8fdc86; border: 1px solid rgba(120, 214, 111, 0.4); }
.ds-badge--close { background: rgba(77, 163, 255, 0.12); color: #7bb9ff; border: 1px solid rgba(77, 163, 255, 0.4); }
.ds-badge--tour { background: rgba(160, 140, 242, 0.14); color: #b4a4f6; border: 1px solid rgba(160, 140, 242, 0.4); }
.ds-badge--unlisted { background: rgba(255, 255, 255, 0.06); color: var(--text-dim); border: 1px solid var(--border-strong); }

/* a scrim against a team that is not on the site: its three players in place of a team name */
.ds-side--unlisted { align-items: center; }
.ds-side--unlisted .ds-logo { color: var(--text-muted); }
.ds-players { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; line-height: 1.25; }
.ds-player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-unlisted-players { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ds-chip-player { padding: 4px 11px; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text); }

/* the day's tournaments and where the teams finished */
.ds-tours { display: flex; flex-direction: column; gap: 12px; }
.ds-tour { padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.ds-tour-title { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
a.ds-tour-title:hover .ds-tour-text strong { color: var(--primary); }
.ds-tour-img { width: 52px; height: 52px; flex: none; border-radius: 12px; object-fit: cover; background: var(--surface-3); }
.ds-tour-img--blank { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; color: var(--text-muted); }
.ds-tour-text { display: flex; flex-direction: column; min-width: 0; }
.ds-tour-text strong { font-size: 16px; overflow-wrap: anywhere; }
.ds-tour-text small { font-size: 12px; }
.ds-tour-open { margin-left: auto; font-size: 18px; color: var(--text-muted); }
.ds-tour-teams { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ds-tour-team { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 999px; font-size: 13px; }
.ds-tour-team .ds-logo { width: 24px; height: 24px; }
.ds-tour-team .ds-team-name { font-weight: 600; color: var(--text); }
.ds-tour-team small { font-size: 11px; }
.ds-tour-place { min-width: 34px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 800; text-align: center; color: var(--text-dim); }
.ds-tour-team.is-p1 { border-color: rgba(255, 209, 102, 0.55); background: rgba(255, 209, 102, 0.08); }
.ds-tour-team.is-p1 .ds-tour-place { background: #ffd166; color: #1a1405; }
.ds-tour-team.is-p2 .ds-tour-place { background: #c9d1de; color: #10141b; }
.ds-tour-team.is-p3 .ds-tour-place { background: #d99a6c; color: #1a0f07; }

/* "Pickup": next to the team that played with a stand-in (same look as the badges, in yellow) */
.ds-pickup {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 99px;
    background: rgba(232, 207, 106, 0.13);
    border: 1px solid rgba(232, 207, 106, 0.45);
    color: #e8cf6a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ds-chev {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform var(--fast) var(--ease);
}

.ds-scrim.is-open .ds-chev { transform: rotate(-135deg); }

/* a thin bar under the score: how the sets were split */
.ds-split {
    display: flex;
    gap: 2px;
    height: 4px;
    margin: 0 14px 12px;
}

.ds-split i {
    display: block;
    border-radius: 99px;
    background: var(--border-strong);
}

.ds-split i.is-win { background: var(--primary); }

.ds-scrim-detail {
    display: none;
    padding: 4px 14px 14px;
    border-top: 1px solid var(--border);
}

.ds-scrim.is-open .ds-scrim-detail { display: block; }

.ds-odds { margin: 12px 0 14px; }

.ds-odds-title {
    margin-bottom: 6px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ds-odds-bar {
    display: flex;
    gap: 3px;
    height: 22px;
}

.ds-odds-bar i {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    color: #0b1006;
}

.ds-odds-a { background: var(--primary); border-radius: 99px 4px 4px 99px; }
.ds-odds-b { background: var(--blue); border-radius: 4px 99px 99px 4px; }
.ds-odds-bar--big { height: 28px; width: 100%; }
.ds-odds-bar--big i { font-size: 13px; }

.ds-odds-sub {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-dim);
}

.ds-odds-sub span:nth-child(2) { text-align: center; color: var(--text-muted); }

.ds-sets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 8px;
}

.ds-set {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px 6px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border-strong);
}

.ds-set.is-a { border-left-color: var(--primary); }
.ds-set.is-b { border-left-color: var(--blue); }

.ds-set-img,
.ds-map-img {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--surface-3);
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
}

.ds-set-img img,
.ds-map-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ds-set-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.ds-set-map {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 700;
}

.ds-set-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    color: var(--text-muted);
}

/* which team had a stand-in in this set */
.ds-set-pickup {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 700;
    color: #e8cf6a;
}

.ds-set-score {
    display: flex;
    gap: 4px;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-muted);
}

.ds-set-score b { font-weight: 400; }
.ds-set-score b.is-win { color: var(--text); }

.ds-scrim-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* ---------- leaderboard ---------- */

.ds-board-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

.ds-board {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ds-board th {
    padding: 0 6px 8px;
    border-bottom: 1px solid var(--border-strong);
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.ds-board td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.ds-board tr:last-child td { border-bottom: 0; }

.ds-board .ds-c { text-align: center; }

.ds-board-row { cursor: pointer; transition: background var(--fast) var(--ease); }
.ds-board-row:hover { background: var(--surface-2); }

.ds-rank {
    width: 28px;
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--text-muted);
}

.ds-board-team { display: flex; align-items: center; gap: 8px; }
.ds-board-team .ds-team-name { font-size: 16px; }

.ds-rate {
    display: inline-block;
    min-width: 46px;
    padding: 3px 8px;
    border-radius: 7px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* the number of sets sits under the win rate, so a narrow table never has to scroll sideways */
.ds-rate-n { display: block; margin-top: 2px; font-size: 10.5px; color: var(--text-muted); }

.ds-rating strong { font-size: 14px; font-weight: 800; }
.ds-rating sup { margin-left: 1px; color: var(--text-muted); }

.ds-delta {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
}

.ds-delta--up { color: #78d66f; }
.ds-delta--down { color: #ff7a7a; }
.ds-delta--0 { color: var(--text-muted); }

.ds-form { display: inline-flex; gap: 2px; }

.ds-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    font-style: normal;
    font-size: 9.5px;
    font-weight: 800;
    color: #0b1006;
}

.ds-dot--W { background: #78d66f; }
.ds-dot--L { background: #e06060; }
.ds-dot--D { background: var(--text-dim); }

.ds-record { white-space: nowrap; }

.ds-rec { margin: 0 3px; font-size: 12.5px; font-weight: 800; }
.ds-rec--W { color: #8fdc86; }
.ds-rec--D { color: var(--text-dim); }
.ds-rec--L { color: #ff8f8f; }

/* the hover card on a win / loss / draw square: which scrim it was */
.ds-tip {
    position: fixed;
    z-index: 1000;
    display: none;
    flex-direction: column;
    gap: 5px;
    min-width: 170px;
    padding: 10px 12px;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

.ds-tip.is-on { display: flex; }

.ds-tip-result { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ds-tip-result b { margin-left: 4px; font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: 0; color: var(--text); }
.ds-tip-result--W { color: #8fdc86; }
.ds-tip-result--L { color: #ff8f8f; }
.ds-tip-result--D { color: var(--text-dim); }

.ds-tip-opp { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.ds-tip-opp .ds-team-name { color: var(--text); }
.ds-tip-date { font-size: 11px; color: var(--text-muted); }

/* the streak card: one line per scrim - score, opponent, day */
.ds-tip-row { display: flex; align-items: center; gap: 8px; min-width: 230px; }
.ds-tip-score { min-width: 42px; font-family: var(--font-display); font-size: 17px; font-weight: 400; text-align: right; }
.ds-tip-score--W { color: #8fdc86; }
.ds-tip-score--L { color: #ff8f8f; }
.ds-tip-score--D { color: var(--text-dim); }
.ds-tip-vs { font-size: 11px; color: var(--text-muted); }
.ds-tip-row .ds-team { flex: 1; min-width: 0; }
.ds-tip-row .ds-team-name { color: var(--text); font-size: 15px; }
.ds-tip-when { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }

.ds-streak { cursor: default; }

.ds-dot { cursor: default; }

.ds-streak {
    padding: 1px 6px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
}

.ds-streak--W { background: rgba(120, 214, 111, 0.16); color: #8fdc86; }
.ds-streak--L { background: rgba(224, 96, 96, 0.16); color: #ff8f8f; }

/* ---------- maps, modes, hours ---------- */

.ds-maps { display: flex; flex-direction: column; gap: 8px; }

.ds-map {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 70px 22px;
    align-items: center;
    gap: 10px;
}

.ds-map-info { display: flex; flex-direction: column; min-width: 0; }

.ds-map-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}

.ds-map-mode { font-size: 10.5px; font-weight: 700; }

.ds-map-bar {
    height: 6px;
    border-radius: 99px;
    background: var(--surface-3);
    overflow: hidden;
}

.ds-map-bar i { display: block; height: 100%; border-radius: 99px; }

.ds-map-count { text-align: right; font-size: 13px; }

.ds-more { font-size: 11.5px; color: var(--text-muted); text-align: center; }

.ds-modes { display: flex; justify-content: center; }

.ds-pie { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.ds-pie svg { display: block; }

.ds-pie-total {
    font-family: var(--font-display);
    font-size: 34px;
    text-anchor: middle;
}

.ds-pie-sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ds-legend {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px 14px;
    width: 100%;
    list-style: none;
    padding: 0;
    font-size: 12px;
}

.ds-legend li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ds-legend-swatch { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; }
.ds-legend-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.ds-legend li strong { font-size: 11.5px; }

.ds-hours-bars {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 190px;
}

.ds-hour {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-width: 0;
    position: relative;
}

.ds-hour i {
    display: block;
    width: 100%;
    max-height: calc(100% - 34px);
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--primary), var(--primary-2));
}

.ds-hour i.is-empty { background: var(--surface-3); }

.ds-hour-n { font-size: 10px; font-weight: 700; color: var(--text-dim); height: 12px; }
.ds-hour-h { font-size: 10px; color: var(--text-muted); height: 12px; }

/* ---------- last 30 days ---------- */

.ds-trend-bars {
    display: flex;
    align-items: stretch;
    gap: 5px;
    height: 200px;
}

.ds-tbar {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.ds-tbar.is-empty { cursor: default; }

.ds-tbar i {
    display: block;
    width: 100%;
    max-height: calc(100% - 34px);
    border-radius: 5px 5px 2px 2px;
    background: rgba(174, 232, 117, 0.38);
    transition: background var(--fast) var(--ease), filter var(--fast) var(--ease);
}

.ds-tbar:not(.is-empty):hover i { background: var(--primary-2); }
.ds-tbar.is-current i { background: linear-gradient(180deg, var(--primary), var(--primary-2)); }
.ds-tbar.is-empty i { background: var(--surface-3); }

.ds-tbar-n { height: 12px; font-size: 10px; font-weight: 700; color: var(--text-dim); }
.ds-tbar-d { height: 12px; font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.ds-tbar.is-current .ds-tbar-d { color: var(--primary); font-weight: 800; }

/* ---------- compare ---------- */

.ds-compare-pick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 18px;
}

.ds-compare-pick select { min-width: 200px; }
.ds-swap { font-size: 18px; line-height: 1; }

.ds-compare-empty { text-align: center; padding: 14px 0 6px; }

.ds-cmp-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 340px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 22px;
}

.ds-cmp-mid { align-self: center; }

.ds-cmp-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.ds-cmp-team h4 {
    margin: 4px 0 0;
    line-height: 1.1;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ds-cmp-team--a h4 { color: var(--primary); }
.ds-cmp-team--b h4 { color: var(--blue); }

.ds-cmp-rating { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.ds-cmp-rating strong { font-family: var(--font-display); font-size: 28px; font-weight: 400; }
.ds-cmp-rating span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

.ds-cmp-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; min-height: 20px; }
.ds-cmp-form .ds-form { flex-wrap: wrap; justify-content: center; }

.ds-cmp-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ds-cmp-vs { font-family: var(--font-display); font-size: 30px; color: var(--text-muted); }
.ds-cmp-note { font-size: 11px; color: var(--text-muted); text-align: center; }

.ds-cmp-block {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.ds-cmp-block h4 {
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}

.ds-cmp-block h5 {
    margin: 16px 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ds-stats { display: flex; flex-direction: column; gap: 9px; max-width: 760px; margin: 0 auto; }

.ds-stat {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 150px minmax(0, 1fr) 62px;
    align-items: center;
    gap: 10px;
}

.ds-stat-v { font-size: 14px; font-weight: 700; color: var(--text-dim); text-align: center; }
.ds-stat-v.is-best { color: var(--text); font-weight: 800; }
.ds-stat-label { font-size: 11.5px; font-weight: 700; text-align: center; color: var(--text-muted); }

.ds-stat-bar {
    display: flex;
    height: 8px;
    border-radius: 99px;
    background: var(--surface-3);
    overflow: hidden;
}

.ds-stat-bar--a { justify-content: flex-end; }
.ds-stat-bar i { display: block; height: 100%; border-radius: 99px; opacity: 0.45; }
.ds-stat-bar--a i { background: var(--primary); }
.ds-stat-bar--b i { background: var(--blue); }
.ds-stat-bar i.is-best { opacity: 1; }

.ds-h2h-big {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 18px;
    font-family: var(--font-display);
}

.ds-h2h-big b { font-size: 52px; font-weight: 400; line-height: 1; opacity: 0.6; }
.ds-h2h-big b.is-win { opacity: 1; }
.ds-h2h-big span { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

.ds-h2h-sub { margin-top: 6px; text-align: center; font-size: 12.5px; color: var(--text-dim); }

.ds-meet-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 760px;
    margin: 0 auto;
}

.ds-meet {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 60px minmax(0, 140px);
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--surface-2);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
}

.ds-meet.is-a { border-left-color: var(--primary); }
.ds-meet.is-b { border-left-color: var(--blue); }
.ds-meet-date { color: var(--text-muted); font-size: 11.5px; }
.ds-meet-map { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ds-meet-score { font-family: var(--font-display); font-size: 16px; color: var(--text-muted); text-align: center; }
.ds-meet-score b { font-weight: 400; }
.ds-meet-score b.is-win { color: var(--text); }
.ds-meet.is-a .ds-meet-who { color: var(--primary); }
.ds-meet.is-b .ds-meet-who { color: var(--blue); }
.ds-meet-who { overflow-wrap: break-word; text-align: right; font-weight: 700; font-size: 12px; }

.ds-hmap {
    display: grid;
    grid-template-columns: 44px minmax(0, 150px) 26px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 10px;
    max-width: 760px;
    margin: 0 auto 7px;
}

.ds-hmap .ds-map-img { width: 100%; }

.ds-hmap-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.ds-hmap-a, .ds-hmap-b { font-size: 13px; font-weight: 800; text-align: center; }
.ds-hmap-a { color: var(--primary); }
.ds-hmap-b { color: var(--blue); }
.ds-hmap-bar { display: flex; gap: 2px; height: 8px; }
.ds-hmap-bar i { display: block; min-width: 3px; height: 100%; border-radius: 99px; }

.ds-common { max-width: 640px; margin: 0 auto; }

.ds-line-wrap { position: relative; max-width: 760px; margin: 0 auto; padding-left: 40px; }
.ds-line { display: block; width: 100%; height: 170px; }
.ds-line-max, .ds-line-min { position: absolute; left: 0; font-size: 10.5px; color: var(--text-muted); }
.ds-line-max { top: 4px; }
.ds-line-min { top: 148px; }
.ds-line-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10.5px; color: var(--text-muted); }

.ds-line-legend {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 700;
}

.ds-line-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ds-line-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 99px; }

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

.ds-share .export-actions { margin: 0; }

/* ---------- smaller screens ---------- */

/* the scrims column needs about 800px and the leaderboards about 560px: below this the scrims and the leaderboards stack instead of sitting side by side */
@media (max-width: 1480px) {
    .ds-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1000px) {
    .ds-row3 { grid-template-columns: minmax(0, 1fr); }
    .ds-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .ds-page { padding-top: 36px; }
    .ds-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .ds-tile { padding: 12px 4px 10px; }
    .ds-tile strong { font-size: 28px; }
    .ds-card { padding: 14px 12px 12px; }

    /* two highlight cards side by side, so they don't fill the screen */
    .ds-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ds-hl { padding: 12px 12px; gap: 6px; }
    .ds-hl-who { gap: 8px; font-size: 16px; }
    .ds-hl-who .ds-logo { width: 26px; height: 26px; }
    .ds-hl-score { font-size: 20px; }
    .ds-hl-sub { font-size: 11px; }

    .ds-cmp-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ds-cmp-mid { grid-column: 1 / -1; grid-row: 2; }
    .ds-stat { grid-template-columns: 46px minmax(0, 1fr) 96px minmax(0, 1fr) 46px; gap: 6px; }
    .ds-meet { grid-template-columns: 54px minmax(0, 1fr) 46px; }
    .ds-meet-who { display: none; }
    .ds-hmap { grid-template-columns: 38px minmax(0, 1fr) 22px 90px 22px; gap: 6px; }
    .ds-compare-pick select { min-width: 140px; }
    .ds-hours-bars { height: 170px; }

    /* the leaderboard keeps its team, sets, win rate and rating on a phone - scrims and form drop out */
    .ds-board--day th:nth-child(3),
    .ds-board--day td:nth-child(3),
    .ds-board--day th:nth-child(7),
    .ds-board--day td:nth-child(7),
    .ds-board--rating th:nth-child(5),
    .ds-board--rating td:nth-child(5),
    .ds-board--rating th:nth-child(7),
    .ds-board--rating td:nth-child(7) { display: none; }
    /* (and the 5-form column: the rating board was 500px wide in a 309px box and scrolled sideways) */
    .ds-board--rating th:nth-child(9),
    .ds-board--rating td:nth-child(9) { display: none; }
    .ds-board th, .ds-board td { padding-inline: 5px; }
    .ds-board--rating .ds-board-team .ds-team-name { font-size: 15px; }
    /* the region goes under the team's name instead of beside it */
    .ds-board--rating .ds-board-team { flex-direction: column; align-items: flex-start; gap: 0; }
    .ds-board--rating .ds-board-team .ds-region { margin-left: 28px; font-size: 10px; line-height: 1.2; }
    .ds-board--rating .ds-team { gap: 6px; }
    .ds-board--rating .ds-rank { width: 18px; }
    .ds-board--rating .ds-team .ds-logo { width: 22px; height: 22px; }
    .ds-board .ds-rate { min-width: 38px; padding: 3px 5px; }
    .ds-board .ds-streak { display: none; }
    /* the rating board fits a phone's width (it was 366px in a 254-324px box, so its Win % column was cut off at every phone width): the
       tournaments bar drops out too, and a team's name wraps between its words instead of making its column wider */
    .ds-board--rating th:nth-child(6),
    .ds-board--rating td:nth-child(6) { display: none; }
    .ds-board--rating td:nth-child(2),
    .ds-board--day td:nth-child(2) { white-space: normal; }
}

/* (on the narrowest phones the day's change goes as well: # team rating win % is what fits - and on a folded 280px screen only # team rating) */
@media (max-width: 330px) {
    .ds-board--rating th:nth-child(4),
    .ds-board--rating td:nth-child(4) { display: none; }
}
@media (max-width: 300px) {
    .ds-board--rating th:nth-child(8),
    .ds-board--rating td:nth-child(8),
    .ds-board--day th:nth-child(6),
    .ds-board--day td:nth-child(6) { display: none; }
    .ds-board th, .ds-board td { padding-inline: 3px; }
}

/* On a phone or a small tablet a scrim reads as two lines - each team with its score at the end - so the names have the whole width and
   wrap between words if they must (they are never cut short). Wider than this the scrim is one line: team, score, team. */
@media (max-width: 900px) {
    .ds-scrim-head {
        grid-template-columns: minmax(0, 1fr) auto 16px;
        grid-template-areas: "a s c" "b s c" "badges badges badges";
        gap: 4px 12px;
        padding-inline: 12px;
    }
    .ds-side { min-height: 40px; }
    .ds-side--a { grid-area: a; flex-direction: row-reverse; justify-content: flex-end; }
    .ds-side--a .ds-team-name { text-align: left; }
    .ds-side--b { grid-area: b; }
    .ds-score { grid-area: s; flex-direction: column; gap: 4px; font-size: 26px; }
    .ds-score i { display: none; }
    .ds-score b { display: flex; align-items: center; justify-content: center; height: 40px; }
    .ds-chev { grid-area: c; }
    .ds-badges { grid-area: badges; justify-content: flex-start; }
    .ds-badges:empty { display: none; }
    .ds-side .ds-logo { width: 30px; height: 30px; }
    .ds-side .ds-team-name { font-size: 16px; }
}

/* a phone: each filter takes the full width instead of floating centred at its own width */
@media (max-width: 560px) {
    /* Compare Teams: Team A, the swap button and Team B on one row; the rest under it at the full width */
    .ds-compare-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
    .ds-compare-pick .fld { min-width: 0; }
    .ds-compare-pick > :nth-child(n+4) { grid-column: 1 / -1; }
    .ds-compare-pick select { min-width: 0; width: 100%; max-width: none; }
    .ds-compare-pick .ds-swap { min-height: 44px; }
    .ds-compare-pick .ds-period { width: 100%; }
    .ds-compare-pick .ds-period-btn { flex: 1; }

    .ds-filters { gap: 10px; }
    .ds-filters .fld { flex: 1 1 calc(50% - 5px); min-width: 0; }
    .ds-filters .fld:has(input:not([type="date"])), .ds-filters .ds-datenav, .ds-filters .ds-share { flex-basis: 100%; }
    .ds-filters .fld select, .ds-filters .fld input:not([type="date"]) { width: 100%; max-width: none; }

    /* the last 30 days are 30 bars in a phone's width: the number over every second bar is left out (and the current day keeps its own), so
       the numbers stop running into each other */
    .ds-tbar:nth-child(even):not(.is-current) .ds-tbar-n { visibility: hidden; }
}