/* THE FINALS / Arenyze — shared presentation system.
   Loaded after the component and responsive styles on every full page. */
:root {
  color-scheme: dark;
  --background-color: #0b0e12;
  --surface-color: #12171e;
  --surface-2: #19212b;
  --surface-3: #222d39;
  --text-secondary: #acb7c5;
  --text-muted: #8996a7;
  --line: #242e3b;
  --line-strong: #38485b;
  --maxw: 1280px;
  --nav-height: 76px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-card: 0 8px 24px -18px #0009;
  --popover-bg: #151d27;
  --option-hover: #223142;
  --option-selected: #163747;
  --option-ink: #e8f0f8;
  --option-selected-ink: #8be5f5;
  --z-content: 0;
  --z-floating: 100;
  --z-header: 1000;
  --z-dialog: 1200;
  --z-sheet: 1300;
}
html { scroll-padding-top: calc(var(--nav-height) + 24px); }
body { background-image: radial-gradient(ellipse at 80% 0, #12304038, transparent 650px); }
body > main { animation: none; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 4px; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(2rem, 3.5vw, 3rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -.025em; }
.container { padding-inline: 32px; }
.section { padding-block: 36px; }
.section:first-of-type { padding-top: 40px; }
.grid { gap: 18px; }
.grid > *, .section-head > *, .panel, .chart-card { min-width: 0; }
.section-head { margin-bottom: 20px; }
.section-head:not(:first-child) { margin-top: 40px; }
.section-head > div > p { margin-top: 6px; }
.section-head .eyebrow { margin-bottom: 7px; display: block; }
.eyebrow { font-size: .69rem; letter-spacing: .14em; }
.page-head { position: relative; margin: 0 0 32px; padding: 0 0 28px; border-bottom: 1px solid var(--line); }
.page-head h1, .prose h1 { font-style: normal; font-weight: 700; letter-spacing: -.045em; }
.page-head > p { margin-top: 12px; max-width: 740px; line-height: 1.7; }
.page-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--primary-light); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.page-kicker .material-icons { font-size: 16px; }
/* "Claim profile" chip — the player page's kicker. A link out to the Arenyze
   account (where the tracker profile gets attached), or, once attached, a
   green confirmation the visitor cannot click into a second claim. */
.claim-chip {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  padding: 5px 12px 5px 9px; border-radius: 999px;
  border: 1px solid #17c3e63d; background: #17c3e614; color: var(--primary-light);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.claim-chip:hover { background: #17c3e626; border-color: #17c3e666; color: var(--primary-light); }
/* Claimed is a statement, not a link — every visitor sees it, nobody clicks it. */
.claim-chip.is-claimed { border-color: #3ddc9740; background: #3ddc9714; color: var(--success-color); cursor: default; }
.back-link { min-height: 36px; margin-bottom: 16px; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 3000; padding: 12px 18px; border-radius: 8px; background: var(--primary-color); color: var(--primary-ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); color: var(--primary-ink); }
/* Material Symbols Rounded — the whole site's icon set, requested subsetted to
   the ligatures actually used. The stylesheet Google serves defines
   .material-symbols-rounded and nothing else, so the two class names the markup
   already uses are mapped onto the family here rather than renaming a hundred
   spans. FILL 0 is the outlined weight: it is the current look, and lighter
   next to this palette than the old filled set. */
.material-icons, .msr {
  font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  flex-shrink: 0;
}
.msr { font-size: 20px; }
.icons-loading .material-icons, .icons-loading .msr { display: inline-block; width: 1em; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Navigation: one aligned row; drawers never participate in page width. */
/* The navbar is injected by script, so the empty <header> must already occupy
   its final height — the row plus its bottom border. Without this the first
   paint puts the page a navbar too high and everything jumps down when the
   chrome lands, which reads as the navbar flickering on every navigation. */
.site-header { min-height: calc(var(--nav-height) + 1px); z-index: var(--z-header); border-color: #ffffff0e; transition: border-color .2s, box-shadow .2s; }
.site-header::before { background: #0b0e12ed; backdrop-filter: blur(18px); }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 8px 24px #0003; }
.modern-navbar-container { padding-inline: 32px; gap: 28px; }
.modern-brand { gap: 10px; }
.modern-brand-logo { width: 32px; height: 32px; }
.brand-lockup { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.brand-caption { font-size: .56rem; letter-spacing: .23em; color: var(--text-muted); font-weight: 500; }
/* style.css takes the menu out of the flow and pins it to the container's
   midpoint on purpose: that is the only centring that survives the brand, the
   account control or a web font changing width. Overriding it back into the
   flex flow made the whole row slide every time one of those settled. */
.modern-nav-menu { gap: 2px; }
.modern-nav-link { height: 40px; padding: 0 11px; font-size: .86rem; font-weight: 500; border-radius: 8px; }
button.modern-nav-link { border: 0; background: none; font-family: inherit; }
.modern-nav-link.active { color: var(--primary-light); background: var(--primary-soft); }
.modern-nav-link.active::after { content: ''; width: 4px; height: 4px; background: currentColor; border-radius: 50%; margin-left: 2px; }
.nav-search { display: inline-flex; align-items: center; justify-content: center; height: 38px; width: 38px; border: 1px solid var(--line); color: var(--text-secondary); border-radius: 9px; }
.nav-search:hover { color: var(--primary-light); background: var(--surface-2); }
.nav-search .material-icons { font-size: 20px; }
.modern-dropdown-content { padding: 10px; width: 280px; border-radius: 14px; max-height: calc(100dvh - var(--nav-height) - 28px); overflow-y: auto; background: var(--popover-bg); }
.modern-dropdown.is-open .modern-dropdown-content { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.modern-dropdown:not(.is-open) .modern-dropdown-content { opacity: 0; visibility: hidden; pointer-events: none; }
.modern-dropdown-item { min-height: 40px; }
.modern-mobile-toggle { width: 42px; height: 42px; }
/* visibility flips only after the drawer has slid out, so the panel stays
   painted for the whole close animation — and instantly on open, or it is still
   `hidden` on the frame it is asked to take focus and the focus falls to body. */
.modern-mobile-menu { visibility: hidden; transition: transform .3s var(--ease-out), visibility 0s linear .3s; width: min(360px, 100vw); z-index: 1002; padding: 16px 16px 40px; }
.modern-mobile-menu.open { visibility: visible; transition: transform .3s var(--ease-out), visibility 0s; }
.mobile-menu-head { align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: 12px; padding-bottom: 14px; }
.mobile-menu-head > span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.nav-backdrop { position: fixed; inset: var(--nav-height) 0 0; z-index: 1001; background: #0009; border: 0; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.nav-backdrop.is-open { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }
.modern-mobile-link.active { background: var(--primary-soft); }
.site-header .arzb-signin { background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--line-strong); height: 38px; font-size: .82rem; white-space: nowrap; }
.site-header .arzb-signin:hover { background: var(--surface-3); color: white; }

/* Shared controls and surfaces. */
.btn { min-height: 44px; border-radius: 9px; font-size: .88rem; transition: background .18s, border-color .18s, color .18s, transform .18s var(--ease-out), box-shadow .18s; }
.btn-sm { min-height: 36px; font-size: .8rem; }
.btn-primary { font-weight: 700; box-shadow: inset 0 1px #ffffff30; }
.btn-primary:hover { box-shadow: 0 4px 18px #17c3e626; }
.btn-ghost { background: #ffffff02; }
.btn:disabled { opacity: .42; transform: none; box-shadow: none; }
input, textarea { min-height: 44px; }
.sel > .sel-btn { min-height: 44px; background: var(--input-bg); color: var(--option-ink); font-weight: 500; display: flex; align-items: center; }
.sel > .sel-btn:hover { background: #19232e; color: #fff; border-color: #496179; }
.sel.is-open > .sel-btn { background: #172833; color: var(--option-selected-ink); border-color: #4bcce4; }
.sel.is-disabled > .sel-btn { background: var(--input-bg); color: var(--text-muted); }
.sel-menu { padding: 7px; background: var(--popover-bg); color: var(--option-ink); border-color: #3a4b60; box-shadow: 0 16px 40px #0009; }
.sel-opt { min-height: 42px; font-weight: 500; color: var(--option-ink); background: transparent; line-height: 1.4; }
.sel-opt > span:first-child { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.sel-opt.is-active, .sel-opt:hover:not(.is-off) { background: var(--option-hover); color: #fff; }
.sel-opt.is-sel { background: var(--option-selected); color: var(--option-selected-ink); }
.sel-opt.is-sel.is-active, .sel-opt.is-sel:hover { background: #204959; color: #a5effb; }
.sel-opt.is-off, .sel-opt.is-off:hover { opacity: 1; color: #8493a5; background: transparent; cursor: not-allowed; }
.sel-tick { color: currentColor; }
.sel-menu[popover], .search-results[popover] { margin: 0; }
.sel-menu.tf-floating, .search-results.tf-floating {
  position: fixed; inset: auto; min-width: 0; max-width: calc(100vw - 24px);
  box-sizing: border-box; margin: 0; overflow-y: auto; overscroll-behavior: contain;
  z-index: var(--z-floating); transform: none; translate: none; animation: none;
}
.sel-menu.tf-floating::backdrop, .search-results.tf-floating::backdrop { background: transparent; pointer-events: none; }
.sel-menu.tf-floating.drop-up, .sel-menu.tf-floating.align-right { right: auto; bottom: auto; }
.search-results { background: var(--popover-bg); border-color: #3a4b60; }
.search-item { min-height: 58px; align-items: center; }
.search-item .s-name { display: block; color: var(--option-ink); line-height: 1.4; }
.search-item .s-sub { margin-top: 4px; line-height: 1.4; color: #a4b3c4; }
.search-item.active, .search-item:hover { background: var(--option-hover); }
.search-item.active .s-name { color: #fff; }
.site-header .arzb-pop { background: var(--popover-bg); border-color: #3a4b60; }
.site-header .arzb-item { color: var(--option-ink); }
.site-header .arzb-item:hover, .modern-dropdown-item:hover { color: #fff; background: var(--option-hover); }
.site-header .arzb-item.danger { color: var(--error-color); }
.modern-dropdown-item { color: var(--option-ink); }
.panel, .card, .stat-card, .stat-tile, .chart-card, .table-wrap { box-shadow: var(--shadow-card); }
.panel, .card { padding: 26px; }
.panel:hover, .card:hover { border-color: var(--line); }
a.panel:hover, a.card:hover { border-color: var(--line-strong); }
.stat-row { margin: 24px 0 12px; gap: 14px; }
.stat-tile, .panel.stat-tile, .stat-card { padding: 22px; border-radius: 12px; background: linear-gradient(145deg, #ffffff02, transparent), var(--surface-color); }

/* The player page's KPI row carried 149px of tile for one number and a word -
   nearly a third of it the icon's own reserved strip. Scoped to .player-page so
   the club, leaderboard and movers pages keep the roomier tile they were
   designed around. */
.player-page .stat-tile { padding: 15px 17px; }
.player-page .st-ic { min-height: 22px; margin-bottom: 9px; }
.player-page .st-ic .material-icons, .player-page .st-ic .msr { font-size: 18px; }
.player-page .st-ic .rank-ic { width: 24px; height: 24px; }
.player-page .st-v { font-size: clamp(1.25rem, 1.8vw, 1.55rem); margin-bottom: 3px; }
.player-page .stat-row { gap: 12px; }

.st-ic { margin-bottom: 16px; gap: 9px; }
.st-ic .material-icons { color: var(--primary-light); font-size: 21px; }
/* Which board the number belongs to, next to the tile's icon. The stat row can
   be showing Ranked, World Tour or Power Shift and the figures look identical,
   so the board is the difference between a rank and a rank in context. */
.st-board {
  min-width: 0; padding: 3px 9px; border-radius: 999px;
  background: #ffffff0d; border: 1px solid var(--line); color: var(--text-secondary);
  font-size: .59rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-v, .stat-card .value { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.045em; margin-bottom: 7px; }
.st-l, .stat-card .label { font-size: .67rem; letter-spacing: .1em; line-height: 1.6; }
.tabs, .gs-tabs { gap: 4px; padding: 5px; border-radius: 10px; }
.tab, .gs-tab { min-height: 38px; border-radius: 7px; }
.tab.active, .tab.active:hover { background: var(--primary-soft); color: var(--primary-light); box-shadow: inset 0 0 0 1px #17c3e630; }
.badge, .handle { border-radius: 6px; }
.badge-live { border-radius: 5px; }
.handle { min-height: 30px; font-weight: 500; }

/* Data tables remain readable and independently scrollable on small screens. */
.table-wrap { border-radius: 12px; }
th, td { padding: 16px 20px; }
th { background: #10151c; font-size: .64rem; padding-block: 15px; color: #93a1b3; }
td { font-size: .88rem; border-bottom-color: #242e3b99; }
tbody tr:hover { background: #1b2935; }
td a:not(.badge):not(.club-tag) { color: var(--text-primary); font-weight: 500; }
td a:hover { color: var(--primary-light) !important; }
tbody tr:focus-visible { outline-offset: -2px; background: var(--surface-2); }
.rank-cell { color: #8996a7; font-size: .8rem; }
.table-wrap > .empty-state { border: 0; }
.table-wrap > .panel { border: 0; border-radius: 0; }
.pager, #lbPager { gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.pager-info { padding-inline: 10px; font-size: .8rem; }
.pager .btn { min-width: 36px; }
.empty-state, .error-state { padding: 64px 24px; background: linear-gradient(160deg, #19212b66, transparent), var(--surface-color); }
.empty-state .icon.material-icons, .error-state .icon.material-icons { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; font-size: 28px; color: var(--primary-light); }
.empty-state h3, .error-state h3 { font-size: 1.2rem; margin-bottom: 10px; }
.empty-state p, .error-state p { line-height: 1.7; }
.notice { border-radius: 10px; line-height: 1.65; }
.skel-line { height: 14px; margin-block: 16px; }
.skel-line:nth-child(3n) { width: 72%; }
.skel-line:nth-child(3n + 2) { width: 88%; }
.skeleton::after { animation-duration: 1.8s; }

/* Home: a search-first introduction and useful routes into the tracker. */
.home-hero { padding-block: 12px 12px; text-align: left; }
.home-hero::before { display: none; }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .8fr); gap: 64px; align-items: center; }
.hero-copy { min-width: 0; position: relative; z-index: 2; }
.home-hero > .hero-layout { z-index: 2; }
.home-hero > .hero-stats { z-index: 1; }
.home-hero .tagline { background: none; border: 0; padding: 0; font-size: .67rem; color: var(--primary-light); letter-spacing: .16em; margin-bottom: 24px; }
.home-hero .tagline::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color); box-shadow: 0 0 0 4px var(--primary-soft); margin-right: 6px; }
.home-hero h1 { font-size: clamp(2.8rem, 5.3vw, 4.65rem); line-height: 1.02; letter-spacing: -.055em; font-weight: 700; }
.home-hero h1 mark { color: var(--primary-light); display: block; }
.home-hero .lead { margin: 22px 0 28px; max-width: 550px; font-size: 1rem; line-height: 1.75; }
.home-hero .search-wrap { max-width: none; margin: 0; }
.hero-search { min-height: 66px; border-radius: 12px; box-shadow: 0 8px 28px #0003; background: #151d27; }
.hero-search input { font-size: .95rem; }
.hs-go { border-radius: 8px; min-height: 48px; }
.home-hero .hero-hint { display: block; font-size: .75rem; line-height: 1.7; margin-top: 13px; }
.hero-shortcuts { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 25px; }
.hero-shortcuts a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: .8rem; }
.hero-shortcuts a:hover { color: var(--primary-light); }
.hero-shortcuts .material-icons { font-size: 16px; }
.arena-card { position: relative; border: 1px solid #2b4256; background: radial-gradient(ellipse at 50% 38%, #1a566340, transparent 68%), #101922; border-radius: 20px; padding: 25px; overflow: hidden; }
.arena-card::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#78b3d207 1px, transparent 1px), linear-gradient(90deg, #78b3d207 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.arena-card > * { position: relative; }
.arena-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.arena-top .eyebrow { font-size: .6rem; color: #a2b8c8; }
.arena-top .badge { font-size: .58rem; padding: 3px 7px; }
.arena-emblem { min-height: 215px; display: grid; place-items: center; position: relative; }
.arena-emblem::before, .arena-emblem::after { content: ''; position: absolute; width: 170px; height: 170px; border-radius: 50%; border: 1px solid #7ad8f126; }
.arena-emblem::after { width: 210px; height: 210px; border-style: dashed; border-color: #7ad8f110; }
.arena-emblem img { width: 142px; height: 142px; object-fit: contain; filter: drop-shadow(0 10px 24px #5dd4ef20); z-index: 1; }
.arena-title { text-align: center; font-size: 1.4rem; letter-spacing: -.025em; font-weight: 600; }
.arena-description { margin-top: 7px; text-align: center; font-size: .8rem; color: var(--text-secondary); }
.arena-ladder { display: flex; justify-content: space-between; gap: 8px; border-block: 1px solid #293e4f; padding-block: 16px; margin-block: 22px 16px; }
.arena-ladder img { width: 29px; height: 29px; object-fit: contain; }
.arena-link { display: flex; align-items: center; justify-content: space-between; color: #c9d8e5; font-size: .8rem; }
.arena-link .material-icons { font-size: 18px; color: var(--primary-light); transition: transform .2s; }
.arena-link:hover .material-icons { transform: translateX(4px); }
/* Equal thirds, and every cell keeps the centred alignment of the base card:
   the clock and the two counters then share one vertical axis each, and the
   dividers fall at even intervals across the row. */
.home-hero .hero-stats { margin: 42px 0 0; max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 12px; background: #11171e; }
.home-hero .hs-cell { padding: 22px 28px; }
.home-hero .st-top .eyebrow { font-size: .63rem; }
.home-hero .hs-v { margin-top: 16px; }
.home-hero .hs-n { font-size: 2.2rem; font-weight: 600; }
.home-hero .st-clock { margin-top: 16px; gap: 10px; }
.home-hero .st-unit { min-width: 38px; }
.home-hero .st-n { font-size: 1.8rem; font-weight: 600; }
.home-hero .st-u { font-size: .56rem; }
.home-hero .st-foot { font-size: .7rem; padding-top: 12px; }
.home-features { padding-top: 36px; }
.feature-grid { gap: 14px; }
a.feature { display: flex; flex-direction: column; align-items: flex-start; position: relative; color: var(--text-primary); padding: 24px; transition: transform .25s var(--ease-out), border-color .2s, background .2s; }
.feature .fi { width: 38px; height: 38px; background: #1c2b37; color: #89cbdc; border: 1px solid #2c414e; border-radius: 10px; margin-bottom: 22px; }
.feature h3 { font-size: 1.03rem; margin-bottom: 10px; }
.feature p { font-size: .85rem; line-height: 1.7; }
.feature-arrow { position: absolute; top: 25px; right: 24px; color: var(--text-muted); font-size: 19px; transition: transform .2s, color .2s; }
a.feature:hover .feature-arrow { transform: translate(2px, -2px); color: var(--primary-light); }
.top-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.top-grid > .empty-state, .top-grid > .panel { grid-column: 1 / -1; }
.top-card { padding: 27px 12px 18px; min-width: 0; border-radius: 12px; transition: transform .25s var(--ease-out), border-color .2s, background .2s; }
.top-card .tc-ic { margin-bottom: 12px; }
.top-card .tc-pos { font-size: .67rem; }
.top-card.top-1 { background: linear-gradient(160deg, #ffcb450b, transparent 70%), var(--surface-color); }
.top-card.top-1 .tc-pos { color: var(--gold); }
.top-card.top-2 .tc-pos { color: var(--silver); }
.top-card.top-3 .tc-pos { color: var(--bronze); }
.top-card .tc-score { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; width: 100%; font-size: 1.2rem; }
.home-closing { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px; background: linear-gradient(100deg, #14364570, transparent), var(--surface-color); }
.home-closing p { color: var(--text-secondary); font-size: .88rem; margin-top: 8px; }

/* Leaderboards, archives, directories and daily movement. */
.lb-filters { padding: 20px; background: var(--surface-color); border: 1px solid var(--line); border-radius: 12px; gap: 18px; }
.lb-filters:hover { border-color: var(--line); }
.lb-field { margin-bottom: 0; gap: 8px; flex: 1; }
.lb-platforms { background: var(--input-bg); border-color: var(--line-strong); padding: 3px; min-height: 44px; align-items: center; }
.plat-btn { min-height: 36px; flex: 1; padding-inline: 12px; }
.plat-btn.active, .plat-btn.active:hover { background: var(--primary-soft); color: var(--primary-light); }
.lb-chart-panel { padding: 24px 24px 20px; }
.lb-group { padding: 26px; margin-bottom: 20px; }
.lb-group:first-child { border-color: #315361; background: linear-gradient(115deg, #17303d55, transparent 60%), var(--surface-color); }
.lb-group-head { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.lb-group-head h2 { font-size: 1.2rem; }
.lb-chip { padding: 16px; background: #0b0e124d; font-weight: 500; }
.lb-chip .material-icons { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); color: #91afc3; }
.sa-card { padding: 26px; border-radius: 14px; transition: transform .25s var(--ease-out), border-color .2s; }
.sa-name { font-size: 1.25rem; }
.sa-champ { margin: 24px 0 16px; gap: 8px; flex-wrap: wrap; }
.sa-champ-l { width: 100%; margin-bottom: 2px; font-size: .61rem; }
.sa-meta { border-top: 1px solid var(--line); padding-top: 14px; font-size: .75rem; }
.sa-foot { display: flex; justify-content: space-between; align-items: center; color: var(--text-secondary); font-size: .75rem; margin-top: 18px; }
.sa-foot .material-icons { font-size: 18px; color: var(--primary-light); }
.champion-card { padding: 30px; background: linear-gradient(110deg, #ffcb450d, transparent), var(--surface-color); border-color: #ffcb452a; }
.ch-name { overflow-wrap: anywhere; }
.mode-card .mc-head { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mc-podium { gap: 12px; }
.az-strip { gap: 6px; padding: 14px; background: var(--surface-color); border: 1px solid var(--line); border-radius: 12px; }
.az-key { min-width: 58px; min-height: 58px; border-radius: 7px; }
.mv-head { margin-bottom: 18px; }
.mv-datenav { border-radius: 10px; min-height: 44px; }
.mv-nav-btn { min-height: 42px; min-width: 42px; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.member-chip { border-radius: 9px; padding: 10px 12px; min-width: 0; background: var(--surface-color); }

/* Profile and comparison: identity above metrics, data below controls. */
.profile-head { position: relative; gap: 24px; padding: 32px; background: linear-gradient(105deg, #1a3e4c66, transparent 65%), var(--surface-color); border-color: #2b414f; }
.profile-head .ph-main h1 { font-size: clamp(1.65rem, 3vw, 2.5rem); font-weight: 600; font-style: normal; overflow-wrap: anywhere; }
.profile-head .ph-rank:not(.club-rank) { width: 88px; height: 88px; border: 1px solid #355565; border-radius: 20px; background: #0b0e1255; }
.profile-head .ph-rank .rank-ic { width: 68px; height: 68px; }
.ph-sub { margin: 7px 0 14px; overflow-wrap: anywhere; }
.ph-views { vertical-align: middle; }
.ph-main { min-width: 0; flex-basis: 280px; }
.club-rank { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; width: auto; min-width: 130px; height: auto; }
.season-card { min-width: 150px; padding: 20px 18px; border-radius: 12px; }
.season-cards { gap: 12px; scroll-snap-type: x proximity; }
.season-card { scroll-snap-align: start; }
.chart-card { padding: 24px 24px 14px; border-radius: 14px; }
.chartz { padding-top: 8px; }
.chartz-svg { overflow: visible; }
.chartz-svg:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; border-radius: 6px; }
.chartz-caption, .chartv-caption { margin: 10px 0 2px; color: var(--text-muted); font-size: .75rem; line-height: 1.6; }
.chartz-touch-hint { display: none; }
.chartv-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #42576d transparent; -webkit-overflow-scrolling: touch; }
.chartv-scroll .chartv { max-width: none; }
.chartv-scroll .chartv-svg { display: block; width: 100%; }
.chartv-tip, .chartz-tip { max-width: min(280px, calc(100vw - 64px)); white-space: normal; padding: 11px 13px; border-radius: 11px; }
.chartz-reset { min-height: 36px; z-index: 7; }
@media (pointer: coarse) {
  .chartz-touch-hint { display: inline; }
  .chartz-desktop-hint { display: none; }
  .chartz-reset { min-height: 44px; }
}
@media (max-width: 760px) {
  .player-page .chart-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
  .player-page .chart-card-head:has(.cc-ranges) { grid-template-columns: minmax(0, 1fr); }
  .player-page .cc-actions { width: auto; }
  .player-page .cc-ranges { flex: 1 1 100%; }
  .player-page .cc-range { flex: 1 0 auto; }
}
.chart-card-head { gap: 18px; margin-bottom: 16px; }
.cc-title h3 { font-size: 1.08rem; }
.cc-meta { line-height: 1.65; }
.cc-btn, .cc-range { min-height: 34px; }
.cc-ranges { border-radius: 8px; }
.tf-modal { z-index: var(--z-dialog); }
.tf-modal-panel { border-radius: 18px; box-shadow: 0 30px 100px #0008; animation: menuIn .22s var(--ease-out); }
.tf-modal-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.compare-form { align-items: flex-end; gap: 18px; padding: 26px; background: var(--surface-color); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 24px; }
.cf-vs { display: grid; place-items: center; width: 40px; height: 44px; font-size: .7rem; }
.cf-field { min-width: 0; flex-basis: 200px; }
.cf-field label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.compare-player { min-width: 0; color: var(--text-primary); }
.compare-player > div { min-width: 0; overflow-wrap: anywhere; }
.compare-player.panel { padding: 24px; }
.compare-player b { font-size: 1.1rem; }
.compare-table th { text-align: center; white-space: normal; }
.compare-table td { width: 35%; text-align: center; vertical-align: middle; }
.compare-table .win { background: #3ddc9708; }
.rank-tier { border-radius: 14px; padding: 24px; }
.rank-card { padding: 20px; border-radius: 10px; }
.rank-card .rank-ic { transition: transform .3s var(--ease-out); }

/* Player directory: the same search box as /search, with its filters laid out
   as a panel under it rather than in a popover — they are the state of the page
   here, not a transient overlay. */
/* The grid is capped at 880px and centred (see #dirTable in style.css); the
   search box and its filters line up with it so the page reads as one column. */
.dir-filters, .gs-searchwrap.dir-search, .section-head.dir-head { max-width: 880px; margin-inline: auto; }
/* The `hidden` attribute only carries `display:none` from the UA stylesheet,
   which any author rule that sets `display` silently beats. Every box below is
   toggled with `.hidden = true` in script and sets its own display, so each one
   needs to say what hidden means for it. */
.dir-filters[hidden], .pl-more[hidden], .pl-pane[hidden] { display: none; }
.dir-filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 18px;
  margin-top: 14px; padding: 20px; align-items: end;
  background: var(--surface-color); border: 1px solid var(--line); border-radius: 12px;
}
.dir-filters .gs-frow { margin: 0; }
.dir-filters-foot { display: flex; align-items: end; }
.dir-filters .gs-pop-reset { min-height: 40px; }
.az-strip, .az-ssr { display: none; }

/* Player profile: identity across the top, then a fixed column of "who they
   are" beside the wide column of "how they have played". The page runs wider
   than the rest of the site so that the sidebar is not taken out of the charts
   — they keep the width they had before it existed. */
.player-page { max-width: 1560px; }
/* One rhythm for the whole page: 20px between blocks, 14px inside a card. The
   stat row already carries its own bottom margin, so the layout only adds the
   difference rather than stacking a second gap on top of it. */
.player-page .stat-row { margin: 20px 0 0; }
.pl-layout { display: grid; grid-template-columns: 308px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.pl-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--nav-height) + 14px); }
.pl-card { padding: 18px; }
.pl-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.pl-card-head h2 { font-size: .95rem; margin: 0; letter-spacing: -.01em; }
.pl-card-head .material-icons { font-size: 18px; color: var(--primary-light); }
.pl-empty { line-height: 1.7; margin: 0; }

.pl-seasons, .pl-names { list-style: none; margin: 0; padding: 0; }
.pl-season { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #ffffff08; }
.pl-season:last-child { border-bottom: 0; }
.pls-ic { flex: none; width: 26px; height: 26px; display: grid; place-items: center; }
.pls-ic img { width: 26px; height: 26px; object-fit: contain; }
.pls-none { font-size: 16px; color: var(--text-muted); }
.pls-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.pls-name { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pls-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.pls-rank { font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.pl-name { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid #ffffff08; }
.pl-name:last-child { border-bottom: 0; }
.pln-old { font-size: .87rem; font-weight: 600; overflow-wrap: anywhere; }
/* The name in use is the anchor the retired ones are read against. */
.pl-name.is-current .pln-old { color: var(--primary-light); }

.pl-tabs { position: relative; display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #42576d transparent; -webkit-overflow-scrolling: touch; gap: 4px; padding: 5px; border-radius: 10px; background: var(--surface-color); border: 1px solid var(--line); }
.pl-tab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 7px; background: none; color: var(--text-secondary); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; transition: background .14s, color .14s; }
.pl-tab .material-icons { font-size: 18px; }
.pl-tab:hover { color: var(--text-primary); background: var(--surface-2); }
.pl-tab.is-on, .pl-tab.is-on:hover { background: var(--primary-soft); color: var(--primary-light); box-shadow: inset 0 0 0 1px #17c3e630; }
/* The tab strip is the separator above the first heading; a full section gap
   as well left the pane looking detached from the tab that opened it. */
.pl-pane > .section-head:first-child { margin-top: 18px; }
.pl-pane > .section-head { margin-bottom: 14px; }
.pl-pane > .section-head:not(:first-child) { margin-top: 26px; }

/* Both long grids scroll inside a capped box: 265 rows of season log used to
   push the footer a screen and a half below the last thing anyone reads. The
   header stays put while the body moves, or the columns lose their labels. */
.pl-scroll { max-height: min(560px, 68vh); overflow-y: auto; overscroll-behavior: contain; }
.pl-scroll thead th { position: sticky; top: 0; z-index: 2; }
.pl-scroll::-webkit-scrollbar { width: 10px; }
.pl-scroll::-webkit-scrollbar-thumb { background: #2c3644; border-radius: 5px; }
.pl-scroll::-webkit-scrollbar-track { background: transparent; }

/* "last played", beside the Embark name. */
.ph-last { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line-strong); white-space: nowrap; }
.ph-last .msr { font-size: 15px; color: var(--primary-light); }

/* Infinite scroll: the sentinel is also the indicator, so the reader can see
   the next batch being fetched instead of the page simply stopping. */
.pl-more {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 0 4px; color: var(--text-secondary); font-size: .82rem;
  /* Invisible but still laid out: it is the scroll sentinel as well as the
     indicator, so it has to keep its place in the flow while it says nothing. */
  opacity: 0; transition: opacity .18s;
}
.pl-more.is-busy { opacity: 1; }
.pl-spinner {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--line-strong); border-top-color: var(--primary-color);
  animation: plSpin .7s linear infinite;
}
@keyframes plSpin { to { transform: rotate(360deg); } }
/* Rows arrive rather than appear. Opacity only, deliberately: a translate on
   the last row of the batch pushes it past the wrapper's content box, and since
   `overflow-x: auto` forces the other axis off `visible`, those few pixels
   raised a vertical scrollbar for the length of the animation. The stagger is
   what makes the batch read as arriving; the movement was never doing the work.
   `both` holds the from-state until each row's own delay elapses, or the whole
   batch would flash in at full opacity first. */
@keyframes plRowIn { from { opacity: 0; } to { opacity: 1; } }
#logBody tr.pl-new { animation: plRowIn .34s var(--ease-out) both; }

.pl-log-head p { margin-top: 5px; max-width: 640px; line-height: 1.6; }
.pl-log-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pl-log-tile { display: flex; flex-direction: column; gap: 5px; padding: 13px 16px; border-radius: 11px; background: var(--surface-color); border: 1px solid var(--line); }
.pll-l { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.pll-v { font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pll-v.up, .pl-up { color: var(--success-color); }
.pll-v.down, .pl-down { color: var(--error-color); }
.pl-res { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; font-size: .72rem; font-weight: 700; }
.pl-res.up { color: var(--success-color); background: #3ddc9718; }
.pl-res.down { color: var(--error-color); background: #ff5c7318; }
.pl-rd { font-size: .74rem; font-weight: 700; }

@media (max-width: 1100px) {
  .pl-layout { grid-template-columns: 1fr; gap: 16px; }
  /* Stacked, the sidebar is just the first two cards — pinning it would park
     them over the content the visitor scrolled to. It also moves below: a
     column that is beside the charts on a desktop would otherwise push them a
     full screen down on a phone, and the tabs are what people come here for. */
  .pl-sidebar { position: static; flex-direction: row; flex-wrap: wrap; order: 2; }
  .pl-main { order: 1; }
  .pl-sidebar > .pl-card { flex: 1 1 280px; }
  /* A long career would otherwise be a very long scroll past the end of the
     page's real content. */
  .pl-seasons { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
}

/* Phones. The identity band and the four tiles were together taking 537px —
   most of a screen — before the first real content. Everything below trims the
   parts that only carried air: the emblem, the icon row inside a tile, and the
   padding around both. */
@media (max-width: 760px) {
  .player-page .profile-head { padding: 16px; gap: 13px; }
  .player-page .profile-head .ph-rank:not(.club-rank) { width: 54px; height: 54px; border-radius: 13px; }
  .player-page .profile-head .ph-rank .rank-ic { width: 42px; height: 42px; }
  .player-page .profile-head .ph-main { flex-basis: 150px; }
  .player-page .profile-head .ph-main h1 { font-size: 1.4rem; line-height: 1.2; }
  .player-page .ph-sub { margin: 5px 0 9px; }
  .player-page .ph-last { margin-left: 8px; padding-left: 8px; }
  .player-page .ph-handles { gap: 5px; }
  .player-page .ph-actions { width: 100%; gap: 8px; }
  .player-page .ph-actions .btn { flex: 1; }
  .player-page .page-kicker { margin-bottom: 7px; }

  .player-page .stat-row { margin-top: 14px; gap: 10px; }
  .player-page .stat-tile { padding: 12px 14px; }
  .player-page .st-ic { min-height: 0; margin-bottom: 7px; }
  .player-page .st-ic .material-icons { font-size: 17px; }
  .player-page .st-ic .rank-ic { width: 22px; height: 22px; }
  .player-page .st-v, .player-page .stat-card .value { font-size: 1.25rem; margin-bottom: 4px; }
  .player-page .st-l { font-size: .57rem; }

  .pl-layout { margin-top: 14px; }
  .pl-sidebar { flex-direction: column; }
  .pl-card { padding: 15px; }
  .pl-pane > .section-head:first-child { margin-top: 14px; }
  .pl-pane > .section-head:not(:first-child) { margin-top: 20px; }
  .pl-log-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pl-log-tile { padding: 11px 13px; }
  .pll-v { font-size: 1.15rem; }
  .pl-tab { padding-inline: 11px; min-height: 38px; font-size: .82rem; }
  /* A capped grid on a phone competes with the page's own scroll, so it gets
     the shorter cap and the taller share of the screen. */
  .pl-scroll { max-height: 62vh; }
}

@media (max-width: 480px) {
  /* The icon in a stat tile is decoration — the value below it already says
     "Ruby" or "#2". On a phone it costs a quarter of the tile's height. */
  .player-page .st-ic { display: none; }
  /* The board chip is not decoration: it is the only thing saying whether the
     rank below is ranked or World Tour. The row stays, the glyph goes. */
  .player-page .stat-tile.has-board .st-ic { display: flex; }
  .player-page .stat-tile.has-board .st-ic > .material-icons,
  .player-page .stat-tile.has-board .st-ic > .msr,
  .player-page .stat-tile.has-board .st-ic > .rank-ic { display: none; }
  .player-page .stat-tile { padding: 13px 14px; }
}

@media (max-width: 400px) {
  .pl-tab { padding-inline: 9px; }
  .pl-tab .material-icons { display: none; }
  .player-page .profile-head .ph-main h1 { font-size: 1.28rem; }
}

/* Search and widget studio. */
.gs-hero { padding-block: 0 30px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.gs-hero h1 { font-style: normal; font-size: clamp(2rem, 3.5vw, 3rem); letter-spacing: -.045em; }
.gs-hero > p { margin-top: 12px; line-height: 1.7; }
.gs-searchwrap { max-width: 860px; margin: 28px auto 0; }
.gs-box { border-radius: 12px; padding: 8px 8px 8px 18px; background: #151d27; }
.gs-box input { padding-block: 14px; font-size: 1rem; }
.gs-go { min-height: 44px; padding-inline: 26px; }
.gs-tabs { margin-top: 20px; }
.gs-filter-toggle { width: 44px; height: 44px; border-radius: 8px; }
.gs-pop { z-index: var(--z-floating); background: var(--popover-bg); border-radius: 14px; box-shadow: var(--shadow-lg); }
.gs-pop.is-open { transform: none; }
.gs-frow > .sel { padding: 0; background: none; border: 0; }
.gs-frow .sel-btn.gs-input { padding: 0 12px; }
.gs-pop-head-actions { align-items: center; }
.wb { gap: 24px; }
.wb-grid { gap: 24px; }
.wb-panel, .wb-out { padding: 6px 24px 24px; border-radius: 14px; }
.wb-stage { min-height: 220px; border-radius: 12px; }
.wb-tabs { gap: 14px; margin-bottom: 24px; }
.wb-tab { min-height: 48px; font-size: .83rem; }
.wb-choice { border-radius: 9px; min-height: 48px; }
.wb-panel input[type="range"] { min-height: 0; height: 4px; }
.wb-panel input[type="color"] { min-height: 0; }
.wb-tabs .wb-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.wb-l { margin-top: 20px; }
.wb-outpane textarea { padding: 16px; line-height: 1.7; }

/* Informational pages and footer. */
.prose { max-width: 920px; }
.prose .page-head { margin-bottom: 32px; }
.prose h1 { margin-bottom: 0; }
.prose h2 { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 1.2rem; }
.prose p, .prose li { line-height: 1.85; font-size: .96rem; }
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose li { padding-left: 6px; margin-block: 14px; }
.prose li::marker { color: var(--primary-color); }
.prose .notice { margin-top: 30px; }
.not-found { max-width: 680px; margin: 40px auto; padding-block: 60px; }
.error-number { display: block; font-size: clamp(5rem, 16vw, 9rem); font-weight: 700; line-height: 1; letter-spacing: -.08em; color: var(--primary-light); margin-bottom: 24px; }
.not-found h1 { font-size: 2rem; margin-bottom: 16px; }
.empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.empty-actions .btn { margin-top: 0; }
.site-footer { margin-top: 72px; background: #0e1319; }
.footer-top { grid-template-columns: 2fr 1fr 1fr 1fr; padding: 48px 32px 40px; gap: 64px; }
.footer-brand p { max-width: 340px; font-size: .85rem; line-height: 1.8; }
.footer-col h4 { color: var(--text-muted); font-size: .63rem; letter-spacing: .15em; margin-bottom: 16px; }
.footer-col a { font-size: .83rem; font-weight: 400; padding-block: 6px; }
.footer-col a:hover { color: var(--primary-light); }
.footer-bottom > div { padding: 20px 32px; font-size: .73rem; }

/* Motion is confined to interaction and a single short entrance. Content is
   always visible, including without JavaScript or IntersectionObserver. */
@keyframes menuIn { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
@keyframes settleIn { from { opacity: .55; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.is-revealed { animation: settleIn .5s var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.feature:hover, .top-card:hover, .sa-card:hover { transform: translateY(-3px); border-color: #456277; }
  .rank-card:hover .rank-ic { transform: scale(1.08); }
}
@media (min-width: 1101px) {
  /* No grid here: style.css pins the menu to the container's midpoint with
     position:absolute, which takes it out of the flow — a three-column grid
     would then place the actions in the middle column instead of the end. */
  .modern-mobile-menu, .nav-backdrop { display: none; }
}
@media (max-width: 1100px) {
  .modern-nav-menu { display: none; }
  .modern-mobile-toggle { display: inline-flex; }
  .modern-nav-actions { margin-left: auto; }
  .hero-layout { gap: 30px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .home-hero h1 { font-size: clamp(2.7rem, 5.4vw, 4rem); }
  .arena-card { padding: 20px; }
  .top-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .top-card .tc-name { font-size: .85rem; }
  .footer-top { gap: 32px; }
  .lb-field { min-width: 170px; }
}
@media (max-width: 760px) {
  :root { --nav-height: 66px; }
  .container, .modern-navbar-container { padding-inline: 20px; }
  .section { padding-block: 26px; }
  .section:first-of-type { padding-top: 28px; }
  .page-head { padding-bottom: 22px; margin-bottom: 24px; }
  .page-head h1, .gs-hero h1 { font-size: 2rem; }
  .page-head > p { font-size: .9rem; }
  .section-head { gap: 12px; margin-bottom: 16px; }
  .section-head:not(:first-child) { margin-top: 30px; }
  .grid { gap: 14px; }
  .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-hero { padding-block: 8px 0; }
  .home-hero .tagline { font-size: .58rem; margin-bottom: 22px; }
  .home-hero h1 { font-size: clamp(2.8rem, 9vw, 4rem); }
  .home-hero .lead { font-size: .94rem; margin-block: 20px 24px; }
  .arena-card { display: none; }
  .hero-search { min-height: 60px; padding: 6px 6px 6px 14px; gap: 8px; }
  .hero-search input { font-size: 16px; }
  .hero-shortcuts { margin-top: 20px; gap: 12px 18px; }
  .home-hero .hero-stats { margin-top: 28px; grid-template-columns: 1fr 1fr; }
  .home-hero .hs-cell { padding: 20px; }
  .home-hero .season-timer { grid-column: 1 / -1; }
  .home-hero .season-timer::after { left: 20px; right: 20px; background: var(--line); }
  .home-hero .season-timer .st-clock { gap: 18px; }
  .home-hero .hs-stat + .hs-stat::before { display: block; }
  .home-hero .hs-n { font-size: clamp(1.3rem, 5vw, 1.85rem); }
  .home-hero .st-top .eyebrow { font-size: .58rem; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  a.feature { padding: 20px; }
  .feature h3 { font-size: .96rem; }
  .feature p { font-size: .79rem; }
  .feature-arrow { right: 18px; top: 20px; }
  .top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-card .tc-name { font-size: .95rem; }
  .home-closing { flex-direction: column; align-items: flex-start; padding: 24px; }
  .panel, .card { padding: 20px; }
  .stat-tile, .panel.stat-tile, .stat-card { padding: 17px; }
  .st-ic { margin-bottom: 12px; }
  .st-v, .stat-card .value { font-size: 1.5rem; }
  .st-l { font-size: .6rem; }
  .lb-filters { padding: 16px; gap: 14px; }
  .lb-field { flex: 1 1 100%; min-width: 0; }
  .lb-search { min-width: 0; flex-basis: 100%; }
  .lb-group { padding: 20px; }
  .lb-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lb-chip { gap: 8px; padding: 12px; font-size: .78rem; }
  .lb-chip .material-icons { flex-shrink: 0; width: 25px; height: 25px; font-size: 17px; }
  .table-wrap { max-width: 100%; }
  th, td { padding: 14px 16px; }
  .profile-head { gap: 18px; padding: 24px 20px; }
  .profile-head .ph-rank:not(.club-rank) { width: 68px; height: 68px; border-radius: 15px; }
  .profile-head .ph-rank .rank-ic { width: 54px; height: 54px; }
  .profile-head .ph-main { flex-basis: 170px; }
  .profile-head .ph-main h1 { font-size: 1.7rem; }
  .ph-handles { gap: 6px; }
  .handle { max-width: 100%; }
  .handle-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chart-card, .lb-chart-panel { padding: 18px 14px 12px; }
  .chart-card-head { gap: 12px; }
  .cc-btn, .cc-range { min-height: 38px; }
  .compare-form { padding: 20px; gap: 12px; }
  .cf-field { flex-basis: 100%; }
  .cf-vs { width: 100%; height: 22px; }
  .compare-form > .btn { width: 100%; }
  .compare-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .compare-player.panel { padding: 16px; flex-direction: column; text-align: center; }
  .compare-player b { font-size: .95rem; }
  .table-wrap .compare-table { min-width: 0; table-layout: fixed; }
  .compare-table td { width: 33%; padding: 13px 6px; font-size: .8rem; white-space: normal; overflow-wrap: anywhere; }
  .compare-table th { width: 34%; padding: 13px 6px; font-size: .57rem; letter-spacing: .04em; line-height: 1.6; overflow-wrap: anywhere; }
  .compare-table td .rank-ic { display: block; margin: 0 auto 5px; }
  .rank-tier { padding: 20px; }
  .gs-searchwrap { margin-top: 22px; }
  .gs-box { padding: 8px; }
  .gs-pop { border-radius: 14px; }
  .wb-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wb-panel, .wb-out { padding: 4px 18px 20px; }
  .wb-tab { min-height: 46px; }
  .wb-tabs { gap: 4px; }
  .wb-tab { padding-inline: 9px; font-size: .78rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 36px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: 420px; }
  .footer-bottom > div { padding: 18px 20px; flex-direction: column; gap: 8px; }
  .site-footer { margin-top: 44px; }
  .site-header .arzb-name { display: none; }
}
@media (max-width: 620px) {
  .gs-pop { z-index: var(--z-sheet); border-radius: 0; }
  /* Four tabs, one narrow row: tighten them rather than letting the last one
     fall off the edge of the card. */
  .gs-tabs { max-width: 100%; }
  .gs-tab { padding-inline: 10px; gap: 5px; }
  /* Comfortable to tap: these read as a control, not as text. */
  .wb-seg button, .seg button { min-height: 32px; }
}
@media (max-width: 400px) {
  .container, .modern-navbar-container { padding-inline: 16px; }
  .modern-navbar-container { gap: 12px; }
  .modern-brand-text { font-size: .95rem; }
  .modern-brand-logo { width: 28px; height: 28px; }
  .brand-caption { font-size: .5rem; }
  .site-header .arzb-signin { padding-inline: 10px; font-size: .75rem; }
  .site-header .arzb-signin .material-icons { display: none; }
  .nav-search { width: 34px; }
  .modern-nav-actions { gap: 6px; }
  .modern-mobile-toggle { width: 36px; }
  .feature-grid { grid-template-columns: 1fr; }
  a.feature { padding: 22px; }
  .feature .fi { margin-bottom: 15px; }
  .feature p { font-size: .85rem; }
  .home-hero .hs-cell { padding-inline: 16px; }
  .home-hero .season-timer .st-clock { gap: 13px; }
  .lb-chip-grid { grid-template-columns: 1fr; }
  .pager, #lbPager { gap: 5px; }
  .pager .btn { padding-inline: 10px; }
  .pager-info { padding-inline: 4px; }
  .gs-tab { padding-inline: 8px; }
  .gs-tab .material-icons { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Player insights - the Standing and Activity tabs.
   Both are derived figures (see playerInsightsService), so every panel names
   the board it is about; the styling keeps them visually one family so the
   reader knows they are reading the same kind of number.
   ========================================================================== */
/* One rhythm for the whole tab instead of a pile of adjacent-sibling rules.
   The previous `.ins-card + .ins-card` also matched cards INSIDE the grid below,
   so every second card carried a 16px top margin: it broke the row alignment
   and, because a margin on a grid item eats its cell, made the cards unequal
   heights. This only ever touches direct children of the tab. */
.ins-flow > * + * { margin-top: 18px; }
/* .section-head:not(:first-child) already asks for 40px and outranks the rule
   above, so a new section still gets its wider gap. */

.ins-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }
.ins-card { padding: 20px; }
/* Cards sharing a row are the same height (grid stretch); laying their contents
   out as a column lets the cut-off list sit on the bottom edge of each one, so
   the row reads as a row rather than as four ragged boxes. */
.ins-cards > .ins-card { display: flex; flex-direction: column; margin: 0; }
.ins-cards > .ins-card > .ins-cuts { margin-top: auto; padding-top: 16px; }
.ins-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ins-card-head h3 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.ins-chip {
  padding: 3px 10px; border-radius: 999px; background: #17c3e614; border: 1px solid #17c3e63d;
  color: var(--primary-light); font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.ins-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.ins-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ins-v { font-size: 1.25rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ins-sub { margin-left: 3px; font-size: .6em; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.ins-l { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); line-height: 1.5; }
.ins-league { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 600; font-size: .92rem; }
.ins-league .rank-ic { width: 20px; height: 20px; }

.ins-meter { margin-top: 16px; }
.ins-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: .85rem; font-weight: 500; }
.ins-meter-track { height: 6px; border-radius: 999px; background: #ffffff10; overflow: hidden; }
.ins-meter-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary-color), var(--primary-light)); }

.ins-cuts { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ins-cuts li { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; color: var(--text-secondary); }
.ins-cuts .msr { font-size: 17px; flex-shrink: 0; color: var(--primary-light); }
.ins-cuts .ins-done { color: var(--text-secondary); }
.ins-cuts .ins-done .msr { color: var(--success-color); }

/* The player's own row in the rivals table - the point of the table is the
   distance either side of it, so it has to be findable at a glance. */
.ins-me td { background: #17c3e60f; font-weight: 600; }
.ins-me td:first-child { box-shadow: inset 3px 0 0 var(--primary-color); }

/* Crossings: two cards, one per direction, equal height and colour-coded so the
   heading never has to be read twice. */
.ins-cross-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.ins-cross-card { display: flex; flex-direction: column; margin: 0; }
.ins-cross-card .ins-cross { margin-top: auto; }
.ins-cross-card .ins-card-head h3 { display: flex; align-items: center; gap: 8px; }
.ins-cross-card .ins-card-head .msr { font-size: 18px; }
.ins-cross-card.is-down { border-color: #ff3d6a33; }
.ins-cross-card.is-down .ins-card-head .msr, .ins-cross-card.is-down .ins-cross-move .msr { color: var(--danger-color, #ff5c7a); }
.ins-cross-card.is-down .ins-chip { background: #ff3d6a14; border-color: #ff3d6a3d; color: #ff8fa6; }
.ins-cross-card.is-up { border-color: #3ddc9733; }
.ins-cross-card.is-up .ins-card-head .msr, .ins-cross-card.is-up .ins-cross-move .msr { color: var(--success-color); }
.ins-cross-card.is-up .ins-chip { background: #3ddc9714; border-color: #3ddc973d; color: #7ef0c0; }

.ins-cross { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ins-cross li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'who move' 'when move';
  align-items: center; gap: 0 14px; padding: 9px 0; font-size: .88rem;
  border-top: 1px solid var(--line);
}
.ins-cross li:first-child { border-top: 0; padding-top: 0; }
.ins-cross-who { grid-area: who; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ins-cross-when { grid-area: when; }
.ins-cross-move {
  grid-area: move; display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
}
.ins-cross-move .msr { font-size: 17px; }
/* A footnote to the two cards above it, not a block of its own: close enough to
   belong to them, not so close that it looks glued to the second card. */
.ins-note { margin: 10px 0 0; }

.ins-core { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ins-core li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line); font-size: .88rem;
}
.ins-core li:first-child { border-top: 0; padding-top: 0; }
.ins-core-n { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: .8rem; }
.ins-core-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-core-rank, .ins-core-score { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ins-core-score { font-weight: 600; min-width: 58px; text-align: right; }
/* The player whose page this is, inside their own club's core. */
.ins-core li.is-me { background: #17c3e60d; margin-inline: -20px; padding-inline: 20px; }
.ins-core li.is-me .ins-core-who { font-weight: 600; }

/* Two cards side by side, same height, stacking on a narrow screen. Used by
   the crossings, the league/milestone pair and the club pair, so those three
   rows share one shape. */
.ins-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.ins-pair > .ins-card { display: flex; flex-direction: column; margin: 0; }
/* Paired cards are the same height by design, so the shorter one's content
   would otherwise sit in the top corner of a mostly empty box. The last block
   in a card takes the slack and centres itself in it. */
.ins-pair > .ins-card > :last-child { flex: 1; }
.ins-pair > .ins-card > .ins-grid:last-child { align-content: center; }

/* The hour histogram is drawn by TF.charts.bars — the same engine as the
   leaderboard distribution — so it arrives with a hover guide and a tooltip.
   This only gives it room. */
.ins-chart { margin: 0 -4px; }

.ins-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ins-facts li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--line); font-size: .88rem;
}
.ins-facts li:first-child { border-top: 0; padding-top: 0; }
.ins-fact-k { color: var(--text-secondary); min-width: 0; }
.ins-fact-v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.ins-miles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ins-miles li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--line); font-size: .88rem;
}
.ins-miles li:first-child { border-top: 0; padding-top: 0; }
.ins-miles .msr { font-size: 18px; color: var(--primary-light); }
.ins-mile-what { min-width: 0; }
.ins-mile-when { white-space: nowrap; cursor: help; }

.ins-leagues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ins-leagues li { display: flex; align-items: center; gap: 10px; font-size: .88rem; }
.ins-lg-name { min-width: 92px; }
.ins-lg-bar { flex: 1; height: 6px; border-radius: 999px; background: #ffffff10; overflow: hidden; }
.ins-lg-bar span { display: block; height: 100%; border-radius: 999px; background: var(--primary-color); }
.ins-lg-n { font-variant-numeric: tabular-nums; color: var(--text-muted); min-width: 34px; text-align: right; }

@media (max-width: 640px) {
  .ins-card { padding: 16px; }
  .ins-lg-name { min-width: 74px; }
  .ins-core li.is-me { margin-inline: -16px; padding-inline: 16px; }
}

.table-scroll-hint { margin: 10px 0 8px; color: var(--text-secondary); font-size: .78rem; line-height: 1.5; }
.table-scroll-hint[hidden] { display: none; }
.table-scroll-hint::before { content: '↔'; margin-right: 8px; color: var(--primary-light); }

/* Mobile layouts. Table sizing belongs here, scoped by table type; profile
   tabs must never inherit the column widths of the appearances table. */
@media (max-width: 800px) {
  .container, .modern-navbar-container { padding-inline: 16px; }
  .modern-navbar-container { gap: 10px; }
  .modern-brand { min-width: 0; gap: 7px; }
  .modern-brand-text { font-size: 1rem; }
  .brand-caption { font-size: .5rem; letter-spacing: .14em; }
  .modern-nav-actions { flex-shrink: 0; gap: 6px; }
  .nav-search, .modern-mobile-toggle, .mobile-menu-close,
  .site-header .arzb-ic { width: 44px; height: 44px; }
  .site-header .arzb-signin { height: 44px; padding-inline: 10px; }
  .site-header .arzb-name, .site-header .arzb-caret { display: none; }
  .site-header .arzb-av { width: 44px; height: 44px; padding: 4px; justify-content: center; }
  .site-header .arzb-pop { position: fixed; top: calc(var(--nav-height) + 8px); left: 12px; right: 12px; width: auto; max-width: none; }
  .modern-mobile-menu { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

  .btn-sm, .tab, .gs-tab, .pl-tab, .plat-btn, .cc-btn, .cc-range,
  .seg button, .wb-canvas-toggle button, .wb-swatch, .wb-check,
  .gs-pop-reset, .dir-filters .gs-pop-reset, .gs-pop-close,
  .sel-opt, .back-link { min-height: 44px; }
  .mv-nav-btn { width: 44px; height: 44px; }
  .cc-btn.cc-icon { width: 44px; }
  .sel > .sel-btn, main input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
  main select, main textarea, .wb-color input[type="text"] { font-size: 16px; }
  .section-head, .chart-card-head { flex-wrap: wrap; }
  .pager { flex-wrap: wrap; gap: 8px; }
  .pager-info { font-size: .78rem; }
  .footer-col a { min-height: 44px; display: flex; align-items: center; }
  .prose { overflow-wrap: anywhere; }
  [data-tip]::after { display: none; position: fixed; inset: auto 16px 20px; width: auto; max-width: none; z-index: var(--z-dialog); font-size: .875rem; }
  [data-tip]:hover::after, [data-tip]:focus-visible::after, .st-info[data-tip]:focus::after { display: block; }
  .st-l .st-info { width: 44px; height: 44px; margin-left: 0; }
  .chartz-tip { max-width: min(240px, calc(100vw - 64px)); white-space: normal; }

  .pl-layout, .pl-main, .pl-pane, .pl-sidebar, .wb-panel, .wb-out,
  .compare-player > div { min-width: 0; }
  .pl-sidebar > .pl-card { flex-basis: auto; }
  .ins-cards, .ins-cross-grid, .ins-pair { grid-template-columns: minmax(0, 1fr); }
  .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-v { overflow-wrap: anywhere; }
  .ins-facts li { flex-wrap: wrap; gap: 4px 12px; }
  .ins-fact-v { white-space: normal; margin-left: auto; }
  .ins-chip { white-space: normal; }
  .ins-core li { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px 8px; }
  .ins-core-rank { grid-column: 2; font-size: .76rem; }
  .ins-core-score { grid-column: 3; grid-row: 1 / span 2; }
  .ins-core-who { white-space: normal; overflow-wrap: anywhere; }
  .ins-miles li { grid-template-columns: auto minmax(0, 1fr); }
  .ins-mile-when { grid-column: 2; }

  /* Detailed tables keep every metric and scroll within their own panel. */
  .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #52677e #12171e; }
  .table-wrap table { min-width: 560px; font-size: .875rem; }
  .table-wrap th, .table-wrap td { padding: 13px 12px; }
  .table-wrap th { font-size: .7rem; letter-spacing: .04em; white-space: nowrap; }
  .table-wrap td:not(.num) { max-width: none; overflow: visible; text-overflow: clip; }
  .table-wrap td a { overflow-wrap: anywhere; }
  #playerRoot .table-wrap table { table-layout: auto; }
  #playerRoot #logBox table { min-width: 690px; }
  #playerRoot .pl-pane[data-pane="appearances"] table { min-width: 620px; }
  #standingBox .table-wrap table { min-width: 500px; }
  #ranksTable table { min-width: 620px; }
  #moversRoot .table-wrap table { min-width: 520px; }
  #moversRoot .table-wrap td:first-child { min-width: 170px; white-space: normal; }
  #clubTable table { min-width: 580px; }
  #clubTable table:has(th:nth-child(5)) th:nth-child(5),
  #clubTable table:has(th:nth-child(5)) td:nth-child(5) { display: table-cell; }
  #clubTable table:has(th:nth-child(5)) { min-width: 720px; }

  /* Four-column leaderboards fit the viewport. League emblems carry their
     accessible league names; the player name can wrap instead of vanishing. */
  #lbGrid table, #gsResults table { table-layout: fixed; min-width: 0; }
  #lbGrid th:nth-child(2), #lbGrid td:nth-child(2),
  #lbGrid th:nth-child(4), #lbGrid td:nth-child(4) { display: none; }
  #lbGrid th:nth-child(1), #lbGrid td:nth-child(1),
  #gsResults th:nth-child(1), #gsResults td:nth-child(1) { width: 44px; }
  #lbGrid th:nth-child(5), #lbGrid td:nth-child(5),
  #gsResults th:nth-child(3), #gsResults td:nth-child(3) { width: 56px; text-align: center; }
  #lbGrid th:nth-child(6), #lbGrid td:nth-child(6),
  #gsResults th:nth-child(4), #gsResults td:nth-child(4) { width: 78px; }
  #lbGrid th, #lbGrid td, #gsResults th, #gsResults td { padding-inline: 8px; }
  #lbGrid td:nth-child(3) > a { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  #gsResults td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
  #lbGrid .league-cell > span, #gsResults .league-cell > span { display: none; }
  #lbGrid .league-cell .rank-ic, #gsResults .league-cell .rank-ic { margin: 0; width: 24px; height: 24px; }
  #dirTable table { min-width: 620px; }

  .table-wrap .compare-table { min-width: 0; table-layout: fixed; }
  .compare-table td, .compare-table th { white-space: normal; overflow-wrap: anywhere; padding: 14px 8px; }
  .compare-table th { width: 34%; font-size: .72rem; letter-spacing: 0; line-height: 1.5; }
  .compare-table td { width: 33%; font-size: .875rem; }
  .compare-player { overflow-wrap: anywhere; }

  .wb-tabs { flex-wrap: wrap; gap: 4px; overflow: visible; }
  .wb-tabs:not(.wb-tabs-sm) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-tab { justify-content: center; }
  .wb-tabs-sm .wb-tab { flex: 1; padding-inline: 6px; font-size: .8rem; }
  .wb-preview-head { flex-wrap: wrap; gap: 12px; }
  .wb-canvas-toggle { width: 100%; }
  .wb-canvas-toggle button { flex: 1; font-size: .8rem; }
  .wb-panel input[type="range"] { height: 44px; min-height: 44px; background: transparent; }
  .wb-panel input[type="color"] { height: 44px; }
  .wb-check input { width: 20px; height: 20px; min-height: 20px; }
  .wb-color[hidden] { display: none; }
  .wb-foot { overflow-wrap: anywhere; }
}

@media (max-width: 760px) {
  .page-head h1, .gs-hero h1 { font-size: clamp(1.8rem, 7vw, 2.2rem); }
  .panel, .card { padding: 18px; }
  .st-l, .player-page .st-l { font-size: .7rem; letter-spacing: .07em; line-height: 1.5; }
  .st-v { overflow-wrap: anywhere; }
  .top-card .tc-name { white-space: normal; overflow-wrap: anywhere; }
  .st-l .st-info[data-tip]::after { position: fixed; inset: auto 16px 20px; width: auto; max-width: none; z-index: var(--z-dialog); font-size: .875rem; }
  .stat-row > :last-child .st-l .st-info[data-tip]::after { left: 16px; right: 16px; }
  .st-l .st-info[data-tip]:focus::after { visibility: visible; opacity: 1; }
  .pl-tabs { display: flex; flex-wrap: nowrap; gap: 5px; padding: 5px; }
  .pl-tab { justify-content: center; flex-direction: row; gap: 8px; padding: 12px 15px; font-size: .875rem; }
  .pl-tab .msr { font-size: 20px; }
  .player-page .profile-head .ph-main { flex: 1 1 160px; min-width: 0; }
  .player-page .ph-main h1 { overflow-wrap: anywhere; }
  .player-page .ph-sub { display: flex; flex-wrap: wrap; gap: 6px 10px; overflow-wrap: anywhere; }
  .player-page .ph-last { margin: 0; padding: 0; border: 0; }
  .player-page .ph-actions .btn { min-width: 0; padding-inline: 10px; }
  .cc-actions { flex-wrap: wrap; gap: 8px; }
  .cc-ranges { min-width: 0; max-width: 100%; }
  .tf-modal-panel { max-height: calc(100dvh - 20px); }
  .gs-pop-body { min-height: 0; }
}

@media (max-width: 360px) {
  .modern-navbar-container { padding-inline: 12px; gap: 6px; }
  .modern-brand-logo { width: 24px; height: 24px; }
  .modern-brand-text { font-size: .85rem; }
  .brand-caption { font-size: .43rem; }
  .modern-navbar-container:has(.arzb-av) .brand-caption { display: none; }
  .modern-navbar-container:has(.arzb-av) .modern-brand-text { font-size: .72rem; letter-spacing: -.03em; }
  .site-header .arzb-signin { padding-inline: 8px; font-size: .72rem; }
  .modern-nav-actions { gap: 4px; }
  .home-hero h1 { font-size: 2.5rem; }
  .home-hero .season-timer .st-clock { gap: 8px; }
  .home-hero .st-unit { min-width: 40px; }
  .home-hero .hs-cell { padding-inline: 12px; }
  .pl-tab { font-size: .85rem; }
  .stat-tile, .panel.stat-tile { padding: 14px 12px; }
}