/* ==========================================================================
   Arknights: Endfield Tracker — interface (THE FINALS design system)

   One stylesheet, in the language of the big multi-game stat trackers:
   a network row over a pinned game bar, near-black pages with the arena art
   smoked in at the top, flat slate cards with no outlines, banded table heads,
   zebra rows, solid-red filter bars, uppercase square display type for
   headings and numbers. Tier colours tint whatever belongs to a league.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #0e0e12;
  --bg-soft: #121217;
  --s1: #1b1b22;
  --s2: #212129;
  --s3: #2a2a33;
  --s4: #35353f;
  --row: #1d1d24;
  --row-alt: #212129;
  --row-hover: #2a2a34;
  --band: #26262f;
  --line: #ffffff0d;
  --line-2: #ffffff17;
  --line-3: #ffffff29;

  /* ink */
  --ink: #ffffff;
  --ink-2: #c9c9d3;
  --ink-3: #9494a2;
  --ink-4: #62626f;

  /* brand */
  --acc: #f5d400;
  --acc-hi: #ffe44a;
  --acc-lo: #cfae00;
  --acc-ink: #141100;
  --acc-a08: #f5d40014;
  --acc-a16: #f5d40029;
  --acc-a30: #f5d4004d;
  --gold: #ffc82e;
  --gold-a12: #ffc82e1f;
  --cash: #ffc82e;

  /* data */
  --up: #3ddc84;
  --up-a12: #3ddc841f;
  --down: #ff5263;
  --down-a12: #ff52631f;
  --info: #4aa8ff;

  /* tiers */
  --t-bronze: #cd8a55;
  --t-silver: #c5ccd6;
  --t-gold: #f3c34a;
  --t-platinum: #49d7c4;
  --t-diamond: #6cc6ff;
  --t-ruby: #ff4d6d;

  /* type */
  --f-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif,
    'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  --f-display: 'Barlow Condensed', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* shape & rhythm */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --maxw: 1400px;
  --gut: 24px;
  --net-h: 0px;
  --bar-h: 58px;
  --nav-h: var(--bar-h);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --shadow-pop: 0 24px 60px -12px #000d, 0 0 0 1px var(--line-2);

  /* THE FINALS shapes: the arena's menus cut a corner off and lean their tags. */
  --cut: 10px;
  --cut-shape: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  --cut-shape-2: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  --lean: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  --stripes: repeating-linear-gradient(-58deg, transparent 0 22px, #ffffff06 22px 23px);

  --z-nav: 1000;
  --z-pop: 1100;
  --z-modal: 1200;

  /* Aliases for page-local styles written against older token names
     (the desktop-overlay landing page). */
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --primary-color: var(--acc);
  --primary-light: var(--acc-hi);
  --primary-dark: var(--acc-lo);
  --primary-soft: var(--acc-a16);
  --primary-glow: var(--acc-a30);
  --primary-ink: #fff;
  --surface-color: var(--s1);
  --surface-2: var(--s2);
  --surface-3: var(--s3);
  --background-color: var(--bg);
  --line-strong: var(--line-3);
  --success-color: var(--up);
  --error-color: var(--down);
  --warning-color: var(--gold);
}

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 20px); background: var(--bg); }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 400 14px/1.5 var(--f-ui);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scrollbar-color: #33333d transparent;
}
body > main { flex: 1 0 auto; width: 100%; position: relative; isolation: isolate; }
/* The arena smoke behind the top of every page. */
body > main::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 620px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 420px at 18% -8%, #f5d4002e, transparent 70%),
    radial-gradient(700px 380px at 92% 0%, #ffc82e12, transparent 70%),
    var(--stripes),
    linear-gradient(180deg, #14130a 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent);
}
body.modal-open, body.nav-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button:disabled { cursor: not-allowed; }
[hidden], .hidden { display: none !important; }
::selection { background: var(--acc-a30); color: #fff; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--r-xs); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #34343e; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; text-wrap: balance; }
h1 { font: italic 800 clamp(2.4rem, 4.4vw, 3.6rem)/.92 var(--f-display); letter-spacing: -.005em; text-transform: uppercase; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
p { text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--ink); }
code, kbd {
  font: 500 .82em var(--f-mono); padding: 1px 6px; border-radius: var(--r-xs);
  background: var(--s3); border: 1px solid var(--line-2); color: var(--ink-2);
}
.num, .tnum, td.num, th.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: .8125rem; }
.strong { font-weight: 700; color: var(--ink); }
.up, .pos { color: var(--up); }
.down, .neg { color: var(--down); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.material-icons, .msr {
  font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal;
  font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr; flex-shrink: 0;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; user-select: none; vertical-align: middle;
}
.icons-loading .material-icons, .icons-loading .msr { max-width: 1em; overflow: hidden; color: transparent; }
.fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 3000; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--acc); color: var(--acc-ink); font-weight: 600; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- layout -- */
.container, .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.page { padding-block: 26px 72px; }
.stack > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 32px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.split-l { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.sticky { position: sticky; top: calc(var(--bar-h) + 16px); }

/* Section heading: big square uppercase, the count or note beside it in grey —
   "LIFETIME RANKED   6,219 Matches". */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 12px; flex-wrap: wrap; }
.sec-head:first-child { margin-top: 0; }
.sec-title {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font: italic 800 1.65rem/1 var(--f-display); letter-spacing: .005em; text-transform: uppercase; color: var(--ink);
}
.sec-title::before { content: ''; align-self: center; width: 6px; height: 20px; background: var(--acc); transform: skewX(-18deg); flex-shrink: 0; }
.sec-title small, .sec-meta { font: 500 .85rem var(--f-ui); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.sec-sub { margin-top: 6px; color: var(--ink-3); font-size: .8125rem; }
.sec-link {
  display: inline-flex; align-items: center; gap: 4px; color: var(--acc-hi); font-size: .875rem; font-weight: 600;
  transition: color .15s;
}
.sec-link:hover { color: #fff; }
.sec-link .material-icons { font-size: 18px; transition: transform .2s var(--ease); }
.sec-link:hover .material-icons { transform: translateX(2px); }

.label { font-size: .75rem; font-weight: 600; color: var(--ink-3); }

/* ------------------------------------------------------------------- nav -- */
/* One bar, pinned: the game lockup, player search, sections, account. */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  view-transition-name: site-header;
}
.nav-inner {
  height: var(--bar-h); padding: 0 16px; display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, #1b1a10 0%, #17171d 32%); border-bottom: 1px solid #ffffff0d; box-shadow: 0 10px 30px -18px #000;
}
.nav-game { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; margin-right: 4px; }
.nav-game img { width: 38px; height: 38px; border-radius: var(--r-sm); transition: transform .35s var(--ease); }
.nav-game:hover img { transform: rotate(-8deg) scale(1.06); }
.nav-game-type { display: flex; flex-direction: column; line-height: 1; }
.nav-game-type b { font: italic 800 1.28rem/.9 var(--f-display); letter-spacing: .01em; }
.nav-game-type small { margin-top: 3px; font: 700 .58rem/1 var(--f-ui); letter-spacing: .3em; color: var(--acc-hi); }

.nav-search {
  position: relative; display: flex; align-items: center; gap: 8px; width: 210px; height: 38px; padding: 0 12px;
  border-radius: var(--r-sm); background: #26262e; flex-shrink: 0; transition: background .15s, box-shadow .15s, width .25s var(--ease);
}
.nav-search .material-icons { font-size: 20px; color: var(--ink-3); }
.nav-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-size: .9rem; font-weight: 500; }
.nav-search input::placeholder { color: var(--ink-3); }
.nav-search input::-webkit-search-cancel-button { display: none; }
.nav-search:focus-within { background: #2c2c35; box-shadow: 0 0 0 1px var(--acc-a30); width: 260px; }

.nav-links { display: flex; align-items: center; gap: 0; list-style: none; height: 100%; min-width: 0; }
.nav-links > li { height: 100%; display: flex; align-items: center; position: relative; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 2px; height: 100%; padding: 0 13px;
  color: var(--ink-2); font-weight: 600; font-size: .9375rem; white-space: nowrap; transition: color .15s;
}
.nav-link:hover, .nav-drop.is-open > .nav-link { color: #fff; }
.nav-link.is-active { color: #fff; }
.nav-link.is-active::after {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: 0; height: 4px; background: var(--acc); transform: skewX(-24deg);
}
.nav-caret { font-size: 20px; color: var(--ink-3); transition: transform .2s var(--ease); }
.nav-drop.is-open .nav-caret { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: 100%; left: 0; z-index: var(--z-pop);
  display: grid; grid-template-columns: repeat(3, 210px); gap: 4px; padding: 10px;
  background: #1f1f27; border-radius: 0 0 var(--r) var(--r); box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
  transition: opacity .16s, transform .2s var(--ease), visibility 0s .2s;
}
.nav-drop.is-open .nav-drop-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.nav-drop-group { padding: 4px; }
.nav-drop-label { padding: 6px 8px 8px; font: 700 .8rem var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.nav-drop-item {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 600; transition: background .12s, color .12s;
}
.nav-drop-item .material-icons { font-size: 18px; color: var(--ink-3); transition: color .12s; }
.nav-drop-item:hover { background: var(--s3); color: #fff; }
.nav-drop-item:hover .material-icons { color: var(--acc); }

.nav-app {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-sm);
  background: #2c2c35; border: 1px solid var(--line-2); color: #fff; font-weight: 600; font-size: .875rem; white-space: nowrap;
  transition: background .15s;
}
.nav-app:hover { background: #363640; }
.nav-app .material-icons { font-size: 20px; }
.nav-profile {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 12px; border-radius: 0; clip-path: var(--cut-shape-2);
  background: var(--acc); color: var(--acc-ink); font-weight: 700; font-size: .875rem; white-space: nowrap; transition: background .15s;
}
.nav-profile:hover { background: var(--acc-hi); }
.nav-profile .material-icons { font-size: 20px; }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; height: 100%; flex-shrink: 0; }
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-icon {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  color: var(--ink-2); background: transparent; transition: color .15s, background .15s;
}
.nav-icon:hover { color: #fff; background: #ffffff12; }
.nav-icon .material-icons { font-size: 22px; }
.nav-burger { display: none; }

/* drawer */
.drawer-backdrop { position: fixed; inset: 0; background: #000b; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: calc(var(--z-nav) + 1); }
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); z-index: calc(var(--z-nav) + 2);
  display: flex; flex-direction: column; background: #17171d; border-left: 1px solid var(--line-2);
  transform: translateX(100%); transition: transform .32s var(--ease); visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: var(--bar-h); padding: 0 16px; border-bottom: 1px solid var(--line); }
.drawer-body { overflow-y: auto; padding: 10px; }
.drawer-link { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 600; }
.drawer-link .material-icons { color: var(--ink-3); font-size: 20px; }
.drawer-link:hover, .drawer-link.is-active { background: var(--s3); color: #fff; }
.drawer-link.is-active { box-shadow: inset 3px 0 0 var(--acc); }
.drawer-link.is-active .material-icons { color: var(--acc); }
.drawer-label { padding: 18px 10px 6px; font: 700 .8rem var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* the brand lockup (drawer + footer) */
.nav-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { width: 32px; height: 32px; border-radius: 7px; }
.brand-type { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font: italic 800 1.3rem/.9 var(--f-display); letter-spacing: .01em; }
.brand-sub { font: 600 .6rem/1 var(--f-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

/* ------------------------------------------------------- search dropdown -- */
.search-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: var(--z-pop);
  max-height: 380px; overflow-y: auto; padding: 6px; min-width: 260px;
  background: #1f1f27; border-radius: var(--r); box-shadow: var(--shadow-pop);
  animation: popIn .16s var(--ease);
}
.search-pop.tf-floating { position: fixed; margin: 0; inset: auto; }
.search-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
  transition: background .1s;
}
.search-item:hover, .search-item.active { background: var(--s3); }
.search-item.muted { cursor: default; justify-content: center; padding: 16px; color: var(--ink-3); }
.s-av {
  width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--s4); font: 700 1rem var(--f-display); color: var(--ink-2);
}
.s-av-rank { background: none; border-radius: 0; }
.s-av-rank .rank-ic { width: 32px; height: 32px; }
.s-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.s-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-sub { font-size: .75rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-pr { font: 700 1rem var(--f-display); color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- footer -- */
.site-footer { margin-top: 40px; background: #0a0a0d; border-top: 1px solid #ffffff0a; }
.foot-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 44px var(--gut) 36px;
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px;
}
.foot-brand p { margin: 14px 0 18px; max-width: 36ch; color: var(--ink-3); font-size: .8125rem; line-height: 1.6; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-network {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: var(--r-sm);
  background: var(--s2); color: var(--ink-3); font-size: .75rem; transition: background .15s, color .15s;
}
.foot-network b { color: var(--ink); }
.foot-network .material-icons { font-size: 14px; }
.foot-network:hover { background: var(--s3); color: var(--ink-2); }
.foot-col h4 { margin-bottom: 12px; font: 700 .95rem var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.foot-col a { display: block; padding: 4px 0; color: var(--ink-3); font-size: .8125rem; font-weight: 500; transition: color .15s; }
.foot-col a:hover { color: #fff; }
.foot-bar { border-top: 1px solid #ffffff0a; }
.foot-bar .foot-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 16px; color: var(--ink-4); font-size: .75rem; }

/* ----------------------------------------------------------- primitives -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: var(--r-sm);
  font-weight: 600; font-size: .875rem; white-space: nowrap;
  background: #3a3a45; color: #fff; border: 0;
  transition: background .15s, color .15s, transform .15s var(--ease), box-shadow .15s;
}
.btn:hover { background: #454551; }
.btn:active { transform: translateY(1px); }
.btn .material-icons { font-size: 19px; }
.btn-primary { background: var(--acc); color: var(--acc-ink); border-radius: 0; clip-path: var(--cut-shape-2); padding-right: 20px; }
.btn-primary:focus-visible { outline-color: #fff; outline-offset: -4px; }
.btn-primary:hover { background: var(--acc-hi); }
.btn-ghost { background: #2a2a33; color: var(--ink-2); }
.btn-ghost:hover { background: #34343e; color: #fff; }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--s3); color: #fff; }
.btn-sm { height: 30px; padding: 0 11px; font-size: .78rem; gap: 5px; border-radius: var(--r-xs); }
.btn-sm .material-icons { font-size: 16px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: .95rem; }
.btn-icon { width: 38px; padding: 0; }
.btn-sm.btn-icon { width: 30px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* Outlined badges, like "1v1 Lost" / "2K" under a match result. */
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: var(--r-xs);
  background: #ffffff08; border: 1px solid var(--line-3); color: var(--ink-2);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.chip .material-icons, .chip .msr { font-size: 14px; color: var(--ink-3); }
a.chip:hover { border-color: #ffffff4d; color: #fff; }
.chip-acc { background: var(--acc-a08); border-color: var(--acc-a30); color: var(--acc-hi); }
.chip-acc .material-icons { color: var(--acc-hi); }
.chip-gold { background: var(--gold-a12); border-color: #f2c94c55; color: var(--gold); }
.chip-gold .material-icons { color: var(--gold); }
.chip-up { background: var(--up-a12); border-color: #3ddc8455; color: var(--up); }
.chip-up .material-icons { color: var(--up); }
.chip-down { background: var(--down-a12); border-color: #ff526355; color: var(--down); }

.live-dot { position: relative; display: inline-block; vertical-align: middle; margin-right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--up); flex-shrink: 0; }
.live-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--up); animation: ping 1.8s var(--ease) infinite; }
.badge-live, .live-tag {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 10px; border-radius: 0; clip-path: var(--lean);
  background: var(--acc); color: var(--acc-ink); font: 700 .625rem/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
  vertical-align: middle;
}
.badge-live::before, .live-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: blink 1.4s ease-in-out infinite; }
.badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-xs);
  background: var(--s3); color: var(--ink-2); font-size: .6875rem; font-weight: 700; vertical-align: middle;
}

/* club tag */
.tag-chip, .club-tag {
  display: inline-block; padding: 0 9px; height: 22px; line-height: 22px; border-radius: 0; clip-path: var(--lean);
  background: #ffffff14;
  font: 700 .85rem/22px var(--f-display); letter-spacing: .08em; color: var(--ink-2); white-space: nowrap; vertical-align: middle;
  transition: color .15s, box-shadow .15s, background .15s;
}
a.tag-chip:hover, a.club-tag:hover { color: #fff; background: var(--acc); }
.cell-empty { color: var(--ink-4); }

/* player name + tag */
.p-name { display: inline-flex; align-items: baseline; min-width: 0; max-width: 100%; font-weight: 700; color: var(--ink); }
.pn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
.pn-tag { color: var(--ink-4); font-weight: 500; font-size: .84em; font-variant-numeric: tabular-nums; flex-shrink: 0; }
a.p-name:hover .pn-name, tr:hover a.p-name .pn-name { color: var(--acc-hi); }
.pn-blank { color: var(--ink-3); font-style: italic; font-weight: 400; }

/* rank emblem */
.rank-ic { display: inline-block; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.emblem { position: relative; display: grid; place-items: center; flex-shrink: 0; }
.emblem::before {
  content: ''; position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle, var(--tier, #ffffff22) 0%, transparent 70%); opacity: .4; filter: blur(8px);
}
.emblem img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 12px #0009); }
.emblem-none .material-icons { position: relative; font-size: 40%; color: var(--ink-4); }
.league { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--ink); font-weight: 600; }
.league .rank-ic { width: 24px; height: 24px; }

/* leaderboard position */
.rank-pill {
  display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 9px; border-radius: 0; clip-path: var(--lean);
  font: italic 800 1.1rem/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.rank-pill.is-1 { color: #2a1d00; background: linear-gradient(160deg, #ffe38a, #e9aa13); }
.rank-pill.is-2 { color: #101419; background: linear-gradient(160deg, #f4f6f9, #a3adba); }
.rank-pill.is-3 { color: #1e0f04; background: linear-gradient(160deg, #f3b884, #b0632a); }

/* deltas — the small boxed "+30" / "-4" next to a score */
.delta { display: inline-flex; align-items: center; gap: 1px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta .material-icons { font-size: 16px; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.delta.flat { color: var(--ink-4); }

/* platform handle */
.handle {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--r-xs);
  background: #ffffff0d; color: var(--ink-2); font-size: .78rem; font-weight: 600;
}
.handle svg { opacity: .85; }

/* ------------------------------------------------------------------ card -- */
.card, .panel {
  position: relative; background: var(--s1); border-radius: var(--r-lg);
}
.panel { padding: 18px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
}
.card-title {
  display: flex; align-items: baseline; gap: 10px;
  font: 700 1.2rem/1.1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
}
.card-title > .material-icons, .card-title > .msr { display: none; }
.card-meta { color: var(--ink-3); font: 500 .78rem var(--f-ui); letter-spacing: 0; text-transform: none; }
.card-body { padding: 18px; }
.card-body.flush { padding: 0; }
.card-foot { padding: 12px 16px; display: flex; justify-content: center; }
.card-foot a { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 38px; border-radius: var(--r-sm); background: #33333d; color: #fff; font-size: .85rem; font-weight: 600; transition: background .15s; }
.card-foot a:hover { background: #3e3e49; }
.card-foot .material-icons { font-size: 18px; }
:where(a.card) { display: block; }
a.card { transition: background .2s, transform .25s var(--ease); }
a.card:hover { background: var(--s2); }

/* ---------------------------------------------------------------- KPIs -- */
/* One slate panel of stats, label over value — "Win %  46.5%". */
.kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px 0; padding: 6px 4px; background: var(--s1); border-radius: var(--r-lg); }
.kpi { position: relative; padding: 14px 20px; min-width: 0; }
.kpi-label { display: flex; align-items: center; gap: 6px; font: 700 .8rem var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.kpi-label > .material-icons { display: none; }
.kpi-value {
  margin-top: 4px; display: flex; align-items: center; gap: 10px;
  font: 700 2.05rem/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
}
.kpi-value .rank-ic { width: 34px; height: 34px; }
.kpi-value small { font: 600 .8rem var(--f-ui); color: var(--ink-3); }
.kpi-sub { margin-top: 3px; font-size: .72rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.is-up .kpi-value { color: var(--up); }
.kpi.is-down .kpi-value { color: var(--down); }
.kpi .info-dot { margin-left: 2px; }

/* info tooltip */
.info-dot, .st-info {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  color: var(--ink-4); cursor: help; position: relative; vertical-align: middle; transition: color .15s;
}
.info-dot .material-icons, .st-info .material-icons, .st-info .msr { font-size: 15px; }
.info-dot:hover, .st-info:hover, .info-dot:focus-visible, .st-info:focus-visible { color: var(--ink-2); }
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; z-index: var(--z-pop); left: 50%; bottom: calc(100% + 8px);
  width: max-content; max-width: 260px; padding: 8px 10px; border-radius: var(--r-sm);
  background: #2c2c36; color: var(--ink); box-shadow: var(--shadow-pop);
  font: 400 .75rem/1.45 var(--f-ui); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px); pointer-events: none;
  transition: opacity .14s, transform .18s var(--ease), visibility 0s .18s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: .12s, .12s, 0s; }
[data-tip-pos="end"]::after { left: auto; right: -8px; transform: translate(0, 4px); }
[data-tip-pos="end"]:hover::after, [data-tip-pos="end"]:focus-visible::after { transform: none; }

/* --------------------------------------------------------- tabs & toggles -- */
/* Sub-navigation: plain labels, a thick red bar under the current one. */
.tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; position: relative;
  border-bottom: 1px solid var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 52px; padding: 0 16px;
  color: var(--ink-3); font: 700 1.08rem var(--f-display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transition: color .15s;
}
.tab > .material-icons { display: none; }
.tab:hover { color: #fff; }
.tab.is-on, .tab.active, .tab[aria-selected="true"] { color: #fff; }
.tab.is-on::after, .tab.active::after, .tab[aria-selected="true"]::after {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 4px; background: var(--acc); transform: skewX(-24deg);
  animation: tabIn .25s var(--ease);
}
/* counts ride high on the label, like "Ranked ⁴³" */
.tab-count { align-self: flex-start; margin-top: 13px; padding: 0; background: none; color: var(--ink-3); font-size: .65rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Filter bar: one outlined strip of equal cells, the chosen one solid red. */
.seg {
  display: inline-flex; gap: 0; padding: 0; border-radius: var(--r-sm); background: transparent; border: 1px solid var(--line-3);
  overflow: hidden;
}
.seg button, .seg a {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px;
  color: var(--ink-2); font: 700 .95rem var(--f-display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transition: background .15s, color .15s;
}
.seg > * + * { border-left: 1px solid var(--line-2); }
.seg button:hover, .seg a:hover { color: #fff; background: #ffffff0a; }
.seg .is-on, .seg .active, .seg [aria-pressed="true"], .seg [aria-selected="true"] { background: var(--acc); color: var(--acc-ink); }
.seg .is-on:hover, .seg .active:hover, .seg [aria-pressed="true"]:hover { background: var(--acc-hi); }
.seg .material-icons { font-size: 17px; }

/* inputs */
.input, .field input, input.gs-input, textarea.input {
  width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r-sm);
  background: #121217; border: 1px solid var(--line-3); outline: none; font-size: .875rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea.input { height: auto; padding: 10px 12px; resize: vertical; font-family: var(--f-mono); font-size: .75rem; line-height: 1.5; }
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: #ffffff40; }
.input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-a16); }
.input-icon { position: relative; }
.input-icon > .material-icons { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 19px; pointer-events: none; }
.input-icon .input { padding-left: 38px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-label { font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.field-hint { color: var(--ink-3); font-size: .75rem; }

/* custom select skin (see TF.enhanceSelects) — a "⋮"-style picker cell */
.sel { position: relative; min-width: 0; }
.sel > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.sel-btn {
  width: 100%; height: 40px; padding: 0 10px 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-radius: var(--r-sm); background: #121217; border: 1px solid var(--line-3); text-align: left;
  font-size: .875rem; font-weight: 600; transition: border-color .15s, background .15s;
}
.sel-btn:hover { border-color: #ffffff40; background: #18181e; }
.sel.is-open .sel-btn { border-color: var(--acc); }
.sel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-caret { font-size: 20px; color: var(--ink-3); transition: transform .2s var(--ease); }
.sel.is-open .sel-caret { transform: rotate(180deg); }
.sel.is-disabled { opacity: .5; }
.sel-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 320px; overflow-y: auto; z-index: var(--z-pop);
  padding: 5px; border-radius: var(--r); background: #1f1f27; box-shadow: var(--shadow-pop); animation: popIn .14s var(--ease);
}
.sel-menu.tf-floating { position: fixed; margin: 0; inset: auto; border: 0; }
.sel-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r-xs); cursor: pointer; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.sel-opt.is-active { background: var(--s3); color: #fff; }
.sel-opt.is-sel { color: #fff; font-weight: 700; }
.sel-opt.is-off { opacity: .4; cursor: default; }
.sel-tick { font-size: 18px; color: var(--acc); opacity: 0; }
.sel-opt.is-sel .sel-tick { opacity: 1; }

/* ----------------------------------------------------------------- table -- */
/* Banded head, zebra rows, numbers bold — the tracker table. */
.table-wrap { position: relative; overflow-x: auto; scrollbar-width: thin; }
/* A band (table head, count strip, zebra rows) rounds only the card corners it
   actually touches: one under a card head stays square, one that opens or
   closes the card follows its radius instead of poking past it. */
.card > :is(.table-wrap, .gs-scope, .gs-feed, .list, .member-list):first-child { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
.card > :is(.table-wrap, .gs-scope, .gs-feed, .list, .member-list):last-child { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
.card > :is(.gs-feed, .list):is(:first-child, :last-child) { overflow: hidden; }
.table-wrap.is-loading, .is-loading > .table-wrap { opacity: .5; transition: opacity .15s; pointer-events: none; }
.is-loading { position: relative; }
.table-scroll-hint { display: none; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th {
  height: 40px; padding: 0 14px; text-align: left; white-space: nowrap;
  font: 700 .85rem var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  background: var(--band);
}
td { height: 54px; padding: 0 14px; white-space: nowrap; color: var(--ink); font-weight: 500; background: var(--row); }
tbody tr:nth-child(even) > td { background: var(--row-alt); }
th:first-child, td:first-child { padding-left: 18px; }
th:last-child, td:last-child { padding-right: 18px; }
td.num, th.num { text-align: right; }
td.num { font-weight: 700; }
td.center, th.center { text-align: center; }
td.strong { font-weight: 700; color: var(--ink); }
td.score { font: 700 1.3rem var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
td.rank-cell, th.rank-col { width: 1%; text-align: center; padding-right: 4px; }
td.muted { color: var(--ink-3); font-weight: 500; }
tbody tr > td { transition: background .1s; }
tbody tr:hover > td { background: var(--row-hover); }
tbody tr[data-href] { cursor: pointer; }
tbody tr:focus-visible { outline: none; }
tbody tr:focus-visible > td { background: #33333e; }
tr.is-me > td { background: #333010 !important; }
.player-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player-cell .rank-ic { width: 32px; height: 32px; }
.player-cell .pc-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.player-cell .pc-sub, .pc-sub { font-size: .72rem; color: var(--ink-3); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }

/* inline bar */
.bar-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.bar-track { width: 64px; height: 4px; border-radius: 4px; background: #ffffff14; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--acc); transform-origin: left; animation: growX .8s var(--ease) both; }

/* pager */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; background: var(--s1); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.pager:empty { display: none; }
.pager-info { color: var(--ink-3); font-size: .8rem; font-variant-numeric: tabular-nums; min-width: 110px; text-align: center; }
.pager-info b { color: var(--ink); }

/* ------------------------------------------------------------ list rows -- */
.list { list-style: none; }
.li {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 18px; background: var(--row);
  transition: background .1s;
}
.li:nth-child(even) { background: var(--row-alt); }
a.li:hover, .li[data-href]:hover { background: var(--row-hover); cursor: pointer; }
.li-pos { width: 22px; flex-shrink: 0; text-align: center; font: 700 1.05rem var(--f-display); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.li-title { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-sub { font-size: .75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-sub b { color: var(--ink-2); }
.li-end { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.li-value { font: 700 1.3rem var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.li-note { font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.li .rank-ic { width: 32px; height: 32px; }
/* A row that belongs to a league: its colour down the side, washed across. */
.li.is-tier, .li[style*="--tier"] { background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 16%, var(--row)) 0%, var(--row) 70%); box-shadow: inset 4px 0 0 var(--tier); }

/* ------------------------------------------------------------ progress -- */
.meter { height: 6px; border-radius: 6px; background: #ffffff14; overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: var(--tier, var(--acc)); transform-origin: left; animation: growX 1s var(--ease) both; }

/* ---------------------------------------------------------- page banner -- */
/* Every page opens on a header: the game tile, the page name big and square,
   the arena art smoked in behind it. */
.banner { position: relative; isolation: isolate; overflow: hidden; }
.banner::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--art, none) center 35% / cover no-repeat;
  opacity: .2; filter: saturate(.6); transform: scale(1.04);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent);
}
.banner::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--bg) 0%, #0e0e12cc 40%, #0e0e1244 100%);
}
.banner-inner { max-width: var(--maxw); margin: 0 auto; padding: 34px var(--gut) 26px; }
.banner-inner.has-tabs { padding-bottom: 0; }
.crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--ink-3); font: 700 .85rem var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.crumbs > :last-child { color: var(--acc-hi); }
.crumbs a { transition: color .15s; }
.crumbs a:hover { color: #fff; }
.crumbs .material-icons { font-size: 16px; color: var(--ink-4); }
.banner-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.banner h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.banner-lead { margin-top: 10px; max-width: 72ch; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.banner-meta { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.banner .tabs { margin-top: 22px; border-bottom: 0; }

/* ------------------------------------------------------ empty / skeleton -- */
.empty-state, .error-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 48px 24px; text-align: center; color: var(--ink-3);
}
.empty-state .icon, .error-state .icon, .empty-state > .material-icons {
  width: 52px; height: 52px; margin-bottom: 8px; display: grid; place-items: center; border-radius: 50%;
  background: var(--s3); color: var(--ink-3); font-size: 26px;
}
.empty-state h3, .error-state h3 { color: var(--ink); font: 700 1.2rem var(--f-display); text-transform: uppercase; }
.empty-state p, .error-state p { max-width: 44ch; font-size: .85rem; }
.empty-state .btn { margin-top: 12px; }
.chart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 180px;
  border-radius: var(--r); background: #ffffff05; color: var(--ink-3); font-size: .8125rem; text-align: center; padding: 20px;
}
.chart-empty .msr { font-size: 24px; color: var(--ink-4); margin-bottom: 4px; }
.chart-empty b { color: var(--ink-2); }

.skeleton { position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--s2); }
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, #ffffff0a, transparent); animation: shimmer 1.3s infinite;
}
.skel-line { height: 14px; margin: 12px 0; }
.skel-line:nth-child(3n) { width: 72%; }
.skel-line:nth-child(3n+2) { width: 88%; }
.skel-block { height: 100%; min-height: 120px; }

/* ------------------------------------------------------------------ modal -- */
.tf-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 24px; }
.tf-modal-back { position: absolute; inset: 0; background: #000c; animation: fadeIn .2s; }
.tf-modal-panel {
  position: relative; width: min(760px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  background: #1b1b22; border-radius: var(--r-lg); box-shadow: var(--shadow-pop); animation: modalIn .28s var(--ease); outline: none;
  overflow: hidden;
}
.tf-modal.is-wide .tf-modal-panel { width: min(1180px, 100%); }
/* Short reading dialogs (player events): a compact sheet, not a full-height one. */
.tf-modal.is-compact .tf-modal-panel { width: min(680px, 100%); max-height: min(560px, calc(100vh - 120px)); }
.tf-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; background: #24242d; }
.tf-modal-title h3 { font: italic 800 1.6rem var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.tf-modal-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tf-modal-body { padding: 20px; overflow-y: auto; }

/* ------------------------------------------------------------ animation -- */
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes tabIn { from { transform: scaleX(.3); opacity: 0; } }
@keyframes growX { from { transform: scaleX(0); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes spin { to { transform: rotate(360deg); } }

.rise { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .16s ease-out both vtOut; }
::view-transition-new(root) { animation: .28s var(--ease) both vtIn; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1440px) {
  .nav-app-label { display: none; }
  .nav-app { width: 40px; padding: 0; justify-content: center; }
  .nav-link { padding: 0 10px; }
}
@media (max-width: 1320px) {
  .nav-game-type { display: none; }
}
@media (max-width: 1240px) {
  .nav-search, .nav-search:focus-within { width: 170px; }
  .nav-link { padding: 0 8px; font-size: .875rem; }
  .foot-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  .nav-search, .nav-search:focus-within { flex: 1; width: auto; }
  .split, .split-l { grid-template-columns: minmax(0, 1fr); }
  .sticky { position: static; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(min(var(--n, 4), 3), minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --gut: 16px; --bar-h: 58px; }
  body { font-size: 13.5px; }
  .nav-inner { padding: 0 12px; gap: 10px; }
  .nav-app { display: none; }
  .nav-search { min-width: 0; }
  .nav-right { gap: 6px; }
  .nav-right .arzb-signin { width: 36px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .nav-game img { width: 34px; height: 34px; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .banner-inner { padding-top: 22px; padding-bottom: 18px; }
  .foot-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 12px 14px; }
  .kpi-value { font-size: 1.5rem; }
  .col-hide-sm { display: none; }
  td { height: 50px; }
  th:first-child, td:first-child { padding-left: 12px; }
  th:last-child, td:last-child { padding-right: 12px; }
  .sec-title { font-size: 1.25rem; }
  .tab { height: 46px; padding: 0 12px; font-size: .875rem; }
  .tab-count { margin-top: 10px; }
}

/* ==================================================================== HOME == */
/* Game hero: logo tile + "THE FINALS / STATS" on the left with the search
   and the recent-players box under it; on the right the app promo and the
   "#1" record cards. */
.gh { padding: 46px 0 8px; }
.gh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.gh-left { min-width: 0; display: flex; flex-direction: column; }
.gh-brand { display: flex; align-items: center; gap: 26px; margin-bottom: 30px; }
.gh-logo { width: 104px; height: 104px; flex-shrink: 0; display: grid; place-items: center; }
.gh-logo img { width: 100%; height: 100%; filter: drop-shadow(0 10px 24px #f5d40055); }
.gh-title { font: italic 800 clamp(3rem, 5.2vw, 4.6rem)/.84 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.gh-title em { display: block; font-style: normal; color: var(--acc); }
.gh-sub { margin-top: 10px; color: var(--ink-2); font-size: 1rem; }
.gh-season { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; color: var(--ink-3); font-size: .85rem; }
.gh-season b { color: #fff; font-variant-numeric: tabular-nums; }

.gsearch {
  position: relative; display: flex; align-items: center; height: 58px; padding: 0 10px; gap: 4px;
  border: 1px solid var(--acc); border-radius: var(--r-sm); background: #1b1b22cc;
  box-shadow: 0 0 0 4px #f5d40012; transition: box-shadow .2s;
}
.gsearch:focus-within { box-shadow: 0 0 0 4px var(--acc-a30); }
.gsearch-plats { display: flex; align-items: center; gap: 2px; padding-right: 10px; margin-right: 6px; border-right: 1px solid var(--line-3); height: 34px; }
.gsearch-plat {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3);
  transition: background .15s, color .15s;
}
.gsearch-plat svg, .gsearch-plat img { width: 18px; height: 18px; }
.gsearch-plat .material-icons { font-size: 20px; }
.gsearch-plat:hover { color: #fff; }
.gsearch-plat.is-on { color: #fff; background: #ffffff1f; }
.gsearch input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-size: 1.05rem; font-weight: 500; }
.gsearch input::placeholder { color: var(--ink-2); }
.gsearch input::-webkit-search-cancel-button { display: none; }
.gsearch-go { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--acc); color: var(--acc-ink); }
.gsearch-go:hover { background: var(--acc-hi); }

/* The search and its panel: Recent / Favorites / Results drop open under the
   bar while it is in use, joined to it, over whatever sits below. */
.gsearch-wrap { position: relative; z-index: 30; }
.gsearch-wrap.is-open .gsearch { border-radius: var(--r-sm) var(--r-sm) 0 0; box-shadow: none; }
.rf {
  position: absolute; left: 0; right: 0; top: calc(100% - 1px); display: none;
  background: #1b1b22; border: 1px solid var(--acc); border-top-color: var(--line-2); border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 30px 60px -16px #000e; overflow: hidden;
}
.gsearch-wrap.is-open .rf { display: block; animation: popIn .16s var(--ease); }

/* At rest: one line of recent names, then the season strip. */
.gh-quick { display: flex; align-items: center; gap: 16px; min-height: 30px; margin-top: 16px; }
.gh-quick-label { flex-shrink: 0; color: var(--ink-3); font-size: .85rem; font-weight: 500; }
.gh-quick-list { flex: 1; min-width: 0; display: flex; align-items: center; gap: 18px; overflow: hidden; }
.gh-chip { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight: 700; font-size: .9rem; white-space: nowrap; transition: color .15s; }
.gh-chip:hover { color: var(--acc-hi); }
.gh-chip-av { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--s4); font: 700 .7rem var(--f-display); color: var(--ink-2); }
.gh-quick-none { min-width: 0; color: var(--ink-4); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-quick-fav { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; color: var(--cash); font-size: .85rem; font-weight: 600; }
.gh-quick-fav .material-icons { font-size: 17px; }
.gh-quick-fav:hover { color: #fff; }
.gh-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; padding: 12px 4px; border-radius: var(--r-lg); background: var(--s1); }
.gh-stat { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; padding: 2px 10px; }
.gh-stat + .gh-stat { border-left: 1px solid var(--line-2); }
.gh-stat > .material-icons { font-size: 26px; color: var(--ink-3); }
.gh-stat > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.gh-stat small { color: var(--ink-3); font-size: .68rem; font-weight: 600; white-space: nowrap; }
.gh-stat b { font: 700 1.3rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 16px 16px 14px; border-bottom: 1px solid var(--line); }
.rf-tab {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: 0;
  background: #2c2c35; color: var(--ink-2); font: 700 1rem var(--f-display); letter-spacing: .06em; text-transform: uppercase; transition: background .15s, color .15s;
}
.rf-tab:first-child { border-radius: var(--r-xs) 0 0 var(--r-xs); }
.rf-tab:last-child { border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.rf-tab .material-icons { font-size: 19px; }
.rf-tab:hover { background: #3d3d48; }
.rf-tab:hover { color: #fff; }
.rf-tab.is-on { background: var(--acc); color: var(--acc-ink); }
.rf-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 6px; }
.rf-label { display: flex; align-items: center; gap: 8px; font: 700 .95rem var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.rf-count { display: inline-grid; place-items: center; height: 18px; padding: 0 5px; border: 1px solid var(--line-3); border-radius: 3px; font: 700 .65rem var(--f-ui); color: var(--ink-2); }
.rf-list { list-style: none; max-height: 336px; overflow-y: auto; padding: 0 8px 10px; }
.rf-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 5px 10px; border-radius: var(--r-sm); cursor: pointer; transition: background .12s; }
.rf-row:hover, .rf-row.is-active { background: #ffffff0f; }
.rf-row.is-active { box-shadow: inset 3px 0 0 var(--acc); }
.rf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rf-sub { color: var(--ink-3); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-rank { font: italic 800 1.15rem var(--f-display); color: var(--cash); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf.is-busy .rf-count { opacity: .4; }
.rf-av { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--s4); font: 700 .9rem var(--f-display); color: var(--ink-2); overflow: hidden; }
.rf-av .rank-ic { width: 28px; height: 28px; }
.rf-av.has-icon { background: none; }
.rf-name { min-width: 0; font-weight: 700; font-size: .95rem; }
.rf-name .pn-tag { font-size: .78em; }
.rf-meta { color: var(--ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf-btn { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); transition: color .15s, background .15s; }
.rf-btn .material-icons { font-size: 20px; }
.rf-btn:hover { color: #fff; background: #ffffff12; }
.rf-star.is-on { color: var(--gold); }
.rf-star.is-on .material-icons { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.rf-empty { padding: 26px 18px 30px; color: var(--ink-3); text-align: center; font-size: .875rem; list-style: none; }
/* Trending profiles: under the search box, filling the column to the height of
   the promo side; its list scrolls when the box above has grown. */
.gh-trend { margin-top: 18px; flex: 1 1 0; min-height: 240px; display: flex; flex-direction: column; overflow: hidden; }
.gh-trend > .list { flex: 1; min-height: 0; overflow-y: auto; }
.gh-trend .li-end .bar-track { width: 56px; margin-top: 4px; }

.gh-right { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.promo {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; min-height: 272px;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--stripes), linear-gradient(115deg, #f5d400 0%, #b39600 36%, #2e2a0c 72%, #1b1b22 100%);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); border-radius: var(--r-lg) 0 var(--r-lg) var(--r-lg);
}
.promo-copy { padding: 22px 0 22px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; z-index: 1; }
.promo-badge { height: 28px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-xs); background: #fff; color: var(--acc-lo); font: 700 .8rem var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.promo-badge img { width: 18px; height: 18px; }
.promo h2 { font: italic 800 2.6rem/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; }
.promo p { color: #ffffffd9; font-size: .875rem; line-height: 1.55; max-width: 38ch; }
.promo-btns { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.promo .btn-primary { background: #f5d400; box-shadow: 0 6px 18px -6px #0008; }
.promo .btn-ghost { background: #ffffff26; color: #fff; }
.promo .btn-ghost:hover { background: #ffffff38; }
.promo-shot { position: relative; margin: 18px 0 0; border-radius: var(--r) 0 0 0; overflow: hidden; box-shadow: -10px 0 30px -10px #000a; align-self: end; height: calc(100% - 18px); }
.promo-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

.no1-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: var(--r-lg); overflow: hidden; background: #23232b; }
.no1 { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; min-width: 0; transition: background .15s; }
.no1 + .no1 { border-left: 1px solid #ffffff0f; }
.no1:hover { background: #2e2e38; }
.no1-badge {
  position: absolute; top: 14px; right: 0; height: 30px; padding: 0 12px 0 16px; display: grid; place-items: center;
  background: var(--cash); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); font: italic 800 1.3rem/1 var(--f-display); color: #1d1400;
}
.no1-badge { grid-auto-flow: column; gap: 1px; align-items: baseline; }
.no1-badge small { font-size: .7em; }
.no1-av { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #ffffff12; margin-bottom: 16px; overflow: hidden; }
.no1-av .rank-ic { width: 40px; height: 40px; }
.no1-av .material-icons { font-size: 26px; color: var(--ink-2); }
.no1-name { font: italic 800 1.45rem/1.05 var(--f-display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no1-label { color: var(--ink-3); font-size: .78rem; font-weight: 600; }
.no1-val { font: 700 2.4rem/1 var(--f-display); color: var(--cash); font-variant-numeric: tabular-nums; }
.no1.skeleton-ish .no1-name, .no1.skeleton-ish .no1-val { color: var(--ink-4); }

.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mini {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 170px; padding: 18px;
  border-radius: var(--r-lg); overflow: hidden; isolation: isolate; background: #24242c;
}
.mini::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--art) center / cover no-repeat; opacity: .55; transition: transform .5s var(--ease), opacity .3s; }
.mini::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 10%, #0e0e12ee 85%); }
.mini:hover::before { transform: scale(1.05); opacity: .7; }
.mini-kicker { font: 700 .8rem var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-hi); }
.mini-title { font: italic 800 1.8rem/.95 var(--f-display); text-transform: uppercase; }
.mini-foot { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--r-sm); background: #1b1b22d9; font-weight: 600; font-size: .85rem; }
.mini-foot .material-icons { font-size: 20px; }

.hh-ends b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.omni {
  position: relative; margin-top: 28px; max-width: 680px; height: 56px; display: flex; align-items: center; gap: 10px;
  padding: 0 7px 0 16px; border-radius: var(--r-sm); background: #1b1b22cc; border: 1px solid var(--line-3);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.omni:hover { border-color: #ffffff40; }
.omni:focus-within { border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-a16); }
.omni-ic { color: var(--ink-3); font-size: 22px; }
.omni input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-size: 1rem; font-weight: 500; }
.omni input::placeholder { color: var(--ink-3); }
.omni input::-webkit-search-cancel-button { display: none; }
.omni input:focus, .omni input:focus-visible { outline: none; }
.omni-plats { display: flex; align-items: center; gap: 9px; padding-right: 6px; color: var(--ink-4); }
.omni-go { height: 42px; padding: 0 18px; border-radius: var(--r-xs); }
.omni .search-pop { top: calc(100% + 8px); }

.hh-ladder { overflow: hidden; }
.ladder-body { padding: 0; display: flex; flex-direction: column; min-height: 260px; }
.ladder-row {
  display: grid; grid-template-columns: 34px 120px minmax(0, 1fr) 62px; align-items: center; gap: 14px;
  padding: 9px 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 14%, var(--row)), var(--row) 60%);
  box-shadow: inset 4px 0 0 var(--tier); transition: filter .12s;
}
.ladder-row:nth-child(even) { background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 14%, var(--row-alt)), var(--row-alt) 60%); }
.ladder-row:hover { filter: brightness(1.18); }
.ladder-name { display: flex; flex-direction: column; font-weight: 700; font-size: .875rem; line-height: 1.2; }
.ladder-name small { font-weight: 600; font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ladder-bar { height: 8px; border-radius: 8px; background: #ffffff10; overflow: hidden; }
.ladder-bar i { display: block; height: 100%; border-radius: inherit; background: var(--tier); transform-origin: left; animation: growX 1s var(--ease) both; animation-delay: .15s; }
.ladder-val { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.ladder-val b { font: 700 1.1rem var(--f-display); font-variant-numeric: tabular-nums; }
.ladder-val small { font-size: .7rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ladder-foot { display: flex; justify-content: space-between; gap: 8px; padding: 12px 18px; color: var(--ink-3); font-size: .75rem; }
.ladder-foot b { color: var(--ink); font-variant-numeric: tabular-nums; }

.hh-kpis .p-name { font-size: inherit; }
.home-main { padding-top: 22px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.home-side { display: flex; flex-direction: column; gap: 22px; }
.home-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.home-top td { height: 56px; }
.club-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--s1); border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; }
.club-tile { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--row); transition: background .15s; }
.club-tile:hover { background: var(--row-hover); }
.club-tile-top { display: flex; align-items: center; justify-content: space-between; }
.club-tile .tag-chip { font-size: .9rem; }
.club-tile-power { display: flex; align-items: baseline; gap: 6px; }
.club-tile-power b { font: 700 2.1rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.club-tile-power small { color: var(--ink-3); font-size: .72rem; }
.club-tile-meta { color: var(--ink-3); font-size: .75rem; }
.home-top .player-cell .rank-ic { width: 34px; height: 34px; }
.home-side .li-end .bar-track { width: 56px; margin-top: 4px; }

.explore { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.explore-item {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: var(--r-lg);
  background: var(--s1); overflow: hidden; transition: background .2s, transform .3s var(--ease);
}
.explore-item .material-icons { font-size: 26px; color: var(--acc); margin-bottom: 16px; transition: transform .3s var(--ease); }
.explore-item b { font: italic 800 1.35rem/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.explore-item small { color: var(--ink-3); font-size: .78rem; }
.explore-item::after {
  content: 'arrow_forward'; font-family: 'Material Symbols Rounded'; font-weight: 400; font-style: normal; text-transform: none; letter-spacing: normal; font-feature-settings: 'liga'; position: absolute; top: 16px; right: 16px; font-size: 20px; color: var(--ink-4);
  transition: color .2s, transform .3s var(--ease);
}
.explore-item:hover { background: var(--s2); }
.explore-item:hover::after { color: #fff; transform: translateX(3px); }

@media (max-width: 1180px) {
  .explore { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .gh-grid { grid-template-columns: minmax(0, 1fr); }
  .gh-trend { flex: none; min-height: 0; }
  .gh-trend > .list { overflow: visible; }
}
@media (max-width: 1020px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .club-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .gh { padding-top: 26px; }
  .gh-brand { gap: 16px; margin-bottom: 24px; }
  .gh-logo { width: 68px; height: 68px; }
  .gh-title { font-size: 2.8rem; }
  .gh-sub { font-size: .875rem; }
  .gsearch { height: 52px; }
  .gsearch-plats { display: none; }
  .gh-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .gh-stat { justify-content: flex-start; }
  .gh-stat:nth-child(3) { border-left: 0; }
  .gh-quick-list .gh-chip:nth-child(n+3) { display: none; }
  .promo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .promo-copy { padding: 20px; }
  .promo-shot { display: none; }
  .promo h2 { font-size: 1.8rem; }
  .no1-grid { grid-template-columns: minmax(0, 1fr); }
  .no1 + .no1 { border-left: 0; border-top: 1px solid #ffffff0f; }
  .mini-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .omni { height: 52px; padding-left: 14px; }
  .omni-plats, .omni-go span:first-child { display: none; }
  .omni-go { width: 40px; height: 40px; padding: 0; }
  .explore { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder-row { grid-template-columns: 30px 96px minmax(0, 1fr) 52px; gap: 10px; padding-inline: 12px; }
  .ladder-foot span:last-child { display: none; }
}

/* ================================================================== PLAYER == */
/* Profile header: one card — the cover across the top, the avatar circle
   overlapping its foot, name and actions over the cover, the section tabs
   in a band underneath. */
.pf-wrap { padding-top: 22px; }
.pf-card { position: relative; border-radius: var(--r-lg); background: #24242c; }
.pf-cover {
  position: relative; height: 264px; isolation: isolate; overflow: hidden;
  background: #1b1b22; border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.pf-cover::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--ph-cover, url('/assets/items/c4/fortune-stadium-c4232d6b.webp')) center 45% / cover no-repeat;
  opacity: .85;
}
.pf-cover::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    var(--stripes),
    radial-gradient(520px 260px at 120px 110%, color-mix(in srgb, var(--tier, var(--acc)) 34%, transparent), transparent 70%),
    linear-gradient(90deg, #0e0e12b3 0%, transparent 55%),
    linear-gradient(180deg, #0e0e1200 30%, #0e0e12e6 100%);
}
.profile-banner.has-cover .pf-cover::before { opacity: 1; }
.pf-cover .pf-head { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 22px; padding: 0 22px 14px 168px; }
/* The contestant card: a cut-corner frame in the league's colour. */
.pf-avatar {
  --pfc: 18px;
  position: absolute; left: 24px; top: 196px; z-index: 3; width: 128px; height: 128px; display: grid; place-items: center;
  clip-path: polygon(var(--pfc) 0, 100% 0, 100% calc(100% - var(--pfc)), calc(100% - var(--pfc)) 100%, 0 100%, 0 var(--pfc));
  background: linear-gradient(150deg, var(--tier, var(--acc)), color-mix(in srgb, var(--tier, var(--acc)) 35%, #000));
}
.pf-avatar::before {
  content: ''; position: absolute; inset: 4px; clip-path: inherit;
  background: radial-gradient(circle at 50% 30%, #2e2e38, #131318 75%);
}
.pf-avatar > * { position: relative; }
.pf-avatar .emblem { animation: emblemIn .7s var(--ease) both; }
.pf-initial { font: italic 800 4rem/1 var(--f-display); color: var(--ink-2); }
.pf-avatar.is-avatar { overflow: hidden; }
.pf-avatar .ph-avatar-img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: cover; clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); }
.pf-flag {
  position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--tier, var(--acc)); box-shadow: 0 0 0 3px #fff; color: #111;
}
.pf-flag .rank-ic { width: 22px; height: 22px; }
.pf-id { min-width: 0; flex: 1; }
/* The same identity block in a page banner (club page): crest, then name. */
.banner .pf-head { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.banner .pf-name { text-shadow: none; }
.banner .pf-meta .chip { background: #ffffff0d; }
.pf-kicker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.pf-kicker { gap: 16px; margin-bottom: 8px; }
.pf-stat { display: inline-flex; align-items: center; gap: 5px; color: #ffffffcc; font-size: .8rem; font-weight: 600; text-shadow: 0 1px 6px #000a; white-space: nowrap; }
.pf-stat .msr { font-size: 16px; color: #ffffff99; }
.pf-stat b, .pf-stat .tnum { color: #fff; }
.pf-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pf-tags .chip { height: 24px; background: #0e0e12b3; border-color: #ffffff2e; font-size: .72rem; }
.pf-tags .premium-info { height: 24px; }
.pf-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px;
  font: italic 800 clamp(2.4rem, 4.2vw, 3.5rem)/.95 var(--f-display); letter-spacing: -.005em; text-transform: none; overflow-wrap: anywhere;
  text-shadow: 0 2px 14px #0008;
}
.pf-tag { font: 600 .42em var(--f-ui); color: #ffffffa6; letter-spacing: 0; margin-left: -6px; align-self: flex-end; margin-bottom: .35em; }
.pf-club { font-size: .85rem; height: 26px; line-height: 26px; padding: 0 9px; background: #0e0e1299; }
.pf-meta { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pf-meta .handle { background: #0e0e1299; }
.pf-meta .chip { background: #0e0e1299; }
.pf-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.pf-btns { display: flex; gap: 8px; }
.pf-ic {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 0; clip-path: var(--cut-shape-2);
  background: #2b2b34e6; color: #fff; transition: background .15s, transform .15s var(--ease);
}
.pf-ic .material-icons { font-size: 22px; }
.pf-ic:hover { background: #3a3a45; }
.pf-ic.is-acc { background: var(--acc); }
.pf-ic.is-acc:hover { background: var(--acc-hi); }
.pf-ic.is-purple { background: #7d3cff; }
.pf-ic.is-done { background: var(--up); color: #062311; }
.pf-ic.pf-fav.is-on .material-icons { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.pf-ic.pf-fav:not(.is-on) { background: #2b2b34e6; }
.pf-band { position: relative; display: flex; align-items: center; min-height: 56px; padding-left: 168px; background: #24242c; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.pf-band .tabs { flex: 1; border-bottom: 0; margin: 0; }
.pf-band .tab { height: 56px; }
.claim-chip.is-claimed { cursor: default; }
.premium-info {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--r-xs);
  color: var(--gold); background: #0e0e12b3; box-shadow: inset 0 0 0 1px #f2c94c4d;
  font-size: .6875rem; font-weight: 700; white-space: nowrap; transition: background .15s, box-shadow .15s;
}
.premium-info .msr { font-size: 14px; }
.premium-info:hover { background: #f2c94c29; box-shadow: inset 0 0 0 1px #f2c94c80; }
.premium-info.is-active { color: #1d1300; background: var(--gold); box-shadow: none; }

.pl-page { padding-top: 22px; }
.pl-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 26px; align-items: start; }
.pl-sidebar { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.pl-side-group { min-width: 0; }
.pl-side-group + .pl-side-group { margin-top: 30px; }
.pl-side-group > .sec-head { margin-top: 0; }
.pl-main { min-width: 0; }
.pl-pane { display: flex; flex-direction: column; gap: 22px; }
.pl-pane > .sec-head { margin: 4px 0 -10px; }
.pl-pane[hidden] { display: none; }
.pl-kpis { overflow: visible; position: relative; z-index: 1; }
.pl-kpis .kpi:last-child [data-tip]::after { left: auto; right: -8px; transform: translateY(4px); }
.pl-kpis .kpi:last-child [data-tip]:hover::after,
.pl-kpis .kpi:last-child [data-tip]:focus-visible::after { transform: none; }
.kpi-was { font: 600 .7rem var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
.kpi.is-former .kpi-value { color: var(--ink-2); }
.kpi-meter { margin-top: 10px; height: 4px; }
.kpi-sub b { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Current season: the league card, tinted in its tier colour. */
.cs-card { border-radius: var(--r-lg); overflow: hidden; background: var(--s1); }
.cs-top {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--tier, #888) 32%, #1b1b22) 0%, color-mix(in srgb, var(--tier, #888) 8%, #1b1b22) 100%);
}
.cs-top .emblem { flex-shrink: 0; }
.cs-main { flex: 1; min-width: 0; }
.cs-league { font: italic 800 1.05rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tier, var(--ink-2)); }
.cs-rs { margin-top: 4px; font: 700 2.3rem/1 var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-rs sup { font-size: .45em; margin-left: 2px; color: var(--ink-2); vertical-align: top; position: relative; top: .2em; }
.cs-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.cs-side small { color: var(--ink-2); font-size: .75rem; font-weight: 600; }
.cs-side b { font: italic 800 1.7rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.cs-meter { padding: 12px 18px 4px; }
.cs-meter-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: .75rem; color: var(--ink-3); font-weight: 600; }
.cs-meter-head b { color: var(--ink); }
.cs-table { width: 100%; padding: 8px 0 10px; }
.cs-table th, .cs-table td { background: none !important; height: 28px; font-size: .8rem; }
.cs-table th { height: 30px; font-size: .7rem; font-weight: 600; color: var(--ink-3); }
.cs-table td { font-weight: 600; }
.cs-table tbody tr[data-href]:hover td { color: var(--acc-hi); }
.cs-empty { padding: 14px 18px 18px; color: var(--ink-3); font-size: .8rem; }

/* Season peaks: banded groups, each season a tier-striped row. */
.peaks { border-radius: var(--r-lg); overflow: hidden; background: var(--s1); }
.pk-band {
  display: grid; grid-template-columns: minmax(0, 1fr) 56px 84px; gap: 8px; align-items: center; height: 38px; padding: 0 18px;
  background: var(--band); font-size: .7rem; font-weight: 600; color: var(--ink-3);
}
.pk-band b { font: italic 800 1.05rem var(--f-display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.pk-band span { text-align: right; }
.pk-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 56px 84px; gap: 8px 10px; align-items: center; min-height: 58px; padding: 8px 18px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier, #555) 18%, var(--row)) 0%, var(--row) 75%);
  box-shadow: inset 4px 0 0 var(--tier, #555); cursor: pointer; transition: filter .12s;
}
.pk-row + .pk-row { border-top: 1px solid #0000002e; }
.pk-row:hover { filter: brightness(1.15); }
.pk-row .rank-ic { width: 32px; height: 32px; }
.pk-name { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.pk-name small { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.pk-name small .badge-live { height: 16px; padding: 0 5px; font-size: .55rem; }
.pk-name b { font: 700 1.35rem var(--f-display); font-variant-numeric: tabular-nums; }
.pk-name b sup { font-size: .55em; color: var(--ink-2); margin-left: 2px; }
.pk-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pk-val.muted { font-weight: 600; }
.pk-more { display: flex; align-items: center; justify-content: center; gap: 4px; height: 42px; color: var(--acc-hi); font-weight: 600; font-size: .85rem; background: var(--s1); width: 100%; }
.pk-more:hover { color: #fff; }
.pk-more .material-icons { font-size: 20px; transition: transform .2s var(--ease); }
.peaks.is-open .pk-more .material-icons { transform: rotate(180deg); }
.peaks:not(.is-open) .pk-row.is-extra { display: none; }
.pk-foot { padding: 12px 16px 16px; background: var(--s1); }
.pk-foot .btn { width: 100%; }

/* Aliases: a plain two-column table. */
.aliases { border-radius: var(--r-lg); overflow: hidden; background: var(--s1); padding: 12px 18px 14px; }
.aliases table { font-size: .875rem; table-layout: fixed; }
.aliases th, .aliases td { background: none !important; padding: 4px 0; height: 26px; }
.aliases th { height: 24px; font-size: .7rem; color: var(--ink-3); }
.aliases td { font-weight: 700; }
.aliases td.num, .aliases th.num { width: 92px; text-align: right; white-space: nowrap; }
/* A long name wraps under itself instead of pushing the date out of the card. */
.aliases td:first-child { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; padding-right: 10px; }
.aliases tr.is-current td:first-child::after { content: 'current'; margin-left: 8px; padding: 1px 5px; border-radius: 3px; background: var(--acc); color: var(--acc-ink); font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; white-space: nowrap; }
.aliases .premium-info { margin-top: 10px; }

.pl-seasons .li { min-height: 54px; }
.li-noicon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-4); }
.pl-seasons { max-height: 520px; overflow-y: auto; }
.pl-names .li { gap: 12px; }
.pn-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--ink-4); flex-shrink: 0; position: relative; }
.pl-names .is-current .pn-dot { border-color: var(--acc); background: var(--acc); }
.pl-name-hidden { justify-content: flex-start; }
.pl-card-head .premium-info { margin-left: auto; }
.pl-scroll { max-height: 640px; overflow-y: auto; }
.pl-stale { margin-top: 16px; display: flex; align-items: center; gap: 6px; }
.pl-stale .msr { font-size: 16px; }
.ap-under { margin-left: 6px; height: 20px; font-size: .6875rem; }
.pf-former { height: 26px; }

@keyframes emblemIn { from { opacity: 0; transform: scale(.82) rotate(-6deg); } }

@media (max-width: 1100px) {
  .pl-layout { grid-template-columns: minmax(0, 1fr); }
  .pl-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
  .pl-side-group + .pl-side-group { margin-top: 0; }
  .pl-side-group:nth-child(n+3) { margin-top: 26px; }
}
@media (max-width: 860px) {
  .pf-cover { height: auto; min-height: 250px; }
  .pf-cover .pf-head { position: relative; flex-direction: column; align-items: flex-start; padding: 120px 18px 16px 18px; gap: 14px; }
  .pf-avatar { --pfc: 13px; left: 18px; top: 22px; width: 88px; height: 88px; }
  .pf-avatar .emblem { width: 72px !important; height: 72px !important; }
  .pf-flag { width: 24px; height: 24px; right: 0; bottom: 0; }
  .pf-flag .rank-ic { width: 18px; height: 18px; }
  .pf-actions { align-items: flex-start; width: 100%; }
  .pf-tags { justify-content: flex-start; }
  .pf-band { padding-left: 0; }
  .pf-band .tabs { padding-inline: 6px; }
}
@media (max-width: 720px) {
  .pl-sidebar { grid-template-columns: minmax(0, 1fr); }
  .pl-side-group + .pl-side-group { margin-top: 26px; }
  .pf-name { font-size: 2.4rem; }
}

/* ---------------------------------------------------------- chart cards -- */
.chart-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 16px 18px 6px; }
.cc-title h3 { font: 700 1.3rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.cc-meta { margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: var(--ink-3); font-size: .78rem; }
.cc-chip { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 600; }
.cc-chip .msr { font-size: 14px; color: var(--ink-3); }
.cc-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-delta.up { color: var(--up); } .cc-delta.down { color: var(--down); } .cc-delta.flat { color: var(--ink-3); }
.cc-dim { color: var(--ink-3); }
.cc-live { display: inline-flex; align-items: center; gap: 6px; }
.cc-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px var(--up-a12); }
.cc-next { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.cc-next:empty { display: none; }
.cc-next .msr { font-size: 14px; }
.cc-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cc-ranges { display: inline-flex; gap: 0; padding: 0; border-radius: var(--r-sm); border: 1px solid var(--line-3); overflow: hidden; }
.cc-range { height: 32px; min-width: 40px; padding: 0 10px; color: var(--ink-2); font: 700 .9rem var(--f-display); letter-spacing: .04em; font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
.cc-range + .cc-range { border-left: 1px solid var(--line-2); }
.cc-range:hover { color: #fff; background: #ffffff0a; }
.cc-range.is-on { background: var(--acc); color: var(--acc-ink); }
.cc-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: var(--r-sm);
  background: #2e2e38; color: var(--ink); font-weight: 600; font-size: .78rem; transition: background .15s, color .15s;
}
.cc-btn:hover { background: #3a3a45; }
.cc-btn .msr, .cc-btn .material-icons { font-size: 18px; }
.cc-icon { width: 34px; padding: 0; justify-content: center; }
.chart-card-plot { padding: 4px 10px 12px; min-height: 120px; }

.chartz { position: relative; }
.chartz-svg { width: 100%; height: auto; display: block; overflow: visible; outline: none; touch-action: pan-y; }
.chartz-svg text, .chartv-svg text { font-family: var(--f-ui); font-variant-numeric: tabular-nums; }
.chartz-line.is-drawing { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chartz-tip, .chartv-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 140px; padding: 9px 11px; border-radius: var(--r-sm);
  background: #2a2a34f2; box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; gap: 2px; font-size: .75rem; color: var(--ink-2);
}
.chartz-tip-title, .chartv-tip-title { color: var(--ink-3); font-size: .6875rem; font-weight: 600; }
.chartz-val { font: 700 1.3rem var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.chartz-row { display: flex; gap: 6px; }
.chartz-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.chartz-delta.up { color: var(--up); } .chartz-delta.down { color: var(--down); }
.chartz-flat { color: var(--ink-3); }
.chartz-sub, .chartv-sub { display: flex; align-items: center; gap: 5px; color: var(--ink-3); }
.chartz-tip-ic { width: 16px; height: 16px; }
.chartz-reset {
  position: absolute; top: 4px; right: 8px; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px;
  border-radius: var(--r-xs); background: #33333d; font-size: .72rem; font-weight: 700; color: var(--ink);
}
.chartz-reset .material-icons { font-size: 15px; }
.chartz-caption, .chartv-caption { padding: 2px 10px 0; color: var(--ink-4); font-size: .6875rem; }
.chartz-touch-hint { display: none; }
@media (hover: none) { .chartz-desktop-hint { display: none; } .chartz-touch-hint { display: inline; } }
.chartv-scroll { overflow-x: auto; scrollbar-width: thin; }
.chartv { position: relative; }
.chartv-svg { width: 100%; height: auto; display: block; outline: none; }
.chartv-bar { transition: opacity .15s; transform-box: fill-box; transform-origin: bottom; animation: growY .7s var(--ease) both; }
.chartv-bar:nth-child(odd) { animation-delay: .04s; }
@keyframes growY { from { transform: scaleY(0); } }
.modal-chart { min-height: 420px; }

/* ------------------------------------------------------------ insights -- */
.ins-flow { display: flex; flex-direction: column; gap: 22px; }
.ins-flow > .section-head, .pl-log-head { display: flex; flex-direction: column; gap: 4px; }
.ins-flow > .section-head h2, .pl-log-head h2 {
  display: flex; align-items: center; gap: 12px; font: italic 800 1.65rem/1 var(--f-display); text-transform: uppercase;
}
.ins-flow > .section-head h2::before, .pl-log-head h2::before { content: ''; width: 6px; height: 20px; background: var(--acc); transform: skewX(-18deg); }
.ins-flow > .section-head p, .pl-log-head p { max-width: 80ch; line-height: 1.55; }
.ins-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ins-card { padding: 0; overflow: hidden; }
.ins-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; height: 46px; background: var(--band); }
.ins-card-head h3 { display: flex; align-items: center; gap: 8px; font: 700 1.05rem var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.ins-card-head h3 .msr { font-size: 18px; color: var(--ink-3); }
.ins-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-xs); border: 1px solid var(--line-3); color: var(--ink-2); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ins-card > .ins-grid:only-child { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ins-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding: 14px 18px; }
.ins-v { font: 700 1.6rem/1.05 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ins-l { font-size: .85rem; font-weight: 500; color: var(--ink-2); }
.ins-sub { font: 500 .75rem var(--f-ui); color: var(--ink-3); margin-left: 3px; }
.ins-league { display: flex; align-items: center; gap: 8px; padding: 12px 18px 0; font-weight: 700; }
.ins-league .rank-ic { width: 24px; height: 24px; }
.ins-meter { padding: 12px 18px 0; }
.ins-meter-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: .8rem; font-weight: 600; }
.ins-meter-track { height: 6px; border-radius: 6px; background: #ffffff14; overflow: hidden; }
.ins-meter-fill { height: 100%; border-radius: inherit; background: var(--acc); transform-origin: left; animation: growX 1s var(--ease) both; }
.ins-card > p.small { padding: 12px 18px 0; }
.ins-cuts { list-style: none; padding: 12px 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.ins-cuts li { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-2); }
.ins-cuts .msr { font-size: 16px; color: var(--ink-3); }
.ins-cuts .ins-done, .ins-cuts .ins-done .msr { color: var(--up); }
.ins-cuts:empty { display: none; }
.ins-flow .table-wrap { background: var(--s1); border-radius: var(--r-lg); }
.ins-me td, tr.ins-me td { background: #333010 !important; color: var(--ink); font-weight: 700; }
.ins-cross-grid, .ins-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ins-cross { list-style: none; }
.ins-cross li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 0 18px; height: 46px; background: var(--row); }
.ins-cross li:nth-child(even) { background: var(--row-alt); }
.ins-cross-who { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-cross-who:hover { color: var(--acc-hi); }
.ins-cross-move { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.ins-cross-move .msr { font-size: 16px; color: var(--ink-4); }
.is-up .ins-card-head h3 .msr { color: var(--up); }
.is-down .ins-card-head h3 .msr { color: var(--down); }
.ins-note { margin-top: -8px; }
.ins-facts { list-style: none; }
.ins-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 0 18px; height: 44px; align-items: center; background: var(--row); }
.ins-facts li:nth-child(even) { background: var(--row-alt); }
.ins-fact-k { color: var(--ink-2); }
.ins-fact-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.ins-core { list-style: none; }
.ins-core li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 0 18px; height: 46px; background: var(--row); }
.ins-core li:nth-child(even) { background: var(--row-alt); }
.ins-core li.is-me { background: #333010; }
.ins-core-n { font: 700 1rem var(--f-display); color: var(--ink-3); text-align: center; }
.ins-core-who { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-core-score { font: 700 1.05rem var(--f-display); font-variant-numeric: tabular-nums; }
.ins-chart { padding: 8px; }
.ins-leagues, .ins-miles { list-style: none; }
.ins-leagues li { display: grid; grid-template-columns: 24px 110px minmax(0, 1fr) 44px; align-items: center; gap: 10px; padding: 0 18px; height: 42px; background: var(--row); }
.ins-leagues li:nth-child(even), .ins-miles li:nth-child(even) { background: var(--row-alt); }
.ins-leagues .rank-ic { width: 24px; height: 24px; }
.ins-lg-name { font-weight: 700; font-size: .82rem; }
.ins-lg-bar { height: 6px; border-radius: 6px; background: #ffffff14; overflow: hidden; }
.ins-lg-bar span { display: block; height: 100%; border-radius: inherit; background: var(--acc); transform-origin: left; animation: growX 1s var(--ease) both; }
.ins-lg-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ins-miles li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 18px; height: 46px; background: var(--row); }
.ins-miles .msr { font-size: 18px; color: var(--ink-3); }
.pl-up { color: var(--up) !important; }
.pl-down { color: var(--down) !important; }

/* ------------------------------------------------------------- sessions -- */
.pl-log-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--s1); border-radius: var(--r-lg); overflow: hidden; margin: 12px 0 16px; padding: 6px 4px; }
.pl-log-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; }
.pll-l { font-size: .85rem; font-weight: 500; color: var(--ink-2); }
.pll-v { font: 700 1.6rem/1.05 var(--f-display); font-variant-numeric: tabular-nums; }
.pll-v.up { color: var(--up); } .pll-v.down { color: var(--down); }
#logBox > .table-wrap { background: var(--s1); border-radius: var(--r-lg); }
.pl-res { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-xs); border: 1px solid; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pl-res.up { color: var(--up); background: var(--up-a12); border-color: #3ddc8455; }
.pl-res.down { color: var(--down); background: var(--down-a12); border-color: #ff526355; }
.pl-rd { display: inline-flex; align-items: center; height: 16px; padding: 0 4px; margin-left: 4px; border: 1px solid currentColor; border-radius: 3px; font-size: .64rem; font-weight: 700; vertical-align: 1px; }
tr.pl-new { animation: rise .35s var(--ease) both; }
.league-cell { white-space: nowrap; }
.league-cell .rank-ic { margin-right: 7px; }
.pl-more { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; color: var(--ink-3); font-size: .8rem; }
.pl-more:not(.is-busy) { visibility: hidden; height: 1px; padding: 0; }
.pl-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-3); border-top-color: var(--acc); animation: spin .8s linear infinite; }

/* --------------------------------------------------------------- events -- */
.ev-section + .ev-section { margin-top: 22px; }
.ev-h { margin-bottom: 8px; font: 700 1rem var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
.event-list { list-style: none; border-radius: var(--r); overflow: hidden; }
.event-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--row); }
.event-item:nth-child(even) { background: var(--row-alt); }
.ev-ic { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--s3); color: var(--ink-2); }
.ev-ic .msr { font-size: 18px; }
.ev-ic.up { color: var(--up); background: var(--up-a12); }
.ev-ic.down { color: var(--down); background: var(--down-a12); }
.ev-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ev-name, .ev-rename { font-weight: 700; color: var(--ink); }
.ev-rename { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ev-old { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.ev-arrow { font-size: 16px; color: var(--ink-4); }
.ev-text { font-size: .75rem; color: var(--ink-3); }
.ev-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; font-size: .75rem; }
.ev-rank { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ev-day { color: var(--ink-4); }

@media (max-width: 720px) {
  .ins-cross-grid, .ins-pair { grid-template-columns: minmax(0, 1fr); }
  .ins-card > .ins-grid:only-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-log-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================ LEADERBOARDS == */
.lbh-live { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; }
.lbh-feature { padding: 20px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; background: linear-gradient(160deg, #2e2a0c 0%, var(--s1) 60%); }
.lbh-feature-top { display: flex; align-items: center; gap: 12px; }
.lbh-feature-top b { display: block; font: italic 800 1.9rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.lbh-feature-top small { color: var(--ink-3); font-size: .78rem; }
.lbh-ic { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--s3); color: var(--ink-2); transition: background .2s, color .2s; }
.lbh-ic .material-icons { font-size: 21px; }
.lbh-feature .lbh-ic { background: var(--acc); color: var(--acc-ink); }
.lbh-go { margin-left: auto; color: var(--ink-4); transition: color .2s, transform .25s var(--ease); }
a:hover > .lbh-go, a:hover .lbh-feature-top .lbh-go { color: #fff; transform: translateX(3px); }
.lbh-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; }
.lbh-pod {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 14px; border-radius: var(--r);
  background: #ffffff08; text-align: center; min-width: 0; animation: rise .6s var(--ease) both;
}
.lbh-pod.is-1 { padding-top: 24px; background: linear-gradient(180deg, #e9aa1326, #ffffff05); animation-delay: .1s; }
.lbh-pod.is-3 { animation-delay: .2s; }
.lbh-pod-name { max-width: 100%; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbh-pod-score { font: 700 1.2rem var(--f-display); font-variant-numeric: tabular-nums; }
.lbh-pod-score small { color: var(--ink-3); font: 600 .7rem var(--f-ui); }
.lbh-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.lbh-mode { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-lg); background: var(--s1); transition: background .2s; }
.lbh-mode:hover { background: var(--s2); }
.lbh-mode:hover .lbh-ic { background: var(--acc); color: var(--acc-ink); }
.lbh-mode-name { font: 700 1.1rem var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.lbh-archive { overflow: hidden; }
.lbh-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 18px; background: var(--row); }
.lbh-row:nth-child(even) { background: var(--row-alt); }
.lbh-season { display: flex; flex-direction: column; }
.lbh-season b { font: italic 800 1.35rem/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; transition: color .15s; }
.lbh-season:hover b { color: var(--acc-hi); }
.lbh-season small { color: var(--ink-3); font-size: .72rem; }
.lbh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lbh-chip { height: 28px; }
@media (max-width: 1020px) { .lbh-live { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .lbh-modes { grid-template-columns: minmax(0, 1fr); }
  .lbh-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ============================================================== LEADERBOARD == */
.lb-banner .banner-row { align-items: flex-end; }
.lb-titlebox h1 { gap: 10px 14px; }
.lb-mode { color: var(--acc); }
.lb-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.lb-field { min-width: 190px; }
.lb-field .sel-btn { background: #121217e6; }
.lb-platforms { height: 40px; align-items: stretch; }
.lb-platforms button, .lb-platforms a { height: 38px; }
.lb-page > * + * { margin-top: 22px; }
.lb-chart-panel .chart-card-plot { padding-bottom: 0; }
.lb-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 18px; }
.lb-key {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 5px; border-radius: var(--r-xs);
  background: #ffffff0a; font-size: .78rem; color: var(--ink-2); font-weight: 600;
}
.lb-key b { font-variant-numeric: tabular-nums; color: #fff; }
.lb-table-card .card-head { flex-wrap: wrap; }
.lb-table-card .card-meta { margin-left: 6px; font-weight: 500; }
.lb-search { width: min(360px, 100%); }
.lb-table th.chg-col, .lb-table td.chg { width: 1%; text-align: center; padding-inline: 4px 10px; }
.lb-table .player-cell .s-av { width: 32px; height: 32px; font-size: .9rem; }
.pc-plats { display: flex; gap: 10px; }
.pc-plats span { display: inline-flex; align-items: center; gap: 4px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.pc-plats svg { width: 12px; height: 12px; opacity: .6; flex-shrink: 0; }
.lb-table td { height: 56px; }
.lb-modal-tiles { margin-bottom: 20px; }
.lb-modal-head { margin: 24px 0 10px; }
.lb-modal-head h2 { font: 700 1.2rem var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.lb-table th.num:first-child, .lb-table td.num:first-child { width: 1%; white-space: nowrap; }
@media (max-width: 1020px) {
  .lb-filters { width: 100%; }
  .lb-field { flex: 1 1 160px; }
}
@media (max-width: 720px) {
  .lb-search { width: 100%; }
  .pc-plats span:nth-child(n+2) { display: none; }
}

/* =================================================================== MOVERS == */
.mv-page > * + * { margin-top: 22px; }
.mv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.mv-card .mv-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 17px; }
.mv-card .card-title > .mv-ic { display: grid; }
.mv-card.is-up .mv-ic { color: var(--up); background: var(--up-a12); }
.mv-card.is-down .mv-ic { color: var(--down); background: var(--down-a12); }
.mv-ranks { white-space: nowrap; }
.mv-ranks .material-icons { font-size: 16px; color: var(--ink-4); margin: 0 2px; }
.mv-ranks b { color: var(--ink); }
.mv-move { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-xs); border: 1px solid; font: 700 1rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.mv-move.up { color: var(--up); background: var(--up-a12); border-color: #3ddc8455; }
.mv-move.down { color: var(--down); background: var(--down-a12); border-color: #ff526355; }
.mv-sd { display: block; font-size: .72rem; line-height: 1.1; font-weight: 600; }
td .score { font: 700 1.1rem var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.mv-league { display: flex; align-items: center; gap: 2px; }
.mv-league .material-icons { font-size: 14px; color: var(--ink-4); }
.mv-league b { color: var(--up); font-weight: 700; }
.mv-card.is-down .mv-league b { color: var(--down); }
.mv-datenav { display: flex; align-items: center; gap: 0; border-radius: var(--r-sm); background: #121217e6; border: 1px solid var(--line-3); overflow: hidden; }
.mv-nav-btn { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink-2); transition: background .15s, color .15s; }
.mv-nav-btn:hover { background: var(--acc); color: var(--acc-ink); }
.mv-nav-btn.is-disabled { opacity: .25; pointer-events: none; }
.mv-date { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 40px; font-weight: 700; white-space: nowrap; border-inline: 1px solid var(--line-2); }
.mv-date .material-icons { font-size: 18px; color: var(--ink-3); }
.kpi.tone-up .kpi-value { color: var(--up); }
.kpi.tone-down .kpi-value { color: var(--down); }
#moversRoot.is-loading .mv-page { opacity: .5; transition: opacity .2s; }
@media (max-width: 1020px) { .mv-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .mv-datenav { width: 100%; justify-content: space-between; } }

/* ==================================================================== CLUBS == */
.tag-chip.club-big { height: 26px; line-height: 26px; padding: 0 10px; font-size: .9rem; }
.club-note { margin-top: 14px; max-width: 90ch; }
.bar-cell .bar-track { width: 90px; }

/* ===================================================================== CLUB == */
.club-banner::after {
  background:
    radial-gradient(460px 240px at 80px 60%, hsl(var(--club-h) 80% 55% / .2), transparent 70%),
    linear-gradient(90deg, var(--bg) 0%, #0e0e12b0 50%, #0e0e1266 100%);
}
.club-crest {
  position: relative; width: 104px; height: 116px; flex-shrink: 0; display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 14%, 100% 64%, 50% 100%, 0 64%, 0 14%);
  background: linear-gradient(160deg, hsl(var(--club-h) 70% 52%), hsl(calc(var(--club-h) + 40) 70% 30%));
  animation: emblemIn .7s var(--ease) both;
}
.club-crest::after { content: ''; position: absolute; inset: 3px; clip-path: inherit; background: linear-gradient(160deg, #ffffff22, transparent 50%); }
.club-crest span { position: relative; z-index: 1; font: 700 1.7rem/1 var(--f-display); letter-spacing: .04em; color: #fff; text-shadow: 0 2px 10px #0006; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.club-page .club-note { margin: 10px 0 20px; }
.member-list { display: flex; flex-direction: column; max-height: 640px; overflow-y: auto; }
.member-chip { display: flex; flex-shrink: 0; align-items: center; gap: 10px; padding: 0 18px; height: 46px; background: var(--row); transition: background .12s; min-width: 0; }
.member-chip:nth-child(even) { background: var(--row-alt); }
.member-chip:hover { background: var(--row-hover); }
.member-chip .s-av { width: 28px; height: 28px; font-size: .85rem; background: hsl(var(--club-h, 340) 40% 22%); color: hsl(var(--club-h, 340) 80% 80%); }
.m-name { display: flex; align-items: baseline; min-width: 0; font-weight: 600; color: var(--ink-2); }
.member-chip:hover .pn-name { color: #fff; }
@media (max-width: 720px) { .club-crest { width: 76px; height: 86px; } .club-crest span { font-size: 1.2rem; } }

/* ================================================================== SEASONS == */
.sa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sa-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; overflow: hidden; box-shadow: inset 4px 0 0 var(--tier, var(--s4)); }
.sa-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, color-mix(in srgb, var(--tier, #ffffff) 14%, transparent), transparent 60%); }
.sa-card.is-live { grid-column: span 2; box-shadow: inset 4px 0 0 var(--acc); }
.sa-top { display: flex; align-items: center; justify-content: space-between; position: relative; }
.sa-name { font: italic 800 2rem/.95 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.sa-card.is-live .sa-name { font-size: 2.8rem; }
.sa-champ { display: flex; align-items: center; gap: 14px; position: relative; }
.sa-champ-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.sa-champ-n { font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
.sa-card:hover .sa-champ-n { color: var(--acc-hi); }
.sa-champ-s { color: var(--ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; }
.sa-stats { display: flex; gap: 0; margin-top: auto; padding-top: 4px; position: relative; }
.sa-stats span { flex: 1; display: flex; flex-direction: column; color: var(--ink-2); font-size: .8rem; font-weight: 500; }
.sa-stats b { font: 700 1.3rem var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }

.season-nav { display: flex; gap: 8px; }
.season-page > * + * { margin-top: 22px; }
.champion-card {
  display: flex; align-items: center; gap: 22px; padding: 22px 24px; overflow: hidden;
  background: linear-gradient(100deg, color-mix(in srgb, var(--tier, #e9aa13) 18%, var(--s1)), var(--s1) 55%);
}
.ch-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ch-name { display: flex; font: italic 800 2.8rem/.95 var(--f-display); }
.ch-name .pn-tag { font: 600 .9rem var(--f-ui); align-self: flex-end; margin: 0 0 4px 2px; }
.ch-sub { color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ch-go { margin-left: auto; color: var(--ink-4); transition: color .2s, transform .25s var(--ease); }
.champion-card:hover .ch-go { color: #fff; transform: translateX(3px); }
.season-split { grid-template-columns: minmax(0, 1fr) 380px; }
.mode-card { overflow: hidden; }
.mc-head { display: flex; align-items: center; gap: 8px; padding: 0 18px; height: 46px; background: var(--band); }
.mc-head b { font: 700 1.05rem var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.mc-head .card-meta { margin-left: auto; }
.mc-head .material-icons { font-size: 18px; color: var(--ink-4); transition: color .15s, transform .2s var(--ease); }
.mc-head:hover .material-icons { color: #fff; transform: translateX(2px); }
.mode-card .li { min-height: 44px; }
.mode-card .li-value { font-size: 1rem; }
.mode-card .li-value small { font: 500 .7rem var(--f-ui); }
@media (max-width: 1020px) {
  .sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .season-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .sa-grid { grid-template-columns: minmax(0, 1fr); }
  .sa-card.is-live { grid-column: auto; }
  .champion-card { flex-wrap: wrap; gap: 14px; }
  .ch-name { font-size: 1.8rem; }
}

/* ==================================================================== RANKS == */
.ranks-page > * + * { margin-top: 22px; }
.rk-strip { display: flex; height: 16px; border-radius: 4px; overflow: hidden; gap: 2px; }
.rk-seg { background: var(--tier); min-width: 4px; transform-origin: left; animation: growX .9s var(--ease) both; transition: filter .15s; }
.rk-seg:hover { filter: brightness(1.25); }
.rk-seg[data-tip]::after { bottom: calc(100% + 10px); }
.rk-strip-keys { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; color: var(--ink-2); font-size: .8rem; font-weight: 600; }
.rk-strip-keys span { display: inline-flex; align-items: center; gap: 6px; }
.rk-strip-keys b { font-variant-numeric: tabular-nums; }
#ranksTiers { display: flex; flex-direction: column; gap: 14px; }
.rk-tier { display: grid; grid-template-columns: 230px minmax(0, 1fr); overflow: hidden; }
.rk-tier-head { display: flex; align-items: center; gap: 14px; padding: 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 22%, var(--s1)), var(--s1)); box-shadow: inset 4px 0 0 var(--tier); }
.rk-tier-head h2 { font: italic 800 2rem/1 var(--f-display); text-transform: uppercase; color: var(--tier); }
.rk-tier-head b { color: var(--ink); }
.rk-divs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--bg); }
.rk-tier:first-child .rk-divs { grid-template-columns: minmax(0, 1fr); }
.rk-div { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 16px; background: var(--row); }
.rk-div img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 8px #0008); }
.rk-div.is-empty img { opacity: .45; filter: grayscale(.6); }
.rk-div-main { display: flex; flex-direction: column; min-width: 0; }
.rk-div-main b { font-weight: 700; }
.rk-div-main span { font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rk-div-count { display: flex; flex-direction: column; align-items: flex-end; }
.rk-div-count b { font: 700 1.3rem var(--f-display); font-variant-numeric: tabular-nums; }
.rk-div-count span { font-size: .72rem; color: var(--ink-3); }
.rk-meter { grid-column: 1 / -1; height: 4px; }
@media (max-width: 1020px) {
  .rk-tier { grid-template-columns: minmax(0, 1fr); }
  .rk-divs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) { .rk-divs { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================== PLAYERS == */
.dir-search { margin-top: 22px; max-width: 760px; }
.gs-filter-toggle {
  position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-xs);
  color: var(--ink-2); background: #2a2a33; transition: color .15s, background .15s;
}
.gs-filter-toggle:hover, .gs-filter-toggle[aria-expanded="true"] { color: #fff; background: #363640; }
.gs-filter-toggle.has-filters { color: #fff; background: var(--acc-a30); }
.gs-filter-count {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--acc); color: var(--acc-ink); font-size: .6rem; font-weight: 700; display: grid; place-items: center;
}
.dir-filters {
  margin-top: 12px; max-width: 760px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 10px;
  padding: 16px; border-radius: var(--r-lg); background: #1b1b22f2; animation: popIn .18s var(--ease);
}
.dir-filters .input, .gs-input, .dir-filters .sel-btn { height: 38px; }
input.input[type="number"] { -moz-appearance: textfield; }
input.input[type="number"]::-webkit-inner-spin-button { opacity: .4; }
.player-cell > .s-av { width: 32px; height: 32px; font-size: .9rem; }
@media (max-width: 720px) { .dir-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =================================================================== SEARCH == */
.gs-hero { text-align: left; }
.gs-searchwrap { position: relative; max-width: 760px; margin-top: 22px; }
.gs-searchwrap .omni { margin-top: 0; max-width: none; }
.gs-tabs { margin-top: 20px; }
.gs-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-pop); width: min(520px, 100%);
  border-radius: var(--r-lg); background: #1f1f27; box-shadow: var(--shadow-pop); overflow: hidden;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; visibility: hidden;
  transition: opacity .16s, transform .2s var(--ease), visibility 0s .2s;
}
.gs-pop.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.gs-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 48px; background: var(--band); }
.gs-pop-title { display: flex; align-items: center; gap: 8px; font: 700 1.05rem var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.gs-pop-title .material-icons { font-size: 18px; color: var(--ink-3); }
.gs-pop-head-actions { display: flex; gap: 4px; }
.gs-pop-reset, .gs-pop-close { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: var(--r-xs); color: var(--ink-2); font-size: .75rem; font-weight: 700; }
.gs-pop-reset:hover, .gs-pop-close:hover { background: var(--s4); color: #fff; }
.gs-pop-reset .material-icons, .gs-pop-close .material-icons { font-size: 16px; }
.gs-pop-close { display: none; }
.gs-pop-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.gs-pop-foot { display: none; }
.gs-frow { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gs-flabel { font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.gs-frow-split { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.gs-fnote { display: flex; gap: 10px; color: var(--ink-2); font-size: .8125rem; line-height: 1.5; }
.gs-fnote .material-icons { color: var(--ink-3); }
.gs-leagues, .gs-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-lg {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-sm); background: #121217; border: 1px solid var(--line-3);
  transition: border-color .15s, background .15s, transform .15s var(--ease);
}
.gs-lg:hover { transform: translateY(-1px); border-color: #ffffff4d; }
.gs-lg.is-on { border-color: var(--hex, var(--acc)); background: color-mix(in srgb, var(--hex, var(--acc)) 18%, transparent); }
.gs-lg .rank-ic { width: 30px; height: 30px; }
.gs-lg-any { width: auto; padding: 0 12px; font-weight: 700; font-size: .78rem; color: var(--ink-2); }
.gs-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-sm);
  background: #121217; border: 1px solid var(--line-3); color: var(--ink-2); font-size: .78rem; font-weight: 700;
  transition: border-color .15s, background .15s, color .15s;
}
.gs-pill .material-icons { font-size: 16px; }
.gs-pill svg { width: 14px; height: 14px; }
.gs-pill:hover { color: #fff; border-color: #ffffff4d; }
.gs-pill.is-on { color: #fff; border-color: var(--accent, var(--acc)); background: color-mix(in srgb, var(--accent, var(--acc)) 20%, transparent); }
.gs-pill-accent .material-icons { color: var(--accent); }
.gs-scope { display: flex; align-items: center; gap: 8px; padding: 0 18px; height: 42px; background: var(--band); color: var(--ink-2); font-size: .8rem; font-weight: 600; }
.gs-scope .material-icons { font-size: 16px; }
.gs-scope b { color: var(--ink); margin-left: auto; font-variant-numeric: tabular-nums; }
.gs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 16px; }
.gs-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r);
  background: var(--s3); transition: background .15s;
}
.gs-card:hover { background: var(--s4); }
.gs-card-tag { font: 700 1.6rem/1 var(--f-display); letter-spacing: .04em; }
.gs-card-meta { display: flex; gap: 12px; color: var(--ink-3); font-size: .78rem; }
.gs-card-meta span { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.gs-card-meta .material-icons { font-size: 15px; }
.gs-card-go { position: absolute; top: 14px; right: 14px; font-size: 20px; color: var(--ink-4); transition: color .15s, transform .2s var(--ease); }
.gs-card:hover .gs-card-go { color: #fff; transform: translateX(2px); }
.gs-feed { display: flex; flex-direction: column; }
.gs-ev { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 18px; background: var(--row); animation: rise .4s var(--ease) both; }
.gs-ev:nth-child(even) { background: var(--row-alt); }
.gs-ev-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.gs-ev-ic .material-icons { font-size: 18px; }
.gs-ev-title { font: 700 .85rem var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.gs-ev-text { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; color: var(--ink-2); }
.gs-ev-player { font-weight: 700; color: var(--ink); }
.gs-ev-player:hover { color: var(--acc-hi); }
.gs-old { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.gs-arrow { font-size: 16px; color: var(--ink-4); }
.gs-ev-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: .72rem; color: var(--ink-3); }
.gs-ev-league { display: inline-flex; align-items: center; gap: 4px; }
.gs-ev-time { font-size: .72rem; color: var(--ink-4); white-space: nowrap; }
.gs-tips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gs-tip { padding: 20px; }
.gs-tip .material-icons { font-size: 24px; color: var(--acc); margin-bottom: 12px; }
.gs-tip b { display: block; margin-bottom: 4px; font: 700 1.1rem var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.gs-tip p { color: var(--ink-3); font-size: .8125rem; line-height: 1.55; }
.gs-section .gs-scope { border-top: 0; }
@media (max-width: 1020px) { .gs-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .gs-pop { position: fixed; inset: 0; width: auto; border-radius: 0; display: flex; flex-direction: column; }
  .gs-pop-close { display: inline-flex; }
  .gs-pop-body { flex: 1; overflow-y: auto; }
  .gs-pop-foot { display: block; padding: 12px 14px; border-top: 1px solid var(--line); }
  .gs-pop-done { width: 100%; }
  .gs-frow-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gs-frow-split > :first-child { grid-column: 1 / -1; }
  .gs-tips { grid-template-columns: minmax(0, 1fr); }
  .gs-filters-open { overflow: hidden; }
}

/* ================================================================== COMPARE == */
.cmp-form { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.cmp-field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cmp-field label { font: 700 .9rem var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cmp-field.is-a label { color: var(--acc-hi); }
.cmp-field.is-b label { color: var(--info); }
.cmp-field .input { height: 46px; background: #121217e6; }
.cmp-field.is-a .input:focus { border-color: var(--acc); }
.cmp-field.is-b .input:focus { border-color: var(--info); box-shadow: 0 0 0 3px #4aa8ff29; }
.cmp-vs {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; position: relative; overflow: hidden;
  background: #2a2a33; font: 700 1.05rem var(--f-display);
}
.cmp-vs .material-icons { position: absolute; font-size: 20px; opacity: 0; transform: rotate(-90deg); transition: opacity .2s, transform .3s var(--ease); }
.cmp-vs span:first-child { transition: opacity .2s; }
.cmp-vs:hover span:first-child { opacity: 0; }
.cmp-vs:hover .material-icons { opacity: 1; transform: none; }
.cmp-heads { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 16px; margin-bottom: 16px; }
.cmp-player { display: flex; align-items: center; gap: 16px; padding: 20px; overflow: hidden; box-shadow: inset 4px 0 0 var(--acc); background: linear-gradient(100deg, #f5d4001f, var(--s1) 60%); }
.cmp-player.is-b { flex-direction: row-reverse; text-align: right; box-shadow: inset -4px 0 0 var(--info); background: linear-gradient(260deg, #4aa8ff1f, var(--s1) 60%); }
.cmp-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cmp-player.is-b .cmp-id { align-items: flex-end; }
.cmp-id .chip { align-self: flex-start; }
.cmp-player.is-b .cmp-id .chip { align-self: flex-end; }
.cmp-name { display: flex; font: italic 800 2.3rem/.95 var(--f-display); min-width: 0; }
.cmp-name .pn-tag { font: 600 .85rem var(--f-ui); align-self: flex-end; margin-bottom: 3px; }
.cmp-sub { color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.cmp-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 8px; }
.cmp-score b { font: 700 2.8rem/1 var(--f-display); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cmp-score b.is-lead { color: var(--gold); }
.cmp-score span { font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.cmp-table { overflow: hidden; }
.cmp-group { padding: 0 18px; height: 40px; display: grid; place-items: center; background: var(--band); font: 700 .95rem var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1.2fr) minmax(0, 1fr); align-items: center; gap: 16px; min-height: 56px; padding: 8px 18px; background: var(--row); }
.cmp-row:nth-child(odd) { background: var(--row-alt); }
.cmp-val { font: 700 1.3rem var(--f-display); font-variant-numeric: tabular-nums; color: var(--ink-2); display: flex; align-items: center; }
.cmp-val.lose { color: var(--ink-4); }
.cmp-val .league { font: 600 .875rem var(--f-ui); }
.cmp-val.is-b { justify-content: flex-end; }
.cmp-val.win { color: var(--ink); }
.cmp-val.is-a.win::before, .cmp-val.is-b.win::after { content: ''; width: 6px; height: 6px; border-radius: 50%; margin: 0 8px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.cmp-val.is-b.win::after { order: 2; }
.cmp-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cmp-label { font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.cmp-bar { display: flex; width: 100%; height: 6px; border-radius: 6px; overflow: hidden; gap: 2px; background: #ffffff0d; }
.cmp-bar i { display: block; height: 100%; transform-origin: center; animation: growX .9s var(--ease) both; }
.cmp-bar i.a { background: var(--acc); border-radius: 6px 0 0 6px; }
.cmp-bar i.b { background: var(--info); border-radius: 0 6px 6px 0; }
.cmp-bar.is-empty { background: repeating-linear-gradient(90deg, #ffffff0d 0 6px, transparent 6px 10px); }
@media (max-width: 1020px) {
  .cmp-form { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .cmp-form .btn { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .cmp-form { grid-template-columns: minmax(0, 1fr); }
  .cmp-vs { justify-self: center; }
  .cmp-heads { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cmp-score { grid-column: 1 / -1; grid-row: 2; flex-direction: row; gap: 12px; }
  .cmp-player, .cmp-player.is-b { flex-direction: column; text-align: center; }
  .cmp-player .cmp-id, .cmp-player.is-b .cmp-id { align-items: center; }
  .cmp-name { font-size: 1.4rem; }
  .cmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; padding: 8px 12px; }
  .cmp-val { font-size: 1.05rem; }
  .cmp-player .pc-plats { display: none; }
}

/* ================================================================== WIDGETS == */
.wb { display: flex; flex-direction: column; gap: 22px; }
.wb-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 22px; align-items: start; }
.wb-panel, .wb-out { background: var(--s1); border-radius: var(--r-lg); overflow: hidden; }
.wb-tabs { display: flex; gap: 0; padding: 0 8px; background: #24242d; overflow-x: auto; scrollbar-width: none; }
.wb-tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 50px; padding: 0 14px;
  color: var(--ink-2); font-weight: 600; font-size: .875rem; white-space: nowrap; transition: color .15s;
}
.wb-tab .material-icons { font-size: 18px; }
.wb-tab:hover { color: #fff; }
.wb-tab.is-on { color: #fff; }
.wb-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--acc); animation: tabIn .25s var(--ease); }
.wb-pane, .wb-outpane { display: none; padding: 18px; flex-direction: column; gap: 8px; }
.wb-pane.is-on, .wb-outpane.is-on { display: flex; animation: fadeIn .2s; }
.wb-l { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.wb-l:first-child { margin-top: 0; }
.wb-v { font: 600 .75rem var(--f-mono); color: var(--ink-2); }
.wb-hint { color: var(--ink-3); font-size: .78rem; line-height: 1.55; }
.wb-search { position: relative; }
.wb-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wb-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: var(--r-sm);
  background: #121217; border: 1px solid var(--line-3); color: var(--ink-2); font-weight: 700; font-size: .8125rem; text-align: left;
  transition: border-color .15s, background .15s, color .15s;
}
.wb-choice .material-icons { font-size: 22px; margin-bottom: 6px; color: var(--ink-3); }
.wb-choice small { font-weight: 500; font-size: .7rem; color: var(--ink-4); }
.wb-choice:hover { border-color: #ffffff4d; color: #fff; }
.wb-choice.is-on { border-color: var(--acc); background: var(--acc-a16); color: #fff; }
.wb-choice.is-on .material-icons { color: var(--acc); }
.wb-choices-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-choices-2 .wb-choice { flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 9px; }
.wb-choices-2 .wb-choice .material-icons { margin: 0; }
.wb-checks { display: flex; flex-direction: column; gap: 2px; }
.wb-check { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-xs); cursor: pointer; color: var(--ink-2); font-weight: 500; transition: background .12s; }
.wb-check:hover { background: var(--s3); }
.wb-check input { appearance: none; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid #ffffff4d; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.wb-check input:checked { background: var(--acc); border-color: var(--acc); }
.wb-check input:checked::after { content: ''; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--s4); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--s4); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; border: 3px solid var(--acc); box-shadow: 0 2px 6px #0008; transition: transform .15s; }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--acc); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
.wb-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-swatches button { width: 30px; height: 30px; border-radius: 6px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px #ffffff22; transition: transform .15s var(--ease), border-color .15s; }
.wb-swatches button:hover { transform: translateY(-2px); }
.wb-swatches button.is-on { border-color: #fff; }
.wb-color { display: flex; gap: 8px; }
.wb-color input[type="color"] { width: 46px; height: 40px; padding: 3px; border-radius: var(--r-sm); background: #121217; border: 1px solid var(--line-3); cursor: pointer; }
.wb-color .input { font-family: var(--f-mono); }
.wb-out textarea { min-height: 96px; }
.wb-row { display: flex; gap: 8px; }
.wb-outpane .btn { align-self: flex-start; }
.wb-stagewrap { background: var(--s1); border-radius: var(--r-lg); overflow: hidden; }
.wb-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; min-height: 52px; background: #24242d; }
.wb-zoom { margin-left: 6px; padding: 1px 6px; border-radius: var(--r-xs); background: var(--s4); color: var(--ink-2); font-size: .7rem; }
.wb-canvas-toggle button.is-on { background: var(--acc); color: var(--acc-ink); }
.wb-stage { position: relative; min-height: 320px; display: grid; place-items: center; padding: 32px; overflow: hidden; transition: background .2s; }
.wb-stage[data-canvas="dark"] { background: radial-gradient(circle at 50% 40%, #1b1b22, var(--bg)); }
.wb-stage[data-canvas="light"] { background: #e9eaee; }
.wb-stage[data-canvas="checker"] { background: repeating-conic-gradient(#2a2a31 0 25%, #1d1d23 0 50%) 0 0 / 20px 20px; }
.wb-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-3); }
.wb-empty::before { content: 'widgets'; font-family: 'Material Symbols Rounded'; font-weight: 400; font-style: normal; text-transform: none; letter-spacing: normal; font-feature-settings: 'liga'; font-size: 36px; color: var(--ink-4); }
.wb-frame iframe { border: 0; display: block; }
.wb-foot { max-width: 100ch; margin-top: 16px; }
.is-disabled { opacity: .4; pointer-events: none; }
@media (max-width: 1020px) { .wb-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .wb-choices { grid-template-columns: minmax(0, 1fr); } .wb-stage { padding: 16px; } }

/* ==================================================================== PROSE == */
.prose { padding: 28px 32px; color: var(--ink-2); font-size: .9375rem; line-height: 1.75; }
.prose-narrow { max-width: 860px; }
.prose > * + * { margin-top: 14px; }
.prose h2 { margin-top: 30px; font: 700 1.5rem var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); scroll-margin-top: calc(var(--bar-h) + 20px); }
.prose a { color: var(--acc-hi); text-decoration: underline; text-decoration-color: var(--acc-a30); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose-dl { display: grid; gap: 0; border-radius: var(--r); overflow: hidden; }
.prose-dl > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 12px 16px; background: var(--row); }
.prose-dl > div:nth-child(even) { background: var(--row-alt); }
.prose-dl dt { font-weight: 700; color: var(--ink); }
.prose-dl dd { line-height: 1.6; }
.prose-toc { display: flex; flex-direction: column; padding: 8px; }
.prose-toc a { padding: 9px 10px; border-radius: var(--r-xs); color: var(--ink-2); font-weight: 600; transition: background .12s, color .12s; }
.prose-toc a:hover { background: var(--s3); color: #fff; }
.prose-split { grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 720px) { .prose { padding: 20px; } .prose-dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ====================================================================== 404 == */
.nf { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100vh - var(--bar-h) - var(--net-h) - 180px); display: grid; align-items: center; }
.nf-art { position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 300px at 70% 50%, #f5d40026, transparent 70%); }
.nf-inner { padding-block: 64px; }
.nf-code { display: block; font: italic 800 clamp(7rem, 20vw, 13rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 2px var(--acc); opacity: .9; animation: rise .6s var(--ease) both; }
.nf h1 { margin-top: 18px; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.nf p { margin-top: 10px; max-width: 52ch; color: var(--ink-2); font-size: 1rem; }
.nf-actions { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }

/* Declared last: .card sets position:relative and would otherwise win. */
.sticky { position: sticky; }
@media (max-width: 1020px) {
  .prose-split { grid-template-columns: minmax(0, 1fr); }
  .prose-split > aside { display: none; }
}
@media (max-width: 720px) {
  .card-head { flex-wrap: wrap; }
  .card-title { flex-wrap: wrap; row-gap: 2px; }
  .lb-table-card .card-head .lb-search, .card-head > .lb-search { flex: 1 1 100%; }
}
/* Banners that host a dropdown (search filters, item search) must not clip it
   and must paint above the content that follows. */
.search-banner, .it-banner { overflow: visible; z-index: 5; }
.search-banner::before, .it-banner::before { transform: none; }

/* Server-rendered summaries (first paint / crawlers) before the page script
   replaces them. */
.page > .panel > h2, .page > .panel > h1 { font: 700 1.8rem/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 12px; }
.page > .panel > h3 { margin: 22px 0 10px; font: 700 1rem var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.page > .panel > ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.page > .panel > ul > li { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: var(--r-xs); background: var(--s3); color: var(--ink-2); font-size: .8125rem; }
.page > .panel > .lb-table, .page > .panel > table { margin-top: 8px; border-radius: var(--r); overflow: hidden; }
.page > .panel td:nth-child(2), #lbGrid > table td:nth-child(2) { color: var(--ink); font-weight: 700; }

/* Floating panels promoted to the top layer: drop the browser's popover
   defaults and size them from the anchor, not from the viewport. */
.search-pop[popover], .sel-menu[popover] { border: 0; color: inherit; overflow-x: hidden; }
.search-pop[popover]::backdrop, .sel-menu[popover]::backdrop { display: none; }
.sel-menu.tf-floating { right: auto; bottom: auto; }
.sel-opt span { white-space: nowrap; }
.search-pop.tf-floating { right: auto; bottom: auto; }
.search-item:focus, .search-item:focus-visible { outline: none; }

/* Home: the side column runs the full height of the two cards beside it. */
.home-grid > .home-side { align-self: stretch; }
.home-side > .card:last-child { flex: 1; display: flex; flex-direction: column; }
.home-side > .card:last-child > .list { flex: 1; display: flex; flex-direction: column; background: var(--row); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.home-side > .card:last-child > .list > .li { flex: 1; }

/* In the bar the account shows as avatar + bell only; the name is in its menu. */
.nav-right .arzb-name, .nav-right .arzb-caret { display: none; }
.nav-right .arzb-av { padding: 0 3px; height: 32px; border-radius: 50%; border: 0; background: transparent; }
.nav-right .arzb-av img, .nav-right .arzb-fb { border-radius: 50%; }
.nav-right .arzb-ic { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 50%; }
.nav-right .arzb-ic:hover, .nav-right .arzb-av:hover { background: #ffffff12; }
.nav-right .arzb-signin { height: 30px; border-radius: var(--r-xs); padding: 0 12px; }

/* A dropdown that sits near the right edge must not widen the page. */
html, body { overflow-x: clip; }
@media (max-width: 1280px) {
  .nav-drop-menu { left: auto; right: 0; }
}

/* ---------------------------------------------------------------------------
   Overlay matches: player tabs (Matches, Maps, Encounters, Weapons) and the
   /match/:id page. Both render through js/overlay-match.js.
   --------------------------------------------------------------------------- */
.ovm-kpis { margin-bottom: 20px; }
.ovm-kpi-name { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovm-place { display: inline-block; min-width: 28px; margin-right: 8px; font: 700 1.1rem/1 var(--f-display); color: var(--ink-2); }
.ovm-plat { display: inline-flex; align-items: center; color: var(--ink-3); margin-left: 6px; }
.ovm-plat .material-icons { font-size: 15px; }
.ovm-class { display: inline-grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 3px; background: var(--s4); color: var(--ink); font: 700 .7rem/1 var(--f-display); }
.ovm-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.ovm-nowrap { white-space: nowrap; }
.ovm-teamsub { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.ovm-teamsub .chip { padding-block: 0; height: 20px; font-size: .6875rem; }
.ovm-matches .ovm-open { white-space: nowrap; }
.ovm-player { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.ovm-player .tag-chip { flex-shrink: 0; }
.ovm-rank { display: inline-flex; align-items: center; flex-shrink: 0; }
.ovm-note { padding: 10px 18px 14px; }
.ovm-sub { display: flex; align-items: center; gap: 8px; margin: 24px 0 10px; font: 700 1.2rem/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.ovm-sub .material-icons { display: none; }

/* Matches list: each match a tile of its own, the result down its left edge
   and a green wash on the wins. A row opens the match in a dialog. */
.ovm-matches { border-collapse: separate; border-spacing: 0 8px; margin-top: -8px; }
.card .table-wrap:has(> .ovm-matches) { padding: 0 14px 6px; background: var(--s1); }
.ovm-matches thead th { background: transparent; height: 34px; color: var(--ink-3); font-size: .75rem; }
.ovm-matches tbody td { background: #26262f !important; height: 64px; border-block: 1px solid #ffffff0a; }
.ovm-matches tbody td:first-child { border-left: 1px solid #ffffff0a; border-radius: var(--r-sm) 0 0 var(--r-sm); box-shadow: inset 4px 0 0 var(--ink-4); }
.ovm-matches tbody td:last-child { border-right: 1px solid #ffffff0a; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ovm-matches tbody tr.is-win td { background: #1d3a2c !important; border-color: #3ddc8433; }
.ovm-matches tbody tr.is-win td:first-child { box-shadow: inset 4px 0 0 var(--up); }
.ovm-matches tbody tr.is-loss td:first-child { box-shadow: inset 4px 0 0 var(--down); }
.ovm-matches tbody tr:hover td { background: #30303a !important; }
.ovm-matches tbody tr.is-win:hover td { background: #234634 !important; }
.ovm-matches tbody tr.ovm-row { cursor: pointer; }
.ovm-caret { font-size: 18px; color: var(--ink-3); vertical-align: middle; transition: color .15s; }
tr.ovm-row:hover .ovm-caret { color: var(--acc); }

/* The match dialog: a sheet from the bottom on a wide screen, centred on a phone. */
.tf-modal.ovm-sheet { place-items: end center; padding: 0; grid-template-columns: minmax(0, 1fr); }
.tf-modal.ovm-sheet .tf-modal-panel { width: min(1440px, 100%); min-width: 0; height: min(90vh, 940px); max-height: 90vh;
  border-radius: 14px 14px 0 0; animation: sheetUp .34s var(--ease); }
@keyframes sheetUp { from { transform: translateY(100%); } }
.ovm-sheet .tf-modal-head { align-items: center; padding: 16px 22px; background: #24242d; border-radius: 14px 14px 0 0; }
.ovm-sheet .tf-modal-title h3 { display: flex; align-items: baseline; gap: 12px; font-size: 2rem; line-height: 1; }
.ovm-sheet-arena { font: 600 1rem var(--f-ui); text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.ovm-sheet .tf-modal-title .cc-meta { margin-top: 4px; color: var(--ink-3); font-size: .8rem; }
.ovm-sheet .tf-modal-body { padding: 0; }
.ovm-sheet-top { display: grid; gap: 12px; padding: 16px 22px 4px; }
.ovm-sheet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Tabs stay in view while the scoreboard scrolls under them; centred, like a
   Career / Scoreboard / Rounds switch. */
.ovm-sheet-tabs { position: sticky; top: 0; z-index: 2; margin-top: 8px; padding: 0 22px; background: #1b1b22; border-bottom: 1px solid var(--line-2); justify-content: center; }
.ovm-sheet-tabs .tab { flex: 1 1 0; justify-content: center; max-width: 320px; }
.ovm-sheet-pane { padding: 18px 22px 26px; }
.ovm-sheet-card { border-radius: var(--r-md); background: var(--s1); overflow: hidden; }
.ovm-sheet tr a.p-name .pn-name, .ovm-sheet a.p-name:hover .pn-name { color: var(--ink); }
.ovm-sheet tbody tr:not(.ovm-me):hover > td { background: inherit; }

@media (max-width: 700px) {
  .tf-modal.ovm-sheet { place-items: center; padding: 12px; }
  .tf-modal.ovm-sheet .tf-modal-panel { width: 100%; height: auto; max-height: calc(100dvh - 24px); border-radius: var(--r-lg); animation: modalIn .28s var(--ease); }
  .ovm-sheet .tf-modal-head { padding: 14px 16px; border-radius: var(--r-lg) var(--r-lg) 0 0; align-items: flex-start; }
  .ovm-sheet .tf-modal-title h3 { flex-direction: column; gap: 2px; font-size: 1.35rem; }
  .ovm-sheet-label { display: none; }
  .ovm-sheet .tf-modal-tools .btn { width: 34px; padding: 0; justify-content: center; }
  .ovm-sheet-top { padding: 14px 16px 2px; }
  .ovm-sheet-tabs { padding: 0 8px; }
  .ovm-sheet-pane { padding: 14px 16px 20px; }
}

/* The scoreboard: one block per team, the team colour down its side and
   washed across its header band. */
.ovm-team { --team: var(--ink-4); position: relative; border-radius: var(--r-md); background: var(--s1); overflow: hidden; }
.ovm-team + .ovm-team { margin-top: 10px; }
.ovm-table { min-width: 760px; table-layout: fixed; }
.ovm-table th:first-child { width: 34%; }
.ovm-table th:nth-child(n+6):nth-child(-n+8) { width: 9%; }
.ovm-table th:first-child, .ovm-table td:first-child { padding-left: 18px; }
.ovm-table tbody td:first-child { box-shadow: inset 4px 0 0 var(--team); }
.ovm-table tbody td { background: color-mix(in srgb, var(--team) 5%, var(--row)); }
.ovm-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--team) 5%, var(--row-alt)); }
.ovm-table tbody td:first-child { background: linear-gradient(90deg, color-mix(in srgb, var(--team) 22%, var(--row)), color-mix(in srgb, var(--team) 5%, var(--row))); }
.ovm-table tbody tr:nth-child(even) td:first-child { background: linear-gradient(90deg, color-mix(in srgb, var(--team) 22%, var(--row-alt)), color-mix(in srgb, var(--team) 5%, var(--row-alt))); }
.ovm-team-head th { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--team) 34%, #1b1b22); }
.ovm-team-head th:first-child { font: 700 1.05rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.ovm-cash { margin-left: 10px; color: var(--cash); font: 700 .85rem var(--f-ui); }
.ovm-table tfoot td { font-size: .75rem; background: var(--s1); }
tr.ovm-me > td, li.ovm-me { background: #3b3522 !important; }
tr.ovm-me > td:first-child { background: linear-gradient(90deg, #6b5a1f, #3b3522) !important; }

.ovm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px; background: var(--bg); border-radius: var(--r-md); overflow: hidden; }
.ovm-facts > div { padding: 12px 16px; background: var(--s1); min-width: 0; }
.ovm-facts dt { font-size: .78rem; font-weight: 600; color: var(--ink-3); }
.ovm-facts dd { margin-top: 3px; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

/* Weapons */
.ovm-weapon { display: flex; align-items: center; gap: 10px; }
.ovm-weapon-img { width: 56px; height: 32px; object-fit: contain; flex-shrink: 0; }
.ovm-weapon-none { display: grid; place-items: center; color: var(--ink-4); background: var(--s3); border-radius: 4px; }
.ovm-share { display: inline-flex; align-items: center; gap: 8px; }

/* Maps: one row per arena, its picture washed across the name cell. */
.ovm-maprow { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ovm-map-thumb { display: grid; place-items: center; width: 104px; height: 58px; flex-shrink: 0; overflow: hidden; border-radius: var(--r-xs);
  background: var(--s3); color: var(--ink-4); }
.ovm-map-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ovm-maps { animation: fadeIn .3s var(--ease) both; }
.ovm-map-title { font: 700 1.2rem/1.1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.ovm-maprows td { height: 74px; }
.ovm-map-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; padding: 16px; }
.ovm-map-stats dt { font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.ovm-map-stats dd { margin-top: 2px; font: 700 1.2rem/1.1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }

/* Encounters: the group switch sits in the card head. */
.ovm-seg { border-bottom: 0; gap: 2px; }
.ovm-seg .tab { height: 40px; padding-block: 0; font-size: .85rem; }

/* Teams in finishing order (TF.ovm.standings): one tile per team, the
   placement in a block of the team colour. Shared by /match and the dialog. */
.ovm-standings { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.ovm-standings li { --team: var(--ink-4); display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 12px 8px 8px;
  border-radius: var(--r-sm); background: linear-gradient(90deg, color-mix(in srgb, var(--team) 26%, var(--s1)), color-mix(in srgb, var(--team) 6%, var(--s1))); }
.ovm-st-place { display: grid; place-items: center; width: 44px; height: 40px; flex-shrink: 0; border-radius: 0; clip-path: var(--lean);
  background: var(--team); color: #fff; font: italic 800 1.6rem/1 var(--f-display); text-shadow: 0 1px 2px #0006; }
.ovm-st-body { display: grid; gap: 4px; min-width: 0; }
.ovm-st-name { font: 700 1.05rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovm-st-meta { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ovm-st-cash { color: var(--gold); font-weight: 700; }
.ovm-st-dot { color: var(--ink-4); }
.ovm-st-win { margin-left: auto; font-size: 20px; color: var(--gold); }

/* /match/:id */
.ovm-banner .banner-inner { padding-top: 28px; }
.ovm-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.ovm-kicker { font: 700 .9rem var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-hi); }
.ovm-arena { margin-top: 6px; font: 600 1.05rem var(--f-ui); color: var(--ink-2); }
.ovm-arena a:hover { color: #fff; }
.ovm-banner .ovm-standings { margin-top: 18px; }
.ovm-head-side { display: grid; justify-items: end; gap: 10px; }
.ovm-when { display: grid; justify-items: end; }
.ovm-label { font-size: .75rem; color: var(--ink-3); font-weight: 600; }
.ovm-big { font: 700 1.8rem/1.1 var(--f-display); color: var(--ink); }
.ovm-actions { display: flex; align-items: center; gap: 8px; }
/* Teams tab: one card per team — a band in the team colour, the team's
   numbers, then each player with their own line. Two teams face each other. */
.ovm-teamcards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); align-items: start; }
.ovm-tc { --team: var(--ink-4); border-radius: var(--r-lg); background: var(--s1); overflow: hidden; }
.ovm-tc-head {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px 18px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--team) 42%, var(--s1)), color-mix(in srgb, var(--team) 10%, var(--s1)));
}
.ovm-tc-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ovm-tc-id b { font: italic 800 1.45rem/1 var(--f-display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovm-tc-id span { color: #ffffffb3; font-size: .78rem; font-weight: 500; }
.ovm-tc-id em { font-style: normal; font-weight: 700; color: var(--cash); }
.ovm-tc-head .ovm-st-win { font-size: 26px; }
.ovm-tc-share { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #00000040; }
.ovm-tc-share i { display: block; height: 100%; background: var(--team); transform-origin: left; animation: growX .9s var(--ease) both; }
.ovm-tc-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 12px 8px; border-bottom: 1px solid var(--line); }
.ovm-tc-stats > div { padding: 0 10px; min-width: 0; }
.ovm-tc-stats > div + div { border-left: 1px solid var(--line); }
.ovm-tc-stats dt { font: 700 .72rem var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ovm-tc-stats dd { margin-top: 2px; font: 700 1.3rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.ovm-tc-roster { padding: 6px 0 8px; }
.ovm-tc-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px 44px 54px; align-items: center; gap: 4px; min-height: 40px; padding: 0 18px; font-variant-numeric: tabular-nums; }
.ovm-tc-row > span:not(.ovm-tc-who), .ovm-tc-row > b { text-align: right; }
.ovm-tc-row > span:not(.ovm-tc-who) { color: var(--ink-2); font-weight: 600; }
.ovm-tc-row.is-head { min-height: 30px; font: 700 .72rem var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ovm-tc-row.is-head > span { color: var(--ink-3); font-weight: 700; }
.ovm-tc-row.is-head > span:first-child { text-align: left; }
/* Inside the match dialog the cards sit on the panel colour: lift them a step. */
.ovm-sheet :is(.ovm-tc, .ovm-dcard, .ovm-did) { background: var(--s2); }
.ovm-sheet .ovm-dhead, .ovm-sheet .ovm-darena:not(.has-art) { background: var(--s3); }
.ovm-tc-row:not(.is-head):nth-child(odd) { background: #ffffff05; }
.ovm-tc-row.ovm-me { background: #3b3522 !important; box-shadow: inset 3px 0 0 var(--cash); }
.ovm-tc-who { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.ovm-tc-who .p-name { min-width: 0; }
.ovm-top {
  flex-shrink: 0; height: 18px; padding: 0 8px; display: inline-grid; place-items: center; clip-path: var(--lean);
  background: var(--cash); color: #1d1400; font: italic 800 .72rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase;
}

/* Details tab: arena, match and timing as three cards, the id on its own line. */
.ovm-details { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; }
.ovm-dcard { border-radius: var(--r-lg); background: var(--s1); overflow: hidden; }
.ovm-dhead { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; background: var(--band); font: 700 1.05rem var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.ovm-dhead .material-icons { font-size: 18px; color: var(--acc-hi); }
.ovm-darena { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 46px; padding: 12px 18px; background: var(--band); }
.ovm-darena.has-art { min-height: 120px; }
.ovm-darena.has-art::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--art) center / cover no-repeat; }
.ovm-darena.has-art::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0e0e1222, #0e0e12e6); }
.ovm-darena small { font: 700 .72rem var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-hi); }
.ovm-darena b { font: italic 800 1.6rem/1 var(--f-display); text-transform: uppercase; }
.ovm-darena a:hover { color: var(--acc-hi); }
.ovm-dlist > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; padding: 6px 18px; }
.ovm-dlist > div:nth-child(even) { background: #ffffff05; }
.ovm-dlist dt { color: var(--ink-3); font-size: .82rem; }
.ovm-dlist dd { text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.ovm-did { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 10px 12px 10px 18px; border-radius: var(--r-lg); background: var(--s1); }
.ovm-did > span { font: 700 .78rem var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ovm-did code { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: .82rem; overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .ovm-tc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .ovm-tc-stats > div:nth-child(4) { border-left: 0; }
  .ovm-tc-row { grid-template-columns: minmax(0, 1fr) 30px 30px 30px 44px; padding: 0 12px; }
  .ovm-tc-who .ovm-plat { display: none; }
}
@media (max-width: 900px) {
  .ovm-head { grid-template-columns: 1fr; align-items: start; }
  .ovm-head-side, .ovm-when { justify-items: start; }
  .ovm-map-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   /matches: the latest games, one column per mode (js/matches.js)
   --------------------------------------------------------------------------- */
.mxs-search { margin-top: 20px; max-width: 760px; }
.mxs-query { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--ink-2); }
.mxs-query .material-icons { color: var(--ink-3); font-size: 18px; }
.mxs-query .btn { margin-left: auto; }
.mxs-groups { display: grid; gap: 34px; }
.mxs-group { min-width: 0; }
.mxs-group-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; font: italic 800 1.65rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.mxs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mxs-card { border-radius: var(--r-md); background: var(--s1); overflow: hidden; cursor: pointer; transition: background .15s, box-shadow .15s; }
.mxs-card:hover { box-shadow: 0 0 0 1px var(--line-3); }
.mxs-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.mxs-card-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #24242d; }
.mxs-card-ic { display: grid; place-items: center; width: 32px; height: 30px; flex-shrink: 0; border-radius: 0; clip-path: var(--lean); background: var(--acc); color: var(--acc-ink); }
.mxs-card-ic .material-icons { font-size: 17px; }
.mxs-card-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mxs-card-title b { font: 700 1rem var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.mxs-card-title span { font-size: .6875rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mxs-view { margin-left: auto; flex-shrink: 0; height: 28px; padding: 0 10px; font-size: .72rem; }
.mxs-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--bg); }
.mxs-team { --team: var(--ink-4); background: color-mix(in srgb, var(--team) 7%, var(--s1)); box-shadow: inset 3px 0 0 var(--team); min-width: 0; }
.mxs-team-head { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: color-mix(in srgb, var(--team) 26%, var(--s1)); }
.mxs-team-head .ovm-place { min-width: 20px; margin-right: 2px; font-size: .85rem; color: #fff; }
.mxs-team-name { font: 700 .82rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mxs-cash { margin-left: auto; color: var(--gold); font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mxs-player { display: flex; align-items: center; gap: 7px; padding: 5px 10px; min-width: 0; }
.mxs-player + .mxs-player { border-top: 1px solid #0000002e; }
.mxs-player .ovm-class { width: 17px; height: 17px; font-size: .62rem; }
.mxs-player-main { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.mxs-player-main .p-name { font-size: .74rem; }
.mxs-player-main .pn-name { overflow: hidden; text-overflow: ellipsis; }
.mxs-kda { font-size: .64rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mxs-player .ovm-plat { margin-left: auto; }
.mxs-player .ovm-plat svg, .mxs-player .ovm-plat .material-icons { width: 12px; height: 12px; font-size: 12px; }
@media (max-width: 980px) { .mxs-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .mxs-teams { grid-template-columns: minmax(0, 1fr); }
  .mxs-card-head { flex-wrap: wrap; }
}

/* ---- match rounds (js/overlay-match.js) ------------------------------------- */
.ovm-rounds { flex-wrap: wrap; margin-bottom: 12px; }
.ovm-round-note { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--ink-3); font-size: .8rem; }
.ovm-round-note .material-icons { font-size: 16px; color: var(--ink-4); }
tr[data-round-row] { cursor: pointer; }
tr[data-round-row]:hover td { background: var(--row-hover); }
.ovm-variant { display: inline-flex; align-items: center; gap: 5px; }
.ovm-variant img { width: 14px; height: 14px; object-fit: contain; }


/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 720px) {
  /* A ranked table keeps its numbers on screen: the player column gives way
     (long names truncate) instead of pushing the score past the edge. */
  td:has(> .player-cell) { width: 100%; max-width: 0; }
  .player-cell, .player-cell .pc-main { min-width: 0; }
  .player-cell .pc-main { overflow: hidden; }
  .player-cell .pc-sub, .pc-plats span { white-space: nowrap; }
  .lb-table td, .lb-table th { padding-inline: 8px; }
  .lb-table td.rank-cell { padding-right: 2px; }

  /* "#1" records: one compact row each — emblem, who, the number. */
  .no1 { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "av name val" "av label val"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 14px 16px; }
  .no1-av { grid-area: av; width: 44px; height: 44px; margin: 0; }
  .no1-av .rank-ic { width: 36px; height: 36px; }
  .no1-name { grid-area: name; font-size: 1.15rem; }
  .no1-label { grid-area: label; }
  .no1-val { grid-area: val; font-size: 1.7rem; }
  .no1-badge { top: 0; height: 22px; padding: 0 8px 0 12px; font-size: 1rem; }

  /* Compare: names shrink to fit their card. */
  .cmp-player .cmp-id { width: 100%; min-width: 0; }
  .cmp-name { justify-content: center; max-width: 100%; font-size: 1.35rem; }
  .cmp-name .pn-name { min-width: 0; }
  .cmp-name .pn-tag { display: none; }

  /* Player Matches tab: each match is a tile — when and K/D on top, the mode
     and arena, the team, then E / A / D / R. The tile opens the match. */
  .card .table-wrap:has(> .ovm-matches) { padding: 4px 10px 8px; overflow: visible; }
  .ovm-matches, .ovm-matches tbody { display: block; margin: 0; }
  .ovm-matches thead { display: none; }
  .ovm-matches tbody tr {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 4px 8px; margin-top: 8px; padding: 12px 14px 12px 16px;
    border-radius: var(--r-sm); background: #26262f; box-shadow: inset 4px 0 0 var(--ink-4);
  }
  .ovm-matches tbody tr.is-win { background: #1d3a2c; box-shadow: inset 4px 0 0 var(--up); }
  .ovm-matches tbody tr.is-loss { box-shadow: inset 4px 0 0 var(--down); }
  .ovm-matches tbody td { display: block; height: auto; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; text-align: left; }
  .ovm-matches tbody td:nth-child(1), .ovm-matches tbody td:nth-child(10) { display: none; }
  .ovm-matches tbody td:nth-child(2) { grid-column: 1 / 5; grid-row: 1; }
  .ovm-matches tbody td:nth-child(9) { grid-column: 5; grid-row: 1 / 3; align-self: center; text-align: right; font: 700 1.6rem/1 var(--f-display); }
  .ovm-matches tbody td:nth-child(9)::before { content: 'K/D'; display: block; font: 700 .65rem var(--f-display); letter-spacing: .08em; color: var(--ink-3); }
  .ovm-matches tbody td:nth-child(3) { grid-column: 1 / 5; grid-row: 2; }
  .ovm-matches tbody td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; padding-top: 6px !important; border-top: 1px solid #ffffff10 !important; margin-top: 4px; }
  .ovm-matches tbody td:nth-child(n+5):nth-child(-n+8) { grid-row: 4; font: 700 1.05rem var(--f-display); }
  .ovm-matches tbody td:nth-child(n+5):nth-child(-n+8)::before { display: block; font: 700 .65rem var(--f-display); letter-spacing: .08em; color: var(--ink-3); }
  .ovm-matches tbody td:nth-child(5)::before { content: 'ELIMS'; }
  .ovm-matches tbody td:nth-child(6)::before { content: 'ASSISTS'; }
  .ovm-matches tbody td:nth-child(7)::before { content: 'DEATHS'; }
  .ovm-matches tbody td:nth-child(8)::before { content: 'REVIVES'; }
  .ovm-matches .ovm-ellipsis { max-width: none; }
}
/* Stacked profile: on a tab other than Overview the sidebar (current season,
   peaks, aliases) would sit between the tabs and what they opened. */
@media (max-width: 1100px) {
  .pl-page[data-pane]:not([data-pane="overview"]) .pl-sidebar { display: none; }
}
@media (max-width: 720px) {
  /* Match dialog tabs: start-aligned and scrollable — centred, an overflowing
     strip cut its first tab off with no way to scroll back to it. */
  .ovm-sheet-tabs { justify-content: flex-start; }
  .ovm-sheet-tabs .tab { flex: none; max-width: none; }

  /* Segmented filters wider than the screen scroll instead of clipping. */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button, .seg a { flex: none; padding: 0 14px; }
  .it-builds { display: flex; }

  /* Widget preview head: title on one line, the background switch under it. */
  .wb-preview-head { flex-wrap: wrap; padding-block: 12px; gap: 10px; }
  .wb-preview-head .seg { width: 100%; }
  .wb-preview-head .seg button { flex: 1 1 0; }
}