/* 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. */
.mp-title-row { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.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; }
.mp-slot { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-width: 2.125rem; height: 2.125rem; padding: 0 .5rem; 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; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.mp-slot img { width: 1.25rem; height: 1.25rem; flex: none; object-fit: contain; }
a.mp-slot:hover { border-color: rgba(129, 140, 248, .45); color: var(--lg-text); }
.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 call 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; }
.mp-bot-skip { color: var(--lg-muted); }
/* The call is a link to the bot: its edge brightens under the cursor, nothing else lights up. */
a.mp-bot { color: inherit; text-decoration: none; transition: border-color .2s; }
a.mp-bot:hover { border-color: rgba(129, 140, 248, .6); }
.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 { padding: 0; overflow: hidden; }
.mp-result-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 1.5rem; min-height: 3.5625rem; padding: .625rem 1rem; border-bottom: 1px solid var(--lg-line); background: #0e1526; }
.mp-result-team { display: flex; align-items: center; gap: .625rem; min-width: 0; color: var(--lg-text); font-size: 1.125rem; font-weight: 700; }
.mp-result-team.is-radiant { justify-content: flex-end; }
.mp-result-team.lost { color: var(--lg-muted); font-weight: 600; }
.mp-result-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-win-tag { flex: none; padding: .06rem .44rem; border-radius: .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.is-radiant > .mp-win-tag { background: rgba(52, 211, 153, .12); color: var(--lg-up); }
.is-dire > .mp-win-tag { background: rgba(248, 113, 113, .12); color: var(--lg-down); }
.mp-result-mid { display: flex; flex-direction: column; align-items: center; gap: .19rem; }
.mp-result-kills { display: flex; align-items: baseline; gap: .625rem; font-size: 1.65rem; font-weight: 700; line-height: 1; }
.mp-result-kills i { color: #334155; font-style: normal; }
.mp-result-time { color: var(--lg-muted); font-size: .8125rem; }

/* Players: the hero columns' headings over the hero cards' numbers. */
.mp-teams { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem 1.4rem 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-won-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #10b981; }
.mp-scoreboard { table-layout: fixed; font-size: 1.125rem; }
.mp-col-player { width: 21%; }
.mp-col-kda { width: 11%; }
.mp-col-net { width: 12%; }
.mp-col-lh { width: 10%; }
.mp-col-gpm { width: 12%; }
.mp-col-lvl { width: 6%; }
.mp-col-items { width: 28%; }
.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 { 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; }
.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; }
/* 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. */
.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%; }
.mp-tooltip { position: absolute; top: .6rem; z-index: 2; display: grid; justify-items: center; gap: .05rem; padding: .4rem .65rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: .5rem; background: rgba(11, 14, 20, .96); box-shadow: 0 .5rem 1.5rem -.5rem rgba(0, 0, 0, .7); pointer-events: none; white-space: nowrap; }
.mp-tooltip span { color: var(--lg-muted); font: 500 .75rem 'JetBrains Mono', monospace; }
.mp-tooltip b { font: 700 1rem 'JetBrains Mono', monospace; }
.mp-tooltip b.is-radiant { color: var(--lg-up); }
.mp-tooltip b.is-dire { color: var(--lg-down); }

/* Draft. */
.mp-draft { display: grid; gap: 1rem; }
.mp-draft-team { display: grid; grid-template-columns: 13rem minmax(0, 1fr); align-items: center; gap: 1rem; }
/* 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); }
.mp-draft-tile { width: 4.75rem; margin: 0; overflow: hidden; border: 1px solid var(--lg-line); border-radius: .25rem; background: var(--lg-row); }
.mp-draft-tile img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mp-draft-tile figcaption { display: flex; justify-content: space-between; padding: .15rem .35rem; color: var(--lg-meta); font-size: .75rem; font-weight: 700; 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); }

/* Builds. */
.mp-builds { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.mp-builds .mp-team-head { margin-bottom: .35rem; letter-spacing: normal; text-transform: none; font-size: .875rem; }
.mp-builds .mp-team-head::before { content: ''; width: .5rem; height: .5rem; flex: none; border-radius: 50%; background: var(--lg-up); }
.mp-builds .mp-team-head.is-dire::before { background: var(--lg-down); }
.mp-build { border-top: 1px solid var(--lg-line-soft); }
.mp-build > summary { display: flex; align-items: center; gap: .75rem; padding: .6rem .25rem; cursor: pointer; list-style: none; }
.mp-build > summary::-webkit-details-marker { display: none; }
.mp-build-who { display: grid; min-width: 0; }
.mp-build-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 650; }
.mp-build-who small { color: var(--lg-meta); font-size: .75rem; }
.mp-build-items { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .2rem; margin-left: auto; }
.mp-build-items img { width: 1.9rem; height: 1.4rem; object-fit: cover; border-radius: .25rem; }
.mp-build-body { padding: .25rem .25rem 1rem; }
.mp-build-body h4 { margin: .75rem 0 .5rem; color: var(--lg-text-2); font-size: .8125rem; font-weight: 700; }
.mp-build-body h4 small { margin-left: .3rem; color: var(--lg-meta); font-weight: 500; }
.mp-purchases, .mp-abilities { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.mp-purchases li, .mp-abilities li { display: grid; justify-items: center; gap: .15rem; }
.mp-purchases img { width: 1.9rem; height: 1.4rem; object-fit: cover; border-radius: .25rem; }
.mp-abilities img { width: 1.9rem; height: 1.9rem; border-radius: .25rem; }
.mp-purchases small, .mp-abilities small { color: var(--lg-meta); font-size: .75rem; }
.mp-item-text { max-width: 3.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lg-muted); font-size: .75rem; }
.lg-empty.is-inline { padding: 0; text-align: left; font-size: .8125rem; }

@media (max-width: 1180px) {
    .mp-builds { grid-template-columns: 1fr; }
}

@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; }
    .mp-result-bar { column-gap: .5rem; padding: .625rem .75rem; }
    .mp-result-team { flex-direction: column; gap: .25rem; font-size: .875rem; text-align: center; }
    .mp-result-team.is-radiant { flex-direction: column-reverse; }
    .mp-result-name { white-space: normal; overflow-wrap: anywhere; }
    .mp-result-kills { font-size: 1.65rem; }
    .mp-teams { padding: 1rem; }
    .mp-visuals { grid-template-columns: 1fr; }
    .mp-chart-panel { min-height: 15rem; }
    .mp-draft-team { grid-template-columns: 1fr; gap: .5rem; }
    .mp-build-items { display: none; }
    /* Phones: no sideways scroll. A player's row is two lines: the player, KDA and net
       worth, then the items across the row; LH/DN, GPM/XPM and level stay on wider screens. */
    .mp-scoreboard { table-layout: auto; font-size: .875rem; }
    .mp-scoreboard colgroup, .mp-scoreboard thead { display: none; }
    .mp-scoreboard tbody { display: block; }
    .mp-scoreboard tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: .9rem; 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; }
    .mp-scoreboard td:nth-of-type(3), .mp-scoreboard td:nth-of-type(4), .mp-scoreboard td:nth-of-type(5) { display: none; }
    .mp-scoreboard td:nth-of-type(6) { grid-column: 1 / -1; margin-top: .5rem; }
    .mp-scoreboard .mp-player strong { font-size: .875rem; }
    .mp-scoreboard .mp-portrait { width: 3.5rem; height: 1.97rem; }
    .mp-item { max-width: none; }
}