/* Fonts: Barlow Condensed and Inter (SIL Open Font License), served from this site rather than
   Google Fonts: one fewer outside connection on a first visit and no visitor data sent to Google.
   Split by script; a browser only downloads the parts a page's text uses. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-condensed-500-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-condensed-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-condensed-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #0a0e14;
  --bg-2: #0f151e;
  --card: #121a25;
  --card-2: #172231;
  --line: #233042;
  --text: #e8edf3;
  --muted: #8b98a9;
  --gold: #c8aa6e;
  --gold-2: #f0e6d2;
  --blue: #3fa7ff;
  --red: #ff5a5f;
  --live: #ff3b47;
  --ok: #3ddc97;
  --radius: 12px;
  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(1200px 500px at 50% -200px, rgba(200, 170, 110, 0.12), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
button { font: inherit; color: inherit; }
a { color: var(--gold); }
[hidden] { display: none !important; }

/* Landscape iPhones: keep content clear of the notch (viewport-fit=cover). */
.wrap { max-width: 1480px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
@media (min-width: 1100px) { .wrap { padding: 0 max(28px, env(safe-area-inset-right)) 0 max(28px, env(safe-area-inset-left)); } }
.muted { color: var(--muted); }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Home-screen app on iPhone: keep content clear of the notch / home indicator. */
.top { padding-top: env(safe-area-inset-top); }
.foot { padding-bottom: max(30px, env(safe-area-inset-bottom)); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand-title { font: 700 22px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-2); }
.brand-sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { display: flex; align-items: center; gap: 8px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font: 600 13px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--card-2); border: 1px solid var(--line); color: var(--muted);
}
.pill.live { background: rgba(255, 59, 71, 0.15); border-color: rgba(255, 59, 71, 0.5); color: #ff8a92; }
.pill.live::before, .dot-live::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 6px rgba(255, 59, 71, 0.8);
  animation: pulse 1.6s ease-in-out infinite;
}
.pill.soon { background: rgba(200, 170, 110, 0.15); border-color: rgba(200, 170, 110, 0.5); color: var(--gold-2); }
/* The dot breathes in place (no expanding ring, so it never gets clipped by its container). */
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }
.pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  background: var(--gold); color: #111; border: 1px solid var(--gold);
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--gold); }
.btn[aria-pressed='true'] { border-color: var(--gold); color: var(--gold-2); }
.btn small { font-weight: 500; opacity: 0.65; font-size: 11px; }

/* Animations off (boot.js: the viewer's choice, or by default on phones, slow devices and with
   "reduce motion"): no pulsing dots, drifting art, transitions or smooth scrolling, and no blur. */
html[data-motion='off'] *, html[data-motion='off'] *::before, html[data-motion='off'] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion='off'] .top { backdrop-filter: none; background: rgba(10, 14, 20, 0.97); }
html[data-motion='off'] .dialog::backdrop { backdrop-filter: none; }
/* A page without boot.js (404) still follows the system setting. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) *, html:not([data-motion]) *::before, html:not([data-motion]) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Spoiler-free mode: hidden content is fully covered (blur left digits readable), and only a
   tap/click reveals it (no hover). The cover text depends on what's hidden. */
.no-spoilers .spoiler:not(.revealed) { position: relative; cursor: pointer; user-select: none; color: transparent !important; text-shadow: none !important; min-height: 1.2em; }
/* Screen readers: a standalone cover is a focusable button labelled "Hidden result" (set in
   setupSpoilers); a cover inside a button or link is hidden outright, so the control's name
   doesn't include the result. */
.no-spoilers button .spoiler:not(.revealed), .no-spoilers a .spoiler:not(.revealed) { visibility: hidden !important; }
.no-spoilers .spoiler:not(.revealed) * { visibility: hidden !important; }
.no-spoilers .spoiler:not(.revealed)::after {
  content: 'Hidden · tap to reveal';
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; text-align: center;
  visibility: visible; border-radius: 8px;
  background: repeating-linear-gradient(-45deg, #18212d 0 10px, #1c2635 10px 20px);
  border: 1px dashed #33435a;
  color: var(--muted); font: 600 12px/1.2 var(--display); letter-spacing: 0.1em; text-transform: uppercase;
}
.no-spoilers .score.spoiler:not(.revealed)::after,
.no-spoilers .big-score.spoiler:not(.revealed)::after { content: '? – ?'; font-size: 14px; letter-spacing: 0.2em; border-radius: 6px; }
.no-spoilers .big-score.spoiler:not(.revealed)::after { font-size: 26px; }
.no-spoilers .team-rec.spoiler:not(.revealed)::after { content: 'record hidden'; font-size: 11px; border: 0; }
.no-spoilers .tag.spoiler:not(.revealed)::after { content: '•••'; font-size: 11px; border: 0; }
.no-spoilers .game-no.spoiler:not(.revealed)::after { content: 'Game ?'; font-size: inherit; letter-spacing: 0; border: 0; text-transform: none; background: #1c2635; }
.no-spoilers .score.spoiler:not(.revealed) { display: inline-block; min-width: 54px; }
.no-spoilers .hero-game.spoiler:not(.revealed) { min-height: 28px; margin-top: 4px; }
/* A cover inside a cover is not drawn (its text spilled out of the hidden team boxes on phones),
   and a phone gets a shorter record cover than "record hidden". */
.no-spoilers .spoiler:not(.revealed) .spoiler:not(.revealed)::after { content: none; }
@media (max-width: 560px) { .no-spoilers .team-rec.spoiler:not(.revealed)::after { content: "•••"; letter-spacing: 0.1em; } }
/* Covers keep a fixed size, so their width/height doesn't hint at what's underneath
   (a longer status tag, more games in the strip, a second row of game tabs). */
.no-spoilers .game-tabs.spoiler:not(.revealed) { height: 34px; overflow: hidden; }
.no-spoilers .tag.spoiler:not(.revealed) { display: inline-block; flex: none; width: 76px; white-space: nowrap; overflow: hidden; vertical-align: middle; background: none; }
.no-spoilers .tag.spoiler:not(.revealed)::after { border-radius: inherit; }
.no-spoilers .series-strip.spoiler:not(.revealed) { width: 200px; height: 25px; overflow: hidden; }
/* Knockout slots filled by an earlier result, video clips, a series in a game log, Swiss stakes. */
.no-spoilers .mt.slot.spoiler:not(.revealed)::after, .no-spoilers .side.slot.spoiler:not(.revealed)::after { content: 'Team hidden'; font-size: 11px; }
.no-spoilers .side.slot.spoiler:not(.revealed) { min-height: 64px; }
.no-spoilers .vthumb.spoiler:not(.revealed)::after { content: 'Clip hidden · tap to reveal'; border-radius: 0; border: 0; }
.no-spoilers .vt.spoiler:not(.revealed)::after { content: 'Title hidden'; font-size: 11px; border: 0; justify-content: flex-start; padding-left: 12px; }
.no-spoilers .log-series.spoiler:not(.revealed) { height: 34px; overflow: hidden; }
.no-spoilers .log-series.spoiler:not(.revealed)::after { content: 'Series hidden · tap to reveal'; font-size: 11px; }
.no-spoilers .stakes.spoiler:not(.revealed) { min-width: 180px; }
.no-spoilers .stakes.spoiler:not(.revealed)::after { content: 'Stakes hidden'; font-size: 11px; border-radius: 999px; }
.log-series { font-size: 12px; line-height: 1.5; }
.vthumb { position: relative; }
.vod-row { align-items: center; }
.spoiler[role='button']:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.no-spoilers .winner, .no-spoilers .loser { color: inherit; opacity: 1; }
.no-spoilers .match .mt.winner, .no-spoilers .match .mt.loser { opacity: 1; }
.no-spoilers .mrow.win, .no-spoilers .mrow.lose { opacity: 1; font-weight: inherit; border-left-color: transparent; }
.btn.playing { background: rgba(255, 59, 71, 0.18); border-color: rgba(255, 59, 71, 0.6); color: #ffb3b8; }

.banner {
  margin: 16px 0 0; padding: 12px 16px; border-radius: var(--radius);
  background: rgba(255, 90, 95, 0.1); border: 1px solid rgba(255, 90, 95, 0.4);
}
.banner code { background: rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 4px; }
.banner.info { background: rgba(63, 167, 255, 0.08); border-color: rgba(63, 167, 255, 0.35); margin: 0 0 14px; }

/* ---------- hero ---------- */
.hero { margin: 20px 0 16px; }
.hero-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(135deg, var(--card-2), var(--card));
  padding: 20px;
}
.hero-card.is-live { border-color: rgba(255, 59, 71, 0.45); box-shadow: 0 0 0 1px rgba(255, 59, 71, 0.15), 0 20px 60px -30px rgba(255, 59, 71, 0.5); }
.hero-label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.hero-label .pill { font-size: 12px; }
.versus {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin: 18px 0 8px;
}
.side { display: flex; align-items: center; gap: 14px; min-width: 0; }
.side.right { flex-direction: row-reverse; text-align: right; }
.side img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.team-code { font: 700 34px/1 var(--display); letter-spacing: 0.02em; }
.team-name { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-rec { color: var(--muted); font-size: 12px; }
.center { text-align: center; }
.big-score { font: 700 56px/1 var(--display); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.big-score .dash { color: var(--muted); margin: 0 6px; }
.countdown { font: 700 44px/1 var(--display); letter-spacing: 0.04em; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.center .sub { color: var(--muted); font-size: 12px; margin-top: 6px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Phones: main stream full width, the rest in an even 2-column grid. */
@media (max-width: 520px) {
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions > :first-child { grid-column: 1 / -1; }
  .hero-actions > * { justify-content: center; text-align: center; min-width: 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
  .hero-actions > :not(:first-child) small { display: none; }
}
.series-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 2px auto 6px; width: fit-content; min-width: 140px; }
.ss-game { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12px; }
.ss-game i { font-style: normal; color: var(--muted); font: 600 11px/1 var(--display); letter-spacing: 0.06em; }
.ss-game b { font: 700 13px/1 var(--display); color: var(--gold-2); }
.ss-game.live { border-color: rgba(255, 59, 71, 0.5); color: #ff8a92; }
.no-spoilers .series-strip.spoiler:not(.revealed)::after { content: 'games hidden'; font-size: 11px; }
.hero-game { text-align: center; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; min-height: 1.4em; }
.hero-game:empty { display: none; }
#live-game { scroll-margin-top: 120px; }
.winner { color: var(--gold-2); }
.loser { opacity: 0.55; }
.match .mt.loser { opacity: 1; }
.match .mt.loser img, .match .mt.loser b { opacity: 0.55; }
.no-spoilers .match .mt.loser img, .no-spoilers .match .mt.loser b { opacity: 1; }

.stream-frame { margin-top: 14px; aspect-ratio: 16 / 9; width: 100%; min-height: 300px; border: 0; border-radius: 10px; background: #000; display: block; }
.stream-note { margin-top: 6px; font-size: 12px; color: var(--muted); text-align: right; }

@media (max-width: 640px) {
  .versus { grid-template-columns: minmax(0, 1fr) minmax(0, 46vw) minmax(0, 1fr); }
  .stakes { white-space: normal; font-size: 11px; }
  .side { flex-direction: column; gap: 6px; text-align: center; }
  .side.right { flex-direction: column; text-align: center; }
  .side img { width: 52px; height: 52px; }
  .team-code { font-size: 26px; }
  .team-name { display: none; }
  .big-score { font-size: 42px; }
  .countdown { font-size: 30px; }
}

/* ---------- cards / sections ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.section-title { font: 700 18px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin: 24px 0 10px; }

/* ---------- live game ---------- */
.live-game { margin-bottom: 16px; }
.lg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lg-title { font: 700 20px/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.clock { font: 700 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.clock.paused { color: var(--gold); }
.clock-wrap { text-align: right; }
.lag { color: var(--muted); font-size: 11px; margin-top: 2px; }

.teambar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 14px 0; }
.tb-side { display: flex; align-items: center; gap: 10px; }
.tb-side.red { flex-direction: row-reverse; }
.tb-side img { width: 36px; height: 36px; object-fit: contain; }
.tb-code { font: 700 24px/1 var(--display); }
.tb-side.blue .tb-code { color: var(--blue); }
.tb-side.red .tb-code { color: var(--red); }
.tb-kills { font: 700 36px/1 var(--display); font-variant-numeric: tabular-nums; text-align: center; }
.tb-kills .sep { color: var(--muted); font-size: 22px; margin: 0 8px; }

.statgrid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px 14px; align-items: center; font-variant-numeric: tabular-nums; }
.statgrid .l { text-align: right; }
.statgrid .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; }
.statgrid .v { font-weight: 600; }
.statgrid .lead { color: var(--gold-2); }
.drakes { display: inline-flex; gap: 3px; vertical-align: middle; }
.drake { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,0.2); }
.drake.ocean { background: #3fa7ff; } .drake.infernal { background: #ff6a3d; } .drake.mountain { background: #b08850; }
.drake.cloud { background: #b8e3ff; } .drake.hextech { background: #2ee6d6; } .drake.chemtech { background: #6fdc3a; }
.drake.elder { background: #e8d8ff; box-shadow: 0 0 6px #d6b9ff; }

.goldbar { position: relative; height: 8px; border-radius: 4px; overflow: hidden; background: var(--red); margin: 14px 0 4px; }
.goldbar > span { position: absolute; inset: 0 auto 0 0; background: var(--blue); transition: width 0.6s ease; }
.lg-extra { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; margin-top: 14px; align-items: start; }
@media (max-width: 860px) { .lg-extra { grid-template-columns: 1fr; } }
.goldwrap .tk, .moments .tk { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.goldline { width: 100%; height: 110px; display: block; background: var(--bg-2); border-radius: 8px; }
.goldline .zero { stroke: var(--line); stroke-width: 1; }
.goldline .tick { stroke: rgba(255, 255, 255, 0.04); }
.goldline .area.blue { fill: rgba(63, 167, 255, 0.28); }
.goldline .area.red { fill: rgba(255, 90, 95, 0.28); }
.goldline .line { fill: none; stroke: var(--gold-2); stroke-width: 1.5; }
.goldline .mk { stroke-width: 2; stroke-dasharray: 2 2; opacity: 0.9; stroke: var(--muted); }
.goldline .mk.baron { stroke: #a855f7; stroke-dasharray: none; stroke-width: 2.5; }
.goldline .mk.elder { stroke: #e8d8ff; stroke-dasharray: none; stroke-width: 2.5; }
.goldline .mk.inhibitor { stroke: var(--gold); }
.goldline .mk.ocean { stroke: #3fa7ff; } .goldline .mk.infernal { stroke: #ff6a3d; } .goldline .mk.mountain { stroke: #b08850; }
.goldline .mk.cloud { stroke: #b8e3ff; } .goldline .mk.hextech { stroke: #2ee6d6; } .goldline .mk.chemtech { stroke: #6fdc3a; }
.goldlabels { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-top: 4px; }
.goldlabels .blue { color: var(--blue); }
.goldlabels .red { color: var(--red); }
.moments { background: var(--bg-2); border-radius: 8px; padding: 10px 12px; max-height: 220px; overflow-y: auto; }
.moments ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ev { display: grid; grid-template-columns: 48px 14px 1fr; gap: 8px; align-items: center; font-size: 13px; }
.ev-t { color: var(--muted); font-size: 12px; }
.ev.blue b { color: var(--blue); }
.ev.red b { color: var(--red); }
.ev-icon { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); }
.ev-icon.baron { background: #a855f7; border-radius: 3px; }
.ev-icon.elder { background: #e8d8ff; }
.ev-icon.inhibitor { background: var(--gold); border-radius: 2px; transform: rotate(45deg); width: 10px; height: 10px; }
.ev-icon.firstTower { background: var(--gold-2); border-radius: 2px; }
.ev-icon.firstBlood { background: var(--red); }
.ev-icon.teamfight { background: transparent; border: 2px solid var(--gold-2); width: 10px; height: 10px; }
.ev-icon.ocean { background: #3fa7ff; } .ev-icon.infernal { background: #ff6a3d; } .ev-icon.mountain { background: #b08850; }
.ev-icon.cloud { background: #b8e3ff; } .ev-icon.hextech { background: #2ee6d6; } .ev-icon.chemtech { background: #6fdc3a; }

.timers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.timer { background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; min-width: 120px; }
.timer .tk { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.timer .tv { font: 700 22px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.timer.up .tv { color: var(--ok); }
.timer.blue { border-color: rgba(63, 167, 255, 0.5); }
.timer.red { border-color: rgba(255, 90, 95, 0.5); }

.boards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
@media (max-width: 960px) { .boards { grid-template-columns: 1fr; } }
.board { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; text-align: right; padding: 4px 6px; }
.board th:first-child { text-align: left; }
.board td { padding: 6px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.board td:first-child { text-align: left; }
.board.blue { --team: var(--blue); }
.board.red { --team: var(--red); }
.board caption { text-align: left; font: 700 16px/1 var(--display); letter-spacing: 0.05em; color: var(--team); padding-bottom: 6px; }
.pl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.champ { position: relative; width: 34px; height: 34px; flex: none; }
.champ img { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--team); }
a.champ { display: block; color: var(--text); }
a.champ:hover img, a.champ:focus-visible img { border-color: var(--gold-2); }
.champ .lvl { position: absolute; right: -4px; bottom: -4px; background: #000; border-radius: 4px; font-size: 10px; padding: 0 3px; line-height: 14px; }
.pl-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.pl-role { color: var(--muted); font-size: 11px; text-transform: capitalize; }
.hp { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; margin-top: 3px; width: 100%; }
.hp > span { display: block; height: 100%; background: var(--ok); border-radius: 2px; }
.hp.dead > span { background: var(--red); }
.items { display: flex; gap: 2px; justify-content: flex-end; }
.items img, .items .empty { width: 22px; height: 22px; border-radius: 4px; background: var(--bg-2); }
.board .hide-sm { }
@media (max-width: 640px) { .board .hide-sm { display: none; } .items img, .items .empty { width: 18px; height: 18px; } .pl-name { max-width: 84px; } }

/* ---------- today strip ---------- */
.today-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }

/* ---------- nav ---------- */
.nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav a { padding: 10px 12px 12px; color: var(--muted); text-decoration: none; font: 700 16px/1 var(--display); letter-spacing: 0.07em; text-transform: uppercase; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--text); }
.nav a[aria-current='page'] { color: var(--gold-2); border-bottom-color: var(--gold); }
.icon-btn { padding: 7px 10px; }
.brand { flex: 1 1 auto; }
.brand > div { min-width: 0; }
.brand-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { flex: 0 1 auto; min-width: 0; }
#status-pill { white-space: nowrap; min-width: 0; max-width: 100%; }
/* Icon-only header buttons until there is room for labels next to the title and status. */
@media (max-width: 980px) { .hide-xs { display: none; } }
@media (max-width: 520px) {
  .brand { gap: 8px; }
  .brand img { width: 32px; height: 32px; }
  .brand-title { font-size: 18px; }
  .top-right { gap: 6px; }
  #status-pill { max-width: 38vw; font-size: 11px; padding: 4px 9px; gap: 5px; }
  .icon-btn { padding: 6px 8px; }
}
@media (max-width: 400px) {
  #status-pill { display: none !important; }
  /* 360px phones: room for "Fan site · Quarterfinals" next to the three header buttons. */
  .top-inner { gap: 6px; }
  .nav a { padding: 10px 9px 12px; font-size: 15px; }
}

.page-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 22px 0 14px; }
.page-title { margin: 0; font: 700 34px/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--gold-2); }
.dialog.small { width: min(460px, calc(100vw - 24px)); }
.dialog.small .card-title { margin-right: 36px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.set-row[hidden] { display: none; }
.set-row b { display: block; font-size: 14px; }
.set-row span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.set-row select { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; max-width: 170px; }
.set-row .btn { flex: none; padding: 6px 12px; font-size: 13px; }
.set-row .btn[aria-pressed='true'] { border-color: var(--gold); color: var(--gold-2); }
.cal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cal-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
@media (max-width: 520px) { .cal-form { grid-template-columns: 1fr; } }
.cal-form .cal-check { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; color: var(--text); font-size: 13px; cursor: pointer; }
.cal-check input { margin-top: 2px; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.cal-check em { color: var(--muted); font-style: normal; }
.dialog.small { overflow-x: hidden; }
.cal-form select { width: 100%; min-width: 0; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; }
.cal-help { font-size: 12px; margin: 12px 0 0; line-height: 1.5; }
.cal-options { display: grid; gap: 8px; margin-top: 14px; }
.cal-options .btn { justify-content: center; }
.see-all { float: right; font: 500 13px/1.4 var(--body); letter-spacing: 0; text-transform: none; text-decoration: none; }

/* ---------- live page ---------- */
/* Today page: hero + today's matches side by side, then three columns, so it fits one screen. */
.top-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 18px; }
.top-grid .hero { margin: 0; }
.top-grid .panel .section-title { margin-top: 0; }
.top-grid:has(#today-wrap[hidden]) { grid-template-columns: 1fr; }
@media (max-width: 1000px) { .top-grid { grid-template-columns: 1fr; } }
.live-game { margin-top: 18px; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; align-items: start; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }
.with-day .day-mini { font-size: 11px; margin: 2px 0 4px 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.match .time { white-space: nowrap; }
.match-list.compact { gap: 6px; }
@media (min-width: 641px) {
  .compact .match { grid-template-columns: 74px minmax(0, 1fr) auto minmax(0, 1fr) 70px; padding: 8px 10px; gap: 8px; }
  .compact .mt span { display: none; }
  .compact .mt img { width: 24px; height: 24px; }
  .compact .score { font-size: 19px; min-width: 46px; }
}
/* Match popup: earlier Worlds meetings */
/* Scoreboard: lane matchups */
.matchups { margin: 14px 0 4px; }
.matchups > .tk { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.mu-row { display: grid; grid-template-columns: 1fr minmax(140px, 1.3fr) 1fr; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); }
.mu-side { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; }
.mu-side.r { justify-content: flex-end; text-align: right; }
.mu-side span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-side img { width: 26px; height: 26px; border-radius: 5px; flex: none; }
.mu-mid { text-align: center; }
.mu-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.mu-bar { position: relative; height: 5px; margin: 3px 0; border-radius: 3px; background: var(--bg-2); }
.mu-bar::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line); }
.mu-bar span { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.mu-bar .blue { right: 50%; background: var(--blue); }
.mu-bar .red { left: 50%; background: var(--red); }
.mu-txt { font-size: 11px; color: var(--muted); white-space: nowrap; }
.mu-txt .blue { color: var(--blue); }
.mu-txt .red { color: var(--red); }
@media (max-width: 520px) { .mu-side span { display: none; } .mu-row { grid-template-columns: 34px 1fr 34px; } }
.h2h { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.h2h .tk { margin-bottom: 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.h2h-row { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 6px 0; background: none; border: 0; border-top: 1px solid var(--line); color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.h2h-row:first-of-type { border-top: 0; }
.h2h-row:hover b { text-decoration: underline; }
.h2h-row b.win { color: var(--gold-2); }
.tbd-note { text-align: center; margin: 10px 0 0; font-size: 13px; }
.stakes { margin-top: 8px; display: inline-block; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.3 var(--display); letter-spacing: 0.06em; text-transform: uppercase; background: rgba(200, 170, 110, 0.14); color: var(--gold-2); }
.champion { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.champion img { width: 96px; height: 96px; object-fit: contain; }
.mini { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: left; display: grid; gap: 6px; }
.mini:hover { border-color: #3a4b62; }
.mini-head { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.mm-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; }
.mm-row img { width: 22px; height: 22px; object-fit: contain; }
.mm-row b { font: 700 16px/1 var(--display); }
.state.soon { color: var(--gold-2); }

/* ---------- tournament page ---------- */
.t-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin: 18px 0 12px; }
.t-head .page-title { font-size: 38px; }
.t-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.t-select { display: grid; gap: 4px; font-size: 12px; }
.t-select select { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; }
/* Each tab keeps its full width (they used to shrink and overlap on phones); the row scrolls. */
.subtabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.subtab { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; text-align: left; cursor: pointer; white-space: nowrap; font: 700 16px/1.1 var(--display); letter-spacing: 0.03em; min-width: 130px; flex: none; }
.subtab small { display: block; color: var(--muted); font: 500 11px/1.4 var(--body); text-transform: uppercase; letter-spacing: 0.08em; }
.subtab[aria-selected='true'] { border-color: var(--gold); background: var(--card-2); }
.subtab .check { color: var(--ok); font-size: 13px; }
.t-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.t-col { display: grid; gap: 16px; }
@media (max-width: 900px) { .t-grid { grid-template-columns: 1fr; } }
.card-title { margin: 0 0 10px; font: 700 22px/1.1 var(--display); letter-spacing: 0.02em; }
.card-sub { margin: 0 0 10px; font: 600 15px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.champ-card { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 14px; border-radius: 10px; background: linear-gradient(135deg, rgba(200,170,110,0.18), rgba(200,170,110,0.04)); border: 1px solid rgba(200,170,110,0.4); }
.champ-card img { width: 64px; height: 64px; object-fit: contain; }
.champ-card.pending { background: var(--card-2); border-color: var(--line); }
.trophy { font-size: 40px; width: 64px; text-align: center; }
.eyebrow { color: var(--gold); font: 600 12px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.champ-name { font: 700 26px/1.1 var(--display); margin: 4px 0; }
.phases { display: grid; gap: 10px; }
.phase { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; text-align: left; cursor: pointer; }
.phase:hover { border-color: var(--gold); }
.phase-head { display: flex; justify-content: space-between; gap: 10px; }
.phase-head b { font: 700 18px/1.1 var(--display); letter-spacing: 0.03em; }
.phase-head span { font-size: 12px; }
.phase p { margin: 6px 0 10px; color: var(--muted); }
.progress { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--gold); }
.regions { display: grid; gap: 10px; margin-top: 12px; }
.region { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); }
.region-name { font: 700 15px/1.1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.region-teams { display: flex; flex-wrap: wrap; gap: 14px; }
.qteam { display: flex; align-items: center; gap: 6px; font: 700 16px/1 var(--display); }
.qteam img { width: 28px; height: 28px; object-fit: contain; }
@media (max-width: 520px) { .region { grid-template-columns: 1fr; } }
.region-name { display: flex; align-items: center; gap: 8px; }
.region-name img { width: 26px; height: 26px; object-fit: contain; }

/* Swiss / bracket columns (mirrors the lolesports.com bracket view) */
.stage-desc { margin: 0 0 12px; }
.stage-desc .hint { color: #5d6b7c; font-size: 12px; margin-left: 6px; }
@media (hover: none) { .stage-desc .hint { display: none; } }

/* Columns share the width so every round fits on screen; scroll only below ~170px per column. */
.b-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px 10px; }
.b-cols { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(170px, 1fr)); gap: 16px; align-items: start; }
.b-cols.bracket .b-col { display: flex; flex-direction: column; justify-content: space-around; align-self: stretch; gap: 14px; }
.b-col { display: grid; gap: 14px; min-width: 0; }
.pool-head { display: flex; justify-content: space-between; align-items: center; background: var(--gold-2); color: #111; border-radius: 4px; padding: 6px 10px; font: 700 12px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.rec-squares { display: inline-flex; gap: 3px; }
.rec-squares i { width: 10px; height: 10px; border-radius: 1px; }
.rec-squares i.w { background: #2fd6a3; }
.rec-squares i.l { background: #ff6b57; }
.pool-body { display: grid; gap: 6px; margin-top: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,0.015); }
.mcard { background: var(--card); border-radius: 4px; overflow: hidden; cursor: pointer; border: 1px solid transparent; container-type: inline-size; }
.mcard:hover { border-color: #3a4b62; }
.mcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mcard.live { border-color: rgba(255, 59, 71, 0.6); }
.mrow { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 10px 5px 8px; border-left: 3px solid transparent; font-size: 13.5px; transition: background 0.15s, opacity 0.15s; }
.mrow + .mrow { border-top: 1px solid var(--line); }
.mrow img { width: 20px; height: 20px; object-fit: contain; }
.mrow .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow .nm .code { display: none; }
@container (max-width: 190px) { .mrow .nm .full { display: none; } .mrow .nm .code { display: inline; } }
.mrow .sc { font: 700 15px/1 var(--display); font-variant-numeric: tabular-nums; min-width: 10px; text-align: right; }
.mrow.win { border-left-color: var(--gold); font-weight: 700; }
.mrow.lose { opacity: 0.6; }
.mfoot { padding: 4px 10px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }

/* Knockout bracket connectors. Pairs share the column height evenly (space-around, no gaps),
   so a pair's card centres sit at 25%/75% and line up with the next round's card centre. */
.b-cols.ko { gap: 20px; min-height: 420px; }
.b-cols.bp-bracket { min-height: 520px; }
.ko-col { display: flex; flex-direction: column; align-self: stretch; }
.ko-body { flex: 1; display: flex; flex-direction: column; margin-top: 8px; }
.ko .pair { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: space-around; padding: 4px 0; }
.ko .slot { position: relative; }
.ko .has-next .slot::after { content: ''; position: absolute; top: 50%; right: -10px; width: 10px; border-top: 2px solid #33435a; }
.ko .has-prev .slot::before { content: ''; position: absolute; top: 50%; left: -10px; width: 10px; border-top: 2px solid #33435a; }
.ko .has-next .pair.two::after { content: ''; position: absolute; right: -10px; top: 25%; bottom: 25%; border-right: 2px solid #33435a; }
.ko .mcard { margin: 0; }

/* Team path highlight */
.hl-mode .mrow, .hl-mode .sum-team { opacity: 0.28; }
.hl-mode .mrow.hl, .hl-mode .sum-team.hl { opacity: 1; background: rgba(200, 170, 110, 0.14); }

/* Swiss summary: advanced / alive / eliminated */
.swiss-summary { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 10px 26px; margin-bottom: 16px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
@media (max-width: 900px) { .swiss-summary { grid-template-columns: 1fr; } }
.sum-label { font: 700 12px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 7px; }
.sum-label span { opacity: 0.7; }
.sum-group.ok .sum-label { color: #2fd6a3; }
.sum-group.alive .sum-label { color: var(--gold-2); }
.sum-group.out .sum-label { color: #ff6b57; }
.sum-teams { display: flex; flex-wrap: wrap; gap: 6px; }
.sum-team { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 5px; border-radius: 6px; background: var(--card-2); font-size: 12px; cursor: default; transition: opacity 0.15s, background 0.15s; }
.sum-team img { width: 18px; height: 18px; object-fit: contain; }
.sum-team b { font: 700 14px/1 var(--display); }
.sum-team i { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.sum-group.out .sum-team img, .sum-group.out .sum-team b { opacity: 0.6; }
.mfoot.live { color: #ff8a92; }
.swiss-table { margin-top: 22px; max-width: 560px; }
.rank-table tr.eliminated { opacity: 0.5; }
.rank-table .st { text-align: right; width: 1%; white-space: nowrap; }
.tag { font: 600 11px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; }
.tag.ok { background: rgba(47, 214, 163, 0.15); color: #2fd6a3; }
.tag.out { background: rgba(255, 107, 87, 0.12); color: #ff6b57; }

.match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.bmatch.live { border-color: rgba(255, 59, 71, 0.5); }
.bmatch .loser { opacity: 0.55; }

.chips.inline { margin: 0; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; color: var(--muted); }
/* Line icons (common.js ICON) */
.ico { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.sp-icon { display: inline-flex; }
.t-meta > span { display: inline-flex; align-items: center; gap: 6px; }
a.chip > .ico { margin-right: 2px; }
.chip[aria-pressed='true'] { color: var(--gold-2); border-color: var(--gold); }
.chip-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

/* ---------- schedule ---------- */
.day { margin-bottom: 18px; }
.day-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; position: sticky; top: var(--header-h, 100px); z-index: 5; background: var(--bg); padding: 8px 0; }
.day { scroll-margin-top: calc(var(--header-h, 100px) + 8px); }
.day-head h2 { margin: 0; font: 700 18px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.day-head .muted { font-size: 12px; }
.match-list { display: grid; gap: 8px; }
.match {
  display: grid; grid-template-columns: 88px 1fr auto 1fr 96px; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; text-align: left; width: 100%;
}
.match:hover { border-color: #3a4b62; }
.match.live { border-color: rgba(255, 59, 71, 0.5); }
.match .time { font-variant-numeric: tabular-nums; }
.match .time small { display: block; color: var(--muted); font-size: 11px; }
.mt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mt.r { flex-direction: row-reverse; text-align: right; }
.mt img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.mt b { font: 700 18px/1 var(--display); letter-spacing: 0.03em; }
.mt span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score { font: 700 22px/1 var(--display); min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
.score .vs { color: var(--muted); font-size: 15px; }
.state { justify-self: end; font: 600 12px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.state.live { color: #ff8a92; }
.dot-live { display: inline-flex; }
@media (max-width: 640px) {
  .match { grid-template-columns: 1fr auto 1fr; grid-template-areas: 'time time state' 'a s b'; row-gap: 8px; }
  .match .time { grid-area: time; display: flex; gap: 8px; align-items: baseline; }
  .match .state { grid-area: state; }
  .mt span { display: none; }
}

/* ---------- standings ---------- */
.stage { margin-bottom: 28px; }
.stage h3 { font: 700 20px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.rank-table { width: 100%; border-collapse: collapse; }
.rank-table td { padding: 7px 6px; border-top: 1px solid var(--line); }
.rank-table tr:first-child td { border-top: 0; }
.rank-table .ord { color: var(--muted); width: 28px; font-variant-numeric: tabular-nums; }
.rank-table .rec { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.rank-team { display: flex; align-items: center; gap: 8px; }
.rank-team img { width: 24px; height: 24px; object-fit: contain; }
.bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.round h4 { margin: 0 0 8px; font: 600 14px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.round .bm { display: grid; gap: 10px; }
.bmatch { background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; }
.bmatch .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; }
.bmatch .row + .row { border-top: 1px solid var(--line); }
.bmatch .row div { display: flex; align-items: center; gap: 8px; }
.bmatch img { width: 20px; height: 20px; object-fit: contain; }
.bmatch .w { font-weight: 700; color: var(--gold-2); }

/* ---------- videos ---------- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.vcard { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; text-align: left; padding: 0; }
.vcard:hover { border-color: var(--gold); }
.vcard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
@media (max-width: 640px) {
  .video-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vcard .vt { font-size: 13px; padding: 8px 8px 2px; }
  .vcard .vm { padding: 0 8px 8px; font-size: 11px; }
}
.vcard .vt { padding: 10px 12px 4px; font-weight: 600; line-height: 1.3; }
.vcard .vm { padding: 0 12px 10px; color: var(--muted); font-size: 12px; }

/* ---------- dialogs ---------- */
/* Popups: sized to the visible viewport (dvh: iOS toolbars), never wider than the safe area,
   and scrolling inside them doesn't scroll the page behind. */
html:has(dialog[open]) { overflow: hidden; }
.dialog { width: min(1100px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overscroll-behavior: contain; background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.dialog::backdrop { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(3px); }
/* A closed dialog never shows, whatever other classes it carries (a class shared with page
   styles once left an empty team box under the footer). */
dialog:not([open]) { display: none !important; }
/* The 16:9 player also fits the height (landscape phones): its controls never get cut off. */
.dialog.video { padding: 0; background: #000; width: min(1100px, calc(100vw - 24px), calc((100vh - 34px) * 16 / 9)); width: min(1100px, calc(100vw - 24px), calc((100dvh - 34px) * 16 / 9)); }
.video-frame iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
/* Shorts are vertical: a phone-shaped player that fits the screen height. */
.dialog.video.short { width: min(420px, calc(100vw - 24px), calc((100vh - 60px) * 9 / 16)); width: min(420px, calc(100vw - 24px), calc((100dvh - 60px) * 9 / 16)); }
.dialog.video.short .video-frame iframe { aspect-ratio: 9 / 16; }
.vcard { position: relative; }
#plays > .banner, #plays > .empty-state { grid-column: 1 / -1; }
.v-short { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, 0.75); color: #fff; font: 700 11px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; }
.dialog-close { position: absolute; right: 10px; top: 10px; z-index: 2; background: rgba(0,0,0,0.6); border: 1px solid var(--line); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; }
/* Scrolling popups: the close button stays in view and doesn't cover the first line. It's solid,
   so text scrolling under it (the game clock) hides cleanly instead of showing through. */
.dialog:not(.video) > .dialog-close { position: sticky; top: 0; float: right; margin: 0 0 6px 8px; background: var(--bg-2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.game-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.game-tabs:empty { display: none; }
.game-tabs .chip.won-blue { box-shadow: inset 3px 0 0 var(--blue); }

#updated.warn { color: var(--gold); }
/* Clickable team (opens the team quick view) */
[data-team-open] { cursor: pointer; }
.side[data-team-open]:hover .team-code, .qteam[data-team-open]:hover, .sum-team[data-team-open]:hover b { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }

/* Form dots: last results, oldest → newest */
.form { display: inline-flex; gap: 3px; vertical-align: middle; }
.form i { width: 9px; height: 9px; border-radius: 2px; }
.form i.w { background: #2fd6a3; }
.form i.l { background: #ff6b57; }

/* Team quick view */
.dialog.team { width: min(640px, calc(100vw - 24px)); }
.team-head { display: flex; align-items: center; gap: 16px; margin-right: 40px; }
.team-head .team-logo { width: 72px; height: 72px; object-fit: contain; }
.team-league { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--muted); font: 600 13px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.team-league img { width: 18px; height: 18px; object-fit: contain; }
.team-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
.tstat { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; display: grid; gap: 4px; min-width: 84px; }
.tstat b { font: 700 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.tstat span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.dialog.team .card-sub { margin: 16px 0 8px; }

/* Teams page */
.teams-layout { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .teams-layout { grid-template-columns: 1fr; } }
.team-detail { position: sticky; top: calc(var(--header-h, 100px) + 12px); max-height: calc(100vh - var(--header-h, 100px) - 24px); overflow-y: auto; scroll-margin-top: calc(var(--header-h, 100px) + 8px); }
@media (max-width: 1000px) { .team-detail { position: static; max-height: none; overflow: visible; } }
.back-to-list { display: none; margin-bottom: 12px; padding: 6px 12px; font-size: 13px; }
@media (max-width: 1000px) { .back-to-list { display: inline-flex; } }
.league-group { margin-bottom: 16px; }
.league-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 16px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.league-head img { width: 22px; height: 22px; object-fit: contain; }
.team-cards { display: grid; gap: 6px; }
.team-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; text-align: left; width: 100%; }
.team-card:hover { border-color: #3a4b62; }
.team-card.selected { border-color: var(--gold); background: var(--card-2); }
.team-card img { width: 34px; height: 34px; object-fit: contain; }
.tc-main { display: grid; min-width: 0; }
.tc-main b { font: 700 18px/1.1 var(--display); letter-spacing: 0.03em; }
.tc-name { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-meta { display: flex; align-items: center; gap: 8px; }
.tc-rank { color: var(--muted); font: 600 13px/1 var(--display); }
.tag.alive { background: rgba(200, 170, 110, 0.14); color: var(--gold-2); }
.tag.champ { background: linear-gradient(90deg, #c8aa6e, #f0e6d2); color: #111; }
.td-head { display: flex; align-items: center; gap: 16px; }
.td-logo { width: 80px; height: 80px; object-fit: contain; flex: none; }
.td-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; color: var(--muted); font: 600 13px/1.2 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.td-sub img { width: 18px; height: 18px; object-fit: contain; }
.team-detail .card-sub { margin: 18px 0 10px; }
.small { font-size: 12px; }
.players { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.player { display: grid; grid-template-columns: 96px minmax(0, 1fr); background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pl-photo { position: relative; background: radial-gradient(circle at 50% 30%, #243145, #111821); min-height: 150px; }
.pl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 1; }
.pl-initial { position: absolute; inset: 0; display: grid; place-items: center; font: 700 40px/1 var(--display); color: #3a4b62; }
.pl-body { padding: 10px 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.pl-role { font: 700 11px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.pl-ign { font: 700 24px/1 var(--display); letter-spacing: 0.02em; }
.pl-real { color: var(--muted); font-size: 12px; }
.pl-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-stats b { color: var(--text); font-size: 12px; }
.no-spoilers .pl-wl.spoiler:not(.revealed) { display: inline-block; min-width: 54px; }
.no-spoilers .pl-wl.spoiler:not(.revealed)::after { content: 'W–L ?'; font-size: 11px; border: 0; }
.no-spoilers .pl-games.spoiler:not(.revealed) { display: inline-block; min-width: 64px; }
.no-spoilers .pl-games.spoiler:not(.revealed)::after { content: 'Games ?'; font-size: 11px; border: 0; }
/* Stats: tappable player rows and the player game-log dialog */
.st-table tr.clickable { cursor: pointer; }
.st-table tr.clickable:hover td, .st-table tr.clickable:focus-visible td { background: rgba(200, 170, 110, 0.06); }
.pl-head { display: flex; align-items: center; gap: 12px; margin: 4px 36px 14px 0; }
.pl-head > img { width: 44px; height: 44px; object-fit: contain; }
.pl-head > div { flex: 1; min-width: 0; }
.pl-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.pl-sum > div { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.pl-sum b { display: block; font: 700 18px/1.2 var(--display); }
.pl-sum span { color: var(--muted); font-size: 11px; }
@media (max-width: 520px) { .pl-sum { grid-template-columns: 1fr 1fr; } .pl-head .btn { padding: 6px 10px; } }
.pl-pool { margin-bottom: 12px; }
.pl-log { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; font-weight: 600; cursor: pointer; }
.pl-log:hover { text-decoration: underline; }
.pl-when { white-space: nowrap; }
.res { display: inline-block; min-width: 22px; text-align: center; border-radius: 4px; font-weight: 700; font-size: 12px; padding: 2px 4px; }
.res.w { background: rgba(70, 200, 140, 0.18); color: #6fdcaa; }
.res.l { background: rgba(240, 90, 90, 0.16); color: #f08a8a; }
.pl-champs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pl-champ { position: relative; width: 28px; height: 28px; border-radius: 6px; overflow: hidden; background: var(--bg-2); }
.pl-champ img { width: 100%; height: 100%; }
.pl-champ i { position: absolute; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); font: 600 10px/1 var(--body); font-style: normal; padding: 1px 2px; border-radius: 3px 0 0 0; }
.pl-links { display: flex; gap: 10px; margin-top: 6px; font-size: 11px; }
.pl-links a { color: var(--muted); text-decoration: none; }
.pl-links a:hover { color: var(--gold-2); }

/* Stats page */
.stats-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .stats-grid { grid-template-columns: 1fr; } }
.st-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.st-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px; }
.st-table td { padding: 6px; border-top: 1px solid var(--line); }
.st-table .num { text-align: right; white-space: nowrap; }
@media (max-width: 640px) { .st-table .hide-sm { display: none; } .st-table td, .st-table th { padding: 6px 4px; } }
.st-table .rk { color: var(--muted); width: 24px; }
.st-table .sorted b { color: var(--gold-2); }
.st-champ, .st-player { display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-champ img { width: 28px; height: 28px; border-radius: 6px; }
.st-player img { width: 24px; height: 24px; object-fit: contain; }
.st-champ b, .st-player b { display: block; font-size: 13px; }
.st-champ span, .st-player span { display: block; color: var(--muted); font-size: 11px; }
.st-table .wr { display: flex; align-items: center; gap: 6px; min-width: 90px; }
.wr-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.wr-bar i { display: block; height: 100%; }
.wr-bar.pos i { background: #2fd6a3; }
.wr-bar.neg i { background: #ff6b57; }
.st-table .wr span { width: 34px; text-align: right; }
.more { margin-top: 10px; }
.banner.info .btn { margin-left: 8px; padding: 4px 10px; font-size: 12px; }

/* Odds / win-chance bar */
.odds { display: grid; grid-template-columns: auto auto minmax(80px, 1fr) auto; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.odds-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.odds .oa, .odds .ob-r { font-weight: 600; white-space: nowrap; }
.odds .fav { color: var(--gold-2); }
.odds .ob { height: 6px; border-radius: 3px; background: var(--red); overflow: hidden; }
.odds .ob i { display: block; height: 100%; background: var(--blue); transition: width 0.6s ease; }
.odds.neutral .ob { background: #3a4656; }
.odds.neutral .ob i { background: var(--gold); }
.team-rank { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--muted); }
.team-rank b { color: var(--gold-2); font-family: var(--display); font-size: 15px; }

/* Pick'em */
.mt.picked b::after { content: '★'; color: var(--gold); font-size: 11px; margin-left: 4px; vertical-align: top; }
.mt.r.picked b::after { margin-left: 0; margin-right: 4px; }
.mt.r.picked b { display: inline-flex; flex-direction: row-reverse; }
.pickem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; }
.pickem .tk { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.pickem .chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.mrow-star { font-style: normal; color: var(--gold); font-size: 11px; margin-right: 4px; }
/* Bracket pick'em (Tournament > Knockouts > My bracket) */
.bp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; }
.bp-seg { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.bp-seg button { background: none; border: 0; border-radius: 999px; padding: 6px 14px; color: var(--muted); font: 600 13px/1 var(--body); cursor: pointer; }
.bp-seg button:hover { color: var(--text); }
.bp-seg button[aria-pressed='true'] { background: var(--gold); color: #111; }
.bp-status { font-size: 13px; }
.bp-status b { color: var(--gold-2); font-size: 15px; }
.bp-share { margin-left: auto; }
.link-btn { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bp-bracket .ko-body { margin-top: 8px; }
.bp-match { background: var(--card); border: 1px solid transparent; border-radius: 4px; overflow: hidden; container-type: inline-size; }
.bp-match.todo { border-color: rgba(200, 170, 110, 0.45); }
.bp-match.live { border-color: rgba(255, 59, 71, 0.6); }
.bp-meta { display: flex; justify-content: space-between; gap: 8px; width: 100%; background: var(--bg-2); border: 0; padding: 4px 10px; color: var(--muted); font: 600 11px/1.3 var(--body); letter-spacing: 0.04em; cursor: pointer; text-align: left; }
.bp-meta b { color: var(--gold); font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.bp-meta:hover span { color: var(--text); }
.bp-live { color: var(--live); display: inline-flex; align-items: center; gap: 5px; }
.bp-team { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 5px 10px 5px 8px; background: none; border: 0; border-left: 3px solid transparent; border-top: 1px solid var(--line); color: var(--text); font: 14px/1.2 var(--body); text-align: left; }
.bp-team img, .bp-team > span:first-child { width: 20px; height: 20px; object-fit: contain; }
.bp-team .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-team .nm .code { display: none; }
@container (max-width: 190px) { .bp-team .nm .full { display: none; } .bp-team .nm .code { display: inline; } }
.bp-end { display: inline-flex; align-items: center; gap: 8px; }
.bp-team .sc { font: 700 15px/1 var(--display); font-variant-numeric: tabular-nums; }
button.bp-team { cursor: pointer; transition: background 0.12s; }
button.bp-team:hover { background: rgba(200, 170, 110, 0.1); }
button.bp-team:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.bp-team.guess .nm { font-style: italic; }
.bp-team.mine { border-left-color: var(--gold); background: rgba(200, 170, 110, 0.16); color: var(--gold-2); font-weight: 700; }
.bp-team.mine .nm { font-style: normal; }
.bp-team.lost:not(.mine), .bp-team.empty { opacity: 0.55; }
.bp-team.empty { color: var(--muted); font-size: 12px; }
.bp-team.out .nm { text-decoration: line-through; }
.bp-mk { font-style: normal; font-weight: 700; }
.bp-mk.right { color: var(--ok); }
.bp-mk.wrong { color: var(--red); }
.bp-note { border-top: 1px solid var(--line); padding: 4px 10px; font-size: 12px; color: var(--muted); }
.bp-champ { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; text-align: center; background: linear-gradient(180deg, rgba(200, 170, 110, 0.14), var(--card)); border: 1px solid rgba(200, 170, 110, 0.4); border-radius: 8px; }
.bp-champ b { font: 700 26px/1 var(--display); color: var(--gold-2); letter-spacing: 0.04em; }
.bp-champ .bp-champ-logo { width: 56px; height: 56px; object-fit: contain; margin: 4px 0; }
.bp-champ.wrong { border-color: rgba(255, 90, 95, 0.5); background: var(--card); }
.bp-champ.wrong b { text-decoration: line-through; color: var(--muted); }
.bp-champ.right { border-color: var(--ok); }
.bp-trophy { font-size: 26px; line-height: 1; }
.bp-res { font: 700 12px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.bp-res.right { color: var(--ok); }
.bp-res.wrong { color: var(--red); }
.bp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bp-cta .muted { flex: 1 1 200px; }
.bp-cta-champ { display: inline-flex; align-items: center; gap: 10px; }
.bp-cta-champ img { width: 34px; height: 34px; object-fit: contain; }
.bp-cta-champ span { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.bp-cta-champ b { font: 700 20px/1 var(--display); color: var(--gold-2); letter-spacing: 0.04em; }
.bp-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; padding: 10px 14px; border: 1px solid rgba(200, 170, 110, 0.45); border-radius: 10px; background: rgba(200, 170, 110, 0.08); color: var(--text); text-decoration: none; font-size: 13px; }
.bp-nudge[hidden] { display: none; }
.bp-nudge b { color: var(--gold-2); font: 700 15px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.bp-nudge span { color: var(--muted); }
.bp-nudge i { margin-left: auto; font-style: normal; font-weight: 600; color: var(--gold); }
.bp-nudge:hover { border-color: var(--gold); }
@media (max-width: 600px) { .bp-share { margin-left: 0; } .bp-status { flex-basis: 100%; order: 3; } }
.pickem .chip img { width: 18px; height: 18px; object-fit: contain; }
.pickem .chip[aria-pressed='true']::before { content: '★'; color: var(--gold); }
.pickem b { color: var(--gold-2); }

.pk-score { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 6px; }
.pk-score b { font: 700 40px/1 var(--display); color: var(--gold-2); }
.pk-score span { color: var(--muted); }

/* Match popup preview row */
.preview { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 4px 0 6px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.preview .pv-side { display: grid; gap: 4px; }
.preview .pv-side:last-child { justify-items: end; text-align: right; }
.preview .pv-wl { white-space: nowrap; }
.preview .pv-mid { text-align: center; }
.preview .tk { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; padding-top: 30px; padding-bottom: max(30px, env(safe-area-inset-bottom)); }
.not-found { min-height: 80vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 8px; }
.empty-state { padding: 24px; text-align: center; color: var(--muted); }

/* Touch screens: 16px selects (iOS zooms into smaller ones) and 40px+ tap targets. */
@media (pointer: coarse) {
  .set-row select, .cal-form select, .t-select select { font-size: 16px; }
  .set-row select { max-width: 210px; }
  .icon-btn { min-width: 40px; min-height: 40px; justify-content: center; }
  .dialog-close { width: 40px; height: 40px; }
  .chip { padding-top: 9px; padding-bottom: 9px; }
  .pl-log, .pl-links a { padding: 8px 2px; }
}
/* A live match shows on the Today tab too (the header pill is hidden on small phones). */
.nav a.is-live::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; vertical-align: middle; border-radius: 50%; background: #ff3b47; box-shadow: 0 0 6px rgba(255, 59, 71, 0.8); }
/* Phones: fade the nav's edge while more tabs sit off-screen. */
.nav.more { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }

/* Start screen (/): three slanted doors, like a game's mode select. Hover or focus widens a door;
   on phones they stack, Worlds first. */
.hub-page { margin: 0; background: #06090d; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.hub { display: flex; flex: 1; min-height: 0; background: #06090d; }
.door { position: relative; flex: 1; display: flex; align-items: flex-end; min-width: 0; overflow: hidden; color: var(--text); text-decoration: none; transition: flex 0.45s ease; }
.door.mid { flex: 1.6; }
.door:focus-visible { outline: none; }
/* Hover or keyboard focus widens a door (desktop only: on phones they're stacked). */
@media (min-width: 761px) {
  .door.left:hover, .door.left:focus-visible, .door.right:hover, .door.right:focus-visible { flex: 1.5; }
  .door.mid:hover, .door.mid:focus-visible { flex: 2.2; }
}
.door.left:hover .sp-go, .door.left:focus-visible .sp-go { background: var(--gold); color: #111; }
.door.left { clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); margin-right: -3.5%; }
.door.mid { clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); margin: 0 -3.5%; z-index: 1; }
.door.right { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); margin-left: -3.5%; }
.door-bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; transition: transform 0.6s ease; }
/* Worlds 2026 key art, cropped above its bottom text band by Riot's image CDN (rect=), full width
   and WebP so it stays sharp on high-density screens. index.html preloads the same URL. */
.door.mid .door-bg {
  background-image: linear-gradient(180deg, rgba(6, 9, 13, 0.05) 0%, rgba(6, 9, 13, 0.5) 55%, rgba(6, 9, 13, 0.95) 100%), url('/art/worlds-2026-keyart.webp');
  background-size: cover, cover; background-position: center, 58% 0%; background-repeat: no-repeat;
}
.door.mid:hover .door-bg, .door.mid:focus-visible .door-bg { transform: scale(1.04); }
/* Live game door: a match's loading screen, five champions a side. */
.door.left .door-bg { background: radial-gradient(130% 70% at 20% 0%, #14294a 0%, #0b1220 55%, #06090d 100%); }
.lineup { position: absolute; top: 11vh; left: 5%; width: min(84%, 46vh); display: flex; flex-direction: column; gap: 12px; }
.lineup-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
/* The door's right edge slants in towards the bottom; the lower row follows it. */
.lineup-row.red { margin: 0 6% 0 -3%; }
.lineup-row img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; object-position: center 15%; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); border-bottom: 3px solid; opacity: 0; filter: saturate(0.85) brightness(0.85); transition: opacity 0.5s ease, filter 0.4s ease; }
.lineup-row.blue img { border-color: #3d8bff; }
.lineup-row.red img { border-color: #e84057; }
.lineup-row img.in { opacity: 1; }
.door.left:hover .lineup-row img { filter: none; }
.lineup-vs { display: flex; align-items: center; gap: 12px; font: 700 20px/1 var(--display); letter-spacing: 0.2em; color: var(--gold); }
.lineup-vs::before, .lineup-vs::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(200, 170, 110, 0.6), transparent); }
/* Champions door: a slow, tilted wall of champion art (still when animations are off). */
.door.right .door-bg { background: #0b0f16; }
.wall { position: absolute; inset: -15% -20%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; transform: rotate(-8deg); opacity: 0.6; transition: opacity 0.4s ease; }
.wall-col { animation: wall-up 90s linear infinite; }
.wall-col:nth-child(2) { animation-name: wall-down; }
/* Spacing as margin, not gap, so half a column is exactly six tiles and the loop is seamless. */
.wall-col img { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 8px; object-fit: cover; border-radius: 6px; opacity: 0; transition: opacity 0.6s ease; }
.wall-col img.in { opacity: 1; }
@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.door.right .door-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 9, 13, 0.15) 0%, rgba(6, 9, 13, 0.55) 50%, rgba(6, 9, 13, 0.96) 100%); }
.door.right:hover .wall { opacity: 0.85; }
/* Live game door: what the search will look like (not usable until the API key is in). */
.search-preview { display: flex; align-items: center; gap: 6px; max-width: 340px; padding: 6px; border: 1px solid #33445a; border-radius: 10px; background: rgba(8, 12, 18, 0.8); }
.sp-field { flex: 1; min-width: 0; padding: 6px 8px; color: #7d8898; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-region, .sp-go { padding: 6px 10px; border-radius: 7px; font: 600 12px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.sp-region { border: 1px solid #33445a; color: #9aa5b4; }
.sp-go { background: #2b3a4e; color: #c4ccd6; }
.door-body { position: relative; padding: 0 16% 10vh; }
/* The left door's slanted edge cuts in at the bottom: keep its text clear of it. */
.door.left .door-body { padding-left: 12%; padding-right: 20%; }
.door .k { display: block; font: 600 13px/1.3 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.door .k.live { color: #ff8a92; }
.door h2 { margin: 6px 0 10px; font: 700 clamp(34px, 4.6vw, 72px)/0.95 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: #fff; }
.door p { margin: 0 0 18px; max-width: 30ch; color: #cfc6b3; font-size: 15px; line-height: 1.5; }
.door .go { display: inline-block; padding: 9px 18px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-2); font: 600 14px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.door:hover .go, .door:focus-visible .go { background: var(--gold); color: #111; }
.door:focus-visible { box-shadow: inset 0 0 0 3px var(--gold); }
@media (max-width: 760px) {
  .hub { flex-direction: column; }
  .door, .door.left, .door.mid, .door.right { clip-path: none; margin: 0; flex: 0 0 auto; }
  .door { min-height: 18vh; border-top: 1px solid var(--line); }
  .door.mid { order: -1; min-height: 60vh; border-top: 0; }
  .door-body, .door.left .door-body { padding: 24px max(20px, env(safe-area-inset-left)) 28px; }
  .door.left h2, .door.right h2 { font-size: 30px; }
  /* The loading screen sits above the Live game text instead of behind it. */
  .lineup { top: 20px; left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); width: auto; }
  .lineup-row.red { margin: 0; }
  .lineup-row img { aspect-ratio: auto; height: 84px; }
  .door.left .door-body { padding-top: 248px; }
  .door.right .door-body { padding-top: 110px; }
}
/* Riot's required notices: API policy boilerplate and Legal Jibber Jabber (site footer and start screen). */
.foot .legal { flex-basis: 100%; margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: #7a8595; }
.foot .legal + .legal { margin-top: 0; }
.hub-foot p + p { margin-top: 4px; }
.foot .legal strong, .hub-foot strong { color: #aab3c0; font-weight: 600; }
.foot .legal a, .hub-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot .legal a:hover, .hub-foot a:hover { color: var(--gold); }
/* The Animations switch in every footer (boot.js handles the click). */
.foot-tools { flex-basis: 100%; margin: 4px 0 0; }
.hub-foot .foot-tools { margin: 0 auto 8px; }
.motion-btn { display: inline-block; min-height: 32px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.motion-btn:hover { border-color: var(--gold); color: var(--text); }
html[data-motion='off'] .mo-on, html:not([data-motion='off']) .mo-off { display: none; }
.hub-foot { padding: 10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: #06090d; }
.hub-foot p { margin: 0 auto; max-width: 1100px; font-size: 11px; line-height: 1.5; color: #7a8595; text-align: center; }
/* One-time hint under the spoiler button (first visit with spoiler-free on). */
.sf-hint { position: absolute; z-index: 50; width: min(300px, calc(100vw - 16px)); padding: 12px 14px; border: 1px solid var(--gold); border-radius: 12px; background: #121a24; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); font-size: 13px; line-height: 1.45; animation: sf-in 0.25s ease; }
.sf-hint::before { content: ''; position: absolute; top: -7px; left: calc(var(--arrow, 50%) - 6px); width: 12px; height: 12px; background: #121a24; border-left: 1px solid var(--gold); border-top: 1px solid var(--gold); transform: rotate(45deg); }
.sf-hint b { display: block; margin-bottom: 4px; color: var(--gold-2); font: 700 15px/1.2 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.sf-hint span { display: block; color: #c9c2b2; }
.sf-hint .btn { margin-top: 10px; padding: 6px 14px; font-size: 13px; }
@keyframes sf-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.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; }

/* Live game (/livegame): search by Riot ID, then both teams of the player's current game. */
.lg { padding-top: 22px; padding-bottom: 10px; max-width: 1100px; }
.lg-form { display: flex; gap: 8px; }
.lg-form .lg-id { flex: 1; min-width: 0; }
.lg-form input, .lg-form select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; font-size: 16px; }
.lg-form input:focus, .lg-form select:focus { outline: none; border-color: var(--gold); }
.lg-form select { width: auto; padding-right: 6px; }
.lg-form .btn { height: 44px; padding: 0 20px; }
.lg-form.off { opacity: 0.5; }
.lg-recent { display: grid; gap: 8px; min-height: 8px; margin: 10px 0 16px; font-size: 13px; }
.lg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lg-chips > .muted { margin-right: 4px; min-width: 52px; }
/* Phones: saved and recent players each on one line that scrolls sideways (the chip cut off at
   the edge shows there's more), so a lookup's result starts near the top of the screen. */
@media (max-width: 600px) {
  .lg-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .lg-chips::-webkit-scrollbar { display: none; }
  .lg-chips > * { flex: none; }
}
.lg-chip.saved .ico { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; color: var(--gold); }
.lg-save .ico { color: var(--gold); }
.lg-save[aria-pressed="true"] { border-color: var(--gold); }
.lg-chip { display: inline-flex; align-items: center; padding: 0; cursor: default; }
.lg-chip button { padding: 5px 4px 5px 12px; border: 0; background: none; color: var(--text); cursor: pointer; }
.lg-chip button small { color: var(--muted); }
.lg-chip .x { padding: 5px 10px 5px 6px; color: var(--muted); font-size: 11px; }
.lg-chip .x:hover { color: var(--text); }
.lg-msg { display: grid; gap: 6px; justify-items: start; padding: 20px; }
.lg-msg b { font-size: 16px; }
.lg-msg p { margin: 0; }
.lg-msg .btn { margin-top: 8px; }
.lg-soon .k { font: 600 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
.pill .spinner { width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.lg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.lg-head h2 { margin: 8px 0 2px; font: 700 30px/1 var(--display); letter-spacing: 0.02em; }
.lg-head h2 small, .lg-name small { color: var(--muted); font-weight: 500; }
.lg-head p { margin: 0; }
.lg-clock-wrap { display: grid; justify-items: end; }
#lg-clock { font: 700 30px/1 var(--display); color: var(--gold-2); }
.lg-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lg-team h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--line); font: 700 15px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.lg-team.team-100 h3 { border-color: #3d8bff; color: #8fbcff; }
.lg-team.team-200 h3 { border-color: #e84057; color: #ff9aa8; }
.lg-bans { display: flex; gap: 3px; }
.lg-ban { width: 22px; height: 22px; border-radius: 4px; filter: grayscale(1) brightness(0.6); }
.lg-team ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lg-player { display: grid; grid-template-columns: 44px auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--card-2); }
.lg-player.me { box-shadow: inset 0 0 0 1px var(--gold); background: rgba(200, 170, 110, 0.08); }
.lg-champ { width: 44px; height: 44px; border-radius: 8px; }
.lg-spells, .lg-runes { display: grid; gap: 2px; }
.lg-ico { width: 20px; height: 20px; border-radius: 4px; }
.lg-ico.key { background: #0b0f16; border-radius: 50%; }
.lg-ico.sub { width: 16px; height: 16px; margin: 0 2px; }
.lg-ico.blank, .lg-champ.blank { display: block; background: var(--line); }
.lg-who { display: grid; min-width: 0; }
.lg-name { padding: 0; border: 0; background: none; color: var(--text); font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.lg-name:hover { color: var(--gold-2); text-decoration: underline; }
.lg-who > small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-rank { display: grid; justify-items: end; text-align: right; font-size: 13px; white-space: nowrap; }
.lg-rank small { color: var(--muted); font-size: 11px; }
.lg-rank small.hot { color: var(--ok); }
.lg-rank.unranked { color: var(--muted); }
.lg-streak { display: inline-flex; margin-right: 4px; color: #ff9d5c; vertical-align: -1px; }
.lg-streak svg { width: 12px; height: 12px; }
.lg-saved-note { margin: 4px 0 0; color: var(--gold-2); }
.t-iron b { color: #8c8c8c; } .t-bronze b { color: #c08a5e; } .t-silver b { color: #b4c0cc; } .t-gold b { color: #e2bd5c; }
.t-platinum b { color: #5cc4b6; } .t-emerald b { color: #3ddc84; } .t-diamond b { color: #7fb2ff; } .t-master b { color: #c58cf2; }
.t-grandmaster b { color: #ff6b5c; } .t-challenger b { color: #ffe08a; }
.lg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lg-idle-ranks { display: flex; flex-wrap: wrap; gap: 10px; }
.lg-idle-rank { display: grid; gap: 4px; padding: 10px 14px; border-radius: 10px; background: var(--card-2); }
.lg-idle-rank .lg-rank { justify-items: start; text-align: left; font-size: 15px; }

/* Recent games (player lookup) */
.lg-hist { margin-top: 14px; }
.lg-hist-note { margin: 4px 0; }
.lg-hist-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.lg-hist-pick { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); color: var(--text); font: inherit; font-size: 13px; max-width: 180px; }
.lg-hist-filter .mono { margin-left: 2px; color: var(--muted); }
.lg-sum { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.lg-sum > div { padding: 10px 12px; border-left: 1px solid var(--line); min-width: 0; }
.lg-sum > div:first-child { border-left: 0; }
.lg-sum dt { color: var(--muted); font-size: 12px; }
.lg-sum dd { margin: 2px 0 0; }
.lg-sum dd.mono { font: 700 24px/1.1 var(--display); letter-spacing: 0.02em; }
.lg-sum dd.small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-sum-note { margin: 6px 0 14px; }
.lg-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px 28px; margin-bottom: 16px; }
.lg-insights p { margin: 0; }
.lg-form-run { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px !important; }
.lg-form-run i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; font: 700 12px/1 var(--display); font-style: normal; color: #0a0e14; }
.lg-form-run i.w { background: #3d8bff; }
.lg-form-run i.l { background: #e84057; }
.lg-periods { margin-top: 6px !important; color: var(--muted); }
.lg-periods b { color: var(--text); font-weight: 600; }
/* Game by game: one measure against its average. */
.lg-trend { margin-bottom: 18px; }
.lg-tr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; }
.lg-tr-head .lg-sub { margin: 0; }
.lg-tr-pick .chip { padding: 4px 10px; font-size: 12px; }
.lg-tr-plot { position: relative; height: 150px; margin: 14px 12px 8px 44px; }
.lg-tr-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lg-tr-plot line.grid { stroke: var(--line); stroke-width: 1; }
.lg-tr-plot line.avg { stroke: var(--muted); stroke-width: 1; }
.lg-tr-plot polyline { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lg-tr-y { position: absolute; left: -44px; width: 36px; transform: translateY(-50%); text-align: right; font-size: 11px; color: var(--muted); }
.lg-tr-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; padding: 0; border-radius: 50%; border: 2px solid #3d8bff; background: #3d8bff; box-shadow: 0 0 0 2px var(--card); cursor: pointer; }
.lg-tr-dot.l { background: var(--card); border-color: #e84057; }
.lg-tr-dot::before { content: ''; position: absolute; inset: -9px; }
.lg-tr-tip { display: none; position: absolute; z-index: 3; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 220px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); text-align: left; pointer-events: none; }
.lg-tr-tip b, .lg-tr-tip small { display: block; color: var(--text); font: 600 12px/1.35 var(--body); white-space: normal; }
.lg-tr-tip small { color: var(--muted); font-weight: 400; }
.lg-tr-dot.edge-l .lg-tr-tip { left: -6px; transform: none; }
.lg-tr-dot.edge-r .lg-tr-tip { left: auto; right: -6px; transform: none; }
.lg-tr-dot:hover .lg-tr-tip, .lg-tr-dot:focus-visible .lg-tr-tip, .lg-tr-dot.on .lg-tr-tip { display: block; }
.lg-tr-dot:hover, .lg-tr-dot:focus-visible { z-index: 2; outline: 2px solid var(--gold-2); outline-offset: 2px; }
.lg-tr-key { margin: 0; }
.lg-tr-key i { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 0; border-radius: 50%; vertical-align: 0; border: 2px solid #3d8bff; background: #3d8bff; }
.lg-tr-key i.l { margin-left: 8px; border-color: #e84057; background: transparent; }
.lg-tr-key i.avg { width: 16px; height: 0; margin-left: 8px; border: 0; border-top: 1px solid var(--muted); border-radius: 0; background: none; vertical-align: 3px; }
/* Bests in these games */
.lg-c-list.lg-bests li { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; min-height: 0; padding: 3px 0; }
.lg-bests li > .small { grid-column: 1 / -1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-gm-best { color: var(--gold); font-weight: 600; }
.lg-bd-stand { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; }
.lg-bd-stand small { display: block; margin-top: 2px; }
.lg-bd-row .lg-best { color: var(--gold); font-weight: 700; }
.lg-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lg-roles li { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; gap: 10px; min-height: 26px; align-items: center; font-size: 13px; }
.lg-roles .mono { text-align: right; white-space: nowrap; }
.lg-vs { width: 100%; border-collapse: collapse; font-size: 13px; }
.lg-vs th, .lg-vs td { padding: 4px 0; text-align: left; font-weight: 400; }
.lg-vs thead th { color: var(--muted); font-size: 12px; }
.lg-vs tbody tr + tr th, .lg-vs tbody tr + tr td { border-top: 1px solid var(--line); }
.lg-vs .num { text-align: right; padding-left: 12px; white-space: nowrap; }
.lg-vs tr.lg-vs-key th, .lg-vs tr.lg-vs-key td { color: var(--gold-2); font-weight: 600; }
.lg-vs-wrap .small { margin-top: 6px !important; }
.lg-role-t .num { padding-left: 8px; }
.lg-feats { margin: 0 0 6px; color: var(--gold-2); }
.lg-bd-stand .lg-good, .lg-bd-stand .lg-weak { display: block; margin-top: 2px; }
.lg-bd-stand .lg-good { color: #7fb2ff; }
.lg-bd-stand .lg-weak { color: #f08a8a; }
.lg-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 24px; margin-bottom: 14px; }
.lg-sub { margin: 0 0 6px; color: var(--muted); font: 500 13px/1.3 var(--body); }
.lg-c-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lg-c-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 84px; align-items: center; gap: 10px; min-height: 34px; font-size: 13px; }
.lg-c-list .mono { text-align: right; }
.lg-c-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
a.lg-c-name:hover { color: var(--gold-2); text-decoration: underline; }
/* "Played with": no icon column. */
.lg-c-list.lg-mates li { grid-template-columns: minmax(0, 1fr) auto 84px; }
.lg-mates .lg-name { min-width: 0; }
/* Champion names under a player's name link to the champion's page. */
a.lg-c-sub { color: inherit; text-decoration: none; }
a.lg-c-sub:hover { color: var(--gold-2); text-decoration: underline; }
.lg-ico-m { width: 28px; height: 28px; border-radius: 6px; }
.lg-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lg-gm { border-radius: 10px; background: var(--card-2); border-left: 3px solid var(--line); overflow: hidden; }
.lg-gm.win { border-left-color: #3d8bff; }
.lg-gm.loss { border-left-color: #e84057; }
.lg-gm-row { display: grid; grid-template-columns: 128px 48px auto auto 116px 110px minmax(0, 1fr) 16px; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.lg-gm-row:hover { background: rgba(255, 255, 255, 0.025); }
.lg-gm-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.lg-gm-res, .lg-gm-kda, .lg-gm-cs { display: grid; gap: 1px; min-width: 0; }
.lg-gm-res b { font: 700 16px/1.1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.lg-gm.win .lg-gm-res b { color: #8fbcff; }
.lg-gm.loss .lg-gm-res b { color: #ff9aa8; }
.lg-gm.remake .lg-gm-res b { color: var(--muted); }
.lg-gm-res small, .lg-gm-kda small, .lg-gm-cs small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-gm-champ { position: relative; width: 44px; }
.lg-gm-champ small { position: absolute; right: -4px; bottom: -4px; min-width: 18px; padding: 0 3px; border-radius: 4px; background: var(--bg); color: var(--text); font-size: 11px; line-height: 16px; text-align: center; }
.lg-gm-kda b { font-size: 15px; }
.lg-gm-kda em { font-style: normal; color: #ff9aa8; }
.lg-gm-cs b { font-size: 14px; font-weight: 500; }
.lg-items { display: flex; flex-wrap: wrap; gap: 2px; }
.lg-item { width: 24px; height: 24px; border-radius: 4px; }
.lg-item.s { width: 20px; height: 20px; }
.lg-item.blank { display: block; background: var(--bg-2); }
.lg-gm-chev { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); justify-self: end; margin-top: -4px; }
.lg-gm-row[aria-expanded='true'] .lg-gm-chev { transform: rotate(225deg); margin-top: 4px; }
.lg-board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 12px 12px; }
.lg-board > p { grid-column: 1 / -1; margin: 0; }
.lg-bd-team h3 { margin: 4px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--line); font: 700 14px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.lg-bd-team.team-100 h3 { border-color: #3d8bff; color: #8fbcff; }
.lg-bd-team.team-200 h3 { border-color: #e84057; color: #ff9aa8; }
.lg-bd-team ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lg-bd-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 58px 58px 72px 40px auto; align-items: center; gap: 8px; min-height: 40px; padding: 4px 6px; border-radius: 8px; font-size: 13px; }
.lg-bd-row.me { background: rgba(200, 170, 110, 0.08); box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.5); }
.lg-bd-who { display: grid; min-width: 0; }
.lg-bd-who small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-bd-kda, .lg-bd-num { text-align: right; white-space: nowrap; }
.lg-bd-dmg { position: relative; text-align: right; padding-bottom: 4px; }
.lg-bd-dmg i { position: absolute; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--muted); }
.lg-bd-row.me .lg-bd-dmg i { background: var(--gold); }
.lg-more { margin-top: 12px; }
@media (max-width: 1100px) {
  .lg-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg-sum > div:nth-child(5) { border-left: 0; }
  .lg-sum > div:nth-child(n + 5) { border-top: 1px solid var(--line); }
  .lg-gm-row { grid-template-columns: 112px 48px auto auto minmax(0, 1fr) 16px; grid-template-areas: 'res champ spells runes kda chev' 'res champ spells runes cs chev' 'items items items items items items'; row-gap: 4px; }
  .lg-gm-res { grid-area: res; } .lg-gm-champ { grid-area: champ; } .lg-gm-row > .lg-spells { grid-area: spells; } .lg-gm-row > .lg-runes { grid-area: runes; }
  .lg-gm-kda { grid-area: kda; } .lg-gm-cs { grid-area: cs; } .lg-gm-row > .lg-items { grid-area: items; } .lg-gm-chev { grid-area: chev; }
  .lg-board { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lg-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-sum > div:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .lg-sum > div:nth-child(even) { border-left: 1px solid var(--line); }
  .lg-sum > div:nth-child(-n + 2) { border-top: 0; }
  .lg-sum dd.mono { font-size: 20px; }
  .lg-gm-row { grid-template-columns: 44px auto minmax(0, 1fr) 12px; grid-template-areas: 'champ spells res chev' 'champ runes res chev' 'kda kda cs cs' 'items items items items'; column-gap: 8px; padding: 8px 10px; }
  .lg-gm-res { text-align: right; justify-items: end; }
  .lg-gm-cs { text-align: right; }
  .lg-gm-champ { width: 44px; }
  .lg-gm-row > .lg-spells { display: flex; }
  .lg-gm-row > .lg-runes { display: flex; align-items: center; }
  .lg-bd-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: 'ico who kda' 'ico items dmg'; row-gap: 2px; min-height: 48px; }
  .lg-bd-row > .lg-ico { grid-area: ico; } .lg-bd-who { grid-area: who; } .lg-bd-kda { grid-area: kda; } .lg-bd-dmg { grid-area: dmg; } .lg-bd-row > .lg-items { grid-area: items; }
  .lg-bd-row > .lg-bd-num { display: none; }
  .lg-c-list li { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
  .lg-c-list.lg-mates li { grid-template-columns: minmax(0, 1fr) auto auto; }
}
@media (max-width: 860px) { .lg-teams { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .lg-form { flex-wrap: wrap; }
  .lg-form .lg-id { flex-basis: 100%; }
  .lg-form select { flex: 1; }
  .lg-player { grid-template-columns: 40px auto minmax(0, 1fr) auto; gap: 6px; }
  .lg-player .lg-runes { display: none; }
  .lg-champ { width: 40px; height: 40px; }
  .lg-head h2 { font-size: 24px; }
}

/* League of Legends reference (/champions): champion grid, champion page, items. */
.lol { padding-top: 18px; padding-bottom: 10px; }
.lol-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.lol-search { flex: 0 1 320px; min-width: 200px; }
.lol-search input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; font-size: 16px; }
.lol-search input:focus { outline: none; border-color: var(--gold); }
.champ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
/* Champion art cards: the champion's tile art, name, title, roles, difficulty and a patch badge. */
.cg-card { position: relative; display: block; aspect-ratio: 1 / 1.15; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); text-decoration: none; transition: border-color 0.15s ease; }
.cg-card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 14, 20, 0) 30%, rgba(10, 14, 20, 0.6) 62%, rgba(10, 14, 20, 0.95) 100%); }
.cg-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 0.3s ease; }
.cg-card:hover, .cg-card:focus-visible { border-color: var(--gold); outline: none; }
.cg-card:hover > img, .cg-card:focus-visible > img { transform: scale(1.05); }
.cg-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 3px; padding: 10px 10px 9px; }
.cg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 19px/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--gold-2); }
.cg-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c8cdd5; font-size: 11px; text-transform: capitalize; }
.cg-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; }
.cg-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-diff { display: inline-flex; gap: 2px; flex: none; }
.cg-diff i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.cg-diff i.on { background: var(--gold); }
.cg-badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 7px; border-radius: 999px; background: rgba(10, 14, 20, 0.85); color: var(--gold-2); font: 600 11px/1.4 var(--body); }
.cg-badge.buff { color: #5fd38a; }
.cg-badge.nerf { color: #ff7a8a; }
.cg-badge.new { background: #2f8f57; color: #fff; }
.cd-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cd-step { display: flex; gap: 8px; }
.cd-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(260px, 38vw, 460px); padding: 20px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(10, 14, 20, 0) 30%, rgba(10, 14, 20, 0.92) 100%), var(--splash) center 20% / cover no-repeat, var(--card); border: 1px solid var(--line); }
.cd-hero-body { display: flex; align-items: flex-end; gap: 14px; }
.cd-icon { width: 72px; height: 72px; border-radius: 12px; box-shadow: 0 0 0 2px var(--gold); }
.cd-hero .k { font: 600 13px/1.3 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.cd-hero h1 { margin: 2px 0 0; font: 700 clamp(36px, 5vw, 64px)/0.95 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.cd-title { margin: 4px 0 0; color: #d9d1bf; font-size: 15px; text-transform: capitalize; }
.cd-skins { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.cd-skins .chip { flex: none; background: rgba(10, 14, 20, 0.7); font-size: 12px; }
/* Wide screens: abilities, tips and lore fill the left column while the stats column runs down the
   right; the last row takes up whatever height the right column needs beyond the left one. */
.cd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.cd-side { display: grid; gap: 14px; grid-column: 2; grid-row: 1 / span 3; }
.abilities { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.ability { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
.ab-icon { position: relative; align-self: start; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.ab-icon img { display: block; width: 48px; height: 48px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.ab-icon b { position: absolute; right: -4px; bottom: -4px; min-width: 18px; padding: 1px 4px; border-radius: 5px; background: #0b0f16; border: 1px solid var(--gold); color: var(--gold-2); font: 700 11px/1.2 var(--display); text-align: center; }
.ability h3 { margin: 0; font-size: 15px; }
.ability p { margin: 4px 0 0; color: #c5ccd6; line-height: 1.55; }
.ab-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; color: var(--muted); font-size: 12px; }
.cd-lvl { font: 500 14px var(--body); letter-spacing: 0; }
.cd-lvl b { color: var(--gold-2); }
#cd-level { width: 100%; accent-color: var(--gold); margin: 0 0 10px; }
.cd-stats { width: 100%; border-collapse: collapse; font-size: 13px; }
.cd-stats th { text-align: left; font-weight: 500; color: var(--muted); padding: 5px 0; }
.cd-stats td { text-align: right; padding: 5px 0 5px 10px; }
.cd-stats tr + tr { border-top: 1px solid var(--line); }
.cd-info > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; color: var(--muted); font-size: 13px; }
.bars { display: flex; gap: 3px; }
.bars i { width: 14px; height: 8px; border-radius: 2px; background: var(--line); }
.bars i.on { background: var(--gold); }
.cd-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.cd-tips ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: #c5ccd6; line-height: 1.5; }
.cd-lore p { margin: 0; color: #c5ccd6; line-height: 1.7; max-width: 80ch; }
@media (max-width: 900px) {
  .cd-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .cd-side { grid-column: auto; grid-row: auto; }
}
@media (max-width: 560px) {
  .cd-step .btn { padding: 8px 10px; font-size: 13px; }
  .cd-hero { min-height: 400px; padding: 14px; background-position: 0 0, center top, 0 0; }
  .cd-icon { width: 56px; height: 56px; }
}
/* Riot's text markup, mapped to our colours. */
.d-magic { color: #7fb2ff; } .d-phys { color: #ff9a5c; } .d-true { color: #fff; font-weight: 600; } .d-hp, .d-heal { color: #5fd38a; }
.d-shield { color: #b8c4d6; } .d-mana { color: #6fa8ff; } .d-status { color: #e7c96b; } .d-speed { color: #8fe3d8; } .d-gold { color: var(--gold); }
.d-strong { color: var(--text); font-weight: 600; } .d-key { color: var(--gold-2); font-weight: 600; } .d-rules { color: var(--muted); font-style: italic; }
.d-stats { color: var(--text); }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 18px; }
.item-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); text-align: left; cursor: pointer; }
.item-card img { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 6px; }
.item-card span { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-card small { color: var(--gold); font-size: 12px; }
.item-card:hover, .item-card:focus-visible { border-color: var(--gold); outline: none; }
.item-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.item-head img { width: 56px; height: 56px; border-radius: 8px; }
.item-head .card-title { margin: 0 36px 2px 0; }
.item-head p { margin: 0; }
.gold { color: var(--gold); }
.item-desc { color: #c5ccd6; line-height: 1.6; font-size: 13px; }
.item-sub { margin: 16px 0 8px; font: 700 13px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.item-path { display: flex; flex-wrap: wrap; gap: 8px; }
.item-mini { display: grid; justify-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--gold); cursor: pointer; }
.item-mini img { width: 36px; height: 36px; border-radius: 5px; }
.item-mini small { font-size: 11px; }
.item-mini:hover { border-color: var(--gold); }
/* Champion page: favourite toggle, "At Worlds" card; favourites marked in the grid. */
.cd-fav[aria-pressed='true'] { color: var(--gold-2); border-color: var(--gold); }
.cg-card.fav { position: relative; }
.cg-card.fav::after { content: '★'; position: absolute; top: 6px; right: 9px; z-index: 2; color: var(--gold); font-size: 15px; text-shadow: 0 1px 3px #000; }
.cw-top { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
.cw-top div { display: grid; padding: 8px; border-radius: 8px; background: var(--card-2); text-align: center; }
.cw-top b { font: 700 22px/1 var(--display); color: var(--gold-2); }
.cw-top span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.cw-players { margin: 8px 0 10px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.cw-players li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); }
.cd-worlds .small { font-size: 12px; }
/* Champion names in the Worlds stats and rosters link to the champion's page. */
a.st-champ-link, a.pl-champ { color: inherit; text-decoration: none; }
a.st-champ-link:hover b { color: var(--gold-2); text-decoration: underline; }
/* Champions: Worlds pick counts under names, Random button; Items: stat filter row. */
.cg-meta small { flex: none; color: var(--gold); font-size: 11px; font-weight: 500; }
#champ-random { height: 40px; }
.lol-tools .item-stats { flex-basis: 100%; }
.lol-tools .item-stats .chip { font-size: 12px; padding: 4px 10px; }
.item-card span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
@media (max-width: 560px) {
  /* Phones: two or three champions a row, and the filter chips scroll sideways instead of stacking. */
  .champ-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .cg-name { font-size: 17px; }
  .lol-search { flex: 1 1 0; min-width: 0; }
  .lol-tools .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; }
  .lol-tools .chips .chip { flex: none; }
  .item-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .lol-tools .chips { flex: 1 1 100%; min-width: 0; } }
/* Ability preview clips (loaded on demand). */
.ability h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ab-play { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--gold); font: 600 11px/1.4 var(--body); cursor: pointer; }
.ab-play:hover, .ab-play[aria-expanded='true'] { border-color: var(--gold); }
.ab-play:disabled { color: var(--muted); border-color: transparent; cursor: default; }
@media (pointer: coarse) { .ab-play { padding: 5px 12px; font-size: 12px; } }
.ab-video { position: relative; max-width: 480px; }
.ab-video video { display: block; width: 100%; height: auto; aspect-ratio: auto 16 / 9; margin-top: 10px; border-radius: 10px; background: #000; }
.ab-video.loading::after { content: 'Loading preview…'; position: absolute; inset: 10px 0 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; pointer-events: none; }
.ab-video p { margin: 8px 0 0; }
/* Recently viewed champions, above the grid. */
.cg-recent { display: flex; align-items: center; gap: 6px; margin: -4px 0 14px; overflow-x: auto; scrollbar-width: none; }
.cg-recent:empty { display: none; }
.cg-recent > .muted { margin-right: 4px; font-size: 13px; }
.cg-recent a { flex: none; border-radius: 8px; }
.cg-recent img { width: 36px; height: 36px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.cg-recent a:hover img, .cg-recent a:focus-visible img { box-shadow: 0 0 0 2px var(--gold); }
/* Champion stats: "Compare with" and the side-by-side columns. */
.cd-vs { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: 13px; }
.cd-vs select { min-width: 0; max-width: 60%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); color: var(--text); font: inherit; }
.cd-stats .vs-head td { color: var(--gold-2); font-weight: 600; font-size: 12px; }
.cd-stats td.win { color: var(--ok); font-weight: 600; }
/* Stats table of every champion (Champions → Stats table). */
.ct-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.ct-tools label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.ct-tools label b { min-width: 18px; color: var(--gold-2); }
.ct-tools input { width: 220px; accent-color: var(--gold); }
.ct-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.ct { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.ct th, .ct td { padding: 6px 10px; text-align: right; border-top: 1px solid var(--line); }
.ct thead th { position: sticky; top: 0; border-top: 0; background: var(--card); }
.ct thead button { border: 0; background: none; color: var(--muted); font: 600 12px var(--body); cursor: pointer; padding: 4px 0; }
.ct thead th[aria-sort='ascending'] button::after { content: ' ▲'; color: var(--gold); }
.ct thead th[aria-sort='descending'] button::after { content: ' ▼'; color: var(--gold); }
.ct thead th[aria-sort='ascending'] button, .ct thead th[aria-sort='descending'] button { color: var(--gold-2); }
.ct tbody th { position: sticky; left: 0; text-align: left; background: var(--bg-2); }
.ct tbody th a { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 600; }
.ct tbody th img { width: 28px; height: 28px; border-radius: 6px; }
.ct tbody tr { cursor: pointer; }
.ct tbody tr:hover th, .ct tbody tr:hover td { background: var(--card-2); }
.ct td.on { color: var(--gold-2); }
.ct thead th:first-child { text-align: left; left: 0; z-index: 1; }
.cd-note { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }

/* ARAM: Mayhem augments (/mayhem): set picker, Headliner bands, augment cards by tier. */
.ms-sets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ms-set { display: grid; gap: 3px; align-content: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ms-set .k { font: 600 12px/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.ms-set b { font: 700 22px/1.05 var(--display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--gold-2); }
.ms-set span:not(.k) { font-size: 13px; }
.ms-set small { color: var(--muted); font-size: 12px; }
.ms-set:hover { border-color: var(--gold); }
.ms-set[aria-pressed='true'] { border-color: var(--gold); background: linear-gradient(135deg, var(--card-2), var(--card)); box-shadow: inset 0 0 0 1px var(--gold); }
.ms-live { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(95, 211, 138, 0.15); color: #5fd38a; font-style: normal; letter-spacing: 0.08em; }
.ms-note { margin: 0 0 14px; color: var(--muted); }
.ms-note:empty { display: none; }
.ms-bands, .ms-left { margin-bottom: 16px; }
.ms-bands summary, .ms-left summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ms-bands summary .card-title, .ms-left summary .card-title { margin: 0; }
.ms-left .aug-grid { margin: 12px 0 0; }
.ms-band-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.ms-band { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); }
.ms-band b { font: 700 17px/1.2 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--gold-2); }
.ms-band p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #c5ccd6; }
.chip.tier-prismatic[aria-pressed='true'] { border-color: #c99bff; color: #e6d2ff; }
.chip.tier-silver[aria-pressed='true'] { border-color: #aeb9c6; color: #e3e9f0; }
.aug-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 18px; }
.aug { --tier: #aeb9c6; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-left: 3px solid var(--tier); border-radius: 12px; background: var(--card); }
.aug.t-gold { --tier: var(--gold); }
.aug.t-prismatic { --tier: #c99bff; }
.aug img, .aug-noicon { width: 52px; height: 52px; border-radius: 10px; box-shadow: 0 0 0 2px var(--tier); background: #0b0f16; }
.aug h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.aug p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: #c5ccd6; overflow-wrap: anywhere; }
.aug.off { opacity: 0.6; }
.aug-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.aug-tag { padding: 1px 7px; border-radius: 999px; background: rgba(200, 170, 110, 0.14); color: var(--gold-2); font: 600 11px/1.5 var(--body); }
.aug-tag.new { background: rgba(95, 211, 138, 0.15); color: #5fd38a; }
.aug-tag.off { background: none; border: 1px solid var(--line); color: var(--muted); }
@media (max-width: 760px) {
  .ms-sets { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(210px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
  .ms-set { scroll-snap-align: start; }
  .aug-grid { grid-template-columns: minmax(0, 1fr); }
}
.ms-bands summary, .ms-left summary { list-style: none; }
.ms-bands summary::-webkit-details-marker, .ms-left summary::-webkit-details-marker { display: none; }
.ms-bands summary::after, .ms-left summary::after { content: 'Show ▾'; margin-left: auto; color: var(--gold); font-size: 13px; }
.ms-bands[open] summary::after, .ms-left[open] summary::after { content: 'Hide ▴'; }
.aug { scroll-margin-top: 130px; }
.aug.hl { box-shadow: 0 0 0 2px var(--gold); }
.aug-link { color: inherit; text-decoration: none; }
.aug-link:hover, .aug-link:focus-visible { color: var(--gold-2); text-decoration: underline; }

/* Live game: "Live now", Riot's featured games while nothing is searched. */
.lg-feat .card-title { margin-bottom: 2px; }
.lg-ladder { margin-top: 14px; }
.lg-ladder .card-title { margin-bottom: 2px; }
.lg-lad-list { list-style: none; margin: 12px 0 0; padding: 0; }
.lg-lad-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 96px 104px 44px; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; }
.lg-lad-list li + li { border-top: 1px solid var(--line); }
.lg-lad-lp, .lg-lad-wl, .lg-lad-wr, .lg-lad-n { text-align: right; }
.lg-lad-n { text-align: left; }
@media (max-width: 560px) {
  .lg-lad-list li { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: 'n name lp' 'n wl wr'; row-gap: 0; min-height: 52px; padding: 4px 0; }
  .lg-lad-n { grid-area: n; } .lg-lad-list .lg-name { grid-area: name; } .lg-lad-lp { grid-area: lp; } .lg-lad-wl { grid-area: wl; text-align: left; font-size: 12px; } .lg-lad-wr { grid-area: wr; font-size: 12px; }
}
.lg-feat-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.lg-feat-game { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); }
.lg-feat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.lg-feat-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lg-feat-side { list-style: none; margin: 0; padding: 0 0 0 8px; display: grid; gap: 4px; border-left: 3px solid #3d8bff; }
.lg-feat-side.red { border-left-color: #e84057; }
.lg-feat-side li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.lg-feat-side .lg-ico { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.lg-feat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .lg-feat-teams { grid-template-columns: 1fr; } }

/* Patch changes (/patches): patch picker, summary, one card per champion or item. */
.pt-patches { margin-bottom: 12px; }
.pt-patches .chip .muted { font-size: 11px; }
.pt-head { margin-bottom: 16px; }
.pt-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.pt-title .card-title { margin: 0; }
.pt-head p { margin: 6px 0 0; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-bottom: 18px; align-items: start; }
.pt-entry { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); scroll-margin-top: 130px; }
.pt-entry.hl { box-shadow: 0 0 0 2px var(--gold); }
.pt-icon img { display: block; width: 44px; height: 44px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.pt-main h3 { margin: 0 0 6px; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pt-main h3 a { color: var(--text); text-decoration: none; }
.pt-main h3 a:hover { color: var(--gold-2); text-decoration: underline; }
.pt-main p { margin: 0; }
.pt-tag { padding: 1px 8px; border-radius: 999px; font: 600 11px/1.5 var(--body); background: rgba(200, 170, 110, 0.14); color: var(--gold-2); }
.pt-tag.buff, .pt-tag.new { background: rgba(95, 211, 138, 0.15); color: #5fd38a; }
.pt-tag.nerf, .pt-tag.removed { background: rgba(232, 64, 87, 0.15); color: #ff7a8a; }
.pt-changes { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pt-change { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: 8px; align-items: baseline; font-size: 13px; }
.pt-what { color: var(--muted); }
.pt-nums s { color: var(--muted); }
.pt-nums b { color: var(--text); }
.pt-dir { text-align: center; font-size: 11px; }
.pt-dir.up { color: #5fd38a; }
.pt-dir.down { color: #ff7a8a; }
.pt-change:has(.pt-text) { grid-template-columns: minmax(0, 1fr); }
.pt-text summary { cursor: pointer; color: var(--gold); font-size: 12px; }
.pt-text > div { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--card-2); font-size: 12.5px; line-height: 1.5; color: #c5ccd6; }
.pt-text > div b { display: block; margin-bottom: 2px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 760px) { .pt-grid { grid-template-columns: minmax(0, 1fr); } }
.cd-patch { padding: 8px 0; border-top: 1px solid var(--line); }
.cd-patch:first-of-type { border-top: 0; padding-top: 0; }
.cd-patch ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13px; }
.cd-patches > .small { display: inline-block; margin-top: 6px; }
/* Live game header: profile icon with the account level. */
.lg-head-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lg-head-id > div { min-width: 0; }
.lg-pfp { position: relative; flex: none; width: 64px; height: 64px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.lg-pfp img { width: 100%; height: 100%; border-radius: 13px; display: block; }
.lg-pfp small { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text); font-size: 11px; line-height: 16px; white-space: nowrap; }
#lg-upd { margin-top: 2px; }
.lg-actions [data-again]:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 560px) { .lg-pfp { width: 52px; height: 52px; border-radius: 12px; } .lg-pfp img { border-radius: 11px; } }
/* Coach notes and goals */
.lg-coach { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.lg-coach-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.lg-coach-list li { display: grid; gap: 2px; padding-left: 10px; border-left: 3px solid var(--line); font-size: 13px; }
.lg-coach-list li.focus { border-left-color: var(--gold); }
.lg-coach-list li.good { border-left-color: #3d8bff; }
.lg-coach-list li b { font-weight: 600; }
.lg-coach-list li span { color: var(--muted); }
.lg-coach-progress { margin: 0 0 10px; font-size: 13px; }
.lg-coach-progress.up b { color: #7fb2ff; }
.lg-coach-progress.down b { color: var(--gold); }
.lg-goals ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.lg-goals li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'label now del' 'bar bar bar' 'note note note'; align-items: center; column-gap: 10px; row-gap: 3px; font-size: 13px; }
.lg-goals li > span:first-child { grid-area: label; }
.lg-goals li > .mono { grid-area: now; }
.lg-goals li > .x { grid-area: del; padding: 4px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.lg-goal-bar { grid-area: bar; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.lg-goal-bar i { display: block; height: 100%; border-radius: 2px; background: var(--muted); }
.lg-goals li.met .lg-goal-bar i { background: #3d8bff; }
.lg-goals li > small { grid-area: note; }
.lg-goal-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.lg-goal-form select, .lg-goal-form input { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); color: var(--text); font: inherit; font-size: 13px; }
.lg-goal-form input { width: 96px; }
.lg-coach > .small:last-child { margin: 0; }
/* Touch screens: 16px fields (iOS zooms into smaller ones). */
@media (pointer: coarse) { .lg-goal-form select, .lg-goal-form input, .lg-hist-pick { font-size: 16px; } }
/* Start screen: saved players as of their last lookup. */
.lg-dash-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.lg-dash-list li { display: grid; grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.lg-dash-list li:first-child { border-top: 0; }
.lg-dash-who { display: grid; min-width: 0; }
.lg-dash-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-dash-rec { display: grid; text-align: right; }
.lg-pfp.s { width: 40px; height: 40px; border-radius: 10px; }
.lg-pfp.s img { border-radius: 9px; }
.lg-pfp.s small { display: none; }
.lg-bd-foot .link-btn { font-size: 12px; }
@media (max-width: 560px) {
  .lg-dash-list li { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: 'pfp who rec' 'pfp rank rank'; row-gap: 2px; }
  .lg-dash-list li > .lg-pfp { grid-area: pfp; } .lg-dash-who { grid-area: who; } .lg-dash-rank { grid-area: rank; } .lg-dash-rec { grid-area: rec; }
}
/* Compare two players */
.lg-cmp-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.lg-cmp-form .lg-cmp-id { flex: 1 1 200px; }
.lg-cmp-form input, .lg-cmp-form select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); color: var(--text); font: inherit; }
.lg-cmp-form select { width: auto; }
.lg-cmp-picks { margin-bottom: 10px; }
.lg-cmp-t td.lg-best { color: var(--gold-2); font-weight: 700; }
.lg-cmp-t td .lg-rank { justify-items: end; text-align: right; }
.lg-cmp > .small:last-child { margin: 8px 0 0; }
#lg-onchamp { margin-top: 4px; color: var(--gold-2); }
@media (pointer: coarse) { .lg-cmp-form input, .lg-cmp-form select { font-size: 16px; } }
.lg-gm { scroll-margin-top: 84px; }
/* Ladder spot, rank history, best win rates, servers compared */
.lg-spot { display: block; margin-top: 4px; color: var(--gold-2); font-size: 12px; }
.lg-rh { margin-top: 14px; }
.lg-rh-plot { position: relative; height: 70px; margin: 8px 6px 10px; }
.lg-rh-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lg-rh-plot polyline { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lg-rh-plot i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--card); }
.lg-rh > p { margin: 4px 0; }
.lg-rh-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.lg-rh-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; }
.lg-rh-note { margin: 10px 0 0; }
.lg-lad-sub { margin: 14px 0 6px; }
.lg-regions { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.lg-regions summary { cursor: pointer; color: var(--gold); font-size: 13px; }
.lg-regions-body { margin-top: 8px; overflow-x: auto; }
.lg-regions-t th:first-child { text-align: left; }
/* Champion page: most built items at Worlds */
.cw-builds { margin: 12px 0 10px; }
.cw-builds:empty { display: none; }
.cw-sub { margin: 0 0 6px; color: var(--muted); font: 500 13px/1.3 var(--body); }
.cw-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cw-items a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 13px; }
.cw-items img { border-radius: 6px; }
.cw-items a:hover span { color: var(--gold-2); text-decoration: underline; }
/* AI coach */
.lg-ai { display: grid; gap: 6px; justify-items: start; margin: 10px 0 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.lg-ai h4 { margin: 0; font: 600 13px/1.3 var(--body); color: var(--gold-2); }
.lg-ai p { margin: 0; font-size: 13px; line-height: 1.5; }
.lg-img-x { visibility: hidden; }