/* Live map statistics inside an open LIVE row (static/live-map.js).
   Hero rows, columns and insets come from the site's match details; this file
   adds the live parts: score, death state, map, net worth chart, phone roster. */

/* ── Row and score stay visible while the open live map scrolls ── */
/* Layers: other rows' coloured left bars (10) < score (15) < live row (16) <
   the live row's own bar (17) < the table header (20, match-details.css). */
.map-row-wrapper.live-open > .table-grid {
    position: sticky;
    top: var(--live-row-top, 0px);
    z-index: 16;
    background-color: #111428;
}
.map-row-wrapper.live-open > .live-dot { z-index: 17; }
/* A table with a LIVE row is tall enough for the fully open live map from the
   start, so opening it neither scrolls inside the frame nor resizes the table.
   Measured (header, row and the open map): the hero cards and the map are of a
   fixed size (929 px at the scale of a 2560 screen, plus borders), on desktops and
   tablets alike; on the narrowest tablets the map, a square no wider than half the
   row, is lower than its 310 px. Phones have no inner scroll. */
.table-outer { container-type: inline-size; }
@media (min-width: 640px) {
    .table-scroll-container:has(.live-row) { max-height: calc(929px * var(--s) + 6px); }
}
@media (min-width: 640px) and (max-width: 1050px) {
    .table-scroll-container:has(.live-row) { max-height: calc(929px * var(--s) + 6px + min(0px, 50cqw - 333px)); }
}
/* Below md the empty action column sits under the heroes; it only adds height. */
@media (max-width: 767px) {
    .live-view .match-actions { display: none; }
}

/* The live score repeats the map number and LIVE; the row keeps only the
   prediction button. Hidden, not removed, so the row does not reflow. */
.map-row-wrapper.live-open > .table-grid .map-badge,
.map-row-wrapper.live-open > .table-grid .result-badge { visibility: hidden; }

/* Score like the series title row ("Team vs Team") with the clock in place of
   "vs". The board has the hero grid's inset and the action column's spacer, so
   the clock sits over the gap between the hero columns. The opaque background
   is the details panel's own (slate-900/80 over the table). */
.live-score {
    position: sticky;
    top: var(--live-score-top, 0px);
    z-index: 15;
    display: flex;
    align-items: center;
    padding: calc(10px * var(--s)) 0;
    background: linear-gradient(rgba(15, 23, 42, .8), rgba(15, 23, 42, .8)), #0b0e14;
    border-bottom: 1px solid #1e293b;
}
.live-score-board {
    display: grid;
    flex: 1 1 0%;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: calc(14px * var(--s));
    min-width: 0;
    padding-left: calc(80px * var(--s));
}
.live-score-spacer { flex: 0 0 calc(80px * var(--s)); }
.live-score-side { display: flex; align-items: center; gap: calc(10px * var(--s)); min-width: 0; }
.live-score-side.radiant { justify-content: flex-end; }
.live-score-side.dire { justify-content: flex-start; }
.live-lead.live-lead-phone { display: none; }
.live-team-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.live-team-name {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: calc(17.5px * var(--s));
    font-weight: 700;
    letter-spacing: .025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The map's winner: a badge like the gold lead's, green, outermost; a dot on phones. */
.live-win {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: .125rem .5rem;
    border: 1px solid rgba(16, 185, 129, .25);
    border-radius: .25rem;
    background: rgba(16, 185, 129, .12);
    color: #34d399;
    /* The gold badge's font and line height, so both are the same height. */
    font-family: 'JetBrains Mono', monospace;
    font-size: calc(14px * var(--s));
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.live-winner { display: none; flex: none; width: 8px; height: 8px; border-radius: 9999px; background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, .5); }
/* The badge would squeeze the team name (live-map.js fitWinner): the dot. */
.live-win-compact .live-win { display: none; }
.live-win-compact .live-winner { display: block; }
.live-score-numbers { display: inline-flex; flex: none; align-items: center; gap: calc(8px * var(--s)); }
.live-kills,
.live-lead,
.live-clock,
.live-series,
.live-pause { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.live-kills { font-size: calc(28px * var(--s)); font-weight: 700; line-height: 1; }
.live-score-side.radiant .live-kills { color: #34d399; }
.live-score-side.dire .live-kills { color: #f87171; }
.live-lead {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: .125rem .5rem;
    border: 1px solid rgba(245, 158, 11, .2);
    border-radius: .25rem;
    background: rgba(245, 158, 11, .1);
    color: #fbbf24;
    font-size: calc(14px * var(--s));
    font-weight: 700;
    white-space: nowrap;
}
.live-lead img { width: calc(14px * var(--s)); height: calc(14px * var(--s)); flex: none; object-fit: contain; }
/* The coin and the number centred in the badge: the digits sit .08em above their
   line's middle (the font's ascent), the coin's picture .05em below its box's. */
.live-lead > span { position: relative; top: .08em; }
.live-lead img { position: relative; top: -.05em; }
.live-score-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: calc(70px * var(--s));
    padding: calc(4px * var(--s)) calc(10px * var(--s));
    border: 1px solid rgba(51, 65, 85, .5);
    border-radius: .5rem;
    background: rgba(30, 41, 59, .5);
}
.live-clock { color: #e2e8f0; font-size: calc(17px * var(--s)); font-weight: 700; line-height: 1.2; }
/* A side's kills counted up (live-map.js countKills): the new number rolls in from
   below with a short bump; the side's half of the score washes in its colour from
   its edge, longer for several kills at once or a fight. Transforms and opacity
   only: cheap on the stream's server too. */
.live-score > .live-score-board { position: relative; }
.live-kill-wash { position: absolute; top: 0; bottom: 0; width: 50%; opacity: 0; pointer-events: none; }
.live-kill-wash.radiant { left: 0; background: linear-gradient(90deg, rgba(52, 211, 153, .26), rgba(52, 211, 153, 0) 85%); }
.live-kill-wash.dire { right: 0; background: linear-gradient(270deg, rgba(248, 113, 113, .26), rgba(248, 113, 113, 0) 85%); }
.live-kill-wash.on { animation: live-kill-wash 1.3s ease-out both; }
.live-kill-wash.on.strong { animation-duration: 2s; }
@keyframes live-kill-wash { 18% { opacity: 1; } 100% { opacity: 0; } }
.live-kills-roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.live-kills-roll > span { display: block; }
.live-kills-roll > .live-kills-old { position: absolute; inset: 0; }
.live-kills-roll.rolling > .live-kills-old { animation: live-kills-out .42s cubic-bezier(.3, 0, .2, 1) both; }
.live-kills-roll.rolling > :last-child { animation: live-kills-in .42s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes live-kills-out { to { opacity: 0; transform: translateY(-75%); } }
@keyframes live-kills-in { from { opacity: 0; transform: translateY(75%); } }
.live-kills.live-kills-bump { animation: live-kills-bump .6s cubic-bezier(.3, 0, .2, 1); }
@keyframes live-kills-bump { 30% { transform: scale(1.22); } }
@media (prefers-reduced-motion: reduce) {
    .live-kill-wash.on,
    .live-kills-roll.rolling > span,
    .live-kills.live-kills-bump { animation: none; }
}
/* In the series' place, at its size: the clock box keeps its height. */
.live-pause { color: #fbbf24; font-size: calc(12px * var(--s)); font-weight: 700; letter-spacing: .06em; line-height: 1.2; }
.live-series { color: #64748b; font-size: calc(12px * var(--s)); font-weight: 600; line-height: 1.2; }

/* The heroes as far under the score as the map and the chart are under them. */
@media (min-width: 640px) {
    .live-view .match-details-layout { padding-top: calc(16px * var(--s)); }
}

/* Without the action column (tablets and phones) the board spans the panel. */
@media (max-width: 1050px) {
    .live-score { padding: calc(10px * var(--s)) 1.25rem; }
    .live-score-board { padding-left: 0; }
    .live-score-spacer { display: none; }
}

/* ── Hero cards: hero-card.css draws them, live-map.js updates them ── */
/* Team names are in the score above; the phone roster has its own headings. */
.live-view .team-title { display: none; }
/* The score and the phone hero card, like the hero cards: an arrow cursor and
   no text selection. */
.live-score,
.live-mobile-heading,
.live-mobile-detail { cursor: default; -webkit-user-select: none; user-select: none; }
/* The phone roster's buyback on cooldown, in the name's place ("BB 7:22"), in the
   gold of the score's net worth lead. */
.live-bb {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: calc(24px * var(--s));
    margin-left: 6px;
    padding: 0 calc(5px * var(--s));
    border: 1px solid rgba(245, 158, 11, .4);
    border-radius: .25rem;
    background: rgba(245, 158, 11, .12);
    color: #fbbf24;
    font: 700 calc(11px * var(--s))/1 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: middle;
}
@media (max-width: 639px) {
    .live-bb { height: calc(20px * var(--s)); }
}
/* The phone roster's flashes: a death's red wash into the dead shade, one seen only
   in K/D/A fading back, a buyback's gold; the respawn time shows after the wash. */
@keyframes live-death-wash {
    0% { background: rgba(2, 6, 13, 0); }
    34% { background: rgba(116, 47, 57, .54); }
    100% { background: rgba(2, 6, 13, .59); }
}
@keyframes live-death-blink {
    0%, 100% { background: rgba(116, 47, 57, 0); }
    34% { background: rgba(116, 47, 57, .54); }
}
@keyframes live-buyback-blink {
    0%, 100% { background: rgba(245, 158, 11, 0); }
    34% { background: rgba(245, 158, 11, .2); }
}
@keyframes live-respawn-in {
    0%, 32% { opacity: 0; }
    60%, 100% { opacity: 1; }
}

/* ── Map and chart under the hero columns, same inset and gap ── */
.live-main { flex: 1 1 0%; min-width: 0; }
.live-mobile { display: none; }
.live-visuals {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 13fr);
    align-items: start;
    column-gap: 1.5rem;
    margin-top: calc(16px * var(--s));
}
@media (min-width: 1051px) {
    .live-visuals { padding-left: calc(80px * var(--s)); }
}
/* Desktops and tablets: the map a square 310 px on a 1920 screen (the site's
   scale), no wider than half the row; the chart the rest of the row, as tall. */
@media (min-width: 640px) {
    .map-row-wrapper .live-visuals {
        --live-visuals-height: calc(310px / .85 * var(--s));
        grid-template-columns: min(var(--live-visuals-height), calc(50% - .75rem)) minmax(0, 1fr);
    }
    .map-row-wrapper .live-gold-panel { align-self: stretch; aspect-ratio: auto; }
}
.live-panel {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(51, 65, 85, .58);
    border-radius: 8px;
    background: #0b1323;
}
.live-map-panel { aspect-ratio: 1; }
.live-gold-panel { aspect-ratio: 13 / 7; }
.live-gold-expand {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: none;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 5px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #1e293b;
    color: #cbd5e1;
    cursor: pointer;
}
.live-gold-expand:hover { border-color: #818cf8; background: #334155; color: #f8fafc; }
.live-gold-expand:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.live-gold-expand svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.live-map { display: block; width: 100%; height: 100%; }
/* The map's winner once it is over (live-map.js renderMap): the map dimmed enough
   (.7) that no tower under them blurs the team's name and the score's green win
   badge; sized by the map (the layer is their container, as big as the map at
   any width). */
.live-map-win {
    position: absolute;
    inset: 0;
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, .7);
    text-align: center;
    pointer-events: none;
    animation: live-map-win-in .4s ease-out both;
}
.live-map-win-team {
    margin: 0 8cqw;
    color: #f1f5f9;
    font-size: clamp(13px, 9cqw, 26px);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.live-map-win-label {
    margin-top: 4cqw;
    padding: .15em .55em;
    border: 1px solid rgba(16, 185, 129, .3);
    border-radius: .25rem;
    background: rgba(16, 185, 129, .14);
    color: #34d399;
    font: 700 clamp(11px, 6cqw, 17px)/1.2 'JetBrains Mono', monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* The map in its draft: the same layer with the draft's word. */
.live-map-win.draft .live-map-win-team { letter-spacing: .08em; }
@keyframes live-map-win-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .live-map-win { animation: none; }
}
/* Out of flow: the panel's size comes from its aspect ratio or the map's row. */
/* Net worth chart (live-map.js): Bklit's Live Line in the balance chart's
   palette. Colours tell the leader: the line and area are green above zero
   (Radiant) and red below (Dire); the live dot and level follow the current
   lead, grey when even. The plot is drawn on a canvas (its colours and type
   are in live-map.js); the SVG over it holds the live tip, takes the pointer,
   holds the crosshair and, before the first points, the loading grid. */
@property --live-lead { syntax: '<color>'; inherits: true; initial-value: #94a3b8; }
.live-gold,
.live-gold-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.live-gold {
    --live-lead: #94a3b8;
    transition: --live-lead .4s ease;
    cursor: crosshair;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
.live-gold[data-lead="radiant"] { --live-lead: #34d399; }
.live-gold[data-lead="dire"] { --live-lead: #f87171; }
.live-gold-canvas { pointer-events: none; }
.live-gold-canvas[hidden] { display: none; }
.live-gold-tip { transition: opacity .3s ease-in-out; pointer-events: none; }
.live-gold.revealing .live-gold-tip { opacity: 0; }
.live-gold.scrubbing .live-gold-tip { opacity: .25; }
.live-gold-level { stroke: var(--live-lead); stroke-opacity: .25; stroke-dasharray: 4 4; }
.live-gold-pulse { fill: none; stroke: var(--live-lead); stroke-width: 1.5; }
.live-gold-halo { fill: var(--live-lead); opacity: .1; }
.live-gold-dot { fill: var(--live-lead); stroke: #0b1323; stroke-width: 2; }
.live-gold-badge rect { fill: rgba(19, 24, 33, .97); stroke: rgba(148, 163, 184, .18); }
.live-gold-badge text { fill: var(--live-lead); font: 600 12.5px 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.live-gold-name {
    fill: var(--live-lead);
    font: 600 12.5px Inter, sans-serif;
    paint-order: stroke;
    stroke: #0b1323;
    stroke-width: 3px;
    stroke-linejoin: round;
}
.live-gold-cursor { display: none; pointer-events: none; }
.live-gold.scrubbing .live-gold-cursor { display: inline; }
.live-gold-cursor-halo { fill: #94a3b8; opacity: .13; }
.live-gold-cursor-halo.radiant { fill: #34d399; }
.live-gold-cursor-halo.dire { fill: #f87171; }
.live-gold-cursor-dot { fill: #d8fff0; stroke: #0b1323; stroke-width: 2; }
/* Pointer details like the balance chart's tooltip and x-axis pill. */
.live-gold-tooltip,
.live-gold-pill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(19, 24, 33, .97);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}
.live-gold-tooltip {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 18px;
}
.live-gold-tooltip-label { display: flex; align-items: center; gap: 7px; color: #98a6ba; font-family: Inter, sans-serif; }
.live-gold-tooltip-label i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.live-gold-tooltip-label.radiant i { color: #34d399; }
.live-gold-tooltip-label.dire i { color: #f87171; }
.live-gold-tooltip strong { color: #f8fafc; font-size: 13px; font-weight: 650; }
.live-gold-tooltip strong.radiant { color: #34d399; }
.live-gold-tooltip strong.dire { color: #f87171; }
.live-gold-pill {
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 500;
}
.live-gold-tooltip[hidden],
.live-gold-pill[hidden] { display: none; }
/* Before the first points: Bklit's shimmering grid, without its pulsing line,
   and a label in the chart's own muted mono type. */
.live-gold-loading-grid line { stroke: rgba(145, 164, 187, .1); stroke-dasharray: 3 5; }
.live-gold-shimmer line { stroke-dasharray: 3 5; }
.live-gold-loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font: 500 12px/1 'JetBrains Mono', monospace;
    letter-spacing: .02em;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    transition: transform .45s cubic-bezier(.85, 0, .15, 1), opacity .45s cubic-bezier(.85, 0, .15, 1), filter .45s cubic-bezier(.85, 0, .15, 1);
}
.live-gold-loading[hidden] { display: none; }
.live-gold-loading.leaving { transform: translateY(30px); opacity: 0; filter: blur(2px); }
.live-gold-loading span {
    display: inline-block;
    white-space: pre;
    animation: live-gold-shimmer 6.4s ease-in-out calc(var(--i, 0) * 1.8s / var(--n, 16)) infinite;
}
/* Every 6.4 s, with the grid's sweep (live-map.js SHIMMER_*): a slow wave over
   the letters (1.4 s each), then the label rests. */
@keyframes live-gold-shimmer {
    0%, 22%, 100% { color: #64748b; }
    11% { color: #a3b1c4; }
}
@media (prefers-reduced-motion: reduce) {
    .live-gold { transition: none; }
    .live-gold-loading span { animation: none; }
}
.live-structure.radiant { fill: #34d399; }
.live-structure.dire { fill: #f87171; }
.live-structure.dead { fill: #94a3b8; opacity: .4; }

/* ── Phone: V2 roster with portraits; chart and map on demand ── */
@media (max-width: 639px) {
    .live-score { padding: .625rem .75rem; }
    .live-score-board { gap: 8px; }
    .live-score-side { flex-direction: column; justify-content: center; gap: 4px; }
    .live-score-side.dire .live-team-label { order: -1; }
    .live-team-label { justify-content: center; max-width: 100%; }
    .live-team-name { font-size: 13.5px; }
    .live-kills { font-size: 24px; }
    .live-score-numbers { gap: 6px; }
    .live-lead.live-lead-wide { display: none; }
    .live-lead.live-lead-phone { display: inline-flex; }
    .live-win { display: none; }
    .live-winner { display: block; }
    .live-lead { padding: 1px 5px; font-size: 11px; }
    .live-lead img { width: 11px; height: 11px; }
    .live-score-clock { min-width: 64px; padding: 5px 8px; }
    .live-clock { font-size: 15px; }
    .live-pause { font-size: 11px; }
    .live-series { font-size: 11px; }

    .live-view .live-main > .grid,
    .live-view .match-actions { display: none; }
    .live-mobile { display: grid; gap: 10px; }
    .live-mobile-roster { min-width: 0; }
    .live-mobile-heading {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        margin: 0 0 10px 5px;
        color: #cbd5e1;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .live-mobile-heading span { flex: none; color: #34d399; }
    .live-mobile-roster.dire .live-mobile-heading span { color: #f87171; }
    .live-mobile-heading .separator { color: #475569; }
    .live-mobile-heading strong { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
    .live-mobile-heroes {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        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. */
    .live-mobile-hero {
        position: relative;
        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;
        cursor: pointer;
    }
    .live-mobile-hero:hover,
    .live-mobile-hero.selected { border-color: rgba(129, 140, 248, .62); background: rgba(99, 102, 241, .15); }
    .live-mobile-hero:focus-visible,
    .live-mobile-toggles button:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
    .live-mobile-hero.dead::before {
        content: '';
        position: absolute;
        z-index: 1;
        inset: 0;
        border-radius: inherit;
        background: rgba(2, 6, 13, .59);
        pointer-events: none;
    }
    .live-mobile-hero.death-flash::before { animation: live-death-wash 1.4s ease-out both; }
    .live-mobile-hero.death-blink::before {
        content: '';
        position: absolute;
        z-index: 1;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        animation: live-death-blink 1.4s ease-out both;
    }
    .live-mobile-hero.buyback-flash::before {
        content: '';
        position: absolute;
        z-index: 1;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        animation: live-buyback-blink 1.4s ease-out both;
    }
    .live-mobile-portrait {
        position: relative;
        display: grid;
        place-items: center;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: #0f172a;
    }
    .live-mobile-portrait img { width: 100%; height: 100%; object-fit: cover; }
    /* The aegis holder: the whole button outlined in gold, its ring over the portrait. */
    .live-mobile-hero.aegis { border-color: rgba(251, 191, 36, .7); box-shadow: 0 0 8px rgba(251, 191, 36, .3); }
    .live-mobile-hero.aegis::after { content: ''; position: absolute; z-index: 3; inset: 0; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .5); pointer-events: none; }
    .live-mobile-portrait .live-mobile-aegis { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; }
    .live-mobile-hero.dead .live-mobile-portrait img { filter: grayscale(1) brightness(.37); }
    /* The name, or a buyback in its place, in the middle between the portrait and the button's bottom. */
    .live-mobile-hero-name {
        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;
    }
    /* A buyback's cooldown takes the name's place: the desktop chip in the name's
       size. The ticker removes the chip when it is over, and the name is back. */
    .live-mobile-hero-name:has(.live-bb) .live-mobile-hero-label { display: none; }
    .live-mobile-hero-name .live-bb {
        height: auto;
        margin: 0;
        padding: 1px 3px;
        font-size: inherit;
        line-height: 1.15;
    }
    /* The respawn time over the portrait. */
    .live-mobile-respawn {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        display: grid;
        place-items: center;
        width: 100%;
        aspect-ratio: 16 / 9;
        color: #fff;
        font: 800 18px/1 'JetBrains Mono', monospace;
        text-shadow: 0 1px 3px #000;
        pointer-events: none;
    }
    .live-mobile-hero.death-flash .live-mobile-respawn { animation: live-respawn-in 1.4s ease-out both; }
    .live-mobile-detail {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin: -1px 3px 0;
        padding: 10px;
        border: 1px solid rgba(51, 65, 85, .48);
        border-radius: 0 0 8px 8px;
        background: rgba(10, 15, 28, .8);
        color: #cbd5e1;
    }
    .live-mobile-stats { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 4.5vw, 22px); }
    /* Net worth, KDA and the level in one type and size, on one line (one line height,
       centred); «KDA» and «LVL» smaller and faint, as on the cards; KDA's slashes
       narrow, its deaths red. */
    .live-mobile-net,
    .live-mobile-kda,
    .live-mobile-level { color: #f8fafc; font: 700 clamp(13px, 3.9vw, 15px)/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .live-mobile-net { display: inline-flex; align-items: center; gap: 6px; }
    /* The coin's picture sits low in its box: up to the digits' middle. */
    .live-mobile-net img { position: relative; top: -.12em; width: 1.15em; height: 1.15em; object-fit: contain; }
    .live-mobile-kda b,
    .live-mobile-level b { margin-right: 5px; color: #94a3b8; font-size: .72em; font-weight: 600; opacity: .65; }
    .live-mobile-kda i { margin: 0 .12em; color: #475569; font-style: normal; font-weight: 500; }
    .live-mobile-items {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 4px;
        width: min(100%, 270px);
    }
    .live-mobile-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .live-mobile-toggles button {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 8px 10px;
        border: 1px solid rgba(129, 140, 248, .58);
        border-radius: 8px;
        background: rgba(99, 102, 241, .18);
        color: #e0e7ff;
        font: 700 12px Inter, sans-serif;
        cursor: pointer;
    }
    .live-mobile-toggles button[aria-pressed="false"] { border-color: rgba(71, 85, 105, .55); background: rgba(30, 41, 59, .45); color: #94a3b8; }

    .live-visuals { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
    .live-visuals > .live-panel { display: none; }
    .live-main.show-chart .live-gold-panel,
    .live-main.show-map .live-map-panel { display: block; }
    .live-gold-panel { order: -1; aspect-ratio: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .live-mobile-hero.death-flash::before,
    .live-mobile-hero.death-flash .live-mobile-respawn,
    .live-mobile-hero.death-blink::before,
    .live-mobile-hero.buyback-flash::before { animation: none; }
}

/* ── A map in its draft (Steam) before the site has its row ── */
.live-mobile-hero.blank,
.live-mobile-hero.blank:hover { cursor: default; border-color: rgba(51, 65, 85, .42); background: rgba(30, 41, 59, .35); }

/* ── New LIVE maps without a reload (live-map.js, watchLiveList) ── */
/* The table grows smoothly to its live height when the first LIVE row comes.
   Its own scroll box keeps the view in place by script: browser scroll
   anchoring would push a new row at the top out of sight. */
.table-scroll-container { transition: max-height .38s cubic-bezier(.22, 1, .36, 1); }
.table-scroll-container:has(#series-list[data-live-updates]) { overflow-anchor: none; }
@media (prefers-reduced-motion: reduce) {
    .table-scroll-container { transition: none; }
}

/* ── Draft view (live-map.js): from the draft until the game clock runs ── */
/* The live cards with the pick's number in the numbers' place, picks to come dimmed,
   the pick being made lit (hero-card.css). The bans take the chart's place. The live
   parts keep their size: nothing moves when the game starts. */
/* Smaller than the clock, in the clock's line height: the score keeps its height. */
.live-draft-label { color: #a5b4fc; font-size: calc(15px * var(--s)); line-height: calc(17px * 1.2 * var(--s)); letter-spacing: .1em; }
@media (max-width: 639px) {
    .live-draft-label { font-size: 13px; line-height: calc(15px * 1.2); }
}
/* The pick being made, in the series badge's indigo. */
.live-draft-hero-slot.active .live-draft-hero,
.live-mobile-ban-slot.active .live-mobile-ban,
.live-mobile-hero.blank.active .live-mobile-portrait {
    border-color: rgba(99, 102, 241, .5);
    background: rgba(99, 102, 241, .14);
    animation: live-draft-pulse 3.2s ease-in-out infinite;
}

/* A calm pulse for the step being made (the LIVE dot's is quicker). */
@keyframes live-draft-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

/* The whole draft in the chart's place, in the middle: each team's picks and
   bans in a row, numbered among the draft's picks and bans, the bans parted by
   phase; then where the draft is. */
.live-gold-panel.drafting > :not(.live-draft) { visibility: hidden; }
.live-draft {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(16px * var(--s)) calc(20px * var(--s));
    container-type: size;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}
.live-draft[hidden] { display: none; }
.live-draft-board {
    --draft-gap: calc(6px * var(--s));
    --draft-phase: calc(12px * var(--s));
    --draft-split: calc(28px * var(--s));
    /* Twelve heroes a row (five picks, seven bans) in the hero cards' wide
       portraits, with their gaps: narrower panels (tablets, the phone's chart)
       shrink them. */
    --draft-hero: min(calc(88px * var(--s)), calc((100cqw - 10 * var(--draft-gap) - 2 * var(--draft-phase) - var(--draft-split)) / 12));
    display: flex;
    flex-direction: column;
    gap: calc(14px * var(--s));
}
.live-draft-columns { display: flex; gap: var(--draft-split); }
.live-draft-columns span:first-child { flex: none; width: calc(5 * var(--draft-hero) + 4 * var(--draft-gap)); }
.live-draft-columns span,
.live-mobile-bans-label {
    color: #64748b;
    font-size: calc(12px * var(--s));
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.live-draft-team { display: flex; flex-direction: column; gap: calc(8px * var(--s)); }
.live-draft-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: calc(12px * var(--s));
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.live-draft-heading span { flex: none; color: #34d399; }
.live-draft-team.dire .live-draft-heading span { color: #f87171; }
.live-draft-heading .separator { color: #475569; }
.live-draft-heading strong { min-width: 0; overflow: hidden; color: #cbd5e1; text-overflow: ellipsis; white-space: nowrap; }
.live-draft-row { display: flex; gap: var(--draft-split); }
.live-draft-picks,
.live-draft-bans { display: flex; gap: var(--draft-gap); }
.live-draft-hero-slot { display: flex; flex: none; flex-direction: column; align-items: center; gap: calc(4px * var(--s)); width: var(--draft-hero); }
.live-draft-hero-slot.phase { margin-left: var(--draft-phase); }
.live-draft-hero,
.live-mobile-ban {
    position: relative;
    flex: none;
    width: 100%;
    /* A little taller than the portrait's 16:9; its sides give way. */
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border: 1px solid rgba(51, 65, 85, .6);
    border-radius: 4px;
    background: #0f172a;
}
.live-draft-hero.empty,
.live-mobile-ban.empty { border-color: rgba(51, 65, 85, .45); background: rgba(15, 23, 42, .5); }
/* The portrait as close as the frame, taller than its 16:9, needs: it fills the
   frame (cover), the sides it does not fit cut off, never stretched. */
.live-draft-hero img,
.live-mobile-ban img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A ban is the hero greyed out; picks keep their colours. */
.live-draft-bans .live-draft-hero img,
.live-mobile-ban img { filter: grayscale(1) brightness(.75); }
/* A pick's or ban's number among the draft's, as a pick's under its card. */
.live-draft-hero-number,
.live-mobile-ban-number { color: #94a3b8; font: 600 calc(12px * var(--s))/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.live-draft-hero-slot.active .live-draft-hero-number,
.live-mobile-ban-slot.active .live-mobile-ban-number { color: #a5b4fc; }
/* Narrow panels (tablets, the phone's chart): each team's picks above its bans,
   seven heroes to a row instead of twelve, so two and a half times as large;
   the columns' labels go. */
@container (max-width: 560px) {
    .live-draft-board { --draft-hero: min(calc(88px * var(--s)), calc((100cqw - 6 * var(--draft-gap) - 2 * var(--draft-phase)) / 7)); }
    .live-draft-columns { display: none; }
    .live-draft-row { flex-direction: column; gap: calc(8px * var(--s)); }
}

/* The draft's steps: picks tall, bans short; made ones in their team's colour. */
.live-draft-progress { display: flex; flex-direction: column; gap: calc(9px * var(--s)); margin-top: calc(4px * var(--s)); }
.live-draft-track {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    align-items: end;
    gap: 3px;
    height: calc(10px * var(--s));
}
.live-draft-track i { height: 40%; border-radius: 2px; background: rgba(51, 65, 85, .6); }
.live-draft-track i.picks { height: 100%; }
.live-draft-track i.made.radiant { background: rgba(52, 211, 153, .8); }
.live-draft-track i.made.dire { background: rgba(248, 113, 113, .8); }
.live-draft-track i.made.bans { opacity: .55; }
.live-draft-track i.now { background: #818cf8; animation: live-draft-pulse 3.2s ease-in-out infinite; }
.live-draft-status {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: #94a3b8;
    font-size: calc(13px * var(--s));
}
.live-draft-status b { font-weight: 600; }
.live-draft-status b.radiant { color: #34d399; }
.live-draft-status b.dire { color: #f87171; }
.live-draft-step { flex: none; color: #94a3b8; font: 600 calc(12.5px * var(--s)) 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

/* Phones: an empty portrait and its pick for a pick to come; the team's bans
   over an empty detail, which keeps its live size. */
.live-mobile-hero.drafted { cursor: default; }
.live-mobile-hero.blank.active { border-color: rgba(99, 102, 241, .45); }
.live-mobile-hero.blank .live-mobile-hero-name { color: #94a3b8; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.live-mobile-hero.blank.active .live-mobile-hero-name { color: #a5b4fc; }
.live-mobile-draft { position: relative; }
.live-mobile-draft > .live-mobile-stats,
.live-mobile-draft > .live-mobile-items { visibility: hidden; }
.live-mobile-bans-box {
    position: absolute;
    inset: 6px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.live-mobile-bans { display: flex; gap: 4px; width: min(100%, 300px); }
.live-mobile-ban-slot { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.live-mobile-ban-slot.phase { margin-left: 5px; }
.live-mobile-ban-number { font-size: 11px; }
.live-mobile-bans-label { line-height: 1.2; }

@media (prefers-reduced-motion: reduce) {
    .live-draft-hero-slot.active .live-draft-hero,
    .live-mobile-ban-slot.active .live-mobile-ban,
    .live-mobile-hero.blank.active .live-mobile-portrait,
    .live-draft-track i.now { animation: none; }
}