/* The live page (live.html): live series, coming matches, results; and a map's own page
   (live_match.html). Sizes in the dashboard's scale (--s); phones keep --s 1. */

.lp-page {
    --lp-r: #34d399;
    --lp-d: #f87171;
    --lp-panel: rgba(11, 14, 20, .72);
    --lp-border: #1e293b;
    --lp-rule: rgba(30, 41, 59, .7);
    --lp-mono: "JetBrains Mono", monospace;
    /* The arrow over text, not the text cursor (the user's call, 28.10, as on the league pages):
       links and buttons keep their hand, the chart its crosshair, a field its text cursor. */
    cursor: default;
}
.lp-page input, .lp-page textarea { cursor: text; }

/* ── Sections ───────────────────────────────────────────────────────── */

.lp-main[data-upcoming="side"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(420px * var(--s));
    gap: 1.75rem;
    align-items: start;
}

@media (max-width: 1199px) {
    .lp-main[data-upcoming="side"] { display: block; }
    .lp-main[data-upcoming="side"] .lp-side { margin-top: 2.25rem; }
}

.lp-section:empty { display: none; }
.lp-section + .lp-section { margin-top: 2.25rem; }

.lp-heading {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--s));
    margin: 0 0 .9rem calc(4px * var(--s));
    color: #94a3b8;
    font-size: calc(13px * var(--s));
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-count {
    padding: 0 calc(7px * var(--s));
    border-radius: 999px;
    background: rgba(99, 102, 241, .14);
    color: #a5b4fc;
    font-family: var(--lp-mono);
    font-size: calc(12px * var(--s));
    letter-spacing: 0;
}

.lp-empty {
    margin: 0;
    padding: 1.75rem 1rem;
    border: 1px dashed rgba(148, 163, 184, .18);
    border-radius: .75rem;
    color: #64748b;
    font-size: calc(14px * var(--s));
    text-align: center;
}

/* ── Shared parts of a row ──────────────────────────────────────────── */

.lp-row,
.lp-card,
.lp-result { position: relative; }

/* The whole row opens the map; its own links stay above it. */
.lp-hit { position: absolute; z-index: 1; inset: 0; border-radius: inherit; }
.lp-hit:focus-visible { outline: 2px solid #a5b4fc; outline-offset: -2px; }
.lp-cta,
.lp-map-chip { position: relative; z-index: 2; }

.lp-team { display: flex; align-items: center; gap: calc(10px * var(--s)); min-width: 0; }

.lp-logo {
    width: calc(28px * var(--s));
    height: calc(28px * var(--s));
    flex: none;
    object-fit: contain;
}

.lp-logo-blank {
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(51, 65, 85, .55);
    color: #94a3b8;
    font-size: calc(12px * var(--s));
    font-weight: 700;
}

.lp-name {
    overflow: hidden;
    color: #e2e8f0;
    font-size: calc(15px * var(--s));
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-kills {
    color: #475569;
    font-family: var(--lp-mono);
    font-size: calc(22px * var(--s));
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
}

.lp-kills.r.has { color: var(--lp-r); }
.lp-kills.d.has { color: var(--lp-d); }
.lp-kills.bump { animation: lpBump .45s ease-out; }

@keyframes lpBump {
    0% { transform: scale(1); }
    35% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

.lp-clock {
    color: #e2e8f0;
    font-family: var(--lp-mono);
    font-size: calc(14px * var(--s));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

[data-phase="paused"] .lp-clock { color: #fbbf24; }
[data-phase="draft"] .lp-clock { color: #a5b4fc; font-family: inherit; font-size: calc(12px * var(--s)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
[data-phase="ended"] .lp-clock { color: #64748b; }

.lp-series {
    color: #64748b;
    font-family: var(--lp-mono);
    font-size: calc(12px * var(--s));
    white-space: nowrap;
}

.lp-status {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--s));
    min-width: 0;
    color: #cbd5e1;
    font-size: calc(12px * var(--s));
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lp-waiting { overflow: hidden; color: #94a3b8; font-weight: 600; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; }

.lp-bo {
    padding: 0 calc(6px * var(--s));
    border: 1px solid rgba(99, 102, 241, .2);
    border-radius: .25rem;
    background: rgba(99, 102, 241, .1);
    color: #818cf8;
    font-size: calc(11px * var(--s));
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.6;
}

.lp-league {
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    font-size: calc(12.5px * var(--s));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-lead {
    color: #64748b;
    font-family: var(--lp-mono);
    font-size: calc(12.5px * var(--s));
    font-weight: 700;
    white-space: nowrap;
}

.lp-lead.r { color: var(--lp-r); }
.lp-lead.d { color: var(--lp-d); }

.lp-spark { display: block; overflow: visible; }
.lp-spark .mid { stroke: rgba(148, 163, 184, .28); stroke-dasharray: 2 3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lp-spark .up { fill: rgba(52, 211, 153, .3); }
.lp-spark .down { fill: rgba(248, 113, 113, .3); }
.lp-spark .line { fill: none; stroke: rgba(226, 232, 240, .8); stroke-linejoin: round; stroke-width: 1.4; vector-effect: non-scaling-stroke; }

.lp-cta {
    display: inline-flex;
    align-items: center;
    gap: calc(6px * var(--s));
    height: calc(30px * var(--s));
    padding: 0 calc(11px * var(--s));
    border: 1px solid rgba(99, 102, 241, .25);
    border-radius: .25rem;
    background: rgba(99, 102, 241, .1);
    color: #818cf8;
    font-size: calc(11px * var(--s));
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.lp-cta svg { width: calc(13px * var(--s)); height: calc(13px * var(--s)); flex: none; fill: currentColor; }
.lp-cta:hover { border-color: rgba(99, 102, 241, .45); background: rgba(99, 102, 241, .2); color: #a5b4fc; }
.lp-cta:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }

.lp-go {
    width: calc(20px * var(--s));
    height: calc(20px * var(--s));
    flex: none;
    color: #475569;
    transition: transform .15s ease, color .15s ease;
}

.lp-row:hover .lp-go,
.lp-card:hover .lp-go,
.lp-result:hover .lp-go { color: #a5b4fc; transform: translateX(2px); }

/* ── B: a line a match ──────────────────────────────────────────────── */

.lp-list-b {
    overflow: hidden;
    border: 1px solid var(--lp-border);
    border-radius: .75rem;
    background: var(--lp-panel);
}

.lp-row {
    display: grid;
    grid-template-columns:
        calc(150px * var(--s)) minmax(0, 1fr) calc(48px * var(--s)) calc(78px * var(--s)) calc(48px * var(--s))
        minmax(0, 1fr) calc(150px * var(--s)) minmax(0, calc(230px * var(--s))) auto;
    grid-template-areas: "st r kr mid kd d gold lg end";
    align-items: center;
    column-gap: calc(14px * var(--s));
    min-height: calc(64px * var(--s));
    padding: calc(10px * var(--s)) calc(18px * var(--s));
    border-bottom: 1px solid var(--lp-rule);
    transition: background-color .15s ease;
}

.lp-row:last-child { border-bottom: 0; }
.lp-row:hover { background: rgba(30, 41, 59, .35); }
.lp-row > .lp-status { grid-area: st; }
.lp-row > .lp-team-r { grid-area: r; flex-direction: row-reverse; }
.lp-row > .lp-kills.r { grid-area: kr; text-align: right; }
.lp-row > .lp-mid { grid-area: mid; }
.lp-row > .lp-kills.d { grid-area: kd; text-align: left; }
.lp-row > .lp-team-d { grid-area: d; }
.lp-row > .lp-gold { grid-area: gold; }
.lp-row > .lp-league { grid-area: lg; }
.lp-row > .lp-row-end { grid-area: end; }

.lp-mid { display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--s)); }
.lp-gold { display: flex; align-items: center; gap: calc(8px * var(--s)); }
.lp-gold .lp-spark { width: calc(84px * var(--s)); height: calc(28px * var(--s)); flex: none; }
.lp-row-end { display: flex; align-items: center; justify-content: flex-end; gap: calc(12px * var(--s)); }
.lp-row[data-state="next"] .lp-gold,
.lp-row[data-state="next"] .lp-kills { visibility: hidden; }

@media (max-width: 1399px) {
    .lp-row {
        grid-template-columns:
            calc(140px * var(--s)) minmax(0, 1fr) calc(48px * var(--s)) calc(78px * var(--s)) calc(48px * var(--s))
            minmax(0, 1fr) calc(150px * var(--s)) auto;
        grid-template-areas: "st r kr mid kd d gold end";
    }
    .lp-row > .lp-league { display: none; }
}

@media (max-width: 1023px) {
    .lp-row {
        grid-template-columns:
            calc(120px * var(--s)) minmax(0, 1fr) calc(44px * var(--s)) calc(70px * var(--s)) calc(44px * var(--s))
            minmax(0, 1fr) auto auto;
    }
    .lp-gold .lp-spark { display: none; }
}

/* Phones: the status and the lead over the score's line. */
@media (max-width: 639px) {
    .lp-row {
        grid-template-columns: minmax(0, 1fr) 34px 64px 34px minmax(0, 1fr);
        grid-template-areas:
            "st st gold gold end"
            "r kr mid kd d";
        row-gap: 10px;
        column-gap: 8px;
        padding: 12px 14px;
    }
    .lp-row > .lp-gold { justify-content: flex-end; }
    .lp-row > .lp-team { flex-direction: column; gap: 5px; text-align: center; }
    .lp-row > .lp-team-r { flex-direction: column; }
    .lp-row .lp-name { max-width: 100%; font-size: 13px; }
    .lp-row .lp-logo { width: 26px; height: 26px; }
    .lp-row .lp-kills { font-size: 19px; }
    .lp-row .lp-cta span { display: none; }
    .lp-row .lp-cta { padding: 0 9px; }
    .lp-row .lp-go { display: none; }
}

/* ── A: the scoreboard, two cards a row ─────────────────────────────── */
/* Every card is one size whatever its map does (the game, its draft, the break
   before the next map): the board's height is fixed and its middle swaps. */

.lp-list-a {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(16px * var(--s));
}

@media (max-width: 899px) {
    .lp-list-a { grid-template-columns: minmax(0, 1fr); }
}

.lp-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--lp-border);
    border-radius: .75rem;
    background: var(--lp-panel);
    transition: border-color .15s ease, background-color .15s ease;
}

.lp-card:hover { border-color: #334155; background: rgba(15, 23, 42, .82); }

.lp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(14px * var(--s));
    padding: calc(14px * var(--s)) calc(21px * var(--s));
    border-bottom: 1px solid var(--lp-rule);
}

.lp-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(190px * var(--s)) minmax(0, 1fr);
    align-items: center;
    column-gap: calc(12px * var(--s));
    height: calc(172px * var(--s));
    padding: 0 calc(21px * var(--s));
}

.lp-board-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(9px * var(--s));
    min-width: 0;
    text-align: center;
}

.lp-board-team .lp-logo { width: calc(60px * var(--s)); height: calc(60px * var(--s)); }
.lp-board-team .lp-logo-blank { border-radius: calc(10px * var(--s)); font-size: calc(20px * var(--s)); }
.lp-board-team .lp-name { max-width: 100%; font-size: calc(17.5px * var(--s)); }

.lp-pips { display: flex; gap: calc(6px * var(--s)); }
.lp-pips i { width: calc(21px * var(--s)); height: calc(5px * var(--s)); border-radius: 3px; background: #1e293b; }
.lp-pips i.on { background: #e2e8f0; }

.lp-board-mid { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-width: 0; height: 100%; }
.lp-board-mid > div { display: none; flex-direction: column; align-items: center; gap: calc(9px * var(--s)); max-width: 100%; }

/* Which middle: the next map's wait; the draft (by the live data once they come);
   else the game. */
.lp-card[data-state="next"] .lp-board-next,
.lp-card:not([data-state="next"])[data-phase="draft"] .lp-board-draft,
.lp-card[data-state="draft"]:not([data-phase]) .lp-board-draft,
.lp-card:not([data-state="next"]):not([data-state="draft"]):not([data-phase="draft"]) .lp-board-live,
.lp-card[data-state="draft"][data-phase]:not([data-phase="draft"]) .lp-board-live { display: flex; }

.lp-score { display: flex; align-items: baseline; gap: calc(14px * var(--s)); font-family: var(--lp-mono); font-weight: 700; line-height: 1; }
.lp-score i { color: #334155; font-size: calc(28px * var(--s)); font-style: normal; }
.lp-card .lp-kills { font-size: calc(46px * var(--s)); }

.lp-card .lp-clock {
    padding: calc(3px * var(--s)) calc(12px * var(--s));
    border: 1px solid var(--lp-border);
    border-radius: calc(7px * var(--s));
    background: rgba(15, 23, 42, .7);
    font-size: calc(16px * var(--s));
}

/* The net worth lead as in the live view's score: the gold badge (coin and amount)
   over the leading team's logo; both sides keep its room, so the logos stay level. */
.lp-gold-slot { display: flex; justify-content: center; min-height: calc(26px * var(--s)); }

.lp-gold-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(5px * var(--s));
    padding: calc(2px * var(--s)) calc(7px * var(--s));
    border: 1px solid rgba(245, 158, 11, .2);
    border-radius: .25rem;
    background: rgba(245, 158, 11, .1);
    color: #fbbf24;
    font-family: var(--lp-mono);
    font-size: calc(14.5px * var(--s));
    font-weight: 700;
}

.lp-gold-badge::before {
    content: "";
    width: calc(13px * var(--s));
    height: calc(13px * var(--s));
    background: url("/items_icons/Gold_symbol.webp") center / contain no-repeat;
}

.lp-gold-badge:empty { visibility: hidden; }

.lp-draft-word { color: #a5b4fc; font-size: calc(15px * var(--s)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lp-picks { display: flex; gap: calc(5px * var(--s)); }
.lp-picks i { width: calc(12px * var(--s)); height: calc(19px * var(--s)); border-radius: 3px; background: #1e293b; transition: background-color .3s ease; }
.lp-picks i.on { background: rgba(165, 180, 252, .75); }
.lp-picks-count { color: #64748b; font-family: var(--lp-mono); font-size: calc(13px * var(--s)); }

.lp-card .lp-series-score { color: #f8fafc; font-size: calc(40px * var(--s)); }
.lp-next-label { color: #94a3b8; font-size: calc(15px * var(--s)); }

.lp-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12px * var(--s));
    padding: calc(12px * var(--s)) calc(21px * var(--s));
    border-top: 1px solid var(--lp-rule);
    background: rgba(15, 23, 42, .45);
}

.lp-open {
    display: inline-flex;
    align-items: center;
    gap: calc(2px * var(--s));
    margin-left: auto;
    color: #94a3b8;
    font-size: calc(14px * var(--s));
    font-weight: 500;
    transition: color .15s ease;
}

.lp-card:hover .lp-open { color: #c7d2fe; }

@media (max-width: 639px) {
    .lp-card-head { padding: 11px 14px; }
    .lp-card .lp-league { max-width: 50%; }
    .lp-board { grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); column-gap: 8px; height: 146px; padding: 0 12px; }
    .lp-board-team .lp-logo { width: 44px; height: 44px; }
    .lp-board-team .lp-name { font-size: 13.5px; }
    .lp-pips i { width: 15px; height: 4px; }
    .lp-card .lp-kills { font-size: 34px; }
    .lp-score { gap: 9px; }
    .lp-score i { font-size: 20px; }
    .lp-card .lp-clock { font-size: 13px; }
    .lp-gold-slot { min-height: 22px; }
    .lp-gold-badge { font-size: 12.5px; }
    .lp-picks { gap: 3px; }
    .lp-picks i { width: 9px; height: 15px; }
    .lp-card .lp-series-score { font-size: 32px; }
    .lp-next-label { font-size: 13px; }
    .lp-card-foot { padding: 6px 14px; }
    .lp-card-foot .lp-cta { height: 44px; }
}

/* ── Results ────────────────────────────────────────────────────────── */

.lp-result-meta { display: flex; flex-direction: column; gap: calc(3px * var(--s)); min-width: 0; }
.lp-result-meta .lp-league { font-size: calc(11.5px * var(--s)); }

.lp-result-teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: calc(14px * var(--s));
    min-width: 0;
}

.lp-result-teams > .lp-result-side:first-child .lp-team { flex-direction: row-reverse; }
.lp-result-side { min-width: 0; }
.lp-result-side .lp-logo { width: calc(26px * var(--s)); height: calc(26px * var(--s)); }
.lp-result-side.lost .lp-name { color: #64748b; font-weight: 500; }
.lp-result-side.lost .lp-logo { opacity: .5; }

.lp-result-score {
    display: flex;
    align-items: center;
    gap: calc(7px * var(--s));
    color: #64748b;
    font-family: var(--lp-mono);
    font-size: calc(18px * var(--s));
    font-weight: 700;
}

.lp-result-score .won { color: #f8fafc; }
.lp-result-score i { color: #334155; font-style: normal; }

.lp-when { color: #94a3b8; font-family: var(--lp-mono); font-size: calc(12.5px * var(--s)); white-space: nowrap; }
.lp-when b { color: #e2e8f0; font-weight: 700; }
.lp-when span { margin-left: .35em; color: #818cf8; }

.lp-maps { display: flex; gap: calc(5px * var(--s)); }

.lp-map-chip {
    display: inline-flex;
    align-items: center;
    gap: calc(5px * var(--s));
    height: calc(28px * var(--s));
    padding: 0 calc(7px * var(--s));
    border: 1px solid var(--lp-border);
    border-radius: .3rem;
    background: rgba(15, 23, 42, .6);
    color: #94a3b8;
    font-family: var(--lp-mono);
    font-size: calc(12px * var(--s));
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.lp-map-chip img { width: calc(16px * var(--s)); height: calc(16px * var(--s)); object-fit: contain; }
.lp-map-chip:hover { border-color: #475569; color: #e2e8f0; }

.lp-results .lp-result {
    display: grid;
    grid-template-columns: calc(150px * var(--s)) minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: calc(18px * var(--s));
    min-height: calc(62px * var(--s));
    padding: calc(8px * var(--s)) calc(18px * var(--s));
    border-bottom: 1px solid var(--lp-rule);
    transition: background-color .15s ease;
}

.lp-results .lp-result:hover { background: rgba(30, 41, 59, .35); }
.lp-results.lp-list-b .lp-result:last-child { border-bottom: 0; }

/* A: two columns of rows on the page itself, no panel around them. */
.lp-results.lp-list-a {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(28px * var(--s));
    border-top: 1px solid var(--lp-rule);
}

.lp-results.lp-list-a .lp-result {
    grid-template-columns: calc(118px * var(--s)) minmax(0, 1fr) auto;
    padding: calc(8px * var(--s)) calc(6px * var(--s));
}

.lp-results.lp-list-a .lp-go { display: none; }

@media (max-width: 1099px) {
    .lp-results.lp-list-a { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
    .lp-results .lp-result,
    .lp-results.lp-list-a .lp-result {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "meta maps"
            "teams teams";
        row-gap: 10px;
        padding: 12px 6px;
    }
    .lp-results .lp-result-meta { grid-area: meta; }
    .lp-results .lp-maps { grid-area: maps; }
    .lp-results .lp-result-teams { grid-area: teams; }
    .lp-results .lp-go { display: none; }
    .lp-results .lp-name { font-size: 13px; }
}

/* ── Coming matches ─────────────────────────────────────────────────── */

.lp-upcoming-list {
    overflow: hidden;
    border: 1px solid var(--lp-border);
    border-radius: .75rem;
    background: rgba(11, 14, 20, .6);
}

.lp-upcoming-row {
    display: grid;
    grid-template-columns: calc(190px * var(--s)) minmax(0, 1fr) minmax(0, calc(300px * var(--s)));
    align-items: center;
    column-gap: calc(16px * var(--s));
    padding: calc(11px * var(--s)) calc(18px * var(--s));
    border-bottom: 1px solid var(--lp-rule);
    color: #cbd5e1;
    font-size: calc(14px * var(--s));
}

.lp-upcoming-row:last-child { border-bottom: 0; }
.lp-upcoming-teams { display: flex; align-items: center; gap: calc(10px * var(--s)); min-width: 0; }
.lp-upcoming-team { display: inline-flex; align-items: center; gap: calc(8px * var(--s)); min-width: 0; }
.lp-upcoming-team + .lp-upcoming-team::before { content: "vs"; margin-right: calc(2px * var(--s)); color: #475569; font-size: .85em; }
.lp-upcoming-team .lp-logo { width: calc(22px * var(--s)); height: calc(22px * var(--s)); }
.lp-upcoming-team .lp-logo-blank { border-radius: 5px; font-size: calc(11px * var(--s)); }
.lp-upcoming-team .lp-name { font-size: calc(14.5px * var(--s)); }

.lp-side .lp-upcoming-row { grid-template-columns: minmax(0, 1fr); row-gap: calc(6px * var(--s)); }

/* A, at the bottom: a tile each, side by side, three a row at most (a match's teams face each
   other in it, each with half its width: the user, 02.11); a tile never wider than three would
   make it (a third of the row, or its least width), so one or two do not stretch across the row.
   The least width keeps two names whole: two a row on tablets, one on phones. The tournaments
   to come below share the columns. */
.lp-upcoming-tiles {
    --lp-tile-min: 320px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--lp-tile-min), calc((100% - 2 * 14px * var(--s)) / 3)), 1fr));
    gap: calc(14px * var(--s));
    overflow: visible;
    border: 0;
    background: none;
}

.lp-upcoming-tiles .lp-upcoming-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(12px * var(--s));
    padding: calc(16px * var(--s)) calc(18px * var(--s));
    border: 1px solid var(--lp-border);
    border-radius: .65rem;
    background: rgba(11, 14, 20, .6);
}

.lp-upcoming-tiles .lp-when { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8px * var(--s)); }
.lp-upcoming-tiles .lp-when b { font-size: calc(18px * var(--s)); }
.lp-upcoming-tiles .lp-upcoming-teams { flex-direction: column; align-items: flex-start; gap: calc(9px * var(--s)); }
.lp-upcoming-tiles .lp-upcoming-team + .lp-upcoming-team::before { content: none; }
.lp-upcoming-tiles .lp-league { font-size: calc(12px * var(--s)); }

/* The tournaments to come (live.html .lp-next-tours): the coming matches' tiles — the days in
   the time's place, how soon in its countdown's, the name, the tier as the tournaments page's
   badge (league.css .tl-tier). */
/* A coming match's tile (_live_page_sections_c.html .lp-match-tile, the user's B, 02.11): its
   tournament and BO on top; its teams facing each other, each its logo over its whole name on
   one line, the time and how soon between them (live-page.js formatTimes, its board form: the
   day too when not today). */
.lp-main .lp-upcoming-tiles .lp-upcoming-row.lp-match-tile { display: block; padding: 16px 14px 20px; }
.lp-up-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--lp-muted, #94a3b8); font-size: max(12px, calc(13px * var(--s))); }
.lp-up-league { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-up-bo { flex: none; color: #94a3b8; font-family: var(--lp-mono); font-size: 12px; font-weight: 700; }
.lp-up-body { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 18px; }
.lp-up-team { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; color: #f1f5f9; font-size: 14px; font-weight: 600; text-align: center; }
.lp-up-team img,
.lp-up-blank { width: 38px; height: 38px; flex: none; object-fit: contain; }
.lp-up-blank { display: grid; place-items: center; border-radius: 8px; background: rgba(148, 163, 184, .1); color: #94a3b8; font-size: 16px; font-weight: 700; }
/* Its own size, not .lp-name's (15 px x the scale): 14 px keeps two names whole on a phone. */
.lp-up-team .lp-name { max-width: 100%; overflow: hidden; color: #f1f5f9; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.lp-up-when { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.lp-up-when i { color: #94a3b8; font-family: var(--lp-mono); font-size: 12px; font-style: normal; white-space: nowrap; }
.lp-up-when b { color: #f8fafc; font-family: var(--lp-mono); font-size: 20px; font-weight: 700; line-height: 1; }
.lp-up-when span { color: #818cf8; font-family: var(--lp-mono); font-size: 11px; white-space: nowrap; }

/* A tournament's tile: two lines, two sides — its days and how soon on top, its name and its
   tier under them; the left ones its facts, the right ones their tags. */
.lp-main .lp-next-tours .lp-upcoming-tiles .lp-tour {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "days soon" "name tier";
    align-items: center;
    column-gap: calc(12px * var(--s));
    row-gap: calc(10px * var(--s));
}
.lp-tour-days { grid-area: days; color: #e2e8f0; font-family: var(--lp-mono); font-size: max(14px, calc(16px * var(--s))); font-weight: 700; white-space: nowrap; }
.lp-tour-soon { grid-area: soon; justify-self: end; color: #818cf8; font-family: var(--lp-mono); font-size: max(12px, calc(13px * var(--s))); white-space: nowrap; }
.lp-tour-name { grid-area: name; min-width: 0; overflow: hidden; color: #f1f5f9; font-size: max(14px, calc(15px * var(--s))); font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.lp-tour .lp-tier { grid-area: tier; justify-self: end; }
.lp-tier {
    display: inline-flex;
    align-items: center;
    height: max(20px, calc(22px * var(--s)));
    padding: 0 .5rem;
    border: 1px solid rgba(30, 41, 59, .9);
    border-radius: .25rem;
    background: rgba(148, 163, 184, .08);
    color: #cbd5e1;
    font-size: max(11px, calc(12px * var(--s)));
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.lp-tier.is-1 { border-color: rgba(99, 102, 241, .3); background: rgba(99, 102, 241, .1); color: #818cf8; }

@media (max-width: 767px) {
    .lp-upcoming-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 11px 14px; }
}

/* ── A map's page ───────────────────────────────────────────────────── */

.lp-back {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--s));
    margin-bottom: 1rem;
    color: #94a3b8;
    font-size: calc(14px * var(--s));
    text-decoration: none;
    transition: color .15s ease;
}

.lp-back svg { width: calc(18px * var(--s)); height: calc(18px * var(--s)); fill: currentColor; transition: transform .15s ease; }
.lp-back:hover { color: #e2e8f0; }
.lp-back:hover svg { transform: translateX(-2px); }

.lp-series-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(14px * var(--s));
    margin-bottom: 1rem;
    padding: calc(18px * var(--s)) 1rem calc(16px * var(--s));
    border: 1px solid var(--lp-border);
    border-radius: .75rem;
    background: var(--lp-panel);
}

.lp-series-meta { display: flex; align-items: center; gap: calc(10px * var(--s)); color: #64748b; font-size: calc(13px * var(--s)); }

.lp-series-teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: calc(28px * var(--s));
    width: 100%;
    max-width: calc(980px * var(--s));
}

.lp-series-team { display: flex; align-items: center; gap: calc(14px * var(--s)); min-width: 0; }
.lp-series-team.r { flex-direction: row-reverse; }
.lp-series-team .lp-logo { width: calc(48px * var(--s)); height: calc(48px * var(--s)); }
.lp-series-team .lp-name { font-size: calc(22px * var(--s)); font-weight: 700; }

.lp-series-head .lp-series-score {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--s));
    color: #64748b;
    font-family: var(--lp-mono);
    font-size: calc(32px * var(--s));
    font-weight: 700;
}

.lp-series-head .lp-series-score .won { color: #f8fafc; }
.lp-series-head .lp-series-score i { color: #334155; font-style: normal; }

.lp-map-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8px * var(--s)); }

.lp-map-tab {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--s));
    height: calc(34px * var(--s));
    padding: 0 calc(14px * var(--s));
    border: 1px solid var(--lp-border);
    border-radius: .5rem;
    background: rgba(15, 23, 42, .6);
    color: #94a3b8;
    font-size: calc(13px * var(--s));
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.lp-map-tab:hover { border-color: #475569; color: #e2e8f0; }
.lp-map-tab.on { border-color: rgba(99, 102, 241, .5); background: rgba(99, 102, 241, .14); color: #e0e7ff; }
.lp-map-tab.waiting { border-style: dashed; color: #64748b; }
.lp-map-winner { display: inline-flex; color: #cbd5e1; font-size: calc(12px * var(--s)); }
.lp-map-winner img { width: calc(18px * var(--s)); height: calc(18px * var(--s)); object-fit: contain; }

.lp-match-cta { display: flex; justify-content: center; margin-bottom: 1rem; }
.lp-match-cta .telegram-header-cta { display: inline-flex; }

.lp-final-bar {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: calc(10px * var(--s));
    margin-bottom: 1rem;
    color: #64748b;
    font-family: var(--lp-mono);
}

.lp-final-bar b { font-size: calc(24px * var(--s)); }
.lp-final-bar b.r { color: var(--lp-r); }
.lp-final-bar b.d { color: var(--lp-d); }
.lp-final-bar i { font-style: normal; }
.lp-final-label { font-family: Inter, sans-serif; font-size: calc(12px * var(--s)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lp-final-time { margin-left: calc(8px * var(--s)); font-size: calc(14px * var(--s)); }

.lp-match { overflow: hidden; border-radius: .75rem; }

@media (max-width: 639px) {
    .lp-series-team { flex-direction: column; gap: 6px; text-align: center; }
    .lp-series-team.r { flex-direction: column; }
    .lp-series-team .lp-logo { width: 36px; height: 36px; }
    .lp-series-team .lp-name { max-width: 100%; font-size: 15px; }
    .lp-series-head .lp-series-score { font-size: 26px; }
    .lp-series-teams { column-gap: 14px; }
}

/* ── The local lab's switcher (debug only) ──────────────────────────── */

.lp-lab {
    position: fixed;
    z-index: 10000;
    bottom: 14px;
    left: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: calc(100vw - 24px);
    padding: 6px 8px;
    border: 1px solid #334155;
    border-radius: 10px;
    background: rgba(15, 23, 42, .94);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    color: #94a3b8;
    font-size: 12px;
    transform: translateX(-50%);
}

.lp-lab span { margin: 0 4px 0 10px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.lp-lab span:first-child { margin-left: 4px; }
.lp-lab a { padding: 4px 9px; border-radius: 6px; color: #cbd5e1; text-decoration: none; white-space: nowrap; }
.lp-lab a:hover { background: rgba(51, 65, 85, .6); }
.lp-lab a.on { background: #4f46e5; color: #fff; }

/* ── View c: «Табло» after the critique (2026-10-15), beside a until one is chosen ── */
/* The homepage's scale and width, denser than a (layout pass, 2026-10-18), small text
   never under 12 px, muted text lighter, sentence-case section titles, the series score in
   the card's head, a freshness line, the bot's record beside the results, results by
   day, the next match in a free half-row. Everything scoped to [data-view="c"]. */

.lp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

[data-view="c"] {
    --lp-muted: #94a3b8;
    --lp-cta-h: 44px;
    /* The live view's own surfaces (live-map.css .live-score, hero-card.css): the cards,
       the results and the series head sit on the same blue-slate as the live map. */
    --lp-surface: linear-gradient(rgba(15, 23, 42, .8), rgba(15, 23, 42, .8)), #0b0e14;
    --lp-surface-hover: linear-gradient(90deg, #131c2e, #0f1626 70%);
}

[data-view="c"] .lp-card,
[data-view="c"] .lp-series-head,
[data-view="c"] .lp-upcoming-tiles .lp-upcoming-row { background: var(--lp-surface); }
[data-view="c"] .lp-card:hover { background: var(--lp-surface-hover); }
[data-view="c"] .lp-card-foot { background: rgba(11, 14, 20, .35); }
[data-view="c"] .lp-card-upnext,
[data-view="c"] .lp-card-upnext:hover { background: var(--lp-surface); opacity: .92; }

[data-view="c"] .lp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(8px * var(--s)) calc(20px * var(--s));
    margin: 0 0 calc(16px * var(--s)) calc(2px * var(--s));
}

[data-view="c"] .lp-heading {
    margin: 0;
    color: #f1f5f9;
    font-size: calc(18px * var(--s));
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: none;
}

[data-view="c"] .lp-count { font-size: max(12px, calc(13px * var(--s))); }
[data-view="c"] .lp-section + .lp-section { margin-top: calc(32px * var(--s)); }

/* Freshness: quiet while the data flow, amber when they stop. */
.lp-fresh { color: var(--lp-muted, #94a3b8); font-size: max(12px, calc(13px * var(--s))); }
.lp-fresh.stale { color: #fbbf24; }
[data-view="c"] #lp-live.lp-stale .lp-kills,
[data-view="c"] #lp-live.lp-stale .lp-clock,
[data-view="c"] #lp-live.lp-stale .lp-gold-badge { opacity: .45; transition: opacity .4s ease; }

/* The card: legible meta, BO in mono, the series score in the head, clearer pips. */
[data-view="c"] .lp-status { gap: calc(10px * var(--s)); font-size: max(12px, calc(13px * var(--s))); }
[data-view="c"] .lp-bo { padding: 0; border: 0; background: none; color: var(--lp-muted); font-family: var(--lp-mono); font-size: max(12px, calc(12px * var(--s))); font-weight: 500; letter-spacing: 0; }
[data-view="c"] .lp-map { letter-spacing: .04em; }
[data-view="c"] .lp-head-series { color: #e2e8f0; font-family: var(--lp-mono); font-size: max(12px, calc(13px * var(--s))); letter-spacing: 0; }
[data-view="c"] .lp-league { color: var(--lp-muted); font-size: max(12px, calc(13.5px * var(--s))); }
[data-view="c"] .lp-pips i { background: #475569; }
[data-view="c"] .lp-pips i.on { background: #f1f5f9; }
/* The card's one action: open the match (the prediction is inside it). */
[data-view="c"] .lp-open { min-height: var(--lp-cta-h); color: #cbd5e1; font-weight: 600; }
[data-view="c"] .lp-card:hover .lp-open { color: #fff; }
.lp-card-upnext:hover { border-color: var(--lp-border); background: rgba(11, 14, 20, .5); }
[data-view="c"] .lp-result-score { color: var(--lp-muted); }
[data-view="c"] .lp-cta { font-size: max(12px, calc(12px * var(--s))); font-weight: 600; letter-spacing: .02em; }
[data-view="c"] .lp-open { font-size: max(13px, calc(15px * var(--s))); }
[data-view="c"] .lp-picks-count { color: var(--lp-muted); font-family: inherit; font-size: max(12px, calc(13px * var(--s))); font-variant-numeric: tabular-nums; }

/* The next match in the free half of a row: the same card, its time in the middle. */
.lp-card-upnext .lp-board-mid > .lp-board-upnext { display: flex; }
.lp-card-upnext { border-style: dashed; background: rgba(11, 14, 20, .5); }
.lp-upnext-note { color: var(--lp-muted, #94a3b8); font-size: max(12px, calc(12.5px * var(--s))); text-align: center; }
.lp-upnext-when { display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--s)); }
.lp-upnext-when b { color: #cbd5e1; font-size: calc(30px * var(--s)); line-height: 1; }
.lp-upnext-when span { margin: 0; color: #a5b4fc; font-size: max(12px, calc(13px * var(--s))); }

/* Nothing live: the next match in the same line. */
.lp-empty-next { display: block; margin-top: calc(6px * var(--s)); color: var(--lp-muted, #94a3b8); }
.lp-empty-next .lp-when b { color: #e2e8f0; }

/* Results by day: a title per day, its rows top-down in two columns, the score in a
   fixed place (the chips' column as wide as the day's longest series). */
.lp-day + .lp-day { margin-top: calc(26px * var(--s)); }

.lp-day-title {
    display: flex;
    align-items: baseline;
    gap: calc(12px * var(--s));
    margin: 0 0 calc(4px * var(--s)) calc(6px * var(--s));
    color: #e2e8f0;
    font-size: max(13px, calc(15px * var(--s)));
    font-weight: 600;
}

.lp-day-league { color: var(--lp-muted, #94a3b8); font-size: max(12px, calc(13px * var(--s))); font-weight: 500; }

/* The day's two columns, each a panel of its own. */
.lp-day-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16px * var(--s)); align-items: start; }
[data-view="c"] .lp-results.lp-list-c .lp-result:last-child { border-bottom: 0; }

[data-view="c"] .lp-results.lp-list-c {
    border: 1px solid var(--lp-border);
    border-radius: .75rem;
    background: var(--lp-surface);
}

[data-view="c"] .lp-results.lp-list-c .lp-result {
    grid-template-columns: calc(84px * var(--s)) minmax(0, 1fr) calc(var(--chips, 3) * 46px * var(--s));
    padding: calc(8px * var(--s)) calc(16px * var(--s));
}

[data-view="c"] .lp-results .lp-maps { justify-content: flex-end; }
/* Four or five maps: each chip only its winner's logo (its number in the tooltip and the
   label), so a BO5 keeps one line and the score its place. A map without a logo keeps its number. */
.lp-maps.many .lp-map-chip { gap: 0; padding: 0 calc(3px * var(--s)); }
.lp-maps.many .lp-chip-n { display: none; }
.lp-maps.many .lp-map-chip:not(:has(img)) .lp-chip-n { display: inline; padding: 0 calc(2px * var(--s)); }
[data-view="c"] .lp-result-meta .lp-when { color: #cbd5e1; font-size: max(12px, calc(13px * var(--s))); }
[data-view="c"] .lp-result-meta .lp-league,
[data-view="c"] .lp-result-side.lost .lp-name { color: var(--lp-muted); }
[data-view="c"] .lp-map-chip { font-size: max(12px, calc(12px * var(--s))); }
[data-view="c"] .lp-upcoming-row .lp-league,
[data-view="c"] .lp-when { font-size: max(12px, calc(13px * var(--s))); }
[data-view="c"] .lp-upcoming-row .lp-league { color: var(--lp-muted); }

/* Desktops at the homepage's scale: the card about 578x206 at 1920, results rows like
   the homepage table's (about 44 px), a 4-step rhythm (6 / 9-16 / 12-16 / 32 x s).
   Desktop only: on phones these would win over the phone rules. */
@media (min-width: 640px) {
    [data-view="c"] .lp-section-head { margin-bottom: calc(12px * var(--s)); }
    [data-view="c"] .lp-card-head { padding: calc(11px * var(--s)) calc(16px * var(--s)); }
    [data-view="c"] .lp-board { grid-template-columns: minmax(0, 1fr) calc(170px * var(--s)) minmax(0, 1fr); height: calc(188px * var(--s)); padding: 0 calc(16px * var(--s)); }
    [data-view="c"] .lp-board-team { gap: calc(8px * var(--s)); }
    [data-view="c"] .lp-board-team .lp-logo { width: calc(56px * var(--s)); height: calc(56px * var(--s)); }
    [data-view="c"] .lp-board-team .lp-name { font-size: calc(17px * var(--s)); }
    [data-view="c"] .lp-gold-slot { min-height: calc(22px * var(--s)); }
    [data-view="c"] .lp-pips { gap: calc(6px * var(--s)); }
    [data-view="c"] .lp-pips i { width: calc(24px * var(--s)); height: calc(6px * var(--s)); }
    [data-view="c"] .lp-gold-badge { padding: calc(1px * var(--s)) calc(6px * var(--s)); font-size: max(12px, calc(13px * var(--s))); }
    [data-view="c"] .lp-board-mid > div { gap: calc(8px * var(--s)); }
    [data-view="c"] .lp-card .lp-kills { font-size: calc(44px * var(--s)); }
    [data-view="c"] .lp-score { gap: calc(12px * var(--s)); }
    [data-view="c"] .lp-score i { font-size: calc(24px * var(--s)); }
    [data-view="c"] .lp-card .lp-clock { padding: calc(3px * var(--s)) calc(11px * var(--s)); font-size: max(13px, calc(16px * var(--s))); }
    [data-view="c"] .lp-picks { gap: calc(4px * var(--s)); }
    [data-view="c"] .lp-picks i { width: calc(10px * var(--s)); height: calc(16px * var(--s)); }
    [data-view="c"] .lp-card .lp-series-score { font-size: calc(34px * var(--s)); }
    [data-view="c"] .lp-card-foot { padding: calc(9px * var(--s)) calc(16px * var(--s)); }
    [data-view="c"] { --lp-cta-h: calc(32px * var(--s)); }
    [data-view="c"] .lp-cta { height: var(--lp-cta-h); padding: 0 calc(11px * var(--s)); }

    [data-view="c"] .lp-day + .lp-day { margin-top: calc(18px * var(--s)); }
    [data-view="c"] .lp-results.lp-list-c .lp-result { min-height: calc(50px * var(--s)); padding: calc(5px * var(--s)) calc(16px * var(--s)); }
    [data-view="c"] .lp-result-meta { gap: 0; line-height: 1.25; }
    [data-view="c"] .lp-result-side .lp-logo { width: calc(22px * var(--s)); height: calc(22px * var(--s)); }
    [data-view="c"] .lp-results .lp-name { font-size: max(13px, calc(15px * var(--s))); }
    [data-view="c"] .lp-map-chip { height: calc(24px * var(--s)); padding: 0 calc(5px * var(--s)); }
    [data-view="c"] .lp-map-chip img { width: calc(14px * var(--s)); height: calc(14px * var(--s)); }
    [data-view="c"] .lp-results .lp-maps { flex-wrap: wrap; row-gap: calc(4px * var(--s)); }

    [data-view="c"] .lp-upcoming-tiles .lp-upcoming-row { row-gap: calc(8px * var(--s)); padding: calc(12px * var(--s)) calc(14px * var(--s)); }
    [data-view="c"] .lp-upcoming-tiles .lp-when b { font-size: calc(16px * var(--s)); }
    [data-view="c"] .lp-upcoming-tiles .lp-upcoming-teams { gap: calc(6px * var(--s)); }
    [data-view="c"] .lp-upcoming-team .lp-logo { width: calc(20px * var(--s)); height: calc(20px * var(--s)); }
    [data-view="c"] .lp-upcoming-team .lp-name { font-size: max(13px, calc(15px * var(--s))); }
}

/* One line across the board (the owner's wish): the gold lead in its own row above,
   then logos level with the kills, names level with the clock, pips under the names.
   The team columns and the live middle become cells of the board's grid; the draft,
   next-map and next-match middles stay one centred block across the rows. */
[data-view="c"] .lp-board { grid-template-rows: repeat(4, auto); align-content: center; row-gap: calc(8px * var(--s)); }
[data-view="c"] .lp-board-team,
[data-view="c"] .lp-board-mid { display: contents; }
[data-view="c"] .lp-board-team.r > * { grid-column: 1; }
[data-view="c"] .lp-board-team.d > * { grid-column: 3; }
[data-view="c"] .lp-board-team > .lp-gold-slot { grid-row: 1; align-items: flex-end; }
[data-view="c"] .lp-board-team > .lp-logo { grid-row: 2; justify-self: center; }
[data-view="c"] .lp-board-team > .lp-name { grid-row: 3; justify-self: center; max-width: 100%; text-align: center; }
[data-view="c"] .lp-board-team > .lp-pips { grid-row: 4; justify-self: center; }
[data-view="c"] .lp-board-mid > div { grid-column: 2; grid-row: 1 / 5; align-self: center; }
[data-view="c"] .lp-card:not([data-state="next"]):not([data-state="draft"]):not([data-phase="draft"]) .lp-board-live,
[data-view="c"] .lp-card[data-state="draft"][data-phase]:not([data-phase="draft"]) .lp-board-live { display: contents; }
[data-view="c"] .lp-board-live > .lp-score { grid-column: 2; grid-row: 2; align-self: center; justify-self: center; }
[data-view="c"] .lp-board-live > .lp-clock { grid-column: 2; grid-row: 3; align-self: center; justify-self: center; }

/* The homepage's spotlight outline on every card and panel of view c (style.css
   .spotlight-border::before is positioned against them). It lies over their border
   as on the homepage, so they don't clip (overflow: hidden cut it to inside the
   border): the rows that fill a rounded corner are rounded with it, and the map's
   panel clips inside its .spot-clip. min-width: 0 keeps the narrowing the clip gave
   them as grid and flex items. */
[data-view="c"] .spotlight-border { position: relative; min-width: 0; overflow: visible; }
[data-view="c"] .lp-results.lp-list-c > .lp-result:first-child,
.lp-ledger > .lp-ledger-row:first-child { border-top-left-radius: calc(.75rem - 1px); border-top-right-radius: calc(.75rem - 1px); }
[data-view="c"] .lp-results.lp-list-c > .lp-result:last-child,
.lp-ledger > .lp-ledger-row:last-child { border-bottom-left-radius: calc(.75rem - 1px); border-bottom-right-radius: calc(.75rem - 1px); }
/* The map's panel: over the live header, which is positioned. */
.lp-match.spotlight-border::before { z-index: 30; }

/* Nothing live: the line at the floor size, in the lighter grey. */
[data-view="c"] .lp-empty { padding: calc(20px * var(--s)) calc(16px * var(--s)); color: var(--lp-muted); font-size: max(13px, calc(15px * var(--s))); }

/* Nothing live: the cards' surface with what happens next, the next match at its right as a
   small board (the live cards' order: team, time, team); as tall as a live card's board. */
.lp-idle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(16px * var(--s)) calc(40px * var(--s));
    min-height: calc(176px * var(--s));
    padding: calc(28px * var(--s)) calc(36px * var(--s));
    border: 1px solid var(--lp-border);
    border-radius: .75rem;
    background: var(--lp-surface, #0e1526);
}
.lp-idle-title { margin: 0; color: #f1f5f9; font-size: max(17px, calc(24px * var(--s))); font-weight: 700; letter-spacing: -.01em; }
.lp-idle-sub { margin: calc(8px * var(--s)) 0 0; color: var(--lp-muted, #94a3b8); font-size: max(14px, calc(16px * var(--s))); line-height: 1.5; }
.lp-idle-next {
    display: grid;
    justify-items: center;
    gap: calc(12px * var(--s));
    width: calc(460px * var(--s));
    min-width: 0;
    padding-left: calc(40px * var(--s));
    border-left: 1px solid var(--lp-rule);
    text-align: center;
}
.lp-idle-label { color: var(--lp-muted, #94a3b8); font-size: max(12px, calc(14px * var(--s))); font-weight: 600; }
/* The two teams share the room either side of the time evenly, so it stays in the middle. */
.lp-idle-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: calc(20px * var(--s)); width: 100%; }
.lp-idle-team { display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--s)); min-width: 0; }
.lp-idle-team .lp-logo { width: calc(40px * var(--s)); height: calc(40px * var(--s)); flex: none; object-fit: contain; }
.lp-idle-team .lp-logo-blank { border-radius: 7px; font-size: calc(16px * var(--s)); }
.lp-idle-team .lp-name { max-width: 100%; color: #f1f5f9; font-size: max(14px, calc(17px * var(--s))); font-weight: 700; }
/* Its day (not today) over the time, the countdown (within a day) under it: live-page.js formatTimes. */
.lp-idle-time { display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--s)); }
[data-view="c"] .lp-idle-time b { color: #f1f5f9; font-size: calc(32px * var(--s)); line-height: 1; }
[data-view="c"] .lp-idle-time i,
[data-view="c"] .lp-idle-time span { margin: 0; font-size: max(12px, calc(13px * var(--s))); font-style: normal; white-space: nowrap; }
.lp-idle-time i { color: var(--lp-muted, #94a3b8); }
.lp-idle-time span { color: #a5b4fc; }
.lp-idle-league { color: var(--lp-muted, #94a3b8); font-size: max(12px, calc(13.5px * var(--s))); }

/* Narrower: the words over the board, the board centred under a rule. */
@media (max-width: 1023px) {
    .lp-idle { grid-template-columns: minmax(0, 1fr); }
    .lp-idle-next { width: 100%; padding: calc(18px * var(--s)) 0 0; border-left: 0; border-top: 1px solid var(--lp-rule); }
    .lp-idle-board { max-width: 460px; }
}
@media (max-width: 639px) {
    .lp-idle { min-height: 0; padding: 18px 16px; }
    .lp-idle-board { column-gap: 12px; }
    /* A long name over two lines, as the map page's title does on phones. */
    .lp-idle-team .lp-name { display: -webkit-box; line-height: 1.15; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}

/* Tablets and small laptops keep the day's two columns (the user, 02.11): a column's row on two
   levels as on phones, the time and the maps on top, the teams either side of the score under
   them, so a name has its side's whole width. From 768 px a column is at least a phone's row
   wide; narrower, one column of one-line rows. Up to 1199 px: a one-line row there cut names
   like Team Yandex (74 px for a name at 1100). */
@media (min-width: 768px) and (max-width: 1199px) {
    [data-view="c"] .lp-results.lp-list-c .lp-result {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "meta maps"
            "teams teams";
        row-gap: calc(10px * var(--s));
        padding: calc(10px * var(--s)) calc(14px * var(--s));
    }
    [data-view="c"] .lp-results .lp-result-meta { grid-area: meta; flex-direction: row; gap: 10px; }
    [data-view="c"] .lp-results .lp-maps { grid-area: maps; }
    [data-view="c"] .lp-results .lp-result-teams { grid-area: teams; }
}

@media (max-width: 767px) {
    .lp-day-columns { grid-template-columns: minmax(0, 1fr); gap: calc(10px * var(--s)); }
}

@media (max-width: 639px) {
    [data-view="c"] .lp-results.lp-list-c .lp-result {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "meta maps"
            "teams teams";
        row-gap: 10px;
        padding: 12px 14px;
    }
    [data-view="c"] .lp-result-meta { flex-direction: row; gap: 10px; }
    [data-view="c"] .lp-heading { font-size: 18px; }
    [data-view="c"] .lp-upnext-when b { font-size: 26px; }
    [data-view="c"] .lp-card-foot .lp-cta { height: var(--lp-cta-h); }
    /* Two lines for a long name rather than an ellipsis in a 92 px column. */
    [data-view="c"] .lp-board-team .lp-name {
        display: -webkit-box;
        line-height: 1.15;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

/* ── A map's page, view c: the frame (2026-10-18, after the critique) ── */
/* The live view leads and carries the only scoreboard. Around it: crumbs; the series as a
   track of its maps (the winner's logo on each played one, the ones still to play dashed)
   with the map's prediction; under it the series ledger with the bot's call on each map.
   On the air (draft or game) the track and the prediction sit on the live header's free
   edges; off it they go in a title row. The poll (live-page.js frame) redraws the frame:
   a map that starts elsewhere in the series shows as a banner. */

[data-view="c"] .lp-crumbs { display: flex; align-items: center; gap: calc(10px * var(--s)); min-width: 0; margin-bottom: calc(12px * var(--s)); }
[data-view="c"] .lp-crumbs .lp-back { margin: 0; font-size: max(12px, calc(14px * var(--s))); white-space: nowrap; }

.lp-frame-top:empty { display: none; }
.lp-frame-top { display: flex; flex-direction: column; gap: calc(12px * var(--s)); margin-bottom: calc(12px * var(--s)); }
/* More room round the title row on wider screens (the user, 28.10: too tight under the header
   and over the map), the same above it as under it: 48 from the header to the logos' top
   (the page's 32, these 9, the logos' 7 inside the title's line) and from the maps to the
   panel (these 36 and the frame's 12). */
@media (min-width: 640px) {
    .lp-match-c { padding-top: calc(9px * var(--s)); }
    .lp-match-c .lp-title-row { margin-bottom: calc(36px * var(--s)); }
}


/* The series' maps as slots of its BO. */
.lp-track { display: flex; flex: none; align-items: center; gap: calc(6px * var(--s)); }
.lp-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(6px * var(--s));
    min-width: calc(34px * var(--s));
    height: calc(34px * var(--s));
    padding: 0 calc(8px * var(--s));
    border: 1px solid rgba(51, 65, 85, .7);
    border-radius: .375rem;
    background: rgba(30, 41, 59, .55);
    color: #94a3b8;
    font-family: var(--lp-mono);
    font-size: max(12px, calc(13px * var(--s)));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.lp-slot img { width: calc(20px * var(--s)); height: calc(20px * var(--s)); flex: none; object-fit: contain; }
a.lp-slot:hover { border-color: rgba(129, 140, 248, .45); color: #e2e8f0; }
a.lp-slot:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.lp-slot.on { border-color: rgba(129, 140, 248, .7); background: rgba(99, 102, 241, .18); color: #eef2ff; }
/* The live map, and between two maps the next one (a map already, its page before its draft). */
.lp-slot.live:not(.on),
.lp-slot.next:not(.on) { border-color: rgba(129, 140, 248, .4); color: #c7d2fe; box-shadow: inset 0 -2px 0 rgba(129, 140, 248, .8); }
.lp-slot.todo { border-style: dashed; border-color: rgba(71, 85, 105, .6); background: none; color: #64748b; }


[data-view="c"] .lp-match { position: relative; }

/* The title row: the series' names as the page's heading round its score, its tournament
   and its maps centred under them. */
/* One step between the title, the tournament and the maps as seen: the title's line keeps
   some room under the names' and the score's glyphs, its margin takes it back. */
/* The title's line: the way back at its left, while another map of the series is live the way
   to it at its right, both the full stats button (match-details.css .lp-detail-link). The two
   sides share what the title leaves (1fr each), so the score stays in the page's middle.
   Narrower: the buttons get a line of their own above the title. */
.lp-title-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-items: center;
    gap: calc(16px * var(--s));
    margin-bottom: calc(16px * var(--s));
}
.lp-title-row > * { grid-column: 2; }
.lp-title-row > .lp-title { grid-row: 1; }
/* The title's own margin takes back room under its glyphs; the buttons' equal margin on top
   puts their middle on the title's. */
.lp-title-row > .lp-back-btn,
.lp-title-row > .lp-next-btn { grid-row: 1; align-self: center; margin-top: calc(5px * var(--s)); }
.lp-title-row > .lp-back-btn { grid-column: 1; justify-self: start; }
.lp-title-row > .lp-next-btn { grid-column: 3; justify-self: end; }
.lp-detail-link.lp-back-btn { padding: 0 calc(20px * var(--s)) 0 calc(16px * var(--s)); }
.lp-detail-link.lp-back-btn:hover svg { transform: translateX(-2px); }

/* Another map of the series is live: the homepage's LIVE badge and its live rows' shimmer
   (style.css .live-row, liveShimmer) over the button's surface; the way back's border, at rest
   and on hover (the user, 28.10). */
.lp-detail-link.lp-next-btn {
    gap: calc(10px * var(--s));
    padding: 0 calc(14px * var(--s)) 0 calc(12px * var(--s));
    background: linear-gradient(90deg, transparent, rgba(99, 101, 241, .1) 25%, rgba(99, 102, 241, .2) 50%, rgba(99, 102, 241, .1) 75%, transparent) 0 0 / 200% 100%,
                var(--lp-surface, #0e1526);
    animation: liveShimmer 7s ease-in-out infinite;
}
/* Between two maps the way to the next one (live_next_map): the full stats button itself, still
   and without the badge, the map not being played yet. */
.lp-detail-link.lp-next-btn.lp-next-map {
    gap: calc(8px * var(--s));
    padding: 0 calc(16px * var(--s)) 0 calc(20px * var(--s));
    background: var(--lp-surface, #0e1526);
    animation: none;
}
.lp-live-badge {
    padding: calc(3px * var(--s)) calc(7px * var(--s));
    border: 1px solid rgba(99, 102, 241, .2);
    border-radius: .25rem;
    background: rgba(99, 102, 241, .1);
    color: #818cf8;
    font-size: max(11px, calc(12px * var(--s)));
    letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
    .lp-detail-link.lp-next-btn { animation: none; }
}

@media (max-width: 899px) {
    .lp-title-row { grid-template-columns: minmax(0, 1fr); }
    .lp-title-row > * { grid-column: 1; }
    .lp-title-row > .lp-title { grid-row: 2; }
    .lp-title-row > .lp-back-btn,
    .lp-title-row > .lp-next-btn { grid-column: 1; margin-top: 0; }
    /* Alone the way back is centred (the user, 28.10); with the live map's button they share the line. */
    .lp-title-row > .lp-back-btn { justify-self: center; }
    .lp-title-row.has-next > .lp-back-btn { justify-self: start; }
}
.lp-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: calc(28px * var(--s));
    width: 100%;
    margin: 0 0 calc(-5px * var(--s));
    color: #f8fafc;
    font-size: calc(26px * var(--s));
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
}
.lp-title-team { display: flex; align-items: center; gap: calc(12px * var(--s)); min-width: 0; }
.lp-title-team.l { justify-content: flex-end; }
.lp-title-team img { width: calc(40px * var(--s)); height: calc(40px * var(--s)); flex: none; object-fit: contain; }
.lp-title-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-title-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(12px * var(--s)); }
/* The tournament under the title: its name, the BO as a small chip. */
.lp-title-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(10px * var(--s)); margin: 0; color: #cbd5e1; font-size: max(12.5px, calc(14px * var(--s))); font-weight: 500; letter-spacing: .01em; text-align: center; }
[data-view="c"] .lp-title-meta .lp-bo {
    padding: calc(2px * var(--s)) calc(7px * var(--s));
    border: 1px solid rgba(71, 85, 105, .55);
    border-radius: .3rem;
    background: rgba(30, 41, 59, .6);
    color: #94a3b8;
    font-family: var(--lp-mono);
    font-size: max(11px, calc(12px * var(--s)));
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.3;
}
.lp-mini-score { display: inline-flex; align-items: baseline; gap: calc(8px * var(--s)); color: var(--lp-muted, #94a3b8); font-family: var(--lp-mono); font-size: calc(36px * var(--s)); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-mini-score .won { color: #f8fafc; }
.lp-mini-score i { color: #334155; font-style: normal; }


/* The bot's call on a map as the homepage's table shows it (_series_rows.html): the backed
   team's logo and the odds, the result badge, the money in its colour. */
.lp-bot {
    display: inline-flex;
    align-items: center;
    gap: calc(10px * var(--s));
    color: #cbd5e1;
    font-family: var(--lp-mono);
    font-size: max(12px, calc(13px * var(--s)));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lp-bot-call { display: inline-flex; align-items: center; gap: calc(10px * var(--s)); min-width: 0; }
.lp-bot img { width: calc(20px * var(--s)); height: calc(20px * var(--s)); flex: none; object-fit: contain; }
.lp-bot-pick { max-width: calc(90px * var(--s)); overflow: hidden; font-family: Inter, sans-serif; text-overflow: ellipsis; }
.lp-bot-odds { font-weight: 700; }
.lp-bot-profit { min-width: 5ch; font-weight: 700; text-align: right; }
.lp-bot.win .lp-bot-profit { color: #34d399; }
.lp-bot.lose .lp-bot-profit { color: #f87171; }
/* The homepage's WIN / LOSE / SKIP badges (Tailwind emerald, red and slate there). */
.lp-bot-badge {
    padding: calc(2px * var(--s)) calc(8px * var(--s));
    border: 1px solid transparent;
    border-radius: .25rem;
    font-family: Inter, sans-serif;
    font-size: max(11px, calc(12px * var(--s)));
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.35;
}
.lp-bot-badge.win { border-color: rgba(16, 185, 129, .2); background: rgba(16, 185, 129, .1); color: #34d399; box-shadow: 0 0 10px -2px rgba(16, 185, 129, .3); }
.lp-bot-badge.lose { border-color: rgba(239, 68, 68, .2); background: rgba(239, 68, 68, .1); color: #f87171; }
.lp-bot-badge.skip { border-color: #334155; background: #1e293b; color: #64748b; }
.lp-bot-badge.none { color: #475569; }

/* The live map's prediction: the site's button, over the row's own link. */
.lp-ledger-cta { position: relative; z-index: 1; }

/* The bot's record (_bot_record.html): one control, not a line of text. Its label in small
   capitals, the homepage's W / L / S, the profit as a result badge, a chevron to the history. */
.lp-record {
    display: inline-flex;
    align-items: center;
    gap: calc(12px * var(--s));
    min-height: calc(36px * var(--s));
    padding: calc(4px * var(--s)) calc(8px * var(--s)) calc(4px * var(--s)) calc(14px * var(--s));
    position: relative;
    /* At rest the cards' border (the results, the live cards, the series' maps); on hover the
       way back's (match-details.css .lp-detail-link) and the site's spotlight band. */
    border: 1px solid var(--lp-border, #1e293b);
    border-radius: .5rem;
    background: var(--lp-surface, #0e1526);
    color: #cbd5e1;
    font-size: max(12.5px, calc(13.5px * var(--s)));
    text-decoration: none;
    transition: border-color .15s ease;
}
.lp-record:hover { border-color: rgba(129, 140, 248, .55); }
.lp-record:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.lp-record-label { color: #94a3b8; font-size: max(11.5px, calc(12.5px * var(--s))); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.lp-record-wls { display: inline-flex; align-items: baseline; gap: calc(5px * var(--s)); font-family: var(--lp-mono); font-size: max(12px, calc(13px * var(--s))); font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-record-wls .w { color: #34d399; }
.lp-record-wls .l { color: #f87171; }
.lp-record-wls .s { color: #64748b; }
.lp-record-wls i { color: #475569; font-style: normal; font-weight: 400; }
.lp-record-profit {
    padding: calc(2px * var(--s)) calc(8px * var(--s));
    border: 1px solid;
    border-radius: .25rem;
    font-family: var(--lp-mono);
    font-size: max(12px, calc(13px * var(--s)));
    font-weight: 700;
    line-height: 1.35;
}
.lp-record-profit.up { border-color: rgba(16, 185, 129, .2); background: rgba(16, 185, 129, .1); color: #34d399; }
.lp-record-profit.down { border-color: rgba(239, 68, 68, .2); background: rgba(239, 68, 68, .1); color: #f87171; }
.lp-record-go { width: calc(18px * var(--s)); height: calc(18px * var(--s)); flex: none; margin-left: calc(-4px * var(--s)); color: #64748b; transition: color .15s ease, transform .15s ease; }
.lp-record:hover .lp-record-go { color: #a5b4fc; transform: translateX(2px); }

/* M1: the series ledger, one row a map with the bot's call at its end. */
.lp-ledger-section { margin-top: calc(32px * var(--s)); }
.lp-ledger { overflow: hidden; border: 1px solid var(--lp-border); border-radius: .75rem; background: var(--lp-surface, #0e1526); }
.lp-ledger-row {
    display: grid;
    grid-template-columns: calc(64px * var(--s)) minmax(0, 1fr) calc(100px * var(--s)) minmax(0, 1fr) calc(210px * var(--s));
    align-items: center;
    column-gap: calc(14px * var(--s));
    min-height: calc(58px * var(--s));
    padding: calc(8px * var(--s)) calc(18px * var(--s));
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
}
.lp-ledger-row + .lp-ledger-row { border-top: 1px solid var(--lp-rule); }
.lp-ledger-row { position: relative; }
.lp-ledger-row:hover { background: rgba(30, 41, 59, .4); }
/* The row's link, laid over all of it. */
.lp-ledger-link { position: absolute; inset: 0; border-radius: inherit; }
.lp-ledger-link:focus-visible { outline: 2px solid #a5b4fc; outline-offset: -2px; }
/* The panel's spotlight outline over its rows, which are positioned. */
.lp-ledger.spotlight-border::before { z-index: 2; }
.lp-ledger-row.on { background: rgba(99, 102, 241, .09); }
.lp-ledger-n { color: #cbd5e1; font-size: max(12px, calc(14px * var(--s))); font-weight: 600; white-space: nowrap; }
.lp-ledger-row.on .lp-ledger-n { color: #c7d2fe; }

/* A side from the centre out: its picks, then its name. */
.lp-ledger-side { display: grid; align-items: center; column-gap: calc(14px * var(--s)); min-width: 0; }
.lp-ledger-side.l { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t h"; }
.lp-ledger-side.r { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "h t"; }
.lp-ledger-team { grid-area: t; display: flex; align-items: center; gap: calc(8px * var(--s)); min-width: 0; color: #f1f5f9; font-size: max(13px, calc(15px * var(--s))); font-weight: 700; transition: color .15s ease; }
.lp-ledger-side.l .lp-ledger-team { justify-content: flex-end; }
.lp-ledger-side.r .lp-ledger-team { flex-direction: row-reverse; justify-content: flex-end; }
.lp-ledger-team img { width: calc(22px * var(--s)); height: calc(22px * var(--s)); flex: none; object-fit: contain; }
.lp-ledger-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-ledger-side.lost .lp-ledger-team { color: #64748b; font-weight: 600; }
.lp-ledger-side.lost .lp-ledger-team img { opacity: .5; }
.lp-ledger-heroes { grid-area: h; display: flex; gap: calc(3px * var(--s)); }
/* A side's picks hug the score; their room is five picks' even before the draft gives them
   (a live map), so the names stand where the other rows have theirs. */
.lp-ledger-side.l .lp-ledger-heroes { justify-content: flex-end; }
@media (min-width: 1100px) {
    .lp-ledger-heroes { min-width: calc(5 * 38px * var(--s) + 4 * 3px * var(--s)); }
}
.lp-ledger-heroes img { width: calc(38px * var(--s)); height: calc(22px * var(--s)); flex: none; border-radius: 3px; object-fit: cover; }
.lp-ledger-side.lost .lp-ledger-heroes img { opacity: .45; filter: grayscale(.6); }

/* The centre: the map's score in kills; the live word, or "later" while the archive has
   no numbers. */
.lp-ledger-mid { display: flex; align-items: center; justify-content: center; gap: calc(8px * var(--s)); min-width: 0; text-align: center; }
.lp-ledger-kills { flex: 1 1 0; font-family: var(--lp-mono); font-size: calc(20px * var(--s)); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; }
.lp-ledger-colon + .lp-ledger-kills { text-align: left; }
.lp-ledger-kills.r { color: #34d399; }
.lp-ledger-kills.d { color: #f87171; }
.lp-ledger-colon { flex: none; color: #334155; font-family: var(--lp-mono); font-size: calc(18px * var(--s)); font-style: normal; font-weight: 700; line-height: 1; }
.lp-ledger-live { color: #c7d2fe; font-size: max(12px, calc(12px * var(--s))); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lp-ledger-later { color: #64748b; font-size: max(11px, calc(12px * var(--s))); line-height: 1.25; }
/* The bot's call in its column: every result badge (WIN, LOSE, a skip's SKIP) on the column's
   middle line, the pick and the odds before it, the money after it; the live map's Telegram
   button centred on the same line. */
.lp-ledger-bot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: calc(10px * var(--s)); min-width: 0; }
.lp-ledger-bot > .lp-bot { display: contents; }
.lp-ledger-bot .lp-bot-call { grid-column: 1; justify-self: end; }
.lp-ledger-bot .lp-bot-badge { grid-column: 2; }
.lp-ledger-bot .lp-bot-profit { grid-column: 3; justify-self: start; text-align: left; }
.lp-ledger-bot > .lp-cta { grid-column: 1 / -1; justify-self: center; }

/* Under a finished map, the way to its full statistics: match-details.css (.lp-detail-row),
   which the dashboard's map details share. */

/* The series' score is the title row's, not under the live header's clock; the clock's
   box keeps the height of both lines (live-map.css: its padding, the clock's and the
   series' lines, the gap, its border), so the header does not shrink. A pause still
   shows its word there. */
.lp-match-c .live-score .live-series { display: none; }
.lp-match-c .live-score .live-score-clock { min-height: calc(42.8px * var(--s) + 3px); }

/* The map's card ends the view: more room under the map and the chart than the dashboard's
   row gives (it goes on to the next row), so the card does not look cut off. */
@media (min-width: 640px) {
    .lp-match-c .lp-match .match-details-layout { padding-bottom: calc(36px * var(--s)); }
}

/* The live view's room is held while it loads, so nothing under it jumps. */
[data-view="c"] .lp-match.reserve-live { min-height: calc(891px * var(--s)); }
[data-view="c"] .lp-match.reserve-final { min-height: calc(480px * var(--s)); }

/* A finished map's result without the lead's course: the live header's own markup
   (live-map.css .live-score); here it sits over the map's own cards, which need no side
   captions under it (the live view hides them too). */
.lp-match-c .team-title { display: none; }

/* Tablets and narrower, phones too (the user, 28.10: levels, by the rules; one line of names
   hugging their picks left the row's edges empty): three levels across a row —
   the map's number and the bot's call; the names either side of the score, on one line;
   each side's picks under its name. Every left part on the row's left edge, every right part
   on its right edge; a name has its side's whole width. The picks' line keeps its height
   while a live map has none yet; the score stands on the names' line (a «later» note runs
   down beside the picks). The bot's call is one piece at its line's end. */
@media (max-width: 1099px) {
    .lp-ledger-n { grid-area: n; }
    .lp-ledger-bot { display: flex; grid-area: b; justify-content: flex-end; }
    .lp-ledger-bot > .lp-bot { display: inline-flex; }
    .lp-ledger-row {
        grid-template-columns: minmax(0, 1fr) calc(100px * var(--s)) minmax(0, 1fr);
        grid-template-areas:
            "n n b"
            "lt mid rt"
            "lh mid rh";
        column-gap: calc(12px * var(--s));
        row-gap: calc(8px * var(--s));
    }
    .lp-ledger-side { display: contents; }
    .lp-ledger-side.l .lp-ledger-team { grid-area: lt; justify-content: flex-start; }
    /* Reversed: logo outermost, so flex-start is the right edge. */
    .lp-ledger-side.r .lp-ledger-team { grid-area: rt; justify-content: flex-start; }
    .lp-ledger-side.l .lp-ledger-heroes { grid-area: lh; justify-content: flex-start; }
    .lp-ledger-side.r .lp-ledger-heroes { grid-area: rh; justify-content: flex-end; }
    .lp-ledger-heroes { min-height: calc(22px * var(--s)); }
    .lp-ledger-mid { grid-area: mid; align-self: start; min-height: calc(22px * var(--s)); }
}

@media (max-width: 639px) {
    .lp-record { gap: 10px; padding-left: 12px; }
}

/* Phones: a ledger row: its number and the bot's call, the score, then the two sides,
   each its name over its picks. */
@media (max-width: 639px) {
    [data-view="c"] .lp-crumbs { justify-content: space-between; }
    .lp-slot { min-width: 36px; height: 36px; }
    .lp-title { column-gap: 12px; font-size: 16px; }
    .lp-title-team { flex-direction: column; gap: 6px; text-align: center; }
    .lp-title-team.l { flex-direction: column-reverse; }
    .lp-title-team img { width: 36px; height: 36px; }
    .lp-title-team span { display: -webkit-box; max-width: 100%; line-height: 1.15; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .lp-mini-score { font-size: 30px; }
    .lp-title-tools { width: 100%; row-gap: 10px; }
    [data-view="c"] .lp-match.reserve-live { min-height: 525px; }
    [data-view="c"] .lp-match.reserve-final { min-height: 0; }
    /* The series' maps as a scoreboard (the user, 02.11: by the phones' rules of 2026): the
       map's number and the bot's call on top, then a line a team — its logo and name, its
       picks, its kills at the row's right edge; the two scores one over the other in one
       column of the same width in every row, each beside its own team. A live map's word
       stands across both lines there; a finished map's «later» note gets a line under them.
       The loser's name quieter, still 4.5:1. */
    .lp-ledger-row {
        /* The scores' column the badges' width, right under them. */
        grid-template-columns: minmax(0, 1fr) auto 56px;
        grid-template-areas:
            "top top top"
            "lt lh lk"
            "rt rh rk";
        column-gap: 8px;
        row-gap: 8px;
        padding: 12px 14px;
    }
    /* The number and the bot's call share the top line's one cell, so the call's width never
       moves the teams' columns under it. */
    .lp-ledger-n { grid-area: top; justify-self: start; }
    .lp-ledger-bot { grid-area: top; justify-self: end; }
    .lp-ledger-side.l .lp-ledger-team,
    .lp-ledger-side.r .lp-ledger-team { flex-direction: row; justify-content: flex-start; font-size: 14px; }
    .lp-ledger-side.l .lp-ledger-heroes,
    .lp-ledger-side.r .lp-ledger-heroes { justify-content: flex-end; }
    .lp-ledger-side.lost .lp-ledger-team { color: #94a3b8; }
    .lp-ledger-heroes { min-height: 22px; gap: 2px; }
    .lp-ledger-heroes img { width: 22px; height: 22px; }
    .lp-ledger-mid { display: contents; }
    .lp-ledger-colon { display: none; }
    .lp-ledger-mid > .lp-ledger-kills { align-self: center; font-size: 18px; text-align: center; }
    .lp-ledger-mid > .lp-ledger-kills:first-of-type { grid-area: lk; }
    .lp-ledger-mid > .lp-ledger-kills:last-of-type { grid-area: rk; }
    .lp-ledger-live { grid-column: 3; grid-row: 2 / 4; align-self: center; justify-self: center; }
    .lp-ledger-later { grid-column: 1 / -1; grid-row: 4; text-align: left; }
    /* The bot's call: the pick and the odds, the money, then the badge on the row's right edge
       (the user, 02.11), every badge (a skip's too) the same width there, so WIN, LOSE and
       SKIP stand in one column down the ledger. */
    .lp-ledger-bot .lp-bot-call { order: 0; }
    .lp-ledger-bot .lp-bot-profit { order: 1; text-align: right; }
    .lp-ledger-bot .lp-bot-badge { order: 2; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 24px; padding: 0; }
}

/* The narrowest phones: picks a little smaller and the teams' names set tighter (their size
   and their logos kept: the user, 02.11), so a name stays whole; the coming matches' tiles
   likewise, their sides and middle a little closer. */
@media (max-width: 379px) {
    .lp-ledger-heroes img { width: 20px; height: 20px; }
    .lp-ledger-team span { letter-spacing: -.025em; }
    .lp-main .lp-upcoming-tiles .lp-upcoming-row.lp-match-tile { padding-right: 10px; padding-left: 10px; }
    .lp-up-body { gap: 6px; }
    .lp-up-team .lp-name { letter-spacing: -.04em; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-kills.bump { animation: none; }
}

/* ── A map's players on their heroes (_hero_stats.html) ─────────────── */
/* Under the map, before the series' maps: a panel a team, Radiant left as the map's cards
   above it; a row a player — the hero's portrait, the player and the hero, then the chosen
   period's numbers. The period is the dashboard's segments (telegram-cta.css .dash-rail),
   buttons here; its pill slides to the chosen one (live-page.js). */
.hs-section { margin-top: calc(32px * var(--s)); }
[data-view="c"] .hs-head { align-items: center; }
/* The heading's note that the numbers are the site's own, quiet under it; the two together
   centred on the rail's height, so the heading stands a little above its middle. */
[data-view="c"] .hs-head .lp-heading { flex-direction: column; align-items: flex-start; gap: calc(3px * var(--s)); line-height: 1.2; }
.hs-source { color: #64748b; font-size: max(11px, calc(12px * var(--s))); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.hs-rail > button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    appearance: none;
    border: 0;
    background: none;
    border-radius: .5rem;
    color: #94a3b8;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 200ms ease;
}
.hs-rail > button:hover { color: #fff; }
.hs-rail > button:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.hs-rail > [aria-pressed="true"] {
    background: rgba(99, 102, 241, .16);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .28);
    color: #fff;
    cursor: default;
}
.hs-rail.has-thumb > [aria-pressed="true"] { background: none; box-shadow: none; }

/* Every period is in the page; the others than the section's are hidden. Its numbers are the
   row's cells (phones: a strip of their own). */
.hs-nums { display: contents; }
.hs-section[data-period="tournament"] .hs-nums:not([data-p="tournament"]),
.hs-section[data-period="patch"] .hs-nums:not([data-p="patch"]),
.hs-section[data-period="month"] .hs-nums:not([data-p="month"]),
.hs-section[data-period="months3"] .hs-nums:not([data-p="months3"]),
.hs-section[data-period="months6"] .hs-nums:not([data-p="months6"]),
.hs-section[data-period="year"] .hs-nums:not([data-p="year"]) { display: none; }
/* A number's own label: the labels' row has them on wider screens. */
.hs-tile-label { display: none; }

.hs-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16px * var(--s)); }
.hs-team {
    position: relative;
    min-width: 0;
    /* Room under the last row only: the labels' row is centred between the border and its rule. */
    padding: 0 0 calc(4px * var(--s));
    border: 1px solid var(--lp-border);
    border-radius: .75rem;
    background: var(--lp-surface, #0e1526);
}
.hs-row {
    display: grid;
    grid-template-columns: calc(72px * var(--s)) minmax(0, 1fr) calc(58px * var(--s)) calc(96px * var(--s))
                           calc(124px * var(--s)) calc(84px * var(--s));
    align-items: center;
    column-gap: calc(12px * var(--s));
    min-height: calc(56px * var(--s));
    padding: calc(6px * var(--s)) calc(16px * var(--s));
}
.hs-row + .hs-row,
.hs-picker + .hs-row { border-top: 1px solid var(--lp-rule); }
/* The phones' hero buttons (below). */
.hs-picker { display: none; }

/* The labels' row: the team, then what each column counts. */
.hs-labels {
    min-height: calc(40px * var(--s));
    color: #64748b;
    font-size: max(11px, calc(11px * var(--s)));
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.hs-labels > :not(.hs-team-name) { text-align: center; }
.hs-team-name {
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    gap: calc(8px * var(--s));
    min-width: 0;
    color: #f1f5f9;
    font-size: max(13px, calc(15px * var(--s)));
    letter-spacing: 0;
    text-transform: none;
}
.hs-team-name img { width: calc(22px * var(--s)); height: calc(22px * var(--s)); flex: none; object-fit: contain; }
.hs-team-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hs-art { width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; object-fit: cover; background: #101827; }
.hs-who { display: flex; flex-direction: column; gap: calc(2px * var(--s)); min-width: 0; }
.hs-who b, .hs-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-who b { color: #f1f5f9; font-size: max(13px, calc(15px * var(--s))); font-weight: 600; }
.hs-who span { color: #94a3b8; font-size: max(12px, calc(13px * var(--s))); font-weight: 600; }

.hs-games,
.hs-rate,
.hs-kda { font-family: var(--lp-mono); font-variant-numeric: tabular-nums; }
.hs-games { color: #e2e8f0; font-size: calc(16px * var(--s)); font-weight: 700; text-align: center; }

/* Won and lost: the rate, the record, a bar of the two. */
.hs-win { display: flex; flex-direction: column; gap: calc(5px * var(--s)); min-width: 0; }
.hs-rate { display: flex; align-items: baseline; justify-content: center; gap: calc(6px * var(--s)); white-space: nowrap; }
.hs-rate b { color: #e2e8f0; font-size: calc(15px * var(--s)); font-weight: 700; }
.hs-rate span { color: #94a3b8; font-size: max(12px, calc(13px * var(--s))); font-weight: 600; }
.hs-win.up .hs-rate b { color: #34d399; }
.hs-win.down .hs-rate b { color: #f87171; }
/* Wins green, losses red: the chart's two colours (live-map.js LEAD_RGB), as solid as its line. */
.hs-bar { position: relative; display: block; height: 3px; overflow: hidden; border-radius: 2px; background: rgb(248, 113, 113); }
.hs-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: rgb(52, 211, 153); }

/* K/D/A as the hero cards write it (hero-card.css): the deaths in red, the slashes quiet. */
.hs-kda { display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--s)); min-width: 0; color: #e2e8f0; font-size: calc(14px * var(--s)); white-space: nowrap; }
.hs-kda-value { color: #f8fafc; font-weight: 700; }
.hs-kda i { margin: 0 .06em; color: #475569; font-style: normal; font-weight: 500; }
.hs-deaths { color: #fca5a5; }
.hs-dash { color: #475569; }
/* The form: the period's latest maps, newest first, won green and lost red (the chart's two colours). */
.hs-form { position: relative; display: flex; align-items: center; justify-content: center; border-radius: .375rem; outline: none; -webkit-tap-highlight-color: transparent; }
.hs-form:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.hs-dots { display: flex; align-items: center; gap: calc(5px * var(--s)); padding: calc(6px * var(--s)) 0; }
.hs-dots > i,
.hs-form-game > i { width: calc(9px * var(--s)); height: calc(9px * var(--s)); flex: none; border-radius: 50%; background: rgb(248, 113, 113); }
.hs-dots > i.w,
.hs-form-game > i.w { background: rgb(52, 211, 153); }

/* Over the dots, their maps as a list: the result, the day, the opponent, the player's K/D/A
   there (as the cards write it). Under the dots; over them in a panel's last two rows, so it
   stays on the panel. */
.hs-form-list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: calc(-8px * var(--s));
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: calc(12px * var(--s));
    row-gap: calc(7px * var(--s));
    /* As wide as its longest map's line (a team's whole name, cut short only past the screen's
       room); the heading wraps within that, a long hero's name taking a second line. */
    width: max-content;
    min-width: calc(220px * var(--s));
    max-width: calc(100vw - 32px);
    padding: calc(10px * var(--s)) calc(14px * var(--s)) calc(12px * var(--s));
    border: 1px solid rgba(51, 65, 85, .8);
    border-radius: .5rem;
    background: #0b1323;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .5);
    color: #cbd5e1;
    font-size: max(12px, calc(13px * var(--s)));
    text-align: left;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.hs-row:nth-last-child(-n+2) .hs-form-list { top: auto; bottom: calc(100% + 6px); transform: translateY(4px); }
/* Shown by the pointer over the dots, or the keyboard's focus; on a touch screen by a tap (its
   focus), hidden by a tap elsewhere, as a hover there would stick. */
.hs-form:focus-visible .hs-form-list { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
    .hs-form:hover .hs-form-list { opacity: 1; visibility: visible; transform: none; }
}
@media (hover: none) {
    .hs-form:focus .hs-form-list { opacity: 1; visibility: visible; transform: none; }
}
.hs-form-head { grid-column: 1 / -1; contain: inline-size; margin-bottom: calc(2px * var(--s)); color: #64748b; font-size: max(11px, calc(11px * var(--s))); font-weight: 700; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; white-space: normal; }
/* A hero's name in one piece: on the heading's next line when the line has no room for it,
   broken only where it is wider than a line itself. */
.hs-form-hero { display: inline-block; }
.hs-form-game { display: contents; }
.hs-form-day { color: #94a3b8; font-weight: 600; }
.hs-form-vs { min-width: 0; overflow: hidden; color: #f1f5f9; font-weight: 600; text-overflow: ellipsis; }
.hs-form-kda { color: #f8fafc; font-family: var(--lp-mono); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.hs-form-kda i { margin: 0 .06em; color: #475569; font-style: normal; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
    .hs-form-list { transition: none; }
}
.hs-none { grid-column: 3 / -1; color: #475569; font-size: max(12px, calc(13px * var(--s))); text-align: center; }

/* Before the picks (_hero_stats.html .hs-waiting): the block's own rows with empty portraits and
   the names' lines as quiet bars, the rail at rest; the note only on phones (the user, 02.11),
   its room kept here. */
.hs-waiting .hs-rail { opacity: .55; }
.hs-waiting .hs-rail > button,
.hs-waiting .hs-rail > button:hover { color: #94a3b8; cursor: default; }
.hs-waiting .hs-rail > [aria-pressed="true"] { color: #fff; }
i.hs-art { display: block; }
.hs-bone { position: relative; width: 62%; color: transparent; }
.hs-who span.hs-bone { width: 44%; }
.hs-bone::after { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: .62em; border-radius: 4px; background: rgba(148, 163, 184, .1); transform: translateY(-50%); }
.hs-wait-note { grid-column: 3 / -1; color: #475569; font-size: max(12px, calc(13px * var(--s))); text-align: center; visibility: hidden; }


/* Narrower than two teams' rows: a team under the other, each row the width's. */
@media (max-width: 1199px) {
    .hs-teams { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: as the map's own cards there (live-map.css .live-mobile-heroes), the team's five
   heroes as buttons, the chosen one's player under them — the player (16 px) and the hero,
   the form at the right, its tap area 46 px high; under them the period's numbers in a strip
   of their own, each with its label above it (the labels' row keeps only the team). The rail
   three and three, each a 44 px target. */
@media (max-width: 639px) {
    [data-view="c"] .hs-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .hs-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hs-rail.dash-rail--sub > button { min-height: 44px; padding: 0 .25rem; font-size: 13px; }

    .hs-picker {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        margin: 0 12px;
        padding: 4px;
        border: 1px solid rgba(51, 65, 85, .5);
        border-radius: 8px;
        background: rgba(30, 41, 59, .5);
    }
    /* The hero's portrait at the button's top, up to its edges; the name under it. */
    .hs-pick {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        appearance: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        min-width: 0;
        padding: 0 0 5px;
        overflow: hidden;
        border: 1px solid rgba(51, 65, 85, .42);
        border-radius: 8px;
        background: rgba(30, 41, 59, .35);
        color: #cbd5e1;
        font: inherit;
        cursor: pointer;
    }
    .hs-pick[aria-pressed="true"] { border-color: rgba(129, 140, 248, .62); background: rgba(99, 102, 241, .15); cursor: default; }
    .hs-pick:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
    .hs-pick img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0f172a; }
    .hs-pick span {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0 2px;
        font-size: clamp(8px, 2.45vw, 10px);
        font-weight: 500;
        line-height: 1.15;
        text-align: center;
        overflow-wrap: anywhere;
        /* Two lines' room whatever the names, so the buttons' row keeps one height. */
        min-height: 2.3em;
    }
    /* Before the picks: empty portraits, a quiet bar for each name, the note in the numbers'
       place, as high as their strip. */
    .hs-pick-art { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0f172a; }
    .hs-pick .hs-bone::after { right: 18%; left: 18%; }
    .hs-wait-row .hs-wait-note { display: flex; grid-area: nums; align-items: center; justify-content: center; min-height: 60px; border-radius: 8px; background: rgba(148, 163, 184, .06); visibility: visible; }

    .hs-row {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "who" "nums";
        row-gap: 10px;
        min-height: 0;
        padding: 12px;
    }
    /* Only the chosen player; no rules between the team, its heroes and him. */
    .hs-row:not(.hs-labels):not(.on) { display: none; }
    .hs-row + .hs-row,
    .hs-picker + .hs-row { border-top: 0; }
    .hs-labels { grid-template-areas: none; min-height: 48px; padding-top: 0; padding-bottom: 0; }
    .hs-labels > :not(.hs-team-name) { display: none; }
    .hs-team-name { grid-column: 1 / -1; font-size: 16px; }
    /* The names and the form on one middle line: the names' room and the form's tap area the
       same 46 px from the row's padding (the two names take 45.5). The portrait is the button's. */
    .hs-art,
    i.hs-art { display: none; }
    .hs-who { grid-area: who; justify-content: center; min-height: 46px; padding-right: 88px; }
    .hs-who b { font-size: 16px; }
    .hs-who span { font-size: 13px; }

    .hs-nums {
        display: grid;
        grid-area: nums;
        /* The same tracks in every card, so the numbers stand in columns down the team: the
           games' as wide as its label (the same in every card), K/D/A's room its widest
           (10.4/2.6/16.9 at 14 px). */
        grid-template-columns: max-content minmax(0, 1fr) 112px;
        align-items: start;
        column-gap: 16px;
        /* With numbers or without them, the same height (the numbers' 59.2 px), so a card does
           not jump as the hero or the period changes. */
        min-height: 60px;
        padding: 8px 12px 10px;
        border-radius: 8px;
        background: rgba(148, 163, 184, .06);
    }
    .hs-tile-label { display: block; margin-bottom: 4px; color: #64748b; font: 700 11px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
    .hs-games,
    .hs-win,
    .hs-kda { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; }
    /* The games' number in the middle of the room under its label (the wins have their bar
       there), under the label's middle. */
    .hs-games { align-self: stretch; font-size: 16px; }
    .hs-games > :last-child { display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: center; }
    /* Every number on one middle line: each value's line 24 px under its label, its text in
       the line's middle (the record beside the rate too, not on its baseline). */
    .hs-rate { align-items: center; justify-content: flex-start; }
    .hs-rate,
    .hs-kda-value,
    .hs-kda .hs-dash,
    .hs-games > :last-child { display: flex; align-items: center; min-height: 24px; }
    .hs-rate b { font-size: 16px; }
    /* The wins on the numbers' line: the rate, its bar, then the record, all at the digits'
       middle, the bar taking the room left; the line 24 px as the others'. */
    .hs-win { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto; grid-template-rows: auto 24px; grid-template-areas: "label label label" "rate bar record"; align-items: center; column-gap: 10px; }
    /* Its label over the middle of the rate, the bar and the record together. */
    .hs-win .hs-tile-label { grid-area: label; justify-self: center; }
    .hs-win .hs-rate { display: contents; }
    .hs-win .hs-rate b { grid-area: rate; }
    .hs-win .hs-rate span { grid-area: record; }
    .hs-win .hs-bar { grid-area: bar; margin: 0; }
    /* K/D/A's label over its value's middle, as the wins' and the games' are. */
    .hs-kda { align-items: center; font-size: 14px; }
    .hs-none { grid-column: 1 / -1; align-self: center; text-align: center; }

    /* The form's place five dots wide (9 px each, 5 px between, its padding), its dots in its
       middle: two of them stand in the centre of where five would, as on wider screens. */
    .hs-form { position: absolute; top: 12px; right: 4px; width: 81px; height: 46px; padding: 0 8px; justify-content: center; }
    /* Under the dots whichever player it is: one row shows, nothing of the team below it. */
    .hs-team .hs-row .hs-form-list { top: calc(100% + 6px); bottom: auto; right: 0; transform: none; }
}

/* ── Entrance, as on the dashboard ──────────────────────────────────── */
/* While the page is new (html.page-entering, cleared after it loads: live_base.html) its blocks
   rise in one after another: the list's sections (the tournaments to come last), a map page's
   crumbs, head, live view and ledger. Polls and later swaps come without it. */
.page-entering .lp-primary > *,
.page-entering .lp-side,
.page-entering .lp-match-page > * { animation: fadeSlideUp .5s cubic-bezier(.16, 1, .3, 1) both; }
.page-entering .lp-primary > :nth-child(1),
.page-entering .lp-match-page > :nth-child(1) { animation-delay: 100ms; }
.page-entering .lp-primary > :nth-child(2),
.page-entering .lp-side,
.page-entering .lp-match-page > :nth-child(2) { animation-delay: 200ms; }
.page-entering .lp-primary > :nth-child(3),
.page-entering .lp-match-page > :nth-child(3) { animation-delay: 300ms; }
.page-entering .lp-primary > :nth-child(n+4),
.page-entering .lp-match-page > :nth-child(n+4) { animation-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .page-entering .lp-primary > *,
    .page-entering .lp-side,
    .page-entering .lp-match-page > * { animation: none; }
}