/* Direction A — Neon Arena styles */

/* ============================================================================
   THEME TOKENS
   ----------------------------------------------------------------------------
   The whole stylesheet is built from four base colours plus alpha. Those four
   are defined here as RGB triplets so every existing rgba(...) keeps its own
   alpha untouched — rgba(255,255,255,0.06) became rgba(var(--n-surf),0.06), and
   so on for ~1830 declarations. Dark mode therefore computes to exactly what it
   did before this block existed; light mode only redefines the triplets.

   Roles:
     --n-ink        text. Contrasts against the ground.
     --n-surf       surfaces, borders, hover washes. Also contrasts against the
                    ground, which is why the same token serves both — at low
                    alpha it reads as a panel, at high alpha as text.
     --n-ground     the page itself.
     --n-panel*     card grounds, in three depths.
     --n-shadow     drop shadows.

   DEFAULT IS DARK, deliberately. This is a neon design and dark is the brand,
   so a visitor whose OS prefers light still gets the dark site until they ask
   for otherwise with the header toggle. To follow the OS instead, uncomment the
   prefers-color-scheme block at the end of this section — it is written and
   ready, just inert.
   ========================================================================= */

:root {
  --n-ink:        242,242,246;
  --n-surf:       255,255,255;
  --n-ground:     #07070a;
  --n-ground-rgb: 7,7,10;
  --n-panel:      16,16,24;
  --n-panel2:     13,13,20;
  --n-panel3:     22,22,32;
  --n-shadow:     0,0,0;
  /* Recessed surfaces — ticker, tab strips, table cells, the quick-links bar.
     The stylesheet expressed these as rgba(0,0,0,a), the same literal used for
     drop shadows, so the token pass mapped both onto --n-shadow. That is right
     for a shadow and wrong for a surface: in light mode a 0.6-alpha black panel
     is a navy blob on a white page. Split out so each can move independently.
     Identical to --n-shadow in dark, so nothing shifts there. */
  --n-inset:      0,0,0;
  /* Deepest stop of the footer gradient. Its own token rather than --n-ground
     because it is deliberately a shade darker than the page, and keeping the
     exact original value means dark mode is untouched. */
  --n-footer-g-deep: #05050a;
  /* The footer gradient's other two stops. It is a full-width, tall surface, so
     its exact original values are kept rather than folded into --n-panel2 the
     way the small near-black panels were — at 0.96 alpha the difference between
     rgb(5,5,9) and rgb(13,13,20) is visible across an area that size. */
  --n-footer-g-top: 10,10,16;
  --n-footer-g-mid: 5,5,9;

  /* The two colour washes on .n-shell. Tokenised so light mode can pull them
     back — at dark-mode strength they smear over a pale ground. */
  --n-wash-1: oklch(0.55 0.22 300 / 0.12);
  --n-wash-2: oklch(0.6 0.18 254 / 0.09);

  /* Border weight differs per theme: a white overlay on near-black reads softer
     than a near-black overlay on white at the same alpha, so light mode needs
     to dial its dividers back rather than inherit them. */
  --n-border-scale: 1;

  /* Editorial accents for the player intel tiles. */
  --n-tag-hot:       #a8e063;
  --n-tag-breakout:  #67e8f9;
  --n-tag-milestone: #fbbf24;
  --n-tag-rising:    #c084fc;

  /* Format accents used as var(--c-lime, #a8ff3e) and friends in the fixtures
     markup. Those references have always been there; the tokens never were, so
     every one of them silently fell through to the neon-bright hex fallback.
     Defining them here makes the existing call sites theme-aware for free. */
  --c-lime:  #a8ff3e;
  --c-cyan:  #22d3ee;
  --c-amber: #e8a020;
  --c-t20l:  #fdb913;
  /* Chip fill and border derived from --c-t20l. Separate tokens rather than
     8-digit hexes, because the same alpha over white lands far paler than it
     does over near-black, so light needs its own pair. */
  --c-t20l-tint: rgba(253,185,19,0.15);
  --c-t20l-edge: rgba(253,185,19,0.35);

  color-scheme: dark;
}

:root[data-theme="light"] {
  /* Ink is pushed close to black and the ground close to white on purpose. The
     stylesheet expresses muted text as low-alpha ink (0.35–0.5 is common), and
     alpha does not invert linearly: the wider the gap between ink and ground,
     the more contrast those same alphas recover. Even so they stay dim — see
     the note under "Known limits" in this file's header comment. */
  --n-ink:        12,14,22;
  --n-surf:       15,18,45;
  --n-ground:     #f7f8fb;
  --n-ground-rgb: 247,248,251;
  --n-panel:      255,255,255;
  --n-panel2:     252,253,255;
  --n-panel3:     248,249,252;
  --n-shadow:     20,24,60;
  /* A soft blue-grey, so a recessed panel reads as a step down from the white
     card rather than as a dark block. */
  --n-inset:      150,158,182;
  /* A shade darker than the page, so the footer still reads as its own band. */
  --n-footer-g-deep: #e9ecf3;
  --n-footer-g-top: 252,253,255;
  --n-footer-g-mid: 247,249,252;

  --n-wash-1: oklch(0.55 0.22 300 / 0.05);
  --n-wash-2: oklch(0.6 0.18 254 / 0.04);

  --n-tag-hot:       #3f7d12;
  --n-tag-breakout:  #0e7490;
  --n-tag-milestone: #a16207;
  --n-tag-rising:    #7c3aed;

  /* Same hues, dropped into the range that reads on a white card. The dark
     values sit at 1.2–2.1:1 there, which is effectively invisible. */
  --c-lime:  #4d7c0f;
  --c-cyan:  #0e7490;
  --c-amber: #92600e;
  --c-t20l:  #8a6100;
  --c-t20l-tint: rgba(138,97,0,0.10);
  --c-t20l-edge: rgba(138,97,0,0.30);

  color-scheme: light;

  /* Format accents. The dark-mode values are tuned to glow against near-black;
     --fmt-t20i in particular is a 0.85-lightness yellow-green that all but
     disappears on white. Pulled down into the range that carries on a pale
     ground while keeping the same hue, so a T20I chip is still recognisably
     the same colour. */
  --fmt-test: oklch(0.52 0.20 27);
  --fmt-odi:  oklch(0.50 0.16 210);
  --fmt-t20i: oklch(0.55 0.18 130);
  --fmt-t20l: oklch(0.50 0.20 300);
  --fmt-all:  oklch(0.45 0.03 260);

  /* Player-insights component keeps its own solid palette (see the :root
     further down). Inverted here rather than tokenised, because it is a small
     closed set that never mixes with the alphas above. */
  --pi-ink:   #ffffff;
  --pi-ink2:  #f7f8fb;
  --pi-ink3:  #eef0f5;
  --pi-ink4:  #e4e7ef;
  --pi-line:  #d8dbe5;
  --pi-line2: #c6cad8;
  --pi-text:  #14151e;
  --pi-sub:   #5a6076;
  --pi-dim:   #878da0;
  --pi-blue:  #2563eb;
  --pi-teal:  #0d9488;
  --pi-gold:  #b7791f;
  --pi-rose:  #d81b52;
  --pi-green: #15803d;
  --pi-purple:#6d28d9;
  --pi-test:  #B71C1C;
  --pi-odi:   #0f6996;
  --pi-t20i:  #c25309;
}

/* Uncomment to follow the operating system when the visitor has not chosen.
   The :not() guard keeps an explicit dark choice winning over a light OS.
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --n-ink:        20,21,30;
    --n-surf:       15,18,45;
    --n-ground:     #f4f5f9;
    --n-ground-rgb: 244,245,249;
    --n-panel:      255,255,255;
    --n-panel2:     250,251,253;
    --n-panel3:     246,247,251;
    --n-shadow:     20,24,60;
    --n-wash-1: oklch(0.55 0.22 300 / 0.05);
    --n-wash-2: oklch(0.6 0.18 254 / 0.04);
    color-scheme: light;
  }
}
*/

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--n-ground); color: rgb(var(--n-ink)); }
body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input { font-family: inherit; }

.n-shell {
  min-height: 100vh;
  background:
    radial-gradient(80% 60% at 10% 0%, var(--n-wash-1) 0%, transparent 60%),
    radial-gradient(60% 50% at 100% 10%, var(--n-wash-2) 0%, transparent 60%),
    var(--n-ground);
}

/* ---------- header ---------- */
.n-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(var(--n-ground-rgb),0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(var(--n-surf),0.06);
}
.n-header-top {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 28px;
  max-width: 1440px; margin: 0 auto;
}
.n-logo { display: flex; align-items: center; gap: 10px; }
.n-logo-mark { display: inline-flex; gap: 3px; }
.n-logo-dot { width: 8px; height: 16px; border-radius: 2px; display: inline-block; }
.n-logo-dot:nth-child(2) { height: 22px; margin-top: -3px; }
.n-logo-dot:nth-child(3) { height: 12px; margin-top: 2px; }
.n-logo-img { height: 40px; display: block; }
/* Logo mark follows the theme — the white wordmark disappears on a light ground.
   Both <img>s are in the DOM and CSS picks one, matching how the theme toggle
   works everywhere else. display:none also drops the hidden one from the
   accessibility tree, so the duplicate alt text is never announced twice. */
.n-logo-light { display: none; }
.n-logo-dark  { display: block; }
:root[data-theme="light"] .n-logo-light { display: block; }
:root[data-theme="light"] .n-logo-dark  { display: none; }
.n-logo-text { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 6px; }
.n-logo-slash { color: rgba(var(--n-surf),0.2); margin: 0 2px; }

.n-nav { display: flex; gap: 4px; margin-left: 8px; }
.n-nav-item {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500;
  padding: 8px 12px; border-radius: 8px;
  color: rgba(var(--n-ink),0.7);
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 160ms, background 160ms;
}
.n-nav-item:hover { color: rgb(var(--n-ink)); background: rgba(var(--n-surf),0.04); }
.n-nav-item.on { color: rgb(var(--n-ink)); background: rgba(var(--n-surf),0.06); }
.n-nav-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; padding: 2px 5px; border-radius: 99px; color: #fff;
}

.n-header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Theme toggle. Same 36px footprint as .n-mob-toggle so the two sit level in
   the header bar on small screens, where both are visible. */
.n-theme-toggle {
  display: inline-flex;
  flex-shrink: 0;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  background: rgba(var(--n-surf),0.05);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 9px;
  color: rgba(var(--n-ink),0.7);
  font-size: 14px;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.n-theme-toggle:hover {
  background: rgba(var(--n-surf),0.09);
  border-color: rgba(var(--n-surf),0.14);
  color: rgb(var(--n-ink));
}
.n-theme-toggle:focus-visible {
  outline: 2px solid var(--fmt-odi);
  outline-offset: 2px;
}
/* Only one of the two icons is ever in the DOM flow; the theme decides which.
   Swapping by CSS rather than by rewriting innerHTML keeps the button's label
   and focus intact when the theme changes.

   The icon shows what you get if you CLICK, not what you are looking at: in
   dark you see a sun (press for light), in light a moon. That matches the
   aria-label, which reads "Switch to light theme" while dark is active. */
.n-theme-toggle .n-theme-moon { display: none; }
.n-theme-toggle .n-theme-sun  { display: inline-block; }
:root[data-theme="light"] .n-theme-toggle .n-theme-moon { display: inline-block; }
:root[data-theme="light"] .n-theme-toggle .n-theme-sun  { display: none; }

.n-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(var(--n-surf),0.04);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  width: 280px;
}
.n-search input {
  background: transparent; border: 0; color: rgb(var(--n-ink));
  font-size: 13px; flex: 1; outline: none;
}
.n-search input::placeholder { color: rgba(var(--n-ink),0.36); }
.n-search-ico { color: rgba(var(--n-ink),0.4); }
.n-search-kbd {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: rgba(var(--n-ink),0.4);
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid rgba(var(--n-surf),0.08);
}

.n-btn-ghost {
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid rgba(var(--n-surf),0.1);
  color: rgba(var(--n-ink),0.85);
  font-size: 13px; font-weight: 500;
}
.n-btn-ghost:hover { background: rgba(var(--n-surf),0.04); color: rgb(var(--n-ink)); }
.n-btn-ghost.sm { padding: 6px 10px; font-size: 12px; }
.n-btn-primary {
  padding: 8px 14px; border-radius: 8px;
  background: linear-gradient(135deg, oklch(0.7 0.22 27), oklch(0.6 0.18 254));
  color: var(--n-ground);
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em;
}
.n-btn-primary:hover { filter: brightness(1.08); }

/* ---------- ticker ---------- */
.n-ticker {
  display: flex; align-items: center;
  border-top: 1px solid rgba(var(--n-surf),0.04);
  background: rgba(var(--n-inset),0.3);
  overflow: hidden;
}
.n-ticker-label {
  padding: 10px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 3px;
  color: oklch(0.7 0.22 27);
  background: rgba(var(--n-inset),0.5);
  border-right: 1px solid rgba(var(--n-surf),0.04);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.n-dot-live {
  width: 7px; height: 7px; border-radius: 99px;
  background: oklch(0.68 0.23 25);
  box-shadow: 0 0 8px oklch(0.68 0.23 25);
  animation: pulse 1.2s infinite;
  display: inline-block;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
.n-ticker-track { flex: 1; overflow: hidden; position: relative; }
.n-ticker-inner {
  display: flex; gap: 0;
  animation: ticker 60s linear infinite;
  white-space: nowrap;
  font-size: 12px; padding: 10px 0;
}
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.n-ticker-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 20px; }
.n-ticker-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px;
  padding: 3px 6px; border-radius: 4px;
}
.tag-live { background: oklch(0.68 0.23 25); color: #fff; }
.tag-wicket { background: oklch(0.72 0.25 355); color: #fff; }
.tag-news { background: rgba(var(--n-surf),0.1); color: rgb(var(--n-ink)); }
.tag-record { background: oklch(0.82 0.18 75); color: var(--n-ground); }
.tag-injury { background: oklch(0.68 0.22 300); color: #fff; }
.n-ticker-sep { color: rgba(var(--n-surf),0.15); }

/* ---------- common ---------- */
.n-page { max-width: 1440px; margin: 0 auto; padding: 12px 20px 28px; }
.n-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
  gap: 12px;
}
.n-section-head.tight { margin-bottom: 4px; }
.n-section-head h2 {
  font-size: 17px; letter-spacing: -0.03em; font-weight: 700;
  margin: 0;
}
.n-section-tools { display: flex; align-items: center; gap: 6px; }
/* Standalone section heading (used outside n-section-head wrapper) */
.n-section-head-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
  color: rgba(var(--n-ink),0.5);
  text-transform: uppercase; letter-spacing: 2px;
  margin: 12px 0 8px;
  font-size: 10px;
}
.n-tool {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px;
  padding: 6px 10px; border-radius: 6px;
  color: rgba(var(--n-ink),0.5);
  border: 1px solid rgba(var(--n-surf),0.06);
}
.n-tool.on { color: var(--n-ground); background: oklch(0.7 0.22 27); border-color: transparent; }
.n-link-sm {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1px;
  color: rgba(var(--n-ink),0.7);
  margin-left: 8px;
}
.n-link-sm:hover { color: rgb(var(--n-ink)); }

/* ---------- hero ---------- */
.n-hero { position: relative; margin-bottom: 40px; }
.n-hero-glow {
  position: absolute; pointer-events: none; z-index: 0;
  filter: blur(80px); opacity: 0.5;
}
.n-hero-glow-a {
  width: 500px; height: 500px; border-radius: 999px;
  background: oklch(0.7 0.22 27 / 0.3);
  top: -100px; left: -100px;
}
.n-hero-glow-b {
  width: 500px; height: 500px; border-radius: 999px;
  background: oklch(0.72 0.25 355 / 0.35);
  top: -50px; right: -150px;
}
.n-hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  background: rgba(var(--n-panel),0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 24px;
  padding: 28px;
}
.n-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.n-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px;
  padding: 5px 9px; border-radius: 6px;
  background: rgba(var(--n-surf),0.08);
  display: inline-flex; align-items: center; gap: 6px;
}
.n-chip-live {
  background: oklch(0.68 0.23 25 / 0.18);
  color: oklch(0.88 0.2 25);
  border: 1px solid oklch(0.68 0.23 25 / 0.4);
}
.n-chip-ghost {
  background: transparent;
  border: 1px solid rgba(var(--n-surf),0.1);
  color: rgba(var(--n-ink),0.7);
}

.n-hero-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px; align-items: center;
  margin-bottom: 28px;
}
.n-team { min-width: 0; }
.n-team-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.n-team-badge {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800; font-size: 13px;
  padding: 6px 9px; border-radius: 6px; letter-spacing: 1px;
}
.n-team-name { font-weight: 600; font-size: 14px; }
.n-team-batting {
  margin-left: auto; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1px; color: oklch(0.7 0.22 27);
}
.n-team-score {
  font-size: clamp(48px, 6vw, 84px); font-weight: 800;
  line-height: 0.9; letter-spacing: -0.04em;
  display: inline-flex; align-items: baseline;
}
.n-team-runs { color: rgb(var(--n-ink)); }
.n-team-sep { color: rgba(var(--n-surf),0.25); margin: 0 6px; font-weight: 300; }
.n-team-wkts { color: rgba(var(--n-ink),0.7); font-size: 0.6em; }
.n-team-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: rgba(var(--n-ink),0.5);
  letter-spacing: 1px; margin-top: 4px;
}
.n-hero-vs { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.n-hero-vs-line { width: 1px; height: 40px; background: rgba(var(--n-surf),0.1); }
.n-hero-vs-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800; font-size: 14px; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.4);
}

.n-hero-need {
  border-top: 1px solid rgba(var(--n-surf),0.08);
  padding-top: 18px;
}
.n-hero-need-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 3px;
  color: rgba(var(--n-ink),0.5); margin-bottom: 10px;
}
.n-hero-need-big {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; letter-spacing: -0.03em;
}
.n-hero-need-sub { font-size: 13px; color: rgba(var(--n-ink),0.5); font-weight: 500; }
.n-hero-need-off { font-size: 13px; color: rgba(var(--n-ink),0.3); font-weight: 500; margin: 0 4px; }
.n-hero-need-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: rgba(var(--n-ink),0.5); margin-top: 10px; letter-spacing: 0.5px;
}
.n-hero-need-meta b { color: rgb(var(--n-ink)); font-weight: 600; }

/* ---------- win prob ---------- */
.n-hero-right { display: flex; flex-direction: column; gap: 16px; }
.n-winprob {
  background: rgba(var(--n-inset),0.25);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 14px;
  padding: 16px;
}
.n-winprob-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
.n-winprob-bar {
  display: flex; height: 44px; border-radius: 10px; overflow: hidden;
}
.n-winprob-fill {
  display: flex; align-items: center; padding: 0 14px;
  font-weight: 800; font-size: 18px; color: var(--n-ground);
  transition: width 800ms cubic-bezier(.2,.8,.2,1);
}
.n-winprob-fill.right { justify-content: flex-end; }
.n-winprob-legend {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: rgba(var(--n-ink),0.6);
}
.n-winprob-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

/* ---------- hero breakdown + top performers ---------- */
.n-hero-breakdown {
  background: rgba(var(--n-inset),0.25);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 14px;
  padding: 14px;
}
.n-hero-breakdown-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.n-hero-breakdown-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.n-bk-cell {
  background: rgba(var(--n-surf),0.03);
  border: 1px solid rgba(var(--n-surf),0.05);
  border-radius: 10px;
  padding: 10px 12px;
}
.n-bk-k { font-size: 9px; letter-spacing: 2px; margin-bottom: 4px; }
.n-bk-v { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; }
.n-bk-sub { font-size: 10px; margin-top: 2px; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; }

.n-hero-perf {
  background: rgba(var(--n-inset),0.25);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 14px;
  padding: 14px;
  flex: 1;
  display: grid; grid-template-rows: 1fr 1fr; gap: 12px;
}
.n-hero-perf-col { display: flex; flex-direction: column; gap: 6px; }
.n-hero-perf-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 3px;
  margin-bottom: 2px;
}
.n-hero-perf-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(var(--n-surf),0.06);
}
.n-hero-perf-row:last-child { border-bottom: 0; }
.n-hero-perf-name { font-weight: 600; font-size: 14px; color: rgb(var(--n-ink)); }
.n-hero-perf-mono { font-size: 12px; letter-spacing: 0.5px; }

/* ball chips (still used in match center) */
.n-ball-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 11px;
  background: rgba(var(--n-surf),0.06);
  color: rgba(var(--n-ink),0.7);
}
.n-ball-. { background: rgba(var(--n-surf),0.06); color: rgba(var(--n-ink),0.5); }
.n-ball-1, .n-ball-2, .n-ball-3 { background: rgba(var(--n-surf),0.1); color: rgb(var(--n-ink)); }
.n-ball-4 { background: oklch(0.6 0.18 254); color: var(--n-ground); box-shadow: 0 0 14px oklch(0.6 0.18 254 / 0.5); }
.n-ball-6 { background: oklch(0.7 0.22 27); color: var(--n-ground); box-shadow: 0 0 14px oklch(0.7 0.22 27 / 0.5); }
.n-ball-W { background: oklch(0.72 0.25 355); color: #fff; box-shadow: 0 0 14px oklch(0.72 0.25 355 / 0.5); }

/* ---------- rail cards ---------- */
.n-rail { margin-bottom: 48px; }
.n-rail-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) { .n-rail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .n-rail-grid { grid-template-columns: 1fr; } }
.n-rail-card {
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 14px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 200ms, border-color 200ms, background 200ms;
}
.n-rail-card:hover { transform: translateY(-2px); border-color: rgba(var(--n-surf),0.14); background: rgba(var(--n-panel),0.9); }
.n-rail-card.live { border-color: oklch(0.68 0.23 25 / 0.3); }
.n-rail-top { display: flex; justify-content: space-between; align-items: center; }
.n-rail-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px;
  padding: 3px 6px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 5px;
}
.st-live { background: oklch(0.68 0.23 25 / 0.2); color: oklch(0.88 0.2 25); }
.st-upcoming { background: rgba(var(--n-surf),0.06); color: rgba(var(--n-ink),0.7); }
.st-stumps { background: oklch(0.82 0.18 75 / 0.15); color: oklch(0.82 0.18 75); }
.n-rail-format { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.4); }
.n-rail-series { font-size: 11px; color: rgba(var(--n-ink),0.5); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; }
.n-rail-teams { display: flex; flex-direction: column; gap: 8px; }
.n-rail-team { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; }
.n-rail-badge {
  width: 32px; height: 28px; border-radius: 5px;
  background: rgba(var(--n-surf),0.06);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 1px;
}
.n-rail-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-rail-score { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; white-space: nowrap; }
.n-rail-note { font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; }

/* ---------- stories ---------- */
.n-stories { margin-bottom: 48px; }
.n-stories-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) { .n-stories-grid { grid-template-columns: 1fr; } }
.n-story-big {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.06);
  transition: transform 200ms, border-color 200ms;
}
.n-story-big:hover { transform: translateY(-2px); border-color: rgba(var(--n-surf),0.14); }
.n-story-big-img {
  aspect-ratio: 16/9;
  position: relative;
  display: flex; align-items: flex-end; padding: 14px;
}
.n-img-corner {
  position: absolute; top: 12px; right: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px;
  color: rgba(var(--n-surf),0.3);
  padding: 4px 6px; border: 1px dashed rgba(var(--n-surf),0.15); border-radius: 4px;
}
.n-story-kind {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 3px;
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid;
  background: rgba(var(--n-ground-rgb),0.5); backdrop-filter: blur(8px);
}
.n-story-big-body { padding: 20px; }
.n-story-big-body h3 {
  font-size: clamp(22px, 2.2vw, 30px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15;
  margin: 0 0 12px;
}
.n-story-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: rgba(var(--n-ink),0.5);
  display: flex; gap: 8px; letter-spacing: 0.5px;
}
.n-story-meta.sm { font-size: 10px; }
.n-stories-col { display: flex; flex-direction: column; gap: 14px; }
.n-story-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 12px;
  padding: 12px; border-radius: 12px;
  background: rgba(var(--n-panel),0.5);
  border: 1px solid rgba(var(--n-surf),0.05);
  transition: border-color 200ms, background 200ms;
}
.n-story-row:hover { border-color: rgba(var(--n-surf),0.12); background: rgba(var(--n-panel),0.8); }
.n-story-row-img {
  aspect-ratio: 1/1; border-radius: 8px;
  display: flex; align-items: flex-end; padding: 8px;
}
.n-story-row-body h4 {
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25;
  margin: 0 0 8px;
}

/* ---------- trending ---------- */
.n-trending { margin-bottom: 40px; }
.n-trend-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .n-trend-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .n-trend-strip { grid-template-columns: repeat(2, 1fr); } }
.n-trend-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
  transition: transform 200ms, border-color 200ms;
}
.n-trend-chip:hover { transform: translateY(-2px); border-color: rgba(var(--n-surf),0.14); }
.n-trend-avatar {
  width: 34px; height: 34px; border-radius: 999px;
  color: var(--n-ground);
  font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.5px; flex-shrink: 0;
}
.n-trend-body { flex: 1; min-width: 0; }
.n-trend-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-trend-stat { font-size: 10px; color: rgba(var(--n-ink),0.5); display: flex; gap: 6px; margin-top: 2px; }
.n-trend-role {
  padding: 1px 4px; border-radius: 3px; background: rgba(var(--n-surf),0.08);
  font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.7);
}
.n-trend-delta { font-family: 'JetBrains Mono', monospace; font-size: 10px; white-space: nowrap; }
.n-trend-delta.up { color: oklch(0.7 0.22 27); }
.n-trend-delta.down { color: oklch(0.72 0.25 355); }

/* ---------- rankings + fixtures ---------- */
.n-rf { margin-bottom: 48px; }
.n-rf-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; }
@media (max-width: 1000px) { .n-rf-grid { grid-template-columns: 1fr; } }
.n-card {
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 16px;
  padding: 18px;
  display: flex; flex-direction: column;
}
.n-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.n-card-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
}
.n-card-title-bar { width: 4px; height: 16px; border-radius: 2px; }
.n-rank-list { display: flex; flex-direction: column; gap: 2px; }
.n-rank-row {
  display: grid; grid-template-columns: 32px 1fr 44px 56px 40px;
  align-items: center; padding: 10px 6px;
  border-bottom: 1px solid rgba(var(--n-surf),0.04);
  font-size: 13px;
}
.n-rank-row:last-child { border-bottom: 0; }
.n-rank-n { font-size: 18px; font-weight: 800; }
.n-rank-name { font-weight: 500; }
.n-rank-team { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; color: rgba(var(--n-ink),0.5); }
.n-rank-pts { font-size: 12px; font-weight: 600; text-align: right; }
.n-rank-move { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-align: right; }
.n-rank-move.up { color: oklch(0.7 0.22 27); }
.n-rank-move.down { color: oklch(0.72 0.25 355); }
.n-rank-move.flat { color: rgba(var(--n-ink),0.3); }

.n-fix-list { display: flex; flex-direction: column; gap: 2px; }
.n-fix-row {
  display: grid; grid-template-columns: 120px 120px 1fr 40px;
  align-items: center; padding: 10px 6px;
  border-bottom: 1px solid rgba(var(--n-surf),0.04);
  font-size: 13px; gap: 10px;
}
.n-fix-row:last-child { border-bottom: 0; }
.n-fix-when { font-size: 10px; letter-spacing: 1px; color: oklch(0.7 0.22 27); }
.n-fix-teams { font-weight: 600; }
.n-fix-series { font-size: 11px; color: rgba(var(--n-ink),0.5); }
.n-fix-fmt { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.4); text-align: right; }

/* ---------- footer ---------- */
.n-footer {
  border-top: 1px solid rgba(var(--n-surf),0.06);
  background: rgba(var(--n-inset),0.3);
  padding: 40px 28px 24px;
  margin-top: 40px;
}
.n-footer-top { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 30px; }
@media (max-width: 900px) { .n-footer-top { grid-template-columns: 1fr 1fr; } }
.n-footer-brand { max-width: 320px; }
.n-footer-subs { display: flex; gap: 6px; margin-top: 14px; }
.n-footer-subs input {
  flex: 1;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(var(--n-surf),0.06); border: 1px solid rgba(var(--n-surf),0.08);
  color: rgb(var(--n-ink)); font-size: 12px; outline: none;
}
.n-footer-col { display: flex; flex-direction: column; gap: 8px; }
.n-footer-h { font-size: 10px; letter-spacing: 3px; color: rgba(var(--n-ink),0.4); margin-bottom: 4px; }
.n-footer-col a { font-size: 13px; color: rgba(var(--n-ink),0.7); }
.n-footer-col a:hover { color: rgb(var(--n-ink)); }
.n-footer-bottom {
  max-width: 1440px; margin: 30px auto 0;
  padding-top: 20px; border-top: 1px solid rgba(var(--n-surf),0.05);
  display: flex; justify-content: space-between;
}

/* ---------- match center ---------- */
.n-mc { max-width: 1440px; margin: 0 auto; padding: 20px 28px 60px; }
.n-mc-top { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.n-back {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.7); padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(var(--n-surf),0.08);
}
.n-share { margin-left: auto; display: flex; gap: 8px; }

.n-mc-hero {
  position: relative;
  background: rgba(var(--n-panel),0.7);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 20px;
  padding: 26px;
  margin-bottom: 20px;
  overflow: hidden;
}
.n-mc-chips { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.n-mc-scoreline {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px;
}
.n-mc-team { display: flex; align-items: center; gap: 14px; }
.n-mc-team.right { justify-content: flex-end; text-align: right; }
.n-mc-badge {
  font-family: 'Space Grotesk', sans-serif; font-weight: 800;
  padding: 12px 14px; border-radius: 10px; font-size: 16px; letter-spacing: 1px;
}
.n-mc-name { font-weight: 600; font-size: 14px; }
.n-mc-score { font-size: clamp(22px, 2.8vw, 40px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.n-mc-score span { font-size: 0.4em; font-weight: 400; color: rgba(var(--n-ink),0.5); margin-left: 6px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; }
.n-mc-sep { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.n-mc-sep-line { width: 1px; height: 30px; background: rgba(var(--n-surf),0.1); }
.n-mc-sep-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 3px; color: rgba(var(--n-ink),0.4); }

.n-mc-need {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid rgba(var(--n-surf),0.08);
}
.n-mc-need-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 3px; color: rgba(var(--n-ink),0.5); margin-bottom: 6px; }
.n-mc-need-big { display: flex; align-items: baseline; gap: 8px; font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; }
.n-mc-need-small { font-size: 12px; font-weight: 500; color: rgba(var(--n-ink),0.5); }
.n-pill {
  padding: 10px 14px;
  background: rgba(var(--n-inset),0.3);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 10px;
}
.n-pill-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }
.n-pill-value { font-size: 22px; font-weight: 800; margin-top: 2px; letter-spacing: -0.02em; }

.n-mc-tabs {
  display: flex; gap: 4px; margin-bottom: 20px; overflow-x: auto;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--n-surf),0.05);
}
.n-mc-tab {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px;
  padding: 10px 14px; border-radius: 8px; white-space: nowrap;
  color: rgba(var(--n-ink),0.5);
}
.n-mc-tab.on { color: var(--n-ground); background: oklch(0.7 0.22 27); }

.n-mc-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
@media (max-width: 1000px) { .n-mc-grid { grid-template-columns: 1fr; } }
.n-mc-aside { display: flex; flex-direction: column; gap: 14px; }

.n-bbb { display: flex; flex-direction: column; gap: 16px; }
.n-bbb-over {
  border: 1px solid rgba(var(--n-surf),0.05);
  border-radius: 12px;
  background: rgba(var(--n-inset),0.2);
  overflow: hidden;
}
.n-bbb-over-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: rgba(var(--n-surf),0.03);
  border-bottom: 1px solid rgba(var(--n-surf),0.05);
}
.n-bbb-over-n { font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.n-bbb-over-sum { font-size: 11px; color: rgba(var(--n-ink),0.7); letter-spacing: 0.5px; }
.n-bbb-balls { display: flex; flex-direction: column; }
.n-bbb-row {
  display: grid; grid-template-columns: 40px 50px 1fr;
  align-items: center; gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(var(--n-surf),0.03);
  font-size: 13px;
}
.n-bbb-row:last-child { border-bottom: 0; }
.n-bbb-seq { font-size: 11px; color: rgba(var(--n-ink),0.4); }
.n-bbb-text { color: rgba(var(--n-ink),0.85); }

.n-crease { padding: 6px 2px; }
.n-crease-row { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(var(--n-surf),0.04); }
.n-crease-row:last-child { border-bottom: 0; }
.n-crease-row.active { border-color: rgba(var(--n-surf),0.08); }
.n-crease-avatar { width: 40px; height: 40px; border-radius: 999px; color: var(--n-ground); font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.n-crease-name { font-weight: 600; font-size: 13px; }
.n-crease-star { color: oklch(0.7 0.22 27); margin-left: 4px; }
.n-crease-sub { font-size: 11px; color: rgba(var(--n-ink),0.5); margin-top: 2px; letter-spacing: 0.5px; }

.n-bowl-overs { padding: 12px 0 4px; }
.n-bowl-balls { display: flex; gap: 6px; margin-top: 8px; }

/* mobile preview frame (applied via wrapper class) */
.mobile-view { max-width: 430px; margin: 0 auto; border-left: 1px solid rgba(var(--n-surf),0.08); border-right: 1px solid rgba(var(--n-surf),0.08); }
.mobile-view .n-nav { display: none; }
.mobile-view .n-search { display: none; }
.mobile-view .n-header-right { display: none; }
.mobile-view .n-page { padding: 16px; }
.mobile-view .n-hero-grid { grid-template-columns: 1fr; padding: 18px; border-radius: 16px; }
.mobile-view .n-hero-teams { grid-template-columns: 1fr; gap: 10px; }
.mobile-view .n-hero-vs { flex-direction: row; }
.mobile-view .n-hero-vs-line { width: 20px; height: 1px; }
.mobile-view .n-stories-grid { grid-template-columns: 1fr; }
.mobile-view .n-rail-grid { grid-template-columns: 1fr; }
.mobile-view .n-rf-grid { grid-template-columns: 1fr; }
.mobile-view .n-trend-strip { grid-template-columns: 1fr 1fr; }
.mobile-view .n-section-head h2 { font-size: 22px; }
.mobile-view .n-section-tools { display: none; }
.mobile-view .n-mc-grid { grid-template-columns: 1fr; }
.mobile-view .n-mc-scoreline { grid-template-columns: 1fr; gap: 12px; }
.mobile-view .n-mc-team.right { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
.mobile-view .n-footer-top { grid-template-columns: 1fr 1fr; }

/* ================================================================= */
/*   QUICK STRIP (above hero)                                        */
/* ================================================================= */
.n-quick {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px;
  margin-bottom: 28px;
}
.n-quick-actions {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  padding: 10px;
  background: rgba(var(--n-surf),0.02);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 14px;
}
.n-quick-act {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: rgba(var(--n-surf),0.02);
  border: 1px solid rgba(var(--n-surf),0.04);
  border-radius: 10px;
  color: inherit; text-decoration: none;
  transition: border-color 180ms, transform 180ms, background 180ms;
}
.n-quick-act:hover { border-color: rgba(var(--n-surf),0.14); transform: translateY(-1px); background: rgba(var(--n-surf),0.04); }
.n-quick-ico {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 8px; border: 1px solid;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.n-quick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.n-quick-label { font-weight: 600; font-size: 12px; color: rgb(var(--n-ink)); }
.n-quick-sub { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45); text-transform: uppercase; }

.n-quick-trend {
  padding: 10px 12px;
  background: rgba(var(--n-surf),0.02);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.n-quick-trend-label { font-size: 10px; letter-spacing: 3px; color: rgba(var(--n-ink),0.6); }
.n-quick-trend-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
.n-quick-trend-chip {
  display: grid; grid-template-columns: 22px 1fr auto auto auto;
  align-items: center; gap: 8px;
  padding: 5px 6px;
  border-radius: 8px;
  color: inherit; text-decoration: none;
  font-size: 12px;
}
.n-quick-trend-chip:hover { background: rgba(var(--n-surf),0.04); }
.n-quick-trend-avatar { width: 22px; height: 22px; border-radius: 999px; font-size: 9px; font-weight: 800; color: var(--n-ground); display: inline-flex; align-items: center; justify-content: center; }
.n-quick-trend-name { font-weight: 600; color: rgb(var(--n-ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-quick-trend-role { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45); padding: 2px 5px; border: 1px solid rgba(var(--n-surf),0.08); border-radius: 4px; }
.n-quick-trend-stat { font-size: 10px; color: rgba(var(--n-ink),0.75); letter-spacing: 0.5px; }
.n-quick-trend-delta { font-size: 10px; font-family: 'JetBrains Mono', monospace; }
.n-quick-trend-delta.up { color: oklch(0.7 0.22 27); }
.n-quick-trend-delta.down { color: oklch(0.68 0.23 25); }

/* ================================================================= */
/*   STAT DOMAIN                                                     */
/* ================================================================= */
.n-sd { margin-bottom: 20px; }
.n-sd-lede { font-size: 10px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); text-transform: uppercase; }
.n-sd-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 14px;
}
.n-sd-tile {
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 16px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
}
.n-sd-kicker { font-size: 10px; letter-spacing: 3px; }

.n-sd-sotd { grid-column: span 3; grid-row: span 2; background: linear-gradient(135deg, rgba(var(--n-surf),0.04), rgba(var(--n-panel),0.6)); }
.n-sd-sotd-big { font-size: 88px; line-height: 0.95; letter-spacing: -3px; color: oklch(0.7 0.22 27); text-shadow: 0 0 30px oklch(0.7 0.22 27 / 0.25); }
.n-sd-sotd-cap { font-size: 16px; line-height: 1.5; color: rgba(var(--n-ink),0.8); max-width: 480px; }
.n-sd-sotd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: auto; }
.n-sd-sotd-cell { padding: 10px 12px; background: rgba(var(--n-inset),0.3); border: 1px solid rgba(var(--n-surf),0.05); border-radius: 10px; }
.n-sd-sotd-k { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.45); }
.n-sd-sotd-v { font-size: 22px; font-weight: 700; color: rgb(var(--n-ink)); margin-top: 4px; letter-spacing: -0.5px; }

.n-sd-lb { grid-column: span 3; grid-row: span 2; }
.n-sd-lb-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.n-sd-lb-tab {
  font-size: 10px; letter-spacing: 2px;
  padding: 6px 10px;
  background: transparent;
  color: rgba(var(--n-ink),0.5);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms;
}
.n-sd-lb-tab:hover { color: rgb(var(--n-ink)); border-color: rgba(var(--n-surf),0.16); }
.n-sd-lb-tab.on { background: oklch(0.6 0.18 254); color: var(--n-ground); border-color: oklch(0.6 0.18 254); }
.n-sd-lb-meta { font-size: 10px; letter-spacing: 2px; color: rgba(var(--n-ink),0.4); margin-top: -4px; }
.n-sd-lb-list { display: flex; flex-direction: column; gap: 2px; }
.n-sd-lb-row {
  display: grid; grid-template-columns: 22px 1fr 40px 90px 80px;
  align-items: center; gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px dashed rgba(var(--n-surf),0.05);
  font-size: 13px;
}
.n-sd-lb-row:last-child { border-bottom: 0; }
.n-sd-lb-rank { font-size: 18px; font-weight: 700; }
.n-sd-lb-name { color: rgb(var(--n-ink)); font-weight: 600; }
.n-sd-lb-team { font-size: 10px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); padding: 2px 6px; border: 1px solid rgba(var(--n-surf),0.08); border-radius: 4px; justify-self: start; }
.n-sd-lb-sub { font-size: 10px; color: rgba(var(--n-ink),0.45); letter-spacing: 1px; }
.n-sd-lb-v { text-align: right; font-size: 20px; font-weight: 700; color: oklch(0.6 0.18 254); letter-spacing: -0.5px; }
.n-sd-lb-u { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.35); margin-left: 4px; font-family: 'JetBrains Mono', monospace; }

.n-sd-ms { grid-column: span 3; }
.n-sd-ms-list { display: flex; flex-direction: column; gap: 10px; }
.n-sd-ms-row.done { opacity: 0.85; }
.n-sd-ms-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.n-sd-ms-player { font-weight: 600; font-size: 13px; color: rgb(var(--n-ink)); }
.n-sd-ms-goal { font-size: 10px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.n-sd-ms-bar { height: 6px; background: rgba(var(--n-surf),0.05); border-radius: 3px; overflow: hidden; }
.n-sd-ms-fill { height: 100%; border-radius: 3px; transition: width 600ms; }
.n-sd-ms-note { font-size: 9px; letter-spacing: 1.5px; margin-top: 4px; text-transform: uppercase; }

.n-sd-rec { grid-column: span 3; }
.n-sd-rec-list { display: flex; flex-direction: column; gap: 6px; }
.n-sd-rec-row {
  display: grid; grid-template-columns: 64px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--n-surf),0.05);
  border-radius: 10px;
  color: inherit; text-decoration: none;
  transition: border-color 150ms, background 150ms;
}
.n-sd-rec-row:hover { border-color: rgba(var(--n-surf),0.14); background: rgba(var(--n-surf),0.03); }
.n-sd-rec-badge {
  font-size: 10px; letter-spacing: 2px; text-align: center;
  padding: 4px 6px; border-radius: 4px;
  background: rgba(var(--n-surf),0.06); color: rgba(var(--n-ink),0.8);
}
.n-sd-rec-row.badge-new .n-sd-rec-badge { background: oklch(0.7 0.22 27); color: var(--n-ground); }
.n-sd-rec-row.badge-equal .n-sd-rec-badge { background: oklch(0.82 0.18 75); color: var(--n-ground); }
.n-sd-rec-row.badge-chase .n-sd-rec-badge { background: oklch(0.72 0.25 355); color: #fff; }
.n-sd-rec-row.badge-watch .n-sd-rec-badge { background: oklch(0.6 0.18 254); color: var(--n-ground); }
.n-sd-rec-title { font-weight: 600; font-size: 13px; color: rgb(var(--n-ink)); }
.n-sd-rec-meta { font-size: 10px; letter-spacing: 1px; color: rgba(var(--n-ink),0.55); margin-top: 2px; }
.n-sd-rec-when { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.35); }

.n-sd-h2h { grid-column: span 3; }
.n-sd-h2h-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.n-sd-h2h-team { text-align: center; }
.n-sd-h2h-short { font-size: 36px; font-weight: 800; letter-spacing: -1px; }
.n-sd-h2h-name { font-size: 11px; color: rgba(var(--n-ink),0.6); margin-top: 2px; }
.n-sd-h2h-score { font-size: 42px; font-weight: 800; color: rgb(var(--n-ink)); letter-spacing: -1px; }
.n-sd-h2h-sep { color: rgba(var(--n-ink),0.25); margin: 0 6px; }
.n-sd-h2h-played { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.4); text-align: center; margin-top: 2px; }
.n-sd-h2h-rows { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px dashed rgba(var(--n-surf),0.08); }
.n-sd-h2h-statrow { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; font-size: 12px; padding: 4px 0; }
.n-sd-h2h-statrow > :first-child { color: rgba(var(--n-ink),0.5); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.n-sd-h2h-form { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px dashed rgba(var(--n-surf),0.08); }
.n-sd-h2h-form-label { font-size: 10px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }
.n-sd-h2h-form-dots { display: inline-flex; gap: 4px; }
.n-sd-h2h-dot { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.n-sd-h2h-dot.w { background: oklch(0.7 0.22 27); color: var(--n-ground); }
.n-sd-h2h-dot.l { background: rgba(var(--n-surf),0.08); color: rgba(var(--n-ink),0.5); }

.n-sd-venue { grid-column: span 3; }
.n-sd-venue-name { font-size: 28px; font-weight: 700; letter-spacing: -1px; }
.n-sd-venue-loc { font-size: 11px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); text-transform: uppercase; }
.n-sd-venue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; }
.n-sd-venue-cell { padding: 10px; background: rgba(var(--n-inset),0.25); border: 1px solid rgba(var(--n-surf),0.05); border-radius: 8px; }
.n-sd-venue-k { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.45); }
.n-sd-venue-v { font-size: 20px; font-weight: 700; color: rgb(var(--n-ink)); margin-top: 4px; letter-spacing: -0.5px; }
.n-sd-venue-v.sm { font-size: 13px; }

@media (max-width: 1100px) {
  .n-sd-grid { grid-template-columns: repeat(2, 1fr); }
  .n-sd-sotd, .n-sd-lb, .n-sd-ms, .n-sd-rec, .n-sd-h2h, .n-sd-venue { grid-column: span 2; grid-row: auto; }
  .n-sd-sotd-big { font-size: 64px; }
  .n-quick { grid-template-columns: 1fr; }
  .n-quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================= */
/*   FIXTURES STRIP                                                  */
/* ================================================================= */
.n-fix-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1100px) { .n-fix-strip { grid-template-columns: repeat(2, 1fr); } }
.n-fix-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px;
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: border-color 150ms, transform 150ms;
}
.n-fix-card:hover { border-color: rgba(var(--n-surf),0.14); transform: translateY(-2px); }
.n-fix-card .n-fix-when { font-size: 10px; letter-spacing: 2px; color: oklch(0.7 0.22 27); }
.n-fix-teams-big { font-size: 20px; font-weight: 700; display: flex; gap: 10px; align-items: baseline; }
.n-fix-vs { font-size: 12px; letter-spacing: 1px; }
.n-fix-card .n-fix-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: rgba(var(--n-ink),0.6); }
.n-fix-fmt-pill { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1.5px; padding: 2px 6px; background: rgba(var(--n-surf),0.06); border-radius: 4px; }

.mobile-view .n-quick-actions { grid-template-columns: 1fr 1fr; }
.mobile-view .n-sd-grid { grid-template-columns: 1fr; }
.mobile-view .n-sd-sotd, .mobile-view .n-sd-lb, .mobile-view .n-sd-ms,
.mobile-view .n-sd-rec, .mobile-view .n-sd-h2h, .mobile-view .n-sd-venue { grid-column: span 1; grid-row: auto; }
.mobile-view .n-sd-sotd-big { font-size: 52px; }
.mobile-view .n-sd-sotd-grid { grid-template-columns: repeat(2, 1fr); }
.mobile-view .n-sd-lb-row { grid-template-columns: 22px 1fr 40px 70px; }
.mobile-view .n-sd-lb-sub { display: none; }

/* ================================================================= */
/*   QUICK LINKS v2 — compact horizontal pill rail                   */
/* ================================================================= */
.n-ql2 { margin-bottom: 28px; }
.n-ql2-rail {
  display: grid; grid-template-columns: 1.3fr 1.3fr 1.5fr 1.2fr 1fr 1fr 1fr;
  gap: 8px; align-items: stretch;
}
@media (max-width: 1300px) { .n-ql2-rail { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px)  { .n-ql2-rail { grid-template-columns: repeat(2, 1fr); } }
.n-ql2-group {
  position: relative;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  padding: 8px 10px;
  transition: border-color 150ms, background 150ms;
}
.n-ql2-group:hover { border-color: rgba(var(--n-surf),0.14); background: rgba(var(--n-panel),0.85); }
.n-ql2-group.pinned {
  background: linear-gradient(135deg, rgba(var(--n-surf),0.05), rgba(var(--n-panel),0.7));
  border-color: rgba(var(--n-surf),0.12);
}
.n-ql2-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.n-ql2-bar { width: 3px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.n-ql2-h { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.55); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-ql2-pin { font-size: 8px; padding: 1px 4px; border-radius: 3px; font-weight: 800; letter-spacing: 1px; }
.n-ql2-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.n-ql2-chip {
  font-size: 11px; padding: 4px 8px;
  background: rgba(var(--n-surf),0.05);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 999px;
  color: rgba(var(--n-ink),0.85);
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms;
}
.n-ql2-chip:hover { background: rgba(var(--n-surf),0.1); border-color: rgba(var(--n-surf),0.14); }
.n-ql2-chip.f {
  background: transparent;
  border-width: 1px;
  font-weight: 600;
}
.n-ql2-more {
  font-size: 9px; letter-spacing: 1px; padding: 4px 8px;
  background: transparent; border: 1px dashed rgba(var(--n-surf),0.12);
  color: rgba(var(--n-ink),0.5); border-radius: 999px;
  cursor: pointer;
}
.n-ql2-pop {
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: 30;
  background: rgba(var(--n-ground-rgb),0.96); backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--n-surf),0.1);
  border-radius: 10px;
  padding: 6px;
  margin-top: 4px;
  display: flex; flex-direction: column; gap: 1px;
  max-height: 280px; overflow-y: auto;
  box-shadow: 0 16px 32px rgba(var(--n-shadow),0.5);
}
.n-ql2-pop-item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 8px; border-radius: 6px;
  font-size: 12px; color: rgba(var(--n-ink),0.85);
  text-decoration: none;
}
.n-ql2-pop-item:hover { background: rgba(var(--n-surf),0.06); color: rgb(var(--n-ink)); }
.n-ql2-pop-sub { font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.4); text-transform: uppercase; }

/* ================================================================= */
/*   MATCH HUB                                                       */
/* ================================================================= */
.n-mh { margin-bottom: 48px; }
.n-mh-tabs { display: inline-flex; gap: 4px; background: rgba(var(--n-inset),0.3); padding: 4px; border-radius: 999px; border: 1px solid rgba(var(--n-surf),0.05); }
.n-mh-tab {
  font-size: 11px; letter-spacing: 2px;
  padding: 7px 12px; border-radius: 999px;
  background: transparent; color: rgba(var(--n-ink),0.6);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.n-mh-tab:hover { color: rgb(var(--n-ink)); }
.n-mh-tab.on { background: oklch(0.7 0.22 27); color: var(--n-ground); }
.n-mh-tab-n { font-size: 9px; padding: 1px 5px; border-radius: 999px; background: rgba(var(--n-surf),0.12); }
.n-mh-tab.on .n-mh-tab-n { background: rgba(var(--n-inset),0.2); }

.n-mh-grid { display: grid; grid-template-columns: 320px 1fr; gap: 14px; }
@media (max-width: 1000px) { .n-mh-grid { grid-template-columns: 1fr; } }
.n-mh-list { display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow-y: auto; padding-right: 4px; }
.n-mh-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
  color: inherit; text-align: left; cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.n-mh-card:hover { border-color: rgba(var(--n-surf),0.14); }
.n-mh-card.on {
  background: rgba(var(--n-panel),0.95);
  border-color: oklch(0.7 0.22 27 / 0.5);
  box-shadow: 0 0 0 1px oklch(0.7 0.22 27 / 0.2);
}
.n-mh-card-top { display: flex; justify-content: space-between; gap: 6px; }
.n-mh-card-series { font-size: 10px; color: rgba(var(--n-ink),0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-mh-card-fmt { font-size: 9px; letter-spacing: 1.5px; padding: 2px 5px; background: rgba(var(--n-surf),0.06); border-radius: 3px; color: rgba(var(--n-ink),0.6); }
.n-mh-card-teams { display: flex; flex-direction: column; gap: 6px; }
.n-mh-team { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 8px; }
.n-mh-team-badge { width: 28px; height: 24px; border-radius: 5px; font-weight: 800; font-size: 10px; letter-spacing: 1px; display: inline-flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; }
.n-mh-team-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-mh-team-score { font-size: 13px; font-weight: 700; }
.n-mh-bat-dot { width: 6px; height: 6px; border-radius: 999px; box-shadow: 0 0 6px currentColor; }
.n-mh-card-note { font-size: 10px; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 6px; padding-top: 4px; border-top: 1px dashed rgba(var(--n-surf),0.06); }
.status-live { color: oklch(0.7 0.22 27); }
.status-upcoming { color: rgba(var(--n-ink),0.6); }
.status-result { color: rgba(var(--n-ink),0.7); }

/* featured match */
.n-mh-feat {
  position: relative;
  background: rgba(var(--n-panel),0.7);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 18px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
}
.n-mh-feat-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 50% at 0% 0%, oklch(0.7 0.22 27 / 0.1) 0%, transparent 60%),
    radial-gradient(50% 50% at 100% 0%, oklch(0.72 0.25 355 / 0.1) 0%, transparent 60%);
}
.n-mh-feat > * { position: relative; z-index: 1; }
.n-mh-feat-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.n-mh-feat-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.n-mh-feat-series { font-size: 10px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); text-transform: uppercase; margin-left: 6px; }
.n-mh-feat-actions { display: flex; gap: 6px; align-items: center; }

.n-mh-feat-scoreline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 14px 0; border-top: 1px solid rgba(var(--n-surf),0.05); border-bottom: 1px solid rgba(var(--n-surf),0.05); }
@media (max-width: 700px) { .n-mh-feat-scoreline { grid-template-columns: 1fr; } }
.n-mh-feat-team.right { text-align: right; }
.n-mh-feat-team-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.n-mh-feat-team.right .n-mh-feat-team-top { justify-content: flex-end; flex-direction: row-reverse; }
.n-mh-feat-badge { width: 48px; height: 48px; border-radius: 10px; font-size: 14px; font-weight: 800; letter-spacing: 1px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.n-mh-feat-team-name { font-size: 13px; font-weight: 600; }
.n-mh-feat-batting { font-size: 9px; letter-spacing: 2px; margin-top: 2px; }
.n-mh-feat-team-score { font-size: clamp(36px, 4.5vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; color: rgb(var(--n-ink)); }
.n-mh-feat-team-sep { color: rgba(var(--n-surf),0.2); margin: 0 4px; font-weight: 300; }
.n-mh-feat-team-wkts { font-size: 0.6em; color: rgba(var(--n-ink),0.7); }
.n-mh-feat-team-ov { font-size: 10px; color: rgba(var(--n-ink),0.5); margin-top: 4px; }
.n-mh-feat-vs { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; letter-spacing: 2px; }
.n-mh-feat-vs-line { width: 1px; height: 24px; background: rgba(var(--n-surf),0.1); }
.n-mh-feat-note { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }

/* AI insight callout */
.n-mh-ai {
  background: linear-gradient(135deg, rgba(var(--n-surf),0.04), rgba(var(--n-inset),0.2));
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; gap: 14px; align-items: flex-start;
}
.n-mh-ai-tag {
  font-size: 9px; letter-spacing: 2px; color: oklch(0.6 0.18 254);
  flex-shrink: 0; padding-top: 2px;
  display: inline-flex; align-items: center; gap: 6px;
}
.n-mh-ai-glyph { font-size: 14px; }
.n-mh-ai-body { font-size: 13px; line-height: 1.5; color: rgba(var(--n-ink),0.9); }

/* insight grid */
.n-mh-ins-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 800px) { .n-mh-ins-grid { grid-template-columns: 1fr 1fr; } }
.n-ins-tile {
  background: rgba(var(--n-inset),0.25);
  border: 1px solid rgba(var(--n-surf),0.05);
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 100px;
}
.n-ins-tile.span-2 { grid-column: span 2; }
.n-ins-tile.span-3 { grid-column: span 3; }
@media (max-width: 800px) {
  .n-ins-tile.span-2, .n-ins-tile.span-3 { grid-column: span 2; }
}
.n-ins-kicker { font-size: 9px; letter-spacing: 2px; margin-bottom: 2px; }
.n-ins-big { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: rgb(var(--n-ink)); }
.n-ins-big-sm { font-size: 13px; font-weight: 500; color: rgba(var(--n-ink),0.5); margin-left: 6px; }
.n-ins-mid { font-size: 14px; font-weight: 600; color: rgb(var(--n-ink)); }
.n-ins-sub { font-size: 12px; color: rgba(var(--n-ink),0.7); line-height: 1.4; }
.n-ins-foot { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); text-transform: uppercase; margin-top: auto; }
.n-ins-vs { display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: 13px; }
.n-ins-vs-sep { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.4); padding: 2px 0; }
.n-ins-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.n-ins-phase { padding: 8px 10px; background: rgba(var(--n-surf),0.03); border-radius: 8px; }
.n-ins-phase-h { font-size: 8px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.n-ins-phase-v { font-size: 22px; font-weight: 800; margin-top: 4px; letter-spacing: -0.5px; }
.n-ins-phase-v span { font-size: 0.6em; color: rgba(var(--n-ink),0.5); font-weight: 400; }
.n-ins-phase-rr { font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.5); margin-top: 2px; }
.n-ins-moments { display: flex; flex-direction: column; gap: 6px; }
.n-ins-moment { display: grid; grid-template-columns: 80px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(var(--n-surf),0.04); font-size: 12px; }
.n-ins-moment:last-child { border-bottom: 0; }
.n-ins-moment-ov { font-size: 10px; color: rgba(var(--n-ink),0.5); letter-spacing: 0.5px; }
.n-ins-h2h { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.n-ins-h2h-side { text-align: center; }
.n-ins-h2h-short { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.n-ins-h2h-w { font-size: 28px; font-weight: 800; color: rgb(var(--n-ink)); line-height: 1; margin-top: 2px; }
.n-ins-h2h-mid { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.n-ins-h2h-bar { display: flex; height: 8px; width: 100%; border-radius: 4px; overflow: hidden; background: rgba(var(--n-surf),0.05); }
.n-ins-h2h-bar > div { height: 100%; }
.n-ins-form-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.n-ins-form-label { font-size: 10px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); min-width: 36px; }
.n-form-dots { display: inline-flex; gap: 3px; }
.n-form-dot {
  width: 18px; height: 18px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
}
.n-form-dot.w { background: oklch(0.7 0.22 27); color: var(--n-ground); }
.n-form-dot.l { background: oklch(0.72 0.25 355 / 0.7); color: #fff; }
.n-form-dot.d { background: rgba(var(--n-surf),0.15); color: rgba(var(--n-ink),0.7); }
.n-ins-venue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0; }
.n-vn-cell { padding: 6px 8px; background: rgba(var(--n-surf),0.03); border-radius: 6px; }
.n-vn-k { font-size: 8px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.n-vn-v { font-size: 18px; font-weight: 700; margin-top: 2px; letter-spacing: -0.5px; }
.n-pg-bar { height: 8px; background: rgba(var(--n-surf),0.05); border-radius: 4px; overflow: hidden; }
.n-pg-fill { height: 100%; transition: width 600ms; }
.n-pg-val { font-size: 24px; font-weight: 800; margin-top: 6px; letter-spacing: -0.5px; }
.n-pg-val span { font-size: 11px; color: rgba(var(--n-ink),0.4); font-weight: 400; }

/* ================================================================= */
/*   STAT DOMAIN                                                     */
/* ================================================================= */
.n-sd { margin-bottom: 20px; }
.n-sd-fmt-tabs { display: inline-flex; gap: 4px; background: rgba(var(--n-inset),0.3); padding: 4px; border-radius: 999px; border: 1px solid rgba(var(--n-surf),0.05); }
.n-sd-fmt-tab { font-size: 11px; letter-spacing: 2px; padding: 7px 14px; border-radius: 999px; background: transparent; color: rgba(var(--n-ink),0.6); cursor: pointer; }
.n-sd-fmt-tab:hover { color: rgb(var(--n-ink)); }
.n-sd-fmt-tab.on { background: oklch(0.6 0.18 254); color: var(--n-ground); }

/* AI insights band */
.n-sd-ai-band {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 14px; align-items: stretch;
  padding: 14px;
  background: linear-gradient(135deg, rgba(var(--n-surf),0.04), rgba(var(--n-panel),0.6));
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 14px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .n-sd-ai-band { grid-template-columns: 1fr; } }
.n-sd-ai-label { font-size: 10px; letter-spacing: 3px; color: oklch(0.6 0.18 254); display: inline-flex; align-items: center; gap: 6px; padding-top: 6px; }
.n-sd-ai-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 1000px) { .n-sd-ai-list { grid-template-columns: repeat(2, 1fr); } }
.n-sd-ai-card {
  padding: 12px;
  background: rgba(var(--n-inset),0.25);
  border: 1px solid;
  border-radius: 10px;
  color: inherit; text-decoration: none;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform 150ms, background 150ms;
}
.n-sd-ai-card:hover { transform: translateY(-2px); background: rgba(var(--n-inset),0.4); }
.n-sd-ai-tag { font-size: 9px; letter-spacing: 2px; }
.n-sd-ai-h { font-size: 14px; font-weight: 700; color: rgb(var(--n-ink)); letter-spacing: -0.3px; }
.n-sd-ai-b { font-size: 11px; color: rgba(var(--n-ink),0.7); line-height: 1.45; }

/* Totals row */
.n-sd-totals { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-bottom: 18px; }
@media (max-width: 1200px) { .n-sd-totals { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px)  { .n-sd-totals { grid-template-columns: repeat(2, 1fr); } }
.n-sd-total-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  color: inherit; text-decoration: none;
  transition: border-color 150ms, transform 150ms;
}
.n-sd-total-card:hover { border-color: rgba(var(--n-surf),0.14); transform: translateY(-1px); }
.n-sd-total-label { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }
.n-sd-total-value { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.n-sd-total-foot { font-size: 8px; letter-spacing: 1px; color: rgba(var(--n-ink),0.35); display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.n-sd-total-foot .on { color: rgba(var(--n-ink),0.85); }

/* Leaderboards — 4 columns so each format-stat card aligns with one of the 4 fmt tabs */
.n-sd-lbgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 1200px) { .n-sd-lbgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .n-sd-lbgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .n-sd-lbgrid { grid-template-columns: 1fr; } }
.n-sd-lb-card { background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 12px; padding: 14px; }
.n-sd-lb-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(var(--n-surf),0.06); }
.n-sd-lb-card-title { font-size: 14px; font-weight: 700; letter-spacing: -0.5px; }
.n-sd-lb-card-list { display: flex; flex-direction: column; gap: 2px; }
.n-sd-lb-card-row { display: grid; grid-template-columns: 18px 1fr 32px 56px; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px dashed rgba(var(--n-surf),0.04); font-size: 12px; }
.n-sd-lb-card-row:last-child { border-bottom: 0; }
.n-sd-lb-card-rank { font-size: 14px; font-weight: 700; }
.n-sd-lb-card-name { font-weight: 500; color: rgb(var(--n-ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-sd-lb-card-team { font-size: 8px; letter-spacing: 1px; padding: 2px 4px; border: 1px solid rgba(var(--n-surf),0.08); border-radius: 4px; color: rgba(var(--n-ink),0.5); text-align: center; }
.n-sd-lb-card-v { font-size: 15px; font-weight: 700; text-align: right; letter-spacing: -0.5px; }
.n-sd-lb-card-u { font-size: 8px; letter-spacing: 1px; color: rgba(var(--n-ink),0.4); margin-left: 3px; }
.n-sd-lb-empty { text-align: center; font-size: 10px; padding: 16px 0; color: rgba(var(--n-ink),0.3); }

/* Milestones + Records side-by-side */
.n-sd-mr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .n-sd-mr-grid { grid-template-columns: 1fr; } }
.n-sd-tile { background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 12px; padding: 14px; }
.n-sd-kicker { font-size: 10px; letter-spacing: 2px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(var(--n-surf),0.06); }
.n-sd-ms-list { display: flex; flex-direction: column; gap: 10px; }
.n-sd-ms-row.done { opacity: 0.85; }
.n-sd-ms-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 8px; }
.n-sd-ms-player { font-weight: 600; font-size: 13px; color: rgb(var(--n-ink)); }
.n-sd-ms-team { font-size: 9px; letter-spacing: 1px; padding: 1px 4px; background: rgba(var(--n-surf),0.06); border-radius: 3px; margin-left: 4px; color: rgba(var(--n-ink),0.5); }
.n-sd-ms-goal { font-size: 10px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.n-sd-ms-bar { height: 6px; background: rgba(var(--n-surf),0.05); border-radius: 3px; overflow: hidden; }
.n-sd-ms-fill { height: 100%; border-radius: 3px; }
.n-sd-ms-note { font-size: 9px; letter-spacing: 1.5px; margin-top: 4px; text-transform: uppercase; }

.n-sd-rec-list { display: flex; flex-direction: column; gap: 6px; }
.n-sd-rec-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(var(--n-surf),0.05); border-radius: 8px; color: inherit; text-decoration: none; }
.n-sd-rec-row:hover { border-color: rgba(var(--n-surf),0.14); background: rgba(var(--n-surf),0.03); }
.n-sd-rec-badge { font-size: 9px; letter-spacing: 1.5px; text-align: center; padding: 4px 6px; border-radius: 4px; background: rgba(var(--n-surf),0.06); color: rgba(var(--n-ink),0.8); }
.n-sd-rec-row.badge-new .n-sd-rec-badge { background: oklch(0.7 0.22 27); color: var(--n-ground); }
.n-sd-rec-row.badge-equal .n-sd-rec-badge { background: oklch(0.82 0.18 75); color: var(--n-ground); }
.n-sd-rec-row.badge-chase .n-sd-rec-badge { background: oklch(0.72 0.25 355); color: #fff; }
.n-sd-rec-row.badge-watch .n-sd-rec-badge { background: oklch(0.6 0.18 254); color: var(--n-ground); }
.n-sd-rec-title { font-weight: 600; font-size: 13px; color: rgb(var(--n-ink)); }
.n-sd-rec-meta { font-size: 10px; letter-spacing: 0.5px; color: rgba(var(--n-ink),0.55); margin-top: 2px; }
.n-sd-rec-when { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.35); }

/* Mobile overrides */
.mobile-view .n-ql2-rail { grid-template-columns: 1fr 1fr; }
.mobile-view .n-mh-grid { grid-template-columns: 1fr; }
.mobile-view .n-mh-list { max-height: none; }
.mobile-view .n-mh-ins-grid { grid-template-columns: 1fr; }
.mobile-view .n-ins-tile.span-2, .mobile-view .n-ins-tile.span-3 { grid-column: span 1; }
.mobile-view .n-sd-ai-band { grid-template-columns: 1fr; }
.mobile-view .n-sd-ai-list { grid-template-columns: 1fr; }
.mobile-view .n-sd-totals { grid-template-columns: 1fr 1fr; }
.mobile-view .n-sd-lbgrid { grid-template-columns: 1fr; }
.mobile-view .n-sd-mr-grid { grid-template-columns: 1fr; }
.n-ql { margin-bottom: 32px; }
.n-ql-sub { font-size: 10px; letter-spacing: 2px; color: rgba(var(--n-ink),0.45); text-transform: uppercase; }
.n-ql-grid {
  display: grid; grid-template-columns: 1.2fr 1.4fr 1.4fr repeat(4, 1fr);
  gap: 12px;
  align-items: start;
}
@media (max-width: 1200px) { .n-ql-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .n-ql-grid { grid-template-columns: repeat(2, 1fr); } }
.n-ql-group {
  background: rgba(var(--n-panel),0.5);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 180px;
}
.n-ql-group.pinned {
  background: linear-gradient(135deg, rgba(var(--n-surf),0.05), rgba(var(--n-panel),0.6));
  border-color: rgba(var(--n-surf),0.12);
}
.n-ql-head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px dashed rgba(var(--n-surf),0.06); }
.n-ql-bar { width: 3px; height: 12px; border-radius: 2px; }
.n-ql-h { font-size: 10px; letter-spacing: 2px; color: rgba(var(--n-ink),0.7); flex: 1; }
.n-ql-pin { font-size: 9px; letter-spacing: 1.5px; padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.n-ql-list { display: flex; flex-direction: column; gap: 1px; }
.n-ql-item {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center;
  padding: 6px 6px; border-radius: 6px;
  color: inherit; text-decoration: none;
  font-size: 12px;
  gap: 8px;
}
.n-ql-item:hover { background: rgba(var(--n-surf),0.04); }
.n-ql-item.f { background: rgba(var(--n-surf),0.04); }
.n-ql-label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-ql-isub { font-size: 9px; letter-spacing: 1px; grid-column: 1 / -1; margin-top: 1px; text-transform: uppercase; }
.n-ql-arrow { font-size: 18px; line-height: 1; opacity: 0.6; }
.n-ql-item:hover .n-ql-arrow { opacity: 1; }

/* ================================================================= */
/*   MATCH HUB (LIVE / UPCOMING / RECENT)                            */
/* ================================================================= */
.n-mh { margin-bottom: 48px; }
.n-mh-tabs { display: inline-flex; gap: 4px; background: rgba(var(--n-inset),0.3); padding: 4px; border-radius: 999px; border: 1px solid rgba(var(--n-surf),0.05); }
.n-mh-tab {
  font-size: 11px; letter-spacing: 2px;
  padding: 7px 12px; border-radius: 999px;
  background: transparent; color: rgba(var(--n-ink),0.6);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.n-mh-tab:hover { color: rgb(var(--n-ink)); }
.n-mh-tab.on { background: oklch(0.7 0.22 27); color: var(--n-ground); }
.n-mh-tab-n {
  font-size: 9px; padding: 1px 5px; border-radius: 999px;
  background: rgba(var(--n-surf),0.12); color: inherit;
}
.n-mh-tab.on .n-mh-tab-n { background: rgba(var(--n-inset),0.2); }

.n-mh-grid {
  display: grid; grid-template-columns: 340px 1fr;
  gap: 16px;
}
@media (max-width: 1000px) { .n-mh-grid { grid-template-columns: 1fr; } }
.n-mh-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 520px; overflow-y: auto;
  padding-right: 4px;
}
.n-mh-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
  color: inherit; text-align: left;
  cursor: pointer;
  transition: border-color 150ms, background 150ms, transform 150ms;
}
.n-mh-card:hover { border-color: rgba(var(--n-surf),0.14); }
.n-mh-card.on {
  background: rgba(var(--n-panel),0.9);
  border-color: oklch(0.7 0.22 27 / 0.5);
  box-shadow: 0 0 0 1px oklch(0.7 0.22 27 / 0.2), 0 8px 24px -12px oklch(0.7 0.22 27 / 0.4);
}
.n-mh-card-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.n-mh-card-series { font-size: 10px; color: rgba(var(--n-ink),0.55); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-mh-card-fmt { font-size: 9px; letter-spacing: 2px; padding: 2px 5px; background: rgba(var(--n-surf),0.06); border-radius: 4px; color: rgba(var(--n-ink),0.7); }
.n-mh-card-teams { display: flex; flex-direction: column; gap: 6px; }
.n-mh-team {
  display: grid; grid-template-columns: 30px 1fr auto auto;
  align-items: center; gap: 8px;
}
.n-mh-team-badge {
  width: 30px; height: 26px; border-radius: 5px;
  font-weight: 800; font-size: 10px; letter-spacing: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
}
.n-mh-team-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-mh-team-score { font-size: 14px; font-weight: 700; white-space: nowrap; }
.n-mh-team-ov { font-size: 10px; color: rgba(var(--n-ink),0.5); font-weight: 400; margin-left: 4px; }
.n-mh-bat-dot { width: 6px; height: 6px; border-radius: 999px; box-shadow: 0 0 6px currentColor; }
.n-mh-card-note { font-size: 10px; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 6px; padding-top: 4px; border-top: 1px dashed rgba(var(--n-surf),0.06); }
.status-live { color: oklch(0.7 0.22 27); }
.status-upcoming { color: rgba(var(--n-ink),0.6); }
.status-result { color: rgba(var(--n-ink),0.7); }

/* featured match */
.n-mh-feat {
  position: relative;
  background: rgba(var(--n-panel),0.7);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 18px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 18px;
  overflow: hidden;
}
.n-mh-feat-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 0% 0%, oklch(0.7 0.22 27 / 0.12) 0%, transparent 60%),
    radial-gradient(60% 50% at 100% 0%, oklch(0.72 0.25 355 / 0.12) 0%, transparent 60%);
}
.n-mh-feat > * { position: relative; z-index: 1; }
.n-mh-feat-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.n-mh-feat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.n-mh-feat-series { font-size: 11px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); text-transform: uppercase; }
.n-mh-feat-scoreline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 14px 0; border-top: 1px solid rgba(var(--n-surf),0.05); border-bottom: 1px solid rgba(var(--n-surf),0.05); }
@media (max-width: 700px) { .n-mh-feat-scoreline { grid-template-columns: 1fr; } }
.n-mh-feat-team.right { text-align: right; }
.n-mh-feat-team-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.n-mh-feat-team.right .n-mh-feat-team-top { justify-content: flex-end; flex-direction: row-reverse; }
.n-mh-feat-badge {
  width: 56px; height: 56px; border-radius: 12px;
  font-size: 16px; font-weight: 800; letter-spacing: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.n-mh-feat-team-name { font-size: 13px; font-weight: 600; }
.n-mh-feat-batting { font-size: 9px; letter-spacing: 2px; margin-top: 2px; }
.n-mh-feat-team-score { font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; color: rgb(var(--n-ink)); }
.n-mh-feat-team-sep { color: rgba(var(--n-surf),0.2); margin: 0 4px; font-weight: 300; }
.n-mh-feat-team-wkts { font-size: 0.6em; color: rgba(var(--n-ink),0.7); }
.n-mh-feat-team-ov { font-size: 11px; color: rgba(var(--n-ink),0.5); margin-top: 4px; letter-spacing: 0.5px; }
.n-mh-feat-vs { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; letter-spacing: 2px; }
.n-mh-feat-vs-line { width: 1px; height: 28px; background: rgba(var(--n-surf),0.1); }
.n-mh-feat-note { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.n-mh-feat-wp { display: flex; flex-direction: column; gap: 8px; }
.n-mh-feat-wp-head { display: flex; justify-content: space-between; }
.n-mh-feat-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ================================================================= */
/*   STAT DOMAIN (Overall / Test / ODI / T20I)                        */
/* ================================================================= */
.n-sd { margin-bottom: 20px; }
.n-sd-fmt-tabs { display: inline-flex; gap: 4px; background: rgba(var(--n-inset),0.3); padding: 4px; border-radius: 999px; border: 1px solid rgba(var(--n-surf),0.05); }
.n-sd-fmt-tab {
  font-size: 11px; letter-spacing: 2px;
  padding: 7px 14px; border-radius: 999px;
  background: transparent; color: rgba(var(--n-ink),0.6);
  cursor: pointer;
}
.n-sd-fmt-tab:hover { color: rgb(var(--n-ink)); }
.n-sd-fmt-tab.on { background: oklch(0.6 0.18 254); color: var(--n-ground); }

.n-sd-totals { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 1200px) { .n-sd-totals { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px)  { .n-sd-totals { grid-template-columns: repeat(2, 1fr); } }
.n-sd-total-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 12px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: border-color 150ms, transform 150ms;
}
.n-sd-total-card:hover { border-color: rgba(var(--n-surf),0.14); transform: translateY(-2px); }
.n-sd-total-label { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }
.n-sd-total-value { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.n-sd-total-foot { font-size: 8px; letter-spacing: 1px; color: rgba(var(--n-ink),0.4); display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }

.n-sd-lbgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1200px) { .n-sd-lbgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .n-sd-lbgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .n-sd-lbgrid { grid-template-columns: 1fr; } }
.n-sd-lb-card {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
  padding: 14px;
}
.n-sd-lb-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(var(--n-surf),0.06); }
.n-sd-lb-card-title { font-size: 15px; font-weight: 700; letter-spacing: -0.5px; }
.n-sd-lb-card-list { display: flex; flex-direction: column; gap: 2px; }
.n-sd-lb-card-row { display: grid; grid-template-columns: 20px 1fr 36px 60px; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px dashed rgba(var(--n-surf),0.04); font-size: 13px; }
.n-sd-lb-card-row:last-child { border-bottom: 0; }
.n-sd-lb-card-rank { font-size: 16px; font-weight: 700; }
.n-sd-lb-card-name { font-weight: 500; color: rgb(var(--n-ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-sd-lb-card-team { font-size: 9px; letter-spacing: 1px; padding: 2px 5px; border: 1px solid rgba(var(--n-surf),0.08); border-radius: 4px; color: rgba(var(--n-ink),0.5); text-align: center; }
.n-sd-lb-card-v { font-size: 16px; font-weight: 700; text-align: right; letter-spacing: -0.5px; }
.n-sd-lb-card-u { font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.4); margin-left: 3px; }
.n-sd-lb-empty { text-align: center; font-size: 10px; letter-spacing: 2px; padding: 20px 0; color: rgba(var(--n-ink),0.3); }

.mobile-view .n-ql-grid { grid-template-columns: 1fr 1fr; }
.mobile-view .n-mh-grid { grid-template-columns: 1fr; }
.mobile-view .n-mh-list { max-height: none; }
.mobile-view .n-sd-totals { grid-template-columns: 1fr 1fr; }
.mobile-view .n-sd-lbgrid { grid-template-columns: 1fr; }
.mobile-view .n-fix-strip { grid-template-columns: 1fr; }


/* ================================================================= */
/*   PLAYER PROFILE PAGE                                             */
/* ================================================================= */
.np { display: flex; flex-direction: column; gap: 18px; }

.np-hero { position: relative; padding: 8px 0; }
.np-hero-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 80% at 0% 0%, oklch(0.7 0.22 27 / 0.18) 0%, transparent 60%),
    radial-gradient(60% 80% at 100% 0%, oklch(0.72 0.25 355 / 0.12) 0%, transparent 60%);
  filter: blur(20px);
}
.np-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 280px 1fr;
  gap: 28px; align-items: stretch;
}
@media (max-width: 800px) { .np-hero-grid { grid-template-columns: 1fr; } }

.np-hero-photo { display: flex; align-items: stretch; }
.np-photo-frame {
  width: 100%; aspect-ratio: 3/4;
  border: 2px solid; border-radius: 16px;
  position: relative; overflow: hidden;
  background: rgb(var(--n-panel2));
}
.np-photo-stripes { position: absolute; inset: 0; }
.np-photo-jersey {
  position: absolute; bottom: 10px; right: 12px;
  font-size: 96px; font-weight: 800;
  line-height: 1; opacity: 0.85;
  letter-spacing: -4px;
}
.np-photo-tag {
  position: absolute; top: 8px; left: 8px;
  font-size: 9px; letter-spacing: 2px;
  padding: 3px 6px;
  background: rgba(var(--n-shadow),0.5);
  border: 1px dashed rgba(var(--n-surf),0.2);
  color: rgba(var(--n-surf),0.5);
  border-radius: 4px;
}

.np-hero-meta { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.np-hero-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.np-hero-name {
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  margin: 0;
}
.np-hero-sub { font-size: 11px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); text-transform: uppercase; }

.np-hero-rank { display: flex; gap: 8px; flex-wrap: wrap; }
.np-rank-pill {
  padding: 10px 14px;
  background: rgba(var(--n-inset),0.3);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  min-width: 110px;
}
.np-rank-k { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }
.np-rank-r { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -1px; margin-top: 2px; }
.np-rank-rt { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.4); margin-top: 2px; }

.np-hero-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.np-ai { padding: 0; }

.np-career-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}
@media (max-width: 1100px) { .np-career-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .np-career-grid { grid-template-columns: repeat(2, 1fr); } }
.np-cs {
  padding: 10px 12px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
}
.np-cs.big { grid-column: span 2; }
@media (max-width: 600px) { .np-cs.big { grid-column: span 2; } }
.np-cs-k { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }
.np-cs-v { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; margin-top: 3px; }
.np-cs.big .np-cs-v { font-size: 40px; }

.np-year-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px;
}
@media (max-width: 900px) { .np-year-grid { grid-template-columns: 1fr; } }
.np-year-chart {
  padding: 12px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
}
.np-year-table {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
  padding: 8px 12px;
}
.np-year-head, .np-year-row {
  display: grid; grid-template-columns: 1.2fr 0.6fr 1fr 0.8fr 0.8fr 0.6fr;
  align-items: center; padding: 8px 0;
  border-bottom: 1px dashed rgba(var(--n-surf),0.06);
  font-size: 12px;
}
.np-year-head { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.4); border-bottom-color: rgba(var(--n-surf),0.1); }
.np-year-row:last-child { border-bottom: 0; }
.np-year-y { font-size: 14px; font-weight: 700; color: rgb(var(--n-ink)); }

.np-form-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
@media (max-width: 900px) { .np-form-grid { grid-template-columns: repeat(2, 1fr); } }

/* 6-card side-by-side row — used for Format history + Form by format in one row */
.np-form-grid-6 {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
@media (max-width: 1100px) { .np-form-grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .np-form-grid-6 { grid-template-columns: 1fr 1fr; } }
.np-form-card {
  padding: 10px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.np-form-card.result-w { border-color: oklch(0.7 0.22 27 / 0.3); }
.np-form-card.result-l { border-color: oklch(0.72 0.25 355 / 0.3); }
.np-form-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.np-form-fmt { font-size: 9px; letter-spacing: 1.5px; padding: 2px 5px; background: rgba(var(--n-surf),0.06); border-radius: 3px; }
.np-form-vs { font-size: 11px; color: rgba(var(--n-ink),0.6); font-weight: 600; }
.np-form-line { font-size: 26px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.np-form-not { color: oklch(0.7 0.22 27); margin-left: 2px; }
.np-form-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; letter-spacing: 1px; color: rgba(var(--n-ink),0.5); }
.np-form-result { padding: 1px 5px; border-radius: 3px; font-weight: 700; }
.np-form-result.w { background: oklch(0.7 0.22 27); color: var(--n-ground); }
.np-form-result.l { background: oklch(0.72 0.25 355 / 0.7); color: #fff; }
.np-form-result.d { background: rgba(var(--n-surf),0.1); color: rgba(var(--n-ink),0.7); }

.np-top-list { display: flex; flex-direction: column; gap: 4px; }
.np-top-row {
  display: grid; grid-template-columns: 80px 60px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  color: inherit; text-decoration: none;
  transition: border-color 150ms, transform 150ms;
}
.np-top-row:hover { border-color: rgba(var(--n-surf),0.14); transform: translateX(4px); }
.np-top-runs { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: oklch(0.7 0.22 27); }
.np-top-balls { font-size: 14px; color: rgba(var(--n-ink),0.5); letter-spacing: 0.5px; }
.np-top-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: rgba(var(--n-ink),0.85); }
.np-top-fmt { padding: 2px 5px; background: rgba(var(--n-surf),0.06); border-radius: 3px; font-size: 9px; letter-spacing: 1.5px; }
.np-top-vs { font-weight: 600; }
.np-top-venue { color: rgba(var(--n-ink),0.5); }
.np-top-note { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.np-top-date { font-size: 10px; letter-spacing: 1px; color: rgba(var(--n-ink),0.4); }

.np-splits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .np-splits-grid { grid-template-columns: 1fr; } }
.np-split-card {
  padding: 18px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
}
.np-split-list { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.np-split-row {
  display: grid; grid-template-columns: 50px 1fr 56px auto;
  align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(var(--n-surf),0.05);
}
.np-split-row.ground { grid-template-columns: 1.5fr 1fr 56px auto; }
.np-split-row:last-child { border-bottom: 0; }
.np-split-team { font-size: 11px; letter-spacing: 1px; font-weight: 700; }
.np-split-ground { font-size: 12px; font-weight: 500; color: rgb(var(--n-ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-split-bar { height: 6px; background: rgba(var(--n-surf),0.05); border-radius: 3px; overflow: hidden; }
.np-split-bar-fill { height: 100%; border-radius: 3px; }
.np-split-v { font-size: 18px; font-weight: 700; text-align: right; letter-spacing: -0.5px; }
.np-split-meta { font-size: 10px; letter-spacing: 0.5px; color: rgba(var(--n-ink),0.5); white-space: nowrap; }

.np-ms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 1100px) { .np-ms-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .np-ms-grid { grid-template-columns: 1fr; } }
.np-ms-tile {
  padding: 14px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
}
.np-ms-tile.done { border-color: oklch(0.7 0.22 27 / 0.3); }
.np-ms-goal { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.6); margin-bottom: 10px; min-height: 28px; }
.np-ms-bar { height: 6px; background: rgba(var(--n-surf),0.05); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.np-ms-fill { height: 100%; border-radius: 3px; }
.np-ms-pct { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.np-ms-pct span { font-size: 12px; color: rgba(var(--n-ink),0.5); font-weight: 400; }
.np-ms-note { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4px; }

/* ================================================================= */
/*   SCHEDULE + RESULTS                                              */
/* ================================================================= */
.ns-page { display: flex; flex-direction: column; gap: 28px; }
.ns-head h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 0 0 6px; }
.ns-sub { font-size: 11px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); text-transform: uppercase; }

.ns-active-head {
  font-size: 10px; letter-spacing: 3px;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.ns-active-rail {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 900px) { .ns-active-rail { grid-template-columns: 1fr; } }
.ns-active-card {
  padding: 16px;
  background: linear-gradient(135deg, rgba(var(--n-surf),0.04), rgba(var(--n-panel),0.7));
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 14px;
  color: inherit; text-decoration: none;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 150ms, transform 150ms;
}
.ns-active-card:hover { border-color: rgba(var(--n-surf),0.16); transform: translateY(-2px); }
.ns-active-fmt { font-size: 10px; letter-spacing: 2px; }
.ns-active-name { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; }
.ns-active-meta { font-size: 11px; letter-spacing: 0.5px; color: rgba(var(--n-ink),0.6); }
.ns-active-foot { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 2px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed rgba(var(--n-surf),0.08); }

.ns-filter { display: flex; align-items: center; gap: 14px; }
.ns-filter-label { font-size: 10px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }

.ns-month {  }
.ns-month-head {
  font-size: 11px; letter-spacing: 3px;
  color: rgba(var(--n-ink),0.5);
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(var(--n-surf),0.06);
}
.ns-days { display: flex; flex-direction: column; gap: 10px; }
.ns-day {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 12px;
  background: rgba(var(--n-panel),0.4);
  border: 1px solid rgba(var(--n-surf),0.05);
  border-radius: 12px;
}
.ns-day.today { background: rgba(var(--n-panel),0.7); border-color: oklch(0.7 0.22 27 / 0.3); }
.ns-day-stub { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.ns-day-num { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.ns-day-name { font-size: 10px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }
.ns-day-tag { font-size: 8px; letter-spacing: 2px; padding: 2px 4px; background: oklch(0.7 0.22 27); color: var(--n-ground); border-radius: 3px; font-weight: 800; margin-top: 4px; }
.ns-day-matches { display: flex; flex-direction: column; gap: 4px; }
.ns-match {
  display: grid; grid-template-columns: 100px 1fr auto;
  align-items: center; gap: 14px;
  padding: 10px 14px;
  background: rgba(var(--n-surf),0.02);
  border: 1px solid rgba(var(--n-surf),0.04);
  border-radius: 8px;
  color: inherit; text-decoration: none;
  transition: border-color 150ms, background 150ms;
}
.ns-match:hover { background: rgba(var(--n-surf),0.05); border-color: rgba(var(--n-surf),0.12); }
.ns-match.marquee { background: linear-gradient(135deg, rgba(var(--n-surf),0.06), rgba(var(--n-inset),0.2)); border-color: oklch(0.82 0.18 75 / 0.4); }
.ns-match-time { font-size: 10px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.6); }
.ns-match-teams { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ns-match-fmt { font-size: 9px; letter-spacing: 1.5px; padding: 2px 5px; background: rgba(var(--n-surf),0.06); border-radius: 3px; }
.ns-match-t { font-size: 16px; font-weight: 700; letter-spacing: -0.5px; }
.ns-match-vs { font-size: 10px; color: rgba(var(--n-ink),0.4); letter-spacing: 1px; }
.ns-match-meta { font-size: 10px; letter-spacing: 0.5px; color: rgba(var(--n-ink),0.55); margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.ns-match-sep { color: rgba(var(--n-surf),0.2); }
.ns-marquee-tag { font-size: 9px; letter-spacing: 2px; padding: 4px 8px; background: oklch(0.82 0.18 75); color: var(--n-ground); border-radius: 4px; font-weight: 800; }

/* RESULTS */
.nr-list { display: flex; flex-direction: column; gap: 8px; }
.nr-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: border-color 150ms, transform 150ms;
}
.nr-card:hover { border-color: rgba(var(--n-surf),0.14); transform: translateY(-1px); }
.nr-card-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding-bottom: 8px; border-bottom: 1px dashed rgba(var(--n-surf),0.05); }
.nr-card-date { display: flex; align-items: baseline; gap: 6px; }
.nr-card-d { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: rgb(var(--n-ink)); }
.nr-card-day { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }
.nr-card-meta { font-size: 11px; color: rgba(var(--n-ink),0.6); display: flex; gap: 6px; flex-wrap: wrap; }
.nr-card-sep { color: rgba(var(--n-surf),0.2); }
.nr-card-fmt { font-size: 10px; letter-spacing: 2px; }
.nr-teams { display: flex; flex-direction: column; gap: 6px; }
.nr-team {
  display: grid; grid-template-columns: 36px 1fr auto auto auto;
  align-items: center; gap: 10px;
  padding: 6px 0;
}
.nr-team.won { color: rgb(var(--n-ink)); }
.nr-team-badge { width: 36px; height: 28px; border-radius: 5px; font-weight: 800; font-size: 11px; letter-spacing: 1px; display: inline-flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; }
.nr-team-name { font-size: 13px; font-weight: 500; }
.nr-team-score { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; }
.nr-team-ov { font-size: 10px; color: rgba(var(--n-ink),0.5); }
.nr-team-win { font-size: 9px; letter-spacing: 2px; padding: 2px 6px; background: oklch(0.7 0.22 27); color: var(--n-ground); border-radius: 3px; font-weight: 800; }
.nr-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px dashed rgba(var(--n-surf),0.05); flex-wrap: wrap; gap: 8px; }
.nr-result { font-size: 11px; letter-spacing: 1px; }
.nr-mom { font-size: 10px; letter-spacing: 1px; display: inline-flex; gap: 6px; align-items: center; }

.mobile-view .np-hero-grid { grid-template-columns: 1fr; }
.mobile-view .np-career-grid { grid-template-columns: 1fr 1fr; }
.mobile-view .np-year-grid { grid-template-columns: 1fr; }
.mobile-view .np-form-grid { grid-template-columns: 1fr; }
.mobile-view .np-splits-grid { grid-template-columns: 1fr; }
.mobile-view .np-ms-grid { grid-template-columns: 1fr 1fr; }
.mobile-view .ns-day { grid-template-columns: 60px 1fr; gap: 10px; }
.mobile-view .ns-match { grid-template-columns: 1fr; }
.mobile-view .ns-active-rail { grid-template-columns: 1fr; }


/* ================================================================= */
/*   QUICK MENU (replaces live wire ticker)                         */
/* ================================================================= */
.n-qm {
  border-top: 1px solid rgba(var(--n-surf),0.04);
  background: rgba(var(--n-inset),0.4);
  position: relative;
}
.n-qm-inner {
  display: flex; align-items: stretch;
  max-width: 1440px; margin: 0 auto;
  gap: 0;
}
.n-qm-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-size: 10px; letter-spacing: 3px;
  color: oklch(0.7 0.22 27); /* lime accent matching the design */
  background: rgba(var(--n-inset),0.6);
  border-right: 1px solid rgba(var(--n-surf),0.05);
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}
.n-qm-nav { display: flex; flex: 1; overflow-x: auto; }
.n-qm-item {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border-right: 1px solid rgba(var(--n-surf),0.04);
  color: rgba(var(--n-ink),0.8);
  transition: background 120ms, color 120ms;
}
.n-qm-item:hover { background: rgba(var(--n-surf),0.04); color: rgb(var(--n-ink)); }
.n-qm-item.open { background: rgba(var(--n-surf),0.06); color: rgb(var(--n-ink)); }
.n-qm-item.pinned { background: rgba(var(--n-inset),0.5); }
.n-qm-bar { width: 3px; height: 12px; border-radius: 2px; }
.n-qm-item-label { font-weight: 600; }
.n-qm-item-pin { font-size: 9px; padding: 2px 5px; border-radius: 3px; font-weight: 800; letter-spacing: 1px; }
.n-qm-caret { font-size: 9px; }
.n-qm-more {
  display: inline-flex; align-items: center;
  padding: 10px 14px;
  font-size: 10px; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.5);
  background: rgba(var(--n-inset),0.4);
  border-left: 1px solid rgba(var(--n-surf),0.05);
  white-space: nowrap;
}
.n-qm-more:hover { color: rgb(var(--n-ink)); }
/* Hide dropdown popup by default; reveal on hover via CSS (no JS needed) */
.n-qm-pop { display: none; }
.n-qm-item:hover .n-qm-pop,
.n-qm-item:focus-within .n-qm-pop { display: block; }
.n-qm-pop {
  position: absolute; top: 100%; left: 0;
  z-index: 50;
  background: rgba(var(--n-ground-rgb),0.97); backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--n-surf),0.1);
  border-radius: 0 0 12px 12px;
  border-top: 0;
  min-width: 280px; max-width: 480px;
  padding: 10px;
  box-shadow: 0 16px 32px rgba(var(--n-shadow),0.5);
}
/* Cycling accent colors for the left bar of each quick-menu group */
.n-qm-bar-lime   { background: oklch(0.7 0.22 27); }
.n-qm-bar-cyan   { background: oklch(0.6 0.18 254); }
.n-qm-bar-pink   { background: oklch(0.72 0.25 355); }
.n-qm-bar-violet { background: oklch(0.68 0.22 300); }
.n-qm-bar-amber  { background: oklch(0.82 0.18 75); }
.n-qm-pop-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px;
  max-height: 320px; overflow-y: auto;
}
.n-qm-pop-link {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px; border-radius: 6px;
  font-size: 12px; color: rgba(var(--n-ink),0.85);
  text-decoration: none;
}
.n-qm-pop-link:hover { background: rgba(var(--n-surf),0.06); color: rgb(var(--n-ink)); }
.n-qm-pop-link.f { background: rgba(var(--n-surf),0.04); font-weight: 600; }
.n-qm-pop-label { font-weight: 500; }
.n-qm-pop-link.f .n-qm-pop-label { font-weight: 700; }
.n-qm-pop-sub { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }

/* ================================================================= */
/*   RESULTS PAGE v2                                                 */
/* ================================================================= */

/* Featured result card */
.nr-feat {
  position: relative;
  background: rgba(var(--n-panel),0.7);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 20px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 20px;
  overflow: hidden;
}
.nr-feat-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0.6; }
.nr-feat > * { position: relative; z-index: 1; }
.nr-feat-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.nr-feat-series { font-size: 11px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); text-transform: uppercase; }
.nr-feat-body {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(var(--n-surf),0.06);
  border-bottom: 1px solid rgba(var(--n-surf),0.06);
}
@media (max-width: 800px) { .nr-feat-body { grid-template-columns: 1fr; } }
.nr-feat-team { display: flex; align-items: center; gap: 16px; }
.nr-feat-team.right { justify-content: flex-end; flex-direction: row-reverse; text-align: right; }
.nr-feat-team.lost { opacity: 0.55; }
.nr-feat-team-jersey {
  width: 88px; height: 88px;
  border-radius: 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800; font-size: 26px; letter-spacing: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nr-feat-team-info { display: flex; flex-direction: column; gap: 4px; }
.nr-feat-team-name { font-size: 14px; font-weight: 600; }
.nr-feat-team-score { font-size: clamp(36px, 4vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.nr-feat-team-ov { font-size: 11px; color: rgba(var(--n-ink),0.5); }
.nr-feat-team-tag { display: inline-block; align-self: flex-start; font-size: 9px; letter-spacing: 2px; padding: 3px 6px; border-radius: 4px; font-weight: 800; margin-top: 4px; }
.nr-feat-team.right .nr-feat-team-tag { align-self: flex-end; }
.nr-feat-vs { text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.nr-feat-margin { font-size: clamp(48px, 6vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; }
.nr-feat-margin span { font-size: 0.35em; color: rgba(var(--n-ink),0.5); margin-left: 6px; font-weight: 400; letter-spacing: 0; }
.nr-feat-result { font-size: 11px; letter-spacing: 2px; color: rgba(var(--n-ink),0.7); }
.nr-feat-date { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.4); margin-top: 4px; }

.nr-feat-insight {
  background: linear-gradient(135deg, rgba(var(--n-surf),0.04), rgba(var(--n-inset),0.2));
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; gap: 14px; align-items: flex-start;
}
.nr-feat-insight-tag { font-size: 9px; letter-spacing: 2px; flex-shrink: 0; padding-top: 2px; display: inline-flex; align-items: center; gap: 6px; }
.nr-feat-insight-body { font-size: 13px; line-height: 1.5; color: rgba(var(--n-ink),0.9); }

.nr-feat-perf {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 800px) { .nr-feat-perf { grid-template-columns: 1fr; } }
.nr-perf {
  padding: 12px 14px;
  background: rgba(var(--n-inset),0.25);
  border: 1px solid rgba(var(--n-surf),0.05);
  border-radius: 10px;
}
.nr-perf-label { font-size: 9px; letter-spacing: 2px; margin-bottom: 10px; }
.nr-perf-row { display: flex; align-items: center; gap: 12px; }
.nr-perf-info { flex: 1; min-width: 0; }
.nr-perf-name { font-size: 13px; font-weight: 600; color: rgb(var(--n-ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-perf-line { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; margin-top: 2px; }

/* Jersey number badge — used everywhere */
.jersey {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  letter-spacing: -1px;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -4px rgba(var(--n-shadow),0.5), inset 0 0 0 2px rgba(var(--n-shadow),0.15);
}

/* Compact result cards */
.nr-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px) { .nr-grid { grid-template-columns: 1fr; } }
.nr-card2 {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 14px;
  color: inherit; text-decoration: none;
  transition: border-color 150ms, transform 150ms;
}
.nr-card2:hover { border-color: rgba(var(--n-surf),0.14); transform: translateY(-2px); }
.nr-card2-top { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed rgba(var(--n-surf),0.06); }
.nr-card2-date {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 10px;
  background: rgba(var(--n-inset),0.3);
  border-radius: 8px;
  min-width: 52px;
}
.nr-card2-d { font-size: 22px; font-weight: 800; line-height: 1; }
.nr-card2-day { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); margin-top: 2px; }
.nr-card2-meta { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.nr-card2-meta > div { min-width: 0; flex: 1; }
.nr-card2-fmt { font-size: 10px; letter-spacing: 2px; padding: 3px 6px; background: rgba(var(--n-surf),0.06); border-radius: 4px; }
.nr-card2-series { font-size: 12px; font-weight: 600; color: rgb(var(--n-ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-card2-venue { font-size: 10px; letter-spacing: 0.5px; color: rgba(var(--n-ink),0.5); margin-top: 2px; }
.nr-card2-teams { display: flex; flex-direction: column; gap: 6px; }
.nr-card2-team { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 10px; }
.nr-card2-team.won { color: rgb(var(--n-ink)); }
.nr-card2-team:not(.won) { opacity: 0.55; }
.nr-card2-team-badge {
  width: 36px; height: 30px; border-radius: 6px;
  font-weight: 800; font-size: 11px; letter-spacing: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
}
.nr-card2-team-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-card2-team-score { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; }
.nr-card2-team-ov { font-size: 10px; color: rgba(var(--n-ink),0.4); }
.nr-card2-result {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 1px;
  padding: 6px 10px;
  background: rgba(var(--n-inset),0.3);
  border-radius: 6px;
  align-self: flex-start;
}
.nr-card2-result-tag { width: 18px; height: 18px; border-radius: 4px; font-weight: 800; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.nr-card2-mom {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(var(--n-inset),0.25);
  border: 1px solid rgba(255,180,71,0.15);
  border-radius: 8px;
}
.nr-card2-mom-info { min-width: 0; }
.nr-card2-mom-label { font-size: 9px; letter-spacing: 1.5px; }
.nr-card2-mom-name { font-size: 12px; font-weight: 600; color: rgb(var(--n-ink)); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-card2-mom-line { font-size: 14px; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap; }
.nr-card2-insight {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px;
  background: rgba(var(--n-surf),0.02);
  border-left: 2px solid oklch(0.6 0.18 254 / 0.5);
  border-radius: 0 6px 6px 0;
  font-size: 11px; line-height: 1.5;
  color: rgba(var(--n-ink),0.7);
}
.nr-card2-insight-tag { font-size: 12px; color: oklch(0.6 0.18 254); flex-shrink: 0; }

.mobile-view .nr-feat-body { grid-template-columns: 1fr; }
.mobile-view .nr-feat-perf { grid-template-columns: 1fr; }
.mobile-view .nr-grid { grid-template-columns: 1fr; }
.mobile-view .n-qm-inner { flex-direction: column; }
.mobile-view .n-qm-label { border-right: 0; border-bottom: 1px solid rgba(var(--n-surf),0.05); }
.mobile-view .n-qm-more { display: none; }


/* ================================================================= */
/*   PLAYER HERO v2 — jersey-led                                     */
/* ================================================================= */
.np-hero2 {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 340px 1fr;
  gap: 32px; align-items: stretch;
}
@media (max-width: 800px) { .np-hero2 { grid-template-columns: 1fr; } }

.np-hero2-jersey {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 20px;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 18px 18px 22px;
  box-shadow:
    0 24px 60px -20px rgba(var(--n-shadow),0.6),
    inset 0 0 0 1px rgba(var(--n-shadow),0.2),
    inset 0 1px 0 rgba(var(--n-surf),0.3);
}
.np-jersey-shoulder {
  position: absolute; top: 0; left: 50%;
  width: 38%; height: 18%;
  transform: translateX(-50%);
  background: inherit;
  background-color: rgba(var(--n-shadow),0.12);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.np-jersey-stripes {
  position: absolute; left: 0; right: 0;
  top: 18%; bottom: 30%;
  opacity: 0.4;
}
.np-jersey-name {
  position: relative; z-index: 2;
  margin-top: 22%;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  color: rgba(var(--n-shadow),0.7);
  text-transform: uppercase;
}
.np-jersey-num {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(140px, 18vw, 220px);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -8px;
  text-shadow: 0 8px 24px rgba(var(--n-shadow),0.15);
}
.np-jersey-team {
  position: relative; z-index: 2;
  font-size: 11px;
  letter-spacing: 3px;
  text-align: center;
  color: rgba(var(--n-shadow),0.55);
  font-weight: 700;
  margin-top: -8px;
}

.np-hero2-meta { display: flex; flex-direction: column; gap: 16px; justify-content: center; }


/* ================================================================= */
/*   DENSITY PASS — tighten everything, keep hierarchy               */
/* ================================================================= */

/* page chrome */
.n-page { padding: 20px 24px 40px; }
.n-section-head { margin-bottom: 10px; gap: 12px; }
.n-section-head h2 { font-size: 22px; letter-spacing: -0.02em; }
.n-section-head.tight { margin-bottom: 6px; }
.n-tool { padding: 5px 8px; font-size: 9px; }
.n-link-sm { font-size: 10px; }

/* header */
.n-header-top { padding: 10px 24px; gap: 18px; }
.n-logo-text { font-size: 16px; }
.n-nav-item { padding: 6px 10px; font-size: 12px; }
/* Nine nav items plus a fixed-width search no longer fit in the ~1000-1100px
   band, and the search box would not shrink because its input and the ⌘K badge
   set a min-content floor. Let it give way to the nav instead of overflowing. */
.n-header-right { min-width: 0; }
.n-search { padding: 6px 10px; width: 240px; min-width: 0; flex-shrink: 1; }
.n-search input { font-size: 12px; min-width: 0; }
.n-search-kbd { flex-shrink: 0; }
.n-btn-ghost { padding: 6px 12px; font-size: 12px; }
.n-btn-primary { padding: 6px 12px; font-size: 12px; }
.n-qm-label, .n-qm-item, .n-qm-more { padding: 8px 12px; font-size: 11px; }
.n-qm-label { font-size: 9px; }

/* match hub */
.n-mh { margin-bottom: 28px; }
.n-mh-grid { gap: 12px; grid-template-columns: 300px 1fr; }
.n-mh-list { max-height: 540px; gap: 6px; }
.n-mh-card { padding: 10px; gap: 6px; }
.n-mh-card-series { font-size: 9px; }
.n-mh-card-fmt { font-size: 8px; padding: 1px 4px; }
.n-mh-team { gap: 6px; }
.n-mh-team-badge { width: 26px; height: 22px; font-size: 9px; }
.n-mh-team-name { font-size: 12px; }
.n-mh-team-score { font-size: 12px; }
.n-mh-card-note { font-size: 9px; padding-top: 3px; }
.n-mh-tab { padding: 5px 10px; font-size: 10px; }

.n-mh-feat { padding: 18px; gap: 12px; border-radius: 16px; }
.n-mh-feat-scoreline { padding: 10px 0; gap: 16px; }
.n-mh-feat-badge { width: 40px; height: 40px; font-size: 12px; border-radius: 8px; }
.n-mh-feat-team-name { font-size: 12px; }
.n-mh-feat-team-score { font-size: clamp(28px, 3.5vw, 44px); }
.n-mh-feat-team-ov { font-size: 9px; }
.n-mh-feat-vs-line { height: 18px; }
.n-mh-feat-note { font-size: 10px; }
.n-mh-feat-series { font-size: 9px; letter-spacing: 1.5px; }
.n-mh-ai { padding: 10px 12px; gap: 10px; border-radius: 10px; }
.n-mh-ai-body { font-size: 12px; line-height: 1.45; }
.n-mh-ai-tag { font-size: 8px; }

.n-mh-ins-grid { gap: 8px; }
.n-ins-tile { padding: 10px; min-height: 84px; gap: 3px; border-radius: 8px; }
.n-ins-kicker { font-size: 8px; }
.n-ins-big { font-size: 22px; }
.n-ins-big-sm { font-size: 11px; }
.n-ins-mid { font-size: 13px; }
.n-ins-sub { font-size: 11px; line-height: 1.35; }
.n-ins-foot { font-size: 8px; }
.n-ins-phase { padding: 6px 8px; }
.n-ins-phase-v { font-size: 18px; margin-top: 2px; }
.n-ins-h2h-short { font-size: 18px; }
.n-ins-h2h-w { font-size: 22px; }
.n-form-dot { width: 16px; height: 16px; font-size: 8px; }
.n-vn-cell { padding: 5px 7px; }
.n-vn-v { font-size: 15px; }
.n-pg-val { font-size: 20px; margin-top: 4px; }

/* stats domain */
.n-sd { margin-bottom: 28px; }
.n-sd-fmt-tab { padding: 5px 12px; font-size: 10px; }
.n-sd-ai-band { padding: 10px; gap: 10px; border-radius: 12px; margin-bottom: 12px; grid-template-columns: 110px 1fr; }
.n-sd-ai-label { font-size: 9px; padding-top: 4px; }
.n-sd-ai-card { padding: 10px; gap: 3px; border-radius: 8px; }
.n-sd-ai-h { font-size: 13px; }
.n-sd-ai-b { font-size: 10px; line-height: 1.4; }
.n-sd-totals { gap: 6px; margin-bottom: 12px; }
.n-sd-total-card { padding: 10px; gap: 3px; border-radius: 8px; }
.n-sd-total-label { font-size: 8px; }
.n-sd-total-value { font-size: 24px; }
.n-sd-total-foot { font-size: 7px; gap: 4px; margin-top: 2px; }
.n-sd-lbgrid { gap: 10px; margin-bottom: 12px; }
.n-sd-lb-card { padding: 12px; border-radius: 10px; }
.n-sd-lb-card-head { margin-bottom: 8px; padding-bottom: 6px; }
.n-sd-lb-card-title { font-size: 13px; }
.n-sd-lb-card-row { padding: 4px 2px; font-size: 11px; gap: 6px; }
.n-sd-lb-card-rank { font-size: 13px; }
.n-sd-lb-card-v { font-size: 14px; }
.n-sd-mr-grid { gap: 10px; }
.n-sd-tile { padding: 12px; border-radius: 10px; }
.n-sd-kicker { margin-bottom: 8px; padding-bottom: 6px; font-size: 9px; }
.n-sd-ms-list { gap: 8px; }
.n-sd-ms-head { margin-bottom: 3px; }
.n-sd-ms-player { font-size: 12px; }
.n-sd-ms-goal { font-size: 9px; }
.n-sd-ms-bar { height: 5px; }
.n-sd-ms-note { font-size: 8px; margin-top: 3px; }
.n-sd-rec-row { padding: 7px 10px; gap: 8px; border-radius: 8px; }
.n-sd-rec-badge { font-size: 8px; padding: 3px 5px; }
.n-sd-rec-title { font-size: 12px; }
.n-sd-rec-meta { font-size: 9px; }
.n-sd-rec-when { font-size: 8px; }

/* stories */
.n-stories { margin-bottom: 28px; }
.n-stories-grid { gap: 12px; }
.n-story-big-body { padding: 14px; }
.n-story-big-body h3 { font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 6px; }
.n-story-meta { font-size: 10px; gap: 6px; }
.n-story-row { padding: 8px; gap: 10px; grid-template-columns: 92px 1fr; }
.n-story-row-body h4 { font-size: 13px; margin-bottom: 4px; }
.n-stories-col { gap: 10px; }
.n-tool.on, .n-tool { font-size: 9px; padding: 4px 8px; }

/* fixtures strip */
.n-rf { margin-bottom: 28px; }
.n-fix-strip { gap: 8px; }
.n-fix-card { padding: 10px; gap: 4px; border-radius: 10px; }
.n-fix-when { font-size: 9px; }
.n-fix-teams-big { font-size: 16px; gap: 6px; }
.n-fix-vs { font-size: 10px; }
.n-fix-meta { font-size: 10px; }
.n-fix-fmt-pill { font-size: 8px; }

/* footer */
.n-footer { padding: 28px 24px 18px; margin-top: 24px; }
.n-footer-top { gap: 22px; }
.n-footer-h { font-size: 9px; margin-bottom: 2px; }
.n-footer-col a { font-size: 12px; }
.n-footer-bottom { margin-top: 22px; padding-top: 14px; }

/* ===== PLAYER PAGE ============================================== */
.np { gap: 22px; }
.np-hero2 { grid-template-columns: 240px 1fr; gap: 24px; }
.np-hero2-jersey { padding: 14px 14px 16px; border-radius: 16px; }
.np-jersey-name { font-size: 14px; margin-top: 20%; }
.np-jersey-num { font-size: clamp(96px, 13vw, 160px); letter-spacing: -6px; }
.np-jersey-team { font-size: 10px; margin-top: -6px; }
.np-hero2-meta { gap: 12px; }
.np-hero-chips { gap: 5px; }
.np-hero-name { font-size: clamp(34px, 5vw, 56px); line-height: 0.92; }
.np-hero-sub { font-size: 10px; }
.np-hero-rank { gap: 6px; }
.np-rank-pill { padding: 8px 12px; min-width: 92px; }
.np-rank-r { font-size: 22px; }
.np-rank-k { font-size: 8px; }
.np-rank-rt { font-size: 8px; }
.np-hero-actions { gap: 5px; }

.np-career-grid { gap: 6px; }
.np-cs { padding: 10px 12px; border-radius: 8px; }
.np-cs-k { font-size: 8px; }
.np-cs-v { font-size: 24px; margin-top: 2px; }
.np-cs.big .np-cs-v { font-size: 38px; }

.np-year-grid { gap: 10px; }
.np-year-chart { padding: 12px; border-radius: 10px; }
.np-year-table { padding: 4px 10px; border-radius: 10px; }
.np-year-head, .np-year-row { padding: 5px 0; font-size: 11px; }
.np-year-head { font-size: 8px; }
.np-year-y { font-size: 12px; }

.np-form-grid { gap: 8px; }
.np-form-card { padding: 10px; border-radius: 8px; }
.np-form-top { margin-bottom: 4px; }
.np-form-fmt { font-size: 8px; }
.np-form-vs { font-size: 10px; }
.np-form-line { font-size: 22px; }
.np-form-foot { font-size: 9px; margin-top: 6px; }

.np-top-row { padding: 9px 12px; gap: 10px; grid-template-columns: 64px 50px 1fr auto; border-radius: 8px; }
.np-top-runs { font-size: 28px; }
.np-top-balls { font-size: 12px; }
.np-top-meta { font-size: 12px; gap: 6px; }
.np-top-fmt { font-size: 8px; }
.np-top-date { font-size: 9px; }

.np-splits-grid { gap: 10px; }
.np-split-card { padding: 12px; border-radius: 10px; }
.np-split-list { margin-top: 8px; gap: 2px; }
.np-split-row { padding: 5px 0; gap: 8px; }
.np-split-v { font-size: 15px; }
.np-split-meta { font-size: 9px; }
.np-split-bar { height: 5px; }

.np-ms-grid { gap: 8px; }
.np-ms-tile { padding: 11px; border-radius: 10px; }
.np-ms-goal { font-size: 8px; min-height: 22px; margin-bottom: 6px; }
.np-ms-bar { height: 5px; margin-bottom: 5px; }
.np-ms-pct { font-size: 20px; }
.np-ms-pct span { font-size: 10px; }
.np-ms-note { font-size: 8px; margin-top: 2px; }

/* ===== SCHEDULE + RESULTS ====================================== */
.ns-page { gap: 20px; }
.ns-head h1 { font-size: clamp(32px, 5vw, 48px); }
.ns-sub { font-size: 10px; }
.ns-active-head { margin-bottom: 8px; }
.ns-active-rail { gap: 8px; }
.ns-active-card { padding: 12px; gap: 4px; border-radius: 12px; }
.ns-active-fmt { font-size: 9px; }
.ns-active-name { font-size: 15px; }
.ns-active-meta { font-size: 10px; }
.ns-active-foot { font-size: 8px; margin-top: 4px; padding-top: 6px; }

.ns-month-head { font-size: 10px; padding-bottom: 6px; margin-bottom: 10px; }
.ns-days { gap: 8px; }
.ns-day { padding: 10px; gap: 12px; grid-template-columns: 64px 1fr; border-radius: 10px; }
.ns-day-num { font-size: 32px; }
.ns-day-name { font-size: 9px; }
.ns-day-tag { font-size: 7px; margin-top: 2px; padding: 1px 3px; }
.ns-match { padding: 8px 12px; gap: 12px; grid-template-columns: 90px 1fr auto; border-radius: 6px; }
.ns-match-time { font-size: 9px; }
.ns-match-fmt { font-size: 8px; }
.ns-match-t { font-size: 14px; }
.ns-match-meta { font-size: 9px; margin-top: 2px; }

.nr-feat { padding: 18px; gap: 14px; border-radius: 16px; }
.nr-feat-body { padding: 12px 0; gap: 18px; }
.nr-feat-team { gap: 12px; }
.nr-feat-team-jersey { width: 64px; height: 64px; font-size: 20px; border-radius: 12px; }
.nr-feat-team-name { font-size: 12px; }
.nr-feat-team-score { font-size: clamp(28px, 3vw, 42px); }
.nr-feat-team-tag { font-size: 8px; padding: 2px 5px; }
.nr-feat-margin { font-size: clamp(38px, 5vw, 56px); }
.nr-feat-result { font-size: 10px; }
.nr-feat-date { font-size: 8px; }
.nr-feat-insight { padding: 10px 12px; gap: 10px; border-radius: 10px; }
.nr-feat-insight-body { font-size: 12px; }
.nr-feat-perf { gap: 8px; }
.nr-perf { padding: 9px 11px; border-radius: 8px; }
.nr-perf-label { font-size: 8px; margin-bottom: 6px; }
.nr-perf-name { font-size: 12px; }
.nr-perf-line { font-size: 17px; }
.jersey { border-radius: 8px; }

.nr-grid { gap: 8px; }
.nr-card2 { padding: 12px; gap: 7px; border-radius: 10px; }
.nr-card2-top { padding-bottom: 6px; gap: 10px; }
.nr-card2-date { padding: 4px 8px; min-width: 46px; }
.nr-card2-d { font-size: 18px; }
.nr-card2-day { font-size: 8px; }
.nr-card2-fmt { font-size: 9px; padding: 2px 5px; }
.nr-card2-series { font-size: 11px; }
.nr-card2-venue { font-size: 9px; }
.nr-card2-team { gap: 8px; grid-template-columns: 30px 1fr auto auto; }
.nr-card2-team-badge { width: 30px; height: 24px; font-size: 10px; border-radius: 5px; }
.nr-card2-team-name { font-size: 12px; }
.nr-card2-team-score { font-size: 15px; }
.nr-card2-team-ov { font-size: 9px; }
.nr-card2-result { padding: 4px 8px; font-size: 10px; }
.nr-card2-result-tag { width: 16px; height: 16px; font-size: 10px; }
.nr-card2-mom { padding: 6px 8px; gap: 8px; border-radius: 6px; }
.nr-card2-mom-label { font-size: 8px; }
.nr-card2-mom-name { font-size: 11px; }
.nr-card2-mom-line { font-size: 13px; }
.nr-card2-insight { padding: 6px 8px; font-size: 10px; line-height: 1.4; gap: 6px; }


/* ================================================================= */
/*   DENSITY PASS v2 — go further on heros + repeating blocks       */
/* ================================================================= */

/* Page chrome — tighter still */
.n-page { padding: 14px 22px 32px; }
.n-section-head { margin-bottom: 8px; }
.n-section-head h2 { font-size: 18px; letter-spacing: -0.01em; }

/* ---- MATCH HUB ---- */
.n-mh { margin-bottom: 20px; }
.n-mh-grid { grid-template-columns: 280px 1fr; gap: 10px; }
.n-mh-list { max-height: 470px; }
.n-mh-card { padding: 9px; gap: 5px; }
.n-mh-feat { padding: 14px; gap: 10px; border-radius: 14px; }
.n-mh-feat-scoreline { padding: 8px 0; gap: 12px; }
.n-mh-feat-badge { width: 36px; height: 36px; font-size: 11px; }
.n-mh-feat-team-score { font-size: clamp(24px, 3vw, 36px); }
.n-mh-feat-team-name { font-size: 11px; }
.n-mh-feat-vs-line { height: 14px; }
.n-mh-feat-note { font-size: 9px; }
.n-mh-ai { padding: 8px 11px; border-radius: 8px; }
.n-mh-ai-body { font-size: 11px; line-height: 1.4; }
.n-mh-ins-grid { gap: 6px; }
.n-ins-tile { padding: 8px 10px; min-height: 72px; }
.n-ins-big { font-size: 18px; }
.n-ins-mid { font-size: 12px; }
.n-ins-sub { font-size: 10px; }
.n-ins-phase { padding: 5px 7px; }
.n-ins-phase-v { font-size: 16px; }
.n-ins-h2h-w { font-size: 18px; }
.n-ins-h2h-short { font-size: 16px; }

/* ---- STATS DOMAIN ---- */
.n-sd { margin-bottom: 20px; }
.n-sd-ai-band { padding: 8px; gap: 8px; margin-bottom: 8px; grid-template-columns: 96px 1fr; }
.n-sd-ai-card { padding: 8px; }
.n-sd-ai-h { font-size: 12px; }
.n-sd-ai-b { font-size: 10px; line-height: 1.35; }
.n-sd-totals { gap: 4px; margin-bottom: 8px; }
.n-sd-total-card { padding: 7px 9px; gap: 2px; border-radius: 7px; }
.n-sd-total-label { font-size: 7px; letter-spacing: 1.5px; }
.n-sd-total-value { font-size: 19px; }
.n-sd-total-foot { font-size: 6.5px; gap: 3px; margin-top: 1px; }
.n-sd-lbgrid { gap: 8px; margin-bottom: 8px; }
.n-sd-lb-card { padding: 10px; }
.n-sd-lb-card-head { margin-bottom: 6px; padding-bottom: 5px; }
.n-sd-lb-card-title { font-size: 12px; }
.n-sd-lb-card-row { padding: 3px 2px; font-size: 10px; }
.n-sd-lb-card-rank { font-size: 12px; }
.n-sd-lb-card-v { font-size: 13px; }
.n-sd-mr-grid { gap: 8px; }
.n-sd-tile { padding: 10px; }
.n-sd-kicker { margin-bottom: 6px; padding-bottom: 5px; font-size: 8px; }
.n-sd-ms-list { gap: 6px; }
.n-sd-ms-player { font-size: 11px; }
.n-sd-ms-goal { font-size: 8px; }
.n-sd-ms-bar { height: 4px; }
.n-sd-ms-note { font-size: 7px; }
.n-sd-rec-row { padding: 5px 8px; gap: 7px; }
.n-sd-rec-badge { font-size: 7px; padding: 2px 4px; }
.n-sd-rec-title { font-size: 11px; }
.n-sd-rec-meta { font-size: 8px; }
.n-sd-rec-when { font-size: 7px; }

/* ---- STORIES ---- */
.n-stories { margin-bottom: 20px; }
.n-stories-grid { gap: 10px; }
.n-story-big-img { aspect-ratio: 21/9; }
.n-story-big-body { padding: 10px 12px; }
.n-story-big-body h3 { font-size: clamp(15px, 1.5vw, 18px); margin-bottom: 4px; }
.n-story-meta { font-size: 9px; }
.n-story-row { padding: 6px; gap: 8px; grid-template-columns: 72px 1fr; }
.n-story-row-img { padding: 5px; }
.n-story-row-body h4 { font-size: 12px; }
.n-story-meta.sm { font-size: 9px; }
.n-stories-col { gap: 6px; }

/* ---- FIXTURES STRIP ---- */
.n-rf { margin-bottom: 20px; }
.n-fix-strip { gap: 6px; }
.n-fix-card { padding: 8px 10px; gap: 3px; border-radius: 8px; }
.n-fix-when { font-size: 8px; }
.n-fix-teams-big { font-size: 14px; gap: 5px; }
.n-fix-vs { font-size: 9px; }
.n-fix-meta { font-size: 9px; }

/* ---- FOOTER ---- */
.n-footer { padding: 20px 22px 14px; margin-top: 16px; }
.n-footer-top { gap: 18px; }
.n-footer-col a { font-size: 11px; }
.n-footer-bottom { margin-top: 16px; padding-top: 10px; }

/* ---- PLAYER PAGE ---- */
.np { gap: 16px; }
.np-hero2 { grid-template-columns: 200px 1fr; gap: 18px; }
.np-hero2-jersey { padding: 10px 10px 12px; aspect-ratio: 5/6; border-radius: 14px; }
.np-jersey-name { font-size: 12px; margin-top: 14%; }
.np-jersey-num { font-size: clamp(80px, 11vw, 130px); letter-spacing: -5px; }
.np-jersey-team { font-size: 9px; margin-top: -4px; }
.np-hero2-meta { gap: 10px; }
.np-hero-name { font-size: clamp(28px, 4vw, 44px); }
.np-hero-sub { font-size: 9px; }
.np-rank-pill { padding: 6px 10px; min-width: 80px; }
.np-rank-r { font-size: 18px; }
.np-rank-k { font-size: 7px; }
.np-rank-rt { font-size: 7px; }

.np-career-grid { grid-template-columns: repeat(9, 1fr); gap: 5px; }
@media (max-width: 1100px) { .np-career-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 600px)  { .np-career-grid { grid-template-columns: repeat(3, 1fr); } }
.np-cs { padding: 8px 9px; }
.np-cs.big { grid-column: span 2; }
.np-cs-k { font-size: 7px; letter-spacing: 1.5px; }
.np-cs-v { font-size: 19px; }
.np-cs.big .np-cs-v { font-size: 28px; }

.np-year-grid { gap: 8px; grid-template-columns: 1.6fr 1fr; }
.np-year-chart { padding: 10px; }
.np-year-table { padding: 4px 8px; }
.np-year-head, .np-year-row { padding: 4px 0; font-size: 10px; }
.np-year-head { font-size: 7px; }
.np-year-y { font-size: 11px; }

.np-form-grid { gap: 6px; }
.np-form-card { padding: 8px; border-radius: 7px; }
.np-form-top { margin-bottom: 3px; }
.np-form-vs { font-size: 9px; }
.np-form-line { font-size: 18px; }
.np-form-foot { font-size: 8px; margin-top: 4px; }

.np-top-list { gap: 3px; }
.np-top-row { padding: 7px 10px; gap: 8px; grid-template-columns: 50px 42px 1fr auto; }
.np-top-runs { font-size: 22px; }
.np-top-balls { font-size: 11px; }
.np-top-meta { font-size: 11px; gap: 5px; }
.np-top-date { font-size: 8px; }
.np-top-fmt { font-size: 7px; }

.np-splits-grid { gap: 8px; }
.np-split-card { padding: 10px; }
.np-split-list { margin-top: 6px; }
.np-split-row { padding: 4px 0; gap: 7px; }
.np-split-v { font-size: 13px; }
.np-split-meta { font-size: 8px; }

.np-ms-grid { gap: 6px; }
.np-ms-tile { padding: 9px; }
.np-ms-goal { font-size: 7px; min-height: 18px; margin-bottom: 5px; }
.np-ms-bar { height: 4px; margin-bottom: 4px; }
.np-ms-pct { font-size: 17px; }
.np-ms-pct span { font-size: 9px; }
.np-ms-note { font-size: 7px; }

/* ---- SCHEDULE / RESULTS ---- */
.ns-page { gap: 14px; }
.ns-head h1 { font-size: clamp(24px, 4vw, 36px); margin-bottom: 2px; }
.ns-sub { font-size: 9px; }
.ns-active-rail { gap: 6px; }
.ns-active-card { padding: 10px; border-radius: 10px; }
.ns-active-name { font-size: 13px; }
.ns-active-meta { font-size: 9px; }
.ns-active-foot { font-size: 7px; padding-top: 5px; }
.ns-month-head { font-size: 9px; padding-bottom: 4px; margin-bottom: 6px; }
.ns-days { gap: 5px; }
.ns-day { padding: 7px 10px; gap: 10px; grid-template-columns: 52px 1fr; border-radius: 8px; }
.ns-day-num { font-size: 26px; }
.ns-day-name { font-size: 8px; }
.ns-day-tag { font-size: 6px; padding: 1px 3px; }
.ns-day-matches { gap: 3px; }
.ns-match { padding: 6px 10px; gap: 10px; grid-template-columns: 78px 1fr auto; }
.ns-match-time { font-size: 8px; }
.ns-match-fmt { font-size: 7px; padding: 1px 4px; }
.ns-match-t { font-size: 12px; }
.ns-match-meta { font-size: 8px; margin-top: 1px; }
.ns-marquee-tag { font-size: 8px; padding: 2px 6px; }

.nr-feat { padding: 14px; gap: 10px; }
.nr-feat-body { padding: 10px 0; gap: 14px; }
.nr-feat-team-jersey { width: 56px; height: 56px; font-size: 16px; border-radius: 10px; }
.nr-feat-team-name { font-size: 11px; }
.nr-feat-team-score { font-size: clamp(22px, 2.5vw, 32px); }
.nr-feat-margin { font-size: clamp(32px, 4vw, 44px); }
.nr-feat-result { font-size: 9px; }
.nr-feat-date { font-size: 7px; }
.nr-feat-insight { padding: 8px 10px; }
.nr-feat-insight-body { font-size: 11px; line-height: 1.4; }
.nr-feat-perf { gap: 6px; }
.nr-perf { padding: 7px 9px; }
.nr-perf-label { font-size: 7px; margin-bottom: 4px; }
.nr-perf-name { font-size: 11px; }
.nr-perf-line { font-size: 14px; }

.nr-grid { gap: 6px; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) { .nr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .nr-grid { grid-template-columns: 1fr; } }
.nr-card2 { padding: 10px; gap: 6px; }
.nr-card2-top { padding-bottom: 5px; gap: 8px; }
.nr-card2-date { padding: 3px 6px; min-width: 40px; }
.nr-card2-d { font-size: 15px; }
.nr-card2-day { font-size: 7px; }
.nr-card2-fmt { font-size: 8px; }
.nr-card2-series { font-size: 10px; }
.nr-card2-venue { font-size: 8px; }
.nr-card2-team-badge { width: 26px; height: 22px; font-size: 9px; border-radius: 4px; }
.nr-card2-team-name { font-size: 11px; }
.nr-card2-team-score { font-size: 13px; }
.nr-card2-team-ov { font-size: 8px; }
.nr-card2-result { padding: 3px 7px; font-size: 9px; }
.nr-card2-result-tag { width: 13px; height: 13px; font-size: 8px; }
.nr-card2-mom { padding: 5px 7px; gap: 7px; }
.nr-card2-mom-name { font-size: 10px; }
.nr-card2-mom-line { font-size: 12px; }
.nr-card2-insight { padding: 5px 7px; font-size: 9px; }


/* ================================================================= */
/*   LIST PAGES (Teams · Players · Stats) shared chrome              */
/* ================================================================= */
.nlist { display: flex; flex-direction: column; gap: 10px; }
.nlist-head h1 { font-size: clamp(24px, 4vw, 36px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 0 0 2px; }
.nlist-sub { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); text-transform: uppercase; }

/* Intel row */
.nlist-intel {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
@media (max-width: 900px) { .nlist-intel { grid-template-columns: 1fr 1fr; } }
.nlist-intel-tile {
  padding: 12px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  color: inherit; text-decoration: none;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 150ms, transform 150ms;
}
.nlist-intel-tile:hover { border-color: rgba(var(--n-surf),0.14); transform: translateY(-2px); }
.nlist-intel-tag { font-size: 9px; letter-spacing: 2px; display: inline-flex; align-items: center; gap: 6px; }
/* Intel-tile accents. These were inline hexes emitted from Players.aspx.cs
   (#a8e063, #67e8f9, #fbbf24, #c084fc) — bright pastels tuned for a black
   ground, which dropped to ~1.4:1 against a white card. Owned here now so each
   theme gets its own value; the light set keeps the hue and drops the lightness
   far enough to carry. */
.nlist-intel-tag.is-hot       { color: var(--n-tag-hot); }
.nlist-intel-tag.is-breakout  { color: var(--n-tag-breakout); }
.nlist-intel-tag.is-milestone { color: var(--n-tag-milestone); }
.nlist-intel-tag.is-rising    { color: var(--n-tag-rising); }
.nlist-intel-team { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.nlist-intel-player { display: flex; align-items: baseline; gap: 8px; }
.nlist-intel-pname { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; }
.nlist-intel-pteam { font-size: 11px; padding: 2px 5px; background: rgba(var(--n-surf),0.05); border-radius: 4px; }
.nlist-intel-note { font-size: 10px; color: rgba(var(--n-ink),0.65); line-height: 1.35; }

/* Teams grid */
.nlist-teams {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 1100px) { .nlist-teams { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .nlist-teams { grid-template-columns: 1fr; } }
/* Team profile sidebar classes — used by FillTeamInfo in team sub-pages */
.n-team-jersey-hero { width: 100px; margin: 0 auto 12px; display: block; }
.n-team-profile-name { font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 12px; letter-spacing: -0.02em; }
.n-team-rank-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }

.nlist-team {
  display: grid; grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 10px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: border-color 150ms, transform 150ms;
}
.nlist-team:hover { border-color: rgba(var(--n-surf),0.14); transform: translateY(-2px); }
.nlist-team-jersey {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 10px;
  overflow: hidden;
  color: rgb(var(--n-ink));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px;
}
.nlist-team-shoulder {
  position: absolute; top: 0; left: 50%;
  width: 38%; height: 18%;
  transform: translateX(-50%);
  background-color: rgba(var(--n-shadow),0.15);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.nlist-team-rank {
  font-size: 13px; font-weight: 800; line-height: 1;
  color: rgba(var(--n-surf),0.75); margin-top: 12px;
}
.nlist-team-short {
  font-size: 30px; font-weight: 800; line-height: 1;
  letter-spacing: -1px; color: var(--n-ground);
  text-shadow: 0 4px 12px rgba(var(--n-shadow),0.15);
}
.nlist-team-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nlist-team-name { font-size: 14px; font-weight: 700; }
.nlist-team-meta { font-size: 8px; letter-spacing: 1px; color: rgba(var(--n-ink),0.5); display: flex; gap: 4px; flex-wrap: wrap; }
.nlist-team-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 5px 0;
  border-top: 1px dashed rgba(var(--n-surf),0.06);
  border-bottom: 1px dashed rgba(var(--n-surf),0.06);
}
.nlist-team-stat { display: flex; flex-direction: column; gap: 1px; }
.nlist-team-stat > span:first-child { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.nlist-team-stat > span:last-child { font-size: 16px; font-weight: 800; }
.nlist-team-form { display: flex; flex-direction: column; gap: 2px; }
.nlist-team-form > span { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.nlist-team-pts { display: flex; gap: 8px; font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.6); }
.nlist-team-pts b { color: rgb(var(--n-ink)); font-weight: 700; }
.nlist-team-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.nlist-tag { font-size: 8px; padding: 2px 5px; border-radius: 3px; font-weight: 700; letter-spacing: 1px; }
/* Filled pill version of the same accent. Ground-coloured text works in both
   themes: dark ink on the pill when the page is dark, light ink when it is not. */
.nlist-tag.is-hot { background: var(--n-tag-hot); color: var(--n-ground); }

/* Players grid */
.nlist-players {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
@media (max-width: 1200px) { .nlist-players { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .nlist-players { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .nlist-players { grid-template-columns: 1fr; } }
/* Vertical list variant — used inside cards (n-fmt-card-body) */
.nlist-players-v { display: flex; flex-direction: column; gap: 6px; }
/* Role group divider inside player lists */
.n-role-divider { font-size: 8px; letter-spacing: 2px; color: rgba(var(--n-ink),0.4); text-transform: uppercase; padding: 8px 0 2px; font-family: 'JetBrains Mono', monospace; }
.nlist-player {
  display: grid; grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 8px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  color: inherit; text-decoration: none;
  transition: border-color 150ms, transform 150ms;
}
.nlist-player:hover { border-color: rgba(var(--n-surf),0.14); transform: translateY(-1px); }
.nlist-player.f { box-shadow: 0 0 0 1px rgba(var(--n-surf),0.06); }
.nlist-p-jersey {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 8px;
  overflow: hidden;
  color: rgb(var(--n-ink));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px;
}
.nlist-p-num {
  font-size: 32px; font-weight: 800; line-height: 1;
  letter-spacing: -1.5px;
  margin-top: 10px;
  text-shadow: 0 2px 8px rgba(var(--n-shadow),0.15);
}
.nlist-p-team { font-size: 8px; letter-spacing: 2px; color: rgba(var(--n-surf),0.7); font-weight: 700; }
.nlist-p-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nlist-p-top { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.nlist-p-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.3px; }
.nlist-p-role { font-size: 7px; letter-spacing: 1.5px; padding: 1px 4px; border-radius: 3px; background: rgba(var(--n-surf),0.08); }
.nlist-p-recent { display: flex; align-items: center; gap: 6px; }
.nlist-p-fmt { font-size: 7px; letter-spacing: 1.5px; padding: 1px 4px; background: rgba(var(--n-surf),0.06); border-radius: 3px; color: rgba(var(--n-ink),0.7); }
.nlist-p-line { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.nlist-p-rating { display: flex; align-items: baseline; gap: 6px; font-size: 11px; }
.nlist-p-rating > span:first-child { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
/* Compact variant — used on the series squad page where the 2-col layout makes
   the default tall portrait-jersey cards feel too airy. Shrinks the jersey to a
   small square badge and tightens gaps/padding so rows pack densely. */
.nlist-compact { gap: 3px; }
.nlist-compact .nlist-player { grid-template-columns: 30px 1fr; gap: 9px; padding: 4px 10px; align-items: center; }
.nlist-compact .nlist-p-jersey { aspect-ratio: 1 / 1; width: 30px; border-radius: 6px; padding: 0; }
.nlist-compact .nlist-p-num { font-size: 12px; margin-top: 0; letter-spacing: -0.5px; }
.nlist-compact .nlist-p-body { gap: 0; }
.nlist-compact .n-role-divider { padding: 5px 0 1px; }

/* Series squad card header — solid team-colour jersey badge + team name + a
   player-count pill, sitting on the translucent team tint (bg-{short}-stats).
   A team-tinted bottom hairline anchors the colour without a heavy solid band. */
.n-squad-head {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(var(--n-surf),0.08);
}
.n-squad-badge {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 12px;
  letter-spacing: -0.5px; color: var(--n-ground);
  box-shadow: 0 2px 8px rgba(var(--n-shadow),0.25), inset 0 1px 0 rgba(var(--n-surf),0.18);
}
.n-squad-name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 16px;
  letter-spacing: -0.3px; color: rgb(var(--n-ink)); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.n-squad-count {
  margin-left: auto; flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 14px;
  color: rgb(var(--n-ink)); display: inline-flex; align-items: baseline; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  background: rgba(var(--n-inset),0.28); border: 1px solid rgba(var(--n-surf),0.08);
}
.n-squad-count > span {
  font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 600;
  letter-spacing: 1.5px; color: rgba(var(--n-ink),0.55);
}
.nlist-p-rating > span:nth-child(2) { font-size: 16px; font-weight: 800; }
.nlist-p-trend { font-size: 9px; }
.nlist-p-trend.up { color: oklch(0.7 0.22 27); }
.nlist-p-trend.down { color: oklch(0.72 0.25 355); }
.nlist-p-trend.flat { color: rgba(var(--n-ink),0.4); }
.nlist-p-tags { display: flex; gap: 3px; flex-wrap: wrap; }

/* Stats page */
.nstats-sotd-row {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px;
}
@media (max-width: 1000px) { .nstats-sotd-row { grid-template-columns: 1fr; } }
.nstats-sotd {
  padding: 16px;
  background: linear-gradient(135deg, rgba(var(--n-surf),0.04), rgba(var(--n-panel),0.7));
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.nstats-sotd-k { font-size: 9px; letter-spacing: 2px; }
.nstats-sotd-big {
  font-size: clamp(56px, 8vw, 92px);
  font-weight: 800; line-height: 0.95; letter-spacing: -3px;
  color: oklch(0.7 0.22 27);
  text-shadow: 0 0 28px oklch(0.7 0.22 27 / 0.25);
}
.nstats-sotd-cap { font-size: 13px; line-height: 1.4; color: rgba(var(--n-ink),0.8); }
.nstats-sotd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.nstats-sotd-cell { padding: 8px 10px; background: rgba(var(--n-inset),0.25); border: 1px solid rgba(var(--n-surf),0.05); border-radius: 8px; }
.nstats-sotd-ck { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.nstats-sotd-cv { font-size: 17px; font-weight: 800; margin-top: 2px; letter-spacing: -0.5px; }

.nstats-explore {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 14px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.nstats-explore-h { font-size: 9px; letter-spacing: 2px; padding-bottom: 6px; color: rgba(var(--n-ink),0.6); border-bottom: 1px dashed rgba(var(--n-surf),0.06); margin-bottom: 4px; }
.nstats-explore-row {
  display: grid; grid-template-columns: 1fr 1fr auto;
  align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  color: inherit; text-decoration: none;
  font-size: 12px;
}
.nstats-explore-row:hover { background: rgba(var(--n-surf),0.04); }
.nstats-explore-l { font-weight: 600; }
.nstats-explore-s { font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.5); text-transform: uppercase; }
.nstats-explore-a { font-size: 14px; color: rgba(var(--n-ink),0.4); }

.nstats-rec-list { display: flex; flex-direction: column; gap: 4px; }
.nstats-rec-row {
  display: grid; grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 12px;
  padding: 8px 12px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 8px;
  color: inherit; text-decoration: none;
}
.nstats-rec-row:hover { border-color: rgba(var(--n-surf),0.14); }
.nstats-rec-rank { font-size: 20px; font-weight: 800; }
.nstats-rec-title { font-size: 12px; font-weight: 600; }
.nstats-rec-meta { font-size: 9px; letter-spacing: 0.5px; color: rgba(var(--n-ink),0.6); margin-top: 2px; }
.nstats-rec-meta b { font-weight: 800; }
.nstats-rec-value { font-size: 22px; font-weight: 800; letter-spacing: -1px; color: oklch(0.7 0.22 27); }

/* ================================================================= */
/*   PLAYER PAGE: new sections (teamwise/groundwise/recent/matchups) */
/* ================================================================= */
.np-tw-table, .np-gw-table, .np-rm-table {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  padding: 4px 10px;
}
.np-tw-head, .np-tw-row {
  display: grid; grid-template-columns: 2fr 46px 44px 44px 64px 56px 56px 50px 40px 40px 44px;
  align-items: center; gap: 6px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(var(--n-surf),0.05);
  font-size: 11px;
}
.np-tw-head { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45); border-bottom-color: rgba(var(--n-surf),0.1); }
.np-tw-row:last-child { border-bottom: 0; }
.np-tw-team { font-size: 14px; font-weight: 800; }
.np-tw-w { color: oklch(0.7 0.22 27); font-weight: 700; }
.np-tw-l { color: oklch(0.72 0.25 355); font-weight: 700; }
.np-tw-d { color: rgba(var(--n-ink),0.5); font-weight: 700; }
.np-tw-sep { color: rgba(var(--n-surf),0.2); margin: 0 4px; }

.np-gw-head, .np-gw-row {
  display: grid; grid-template-columns: 2fr 46px 44px 44px 64px 56px 56px 50px 40px 40px 44px;
  align-items: center; gap: 6px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(var(--n-surf),0.05);
  font-size: 11px;
}
.np-gw-head { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45); border-bottom-color: rgba(var(--n-surf),0.1); }
.np-gw-row:last-child { border-bottom: 0; }
.np-gw-ground { font-size: 12px; font-weight: 600; }
@media (max-width: 900px) {
  .np-tw-head, .np-tw-row, .np-gw-head, .np-gw-row {
    grid-template-columns: 1.5fr 36px 36px 56px 50px 50px 50px 36px 36px 48px;
    font-size: 10px; gap: 4px;
  }
}
@media (max-width: 700px) {
  .np-tw-head, .np-tw-row, .np-gw-head, .np-gw-row {
    grid-template-columns: 1fr 32px 48px 46px 46px 42px 32px 32px;
    font-size: 9px; gap: 3px;
  }
  .np-tw-head span:nth-child(3), .np-tw-row span:nth-child(3),
  .np-gw-head span:nth-child(3), .np-gw-row span:nth-child(3) { display: none; }
  .np-tw-head span:last-child, .np-tw-row span:last-child,
  .np-gw-head span:last-child, .np-gw-row span:last-child { display: none; }
}

/* Recent matches — summary + filters */
.np-rm-summary {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
}
.np-rm-stat {
  flex: 1 1 80px; min-width: 72px; max-width: 120px;
  padding: 10px 12px; background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.07); border-radius: 8px;
}
.np-rm-stat-k { font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45); margin-bottom: 4px; }
.np-rm-stat-v { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -1px; line-height: 1; }

.np-rm-filters { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.np-rm-filter-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.np-rm-filter-label { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.4); margin-right: 4px; }
.np-rm-filter-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1.5px;
  padding: 4px 9px; border-radius: 20px; border: 1px solid rgba(var(--n-surf),0.1);
  background: transparent; color: rgba(var(--n-ink),0.5); cursor: pointer; transition: all 0.15s;
}
.np-rm-filter-btn:hover { color: rgb(var(--n-ink)); border-color: rgba(var(--n-surf),0.2); }
.np-rm-filter-btn.on { background: oklch(0.7 0.22 27); border-color: oklch(0.7 0.22 27); color: var(--n-ground); font-weight: 700; }

.np-rm-head, .np-rm-row {
  display: grid; grid-template-columns: 64px 55px 200px 220px 180px 160px;
  align-items: center; gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(var(--n-surf),0.05);
  font-size: 11px;
}
.np-rm-head { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45); }
.np-rm-row:last-child { border-bottom: 0; }
.np-rm-row { text-decoration: none; color: rgb(var(--n-ink)); display: grid; border-left: 3px solid transparent; padding-left: 6px; transition: background 0.12s; }
.np-rm-row:hover { background: rgba(var(--n-surf),0.03); }
.np-rm-row.result-w { border-left-color: oklch(0.7 0.22 27); }
.np-rm-row.result-l { border-left-color: oklch(0.72 0.25 355); }
.np-rm-row.result-d { border-left-color: rgba(var(--n-surf),0.2); }
.np-rm-fmt { font-size: 8px; letter-spacing: 1.5px; padding: 2px 5px; background: rgba(var(--n-surf),0.06); border-radius: 3px; display: inline-block; }
.np-rm-vs { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.np-rm-venue { font-size: 11px; color: rgba(var(--n-ink),0.65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.np-rm-perf { font-size: 14px; font-weight: 800; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; min-width: 0; }
.np-rm-result { display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-wrap: nowrap; }
.np-rm-result-tag { font-size: 9px; padding: 2px 5px; border-radius: 3px; font-weight: 800; letter-spacing: 1px; }
.np-rm-result-tag.w { background: oklch(0.7 0.22 27); color: var(--n-ground); }
.np-rm-result-tag.l { background: oklch(0.72 0.25 355 / 0.7); color: #fff; }
.np-rm-result-tag.d { background: rgba(var(--n-surf),0.1); color: rgba(var(--n-ink),0.7); }

.np-mu-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
@media (max-width: 1100px) { .np-mu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .np-mu-grid { grid-template-columns: 1fr; } }
.np-mu-card {
  padding: 12px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.np-mu-card.adv-bat  { border-left: 3px solid oklch(0.7 0.22 27); }
.np-mu-card.adv-bowl { border-left: 3px solid oklch(0.72 0.25 355); }
.np-mu-bowler { display: flex; align-items: center; gap: 8px; }
.np-mu-bname { font-size: 14px; font-weight: 700; letter-spacing: -0.3px; }
.np-mu-bteam { font-size: 9px; letter-spacing: 1.5px; padding: 1px 4px; background: rgba(var(--n-surf),0.05); border-radius: 3px; font-weight: 700; }
.np-mu-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.np-mu-stat { padding: 6px 8px; background: rgba(var(--n-inset),0.25); border-radius: 6px; }
.np-mu-stat-k { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.np-mu-stat-v { font-size: 17px; font-weight: 800; letter-spacing: -0.5px; margin-top: 2px; }
.np-mu-foot { font-size: 8px; letter-spacing: 1.5px; padding-top: 6px; border-top: 1px dashed rgba(var(--n-surf),0.06); }

/* Page-switcher needs more room now */
.cs-switcher {
  flex-wrap: wrap !important;
  max-width: 360px;
}

.mobile-view .nlist-teams { grid-template-columns: 1fr; }
.mobile-view .nlist-players { grid-template-columns: 1fr; }
.mobile-view .nlist-intel { grid-template-columns: 1fr; }
.mobile-view .nstats-sotd-row { grid-template-columns: 1fr; }
.mobile-view .np-tw-head, .mobile-view .np-tw-row,
.mobile-view .np-gw-head, .mobile-view .np-gw-row,
.mobile-view .np-rm-head, .mobile-view .np-rm-row { font-size: 10px; }
.mobile-view .np-mu-grid { grid-template-columns: 1fr; }


/* ================================================================= */
/*   DETAIL PAGES — shared chrome                                    */
/* ================================================================= */
.dp { display: flex; flex-direction: column; gap: 14px; }

.dp-head { display: flex; flex-direction: column; gap: 4px; }
.dp-crumbs { display: flex; gap: 6px; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); flex-wrap: wrap; }
.dp-crumb { color: inherit; text-decoration: none; }
.dp-crumb:hover { color: rgb(var(--n-ink)); }
.dp-crumb-sep { color: rgba(var(--n-surf),0.2); }

/* Single-line header: breadcrumb trail + Compare button on one row.
   Used where the page name is already shown elsewhere (e.g. the player hero)
   so no separate kicker/h1 line is needed — avoids repeating the same text twice. */
.dp-head-row { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; justify-content: space-between; }
.dp-head-row .dp-crumbs { flex: 1; min-width: 0; overflow: hidden; }
.dp-head-row .breadcrumb-compare { flex-shrink: 0; margin-left: auto; }
@media (max-width: 480px) {
  .dp-head-row { gap: 8px; }
  .dp-head-row .breadcrumb-compare { padding: 4px 9px; font-size: 9px; }
}

/* Title row: parent-category kicker + h1 — still used by pages that don't
   already show the title elsewhere (e.g. team/series pages). */
.dp-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; justify-content: space-between; }
.dp-title-row .breadcrumb-compare { flex-shrink: 0; margin-left: auto; }
@media (max-width: 480px) {
  .dp-title-row { gap: 8px; }
  .dp-kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .dp-title-row .breadcrumb-compare { padding: 4px 9px; font-size: 9px; }
}
.dp-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; }
.dp-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 4vw, 36px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 0; }

/* ================================================================= */
/*   PLAYER INSIGHT PAGE — pi-* component system                     */
/* ================================================================= */
:root {
    --pi-ink: #0b0e14; --pi-ink2: #13171f; --pi-ink3: #1a1f2b; --pi-ink4: #222736;
    --pi-line: #2a2f3d; --pi-line2: #333849;
    --pi-text: #eef0f5; --pi-sub: #8b92a8; --pi-dim: #555e72;
    --pi-blue: #4f8ef7; --pi-teal: #17d4c2; --pi-gold: #f5c542;
    --pi-rose: #f2506e; --pi-green: #22c97a; --pi-purple: #9b77f5;
    --pi-r: 8px; --pi-r2: 12px;
    --pi-test: #B71C1C; --pi-odi: #0f6996; --pi-t20i: #de640d;
    /* aliases for backward-compat with inline references */
    --ink: var(--pi-ink); --ink2: var(--pi-ink2); --ink3: var(--pi-ink3); --ink4: var(--pi-ink4);
    --line: var(--pi-line); --line2: var(--pi-line2);
    --text: var(--pi-text); --sub: var(--pi-sub); --dim: var(--pi-dim);
    --blue: var(--pi-blue); --teal: var(--pi-teal); --gold: var(--pi-gold);
    --rose: var(--pi-rose); --green: var(--pi-green); --purple: var(--pi-purple);
    --r: var(--pi-r); --r2: var(--pi-r2);
    --test: var(--pi-test); --odi: var(--pi-odi); --t20i: var(--pi-t20i);
}
.pi * { box-sizing: border-box; margin: 0; padding: 0; }
.bg-insight { background: var(--pi-ink2); }
.pi { width: 100%; max-width: 100%; color: var(--pi-text); font-family: 'Inter',sans-serif; font-size: 13px; padding: 10px; }
.pi-banner { position: relative; overflow: hidden; background: var(--pi-ink2); border: 1px solid var(--pi-line); border-radius: var(--pi-r2); padding: 16px 18px 16px 56px; margin-bottom: 16px; }
.pi-banner::before { content: '◆'; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--pi-blue); }
.pi-banner::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg,var(--pi-blue),var(--pi-teal)); }
.pi-banner-tag { font-family: 'JetBrains Mono',monospace; font-size: 9px; letter-spacing: 2.5px; color: var(--pi-blue); text-transform: uppercase; margin-bottom: 4px; }
.pi-banner-text { font-size: 12.5px; color: var(--pi-sub); line-height: 1.6; }
.pi-banner-text strong { color: var(--pi-text); font-weight: 600; }
.pi-sec { margin-bottom: 16px; }
.pi-sec-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--pi-line); }
.pi-sec-title { font-family: 'Space Grotesk',sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pi-text); }
.pi-sec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pi-blue); flex-shrink: 0; }
.pi-sec-space { flex: 1; }
.pi-sec-pill { font-family: 'JetBrains Mono',monospace; font-size: 12px; letter-spacing: 1.5px; color: var(--pi-dim); background: var(--pi-ink3); border: 1px solid var(--pi-line); border-radius: 20px; padding: 3px 9px; white-space: nowrap; }
.pi-sec-pill a { color: inherit; text-decoration: none; }
.pi-sec-pill a:hover { color: var(--pi-blue); }
.pi-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap: 7px; }
.pi-card { background: var(--pi-ink2); border: 1px solid var(--pi-line); border-radius: var(--pi-r); padding: 11px 10px 12px; position: relative; overflow: hidden; transition: border-color .2s, transform .15s; cursor: default; }
.pi-card:hover { border-color: var(--pi-line2); transform: translateY(-2px); }
.pi-card-glow { position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px 2px 0 0; }
.pi-card.bat  .pi-card-glow { background: var(--pi-blue); }
.pi-card.bowl .pi-card-glow { background: var(--pi-rose); }
.pi-card.gen  .pi-card-glow { background: var(--pi-gold); }
.pi-card-lbl { font-family: 'JetBrains Mono',monospace; font-size: 8px; letter-spacing: 1px; color: var(--pi-dim); text-transform: uppercase; margin-bottom: 6px; }
.pi-card-val { font-family: 'Space Grotesk',sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--pi-text); }
.pi-card-val.v-blue  { color: var(--pi-blue); }
.pi-card-val.v-gold  { color: var(--pi-gold); }
.pi-card-val.v-green { color: var(--pi-green); }
.pi-card-val.v-rose  { color: var(--pi-rose); }
.pi-card-val.v-teal  { color: var(--pi-teal); }
.pi-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pi-compare-block { background: var(--pi-ink2); border: 1px solid var(--pi-line); border-radius: var(--pi-r2); overflow: hidden; }
.pi-compare-hd { padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--pi-line); }
.pi-compare-hd-title { font-family: 'Space Grotesk',sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.pi-compare-block.career .pi-compare-hd { border-top: 3px solid var(--pi-blue); }
.pi-compare-block.career .pi-compare-hd-title { color: var(--pi-blue); }
.pi-compare-block.recent .pi-compare-hd { border-top: 3px solid var(--pi-teal); }
.pi-compare-block.recent .pi-compare-hd-title { color: var(--pi-teal); }
.pi-compare-hd-yr { font-family: 'JetBrains Mono',monospace; font-size: 9px; color: var(--pi-dim); background: var(--pi-ink3); border: 1px solid var(--pi-line); border-radius: 4px; padding: 2px 7px; }
.pi-compare-bd { padding: 4px 14px 8px; }
.pi-compare-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(42,47,61,.5); }
.pi-compare-row:last-child { border-bottom: none; }
.pi-compare-lbl { font-size: 11px; color: var(--pi-sub); }
.pi-compare-val { font-family: 'JetBrains Mono',monospace; font-size: 13px; font-weight: 600; color: var(--pi-text); }
.pi-compare-val.up   { color: var(--pi-green); }
.pi-compare-val.down { color: var(--pi-rose); }
.pi-formats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.pi-fmt { background: var(--pi-ink2); border: 1px solid var(--pi-line); border-radius: var(--pi-r2); overflow: hidden; }
.pi-fmt-hd { padding: 9px 14px; font-family: 'Space Grotesk',sans-serif; font-size: .95rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--pi-line); }
.pi-fmt-hd-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pi-fmt.test .pi-fmt-hd { color: var(--pi-test); }
.pi-fmt.test .pi-fmt-hd-dot { background: var(--pi-test); box-shadow: 0 0 6px var(--pi-test); }
.pi-fmt.odi  .pi-fmt-hd { color: var(--pi-odi); }
.pi-fmt.odi  .pi-fmt-hd-dot { background: var(--pi-odi); box-shadow: 0 0 6px var(--pi-odi); }
.pi-fmt.t20  .pi-fmt-hd { color: var(--pi-t20i); }
.pi-fmt.t20  .pi-fmt-hd-dot { background: var(--pi-t20i); box-shadow: 0 0 6px var(--pi-t20i); }
.pi-fmt-bd { padding: 8px 14px; }
.pi-fmt-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(42,47,61,.6); }
.pi-fmt-row:last-child { border-bottom: none; }
.pi-fmt-lbl { font-size: 11px; color: var(--pi-sub); }
.pi-fmt-val { font-family: 'JetBrains Mono',monospace; font-size: 12px; font-weight: 500; color: var(--pi-text); }
.pi-peaks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pi-peak { position: relative; overflow: hidden; background: var(--pi-ink2); border: 1px solid var(--pi-line); border-radius: var(--pi-r2); padding: 16px 18px; }
.pi-peak-shine { position: absolute; top: -40px; right: -40px; width: 100px; height: 100px; border-radius: 50%; }
.pi-peak.bat-peak  .pi-peak-shine { background: radial-gradient(circle, rgba(79,142,247,.12) 0%, transparent 70%); }
.pi-peak.bowl-peak .pi-peak-shine { background: radial-gradient(circle, rgba(155,119,245,.12) 0%, transparent 70%); }
.pi-peak-lbl { font-family: 'JetBrains Mono',monospace; font-size: 8px; letter-spacing: 2px; color: var(--pi-dim); text-transform: uppercase; margin-bottom: 8px; }
.pi-peak-yr { font-family: 'Space Grotesk',sans-serif; font-size: 3.4rem; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.pi-peak.bat-peak  .pi-peak-yr { color: var(--pi-blue); }
.pi-peak.bowl-peak .pi-peak-yr { color: var(--pi-purple); }
.pi-peak-stat { font-family: 'JetBrains Mono',monospace; font-size: 12px; color: var(--pi-sub); }
.pi-peak-stat strong { color: var(--pi-text); font-weight: 500; }
.pi-chart { background: var(--pi-ink2); border: 1px solid var(--pi-line); border-radius: var(--pi-r2); padding: 16px 12px 10px; overflow: hidden; }
.pi-bars-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pi-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; width: 100%; min-width: 0; }
.pi-bar-col { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; min-width: 24px; max-width: 40px; }
.pi-bar-outer { width: 100%; height: 95px; display: flex; justify-content: center; align-items: flex-end; }
.pi-bar { width: 65%; max-width: 22px; border-radius: 3px 3px 0 0; min-height: 3px; position: relative; cursor: default; transition: opacity .15s; background: linear-gradient(180deg, var(--pi-blue) 0%, rgba(79,142,247,.2) 100%); }
.pi-bar.peak-bar { background: linear-gradient(180deg, var(--pi-gold) 0%, rgba(245,197,66,.2) 100%); }
.pi-bar:hover { opacity: .7; }
.pi-bar-tip { display: none; position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); background: var(--pi-ink4); border: 1px solid var(--pi-line2); border-radius: 6px; padding: 3px 8px; font-family: 'JetBrains Mono',monospace; font-size: 9.5px; color: var(--pi-blue); white-space: nowrap; z-index: 20; }
.pi-bar:hover .pi-bar-tip { display: block; }
.pi-bar-yr { font-family: 'JetBrains Mono',monospace; font-size: 12px; color: var(--pi-dim); white-space: nowrap; }
.pi-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pi-form-card { background: var(--pi-ink2); border: 1px solid var(--pi-line); border-radius: var(--pi-r2); padding: 14px 16px; }
.pi-form-yr { font-family: 'Space Grotesk',sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--pi-teal); margin-bottom: 10px; line-height: 1; }
.pi-form-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(42,47,61,.6); }
.pi-form-row:last-child { border-bottom: none; }
.pi-form-lbl { font-size: 11px; color: var(--pi-sub); }
.pi-form-val { font-family: 'JetBrains Mono',monospace; font-size: 12px; color: var(--pi-text); font-weight: 500; }
.pi-vs-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 8px; margin-bottom: 10px; }
.pi-vs-card { background: var(--pi-ink2); border: 1px solid var(--pi-line); border-radius: var(--pi-r); padding: 12px 14px; position: relative; overflow: hidden; transition: border-color .18s, transform .15s; }
.pi-vs-card:hover { transform: translateY(-2px); border-color: var(--pi-line2); }
.pi-vs-card-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; }
.pi-vs-card.best  .pi-vs-card-bar { background: var(--pi-green); }
.pi-vs-card.worst .pi-vs-card-bar { background: var(--pi-rose); }
.pi-vs-badge { font-family: 'JetBrains Mono',monospace; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 5px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.pi-vs-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.pi-vs-card.best  .pi-vs-badge { color: var(--pi-green); }
.pi-vs-card.best  .pi-vs-badge::before { background: var(--pi-green); }
.pi-vs-card.worst .pi-vs-badge { color: var(--pi-rose); }
.pi-vs-card.worst .pi-vs-badge::before { background: var(--pi-rose); }
.pi-vs-name { font-size: 12.5px; font-weight: 600; color: var(--pi-text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-vs-name a { color: inherit; text-decoration: none; }
.pi-vs-name a:hover { color: var(--pi-blue); }
.pi-vs-mat { font-family: 'JetBrains Mono',monospace; font-size: 10px; color: var(--pi-dim); margin-bottom: 9px; }
.pi-vs-stats { display: flex; gap: 12px; }
.pi-mini { display: flex; flex-direction: column; gap: 1px; }
.pi-mini-lbl { font-size: 10px; color: var(--pi-dim); text-transform: uppercase; letter-spacing: 1px; }
.pi-mini-val { font-family: 'JetBrains Mono',monospace; font-size: 15px; font-weight: 500; }
.pi-mini-val.v-blue { color: var(--pi-blue); }
.pi-mini-val.v-gold { color: var(--pi-gold); }
.pi-tbl-wrap { background: var(--pi-ink2); border: 1px solid var(--pi-line); border-radius: var(--pi-r2); overflow: hidden; }
.pi-tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pi-tbl { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.pi-tbl thead tr { background: var(--pi-ink3); }
.pi-tbl th { padding: 9px 12px; text-align: left; font-family: 'JetBrains Mono',monospace; font-size: 8.5px; letter-spacing: 1.2px; color: var(--pi-dim); text-transform: uppercase; border-bottom: 1px solid var(--pi-line); }
.pi-tbl td { padding: 8px 12px; border-bottom: 1px solid rgba(42,47,61,.5); }
.pi-tbl tbody tr:last-child td { border-bottom: none; }
.pi-tbl tbody tr:hover { background: rgba(79,142,247,.03); }
.pi-tbl td.nm a { color: var(--pi-blue); text-decoration: none; font-weight: 500; }
.pi-tbl td.nm a:hover { text-decoration: underline; }
.pi-tbl td.nu { font-family: 'JetBrains Mono',monospace; color: var(--pi-text); }
.pi-tbl td.go { font-family: 'JetBrains Mono',monospace; color: var(--pi-green); font-weight: 600; }
.pi-tbl td.lnk a { font-size: 11px; color: var(--pi-dim); text-decoration: none; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--pi-line); transition: all .15s; }
.pi-tbl td.lnk a:hover { color: var(--pi-blue); border-color: var(--pi-blue); background: rgba(79,142,247,.06); }
@media(max-width:1199px) { .pi-formats { grid-template-columns: 1fr 1fr; } }
@media(max-width:900px) { .pi-formats { grid-template-columns: 1fr; } .pi-peaks { grid-template-columns: 1fr; } .pi-form-grid { grid-template-columns: 1fr; } .pi-compare { grid-template-columns: 1fr; } }
@media(max-width:600px) { .pi-cards { grid-template-columns: repeat(3,1fr); } }
@keyframes piUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.pi-banner { animation: piUp .3s cubic-bezier(.22,1,.36,1) both; animation-delay: .05s; }
.pi-sec    { animation: piUp .35s cubic-bezier(.22,1,.36,1) both; }
.pi-sec:nth-child(2) { animation-delay: .08s; }
.pi-sec:nth-child(3) { animation-delay: .13s; }
.pi-sec:nth-child(4) { animation-delay: .18s; }
.pi-sec:nth-child(5) { animation-delay: .23s; }
.pi-sec:nth-child(6) { animation-delay: .28s; }
.pi-sec:nth-child(7) { animation-delay: .33s; }
.pi-sec:nth-child(8) { animation-delay: .38s; }

/* ================================================================= */
/*   TEAM JERSEY COLOURS — nlist-tj-{shortname}                      */
/* ================================================================= */
/* Base tile — first in the block on purpose: tiles carry both nlist-tj-default
   and their team class, and with equal specificity the later rule wins, so the
   team colour must come after the fallback. */
.nlist-tj-default { background: linear-gradient(165deg, oklch(0.35 0.05 260), oklch(0.35 0.05 260 / 0.8)); }

/* Sides with a national colour */
.nlist-tj-afg  { background: linear-gradient(165deg, oklch(0.51 0.13 228), oklch(0.51 0.13 228 / 0.8)); }
.nlist-tj-aus  { background: linear-gradient(165deg, oklch(0.53 0.16 100), oklch(0.53 0.16 100 / 0.8)); }
.nlist-tj-ban  { background: linear-gradient(165deg, oklch(0.38 0.13 148), oklch(0.38 0.13 148 / 0.8)); }
.nlist-tj-can  { background: linear-gradient(165deg, oklch(0.50 0.21 25), oklch(0.50 0.21 25 / 0.8)); }
.nlist-tj-eng  { background: linear-gradient(165deg, oklch(0.34 0.11 268), oklch(0.34 0.11 268 / 0.8)); }
.nlist-tj-hk   { background: linear-gradient(165deg, oklch(0.50 0.18 355), oklch(0.50 0.18 355 / 0.8)); }
.nlist-tj-ind  { background: linear-gradient(165deg, oklch(0.50 0.20 258), oklch(0.50 0.20 258 / 0.8)); }
.nlist-tj-ire  { background: linear-gradient(165deg, oklch(0.47 0.20 140), oklch(0.47 0.20 140 / 0.8)); }
.nlist-tj-jap  { background: linear-gradient(165deg, oklch(0.50 0.14 350), oklch(0.50 0.14 350 / 0.8)); }
.nlist-tj-ken  { background: linear-gradient(165deg, oklch(0.44 0.17 132), oklch(0.44 0.17 132 / 0.8)); }
.nlist-tj-nam  { background: linear-gradient(165deg, oklch(0.50 0.14 205), oklch(0.50 0.14 205 / 0.8)); }
.nlist-tj-ned  { background: linear-gradient(165deg, oklch(0.53 0.18 55), oklch(0.53 0.18 55 / 0.8)); }
.nlist-tj-nep  { background: linear-gradient(165deg, oklch(0.48 0.21 12), oklch(0.48 0.21 12 / 0.8)); }
.nlist-tj-nz   { background: linear-gradient(165deg, oklch(0.33 0.02 250), oklch(0.33 0.02 250 / 0.8)); }
.nlist-tj-omn  { background: linear-gradient(165deg, oklch(0.44 0.14 8), oklch(0.44 0.14 8 / 0.8)); }
.nlist-tj-pak  { background: linear-gradient(165deg, oklch(0.48 0.17 155), oklch(0.48 0.17 155 / 0.8)); }
.nlist-tj-png  { background: linear-gradient(165deg, oklch(0.51 0.16 78), oklch(0.51 0.16 78 / 0.8)); }
.nlist-tj-sa   { background: linear-gradient(165deg, oklch(0.48 0.13 178), oklch(0.48 0.13 178 / 0.8)); }
.nlist-tj-sco  { background: linear-gradient(165deg, oklch(0.40 0.13 245), oklch(0.40 0.13 245 / 0.8)); }
.nlist-tj-sl   { background: linear-gradient(165deg, oklch(0.45 0.19 288), oklch(0.45 0.19 288 / 0.8)); }
.nlist-tj-uae  { background: linear-gradient(165deg, oklch(0.38 0.15 28), oklch(0.38 0.15 28 / 0.8)); }
.nlist-tj-uga  { background: linear-gradient(165deg, oklch(0.50 0.17 68), oklch(0.50 0.17 68 / 0.8)); }
.nlist-tj-usa  { background: linear-gradient(165deg, oklch(0.45 0.16 278), oklch(0.45 0.16 278 / 0.8)); }
.nlist-tj-wi   { background: linear-gradient(165deg, oklch(0.44 0.19 18), oklch(0.44 0.19 18 / 0.8)); }
.nlist-tj-zim  { background: linear-gradient(165deg, oklch(0.51 0.15 128), oklch(0.51 0.15 128 / 0.8)); }

/* Remaining associates — hue derived from the code so each tile is distinct
   and stable across pages (generated, see scratchpad/gen-tints.js) */
.nlist-tj-arg  { background: linear-gradient(165deg, oklch(0.42 0.18 14), oklch(0.42 0.18 14 / 0.8)); }
.nlist-tj-ast  { background: linear-gradient(165deg, oklch(0.42 0.15 58), oklch(0.42 0.15 58 / 0.8)); }
.nlist-tj-bah  { background: linear-gradient(165deg, oklch(0.46 0.15 89), oklch(0.46 0.15 89 / 0.8)); }
.nlist-tj-bel  { background: linear-gradient(165deg, oklch(0.46 0.18 217), oklch(0.46 0.18 217 / 0.8)); }
.nlist-tj-ber  { background: linear-gradient(165deg, oklch(0.46 0.18 223), oklch(0.46 0.18 223 / 0.8)); }
.nlist-tj-bhr  { background: linear-gradient(165deg, oklch(0.46 0.18 316), oklch(0.46 0.18 316 / 0.8)); }
.nlist-tj-bhu  { background: linear-gradient(165deg, oklch(0.46 0.18 319), oklch(0.46 0.18 319 / 0.8)); }
.nlist-tj-bli  { background: linear-gradient(165deg, oklch(0.46 0.18 71), oklch(0.46 0.18 71 / 0.8)); }
.nlist-tj-bot  { background: linear-gradient(165deg, oklch(0.46 0.12 175), oklch(0.46 0.12 175 / 0.8)); }
.nlist-tj-brz  { background: linear-gradient(165deg, oklch(0.50 0.12 274), oklch(0.50 0.12 274 / 0.8)); }
.nlist-tj-bul  { background: linear-gradient(165deg, oklch(0.50 0.18 353), oklch(0.50 0.18 353 / 0.8)); }
.nlist-tj-cam  { background: linear-gradient(165deg, oklch(0.50 0.15 335), oklch(0.50 0.15 335 / 0.8)); }
.nlist-tj-chn  { background: linear-gradient(165deg, oklch(0.36 0.18 193), oklch(0.36 0.18 193 / 0.8)); }
.nlist-tj-cis  { background: linear-gradient(165deg, oklch(0.36 0.12 229), oklch(0.36 0.12 229 / 0.8)); }
.nlist-tj-cmb  { background: linear-gradient(165deg, oklch(0.36 0.12 336), oklch(0.36 0.12 336 / 0.8)); }
.nlist-tj-coi  { background: linear-gradient(165deg, oklch(0.36 0.18 45), oklch(0.36 0.18 45 / 0.8)); }
.nlist-tj-cor  { background: linear-gradient(165deg, oklch(0.36 0.12 54), oklch(0.36 0.12 54 / 0.8)); }
.nlist-tj-cro  { background: linear-gradient(165deg, oklch(0.36 0.12 144), oklch(0.36 0.12 144 / 0.8)); }
.nlist-tj-cyp  { background: linear-gradient(165deg, oklch(0.42 0.12 2), oklch(0.42 0.12 2 / 0.8)); }
.nlist-tj-den  { background: linear-gradient(165deg, oklch(0.46 0.18 341), oklch(0.46 0.18 341 / 0.8)); }
.nlist-tj-est  { background: linear-gradient(165deg, oklch(0.36 0.15 302), oklch(0.36 0.15 302 / 0.8)); }
.nlist-tj-esw  { background: linear-gradient(165deg, oklch(0.36 0.15 305), oklch(0.36 0.15 305 / 0.8)); }
.nlist-tj-fij  { background: linear-gradient(165deg, oklch(0.46 0.12 223), oklch(0.46 0.12 223 / 0.8)); }
.nlist-tj-fin  { background: linear-gradient(165deg, oklch(0.46 0.12 227), oklch(0.46 0.12 227 / 0.8)); }
.nlist-tj-fra  { background: linear-gradient(165deg, oklch(0.46 0.18 133), oklch(0.46 0.18 133 / 0.8)); }
.nlist-tj-gam  { background: linear-gradient(165deg, oklch(0.50 0.15 219), oklch(0.50 0.15 219 / 0.8)); }
.nlist-tj-ger  { background: linear-gradient(165deg, oklch(0.50 0.18 348), oklch(0.50 0.18 348 / 0.8)); }
.nlist-tj-gha  { background: linear-gradient(165deg, oklch(0.50 0.18 64), oklch(0.50 0.18 64 / 0.8)); }
.nlist-tj-gib  { background: linear-gradient(165deg, oklch(0.50 0.12 96), oklch(0.50 0.12 96 / 0.8)); }
.nlist-tj-grc  { background: linear-gradient(165deg, oklch(0.36 0.18 16), oklch(0.36 0.18 16 / 0.8)); }
.nlist-tj-gue  { background: linear-gradient(165deg, oklch(0.36 0.18 111), oklch(0.36 0.18 111 / 0.8)); }
.nlist-tj-hun  { background: linear-gradient(165deg, oklch(0.46 0.12 1), oklch(0.46 0.12 1 / 0.8)); }
.nlist-tj-ins  { background: linear-gradient(165deg, oklch(0.50 0.18 30), oklch(0.50 0.18 30 / 0.8)); }
.nlist-tj-iom  { background: linear-gradient(165deg, oklch(0.36 0.12 55), oklch(0.36 0.12 55 / 0.8)); }
.nlist-tj-isr  { background: linear-gradient(165deg, oklch(0.36 0.15 184), oklch(0.36 0.15 184 / 0.8)); }
.nlist-tj-itl  { background: linear-gradient(165deg, oklch(0.36 0.18 209), oklch(0.36 0.18 209 / 0.8)); }
.nlist-tj-jer  { background: linear-gradient(165deg, oklch(0.42 0.18 351), oklch(0.42 0.18 351 / 0.8)); }
.nlist-tj-kuw  { background: linear-gradient(165deg, oklch(0.36 0.12 13), oklch(0.36 0.12 13 / 0.8)); }
.nlist-tj-les  { background: linear-gradient(165deg, oklch(0.42 0.18 114), oklch(0.42 0.18 114 / 0.8)); }
.nlist-tj-lux  { background: linear-gradient(165deg, oklch(0.46 0.12 255), oklch(0.46 0.12 255 / 0.8)); }
.nlist-tj-mai  { background: linear-gradient(165deg, oklch(0.46 0.15 221), oklch(0.46 0.15 221 / 0.8)); }
.nlist-tj-mal  { background: linear-gradient(165deg, oklch(0.46 0.15 224), oklch(0.46 0.15 224 / 0.8)); }
.nlist-tj-maw  { background: linear-gradient(165deg, oklch(0.46 0.18 235), oklch(0.46 0.18 235 / 0.8)); }
.nlist-tj-mex  { background: linear-gradient(165deg, oklch(0.46 0.12 0), oklch(0.46 0.12 0 / 0.8)); }
.nlist-tj-mld  { background: linear-gradient(165deg, oklch(0.50 0.12 197), oklch(0.50 0.12 197 / 0.8)); }
.nlist-tj-mlt  { background: linear-gradient(165deg, oklch(0.50 0.12 213), oklch(0.50 0.12 213 / 0.8)); }
.nlist-tj-mon  { background: linear-gradient(165deg, oklch(0.50 0.12 300), oklch(0.50 0.12 300 / 0.8)); }
.nlist-tj-moz  { background: linear-gradient(165deg, oklch(0.50 0.12 312), oklch(0.50 0.12 312 / 0.8)); }
.nlist-tj-mym  { background: linear-gradient(165deg, oklch(0.36 0.15 249), oklch(0.36 0.15 249 / 0.8)); }
.nlist-tj-nig  { background: linear-gradient(165deg, oklch(0.42 0.12 348), oklch(0.42 0.12 348 / 0.8)); }
.nlist-tj-nor  { background: linear-gradient(165deg, oklch(0.42 0.12 185), oklch(0.42 0.12 185 / 0.8)); }
.nlist-tj-pan  { background: linear-gradient(165deg, oklch(0.36 0.15 229), oklch(0.36 0.15 229 / 0.8)); }
.nlist-tj-phl  { background: linear-gradient(165deg, oklch(0.36 0.18 84), oklch(0.36 0.18 84 / 0.8)); }
.nlist-tj-por  { background: linear-gradient(165deg, oklch(0.42 0.12 307), oklch(0.42 0.12 307 / 0.8)); }
.nlist-tj-qtr  { background: linear-gradient(165deg, oklch(0.50 0.18 343), oklch(0.50 0.18 343 / 0.8)); }
.nlist-tj-rom  { background: linear-gradient(165deg, oklch(0.36 0.12 64), oklch(0.36 0.12 64 / 0.8)); }
.nlist-tj-rwa  { background: linear-gradient(165deg, oklch(0.42 0.15 300), oklch(0.42 0.15 300 / 0.8)); }
.nlist-tj-sam  { background: linear-gradient(165deg, oklch(0.42 0.15 231), oklch(0.42 0.15 231 / 0.8)); }
.nlist-tj-sar  { background: linear-gradient(165deg, oklch(0.42 0.18 236), oklch(0.42 0.18 236 / 0.8)); }
.nlist-tj-ser  { background: linear-gradient(165deg, oklch(0.46 0.12 0), oklch(0.46 0.12 0 / 0.8)); }
.nlist-tj-sey  { background: linear-gradient(165deg, oklch(0.46 0.12 7), oklch(0.46 0.12 7 / 0.8)); }
.nlist-tj-sil  { background: linear-gradient(165deg, oklch(0.46 0.12 118), oklch(0.46 0.12 118 / 0.8)); }
.nlist-tj-sin  { background: linear-gradient(165deg, oklch(0.46 0.12 120), oklch(0.46 0.12 120 / 0.8)); }
.nlist-tj-spn  { background: linear-gradient(165deg, oklch(0.46 0.15 337), oklch(0.46 0.15 337 / 0.8)); }
.nlist-tj-swe  { background: linear-gradient(165deg, oklch(0.50 0.18 185), oklch(0.50 0.18 185 / 0.8)); }
.nlist-tj-swi  { background: linear-gradient(165deg, oklch(0.50 0.18 189), oklch(0.50 0.18 189 / 0.8)); }
.nlist-tj-thi  { background: linear-gradient(165deg, oklch(0.36 0.18 325), oklch(0.36 0.18 325 / 0.8)); }
.nlist-tj-tnz  { background: linear-gradient(165deg, oklch(0.36 0.12 168), oklch(0.36 0.12 168 / 0.8)); }
.nlist-tj-tur  { background: linear-gradient(165deg, oklch(0.42 0.12 17), oklch(0.42 0.12 17 / 0.8)); }
.nlist-tj-van  { background: linear-gradient(165deg, oklch(0.50 0.18 235), oklch(0.50 0.18 235 / 0.8)); }

/* Force light text on all jerseys */
.nlist-team-rank, .nlist-team-short { color: rgba(var(--n-surf),0.9) !important; }

/* ================================================================= */
/*   PLAYER / TEAM PAGE LAYOUT — sidebar + main two-column           */
/* ================================================================= */
.np-page { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .np-page { grid-template-columns: 1fr; } }

/* Three-column format sections (Test / ODI / T20I) */
.n-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .n-3col { grid-template-columns: 1fr; } }
/* Four-column ranking grid (Team / Batsman / Bowler / Allrounder) */
.n-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1200px) { .n-4col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .n-4col { grid-template-columns: 1fr; } }

/* Grid items default to min-width:auto, which lets a wide inner table (rk-table's
   fixed-px row columns) refuse to shrink and spill out past its 1fr track — this is
   what pushed the rightmost (T20I) card off the edge of the page on desktop. */
.n-3col > div, .n-4col > div { min-width: 0; }
.rk-table { min-width: 0; }

/* Format section card */
.n-fmt-card { border-radius: 10px; overflow: hidden; }
.n-fmt-card-head { padding: 10px 14px; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.n-fmt-card-body { padding: 10px; }

/* Teams page — stats mini-table */
.nlist-team-fmt-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.nlist-team-fmt-table th { font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45); font-weight: 400; padding: 2px 4px; text-align: left; }
.nlist-team-fmt-table td { font-family: 'Space Grotesk', sans-serif; font-size: 11px; color: rgba(var(--n-ink),0.8); padding: 2px 4px; }
.nlist-team-fmt-table td:first-child { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.5); }
.nlist-team-fmt-rank { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: oklch(0.85 0.25 130); }

.dp-ai {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(var(--n-surf),0.04), rgba(var(--n-inset),0.2));
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 10px;
}
.dp-ai-glyph { font-size: 14px; padding-top: 1px; }
.dp-ai-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; padding-top: 2px; flex-shrink: 0; }
.dp-ai-body { font-size: 12px; line-height: 1.45; color: rgba(var(--n-ink),0.85); }

.dp-filter {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 8px 12px;
  background: rgba(var(--n-panel),0.4);
  border: 1px solid rgba(var(--n-surf),0.04);
  border-radius: 8px;
}
.dp-filter-group { display: flex; align-items: center; gap: 10px; }
.dp-filter-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }

/* ================================================================= */
/*   1. TEAM DETAIL                                                  */
/* ================================================================= */
.td-hero {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 14px;
  background: rgba(var(--n-panel2),0.7);
}
/* 3-col hero used on the team home page — jersey | stats+tabs | insights panel */
.td-hero.td-hero-home {
  grid-template-columns: 140px 1fr 260px;
}
@media (max-width: 1100px) { .td-hero.td-hero-home { grid-template-columns: 140px 1fr; } }
@media (max-width: 1100px) { .td-hero.td-hero-home .td-ins-panel { display: none; } }

/* Richer format tabs — win-rate bar below the rank */
.td-pt-bar {
  height: 3px; border-radius: 2px; margin-top: 5px;
  background: rgba(var(--n-surf),0.07); overflow: hidden;
}
.td-pt-bar-fill { height: 100%; border-radius: 2px; }
.td-pt-wl {
  display: flex; gap: 6px; margin-top: 4px;
  font-size: 8px; letter-spacing: 1px; font-family: 'JetBrains Mono', monospace;
  color: rgba(var(--n-ink),0.4);
}
.td-pt-wl .w { color: oklch(0.7 0.22 27); font-weight: 700; }
.td-pt-wl .l { color: oklch(0.72 0.25 355); font-weight: 700; }
/* Team-specific hero backgrounds */
.td-hero.tj-ind  { background: linear-gradient(135deg, oklch(0.60 0.20 27  / 0.15), transparent 55%), rgba(var(--n-panel2),0.8); border-color: oklch(0.60 0.20 27  / 0.25); }
.td-hero.tj-aus  { background: linear-gradient(135deg, oklch(0.72 0.20 75  / 0.15), transparent 55%), rgba(var(--n-panel2),0.8); border-color: oklch(0.72 0.20 75  / 0.25); }
.td-hero.tj-eng  { background: linear-gradient(135deg, oklch(0.42 0.16 260 / 0.18), transparent 55%), rgba(var(--n-panel2),0.8); border-color: oklch(0.42 0.16 260 / 0.3); }
.td-hero.tj-pak  { background: linear-gradient(135deg, oklch(0.50 0.18 155 / 0.15), transparent 55%), rgba(var(--n-panel2),0.8); border-color: oklch(0.50 0.18 155 / 0.25); }
.td-hero.tj-wi   { background: linear-gradient(135deg, oklch(0.50 0.22 27  / 0.15), transparent 55%), rgba(var(--n-panel2),0.8); border-color: oklch(0.50 0.22 27  / 0.25); }
.td-hero.tj-nz   { background: linear-gradient(135deg, oklch(0.30 0.03 0   / 0.25), transparent 55%), rgba(var(--n-panel2),0.8); border-color: oklch(0.30 0.03 0   / 0.4); }
.td-hero.tj-sa   { background: linear-gradient(135deg, oklch(0.52 0.20 145 / 0.15), transparent 55%), rgba(var(--n-panel2),0.8); border-color: oklch(0.52 0.20 145 / 0.25); }
.td-hero.tj-sl   { background: linear-gradient(135deg, oklch(0.42 0.20 280 / 0.18), transparent 55%), rgba(var(--n-panel2),0.8); border-color: oklch(0.42 0.20 280 / 0.3); }
.td-hero.tj-ban  { background: linear-gradient(135deg, oklch(0.46 0.18 155 / 0.15), transparent 55%), rgba(var(--n-panel2),0.8); border-color: oklch(0.46 0.18 155 / 0.25); }
.td-hero.tj-zim  { background: linear-gradient(135deg, oklch(0.42 0.16 145 / 0.15), transparent 55%), rgba(var(--n-panel2),0.8); border-color: oklch(0.42 0.16 145 / 0.25); }
.td-hero.tj-afg  { background: linear-gradient(135deg, oklch(0.38 0.14 260 / 0.18), transparent 55%), rgba(var(--n-panel2),0.8); border-color: oklch(0.38 0.14 260 / 0.3); }
.td-hero.tj-ire  { background: linear-gradient(135deg, oklch(0.45 0.18 145 / 0.15), transparent 55%), rgba(var(--n-panel2),0.8); border-color: oklch(0.45 0.18 145 / 0.25); }
@media (max-width: 700px) { .td-hero { grid-template-columns: 1fr; } }
.td-jersey {
  position: relative; aspect-ratio: 4/5;
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px;
  color: rgb(var(--n-ink));
}
.td-j-short {
  font-size: 40px; font-weight: 800; letter-spacing: -1.5px;
  line-height: 1; margin-top: 12px;
  text-shadow: 0 4px 12px rgba(var(--n-shadow),0.15);
}
.td-j-rank { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-shadow),0.65); margin-top: 6px; font-weight: 700; }
.td-hero-meta { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.td-meta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 160px)); gap: 10px; }
@media (max-width: 600px) { .td-meta-row { grid-template-columns: 1fr 1fr; } }
.td-meta-cell { padding: 6px 10px; background: rgba(var(--n-inset),0.25); border-radius: 8px; }
.td-meta-k { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.td-meta-v { font-size: 16px; font-weight: 800; margin-top: 2px; letter-spacing: -0.3px; }

.td-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.td-pt {
  padding: 8px 10px;
  background: rgba(var(--n-inset),0.25);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.td-pt.on { background: rgba(var(--n-surf),0.05); border-color: rgba(var(--n-surf),0.16); }
.td-pt:hover { background: rgba(var(--n-surf),0.04); }
.td-pt-k { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.45); font-family: 'JetBrains Mono', monospace; }
.td-pt-v { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; margin-top: 2px; line-height: 1; }
.td-pt-sub { font-size: 8px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.35); font-family: 'JetBrains Mono', monospace; margin-top: 3px; }

.td-stats { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
@media (max-width: 1100px) { .td-stats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px)  { .td-stats { grid-template-columns: repeat(2, 1fr); } }
.td-stat { padding: 10px 12px; background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 8px; }
.td-stat-k { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.td-stat-v { font-size: 22px; font-weight: 800; margin-top: 2px; letter-spacing: -0.5px; line-height: 1; }
.td-stat-v-sm { font-size: 11px !important; font-weight: 600; letter-spacing: 0; line-height: 1.3; }

/* ── Compact ground-details hero (scoped, leaves team page untouched) ── */
.dp-ground .td-hero { grid-template-columns: 96px 1fr; gap: 12px; padding: 10px; }
.dp-ground .td-jersey { aspect-ratio: 1/1; }
.dp-ground .td-j-short { font-size: 28px; margin-top: 8px; }
.dp-ground .td-j-rank { margin-top: 3px; }
.dp-ground .td-hero-meta { gap: 8px; }
.dp-ground .td-ground-name { font-size: clamp(18px, 2.4vw, 26px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.05; }
.dp-ground .td-meta-cell { padding: 5px 9px; }
.dp-ground .td-meta-v { font-size: 13px; }
.dp-ground .td-stat { padding: 6px 9px; }
.dp-ground .td-stat-v { font-size: 16px; }
.dp-ground .td-stat-v-sm { font-size: 10px !important; }
@media (max-width: 700px) { .dp-ground .td-hero { grid-template-columns: 72px 1fr; } }

/* ── Hero + insights side-panel layout ──────────────────────────── */
.td-hero-wrap {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 12px;
  align-items: start;
}
@media (max-width: 1000px) { .td-hero-wrap { grid-template-columns: 1fr 260px; } }
@media (max-width: 760px)  { .td-hero-wrap { grid-template-columns: 1fr; } }

/* Insights panel */
.td-ins-panel {
  background: rgba(var(--n-panel2),0.9);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-left: 2px solid oklch(0.6 0.18 254);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 200px;
}
.td-ins-header {
  display: flex; justify-content: space-between; align-items: center;
}
.td-ins-tag {
  font-size: 9px; letter-spacing: 2px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: oklch(0.6 0.18 254);
  background: oklch(0.6 0.18 254 / 0.12);
  border: 1px solid oklch(0.6 0.18 254 / 0.3);
  padding: 3px 8px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 5px;
}
.td-ins-day {
  font-size: 9px; letter-spacing: 1px; font-family: 'JetBrains Mono', monospace;
  color: rgba(var(--n-ink),0.3);
}
.td-ins-body { flex: 1; position: relative; }
.td-ins-card { display: none; }
.td-ins-card.on { display: block; }
.td-ins-num {
  font-size: 30px; font-weight: 800; letter-spacing: -1.5px; line-height: 1;
  font-family: 'Space Grotesk', sans-serif;
  color: oklch(0.6 0.18 254); margin-bottom: 10px;
}
.td-ins-text {
  font-size: 12px; line-height: 1.55; color: rgba(var(--n-ink),0.85);
}
.td-ins-text strong { color: rgb(var(--n-ink)); font-weight: 700; }
.td-ins-dots { display: flex; gap: 5px; align-items: center; }
.td-ins-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(var(--n-surf),0.14); cursor: pointer;
  transition: width 200ms, border-radius 200ms, background 200ms;
}
.td-ins-dot.on { width: 20px; border-radius: 4px; background: oklch(0.6 0.18 254); }
.td-ins-footer {
  font-size: 9px; letter-spacing: 1px; font-family: 'JetBrains Mono', monospace;
  color: rgba(var(--n-ink),0.28);
}

.td-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .td-grid { grid-template-columns: 1fr; } }
.td-section { background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.td-squad { display: flex; flex-direction: column; gap: 4px; }
.td-squad-row {
  display: grid; grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 6px;
  color: inherit; text-decoration: none;
}
.td-squad-row:hover { background: rgba(var(--n-surf),0.04); }
.td-squad-jersey { width: 36px; height: 30px; border-radius: 5px; color: rgb(var(--n-ink)); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.td-squad-name { font-size: 13px; font-weight: 600; }
.td-squad-role { font-size: 8px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.td-squad-recent { font-size: 13px; font-weight: 800; }
.td-recent { display: flex; flex-direction: column; gap: 3px; }
.td-recent-row {
  display: grid; grid-template-columns: 30px 36px 1fr 1fr 50px;
  align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 6px;
  color: inherit; text-decoration: none;
  font-size: 11px;
  border-left: 2px solid transparent;
}
.td-recent-row.won { border-left-color: oklch(0.7 0.22 27); }
.td-recent-row.lost { border-left-color: oklch(0.72 0.25 355); }
.td-recent-row:hover { background: rgba(var(--n-surf),0.04); }
.td-recent-tag { font-size: 10px; padding: 2px 5px; border-radius: 3px; text-align: center; font-weight: 800; letter-spacing: 1px; }
.td-recent-tag.w { background: oklch(0.7 0.22 27); color: var(--n-ground); }
.td-recent-tag.l { background: oklch(0.72 0.25 355 / 0.7); color: #fff; }
.td-recent-fmt { font-size: 9px; letter-spacing: 1.5px; padding: 1px 4px; background: rgba(var(--n-surf),0.06); border-radius: 3px; text-align: center; }
.td-recent-opp { font-size: 14px; font-weight: 800; letter-spacing: -0.3px; }
.td-recent-margin { font-size: 10px; color: rgba(var(--n-ink),0.6); }
.td-recent-date { font-size: 9px; color: rgba(var(--n-ink),0.5); text-align: right; }

/* ================================================================= */
/*   2. RANKINGS                                                     */
/* ================================================================= */
.rk-podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
@media (max-width: 700px) { .rk-podium { grid-template-columns: 1fr; } }
.rk-pod {
  padding: 14px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  text-align: center;
}
.rk-pod-1 { background: linear-gradient(180deg, rgba(255,180,71,0.18), rgba(var(--n-panel),0.7)); border-color: rgba(255,180,71,0.3); transform: translateY(-6px); }
.rk-pod-2 { background: linear-gradient(180deg, rgba(100,180,255,0.12), rgba(var(--n-panel),0.7)); }
.rk-pod-3 { background: linear-gradient(180deg, rgba(255,100,140,0.12), rgba(var(--n-panel),0.7)); }
.rk-pod-rank { font-size: 28px; font-weight: 800; line-height: 1; }
.rk-pod-team { font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.rk-pod-name { font-size: 11px; color: rgba(var(--n-ink),0.7); }
.rk-pod-rating { font-size: 22px; font-weight: 800; margin-top: 4px; }
.rk-pod-rating span { font-size: 8px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); margin-left: 4px; font-weight: 400; }
.rk-pod-points { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }

/* Rankings page wrappers */
.rk-page { display: flex; flex-direction: column; gap: 20px; }
.rk-section { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Rankings board: 3 format columns x 4 category blocks ----------
   Every list MST_Ranking returns is on the page at once (no category tabs), so
   the grid groups by format down a column instead of stacking format sections. */
.rk-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
/* Per-format pages show four categories instead of three formats */
.rk-board-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .rk-board-4 { grid-template-columns: repeat(2, 1fr); } }
.rk-fmtcolumn { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rk-fmt-test { --rk-accent: var(--fmt-test);   --rk-accent-soft: color-mix(in oklch, var(--fmt-test) 18%, transparent); }
.rk-fmt-odi  { --rk-accent: var(--fmt-odi);  --rk-accent-soft: color-mix(in oklch, var(--fmt-odi) 18%, transparent); }
.rk-fmt-t20i { --rk-accent: var(--fmt-t20i); --rk-accent-soft: color-mix(in oklch, var(--fmt-t20i) 16%, transparent); }

/* The format head is the column's title AND the link to its full page, so it
   carries the accent bar, a readable title and an explicit button — the old
   version used bg-{fmt}-stats, whose forced dark text was invisible on T20I. */
.rk-fmt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 13px 13px 15px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--rk-accent-soft), rgba(var(--n-panel),0.5) 72%);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-left: 3px solid var(--rk-accent);
  transition: border-color 160ms, transform 160ms;
}
.rk-fmt-head:hover { border-color: var(--rk-accent); transform: translateY(-1px); }
.rk-fmt-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px; font-weight: 800; letter-spacing: 0.5px; line-height: 1;
  color: rgb(var(--n-ink));
}
.rk-fmt-cta {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1.5px; font-weight: 700;
  padding: 7px 12px; border-radius: 99px;
  color: var(--rk-accent);
  background: rgba(var(--n-surf),0.04);
  border: 1px solid var(--rk-accent);
  transition: background 160ms, color 160ms;
}
.rk-fmt-head:hover .rk-fmt-cta { background: var(--rk-accent); color: var(--n-ground); }
.rk-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rk-cell-head {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.6); padding-left: 2px;
}
.rk-cell-head::before {
  content: ""; width: 12px; height: 2px; border-radius: 2px;
  background: var(--rk-accent); flex-shrink: 0;
}
.rk-empty { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(var(--n-ink),0.35); padding: 12px 0; }

/* Page header row — the title block and the cross-ranking nav share one line
   rather than stacking into three, since the title leaves the width unused. */
.rk-pagehead {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 24px;margin-bottom:1rem;
}
.rk-pagehead .n-ranking-nav { margin-left: auto; padding-bottom: 3px; }
@media (max-width: 620px) {
  .rk-pagehead .n-ranking-nav { margin-left: 0; }
}

/* Format jump links — only needed once the board stacks (see media query) */
.rk-jump { display: none; gap: 6px; }
.rk-jump a {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px;
  padding: 6px 12px; border-radius: 99px;
  background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.08);
  color: rgba(var(--n-ink),0.7);
}
.rk-jump a:hover { color: rgb(var(--n-ink)); background: rgba(var(--n-surf),0.06); }

/* ---------- Leaders strip: whoever tops each of the twelve lists ---------- */
.rk-leaders { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.rk-lead {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 9px 10px; border-radius: 10px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06); border-top-width: 2px;
  transition: background 160ms;
}
.rk-lead:hover { background: rgba(var(--n-surf),0.05); }
.rk-lead-test { border-top-color: oklch(0.7 0.22 27); }
.rk-lead-odi  { border-top-color: oklch(0.7 0.18 210); }
.rk-lead-t20i { border-top-color: oklch(0.85 0.25 130); }
.rk-lead-tag { font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); text-transform: uppercase; }
.rk-lead-name {
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-lead-meta { display: flex; align-items: center; gap: 6px; }
.rk-lead-pos { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; color: oklch(0.82 0.18 87); }
.rk-lead-rating { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 800; margin-left: auto; }

/* ---------- Rating meter ----------
   MST_Ranking has no points / movement columns, so the bar is what makes the
   size of a rating gap visible. Width comes from --rkbar on the row. */
.rk-meter { height: 4px; border-radius: 99px; background: rgba(var(--n-surf),0.07); overflow: hidden; }
.rk-meter-fill {
  display: block; height: 100%; border-radius: 99px;
  width: var(--rkbar, 0%);
  background: var(--rk-accent, oklch(0.6 0.18 254));
  opacity: 0.75;
}
.rk-row-top .rk-meter-fill, .rk-prow-top .rk-meter-fill { opacity: 1; }

/* Four lists side by side (the per-format pages) leaves ~80px for a name, so the
   meter gives up its column there and the name keeps it. */
.n-4col .rk-meter, .rk-board-4 .rk-meter { display: none; }
.n-4col .rk-head,  .n-4col .rk-row,
.rk-board-4 .rk-head, .rk-board-4 .rk-row   { grid-template-columns: 28px 1fr 0 46px; }
.n-4col .rk-phead, .n-4col .rk-prow,
.rk-board-4 .rk-phead, .rk-board-4 .rk-prow { grid-template-columns: 24px 1fr 40px 0 44px; }

/* Top-3 rank accent (amber) */
.rk-rank-top { color: oklch(0.82 0.18 87) !important; }

/* Make rk-row / rk-prow work as anchor tags */
a.rk-row, a.rk-prow { text-decoration: none; color: inherit; display: grid; }
a.rk-row:hover, a.rk-prow:hover { background: rgba(var(--n-surf),0.05); }

.rk-table {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  padding: 4px 10px;
}
.rk-head, .rk-row {
  /* #, TEAM, rating meter, RATING */
  display: grid; grid-template-columns: 28px 1fr minmax(30px, 64px) 46px;
  align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(var(--n-surf),0.05);
  font-size: 11px;
}
.rk-head { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45); }
.rk-row:last-child { border-bottom: 0; }
.rk-rank { font-size: 18px; font-weight: 800; }
.rk-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rk-team-jersey { width: 30px; height: 24px; border-radius: 4px; color: rgb(var(--n-ink)); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: 1px; flex-shrink: 0; }
.rk-team-name { font-size: 13px; font-weight: 600; }
.rk-rating { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; text-align: right; }

.rk-phead, .rk-prow {
  /* #, PLAYER, TEAM, rating meter, RATING */
  display: grid; grid-template-columns: 24px 1fr 40px minmax(24px, 52px) 44px;
  align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(var(--n-surf),0.05);
  font-size: 11px;
}
.rk-phead { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45); }
.rk-pplayer { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.rk-pjersey { width: 30px; height: 24px; border-radius: 4px; color: rgb(var(--n-ink)); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.rk-team-tag { font-size: 9px; letter-spacing: 1.5px; padding: 1px 4px; background: rgba(var(--n-surf),0.05); border-radius: 3px; font-weight: 700; white-space: nowrap; }
.rk-prow .rk-rating { text-align: right; }

/* Keep long names from blowing out the fixed-width grid columns */
.rk-team-name, .rk-pplayer > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* Rankings — board collapses one format per row on narrow screens */
@media (max-width: 1100px) {
  .rk-board { grid-template-columns: 1fr; gap: 24px; }
  /* The four-category board keeps two columns longer — its lists are shorter
     than a format column, so one per row wastes the width. */
  .rk-board-4 { grid-template-columns: repeat(2, 1fr); }
  .rk-leaders { grid-template-columns: repeat(3, 1fr); }
  .rk-jump { display: flex; }
  .rk-fmtcolumn { scroll-margin-top: 70px; }
}
@media (max-width: 700px) { .rk-board-4 { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .rk-leaders { grid-template-columns: repeat(2, 1fr); }
  .rk-lead-name { font-size: 13px; }
}

/* Rankings — mobile: drop the meter and shrink so the cards stay comfortable */
@media (max-width: 600px) {
  .rk-head, .rk-row {
    grid-template-columns: 26px 1fr 0 46px;
    gap: 6px;
    font-size: 10px;
  }
  .rk-phead, .rk-prow {
    grid-template-columns: 22px 1fr 38px 0 44px;
    gap: 6px;
    font-size: 10px;
  }
  .rk-meter { display: none; }
  .rk-rank, .rk-rating { font-size: 14px; }
  .rk-team-jersey, .rk-pjersey { width: 24px; height: 20px; font-size: 9px; }
  .rk-team-name, .rk-pplayer { font-size: 11px; }
  .rk-team-tag { font-size: 8px; padding: 1px 3px; }
}

/* ================================================================= */
/*   3. YEAR-WISE                                                    */
/* ================================================================= */
.yw-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
@media (max-width: 900px) { .yw-grid { grid-template-columns: 1fr; } }
.yw-chart-card, .yw-detail {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  padding: 14px;
}
.yw-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; min-height: 200px; padding-top: 30px; }
.yw-bar { background: transparent; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.yw-bar-stack { height: 160px; width: 100%; display: flex; align-items: end; }
.yw-bar-fill { width: 100%; border-radius: 4px 4px 0 0; transition: all 200ms; }
.yw-bar:hover .yw-bar-fill { filter: brightness(1.2); }
.yw-bar-r { font-size: 11px; font-weight: 700; color: rgba(var(--n-ink),0.85); }
.yw-bar-y { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.yw-bar.on .yw-bar-r { color: oklch(0.7 0.22 27); }

.yw-detail-h { font-size: 9px; letter-spacing: 2px; color: oklch(0.7 0.22 27); margin-bottom: 10px; }
.yw-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.yw-d { padding: 10px 12px; background: rgba(var(--n-inset),0.25); border-radius: 8px; }
.yw-d.big { grid-column: span 1; }
.yw-d-k { font-size: 8px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.yw-d-v { font-size: 22px; font-weight: 800; margin-top: 2px; letter-spacing: -0.5px; }
.yw-d.big .yw-d-v { font-size: 28px; }

.yw-table {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  padding: 4px 10px;
}
.yw-head, .yw-row {
  display: grid; grid-template-columns: 60px 40px 40px 70px 60px 60px 50px 50px 60px 1fr;
  align-items: center; gap: 6px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(var(--n-surf),0.05);
  font-size: 11px;
  cursor: pointer;
}
.yw-head { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45); cursor: default; }
.yw-row.on { background: rgba(var(--n-surf),0.04); }
.yw-row:hover { background: rgba(var(--n-surf),0.03); }
.yw-year { font-size: 14px; font-weight: 800; }

/* ================================================================= */
/*   4. TEAM-WISE                                                    */
/* ================================================================= */
.tw-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 1100px) { .tw-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tw-cards { grid-template-columns: 1fr; } }
.tw-card {
  padding: 14px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid;
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.tw-card-head { display: flex; align-items: center; gap: 10px; }
.tw-card-jersey { width: 40px; height: 32px; border-radius: 5px; color: rgb(var(--n-ink)); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; letter-spacing: 1px; }
.tw-card-meta { display: flex; flex-direction: column; gap: 1px; }
.tw-card-name { font-size: 13px; font-weight: 700; }
.tw-card-big { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -1px; margin-top: 4px; }
.tw-card-runs { font-size: 8px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.tw-card-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; margin-top: 6px; }
.tw-card-wld { display: flex; gap: 4px; font-size: 10px; padding-top: 6px; border-top: 1px dashed rgba(var(--n-surf),0.06); }

/* ================================================================= */
/*   5. GROUND-WISE                                                  */
/* ================================================================= */
.gw-table {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  padding: 4px 12px;
}
.gw-head, .gw-row {
  display: grid; grid-template-columns: 2.5fr 50px 70px 100px 60px 60px 50px 70px;
  align-items: center; gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(var(--n-surf),0.05);
  font-size: 11px;
}
.gw-head { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45); }
.gw-row:last-child { border-bottom: 0; }
.gw-ground { font-size: 12px; font-weight: 600; display: flex; align-items: center; }
.gw-bar { height: 6px; background: rgba(var(--n-surf),0.05); border-radius: 3px; overflow: hidden; }
.gw-bar-fill { height: 100%; border-radius: 3px; }

/* ================================================================= */
/*   6. RECENT MATCHES                                               */
/* ================================================================= */
.rm-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (max-width: 700px) { .rm-summary { grid-template-columns: repeat(3, 1fr); } }
.rm-sum { padding: 10px 12px; background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 8px; }
.rm-sum-k { font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.rm-sum-v { font-size: 22px; font-weight: 800; margin-top: 2px; letter-spacing: -0.5px; }

.rm-list { display: flex; flex-direction: column; gap: 5px; }
.rm-card {
  display: grid; grid-template-columns: 56px 60px 60px 1fr 110px 110px;
  align-items: center; gap: 10px;
  padding: 9px 12px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 8px;
  color: inherit; text-decoration: none;
  border-left: 3px solid transparent;
}
.rm-card.result-w { border-left-color: oklch(0.7 0.22 27); }
.rm-card.result-l { border-left-color: oklch(0.72 0.25 355); }
.rm-card.result-d { border-left-color: rgba(var(--n-surf),0.2); }
.rm-card:hover { border-color: rgba(var(--n-surf),0.14); }
.rm-card-date { text-align: center; line-height: 1; }
.rm-card-fmt { font-size: 9px; letter-spacing: 1.5px; padding: 2px 5px; background: rgba(var(--n-surf),0.06); border-radius: 3px; text-align: center; }
.rm-card-vs { font-size: 14px; font-weight: 800; letter-spacing: -0.3px; }
.rm-card-venue { font-size: 10px; color: rgba(var(--n-ink),0.6); }
.rm-card-perf { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; }
.rm-card-res { display: flex; align-items: center; gap: 6px; }
.rm-tag { font-size: 9px; padding: 2px 5px; border-radius: 3px; font-weight: 800; }
.rm-tag.w { background: oklch(0.7 0.22 27); color: var(--n-ground); }
.rm-tag.l { background: oklch(0.72 0.25 355 / 0.7); color: #fff; }
.rm-tag.d { background: rgba(var(--n-surf),0.1); color: rgba(var(--n-ink),0.7); }

/* ================================================================= */
/*   7. MATCHUPS                                                     */
/* ================================================================= */
.mu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 700px) { .mu-grid { grid-template-columns: 1fr; } }
.mu-tile {
  padding: 14px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.mu-tile.adv-bat  { border-left: 3px solid oklch(0.7 0.22 27); }
.mu-tile.adv-bowl { border-left: 3px solid oklch(0.72 0.25 355); }
.mu-head { display: flex; justify-content: space-between; align-items: center; }
.mu-bowler { display: flex; flex-direction: column; gap: 2px; }
.mu-verdict { font-size: 9px; letter-spacing: 1.5px; padding: 3px 6px; border-radius: 4px; font-weight: 700; }
.mu-verdict.bat { background: oklch(0.7 0.22 27 / 0.15); color: oklch(0.7 0.22 27); }
.mu-verdict.bowl { background: oklch(0.72 0.25 355 / 0.15); color: oklch(0.72 0.25 355); }
.mu-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mu-bar-row { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px dashed rgba(var(--n-surf),0.06); }
.mu-bar { flex: 1; height: 8px; background: rgba(var(--n-surf),0.05); border-radius: 4px; overflow: hidden; }
.mu-bar-fill { height: 100%; border-radius: 4px; transition: width 400ms; }

/* Switcher needs more space for 15 buttons */
.cs-switcher { max-width: 460px !important; }

.mobile-view .td-stats { grid-template-columns: 1fr 1fr; }
.mobile-view .td-grid { grid-template-columns: 1fr; }
.mobile-view .rk-table, .mobile-view .yw-table, .mobile-view .gw-table { font-size: 10px; }
.mobile-view .tw-cards { grid-template-columns: 1fr; }
.mobile-view .mu-grid { grid-template-columns: 1fr; }


/* Section divider for combined views */
.tw-section-h {
  font-size: 10px; letter-spacing: 2.5px;
  color: rgba(var(--n-surf),0.7);
  padding: 6px 0;
  margin-top: 4px;
}

/* Year-wise: stacked bar + legend */
.yw-bar-stack.split { display: flex; flex-direction: column; }
.yw-bar-fill.league { border-radius: 4px 4px 0 0; }
.yw-bar-fill.intl   { border-radius: 0 0 0 0; }
.yw-bar-stack.split .yw-bar-fill.intl:only-child { border-radius: 4px 4px 0 0; }

.yw-legend {
  display: flex; gap: 16px; padding-top: 8px;
  font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5);
}
.yw-leg-sw {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 6px; vertical-align: middle;
}

/* Year-wise table: league row variant */
.yw-row.league-row { background: rgba(99,179,255,0.02); }
.yw-row.league-row:hover { background: rgba(99,179,255,0.06); }

/* ================================================================= */
/*   PORTAL — ASPX PORT ADDITIONS                                    */
/* ================================================================= */

/* Logo dot accent colours */
.n-dot-lime { background: oklch(0.7 0.22 27); }
.n-dot-cyan { background: oklch(0.6 0.18 254); }
.n-dot-pink { background: oklch(0.72 0.25 355); }

/* Text accent colours */
.n-accent-lime   { color: oklch(0.7 0.22 27); }
.n-accent-cyan   { color: oklch(0.6 0.18 254); }
.n-accent-pink   { color: oklch(0.72 0.25 355); }
.n-accent-amber  { color: oklch(0.82 0.18 75); }
.n-accent-red    { color: oklch(0.68 0.23 25); }

/* Logo year label */
.n-logo-year {
  color: rgba(var(--n-ink),0.56);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3px;
  font-family: 'JetBrains Mono', monospace;
}

/* Nav badge colour variants */
.n-nav-badge-live { background: oklch(0.68 0.23 25); }

/* Footer series strip */
.n-footer-series {
  margin-top: 12px;
  font-size: 11px;
  line-height: 2;
  color: rgba(var(--n-ink),0.5);
}
.n-footer-series a { color: rgba(var(--n-ink),0.6); }
.n-footer-series a:hover { color: rgb(var(--n-ink)); }

/* ================================================================= */
/*   PORTAL — ASPX PAGE COMPONENT ADDITIONS                         */
/* ================================================================= */

/* Circular image helper */
img.circular { border-radius: 50%; object-fit: cover; }

/* ─── DATA TABLE (ASP.NET GridView) ─── */
.n-data-table { width: 100%; border-collapse: collapse; font-size: 12px; color: rgba(var(--n-ink),0.85); }
.n-data-table th { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45); text-transform: uppercase; padding: 7px 6px; border-bottom: 1px solid rgba(var(--n-surf),0.1); text-align: right; font-weight: 400; }
.n-data-table th:first-child, .n-data-table th:nth-child(2) { text-align: left; }
.n-data-table td { padding: 7px 6px; border-bottom: 1px dashed rgba(var(--n-surf),0.05); text-align: right; vertical-align: middle; }
.n-data-table td:first-child, .n-data-table td:nth-child(2) { text-align: left; }
.n-data-table tr:last-child td { border-bottom: 0; }
.n-data-table a { color: rgb(var(--n-ink)); font-weight: 500; text-decoration: none; }
.n-data-table a:hover { color: oklch(0.7 0.22 27); }

/* ─── MATCH NAVIGATION BAR ─── */
.n-match-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.n-match-nav-label { font-size: 13px; font-weight: 700; color: rgb(var(--n-ink)); margin-right: 4px; }
.n-match-nav-item { padding: 5px 13px; background: rgba(var(--n-surf),0.04); border: 1px solid rgba(var(--n-surf),0.08); border-radius: 6px; font-size: 12px; font-weight: 600; color: rgba(var(--n-ink),0.7); letter-spacing: 0.5px; text-decoration: none; }
.n-match-nav-item:hover { color: rgb(var(--n-ink)); border-color: rgba(var(--n-surf),0.16); }
.n-match-nav-item.on { color: var(--n-ground); background: oklch(0.7 0.22 27); border-color: transparent; }

/* ─── RECORDS PAGE ─── */
.n-records-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
@media (max-width: 900px) { .n-records-formats { grid-template-columns: 1fr; } }
.n-records-teams { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 32px; }
@media (max-width: 900px) { .n-records-teams { grid-template-columns: repeat(2, 1fr); } }
.n-records-team { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 10px; font-size: 14px; font-weight: 600; color: rgb(var(--n-ink)); text-decoration: none; transition: border-color 150ms; }
.n-records-team:hover { border-color: rgba(var(--n-surf),0.2); }
.n-records-years { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px; background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 10px; }
.n-records-year-link { font-size: 12px; font-family: 'JetBrains Mono', monospace; color: rgba(var(--n-ink),0.7); padding: 4px 8px; border-radius: 4px; background: rgba(var(--n-surf),0.04); text-decoration: none; }
.n-records-year-link:hover { color: oklch(0.7 0.22 27); }

/* ─── SQUAD GRID (DataList, RepeatLayout="Flow") ─── */
.n-squad-grid { display: block; }
.n-squad-grid > span { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .n-squad-grid > span { grid-template-columns: 1fr; } }
.n-squad-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 10px; }
.n-squad-card .circular { width: 46px; height: 46px; flex-shrink: 0; }
.n-squad-name { font-size: 13px; font-weight: 600; color: rgb(var(--n-ink)); }
.n-squad-name a { color: inherit; text-decoration: none; }
.n-squad-name a:hover { color: oklch(0.7 0.22 27); }
.n-squad-role { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); margin-top: 3px; text-transform: uppercase; }

/* ─── NEWS GRID (DataList, RepeatLayout="Flow") ─── */
.n-news-grid { display: block; }
.n-news-grid > span { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .n-news-grid > span { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .n-news-grid > span { grid-template-columns: 1fr; } }
.n-news-card { background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 12px; overflow: hidden; display: block; text-decoration: none; }
.n-news-card:hover { border-color: rgba(var(--n-surf),0.14); }
.n-news-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.n-news-card-body { padding: 12px; }
.n-news-card-title { font-size: 13px; font-weight: 600; color: rgb(var(--n-ink)); line-height: 1.5; }
.n-news-card-title a { color: inherit; text-decoration: none; }
.n-news-card-title a:hover { color: oklch(0.7 0.22 27); }

/* ─── ARCHIVE MATCH LIST ─── */
.n-archive-years { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.n-archive-year-link { font-size: 11px; font-family: 'JetBrains Mono', monospace; color: rgba(var(--n-ink),0.7); padding: 5px 10px; border-radius: 5px; background: rgba(var(--n-surf),0.04); border: 1px solid rgba(var(--n-surf),0.08); text-decoration: none; }
.n-archive-year-link:hover { color: rgb(var(--n-ink)); border-color: rgba(var(--n-surf),0.16); }
.n-series-block { background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.n-series-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; text-decoration: none; }
.n-series-toggle-name { font-size: 13px; font-weight: 600; color: rgb(var(--n-ink)); }
.n-series-toggle:hover .n-series-toggle-name { color: oklch(0.7 0.22 27); }
.n-series-body { padding: 0 0 8px; }
.n-match-item { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid rgba(var(--n-surf),0.04); }
.n-match-item:hover { background: rgba(var(--n-surf),0.02); }
.n-match-item-team { display: flex; flex-direction: column; gap: 3px; }
.n-match-item-team.right { align-items: flex-end; text-align: right; }
.n-match-item-team img { width: 44px; height: 30px; object-fit: contain; }
.n-match-item-score { font-size: 13px; font-weight: 700; color: rgb(var(--n-ink)); }
.n-match-item-overs { font-size: 10px; color: rgba(var(--n-ink),0.5); font-family: 'JetBrains Mono', monospace; }
.n-match-item-center { text-align: center; }
.n-match-item-no { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.4); margin-bottom: 4px; }
.n-match-item-result { font-size: 11px; font-weight: 600; color: oklch(0.7 0.22 27); }
.n-match-item-date { font-size: 10px; color: rgba(var(--n-ink),0.5); margin-top: 3px; }
.n-match-item-scorecard { font-size: 10px; color: rgba(var(--n-ink),0.6); text-decoration: none; margin-top: 3px; display: inline-block; }
.n-match-item-scorecard:hover { color: oklch(0.7 0.22 27); }

/* ─── PLAYER PROFILE ─── */
.n-player-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
@media (max-width: 960px) { .n-player-layout { grid-template-columns: 1fr; } }
.n-player-hero { display: grid; grid-template-columns: 220px 1fr; gap: 20px; margin-bottom: 24px; align-items: start; }
@media (max-width: 700px) { .n-player-hero { grid-template-columns: 1fr; } }
.n-player-photo { width: 100%; border-radius: 12px; display: block; object-fit: cover; max-height: 300px; }
.n-player-name { font-size: clamp(24px, 3.5vw, 40px); font-weight: 800; letter-spacing: -1px; color: rgb(var(--n-ink)); line-height: 1.1; margin-bottom: 12px; }
.n-bio-table { width: 100%; border-collapse: collapse; }
.n-bio-table tr td:first-child { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45); padding: 6px 12px 6px 0; white-space: nowrap; vertical-align: middle; }
.n-bio-table tr td:last-child { font-size: 13px; font-weight: 500; color: rgb(var(--n-ink)); padding: 6px 0; border-bottom: 1px dashed rgba(var(--n-surf),0.06); }
.n-bio-table tr:last-child td:last-child { border-bottom: 0; }
.n-debut-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.n-debut-card { padding: 14px; background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 10px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.n-debut-fmt { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); margin-bottom: 10px; }
.n-debut-val { font-size: 14px; font-weight: 700; color: rgb(var(--n-ink)); }
.n-debut-sub { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.4); margin-top: 4px; }
.n-ranking-cards { display: flex; flex-direction: column; gap: 8px; }
.n-ranking-card { padding: 12px 14px; background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 8px; }
.n-ranking-fmt { font-size: 9px; letter-spacing: 2px; color: oklch(0.7 0.22 27); margin-bottom: 6px; }
.n-ranking-row { display: flex; justify-content: space-between; font-size: 12px; color: rgba(var(--n-ink),0.7); margin-top: 3px; }
.n-ranking-row b { color: rgb(var(--n-ink)); }

/* ─── INNING STATS BREAKDOWN ─── */
.n-inning-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
@media (max-width: 700px) { .n-inning-stats { grid-template-columns: repeat(2, 1fr); } }
.n-inning-stat { padding: 12px; background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 8px; }
.n-inning-stat-k { font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.45); }
.n-inning-stat-v { font-size: 15px; font-weight: 700; color: rgb(var(--n-ink)); margin-top: 4px; letter-spacing: -0.3px; }

/* ─── FALL OF WICKETS ─── */
.n-fow { padding: 8px 12px; background: rgba(var(--n-surf),0.02); border: 1px solid rgba(var(--n-surf),0.05); border-radius: 6px; font-size: 11px; color: rgba(var(--n-ink),0.7); margin: 8px 0; }
.n-fow-label { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.4); margin-right: 8px; display: inline; }

/* ─── MATCH INFO LIST ─── */
.n-info-list { display: flex; flex-direction: column; gap: 4px; }
.n-info-row { padding: 9px 12px; background: rgba(var(--n-surf),0.03); border: 1px solid rgba(var(--n-surf),0.05); border-radius: 6px; font-size: 12px; color: rgba(var(--n-ink),0.8); }
.n-info-row a { color: rgba(var(--n-ink),0.8); text-decoration: none; }
.n-info-row a:hover { color: rgb(var(--n-ink)); }

/* ─── LIVE SCORE CARDS ─── */
.n-live-type { margin-bottom: 32px; }
.n-live-type-head { font-size: 10px; letter-spacing: 3px; color: rgba(var(--n-ink),0.5); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(var(--n-surf),0.06); }
.n-live-cards > span { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 700px) { .n-live-cards > span { grid-template-columns: 1fr; } }
.n-live-card { background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 12px; padding: 14px; }
.n-live-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.n-live-card-match { font-size: 10px; letter-spacing: 1px; color: rgba(var(--n-ink),0.5); font-family: 'JetBrains Mono', monospace; }
.n-live-card-venue { font-size: 10px; color: rgba(var(--n-ink),0.4); }
.n-live-card-date { font-size: 18px; font-weight: 800; color: oklch(0.7 0.22 27); font-family: 'JetBrains Mono', monospace; letter-spacing: -0.5px; line-height: 1; }
.n-live-card-series { font-size: 11px; color: rgba(var(--n-ink),0.6); margin-bottom: 10px; }
.n-live-card-teams { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.n-live-card-team { display: flex; justify-content: space-between; align-items: baseline; }
.n-live-card-team-name { font-size: 14px; font-weight: 600; color: rgb(var(--n-ink)); }
.n-live-card-team-score { font-size: 15px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: rgb(var(--n-ink)); }
.n-live-card-result { font-size: 12px; font-weight: 600; color: oklch(0.7 0.22 27); margin-bottom: 8px; }
.n-live-card-footer { display: flex; justify-content: space-between; align-items: center; }
.n-live-card-status { font-size: 11px; color: oklch(0.68 0.23 25); font-weight: 600; }
.n-live-card-link { font-size: 11px; color: rgba(var(--n-ink),0.6); text-decoration: none; }
.n-live-card-link:hover { color: oklch(0.7 0.22 27); }

/* ================================================================= */
/*   BOOTSTRAP GRID BACKWARD-COMPAT (server-generated HTML)         */
/*   Code-behind outputs col-md-* / col-xl-* — provide dark-native  */
/*   flex grid so those classes still layout correctly               */
/* ================================================================= */
.container-fluid { width: 100%; padding: 0 16px; box-sizing: border-box; }
.row { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.no-margin { margin: 0 !important; }
.padding-0 { padding: 0 !important; }
[class*="col-"] { padding: 0 6px; box-sizing: border-box; }
.col-sm-6  { width: 50%; }
.col-sm-12 { width: 100%; }
.col-md-4  { width: 33.333%; }
.col-md-6  { width: 50%; }
.col-md-12 { width: 100%; }
.col-xl-2  { width: 16.666%; }
.col-xl-3  { width: 25%; }
.col-xl-4  { width: 33.333%; }
.col-xl-6  { width: 50%; }
.col-xl-9  { width: 75%; }
.col-xl-10 { width: 83.333%; }
.col-xl-12 { width: 100%; }
@media (max-width: 900px) {
  .col-xl-2,.col-xl-3,.col-xl-4,.col-xl-6,.col-xl-9,.col-xl-10,.col-xl-12 { width: 100%; }
}
@media (max-width: 640px) {
  .col-md-4,.col-md-6,.col-sm-6 { width: 100%; }
}
/* Bootstrap display/justify utilities used by page content */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-none  { display: none !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }
.text-sm-right { text-align: right; }
@media (min-width: 576px) { .d-none.d-sm-block { display: block !important; } }
@media (min-width: 576px) { .d-sm-none { display: none !important; } }
/* Progress bars used by poll widget */
.progress { background: rgba(var(--n-surf),0.06); border-radius: 6px; height: 8px; overflow: hidden; margin-top: 4px; }
.progress-bar { height: 100%; border-radius: 6px; transition: width 0.6s ease; }
.bg-success { background: oklch(0.72 0.2 152) !important; }
.bg-info    { background: oklch(0.68 0.18 254) !important; }
.mb-3 { margin-bottom: 12px; }
.result-label { font-size: 12px; color: rgba(var(--n-ink),0.8); }

/* ================================================================= */
/*   BOOTSTRAP MODAL — dark neon re-implementation                   */
/*   Bootstrap 4 JS depends on these class names and inline styles   */
/* ================================================================= */
.modal {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1050;
  overflow-x: hidden; overflow-y: auto; outline: 0;
}
.modal-dialog {
  position: relative; width: auto;
  margin: 1.75rem auto; max-width: 500px;
  pointer-events: none;
}
.modal-dialog-centered {
  display: flex; align-items: center;
  min-height: calc(100% - 3.5rem);
}
.modal.fade .modal-dialog { transition: transform 0.25s ease-out; transform: translate(0,-50px); }
.modal.show .modal-dialog { transform: none; }
.modal-content {
  position: relative; display: flex; flex-direction: column;
  width: 100%; pointer-events: auto;
  background: rgba(var(--n-panel2),0.97);
  border: 1px solid rgba(var(--n-surf),0.1);
  border-radius: 16px; outline: 0;
  box-shadow: 0 32px 64px rgba(var(--n-shadow),0.55);
}
.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(var(--n-surf),0.08);
}
.modal-title { font-size: 15px; font-weight: 700; color: rgb(var(--n-ink)); margin: 0; line-height: 1.5; }
.close {
  background: transparent; border: 0; padding: 4px 8px;
  font-size: 22px; line-height: 1;
  color: rgba(var(--n-ink),0.4); cursor: pointer; opacity: 1;
}
.close:hover { color: rgb(var(--n-ink)); }
.modal-body { flex: 1 1 auto; padding: 20px; color: rgba(var(--n-ink),0.85); }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 12px 20px; gap: 8px;
  border-top: 1px solid rgba(var(--n-surf),0.08);
}
.btn-secondary {
  padding: 7px 14px;
  background: rgba(var(--n-surf),0.07);
  border: 1px solid rgba(var(--n-surf),0.1);
  border-radius: 8px; font-size: 13px;
  color: rgba(var(--n-ink),0.8); cursor: pointer;
}
.btn-secondary:hover { background: rgba(var(--n-surf),0.12); color: rgb(var(--n-ink)); }
.modal-backdrop {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1040; background: rgba(var(--n-shadow),0.65);
  backdrop-filter: blur(4px);
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 1; }

/* ================================================================= */
/*   CRICSTATS MASTER — SHELL & CHROME                               */
/* ================================================================= */

/* Logo dot colour variants */
.n-ld-lime { background: oklch(0.85 0.25 130); }
.n-ld-cyan { background: oklch(0.7 0.18 210); }
.n-ld-pink { background: oklch(0.7 0.22 350); }

/* Hidden utility — legacy duplicate server controls sit here */
.n-hidden { display: none !important; }
/* Visually hidden but still read by screen readers and still counted as page
   content — unlike .n-hidden, which is display:none and therefore invisible to
   assistive tech and worth nothing for search. Use this for a heading that the
   layout has no room to show but the document still needs. */
.n-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mono font on quick-menu chrome */
.n-qm-label,
.n-qm-item,
.n-qm-more { font-family: 'JetBrains Mono', monospace; }

/* ---- Quick menu nav: BuildTopMenuHtml() now outputs native n-qm-item divs ---- */
/* The Bootstrap nav-item overrides below are kept for legacy safety only        */
.n-qm-nav { display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; }

/* ---- statspage-heading used by content pages ---- */
.statspage-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 700;
  color: rgb(var(--n-ink));
  letter-spacing: -0.02em;
  padding: 0;
  margin: 0 0 16px;
}

/* ---- Select2 dark theme ---- */
.select2-selection__clear { display: none !important; }
.select2-container--default .select2-selection--single {
  background: rgba(var(--n-surf),0.05);
  border: 1px solid rgba(var(--n-surf),0.1);
  border-radius: 8px; height: 38px;
  color: rgb(var(--n-ink));
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: rgba(var(--n-ink),0.9);
  line-height: 38px; padding-left: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 6px; }
.select2-dropdown {
  background: rgba(var(--n-panel2),0.97);
  border: 1px solid rgba(var(--n-surf),0.1);
  border-radius: 0 0 10px 10px;
}
.select2-container--default .select2-results__option {
  font-size: 12px; color: rgba(var(--n-ink),0.8);
  font-family: 'JetBrains Mono', monospace;
}
.select2-container--default .select2-results__option--highlighted {
  background: rgba(var(--n-surf),0.08) !important;
  color: rgb(var(--n-ink)) !important;
}

/* ---- Match slider (footer) ---- */
.n-match-slider-wrap {
  display: flex; align-items: center;
  background: rgba(var(--n-inset),0.25);
  border-top: 1px solid rgba(var(--n-surf),0.04);
  padding: 8px 0;
  overflow: hidden;
}
.match-slider {
  flex: 1; min-width: 0;
  display: flex; gap: 10px; align-items: stretch;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; padding: 4px 8px;
}
.match-slider::-webkit-scrollbar { display: none; }
.n-match-slider-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: rgba(var(--n-surf),0.05);
  border: 1px solid rgba(var(--n-surf),0.09);
  border-radius: 8px;
  color: rgba(var(--n-ink),0.55);
  font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; margin: 0 6px;
  transition: background 120ms, color 120ms;
}
.n-match-slider-btn:hover { background: rgba(var(--n-surf),0.1); color: rgb(var(--n-ink)); }

/* Footer match strip cards — markup comes from StaticClass.Top10Matches()
   (AJAX: Default.aspx/Top10Matches). These class names predate the Neon
   redesign and had no styles at all, so the strip rendered invisible. */
.match-card {
  flex: 0 0 auto;
  min-width: 176px; max-width: 230px;
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-radius: 10px;
  transition: transform 140ms, border-color 140ms;
}
.match-card:hover { transform: translateY(-2px); border-color: rgba(var(--n-surf),0.18); }
.match-card > a { display: block; padding: 8px 10px; text-decoration: none; color: inherit; }
.match-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: -0.2px;
  color: rgb(var(--n-ink));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.match-status {
  display: flex; align-items: center; gap: 5px; margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.4px;
  color: rgba(var(--n-ink),0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.live-dot     { background: oklch(0.7 0.22 27);  animation: pulse 1.2s infinite; }
.upcoming-dot { background: oklch(0.6 0.18 254); }
.result-dot   { background: oklch(0.72 0.25 355); }
.match-status.live { color: oklch(0.7 0.22 27); }

/* ---- Partner sites bar ---- */
.n-partner-bar {
  display: flex;
  border-top: 1px solid rgba(var(--n-surf),0.04);
  background: rgba(var(--n-inset),0.15);
}
.n-partner-site {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 8px;
  border-right: 1px solid rgba(var(--n-surf),0.04);
  opacity: 0.5;
  transition: opacity 150ms, background 150ms;
}
.n-partner-site:last-child { border-right: 0; }
.n-partner-site:hover { opacity: 1; background: rgba(var(--n-surf),0.03); }
.n-partner-site img { display: block; max-height: 22px; }

/* Past-years link strip spacing */
.n-pastyears { margin-top: 24px; }

/* Footer desc text */
.n-footer-desc {
  font-size: 12px; line-height: 1.65;
  color: rgba(var(--n-ink),0.38);
  margin: 10px 0 0;
}

/* Visit stats row placeholder */
.n-footer-visit { min-height: 0; overflow: hidden; }

/* ================================================================= */
/*   HOMEPAGE LAYOUT — n-home-layout / n-home-aside                 */
/* ================================================================= */
.n-page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.n-year-select { min-width: 150px; }

.n-home-layout {
  display: grid; grid-template-columns: 1fr 300px;
  gap: 24px; align-items: start;
}
@media (max-width: 1100px) { .n-home-layout { grid-template-columns: 1fr; } }

.n-home-aside { display: flex; flex-direction: column; gap: 14px; }

/* Loader spinner (used by sidebar AJAX widgets) */
.loader {
  display: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(var(--n-surf),0.08);
  border-top-color: oklch(0.85 0.25 130);
  animation: spin 0.75s linear infinite;
  margin: 12px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* News cards (output by DailyNews AJAX) */
.news-section { display: flex; flex-direction: column; gap: 6px; }
.news-card {
  display: flex; gap: 12px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px; padding: 12px; overflow: hidden;
  cursor: pointer; transition: border-color 150ms;
}
.news-card:hover { border-color: rgba(var(--n-surf),0.14); }
.news-img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.news-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.news-title { font-weight: 600; font-size: 13px; line-height: 1.4; color: rgb(var(--n-ink)); margin-bottom: 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.news-meta { font-size: 10px; color: rgba(var(--n-ink),0.5); display: flex; justify-content: space-between; align-items: center; }
.news-link { color: oklch(0.7 0.18 210); }
.news-link:hover { color: rgb(var(--n-ink)); }
.view-all { text-align: center; margin-top: 8px; }
.view-all a { color: oklch(0.7 0.18 210); font-size: 12px; font-weight: 600; }
@media (max-width: 500px) { .news-img { width: 60px; height: 60px; } }

/* Daily poll widget */
.poll-card {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 12px;
  padding: 16px;
}
.poll-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: oklch(0.7 0.22 27); margin: 0 0 10px;
}
.poll-question {
  font-size: 14px; font-weight: 600; color: rgb(var(--n-ink));
  line-height: 1.4; margin: 0 0 12px;
}
.poll-option {
  padding: 9px 14px;
  background: rgba(var(--n-surf),0.04);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(var(--n-ink),0.8);
  transition: background 0.15s, border-color 0.15s;
}
.poll-option:hover { background: rgba(var(--n-surf),0.08); border-color: rgba(var(--n-surf),0.16); color: rgb(var(--n-ink)); }
.poll-option.active {
  background: oklch(0.7 0.22 27 / 0.15);
  border-color: oklch(0.7 0.22 27 / 0.5);
  color: rgb(var(--n-ink));
}
.vote-btn { margin-top: 8px; }

/* Weekly stats snapshot box */
.snapshot-box {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px; padding: 14px;
}
.snapshot-box h3 { font-size: 10px; letter-spacing: 2px; color: rgba(var(--n-ink),0.45); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(var(--n-surf),0.06); font-weight: 400; }
.snapshot-table { display: flex; flex-direction: column; gap: 6px; }
.snapshot-header, .snapshot-row { display: grid; grid-template-columns: 50px 1fr 1fr; align-items: center; gap: 6px; }
.snapshot-header { font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.4); padding: 4px 6px; }
.snapshot-row { padding: 5px 4px; border-bottom: 1px dashed rgba(var(--n-surf),0.04); font-size: 12px; }
.snapshot-row:last-child { border-bottom: 0; }
.snapshot-row .label { font-weight: 600; color: rgb(var(--n-ink)); }
.snapshot-row .col { text-align: center; color: rgba(var(--n-ink),0.65); }
.snapshot-row .col.this-week { color: oklch(0.85 0.25 130); font-weight: 600; }
.snapshot-row .col.last-week { color: rgba(var(--n-ink),0.4); }
.highlight { background: rgba(var(--n-surf),0.08); border-radius: 4px; padding: 1px 4px; font-weight: 600; }

/* Comparisons section */
.compare-heading { font-size: 10px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); margin-bottom: 10px; text-transform: uppercase; }
.compare-card-wrap { margin-top: 4px; }

/* Series stats generated by litStats */
.series-heading { padding: 3px; margin: 0; }
.series-heading a { font-size: 14px; font-weight: 600; color: rgba(var(--n-ink),0.9); }
.series-heading a:hover { color: rgb(var(--n-ink)); }
.series-date { font-size: 11px; color: rgba(var(--n-ink),0.5); padding: 3px; }
.series-stats { border-left: 1px solid rgba(var(--n-surf),0.06); border-bottom: 1px solid rgba(var(--n-surf),0.06); }
.series-right { text-align: center; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500; color: rgb(var(--n-ink)); }
.single-heading { text-align: center; color: rgba(var(--n-ink),0.65); font-size: 11px; }
.single-stats { text-align: center; font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: rgb(var(--n-ink)); }
.match-teams { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; }
.mb-0-white { color: rgba(var(--n-ink),0.9) !important; }
.table-border { border: 1px solid rgba(var(--n-surf),0.06); background: rgba(var(--n-panel),0.4); border-radius: 6px; }
.card { background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.06); border-radius: 8px; margin-bottom: 8px; }
.card-body { padding: 10px; }
.card-link { color: rgba(var(--n-ink),0.8); font-size: 12px; }
.card-link:hover { color: rgb(var(--n-ink)); }
.card-margin { margin-bottom: 8px; }
.card-columns { column-count: 2; column-gap: 8px; }
.media-body h4 { font-family: 'Space Grotesk', sans-serif; font-size: 2.5rem; color: rgb(var(--n-ink)); margin: 0; }
.media-body h3 { font-size: 14px; color: rgba(var(--n-ink),0.7); }
.form-select { background: rgba(var(--n-surf),0.05); border: 1px solid rgba(var(--n-surf),0.1); border-radius: 8px; color: rgb(var(--n-ink)); padding: 8px 12px; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.clear { clear: both; }

/* ================================================================= */
/*   PLAYER PROFILE PAGE — class names generated by code-behind     */
/*   Migrated from inline <style> block; neon palette applied       */
/* ================================================================= */

/* Hero banner */
.hero {
  position: relative;
  background: rgba(var(--n-ground-rgb),0.95);
  border-bottom: 1px solid rgba(var(--n-surf),0.06);
  overflow: hidden; padding: 40px 24px 36px;
}
.hero::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, oklch(0.7 0.18 210 / 0.1) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; bottom: -80px; left: 30%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, oklch(0.7 0.22 27 / 0.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 32px;
  position: relative; z-index: 1;
}
.hero-avatar {
  width: 90px; height: 90px; border-radius: 50%;
  background: rgba(var(--n-panel3),0.8);
  border: 2px solid oklch(0.7 0.18 210);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 800;
  font-size: 2rem; color: oklch(0.7 0.18 210);
  flex-shrink: 0;
  box-shadow: 0 0 28px oklch(0.7 0.18 210 / 0.2);
}
.hero-info { flex: 1; }
.hero-country {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 3px; color: oklch(0.7 0.18 210);
  text-transform: uppercase; margin-bottom: 6px;
}
.hero-name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1;
  color: rgb(var(--n-ink)); letter-spacing: -0.02em; margin-bottom: 10px;
}
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tag {
  background: rgba(var(--n-panel3),0.8);
  border: 1px solid rgba(var(--n-surf),0.08); border-radius: 6px;
  padding: 3px 10px; font-size: 12px;
  color: rgba(var(--n-ink),0.5);
  font-family: 'JetBrains Mono', monospace;
}
.tag.highlight { border-color: oklch(0.7 0.18 210); color: oklch(0.7 0.18 210); }
.hero-insight {
  background: linear-gradient(135deg, oklch(0.7 0.18 210 / 0.06), oklch(0.7 0.22 27 / 0.04));
  border: 1px solid oklch(0.7 0.18 210 / 0.2); border-radius: 10px;
  padding: 14px 18px; font-size: 14px; color: rgba(var(--n-ink),0.8);
  line-height: 1.7; position: relative; margin-top: 8px;
}
.hero-insight::before {
  content: '◆ AI INSIGHT'; display: block;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px;
  color: oklch(0.7 0.18 210); margin-bottom: 6px;
}
/* Format tabs */
.format-tabs { max-width: 1200px; margin: 0 auto; padding: 20px 24px 0; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(var(--n-surf),0.08); }
.tab {
  padding: 10px 20px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1px;
  color: rgba(var(--n-ink),0.45); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 160ms, border-color 160ms; text-decoration: none;
}
.tab:hover { color: rgba(var(--n-ink),0.85); }
.tab.active { color: oklch(0.7 0.18 210); border-bottom-color: oklch(0.7 0.18 210); }
/* Page / section layout */
.page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; }
.section { margin-bottom: 40px; animation: fadeUp 0.4s ease both; }
.section:nth-child(2) { animation-delay: 0.05s; }
.section:nth-child(3) { animation-delay: 0.10s; }
.section:nth-child(4) { animation-delay: 0.15s; }
.section:nth-child(5) { animation-delay: 0.20s; }
.section:nth-child(6) { animation-delay: 0.25s; }
.section:nth-child(7) { animation-delay: 0.30s; }
.section:nth-child(8) { animation-delay: 0.35s; }
.section:nth-child(9) { animation-delay: 0.40s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.section-title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 800;
  font-size: 1.25rem; letter-spacing: -0.01em; color: rgb(var(--n-ink)); white-space: nowrap;
}
.section-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--n-surf),0.08), transparent); }
.section-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.4); background: rgba(var(--n-panel3),0.8);
  border: 1px solid rgba(var(--n-surf),0.06); border-radius: 4px; padding: 2px 8px;
  white-space: nowrap;
}
/* Career stat cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stat-card {
  background: rgba(var(--n-panel),0.6); border: 1px solid rgba(var(--n-surf),0.07); border-radius: 12px;
  padding: 16px; position: relative; overflow: hidden;
  transition: border-color 200ms, transform 200ms;
}
.stat-card:hover { border-color: oklch(0.7 0.18 210 / 0.3); transform: translateY(-2px); }
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, oklch(0.7 0.18 210), transparent);
  opacity: 0; transition: opacity 200ms;
}
.stat-card:hover::before { opacity: 1; }
.stat-label { font-size: 10px; color: rgba(var(--n-ink),0.4); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; }
.stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 800; color: rgb(var(--n-ink)); line-height: 1; }
.stat-value.accent { color: oklch(0.7 0.18 210); }
.stat-value.gold { color: oklch(0.82 0.18 87); }
/* Format breakdown */
.format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.format-card {
  background: rgba(var(--n-panel),0.6); border: 1px solid rgba(var(--n-surf),0.07); border-radius: 16px;
  padding: 20px; position: relative; overflow: hidden;
}
.format-card.test { border-top: 3px solid oklch(0.82 0.18 87); }
.format-card.odi  { border-top: 3px solid oklch(0.7 0.18 210); }
.format-card.t20  { border-top: 3px solid oklch(0.7 0.22 27); }
.format-name { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 1.15rem; letter-spacing: 1px; margin-bottom: 14px; }
.format-card.test .format-name { color: oklch(0.82 0.18 87); }
.format-card.odi  .format-name { color: oklch(0.7 0.18 210); }
.format-card.t20  .format-name { color: oklch(0.7 0.22 27); }
.format-stat { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(var(--n-surf),0.05); }
.format-stat:last-child { border-bottom: 0; }
.format-stat-label { font-size: 12px; color: rgba(var(--n-ink),0.45); }
.format-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; color: rgb(var(--n-ink)); }
/* Year chart */
.year-chart { overflow-x: auto; padding-bottom: 8px; }
.year-bars { display: flex; align-items: flex-end; gap: 6px; min-height: 120px; padding: 0 4px; }
.year-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 40px; }
.year-bar-wrap { width: 100%; display: flex; justify-content: center; align-items: flex-end; height: 100px; }
.year-bar {
  width: 80%; max-width: 32px; min-height: 4px;
  background: linear-gradient(180deg, oklch(0.7 0.18 210), oklch(0.7 0.18 210 / 0.3));
  border-radius: 4px 4px 0 0; position: relative; cursor: default;
  transition: opacity 200ms;
}
.year-bar:hover { opacity: 0.8; }
.year-bar-val {
  position: absolute; top: -22px; left: 50%;
  transform: translateX(-50%); font-size: 10px; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; color: oklch(0.7 0.18 210);
  opacity: 0; transition: opacity 200ms;
}
.year-bar:hover .year-bar-val { opacity: 1; }
.year-label { font-size: 10px; color: rgba(var(--n-ink),0.4); font-family: 'JetBrains Mono', monospace; }
/* Best/Worst opponent/ground cards */
.bw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.bw-card {
  background: rgba(var(--n-panel),0.6); border: 1px solid rgba(var(--n-surf),0.07); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color 200ms;
}
.bw-card:hover { border-color: oklch(0.7 0.18 210 / 0.25); }
.bw-card-name { font-weight: 600; font-size: 14px; color: rgb(var(--n-ink)); }
.bw-card-name a { color: inherit; text-decoration: none; }
.bw-card-name a:hover { color: oklch(0.7 0.18 210); }
.bw-card-matches { font-size: 11px; color: rgba(var(--n-ink),0.45); font-family: 'JetBrains Mono', monospace; }
.bw-card-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.bw-stat { display: flex; flex-direction: column; }
.bw-stat-label { font-size: 10px; color: rgba(var(--n-ink),0.4); text-transform: uppercase; letter-spacing: 1px; }
.bw-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 500; color: oklch(0.7 0.18 210); }
.bw-stat-val.gold { color: oklch(0.82 0.18 87); }
/* VS tables */
.vs-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(var(--n-surf),0.07); }
.vs-table { width: 100%; border-collapse: collapse; }
.vs-table thead tr { background: rgba(var(--n-panel3),0.8); }
.vs-table th { padding: 12px 16px; text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.4); text-transform: uppercase; border-bottom: 1px solid rgba(var(--n-surf),0.07); white-space: nowrap; }
.vs-table td { padding: 10px 16px; border-bottom: 1px solid rgba(var(--n-surf),0.04); font-size: 13px; }
.vs-table tr:last-child td { border-bottom: 0; }
.vs-table tbody tr { transition: background 150ms; }
.vs-table tbody tr:hover { background: oklch(0.7 0.18 210 / 0.04); }
.vs-table td.team-name { font-weight: 500; color: rgb(var(--n-ink)); }
.vs-table td a { color: oklch(0.7 0.18 210); text-decoration: none; font-weight: 500; }
.vs-table td a:hover { text-decoration: underline; }
.vs-table td.num { font-family: 'JetBrains Mono', monospace; color: rgb(var(--n-ink)); }
.vs-table td.good-val { color: oklch(0.72 0.2 152); font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.vs-table td.bad-val  { color: oklch(0.65 0.22 29); font-family: 'JetBrains Mono', monospace; }
/* Recent form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-card { background: rgba(var(--n-panel),0.6); border: 1px solid rgba(var(--n-surf),0.07); border-radius: 16px; padding: 20px 24px; }
.form-year { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 1.8rem; color: oklch(0.7 0.18 210); margin-bottom: 12px; }
.form-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(var(--n-surf),0.04); }
.form-row:last-child { border-bottom: 0; }
.form-row-label { font-size: 12px; color: rgba(var(--n-ink),0.45); }
.form-row-val { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: rgb(var(--n-ink)); }
/* Peak years */
.peak-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.peak-card {
  background: linear-gradient(135deg, rgba(var(--n-panel),0.7), rgba(var(--n-panel3),0.8));
  border: 1px solid rgba(var(--n-surf),0.07); border-radius: 16px; padding: 24px;
  position: relative; overflow: hidden;
}
.peak-card::after { content: ''; position: absolute; bottom: -30px; right: -30px; width: 120px; height: 120px; border-radius: 50%; background: oklch(0.7 0.18 210 / 0.05); }
.peak-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.4); text-transform: uppercase; margin-bottom: 8px; }
.peak-year { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 3.5rem; color: oklch(0.82 0.18 87); line-height: 1; margin-bottom: 4px; }
.peak-val { font-size: 14px; color: rgba(var(--n-ink),0.5); }
.peak-val strong { color: rgb(var(--n-ink)); }
/* Player profile responsive */
@media (max-width: 768px) {
  .hero-inner { flex-direction: column; gap: 16px; }
  .format-grid, .form-grid, .peak-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-name { font-size: 2.2rem; }
}

/* ================================================================= */
/*   CROSS-PAGE OVERRIDES — neutralise light-theme inline styles    */
/*   that appear in per-page <style> blocks across all 52 pages     */
/* ================================================================= */

/* Dark text classes that become invisible on dark background */
/* Use body prefix for higher specificity vs in-page <style> blocks */
body .td-normal, body .td-normal a,
body .sm-lb-pos, body .sm-lb-pos a,
body .sm-lb-pos-1, body .sm-lb-pos-1 a,
body .sm-lb-pos-2, body .sm-lb-pos-2 a,
body .sm-lb-pos-stats, body .sm-lb-pos-stats a,
body .black-color {
  color: rgba(var(--n-ink),0.85) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
/* Table hover — override light hover backgrounds */
.stats-table tbody tr:hover,
table.stats-table tbody tr:hover { background: rgba(var(--n-surf),0.04) !important; }

/* Stats page heading stripe variants */
.stats-head.stripe h1,
.stripe-v2 h1,
.stripe-v4 h1,
.stripe-v6 h1 {
  color: rgb(var(--n-ink)) !important;
  font-family: 'Space Grotesk', sans-serif !important;
}
.stats-head.stripe p,
.stripe-v2 p,
.stripe-v4 p {
  color: rgba(var(--n-ink),0.55) !important;
}
.stats-head.stripe { border-left-color: oklch(0.7 0.18 210) !important; }
.stripe-v2::before { background: oklch(0.7 0.18 210) !important; }
.stripe-v2::after  { background: oklch(0.7 0.18 210 / 0.5) !important; }
.stripe-v4 { background: linear-gradient(to right, oklch(0.7 0.18 210 / 0.06), transparent) !important; }
.stripe-v4::before { background: oklch(0.7 0.18 210) !important; }

/* Oswald font replacement — override across all pages */
[style*="Oswald"],
.match-teams,
.td-header,
.series-right,
.single-stats { font-family: 'Space Grotesk', sans-serif !important; }

/* td-header colour fix */
.td-header { color: rgba(var(--n-ink),0.85) !important; }

/* Stats table row borders */
.stats-table tr { border-top-color: rgba(var(--n-surf),0.06) !important; }
td { border-top-color: rgba(var(--n-surf),0.06) !important; }

/* Common "white" text helpers already in pages — keep working */
.mb-0-white { color: rgba(var(--n-ink),0.9) !important; }


/* MatchDetails / timeline */
.details td { border-top-color: rgba(var(--n-surf),0.06) !important; }
.card-title { color: rgba(var(--n-ink),0.85) !important; font-family: 'Space Grotesk', sans-serif !important; }
.bx-win  { color: oklch(0.72 0.2 152) !important; }
.bx-loss { color: oklch(0.65 0.22 29) !important; }
.verti-timeline .event-list { position: relative; padding: 0 0 30px 20px; }

/* .border-left used in teams page */
.border-left { border-left-color: rgba(var(--n-surf),0.06) !important; }
.border-btm  { border-bottom-color: rgba(var(--n-surf),0.06) !important; }

/* Light table backgrounds used in teams, series pages */
.table-border, .snapshot-box,
.card-body table tr, .card-body table td {
  background: transparent !important;
}
table.table tbody tr td,
table.table tbody tr th { background: transparent !important; color: rgba(var(--n-ink),0.85) !important; }
table.table thead tr th { background: rgba(var(--n-surf),0.04) !important; color: rgba(var(--n-ink),0.45) !important; }

/* Bootstrap table classes used by GridView controls */
.table { width: 100%; border-collapse: collapse; }
.table thead th { font-size: 10px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.4); padding: 8px 6px; border-bottom: 1px solid rgba(var(--n-surf),0.08); text-align: left; }
.table tbody td { padding: 8px 6px; border-bottom: 1px dashed rgba(var(--n-surf),0.05); font-size: 13px; color: rgba(var(--n-ink),0.85); vertical-align: middle; }
.table tbody tr:hover { background: rgba(var(--n-surf),0.03); }
.table-responsive { overflow-x: auto; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(var(--n-surf),0.015); }

/* Main/page content wrapper classes from Bootstrap themes */
.main-content { width: 100%; }
.page-content { padding: 0; }

/* Bootstrap utility replacements (Bootstrap CSS removed, keep these working) */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto !important; }
.d-flex    { display: flex !important; }
.d-none    { display: none !important; }
.d-block   { display: block !important; }
.d-inline  { display: inline !important; }
.d-grid    { display: grid !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }
.align-self-end { align-self: flex-end !important; }
.n-gap-sm { gap: 8px !important; }
.list-unstyled { list-style: none !important; padding-left: 0 !important; margin: 0 !important; }
/* Countdown timer target */
.n-countdown { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; color: rgb(var(--n-ink)); letter-spacing: 2px; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center  { justify-content: center !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }
.text-left   { text-align: left !important; }
.font-weight-bold { font-weight: 700 !important; }
.fw-bold          { font-weight: 700 !important; }
.fw-600           { font-weight: 600 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.ml-1, .ms-1 { margin-left: 0.25rem !important; }
.ml-2, .ms-2 { margin-left: 0.5rem !important; }
.ml-3, .ms-3 { margin-left: 1rem !important; }
.mr-1, .me-1 { margin-right: 0.25rem !important; }
.mr-2, .me-2 { margin-right: 0.5rem !important; }
.mr-3, .me-3 { margin-right: 1rem !important; }
.mx-3        { margin-left: 1rem !important; margin-right: 1rem !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pull-left  { float: left; }
.pull-right { float: right; }
.clearfix::after { content: ''; display: table; clear: both; }
.clear { clear: both; }
.rounded { border-radius: 4px !important; }
.rounded-circle { border-radius: 50% !important; }
.border { border: 1px solid rgba(var(--n-surf),0.08) !important; }
.border-0 { border: 0 !important; }
.shadow { box-shadow: 0 8px 24px rgba(var(--n-shadow),0.35) !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.small, small { font-size: 0.875em; }
.text-muted { color: rgba(var(--n-ink),0.45) !important; }
.text-white { color: rgb(var(--n-ink)) !important; }
.text-danger { color: oklch(0.65 0.22 29) !important; }
.text-success { color: oklch(0.72 0.2 152) !important; }
.text-warning { color: oklch(0.82 0.18 87) !important; }
.text-info    { color: oklch(0.7 0.18 210) !important; }
.badge { display: inline-block; padding: 0.2em 0.5em; font-size: 10px; font-weight: 700; border-radius: 4px; }
.btn { display: inline-block; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px; border: 1px solid rgba(var(--n-surf),0.1); background: rgba(var(--n-surf),0.05); color: rgba(var(--n-ink),0.85); transition: 0.2s; }
.btn:hover { background: rgba(var(--n-surf),0.1); }
.btn-primary { background: oklch(0.6 0.18 254) !important; border-color: oklch(0.6 0.18 254) !important; color: rgb(var(--n-ink)) !important; }
.btn-sm { padding: 3px 10px !important; font-size: 12px !important; }
/* avatar sizing */
.avatar-sm  { width: 2rem;    height: 2rem;    border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.avatar-md  { width: 3rem;    height: 3rem;    border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.avatar-lg  { width: 4rem;    height: 4rem;    border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bg-soft-primary { background: oklch(0.6 0.18 254 / 0.15) !important; }
.bg-soft-success { background: oklch(0.72 0.2 152 / 0.15) !important; }
.bg-soft-warning { background: oklch(0.82 0.18 87  / 0.15) !important; }
.bg-soft-danger  { background: oklch(0.65 0.22 29  / 0.15) !important; }

/* Bootstrap bg color overrides — force dark on neon theme */
.bg-white  { background: rgba(var(--n-surf),0.04) !important; }
.bg-light  { background: rgba(var(--n-surf),0.05) !important; }
.bg-dark   { background: rgba(var(--n-shadow),0.5) !important; }
.bg-primary { background: oklch(0.6 0.18 254) !important; }
.bg-success { background: oklch(0.72 0.2 152 / 0.3) !important; }
.bg-danger  { background: oklch(0.65 0.22 29 / 0.3) !important; }
.bg-warning { background: oklch(0.82 0.18 87 / 0.3) !important; }
.bg-secondary { background: rgba(var(--n-surf),0.06) !important; }
/* Ensure any inline style="background-color: white" can't make white boxes */
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: white"],
[style*="background:white"] {
  background: rgba(var(--n-surf),0.05) !important;
  background-color: rgba(var(--n-surf),0.05) !important;
}
/* team accent helpers */
.bg-insight { background: rgba(19,23,31,0.85) !important; }
.main-section { width: 100%; }

/* Mobile nav toggle */
.n-mob-toggle {
  display: none;
  flex-shrink: 0;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  background: rgba(var(--n-surf),0.05);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 8px;
  font-size: 16px; color: rgba(var(--n-ink),0.75);
  cursor: pointer; margin-left: 8px;
}
@media (max-width: 900px) {
  .n-mob-toggle { display: inline-flex; }
  .n-nav { display: none !important; }
  .n-nav.open { display: flex !important; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: rgba(var(--n-ground-rgb),0.97); border-bottom: 1px solid rgba(var(--n-surf),0.08); padding: 12px; z-index: 100; }
  .n-header { position: relative; }
  .n-search { display: none; }
  .n-partner-bar { flex-wrap: wrap; }
  .n-partner-site { min-width: 33.333%; }
}
@media (max-width: 600px) {
  .n-partner-site { min-width: 50%; }
}

/* ================================================================= */
/*   NEWSROOM — News.aspx (index) + NewsDetails.aspx (article)       */
/*                                                                   */
/*   Namespaced nw-* on purpose. The generic .news-item / .news-img  */
/*   / .news-title / .news-content names collided with the homepage  */
/*   DailyNews widget and the sidebar feed, which is why the old     */
/*   rules were a pile of !important. Nothing else in the site uses  */
/*   nw-*, so these need no overrides.                               */
/* ================================================================= */

.nw-page { display: flex; flex-direction: column; gap: 0; }

/* ---------- section kicker (shared by index + article) ---------- */
.nw-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: oklch(0.7 0.22 27);
  margin-bottom: 10px;
}
.nw-kicker-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.7 0.22 27);
  box-shadow: 0 0 0 3px oklch(0.7 0.22 27 / 0.18);
  animation: nw-pulse 2.4s ease-in-out infinite;
}
@keyframes nw-pulse {
  0%, 100% { box-shadow: 0 0 0 3px oklch(0.7 0.22 27 / 0.18); }
  50%      { box-shadow: 0 0 0 6px oklch(0.7 0.22 27 / 0.04); }
}

/* ---------- header + filter box ---------- */
.nw-head { align-items: flex-end; margin-bottom: 24px; }
.nw-search {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  background: rgba(var(--n-surf),0.04);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-radius: 10px;
  min-width: 300px;
}
.nw-search i { color: rgba(var(--n-ink),0.35); font-size: 12px; }
.nw-search input {
  background: transparent; border: 0; outline: none;
  color: rgb(var(--n-ink)); font-size: 13px; flex: 1; min-width: 0;
}
.nw-search input::placeholder { color: rgba(var(--n-ink),0.34); }
.nw-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1px;
  color: rgba(var(--n-ink),0.4);
  white-space: nowrap;
}

/* ---------- lead story ---------- */
.nw-lead {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 0; overflow: hidden;
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-radius: 16px;
  margin-bottom: 34px;
  transition: border-color 200ms, transform 200ms;
}
.nw-lead:hover { border-color: rgba(var(--n-surf),0.16); transform: translateY(-2px); }
.nw-lead-media { position: relative; display: block; overflow: hidden; min-height: 260px; }
.nw-lead-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 500ms ease;
}
.nw-lead:hover .nw-lead-media img { transform: scale(1.04); }
.nw-lead-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(var(--n-panel),0.75) 100%);
}
.nw-lead-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: oklch(0.7 0.22 27); color: var(--n-ground); font-weight: 700;
}
.nw-lead-body {
  display: flex; flex-direction: column; justify-content: center;
  gap: 12px; padding: 28px 30px;
}
.nw-lead-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(21px, 2.4vw, 30px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2; color: rgb(var(--n-ink));
}
.nw-lead:hover .nw-lead-title { color: oklch(0.85 0.15 210); }
.nw-lead-dek {
  font-size: 14px; line-height: 1.65; color: rgba(var(--n-ink),0.6);
}
.nw-readmore {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: oklch(0.7 0.18 210); margin-top: 2px;
}
.nw-readmore i { transition: transform 200ms; }
.nw-lead:hover .nw-readmore i { transform: translateX(4px); }

/* Lead with no PhotoPath — the newest rows usually have none, and a stock
   filler photo reads worse than giving the headline the full panel. */
.nw-lead.nw-lead-nophoto {
  grid-template-columns: 1fr;
  border-left: 3px solid oklch(0.7 0.22 27);
  background:
    radial-gradient(110% 150% at 0% 0%, oklch(0.55 0.22 300 / 0.16), transparent 62%),
    radial-gradient(90% 130% at 100% 100%, oklch(0.6 0.18 254 / 0.13), transparent 62%),
    rgba(var(--n-panel),0.6);
}
.nw-lead.nw-lead-nophoto .nw-lead-body { padding: 32px 34px; gap: 14px; }
.nw-lead.nw-lead-nophoto .nw-lead-title { font-size: clamp(24px, 3vw, 36px); max-width: 26ch; }
.nw-lead.nw-lead-nophoto .nw-lead-dek { font-size: 15px; max-width: 62ch; }
.nw-lead-tagrow { display: flex; align-items: center; gap: 12px; }
.nw-lead-badge-inline { position: static; }
@media (max-width: 620px) {
  .nw-lead.nw-lead-nophoto .nw-lead-body { padding: 22px 20px; }
}

/* ---------- section rule ---------- */
.nw-secline { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.nw-secline-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.55); white-space: nowrap;
}
.nw-secline-rule { flex: 1; height: 1px; background: rgba(var(--n-surf),0.08); }

/* ---------- card grid ---------- */
.nw-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.nw-card {
  display: flex; flex-direction: column;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 14px; overflow: hidden;
  transition: border-color 200ms, transform 200ms, background 200ms;
}
.nw-card:hover {
  border-color: rgba(var(--n-surf),0.16);
  background: rgba(var(--n-panel3),0.75);
  transform: translateY(-3px);
}
.nw-card-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: rgba(var(--n-surf),0.03); }
.nw-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 450ms ease;
}
.nw-card:hover .nw-card-media img { transform: scale(1.05); }
.nw-card-body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px 16px; flex: 1;
}
.nw-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 600; line-height: 1.35;
  letter-spacing: -0.01em; color: rgb(var(--n-ink));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nw-card:hover .nw-card-title { color: oklch(0.85 0.15 210); }
.nw-card-dek {
  font-size: 12.5px; line-height: 1.6; color: rgba(var(--n-ink),0.52);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nw-card-meta {
  display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1px; color: rgba(var(--n-ink),0.4);
}
.nw-dot { width: 4px; height: 4px; border-radius: 50%; background: oklch(0.7 0.18 210); flex-shrink: 0; }

/* Photo-less card — most recent rows have no PhotoPath, so instead of a
   grey box the headline gets the space and a coloured spine for rhythm. */
.nw-card.nw-nophoto { border-left: 2px solid oklch(0.7 0.18 210 / 0.5); }
.nw-card.nw-nophoto .nw-card-body { padding-top: 18px; }
.nw-card.nw-nophoto .nw-card-title { font-size: 16px; -webkit-line-clamp: 4; }
.nw-card.nw-nophoto .nw-card-dek { -webkit-line-clamp: 3; }

/* ---------- filter empty state + show-more ---------- */
.nw-empty {
  display: none; text-align: center; padding: 48px 16px;
  color: rgba(var(--n-ink),0.45); font-size: 13px;
}
.nw-empty.on { display: block; }
.nw-more-wrap { display: flex; justify-content: center; margin-top: 28px; }
.nw-more {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  padding: 12px 26px; border-radius: 999px;
  background: rgba(var(--n-surf),0.04);
  border: 1px solid rgba(var(--n-surf),0.1);
  color: rgba(var(--n-ink),0.8);
  transition: background 180ms, border-color 180ms, color 180ms;
}
.nw-more:hover { background: oklch(0.6 0.18 254); border-color: transparent; color: var(--n-ground); }
.nw-card.nw-hide, .nw-card.nw-clip { display: none; }

@media (max-width: 1000px) {
  .nw-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nw-lead { grid-template-columns: 1fr; }
  .nw-lead-media { min-height: 0; aspect-ratio: 16 / 9; }
  .nw-lead-media::after { background: linear-gradient(180deg, transparent 55%, rgba(var(--n-panel),0.8) 100%); }
  .nw-lead-body { padding: 20px; }
  .nw-search { min-width: 0; width: 100%; }
}
@media (max-width: 620px) {
  .nw-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ================================================================= */
/*   NEWS ARTICLE — NewsDetails.aspx                                 */
/* ================================================================= */

/* Reading progress — pinned under the sticky header */
.nw-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: transparent; pointer-events: none;
}
.nw-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, oklch(0.7 0.22 27), oklch(0.7 0.18 210));
}

/* Breadcrumb */
.nw-crumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.38);
  margin-bottom: 18px;
}
.nw-crumb a { color: rgba(var(--n-ink),0.6); }
.nw-crumb a:hover { color: oklch(0.7 0.18 210); }
.nw-crumb-now {
  color: rgba(var(--n-ink),0.38);
  max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nw-article-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px; align-items: start;
}
/* Grid items default to min-width:auto, which lets a wide table inside the
   article push the whole column past the viewport instead of scrolling. */
.nw-article, .nw-rail { min-width: 0; }

/* ---------- article head ---------- */
.nw-art-head { margin-bottom: 22px; }
.nw-art-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(27px, 3.6vw, 44px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.12;
  color: rgb(var(--n-ink)); margin: 0 0 14px;
}
.nw-art-dek {
  font-size: 16px; line-height: 1.65;
  color: rgba(var(--n-ink),0.62);
  margin: 0 0 20px; max-width: 68ch;
}
.nw-byline {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid rgba(var(--n-surf),0.07);
  border-bottom: 1px solid rgba(var(--n-surf),0.07);
}
.nw-byline-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  background: linear-gradient(135deg, oklch(0.6 0.18 254), oklch(0.68 0.22 300));
  color: var(--n-ground);
}
.nw-byline-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.nw-byline-name { font-size: 13px; font-weight: 600; color: rgba(var(--n-ink),0.9); }
.nw-byline-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1px; color: rgba(var(--n-ink),0.42);
}
.nw-share { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.nw-share-btn {
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--n-surf),0.04);
  border: 1px solid rgba(var(--n-surf),0.07);
  color: rgba(var(--n-ink),0.6); font-size: 13px;
  transition: background 180ms, color 180ms, border-color 180ms;
}
.nw-share-btn:hover { background: oklch(0.7 0.18 210); border-color: transparent; color: var(--n-ground); }
.nw-share-btn.copied { background: oklch(0.72 0.19 145); border-color: transparent; color: var(--n-ground); }

/* ---------- hero figure ---------- */
.nw-art-figure { margin: 0 0 26px; }
.nw-art-figure img {
  width: 100%; max-height: 460px; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid rgba(var(--n-surf),0.06);
}
.nw-art-figure figcaption {
  font-size: 11px; color: rgba(var(--n-ink),0.35);
  margin-top: 8px; text-align: right;
}

/* ---------- article body ---------- */
.nw-art-body {
  font-size: 16px; line-height: 1.78;
  color: rgba(var(--n-ink),0.8);
  max-width: 72ch;
}
.nw-art-body > p:first-of-type { font-size: 17px; color: rgba(var(--n-ink),0.88); }
.nw-art-body p { margin: 0 0 20px; }
.nw-art-body h2, .nw-art-body h3, .nw-art-body h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--n-ink));
  margin: 32px 0 12px; line-height: 1.25;
}
.nw-art-body h2 { font-size: 23px; }
.nw-art-body h3 { font-size: 19px; }
.nw-art-body h4 { font-size: 16px; }
.nw-art-body ul, .nw-art-body ol { margin: 0 0 20px; padding-left: 22px; }
.nw-art-body li { margin-bottom: 9px; }
.nw-art-body li::marker { color: oklch(0.7 0.18 210); }
.nw-art-body strong { color: rgba(var(--n-ink),0.95); font-weight: 600; }
.nw-art-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 22px 0; display: block; }
.nw-art-body a { color: oklch(0.7 0.18 210); font-weight: 500; border-bottom: 1px solid oklch(0.7 0.18 210 / 0.3); }
.nw-art-body a:hover { color: oklch(0.85 0.15 210); border-bottom-color: currentColor; }
.nw-art-body hr { border: 0; border-top: 1px solid rgba(var(--n-surf),0.08); margin: 30px 0; }
.nw-art-body blockquote {
  position: relative; margin: 26px 0; padding: 18px 20px 18px 24px;
  border-left: 3px solid oklch(0.7 0.22 27);
  background: rgba(var(--n-surf),0.025);
  border-radius: 0 12px 12px 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; line-height: 1.55; font-style: normal;
  color: rgba(var(--n-ink),0.88);
}
.nw-art-body blockquote p:last-child { margin-bottom: 0; }
.nw-art-body table {
  width: 100%; border-collapse: collapse; margin: 24px 0;
  font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.nw-art-body th, .nw-art-body td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid rgba(var(--n-surf),0.06);
}
.nw-art-body th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.55);
  background: rgba(var(--n-surf),0.03);
  border-bottom-color: rgba(var(--n-surf),0.12);
}
.nw-art-body td { color: rgba(var(--n-ink),0.82); }
.nw-art-body tbody tr:hover td { background: rgba(var(--n-surf),0.025); }
/* Long tables must scroll inside the column, not push the page sideways */
.nw-art-body .nw-tablewrap { overflow-x: auto; margin: 24px 0; }
.nw-art-body .nw-tablewrap table { margin: 0; min-width: 460px; }

/* ---------- tags ---------- */
.nw-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(var(--n-surf),0.07); }
.nw-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(var(--n-surf),0.04);
  border: 1px solid rgba(var(--n-surf),0.07);
  color: rgba(var(--n-ink),0.55);
}
.nw-tag:hover { color: rgb(var(--n-ink)); border-color: rgba(var(--n-surf),0.18); }

/* ---------- right rail ---------- */
.nw-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 88px; }
.nw-rail-card {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 14px; padding: 14px;
}
.nw-rail-h {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.5);
  margin-bottom: 12px;
}
.nw-rail-h::after { content: ''; flex: 1; height: 1px; background: rgba(var(--n-surf),0.07); }
.nw-rail-list { display: flex; flex-direction: column; }
.nw-rail-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid rgba(var(--n-surf),0.05);
}
.nw-rail-item:first-child { border-top: 0; padding-top: 0; }
.nw-rail-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; color: rgba(var(--n-ink),0.25);
  flex-shrink: 0; width: 16px; padding-top: 1px;
}
.nw-rail-item:hover .nw-rail-num { color: oklch(0.7 0.22 27); }
.nw-rail-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nw-rail-title {
  font-size: 12.5px; font-weight: 500; line-height: 1.45;
  color: rgba(var(--n-ink),0.85);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nw-rail-item:hover .nw-rail-title { color: oklch(0.85 0.15 210); }
.nw-rail-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 1px; color: rgba(var(--n-ink),0.35);
}
.nw-rail-all {
  display: block; text-align: center; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(var(--n-surf),0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: oklch(0.7 0.18 210);
}
.nw-rail-all:hover { color: oklch(0.85 0.15 210); }

/* Reel sits inside a rail card and drives its own 9:16 sizing in JS.
   The gradient shows through when the story has no hero image to poster with. */
.nw-reel-card { padding: 12px; }
.nw-reel-card #reelRight {
  background-color: rgb(var(--n-panel2));
  background-image: linear-gradient(160deg, oklch(0.35 0.14 300 / 0.5), oklch(0.3 0.12 254 / 0.5));
  border-radius: 14px;
}
.nw-reel-card #reelOverlay { border-radius: 14px; }

/* ---------- related grid ---------- */
.nw-related { margin-top: 44px; }

@media (max-width: 1000px) {
  .nw-article-layout { grid-template-columns: minmax(0, 1fr); }
  .nw-rail { position: static; }
  .nw-art-body { max-width: none; }
}
@media (max-width: 620px) {
  .nw-share { margin-left: 0; width: 100%; }
  .nw-art-body { font-size: 15.5px; }
}

/* Reel overlay — already dark, kept for completeness */
#reelRight {
  position: relative; overflow: hidden;
  display: flex; justify-content: center; align-items: center; text-align: center;
  background-size: cover; background-position: center;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(var(--n-shadow),0.5);
}
#reelOverlay { position: absolute; inset: 0; background: rgba(var(--n-shadow),0.45); z-index: 1; border-radius: 20px; }
#reelText { position: relative; z-index: 2; color: white; font-weight: 700; line-height: 1.3; text-shadow: 3px 3px 10px rgba(var(--n-shadow),0.8); max-width: 80%; }

/* ================================================================= */
/*   TRENDING COMPARISONS — chip strip on homepage                   */
/* ================================================================= */
.n-cmp-strip { display: flex; flex-wrap: wrap; gap: 8px; }
a.compare-row {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.08); border-radius: 10px;
  font-size: 13px; font-weight: 500;
  color: rgba(var(--n-ink),0.85);
  text-decoration: none;
  transition: border-color 200ms, color 200ms, transform 200ms;
}
a.compare-row:hover { border-color: rgba(var(--n-surf),0.2); color: rgb(var(--n-ink)); transform: translateY(-2px); }
a.compare-row .vs { color: rgba(var(--n-ink),0.35); font-size: 10px; font-weight: 800; letter-spacing: 0.5px; font-family: 'JetBrains Mono', monospace; }

/* ================================================================= */
/*   GROUND DETAILS / TEAM STATS — .tr-normal white background fix  */
/*   Use body prefix for higher specificity to beat page <style>    */
/* ================================================================= */

body .tr-normal,
html body .tr-normal {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(var(--n-ink),0.85) !important;
}

/* ================================================================= */
/*   TEAM RANKING — .player-rating was dark text on dark bg         */
/* ================================================================= */

body .player-rating { color: rgba(var(--n-ink),0.85) !important; }

/* ================================================================= */
/*   SERIES PAGE — .matches grid                                    */
/* ================================================================= */

.matches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1100px) { .matches { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .matches { grid-template-columns: 1fr; } }

/* ================================================================= */
/*   MISC — page h1 black-text override (some pages set h1 dark)    */
/* ================================================================= */

/* pages that set h1 { color: #1a1a1a } inside their <style> block */
h1 { color: rgba(var(--n-ink),0.92); }
h2 { color: rgba(var(--n-ink),0.88); }
h3 { color: rgba(var(--n-ink),0.85); }
h4, h5 { color: rgba(var(--n-ink),0.82); }

/* But statspage headings stay neon-specific */
.statspage-heading { color: rgb(var(--n-ink)) !important; font-family: 'Space Grotesk', sans-serif !important; font-weight: 800 !important; }

/* MatchUps / MatchwiseStatistics — matchup card (already dark, reinforce) */
.matchup-card {
  background: rgba(17,24,39,0.9) !important;
  border-color: rgba(31,41,55,0.8) !important;
}
.players { color: rgba(var(--n-ink),0.9) !important; }
.metric-label { color: rgba(156,163,175,0.85) !important; }
.metric-value { color: rgba(var(--n-ink),0.9) !important; font-family: 'JetBrains Mono', monospace !important; }

/* ----------------------------------------------------------------- */
/*   Misc container widths for news / compare pages                 */
/* ----------------------------------------------------------------- */
.n-page-content { max-width: 1000px; margin: 0 auto; width: 100%; }

/* ================================================================= */
/*   NEWS DETAIL — 2:1 article + reel layout                        */
/* ================================================================= */
.n-news-detail-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) { .n-news-detail-layout { grid-template-columns: 1fr; } }

/* Reel player — play / replay overlays */
#playAudioOverlay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; cursor: pointer;
}
.play-circle, .replay-circle {
  width: 90px; height: 90px;
  background: rgba(var(--n-surf),0.15);
  border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  box-shadow: 0 0 20px rgba(var(--n-surf),0.4), 0 0 40px rgba(var(--n-surf),0.2);
  backdrop-filter: blur(10px);
  transition: transform 0.3s, box-shadow 0.3s;
  animation: reelPulse 1.6s infinite;
}
.play-circle:hover, .replay-circle:hover {
  transform: scale(1.15);
  box-shadow: 0 0 30px rgba(var(--n-surf),0.7), 0 0 50px rgba(var(--n-surf),0.4);
}
.play-icon, .replay-icon { width: 40px; height: 40px; }
#replayOverlay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; cursor: pointer;
}
@keyframes reelPulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  50%  { transform: scale(1.1); opacity: 1;   }
  100% { transform: scale(1);   opacity: 0.8; }
}

/* ================================================================= */
/*   COMPARISON — hub (Compare.aspx) + head-to-head (PlayerCompare)  */
/*                                                                   */
/*   Both pages share one set of tokens and one "A vs B" row so a    */
/*   comparison looks the same wherever it appears. Side A is warm   */
/*   and always on the left, side B is cool and always on the right  */
/*   — the same convention the match hero uses.                      */
/* ================================================================= */

.n-compare-hub, .n-player-compare {
  --cmp-a:     oklch(0.7 0.22 27);
  --cmp-b:     oklch(0.64 0.16 245);
  --cmp-win:   oklch(0.82 0.22 125);
  --cmp-line:  rgba(var(--n-surf),0.07);
  --cmp-surf:  rgba(var(--n-panel),0.6);
  --cmp-surf2: rgba(var(--n-surf),0.03);
  --cmp-txt:   rgba(var(--n-ink),0.9);
  --cmp-dim:   rgba(var(--n-ink),0.45);
  max-width: 1180px; margin: 0 auto; width: 100%;
}

/* ---------- page head ---------- */
.cmp-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--cmp-a); margin-bottom: 7px;
}
.cmp-head { margin-bottom: 18px; }
.cmp-head h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1; margin: 0; color: rgb(var(--n-ink));
}
.cmp-head p {
  font-size: 14px; line-height: 1.6; color: var(--cmp-dim);
  margin: 8px 0 0; max-width: 72ch;
}

/* ---------- avatar (team gradient comes from .bg-{code}-stats) ---------- */
.cmp-av {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  color: rgb(var(--n-ink));
  background: rgba(var(--n-surf),0.07);
  border: 1px solid rgba(var(--n-surf),0.09);
}
.cmp-av.lg { width: 60px; height: 60px; border-radius: 16px; font-size: 20px; }
.cmp-av img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }

/* ================================================================= */
/*   HUB — panels of "A vs B" rows                                   */
/* ================================================================= */
.cmp-hub-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; align-items: start;
}
@media (max-width: 1080px) { .cmp-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .cmp-hub-grid { grid-template-columns: 1fr; } }

.cmp-panel {
  background: var(--cmp-surf);
  border: 1px solid var(--cmp-line);
  border-radius: 16px; padding: 16px;
}
.cmp-panel-head { margin-bottom: 12px; }
.cmp-panel-head h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0; color: rgb(var(--n-ink));
  display: flex; align-items: center; gap: 9px;
}
.cmp-panel-bar { width: 3px; height: 15px; border-radius: 2px; background: var(--cmp-a); flex-shrink: 0; }
.cmp-panel.similar  .cmp-panel-bar { background: var(--cmp-b); }
.cmp-panel.trending .cmp-panel-bar { background: var(--cmp-win); }
.cmp-panel-sub {
  font-size: 12px; line-height: 1.5; color: var(--cmp-dim);
  margin: 6px 0 0; padding-left: 12px;
}
.cmp-list { display: flex; flex-direction: column; gap: 4px; }
.cmp-empty {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.3); padding: 18px 0; text-align: center;
}

/* the row — A | VS | B, centre column fixed so every VS lines up */
.cmp-vs-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 11px;
  background: var(--cmp-surf2);
  border: 1px solid transparent;
  color: var(--cmp-txt); text-decoration: none;
  transition: background 160ms, border-color 160ms, transform 160ms;
}
.cmp-vs-row:hover {
  background: rgba(var(--n-surf),0.055);
  border-color: rgba(var(--n-surf),0.12);
  transform: translateX(2px);
  color: rgb(var(--n-ink));
}
.cmp-vs-side { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cmp-vs-side.b { flex-direction: row-reverse; }
.cmp-vs-name {
  font-size: 13px; font-weight: 500; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmp-vs-side.b .cmp-vs-name { text-align: right; }
.cmp-vs-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  color: rgba(var(--n-ink),0.3);
  padding: 3px 6px; border-radius: 5px;
  border: 1px solid rgba(var(--n-surf),0.07);
}
.cmp-vs-row:hover .cmp-vs-tag { color: var(--cmp-a); border-color: oklch(0.7 0.22 27 / 0.35); }

@media (max-width: 400px) {
  .cmp-vs-row { padding: 9px 8px; gap: 7px; }
  .cmp-vs-name { font-size: 12px; }
  .cmp-av { width: 28px; height: 28px; font-size: 10px; }
}

/* ================================================================= */
/*   HEAD-TO-HEAD — hero, verdict, format tabs, stat bars            */
/* ================================================================= */

/* ---------- hero ---------- */
.cmp-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 120% at 0% 50%,  oklch(0.7 0.22 27 / 0.13), transparent 62%),
    radial-gradient(70% 120% at 100% 50%, oklch(0.64 0.16 245 / 0.13), transparent 62%),
    rgba(var(--n-panel),0.7);
  border: 1px solid var(--cmp-line);
  border-radius: 20px;
  padding: 22px 24px 18px;
  margin-bottom: 14px;
}
.cmp-hero-grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 18px; align-items: center;
}
.cmp-hero-side { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cmp-hero-side.b { flex-direction: row-reverse; text-align: right; }
.cmp-hero-txt { min-width: 0; overflow-wrap: anywhere; }
.cmp-hero-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.12; color: rgb(var(--n-ink));
}
.cmp-hero-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  margin-top: 5px;
}
.cmp-hero-side.a .cmp-hero-meta { color: var(--cmp-a); }
.cmp-hero-side.b .cmp-hero-meta { color: var(--cmp-b); }
.cmp-hero-vs {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.35);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(var(--n-surf),0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* dominance meter under the names */
.cmp-meter { margin-top: 18px; }
.cmp-meter-lbl {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.35); margin-bottom: 6px;
}
.cmp-meter-lbl b { font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.cmp-meter-lbl .a { color: var(--cmp-a); }
.cmp-meter-lbl .b { color: var(--cmp-b); }
.cmp-meter-track {
  display: flex; height: 6px; border-radius: 99px; overflow: hidden;
  background: rgba(var(--n-surf),0.06);
}
.cmp-meter-fill { height: 100%; transition: width 700ms cubic-bezier(0.2,0.8,0.2,1); }
.cmp-meter-fill.a { background: linear-gradient(90deg, var(--cmp-a), oklch(0.72 0.25 355)); }
.cmp-meter-fill.b { background: linear-gradient(90deg, oklch(0.68 0.15 200), var(--cmp-b)); }

@media (max-width: 620px) {
  .cmp-hero { padding: 18px 14px 14px; border-radius: 16px; }
  .cmp-hero-grid { gap: 10px; }
  .cmp-hero-side { flex-direction: column; gap: 8px; text-align: center; }
  .cmp-hero-side.b { flex-direction: column; text-align: center; }
  .cmp-av.lg { width: 48px; height: 48px; font-size: 16px; }
  .cmp-hero-vs { width: 34px; height: 34px; font-size: 11px; }
}

/* ---------- comparison builder ---------- */
/* On the hub the subject is fixed and only the opponent is searched, so this
   reads as one sentence: Compare <name> vs <search>. */
.cmp-builder-bar {
  background: var(--cmp-surf);
  border: 1px solid var(--cmp-line);
  border-radius: 16px;
  padding: 14px 16px 12px;
  margin-bottom: 18px;
}
.cmp-builder {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.cmp-builder-fixed {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 7px; border-radius: 10px;
  background: rgba(var(--n-surf),0.04);
  border: 1px solid rgba(var(--n-surf),0.07);
  min-width: 0; flex-shrink: 0;
}
.cmp-builder-fixed .cmp-av { width: 26px; height: 26px; font-size: 10px; border-radius: 7px; }
.cmp-builder-fixed-name {
  font-size: 13px; font-weight: 600; color: rgb(var(--n-ink));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px;
}
.cmp-builder-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.3); flex-shrink: 0;
}
.cmp-builder-vs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.3); flex-shrink: 0;
}
.cmp-builder-hint {
  font-size: 11px; color: rgba(var(--n-ink),0.3);
  margin: 0 0 16px; padding-left: 2px;
}

.cmp-pick { position: relative; flex: 1 1 220px; min-width: 0; }
.cmp-pick-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: rgba(var(--n-ink),0.28); pointer-events: none;
}
.cmp-pick-input {
  width: 100%; padding: 9px 12px 9px 31px;
  border-radius: 10px;
  border: 1px solid rgba(var(--n-surf),0.09);
  background: rgba(var(--n-surf),0.03);
  color: rgb(var(--n-ink)); font-size: 13px; font-weight: 500;
  outline: none;
  transition: border-color 140ms, background 140ms;
}
.cmp-pick-input::placeholder { color: rgba(var(--n-ink),0.3); font-weight: 400; }
.cmp-pick-input:hover { border-color: rgba(var(--n-surf),0.16); }
.cmp-pick-input:focus {
  border-color: color-mix(in oklch, var(--cmp-b) 55%, transparent);
  background: rgba(var(--n-surf),0.05);
}

.cmp-pick-menu {
  display: none;
  position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; right: 0;
  max-height: 288px; overflow-y: auto;
  padding: 5px;
  background: oklch(0.16 0.02 260);
  border: 1px solid rgba(var(--n-surf),0.11);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(var(--n-shadow),0.55);
}
.cmp-pick.open .cmp-pick-menu { display: block; }
.cmp-pick-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; border-radius: 8px;
  text-align: left; color: var(--cmp-txt);
  transition: background 120ms;
}
.cmp-pick-item:hover,
.cmp-pick-item.on { background: rgba(var(--n-surf),0.07); }
.cmp-pick-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cmp-pick-name {
  font-size: 13px; font-weight: 500; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmp-pick-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmp-pick-none {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.3); padding: 14px; text-align: center;
}
.cmp-pick-menu .cmp-av { width: 28px; height: 28px; font-size: 10px; border-radius: 8px; }

@media (max-width: 560px) {
  .cmp-builder { gap: 8px; }
  .cmp-builder-lbl { width: 100%; }
  .cmp-builder-fixed { flex: 1 1 auto; }
  .cmp-pick { flex: 1 1 100%; }  /* search drops to its own line */
  .cmp-builder-fixed-name { max-width: 150px; }
}

/* ---------- verdict ---------- */
.cmp-verdict {
  background: var(--cmp-surf);
  border: 1px solid var(--cmp-line);
  border-left: 3px solid var(--cmp-win);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.cmp-verdict-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--cmp-win); margin-bottom: 6px;
}
.cmp-verdict p {
  margin: 0; font-size: 14px; line-height: 1.65; color: rgba(var(--n-ink),0.82);
}
.cmp-verdict-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.cmp-vchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(var(--n-surf),0.04);
  border: 1px solid rgba(var(--n-surf),0.07);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.4);
}
.cmp-vchip span {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: -0.01em;
  text-transform: none;
}
.cmp-vchip.a span { color: var(--cmp-a); }
.cmp-vchip.b span { color: var(--cmp-b); }
.cmp-vchip.tie span { color: rgba(var(--n-ink),0.5); }

/* ---------- format tabs ---------- */
.cmp-tabs {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.cmp-tabs-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.3); flex-shrink: 0;
}
.cmp-tabs-btns { display: flex; gap: 6px; }
.cmp-tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  padding: 7px 15px; border-radius: 8px;
  border: 1px solid rgba(var(--n-surf),0.08);
  background: transparent; color: rgba(var(--n-ink),0.5);
  cursor: pointer; transition: color 140ms, background 140ms, border-color 140ms;
  white-space: nowrap;
}
.cmp-tab:hover { color: rgb(var(--n-ink)); border-color: rgba(var(--n-surf),0.2); }
.cmp-tab.on { background: rgba(var(--n-surf),0.08); color: rgb(var(--n-ink)); border-color: rgba(var(--n-surf),0.16); }
.cmp-tab.on.fmt-test { background: color-mix(in oklch, var(--fmt-test) 15%, transparent); color: var(--fmt-test); border-color: color-mix(in oklch, var(--fmt-test) 35%, transparent); }
.cmp-tab.on.fmt-odi  { background: color-mix(in oklch, var(--fmt-odi) 15%, transparent);  color: var(--fmt-odi);  border-color: color-mix(in oklch, var(--fmt-odi) 35%, transparent); }
.cmp-tab.on.fmt-t20i { background: color-mix(in oklch, var(--fmt-t20i) 15%, transparent); color: var(--fmt-t20i); border-color: color-mix(in oklch, var(--fmt-t20i) 35%, transparent); }
@media (max-width: 640px) {
  .cmp-tabs { flex-wrap: nowrap; gap: 8px; }
  .cmp-tabs-btns { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .cmp-tabs-btns::-webkit-scrollbar { display: none; }
  .cmp-tab { padding: 7px 12px; }
}

/* ---------- format section ---------- */
.cmp-fmt { display: none; }
.cmp-fmt.on { display: block; }
.cmp-block { margin-bottom: 18px; }
.cmp-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.cmp-block-head h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.55); margin: 0;
}
.cmp-block-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.3);
}

/* ---------- year chips ---------- */
.cmp-years { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cmp-year-btns { display: flex; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.cmp-year-btns::-webkit-scrollbar { display: none; }
.cmp-year {
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1px;
  padding: 6px 11px; border-radius: 7px;
  border: 1px solid rgba(var(--n-surf),0.07);
  background: transparent; color: rgba(var(--n-ink),0.45);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: color 140ms, background 140ms, border-color 140ms;
}
.cmp-year:hover { color: rgb(var(--n-ink)); border-color: rgba(var(--n-surf),0.18); }
.cmp-year.on { background: rgba(var(--n-surf),0.08); color: rgb(var(--n-ink)); border-color: rgba(var(--n-surf),0.16); }
.cmp-year.best::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 4px; height: 4px; border-radius: 50%;
  background: oklch(0.82 0.18 75);
}
.cmp-year-panel { display: none; }
.cmp-year-panel.on { display: block; }

/* ---------- the stat comparison rows ---------- */
/* Batting and bowling sit side by side once there is room for two sets of
   bars; below that they stack and the bars go away entirely. */
.cmp-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px) { .cmp-groups { grid-template-columns: 1fr; gap: 12px; } }
.cmp-group { min-width: 0; }
.cmp-group-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.28);
  padding: 0 0 7px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(var(--n-surf),0.05);
}
.cmp-rows {
  background: var(--cmp-surf);
  border: 1px solid var(--cmp-line);
  border-radius: 14px;
  padding: 6px 14px;
}
.cmp-stat {
  display: grid;
  grid-template-columns: 62px minmax(0,1fr) 124px minmax(0,1fr) 62px;
  align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--n-surf),0.04);
}
.cmp-stat:last-child { border-bottom: 0; }
.cmp-stat-name {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500; text-align: center;
  color: rgba(var(--n-ink),0.5); line-height: 1.3;
}
.cmp-stat-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 600;
  color: rgba(var(--n-ink),0.45);
  white-space: nowrap;
}
.cmp-stat-v.a { text-align: right; }
.cmp-stat-v.b { text-align: left; }
/* the winner's number is the one that pops */
.cmp-stat.w-A .cmp-stat-v.a,
.cmp-stat.w-B .cmp-stat-v.b { color: rgb(var(--n-ink)); font-weight: 700; }

/* mirrored bars growing out of the centre label */
.cmp-track { height: 5px; border-radius: 99px; background: rgba(var(--n-surf),0.045); overflow: hidden; display: flex; }
.cmp-track.a { justify-content: flex-end; }
.cmp-fill { height: 100%; border-radius: 99px; transition: width 600ms cubic-bezier(0.2,0.8,0.2,1); }
.cmp-fill.a { background: color-mix(in oklch, var(--cmp-a) 45%, transparent); }
.cmp-fill.b { background: color-mix(in oklch, var(--cmp-b) 45%, transparent); }
.cmp-stat.w-A .cmp-fill.a { background: var(--cmp-a); }
.cmp-stat.w-B .cmp-fill.b { background: var(--cmp-b); }

@media (max-width: 700px) {
  .cmp-rows { padding: 4px 11px; border-radius: 12px; }
  .cmp-stat { grid-template-columns: 54px 1fr 54px; gap: 8px; padding: 8px 0; }
  .cmp-stat .cmp-track { display: none; }
  .cmp-stat-v { font-size: 13px; }
  .cmp-stat-name { font-size: 10.5px; }
}

/* ================================================================= */
/*   PLAYER PAGE LAYOUT EXTRAS                                       */
/* ================================================================= */
/* Info bar below the hero */
.np-info-bar {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 12px 16px;
  background: rgba(var(--n-panel),0.5);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px;
  font-size: 13px; color: rgba(var(--n-ink),0.7);
}
.np-info-bar strong { color: rgba(var(--n-ink),0.5); font-size: 9px; letter-spacing: 2px; font-family: 'JetBrains Mono', monospace; display: block; margin-bottom: 2px; }
.np-compare-wrap { padding: 8px 0; }
/* Hide the heading when the comparisons strip is genuinely empty */
.np-compare-wrap .n-cmp-strip:empty + * { display: none; }
.np-compare-wrap:has(.n-cmp-strip:empty) .n-section-head-title { display: none; }
.np-stats-section { display: flex; flex-direction: column; gap: 16px; }

/* Stats table — used by FillBattingRecords / FillBowlingRecords */
.np-stat-table {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-radius: 10px; overflow: hidden; overflow-x: auto;
  margin-bottom: 4px;
}
.np-stat-head {
  display: grid; padding: 8px 14px; gap: 8px;
  background: rgba(var(--n-surf),0.04);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.5);
  min-width: 600px;
  grid-template-columns: 80px repeat(12, 1fr);
  white-space: nowrap;
}
.np-stat-row {
  display: grid; padding: 9px 14px; gap: 8px;
  border-top: 1px solid rgba(var(--n-surf),0.04);
  align-items: center;
  min-width: 600px;
  grid-template-columns: 80px repeat(12, 1fr);
  transition: background 0.15s;
}
.np-stat-row:hover { background: rgba(var(--n-surf),0.03); }
/* bowling has 10 columns (type + mat + 8 stats) */
.np-stat-table.bowling .np-stat-head,
.np-stat-table.bowling .np-stat-row {
  grid-template-columns: 80px repeat(9, 1fr);
}
.np-stat-type { }
.np-stat-fmt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px; font-weight: 700;
  padding: 3px 7px; border-radius: 4px;
  border: 1px solid rgba(var(--n-surf),0.1);
  background: rgba(var(--n-surf),0.05);
  display: inline-block;
}
.np-stat-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(var(--n-ink),0.75); text-align: right; }
.np-stat-big {
  font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 800;
  color: oklch(0.85 0.25 130); text-align: right;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-end; gap: 0;
}
.np-stat-big-v { position: relative; z-index: 1; }
/* proportional fill bar behind the key stat */
.np-stat-bar-bg {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: oklch(0.85 0.25 130 / 0.09);
  border-radius: 3px;
  transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  width: 0;
  z-index: 0;
}
/* best row in each table */
.np-stat-row.row-best {
  background: rgba(var(--n-surf),0.025) !important;
  box-shadow: inset 2px 0 0 oklch(0.85 0.25 130 / 0.6);
}
.np-stat-row.row-best .np-stat-big-v { color: oklch(0.92 0.28 130); }
/* performance color bands */
.col-great { color: oklch(0.82 0.22 125) !important; font-weight: 700; }
.col-good  { color: oklch(0.78 0.14 200) !important; }
.col-ok    { color: oklch(0.82 0.18 75)  !important; }
.col-weak  { color: oklch(0.72 0.25 355 / 0.65) !important; }
.col-dim   { color: rgba(var(--n-ink),0.3) !important; }
/* milestone badge (100s, 5Ws etc.) */
.np-ms-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px;
  background: oklch(0.82 0.18 75 / 0.2);
  color: oklch(0.82 0.18 75);
  border: 1px solid oklch(0.82 0.18 75 / 0.35);
  margin-left: 5px; vertical-align: middle;
  position: relative; z-index: 1;
}
.np-ms-badge.five {
  background: oklch(0.72 0.25 355 / 0.2);
  color: oklch(0.72 0.25 355);
  border-color: oklch(0.72 0.25 355 / 0.35);
}
/* sort indicator on header spans */
.np-stat-head span.sort-asc::after  { content: ' ▲'; font-size: 8px; color: oklch(0.7 0.22 27); }
.np-stat-head span.sort-desc::after { content: ' ▼'; font-size: 8px; color: oklch(0.7 0.22 27); }
.np-stat-head span { cursor: pointer; user-select: none; }
.np-stat-head span:hover { color: rgba(var(--n-ink),0.85); }

/* Series section headers - format-specific left border */
.nr-series-head.fmt-test { border-left-color: var(--fmt-test); }
.nr-series-head.fmt-odi  { border-left-color: var(--fmt-odi); }
.nr-series-head.fmt-t20i { border-left-color: var(--fmt-t20i); }
.nr-series-head.fmt-t20l { border-left-color: var(--c-t20l); }

/* ================================================================= */
/*   NPC — career + year stat cards                                  */
/* ================================================================= */
.npc-shell { display: flex; flex-direction: column; gap: 18px; }

/* ---- color tokens (reused across both cards) ---- */
.npc-lime  { color: oklch(0.82 0.22 125) !important; }
.npc-cyan  { color: oklch(0.78 0.14 200) !important; }
.col-great { color: oklch(0.82 0.22 125) !important; font-weight: 700; }
.col-good  { color: oklch(0.78 0.14 200) !important; }
.col-ok    { color: oklch(0.82 0.18 75)  !important; }
.col-weak  { color: oklch(0.72 0.25 355 / 0.7) !important; }

/* ================================================================= */
/*   FILTER BAR                                                      */
/* ================================================================= */
.npc-filter-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0; flex-wrap: wrap;
}
.npc-filter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 3px;
  color: rgba(var(--n-ink),0.35); text-transform: uppercase;
}
.npc-filter-btns { display: flex; gap: 6px; }
.npc-fbtn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 8px;
  border: 1px solid rgba(var(--n-surf),0.08);
  background: transparent; color: rgba(var(--n-ink),0.5);
  cursor: pointer; transition: all 140ms;
  white-space: nowrap; flex-shrink: 0;
}
@media (max-width: 768px) {
  .npc-filter-bar { flex-wrap: nowrap; gap: 8px; }
  .npc-filter-label { flex-shrink: 0; }
  .npc-filter-btns {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .npc-filter-btns::-webkit-scrollbar { display: none; }
  .npc-fbtn { padding: 6px 11px; font-size: 9px; }
}
.npc-fbtn:hover { color: rgb(var(--n-ink)); border-color: rgba(var(--n-surf),0.2); }
.npc-fbtn.active                { background: rgba(var(--n-surf),0.08); color: rgb(var(--n-ink)); border-color: rgba(var(--n-surf),0.15); }
.npc-fbtn.active.fmt-test       { background: color-mix(in oklch, var(--fmt-test) 15%, transparent); color: var(--fmt-test); border-color: color-mix(in oklch, var(--fmt-test) 35%, transparent); }
.npc-fbtn.active.fmt-odi        { background: color-mix(in oklch, var(--fmt-odi) 15%, transparent); color: var(--fmt-odi); border-color: color-mix(in oklch, var(--fmt-odi) 35%, transparent); }
.npc-fbtn.active.fmt-t20i       { background: color-mix(in oklch, var(--fmt-t20i) 15%, transparent); color: var(--fmt-t20i); border-color: color-mix(in oklch, var(--fmt-t20i) 35%, transparent); }
.npc-fbtn.active.fmt-t20l       { background: var(--c-t20l-tint); color: var(--c-t20l); border-color: var(--c-t20l-edge); }
.npc-filter-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 1.5px;
  color: rgba(var(--n-ink),0.3); margin-left: auto;
}

/* format chips in year card header */
.npc-yr-fmtchips { display: flex; gap: 4px; }
.npc-yfc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; letter-spacing: 1.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid rgba(var(--n-surf),0.08);
  background: rgba(var(--n-surf),0.04);
  color: rgba(var(--n-ink),0.5);
  transition: opacity 200ms;
}
.npc-yfc.fmt-test { background: color-mix(in oklch, var(--fmt-test) 12%, transparent); color: var(--fmt-test); border-color: color-mix(in oklch, var(--fmt-test) 25%, transparent); }
.npc-yfc.fmt-odi  { background: color-mix(in oklch, var(--fmt-odi) 12%, transparent); color: var(--fmt-odi); border-color: color-mix(in oklch, var(--fmt-odi) 25%, transparent); }
.npc-yfc.fmt-t20i { background: color-mix(in oklch, var(--fmt-t20i) 12%, transparent); color: var(--fmt-t20i); border-color: color-mix(in oklch, var(--fmt-t20i) 25%, transparent); }
.npc-yfc.fmt-t20l { background: var(--c-t20l-tint); color: var(--c-t20l); border-color: var(--c-t20l-edge); }
.npc-yfc.npc-yfc-dim { opacity: 0.2; }

/* ================================================================= */
/*   SHARED HALVES LAYOUT (batting | bowling)                        */
/* ================================================================= */
.npc-halves {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(var(--n-surf),0.05); /* acts as the divider */
  border-radius: 12px; overflow: hidden;
}
.npc-half {
  background: rgba(var(--n-ground-rgb),0.6);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.npc-bat  { background: rgba(130,255,100,0.025); }
.npc-bowl { background: rgba(100,200,255,0.025); }

.npc-half-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 3px;
  color: rgba(var(--n-ink),0.4);
  text-transform: uppercase;
}
/* big value (Runs / Wickets) */
.npc-big { display: flex; align-items: baseline; gap: 8px; }
.npc-big-v {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800; line-height: 1;
  letter-spacing: -0.04em;
}
.npc-big-u {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 3px;
  color: rgba(var(--n-ink),0.4);
  align-self: flex-end; padding-bottom: 6px;
}

/* mini stat grid */
.npc-mini-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.npc-ms {
  background: rgba(var(--n-surf),0.03);
  border: 1px solid rgba(var(--n-surf),0.05);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.npc-ms-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.35);
  text-transform: uppercase;
}
.npc-ms-v {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; font-weight: 700;
  line-height: 1; letter-spacing: -0.02em;
  color: rgb(var(--n-ink));
}

/* achievement badges */
.npc-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.npc-bdg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 3px;
}
.npc-bdg small { font-size: 8px; letter-spacing: 0.5px; font-weight: 400; opacity: 0.7; }
.npc-bdg-100 { background: oklch(0.82 0.18 75 / 0.2); color: oklch(0.82 0.18 75); border: 1px solid oklch(0.82 0.18 75 / 0.35); }
.npc-bdg-50  { background: rgba(var(--n-surf),0.07); color: rgba(var(--n-ink),0.8); border: 1px solid rgba(var(--n-surf),0.1); }
.npc-bdg-6   { background: oklch(0.7 0.22 27 / 0.15); color: oklch(0.7 0.22 27); border: 1px solid oklch(0.7 0.22 27 / 0.3); }
.npc-bdg-4   { background: oklch(0.6 0.18 254 / 0.12); color: oklch(0.6 0.18 254); border: 1px solid oklch(0.6 0.18 254 / 0.25); }
.npc-bdg-5w  { background: oklch(0.72 0.25 355 / 0.18); color: oklch(0.72 0.25 355); border: 1px solid oklch(0.72 0.25 355 / 0.35); }

/* ================================================================= */
/*   YEAR SECTION                                                     */
/* ================================================================= */
.npc-year-section { display: flex; flex-direction: column; gap: 16px; }
.npc-section-hd {
  display: flex; align-items: baseline; justify-content: space-between;
}
.npc-section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.03em; color: rgb(var(--n-ink));
}
.npc-section-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.35);
}

.npc-year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

.npc-year-card {
  background: rgba(var(--n-panel2),0.7);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 180ms, transform 180ms;
}
.npc-year-card:hover { border-color: rgba(var(--n-surf),0.15); transform: translateY(-2px); }

.npc-year-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--n-surf),0.05);
  background: rgba(var(--n-surf),0.02);
}
.npc-year-lbl {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.03em; color: rgb(var(--n-ink));
}
.npc-year-mat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.35);
}

/* tighter layout inside year cards */
.npc-year-card .npc-halves { border-radius: 0; }
.npc-year-card .npc-half   { padding: 14px 16px; gap: 10px; }
.npc-year-card .npc-big-v  { font-size: clamp(28px, 4vw, 40px); }
.npc-year-card .npc-ms     { padding: 6px 8px; }
.npc-year-card .npc-ms-v   { font-size: 14px; }

/* Career card — spans full width */
.npc-career-card {
  grid-column: 1 / -1;
  border-color: oklch(0.55 0.22 300 / 0.35);
  background: oklch(0.13 0.03 270 / 0.6);
}
.npc-career-card .npc-year-lbl {
  font-size: 22px;
  color: oklch(0.55 0.22 300);
}

/* Career format row — TEST / ODI / T20I as equal columns */
.npc-career-fmt-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: rgba(var(--n-surf),0.06);
  border-radius: 8px;
  overflow: hidden;
}
.npc-career-col {
  background: oklch(0.12 0.02 270);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.npc-career-col-hdr {
  margin-bottom: 2px;
}
.npc-cc-bat,
.npc-cc-bowl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.npc-cc-bowl {
  border-top: 1px solid rgba(var(--n-surf),0.07);
  padding-top: 8px;
  margin-top: 2px;
}
.npc-cc-primary {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.npc-cc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 8px;
}

/* Multi-format block inside "all" layer — when a year has TEST+ODI+T20I data */
.npc-fmt-block {
  border-top: 1px solid rgba(var(--n-surf),0.06);
  padding-top: 8px;
  margin-top: 4px;
}
.npc-fmt-block:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.npc-fmt-block-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 0 2px;
}

@media (max-width: 640px) {
  .npc-halves { grid-template-columns: 1fr; }
  .npc-year-grid { grid-template-columns: 1fr; }
  .npc-mini-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Rank pill format-specific color */
.np-rank-pill.fmt-test .np-rank-r { color: var(--fmt-test); }
.np-rank-pill.fmt-odi  .np-rank-r { color: var(--fmt-odi); }
.np-rank-pill.fmt-t20i .np-rank-r { color: var(--fmt-t20i); }
.np-rank-pill.fmt-test { border-left: 2px solid color-mix(in oklch, var(--fmt-test) 40%, transparent); }
.np-rank-pill.fmt-odi  { border-left: 2px solid color-mix(in oklch, var(--fmt-odi) 40%, transparent); }
.np-rank-pill.fmt-t20i { border-left: 2px solid color-mix(in oklch, var(--fmt-t20i) 40%, transparent); }

/* ================================================================= */
/*   BOOTSTRAP NAV-TABS → NEON STYLE                                 */
/* ================================================================= */
body .nav-tabs {
  display: flex !important; gap: 2px !important; flex-wrap: wrap !important;
  list-style: none !important; padding-left: 0 !important; margin: 0 0 14px !important;
  border: none !important; border-bottom: 1px solid rgba(var(--n-surf),0.07) !important;
  background: transparent !important; border-radius: 0 !important;
}
body .nav-tabs .nav-item { margin: 0 !important; list-style: none !important; }
body .nav-tabs .nav-link {
  display: inline-flex !important; align-items: center !important;
  background: transparent !important;
  border: none !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: rgba(var(--n-ink),0.42) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important; letter-spacing: 1.5px !important;
  text-transform: uppercase !important; text-decoration: none !important;
  padding: 8px 16px 10px !important; font-weight: 600 !important;
  white-space: nowrap !important;
  transition: color 150ms, border-color 150ms !important;
  cursor: pointer !important;
}
body .nav-tabs .nav-link:hover { color: rgba(var(--n-ink),0.8) !important; }
body .nav-tabs .nav-link.active {
  color: oklch(0.85 0.25 130) !important;
  background: transparent !important;
  border-bottom-color: oklch(0.85 0.25 130) !important;
}

/* Bootstrap bg-header row (player tabs wrapper) */
.bg-header { background: transparent !important; }

/* ================================================================= */
/*   GLOBAL series-header → neon dark (overrides playerstyles.css)  */
/* ================================================================= */
body .series-header {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 10px 16px !important;
  background: rgba(var(--n-panel),0.6) !important;
  border-left: 3px solid oklch(0.7 0.22 27) !important;
  border-radius: 0 8px 8px 0 !important;
  margin-bottom: 14px !important;
  color: rgba(var(--n-ink),0.9) !important;
}
body .series-header span { color: rgba(var(--n-ink),0.9) !important; }
body .series-header a { color: oklch(0.7 0.18 210) !important; font-size: 11px !important; }
body .bg-test-stats.series-header { border-left-color: oklch(0.7 0.22 27) !important; }
body .bg-odi-stats.series-header  { border-left-color: oklch(0.7 0.18 210) !important; }
body .bg-t20i-stats.series-header { border-left-color: oklch(0.85 0.25 130) !important; }

/* Bootstrap card overrides for player page */
body .border { border-color: rgba(var(--n-surf),0.08) !important; }
body .border.shadow-sm { background: rgba(var(--n-panel),0.55) !important; box-shadow: none !important; }

/* ================================================================= */
/*   np-hero — jersey background color (uses team class)            */
/* ================================================================= */
/* Jersey background — maps team short name to a color. Hues match the
   nlist-tj-{short} tile palette above so a player's hero and their ranking /
   squad tile are the same colour. */
.np-hero2-jersey { background: oklch(0.35 0.14 210); } /* default blue */
.bg-ind-stats .np-hero2-jersey, .team-ind .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.50 0.20 258), oklch(0.42 0.17 258)); }
.bg-aus-stats .np-hero2-jersey, .team-aus .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.66 0.16 100), oklch(0.56 0.14 100)); }
.bg-eng-stats .np-hero2-jersey, .team-eng .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.34 0.11 268), oklch(0.28 0.10 268)); }
.bg-pak-stats .np-hero2-jersey, .team-pak .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.48 0.17 155), oklch(0.40 0.15 155)); }
.bg-wi-stats  .np-hero2-jersey, .team-wi  .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.44 0.19 18), oklch(0.37 0.16 18)); }
.bg-nz-stats  .np-hero2-jersey, .team-nz  .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.33 0.02 250), oklch(0.26 0.02 250)); }
.bg-sa-stats  .np-hero2-jersey, .team-sa  .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.55 0.13 178), oklch(0.46 0.12 178)); }
.bg-sl-stats  .np-hero2-jersey, .team-sl  .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.45 0.19 288), oklch(0.37 0.16 288)); }
.bg-ban-stats .np-hero2-jersey, .team-ban .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.38 0.13 148), oklch(0.32 0.12 148)); }
.bg-zim-stats .np-hero2-jersey, .team-zim .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.60 0.15 128), oklch(0.50 0.13 128)); }
.bg-afg-stats .np-hero2-jersey, .team-afg .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.63 0.13 228), oklch(0.53 0.12 228)); }
.bg-ire-stats .np-hero2-jersey, .team-ire .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.47 0.20 140), oklch(0.39 0.17 140)); }

/* ================================================================= */
/*   FORMAT/TEAM BG COLORS — scorecard, player tabs, series headers */
/* ================================================================= */
.bg-test-stats { background: color-mix(in oklch, var(--fmt-test) 20%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-odi-stats  { background: color-mix(in oklch, var(--fmt-odi) 20%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-t20i-stats { background: color-mix(in oklch, var(--fmt-t20i) 20%, transparent) !important; color: var(--n-ground) !important; }
.bg-cricstats  { background: rgba(var(--n-surf),0.08) !important; color: rgb(var(--n-ink)) !important; }
.bg-ipl        { background: rgba(var(--n-panel2),0.85) !important; color: rgba(var(--n-ink),0.7) !important; }

/* Team-specific card headers — scorecard & team pages */
.bg-ind-stats { background: oklch(0.55 0.22 27 / 0.25) !important;  color: rgb(var(--n-ink)) !important; }
.bg-aus-stats { background: oklch(0.65 0.22 75 / 0.25) !important;  color: rgb(var(--n-ink)) !important; }
.bg-eng-stats { background: oklch(0.38 0.16 260 / 0.35) !important; color: rgb(var(--n-ink)) !important; }
.bg-pak-stats { background: oklch(0.45 0.18 155 / 0.3) !important;  color: rgb(var(--n-ink)) !important; }
.bg-wi-stats  { background: oklch(0.48 0.22 27 / 0.25) !important;  color: rgb(var(--n-ink)) !important; }
.bg-nz-stats  { background: oklch(0.22 0.02 0 / 0.55) !important;   color: rgb(var(--n-ink)) !important; }
.bg-sa-stats  { background: oklch(0.48 0.2 145 / 0.3) !important;   color: rgb(var(--n-ink)) !important; }
.bg-sl-stats  { background: oklch(0.38 0.2 280 / 0.35) !important;  color: rgb(var(--n-ink)) !important; }
.bg-ban-stats { background: oklch(0.42 0.18 155 / 0.3) !important;  color: rgb(var(--n-ink)) !important; }
.bg-zim-stats { background: oklch(0.38 0.16 145 / 0.3) !important;  color: rgb(var(--n-ink)) !important; }
.bg-afg-stats { background: oklch(0.35 0.14 260 / 0.35) !important; color: rgb(var(--n-ink)) !important; }
.bg-ire-stats { background: oklch(0.42 0.18 145 / 0.3) !important;  color: rgb(var(--n-ink)) !important; }

/* Scorecard / stats table overrides */
body .table thead th { background: rgba(var(--n-panel2),0.8) !important; color: rgba(var(--n-ink),0.65) !important; border-color: rgba(var(--n-surf),0.06) !important; font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; letter-spacing: 1.5px !important; }
body .table tbody td { background: transparent !important; color: rgba(var(--n-ink),0.82) !important; border-color: rgba(var(--n-surf),0.05) !important; }
body .table-hover tbody tr:hover td { background: rgba(var(--n-surf),0.03) !important; }
body .table a { color: oklch(0.7 0.18 210) !important; }
body .table a:hover { color: oklch(0.85 0.25 130) !important; }
.bg-nz-stats  .np-hero2-jersey, .team-nz  .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.22 0.02 0), oklch(0.18 0.01 0)); }
.bg-sa-stats  .np-hero2-jersey, .team-sa  .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.48 0.2 145), oklch(0.40 0.16 145)); }
.bg-sl-stats  .np-hero2-jersey, .team-sl  .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.38 0.2 280), oklch(0.32 0.16 280)); }
.bg-ban-stats .np-hero2-jersey, .team-ban .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.42 0.18 155), oklch(0.35 0.15 155)); }
.bg-zim-stats .np-hero2-jersey, .team-zim .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.38 0.16 145), oklch(0.30 0.12 145)); }
.bg-afg-stats .np-hero2-jersey, .team-afg .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.35 0.14 260), oklch(0.28 0.10 260)); }
.bg-ire-stats .np-hero2-jersey, .team-ire .np-hero2-jersey { background: linear-gradient(165deg, oklch(0.42 0.18 145), oklch(0.35 0.15 145)); }

/* Series section headers - used by FillStats */
.nr-series-head.fmt-test { border-left-color: var(--fmt-test); }
.nr-series-head.fmt-odi  { border-left-color: var(--fmt-odi); }
.nr-series-head.fmt-t20i { border-left-color: var(--fmt-t20i); }

/* ================================================================= */
/*   FORMAT TYPE COLOR CLASSES (used with nr-card2-fmt, ns-match-fmt)*/
/* ================================================================= */
.fmt-test  { color: var(--fmt-test) !important;  border-color: color-mix(in oklch, var(--fmt-test) 30%, transparent) !important;  background: color-mix(in oklch, var(--fmt-test) 8%, transparent) !important; }
.fmt-odi   { color: var(--fmt-odi) !important; border-color: color-mix(in oklch, var(--fmt-odi) 30%, transparent) !important; background: color-mix(in oklch, var(--fmt-odi) 8%, transparent) !important; }
.fmt-t20i  { color: var(--fmt-t20i) !important; border-color: color-mix(in oklch, var(--fmt-t20i) 30%, transparent) !important; background: color-mix(in oklch, var(--fmt-t20i) 8%, transparent) !important; }
.fmt-all   { color: rgba(var(--n-ink),0.65) !important; border-color: rgba(var(--n-surf),0.15) !important; background: rgba(var(--n-surf),0.06) !important; }
/* T20 League badges */
.fmt-ipl   { color: oklch(0.65 0.22 27)   !important; border-color: oklch(0.65 0.22 27 / 0.35)  !important; background: oklch(0.65 0.22 27 / 0.08)  !important; }
.fmt-bbl   { color: oklch(0.6 0.20 250)   !important; border-color: oklch(0.6 0.20 250 / 0.35)  !important; background: oklch(0.6 0.20 250 / 0.08)  !important; }
.fmt-cpl   { color: oklch(0.7 0.22 145)   !important; border-color: oklch(0.7 0.22 145 / 0.35)  !important; background: oklch(0.7 0.22 145 / 0.08)  !important; }
.fmt-sa20  { color: oklch(0.72 0.24 30)   !important; border-color: oklch(0.72 0.24 30 / 0.35)  !important; background: oklch(0.72 0.24 30 / 0.08)  !important; }
.fmt-lpl   { color: oklch(0.68 0.22 300)  !important; border-color: oklch(0.68 0.22 300 / 0.35) !important; background: oklch(0.68 0.22 300 / 0.08) !important; }
.fmt-mlc   { color: oklch(0.7 0.20 75)    !important; border-color: oklch(0.7 0.20 75 / 0.35)   !important; background: oklch(0.7 0.20 75 / 0.08)   !important; }

/* Leaderboard card rank-1 accent (lime = top player) */
.n-sd-lb-card-rank-1 { color: oklch(0.85 0.25 130); }

/* Format badge inside leaderboard card title */
.n-sd-lb-card-fmt {
  display: inline-block; font-size: 8px; letter-spacing: 1.5px;
  padding: 2px 5px; border-radius: 4px; border: 1px solid rgba(var(--n-surf),0.1);
  background: rgba(var(--n-surf),0.04); color: rgba(var(--n-ink),0.5);
  vertical-align: middle; margin-left: 6px;
  font-family: 'JetBrains Mono', monospace;
}

/* ================================================================= */
/*   RESULTS PAGE — series group header                              */
/* ================================================================= */
.nr-series-group { margin-bottom: 28px; }
.nr-series-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  background: rgba(var(--n-panel),0.6);
  border-left: 3px solid oklch(0.7 0.22 27);
  border-radius: 0 8px 8px 0;
  margin-bottom: 14px;
}
.nr-series-head-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700;
  color: rgba(var(--n-ink),0.9); letter-spacing: 0.5px;
}
.nr-series-head-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px;
  color: oklch(0.7 0.18 210); text-decoration: none;
}
.nr-series-head-link:hover { color: oklch(0.85 0.25 130); text-decoration: none; }

/* results card team logo slot */
.nr-card2-team-logo {
  width: 36px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px; overflow: hidden;
  background: rgba(var(--n-surf),0.06);
}
.nr-card2-team-logo img { width: 100%; height: 100%; object-fit: contain; }

/* ================================================================= */
/*   FIXTURES PAGE — series group header & match card               */
/* ================================================================= */
.ns-series-group { margin-bottom: 28px; }
.ns-series-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  background: rgba(var(--n-panel),0.6);
  border-left: 3px solid oklch(0.7 0.18 210);
  border-radius: 0 8px 8px 0;
  margin-bottom: 14px;
}
.ns-series-head-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700;
  color: rgba(var(--n-ink),0.9); letter-spacing: 0.5px;
}
.ns-series-head-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px;
  color: oklch(0.7 0.18 210); text-decoration: none;
}
.ns-series-head-link:hover { color: oklch(0.85 0.25 130); text-decoration: none; }

/* fixtures match card - full-width clickable */
/* ── ns-fix-card: richer upcoming match card (matches nr-card2 quality) ─ */
.ns-days { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { .ns-days { grid-template-columns: 1fr; } }

.ns-fix-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.ns-fix-card:hover { background: rgba(var(--n-panel3),0.85); border-color: rgba(var(--n-surf),0.14); transform: translateY(-2px); text-decoration: none; color: inherit; }
.ns-fix-card-top { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px dashed rgba(var(--n-surf),0.06); }
.ns-fix-card-date { flex-shrink: 0; text-align: center; background: rgba(var(--n-surf),0.05); border-radius: 7px; padding: 6px 10px; min-width: 44px; }
.ns-fix-card-d   { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; }
.ns-fix-card-dow { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); margin-top: 2px; }
.ns-fix-card-meta { flex: 1; min-width: 0; }
.ns-fix-card-series { font-size: 12px; font-weight: 600; color: rgb(var(--n-ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-fix-card-time   { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; color: rgba(var(--n-ink),0.5); margin-top: 2px; }
.ns-fix-card-teams  { display: flex; flex-direction: column; gap: 6px; }
.ns-fix-card-team   { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; }
.ns-fix-card-badge  {
  width: 32px; height: 24px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700;
  letter-spacing: 0.5px; color: rgba(var(--n-surf),0.9);
}
.ns-fix-card-name { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-fix-card-foot  { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.ns-fix-card-venue { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.5px; color: rgba(var(--n-ink),0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-fix-card-h2h   { flex-shrink: 0; display: flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; }
.ns-fix-card-h2h-n { padding: 3px 7px; border-radius: 4px; background: rgba(var(--n-surf),0.07); font-size: 11px; font-weight: 700; color: rgba(var(--n-ink),0.7); }
.ns-fix-card-h2h-l { font-size: 8px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.3); }

/* Keep ns-match-card for backwards compat, new renders use ns-fix-card */
.ns-match-card {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  margin-bottom: 8px;
}
.ns-match-card:hover {
  background: rgba(var(--n-panel3),0.85);
  border-color: rgba(var(--n-surf),0.14);
  transform: translateY(-1px);
  text-decoration: none; color: inherit;
}
.ns-match-card-date {
  flex-shrink: 0;
  text-align: center;
  min-width: 52px;
  background: rgba(var(--n-surf),0.04);
  border-radius: 8px;
  padding: 8px 10px;
}
.ns-match-card-day  { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: rgb(var(--n-ink)); }
.ns-match-card-dow  { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); margin-top: 2px; }
.ns-match-card-body { flex: 1; min-width: 0; }
.ns-match-card-top  { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.ns-match-card-fmt  {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px;
  padding: 3px 6px; border-radius: 4px;
  border: 1px solid transparent;
}
.ns-match-card-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; color: rgba(var(--n-ink),0.55); }
.ns-match-card-teams {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: -0.3px;
  color: rgb(var(--n-ink));
  flex-wrap: wrap;
}
.ns-match-card-team { display: flex; align-items: center; gap: 8px; }
.ns-match-card-team img { width: 26px; height: 20px; object-fit: contain; }
.ns-match-card-vs { font-size: 11px; color: rgba(var(--n-ink),0.4); font-weight: 400; letter-spacing: 1px; }
.ns-match-card-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.5px;
  color: rgba(var(--n-ink),0.45); margin-top: 4px;
}
.ns-match-card-h2h {
  flex-shrink: 0; display: flex; gap: 4px; align-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
}
.ns-match-card-h2h-num {
  padding: 4px 7px; border-radius: 5px;
  background: rgba(var(--n-surf),0.06);
  font-weight: 700; font-size: 12px;
  color: rgba(var(--n-ink),0.7);
}
.ns-match-card-h2h-label { font-size: 8px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.35); }

/* ================================================================= */
/*   PLAYER PAGE — tab nav                                           */
/* ================================================================= */
.n-player-tabs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 8px 0 10px;
  border-bottom: 1px solid rgba(var(--n-surf),0.07);
  margin-bottom: 4px;
}
.n-player-tab {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 7px 16px;
  border-radius: 30px;
  border: none;
  background: transparent;
  color: rgba(var(--n-ink),0.38);
  transition: color 0.15s;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0;
}
.n-player-tab:hover {
  color: rgba(var(--n-ink),0.7);
  background: transparent;
}
.n-player-tab.on {
  color: #fff;
  background: oklch(0.58 0.22 25);
  font-weight: 700;
}
/* Tab strip wrapper — needed for sticky + fade on mobile */
.n-player-tabs-wrap { position: relative; }

/* Mobile: sticky pill strip with right-fade to signal more tabs */
@media (max-width: 768px) {
  .n-player-tabs-wrap {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(var(--n-ground-rgb),0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Bleed to screen edges (n-page has 20px padding) */
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
  }
  /* Right-fade gradient: tells users there are more tabs to scroll */
  .n-player-tabs-wrap::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 48px;
    background: linear-gradient(to left, rgba(var(--n-ground-rgb),0.96) 10%, transparent);
    pointer-events: none;
    z-index: 1;
  }
  .n-player-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 0 10px;
    gap: 6px;
  }
  .n-player-tabs::-webkit-scrollbar { display: none; }
  .n-player-tab { scroll-snap-align: start; flex-shrink: 0; padding: 6px 14px; font-size: 12px; }
}

/* ================================================================= */
/*   PLAYER PROFILE — neon layout wrappers                          */
/* ================================================================= */
.np { width: 100%; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.np-hero-glow { position: absolute; inset: 0; pointer-events: none; filter: blur(30px); }
.np-hero2 { position: relative; z-index: 1; display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
/* Team-specific hero glow gradients (applied via .tj-* class on np-hero) */
.np-hero.tj-ind  .np-hero-glow { background: radial-gradient(60% 70% at 0% 0%, oklch(0.60 0.20 27  / 0.25) 0%, transparent 55%), radial-gradient(50% 60% at 100% 0%, oklch(0.72 0.25 355 / 0.15) 0%, transparent 55%); }
.np-hero.tj-aus  .np-hero-glow { background: radial-gradient(60% 70% at 0% 0%, oklch(0.72 0.20 75  / 0.22) 0%, transparent 55%), radial-gradient(50% 60% at 100% 0%, oklch(0.72 0.25 355 / 0.12) 0%, transparent 55%); }
.np-hero.tj-eng  .np-hero-glow { background: radial-gradient(60% 70% at 0% 0%, oklch(0.42 0.16 260 / 0.28) 0%, transparent 55%), radial-gradient(50% 60% at 100% 0%, oklch(0.72 0.25 355 / 0.14) 0%, transparent 55%); }
.np-hero.tj-pak  .np-hero-glow { background: radial-gradient(60% 70% at 0% 0%, oklch(0.50 0.18 155 / 0.25) 0%, transparent 55%), radial-gradient(50% 60% at 100% 0%, oklch(0.72 0.25 355 / 0.12) 0%, transparent 55%); }
.np-hero.tj-wi   .np-hero-glow { background: radial-gradient(60% 70% at 0% 0%, oklch(0.50 0.22 27  / 0.25) 0%, transparent 55%), radial-gradient(50% 60% at 100% 0%, oklch(0.72 0.25 355 / 0.12) 0%, transparent 55%); }
.np-hero.tj-nz   .np-hero-glow { background: radial-gradient(60% 70% at 0% 0%, oklch(0.30 0.03 0   / 0.35) 0%, transparent 55%), radial-gradient(50% 60% at 100% 0%, oklch(0.72 0.25 355 / 0.12) 0%, transparent 55%); }
.np-hero.tj-sa   .np-hero-glow { background: radial-gradient(60% 70% at 0% 0%, oklch(0.52 0.20 145 / 0.25) 0%, transparent 55%), radial-gradient(50% 60% at 100% 0%, oklch(0.72 0.25 355 / 0.12) 0%, transparent 55%); }
.np-hero.tj-sl   .np-hero-glow { background: radial-gradient(60% 70% at 0% 0%, oklch(0.42 0.20 280 / 0.28) 0%, transparent 55%), radial-gradient(50% 60% at 100% 0%, oklch(0.72 0.25 355 / 0.14) 0%, transparent 55%); }
.np-hero.tj-ban  .np-hero-glow { background: radial-gradient(60% 70% at 0% 0%, oklch(0.46 0.18 155 / 0.25) 0%, transparent 55%), radial-gradient(50% 60% at 100% 0%, oklch(0.72 0.25 355 / 0.12) 0%, transparent 55%); }
.np-hero.tj-zim  .np-hero-glow { background: radial-gradient(60% 70% at 0% 0%, oklch(0.42 0.16 145 / 0.25) 0%, transparent 55%), radial-gradient(50% 60% at 100% 0%, oklch(0.72 0.25 355 / 0.12) 0%, transparent 55%); }
.np-hero.tj-afg  .np-hero-glow { background: radial-gradient(60% 70% at 0% 0%, oklch(0.38 0.14 260 / 0.28) 0%, transparent 55%), radial-gradient(50% 60% at 100% 0%, oklch(0.72 0.25 355 / 0.14) 0%, transparent 55%); }
.np-hero.tj-ire  .np-hero-glow { background: radial-gradient(60% 70% at 0% 0%, oklch(0.45 0.18 145 / 0.25) 0%, transparent 55%), radial-gradient(50% 60% at 100% 0%, oklch(0.72 0.25 355 / 0.12) 0%, transparent 55%); }
.np-hero2-jersey {
  flex-shrink: 0; position: relative; overflow: hidden;
  width: 110px; height: 130px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
}
.np-jersey-shoulder { position: absolute; top: 0; left: -12px; right: -12px; height: 32px; border-radius: 0 0 50% 50%; background: rgba(var(--n-shadow),0.15); }
.np-jersey-stripes { position: absolute; inset: 0; opacity: 0.4; }
.np-jersey-name { font-family: 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: 1px; font-weight: 700; position: relative; z-index: 1; }
.np-jersey-num  { font-family: 'Space Grotesk', sans-serif; font-size: 38px; font-weight: 800; line-height: 1; position: relative; z-index: 1; }
.np-jersey-team { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; position: relative; z-index: 1; opacity: 0.75; }
.np-hero2-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.np-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.np-hero-name { font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 4vw, 40px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: rgb(var(--n-ink)); margin: 0; }
.np-hero-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px; color: rgba(var(--n-ink),0.5); }
.np-hero-rank { display: flex; gap: 10px; flex-wrap: wrap; }
.np-rank-pill { background: rgba(var(--n-surf),0.05); border: 1px solid rgba(var(--n-surf),0.09); border-radius: 8px; padding: 8px 12px; min-width: 110px; }
/* Debut/latest match dates — fills out the pill so it isn't just a cap number
   floating in empty space. */
.np-rank-dates { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(var(--n-surf),0.08); display: flex; flex-direction: column; gap: 3px; }
.np-rank-date-row { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: rgba(var(--n-ink),0.55); white-space: nowrap; }
.np-rank-date-row span { color: rgba(var(--n-ink),0.35); letter-spacing: 1px; margin-right: 5px; }
.np-rank-k { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); margin-bottom: 2px; }
.np-rank-r { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 800; color: oklch(0.7 0.22 27); line-height: 1; }
.np-rank-rt { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.45); margin-top: 2px; }
.np-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ================================================================= */
/*   COMPACT HERO — mini badge + unified info grid + insight panel   */
/*   Replaces the old big-jersey 3-column layout. Single source of  */
/*   truth for full name / born / bats / bowls / role / teams — no  */
/*   duplicate info-bar needed anymore.                              */
/* ================================================================= */
.np-hero { padding: 10px 0px; }
.np-hero-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.np-jersey-mini {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: rgba(var(--n-surf),0.06); border: 1px solid rgba(var(--n-surf),0.1);
}
.np-jm-num { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 800; line-height: 1; position: relative; z-index: 1; }
.np-jm-team { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 1.5px; opacity: 0.85; position: relative; z-index: 1; }
/* Team background gradients — same hues as .np-hero.tj-* glow, so the
   mini badge colour matches the rest of the hero accent for that team. */
.np-jersey-mini.tj-ind { background: linear-gradient(165deg, oklch(0.55 0.22 27),  oklch(0.40 0.18 27));  border-color: oklch(0.6 0.22 27 / 0.4); }
.np-jersey-mini.tj-aus { background: linear-gradient(165deg, oklch(0.65 0.20 75),  oklch(0.48 0.18 75));  border-color: oklch(0.65 0.2 75 / 0.4); }
.np-jersey-mini.tj-eng { background: linear-gradient(165deg, oklch(0.40 0.16 260), oklch(0.26 0.14 260)); border-color: oklch(0.42 0.16 260 / 0.4); }
.np-jersey-mini.tj-pak { background: linear-gradient(165deg, oklch(0.46 0.18 155), oklch(0.32 0.15 155)); border-color: oklch(0.46 0.18 155 / 0.4); }
.np-jersey-mini.tj-wi  { background: linear-gradient(165deg, oklch(0.48 0.22 27),  oklch(0.34 0.18 27));  border-color: oklch(0.48 0.22 27 / 0.4); }
.np-jersey-mini.tj-nz  { background: linear-gradient(165deg, oklch(0.24 0.02 0),   oklch(0.14 0.01 0));   border-color: rgba(var(--n-surf),0.18); }
.np-jersey-mini.tj-sa  { background: linear-gradient(165deg, oklch(0.50 0.20 145), oklch(0.35 0.16 145)); border-color: oklch(0.5 0.2 145 / 0.4); }
.np-jersey-mini.tj-sl  { background: linear-gradient(165deg, oklch(0.40 0.20 280), oklch(0.27 0.16 280)); border-color: oklch(0.4 0.2 280 / 0.4); }
.np-jersey-mini.tj-ban { background: linear-gradient(165deg, oklch(0.44 0.18 155), oklch(0.30 0.15 155)); border-color: oklch(0.44 0.18 155 / 0.4); }
.np-jersey-mini.tj-zim { background: linear-gradient(165deg, oklch(0.40 0.16 145), oklch(0.25 0.12 145)); border-color: oklch(0.4 0.16 145 / 0.4); }
.np-jersey-mini.tj-afg { background: linear-gradient(165deg, oklch(0.37 0.14 260), oklch(0.23 0.10 260)); border-color: oklch(0.37 0.14 260 / 0.4); }
.np-jersey-mini.tj-ire { background: linear-gradient(165deg, oklch(0.44 0.18 145), oklch(0.30 0.15 145)); border-color: oklch(0.44 0.18 145 / 0.4); }
.np-hero-top-meta { flex: 1; min-width: 0; }
.np-hero-top-meta .np-hero-name { margin: 0; line-height: 1.05; }
.np-hero-top-meta .np-hero-sub { margin-top: 3px; text-transform: uppercase; }
.np-hero-top-team {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px;
  color: rgba(var(--n-ink),0.7); padding: 6px 12px;
  background: rgba(var(--n-surf),0.04); border: 1px solid rgba(var(--n-surf),0.08); border-radius: 20px;
}
/* Series winner chip — right-aligned on the series hero header row */
.np-series-winner {
  flex-shrink: 0; margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 12px;
  background: linear-gradient(135deg, oklch(0.82 0.18 87 / 0.14), rgba(255,255,255,0.03));
  border: 1px solid oklch(0.82 0.18 87 / 0.3);
}
.np-series-winner-icon { font-size: 22px; line-height: 1; }
.np-series-winner-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.np-series-winner-k { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 1.5px; color: rgba(242,242,246,0.5); }
.np-series-winner-v { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: -0.3px; color: oklch(0.85 0.16 87); white-space: nowrap; }
.np-series-winner-m { font-size: 10px; color: rgba(242,242,246,0.55); white-space: nowrap; }
@media (max-width: 560px) {
  .np-series-winner { padding: 6px 10px; gap: 8px; }
  .np-series-winner-icon { font-size: 18px; }
  .np-series-winner-v { font-size: 13px; }
}
/* ── Hero records ticker ─────────────────────────────────────────────────── */
.np-hero-records {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  min-width: 120px; margin: 0 12px;
  text-align: right;
}
.np-hr-value {
  font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 800;
  line-height: 1; color: oklch(0.85 0.25 130);
}
.np-hr-value.roll {
  animation: nhrRoll 0.18s ease-out both;
}
.np-hr-value.settle {
  animation: nhrRoll 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
.np-hr-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1.4px;
  text-transform: uppercase; color: rgba(var(--n-ink),0.55);
}
.np-hr-note {
  font-family: 'Inter', sans-serif; font-size: 10px;
  color: rgba(var(--n-ink),0.35); max-width: 180px; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-hr-label.fade, .np-hr-note.fade {
  animation: nhrFade 0.4s ease both;
  animation-delay: 0.15s;
}
@keyframes nhrRoll {
  0%   { opacity: 0; transform: translateY(18px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes nhrFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
  .np-hero-records { min-width: 90px; margin: 0 8px; }
  .np-hr-value { font-size: 22px; }
  .np-hr-note { display: none; }
}

.np-hero-row { position: relative; z-index: 1; display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.np-hero-infocol { flex: 1 1 380px; min-width: 0; display: flex; }

/* Single card wrapping info-grid + rank pills — mirrors the insight panel's
   card treatment so the row reads as two complete, equal-weight panels.
   flex:1 + flex-direction:column + the pills row pinned via margin-top:auto
   means the card always fills the full row height with no dead space,
   no matter how tall the insight panel on the right grows. */
.np-info-card {
  flex: 1; display: flex; flex-direction: column; gap: 14px;
  background: rgba(var(--n-inset),0.3); border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 12px; padding: 16px;
}
.np-info-grid2 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px;
}
.np-ig-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.np-ig-k { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.42); }
.np-ig-v { font-size: 13px; font-weight: 600; color: rgba(var(--n-ink),0.92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-info-divider { height: 1px; background: rgba(var(--n-surf),0.07); margin: 0; }
/* Rank pills sink to the bottom of the card so any extra height (when the
   insight panel on the right is taller) becomes intentional breathing room
   above the divider, not blank space below the pills. */
.np-info-card .np-hero-rank { margin-top: auto; }

@media (max-width: 768px) {
  .np-hero { padding: 10px 0px; }
  .np-hero-top { gap: 10px; margin-bottom: 12px; }
  .np-jersey-mini { width: 46px; height: 46px; border-radius: 10px; }
  .np-jm-num { font-size: 14px; }
  .np-hero-top-meta .np-hero-name { font-size: clamp(18px, 5.5vw, 26px); }
  .np-hero-top-meta .np-hero-sub { font-size: 9px; }
  .np-hero-top-team { display: none; } /* already shown via the team chip text in subtitle isn't enough alone, but mini badge covers it */
  .np-info-card { padding: 12px; gap: 10px; }
  .np-info-grid2 { grid-template-columns: 1fr 1fr; gap: 9px 12px; }
  .np-ig-v { white-space: normal; font-size: 12px; }
  .np-hero-row { gap: 10px; }
}

.np-career { }
.np-career-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.np-cs { background: rgba(var(--n-panel),0.6); border: 1px solid rgba(var(--n-surf),0.07); border-radius: 10px; padding: 14px 16px; }
.np-cs.big { grid-column: span 2; }
.np-cs-k { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); margin-bottom: 4px; }
.np-cs-v { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 800; line-height: 1; }
.np-cs.big .np-cs-v { font-size: 40px; }

.np-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.np-form-card { background: rgba(var(--n-panel),0.6); border: 1px solid rgba(var(--n-surf),0.07); border-radius: 10px; padding: 14px; }
.np-form-card.result-w { border-bottom: 3px solid oklch(0.85 0.25 130); }
.np-form-card.result-l { border-bottom: 3px solid oklch(0.68 0.28 27); }
.np-form-card.result-d { border-bottom: 3px solid oklch(0.7 0.18 210); }
.np-form-top { display: flex; justify-content: space-between; margin-bottom: 6px; }
.np-form-fmt { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }
.np-form-vs  { font-size: 11px; color: rgba(var(--n-ink),0.7); }
.np-form-line { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 800; color: rgb(var(--n-ink)); }
.np-form-not { color: oklch(0.85 0.25 130); }
.np-form-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: rgba(var(--n-ink),0.45); }
.np-form-result { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; font-weight: 700; }
.np-form-result.w { color: oklch(0.85 0.25 130); }
.np-form-result.l { color: oklch(0.68 0.28 27); }
.np-form-result.d { color: oklch(0.7 0.18 210); }

.np-top-list { display: flex; flex-direction: column; }
.np-top-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(var(--n-surf),0.05); text-decoration: none; transition: background 0.15s; }
.np-top-row:hover { background: rgba(var(--n-surf),0.03); text-decoration: none; }
.np-top-runs { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 800; color: oklch(0.85 0.25 130); }
.np-top-balls { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(var(--n-ink),0.5); }
.np-top-meta { flex: 1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.np-top-fmt  { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }
.np-top-vs   { font-size: 13px; color: rgba(var(--n-ink),0.8); }
.np-top-venue { font-size: 11px; color: rgba(var(--n-ink),0.5); }
.np-top-note  { font-size: 10px; }
.np-top-date  { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(var(--n-ink),0.4); flex-shrink: 0; }

.np-splits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) { .np-splits-grid { grid-template-columns: 1fr; } }
.np-split-card { background: rgba(var(--n-panel),0.6); border: 1px solid rgba(var(--n-surf),0.07); border-radius: 12px; padding: 20px; }
.np-split-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.np-split-row { display: flex; align-items: center; gap: 10px; }
.np-split-team  { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px; min-width: 50px; }
.np-split-ground { font-size: 12px; min-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 120px; }
.np-split-bar { flex: 1; height: 4px; background: rgba(var(--n-surf),0.07); border-radius: 2px; overflow: hidden; }
.np-split-bar-fill { height: 100%; border-radius: 2px; }
.np-split-v { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; min-width: 40px; text-align: right; }
.np-split-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(var(--n-ink),0.45); min-width: 100px; }

.np-ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.np-ms-tile { background: rgba(var(--n-panel),0.6); border: 1px solid rgba(var(--n-surf),0.07); border-radius: 10px; padding: 16px; }
.np-ms-tile.done { border-color: oklch(0.85 0.25 130 / 0.3); }
.np-ms-goal  { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); margin-bottom: 8px; }
.np-ms-bar   { height: 4px; background: rgba(var(--n-surf),0.07); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.np-ms-fill  { height: 100%; border-radius: 2px; }
.np-ms-pct   { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 800; }
.np-ms-pct span { font-size: 14px; color: rgba(var(--n-ink),0.5); }
.np-ms-note  { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.45); margin-top: 4px; }

.np-tw-table, .np-gw-table, .np-rm-table {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-radius: 10px; overflow: hidden;
}
.np-tw-head, .np-gw-head, .np-rm-head {
  display: grid; padding: 8px 14px; gap: 10px;
  background: rgba(var(--n-surf),0.04);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5);
}
.np-tw-head { grid-template-columns: 70px repeat(6, 1fr); }
.np-gw-head { grid-template-columns: 2fr repeat(6, 1fr); }
.np-rm-head { grid-template-columns: 80px 50px 70px 1fr 100px 80px; }
.np-tw-row, .np-gw-row, .np-rm-row {
  display: grid; padding: 9px 14px; gap: 10px;
  border-top: 1px solid rgba(var(--n-surf),0.04);
  font-size: 12px; color: rgba(var(--n-ink),0.75);
  align-items: center;
  transition: background 0.15s;
}
.np-tw-row { grid-template-columns: 70px repeat(6, 1fr); }
.np-gw-row { grid-template-columns: 2fr repeat(6, 1fr); }
.np-rm-row { grid-template-columns: 80px 50px 70px 1fr 100px 80px; }
.np-tw-row:hover, .np-gw-row:hover, .np-rm-row:hover { background: rgba(var(--n-surf),0.03); }
.np-tw-team, .np-gw-ground { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; }
.np-tw-w { color: oklch(0.85 0.25 130); }
.np-tw-l { color: oklch(0.68 0.28 27); }
.np-tw-d { color: oklch(0.7 0.18 210); }
.np-tw-sep { color: rgba(var(--n-surf),0.2); }
.np-rm-fmt { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; padding: 2px 5px; border-radius: 3px; background: rgba(var(--n-surf),0.06); }
.np-rm-vs  { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; }
.np-rm-perf { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 800; color: oklch(0.85 0.25 130); }
.np-rm-result-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1.5px; padding: 2px 5px; border-radius: 3px; font-weight: 700; }
.np-rm-result-tag.w { background: oklch(0.85 0.25 130 / 0.15); color: oklch(0.85 0.25 130); }
.np-rm-result-tag.l { background: oklch(0.68 0.28 27 / 0.15); color: oklch(0.68 0.28 27); }
.np-rm-result-tag.d { background: oklch(0.7 0.18 210 / 0.15); color: oklch(0.7 0.18 210); }

.np-ai { }
.np-year { }
.np-year-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
@media (max-width: 768px) { .np-year-grid { grid-template-columns: 1fr; } }
.np-year-chart { background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.07); border-radius: 12px; padding: 16px; overflow: hidden; }
.np-year-table { background: rgba(var(--n-panel),0.55); border: 1px solid rgba(var(--n-surf),0.07); border-radius: 12px; overflow: hidden; }
.np-year-head { display: grid; grid-template-columns: 60px repeat(5, 1fr); padding: 8px 14px; gap: 8px; background: rgba(var(--n-surf),0.04); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5); }
.np-year-row  { display: grid; grid-template-columns: 60px repeat(5, 1fr); padding: 9px 14px; gap: 8px; border-top: 1px solid rgba(var(--n-surf),0.04); font-size: 12px; color: rgba(var(--n-ink),0.75); align-items: center; }
.np-year-y    { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: rgb(var(--n-ink)); }

.np-mu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.np-mu-card { background: rgba(var(--n-panel),0.6); border: 1px solid rgba(var(--n-surf),0.07); border-radius: 10px; padding: 14px; }
.np-mu-card.adv-bat  { border-bottom: 3px solid oklch(0.85 0.25 130); }
.np-mu-card.adv-bowl { border-bottom: 3px solid oklch(0.68 0.28 27); }
.np-mu-bowler { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.np-mu-bname  { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: rgb(var(--n-ink)); }
.np-mu-bteam  { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; }
.np-mu-stats  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.np-mu-stat   { text-align: center; }
.np-mu-stat-k { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 2px; color: rgba(var(--n-ink),0.45); margin-bottom: 2px; }
.np-mu-stat-v { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 800; }
.np-mu-foot   { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1.5px; }

/* ================================================================= */
/*   MATCH CENTER — result + scorecard layout                        */
/* ================================================================= */

/* Match result text displayed below the scoreline */
.n-mc-result {
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 600;
  color: rgba(var(--n-ink),0.75);
  padding: 10px 0 2px;
  letter-spacing: 0.3px;
}

/* Winner highlight on team name */
.n-mc-team .winner .n-mc-name::after {
  content: ' ✓';
  color: oklch(0.85 0.25 130);
  font-size: 12px;
}
.n-mc-name.winner-mark { color: oklch(0.85 0.25 130); }

/* Team badge — format-specific fallback colors */
.n-mc-badge { color: var(--n-ground); font-weight: 800; }
.n-mc-badge-ind { background: oklch(0.60 0.20 27); }
.n-mc-badge-aus { background: oklch(0.72 0.20 75); }
.n-mc-badge-eng { background: oklch(0.42 0.16 260); color: rgb(var(--n-ink)); }
.n-mc-badge-pak { background: oklch(0.50 0.18 155); color: rgb(var(--n-ink)); }
.n-mc-badge-wi  { background: oklch(0.50 0.22 27); }
.n-mc-badge-nz  { background: oklch(0.30 0.03 0); color: rgb(var(--n-ink)); }
.n-mc-badge-sa  { background: oklch(0.52 0.20 145); }
.n-mc-badge-sl  { background: oklch(0.42 0.20 280); color: rgb(var(--n-ink)); }
.n-mc-badge-ban { background: oklch(0.46 0.18 155); color: rgb(var(--n-ink)); }
.n-mc-badge-zim { background: oklch(0.42 0.16 145); color: rgb(var(--n-ink)); }
.n-mc-badge-afg { background: oklch(0.38 0.14 260); color: rgb(var(--n-ink)); }
.n-mc-badge-ire { background: oklch(0.45 0.18 145); color: rgb(var(--n-ink)); }
.n-mc-badge-default { background: rgba(var(--n-surf),0.12); color: rgb(var(--n-ink)); }

/* Main scorecard content area (below tabs) */
.n-mc-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 4px;
}

/* Scorecard wrapper — used as outer n-mc container */
/* No max-width of its own: the master's .n-page already caps the column at
   1440px, and a second 1200px cap here made the scorecard / summary / stats /
   performance pages visibly narrower than the match preview, which sits
   directly in .n-page. Same container, same width, across the match set. */
.n-mc-sc {
  margin: 0 auto;
  padding: 0 0 60px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ESPNcricinfo external link strip */
.n-cricinfo-link { padding: 10px 4px; }

/* Bootstrap table compatibility (since Bootstrap CSS is not loaded) */
table.table { width: 100%; border-collapse: collapse; }
table.table th, table.table td { padding: 8px 12px; border-bottom: 1px solid rgba(var(--n-surf),0.06); font-size: 13px; }
table.table thead th { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); font-weight: 400; text-transform: uppercase; }
table.table tbody tr:hover { background: rgba(var(--n-surf),0.03); }
table.table.table-hover tbody tr:hover { background: rgba(var(--n-surf),0.04); }

/* Innings card */
.n-sc-inning {
  background: rgba(var(--n-panel2),0.65);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Innings header — replaces card-header bg-X-stats */
.n-sc-inning-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: rgba(var(--n-panel),0.75);
  border-bottom: 1px solid rgba(var(--n-surf),0.07);
}
.n-sc-inning-team {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 700;
  color: rgb(var(--n-ink));
}
.n-sc-inning-team img {
  width: 30px; height: 24px;
  object-fit: contain;
  border-radius: 3px;
}
.n-sc-inning-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 700;
  color: rgb(var(--n-ink)); letter-spacing: 0.5px;
}
/* Format-specific left-border accent on innings header */
.n-sc-inning-head.fmt-test { border-left: 3px solid var(--fmt-test); }
.n-sc-inning-head.fmt-odi  { border-left: 3px solid var(--fmt-odi); }
.n-sc-inning-head.fmt-t20i { border-left: 3px solid var(--fmt-t20i); }

/* Table body inside scorecard inning */
.n-sc-inning-body {
  padding: 0;
  overflow-x: auto;
}
.n-sc-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 3px;
  color: rgba(var(--n-ink),0.4);
  padding: 8px 18px 4px;
  text-transform: uppercase;
}

/* Breadcrumb box — match pages */
.breadcrumb-box {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  margin-bottom: 4px;
}
.breadcrumb-left { flex: 1; min-width: 0; }
body .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
body .breadcrumb-item { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; }
body .breadcrumb-item a { color: oklch(0.7 0.18 210) !important; text-decoration: none; }
body .breadcrumb-item a:hover { color: oklch(0.85 0.25 130) !important; }
body .breadcrumb-item.active { color: rgba(var(--n-ink),0.55) !important; }
body .breadcrumb-item + .breadcrumb-item::before { color: rgba(var(--n-surf),0.2) !important; }
.breadcrumb-compare {
  display: inline-flex; align-items: center; padding: 4px 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px;
  color: oklch(0.85 0.25 130); border: 1px solid oklch(0.85 0.25 130 / 0.3);
  border-radius: 4px; text-decoration: none; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.breadcrumb-compare:hover { background: oklch(0.85 0.25 130 / 0.1); border-color: oklch(0.85 0.25 130 / 0.6); }

/* row wrappers inside scorecard-container */
body .bg-header { background: transparent !important; }

/* Two-column layout for match summary (info + scorecard side by side) */
.n-mc-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}
@media (max-width: 900px) { .n-mc-2col { grid-template-columns: 1fr; } }

/* Two-column layout inside a scorecard inning (batting | bowling in summary) */
.n-sc-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 760px) { .n-sc-2col { grid-template-columns: 1fr; } }

/* Match info table (left column in match summary) */
.n-mc-info {
  padding: 16px 18px;
}
.n-mc-info-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 700;
  color: rgb(var(--n-ink));
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--n-surf),0.07);
}
.n-mc-info-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
}
.n-mc-info-list dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.45);
  padding-top: 2px; text-transform: uppercase;
  font-weight: 400;
}
.n-mc-info-list dd {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 500;
  color: rgba(var(--n-ink),0.82);
  margin: 0;
}

/* Separator column in batting/bowling tables */
.n-sc-sep-col {
  border-left: 1px solid rgba(var(--n-surf),0.07) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: rgba(var(--n-ink),0.45) !important;
}
.n-sc-sep-col a {
  color: oklch(0.7 0.18 210) !important;
  text-decoration: none !important;
}
.n-sc-sep-col a:hover {
  color: oklch(0.85 0.25 130) !important;
}

/* ─── TWO-COLUMN GRID (series squad, squad splits) ──────────────────────── */
.n-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 760px) { .n-2col { grid-template-columns: 1fr; } }

/* ─── RANKING PAGE HEADER (title + nav links) ───────────────────────────── */
.n-ranking-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 18px;
}
.n-ranking-header h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgb(var(--n-ink));
  margin: 0;
  flex: 1;
  min-width: 220px;
}
.n-ranking-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.n-ranking-nav a {
  color: rgba(var(--n-ink),0.55);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(var(--n-surf),0.08);
  transition: color 0.15s, border-color 0.15s;
}
.n-ranking-nav a:hover,
.n-ranking-nav a.active {
  color: oklch(0.85 0.25 130);
  border-color: oklch(0.85 0.25 130 / 0.4);
}

/* ─── HEAD-TO-HEAD FORMAT SECTION ───────────────────────────────────────── */
.n-h2h-section { margin-bottom: 20px; }
.n-h2h-section .n-fmt-card + .n-fmt-card { margin-top: 10px; }

/* Spacing utilities */
.n-mt-sm { margin-top: 8px; }
.n-mt-md { margin-top: 12px; }
.n-mt-lg { margin-top: 20px; }
.n-mb-sm { margin-bottom: 8px; }
.n-mb-md { margin-bottom: 12px; }
.n-mb-lg { margin-bottom: 20px; }

/* Overall / all-formats card head (neutral slate) */
.bg-all-stats {
  background: oklch(0.35 0.06 260);
  color: rgb(var(--n-ink));
}

/* =========================================================================
   UTILITY CLASSES — added to support design-match updates
   ========================================================================= */

/* Date string in result card meta (dimmed, small) */
.nr-card2-date-str {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: rgba(var(--n-ink),0.45);
  margin-top: 2px;
}

/* Team flag/logo inside n-chip */
.n-chip-flag {
  width: 16px;
  height: 12px;
  object-fit: contain;
  margin-right: 4px;
  vertical-align: middle;
}

/* Player stats by format section wrapper */
.np-fmt-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}

/* =========================================================================
   HOMEPAGE — n-sd section formatting on stats-page
   ========================================================================= */
.n-home-main {
  min-width: 0;
}

/* n-year-select as standalone element on homepage */
.n-year-select {
  display: inline-flex;
  align-items: center;
}
.n-year-select select {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  background: rgba(var(--n-surf),0.04);
  border: 1px solid rgba(var(--n-surf),0.1);
  color: rgba(var(--n-ink),0.7);
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.n-year-select select:focus { outline: none; border-color: oklch(0.85 0.25 130 / 0.5); }

/* =========================================================================
   NS-PAGE: schedule / results page layout
   ========================================================================= */
.ns-page .n-pastyears {
  padding: 0;
}
.ns-page .n-pastyears a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(var(--n-ink),0.5);
  text-decoration: none;
  padding: 3px 7px;
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 4px;
  transition: color 0.15s, border-color 0.15s;
  display: inline-block;
  margin: 2px 3px 2px 0;
}
.ns-page .n-pastyears a:hover {
  color: oklch(0.85 0.25 130);
  border-color: oklch(0.85 0.25 130 / 0.4);
}

/* =========================================================================
   NSTATS RECORDS (StatsPage) — section heading
   ========================================================================= */
.nstats-records .n-section-head,
.nstats-records .nr-series-head {
  margin-bottom: 8px;
}

/* =========================================================================
   NP HERO section — jersey team background classes
   (used when team-color CSS var is not available server-side)
   ========================================================================= */
/* The per-team .tj-{short} variants that used to live here were a third copy of
   the palette and nothing emitted the classes — the hero is coloured by the
   .team-{short} wrapper block above. Text stays light on every tint. */
.np-hero2-jersey { color: rgb(var(--n-ink)); }

/* =========================================================================
   DP (detail page) — page wrapper base
   ========================================================================= */
.dp {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================================================================
   NR FEAT TEAM JERSEY — inline team badge in featured result
   ========================================================================= */
.nr-feat-team-jersey {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* =========================================================================
   NR PERF block in featured result
   ========================================================================= */
.nr-perf {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(var(--n-inset),0.25);
  border: 1px solid rgba(var(--n-surf),0.05);
  border-radius: 10px;
}
.nr-perf-label {
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.nr-perf-row { display: flex; align-items: center; gap: 10px; }
.nr-perf-name { font-size: 13px; font-weight: 700; }
.nr-perf-line { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; }

/* Jersey component in result cards */
.jersey {
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

/* =========================================================================
   NS-HEAD — schedule/results page header (missing own rule)
   ========================================================================= */
.ns-head {
  padding-bottom: 4px;
}

/* =========================================================================
   NLIST HEAD subtitle
   ========================================================================= */
.nlist-head .n-year-select {
  margin-top: 8px;
}

/* =========================================================================
   N-SD SECTION on homepage — override section gap
   ========================================================================= */
.nlist > .n-sd {
  padding: 0;
}
.nlist > .n-stories {
  padding: 0;
}

/* =========================================================================
   N-PASTYEARS — year pill strip on schedule/results/homepage
   ========================================================================= */
.n-pastyears {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.n-pastyears a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(var(--n-ink),0.5);
  text-decoration: none;
  padding: 3px 7px;
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 4px;
  transition: color 0.15s, border-color 0.15s;
}
.n-pastyears a:hover,
.n-pastyears a.active {
  color: oklch(0.85 0.25 130);
  border-color: oklch(0.85 0.25 130 / 0.4);
}

/* ================================================================= */
/*   PLAYER PAGE — full-width insight banner (above hero)            */
/* ================================================================= */
.np-page-insight {
  background: rgba(var(--n-inset),0.35);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.np-page-insight-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.np-page-insight-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px;
  padding: 4px 10px; border-radius: 5px;
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; flex-shrink: 0;
  font-weight: 600;
}
.np-page-insight-text {
  flex: 1; font-size: 13px; line-height: 1.6;
  color: rgba(var(--n-ink),0.88);
  min-width: 200px;
}
.np-page-insight-day {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; letter-spacing: 1px;
  color: rgba(var(--n-ink),0.28);
  white-space: nowrap; flex-shrink: 0;
}
@media (max-width: 700px) {
  .np-page-insight-day { display: none; }
  .np-page-insight-inner { gap: 8px; padding: 10px 12px; }
}

/* ================================================================= */
/*   PLAYER HERO — 3-column layout: jersey | info | insight          */
/* ================================================================= */

/* 3-column hero row */
.np-hero3 {
  display: flex; align-items: stretch; gap: 20px;
  position: relative; z-index: 1;
}
/* In 3-col layout, meta takes remaining space */
.np-hero3 .np-hero2-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 10px; justify-content: center;
}
@media (max-width: 900px) { .np-hero3 { flex-wrap: wrap; } }
@media (max-width: 600px) { .np-hero3 .np-hero2-jersey { width: 100px; } }

/* Right-side insight column — wider for 3 cards */
.np-hero-insight-col {
  width: 300px; min-width: 260px; flex-shrink: 0;
  background: rgba(var(--n-inset),0.3);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
}
/* Subtle left accent line using CSS var set by JS/inline */
.np-hero-insight-col::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ic, oklch(0.6 0.18 254));
  border-radius: 0 2px 2px 0;
  opacity: 0.7;
}

.np-hic-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.np-hic-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; letter-spacing: 2px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(var(--n-surf),0.05);
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; gap: 4px;
  opacity: 0.9;
}
.np-hic-day {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; letter-spacing: 1px;
  color: rgba(var(--n-ink),0.28);
  white-space: nowrap;
}
/* Slider viewport — clips overflow so only 1 + peek are visible */
.np-hic-slider {
  position: relative;
  overflow: hidden;
  /* CSS fallback height: ~1 card + 45% peek; JS refines after render */
  height: 118px;
}
/* Mask gradient at bottom to signal more cards below */
.np-hic-slider::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 44px;
  background: linear-gradient(to top, rgba(var(--n-panel2),0.85), transparent);
  pointer-events: none;
}
/* Moving track — sits inside the clipped slider */
.np-hic-track {
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
/* Each card slide */
.np-hic-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  background: rgba(var(--n-surf),0.03);
  border: 1px dashed rgba(var(--n-surf),0.07);
  border-radius: 8px;
  flex-shrink: 0;
  transition: background 150ms, border-color 150ms;
  cursor: pointer;
}
.np-hic-card:hover  { background: rgba(var(--n-surf),0.06); border-color: rgba(var(--n-surf),0.12); }
.np-hic-card.active { border-color: rgba(var(--n-surf),0.14); background: rgba(var(--n-surf),0.05); }
.np-hic-n {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 800; line-height: 1;
  min-width: 20px; opacity: 0.65; flex-shrink: 0;
}
.np-hic-text {
  font-size: 11px; line-height: 1.62;
  color: rgba(var(--n-ink),0.75);
  margin: 0; flex: 1;
}
/* Navigation dots */
.np-hic-dots {
  display: flex; gap: 6px; align-items: center;
  margin-top: 6px;
}
.np-hic-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(var(--n-surf),0.18);
  border: 0; padding: 0; cursor: pointer;
  transition: background 0.2s, width 0.2s;
}
.np-hic-dot.on {
  background: var(--ic, oklch(0.6 0.18 254));
  width: 16px; border-radius: 3px;
}
/* Refresh footer */
.np-hic-refresh {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; letter-spacing: 1px;
  color: rgba(var(--n-ink),0.2);
  border-top: 1px dashed rgba(var(--n-surf),0.06);
  padding-top: 7px;
}

/* Collapse insight col on small screens */
@media (max-width: 1200px) { .np-hero-insight-col { width: 260px; min-width: 220px; } }
@media (max-width: 1000px) { .np-hero-insight-col { width: 230px; min-width: 200px; } }
@media (max-width: 900px)  { .np-hero-insight-col { display: none; } }

/* Standalone insight panel — PlayerDetails.aspx: all 3 cards in a row, no cycling chrome */
.np-insight-standalone { margin: 0 0 12px; }
.np-insight-standalone .np-hero-insight-col {
  display: flex !important;
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 10px 12px;       /* tighter than the 16px hero version */
  gap: 8px;
  border-radius: 10px;
}
.np-insight-standalone .np-hic-header { margin-bottom: 2px; }
.np-insight-standalone .np-hic-slider {
  overflow: visible !important;
  height: auto !important;
}
.np-insight-standalone .np-hic-slider::after { display: none; }
.np-insight-standalone .np-hic-track {
  flex-direction: row !important;
  transform: none !important;
  gap: 8px; width: 100%;
}
.np-insight-standalone .np-hic-card {
  flex: 1 1 0; min-width: 180px;
  padding: 8px 10px;        /* tighter inner padding */
  cursor: default;
}
.np-insight-standalone .np-hic-n { font-size: 16px; }
.np-insight-standalone .np-hic-text { font-size: 11px; line-height: 1.5; }
.np-insight-standalone #hicDots,
.np-insight-standalone .np-hic-refresh { display: none !important; }
@media (max-width: 768px) {
  .np-insight-standalone .np-hero-insight-col { padding: 8px 10px; }
  .np-insight-standalone .np-hic-track { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .np-insight-standalone .np-hic-card { flex: 0 0 calc(85vw); min-width: 0; }
}

/* ── Mobile insight panel: horizontal swipe strip ────────────────
   At ≤768px the insight column wraps full-width inside the hero.
   Cards are laid out in a row and scroll snapped — feels like
   swiping through story cards, much more native than vertical slide. */
@media (max-width: 768px) {
  .np-hero-insight-col {
    display: flex !important;
    width: 100%; min-width: 0;
    padding: 12px 12px 10px;
  }
  /* Slider becomes horizontal scroll container */
  .np-hic-slider {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .np-hic-slider::-webkit-scrollbar { display: none; }
  .np-hic-slider::after { display: none; } /* remove vertical fade mask */
  /* Track: horizontal row instead of vertical column */
  .np-hic-track {
    flex-direction: row !important;
    transform: none !important;
    gap: 8px;
    width: max-content;
  }
  /* Each card: full viewport width of the slider, snaps into place */
  .np-hic-card {
    display: flex !important;
    width: calc(100vw - 80px); /* full mobile width minus hero padding */
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .np-hic-n { font-size: 15px; min-width: 16px; }
  .np-hic-text { font-size: 11px; }
}

/* ================================================================= */
/*   PLAYER HERO — old insight panel refs (kept for compat)          */
/* ================================================================= */
.np-hero-insight { display: none; } /* replaced by np-hero-insight-col */

/* ================================================================= */
/*   SCOPE/FORMAT FILTER ROW                                         */
/* ================================================================= */
.np-filter-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.np-filter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.4);
  min-width: 52px;
}
.np-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px;
  color: rgba(var(--n-ink),0.5);
  margin: 12px 0 8px;
  display: flex; align-items: center; gap: 6px;
}
.np-section-label::before { content: '●'; font-size: 8px; }

/* ================================================================= */
/*   GROUND-WISE v2 — ranked list                                    */
/* ================================================================= */
.np-gw2-table {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
  overflow: hidden;
}
.np-gw2-head, .np-gw2-row {
  display: grid;
  grid-template-columns: 2.4fr 56px 80px 70px 70px 60px;
  align-items: center; gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px dashed rgba(var(--n-surf),0.05);
  font-size: 12px;
}
.np-gw2-head { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:1.5px; color:rgba(var(--n-ink),0.4); border-bottom-color:rgba(var(--n-surf),0.1); }
.np-gw2-row:last-child { border-bottom: 0; }
.np-gw2-row:hover { background: rgba(var(--n-surf),0.02); }

.np-gw2-name { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.np-gw2-rank { font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:700; color:rgba(var(--n-ink),0.4); min-width:22px; }
.np-gw2-rank.top { color: oklch(0.85 0.25 130); }
.np-gw2-info { min-width: 0; flex: 1; }
.np-gw2-ground { font-size:13px; font-weight:600; color:rgb(var(--n-ink)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-gw2-sub { font-family:'JetBrains Mono',monospace; font-size:9px; color:rgba(var(--n-ink),0.4); margin-top:2px; display:flex; align-items:center; gap:5px; }
.np-gw2-bar-wrap { width:80px; height:4px; background:rgba(var(--n-surf),0.06); border-radius:2px; overflow:hidden; margin-top:4px; }
.np-gw2-bar-fill { height:100%; border-radius:2px; background: linear-gradient(90deg, oklch(0.6 0.18 254), oklch(0.85 0.25 130)); }

/* ================================================================= */
/*   GROUND-WISE v3 — grouped list (one group per ground)            */
/* ================================================================= */
.np-gw3-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; align-items: start; }
@media (max-width: 700px) { .np-gw3-list { grid-template-columns: 1fr; } }

.np-gw3-group {
    background: rgba(var(--n-panel),0.55);
    border: 1px solid rgba(var(--n-surf),0.06);
    border-radius: 10px;
    overflow: hidden;
}

/* Ground header row */
.np-gw3-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(var(--n-surf),0.05);
}
.np-gw3-header-body { flex: 1; min-width: 0; }
.np-gw3-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgb(var(--n-ink));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.np-gw3-summary {
    display: flex;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.5px;
    color: rgba(var(--n-ink),0.45);
    margin-top: 2px;
}
.np-gw3-mat { color: rgba(var(--n-ink),0.25); }

/* Format sub-row */
.np-gw3-fmtrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-top: 1px dashed rgba(var(--n-surf),0.05);
}
.np-gw3-fmtrow:first-of-type { border-top: 0; }

.np-gw3-fmtrow-body {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    min-width: 0;
}

/* Bat / bowl stat group */
.np-gw3-stat-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    flex: 1;
}
.np-gw3-stat-group.bowl {
    border-left: 1px dashed rgba(var(--n-surf),0.08);
    padding-left: 14px;
    margin-left: 10px;
}
.np-gw3-stat-group.wide { flex: 2; }

.np-gw3-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 7px;
    letter-spacing: 1.5px;
    color: rgba(var(--n-ink),0.3);
    width: 100%;
    margin-bottom: 1px;
}
.np-gw3-primary {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
}
.np-gw3-primary-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: rgba(var(--n-ink),0.35);
    letter-spacing: 0.5px;
    margin-left: 2px;
}
.np-gw3-sep { width: 1px; height: 20px; background: rgba(var(--n-surf),0.07); margin: 0 6px; flex-shrink: 0; }
.np-gw3-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 32px;
}
.np-gw3-sl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 7px;
    letter-spacing: 1.5px;
    color: rgba(var(--n-ink),0.35);
    display: block;
    margin-bottom: 1px;
}
.np-gw3-stat b, .np-gw3-stat span:last-child:not(.np-gw3-sl) {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: rgb(var(--n-ink));
}

/* ================================================================= */
/*   TEAM-WISE v2 — card grid                                        */
/* ================================================================= */
.np-tw2-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 1100px) { .np-tw2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .np-tw2-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px)  { .np-tw2-grid { grid-template-columns: 1fr; } }

/* Combined-card variant: 2 per row so bat+bowl blocks have room */
.np-tw2-grid-2col { grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 800px) { .np-tw2-grid-2col { grid-template-columns: 1fr; } }

.np-tw2-card {
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 150ms, transform 150ms;
  cursor: default;
}
.np-tw2-card:hover { transform: translateY(-2px); border-color: rgba(var(--n-surf),0.14); }
.np-tw2-card-head { display: flex; align-items: center; gap: 10px; }
.np-tw2-card-badge {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  color: rgba(var(--n-shadow),0.85); flex-shrink: 0;
}
.np-tw2-card-opp { font-size: 13px; font-weight: 700; color: rgb(var(--n-ink)); }
.np-tw2-card-inn { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.4); margin-top: 1px; }
.np-tw2-runs { font-family: 'Space Grotesk', sans-serif; font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.np-tw2-runs-label { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 2px; color: rgba(var(--n-ink),0.4); }
.np-tw2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding-top: 6px; border-top: 1px dashed rgba(var(--n-surf),0.06); }
.np-tw2-stat > div:first-child { font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.4); }
.np-tw2-stat > div:last-child { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; margin-top: 2px; }
.np-tw2-wld { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.4); padding-top: 6px; border-top: 1px dashed rgba(var(--n-surf),0.06); }
.np-tw2-w { color: oklch(0.7 0.22 27); font-weight: 700; }
.np-tw2-l { color: oklch(0.72 0.25 355); font-weight: 700; }
.np-tw2-d { color: rgba(var(--n-ink),0.5); font-weight: 700; }

/* Combined card — one card per team, one row per format */
.np-tw2-combined { display: flex; flex-direction: column; gap: 0; }
.np-tw2-combined .np-tw2-card-head { margin-bottom: 10px; }
.np-tw2-fmt-rows { display: flex; flex-direction: column; gap: 0; width: 100%; }

/* Each format row: pill | row-body */
.np-tw2-fmt-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px dashed rgba(var(--n-surf),0.06);
}
.np-tw2-fmt-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    border: 1px solid;
    border-radius: 3px;
    padding: 2px 5px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 3px;
}

/* Row body: bat block + optional bowl block */
.np-tw2-fmt-row-body {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

/* Individual bat or bowl block */
.np-tw2-fmt-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}
.np-tw2-fmt-block-bowl {
    border-left: 1px dashed rgba(var(--n-surf),0.08);
    padding-left: 10px;
}
/* When no bowling data — bat block expands to use full row width */
.np-tw2-fmt-block-wide { flex: 2; }
.np-tw2-fmt-block-wide .np-tw2-fmt-stats { gap: 12px; }
.np-tw2-fmt-block-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 7px;
    letter-spacing: 1.5px;
    color: rgba(var(--n-ink),0.35);
    width: 100%;
    margin-bottom: 2px;
}
.np-tw2-fmt-primary {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
}
.np-tw2-fmt-primary-sub {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.5px;
    opacity: 0.5;
}
.np-tw2-fmt-inn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.5px;
    color: rgba(var(--n-ink),0.4);
    white-space: nowrap;
    align-self: center;
}
.np-tw2-fmt-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 4px;
}
.np-tw2-fmt-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 28px;
}
.np-tw2-fmt-stat > span:first-child {
    font-family: 'JetBrains Mono', monospace;
    font-size: 7px;
    letter-spacing: 1.5px;
    color: rgba(var(--n-ink),0.4);
}
.np-tw2-fmt-stat > span:last-child {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin-top: 1px;
    color: rgb(var(--n-ink));
}
.np-tw2-fmt-wld {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 1px;
    color: rgba(var(--n-ink),0.4);
    width: 100%;
    padding-top: 4px;
    display: flex;
    gap: 6px;
}

/* ================================================================= */
/*   YEAR-WISE v2 — stacked bars + panel + table                     */
/* ================================================================= */
.np-yr2-grid {
  display: grid; grid-template-columns: 1fr 280px; gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .np-yr2-grid { grid-template-columns: 1fr; } }
.np-yr2-grid > * { min-width: 0; } /* let grid children shrink instead of growing the grid to fit their content */

.np-yr2-chart-panel {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px; padding: 16px;
  min-width: 0; overflow: hidden; /* contain the scrollable bar strip, don't let it push page width */
}
.np-yr2-chart-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.3px; }

.np-yr2-bars { display: flex; align-items: flex-end; gap: 12px; height: 160px; padding: 0 4px; }
.np-yr2-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; cursor: pointer; }
@media (max-width: 600px) {
  .np-yr2-bars { overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; padding-bottom: 4px; max-width: 100%; }
  .np-yr2-bar-col { flex: 0 0 32px; }
  .np-yr2-bar-val { font-size: 9px; }
  .np-yr2-legend { gap: 8px 10px; }
}
.np-yr2-bar-col:hover .np-yr2-stack { opacity: 0.85; }
.np-yr2-stack { display: flex; flex-direction: column-reverse; gap: 1px; width: 100%; }
.np-yr2-seg { border-radius: 2px; min-height: 3px; transition: opacity 150ms; }
.np-yr2-seg.test  { background: oklch(0.72 0.20 75); }
.np-yr2-seg.odi   { background: oklch(0.72 0.25 355); }
.np-yr2-seg.t20i  { background: oklch(0.75 0.18 300); }
.np-yr2-seg.ipl   { background: oklch(0.6 0.18 254); }
.np-yr2-bar-val { font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700; color:rgba(var(--n-ink),0.6); }
.np-yr2-bar-yr  { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:1px; color:rgba(var(--n-ink),0.4); }
.np-yr2-bar-col.selected .np-yr2-bar-val { color: oklch(0.72 0.25 355); }

.np-yr2-legend { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.np-yr2-leg { display: flex; align-items: center; gap: 5px; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:1.5px; color:rgba(var(--n-ink),0.5); }
.np-yr2-leg-dot { width: 10px; height: 10px; border-radius: 2px; }

.np-yr2-right {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.np-yr2-right-label { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:2px; color:rgba(var(--n-ink),0.4); }
.np-yr2-right-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.np-yr2-rstat > div:first-child { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:1.5px; color:rgba(var(--n-ink),0.4); margin-bottom:4px; }
.np-yr2-rstat > div:last-child  { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:800; line-height:1; letter-spacing:-1px; }

/* Year-wise table v2 */
.np-yr2-table { width: 100%; border-collapse: collapse; }
.np-yr2-table th { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:1.5px; color:rgba(var(--n-ink),0.4); font-weight:400; padding:6px 8px; text-align:left; border-bottom:1px solid rgba(var(--n-surf),0.08); }
.np-yr2-table td { font-size:12px; padding:7px 8px; border-bottom:1px dashed rgba(var(--n-surf),0.04); color:rgba(var(--n-ink),0.85); }
.np-yr2-table tr:last-child td { border-bottom:0; }
.np-yr2-table tr:hover td { background:rgba(var(--n-surf),0.02); }
.np-yr2-td-yr { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:800; }
.np-yr2-td-runs { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700; }

/* Year card header */
.np-yr-card-year {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1px;
    color: oklch(0.72 0.25 355);
    line-height: 1;
    flex-shrink: 0;
}
.np-yr-card-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: rgba(var(--n-ink),0.5);
}
.np-yr-card-mat { color: rgba(var(--n-ink),0.3); }


/* ================================================================= */
/*   HOMEPAGE — glowing stat layout                                  */
/* ================================================================= */
.hsec { margin-bottom: 26px; }
.hsec-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; gap: 12px; }
.hsec-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.hsec-sub { font-size: 11px; letter-spacing: 0.5px; color: rgba(var(--n-ink),0.5); }
.hsec-link { font-size: 11px; letter-spacing: 1px; color: rgba(var(--n-ink),0.7); white-space: nowrap; }
.hsec-link:hover { color: rgb(var(--n-ink)); }

/* Today's Numbers */
.hnum-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 1200px) { .hnum-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .hnum-grid { grid-template-columns: repeat(2, 1fr); } }
.hnum-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 14px;
  background: rgba(var(--n-panel),0.6);
  border: 1px solid color-mix(in oklch, var(--c) 26%, rgba(var(--n-surf),0.06));
  border-radius: 14px;
  color: inherit; text-decoration: none;
  min-height: 168px;
  transition: transform 160ms, border-color 160ms;
}
.hnum-card:hover { transform: translateY(-3px); border-color: var(--c); }
.hnum-glow {
  position: absolute; top: -40%; left: -20%;
  width: 140%; height: 80%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--c) 35%, transparent), transparent);
  opacity: 0.25; pointer-events: none;
}
.hnum-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.hnum-v { font-size: 38px; font-weight: 800; line-height: 0.95; letter-spacing: -1.5px; text-shadow: 0 0 24px color-mix(in oklch, var(--c) 40%, transparent); }
.hnum-suffix { font-size: 0.55em; margin-left: 1px; }
.hnum-ring {
  width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(var(--n-surf),0.1) 0);
  display: grid; place-items: center; flex-shrink: 0;
}
.hnum-ring span { font-size: 10px; font-weight: 700; background: rgb(var(--n-panel2)); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.hnum-label { font-size: 14px; font-weight: 700; line-height: 1.2; position: relative; z-index: 1; }
.hnum-sub { font-size: 10px; color: rgba(var(--n-ink),0.55); line-height: 1.4; position: relative; z-index: 1; flex: 1; }
.hnum-tag { font-size: 9px; letter-spacing: 1px; padding: 3px 8px; border: 1px solid; border-radius: 999px; align-self: flex-start; font-family: 'JetBrains Mono', monospace; }

/* Cricket Discoveries */
.hdisc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1100px) { .hdisc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .hdisc-grid { grid-template-columns: repeat(2, 1fr); } }
.hdisc-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 14px;
  background: linear-gradient(165deg, color-mix(in oklch, var(--c) 9%, rgba(var(--n-panel),0.6)), rgba(var(--n-panel),0.6));
  border: 1px solid color-mix(in oklch, var(--c) 22%, rgba(var(--n-surf),0.05));
  border-radius: 14px;
  color: inherit; text-decoration: none;
  min-height: 150px;
  transition: transform 160ms, border-color 160ms;
}
.hdisc-card:hover { transform: translateY(-3px); border-color: var(--c); }
.hdisc-v { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; text-shadow: 0 0 20px color-mix(in oklch, var(--c) 35%, transparent); }
.hdisc-suffix { font-size: 0.55em; }
.hdisc-label { font-size: 14px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.hdisc-sub { font-size: 10px; color: rgba(var(--n-ink),0.5); line-height: 1.4; }

/* Record of the Day */
.hrod {
  position: relative; overflow: hidden;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 24px;
  background: linear-gradient(120deg, oklch(0.7 0.22 27 / 0.16), rgba(var(--n-panel),0.7) 60%);
  border: 1px solid oklch(0.7 0.22 27 / 0.3);
  border-radius: 16px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.hrod-glow { position: absolute; left: -10%; top: -60%; width: 50%; height: 200%; background: radial-gradient(closest-side, oklch(0.7 0.22 27 / 0.3), transparent); pointer-events: none; }
.hrod-left { position: relative; z-index: 1; }
.hrod-kicker { font-size: 10px; letter-spacing: 2px; color: oklch(0.7 0.22 27); margin-bottom: 8px; }
.hrod-row { display: flex; align-items: center; gap: 18px; }
.hrod-v { font-size: 72px; font-weight: 800; line-height: 0.85; letter-spacing: -3px; color: oklch(0.72 0.24 20); text-shadow: 0 0 30px oklch(0.7 0.22 27 / 0.4); }
.hrod-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.hrod-sub { font-size: 12px; color: rgba(var(--n-ink),0.55); margin-top: 2px; }
.hrod-actions { display: flex; align-items: center; gap: 24px; position: relative; z-index: 1; flex-wrap: wrap; }
.hrod-btn { padding: 10px 18px; background: oklch(0.7 0.22 27); color: #fff; font-size: 13px; font-weight: 700; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.hrod-btn:hover { filter: brightness(1.1); }
.hrod-share-label { font-size: 10px; letter-spacing: 1px; color: rgba(var(--n-ink),0.5); }
.hrod-share-row { display: flex; gap: 8px; margin-top: 6px; }
.hrod-share-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--n-surf),0.06); border: 1px solid rgba(var(--n-surf),0.1); display: grid; place-items: center; font-size: 13px; cursor: pointer; }
.hrod-share-btn:hover { background: rgba(var(--n-surf),0.12); }

/* Trending players */
.htrend-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1100px) { .htrend-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .htrend-grid { grid-template-columns: 1fr; } }
.htrend-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: transform 160ms, border-color 160ms;
}
.htrend-card:hover { transform: translateY(-2px); border-color: rgba(var(--n-surf),0.18); }
.htrend-rank { font-size: 13px; color: rgba(var(--n-ink),0.4); font-weight: 700; }
.htrend-jersey { width: 38px; height: 38px; border-radius: 9px; color: rgb(var(--n-ink)); font-size: 17px; font-weight: 800; display: grid; place-items: center; letter-spacing: -0.5px; }
.htrend-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.htrend-name { font-size: 14px; font-weight: 800; letter-spacing: -0.3px; }
.htrend-team { font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.5); }
.htrend-rating { font-size: 17px; font-weight: 800; }
.htrend-up { font-size: 11px; }

/* Explore */
.hexp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 1100px) { .hexp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px)  { .hexp-grid { grid-template-columns: repeat(2, 1fr); } }
.hexp-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: transform 160ms, border-color 160ms, background 160ms;
}
.hexp-card:hover { transform: translateY(-2px); border-color: rgba(var(--n-surf),0.18); background: rgba(var(--n-panel),0.85); }
.hexp-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--n-surf),0.05); color: oklch(0.7 0.22 27); flex-shrink: 0; }
.hexp-meta { display: flex; flex-direction: column; gap: 1px; }
.hexp-label { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; }
.hexp-sub { font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.5); }

.mobile-view .hnum-grid { grid-template-columns: repeat(2, 1fr); }
.mobile-view .hdisc-grid { grid-template-columns: repeat(2, 1fr); }
.mobile-view .htrend-grid { grid-template-columns: 1fr; }
.mobile-view .hexp-grid { grid-template-columns: repeat(2, 1fr); }
.mobile-view .hrod { flex-direction: column; align-items: flex-start; }


/* ================================================================= */
/*   HOME — Match Center (slider + tabs + dots)                     */
/* ================================================================= */
.mc { margin-bottom: 26px; }
.mc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; }
.mc-title { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; margin: 0; }
.mc-sub { font-size: 11px; letter-spacing: 0.5px; color: rgba(var(--n-ink),0.5); }
.mc-viewall { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid rgba(var(--n-surf),0.14); border-radius: 8px; font-size: 12px; font-weight: 600; color: rgba(var(--n-ink),0.85); text-decoration: none; white-space: nowrap; }
.mc-viewall:hover { background: rgba(var(--n-surf),0.05); color: rgb(var(--n-ink)); }
.mc-viewall span { font-size: 15px; }

.mc-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.mc-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px;
  font-size: 11px; letter-spacing: 1.5px; font-weight: 600;
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.08);
  color: rgba(var(--n-ink),0.65); cursor: pointer;
  transition: all 150ms;
}
.mc-tab:hover { color: rgb(var(--n-ink)); }
.mc-tab.on { color: rgb(var(--n-ink)); border-color: var(--c); background: color-mix(in oklch, var(--c) 14%, rgba(var(--n-panel),0.6)); }
.mc-tab-dot { width: 7px; height: 7px; border-radius: 50%; }
.mc-tab-n { color: rgba(var(--n-ink),0.45); }

.mc-slider { position: relative; }
.mc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(var(--n-panel2),0.85); backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--n-surf),0.14);
  color: rgb(var(--n-ink)); font-size: 18px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.mc-arrow:hover { background: rgba(var(--n-surf),0.12); }
.mc-arrow.left { left: -6px; }
.mc-arrow.right { right: -6px; }

.mc-track {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px; scrollbar-width: none;
}
.mc-track::-webkit-scrollbar { display: none; }
.mc-card {
  flex: 0 0 calc((100% - 72px) / 7);
  min-width: 150px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  min-height: 188px;
  padding: 12px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--c) 9%, rgba(var(--n-panel),0.65)), rgba(var(--n-panel),0.65));
  border: 1px solid color-mix(in oklch, var(--c) 22%, rgba(var(--n-surf),0.06));
  border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: transform 150ms, border-color 150ms;
}
.mc-card:hover { transform: translateY(-3px); border-color: var(--c); }
.mc-card-top { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mc-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 1.5px; font-weight: 700;
  color: var(--n-ground);
}
.mc-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--n-shadow),0.6); animation: pulse 1.2s infinite; }
.mc-card-ctx { font-size: 9px; letter-spacing: 1px; color: rgba(var(--n-ink),0.5); text-align: right; align-self: flex-end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mc-card-body { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 0; }
.mc-side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.mc-team { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.mc-sc { font-size: 13px; font-weight: 700; color: rgba(var(--n-ink),0.85); white-space: nowrap; }
.mc-vs { font-size: 10px; letter-spacing: 1px; color: rgba(var(--n-ink),0.4); }
.mc-card-foot { text-align: center; display: flex; flex-direction: column; gap: 3px; }
.mc-overs { font-size: 10px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.7); }
.mc-note { font-size: 10px; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mc-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.mc-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--n-surf),0.18); transition: all 200ms; }
.mc-dot.on { background: oklch(0.7 0.22 27); width: 20px; border-radius: 4px; }

@media (max-width: 1200px) { .mc-card { flex-basis: calc((100% - 48px) / 5); } }
@media (max-width: 860px)  { .mc-card { flex-basis: calc((100% - 36px) / 4); } }
@media (max-width: 640px)  { .mc-card { flex-basis: calc((100% - 12px) / 2); } }
.mobile-view .mc-card { flex-basis: calc((100% - 12px) / 2); }

/* ============================================================================
   Neon Arena homepage — accent + colour bindings
   The design JSX supplied these via inline React style props (style={{color:c}}).
   On the WebForms build the cards carry an n-accent-* class instead, so all
   colour lives here in the stylesheet.
   ========================================================================= */
.n-accent-lime   { --c: oklch(0.7 0.22 27); }
.n-accent-cyan   { --c: oklch(0.6 0.18 254); }
.n-accent-pink   { --c: oklch(0.72 0.25 355); }
.n-accent-violet { --c: oklch(0.68 0.22 300); }
.n-accent-amber  { --c: oklch(0.82 0.18 75); }

/* Today's Numbers / Cricket Discoveries — the big glowing value */
.hnum-v,
.hdisc-v        { color: var(--c); }
.hnum-tag       { color: var(--c); border-color: color-mix(in oklch, var(--c) 45%, transparent); }

/* Trending Players */
.htrend-jersey  { background: var(--c); }
.htrend-up      { color: oklch(0.7 0.22 27); }

/* Match Center — default accent (the ALL tab carries no n-accent-* class);
   inherited by children, overridden per-tab by n-accent-cyan / n-accent-pink. */
.mc-tabs        { --c: rgb(var(--n-ink)); }
.mc-pill        { background: var(--c); }
.mc-tab-dot     { background: var(--c); }
.mc-note        { color: rgba(var(--n-ink),0.56); }
.mc-card[data-status="live"] .mc-note { color: var(--c); }

/* Match Center — milestone watch strip on each card.
   Not present in /design/neon.css (that copy predates the milestone row);
   built to match the reference screenshots and the surrounding mc-* scale. */
.mc-ms {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(var(--n-surf),0.07);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; line-height: 1.45;
  color: rgba(var(--n-ink),0.62);
}
.mc-ms-ico   { color: var(--c); flex-shrink: 0; font-size: 9px; line-height: 1.6; }
.mc-ms-txt   { min-width: 0; }
.mc-ms-txt b { color: rgba(var(--n-ink),0.92); font-weight: 700; }
.mc-ms-arrow { color: var(--c); }

/* =========================================================================
   RECENT RESULTS DOCK — fixed to the bottom of every page (Cricstats.master)
   Collapsed by default so it never covers content unasked; the reader's
   choice is remembered in localStorage.
   ====================================================================== */
.rr-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(var(--n-ground-rgb),0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(var(--n-surf),0.09);
  font-family: 'Inter', system-ui, sans-serif;
}
.rr-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 7px 14px; cursor: pointer;
}
.rr-bar-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rr-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: oklch(0.7 0.22 27); animation: pulse 1.6s infinite; flex-shrink: 0;
}
.rr-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px; font-weight: 700;
  color: oklch(0.7 0.22 27); white-space: nowrap;
}
.rr-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.5px;
  color: rgba(var(--n-ink),0.45); white-space: nowrap;
}
.rr-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--n-surf),0.05);
  border: 1px solid rgba(var(--n-surf),0.1);
  border-radius: 7px; padding: 4px 10px;
  color: rgba(var(--n-ink),0.6); cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px;
  transition: background 130ms, color 130ms;
}
.rr-toggle:hover { background: rgba(var(--n-surf),0.1); color: rgb(var(--n-ink)); }
.rr-caret { font-size: 8px; transition: transform 200ms; }
.rr-dock.open .rr-caret { transform: rotate(180deg); }

/* Collapsed: bar only. Expanded: reveal the card track. */
.rr-body { display: none; position: relative; padding: 0 0 10px; }
.rr-dock.open .rr-body { display: block; }

.rr-track {
  display: flex; gap: 10px; align-items: stretch;
  overflow-x: auto; scroll-behavior: smooth;
  padding: 2px 44px; scrollbar-width: none;
}
.rr-track::-webkit-scrollbar { display: none; }
.rr-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(var(--n-panel),0.9); border: 1px solid rgba(var(--n-surf),0.14);
  color: rgb(var(--n-ink)); font-size: 16px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.rr-arrow:hover { background: rgba(var(--n-surf),0.12); }
.rr-arrow.left { left: 8px; }
.rr-arrow.right { right: 8px; }

.rr-card {
  flex: 0 0 auto; min-width: 190px;
  background: rgba(var(--n-panel),0.7);
  border: 1px solid rgba(var(--n-surf),0.07);
  border-radius: 10px; padding: 8px 10px;
  text-decoration: none; color: inherit;
  transition: transform 140ms, border-color 140ms;
}
.rr-card:hover { transform: translateY(-2px); border-color: rgba(var(--n-surf),0.2); }
.rr-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.rr-fmt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 1px; font-weight: 700;
  padding: 2px 5px; border-radius: 4px; flex-shrink: 0;
}
.rr-series {
  font-size: 10px; color: rgba(var(--n-ink),0.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rr-row { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.rr-tm {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  min-width: 38px; text-align: center;
  padding: 2px 5px; border-radius: 4px;
  background: rgba(var(--n-surf),0.1); color: rgb(var(--n-ink));
}
.rr-sc {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700; color: rgb(var(--n-ink));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Solid team badges — same palette as the .team-* jersey colours above. */
.rr-tm.team-ind { background: oklch(0.55 0.22 27);  color: #fff; }
.rr-tm.team-aus { background: oklch(0.72 0.2 95);   color: var(--n-ground); }
.rr-tm.team-eng { background: oklch(0.45 0.2 25);   color: #fff; }
.rr-tm.team-pak { background: oklch(0.45 0.18 155); color: #fff; }
.rr-tm.team-wi  { background: oklch(0.4 0.18 20);   color: #fff; }
.rr-tm.team-nz  { background: oklch(0.35 0.02 0);   color: #fff; }
.rr-tm.team-sa  { background: oklch(0.62 0.19 55);  color: var(--n-ground); }
.rr-tm.team-sl  { background: oklch(0.45 0.16 250); color: #fff; }
.rr-tm.team-ban { background: oklch(0.45 0.16 150); color: #fff; }
.rr-tm.team-afg { background: oklch(0.55 0.17 250); color: #fff; }
.rr-tm.team-zim { background: oklch(0.55 0.19 60);  color: var(--n-ground); }
.rr-tm.team-ire { background: oklch(0.5 0.16 150);  color: #fff; }

/* Keep page content clear of the dock. */
body { padding-bottom: 42px; }
@media (max-width: 640px) {
  .rr-card { min-width: 158px; }
  .rr-track { padding: 2px 12px; }
  .rr-arrow { display: none; }
  .rr-series { max-width: 92px; }
}

/* =========================================================================
   FOOTER — Neon Arena treatment
   Abstract background is built entirely from layered gradients and pseudo
   elements (no image assets): accent glows, a faint dot grid that fades out,
   and two oversized seam rings echoing a cricket ball.
   ====================================================================== */
.n-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: none;
  background:
    linear-gradient(180deg, rgba(var(--n-footer-g-top),0.75) 0%, rgba(var(--n-footer-g-mid),0.96) 60%, var(--n-footer-g-deep) 100%);
  padding: 56px 28px 24px;
  margin-top: 48px;
}
/* Two earlier top-level ".n-footer"/"n-footer-top" blocks in this file carry
   mobile-sized padding and gap but sit outside any media query, so they were
   applying on desktop too. Restated here (last rule wins) rather than editing
   those blocks, which other pages may rely on. */
.n-footer-top { gap: 34px; }
@media (max-width: 900px) { .n-footer-top { gap: 22px; } }

/* Gradient hairline across the very top */
.n-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      oklch(0.7 0.22 27 / 0.7) 18%,
      oklch(0.72 0.25 355 / 0.7) 42%,
      oklch(0.6 0.18 254 / 0.7) 68%,
      transparent 100%);
  z-index: 2;
}

/* Glow wash + dot grid, faded out toward the bottom */
.n-footer::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background-image:
    radial-gradient(620px 240px at 10% -10%, oklch(0.7 0.22 27 / 0.15), transparent 70%),
    radial-gradient(560px 220px at 82% 0%,   oklch(0.6 0.18 254 / 0.13), transparent 70%),
    radial-gradient(460px 200px at 47% -14%, oklch(0.72 0.25 355 / 0.10), transparent 72%),
    radial-gradient(rgba(var(--n-surf),0.05) 1px, transparent 1px);
  background-size: auto, auto, auto, 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
}

/* Abstract seam rings, bottom-right */
.n-footer-top { position: relative; }
.n-footer-top::after {
  content: '';
  position: absolute; right: -190px; bottom: -260px;
  width: 460px; height: 460px; border-radius: 50%;
  border: 1px solid rgba(var(--n-surf),0.055);
  box-shadow:
     0 0 0 44px rgba(var(--n-surf),0.012),
     0 0 0 45px rgba(var(--n-surf),0.035),
     inset 0 0 90px rgba(var(--n-surf),0.02);
  pointer-events: none; z-index: -1;
}

/* ---- Brand ---- */
.n-footer .n-logo-img { filter: drop-shadow(0 0 18px oklch(0.7 0.22 27 / 0.35)); }
.n-footer-desc {
  font-size: 12.5px; line-height: 1.75;
  color: rgba(var(--n-ink),0.5);
  margin-top: 14px;
}

/* ---- Column headings, with an accent tick ---- */
.n-footer-h {
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 3px; font-weight: 700;
  color: rgba(var(--n-ink),0.42);
  padding-left: 12px; margin-bottom: 10px;
}
.n-footer-h::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 1.5px;
  background: oklch(0.7 0.22 27);
  box-shadow: 0 0 8px oklch(0.7 0.22 27 / 0.8);
}
.n-footer-col:nth-of-type(3) .n-footer-h::before { background: oklch(0.6 0.18 254);  box-shadow: 0 0 8px oklch(0.6 0.18 254 / 0.8); }
.n-footer-col:nth-of-type(4) .n-footer-h::before { background: oklch(0.72 0.25 355); box-shadow: 0 0 8px oklch(0.72 0.25 355 / 0.8); }
.n-footer-col:nth-of-type(5) .n-footer-h::before { background: oklch(0.82 0.18 75);  box-shadow: 0 0 8px oklch(0.82 0.18 75 / 0.8); }

/* ---- Links: slide + reveal marker on hover ---- */
.n-footer-col a {
  position: relative;
  font-size: 12.5px; color: rgba(var(--n-ink),0.62);
  text-decoration: none; width: fit-content;
  padding-left: 0;
  transition: color 160ms ease, padding-left 160ms ease;
}
.n-footer-col a::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  width: 7px; height: 1px;
  background: oklch(0.7 0.22 27);
  transition: transform 160ms ease;
}
.n-footer-col a:hover { color: rgb(var(--n-ink)); padding-left: 13px; }
.n-footer-col a:hover::before { transform: translateY(-50%) scaleX(1); }

/* ---- Partner sites bar ---- */
.n-partner-bar {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(var(--n-surf),0.05);
  border-bottom: 1px solid rgba(var(--n-surf),0.05);
  background: rgba(var(--n-inset),0.28);
  margin-top: 34px;
}
.n-partner-site {
  position: relative;
  opacity: 0.4;
  filter: grayscale(100%);
  transition: opacity 200ms ease, filter 200ms ease, transform 200ms ease;
}
.n-partner-site + .n-partner-site { border-left: 1px solid rgba(var(--n-surf),0.05); }
.n-partner-site:hover { opacity: 1; filter: grayscale(0%); transform: translateY(-2px); }

/* ---- Bottom bar ---- */
.n-footer-bottom {
  position: relative; z-index: 1;
  align-items: center; flex-wrap: wrap; gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.5px;
  color: rgba(var(--n-ink),0.45);
  border-top: none; margin-top: 18px; padding-top: 16px;
}
.n-footer-bottom a { color: rgba(var(--n-ink),0.55); text-decoration: none; transition: color 150ms; }
.n-footer-bottom a:hover { color: oklch(0.72 0.25 355); }

@media (max-width: 900px) {
  .n-footer { padding: 40px 20px 20px; }
  .n-footer-top::after { display: none; }
  .n-footer-bottom { justify-content: center; text-align: center; }
}

/* =========================================================================
   TODAY'S FEED — sidebar news widget (StaticClass.GetNews)
   Namespaced n-nw-* because the news ARTICLE page declares .news-content /
   .news-img / .news-title later in this file with !important, which was
   overriding the old widget markup and breaking its layout.
   ====================================================================== */
.news-section { display: flex; flex-direction: column; gap: 8px; }

.n-nw-card {
  position: relative;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px; border-radius: 11px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  text-decoration: none; color: inherit;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.n-nw-card:hover {
  background: rgba(var(--n-panel3),0.8);
  border-color: rgba(var(--n-surf),0.16);
  transform: translateY(-1px);
}
/* Accent rail that grows in on hover */
.n-nw-card::before {
  content: '';
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, oklch(0.7 0.22 27), oklch(0.72 0.25 355));
  transform: scaleY(0); transform-origin: center;
  transition: transform 200ms ease;
}
.n-nw-card:hover::before { transform: scaleY(1); }

.n-nw-thumb {
  flex: 0 0 auto;
  width: 62px; height: 62px; border-radius: 8px;
  overflow: hidden; background: rgba(var(--n-surf),0.04);
}
.n-nw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.n-nw-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }

.n-nw-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700; line-height: 1.35;
  letter-spacing: -0.2px; color: rgb(var(--n-ink));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Brighten-on-hover against the card ground, so this has to follow the theme —
   a literal #fff here is white-on-white once the card is light. */
.n-nw-card:hover .n-nw-title { color: rgb(var(--n-ink)); }

.n-nw-dek {
  font-size: 11px; line-height: 1.5;
  color: rgba(var(--n-ink),0.5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.n-nw-meta {
  display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.6px;
  color: rgba(var(--n-ink),0.42);
}
.n-nw-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: oklch(0.7 0.22 27); flex-shrink: 0;
}

/* Lead card — image on top, roomier type */
.n-nw-lead { flex-direction: column; gap: 9px; padding: 0 0 11px; overflow: hidden; }
.n-nw-lead .n-nw-thumb { width: 100%; height: 132px; border-radius: 11px 11px 0 0; }
.n-nw-lead .n-nw-body { padding: 0 11px; }
.n-nw-lead .n-nw-title { font-size: 14px; -webkit-line-clamp: 3; }
.n-nw-lead::before { top: 0; bottom: 0; border-radius: 0; }
.n-nw-lead.n-nw-nothumb { padding: 11px; }
.n-nw-lead.n-nw-nothumb .n-nw-body { padding: 0; }

/* No image — headline uses the full width, standfirst carries the card */
.n-nw-nothumb .n-nw-title { -webkit-line-clamp: 3; }
.n-nw-nothumb .n-nw-dek { -webkit-line-clamp: 2; }

.n-nw-all {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 2px; padding: 8px;
  border: 1px dashed rgba(var(--n-surf),0.12); border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.55); text-decoration: none;
  transition: color 150ms, border-color 150ms, background 150ms;
}
.n-nw-all:hover {
  color: rgb(var(--n-ink));
  border-color: rgba(var(--n-surf),0.25);
  background: rgba(var(--n-surf),0.03);
}
.n-nw-all span { transition: transform 150ms; }
.n-nw-all:hover span { transform: translateX(3px); }

/* Top Ranked Players — grid items default to min-width:auto, so a long surname
   (WILLIAMSON) forced its column wider than its 1fr share and pushed the last
   card out of the layout column. minmax(0,1fr) + min-width:0 lets them shrink. */
.htrend-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .htrend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  { .htrend-grid { grid-template-columns: minmax(0, 1fr); } }
.htrend-card { min-width: 0; }
.htrend-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.htrend-rank, .htrend-jersey, .htrend-rating, .htrend-up { flex-shrink: 0; }

/* =========================================================================
   MATCH CENTER — cross-card alignment
   Cards carry different content (results have scores, upcoming have a
   milestone row, some have neither), so centred content drifted vertically
   and team names / notes did not line up across the strip.

   NOTE: .mc-team must stay a BLOCK for text-overflow:ellipsis to work —
   as a flex container the label overflows and clips mid-word instead.
   ====================================================================== */
.mc-track { align-items: stretch; }

/* Header stacked and centred: the pill on its own line, the context centred
   beneath it. Side by side the context had only the leftover width and
   truncated to "T20I · …"; full width lets it read in full. */
.mc-card-top {
  flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 6px; min-height: 42px;
}
.mc-pill { align-self: center; flex: 0 0 auto; }
.mc-card-ctx {
  align-self: center; text-align: center;
  width: 100%; max-width: 100%;
}

/* Team line and vs share one line box, so vs never drifts when only one
   side has a score. */
.mc-card-body { align-items: flex-start; }
.mc-side { flex: 1 1 0; min-width: 0; }
.mc-team {
  display: block; text-align: center;
  min-height: 26px; line-height: 26px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-vs { flex: 0 0 auto; line-height: 26px; }
/* Reserved even when empty so team names sit level on every card */
.mc-sc {
  display: block; text-align: center; min-height: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mc-card-foot { margin-top: auto; min-height: 24px; justify-content: flex-end; }

/* Fixed milestone slot so one-line, two-line and absent milestones all end
   at the same baseline. */
.mc-ms { min-height: 40px; align-items: flex-start; }
.mc-ms-empty { border-top-color: transparent; }
.mc-ms-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Narrow cards: shrink the team label rather than clipping it */
@media (max-width: 1280px) { .mc-team { font-size: 19px; } }
@media (max-width: 1024px) { .mc-team { font-size: 17px; } }

/* Achieved milestone (result cards) — reads as a completed fact, so it takes
   the lime "done" accent rather than the card's status colour. */
.mc-ms-done .mc-ms-ico { color: oklch(0.85 0.25 130); }

/* =========================================================================
   QUICK LINKS — dropdowns were never able to appear
   .n-qm-nav had `overflow-x: auto`. Per spec, once one axis is not `visible`
   the other computes to `auto` too, so the nav became a clipping box — and
   .n-qm-pop is positioned at top:100%, i.e. entirely outside it. The popup
   rendered but was clipped away. Let the bar wrap instead of scroll so the
   dropdowns can escape their container.
   ====================================================================== */
.n-qm { overflow: visible; z-index: 40; }
.n-qm-inner { overflow: visible; flex-wrap: wrap; }
.n-qm-nav { overflow: visible; flex-wrap: wrap; }

/* Raise the open item above its siblings so the panel is never covered */
.n-qm-item:hover, .n-qm-item:focus-within { z-index: 51; }

/* Dropdown triggers are <div>s, so they take no focus and the existing
   :focus-within rule could never fire — keyboard and touch users had no way
   to open them. Paired with tabindex="0" in StaticClass.BuildTopMenuHtml. */
.n-qm-item[tabindex] { outline: none; }
.n-qm-item[tabindex]:focus-visible {
  background: rgba(var(--n-surf),0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--n-surf),0.25);
}
.n-qm-item[aria-expanded] .n-qm-caret { transition: transform 150ms; }
.n-qm-item:hover .n-qm-caret, .n-qm-item:focus-within .n-qm-caret { transform: rotate(180deg); }

/* Panels are min-width:280px and anchored left:0, so the right-most groups
   (Champions Trophy, Yearwise Records) would now run off the viewport instead
   of being clipped. Open those leftward from their right edge. */
.n-qm-nav > .n-qm-item:nth-last-child(-n+2) .n-qm-pop { left: auto; right: 0; }
/* Below 900px the panels become static inline accordions (see the small-screen
   block further down), so there is no edge to flip — that override lived here
   and has been removed rather than left to contradict it. */

/* =========================================================================
   ACTIVE NAV — tells the visitor which section they are in.
   The base ".n-nav-item.on" was rgba(var(--n-surf),0.06) against a 0.04 hover,
   which is not a readable difference. Give it the accent instead.
   ====================================================================== */
.n-nav-item.on {
  position: relative;
  color: rgb(var(--n-ink));
  background: color-mix(in oklch, oklch(0.7 0.22 27) 14%, transparent);
  font-weight: 600;
}
.n-nav-item.on::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  border-radius: 2px;
  background: oklch(0.7 0.22 27);
  box-shadow: 0 0 8px oklch(0.7 0.22 27 / 0.7);
}
.n-nav-item.on:hover { background: color-mix(in oklch, oklch(0.7 0.22 27) 20%, transparent); }

/* Quick-links: current page marked client-side (the menu HTML is cached
   globally for all pages, so it cannot carry per-page state). */
.n-qm-item.cur { background: rgba(var(--n-surf),0.07); color: rgb(var(--n-ink)); }
.n-qm-item.cur .n-qm-item-label { font-weight: 700; }
.n-qm-pop-link.cur {
  background: color-mix(in oklch, oklch(0.7 0.22 27) 16%, transparent);
  color: rgb(var(--n-ink));
}
.n-qm-pop-link.cur .n-qm-pop-label { font-weight: 700; }

/* =========================================================================
   MATCH PREVIEW  —  MatchDetails.aspx  (route: /match-preview/{code}/{slug})
   -------------------------------------------------------------------------
   No design file existed for this page, so the layout is derived from the
   pieces the rest of the site already uses:

     hero        follows .n-mc-hero (match centre) — glow, chips, big
                 scoreline — but pre-match, so the middle column carries a
                 countdown instead of a score, and the team column carries
                 head-to-head form instead of runs.
     fact strip  same key/value tile idea as .td-meta-* on the team page.
     cards       plain .n-card / .n-card-head / .n-card-title from the
                 design system; only the card bodies are new.
     colours     lime = win, pink = loss, cyan = neutral/no-result, amber =
                 the "upcoming" state. Same mapping as .n-form-dot.

   The page has three states and one stylesheet serves all of them:
     .mp-hero.up    match is in the future  -> countdown
     .mp-hero.live  start time passed today -> live pill, scorecard CTA
     .mp-hero.done  match finished          -> scores + result line
   ====================================================================== */

.mp { display: block; }

/* --- HERO --- */
/* Sized by its content: the padding is the only vertical space, and both
   decorative layers (glow, art) are absolutely positioned so neither can
   stretch the section. */
.mp-hero {
  position: relative; overflow: hidden;
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.mp-hero-glow {
  position: absolute; inset: -40% -10% auto -10%; height: 180px;
  background: radial-gradient(60% 100% at 50% 0%, oklch(0.7 0.22 27 / 0.16) 0%, transparent 70%);
  pointer-events: none;
}
/* Corner arcs — one per team, drawn rather than dropped in as an image.
   None of the abstract*.png files worked here: they are dense hatch fields
   that wash across the scoreline instead of framing it, and a raster has to be
   scaled to fit a box that changes height with the content.

   So each corner is a repeating-conic-gradient fanning out of the corner —
   floodlights spilling in behind each team — masked with a radial fade so the
   rays dissolve before they reach the text. Sharp at any size, no request, and
   because it lives on ::before/::after it adds no markup and cannot affect
   layout.

   The 4deg period divides 360 exactly, so the fan has no seam where the
   pattern wraps. Rays diverge with distance, which puts the dense end in the
   corner and the open end under the fade — the shape does half the work of
   keeping the text clear.

   The two corners take the same colours as the head-to-head bar (team 1 warm,
   team 2 cool), so the hero reads as two sides meeting.

   Shared with .n-mc-hero, the hero on the scorecard / summary / stats /
   performance pages, so the whole match set reads as one design. A surface
   only has to be position:relative + overflow:hidden to take it — z-index:-1
   puts the arcs above the host's own background but under its content, so no
   child needs lifting. Retint per surface with --arc-1 / --arc-2. */
.mp-hero, .n-mc-hero {
  --arc-1: oklch(0.7 0.22 27 / 0.32);
  --arc-2: oklch(0.6 0.18 254 / 0.32);
  /* Required, not cosmetic: a negative-z child only paints above its parent's
     background when the parent is a stacking context, and position:relative
     with z-index:auto is not one. Without this the arcs sit behind the hero's
     own background and vanish. */
  isolation: isolate;
}
.mp-hero::before, .mp-hero::after,
.n-mc-hero::before, .n-mc-hero::after {
  content: "";
  position: absolute; bottom: 0; z-index: -1;
  width: clamp(150px, 26%, 340px); height: 100%;
  pointer-events: none;
}
.mp-hero::before, .n-mc-hero::before {
  left: 0;
  background: repeating-conic-gradient(from 0deg at 0% 100%,
      var(--arc-1) 0deg 0.6deg, transparent 0.6deg 4deg);
  -webkit-mask-image: radial-gradient(circle at 0% 100%, #000 6%, transparent 64%);
          mask-image: radial-gradient(circle at 0% 100%, #000 6%, transparent 64%);
}
.mp-hero::after, .n-mc-hero::after {
  right: 0;
  background: repeating-conic-gradient(from 0deg at 100% 100%,
      var(--arc-2) 0deg 0.6deg, transparent 0.6deg 4deg);
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 6%, transparent 64%);
          mask-image: radial-gradient(circle at 100% 100%, #000 6%, transparent 64%);
}
/* Teams stack here and the heroes get tall, so hold the arcs to the corners
   rather than letting them run the full height of the side. */
@media (max-width: 760px) {
  .mp-hero::before, .mp-hero::after,
  .n-mc-hero::before, .n-mc-hero::after { width: clamp(110px, 38%, 200px); height: 45%; }
}
.mp-hero.done .mp-hero-glow { background: radial-gradient(60% 100% at 50% 0%, oklch(0.85 0.25 130 / 0.12) 0%, transparent 70%); }
.mp-hero.live .mp-hero-glow { background: radial-gradient(60% 100% at 50% 0%, oklch(0.72 0.25 355 / 0.18) 0%, transparent 70%); }
/* Lift the content above the decorative layers — but not the glow itself: a
   bare ".mp-hero > *" has the same specificity as ".mp-hero-glow" and, coming
   later, would reset it to position:relative and drop it into the flow.
   (The corner arcs are pseudo-elements, so this selector never reaches them.) */
.mp-hero > *:not(.mp-hero-glow) { position: relative; z-index: 1; }

.mp-hero-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.mp-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mp-hero-series {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.5);
}
.mp-hero-series:hover { color: rgb(var(--n-ink)); }

/* status pill — one class per state */
.mp-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 9px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.mp-status.up   { color: oklch(0.82 0.18 75);  background: oklch(0.82 0.18 75 / 0.1);  border: 1px solid oklch(0.82 0.18 75 / 0.3); }
.mp-status.live { color: oklch(0.72 0.25 355); background: oklch(0.72 0.25 355 / 0.1); border: 1px solid oklch(0.72 0.25 355 / 0.35); }
.mp-status.done { color: oklch(0.85 0.25 130); background: oklch(0.85 0.25 130 / 0.1); border: 1px solid oklch(0.85 0.25 130 / 0.3); }
.mp-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mp-status.live .mp-status-dot { animation: mp-pulse 1.4s ease-in-out infinite; }
@keyframes mp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* teams row — badge + name on each flank, countdown/result in the middle */
.mp-teams {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 18px;
}
.mp-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mp-team.right { flex-direction: row-reverse; text-align: right; }
.mp-badge {
  width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: 1px;
}
.mp-team-body { min-width: 0; }
.mp-team-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(17px, 2vw, 23px); font-weight: 800;
  letter-spacing: -0.03em; color: rgb(var(--n-ink)); line-height: 1.1;
}
.mp-team-name.win { color: oklch(0.85 0.25 130); }
.mp-team-score {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(15px, 1.6vw, 19px); font-weight: 800;
  color: rgba(var(--n-ink),0.9); margin-top: 4px; word-break: break-word;
}
.mp-team-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.45); margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
}
.mp-team.right .mp-team-sub { justify-content: flex-end; }

.mp-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 150px; }
.mp-vs-line { width: 1px; height: 18px; background: rgba(var(--n-surf),0.12); }
.mp-vs {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 3px;
  color: rgba(var(--n-ink),0.4);
}

/* countdown — filled by the page's own JS, no plugin */
.mp-cd { text-align: center; }
.mp-cd-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2.5px; color: rgba(var(--n-ink),0.4);
  margin-bottom: 6px;
}
.mp-cd-boxes { display: inline-flex; gap: 5px; }
.mp-cd-box {
  min-width: 42px; padding: 5px 4px; border-radius: 8px;
  background: rgba(var(--n-surf),0.04);
  border: 1px solid rgba(var(--n-surf),0.07);
}
.mp-cd-v {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; font-weight: 800; color: rgb(var(--n-ink)); line-height: 1;
}
.mp-cd-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.4);
  margin-top: 3px;
}

.mp-hero-result {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(var(--n-surf),0.06);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.mp-hero-result-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700; color: oklch(0.85 0.25 130);
}
.mp-hero-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .mp-teams { grid-template-columns: 1fr; gap: 16px; }
  .mp-team.right { flex-direction: row; text-align: left; }
  .mp-team.right .mp-team-sub { justify-content: flex-start; }
  .mp-mid { min-width: 0; }
}

/* --- FACT STRIP --- */
.mp-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.mp-fact {
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 10px; padding: 10px 12px; min-width: 0;
}
.mp-fact-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.4); margin-bottom: 4px;
}
.mp-fact-v { font-size: 12.5px; font-weight: 600; color: rgb(var(--n-ink)); line-height: 1.4; }

/* --- PAGE GRID --- */
.mp-grid { display: grid; grid-template-columns: 1fr 340px; gap: 14px; align-items: start; }
.mp-main, .mp-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1000px) { .mp-grid { grid-template-columns: 1fr; } }

/* --- HEAD TO HEAD --- */
.mp-h2h-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.mp-h2h-side { text-align: center; }
.mp-h2h-w {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  color: rgb(var(--n-ink));
}
.mp-h2h-t {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px; color: rgba(var(--n-ink),0.5);
  margin-top: 4px;
}
.mp-h2h-mid { text-align: center; }
.mp-h2h-played {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 800; color: rgba(var(--n-ink),0.75);
}
.mp-h2h-played-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 2px; color: rgba(var(--n-ink),0.35);
}
.mp-h2h-bar {
  display: flex; height: 8px; border-radius: 99px; overflow: hidden;
  background: rgba(var(--n-surf),0.06); margin: 14px 0 8px;
}
.mp-h2h-fill { height: 100%; }
.mp-h2h-fill.t1 { background: oklch(0.7 0.22 27); }
.mp-h2h-fill.t2 { background: oklch(0.6 0.18 254); }
.mp-h2h-fill.nr { background: rgba(var(--n-surf),0.14); }
.mp-h2h-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.45);
}
.mp-h2h-sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.mp-h2h-sw.t1 { background: oklch(0.7 0.22 27); }
.mp-h2h-sw.t2 { background: oklch(0.6 0.18 254); }
.mp-h2h-sw.nr { background: rgba(var(--n-surf),0.14); }
.mp-h2h-rows { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(var(--n-surf),0.08); }
.mp-h2h-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 5px 0; font-size: 12px;
}
.mp-h2h-row-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.45);
}
.mp-h2h-row-v { color: rgb(var(--n-ink)); font-weight: 600; }

/* --- MILESTONE WATCH ---
   Rows reuse .n-sd-ms-* from the series page; only the state colour is new.
   .n-sd-ms-fill ships without a background of its own, so the mood class on
   the row supplies it — bar width stays inline because it is data. */
.mp-ms-row.hot  .n-sd-ms-fill { background: oklch(0.85 0.25 130); }
.mp-ms-row.warm .n-sd-ms-fill { background: oklch(0.82 0.18 75); }
.mp-ms-row.cool .n-sd-ms-fill { background: oklch(0.6 0.18 254); }
.mp-ms-row.done .n-sd-ms-fill { background: oklch(0.85 0.25 130); }
.mp-ms-row.miss .n-sd-ms-fill { background: rgba(var(--n-surf),0.22); }

.mp-ms-row.hot  .n-sd-ms-note { color: oklch(0.85 0.25 130); }
.mp-ms-row.warm .n-sd-ms-note { color: oklch(0.82 0.18 75); }
.mp-ms-row.cool .n-sd-ms-note { color: rgba(var(--n-ink),0.45); }
.mp-ms-row.done .n-sd-ms-note { color: oklch(0.85 0.25 130); }
.mp-ms-row.miss .n-sd-ms-note { color: rgba(var(--n-ink),0.35); }
.mp-ms-row.miss { opacity: 0.75; }
.mp-ms-row .n-sd-ms-player a:hover { color: oklch(0.7 0.22 27); }

/* The row's main line is the generator's own sentence, so it wraps rather than
   sitting on one line like the series page's short player name. */
.mp-ms-row .n-sd-ms-player { font-weight: 500; line-height: 1.45; }
.mp-ms-row .n-sd-ms-head { align-items: flex-start; }
.mp-ms-row .n-sd-ms-goal { white-space: nowrap; flex-shrink: 0; }
.mp-ms-sub {
  font-size: 11px; line-height: 1.5; margin-top: 5px;
  color: rgba(var(--n-ink),0.45);
}
/* The scorecard drops the card into a flex column with gap:0, so it carries
   its own spacing there; on the preview the grid already supplies it. */
.n-mc-sc > .mp-ms-card { margin: 16px 0; }

/* =========================================================================
   SHARED MATCH HERO — narrow viewports
   -------------------------------------------------------------------------
   .n-mc-scoreline is a "1fr auto 1fr" grid whose columns never shrink below
   their content, so on a phone the right-hand team ran past the hero's edge
   and overflow:hidden clipped its badge in half. A stacking rule existed, but
   only under ".mobile-view" — a class the server adds from user-agent
   sniffing, which does nothing for a narrow desktop window or any device the
   sniffer misses. Same rules, keyed on the viewport instead.
   ====================================================================== */
@media (max-width: 700px) {
  .n-mc-scoreline { grid-template-columns: 1fr; gap: 12px; }
  .n-mc-team.right { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
  .n-mc-sep { flex-direction: row; gap: 10px; }
  .n-mc-sep-line { width: 28px; height: 1px; }
}
/* Belt and braces: let the columns shrink and long names wrap rather than
   pushing the row wider than its container at any width. */
.n-mc-team { min-width: 0; }
.n-mc-name { overflow-wrap: anywhere; }
.n-mc-badge { flex-shrink: 0; }

/* --- PREVIOUS MEETINGS --- */
.mp-pm-list { display: flex; flex-direction: column; }
.mp-pm-row {
  display: grid; grid-template-columns: 74px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px dashed rgba(var(--n-surf),0.06);
}
.mp-pm-row:last-child { border-bottom: 0; }
.mp-pm-when {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: rgba(var(--n-ink),0.5); line-height: 1.5;
}
.mp-pm-when b { display: block; color: rgba(var(--n-ink),0.8); font-weight: 600; }
.mp-pm-side {
  display: grid; grid-template-columns: 46px 1fr; gap: 10px;
  align-items: baseline; padding: 1px 0;
}
.mp-pm-team {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1px; color: rgba(var(--n-ink),0.55);
}
.mp-pm-side.win .mp-pm-team { color: oklch(0.85 0.25 130); }
.mp-pm-score { font-size: 12.5px; color: rgba(var(--n-ink),0.75); }
.mp-pm-side.win .mp-pm-score { color: rgb(var(--n-ink)); font-weight: 700; }
.mp-pm-end { text-align: right; }
.mp-pm-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px;
  color: oklch(0.85 0.25 130); background: oklch(0.85 0.25 130 / 0.1);
  border: 1px solid oklch(0.85 0.25 130 / 0.25);
}
.mp-pm-tag.nr { color: rgba(var(--n-ink),0.45); background: rgba(var(--n-surf),0.05); border-color: rgba(var(--n-surf),0.1); }
.mp-pm-link {
  display: block; margin-top: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.4);
}
.mp-pm-link:hover { color: oklch(0.7 0.22 27); }
@media (max-width: 560px) {
  .mp-pm-row { grid-template-columns: 62px 1fr; }
  .mp-pm-end { grid-column: 2; text-align: left; }
}

/* --- CURRENT FORM --- */
.mp-form-block + .mp-form-block { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(var(--n-surf),0.08); }
.mp-form-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mp-form-team { display: inline-flex; align-items: center; gap: 8px; }
.mp-form-badge {
  padding: 3px 8px; border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
}
.mp-form-list { display: flex; flex-direction: column; gap: 2px; }
.mp-form-row {
  display: grid; grid-template-columns: 16px 1fr auto;
  align-items: center; gap: 9px; padding: 4px 0;
  font-size: 11.5px; color: rgba(var(--n-ink),0.7);
}
.mp-form-res {
  width: 16px; height: 16px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700;
}
.mp-form-res.w { background: oklch(0.85 0.25 130); color: var(--n-ground); }
.mp-form-res.l { background: oklch(0.72 0.25 355 / 0.75); color: #fff; }
.mp-form-res.d { background: rgba(var(--n-surf),0.14); color: rgba(var(--n-ink),0.7); }
.mp-form-opp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-form-opp:hover { color: rgb(var(--n-ink)); }
.mp-form-when { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: rgba(var(--n-ink),0.35); }
.mp-form-none { font-size: 11.5px; color: rgba(var(--n-ink),0.35); padding: 4px 0; }

/* --- PREDICTION POLL --- */
.mp-poll-q { font-size: 12.5px; color: rgba(var(--n-ink),0.65); margin-bottom: 12px; }
.mp-poll-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-poll-btn {
  padding: 10px 8px; border-radius: 9px;
  border: 1px solid rgba(var(--n-surf),0.1);
  background: rgba(var(--n-surf),0.03);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: rgb(var(--n-ink));
  transition: border-color 150ms, background 150ms;
}
.mp-poll-btn:hover { background: rgba(var(--n-surf),0.07); border-color: rgba(var(--n-surf),0.22); }
.mp-poll-btn[disabled] { opacity: 0.5; cursor: default; }
.mp-poll-res { display: flex; flex-direction: column; gap: 8px; }
.mp-poll-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mp-poll-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.7);
}
.mp-poll-pct { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 800; color: rgb(var(--n-ink)); }
.mp-poll-bar { height: 7px; border-radius: 99px; background: rgba(var(--n-surf),0.06); overflow: hidden; }
.mp-poll-fill { height: 100%; border-radius: 99px; }
.mp-poll-fill.t1 { background: oklch(0.7 0.22 27); }
.mp-poll-fill.t2 { background: oklch(0.6 0.18 254); }
.mp-poll-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 1.5px; color: rgba(var(--n-ink),0.35);
  margin-top: 10px;
}

/* --- KEY PERFORMERS --- */
.mp-perf-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 9px 0;
  border-bottom: 1px dashed rgba(var(--n-surf),0.06);
}
.mp-perf-row:last-child { border-bottom: 0; }
.mp-perf-k {
  grid-column: 1 / -1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.4);
}
.mp-perf-cell { min-width: 0; }
.mp-perf-name { font-size: 12px; font-weight: 600; color: rgb(var(--n-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-perf-name:hover { color: oklch(0.7 0.22 27); }
.mp-perf-v { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 800; color: oklch(0.85 0.25 130); }
.mp-perf-cell.right { text-align: right; }

/* --- EMPTY STATE --- */
.mp-empty {
  padding: 44px 20px; text-align: center;
  background: rgba(var(--n-panel),0.55);
  border: 1px dashed rgba(var(--n-surf),0.1);
  border-radius: 14px;
  color: rgba(var(--n-ink),0.4); font-size: 13px;
}

/* =========================================================================
   COLOUR TOKENS — single source of truth for team and format colour

   Before this block the stylesheet carried three competing team palettes
   (jersey gradients, a later partial duplicate that silently overrode half
   of them, and the badge solids) plus two format palettes (an oklch set and
   the hex --pi-* set). The same side could appear blue in one component and
   red in another.

   Everything below derives from these tokens. To change a team or format
   colour site-wide, change it HERE and nowhere else.
   ====================================================================== */
:root {
  /* ---- Formats ---- */
  --fmt-test: oklch(0.70 0.22 27);     /* Tests */
  --fmt-odi:  oklch(0.70 0.18 210);    /* ODIs */
  --fmt-t20i: oklch(0.85 0.25 130);    /* T20Is */
  --fmt-t20l: oklch(0.68 0.22 300);    /* T20 leagues */
  --fmt-all:  oklch(0.72 0.03 260);    /* All formats / unknown */

  /* ---- Teams ---- */
  --tm-eng: oklch(0.34 0.11 268);    --tm-eng-ink: #fff;      /* England — navy */
  --tm-aus: oklch(0.72 0.16 100);    --tm-aus-ink: var(--n-ground);   /* Australia — gold */
  --tm-ind: oklch(0.50 0.20 258);    --tm-ind-ink: #fff;      /* India — blue */
  --tm-pak: oklch(0.48 0.17 155);    --tm-pak-ink: #fff;      /* Pakistan — green */
  --tm-wi:  oklch(0.44 0.19 18);     --tm-wi-ink: #fff;      /* West Indies — maroon */
  --tm-nz:  oklch(0.30 0.02 250);    --tm-nz-ink: #fff;      /* New Zealand — black */
  --tm-sl:  oklch(0.42 0.16 265);    --tm-sl-ink: #fff;      /* Sri Lanka — royal blue */
  --tm-sa:  oklch(0.50 0.15 160);    --tm-sa-ink: #fff;      /* South Africa — green */
  --tm-zim: oklch(0.52 0.16 140);    --tm-zim-ink: #fff;      /* Zimbabwe — green */
  --tm-ban: oklch(0.42 0.14 155);    --tm-ban-ink: #fff;      /* Bangladesh — bottle green */
  --tm-ire: oklch(0.47 0.18 150);    --tm-ire-ink: #fff;      /* Ireland — green */
  --tm-afg: oklch(0.55 0.15 235);    --tm-afg-ink: #fff;      /* Afghanistan — blue */
  --tm-ken: oklch(0.48 0.16 148);    --tm-ken-ink: #fff;      /* Kenya — green */
  --tm-ned: oklch(0.70 0.18 55);     --tm-ned-ink: var(--n-ground);   /* Netherlands — orange */
  --tm-uae: oklch(0.45 0.06 250);    --tm-uae-ink: #fff;      /* UAE — slate */
  --tm-sco: oklch(0.45 0.14 250);    --tm-sco-ink: #fff;      /* Scotland — navy */
  --tm-nep: oklch(0.50 0.20 20);     --tm-nep-ink: #fff;      /* Nepal — crimson */
  --tm-nam: oklch(0.52 0.16 240);    --tm-nam-ink: #fff;      /* Namibia — blue */
  --tm-can: oklch(0.55 0.22 25);     --tm-can-ink: #fff;      /* Canada — red */
  --tm-hk:  oklch(0.52 0.20 20);     --tm-hk-ink: #fff;      /* Hong Kong — red */
  --tm-omn: oklch(0.50 0.18 15);     --tm-omn-ink: #fff;      /* Oman — red */
  --tm-png: oklch(0.48 0.19 25);     --tm-png-ink: #fff;      /* Papua New Guinea — red */
  --tm-uga: oklch(0.72 0.16 90);     --tm-uga-ink: var(--n-ground);   /* Uganda — yellow */
  --tm-usa: oklch(0.42 0.15 260);    --tm-usa-ink: #fff;      /* USA — navy */

  /* Fallback for the ~110 associate sides with no assigned colour */
  --tm-default: oklch(0.44 0.03 260);
  --tm-default-ink: #fff;

  /* Legacy aliases kept pointing at the tokens so older rules stay in step */
  --pi-test: var(--fmt-test); --pi-odi: var(--fmt-odi); --pi-t20i: var(--fmt-t20i);
  --test: var(--fmt-test);    --odi: var(--fmt-odi);    --t20i: var(--fmt-t20i);
}

/* ---- Format badges: .fmt-* (match cards, fixtures, leaderboards, dock) ---- */
.fmt-test { color: var(--fmt-test) !important; border-color: color-mix(in oklch, var(--fmt-test) 30%, transparent) !important; background: color-mix(in oklch, var(--fmt-test) 10%, transparent) !important; }
.fmt-odi  { color: var(--fmt-odi) !important; border-color: color-mix(in oklch, var(--fmt-odi) 30%, transparent) !important; background: color-mix(in oklch, var(--fmt-odi) 10%, transparent) !important; }
.fmt-t20i { color: var(--fmt-t20i) !important; border-color: color-mix(in oklch, var(--fmt-t20i) 30%, transparent) !important; background: color-mix(in oklch, var(--fmt-t20i) 10%, transparent) !important; }
.fmt-t20l { color: var(--fmt-t20l) !important; border-color: color-mix(in oklch, var(--fmt-t20l) 30%, transparent) !important; background: color-mix(in oklch, var(--fmt-t20l) 10%, transparent) !important; }

/* ---- Format surfaces: bg-*-stats, emitted by StaticClass.TypeTextClass ---- */
.bg-test-stats { background: color-mix(in oklch, var(--fmt-test) 20%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-odi-stats { background: color-mix(in oklch, var(--fmt-odi) 20%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-t20i-stats { background: color-mix(in oklch, var(--fmt-t20i) 20%, transparent) !important; color: var(--n-ground) !important; }
.bg-t20l-stats { background: color-mix(in oklch, var(--fmt-t20l) 20%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-all-stats { background: color-mix(in oklch, var(--fmt-all) 20%, transparent) !important; color: rgb(var(--n-ink)) !important; }

/* ---- Format accents used by the rankings and series components ---- */
.rk-fmt-test { --rk-accent: var(--fmt-test); --rk-accent-soft: color-mix(in oklch, var(--fmt-test) 18%, transparent); }
.rk-fmt-odi  { --rk-accent: var(--fmt-odi); --rk-accent-soft: color-mix(in oklch, var(--fmt-odi) 18%, transparent); }
.rk-fmt-t20i { --rk-accent: var(--fmt-t20i); --rk-accent-soft: color-mix(in oklch, var(--fmt-t20i) 18%, transparent); }

.nr-series-head.fmt-test { border-left-color: var(--fmt-test); }
.nr-series-head.fmt-odi  { border-left-color: var(--fmt-odi); }
.nr-series-head.fmt-t20i { border-left-color: var(--fmt-t20i); }

/* ---- Team solid badges (recent-results dock, scorecards) ---- */
/* Fallback first; the per-team rules below are more specific and win. */
.rr-tm { background: var(--tm-default); color: var(--tm-default-ink); }
.rr-tm.team-eng { background: var(--tm-eng); color: var(--tm-eng-ink); }
.rr-tm.team-aus { background: var(--tm-aus); color: var(--tm-aus-ink); }
.rr-tm.team-ind { background: var(--tm-ind); color: var(--tm-ind-ink); }
.rr-tm.team-pak { background: var(--tm-pak); color: var(--tm-pak-ink); }
.rr-tm.team-wi  { background: var(--tm-wi); color: var(--tm-wi-ink); }
.rr-tm.team-nz  { background: var(--tm-nz); color: var(--tm-nz-ink); }
.rr-tm.team-sl  { background: var(--tm-sl); color: var(--tm-sl-ink); }
.rr-tm.team-sa  { background: var(--tm-sa); color: var(--tm-sa-ink); }
.rr-tm.team-zim { background: var(--tm-zim); color: var(--tm-zim-ink); }
.rr-tm.team-ban { background: var(--tm-ban); color: var(--tm-ban-ink); }
.rr-tm.team-ire { background: var(--tm-ire); color: var(--tm-ire-ink); }
.rr-tm.team-afg { background: var(--tm-afg); color: var(--tm-afg-ink); }
.rr-tm.team-ken { background: var(--tm-ken); color: var(--tm-ken-ink); }
.rr-tm.team-ned { background: var(--tm-ned); color: var(--tm-ned-ink); }
.rr-tm.team-uae { background: var(--tm-uae); color: var(--tm-uae-ink); }
.rr-tm.team-sco { background: var(--tm-sco); color: var(--tm-sco-ink); }
.rr-tm.team-nep { background: var(--tm-nep); color: var(--tm-nep-ink); }
.rr-tm.team-nam { background: var(--tm-nam); color: var(--tm-nam-ink); }
.rr-tm.team-can { background: var(--tm-can); color: var(--tm-can-ink); }
.rr-tm.team-hk  { background: var(--tm-hk); color: var(--tm-hk-ink); }
.rr-tm.team-omn { background: var(--tm-omn); color: var(--tm-omn-ink); }
.rr-tm.team-png { background: var(--tm-png); color: var(--tm-png-ink); }
.rr-tm.team-uga { background: var(--tm-uga); color: var(--tm-uga-ink); }
.rr-tm.team-usa { background: var(--tm-usa); color: var(--tm-usa-ink); }

/* ---- Team surfaces: bg-*-stats, emitted as "bg-" + shortname.ToLower() + "-stats" ---- */
.bg-eng-stats { background: color-mix(in oklch, var(--tm-eng) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-aus-stats { background: color-mix(in oklch, var(--tm-aus) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-ind-stats { background: color-mix(in oklch, var(--tm-ind) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-pak-stats { background: color-mix(in oklch, var(--tm-pak) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-wi-stats { background: color-mix(in oklch, var(--tm-wi) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-nz-stats { background: color-mix(in oklch, var(--tm-nz) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-sl-stats { background: color-mix(in oklch, var(--tm-sl) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-sa-stats { background: color-mix(in oklch, var(--tm-sa) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-zim-stats { background: color-mix(in oklch, var(--tm-zim) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-ban-stats { background: color-mix(in oklch, var(--tm-ban) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-ire-stats { background: color-mix(in oklch, var(--tm-ire) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-afg-stats { background: color-mix(in oklch, var(--tm-afg) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-ken-stats { background: color-mix(in oklch, var(--tm-ken) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-ned-stats { background: color-mix(in oklch, var(--tm-ned) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-uae-stats { background: color-mix(in oklch, var(--tm-uae) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-sco-stats { background: color-mix(in oklch, var(--tm-sco) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-nep-stats { background: color-mix(in oklch, var(--tm-nep) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-nam-stats { background: color-mix(in oklch, var(--tm-nam) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-can-stats { background: color-mix(in oklch, var(--tm-can) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-hk-stats { background: color-mix(in oklch, var(--tm-hk) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-omn-stats { background: color-mix(in oklch, var(--tm-omn) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-png-stats { background: color-mix(in oklch, var(--tm-png) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-uga-stats { background: color-mix(in oklch, var(--tm-uga) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }
.bg-usa-stats { background: color-mix(in oklch, var(--tm-usa) 26%, transparent) !important; color: rgb(var(--n-ink)) !important; }

/* ---- Player-page jersey gradient ---- */
.np-hero2-jersey { background: linear-gradient(165deg, var(--tm-default), color-mix(in oklch, var(--tm-default) 72%, #000)); }
.bg-eng-stats .np-hero2-jersey, .team-eng .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-eng), color-mix(in oklch, var(--tm-eng) 72%, #000)); }
.bg-aus-stats .np-hero2-jersey, .team-aus .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-aus), color-mix(in oklch, var(--tm-aus) 72%, #000)); }
.bg-ind-stats .np-hero2-jersey, .team-ind .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-ind), color-mix(in oklch, var(--tm-ind) 72%, #000)); }
.bg-pak-stats .np-hero2-jersey, .team-pak .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-pak), color-mix(in oklch, var(--tm-pak) 72%, #000)); }
.bg-wi-stats .np-hero2-jersey, .team-wi .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-wi), color-mix(in oklch, var(--tm-wi) 72%, #000)); }
.bg-nz-stats .np-hero2-jersey, .team-nz .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-nz), color-mix(in oklch, var(--tm-nz) 72%, #000)); }
.bg-sl-stats .np-hero2-jersey, .team-sl .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-sl), color-mix(in oklch, var(--tm-sl) 72%, #000)); }
.bg-sa-stats .np-hero2-jersey, .team-sa .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-sa), color-mix(in oklch, var(--tm-sa) 72%, #000)); }
.bg-zim-stats .np-hero2-jersey, .team-zim .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-zim), color-mix(in oklch, var(--tm-zim) 72%, #000)); }
.bg-ban-stats .np-hero2-jersey, .team-ban .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-ban), color-mix(in oklch, var(--tm-ban) 72%, #000)); }
.bg-ire-stats .np-hero2-jersey, .team-ire .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-ire), color-mix(in oklch, var(--tm-ire) 72%, #000)); }
.bg-afg-stats .np-hero2-jersey, .team-afg .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-afg), color-mix(in oklch, var(--tm-afg) 72%, #000)); }
.bg-ken-stats .np-hero2-jersey, .team-ken .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-ken), color-mix(in oklch, var(--tm-ken) 72%, #000)); }
.bg-ned-stats .np-hero2-jersey, .team-ned .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-ned), color-mix(in oklch, var(--tm-ned) 72%, #000)); }
.bg-uae-stats .np-hero2-jersey, .team-uae .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-uae), color-mix(in oklch, var(--tm-uae) 72%, #000)); }
.bg-sco-stats .np-hero2-jersey, .team-sco .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-sco), color-mix(in oklch, var(--tm-sco) 72%, #000)); }
.bg-nep-stats .np-hero2-jersey, .team-nep .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-nep), color-mix(in oklch, var(--tm-nep) 72%, #000)); }
.bg-nam-stats .np-hero2-jersey, .team-nam .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-nam), color-mix(in oklch, var(--tm-nam) 72%, #000)); }
.bg-can-stats .np-hero2-jersey, .team-can .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-can), color-mix(in oklch, var(--tm-can) 72%, #000)); }
.bg-hk-stats .np-hero2-jersey, .team-hk .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-hk), color-mix(in oklch, var(--tm-hk) 72%, #000)); }
.bg-omn-stats .np-hero2-jersey, .team-omn .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-omn), color-mix(in oklch, var(--tm-omn) 72%, #000)); }
.bg-png-stats .np-hero2-jersey, .team-png .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-png), color-mix(in oklch, var(--tm-png) 72%, #000)); }
.bg-uga-stats .np-hero2-jersey, .team-uga .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-uga), color-mix(in oklch, var(--tm-uga) 72%, #000)); }
.bg-usa-stats .np-hero2-jersey, .team-usa .np-hero2-jersey { background: linear-gradient(165deg, var(--tm-usa), color-mix(in oklch, var(--tm-usa) 72%, #000)); }


/* ============================================================================
   Stats detail page — StatsPage.aspx insight layout
   Podium, takeaway tiles (reuses .nlist-intel), bar leaderboard, nation rail.

   Mobile-first: the base rules are the phone layout and every media query is
   min-width, so a narrow screen only ever parses the rules it actually uses.
   Breakpoints — 560 (large phone), 760 (tablet), 1080 (rail appears).
   ============================================================================ */

/* Team colour tokens. Any container tagged .team-{code} exposes --tm-c /
   --tm-ink to its children, so bars and badges pick up the side's colour
   without a rule per component. Sides with no assigned colour fall through
   to .team-default. */
.team-default { --tm-c: var(--tm-default); --tm-ink: var(--tm-default-ink); }
.team-eng { --tm-c: var(--tm-eng); --tm-ink: var(--tm-eng-ink); }
.team-aus { --tm-c: var(--tm-aus); --tm-ink: var(--tm-aus-ink); }
.team-ind { --tm-c: var(--tm-ind); --tm-ink: var(--tm-ind-ink); }
.team-pak { --tm-c: var(--tm-pak); --tm-ink: var(--tm-pak-ink); }
.team-wi  { --tm-c: var(--tm-wi);  --tm-ink: var(--tm-wi-ink); }
.team-nz  { --tm-c: var(--tm-nz);  --tm-ink: var(--tm-nz-ink); }
.team-sl  { --tm-c: var(--tm-sl);  --tm-ink: var(--tm-sl-ink); }
.team-sa  { --tm-c: var(--tm-sa);  --tm-ink: var(--tm-sa-ink); }
.team-zim { --tm-c: var(--tm-zim); --tm-ink: var(--tm-zim-ink); }
.team-ban { --tm-c: var(--tm-ban); --tm-ink: var(--tm-ban-ink); }
.team-ire { --tm-c: var(--tm-ire); --tm-ink: var(--tm-ire-ink); }
.team-afg { --tm-c: var(--tm-afg); --tm-ink: var(--tm-afg-ink); }
.team-ken { --tm-c: var(--tm-ken); --tm-ink: var(--tm-ken-ink); }
.team-ned { --tm-c: var(--tm-ned); --tm-ink: var(--tm-ned-ink); }
.team-uae { --tm-c: var(--tm-uae); --tm-ink: var(--tm-uae-ink); }
.team-sco { --tm-c: var(--tm-sco); --tm-ink: var(--tm-sco-ink); }
.team-nep { --tm-c: var(--tm-nep); --tm-ink: var(--tm-nep-ink); }
.team-nam { --tm-c: var(--tm-nam); --tm-ink: var(--tm-nam-ink); }
.team-can { --tm-c: var(--tm-can); --tm-ink: var(--tm-can-ink); }
.team-hk  { --tm-c: var(--tm-hk);  --tm-ink: var(--tm-hk-ink); }
.team-omn { --tm-c: var(--tm-omn); --tm-ink: var(--tm-omn-ink); }
.team-png { --tm-c: var(--tm-png); --tm-ink: var(--tm-png-ink); }
.team-uga { --tm-c: var(--tm-uga); --tm-ink: var(--tm-uga-ink); }
.team-usa { --tm-c: var(--tm-usa); --tm-ink: var(--tm-usa-ink); }

.nstat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }

/* ---------- podium ----------
   Phone: the leader takes the full width as a two-column card (big number
   beside the name block) and second/third sit side by side underneath, so the
   whole podium costs about one screen-third instead of three stacked cards. */
.nstat-podium { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.nstat-pod {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px;
  background: rgba(var(--n-panel),0.55);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 12px;
}
.nstat-pod::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tm-c, var(--tm-default)); }
.nstat-pod::after {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--tm-c, var(--tm-default)); opacity: 0.22; filter: blur(30px);
}
.nstat-pod > * { position: relative; z-index: 1; }
.nstat-pod-rank { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; color: rgba(var(--n-ink),0.4); }
.nstat-pod-rank::before { content: '#'; }
.nstat-pod-v { font-size: 26px; font-weight: 800; line-height: 0.95; letter-spacing: -1.5px; }
.nstat-pod-name { font-size: 13px; font-weight: 700; letter-spacing: -0.3px; }
a.nstat-pod-name:hover { color: oklch(0.7 0.18 254); }
.nstat-pod-team {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1.5px;
  padding: 2px 6px; border-radius: 5px;
  background: var(--tm-c, var(--tm-default)); color: var(--tm-ink, #fff);
}
.nstat-pod-note { font-size: 10px; color: rgba(var(--n-ink),0.55); }
.nstat-pod-note:empty { display: none; }

.nstat-pod-1 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "val rank" "val name" "val team" "val note";
  align-items: center; column-gap: 16px; row-gap: 2px;
}
.nstat-pod-1 .nstat-pod-rank { grid-area: rank; }
.nstat-pod-1 .nstat-pod-v    { grid-area: val; font-size: 44px; letter-spacing: -2px; }
.nstat-pod-1 .nstat-pod-name { grid-area: name; font-size: 16px; }
.nstat-pod-1 .nstat-pod-team { grid-area: team; }
.nstat-pod-1 .nstat-pod-note { grid-area: note; }

/* ---------- leaderboard + rail ---------- */
.nstat-main { display: grid; gap: 14px; align-items: start; }
.nstat-board .hsec-head { flex-wrap: wrap; }

.nstat-tools { display: flex; align-items: center; gap: 6px; width: 100%; }
.nstat-search {
  flex: 1; min-width: 0; padding: 7px 10px;
  background: rgba(var(--n-surf),0.04);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 8px;
  color: rgb(var(--n-ink)); font-size: 12px; outline: none;
}
.nstat-search::placeholder { color: rgba(var(--n-ink),0.36); }
.nstat-search:focus { border-color: rgba(var(--n-surf),0.2); }
.nstat-tools .n-btn-ghost { padding: 7px 10px; font-size: 12px; white-space: nowrap; }

.nstat-lb { display: flex; flex-direction: column; }
/* Phone rows: one line each, with the value bar as a hairline underneath so
   the shape of the list survives without costing a grid column. */
.nstat-lb-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 38px 58px;
  align-items: center; gap: 8px;
  padding: 7px 2px 8px;
  border-bottom: 1px solid rgba(var(--n-surf),0.045);
}
.nstat-lb-row.is-more, .nstat-lb-row.is-out { display: none; }
.nstat-lb-rank { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-align: right; color: rgba(var(--n-ink),0.45); }
.nstat-lb-row.is-first .nstat-lb-rank { color: rgb(var(--n-ink)); font-weight: 700; }
.nstat-lb-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nstat-lb-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.nstat-lb-name:hover { color: oklch(0.7 0.18 254); }
.nstat-lb-unknown { color: rgba(var(--n-ink),0.3); font-weight: 400; font-style: italic; }
.nstat-lb-meta { font-size: 10px; color: rgba(var(--n-ink),0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nstat-lb-team {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; text-align: center;
  padding: 2px 0; border-radius: 4px;
  background: var(--tm-c, var(--tm-default)); color: var(--tm-ink, #fff);
}
.nstat-lb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; }
.nstat-lb-fill {
  display: block; height: 100%;
  background: var(--tm-c, var(--tm-default));
}
.nstat-lb-v { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; text-align: right; letter-spacing: -0.5px; }

.nstat-more { display: flex; justify-content: center; margin-top: 12px; }
.nstat-empty { text-align: center; padding: 22px; font-size: 13px; color: rgba(var(--n-ink),0.5); }

/* ---------- nation rail ---------- */
.nstat-nations { display: flex; flex-direction: column; }
.nstat-nation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  grid-template-areas: "name v" "bar bar";
  align-items: center; gap: 3px 8px;
  width: 100%; padding: 6px 0; text-align: left;
  border-bottom: 1px dashed rgba(var(--n-surf),0.05);
}
.nstat-nation:last-child { border-bottom: 0; }
.nstat-nation:hover .nstat-nation-n { color: rgb(var(--n-ink)); }
.nstat-nation.is-on .nstat-nation-n { color: rgb(var(--n-ink)); font-weight: 700; }
.nstat-nation-n { grid-area: name; font-size: 12px; color: rgba(var(--n-ink),0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nstat-nation-v { grid-area: v; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; text-align: right; }
.nstat-nation-bar { grid-area: bar; height: 5px; border-radius: 99px; background: rgba(var(--n-surf),0.05); overflow: hidden; }
.nstat-nation-fill { display: block; height: 100%; border-radius: 99px; background: var(--tm-c, var(--tm-default)); }
.nstat-aside-note { margin-top: 10px; font-size: 10px; letter-spacing: 0.5px; color: rgba(var(--n-ink),0.35); }

/* ---------- 560px and up: podium gets its own row, tiles breathe ---------- */
@media (min-width: 560px) {
  .nstat-lb-row { grid-template-columns: 28px minmax(0, 1fr) 42px 66px; padding: 8px 6px 9px; }
  .nstat-lb-name { font-size: 13px; }
  .nstat-lb-v { font-size: 14px; }
  .nstat-pod-1 .nstat-pod-v { font-size: 52px; }
}

/* ---------- 760px and up: the bar becomes a real column again ---------- */
@media (min-width: 760px) {
  .nstat-podium { grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; }
  .nstat-pod { padding: 16px; gap: 5px; }
  .nstat-pod-1 { grid-column: auto; display: flex; flex-direction: column; }
  .nstat-pod-1 .nstat-pod-v { font-size: 48px; }
  .nstat-pod-v { font-size: 34px; }
  .nstat-pod-name { font-size: 14px; }
  .nstat-pod-1 .nstat-pod-name { font-size: 17px; }

  .nstat-tools { width: auto; }
  .nstat-search { flex: none; width: 190px; }

  .nstat-lb-row {
    grid-template-columns: 32px minmax(110px, 1.3fr) 46px minmax(70px, 2.4fr) 76px;
    padding: 8px 10px; border-radius: 8px;
    border-bottom: 1px dashed rgba(var(--n-surf),0.05);
  }
  .nstat-lb-row:hover { background: rgba(var(--n-surf),0.03); }
  .nstat-lb-bar { position: static; height: 8px; border-radius: 99px; background: rgba(var(--n-surf),0.05); }
  .nstat-lb-fill {
    border-radius: 99px;
    box-shadow: 0 0 12px color-mix(in oklch, var(--tm-c, var(--tm-default)) 45%, transparent);
  }
}

/* ---------- 1080px and up: nation split moves into a sticky side rail ---------- */
@media (min-width: 1080px) {
  .nstat-main { grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
  .nstat-main-solo { grid-template-columns: minmax(0, 1fr); }
  .nstat-aside { position: sticky; top: 84px; }
  .nstat-podium { gap: 14px; }
  .nstat-pod { padding: 18px; }
  .nstat-pod-1 .nstat-pod-v { font-size: 56px; }
}

/* Table view — same rows, denser grid, no bars. */
.nstat-lb.is-table .nstat-lb-row { grid-template-columns: 34px minmax(0, 1fr) 46px 76px; gap: 8px; padding: 4px 8px 5px; border-radius: 0; }
.nstat-lb.is-table .nstat-lb-row:nth-child(even) { background: rgba(var(--n-surf),0.02); }
.nstat-lb.is-table .nstat-lb-bar { display: none; }
.nstat-lb.is-table .nstat-lb-meta { display: none; }
.nstat-lb.is-table .nstat-lb-v { font-size: 13px; }

/* =========================================================================
   QUICK LINKS — small screens
   Desktop wraps the bar so the dropdown panels can escape their container.
   On a phone that same wrap turned 7 groups into 7 stacked rows, eating half
   the viewport. Collapse the bar behind its own "QUICK LINKS" label instead,
   and turn the dropdowns into inline accordions so nothing has to escape a
   scrolling box.
   ====================================================================== */
@media (max-width: 900px) {
  .n-qm-inner { flex-wrap: wrap; align-items: center; }

  .n-qm-label {
    cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: 6px;
    flex: 1 1 auto;
  }
  .n-qm-label::after {
    content: '';
    width: 0; height: 0; margin-left: 4px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 180ms;
  }
  .n-qm.open .n-qm-label::after { transform: rotate(180deg); }
  .n-qm-label:focus-visible { outline: 1px solid rgba(var(--n-surf),0.35); outline-offset: -2px; }

  /* Collapsed by default — one row, not seven */
  .n-qm-nav {
    flex: 1 0 100%;
    display: none;
    flex-direction: column;
    max-height: 60vh; overflow-y: auto;
    border-top: 1px solid rgba(var(--n-surf),0.06);
  }
  .n-qm.open .n-qm-nav { display: flex; }

  .n-qm-nav > .n-qm-item {
    flex-direction: column; align-items: stretch;
    border-right: 0; border-bottom: 1px solid rgba(var(--n-surf),0.05);
    width: 100%;
  }
  /* The label row inside a group keeps the bar + caret on one line */
  .n-qm-nav > .n-qm-item > .n-qm-bar { display: none; }
  .n-qm-nav > .n-qm-item > .n-qm-item-label { padding-right: 18px; position: relative; }
  .n-qm-caret { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

  /* Inline accordion instead of an absolute panel — no clipping to fight */
  .n-qm-pop {
    position: static; display: none;
    min-width: 0; max-width: none; width: 100%;
    border: 0; border-radius: 0; box-shadow: none;
    background: rgba(var(--n-surf),0.03);
    padding: 6px 0 8px;
    margin-top: 8px;
  }
  .n-qm-item:focus-within .n-qm-pop,
  .n-qm-item.open .n-qm-pop { display: block; }
  .n-qm-item:hover .n-qm-pop { display: none; }        /* hover is meaningless here */
  .n-qm-item:focus-within:hover .n-qm-pop { display: block; }
  .n-qm-pop-grid { grid-template-columns: 1fr; }

  .n-qm-more { flex: 0 0 auto; }
}

/* =========================================================================
   FOOTER — small screens
   The footer carries 20 links across four groups. In two columns that is a
   long scroll; in one column it is worse. Standard fix: collapse each group
   into an accordion, closed by default, so the footer is four tappable rows
   plus the brand. Links stay in the DOM (crawlable), just hidden.
   ====================================================================== */
@media (max-width: 760px) {
  .n-footer { padding: 30px 18px 16px; }

  /* Accordion list, not a grid */
  .n-footer-top { display: block; }

  .n-footer-brand {
    max-width: none;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(var(--n-surf),0.07);
  }
  .n-footer-desc { font-size: 12px; line-height: 1.7; margin-top: 10px; }
  .n-footer .n-logo-img { height: 28px; }

  .n-footer-col {
    display: block;
    border-bottom: 1px solid rgba(var(--n-surf),0.06);
  }

  /* The group heading becomes the toggle */
  .n-footer-h {
    display: flex; align-items: center;
    width: 100%; margin: 0;
    padding: 13px 0 13px 12px;      /* 12px leaves room for the accent dot */
    cursor: pointer; user-select: none;
    font-size: 10px; letter-spacing: 2.5px;
    color: rgba(var(--n-ink),0.62);
  }
  .n-footer-h::after {
    content: '';
    margin-left: auto;
    width: 7px; height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 200ms;
  }
  .n-footer-col.open .n-footer-h { color: rgb(var(--n-ink)); }
  .n-footer-col.open .n-footer-h::after { transform: rotate(-135deg) translate(-3px, -3px); }
  .n-footer-h:focus-visible { outline: 1px solid rgba(var(--n-surf),0.3); outline-offset: -3px; }

  /* Links hidden until the group is opened */
  .n-footer-col > a { display: none; }
  .n-footer-col.open > a {
    display: block;
    width: auto;                     /* base rule is fit-content — too small to tap */
    padding: 8px 0 8px 12px;
    font-size: 13.5px;
  }
  .n-footer-col.open > a:last-child { padding-bottom: 14px; }
  .n-footer-col > a:hover { padding-left: 12px; }   /* no desktop slide on touch */
  .n-footer-col > a::before { display: none; }

  .n-partner-bar { margin-top: 22px; }
  .n-partner-site { padding: 12px 8px; }

  .n-footer-bottom {
    flex-direction: column; align-items: center;
    gap: 10px; text-align: center;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgba(var(--n-surf),0.06);
  }
}

/* ======================================================================
   LEGAL / STATIC PAGES  —  privacy, terms, DMCA, disclaimer, about,
   contact.
   Long-form prose is the one surface the rest of the system has no
   primitive for: everything else here is cards, tables and stat tiles.
   Measure is capped at ~68ch — the full 1440px shell is unreadable for
   body copy.
   ====================================================================== */
.n-legal { max-width: 900px; margin: 0 auto; padding: 6px 0 24px; }

.n-legal-head { margin-bottom: 28px; }
.n-legal-kicker {
  display: block; margin-bottom: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: oklch(0.85 0.25 130);
}
.n-legal-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 34px; font-weight: 800; letter-spacing: -0.03em;
  color: rgb(var(--n-ink)); margin: 0 0 12px;
}
.n-legal-lede {
  font-size: 15px; line-height: 1.75; max-width: 68ch; margin: 0;
  color: rgba(var(--n-ink),0.72);
}
.n-legal-updated {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(var(--n-surf),0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.4);
}
.n-legal-updated time,
.n-legal-updated strong { color: rgba(var(--n-ink),0.75); font-weight: 400; }

/* On-page contents — these documents are long and people arrive
   looking for one specific clause. */
.n-legal-toc {
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.06);
  border-radius: 14px;
  padding: 16px 18px; margin-bottom: 28px;
}
.n-legal-toc-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.4); margin-bottom: 10px;
}
.n-legal-toc ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px;
  counter-reset: ntoc;
}
.n-legal-toc li { counter-increment: ntoc; }
.n-legal-toc a {
  display: block; padding: 5px 0;
  font-size: 13px; color: rgba(var(--n-ink),0.7);
  transition: color 160ms;
}
.n-legal-toc a::before {
  content: counter(ntoc) ".";
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: rgba(var(--n-ink),0.35);
  margin-right: 8px;
}
.n-legal-toc a:hover { color: rgb(var(--n-ink)); }

.n-legal-sec { margin-bottom: 30px; scroll-margin-top: 90px; }
.n-legal-sec h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  color: rgb(var(--n-ink)); margin: 0 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.n-legal-sec h2::before {
  content: ''; width: 4px; height: 16px; border-radius: 2px;
  background: oklch(0.85 0.25 130); flex: none;
}
.n-legal-sec h3 {
  font-size: 14px; font-weight: 600; color: rgba(var(--n-ink),0.9);
  margin: 20px 0 8px;
}
.n-legal-sec p {
  font-size: 14px; line-height: 1.8; max-width: 68ch;
  color: rgba(var(--n-ink),0.68); margin: 0 0 12px;
}
.n-legal-sec p:last-child { margin-bottom: 0; }
.n-legal-sec strong { color: rgba(var(--n-ink),0.92); font-weight: 600; }
.n-legal-sec a { color: oklch(0.8 0.16 200); }
.n-legal-sec a:hover { text-decoration: underline; }

.n-legal-list { margin: 0 0 12px; padding: 0 0 0 2px; list-style: none; max-width: 68ch; }
.n-legal-list li {
  position: relative; padding: 0 0 0 20px; margin-bottom: 9px;
  font-size: 14px; line-height: 1.75; color: rgba(var(--n-ink),0.68);
}
.n-legal-list li::before {
  content: ''; position: absolute; left: 2px; top: 10px;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(var(--n-ink),0.3);
}
.n-legal-list.num { counter-reset: nli; }
.n-legal-list.num li { padding-left: 26px; }
.n-legal-list.num li::before {
  counter-increment: nli; content: counter(nli);
  top: 0; left: 0; width: auto; height: auto; border-radius: 0;
  background: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: rgba(var(--n-ink),0.4);
}

/* Callout — the "this is the bit that matters" box (not affiliated,
   how to reach us, what we will not do). */
.n-legal-note {
  position: relative; overflow: hidden;
  background: rgba(var(--n-panel),0.6);
  border: 1px solid rgba(var(--n-surf),0.08);
  border-radius: 14px;
  padding: 16px 18px 16px 20px;
  margin: 0 0 20px;
}
.n-legal-note::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: oklch(0.85 0.25 130);
}
.n-legal-note.warn::before { background: oklch(0.75 0.19 60); }
.n-legal-note.info::before { background: oklch(0.7 0.18 254); }
.n-legal-note-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.5); margin-bottom: 8px;
}
.n-legal-note p { font-size: 13.5px; line-height: 1.75; color: rgba(var(--n-ink),0.72); margin: 0 0 10px; max-width: 68ch; }
.n-legal-note p:last-child { margin-bottom: 0; }

/* Key/value block — contact details, DMCA notice requirements. */
.n-legal-kv { display: grid; grid-template-columns: 190px 1fr; gap: 1px; margin: 0 0 16px; }
.n-legal-kv dt, .n-legal-kv dd {
  padding: 11px 14px; margin: 0;
  background: rgba(var(--n-panel),0.6);
  border-bottom: 1px solid rgba(var(--n-surf),0.05);
  font-size: 13.5px;
}
.n-legal-kv dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.45);
  display: flex; align-items: center;
}
.n-legal-kv dd { color: rgba(var(--n-ink),0.8); }
.n-legal-kv dd a { color: oklch(0.8 0.16 200); }
.n-legal-kv dd a:hover { text-decoration: underline; }

/* Sibling-document links at the foot of every legal page. */
.n-legal-more {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid rgba(var(--n-surf),0.06);
}
.n-legal-more a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(var(--n-surf),0.08);
  color: rgba(var(--n-ink),0.6);
  transition: color 160ms, border-color 160ms, background 160ms;
}
.n-legal-more a:hover {
  color: rgb(var(--n-ink));
  border-color: rgba(var(--n-surf),0.18);
  background: rgba(var(--n-surf),0.04);
}

@media (max-width: 700px) {
  .n-legal-title { font-size: 26px; }
  .n-legal-lede { font-size: 14px; }
  .n-legal-toc ol { grid-template-columns: 1fr; }
  .n-legal-kv { grid-template-columns: 1fr; gap: 0; }
  .n-legal-kv dt { border-bottom: 0; padding-bottom: 2px; }
  .n-legal-kv dd { padding-top: 4px; }
}

/* ---------- footer freshness stamp ----------
   Says when the data behind the site last moved. Sits in the legal
   row so it reads as site metadata, not as content. */
.n-footer-updated {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(var(--n-ink),0.4);
}
.n-footer-updated time { color: rgba(var(--n-ink),0.65); }
.n-footer-updated::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.85 0.25 130);
  box-shadow: 0 0 8px oklch(0.85 0.25 130 / 0.6);
  flex: none;
}
.n-footer-bottom { flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.n-footer-bottom a { color: rgba(var(--n-ink),0.7); }
.n-footer-bottom a:hover { color: rgb(var(--n-ink)); }