/* =====================================================================
   STATISTWIGS — "Black Ice & Steel" design system
   Forged steel + black ice, molten orange where it matters, glacier-blue
   electricity, goal-lamp red for goals and "live".
   Sections:
     0  Fonts            7  Data table           14 Player hero
     1  Tokens           8  Game scores          15 KPI tiles
     2  Base             9  Tooltip              16 Chart panels
     3  Textures/plates  10 Pagination           17 Chips & toggles
     4  Header & nav     11 Empty state          18 Footer
     5  Page head        12 Badges & misc        19 Error page
     6  Filters/controls 13 Buttons              20 Responsive / motion
   ===================================================================== */

/* ---------- 0. Fonts (OFL, vendored woff2: latin + latin-ext) ---------- */
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('../fonts/big-shoulders-display-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('../fonts/big-shoulders-display-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-semi-condensed-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-semi-condensed-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-semi-condensed-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-semi-condensed-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-semi-condensed-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-semi-condensed-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-semi-condensed-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-semi-condensed-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: dark;

  /* black ice surfaces (darkest -> raised) */
  --ice-0: #05070A;   /* page edge, footer */
  --ice-1: #0B1016;   /* page */
  --ice-2: #10171F;   /* panel / chart surface */
  --ice-3: #141C26;   /* zebra row, inputs */
  --ice-4: #1A2531;   /* hover row */
  --ice-5: #22303E;   /* pressed / active */

  /* steel lines */
  --steel-1: #212C38; /* hairline */
  --steel-2: #2E3B49; /* divider */
  --steel-3: #4A5866; /* strong edge */
  --steel-4: #7D8B99; /* chrome mid */

  /* ink (all >= 7:1 on --ice-2 except --ink-4 which is 5.2:1) */
  --ink-1: #EEF4F8;   /* primary text, frost */
  --ink-2: #C2CEDA;   /* secondary text */
  --ink-3: #9AA8B6;   /* muted text, labels */
  --ink-4: #7F8C99;   /* disabled / tertiary (large text only) */

  /* accents */
  --molten: #FF5A1F;      /* sorted column, primary action, current page */
  --molten-hi: #FF8A3D;
  --molten-gold: #FFB347;
  --on-molten: #170800;   /* ink on molten fills (8.6:1) */
  --molten-tint: rgba(255, 90, 31, .11);
  --molten-tint-2: rgba(255, 90, 31, .17);
  --glacier: #5CCBFF;     /* links, focus, OT/SO, electric */
  --glacier-hi: #A6E3FF;
  --glacier-tint: rgba(92, 203, 255, .10);
  --lamp: #FF2D3D;        /* goal lamp: live dot, goals */
  --lamp-chart: #E5384A;  /* goal mark on charts */
  --up: #4ADE80;
  --down: #FF7A7A;

  /* gradients */
  --grad-chrome: linear-gradient(180deg, #FFFFFF 0%, #D6DFE7 44%, #7D8B99 52%, #C9D3DC 68%, #EEF4F8 100%);
  --grad-molten: linear-gradient(180deg, #FFC15C 0%, #FF6A2B 52%, #E8461A 100%);
  --grad-steel: linear-gradient(180deg, #1A232E 0%, #121921 100%);
  --grad-btn-molten: linear-gradient(180deg, #FF8A3D 0%, #FF5A1F 55%, #E8461A 100%);

  /* type */
  --font-display: 'Big Shoulders Display', 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-ui: 'Barlow Semi Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --fs-11: .6875rem; --fs-12: .75rem; --fs-13: .8125rem; --fs-14: .875rem;
  --fs-15: .9375rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem;
  --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem;
  --fs-hero: clamp(2.6rem, 1.4rem + 4.2vw, 5.4rem);
  --track-label: .16em;

  /* space & shape */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --cut: 10px;               /* diagonal corner cut size */
  --radius: 3px;
  --container: 1400px;
  --gutter: 24px;
  --header-h: 72px;          /* updated live by app.js */
  --rank-w: 44px;            /* rank column width (sticky offset) */
  --row-h: 38px;

  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -12px rgba(0,0,0,.7);
  --glow-molten: 0 0 18px rgba(255, 90, 31, .35);
  --glow-glacier: 0 0 16px rgba(92, 203, 255, .35);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 120ms; --t-med: 220ms;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 500 var(--fs-15)/1.45 var(--font-ui);
  color: var(--ink-1); background-color: var(--ice-1);
  background-image:
    radial-gradient(1200px 520px at 85% -120px, rgba(92,203,255,.07), transparent 70%),
    radial-gradient(900px 480px at -10% 0, rgba(255,90,31,.05), transparent 70%),
    var(--tex-scratch);
  background-attachment: fixed, fixed, scroll;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--glacier); text-decoration: none; }
a:hover { color: var(--glacier-hi); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; border-radius: 2px; }
::selection { background: rgba(255,90,31,.45); color: #fff; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
p { margin: 0 0 var(--sp-3); }
.num, .tnum { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; padding: 8px 14px; background: var(--molten); color: var(--on-molten); font-weight: 700; }
.skip-link:focus { top: 8px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.page { flex: 1 0 auto; padding: var(--sp-6) 0 var(--sp-7); }
.section { margin-top: var(--sp-7); }
.section-title { font-size: var(--fs-24); display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-4); }
.section-title::before { content: ""; width: 22px; height: 3px; background: var(--molten); transform: skewX(-30deg); }
.muted { color: var(--ink-3); }
.label {
  font: 600 var(--fs-11)/1.2 var(--font-ui); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-3);
}
.text-molten { color: var(--molten-hi); } .text-glacier { color: var(--glacier); } .text-lamp { color: var(--lamp); }
.up { color: var(--up); } .down { color: var(--down); }
.chrome-text {
  background: var(--grad-chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
.molten-text {
  background: var(--grad-molten); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- 3. Textures & plates ---------- */
:root {
  /* ice scratches: stretched fractal noise, ~1.3 KB, rendered once per tile */
  --tex-scratch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .75' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .88 0 0 0 0 1 0 0 0 1.1 -.78'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23s)' transform='rotate(-16 260 260)' opacity='.5'/%3E%3C/svg%3E");
  /* brushed steel: fine vertical grain */
  --tex-brushed: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px, rgba(0,0,0,.05) 3px 4px);
  /* rivets in four corners */
  --rivets:
    radial-gradient(circle at 9px 9px, #9AA8B6 0 1.3px, #2E3B49 1.4px 2.4px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) 9px, #9AA8B6 0 1.3px, #2E3B49 1.4px 2.4px, transparent 2.6px),
    radial-gradient(circle at 9px calc(100% - 9px), #9AA8B6 0 1.3px, #2E3B49 1.4px 2.4px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #9AA8B6 0 1.3px, #2E3B49 1.4px 2.4px, transparent 2.6px);
  /* faceoff circle art for page heads */
  --art-faceoff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none'%3E%3Cg stroke='%23E5384A' stroke-opacity='.32'%3E%3Ccircle cx='200' cy='200' r='150' stroke-width='5'/%3E%3Cpath stroke-width='5' d='M171 50V20M229 50V20M171 350v30M229 350v30M160 182h-40M240 182h40M160 218h-40M240 218h40M168 182v-28M232 182v-28M168 218v28M232 218v28'/%3E%3C/g%3E%3Ccircle cx='200' cy='200' r='20' fill='%23E5384A' fill-opacity='.38'/%3E%3C/svg%3E");
}
.plate {
  position: relative; background-color: var(--ice-2);
  background-image: var(--rivets), linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%);
  border: 1px solid var(--steel-2); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.cut { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
/* rail: dasher-board glass edge + molten line + glacier line */
.rail { height: 6px; background-color: #080C11; background-image:
    linear-gradient(180deg, rgba(238,244,248,.55) 0 1px, transparent 1px 2px, var(--molten) 2px 4px, transparent 4px 5px, rgba(92,203,255,.75) 5px 6px); }

/* ---------- 4. Header & nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background-color: #080C11;
  background-image: var(--tex-brushed), linear-gradient(180deg, #131B24 0%, #090D12 100%);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.9);
}
.site-header__inner { display: flex; align-items: center; gap: var(--sp-6); height: 72px; transition: height var(--t-med) var(--ease); }
.site-header .rail { position: relative; }
.site-header .rail::after { /* skate-blade notch sweep */
  content: ""; position: absolute; left: 0; top: 2px; height: 2px; width: 180px;
  background: linear-gradient(90deg, var(--molten-gold), var(--molten)); box-shadow: var(--glow-molten);
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 46px; width: auto; transition: height var(--t-med) var(--ease); }
.brand:hover { text-decoration: none; filter: brightness(1.08); }
.site-header.is-shrunk .site-header__inner { height: 52px; }
.site-header.is-shrunk .brand img { height: 34px; }

.nav { display: flex; align-items: stretch; gap: var(--sp-2); height: 100%; }
.nav__group { position: relative; display: flex; align-items: center; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  font: 700 var(--fs-15)/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-1); background: transparent; border: 0; cursor: pointer; position: relative;
}
.nav__toggle::after { /* chevron */
  content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform var(--t-fast) var(--ease);
}
.nav__toggle::before { /* active underline */
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -2px; height: 3px;
  background: var(--molten); transform: scaleX(0) skewX(-30deg); transform-origin: left; transition: transform var(--t-med) var(--ease);
}
.nav__group.is-active .nav__toggle::before { transform: scaleX(1) skewX(-30deg); box-shadow: var(--glow-molten); }
.nav__toggle:hover, .nav__group.is-open .nav__toggle { color: #fff; background: rgba(255,255,255,.04); }
.nav__group.is-open .nav__toggle::after { transform: rotate(-135deg); margin-top: 4px; }
.nav__menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 320px; z-index: 110;
  margin: 0; padding: 6px; list-style: none;
  background: #0E141B; border: 1px solid var(--steel-2); border-top: 2px solid var(--glacier);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.85), var(--glow-glacier);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.nav__menu::before { /* hover bridge */ content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav__group.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (min-width: 601px) {
  .nav__group:hover .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__group:hover .nav__toggle::after { transform: rotate(-135deg); margin-top: 4px; }
}
.nav__link {
  display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: center;
  padding: 10px 12px; color: var(--ink-1); border-left: 3px solid transparent;
}
.nav__link:hover, .nav__link:focus-visible { background: var(--ice-4); text-decoration: none; color: #fff; border-left-color: var(--glacier); }
.nav__link.is-active { background: linear-gradient(90deg, var(--molten-tint-2), transparent); border-left-color: var(--molten); }
.nav__icon { grid-row: span 2; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--steel-2); color: var(--glacier); background: var(--ice-3); }
.nav__icon svg { width: 16px; height: 16px; }
.nav__link.is-active .nav__icon { color: var(--molten-hi); border-color: rgba(255,90,31,.5); }
.nav__title { font: 700 var(--fs-16)/1.15 var(--font-ui); }
.nav__desc { font-size: var(--fs-13); color: var(--ink-3); line-height: 1.2; }
.header-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: var(--fs-13); color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.header-meta strong { color: var(--ink-1); font-weight: 700; }
.lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 3px rgba(255,45,61,.18), 0 0 12px var(--lamp); animation: lamp 2.4s ease-in-out infinite; flex: none; }
@keyframes lamp { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- 5. Page head ---------- */
.page-head {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-5);
  margin-bottom: var(--sp-5); padding: var(--sp-2) 0 var(--sp-2);
}
.page-head::before { /* faceoff circle art */
  content: ""; position: absolute; right: -60px; top: -90px; width: 360px; height: 360px; z-index: -1;
  background: var(--art-faceoff) center/contain no-repeat; opacity: .55; pointer-events: none;
}
.page-head__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--glacier); }
.page-head__eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--molten); transform: skewX(-30deg); flex: none; }
.page-head__title {
  font-size: var(--fs-hero); font-weight: 900; line-height: .88; letter-spacing: -.005em;
  font-style: normal; transform: skewX(-6deg); transform-origin: left bottom;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 10px 18px rgba(0,0,0,.5));
}
.page-head__title .chrome { background: var(--grad-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.page-head__title .molten { background: var(--grad-molten); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.page-head__lede { max-width: 62ch; margin: 14px 0 0; color: var(--ink-2); font-size: var(--fs-16); }
.page-head__aside { display: flex; gap: var(--sp-3); }
.leader {
  min-width: 170px; padding: 12px 16px 12px 18px; background: var(--ice-2);
  border: 1px solid var(--steel-2); border-top: 3px solid var(--molten); position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.leader--glacier { border-top-color: var(--glacier); }
.leader__value { font: 900 2.5rem/1 var(--font-display); color: var(--ink-1); margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.leader__value small { font-size: .5em; color: var(--ink-3); margin-left: 2px; }
.leader__who { display: flex; align-items: center; gap: 6px; font-size: var(--fs-14); font-weight: 600; color: var(--ink-2); }
.leader__who img { width: 20px; height: 20px; }

/* ---------- 6. Filters & controls ---------- */
.filters { margin-bottom: var(--sp-5); padding: 18px 22px 20px; }
.filters__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); }
.filters__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); flex: 1 1 640px; }
.filters__fields .field--wide { grid-column: span 2; }
.filters__actions { display: flex; gap: var(--sp-2); align-items: flex-end; flex: none; }
.filters__summary { display: none; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-14); color: var(--ink-2); }
.filters.is-collapsed { padding-top: 12px; padding-bottom: 12px; }
.filters.is-collapsed .filters__fields { display: none; }
.filters.is-collapsed .filters__summary { display: flex; flex: 1; }
.filters.is-collapsed .filters__actions .btn--primary { display: none; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field__label { font: 600 var(--fs-11)/1.2 var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.control, .field select, .field input {
  width: 100%; height: 40px; padding: 0 12px;
  font: 600 var(--fs-15)/1 var(--font-ui); color: var(--ink-1);
  background: #070A0E; border: 1px solid var(--steel-2); border-bottom-color: var(--steel-3); border-radius: 2px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field select, select.control {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235CCBFF' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.field select option { background: var(--ice-2); color: var(--ink-1); }
.field input::placeholder, .control::placeholder { color: var(--ink-4); font-weight: 500; }
.control:hover, .field select:hover, .field input:hover { border-color: var(--steel-3); }
.control:focus, .field select:focus, .field input:focus { outline: none; border-color: var(--glacier); box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 0 0 3px rgba(92,203,255,.18); }
.field input[type=number] { font-variant-numeric: tabular-nums; }
.search-input { padding-left: 34px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239AA8B6' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='M9.5 9.5 13 13'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 12px center !important; }
.filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--steel-2); background: var(--ice-3); font-size: var(--fs-13); }
.filter-pill b { color: var(--ink-1); font-weight: 700; }

/* ---------- 13. Buttons (early so others can extend) ---------- */
.btn {
  --btn-cut: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 22px; border: 0; cursor: pointer; white-space: nowrap;
  font: 800 var(--fs-16)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  clip-path: polygon(var(--btn-cut) 0, 100% 0, calc(100% - var(--btn-cut)) 100%, 0 100%);
  transition: filter var(--t-fast), transform var(--t-fast), background-color var(--t-fast);
}
.btn:hover { text-decoration: none; filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; filter: brightness(1.15); box-shadow: inset 0 0 0 2px var(--glacier-hi); }
.btn--primary { background: var(--grad-btn-molten); color: var(--on-molten); text-shadow: 0 1px 0 rgba(255,255,255,.25); box-shadow: var(--glow-molten); min-width: 120px; }
.btn--primary:hover { color: var(--on-molten); }
.btn--ghost { background: var(--tex-brushed), linear-gradient(180deg, #2A3542, #1A2330); color: var(--ink-1); }
.btn--ghost:hover { color: #fff; }
.btn--glacier { background: linear-gradient(180deg, #A6E3FF, #5CCBFF); color: #021019; }
.btn--sm { height: 32px; padding: 0 14px; font-size: var(--fs-14); --btn-cut: 9px; }
.btn--link { clip-path: none; background: none; color: var(--glacier); padding: 0; height: auto; font: 700 var(--fs-13)/1 var(--font-ui); letter-spacing: .14em; border-bottom: 1px solid currentColor; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- 7. Data table ---------- */
.table-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin: 0 0 10px; }
.table-meta__count { font: 800 var(--fs-24)/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.table-meta__count .num { color: var(--ink-1); }
.table-meta__count small { font: 500 var(--fs-14)/1 var(--font-ui); color: var(--ink-3); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.table-meta__sort { display: flex; align-items: center; gap: 8px; font: 600 var(--fs-12)/1 var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.table-meta__sort::before { content: ""; width: 10px; height: 12px; background: var(--molten); transform: skewX(-20deg); }
.table-meta__sort b { color: var(--glacier); font-weight: 700; }
.swipe-hint { display: none; font: 700 var(--fs-12)/1 var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--glacier); }

.table-shell { position: relative; }
.table-shell::after { /* right-edge fade when more columns are hidden */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(5,7,10,.85)); opacity: 0; transition: opacity var(--t-fast);
}
.table-shell.can-scroll-right::after { opacity: 1; }
.table-wrap {
  position: relative; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  background: var(--ice-2); border: 1px solid var(--steel-2);
  border-top: 0; box-shadow: var(--shadow-1);
  scrollbar-color: var(--steel-3) var(--ice-1); scrollbar-width: thin;
}
.table-wrap::before { /* chrome edge along the top */
  content: ""; position: sticky; left: 0; display: block; height: 3px; width: 100%;
  background: linear-gradient(90deg, #EEF4F8, #7D8B99 30%, #C2CEDA 55%, #4A5866 80%, #9AA8B6);
}
.data-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font: 500 var(--fs-14)/1.2 var(--font-ui);
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1;
}
.data-table th, .data-table td { padding: 0 10px; height: var(--row-h); white-space: nowrap; text-align: left; vertical-align: middle; }
.data-table .num { text-align: right; }
.data-table .ctr { text-align: center; }
/* header */
.data-table thead th {
  position: relative; height: 40px; background: #121A23;
  font: 700 var(--fs-12)/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 2px solid var(--steel-3); user-select: none;
}
.data-table thead tr.group-row th {
  height: 30px; background: #0D131A; border-bottom: 0; text-align: center;
  font: 800 var(--fs-14)/1 var(--font-display); letter-spacing: .22em; color: var(--ink-1);
}
.data-table thead tr.group-row th.group > span { display: inline-block; padding: 0 12px 5px; border-bottom: 2px solid var(--glacier); }
.data-table thead tr.group-row th.group { background: #0D131A linear-gradient(180deg, rgba(92,203,255,.07), transparent); }
.th-sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; padding: 6px 0; }
.th-sort:hover { color: #fff; text-decoration: none; }
.data-table th.num .th-sort { flex-direction: row; }
.sort-ind { display: inline-block; width: 7px; height: 10px; opacity: .45; flex: none;
  background: linear-gradient(currentColor, currentColor) center 0/0 0 no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M3.5 0 7 4H0zM3.5 10 0 6h7z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M3.5 0 7 4H0zM3.5 10 0 6h7z'/%3E%3C/svg%3E") center/contain no-repeat;
  background-color: currentColor; }
[data-tip] .th-label { text-decoration: underline dotted rgba(154,168,182,.7); text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* sorted column — molten from header to last row */
.data-table thead th.is-sorted { background: var(--grad-btn-molten); color: var(--on-molten); border-bottom-color: var(--molten); box-shadow: var(--glow-molten); z-index: 3; }
.data-table thead th.is-sorted .th-label { text-decoration-color: rgba(23,8,0,.55); }
.data-table thead th.is-sorted .sort-ind { opacity: 1; width: 9px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M0 3h9L4.5 9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M0 3h9L4.5 9z'/%3E%3C/svg%3E"); }
.data-table thead th.is-sorted[aria-sort="ascending"] .sort-ind { transform: rotate(180deg); }
.data-table td.is-sorted {
  position: relative; font-weight: 700; color: #fff;
  background-image: linear-gradient(var(--molten-tint-2), var(--molten-tint-2)) !important;
  box-shadow: inset 2px 0 0 rgba(255,90,31,.55), inset -2px 0 0 rgba(255,90,31,.55);
}
.data-table td.is-sorted[style*="--v"]::after { /* value bar: set style="--v:.62" (0..1) */
  content: ""; position: absolute; left: 10px; bottom: 6px; height: 2px; width: calc((100% - 20px) * var(--v, 0));
  background: linear-gradient(90deg, var(--molten), var(--molten-gold)); box-shadow: 0 0 6px rgba(255,90,31,.7);
}
/* body rows */
.data-table tbody td { background-color: var(--ice-2); color: var(--ink-1); border-bottom: 1px solid var(--steel-1); }
.data-table tbody tr:nth-child(even) td { background-color: var(--ice-3); }
.data-table tbody tr:nth-child(5n) td { border-bottom-color: var(--steel-3); } /* heavier rule every 5 rows */
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background-color: var(--ice-4); }
.data-table tbody tr:hover td.is-sorted { background-image: linear-gradient(rgba(255,90,31,.24), rgba(255,90,31,.24)) !important; }
.data-table td.muted, .data-table .cell-muted { color: var(--ink-3); }
.data-table .sep-l { border-left: 1px solid var(--steel-2); } /* group divider */
.data-table td.strong, .data-table .pct { font-weight: 700; }
/* rank */
.data-table .col-rank { width: var(--rank-w); min-width: var(--rank-w); max-width: var(--rank-w); padding: 0 6px 0 10px; text-align: right; }
.data-table td.col-rank { font: 800 var(--fs-18)/1 var(--font-display); color: var(--ink-3); }
.data-table tbody tr:nth-child(-n+3) td.col-rank { color: var(--molten-hi); }
.data-table tbody tr.rank-1 td.col-rank, .data-table tbody tr.rank-2 td.col-rank, .data-table tbody tr.rank-3 td.col-rank { color: var(--molten-hi); }
/* player cell */
.data-table .col-player { min-width: 190px; max-width: 240px; }
.player-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.player-cell .flag { width: 22px; height: 15px; flex: none; object-fit: cover; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); background: var(--ice-4); }
.player-cell__name { font-weight: 700; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.player-cell__name:hover { color: var(--glacier-hi); }
/* team cell */
.team-cell { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .06em; }
.team-cell img { width: 26px; height: 26px; flex: none; }
/* sticky first columns (rank + player) — always on; harmless when the table fits */
.data-table .col-rank, .data-table .col-player { position: sticky; z-index: 2; }
.data-table .col-rank { left: 0; }
.data-table .col-player { left: var(--rank-w); box-shadow: inset -1px 0 0 var(--steel-2); }
.data-table thead .col-rank, .data-table thead .col-player { z-index: 4; }
.table-wrap.is-scrolled-x .col-player { box-shadow: inset -1px 0 0 var(--steel-3), 10px 0 14px -10px rgba(0,0,0,.9); }

/* floating header (cloned by app.js) */
.float-head {
  position: fixed; top: var(--header-h); z-index: 90; overflow: hidden; pointer-events: none; background: #0D131A;
  opacity: 0; visibility: hidden; transition: opacity var(--t-fast);
  box-shadow: 0 10px 18px -10px rgba(0,0,0,.9);
}
.float-head.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.float-head .data-table { table-layout: fixed; }

/* ---------- 8. Game scores ---------- */
.games-table td.team-side { min-width: 170px; }
.games-table .score { font: 800 var(--fs-20)/1 var(--font-display); text-align: center; min-width: 46px; color: var(--ink-3); }
.games-table td.winner { color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--molten); background-image: linear-gradient(90deg, var(--molten-tint-2), transparent 80%); }
.games-table td.winner.score { color: var(--molten-hi); box-shadow: none; background-image: none; }
.games-table td.winner--ot { box-shadow: inset 3px 0 0 var(--glacier); background-image: linear-gradient(90deg, var(--glacier-tint), transparent 80%); }
.games-table td.winner--ot.score { color: var(--glacier); background-image: none; box-shadow: none; }
.games-table td.loser { color: var(--ink-3); }
.games-table td.loser .team-cell img { opacity: .75; }
.result-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 20px; padding: 0 6px; font: 800 var(--fs-12)/1 var(--font-display); letter-spacing: .12em; border: 1px solid var(--steel-3); color: var(--ink-2); }
.result-tag--reg { border-color: var(--steel-3); }
.result-tag--ot, .result-tag--so { color: #021019; background: var(--glacier); border-color: var(--glacier); }
.result-tag--so { background: var(--glacier-hi); border-color: var(--glacier-hi); }
.result-tag--live { color: #fff; background: var(--lamp); border-color: var(--lamp); }

/* ---------- 9. Tooltip (positioned by app.js, 0.5 s delay) ---------- */
.tip {
  position: fixed; z-index: 300; max-width: 300px; padding: 12px 14px 12px;
  background: #0A0F15; border: 1px solid var(--steel-3); border-top: 2px solid var(--glacier);
  box-shadow: 0 18px 40px -10px rgba(0,0,0,.9), var(--glow-glacier);
  font: 500 var(--fs-14)/1.4 var(--font-ui); color: var(--ink-2); text-transform: none; letter-spacing: 0; text-align: left; white-space: normal;
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast);
}
.tip.is-visible { opacity: 1; transform: none; }
.tip__title { display: block; margin-bottom: 4px; font: 800 var(--fs-16)/1.1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-1); }
.tip__formula { display: block; margin-top: 6px; font-weight: 700; color: var(--glacier); }
.tip__arrow { position: absolute; width: 10px; height: 10px; background: #0A0F15; border-left: 1px solid var(--steel-3); border-top: 2px solid var(--glacier); top: -7px; transform: rotate(45deg); }
.tip.is-above .tip__arrow { top: auto; bottom: -6px; border: 0; border-right: 1px solid var(--steel-3); border-bottom: 1px solid var(--steel-3); }

/* ---------- 10. Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4); }
.pager__info { font: 600 var(--fs-12)/1 var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.pager__info b { color: var(--glacier); }
.pager__list { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pager__item {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px;
  font: 800 var(--fs-18)/1 var(--font-display); color: var(--ink-1); font-variant-numeric: tabular-nums;
  background: var(--tex-brushed), linear-gradient(180deg, #212B37, #161E28);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
a.pager__item:hover { text-decoration: none; color: #fff; background: var(--tex-brushed), linear-gradient(180deg, #2E3B49, #1D2733); }
.pager__item.is-current { background: var(--grad-btn-molten); color: var(--on-molten); box-shadow: var(--glow-molten); }
.pager__item.is-disabled { opacity: .35; }
.pager__item svg { width: 12px; height: 12px; }
.pager__gap { color: var(--ink-3); padding: 0 2px; font-weight: 700; }

/* ---------- 11. Empty state ---------- */
.empty-state { display: grid; justify-items: center; gap: 10px; padding: 56px 24px; text-align: center; color: var(--ink-2); }
.empty-state svg { width: 96px; height: 64px; color: var(--steel-3); }
.empty-state__title { font: 900 var(--fs-32)/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink-1); }
.empty-state p { max-width: 46ch; margin: 0; color: var(--ink-3); }
.data-table td.empty-cell { height: auto; padding: 0; white-space: normal; }

/* ---------- 12. Badges & misc ---------- */
.pos-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; font: 700 var(--fs-11)/1 var(--font-ui); color: var(--ink-3); border: 1px solid var(--steel-2); }
.delta { font-weight: 700; } .delta--up { color: var(--up); } .delta--down { color: var(--down); }
.delta--up::before { content: "\25B2\00a0"; font-size: .75em; } .delta--down::before { content: "\25BC\00a0"; font-size: .75em; }
.divider { height: 1px; background: var(--steel-2); border: 0; margin: var(--sp-5) 0; }

/* ---------- 14. Player hero ---------- */
.player-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-5) var(--sp-6);
  padding: 22px 28px; margin-bottom: var(--sp-5); overflow: hidden; isolation: isolate;
}
.player-hero::after { /* team-stripe slash */
  content: ""; position: absolute; right: 18%; top: -20%; bottom: -20%; width: 160px; z-index: -1;
  background: linear-gradient(90deg, transparent 0 20px, rgba(255,90,31,.10) 20px 50px, transparent 50px 76px, rgba(92,203,255,.10) 76px 120px, transparent 120px);
  transform: skewX(-24deg);
}
.headshot-ring { /* faceoff circle frame with hash marks */
  position: relative; width: 132px; height: 132px; border-radius: 50%; flex: none;
  background: radial-gradient(circle, #1C2733 0 60%, #121A23 61%);
  box-shadow: 0 0 0 3px #E5384A, 0 0 0 6px var(--ice-2), 0 0 0 7px var(--steel-3), 0 0 26px rgba(229,56,74,.35);
}
.headshot-ring::before, .headshot-ring::after { content: ""; position: absolute; left: 50%; width: 30px; height: 10px; transform: translateX(-50%);
  border-left: 3px solid #E5384A; border-right: 3px solid #E5384A; }
.headshot-ring::before { top: -14px; } .headshot-ring::after { bottom: -14px; }
.headshot-ring img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 50%; }
.headshot-ring .team-badge { position: absolute; right: -8px; bottom: -4px; width: 42px; height: 42px; padding: 4px; background: var(--ice-1); border: 1px solid var(--steel-3); border-radius: 50%; }
.player-hero__kicker { font: 800 var(--fs-18)/1 var(--font-display); letter-spacing: .06em; color: var(--molten-hi); text-transform: uppercase; }
.player-hero__name { margin: 6px 0 10px; font-size: clamp(2.2rem, 1.2rem + 3vw, 4rem); font-weight: 900; line-height: .9; transform: skewX(-6deg); transform-origin: left bottom; }
.player-hero__name .first { display: block; font-size: .55em; }
.player-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; color: var(--ink-2); font-size: var(--fs-15); }
.player-hero__meta .label { margin-right: 6px; }
.player-hero__meta img { display: inline-block; width: 22px; height: 15px; vertical-align: -2px; margin-right: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.statline { display: flex; border: 1px solid var(--steel-3); background: #080C11; }
.statline__item { min-width: 70px; padding: 10px 14px 8px; text-align: center; border-left: 1px solid var(--steel-2); }
.statline__item:first-child { border-left: 0; }
.statline__value { display: block; font: 900 var(--fs-40)/1 var(--font-display); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.statline__item.is-hot .statline__value { color: var(--molten-hi); text-shadow: var(--glow-molten); }
.statline__label { display: block; margin-top: 4px; font: 700 var(--fs-11)/1 var(--font-ui); letter-spacing: var(--track-label); color: var(--ink-3); text-transform: uppercase; }

/* ---------- 15. KPI tiles ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); }
.kpi { --kpi-accent: var(--steel-4); padding: 16px 18px 16px 20px; border-left: 3px solid var(--kpi-accent); display: flex; flex-direction: column; gap: 4px; }
.kpi--molten { --kpi-accent: var(--molten); } .kpi--glacier { --kpi-accent: var(--glacier); } .kpi--lamp { --kpi-accent: var(--lamp); }
.kpi__label { font: 700 var(--fs-12)/1.2 var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.kpi__value { font: 900 3rem/1 var(--font-display); color: var(--ink-1); letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.kpi--molten .kpi__value { background: var(--grad-molten); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.kpi__unit { font-size: .45em; margin-left: 3px; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.kpi__sub { font-size: var(--fs-14); color: var(--ink-2); }
.kpi__sub b { color: var(--ink-1); }
.meter { position: relative; height: 6px; margin: 8px 0 4px; background: #070A0E; box-shadow: inset 0 0 0 1px var(--steel-2); }
.meter__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 100%); background: linear-gradient(90deg, var(--kpi-accent), color-mix(in srgb, var(--kpi-accent) 60%, #fff)); box-shadow: 0 0 8px color-mix(in srgb, var(--kpi-accent) 60%, transparent); }
.meter__tick { position: absolute; top: -4px; bottom: -4px; left: calc(var(--avg, 0) * 100%); width: 2px; background: var(--ink-1); }
.scoreboard { display: inline-flex; background: #06090D; border: 1px solid var(--steel-3); box-shadow: inset 0 0 20px rgba(0,0,0,.8); }
.scoreboard__cell { padding: 10px 18px 8px; text-align: center; border-left: 1px solid var(--steel-2); }
.scoreboard__cell:first-child { border-left: 0; }
.scoreboard__value { display: block; font: 900 var(--fs-32)/1 var(--font-display); color: var(--glacier); text-shadow: 0 0 12px rgba(92,203,255,.55); font-variant-numeric: tabular-nums; }
.scoreboard__cell.is-lamp .scoreboard__value { color: var(--lamp); text-shadow: 0 0 12px rgba(255,45,61,.6); }

/* ---------- 16. Chart panels (D3 hooks; see charts.js) ---------- */
.viz-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.viz-stack { display: grid; gap: var(--sp-4); }
.panel { padding: 18px 20px 20px; }
.panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.panel__title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-24); font-weight: 800; }
.panel__title::before { content: ""; width: 16px; height: 3px; background: var(--molten); transform: skewX(-30deg); flex: none; }
.panel__sub { margin-top: 6px; font-size: var(--fs-14); color: var(--ink-3); }
.panel__actions { display: flex; gap: var(--sp-2); align-items: center; }
.panel__foot { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-13); color: var(--ink-3); }
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-ui); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .axis path.domain { stroke: var(--steel-3); }
.chart .axis line { stroke: var(--steel-3); }
.chart .axis text { font-size: 12px; fill: var(--ink-3); font-weight: 500; }
.chart .axis-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-3); }
.chart .grid line { stroke: var(--steel-1); stroke-width: 1; }
.chart .grid path.domain { display: none; }
.chart .baseline { stroke: var(--steel-3); stroke-width: 1; }
.chart .series-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-line.is-current { stroke-width: 3; filter: drop-shadow(0 0 4px rgba(255,90,31,.55)); }
.chart .series-line.is-dim { opacity: .25; }
.chart .direct-label { font-size: 12px; font-weight: 700; fill: var(--ink-1); }
.chart .crosshair { stroke: var(--ink-3); stroke-dasharray: 3 3; pointer-events: none; }
.chart .mark { cursor: pointer; } /* stroke/ring set per mark by SWCharts.styleEventMark */
.chart .mark:hover, .chart .mark.is-hover { filter: brightness(1.35) drop-shadow(0 0 3px rgba(238,244,248,.8)); }
.chart-tip {
  position: absolute; z-index: 20; min-width: 150px; max-width: 260px; padding: 10px 12px; pointer-events: none;
  background: #070A0E; border: 1px solid var(--steel-3); border-left: 3px solid var(--molten);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.9);
  font: 500 var(--fs-13)/1.35 var(--font-ui); color: var(--ink-2); opacity: 0; transition: opacity var(--t-fast);
}
.chart-tip.is-visible { opacity: 1; }
.chart-tip__title { display: block; margin-bottom: 4px; font: 800 var(--fs-16)/1.1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-1); }
.chart-tip__row { display: flex; justify-content: space-between; gap: 14px; }
.chart-tip__row b { color: var(--ink-1); font-variant-numeric: tabular-nums; }
/* shot map: scoreboard tooltip (viz-shots.js) */
.chart-tip--shot { min-width: 232px; max-width: 300px; }
.chart-tip__title--split { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.chart-tip__when { font: 700 var(--fs-13)/1 var(--font-ui); letter-spacing: .02em; text-transform: none; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-tip__score {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  margin: 8px 0 6px; padding: 7px 9px; background: rgba(255,255,255,.035); border: 1px solid var(--steel-2); border-radius: 3px;
}
.chart-tip__team { display: flex; align-items: center; gap: 6px; min-width: 0; opacity: .5; }
.chart-tip__team--home { justify-content: flex-end; }
.chart-tip__team.is-shooter { opacity: 1; }
.chart-tip__logo { width: 26px; height: 26px; flex: none; object-fit: contain; }
.chart-tip__abbr { font: 800 var(--fs-15)/1 var(--font-display); letter-spacing: .06em; color: var(--ink-1); }
.chart-tip__goals { display: flex; align-items: baseline; gap: 6px; font: 800 var(--fs-20)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.chart-tip__goals b { font-weight: 800; }
.chart-tip__goals b.is-shooter { color: var(--ink-1); }
.chart-tip__goals i { font-style: normal; font-size: var(--fs-15); }
.chart-tip__meta { margin-bottom: 4px; color: var(--ink-2); }
.chart-tip--shot .chart-tip__row b { text-align: right; }
.chart-tip__moment { display: block; margin-top: 6px; font: 800 var(--fs-12)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--molten-hi); }
.chart-tip__moment::before { content: '★ '; }
.chart-tip__score--joined { margin-bottom: 0; border-radius: 3px 3px 0 0; }
.chart-tip__final {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 0 0 6px; padding: 5px 9px;
  background: rgba(255,255,255,.015); border: 1px solid var(--steel-2); border-top: 0; border-radius: 0 0 3px 3px;
}
.chart-tip__final-label { font: 800 var(--fs-12)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.chart-tip__final-score { font: 800 var(--fs-15)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.chart-tip__result { justify-self: end; padding: 3px 7px; border-radius: 2px; font: 800 var(--fs-13)/1 var(--font-display); letter-spacing: .08em; }
.chart-tip__result--w { color: #fff; background: var(--molten); }
.chart-tip__result--wot { color: #06121A; background: var(--glacier); }
.chart-tip__result--l { color: var(--ink-2); background: rgba(255,255,255,.08); }
.chart-tip__result--otl { color: var(--glacier); box-shadow: inset 0 0 0 1px var(--glacier); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-14); color: var(--ink-2); }
.legend__item { display: inline-flex; align-items: center; gap: 7px; }
.legend__item b { color: var(--ink-1); font-variant-numeric: tabular-nums; }
.legend__item.is-off { opacity: .4; }
button.legend__item { background: none; border: 0; padding: 2px 0; color: inherit; font: inherit; cursor: pointer; }
.swatch { width: 12px; height: 12px; flex: none; background: var(--c, var(--ink-3)); border-radius: 2px; }
.swatch--dot { border-radius: 50%; }
.swatch--ring { border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--ink-1) inset; }
.swatch--line { height: 3px; width: 16px; border-radius: 2px; }
.swatch--x { background: none; position: relative; }
.swatch--x::before, .swatch--x::after { content: ""; position: absolute; left: -1px; right: -1px; top: 5px; height: 2.5px; background: var(--c); transform: rotate(45deg); border-radius: 1px; }
.swatch--x::after { transform: rotate(-45deg); }
.swatch--square { background: none; border: 2.5px solid var(--c); border-radius: 1px; }
.hbar { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: var(--fs-14); }
.hbar + .hbar { margin-top: 8px; }
.hbar__label { font-weight: 700; color: var(--ink-1); }
.hbar__track { display: flex; gap: 2px; height: 12px; }
.hbar__seg { height: 100%; background: var(--c); border-radius: 0 3px 3px 0; }
.hbar__seg + .hbar__seg { border-radius: 0 3px 3px 0; }
.hbar__value { font-weight: 700; color: var(--ink-1); font-variant-numeric: tabular-nums; text-align: right; min-width: 52px; }
.hbar__value small { color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.rink-wrap { position: relative; }
.chart-table-toggle { margin-left: auto; }

/* ---------- 17. Chips & toggles ---------- */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
.chips + .chips { margin-left: var(--sp-4); }
.chips__label { margin-right: 6px; font: 600 var(--fs-11)/1 var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px;
  font: 700 var(--fs-14)/1 var(--font-ui); color: var(--ink-2); cursor: pointer;
  background: var(--ice-3); border: 0; box-shadow: inset 0 0 0 1px var(--steel-2), inset 0 -2px 0 var(--steel-3);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.chip:hover { color: var(--ink-1); background: var(--ice-4); text-decoration: none; }
.chip.is-active, .chip[aria-pressed="true"], .chip[aria-checked="true"] { color: var(--ink-1); background: linear-gradient(180deg, rgba(92,203,255,.16), rgba(92,203,255,.06)); box-shadow: inset 0 0 0 1px rgba(92,203,255,.45), inset 0 -2px 0 var(--glacier); }
.chip.is-off { opacity: .45; }
.chip .count { color: var(--ink-3); font-weight: 600; }
.filter-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 12px 18px; margin-bottom: var(--sp-4); }
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; color: var(--ink-2); }
.toggle input { appearance: none; -webkit-appearance: none; width: 38px; height: 20px; margin: 0; border-radius: 10px; background: var(--ice-4); box-shadow: inset 0 0 0 1px var(--steel-3); position: relative; cursor: pointer; transition: background-color var(--t-fast); }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-3); transition: transform var(--t-fast) var(--ease), background-color var(--t-fast); }
.toggle input:checked { background: var(--molten-tint-2); box-shadow: inset 0 0 0 1px var(--molten); }
.toggle input:checked::after { transform: translateX(18px); background: var(--molten); box-shadow: var(--glow-molten); }

/* ---------- 18. Footer ---------- */
.site-footer { flex: none; background: var(--ice-0); margin-top: var(--sp-6); }
.site-footer__inner { display: flex; align-items: center; gap: var(--sp-5); padding-top: 22px; padding-bottom: 26px; }
.site-footer img { height: 34px; width: auto; flex: none; }
.site-footer p { margin: 0; font-size: var(--fs-14); color: var(--ink-3); }

/* ---------- 19. Error page ---------- */
.error-page { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 64px 16px 48px; position: relative; }
.error-page__code { font: 900 clamp(5rem, 3rem + 10vw, 10rem)/.85 var(--font-display); transform: skewX(-6deg); background: var(--grad-chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.error-page__title { font-size: var(--fs-40); font-weight: 900; }
.error-page__title span { color: var(--molten-hi); }
.error-page p { max-width: 52ch; color: var(--ink-2); margin: 0 0 8px; }

/* ---------- 20. Responsive & motion ---------- */
@media (max-width: 1280px) {
  .data-table { font-size: var(--fs-13); }
  .data-table th, .data-table td { padding: 0 7px; }
  .data-table .col-player { min-width: 170px; }
}
@media (max-width: 1080px) {
  :root { --gutter: 18px; }
  .site-header__inner { gap: var(--sp-4); }
  .header-meta .header-meta__text { display: none; }
  .page-head { grid-template-columns: 1fr; }
  .page-head__aside { flex-wrap: wrap; }
  .viz-grid { grid-template-columns: 1fr; }
  .player-hero { grid-template-columns: auto minmax(0, 1fr); }
  .player-hero .statline { grid-column: 1 / -1; justify-self: start; }
  .filters__actions { width: 100%; }
}
@media (max-width: 600px) {
  :root { --gutter: 14px; --row-h: 42px; --rank-w: 36px; --fs-hero: 2.75rem; }
  body { font-size: var(--fs-16); }
  .site-header__inner { flex-wrap: wrap; height: auto; gap: 0; padding-top: 10px; }
  .site-header .brand { height: 44px; }
  .brand img { height: 38px; }
  .site-header.is-shrunk .site-header__inner { height: auto; }
  .site-header.is-shrunk .brand { height: 34px; }
  .site-header.is-shrunk .brand img { height: 28px; }
  .header-meta { margin-left: auto; order: 1; font-size: var(--fs-12); }
  .nav { order: 2; width: calc(100% + 2 * var(--gutter)); margin: 6px calc(-1 * var(--gutter)) 0; height: 46px; gap: 0; border-top: 1px solid var(--steel-1); }
  .nav__group { position: static; flex: 1; justify-content: center; }
  .nav__group + .nav__group { border-left: 1px solid var(--steel-1); }
  .nav__toggle { width: 100%; justify-content: center; height: 46px; font-size: var(--fs-14); }
  .nav__toggle::before { left: 22%; right: 22%; bottom: 0; }
  .nav__menu { left: 0; right: 0; top: 100%; min-width: 0; border-left: 0; border-right: 0; }
  .nav__link { padding: 12px 16px; }
  .page { padding-top: var(--sp-5); }
  .page-head::before { width: 220px; height: 220px; right: -70px; top: -50px; opacity: .4; }
  .page-head__aside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .leader { min-width: 0; padding: 10px 10px 10px 12px; }
  .leader__value { font-size: 1.85rem; }
  .leader__who { font-size: var(--fs-12); }
  .filters { padding: 14px; }
  .filters__fields { grid-template-columns: 1fr 1fr; gap: 12px; flex-basis: 100%; }
  .filters__fields .field--wide { grid-column: 1 / -1; }
  .filters__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .filters.is-collapsed .filters__actions { display: flex; width: auto; }
  .filters.is-collapsed .filters__form { flex-wrap: nowrap; }
  .control, .field select, .field input { height: 44px; font-size: var(--fs-16); } /* 16px stops iOS zoom */
  .btn { height: 44px; }
  .table-meta__count { font-size: var(--fs-20); }
  .swipe-hint { display: inline-block; }
  .table-wrap { margin: 0 calc(-1 * var(--gutter)); border-left: 0; border-right: 0; }
  .data-table { font-size: var(--fs-14); }
  .data-table th, .data-table td { padding: 0 8px; }
  .data-table .col-player { min-width: 0; max-width: 158px; width: 158px; }
  .data-table .col-rank { padding: 0 4px 0 8px; }
  .data-table td.col-rank { font-size: var(--fs-16); }
  .data-table .hide-sm { display: none; }
  .player-cell { gap: 7px; }
  .player-cell .flag { width: 18px; height: 12px; }
  .team-cell img { width: 22px; height: 22px; }
  .pager { justify-content: center; }
  .pager__info { order: 2; width: 100%; text-align: center; }
  .pager__item { min-width: 38px; height: 40px; }
  .player-hero { grid-template-columns: 1fr; justify-items: start; padding: 18px; gap: 16px; }
  .player-hero::after { right: -10%; }
  .headshot-ring { width: 104px; height: 104px; }
  .statline { width: 100%; }
  .statline__item { flex: 1; min-width: 0; padding: 8px 4px 6px; }
  .statline__value { font-size: var(--fs-32); }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px 12px 12px 14px; }
  .kpi__value { font-size: 2.25rem; }
  .panel { padding: 14px; }
  .panel__title { font-size: var(--fs-20); }
  .hbar { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px; }
  .filter-strip { padding: 10px 12px; gap: 10px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; padding-bottom: 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .chips + .chips { margin-left: 0; }
  .chip { flex: none; height: 36px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .games-table td.team-side { min-width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .lamp { animation: none; }
}
@media (forced-colors: active) {
  .data-table thead th.is-sorted, .data-table td.is-sorted { forced-color-adjust: none; outline: 2px solid CanvasText; }
  .page-head__title .chrome, .page-head__title .molten, .chrome-text, .molten-text, .kpi--molten .kpi__value, .error-page__code { -webkit-text-fill-color: CanvasText; color: CanvasText; background: none; }
}
@media print {
  .site-header, .filters, .pager, .site-footer, .float-head { display: none !important; }
  body { background: #fff; color: #000; }
}

/* === viz === */
/* Visualization pages (shot distribution, production tracker, league trends). */
.viz-page [hidden] { display: none !important; }
.viz-controls { align-items: flex-end; gap: 14px 28px; }
.viz-controls .field { flex: none; }
.viz-controls__player { width: min(340px, 100%); }
.viz-controls .chips { min-height: 40px; }
.viz-filters { gap: 12px 26px; }
#viz-root.is-loading .viz-grid, #viz-root.is-loading .viz-hero, #viz-root.is-loading .viz-side { opacity: .55; transition: opacity var(--t-fast); }
.chip--all { font-style: normal; color: var(--ink-3); }
.chip .swatch { width: 11px; height: 11px; }
.chip .swatch--line { width: 16px; height: 3px; }
.chart .direct-label { paint-order: stroke; stroke: var(--ice-2); stroke-width: 4px; stroke-linejoin: round; }

/* player picker (combobox) */
.picker { position: relative; }
.picker__list {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: min(420px, 92vw);
  max-height: 360px; overflow: auto; margin: 0; padding: 4px; list-style: none;
  background: #070A0E; border: 1px solid var(--steel-3); box-shadow: 0 18px 40px -12px rgba(0,0,0,.9);
}
.picker__opt { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 6px 10px 6px 8px; cursor: pointer; }
.picker__opt img, .picker__ph { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--ice-4); object-fit: cover; object-position: top; }
.picker__name { font-weight: 700; color: var(--ink-1); line-height: 1.15; }
.picker__meta { font-size: var(--fs-12); color: var(--ink-3); line-height: 1.2; }
.picker__opt:hover, .picker__opt.is-active { background: var(--ice-4); box-shadow: inset 3px 0 0 var(--glacier); }
.picker__msg { padding: 10px 12px; color: var(--ink-3); }

/* player header on viz pages */
.viz-hero { margin-bottom: var(--sp-4); }
.viz-hero .player-hero__name { margin-bottom: 12px; }
.viz-hero__team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.viz-hero__team img { width: 84px; height: 84px; flex: none; filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
.viz-hero__team b { display: block; margin-top: 4px; font: 800 var(--fs-24)/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink-1); }

/* shot map */
.viz-rink { position: relative; margin-top: 10px; outline-offset: 4px; }
.viz-rink svg { max-height: 660px; margin: 0 auto; touch-action: pan-y; }
.viz-rink .mark { cursor: default; }
.viz-rink svg.is-watchable { cursor: pointer; }
/* goal video (shot map) */
.video-modal {
  width: min(960px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0;
  color: var(--ink-1); background: var(--ice-2); border: 1px solid var(--steel-3); border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.95);
}
.video-modal::backdrop { background: rgba(5,7,10,.8); }
.video-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: 14px 16px 12px; border-bottom: 1px solid var(--steel-1); }
.video-modal__title { font-size: var(--fs-24); }
.video-modal__sub { margin: 6px 0 0; color: var(--ink-3); font-size: var(--fs-14); }
.video-modal__close {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
  color: var(--ink-2); background: none; border: 1px solid var(--steel-2); border-radius: var(--radius);
}
.video-modal__close:hover { color: var(--ink-1); background: var(--ice-4); border-color: var(--steel-3); }
.video-modal__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal__status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--sp-4); text-align: center; color: var(--ink-3); }
.video-modal__status[hidden] { display: none; }
@media (max-width: 600px) { .video-modal { width: calc(100vw - 16px); } .video-modal__title { font-size: var(--fs-20); } }
.viz-rink .mark-focus { fill: none; stroke-width: .45; pointer-events: none; filter: drop-shadow(0 0 2px rgba(238,244,248,.9)); }
.viz-rink__empty { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,16,22,.74); }
.viz-rink__empty .empty-state { padding: 24px; }
.viz-kpis { grid-template-columns: 1fr 1fr; }
.viz-kpis .kpi__label[data-tip] { cursor: help; align-self: flex-start; border-bottom: 1px dotted var(--steel-3); }
.viz-types .hbar { padding: 3px 4px; margin-left: -4px; margin-right: -4px; border-radius: 2px; }
.viz-types .hbar + .hbar { margin-top: 4px; }
.viz-types .hbar:hover, .viz-types .hbar:focus-visible { background: var(--ice-3); }
.viz-types .hbar__track { height: 14px; }
.viz-types .empty-state, .viz-panel-empty .empty-state { padding: 28px 12px; }

/* production tracker */
.viz-split { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.viz-side { display: grid; gap: var(--sp-4); }
.viz-player { display: flex; align-items: center; gap: 18px; padding: 18px 20px; }
.viz-player .headshot-ring { width: 96px; height: 96px; }
.viz-player .headshot-ring .team-badge { width: 34px; height: 34px; }
.viz-player__name { font-size: var(--fs-32); font-weight: 900; line-height: .9; transform: skewX(-6deg); transform-origin: left bottom; }
.viz-player__name .first { display: block; font-size: .6em; }
.viz-player__team { margin-top: 8px; font-size: var(--fs-14); color: var(--ink-2); }
.kpi__compare { display: grid; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--steel-2); font-size: var(--fs-14); color: var(--ink-2); }
.kpi__compare div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.kpi__compare b { color: var(--ink-1); font-variant-numeric: tabular-nums; }
.kpi__compare .delta { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.delta--flat { color: var(--ink-3); }
.viz-gauge-tile { padding-bottom: 10px; }
.chart.gauge svg { max-width: 300px; margin: 4px auto 0; }
.chart.gauge .gauge__track { fill: #070A0E; stroke: var(--steel-2); stroke-width: 1; }
.chart.gauge .gauge__fill { fill: var(--molten); filter: drop-shadow(0 0 6px rgba(255,90,31,.45)); }
.chart.gauge .gauge__target { stroke: var(--glacier); stroke-width: 3; stroke-linecap: round; }
.chart.gauge .gauge__target-label { font-size: 13px; font-weight: 700; fill: var(--glacier-hi); }
.chart.gauge .gauge__value { font: 900 46px/1 var(--font-display); fill: var(--ink-1); }
.chart.gauge .gauge__end { font-size: 13px; font-weight: 700; fill: var(--ink-3); }
.gauge-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-13); color: var(--ink-3); }
.gauge-key i { display: inline-block; width: 12px; height: 3px; margin-right: 6px; vertical-align: middle; background: var(--c); }
.viz-chart { min-height: 320px; }
.viz-chart--small { min-height: 0; }
.chart .series-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.chart .series-line.is-hover { stroke-width: 3; opacity: 1; }
.chart .hover-dot { stroke: var(--ice-2); stroke-width: 2; pointer-events: none; }
.chart .direct-label.is-muted { fill: var(--ink-3); font-weight: 600; }
.chart .gap-label { font-size: 11px; fill: var(--ink-4); }
.chart g.is-dim { opacity: .2; transition: opacity var(--t-fast); }
.chart .series-pt { pointer-events: none; }
.chart .series-gap { pointer-events: none; }
.chart:focus-visible { outline: 2px solid var(--glacier); outline-offset: 4px; }

/* league trends */
.viz-trends { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.viz-note { margin: 10px 0 0; font-size: var(--fs-13); color: var(--ink-3); }

@media (max-width: 1080px) {
  .viz-split, .viz-trends { grid-template-columns: 1fr; }
  .viz-split > .panel { order: -1; }
  .viz-side { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .viz-hero.player-hero { grid-template-columns: auto minmax(0, 1fr); }
  .viz-hero .viz-hero__team { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .viz-controls { gap: 12px; }
  .viz-controls__player { width: 100%; }
  .viz-controls .field { flex: 1 1 100%; }
  .viz-filters { display: grid; grid-template-columns: minmax(0, 1fr); }
  .viz-filters .chips, .viz-controls .chips { flex-wrap: wrap; overflow: visible; }
  .viz-filters .chips__label { width: 100%; margin-bottom: 2px; }
  .viz-hero.player-hero { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 16px; }
  .viz-hero .headshot-ring { width: 88px; height: 88px; }
  .viz-hero .headshot-ring .team-badge { width: 32px; height: 32px; }
  .viz-hero .player-hero__name { font-size: 2rem; }
  .viz-hero__team img { width: 48px; height: 48px; }
  .viz-hero__team b { font-size: var(--fs-18); }
  .viz-rink svg { max-height: none; }
  .viz-kpis { gap: 10px; }
  .viz-side { grid-template-columns: 1fr; gap: 10px; }
  .chart.gauge svg { max-width: 240px; }
  .viz-player { padding: 14px; }
}

/* === pages === */
/* Stats pages (advanced / base skaters, teams, games, player). Owned by the pages layer. */
.table-meta__aside { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.team-cell--multi img + img { margin-left: -12px; }
.team-cell--multi > span { white-space: nowrap; }
.team-cell--name { min-width: 0; max-width: 100%; }
.team-cell__full { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .01em; }
.team-cell__abbr { display: none; }
.ext-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--glacier); white-space: nowrap; }
.ext-link:hover { color: var(--glacier-hi); }
.ext-link__icon { width: 11px; height: 11px; flex: none; opacity: .8; }
.plate.collecting { margin-top: var(--sp-2); }
.player-table td.season-cell { font-weight: 700; color: var(--ink-1); }
@media (max-width: 600px) {
  .team-cell--name .team-cell__full { display: none; }
  .team-cell--name .team-cell__abbr { display: inline; }
  .games-table td.team-side { min-width: 92px; }
  .team-table .col-player { width: 120px; }
}
.date-short { display: none; }
.data-table thead th.no-caps .th-label { text-transform: none; }
@media (max-width: 600px) {
  .games-table .date-full { display: none; }
  .games-table .date-short { display: inline; }
  .games-table .score { min-width: 34px; }
}
/* The page-head faceoff art (right: -60/-70px) widened the document on phones; clip it
   horizontally without creating a scroll container (sticky headers keep working). */
main.page { overflow-x: clip; }