/* League pages (templates/league.html). The dashboard's world: style.css gives the glass
   panels, the gradient mesh and the fonts; this file lays out the league's own parts.
   Sizes are in rem, so they follow the site's --s scale like the dashboard's calc(px*--s). */

:root {
    --lg-u: 0.0625rem; /* one CSS pixel at scale 1: the bracket's coordinates */
    --lg-ground: #05060a;
    --lg-row: #0b0e14;
    --lg-edge: rgba(51, 65, 85, .8);
    --lg-line: rgba(30, 41, 59, .9);
    --lg-line-soft: rgba(30, 41, 59, .55);
    --lg-text: #f8fafc;
    --lg-text-2: #cbd5e1;
    --lg-muted: #94a3b8;
    --lg-meta: #8391a7;
    --lg-accent: #818cf8;
    --lg-accent-strong: #6366f1;
    --lg-accent-wash: rgba(99, 102, 241, .1);
    --lg-accent-edge: rgba(99, 102, 241, .28);
    --lg-up: #34d399;
    --lg-down: #f87171;
    --lg-gold: #fbbf24;
    --lg-ease: cubic-bezier(.16, 1, .3, 1);
}

.lg-page .glass-panel { border-radius: .75rem; } /* the dashboard's rounded-xl */
/* No highlight under the cursor on this page (the user's call, 18.10): the panels keep their edge. */
.lg-page .glass-panel::before { display: none; }
.lg-page .glass-panel:hover { border-color: var(--border-glass); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06), inset 0 1px 0 hsla(0, 0%, 100%, .05); }
.lg-page { margin: 0; min-height: 100vh; background: var(--lg-ground); color: var(--lg-text); caret-color: var(--lg-accent); accent-color: var(--lg-accent-strong); }
.lg-page ::selection { background: rgba(99, 102, 241, .45); color: #fff; }
.lg-page :focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; border-radius: .5rem; }
.lg-page [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lg-num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.is-up { color: var(--lg-up); }
.is-down { color: var(--lg-down); }
.is-radiant { color: var(--lg-up); }
.is-dire { color: var(--lg-down); }

.lg-wrap { position: relative; z-index: 1; max-width: 90rem; margin: 0 auto; padding: 2rem 2rem 1.5rem; }
@media (max-width: 1023px) { .lg-wrap { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* Head: title, facts and the tabs. */
.lg-crumbs { display: flex; gap: .5rem; margin-bottom: .5rem; color: var(--lg-meta); font-size: .8125rem; }
.lg-crumbs > :first-child { color: var(--lg-accent); font-weight: 600; }
.lg-crumb-link { color: var(--lg-muted); text-decoration: none; transition: color .2s; }
.lg-crumb-link:hover { color: #fff; }
.lg-missing h1 { margin: 0 0 .6rem; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; }
.lg-missing p { margin: 0 0 1rem; color: var(--lg-text-2); font-size: .875rem; }
.lg-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; }
.lg-head h1 { margin: 0; font-size: 2.5rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
/* A qualifier's stage after the title, a word space before it: a line breaks there, never inside it. */
.lg-h1-stage { color: var(--lg-muted); white-space: nowrap; }
.lg-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 0; margin: .65rem 0 0; color: var(--lg-muted); font-size: .875rem; }
.lg-facts > span + span::before { content: '·'; margin: 0 .6rem; color: #475569; }
.lg-state { font-weight: 600; }
.lg-state.is-running { color: var(--lg-accent); }
.lg-state.is-finished { color: var(--lg-text-2); }
.lg-siblings { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.lg-siblings a { padding: .3rem .65rem; border: 1px solid var(--lg-line); border-radius: .5rem; color: var(--lg-muted); font-size: .8125rem; text-decoration: none; }
.lg-siblings a[aria-current="page"] { border-color: var(--lg-accent-edge); background: var(--lg-accent-wash); color: #fff; }

.lg-tabs { display: flex; flex: none; gap: .25rem; padding: .3rem; border: 1px solid rgba(255, 255, 255, .07); border-radius: .75rem; background: rgba(5, 6, 10, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.lg-tabs a { padding: .55rem 1rem; border-radius: .5rem; color: var(--lg-muted); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .2s; }
.lg-tabs a:hover { color: #fff; }
.lg-tabs a[aria-selected="true"] { color: #fff; background: rgba(99, 102, 241, .16); box-shadow: inset 0 0 0 1px var(--lg-accent-edge); }

.lg-panel { display: grid; gap: 1rem; scroll-margin-top: calc(80px * var(--s) + 1rem); }
.lg-panel.is-entering { animation: lgEnter .32s var(--lg-ease) both; }
@keyframes lgEnter { from { opacity: .001; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

.lg-label { display: block; color: var(--lg-meta); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lg-link { color: var(--lg-accent); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; text-underline-offset: .2em; }
.lg-link:hover { color: #c7d2fe; }
.lg-link.is-quiet { color: var(--lg-muted); }
.lg-source { margin: .9rem 0 0; color: var(--lg-meta); font-size: .8125rem; line-height: 1.5; }
.lg-badge { display: inline-flex; align-items: center; justify-content: center; height: 1.5rem; padding: 0 .45rem; border: 1px solid rgba(99, 102, 241, .2); border-radius: .25rem; background: var(--lg-accent-wash); color: var(--lg-accent); font-size: .75rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.lg-chip { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .5rem; border-radius: .25rem; background: rgba(148, 163, 184, .08); color: var(--lg-text-2); font-size: .75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lg-live { color: var(--lg-down); font-weight: 800; }

/* Logos: the catalogue's, else the name's first letter. */
.lg-logo { width: 1.25rem; height: 1.25rem; flex: none; object-fit: contain; }
.lg-logo-ph { display: inline-grid; place-items: center; border-radius: .25rem; background: rgba(148, 163, 184, .14); color: var(--lg-text-2); font-size: .75rem; font-weight: 800; }

/* Overview: the podium and the bot's record. */
.lg-top { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1rem; }
.lg-top.no-bot { grid-template-columns: 1fr; }
.lg-podium { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto auto; gap: .75rem; padding: 1.25rem; }
.lg-place { position: relative; display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 1rem 1.1rem; border: 1px solid rgba(255, 255, 255, .07); border-radius: .75rem; background: rgba(5, 6, 10, .42); }
.lg-place-logo { width: 3rem; height: 3rem; }
.lg-place-logo.lg-logo-ph { font-size: 1.1rem; border-radius: .5rem; }
.lg-place-text { display: grid; gap: .2rem; min-width: 0; }
.lg-place-text strong { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-place-text small { color: var(--lg-muted); font-size: .8125rem; }
.lg-place-pos { display: inline-flex; align-items: center; gap: .3rem; color: var(--lg-meta); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lg-place-pos svg { width: 1rem; height: 1rem; fill: currentColor; }
.lg-place.is-1 { grid-row: span 2; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .9rem; padding: 1.4rem; border-color: rgba(251, 191, 36, .35); background: linear-gradient(155deg, rgba(251, 191, 36, .13), rgba(5, 6, 10, .45) 58%); box-shadow: 0 .75rem 2rem -1.25rem rgba(251, 191, 36, .45); }
.lg-place.is-1 .lg-place-logo { width: 4.75rem; height: 4.75rem; }
.lg-place.is-1 .lg-place-pos { color: var(--lg-gold); }
.lg-place.is-1 strong { font-size: 2.25rem; letter-spacing: -.025em; white-space: normal; }
.lg-place-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.lg-place-row li { flex: 1 1 auto; display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .6rem .7rem; border: 1px solid rgba(255, 255, 255, .06); border-radius: .5rem; background: rgba(5, 6, 10, .35); font-size: .875rem; font-weight: 600; }
.lg-place-row li span { white-space: nowrap; }
.lg-place-row em { margin-left: auto; color: var(--lg-meta); font-size: .75rem; font-style: normal; white-space: nowrap; }
/* A team a qualifier sent on: the green edge of the group tables' «through». */
.lg-place-row li.is-through { box-shadow: inset 2px 0 0 var(--lg-up); }

/* A qualifier in the podium's place: who each region sent on, one row per region (its badge and
   name, then its teams side by side); a qualifier of one region gets the podium's card sizes. */
.lg-through { display: flex; flex-direction: column; }
.lg-through-list { display: grid; margin: 0; padding: 0; list-style: none; }
.lg-through-region { display: grid; gap: .55rem; min-width: 0; }
.lg-through-list.is-regions .lg-through-region { grid-template-columns: 13.5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--lg-line-soft); }
.lg-through-list.is-regions .lg-through-region:first-child { border-top: 0; padding-top: 0; }
.lg-through-head { display: flex; align-items: center; gap: .55rem; min-width: 0; margin: 0; color: var(--lg-text-2); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.lg-through-head .lg-badge { min-width: 3.25rem; }
.lg-through-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; min-width: 0; }
.lg-through-team { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.lg-through-logo { width: 2rem; height: 2rem; }
.lg-through-logo.lg-logo-ph { border-radius: .375rem; font-size: .875rem; }
.lg-through-text { display: grid; gap: .1rem; min-width: 0; }
.lg-through-text strong { overflow: hidden; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.lg-through-text small { overflow: hidden; color: var(--lg-muted); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.lg-through-team.is-open strong { color: var(--lg-muted); font-weight: 600; }
.lg-through-list:not(.is-regions) .lg-through-team { padding: 1rem 1.1rem; border: 1px solid rgba(255, 255, 255, .07); border-radius: .75rem; background: rgba(5, 6, 10, .42); box-shadow: inset 2px 0 0 var(--lg-up); }
.lg-through-list:not(.is-regions) .lg-through-logo { width: 3rem; height: 3rem; }
.lg-through-list:not(.is-regions) .lg-through-text strong { font-size: 1.125rem; }
.lg-through .lg-place-row { margin-top: .75rem; }

.lg-bot { display: flex; flex-direction: column; padding: 1.25rem; border-color: rgba(129, 140, 248, .28); }
.lg-bot h2 { margin: 0 0 .9rem; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.lg-bot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0; }
.lg-bot-grid > div { padding: .8rem .9rem; border: 1px solid rgba(255, 255, 255, .06); border-radius: .5rem; background: rgba(5, 6, 10, .42); }
.lg-bot-grid dt { color: var(--lg-meta); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lg-bot-grid dd { margin: .3rem 0 0; font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; }
.lg-bot-grid dd.is-up { color: var(--lg-up); }
.lg-bot-grid dd.is-down { color: var(--lg-down); }
.lg-wl { font-size: 1.15rem !important; font-family: 'JetBrains Mono', monospace; }
.lg-wl span:last-child { color: var(--lg-muted); }
.lg-bot-note { margin: .85rem 0 0; color: var(--lg-meta); font-size: .8125rem; line-height: 1.45; }
.lg-bot-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: auto; padding-top: .9rem; }

.lg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.lg-tile { display: grid; gap: .35rem; padding: 1.15rem 1.4rem; }
.lg-tile b { font-size: 2.25rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-tile small { color: var(--lg-muted); font-size: .8125rem; }
.lg-tile .lg-link { font-size: .8125rem; font-family: 'JetBrains Mono', monospace; }
.lg-slash { color: #475569; }

.lg-section { padding: 1.25rem 1.4rem; min-width: 0; }
.lg-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; margin-bottom: 1rem; }
.lg-section-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.lg-section-note { margin: 0; color: var(--lg-meta); font-size: .8125rem; }

/* The latest series, where the bracket gives no places. */
.lg-recent-list { margin: 0; padding: 0; list-style: none; }
.lg-recent-list li { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 3.75rem minmax(0, 1fr) 2.75rem; align-items: center; gap: .9rem; padding: .7rem 0; border-top: 1px solid var(--lg-line-soft); font-size: .9375rem; }
.lg-recent-list li:first-child { border-top: 0; }
.lg-recent-when { color: var(--lg-muted); font-size: .8125rem; white-space: nowrap; }
.lg-recent-team { display: flex; align-items: center; gap: .55rem; min-width: 0; color: var(--lg-text-2); font-weight: 600; }
.lg-recent-team.is-a { justify-content: flex-end; text-align: right; }
.lg-recent-team > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-recent-team .lg-logo { width: 1.5rem; height: 1.5rem; flex: none; object-fit: contain; }
.lg-recent-team.is-win { color: var(--lg-text); font-weight: 700; }
.lg-recent-team.is-loss { color: var(--lg-muted); }
.lg-recent-score { display: inline-flex; justify-content: center; gap: .3rem; font-size: 1.125rem; }
.lg-recent-score i { color: #475569; font-style: normal; }

/* Team path: a team's line through the bracket and the Swiss rounds. */
.lg-teamfilter { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.lg-teamfilter > span { margin-right: .3rem; color: var(--lg-meta); font-size: .8125rem; }
.lg-teamfilter button { display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .55rem; border: 1px solid var(--lg-line); border-radius: .5rem; background: rgba(5, 6, 10, .4); color: var(--lg-muted); font: 600 .8125rem Inter, sans-serif; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.lg-teamfilter button:hover { border-color: var(--lg-accent-edge); color: #fff; }
.lg-teamfilter button[aria-pressed="true"] { border-color: rgba(129, 140, 248, .55); background: rgba(99, 102, 241, .18); color: #fff; }

.lg-scroll { container-type: inline-size; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #334155 transparent; padding-bottom: .25rem; }
.lg-scroll::-webkit-scrollbar { height: .5rem; }
.lg-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 99px; }

.lg-board { position: relative; }
/* The bracket fills its panel: its unit grows with the panel's width (up to 1.2x), and below
   its natural width it keeps 1px and scrolls. */
.lg-bracket { --kx: 1; --ky: 1; --lg-u: clamp(0.0625rem, 100cqi / var(--w), 0.075rem); width: calc(var(--w) * var(--kx) * var(--lg-u)); height: calc(var(--h) * var(--ky) * var(--lg-u)); }
.lg-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lg-lines path, .lg-lines line { vector-effect: non-scaling-stroke; }
.lg-lines path { fill: none; stroke: #334155; stroke-width: 1.5; transition: stroke .2s, opacity .2s; }
.lg-lane-rule { stroke: rgba(51, 65, 85, .5); stroke-width: 1; stroke-dasharray: none; }
.lg-round-title, .lg-slot, .lg-drop { position: absolute; left: calc(var(--x) * var(--kx) * var(--lg-u)); top: calc(var(--y) * var(--ky) * var(--lg-u)); }
.lg-round-title { display: flex; align-items: center; gap: .5rem; height: calc(26 * var(--lg-u)); color: var(--lg-text-2); font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.lg-round-bo { color: var(--lg-accent); font-size: .75rem; font-weight: 700; padding: .1rem .35rem; border-radius: .25rem; background: var(--lg-accent-wash); }
.lg-slot { width: calc(216 * var(--kx) * var(--lg-u)); height: calc(74 * var(--ky) * var(--lg-u)); }
.lg-round-short { display: none; }
.lg-drop { color: var(--lg-meta); font-size: .75rem; font-weight: 600; white-space: nowrap; }

.lg-match { display: grid; grid-template-rows: calc(20 * var(--lg-u)) 1fr 1fr; height: 100%; overflow: hidden; border: 1px solid var(--lg-edge); border-radius: .5rem; background: var(--lg-row); color: inherit; text-decoration: none; transition: border-color .2s, background-color .2s, opacity .2s; }
.lg-match-head { display: flex; justify-content: space-between; align-items: center; padding: 0 .55rem; border-bottom: 1px solid var(--lg-line); color: var(--lg-meta); font: 500 .75rem 'JetBrains Mono', monospace; }
.lg-side { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr) auto; align-items: center; gap: .45rem; padding: 0 .55rem; color: var(--lg-muted); font-size: .8125rem; font-weight: 500; transition: background-color .2s, opacity .2s; }
.lg-side .lg-logo { width: 1.15rem; height: 1.15rem; }
.lg-side + .lg-side { border-top: 1px solid var(--lg-line-soft); }
.lg-side-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-side-name.is-tbd { color: #64748b; font-style: italic; }
.lg-side-score { min-width: 1.25rem; padding: .05rem .3rem; border-radius: .25rem; text-align: center; font: 700 .8125rem 'JetBrains Mono', monospace; color: var(--lg-meta); }
.lg-side.is-win { color: #fff; font-weight: 650; }
.lg-side.is-win .lg-side-score { color: var(--lg-up); background: rgba(16, 185, 129, .12); }
/* The winner of a match that sends it on from a qualifier. */
.lg-side.is-through { box-shadow: inset 2px 0 0 var(--lg-up); }
.lg-match.is-upcoming .lg-side { color: var(--lg-text-2); }

/* The compact bracket (dltv's): the same board at .42 of its width and .62 of its height, at
   the page's own scale; each card a logo and a score per side, each round's name short. */
.lg-bracket-view { margin-right: auto; }
.lg-bracket.is-compact { --kx: .42; --ky: .62; --lg-u: 0.0625rem; }
.lg-bracket.is-compact .lg-match { grid-template-rows: 1fr 1fr; border-radius: .375rem; }
.lg-bracket.is-compact .lg-match-head, .lg-bracket.is-compact .lg-side-name { display: none; }
.lg-bracket.is-compact .lg-side { grid-template-columns: 1.15rem minmax(0, 1fr); gap: .3rem; padding: 0 .4rem; }
.lg-bracket.is-compact .lg-side-score { justify-self: end; }
.lg-bracket.is-compact .lg-round-title { height: calc(26 * var(--ky) * var(--lg-u)); font-size: .75rem; }
.lg-bracket.is-compact .lg-round-name, .lg-bracket.is-compact .lg-round-bo { display: none; }
.lg-bracket.is-compact .lg-round-short { display: inline; }
.lg-bracket.is-compact .lg-drop { font-size: .6875rem; }

/* A qualifier's regions: the switch beside the title, the view switch at the right; each region
   its name and team path, its bracket and its places (one under another without the script). */
.lg-regions .lg-bracket-view { margin-right: 0; margin-left: auto; }
.lg-region-pick button { min-width: 3.25rem; padding: 0 .6rem; }
.lg-region + .lg-region { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--lg-line); }
.lg-regions.is-switched .lg-region + .lg-region { margin-top: 0; padding-top: 0; border-top: 0; }
.lg-region-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; margin-bottom: 1rem; }
.lg-region-title { display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--lg-text-2); font-size: .9375rem; font-weight: 700; }
.lg-region-places { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--lg-line-soft); }
.lg-region-places h4 { margin: 0 0 .6rem; }

[data-board].has-pick .lg-match { opacity: .38; }
[data-board].has-pick .lg-match.is-picked { opacity: 1; border-color: rgba(129, 140, 248, .6); }
[data-board].has-pick .lg-side.is-picked { background: rgba(99, 102, 241, .16); color: #fff; }
[data-board].has-pick .lg-lines path { opacity: .35; }
[data-board].has-pick .lg-lines path.is-picked { opacity: 1; stroke: var(--lg-accent); stroke-width: 2.25; }
[data-board].has-pick .lg-outcome li:not(.is-picked) { opacity: .4; }

/* The group stage: one standings table per group or phase. */
.lg-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem 1.25rem; }
.lg-group h3 { margin: 0 0 .6rem; color: var(--lg-text-2); font-size: .8125rem; font-weight: 700; }
.lg-group-table td:first-child { width: 2rem; color: var(--lg-meta); }
.lg-group-team { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.lg-group-team span { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.lg-group-table tr.is-through th { color: #fff; }
.lg-group-table tr.is-through td:first-child { box-shadow: inset 2px 0 0 var(--lg-up); }
.lg-group-table tr.is-out { color: var(--lg-muted); }
[data-board].has-pick .lg-group-table tbody tr:not(.is-picked) { opacity: .4; }

/* Swiss rounds by record. */
.lg-swiss { display: grid; grid-template-columns: repeat(5, minmax(12rem, 1fr)); gap: .9rem 1rem; min-width: 64rem; }
.lg-swiss-col h3 { margin: 0 0 .6rem; color: var(--lg-text-2); font-size: .8125rem; font-weight: 700; }
.lg-pool { display: grid; gap: .4rem; margin-bottom: 1rem; }
.lg-pool-record { justify-self: start; padding: .1rem .4rem; border-radius: .25rem; background: rgba(148, 163, 184, .1); color: var(--lg-text-2); font-size: .75rem; font-weight: 700; }
.lg-swiss .lg-match { height: auto; grid-template-rows: calc(20 * var(--lg-u)) auto auto; }
/* In the Swiss columns a long name takes two lines (Conventus Stellarum) rather than an ellipsis. */
.lg-swiss .lg-side { min-height: calc(26 * var(--lg-u)); padding-block: .2rem; }
.lg-swiss .lg-side-name, .lg-outcome li span { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
/* The result runs under the rounds as one row of records (3–0 … 0–3), so the rounds keep the width. */
.lg-swiss-final { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .9rem 1rem; margin-top: .25rem; padding-top: 1rem; border-top: 1px solid var(--lg-line); }
.lg-swiss-final h3 { grid-column: 1 / -1; margin-bottom: 0; }
.lg-swiss-final .lg-outcome { margin-bottom: 0; }
.lg-outcome { margin-bottom: .9rem; }
.lg-outcome-label { margin-left: .35rem; color: var(--lg-meta); font-size: .75rem; font-weight: 600; }
.lg-outcome.is-through .lg-outcome-label { color: var(--lg-up); }
.lg-outcome.is-next .lg-outcome-label { color: var(--lg-text-2); }
.lg-outcome ul { display: grid; gap: .25rem; margin: .45rem 0 0; padding: 0; list-style: none; }
.lg-outcome li { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr) auto; align-items: center; gap: .45rem; padding: .35rem .5rem; border-radius: .5rem; background: var(--lg-row); font-size: .8125rem; transition: opacity .2s; }
.lg-outcome li span { overflow-wrap: anywhere; line-height: 1.2; }
.lg-outcome li em { color: var(--lg-meta); font-size: .75rem; font-style: normal; }
.lg-outcome.is-out li { color: var(--lg-muted); }

/* Matches by day: the dashboard's series rows. */
.lg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.lg-filters input { width: 18rem; height: 2.5rem; padding: 0 .9rem; border: 1px solid #1f2127; border-radius: .5rem; background: rgba(0, 0, 0, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); color: var(--lg-text); font: 500 .875rem Inter, sans-serif; outline: none; }
.lg-filters input::placeholder { color: #64748b; }
.lg-filters input:focus { border-color: var(--lg-accent-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 2px rgba(99, 102, 241, .2); }
.lg-seg { display: flex; gap: .2rem; padding: .2rem; border: 1px solid rgba(255, 255, 255, .07); border-radius: .5rem; background: rgba(5, 6, 10, .5); }
.lg-seg button { height: 2rem; padding: 0 .75rem; border: 0; border-radius: .5rem; background: none; color: var(--lg-muted); font: 600 .8125rem Inter, sans-serif; cursor: pointer; }
.lg-seg button[aria-pressed="true"] { background: rgba(99, 102, 241, .16); color: #fff; }
.lg-filter-count { margin-left: auto; color: var(--lg-meta); font-size: .8125rem; }

.lg-days { overflow: hidden; }
.lg-day-head { display: flex; align-items: baseline; gap: .75rem; margin: 0; padding: .85rem 1.25rem; border-bottom: 1px solid var(--lg-line); background: rgba(15, 23, 42, .4); font-size: 1.125rem; font-weight: 700; }
.lg-day-head span { color: var(--lg-meta); font-size: .8125rem; font-weight: 500; }
.lg-series { border-bottom: 1px solid var(--lg-line-soft); }
.lg-series > summary { display: grid; grid-template-columns: 3.4rem 11.5rem minmax(0, 1fr) 4.75rem minmax(0, 1fr) 3.5rem 4.75rem 1.25rem; align-items: center; gap: .75rem; padding: .8rem 1.25rem; cursor: pointer; list-style: none; transition: background-color .2s; }
.lg-series > summary::-webkit-details-marker { display: none; }
.lg-series:target, .lg-series.is-flash { box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .45); background: rgba(99, 102, 241, .07); }
.lg-time { color: var(--lg-meta); font-size: .8125rem; }
.lg-series-team { display: flex; align-items: center; gap: .55rem; min-width: 0; font-size: .875rem; font-weight: 700; color: var(--lg-text); }
.lg-series-team.is-a { justify-content: flex-end; text-align: right; }
.lg-series-team.is-loss { color: var(--lg-muted); font-weight: 600; }
.lg-series-score { display: flex; justify-content: center; gap: .4rem; font-size: 1.15rem; font-weight: 700; color: var(--lg-muted); }
.lg-series-score b.is-win { color: var(--lg-up); }
.lg-series-score i { color: #475569; font-style: normal; }
.lg-series-bot { color: var(--lg-meta); font-size: .8125rem; text-align: right; white-space: nowrap; }
.lg-series-bot b { color: var(--lg-text-2); font-family: 'JetBrains Mono', monospace; }
.lg-chevron { width: 1.1rem; height: 1.1rem; fill: #64748b; transition: transform .25s var(--lg-ease); }
details[open] > summary .lg-chevron { transform: rotate(180deg); }
.lg-maps { margin: 0; padding: 0 0 .25rem; list-style: none; background: var(--lg-row); }
.lg-map { display: grid; grid-template-columns: 5.5rem 13rem 6rem 4rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .6rem 1.25rem .6rem 5.15rem; border-top: 1px solid var(--lg-line-soft); font-size: .875rem; }
.lg-badge.is-map { justify-self: start; }
.lg-map-winner { display: flex; align-items: center; gap: .5rem; min-width: 0; font-weight: 600; }
.lg-map-winner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-map-kills, .lg-map-dur { color: var(--lg-text-2); font-size: .8125rem; }
.lg-map-bot { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; min-width: 0; font-size: .8125rem; }
.lg-map-pick { color: var(--lg-text-2); }
.lg-map-pick .lg-num { color: var(--lg-muted); }
.lg-map-pick.is-skip { color: var(--lg-meta); }
.lg-result { padding: .1rem .4rem; border-radius: .25rem; font-size: .75rem; font-weight: 800; letter-spacing: .04em; }
.lg-result.is-win { color: var(--lg-up); background: rgba(16, 185, 129, .1); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .22); }
.lg-result.is-loss { color: var(--lg-down); background: rgba(239, 68, 68, .1); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .22); }
.lg-map-link { justify-self: end; }
.lg-empty { margin: 0; padding: 2rem 1.25rem; color: var(--lg-muted); text-align: center; }

/* Tables: the dashboard's header strip and rows. */
.lg-table-wrap, .lg-table-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.lg-table-wrap { padding: 0; }
.lg-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.lg-table thead th { padding: .75rem .9rem; background: var(--lg-row); color: var(--lg-meta); font: 700 .75rem 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.lg-table td, .lg-table tbody th { padding: .7rem .9rem; border-top: 1px solid var(--lg-line-soft); text-align: center; white-space: nowrap; font-weight: 500; }
.lg-table tbody th { font-weight: 650; }
.lg-table .is-left { text-align: left; }
.lg-table .is-strong { color: #fff; font-weight: 700; }
.lg-table tbody tr { transition: background-color .15s; }
.lg-table.is-compact td, .lg-table.is-compact tbody th { padding: .55rem .7rem; }
.lg-table.is-compact thead th { padding: .6rem .7rem; }
.lg-table small { color: var(--lg-meta); font-size: .75rem; font-weight: 500; margin-left: .3rem; }
.lg-team-cell { display: inline-flex; align-items: center; gap: .55rem; }
.lg-roster { color: var(--lg-muted); font-size: .8125rem; }
.lg-hero { width: 2.4rem; height: 1.35rem; flex: none; object-fit: cover; border-radius: .25rem; background: #151a24; }
.lg-hero.is-big { width: 3.6rem; height: 2.05rem; }
.lg-hero-row { display: inline-flex; gap: .25rem; vertical-align: middle; }
/* In a table row three portraits keep to 16:9 a size smaller, so the row fits its panel. */
.lg-hero-row .lg-hero { width: 2.1rem; height: 1.18rem; }
.lg-table thead th[data-sort] { cursor: pointer; }
.lg-table thead th[aria-sort="ascending"]::after { content: ' ↑'; color: var(--lg-accent); }
.lg-table thead th[aria-sort="descending"]::after { content: ' ↓'; color: var(--lg-accent); }

/* Statistics. */
.lg-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.lg-grid-2.is-wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.lg-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.lg-records { display: grid; margin: 0; padding: 0; list-style: none; }
.lg-records li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .7rem .25rem; border-top: 1px solid var(--lg-line-soft); }
.lg-records li:first-child { border-top: 0; padding-top: .2rem; }
.lg-records b { display: block; margin-top: .15rem; font-size: 1.65rem; font-weight: 700; }
.lg-records small { color: var(--lg-muted); font-size: .8125rem; }
.lg-record-icon { display: grid; place-items: center; width: 3.6rem; height: 2.05rem; border-radius: .25rem; background: rgba(148, 163, 184, .08); }
.lg-record-icon svg { width: 1.2rem; height: 1.2rem; fill: var(--lg-muted); }
.lg-hero-list { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.lg-hero-list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 4.5rem 3.2rem 3rem; align-items: center; gap: .65rem; padding: .45rem .25rem; border-top: 1px solid var(--lg-line-soft); font-size: .875rem; }
.lg-hero-list li:first-child { border-top: 0; }
.lg-hero-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lg-hero-list b { text-align: right; font-size: .875rem; }
.lg-hero-list small { color: var(--lg-meta); font-size: .75rem; text-align: right; }
.lg-meter { height: .375rem; border-radius: 99px; background: rgba(99, 102, 241, .12); overflow: hidden; }
.lg-meter i { display: block; width: calc(var(--v) * 100%); height: 100%; border-radius: inherit; background: var(--lg-accent); }
.lg-all-heroes > summary { display: flex; align-items: center; gap: .75rem; cursor: pointer; list-style: none; }
.lg-all-heroes > summary::-webkit-details-marker { display: none; }
.lg-all-heroes > summary h2 { margin: 0; font-size: 1.15rem; }
.lg-all-heroes > summary span { color: var(--lg-meta); }
.lg-all-heroes > summary .lg-chevron { margin-left: auto; }
.lg-all-heroes[open] > summary { margin-bottom: 1rem; }

/* Predictions. */
.lg-bot-line { margin: 0; padding: 1rem 1.25rem; border: 1px solid rgba(129, 140, 248, .22); border-radius: .75rem; background: rgba(99, 102, 241, .06); color: var(--lg-text-2); font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.lg-bot-line b { color: #fff; }
.lg-bot-line b.is-up { color: var(--lg-up); }
.lg-bot-line b.is-down { color: var(--lg-down); }
.lg-chart { position: relative; }
.lg-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.lg-grid-line { stroke: #1e293b; stroke-width: 1; }
.lg-grid-line.is-zero { stroke: #475569; }
.lg-axis { fill: var(--lg-meta); font: 500 12px 'JetBrains Mono', monospace; }
.lg-end-label { fill: var(--lg-text); font: 700 13px 'JetBrains Mono', monospace; }
.lg-area { fill: rgba(129, 140, 248, .1); }
.lg-line { fill: none; stroke: var(--lg-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lg-dot { fill: var(--lg-accent); stroke: #10131b; stroke-width: 2; }
.lg-hit { fill: transparent; cursor: crosshair; outline: none; }
.lg-hit:focus-visible { fill: rgba(129, 140, 248, .08); }
.lg-cross { stroke: #64748b; stroke-width: 1; }
.lg-tip { position: absolute; z-index: 2; min-width: 10rem; padding: .55rem .7rem; 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; font-size: .8125rem; transform: translate(-50%, calc(-100% - .75rem)); }
.lg-tip b { display: block; font: 700 1.125rem 'JetBrains Mono', monospace; }
.lg-tip span { display: block; color: var(--lg-muted); }
.lg-stage-cards { display: grid; }
.lg-stage-card { padding: 1rem .1rem; border-top: 1px solid var(--lg-line-soft); }
.lg-stage-card:first-child { border-top: 0; padding-top: .1rem; }
.lg-stage-card > b { display: block; margin: .3rem 0 .6rem; font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; }
.lg-stage-card dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .2rem 1.5rem; margin: 0; }
.lg-stage-card dt { color: var(--lg-meta); font-size: .75rem; }
.lg-stage-card dd { margin: .15rem 0 0; font-size: .875rem; font-weight: 700; }
.lg-legend { display: flex; gap: 1rem; margin: 0; color: var(--lg-muted); font-size: .8125rem; }
.lg-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.lg-key { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; }
.lg-key.is-expected, .lg-dumbbell i.is-expected { border: 2px solid #5b6578; background: var(--lg-row); }
.lg-key.is-actual, .lg-dumbbell i.is-actual { background: var(--lg-accent); box-shadow: 0 0 0 2px #10131b; }
.lg-calibration th.lg-dumbbell-head, .lg-calibration td.lg-dumbbell { width: 45%; min-width: 10rem; }
.lg-dumbbell-head { position: relative; }
.lg-dumbbell-head span { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.lg-dumbbell-head span:nth-child(1) { left: .7rem; transform: translateY(-50%); }
.lg-dumbbell-head span:nth-child(2) { left: 50%; }
.lg-dumbbell-head span:nth-child(3) { right: .7rem; left: auto; transform: translateY(-50%); }
.lg-dumbbell > span { position: relative; display: block; height: 1rem; margin: 0 .35rem; background: linear-gradient(#1e293b, #1e293b) center / 100% 1px no-repeat; }
.lg-dumbbell > span::before { content: ''; position: absolute; top: calc(50% - 1px); left: calc(min(var(--a), var(--b)) * 100%); width: calc(max(var(--a) - var(--b), var(--b) - var(--a)) * 100%); height: 2px; background: rgba(129, 140, 248, .45); }
.lg-dumbbell i { position: absolute; top: 50%; width: .8rem; height: .8rem; border-radius: 50%; transform: translate(-50%, -50%); box-sizing: border-box; }
.lg-dumbbell i.is-expected { left: calc(var(--a) * 100%); }
.lg-dumbbell i.is-actual { left: calc(var(--b) * 100%); }
.lg-calls { display: grid; gap: 1.1rem; }
.lg-calls h3 { margin: 0 0 .5rem; color: var(--lg-text-2); font-size: .875rem; font-weight: 700; }
.lg-calls ol { display: grid; margin: 0; padding: 0; list-style: none; }
.lg-calls li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto 4.75rem 1.25rem; align-items: center; gap: .75rem; padding: .6rem .25rem; border-top: 1px solid var(--lg-line-soft); font-size: .875rem; }
.lg-calls li:first-child { border-top: 0; }
.lg-calls li .lg-logo { width: 1.4rem; height: 1.4rem; }
.lg-calls strong { display: block; font-weight: 650; }
.lg-calls small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lg-meta); font-size: .75rem; }
.lg-call-meta { color: var(--lg-muted); font-size: .8125rem; white-space: nowrap; }
.lg-call-profit { text-align: right; font-weight: 700; }

/* The tournaments list (templates/tournaments.html): the latest tournament as a board (how
   it ended, the bot's record, its teams) across the page, then the archive with
   the bot's profit as a bar around one zero line. A title's link covers its whole card or row. */
.tl-head { margin-bottom: 1.5rem; }
.tl-link { color: inherit; text-decoration: none; }
.tl-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.tl-tier { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .5rem; border: 1px solid var(--lg-line); border-radius: .25rem; background: rgba(148, 163, 184, .08); color: var(--lg-text-2); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tl-tier.is-1 { border-color: rgba(99, 102, 241, .3); background: var(--lg-accent-wash); color: var(--lg-accent); }
.tl-state { font-weight: 600; color: var(--lg-text-2); }
.tl-state.is-running { display: inline-flex; align-items: center; gap: .4rem; color: var(--lg-accent); }
.tl-state.is-running::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.tl-events { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .5rem 0 0; color: var(--lg-meta); font-size: .75rem; }
.tl-events > span:first-child { margin-right: .25rem; font-weight: 600; }
.tl-event { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .5rem; border: 1px solid var(--lg-line); border-radius: .375rem; color: var(--lg-text-2); font-weight: 600; text-decoration: none; }
.tl-event.is-empty { color: var(--lg-meta); font-weight: 500; }
.tl-event.is-running::before { content: ''; width: .375rem; height: .375rem; border-radius: 50%; background: var(--lg-accent); }

.tl-soon { display: flex; align-items: baseline; gap: 1.25rem; margin-bottom: 1rem; padding: .9rem 1.4rem; }
.tl-soon h2 { flex: none; margin: 0; }
.tl-soon ul { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 0; padding: 0; list-style: none; }
.tl-soon li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: .9375rem; }
.tl-soon .tl-events { margin: 0; }
.tl-soon-when { color: var(--lg-muted); font-size: .875rem; }

/* The board. */
.tl-top { margin-bottom: 1rem; }
.tl-board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "main bot" "foot foot"; gap: 1.75rem 2.25rem; padding: 1.75rem 1.75rem 1.4rem; }
.tl-board-main { grid-area: main; min-width: 0; }
.tl-board-label { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; color: var(--lg-accent); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tl-board-label.is-running::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.tl-stage { color: var(--lg-muted); white-space: nowrap; }
.tl-board-title { margin: 0; font-size: 2.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
.tl-board-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .9rem; margin: .8rem 0 0; color: var(--lg-muted); font-size: .875rem; }
.tl-board-bot { grid-area: bot; min-width: 0; }
.tl-board-bot h3 { margin: 0; }
.tl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: .7rem 0 0; }
.tl-tiles div { padding: .85rem 1rem .9rem; border: 1px solid var(--lg-line); border-radius: .5rem; background: rgba(5, 6, 10, .4); }
.tl-tiles dt { color: var(--lg-meta); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tl-tiles dd { margin: .4rem 0 0; color: var(--lg-text); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.tl-tiles dd.tl-wl { font-size: 1.25rem; line-height: 1.55; }
.tl-wl span:last-child:not(.is-up):not(.is-down) { color: var(--lg-muted); }
.tl-none { margin: .7rem 0 0; color: var(--lg-muted); font-size: .875rem; }
.tl-board-foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.2rem; border-top: 1px solid var(--lg-line-soft); }
.tl-logos { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tl-logos .lg-logo { width: 2rem; height: 2rem; object-fit: contain; }
.tl-logos-more { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; color: var(--lg-muted); font-size: .8125rem; }
.tl-open { display: inline-flex; flex: none; align-items: center; gap: .4rem; color: var(--lg-accent); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.tl-open svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

/* The champions of the tournaments before it: a panel of its own beside the board; the
   board then sets its tiles two by two. */
.tl-top.has-champs { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 1rem; }
.tl-top.has-champs .tl-board { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.tl-top.has-champs .tl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-champs { min-width: 0; padding: 1.5rem 1.4rem 1rem; }
.tl-champs h2 { margin: 0 0 .5rem; }
.tl-winners { margin: 0; padding: 0; list-style: none; }
.tl-winners li { display: grid; grid-template-columns: 1rem 2rem minmax(0, 1fr); align-items: center; column-gap: .7rem; padding: .7rem 0; border-top: 1px solid var(--lg-line-soft); }
.tl-winners li:first-child { border-top: 0; }
.tl-winner-cup { width: 1rem; height: 1rem; fill: var(--lg-gold); }
.tl-winners .lg-logo { width: 2rem; height: 2rem; object-fit: contain; }
.tl-winner-text { display: grid; gap: .15rem; min-width: 0; }
.tl-winner-text strong { overflow: hidden; color: var(--lg-text); font-size: 1rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.tl-winner-event { overflow: hidden; color: var(--lg-muted); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.tl-winner-event a { color: var(--lg-text-2); text-decoration: none; }

/* How a tournament ended: the champion and its final, else the last series. */
.tl-result { display: grid; gap: .55rem; margin-top: 1.6rem; }
.tl-result-label { display: inline-flex; align-items: center; gap: .35rem; color: var(--lg-meta); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tl-result-label svg { width: 1rem; height: 1rem; fill: currentColor; }
.tl-result.is-champion .tl-result-label { color: var(--lg-gold); }
.tl-result-line { display: grid; grid-template-columns: minmax(0, max-content) auto minmax(0, max-content); justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--lg-line); border-radius: .5rem; background: rgba(5, 6, 10, .4); }
.tl-result.is-champion .tl-result-line { border-color: rgba(251, 191, 36, .28); }
.tl-result-team { display: flex; align-items: center; gap: .6rem; min-width: 0; color: var(--lg-text); font-size: 1rem; font-weight: 700; }
.tl-result-team.is-b { justify-content: flex-end; text-align: right; }
.tl-result-team.is-lost { color: var(--lg-muted); font-weight: 600; }
.tl-result-team > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-result-team .lg-logo { width: 1.75rem; height: 1.75rem; flex: none; object-fit: contain; }
.tl-result-score { display: inline-flex; gap: .35rem; color: var(--lg-muted); font-size: 1.5rem; line-height: 1; }
.tl-result-score .is-won { color: var(--lg-text); }
.tl-result-score i { color: #475569; font-style: normal; }


/* The archive: one row per tournament under the dashboard's header strip. */
.tl-archive { padding: 0 0 .4rem; overflow: hidden; }
.tl-archive-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; padding: 1.2rem 1.4rem 1rem; }
.tl-archive-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.tl-year { margin: 0; padding: 1rem 1.4rem .35rem; color: var(--lg-text-2); font-size: .875rem; font-weight: 700; }
.tl-list { margin: 0; padding: 0; list-style: none; }
.tl-list { --bar: 10rem; --money: 5.25rem; --roi: 3.75rem; --gap: .8rem; --pad: 1.4rem; background: linear-gradient(var(--lg-edge), var(--lg-edge)) no-repeat right calc(var(--pad) + var(--roi) + var(--money) + 2 * var(--gap) + var(--bar) / 2) top 0 / 1px 100%; }
.tl-row { position: relative; display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) 5rem 3.75rem 4.25rem calc(var(--bar, 10rem) + 5.25rem + 3.75rem + 1.6rem); align-items: center; align-content: center; column-gap: 1.25rem; min-height: 4rem; padding: .8rem 1.4rem; border-top: 1px solid var(--lg-line-soft); }
.tl-row-head { min-height: 0; padding-top: .6rem; padding-bottom: .6rem; border-top: 0; background: var(--lg-row); color: var(--lg-meta); font-family: 'JetBrains Mono', monospace; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tl-row-head .tl-bot { display: block; text-align: right; }
.tl-row-head .tl-stat { color: inherit; font-size: inherit; }
.tl-list .tl-when, .tl-list .tl-cell-tier, .tl-list .tl-stat, .tl-list .tl-bot { grid-row: 1 / 3; }
.tl-when { grid-column: 1; color: var(--lg-muted); font-size: .875rem; white-space: nowrap; }
.tl-row-head .tl-when { color: inherit; font-size: inherit; }
.tl-name { grid-column: 2; min-width: 0; margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.tl-row-head .tl-name { font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.tl-list .tl-events { grid-column: 2; grid-row: 2; margin-top: .4rem; }
.tl-list .tl-name { grid-row: 1; }
.tl-cell-tier { grid-column: 3; }
.tl-stat.is-maps { grid-column: 4; }
.tl-stat.is-teams { grid-column: 5; }
.tl-stat { color: var(--lg-text-2); font-size: .875rem; text-align: right; white-space: nowrap; }
.tl-unit { display: none; }
.tl-bot { grid-column: 6; display: grid; grid-template-columns: var(--bar) var(--money) var(--roi); align-items: center; justify-content: end; column-gap: var(--gap); }
.tl-row-head .tl-bot { grid-template-columns: none; }
.tl-bot b { font-size: .9375rem; text-align: right; }
.tl-bot small { font-size: .75rem; text-align: right; }
.tl-bot.is-none { display: block; color: var(--lg-meta); text-align: right; }
/* The bot's profit around one zero line, on the archive's one scale. */
.tl-bar { position: relative; height: .5rem; }
.tl-bar i { position: absolute; top: 0; bottom: 0; left: calc(50% + min(var(--v), 0) * 50%); width: max(2px, calc(max(var(--v), var(--v) * -1) * 50%)); border-radius: 0 2px 2px 0; background: var(--lg-up); }
.tl-bar.is-down i { border-radius: 2px 0 0 2px; background: var(--lg-down); }

.lg-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem 2rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--lg-line-soft); color: var(--lg-meta); font-size: .8125rem; }
.lg-footer nav { display: flex; gap: .5rem; }
.lg-footer a { color: var(--lg-muted); text-decoration: none; }
.lg-footer a[aria-current="page"] { color: #fff; }

@media (max-width: 1180px) {
    .tl-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "bot" "foot"; }
    .tl-top.has-champs { grid-template-columns: minmax(0, 1fr); }
    .tl-top.has-champs .tl-board { grid-template-columns: minmax(0, 1fr); }
    .tl-top.has-champs .tl-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tl-top.has-champs .tl-winners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
    .tl-top.has-champs .tl-winners li:nth-child(2) { border-top: 0; }
    .tl-list { --bar: 6rem; --money: 4.75rem; --roi: 3.25rem; --gap: .5rem; }
    .tl-row { grid-template-columns: 10rem minmax(0, 1fr) 4.5rem 3.5rem 4rem 15rem; column-gap: 1rem; }
    .lg-top { grid-template-columns: 1fr; }
    .lg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg-grid-2, .lg-grid-2.is-wide-left { grid-template-columns: 1fr; }
    .lg-grid-3 { grid-template-columns: 1fr 1fr; }
    .lg-head-row { flex-direction: column; align-items: stretch; }
    .lg-tabs { align-self: flex-start; }
    .lg-series > summary { grid-template-columns: 3.2rem 9rem minmax(0, 1fr) 4.5rem minmax(0, 1fr) 3.25rem 4rem 1.25rem; }
    .lg-map { grid-template-columns: 5rem 11rem 5rem 3.6rem minmax(0, 1fr); padding-left: 1.25rem; }
    .lg-map-link { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 639px) {
    .lg-wrap { padding: 2rem 1rem 1rem; }
    .lg-head h1 { font-size: 1.65rem; }
    .lg-facts { gap: .3rem 1rem; font-size: .875rem; }
    .lg-facts > span + span::before { content: none; }
    .lg-tabs { align-self: stretch; overflow-x: auto; scrollbar-width: none; }
    .lg-tabs a { padding: .55rem .8rem; }
    .lg-podium { grid-template-columns: 1fr 1fr; padding: .9rem; }
    .lg-place.is-1 { grid-column: 1 / -1; grid-row: auto; flex-direction: row; align-items: center; }
    .lg-place.is-1 .lg-place-logo { width: 3.5rem; height: 3.5rem; }
    .lg-place.is-1 strong { font-size: 1.65rem; }
    .lg-place { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .85rem; }
    .lg-place-row { grid-template-columns: 1fr 1fr; }
    .lg-place-row li span { white-space: normal; line-height: 1.25; }
    .lg-through-list.is-regions .lg-through-region { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
    .lg-through-teams { grid-template-columns: minmax(0, 1fr); }
    .lg-through-list:not(.is-regions) .lg-through-team { padding: .85rem; }
    .lg-regions .lg-bracket-view { margin-left: 0; }
    .lg-tiles { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .lg-tile { padding: .9rem 1rem; }
    .lg-tile b { font-size: 1.65rem; }
    .lg-section { padding: 1rem; }
    .lg-teamfilter > span { width: 100%; }
    .lg-teamfilter button span { display: none; }
    .lg-grid-3 { grid-template-columns: 1fr; }
    .lg-filters input { width: 100%; }
    .lg-filter-count { margin-left: 0; }
    .lg-day-head { padding: .75rem 1rem; }
    .lg-series > summary { grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1fr) 1rem; grid-template-areas: "time bot bot bo" "a score b chev"; gap: .45rem .5rem; padding: .75rem 1rem; }
    .lg-series-bot { grid-area: bot; justify-self: center; }
    .lg-time { grid-area: time; }
    .lg-series-stage { display: none; }
    .lg-series-team.is-a { grid-area: a; font-size: .875rem; }
    .lg-series-team.is-b { grid-area: b; font-size: .875rem; }
    .lg-series-score { grid-area: score; font-size: 1.125rem; }
    .lg-series > summary .lg-badge { grid-area: bo; justify-self: end; }
    .lg-chevron { grid-area: chev; }
    .lg-map { grid-template-columns: auto minmax(0, 1fr) auto; gap: .4rem .6rem; padding: .7rem 1rem; }
    .lg-map-kills { display: none; }
    .lg-map-bot, .lg-map-link { grid-column: 1 / -1; }
    .lg-calls li { grid-template-columns: 1.4rem minmax(0, 1fr) auto; row-gap: .2rem; }
    .lg-calls li > .lg-logo { grid-row: span 2; }
    .lg-call-meta { grid-column: 2; grid-row: 2; }
    .lg-call-profit { grid-column: 3; grid-row: 1 / span 2; }
    .lg-calls li > .lg-link { display: none; }
    .tl-soon { flex-direction: column; gap: .6rem; padding: .9rem 1rem; }
    .tl-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "bot" "foot"; gap: 1.4rem; padding: 1.1rem 1rem 1rem; }
    .tl-board-title { font-size: 1.65rem; }
    .tl-result-line { gap: .6rem; padding: .7rem .75rem; }
    .tl-result-team { font-size: .875rem; }
    .tl-result-team .lg-logo { width: 1.4rem; height: 1.4rem; }
    .tl-result-score { font-size: 1.25rem; }
    .tl-tiles, .tl-top.has-champs .tl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tl-champs { padding: 1.1rem 1rem .6rem; }
    .tl-top.has-champs .tl-winners { grid-template-columns: minmax(0, 1fr); }
    .tl-top.has-champs .tl-winners li:nth-child(2) { border-top: 1px solid var(--lg-line-soft); }
    .tl-tiles dd { font-size: 1.4rem; }
    .tl-tiles dd.tl-wl { font-size: 1.05rem; }
    .tl-board-foot { flex-direction: column; align-items: flex-start; }
    .tl-logos .lg-logo { width: 1.75rem; height: 1.75rem; }
    .tl-archive-head { padding: 1rem 1rem .8rem; }
    .tl-year { padding: .9rem 1rem .3rem; }
    .tl-row.tl-row-head { display: none; }
    /* A row: the name and the bot's profit, then its dates and size, then its qualifiers. */
    .tl-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 0; padding: .8rem 1rem; }
    .tl-name { order: 0; flex: 1 1 0; }
    .tl-row::after { content: ''; order: 1; flex-basis: 100%; margin-top: -.35rem; }
    .tl-list { background: none; }
    .tl-bot { order: 1; grid-template-columns: 2.75rem auto; column-gap: .5rem; margin-left: .5rem; }
    .tl-bot small { display: none; }
    .tl-bar::before { content: ''; position: absolute; top: -.25rem; bottom: -.25rem; left: 50%; width: 1px; background: var(--lg-edge); }
    .tl-when, .tl-cell-tier, .tl-stat { order: 2; font-size: .8125rem; text-align: left; }
    .tl-cell-tier .tl-tier { height: 1.25rem; margin-left: .6rem; font-size: .6875rem; }
    .tl-unit { display: inline; }
    .tl-stat.is-teams { display: none; }
    .tl-stat::before { content: '·'; margin: 0 .45rem; color: #475569; }
    .tl-list .tl-events { order: 3; flex-basis: 100%; }
    .lg-recent-list li { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); gap: .5rem; font-size: .875rem; }
    .lg-recent-when, .lg-recent-list .lg-badge { display: none; }
    .lg-footer { flex-direction: column; }
    /* The chart's viewBox shrinks to half on a phone: its words grow back, every other day. */
    .lg-axis { font-size: 20px; }
    .lg-end-label { font-size: 21px; }
    .lg-axis.is-day[data-odd] { display: none; }
    .lg-table .is-secondary, .lg-table small { display: none; }
    /* A player's row: two of his three heroes, a long name broken where it must. */
    .lg-hero-row .lg-hero:nth-child(n+3) { display: none; }
    .lg-table .lg-team-cell { overflow-wrap: anywhere; }
    .lg-table.is-compact td, .lg-table.is-compact tbody th { padding: .5rem .4rem; white-space: normal; }
    .lg-table.is-compact thead th { padding: .5rem .4rem; font-size: .75rem; white-space: normal; }
    .lg-table.is-compact td.lg-num { white-space: nowrap; }
    .lg-dumbbell-head span:nth-child(2) { display: none; }
    .lg-calibration th.lg-dumbbell-head, .lg-calibration td.lg-dumbbell { min-width: 5.5rem; width: 38%; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-panel.is-entering { animation: none; }
    .lg-page * { transition-duration: 0s !important; }
}

/* Entrance, as on the dashboard: while the page is new (html.page-entering, cleared after it
   loads: league_base.html) its blocks rise in one after another, on a league page the head and
   then the open tab's blocks; the tab's own entrance (.lg-panel.is-entering) waits for later
   switches. */
.page-entering .lg-wrap > main > :not(.lg-panel),
.page-entering .lg-panel > * { animation: fadeSlideUp .5s cubic-bezier(.16, 1, .3, 1) both; }
.page-entering .lg-panel.is-entering { animation: none; }
.page-entering .lg-wrap > main > :nth-child(1) { animation-delay: 100ms; }
.page-entering .lg-wrap > main > :nth-child(2), .page-entering .lg-panel > :nth-child(1) { animation-delay: 200ms; }
.page-entering .lg-wrap > main > :nth-child(3), .page-entering .lg-panel > :nth-child(2) { animation-delay: 300ms; }
.page-entering .lg-wrap > main > :nth-child(4), .page-entering .lg-panel > :nth-child(3) { animation-delay: 400ms; }
.page-entering .lg-wrap > main > :nth-child(n+5), .page-entering .lg-panel > :nth-child(n+4) { animation-delay: 500ms; }
@media (prefers-reduced-motion: reduce) {
    .page-entering .lg-wrap > main > :not(.lg-panel),
    .page-entering .lg-panel > * { animation: none; }
}