/* A map's page (templates/league_match.html), on top of league.css, in the live match
   page's look (live-page.css, live-map.css, hero-card.css): the series' head over the
   panels, the map's result bar over its players, the buildings map and the net worth
   chart in the live panels, the draft and builds. Sizes in rem follow the site's --s
   scale: the live page's calc(Npx * var(--s)) is N/16 rem here. */

/* The page's panels a step apart, as the league page's (league.css .lg-panel gap). */
main > .glass-panel + .glass-panel { margin-top: 1rem; }

.mp-crumbs { display: flex; align-items: center; margin-bottom: .75rem; }
.mp-back { display: inline-flex; align-items: center; gap: .5rem; color: var(--lg-muted); font-size: .875rem; text-decoration: none; white-space: nowrap; transition: color .15s ease; }
.mp-back svg { width: 1.125rem; height: 1.125rem; fill: currentColor; transition: transform .15s ease; }
.mp-back:hover { color: var(--lg-text); }
.mp-back:hover svg { transform: translateX(-2px); }

/* The series' head: the teams round their score, the tournament, the maps as slots. */
/* The way back on the title's line at the row's left: the live map page's button (live-page.css
   .lp-back-btn, match-details.css .lp-detail-link), caps, its chevron first. Its label's hidden
   twin (data-back) keeps as much room on the right, so the score stays in the page's middle. */
.mp-title-row { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; justify-items: center; gap: 1rem; margin-bottom: 1rem; }
/* As much room round it as on the live map page (live-page.css .lp-match-c), the same above
   as under it on wider screens: 48 from the header to the logos' top, 48 to the panel. */
@media (min-width: 640px) { .mp-title-row { margin: .5625rem 0 3rem; } }
.mp-title-row > * { grid-column: 2; }
.mp-title-row > .mp-title { grid-row: 1; }
.mp-title-row > .mp-back-btn { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; margin-top: .3rem; }
.mp-title-row::after { content: attr(data-back); grid-column: 3; grid-row: 1; height: 0; overflow: hidden; visibility: hidden; padding: 0 1.25rem 0 2.75rem; border: 1px solid transparent; font-size: max(12px, .8125rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mp-back-btn { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.25rem 0 1rem; border: 1px solid rgba(51, 65, 85, .55); border-radius: .5rem; background: linear-gradient(rgba(15, 23, 42, .8), rgba(15, 23, 42, .8)), #0b0e14; color: #e2e8f0; font-size: max(12px, .8125rem); font-weight: 700; letter-spacing: .08em; line-height: 1; text-transform: uppercase; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.mp-back-text { text-box: trim-both cap alphabetic; }
.mp-back-btn svg { width: 1.25rem; height: 1.25rem; flex: none; fill: currentColor; transition: transform .15s ease; }
.mp-back-btn:hover { border-color: rgba(129, 140, 248, .55); color: #fff; }
.mp-back-btn:hover svg { color: #a5b4fc; transform: translateX(-2px); }
.mp-back-btn:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }

@media (max-width: 899px) {
    .mp-title-row { grid-template-columns: minmax(0, 1fr); }
    .mp-title-row::after { content: none; }
    .mp-title-row > * { grid-column: 1; }
    .mp-title-row > .mp-title { grid-row: 2; }
    .mp-title-row > .mp-back-btn { margin-top: 0; justify-self: center; }
}
.mp-title { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 1.75rem; width: 100%; margin: 0 0 -.3rem; color: var(--lg-text); font-size: 1.625rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.mp-title-team { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.mp-title-team.is-l { justify-content: flex-end; }
.mp-title-team img { width: 2.5rem; height: 2.5rem; flex: none; object-fit: contain; }
.mp-title-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-mini-score { display: inline-flex; align-items: baseline; gap: .5rem; color: var(--lg-muted); font-size: 2.25rem; font-weight: 700; line-height: 1; }
.mp-mini-score .won { color: var(--lg-text); }
.mp-mini-score i { color: #334155; font-style: normal; }
.mp-title-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .625rem; margin: 0; color: var(--lg-text-2); font-size: .875rem; font-weight: 500; letter-spacing: .01em; text-align: center; }
.mp-title-meta > span:not(.mp-bo) + span:not(.mp-bo)::before { content: '·'; margin-right: .625rem; color: #475569; }
.mp-bo { padding: .125rem .44rem; border: 1px solid rgba(71, 85, 105, .55); border-radius: .25rem; background: rgba(30, 41, 59, .6); color: var(--lg-muted); font: 600 .75rem/1.3 'JetBrains Mono', monospace; letter-spacing: .06em; }
.mp-track { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: .375rem; }
/* A series' map: «Map N» in capitals, spaced as the stream overlay's (stream.css .stream-map-badge). */
.mp-slot { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-width: 2.125rem; height: 2.125rem; padding: 0 .625rem; border: 1px solid rgba(51, 65, 85, .7); border-radius: .5rem; background: rgba(30, 41, 59, .55); color: var(--lg-muted); font: 700 .8125rem 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: border-color .15s ease, color .15s ease; }
.mp-slot img { width: 1.25rem; height: 1.25rem; flex: none; object-fit: contain; }
.mp-slot.on { border-color: rgba(129, 140, 248, .7); background: rgba(99, 102, 241, .18); color: var(--lg-text); }
.mp-slot.off { color: #64748b; cursor: default; }
.mp-slot.off img { opacity: .6; }

/* The bot's prediction under the series, in the middle. */
.mp-bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.1rem; padding: .6rem 1rem; border: 1px solid rgba(129, 140, 248, .25); border-radius: .75rem; background: rgba(99, 102, 241, .06); font-size: .875rem; }
.mp-bot-label { color: #a5b4fc; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mp-bot-pick { display: inline-flex; align-items: center; gap: .5rem; }
.mp-bot-num { color: var(--lg-text-2); }
.mp-bot-num.is-up { color: var(--lg-up); font-weight: 700; }
.mp-bot-num.is-down { color: var(--lg-down); font-weight: 700; }
/* The call is a link to the bot; nothing on this page lights up under the cursor. */
a.mp-bot { color: inherit; text-decoration: none; }
.mp-bot-tg { display: inline-flex; color: #a5b4fc; }
.mp-bot-tg svg { width: 1rem; height: 1rem; fill: currentColor; }

/* The map's result bar on top of its panel. */
.mp-match { min-width: 0; padding: 0; } /* clipped inside its .spot-clip; narrows as when it clipped */
/* The score as the live map's on the matches page, one to one (live-map.css .live-score with
   live-page.css .lp-match-c; its calc(Npx * var(--s)) is N/16 rem here, where 1rem is 16px * --s):
   the winner's badge and the final gold lead outermost, the names, the kills, the map's length
   in the middle box, which keeps the height of the clock and the series' lines. */
.mp-result-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .875rem; padding: .625rem 5rem; border-bottom: 1px solid #1e293b; background: linear-gradient(rgba(15, 23, 42, .8), rgba(15, 23, 42, .8)), #0b0e14; }
.mp-result-bar > * { grid-row: 1; }
.mp-score-side { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.mp-score-side.is-radiant { grid-column: 1; justify-content: flex-end; }
.mp-score-side.is-dire { grid-column: 3; justify-content: flex-start; }
.mp-score-team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mp-score-name { min-width: 0; overflow: hidden; color: #fff; font-size: 1.09375rem; font-weight: 700; letter-spacing: .025em; text-overflow: ellipsis; white-space: nowrap; }
.mp-score-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; font-family: 'JetBrains Mono', monospace; font-size: .875rem; font-weight: 700; line-height: 1.5; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.mp-score-dot { display: none; flex: none; width: 8px; height: 8px; border-radius: 9999px; background: #10b981; }
.mp-score-numbers { display: inline-flex; flex: none; align-items: center; gap: .5rem; }
.mp-score-kills { font-family: 'JetBrains Mono', monospace; font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.is-radiant .mp-score-kills { color: #34d399; }
.is-dire .mp-score-kills { color: #f87171; }
/* The coin and the number centred in the badge (live-map.css): the digits sit .08em above their
   line's middle (the font's ascent), the coin's picture .05em below its box's. */
.mp-score-lead { display: inline-flex; flex: none; 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-family: 'JetBrains Mono', monospace; font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.5; white-space: nowrap; }
.mp-score-lead img { position: relative; top: -.05em; width: .875rem; height: .875rem; flex: none; object-fit: contain; }
.mp-score-lead > span { position: relative; top: .08em; }
.mp-score-lead.is-phone { display: none; }
.mp-score-clock { grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 4.375rem; min-height: calc(2.675rem + 3px); padding: .25rem .625rem; border: 1px solid rgba(51, 65, 85, .5); border-radius: .5rem; background: rgba(30, 41, 59, .5); }
.mp-score-time { color: #e2e8f0; font-family: 'JetBrains Mono', monospace; font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }

/* Players: the hero columns' headings over the hero cards' numbers. */
/* Every block's room inside the same on all sides: 1.4rem here and in .lg-section below. */
.lg-section { padding: 1.4rem; }
.mp-teams { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding: 1.4rem; }
.mp-team { min-width: 0; }
.mp-team-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mp-team-head .mp-team-side { color: var(--lg-up); }
.mp-team-head.is-dire .mp-team-side { color: var(--lg-down); }
.mp-team-sep { color: #334155; }
.mp-team-head > span:last-of-type { color: var(--lg-text-2); }
.mp-scoreboard { table-layout: fixed; font-size: 1.125rem; }
.mp-col-player { width: 21%; }
.mp-col-kda { width: 9%; }
.mp-col-net { width: 11%; }
.mp-col-lvl { width: 5%; }
.mp-col-lh { width: 9%; }
.mp-col-gpm { width: 11%; }
.mp-col-items { width: 28%; }
.mp-col-build { width: 6%; }
.mp-scoreboard td, .mp-scoreboard tbody th { padding: .6rem .65rem; }
.mp-scoreboard thead th { padding: .55rem .65rem; }
.mp-player { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.mp-player > span:not(.mp-award) { display: grid; min-width: 0; }
.mp-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.125rem; font-weight: 650; }
.mp-player small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lg-meta); font-size: .8125rem; font-weight: 500; }
/* The map's awards by fantasy points (match_stats.awards): a square icon at the player cell's end,
   as tall as the portrait, its name and points in the tip; the MVP gold, the best core indigo, the
   best support sky blue. */
.mp-award { display: inline-grid; flex: none; place-items: center; width: 2.5rem; height: 2.5rem; margin-left: auto; border: 1px solid #334155; border-radius: .25rem; background: #1e293b; color: var(--lg-text-2); }
.mp-award svg { display: block; width: calc(100% - 14px); height: calc(100% - 14px); fill: currentColor; } /* the drawing edge to edge (its viewBox), whole pixels round it */
.mp-award.is-mvp { border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .14); color: #fbbf24; }
.mp-award.is-core { border-color: rgba(129, 140, 248, .4); background: rgba(99, 102, 241, .14); color: #a5b4fc; }
.mp-award.is-support { border-color: rgba(56, 189, 248, .35); background: rgba(14, 165, 233, .12); color: #7dd3fc; }
.mp-portrait { width: 3.5rem; height: 1.97rem; flex: none; object-fit: cover; border-radius: .25rem; background: #151a24; }
.mp-scoreboard .mp-portrait { width: 4.75rem; height: 2.67rem; }
.mp-kda { color: #fff; font-weight: 700; }
.mp-kda i { margin: 0 .08em; color: #475569; font-style: normal; font-weight: 500; }
.mp-net { color: #fff; font-weight: 700; white-space: nowrap; }
.mp-net img { display: inline-block; width: 1.1rem; height: 1.1rem; margin-right: .35rem; vertical-align: -.15em; }
/* LH / DN and GPM / XPM: a space's width each side of the slash (closer on phones). */
.mp-pair i { margin: 0 1ch; font-style: normal; }
/* The slots fill the items column and give way with it: the table fits its panel, no scroll. */
.mp-items { display: flex; align-items: center; gap: .25rem; width: 100%; }
.mp-item { display: grid; flex: 1 1 0; place-items: center; min-width: 0; max-width: 3rem; aspect-ratio: 34 / 25; overflow: hidden; border: 1px solid #334155; border-radius: .25rem; background: #151a24; }
.mp-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp-item span { max-width: 100%; padding: 0 .1rem; overflow: hidden; text-overflow: ellipsis; color: var(--lg-meta); font-size: .75rem; white-space: nowrap; }
.mp-item.is-empty { border-color: #1e293b; background: #0f131b; }
.mp-item.is-neutral { margin-left: .45rem; border-color: var(--lg-accent-edge); }
.mp-item.is-neutral.is-empty { border-color: var(--lg-accent-wash); }

/* The course: the live view's panels, the map square beside the chart, as tall. */
/* The map's page: no spotlight band on the panels or the bar's button (style.css). */
.glass-panel::before, .spotlight-border::before { display: none; }
/* The chart's column: the gold or experience switch centred over the chart, the legend at its
   right, the chart under them down to the map's foot. */
.mp-chart-col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.mp-chart-col .mp-chart-panel { flex: 1; }
.mp-course-tools { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-width: 0; }
.mp-chart-pick { grid-column: 2; }
.mp-course-tools .mp-legend { grid-column: 3; justify-self: end; }
.mp-legend { display: flex; gap: 1rem; margin: 0; color: var(--lg-text-2); font-size: .8125rem; }
.mp-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.mp-dot { width: .55rem; height: .55rem; border-radius: 50%; }
.mp-dot.is-radiant { background: var(--lg-up); }
.mp-dot.is-dire { background: var(--lg-down); }
.mp-visuals { display: grid; grid-template-columns: min(28rem, calc(50% - .75rem)) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
.mp-panel { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(51, 65, 85, .58); border-radius: .5rem; background: #0b1323; }
.mp-map-panel { aspect-ratio: 1; }
.mp-structures { display: block; width: 100%; height: 100%; }
.mp-building.radiant { fill: var(--lg-up); }
.mp-building.dire { fill: var(--lg-down); }
.mp-building.dead { fill: #94a3b8; opacity: .38; }
.mp-chart-panel { min-height: 16rem; }
.mp-chart-panel svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
/* The chart as the live view's (live-map.css .live-gold-*): the end's dot and badge dimmed
   while the pointer is on the chart, the lead or a mark's kills in the tooltip, the moment in
   a pill on the time axis; under a mark's count here its kills, who killed whom. */
.mp-gold-tip { transition: opacity .3s ease-in-out; pointer-events: none; }
.mp-chart-panel svg.is-scrubbing .mp-gold-tip { opacity: .25; }
.mp-gold-tooltip,
.mp-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; }
.mp-gold-tooltip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 9px 12px; border-radius: 9px; font-size: 12px; line-height: 18px; }
.mp-gold-tooltip-label { display: flex; align-items: center; gap: 7px; color: #98a6ba; font-family: Inter, sans-serif; }
.mp-gold-tooltip-label i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mp-gold-tooltip-label.radiant i { color: #34d399; }
.mp-gold-tooltip-label.dire i { color: #f87171; }
.mp-gold-tooltip strong { color: #f8fafc; font-size: 13px; font-weight: 650; }
.mp-gold-tooltip strong.radiant { color: #34d399; }
.mp-gold-tooltip strong.dire { color: #f87171; }
.mp-gold-kills { display: grid; flex-basis: 100%; color: #98a6ba; font-size: 11.5px; line-height: 17px; }
.mp-gold-pill { display: flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; color: #cbd5e1; font-size: 12px; font-weight: 500; }
.mp-gold-tooltip[hidden],
.mp-gold-pill[hidden] { display: none; }

/* Draft. */
/* Centred in its panel: the names' column as wide as the longest name, both teams' tiles in one
   column (subgrid), so the picks stand under each other. */
.mp-draft { display: grid; grid-template-columns: max-content minmax(0, auto); justify-content: center; gap: 1rem 1.5rem; }
.mp-draft-team { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
/* The team's name in its side's colour (league.css .is-radiant / .is-dire), no dot. */
.mp-draft-name { display: flex; align-items: center; gap: .6rem; min-width: 0; font-size: 1.125rem; font-weight: 700; }
.mp-draft-name .lg-logo { width: 1.65rem; height: 1.65rem; }
.mp-draft-row { display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #334155 transparent; padding-bottom: .2rem; }
.mp-draft-group { display: flex; flex: none; gap: .35rem; }
.mp-draft-group + .mp-draft-group { padding-left: 1rem; border-left: 1px solid var(--lg-line); }
/* A tile is the hero's picture whole (16:9, as its file), the order and pick or ban over its
   foot on a shade. */
.mp-draft-tile { position: relative; width: 5.25rem; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--lg-line); border-radius: .25rem; background: var(--lg-row); }
.mp-draft-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp-draft-tile figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; padding: .5rem .3rem .1rem; background: linear-gradient(rgba(5, 6, 10, 0), rgba(5, 6, 10, .85) 60%); color: var(--lg-meta); font-size: .75rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.mp-draft-tile.is-ban img { filter: grayscale(1) brightness(.6); }
.mp-draft-tile.is-pick { border-color: #334155; }
.mp-draft-tile.is-pick figcaption { color: var(--lg-text-2); }

/* A player's build: a click on their row opens it in a row of its own under it, every
   purchase in even columns as big as the items in the row, the minute under it. */
.mp-player-row { cursor: pointer; }
.mp-build-toggle { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: .25rem; background: none; cursor: pointer; }
.mp-build-toggle:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }
.mp-build-toggle .lg-chevron { width: 1.35rem; height: 1.35rem; }
.mp-build-toggle[aria-expanded="true"] .lg-chevron { transform: rotate(180deg); }
.mp-player-row.is-open, .mp-player-row.is-open + .mp-build-row { background: rgba(148, 163, 184, .04); }
/* A line brighter than those between players (the items' frame colour) parts the build from its player's row. */
.mp-scoreboard .mp-build-row > td { padding: .75rem .65rem 1.1rem; border-top: 1px solid #334155; white-space: normal; }
.mp-purchases { display: grid; grid-template-columns: repeat(auto-fill, 3rem); gap: .7rem .55rem; margin: 0; padding: 0; list-style: none; }
.mp-purchases li { display: grid; justify-items: center; gap: .3rem; }
.mp-purchases img, .mp-item-text { display: block; box-sizing: border-box; width: 3rem; height: auto; aspect-ratio: 34 / 25; object-fit: cover; border: 1px solid #334155; border-radius: .25rem; background: #151a24; }
.mp-purchases small { color: var(--lg-muted); font-size: .75rem; line-height: 1; white-space: nowrap; }
.mp-item-text { display: -webkit-box; padding: .15rem; overflow: hidden; color: var(--lg-muted); font-size: .75rem; line-height: 1.05; text-align: center; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lg-empty.is-inline { padding: 0; text-align: left; font-size: .8125rem; }

@media (max-width: 639px) {
    /* The head on phones (live-page.css): each team's name under or over its logo. */
    .mp-title { column-gap: .75rem; font-size: 1.125rem; }
    .mp-title-team { flex-direction: column; gap: .375rem; text-align: center; }
    .mp-title-team.is-l { flex-direction: column-reverse; }
    .mp-title-team img { width: 2.25rem; height: 2.25rem; }
    .mp-title-team span { display: -webkit-box; max-width: 100%; line-height: 1.15; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .mp-mini-score { font-size: 1.65rem; }
    .mp-slot { min-width: 2.25rem; height: 2.25rem; }
    /* Phones, as the live score's (live-map.css): each side's name over its kills, the gold lead
       by them, a dot for the winner's badge. */
    .mp-result-bar { gap: 8px; padding: .625rem .75rem; }
    .mp-score-side { flex-direction: column; justify-content: center; gap: 4px; }
    .mp-score-side.is-dire .mp-score-team { order: -1; }
    .mp-score-team { justify-content: center; max-width: 100%; }
    .mp-score-name { font-size: 13.5px; }
    .mp-score-kills { font-size: 24px; }
    .mp-score-numbers { gap: 6px; }
    .mp-score-lead.is-wide, .mp-score-win { display: none; }
    .mp-score-lead.is-phone { display: inline-flex; padding: 1px 5px; font-size: 11px; }
    .mp-score-lead img { width: 11px; height: 11px; }
    .mp-score-dot { display: block; }
    .mp-score-clock { min-width: 64px; padding: 5px 8px; }
    .mp-score-time { font-size: 15px; }
    .lg-section, .mp-teams { padding: 1rem; }
    .mp-visuals { grid-template-columns: 1fr; }
    /* Phones: the map over the chart; the switch and the legend in a line between them. */
    .mp-course-tools { grid-template-columns: auto 1fr; }
    .mp-chart-pick { grid-column: 1; }
    .mp-course-tools .mp-legend { grid-column: 2; flex-wrap: wrap; justify-content: flex-end; gap: .25rem .75rem; }
    .mp-chart-panel { min-height: 0; aspect-ratio: 1; } /* as big as the map over it */
    .mp-draft { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
    .mp-draft-team { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .mp-scoreboard tr.mp-build-row { display: block; padding: 0 .25rem 1rem; border-top: 0; }
    .mp-scoreboard .mp-build-row > td { padding: .65rem 0 0; }
    .mp-scoreboard tr.mp-build-row[hidden] { display: none; }
    .mp-scoreboard .mp-purchases small { display: block; } /* league.css hides a table's small text on phones */
    .mp-build-toggle { width: 1.25rem; height: 1.5rem; }
    .mp-build-toggle .lg-chevron { width: 1.1rem; height: 1.1rem; }
    .mp-purchases { grid-template-columns: repeat(auto-fill, 2.4rem); }
    .mp-purchases img, .mp-item-text { width: 2.4rem; }
    /* Phones: no sideways scroll and every number. A player's row is three lines: the player
       (the hero right of the name) with the build's button at its end; net worth, KDA, level,
       LH/DN and GPM/XPM in five columns, each number centred under its caption (data-label); the items. */
    /* The five columns are the table's, as wide as their widest number, every row on them (subgrid). */
    .mp-scoreboard { display: grid; grid-template-columns: repeat(5, auto); column-gap: .4rem; font-size: .8125rem; }
    .mp-scoreboard colgroup { display: none; }
    .mp-scoreboard thead, .mp-scoreboard tbody { display: contents; }
    .mp-scoreboard tr { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; row-gap: .45rem; padding: .6rem .25rem; border-top: 1px solid var(--lg-line-soft); }
    .mp-scoreboard tr > th, .mp-scoreboard tr > td { display: block; padding: 0; border: 0; text-align: left; }
    .mp-scoreboard thead { display: none; }
    .mp-scoreboard .mp-player-row > td:nth-of-type(-n+5) { text-align: center; }
    .mp-scoreboard td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .2rem; color: var(--lg-meta); font: 700 .75rem 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; }
    .mp-scoreboard .mp-player-row > th { grid-area: 1 / 1 / 2 / 5; }
    .mp-scoreboard .mp-build-cell { grid-area: 1 / 5; justify-self: end; }
    .mp-scoreboard .mp-player-row > td:nth-of-type(-n+5) { grid-row: 2; }
    /* Net worth first on phones, then KDA (the table's own order: KDA, net worth). */
    .mp-scoreboard .mp-player-row > td:nth-of-type(1) { grid-column: 2; }
    .mp-scoreboard .mp-player-row > td:nth-of-type(2) { grid-column: 1; }
    .mp-scoreboard .mp-player-row > td:nth-of-type(6) { grid-row: 3; grid-column: 1 / -1; }
    .mp-scoreboard .mp-net img { width: .9rem; max-width: none; height: .9rem; margin-right: .25rem; } /* counted in the column's width */
    .mp-pair i { margin: 0 .1ch; }
    .mp-scoreboard .mp-player strong { font-size: .875rem; }
    .mp-scoreboard .mp-player > span:not(.mp-award) { display: flex; align-items: baseline; gap: .5rem; }
    .mp-scoreboard .mp-player strong, .mp-scoreboard .mp-player small { min-width: 0; }
    /* The player's line spans the numbers' columns but never widens them (its name and hero shrink). */
    .mp-scoreboard .mp-player-row > th { contain: inline-size; }
    .mp-scoreboard .mp-player small { display: block; flex: 0 100 auto; margin-left: 0; } /* league.css hides a table's small text on phones; the hero gives way to the name */
    .mp-scoreboard .mp-portrait { width: 3.1rem; height: 1.74rem; }
    .mp-award { width: 1.75rem; height: 1.75rem; } /* as tall as the portrait here */
    .mp-award svg { width: calc(100% - 10px); height: calc(100% - 10px); }
    .mp-item { max-width: none; }
}