/* 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;
}

/* ── 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. */
.lp-upcoming-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(260px * var(--s)), 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)); }

@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; }

/* The bot's record on the tournament, the link to the history. */
.lp-proof {
    display: inline-flex;
    align-items: center;
    gap: calc(6px * var(--s));
    color: #cbd5e1;
    font-size: max(12.5px, calc(14px * var(--s)));
    text-decoration: none;
    transition: color .15s ease;
}

.lp-proof b { font-family: var(--lp-mono); font-weight: 700; }
.lp-proof b.up { color: #34d399; }
.lp-proof b.down { color: #f87171; }
.lp-proof .lp-go { width: calc(18px * var(--s)); height: calc(18px * var(--s)); }
.lp-proof:hover { color: #fff; }
.lp-proof:hover .lp-go { color: #a5b4fc; transform: translateX(2px); }
.lp-proof:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 3px; border-radius: 4px; }

/* 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 {
    overflow: hidden;
    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 { grid-template-columns: repeat(auto-fit, minmax(calc(240px * var(--s)), 1fr)); }
    [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). */
[data-view="c"] .spotlight-border { position: relative; }
/* 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. */
.lp-idle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(16px * var(--s)) calc(32px * var(--s));
    padding: calc(22px * var(--s)) calc(24px * var(--s));
    border: 1px solid var(--lp-border);
    border-radius: .75rem;
    background: var(--lp-surface, #0e1526);
}
.lp-idle-title { margin: 0; color: #e2e8f0; font-size: max(15px, calc(18px * var(--s))); font-weight: 700; letter-spacing: -.01em; }
.lp-idle-sub { margin: calc(6px * var(--s)) 0 0; color: var(--lp-muted, #94a3b8); font-size: max(13px, calc(14.5px * var(--s))); line-height: 1.45; }
.lp-idle-next {
    display: grid;
    justify-items: end;
    gap: calc(7px * var(--s));
    min-width: 0;
    padding-left: calc(32px * var(--s));
    border-left: 1px solid var(--lp-rule);
}
.lp-idle-label { color: var(--lp-muted, #94a3b8); font-size: max(12px, calc(13px * var(--s))); font-weight: 600; }
.lp-idle-teams { display: flex; align-items: center; gap: calc(10px * var(--s)); min-width: 0; color: #f1f5f9; font-size: max(14px, calc(16px * var(--s))); font-weight: 700; }
.lp-idle-teams i { color: #475569; font-style: normal; font-weight: 400; }
.lp-idle-team { display: inline-flex; align-items: center; gap: calc(8px * var(--s)); min-width: 0; }
.lp-idle-team .lp-logo { width: calc(24px * var(--s)); height: calc(24px * var(--s)); flex: none; object-fit: contain; }
.lp-idle-team .lp-logo-blank { border-radius: 5px; font-size: calc(12px * var(--s)); }
.lp-idle-team .lp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-idle-when { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: calc(4px * var(--s)) calc(12px * var(--s)); color: var(--lp-muted, #94a3b8); font-size: max(12px, calc(13px * var(--s))); }

@media (max-width: 639px) {
    .lp-idle { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .lp-idle-next { justify-items: start; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--lp-rule); }
    .lp-idle-teams { flex-wrap: wrap; row-gap: 6px; }
    .lp-idle-when { justify-content: flex-start; }
}

@media (max-width: 1099px) {
    .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)); }


/* 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; }
.lp-slot.live: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; }

/* A map of the series going on while the page shows another. */
.lp-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12px * var(--s));
    min-height: calc(44px * var(--s));
    padding: 0 calc(16px * var(--s));
    border: 1px solid rgba(129, 140, 248, .35);
    border-radius: .75rem;
    background: rgba(99, 102, 241, .12);
    color: #e0e7ff;
    font-size: max(13px, calc(15px * var(--s)));
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.lp-banner .lp-go { width: calc(20px * var(--s)); height: calc(20px * var(--s)); flex: none; transition: transform .15s ease; }
.lp-banner:hover { border-color: rgba(129, 140, 248, .55); background: rgba(99, 102, 241, .2); }
.lp-banner:hover .lp-go { transform: translateX(2px); }
.lp-banner:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }

[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. */
.lp-title-row { display: flex; flex-direction: column; align-items: center; gap: calc(16px * var(--s)); margin-bottom: calc(16px * var(--s)); }
.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: whom it backed at what odds, the outcome, the money. */
.lp-bot {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--s));
    height: calc(30px * var(--s));
    padding: 0 calc(10px * var(--s));
    border: 1px solid rgba(51, 65, 85, .7);
    border-radius: .375rem;
    background: rgba(30, 41, 59, .45);
    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 img { width: calc(18px * var(--s)); height: calc(18px * 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 b { font-weight: 700; letter-spacing: .04em; }
.lp-bot.win { border-color: rgba(52, 211, 153, .3); background: rgba(52, 211, 153, .08); }
.lp-bot.win b,
.lp-bot.win .lp-bot-profit { color: #34d399; }
.lp-bot.lose { border-color: rgba(248, 113, 113, .3); background: rgba(248, 113, 113, .07); }
.lp-bot.lose b,
.lp-bot.lose .lp-bot-profit { color: #f87171; }
.lp-bot.skip,
.lp-bot.none { color: #64748b; font-family: Inter, sans-serif; }
.lp-bot.live { border-color: rgba(129, 140, 248, .35); background: rgba(99, 102, 241, .1); color: #c7d2fe; font-family: Inter, sans-serif; }
/* The live map's prediction: a link to the bot, over the row's own link. */
a.lp-bot { position: relative; z-index: 1; text-decoration: none; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
a.lp-bot.live:hover { border-color: rgba(129, 140, 248, .6); background: rgba(99, 102, 241, .2); color: #eef2ff; }
a.lp-bot:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 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(172px * 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; }
.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)); }
.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; }
.lp-ledger-bot { display: flex; justify-content: flex-end; min-width: 0; }

/* Under a finished map: the way to its full statistics. */
.lp-detail-row { display: flex; justify-content: center; margin-top: calc(16px * var(--s)); }
.lp-detail-link {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--s));
    min-height: calc(44px * var(--s));
    padding: 0 calc(16px * var(--s)) 0 calc(20px * var(--s));
    border: 1px solid #334155;
    border-radius: .5rem;
    background: var(--lp-surface, #0e1526);
    color: #e2e8f0;
    font-size: max(12px, calc(14px * var(--s)));
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.lp-detail-link svg { width: calc(20px * var(--s)); height: calc(20px * var(--s)); flex: none; transition: transform .15s ease; }
.lp-detail-link:hover { border-color: rgba(129, 140, 248, .55); color: #fff; }
.lp-detail-link:hover svg { color: #a5b4fc; transform: translateX(2px); }
.lp-detail-link:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }

/* 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, the live header's twin: radiant left, as the heroes below. */
.lp-result-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: calc(24px * var(--s));
    min-height: calc(57px * var(--s));
    padding: calc(10px * var(--s)) calc(16px * var(--s));
    border-bottom: 1px solid var(--lp-border);
    background: var(--lp-surface, #0e1526);
}

.lp-result-team { display: flex; align-items: center; gap: calc(10px * var(--s)); min-width: 0; color: #e2e8f0; font-size: calc(17.5px * var(--s)); font-weight: 700; }
.lp-result-team.r { justify-content: flex-end; }
.lp-result-team.lost { color: var(--lp-muted, #94a3b8); font-weight: 600; }
.lp-result-team .lp-name { font-size: inherit; color: inherit; }
.lp-win-tag {
    flex: none;
    padding: calc(1px * var(--s)) calc(7px * var(--s));
    border-radius: .25rem;
    font-size: max(12px, calc(12px * var(--s)));
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.lp-result-team.r .lp-win-tag { background: rgba(52, 211, 153, .12); color: #34d399; }
.lp-result-team.d .lp-win-tag { background: rgba(248, 113, 113, .12); color: #f87171; }

.lp-result-mid { display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--s)); }
.lp-result-kills { display: flex; align-items: baseline; gap: calc(10px * var(--s)); font-family: var(--lp-mono); font-weight: 700; line-height: 1; }
.lp-result-kills b { font-size: calc(28px * var(--s)); }
.lp-result-kills b.r { color: #34d399; }
.lp-result-kills b.d { color: #f87171; }
.lp-result-kills i { color: #334155; font-style: normal; }
.lp-result-time,
.lp-result-later { color: var(--lp-muted, #94a3b8); font-family: var(--lp-mono); font-size: max(12px, calc(13px * var(--s))); }
.lp-result-label { color: #e2e8f0; font-size: max(12px, calc(13px * var(--s))); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Tablets: a ledger row puts its number and the bot's call in a line above. */
@media (max-width: 1099px) {
    .lp-ledger-row {
        grid-template-columns: minmax(0, 1fr) calc(100px * var(--s)) minmax(0, 1fr);
        grid-template-areas:
            "n n b"
            "l mid r";
        row-gap: calc(8px * var(--s));
    }
    .lp-ledger-n { grid-area: n; }
    .lp-ledger-side.l { grid-area: l; }
    .lp-ledger-mid { grid-area: mid; }
    .lp-ledger-side.r { grid-area: r; }
    .lp-ledger-bot { grid-area: b; }
}

/* 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; }
    .lp-result-bar { column-gap: 8px; padding: 10px 12px; }
    .lp-result-team { font-size: 14px; flex-direction: column; gap: 4px; text-align: center; }
    .lp-result-team .lp-name {
        display: -webkit-box;
        max-width: 100%;
        line-height: 1.15;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .lp-result-later { max-width: 96px; text-align: center; white-space: normal; }
    .lp-result-team.r { justify-content: center; }
    .lp-result-kills b { font-size: 24px; }
    .lp-ledger-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "n b"
            "mid mid"
            "l r";
        column-gap: 12px;
        padding: 12px;
    }
    .lp-ledger-side { row-gap: 6px; }
    .lp-ledger-side.l { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "h"; }
    .lp-ledger-side.r { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "h"; }
    .lp-ledger-side.l .lp-ledger-team { justify-content: flex-start; }
    .lp-ledger-side.r .lp-ledger-team { justify-content: flex-start; }
    .lp-ledger-side.r .lp-ledger-heroes { justify-content: flex-end; }
    .lp-ledger-mid { justify-self: center; width: 110px; }
    .lp-ledger-team { font-size: 13px; }
    .lp-ledger-kills { font-size: 18px; }
    .lp-ledger-heroes { gap: 2px; }
    .lp-ledger-heroes img { width: 22px; height: 22px; }
    .lp-ledger-later { max-width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-kills.bump { animation: 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, 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-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; }
}