/* toss.gg components, rebuilt to match dpm.lol. Sizes and colours come from tokens.css or are DPM's measured values. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* components set display: flex/grid, which would otherwise beat the hidden attribute */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } /* keep the scrollbar's room even on short pages, so the layout doesn't jump sideways when one appears */
body {
  margin: 0; min-height: 100vh;
  background: var(--page); color: var(--ink);
  font-family: var(--font); font-size: 18px; line-height: 26px; letter-spacing: var(--ls);
  word-break: keep-all;
}
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; border-radius: var(--r-4); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* page frame: the faint band under the header, plus the violet glow on player pages */
/* DPM's colour blob: fixed to the viewport at 40%, first in the page with no z-index. So it paints over plain blocks
   (the ranking panel, cards) but under anything that makes its own layer: the header, blurred page heads, game rows. */
.aura { position: fixed; top: 0; left: 0; width: 100%; height: auto; pointer-events: none; opacity: 0.4; }
.ftr { position: relative; z-index: 1; overflow: hidden; padding-top: 48px; }
.ftr__word {
  text-align: center; white-space: nowrap; line-height: 0.82; font-weight: 800; letter-spacing: -0.025em;
  font-size: clamp(52px, 15vw, 210px); color: transparent;
  background-image: var(--glow-band); -webkit-background-clip: text; background-clip: text;
}
/* player pages: a glow in the player's own colour (TG.tintFromIcon sets --glow-rgb), behind everything like DPM's z -10 */
.glow-top {
  --glow-rgb: 61 53 96;
  position: fixed; inset: 0 0 auto; height: 640px; opacity: 0.3; pointer-events: none; z-index: -1; transition: background 0.3s;
  background: radial-gradient(85% 100% at 50% 0%, rgb(var(--glow-rgb)) 0%, rgb(var(--glow-rgb) / 0.7) 18%, rgb(var(--glow-rgb) / 0.45) 36%,
    rgb(var(--glow-rgb) / 0.25) 54%, rgb(var(--glow-rgb) / 0.11) 72%, rgb(var(--glow-rgb) / 0.03) 88%, rgb(var(--glow-rgb) / 0) 100%);
}
.wrap { width: var(--w-page); max-width: calc(100% - 32px); margin: 0 auto; } /* no layer of its own, so the aura can reach plain panels */
main.wrap { padding: 20px 0 64px; display: flex; flex-direction: column; gap: 16px; }

/* ---------- header ---------- */
.hdr { position: relative; z-index: 2; background: var(--header); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
.hdr__top { display: flex; align-items: center; gap: 16px; height: 52px; }
.logo { display: flex; align-items: center; gap: 8px; font-size: 22px; line-height: 30px; font-weight: 800; letter-spacing: -0.2px; color: var(--white); }
.logo__mark { width: 26px; height: 26px; flex: none; color: var(--brand); }
.hdr__right { margin-left: auto; display: flex; gap: 8px; }
.hdr-search {
  display: flex; align-items: center; gap: 10px; flex: 0 1 805px; height: 36px; margin-left: 12px; padding: 0 8px 0 14px;
  background: var(--control); border: 1px solid var(--line-10); border-radius: var(--r-6); color: var(--ink-3);
}
.hdr-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 16px/22px var(--font); color: var(--white); }
.hdr-search input::placeholder { color: var(--ink-3); }
.hdr-search kbd { padding: 1px 6px; border-radius: var(--r-4); background: var(--icon-ring); font: 600 13px/18px var(--font); color: var(--ink-2); }
@media (max-width: 720px) {
  .hdr-search { display: none; }
  .page-head__body { flex-direction: column; padding: 8px 16px; }
  .page-head__stat { align-self: flex-start; text-align: left; margin-bottom: 8px; }
  .htabs { padding: 4px 8px 0; }
  .lb-filters__right { flex-wrap: wrap; }
  .toggle-box { white-space: nowrap; }
  .l30 { grid-template-columns: 1fr 1fr; gap: 16px; padding: 8px 16px 16px; }
}
.btn-amber {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border-radius: var(--r-6); background: var(--amber); color: #0d0f10;
  font-size: 15px; line-height: 21.5px; font-weight: 700;
}
.nav { display: flex; gap: 4px; height: 40px; margin: 0 -12px; }
.nav > a, .nav__item > a { position: relative; display: inline-flex; align-items: center; height: 100%; padding: 0 12px 4px; font-size: 16px; line-height: 21px; font-weight: 500; color: var(--ink-nav); white-space: nowrap; }
.nav > a:hover, .nav__item > a:hover { color: var(--white); }
.nav [aria-current='page'] { color: var(--white); }
.nav [aria-current='page']::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 51px; height: 3px; transform: translateX(-50%);
  border-radius: var(--r-full); background: var(--lavender); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.nav__caret { width: 8px; height: 8px; margin-left: 6px; fill: rgba(255, 255, 255, 0.3); flex: none; }

/* DPM Leaderboards menu (reference/dpm/리더보드 메뉴.png), type +2px: opens under the link on hover or keyboard focus */
.nav__item { position: relative; height: 100%; }
.navmenu {
  position: absolute; top: 100%; left: 0; z-index: 10; display: none; flex-direction: column; width: 340px; overflow: hidden;
  background: #111315; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.nav__item:hover .navmenu, .nav__item:focus-within .navmenu { display: flex; }
.navmenu--open { position: static; display: flex; } /* shown in place on the design system page */
.navmenu__item { display: flex; align-items: center; gap: 18px; padding: 12px 16px; }
.navmenu__item + .navmenu__item { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.navmenu__item:hover, .navmenu__item:focus-visible, .navmenu__item[data-active] { background: rgba(255, 255, 255, 0.04); }
.navmenu__item img { width: 44px; height: 44px; flex: none; object-fit: contain; }
.navmenu__item > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.navmenu__item b { font-size: 16px; line-height: 22px; font-weight: 600; color: #f4f5f9; }
.navmenu__item:hover b, .navmenu__item:focus-visible b, .navmenu__item[data-active] b { color: var(--lavender); }
.navmenu__item small { font-size: 15px; line-height: 19px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav > .nav__alt { display: none; }
/* narrow screens: the nav scrolls sideways, which would clip the menu, so each mode is a plain link instead */
@media (max-width: 720px) {
  .nav { overflow-x: auto; scrollbar-width: none; }
  .navmenu { display: none !important; }
  .nav__item:has(.navmenu) { display: none; }
  .nav > .nav__alt { display: inline-flex; }
}

/* ---------- sections ---------- */
.card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-6); box-shadow: var(--card-shadow); }
.card__label { display: block; padding: 12px 16px 6px; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--lavender); letter-spacing: 0; }
.panel { background: var(--panel-solid); border: 1px solid var(--line-10); border-radius: var(--r-6); padding: 12px 16px; display: flex; flex-direction: column; gap: 16px; }

/* page heading block (leaderboard, tier list) */
.page-head { background: rgba(25, 27, 34, 0.8); border: 1px solid var(--line-10); border-radius: var(--r-6); backdrop-filter: blur(12px); }
.page-head__body { display: flex; justify-content: space-between; gap: 12px 24px; padding: 12px 40px; }
.page-head h1 { margin: 12px 0 10px; font-size: 26px; line-height: 34px; font-weight: 600; color: var(--ink); }
.page-head p { margin: 0 0 12px; max-width: 490px; font-size: 14px; line-height: 20px; font-weight: 300; color: var(--ink-2); }
.page-head__stat { align-self: center; text-align: right; }
.page-head__stat span { display: block; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-3); }
.page-head__stat b { font-size: 22px; line-height: 30px; font-weight: 800; color: var(--gold-2); }
.htabs { display: flex; gap: 5px; padding: 4px 26px 0; border-top: 1px solid var(--line-10); }
.htabs button { padding: 10px 13px 12px; border-bottom: 2px solid transparent; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink-2); }
.htabs button[aria-selected='true'] { color: var(--white); border-bottom-color: var(--lavender); }
.htabs button:disabled { opacity: 0.4; cursor: default; }
.page-head h1 em { font-style: normal; color: var(--lavender); } /* the mode in the title, like DPM's "ARAM Tierlist" */

/* ---------- controls ---------- */
.seg { display: inline-flex; padding: 2px; border-radius: var(--r-6); background: var(--nav-tint); }
.seg button { padding: 4px 12px; border: 1px solid transparent; border-radius: var(--r-4); font-size: 15px; line-height: 21.5px; font-weight: 600; color: var(--ink-3); }
.seg button:hover { color: var(--ink-hi); }
.seg button[aria-pressed='true'] { background: var(--seg-on); border-color: var(--seg-on-line); color: var(--ink-hi); }
.seg button:disabled { opacity: 0.4; cursor: default; }
.seg button:disabled:hover { color: var(--ink-3); }
.roles { display: inline-flex; gap: 4px; border: 1px solid var(--control); border-radius: var(--r-6); }
.roles button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 36px; }
.roles__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-6); }
.roles__icon .pos-ic { width: 23px; height: 23px; }
.roles button[aria-pressed='true'] .roles__icon { background: rgba(210, 216, 249, 0.9); }
.roles button[aria-pressed='true'] .roles__icon svg { color: #060708; }
.roles__pct { font-size: 10px; line-height: 14px; font-weight: 600; /* exception to the +2px rule: at 12px the 36px-wide columns run together */ color: rgba(155, 157, 158, 0.7); }
.select {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 4px 8px 4px 12px; min-width: 120px;
  background: var(--control); border: 1px solid var(--ink-2); border-radius: var(--r-6); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink-3);
}
.select svg { margin-left: auto; width: 16px; height: 16px; }
.toggle-box { display: inline-flex; align-items: center; gap: 16px; height: 44px; padding: 9px 12px; border: 1px solid rgba(108, 108, 108, 0.1); border-radius: var(--r-8); font-size: 16px; line-height: 22px; color: var(--ink-3); }
.toggle-box b { color: var(--white); font-weight: 600; }
.toggle { display: inline-flex; width: 44px; height: 24px; padding: 2px; border-radius: var(--r-full); background: var(--icon-ring); }
.toggle::after { content: ''; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: transform 0.15s; }
.toggle[aria-checked='true'] { background: var(--lavender); }
.toggle[aria-checked='true']::after { transform: translateX(20px); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  background: var(--nav-tint); border: 1px solid rgba(165, 173, 239, 0.12); border-radius: var(--r-6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink-3);
}
.search { display: flex; align-items: center; gap: 4px; width: 240px; height: 32px; padding: 4px 4px 4px 10px; background: var(--control); border: 1px solid var(--line-10); border-radius: var(--r-6); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 14px/20px var(--font); color: var(--white); }
.search input::placeholder { color: var(--ink-3); }

/* ---------- small pieces ---------- */
.ic { flex: none; overflow: hidden; border-radius: var(--r-4); background: var(--tile); }
.ic img { width: 100%; height: 100%; object-fit: cover; }
.ic--champ img { transform: scale(1.1); }
.ic--round { border-radius: var(--r-8); }
.ic--profile { border-radius: var(--r-6); border: 1px solid var(--icon-ring); }
.ic--wide img { transform: scale(1.1); object-position: 50% 30%; }
.badge { display: inline-flex; align-items: center; height: 25px; padding: 4px 8px; border-radius: var(--r-4); font-size: 13px; line-height: 18.5px; font-weight: 700; white-space: nowrap; }
.badge--win { background: var(--win-badge); color: var(--sky); }
.badge--loss { background: var(--loss-badge); color: var(--coral); }
.badge--neutral { background: var(--tile-70); color: var(--ink-3); }
.chip-mvp { display: inline-flex; padding: 2px 6px; border-radius: var(--r-4); background: var(--mvp-chip); font-size: 12px; line-height: 17px; font-weight: 700; color: var(--amber); }
.wl { display: inline-flex; gap: 4px; }
.wl span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-4); font-size: 13px; line-height: 14px; font-weight: 800; }
.wl .w { background: var(--w-chip); color: var(--lavender); }
.wl .l { background: var(--l-chip); color: var(--coral); }
.muted { color: var(--ink-3); }

/* ---------- leaderboard ---------- */
.lb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.lb-filters__right { display: flex; gap: 16px; margin-left: auto; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pod { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 220px; padding: 12px 4px; background: var(--podium); border: 1px solid var(--line-10); border-radius: var(--r-4); }
/* no region badge, so the player sits in the middle: equal side columns keep it centred with or without a role icon */
.pod__top { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; padding: 0 12px; }
.pod__rank { font-size: 26px; line-height: 34px; font-weight: 800; }
.pod--1 .pod__rank { color: var(--rank-1); }
.pod--2 .pod__rank { color: var(--rank-2); }
.pod--3 .pod__rank { color: var(--rank-3); }
.pod__who { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.pod__name { display: grid; min-width: 0; }
.pod__name b { font-size: 18px; line-height: 26px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod__name span, .lb-row__name span { font-size: 13px; line-height: 18.5px; font-weight: 600; color: var(--ink-3); }
.role-mini { display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.role-mini svg { width: 20px; height: 20px; }
.pod__score { display: flex; flex-direction: column; align-items: center; }
.pod__score b { font-size: 34px; line-height: 42px; font-weight: 700; color: var(--cyan); letter-spacing: 0; }
.rec { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.rec small { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-2); margin: 0 1px; }
.pod__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.pod__stat { display: flex; flex-direction: column; align-items: center; min-width: 32px; font-size: 16px; line-height: 22px; font-weight: 600; color: #d2d8f9; }
.pod__stat span { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-3); }
.champs { display: flex; gap: 3px; }

.lb-grid { display: grid; grid-template-columns: 274px 81px 177px 177px 81px 1fr; column-gap: 16px; align-items: center; }
/* head padding = row padding + its 1px border, so each label sits over the centre of its column */
.lb-head { padding: 0 13px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-3); text-align: center; }
.lb-rows { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; }
.lb-row { min-height: 45px; padding: 2px 12px; background: var(--row); border: 1px solid var(--line-10); border-radius: var(--r-4); }
.lb-row:hover { background: #131619; } /* DPM: hover:bg-muted, and --muted is #131619 in its dark theme */
.lb-row__player { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lb-row__rank { width: 40px; flex: none; text-align: center; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ink-2); }
.lb-row__num { position: relative; } /* the mark hangs off the right so scores stay lined up */
.lane-mark { position: absolute; left: 100%; top: 50%; margin: -7px 0 0 6px; font-size: 12px; line-height: 14px; cursor: help; }
.lane-mark.is-up { color: var(--green); }
.lane-mark.is-down { color: var(--coral); }
.lane-mark.is-lean { opacity: 0.45; }
.lane-mark:hover, .lane-mark:focus-visible { opacity: 1; outline: none; }
.spark__tip.is-floating { z-index: 50; }
.spark__tip.is-floating b { color: var(--ink-hi); }
.lb-row__rank--1 { color: var(--rank-1); }
.lb-row__rank--2 { color: var(--rank-2); }
.lb-row__rank--3 { color: var(--rank-3); }
.lb-row__name { display: grid; min-width: 0; margin-left: 8px; }
.lb-row__name b { font-size: 16px; line-height: 22px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row__name b.gold { color: rgba(255, 220, 116, 0.9); }
.lb-row__score { text-align: center; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--cyan); }
.lb-row__kda { text-align: center; font-size: 16px; line-height: 22px; font-weight: 600; }
.kda-gold { color: var(--kda-gold); }
.kda-lilac { color: var(--kda-lilac); }
.kda-cyan { color: var(--kda-cyan); }
.kda-grey { color: var(--kda-grey); }
.lb-row .champs { justify-content: center; }
.wr-pill { display: flex; align-items: center; height: 26px; border-radius: var(--r-4); background: var(--chip); overflow: hidden; }
.wr-pill .rec { flex: 1; text-align: center; }
.wr-chip { width: 42px; padding: 4px 0; text-align: center; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--white); }
.wr-chip.gold { background: var(--wr-gold); }
.wr-chip.purple { background: var(--wr-purple); }
.wr-chip.cyan { background: var(--wr-cyan); }
.wr-chip.grey { background: var(--wr-grey); }
/* section title inside a panel, like DPM's ITEMS / Runes headings */
.panel__title { margin: 4px 4px 0; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--ink-2); }
.panel__note { margin: 2px 4px 0; font-size: 14px; line-height: 20px; font-weight: 300; color: var(--ink-3); } /* like the page-head description */
.placing { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 4px; font-size: 14px; line-height: 20px; color: var(--ink-3); }
.placing b { font-weight: 700; color: var(--lavender); margin-right: 4px; }
.placing span { padding: 2px 8px; border-radius: var(--r-4); background: var(--tile-70); font-weight: 600; }

@media (max-width: 1120px) {
  .lb-grid { grid-template-columns: minmax(180px, 2fr) 60px 1fr 1.2fr 50px 1.3fr; column-gap: 10px; }
}
@media (max-width: 900px) {
  .podium { grid-template-columns: 1fr; }
  .pod { min-height: 0; }
  .lb-grid { grid-template-columns: minmax(0, 1fr) 64px 46px; column-gap: 8px; } /* fixed score width: head and rows are separate grids */
  .lb-row { padding: 2px 8px 2px 0; }
  .lb-head { padding: 0 9px 0 1px; }
  .lb-row__rank { width: 32px; }
  .lb-grid > :nth-child(2), .lb-grid > :nth-child(5), .lb-grid > :nth-child(6) { display: none; }
  .lb-row__score { font-size: 16px; }
  .wr-pill .rec { display: none; }
  .wr-pill { justify-content: flex-end; background: none; }
  .wr-chip { border-radius: var(--r-4); }
  .lb-filters__right { margin-left: 0; }
}

/* ---------- player ---------- */
.profile { border-radius: var(--r-4); box-shadow: inset 0 0 0 1px var(--line-8); overflow: hidden; }
.profile__top { display: flex; align-items: center; gap: 28px; padding: 14px 16px 14px 26px; min-height: 104px; }
.profile__icon { position: relative; width: 76px; height: 76px; }
.profile__icon .ic { width: 76px; height: 76px; border-radius: var(--r-8); }
.profile__lvl { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 0 4px; background: rgba(6, 7, 8, 0.9); font-size: 12px; line-height: 17px; font-weight: 600; color: var(--ink-2); }
.profile__name { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.44px; color: var(--white); }
.profile__name span { font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: var(--ls); color: var(--ink-3); }
.btn-chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 6px 10px; background: var(--chip); border: 1px solid var(--line-10); border-radius: var(--r-6); font-size: 12px; line-height: 16px; font-weight: 600; color: rgba(235, 237, 252, 0.9); }
.btn-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); opacity: 0.56; }
.ptabs { display: flex; padding: 4px 24px 0; background: var(--nav-tint); border-top: 1px solid var(--nav-line); }
.ptabs button, .ptabs a { padding: 8px 12px 12px; border-bottom: 2px solid transparent; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink-3); }
.ptabs [aria-current='page'], .ptabs [aria-selected='true'] { color: var(--ink-hi); border-bottom-color: var(--lavender); }

.pgrid { display: grid; grid-template-columns: var(--w-aside) minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.pcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .pgrid { grid-template-columns: 1fr; } }

/* aside rank card */
.rank-card__head { display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.rank-card__score { display: grid; gap: 2px; }
.rank-card__score b { font-size: 16px; line-height: 22px; font-weight: 700; color: #82dcf7; }
.rank-card__score span { font-size: 13px; line-height: 18.5px; font-weight: 600; color: var(--ink-3); }
.rank-card__body { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; }
.ladder { display: flex; align-items: center; gap: 8px; margin: 0 16px; padding: 4px 10px; border-radius: var(--r-4); background: var(--sunken); font-size: 11px; line-height: 15.5px; font-weight: 700; color: var(--ink-3); }
.ladder b { margin-left: auto; font-size: 13px; color: var(--sky); }
.trend-note { display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 12px; line-height: 15.3px; color: var(--ink-3); }
.trend-note b { font-size: 14px; font-weight: 700; color: var(--ink-hi); }
.trend-note .up { color: var(--green); }
.trend-note .down { color: var(--coral); }
.spark { position: relative; height: 130px; }
.spark svg { display: block; width: 100%; height: 100%; }
.spark__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 2px var(--page); pointer-events: none; }
.spark__tip {
  position: absolute; display: grid; gap: 1px; padding: 7px 10px; white-space: nowrap; pointer-events: none;
  background: rgba(13, 15, 16, 0.92); border: 1px solid var(--line-10); border-radius: var(--r-6); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.spark__tip b { font-size: 15px; line-height: 18px; font-weight: 700; color: var(--cyan); }
.spark__tip span { font-size: 12px; line-height: 15px; font-weight: 500; color: var(--ink-3); }
.rank-card__foot { display: grid; grid-template-columns: 1fr 1fr; background: var(--sunken); border-top: 1px solid var(--card-line); }
.rank-card__foot div { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 6px; font-size: 12px; line-height: 15.3px; font-weight: 600; color: rgba(249, 249, 254, 0.7); }
.rank-card__foot b { font-size: 14px; font-weight: 700; color: #82dcf7; }
.rank-card__foot div + div b { color: var(--lilac); }
.rank-card__more { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--card-line); }
.rank-card__more span { font-size: 14px; line-height: 18px; font-weight: 700; color: var(--lavender); }
.rank-card__more b { font-size: 14px; font-weight: 700; color: #82dcf7; }

/* aside lists: champion performance, roles, played with */
.plist { list-style: none; margin: 0; padding: 0 0 6px; }
.plist li { display: flex; align-items: center; gap: 12px; padding: 4px 12px; }
.plist__main { flex: 1; display: grid; gap: 2px; min-width: 0; }
.plist__main b { font-size: 15px; line-height: 18.25px; font-weight: 600; color: var(--ink-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist__main span, .plist__side span { font-size: 12px; line-height: 14.5px; font-weight: 500; color: var(--ink-3); }
.plist__side { display: grid; gap: 2px; text-align: right; }
.plist__side b { font-size: 15px; line-height: 18.25px; font-weight: 600; color: var(--gold); }
.plist__side b small { font-size: 13px; opacity: 0.7; margin-left: 2px; }
.plist__side b.lo { color: var(--ink); }
.plist .role-ic { width: 20px; height: 20px; color: var(--ink-3); }

/* last 30 games */
.l30 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 8px 24px 16px; align-items: center; }
.gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gauge__arc { position: relative; width: 116px; height: 62px; }
.gauge__arc svg { width: 116px; height: 62px; }
.gauge__val { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; }
.gauge__val b { font-size: 20px; line-height: 30px; font-weight: 800; color: var(--ink-hi); }
.gauge__val span { font-size: 12px; line-height: 12px; font-weight: 600; color: var(--ink-3); }
.gauge__rec { font-size: 14px; font-weight: 700; color: var(--sky); }
.gauge__rec i { font-style: normal; color: var(--coral); }
.mini-champs { display: grid; gap: 6px; }
.mini-champs div { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center; font-size: 13px; line-height: 16px; }
.mini-champs .ic { grid-row: span 2; width: 28px; height: 28px; }
.mini-champs b { font-weight: 700; color: var(--gold); }
.mini-champs b small { font-weight: 500; color: var(--ink-3); margin-left: 6px; font-size: 13px; }
.mini-champs span { color: var(--ink-3); font-size: 12px; }
.bigstat { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.bigstat > span { font-size: 13px; line-height: 15.75px; font-weight: 500; color: var(--ink-3); }
.bigstat > b { font-size: 32px; line-height: 32px; font-weight: 800; color: var(--lavender); }
.bigstat > b.white { color: var(--ink-hi); font-size: 26px; line-height: 26px; }
.bigstat > b small { font-size: 16px; color: var(--ink-3); font-weight: 600; }
.bigstat > small { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink-3); }
.bigstat > small .d { color: var(--coral); }

.gbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gbar .btn-ghost { margin-left: auto; }

/* game list */
.day { display: flex; flex-direction: column; gap: 4px; }
.day__head { display: flex; align-items: center; gap: 12px; padding: 0 4px; margin-bottom: 4px; }
.day__head h3 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 800; color: var(--ink); }
.day__badges { display: flex; gap: 4px; margin-left: auto; }
.game { position: relative; border-radius: var(--r-6); overflow: hidden; }
.game__row {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 0 8px 0 12px;
  background: rgba(255, 255, 255, 0.03); border-radius: var(--r-6); text-align: left;
  box-shadow: inset 0 0 0 1px var(--line-8), inset 0 1px 0 var(--line-8); backdrop-filter: blur(12px);
}
.game__row::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--tint, var(--none-tint)); pointer-events: none; }
.game__row::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--sheen); pointer-events: none; }
.game--win { --tint: var(--win-tint); }
.game--loss { --tint: var(--loss-tint); }
.game__row > * { position: relative; z-index: 1; }
.game__when { width: 96px; flex: none; display: grid; gap: 0; }
.game__when b { font-size: 14px; line-height: 17px; font-weight: 600; color: var(--ink); }
.game__when b small { margin-left: 8px; font-size: 12px; line-height: 14.5px; font-weight: 500; color: var(--ink-3); }
.game__when span { font-size: 14px; line-height: 17px; font-weight: 700; color: var(--ink); }
.dlt { margin-top: 3px; font-style: normal; font-size: 16px; line-height: 18px; font-weight: 800; color: var(--ink-hi); }
.dlt small { margin-left: 1px; font-size: 12px; font-weight: 700; }
.dlt.down { color: var(--coral); }
.game__champ { position: relative; width: 53px; height: 53px; flex: none; }
.game__champ .ic { width: 53px; height: 53px; }
.game__champ .lv { position: absolute; left: -4px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-3); background: rgba(13, 16, 16, 0.9); font-size: 11px; font-weight: 700; color: var(--ink-2); }
.game__champ .pos { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; padding: 2px; border-radius: var(--r-3); background: rgba(13, 16, 16, 0.9); color: var(--ink-2); }
.kda3 { width: 90px; flex: none; text-align: center; }
.kda3 b { font-size: 17px; line-height: 17px; font-weight: 700; color: var(--ink); }
.kda3 b.d { color: var(--coral); }
.kda3 i { font-style: normal; margin: 0 3px; font-size: 14px; font-weight: 300; color: var(--ink-3); }
.kda3 .tag { display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: var(--r-4); background: var(--tile-70); font-size: 11px; line-height: 15.5px; font-weight: 600; color: var(--ink-3); }
.game__stats { width: 72px; flex: none; display: grid; gap: 1px; }
.game__stats b { font-size: 14px; line-height: 17px; font-weight: 700; color: var(--ink-hi); }
.game__stats span { font-size: 12px; line-height: 14.5px; font-weight: 500; color: var(--ink-3); }
.loadout { display: grid; grid-template-columns: repeat(2, 20px); gap: 3px; flex: none; }
.items { display: grid; grid-template-columns: repeat(4, 20px); gap: 3px; flex: none; }
.slot { width: 20px; height: 20px; border-radius: var(--r-4); background: var(--slot); overflow: hidden; }
.slot img { width: 100%; height: 100%; }
.slot--round { border-radius: 50%; }
.vsep { width: 1px; height: 32px; background: var(--slot); flex: none; }
.game__vs { position: relative; flex: none; margin-left: auto; }
.game__vs .ic { width: 34px; height: 34px; }
.game__vs em { position: absolute; left: -6px; top: -6px; padding: 0 4px; border-radius: var(--r-4); background: rgba(13, 16, 16, 0.9); font-style: normal; font-size: 10px; line-height: 14px; font-weight: 700; color: var(--ink-3); }
.score-pill { display: flex; align-items: center; height: 40px; padding: 0 8px 0 12px; flex: none; border-radius: var(--r-full); background: var(--pill); border: 1px solid var(--line-10); }
.score-pill div { display: grid; justify-items: center; }
.score-pill b { font-size: 18px; line-height: 22px; font-weight: 800; color: var(--lilac); }
.score-pill span { font-size: 12px; line-height: 17px; font-weight: 800; color: var(--ink-3); }
.score-pill span.top { color: var(--gold-2); }
.ring { width: 30px; height: 30px; margin-left: 6px; }
.game__chev { display: grid; place-items: center; width: 36px; align-self: stretch; margin-right: -8px; border-left: 1px solid var(--line-6); color: var(--ink-3); }
.game__chev svg { width: 16px; height: 16px; transition: transform 0.15s; }
.game.is-open .game__chev svg { transform: rotate(180deg); }
@media (max-width: 760px) {
  .game__row { flex-wrap: wrap; gap: 8px 10px; padding: 8px 8px 8px 10px; }
  .game__when { width: 100%; display: flex; gap: 8px; align-items: baseline; }
  .loadout, .items, .vsep, .game__vs, .game__chev { display: none; }
}

/* expanded game */
.gdetail { padding: 8px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.gdetail[hidden] { display: none; }
.dtabs { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(53, 60, 60, 0.3); border-radius: var(--r-8); padding: 1px; }
.dtabs button { padding: 12px 20px; border-radius: var(--r-4); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-3); }
.dtabs button[aria-selected='true'] { background: rgba(12, 15, 15, 0.4); color: var(--white); }
.team { display: flex; flex-direction: column; gap: 5px; padding: 0 8px; }
.team__head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.team__head p { margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; }
.team__head .win { color: var(--victory); }
.team__head .loss { color: var(--red); }
.team__head small { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-3); }
.team__head .tk { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--ink); }
.prow { display: grid; grid-template-columns: 44px 38px minmax(90px, 150px) 76px 1fr 64px 52px 96px 52px; align-items: center; gap: 10px; min-height: 52px; padding: 4px 8px; border-radius: var(--r-6); }
.prow.me { background: rgba(255, 255, 255, 0.04); }
.place { display: grid; place-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--line-10); border-radius: var(--r-6); background: linear-gradient(118deg, rgba(218, 236, 236, 0.16) -48%, transparent 100%); font-size: 12px; line-height: 17px; font-weight: 600; color: var(--ink-2); }
.place.top { color: var(--gold-2); font-weight: 800; }
.prow__name { display: grid; min-width: 0; }
.prow__name b { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow__name span { font-size: 12px; line-height: 17px; font-weight: 600; color: var(--ink-3); }
.prow .kda3 { width: auto; }
.prow__kp { text-align: center; }
.prow__kp b { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--ink); }
.prow__kp b small { font-size: 12px; }
.prow__kp span, .prow__cs span { display: block; font-size: 12px; line-height: 14px; color: var(--ink-3); }
.prow__cs { text-align: center; font-size: 15px; font-weight: 700; }
.dmg { display: grid; gap: 3px; }
.dmg__bar { height: 8px; border-radius: var(--r-4); background: var(--line-10); overflow: hidden; }
.dmg__bar i { display: block; height: 100%; border-radius: var(--r-4); background: var(--dmg-bar); }
.dmg span { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-2); opacity: 0.7; }
.prow__share { text-align: right; font-size: 18px; line-height: 22px; font-weight: 800; color: var(--lilac); }
.prow__share.hi { color: var(--gold); }
.prow__share.lo { color: var(--red); }
@media (max-width: 900px) {
  .prow { grid-template-columns: 36px 32px 1fr 70px 52px; }
  .prow > .items, .prow > .prow__cs, .prow > .dmg, .prow > .prow__kp { display: none; }
}

/* ---------- player champions ---------- */
.highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hl { display: flex; flex-direction: column; }
.hl__body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 16px; }
.hl__body p { margin: 0 0 16px; font-size: 26px; line-height: 26px; font-weight: 800; color: var(--ink); }
.hl__body span { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--ink-3); }
.hl__body .ic { width: 68px; height: 68px; border-radius: var(--r-6); }
@media (max-width: 900px) {
  .highlights { grid-template-columns: 1fr 1fr; }
  .hl__body p { font-size: 22px; }
  .hl__body .ic { width: 48px !important; height: 48px !important; }
}

.ctable-wrap { padding: 0 16px 16px; overflow-x: auto; }
.ctable { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 18px; font-variant-numeric: tabular-nums; }
.ctable th { height: 32px; padding: 0 8px; background: var(--tile); font-weight: 500; color: var(--ink-hi); text-align: center; white-space: nowrap; }
.ctable th:first-child { border-radius: var(--r-4) 0 0 var(--r-4); }
.ctable th:last-child { border-radius: 0 var(--r-4) var(--r-4) 0; }
.ctable td { padding: 8px; text-align: center; font-weight: 700; color: var(--ink-hi); border-bottom: 1px solid var(--line-4); white-space: nowrap; }
.ctable tr.all td { background: rgba(255, 255, 255, 0.05); border-bottom: 0; }
.ctable .who { display: flex; align-items: center; gap: 8px; text-align: left; }
.ctable .who .ic { width: 72px; height: 38px; }
.ctable .who a, .ctable .who span { font-weight: 700; color: var(--ink); }
.ctable td.n { color: var(--ink-3); font-weight: 500; }
.ctable td.score { font-size: 15px; font-weight: 800; color: var(--lilac); }
.ctable td.pos { color: var(--green); }
.side-ic { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.side-ic.blue { background: var(--badge-blue); }
.side-ic.red { background: var(--coral); }

/* ---------- teammates ---------- */
.mates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mcol { display: flex; flex-direction: column; }
.mcol header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-6); }
.mcol header b { font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: 0.6px; color: var(--ink-hi); }
.mcol header span { margin-left: auto; font-size: 12px; line-height: 17px; font-weight: 700; letter-spacing: 0.5px; color: var(--ink-3); }
.mcol ul { list-style: none; margin: 0; padding: 4px 0; flex: 1; }
.mcol li a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 14px; line-height: 18px; }
.mcol li a:hover { background: rgba(255, 255, 255, 0.03); }
.mcol li .ic { width: 24px; height: 24px; }
.mcol li b { flex: 1; font-weight: 600; color: var(--ink-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcol li .g { width: 24px; text-align: right; font-weight: 600; color: var(--ink-3); }
.mcol li .w { width: 36px; text-align: right; font-weight: 700; color: rgba(249, 250, 252, 0.8); }
.mcol li .w.hi { color: var(--green); }
.mcol li .w.lo { color: var(--coral); }
.mcol footer button { width: 100%; padding: 8px 0; border-top: 1px solid var(--line-6); font-size: 12px; line-height: 17px; font-weight: 700; letter-spacing: 0.5px; color: var(--ink-3); }
@media (max-width: 900px) { .mates { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mates { grid-template-columns: 1fr; } }

/* ---------- champion statistics (tier list) ---------- */
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line-10); }
.tl-bar .search { margin-left: auto; }
.tl-grid { display: grid; grid-template-columns: 0.7fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr; align-items: center; }
.tl-head { min-height: 32px; padding: 8px 0; background: var(--line-4); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-3); text-align: center; }
.tl-head .on { color: var(--ink); }
.tl-row { min-height: 44px; border-bottom: 1px solid var(--line-6); text-align: center; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); }
.tl-row:hover { background: rgba(255, 255, 255, 0.02); }
.tl-row .n { color: var(--ink-3); }
.tl-row .who { display: flex; align-items: center; gap: 12px; text-align: left; font-weight: 700; }
.tl-row .who .ic { width: 58px; height: 32px; }
.tl-row .tier { font-size: 22px; line-height: 30px; font-weight: 800; }
.tier.sp { color: var(--gold-2); }
.tier.s { color: var(--purple); }
.tier.a { color: var(--sky); }
.tier.b { color: var(--ink-2); }
.tier.c { color: var(--ink-3); }
.tl-row .wr { display: flex; flex-direction: column; gap: 2px; }
.tl-row .wr small { font-size: 12px; line-height: 14px; color: var(--ink-3); }
.tl-grid--aram { grid-template-columns: 0.7fr 2fr 1fr 1fr 1fr 1fr 1.3fr; }
.main-by { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; line-height: 17px; font-weight: 600; color: var(--ink); }
.main-by > span:last-child { display: grid; text-align: left; }
.main-by small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
@media (max-width: 760px) {
  .tl-grid { grid-template-columns: 36px 1fr 48px 64px 64px; }
  .tl-grid > :nth-child(3), .tl-grid > :nth-child(6), .tl-grid > :nth-child(7) { display: none; }
  .tl-row .who .ic { width: 40px; height: 28px; }
  .tl-grid--aram { grid-template-columns: 36px 1fr 48px 64px; }
}

/* ---------- popups (DPM theme: --popover #1a1d21, --border white 10%) ---------- */
.pop-anchor { position: relative; display: inline-flex; align-self: center; } /* never stretched, or the popup drops to the bottom */
.menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 100%; max-height: 280px; overflow-y: auto;
  padding: 4px; background: var(--control); border: 1px solid var(--line-10); border-radius: var(--r-6);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 8px; border-radius: var(--r-4); font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.menu button:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink-hi); }
.menu button[aria-checked='true'] { background: rgba(255, 255, 255, 0.1); color: var(--ink-hi); }
.menu button[aria-checked='true']::after { content: '✓'; margin-left: auto; font-size: 15px; color: var(--ink-hi); }
.menu .ic { width: 22px; height: 22px; }
.select[aria-expanded='true'] svg { transform: rotate(180deg); }

.filters {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 352px; padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--control); border: 1px solid var(--line-10); border-radius: var(--r-6); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}
.filters__title { font-size: 14px; line-height: 18px; font-weight: 700; color: var(--lavender); }
.filters__group { display: flex; flex-direction: column; gap: 6px; }
.filters__group > span { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--ink-2); }
.opt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.opt-grid button { height: 32px; border: 1px solid var(--line-10); border-radius: var(--r-4); font-size: 15px; line-height: 21.5px; font-weight: 600; color: var(--ink-2); }
.opt-grid button:hover { background: rgba(255, 255, 255, 0.04); }
.opt-grid button[aria-pressed='true'] { background: var(--seg-on); border-color: var(--seg-on-line); color: var(--ink-hi); }
.opt-row { display: flex; border: 1px solid var(--line-10); border-radius: var(--r-4); overflow: hidden; }
.opt-row button { flex: 1; height: 32px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.opt-row button + button { border-left: 1px solid var(--line-10); }
.opt-row button[aria-pressed='true'] { background: var(--seg-on); color: var(--ink-hi); }
.filters .select { height: 36px; flex: 1; }
.filters__pair { display: flex; align-items: center; gap: 8px; }

/* ---------- champion page ---------- */
.ch-head { display: flex; align-items: center; gap: 16px; padding: 12px 24px; }
.ch-head__art { width: 97px; height: 97px; border-radius: var(--r-8); }
.ch-head__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ch-head h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; }
.ch-head h1 b { font-size: 28px; line-height: 30px; font-weight: 700; color: var(--white); }
.ch-head h1 span { font-size: 20px; line-height: 30px; font-weight: 500; color: var(--ink-3); }
.ch-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.skills { display: flex; gap: 8px; }
.skill { position: relative; width: 28px; height: 28px; border: 1px solid var(--icon-ring); border-radius: var(--r-4); overflow: hidden; background: var(--tile); }
.skill img { width: 100%; height: 100%; }
.skill b { position: absolute; right: 0; bottom: 0; padding: 0 2px; border-radius: 2px 0 0 0; background: rgba(6, 7, 8, 0.85); font-size: 10px; line-height: 12px; font-weight: 800; color: var(--white); }
.ch-head p { margin: 0; max-width: 576px; font-size: 14px; line-height: 20px; color: var(--ink-3); }

.seg--solid { gap: 2px; background: var(--control); border: 1px solid var(--line-10); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.seg--solid button { height: 26px; padding: 0 8px; border: 0; font-size: 14px; line-height: 20px; color: var(--ink-3); }
.seg--solid button[aria-pressed='true'] { background: var(--lavender); color: #060708; }
.ch-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0 0; }
.ch-tools__right { display: flex; gap: 8px; margin-left: auto; }

.strip { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 12px; padding: 4px 0 0; background: var(--card); border: 1px solid var(--line-10); border-radius: var(--r-6); box-shadow: inset 0 -2px 0 rgba(255, 220, 117, 0.55); }
.strip > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 10px; }
.strip b { font-size: 26px; line-height: 34px; font-weight: 600; color: var(--ink); }
.strip b small { margin-left: 2px; font-size: 20px; line-height: 30px; color: var(--ink-3); }
.strip b.tier { font-size: 30px; line-height: 38px; font-weight: 800; color: var(--gold-2); }
.strip b.games { font-size: 22px; line-height: 30px; font-weight: 400; color: var(--ink-2); }
.strip em { font-style: normal; font-size: 12px; line-height: 16px; font-weight: 800; color: var(--ink-3); }
@media (max-width: 760px) { .strip { grid-template-columns: repeat(3, 1fr); } }

.mu { display: flex; flex-direction: column; gap: 10px; padding: 12px 20px 16px; }
.mu__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mu__bar h3 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--ink); }
.mu__groups { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: end; }
.mu__group > span { display: block; margin-bottom: 6px; font-size: 14px; line-height: 18px; font-weight: 800; }
.mu__group--good > span { color: var(--lavender); }
.mu__group--bad > span { color: var(--red); text-align: right; }
.mu__cards { display: flex; gap: 12px; }
.mu__group--bad .mu__cards { justify-content: flex-end; }
.mcard { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 75px; }
.mcard__art { width: 75px; height: 181px; border: 1px solid rgba(157, 157, 157, 0.1); border-radius: var(--r-4); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; position: relative; background: var(--tile); }
.mcard__art img { position: absolute; inset: 0; width: 100%; height: 141px; object-fit: cover; object-position: 50% 20%; }
.mcard__art::after { content: ''; position: absolute; left: 0; right: 0; top: 101px; height: 40px; background: linear-gradient(transparent, #15161b); }
.mcard__val { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; height: 40px; padding-bottom: 2px; background: #15161b; }
.mcard__val b { font-size: 18px; line-height: 26px; font-weight: 700; color: var(--lavender); }
.mcard__val b.down { color: #ff5f57; }
.mcard__val span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.mcard .place { height: 20px; padding: 0 7px; }
.mcard .place.good { color: var(--gold-2); }
.mcard .place.bad { color: var(--rank-3); }
.mu__more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 71px; height: 180px; background: rgba(196, 216, 216, 0.05); border: 1px solid var(--line-10); border-radius: var(--r-4); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.mu__more b { font-size: 24px; line-height: 24px; }
@media (max-width: 900px) {
  .mu__groups { grid-template-columns: 1fr; }
  .mu__more { display: none; }
  .mu__cards { overflow-x: auto; justify-content: flex-start !important; }
  .mu__group--bad > span { text-align: left; }
}

.charts { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 20px; }
.chart-card { display: flex; flex-direction: column; gap: 12px; padding: 8px; background: var(--card); border: 1px solid var(--line-10); border-radius: var(--r-8); }
.chart-card h3 { margin: 0; text-align: center; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink-2); }
.chart-card svg { display: block; width: 100%; height: auto; }
.chart-card text { font-family: var(--font); font-size: 13px; fill: var(--ink-3); }
@media (max-width: 900px) { .charts { grid-template-columns: 1fr; } }

.ch-grid { display: grid; grid-template-columns: minmax(0, 1fr) 226px; gap: 20px; align-items: start; }
.ch-main { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.ch-main > .wide { grid-column: 1 / -1; }
.ch-side { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) { .ch-grid, .ch-main { grid-template-columns: 1fr; } }
.stat-card { padding: 12px 12px 16px; background: var(--card); border: 1px solid var(--line-10); border-radius: var(--r-4); }
.stat-card h3 { margin: 0 0 10px; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--ink); }
.picks { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.pick { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 41px; }
.pick__icons { display: flex; flex-direction: column; gap: 6px; }
.pick__icons .ic { width: 28px; height: 28px; }
.pick b { font-size: 16px; line-height: 22px; font-weight: 700; color: rgba(166, 176, 242, 0.9); }
.pick b.alt { color: var(--victory); }
.pick span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.pick span.n { font-weight: 600; }
.pick.faint { opacity: 0.4; }

.mini-lb { display: flex; flex-direction: column; gap: 12px; padding: 8px; background: var(--card); border: 1px solid var(--line-10); border-radius: var(--r-4); }
.mini-lb h3 { margin: 0; text-align: center; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink-2); }
.mini-lb__grid { display: grid; grid-template-columns: 16px minmax(0, 1fr) 40px 40px; align-items: center; column-gap: 6px; }
.mini-lb__head { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); text-align: center; }
.mini-lb__row { min-height: 40px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-2); text-align: center; }
.mini-lb__row .n { font-size: 12px; color: var(--ink-3); }
.mini-lb__row a { display: flex; align-items: center; gap: 6px; min-width: 0; text-align: left; color: var(--ink); }
.mini-lb__row a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-lb__row .ic { width: 22px; height: 22px; }
.btn-outline { align-self: center; display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px; border: 1px solid var(--line-10); border-radius: var(--r-8); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--white); }

/* ---------- empty / note ---------- */
.empty { padding: 32px 16px; text-align: center; font-size: 15px; line-height: 22px; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* score distribution above the leaderboard: one line per player, range faint until hovered */
.sdist { margin: 4px 14px 0; }
.sdist__body { position: relative; }
.sdist__grid { position: absolute; inset: 0; pointer-events: none; }
.sdist__grid i { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--line-6); }
.sdist__grid i.is-avg { border-left: 1px solid var(--line-10); }
.sdist__row { position: relative; height: 24px; margin: 0 -14px; padding: 0 14px; border-radius: var(--r-4); outline: none; cursor: default; }
.sdist__row:hover, .sdist__row:focus-visible { background: var(--row); }
.sdist__track { position: relative; display: block; height: 100%; }
.sdist__err { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: rgba(166, 176, 242, 0.22); border-radius: 1px; }
.sdist__err::before, .sdist__err::after { content: ''; position: absolute; top: -3px; width: 1px; height: 8px; background: inherit; }
.sdist__err::before { left: 0; }
.sdist__err::after { right: 0; }
.sdist__row:hover .sdist__err, .sdist__row:focus-visible .sdist__err { height: 3px; margin-top: -1.5px; background: var(--lavender); }
.sdist__p { position: absolute; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); overflow: hidden; border: 2px solid var(--icon-ring); border-radius: 50%; background: var(--tile); }
.sdist__p img { display: block; width: 100%; height: 100%; }
.sdist__p--1 { border-color: var(--rank-1); }
.sdist__p--2 { border-color: var(--rank-2); }
.sdist__p--3 { border-color: var(--rank-3); }
.sdist__row:hover .sdist__p, .sdist__row:focus-visible .sdist__p { box-shadow: 0 0 0 2px var(--lavender); }
.sdist .spark__tip { z-index: 3; }
.sdist { position: relative; }
/* folded: rows 1-3 clear, rows 4-5 blurring and fading out toward the bottom, the rest cut off; the axis stays clear.
   A mask instead of a coloured cover, so the page glow behind the panel shows through the same as elsewhere. */
.sdist.is-folded .sdist__body { max-height: 120px; overflow: hidden; mask-image: linear-gradient(#000 72px, rgba(0, 0, 0, 0.12) 120px); -webkit-mask-image: linear-gradient(#000 72px, rgba(0, 0, 0, 0.12) 120px); }
.sdist.is-folded .sdist__row:nth-of-type(5) { filter: blur(1px); }
.sdist.is-folded .sdist__row:nth-of-type(6) { filter: blur(2.5px); }
/* the faded rows 4-5 are one button over the chart (above the axis): clicking anywhere on them opens it */
.sdist.is-folded .sdist__row:nth-of-type(n + 5) { pointer-events: none; }
.sdist__more { position: absolute; left: -14px; right: -14px; bottom: 26px; z-index: 4; display: grid; place-items: center; height: 48px; }
.sdist__more span {
  display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-10); border-radius: 50%;
  background: var(--control); color: var(--ink-2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.sdist__more:hover span, .sdist__more:focus-visible span { color: var(--ink-hi); border-color: var(--seg-on-line); }
.sdist__axis { height: 22px; margin-top: 4px; }
.sdist__ticks { position: relative; display: block; height: 100%; border-top: 1px solid var(--line-8); }
.sdist__ticks span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 12px; line-height: 14px; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 720px) { .sdist__ticks .is-minor { display: none; } }