/* ────────────────────────────────────────────────────────────
   livetennis.io · Brand v6 (ATP Broadcast · 2026)
   Palette: Deep navy header + clean white body + cyan accent
            Burgundy LIVE pills, court yellow as partner CTA only
            Clay rust + grass green retained as supporting tones
   Type:    Geist (single family, multi-weight) + Geist Mono for tabular numerals
   Mood:    ATP Tour broadcast — confident, modern, screen-first
   ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@500&display=swap');

:root {
  /* ── Brand (ATP Navy) ── */
  --navy:       #0F1842;       /* ATP deep navy — header / dark surfaces */
  --navy-2:     #1A2253;       /* lifted navy for cards on navy */
  --navy-3:     #0A1133;       /* deeper navy for footer */
  --ink:        #0F1842;       /* navy ink — body type matches header */
  --ink-2:      #1A2253;
  --paper:      #FFFFFF;       /* white paper — brand surface */
  --paper-2:    #F5F7FA;       /* cool light grey — card on paper */
  --paper-3:    #FFFFFF;       /* lightest, for elevated cards */
  --line:       var(--ink);
  --line-soft:  rgba(15,24,66,0.10);
  --line-faint: rgba(15,24,66,0.05);

  /* Cyan — the brand accent for links, focus, partner-secondary CTAs */
  --accent-cyan:      #00B6CB;
  --accent-cyan-deep: #008CA0;
  --accent-cyan-soft: rgba(0,182,203,0.12);

  /* Court yellow — kept for the partner CTA button, slightly cooler tone */
  --ball:       #F2E64A;       /* court yellow — partner CTA accent only */
  --ball-deep:  #D6CB36;       /* hover / pressed */
  --ball-ink:   #0F1842;       /* navy text on ball */
  /* Legacy alias (so existing CSS keeps working) */
  --lime:       var(--ball);
  --lime-deep:  var(--ball-deep);
  --lime-ink:   var(--ball-ink);

  --clay:       #C26B3A;
  --clay-deep:  #A35528;
  --grass:      #3F7A2E;
  --grass-deep: #2F5E22;
  --hard:       var(--accent-cyan);
  --slam:       #B88A3A;

  --live:       #7A1A2C;       /* burgundy — ATP-style LIVE pill */
  --live-deep:  #5C1320;

  --text:       var(--ink);
  --text-dim:   #3D4A6B;
  --text-mute:  #6B7795;
  --text-faint: #9DA5BF;

  --bg:         var(--paper);
  --bg-card:    var(--paper-3);
  --bg-elev:    var(--paper-2);

  /* ── Type ── */
  /* Single family. Geist for everything. The old --serif name is kept as an alias
     so existing rules don't break, but it now points to Geist with a tighter, heavier
     setting used for display. Italic is removed everywhere it appeared. */
  --sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ── Geometry ── */
  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --container: 1320px;
  --shadow-1: 0 1px 2px rgba(14,15,12,0.04), 0 4px 10px rgba(14,15,12,0.04);
  --shadow-2: 0 10px 40px rgba(14,15,12,0.08), 0 2px 8px rgba(14,15,12,0.04);

  /* ── Motion ── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark mode — ATP deep navy */
[data-theme="dark"] {
  --bg:         var(--navy);
  --bg-card:    var(--navy-2);
  --bg-elev:    var(--navy-2);
  --paper:      var(--navy);
  --paper-2:    var(--navy-2);
  --paper-3:    var(--navy-2);
  --text:       #EAF1F8;
  --text-dim:   #B8C7DA;
  --text-mute:  #8AA0BC;
  --text-faint: #5E7493;
  --line:       #EAF1F8;
  --line-soft:  rgba(234,241,248,0.14);
  --line-faint: rgba(234,241,248,0.07);
  --lime-ink:   var(--ball-ink);
  --ball-ink:   var(--navy);
  /* Brighter coral burgundy for LIVE on dark */
  --live:       #E04E64;
  --live-deep:  #C03A50;
  --accent-cyan-soft: rgba(0,182,203,0.18);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ── Container ── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
@media (max-width: 720px) { .container { padding: 0 18px; } }

/* ──────────────────────────────────────────────
   HEADER · Editorial top bar
   ────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(15,24,66,0.96);                /* ATP navy bar */
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}
.site-header .logo { color: #fff; }
.site-header .logo .dot-io { color: rgba(255,255,255,0.65); }
.site-header .nav > a, .site-header .nav-trigger { color: rgba(255,255,255,0.78); }
.site-header .nav > a:hover, .site-header .nav-trigger:hover { color: #fff; background: rgba(255,255,255,0.08); }
.site-header .nav > a.active, .site-header .nav-trigger.active { background: var(--accent-cyan); color: #0F1842; }
[data-theme="dark"] .site-header { background: rgba(10,17,51,0.96); }
[data-theme="dark"] .site-header .nav > a.active,
[data-theme="dark"] .site-header .nav-trigger.active { background: var(--accent-cyan); color: #0F1842; }
/* Header buttons (theme toggle, country picker, drawer) read on navy */
.site-header .btn { color: #fff; border-color: rgba(255,255,255,0.18); }
.site-header .btn:hover { border-color: #fff; color: #fff; }
.site-header .btn-primary { color: var(--lime-ink); border-color: var(--lime); }
.site-header .btn-primary:hover { color: var(--lime-ink); }
.site-header .country-pick { color: #fff; }
.site-header .theme-toggle, .site-header .nav-toggle { color: #fff; }
.site-header .inner {
  display: flex; align-items: center; gap: 28px;
  height: 68px; max-width: var(--container); margin: 0 auto; padding: 0 28px;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 700; font-size: 22px;
  letter-spacing: -0.025em; }
.logo-mark {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--lime); position: relative;
  box-shadow: inset 0 0 0 1px rgba(14,15,12,0.1);
}
.logo-mark::before, .logo-mark::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--ink);
  clip-path: inset(45% 0 45% 0);
}
.logo-mark::after { transform: rotate(90deg); }
.logo .dot-io { font-style: normal; font-family: var(--sans); font-weight: 500; color: var(--text-mute); font-size: 14px; margin-left: 2px; letter-spacing: 0; }

.nav { display: flex; gap: 2px; flex: 1; margin-left: 12px; align-items: center; flex-wrap: nowrap; }
.nav > a, .nav-trigger {
  padding: 8px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--text-dim);
  transition: all 180ms var(--ease);
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.nav > a:hover, .nav-trigger:hover { color: var(--text); background: var(--line-soft); }
.nav > a.active, .nav-trigger.active { background: var(--ink); color: var(--paper); }
[data-theme="dark"] .nav > a.active, [data-theme="dark"] .nav-trigger.active { background: var(--paper); color: var(--ink); }
.nav-trigger .caret { font-size: 10px; opacity: 0.7; transition: transform 180ms var(--ease); }
.nav-group { position: relative; }
.nav-group:hover .nav-trigger .caret,
.nav-group.open .nav-trigger .caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 220px;
  background: var(--bg-card, var(--paper));
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 36px rgba(10, 22, 38, 0.12), 0 2px 6px rgba(10, 22, 38, 0.06);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms;
  z-index: 70;
}
[data-theme="dark"] .nav-menu { background: #131A26; border-color: rgba(255,255,255,0.08); box-shadow: 0 12px 36px rgba(0,0,0,0.5); }
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu,
.nav-group.open .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu a {
  display: block; padding: 9px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--text);
  transition: background 140ms var(--ease), color 140ms var(--ease);
  white-space: nowrap;
}
.nav-menu a:hover { background: var(--line-soft); color: var(--text); }
[data-theme="dark"] .nav-menu a:hover { background: rgba(255,255,255,0.06); }

.header-tools { display: flex; align-items: center; gap: 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: transparent; color: var(--text);
  border: 1px solid var(--line-soft);
  font-size: 13px; font-weight: 500;
  transition: all 180ms var(--ease);
  cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--ink); transform: translateY(-1px); }
[data-theme="dark"] .btn:hover { border-color: var(--paper); }
.btn-primary {
  background: var(--lime); color: var(--lime-ink); border-color: var(--lime);
  font-weight: 600;
}
.btn-primary:hover { background: var(--lime-deep); border-color: var(--lime-deep); color: var(--lime-ink); }
.btn-ghost { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-ghost:hover { background: var(--text-dim); border-color: var(--text-dim); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 14px 24px; font-size: 15px; }

.country-pick {
  font-family: var(--sans); font-size: 13px; font-weight: 500; }
.country-pick .flag { font-size: 16px; }

.theme-toggle {
  width: 38px; height: 38px; padding: 0;
  border-radius: 50%; display: grid; place-items: center;
}

/* ──────────────────────────────────────────────
   LIVE TICKER (v5 — light, paper-toned)
   ────────────────────────────────────────────── */
.ticker {
  background: var(--paper-2); color: var(--ink);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  overflow: hidden; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
  border-top: 1px solid var(--line-soft);
}
[data-theme="dark"] .ticker { background: rgba(255,255,255,0.04); color: var(--paper); border-color: rgba(255,255,255,0.08); }
.ticker-inner { display: flex; gap: 40px; padding: 10px 28px; animation: marquee 70s linear infinite; }
.ticker-item { letter-spacing: 0.02em; white-space: nowrap; }
.ticker-item strong { font-weight: 700; color: var(--text); }
[data-theme="dark"] .ticker-item strong { color: var(--paper); }
.ticker-item .ticker-meta { color: var(--text-mute); font-weight: 500; }
.ticker-item .live-dot {
  display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime);
  margin: 0 8px 2px 0;
  box-shadow: 0 0 8px var(--lime);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1);} 50% { opacity: 0.4; transform: scale(0.85);} }

/* ──────────────────────────────────────────────
   HERO · Editorial cover
   ────────────────────────────────────────────── */
.hero-editorial {
  position: relative; min-height: 560px;
  display: flex; align-items: center;
  padding: 80px 0 64px;
  overflow: hidden;
  background: #0A2240;
  color: var(--paper);
  isolation: isolate;
}
.hero-editorial .hero-bg,
.hero-editorial .bg {
  position: absolute; inset: 0; z-index: 0;
  display: block;
  max-width: var(--container);
  margin: 0 auto;
  left: 0; right: 0;
}
.hero-editorial .hero-bg img,
.hero-editorial .bg img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 75% 30%;
  opacity: 1;
  transform: scale(1.02);
  animation: heroZoom 24s ease-out forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero-editorial .hero-bg::after,
.hero-editorial .bg::after {
  content: ""; position: absolute; inset: 0;
  /* Desktop: player on the right, headline on the left.
     Strong navy wash on the left fading to clear on the right where the player is. */
  background:
    linear-gradient(90deg, rgba(8,28,52,0.88) 0%, rgba(8,28,52,0.72) 28%, rgba(8,28,52,0.30) 55%, rgba(8,28,52,0.05) 100%),
    linear-gradient(180deg, rgba(8,28,52,0.10) 0%, rgba(8,28,52,0.0) 40%, rgba(8,28,52,0.55) 100%);
}
.hero-editorial .container { position: relative; z-index: 1; width: 100%; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  color: var(--paper); opacity: 0.92;
  margin-bottom: 14px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(8px);
}
.hero-eyebrow .live-dot { background: var(--lime); width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 12px var(--lime); animation: pulse 1.6s ease-in-out infinite; }

.hero-editorial h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 14px; max-width: 22ch;
  color: var(--paper);
}
.hero-editorial h1 em { font-style: normal; color: var(--paper); font-weight: 700; }
.hero-editorial .lede {
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5;
  color: rgba(244,241,233,0.85); max-width: 56ch; margin: 0 0 18px;
  font-weight: 400;
}
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 0; }
.hero-cta-row .btn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: var(--paper); padding: 10px 20px; font-size: 14px; }
.hero-cta-row .btn:hover { background: rgba(255,255,255,0.15); border-color: var(--paper); }
.hero-cta-row .btn-primary { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); font-weight: 600; padding: 10px 20px; font-size: 14px; }
.hero-cta-row .btn-primary:hover { background: var(--lime-deep); border-color: var(--lime-deep); color: var(--lime-ink); }

/* hero-meta is the small stat strip we are now hiding on home — keeping styles
   in case it is reused elsewhere, but rebuilding it as quiet sentence-case. */
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 28px;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.18);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: rgba(234,241,248,0.72);
  text-transform: none; letter-spacing: 0;
}
.hero-meta div strong {
  display: block; color: var(--paper);
  font-family: var(--sans); font-size: 17px; font-weight: 600;
  text-transform: none; letter-spacing: -0.01em;
  margin-top: 4px;
}

/* ──────────────────────────────────────────────
   SECTION · Editorial frame
   ────────────────────────────────────────────── */
section { padding: 56px 0; position: relative; }
section + section { border-top: 1px solid var(--line-soft); }

.eyebrow {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-mute); margin: 0 0 12px;
  display: inline-block;
}
.eyebrow::before { content: none; }

.section-title {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 12px; max-width: 22ch; color: var(--text); }
.section-title em { font-style: normal; color: var(--text); font-weight: 700; }
.section-sub {
  font-size: 17px; color: var(--text-dim); max-width: 60ch;
  margin: 0 0 40px;
}

/* ──────────────────────────────────────────────
   MATCH LIST · Premium row design
   ────────────────────────────────────────────── */
.match-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line-soft);
}
.match-row {
  display: grid;
  grid-template-columns: 78px 44px 1fr auto auto;
  gap: 16px; align-items: center;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  transition: all 220ms var(--ease);
  position: relative;
}
.match-emblem-wrap { display: flex; align-items: center; justify-content: center; }
.match-emblem { width: 36px; height: 36px; display: block; flex-shrink: 0; }
.match-row:hover { background: rgba(212,255,61,0.07); padding-left: 18px; padding-right: 18px; margin-left: -14px; margin-right: -14px; border-radius: var(--radius); }
.match-row.featured::before {
  content: ""; position: absolute; left: -16px; top: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: var(--lime); transform: translateY(-50%);
  box-shadow: 0 0 12px var(--lime);
}
.match-time {
  font-family: var(--sans); font-variant-numeric: tabular-nums;
}
.match-time .time { font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; display: block; font-feature-settings: "tnum"; }
.match-time .tour-pill {
  display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 3px;
  margin-top: 6px; font-weight: 600; letter-spacing: 0.02em; font-family: var(--sans); }
.tour-pill.atp { background: rgba(37,99,235,0.12); color: var(--hard); }
.tour-pill.wta { background: rgba(196,90,45,0.12); color: var(--clay); }
.tour-pill.slam { background: rgba(200,162,74,0.16); color: #8B6F2A; }
[data-theme="dark"] .tour-pill.slam { color: var(--slam); }

.match-players {
  font-family: var(--sans); font-weight: 600; font-size: 18px;
  letter-spacing: -0.01em; line-height: 1.25; color: var(--text);
}
.match-players .vs { color: var(--text-mute); margin: 0 10px; font-size: 14px; font-weight: 500; }
.match-players .seed { color: var(--text-faint); font-size: 12px; margin-right: 6px; font-family: var(--sans); font-weight: 500; vertical-align: 1px; }
.match-players .flag { font-size: 18px; margin-right: 8px; vertical-align: -2px; }
.match-court {
  font-size: 12px; color: var(--text-mute); margin-top: 6px;
  font-family: var(--sans); letter-spacing: 0; font-weight: 500;
}

.match-watch { display: flex; gap: 8px; align-items: center; }
.watch-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; font-family: var(--sans);
  background: var(--ink); color: var(--paper); letter-spacing: 0;
  transition: all 180ms var(--ease);
}
.watch-pill:hover { background: var(--lime); color: var(--lime-ink); transform: translateY(-1px); }
[data-theme="dark"] .watch-pill { background: var(--paper); color: var(--ink); }
[data-theme="dark"] .watch-pill:hover { background: var(--lime); color: var(--lime-ink); }
.watch-pill .arr { font-size: 14px; }

/* ──────────────────────────────────────────────
   TOURNAMENT CARDS · Editorial grid
   ────────────────────────────────────────────── */
.tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
.tour-card {
  position: relative;
  background: var(--bg-card); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 28px;
  overflow: hidden;
  transition: all 320ms var(--ease);
  display: block;
}
.tour-card:hover {
  border-color: var(--ink); transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
[data-theme="dark"] .tour-card:hover { border-color: var(--paper); }
.tour-card .ornament {
  position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--lime); opacity: 0; transition: opacity 320ms var(--ease);
  filter: blur(40px);
}
.tour-card:hover .ornament { opacity: 0.35; }

.tour-card .badge {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--sans); font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.1em; background: var(--bg-elev); color: var(--text-dim); border: 1px solid var(--line-soft);
}
.tour-card .badge.live { background: rgba(122,26,44,0.10); color: var(--live); border-color: rgba(122,26,44,0.35); }
.tour-card .badge.live::before { content: "●"; margin-right: 4px; color: var(--live); animation: pulse 1.6s infinite; }
.tour-card .badge.upcoming { background: rgba(63,122,46,0.08); color: var(--grass-deep); border-color: rgba(63,122,46,0.35); }
.tour-card .badge.finished { background: rgba(15,27,45,0.04); color: var(--text-dim); border-color: var(--line-soft); }

/* Tour-card emblem header */
.tour-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; padding-right: 80px; }
@media (max-width: 720px) {
  .tour-card-head { padding-right: 70px; }
}
.tour-card-emblem {
  width: 56px; height: 56px; flex: 0 0 56px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(11,42,74,0.18));
}
.tour-card-head-text { flex: 1; min-width: 0; }
.tour-card.featured .tour-card-emblem { width: 72px; height: 72px; flex-basis: 72px; }

.tour-card h3 {
  font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 6px; padding-right: 0;
  overflow-wrap: anywhere; word-break: break-word;
}
@media (min-width: 721px) { .tour-card h3 { font-size: 26px; padding-right: 60px; } }
.tour-card .city {
  font-size: 13px; color: var(--text-dim); margin-bottom: 0;
  display: flex; align-items: center; gap: 6px;
}
.tour-card .city .flag { font-size: 16px; }
.tour-card .meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.tour-card .chip {
  font-size: 11px; font-family: var(--sans); font-weight: 500; padding: 4px 10px; border-radius: 999px;
  background: transparent; color: var(--text-dim); border: 1px solid var(--line-soft);
  letter-spacing: 0; font-weight: 500;
}
.tour-card .chip.surface-clay { color: var(--clay); border-color: rgba(196,90,45,0.35); background: rgba(196,90,45,0.06); }
.tour-card .chip.surface-grass { color: var(--grass); border-color: rgba(90,140,61,0.35); background: rgba(90,140,61,0.06); }
.tour-card .chip.surface-hard { color: var(--hard); border-color: rgba(37,99,235,0.35); background: rgba(37,99,235,0.06); }

.tour-card .dates {
  font-family: var(--sans); font-size: 13px; color: var(--text-mute); font-weight: 500;
  letter-spacing: 0.04em; padding-top: 16px; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.tour-card .dates .arr { font-size: 18px; transition: transform 220ms var(--ease); }
.tour-card:hover .dates .arr { transform: translateX(4px); color: var(--ink); }

/* Featured tournament card — bigger, cream paper with accent stripe */
.tour-card.featured {
  grid-column: span 2; min-height: 240px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  padding-left: 36px;
  box-shadow: var(--shadow-1, 0 1px 3px rgba(15,27,45,0.06));
}
.tour-card.featured::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, var(--ball) 0%, var(--clay) 60%, var(--grass) 100%);
}
.tour-card.featured::after {
  content: ""; position: absolute; right: -120px; bottom: -120px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(235,225,80,0.18) 0%, rgba(235,225,80,0) 70%);
  pointer-events: none;
}
.tour-card.featured h3 { font-size: 44px; padding-right: 0; color: var(--ink); }
.tour-card.featured .city { color: var(--text-mute); }
.tour-card.featured .chip { color: var(--text-dim); border-color: var(--line-soft); }
.tour-card.featured .dates { color: var(--text-mute); border-color: var(--line-soft); }
.tour-card.featured .badge.live { background: var(--live); color: #fff; border-color: var(--live); }
.tour-card.featured .badge.live::before { color: #fff; }
[data-theme="dark"] .tour-card.featured { background: rgba(255,255,255,0.03); color: var(--paper); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .tour-card.featured h3 { color: var(--paper); }

@media (max-width: 720px) {
  .tour-card.featured { grid-column: span 1; }
  .tour-card.featured h3 { font-size: 30px; }
}

/* ──────────────────────────────────────────────
   WEEK STRIP
   ────────────────────────────────────────────── */
.week-strip {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 4px 0 10px; scrollbar-width: thin;
}
.day-cell {
  min-width: 96px; padding: 16px 14px;
  background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  text-align: center; font-family: var(--sans); font-size: 11px; font-weight: 500;
  color: var(--text-mute); transition: all 220ms var(--ease);
  flex-shrink: 0;
}
.day-cell:hover { transform: translateY(-2px); border-color: var(--ink); }
[data-theme="dark"] .day-cell:hover { border-color: var(--paper); }
.day-cell.today { background: var(--ink); border-color: var(--ink); color: var(--lime); }
[data-theme="dark"] .day-cell.today { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.day-cell .day-name { font-size: 11px; font-weight: 600; color: var(--text-mute); }
.day-cell .day-num {
  font-family: var(--sans); font-weight: 700;
  font-size: 28px; color: var(--text); margin: 4px 0 4px; letter-spacing: -0.02em;
}
.day-cell.today .day-num { color: var(--lime); }
[data-theme="dark"] .day-cell.today .day-num { color: var(--lime-ink); }
.day-cell .day-count { font-size: 11px; color: var(--text-faint); font-weight: 500; }
.day-cell.today .day-count { color: rgba(212,255,61,0.7); }
[data-theme="dark"] .day-cell.today .day-count { color: rgba(14,15,12,0.7); }

/* ──────────────────────────────────────────────
   WATCH BOX · Country broadcast panel
   ────────────────────────────────────────────── */
.watch-box {
  background: var(--bg-card); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 20px;
  position: sticky; top: 88px;
}
.watch-box.invert {
  background: var(--paper-2); color: var(--ink); border: 1px solid var(--line);
  border-left: 4px solid var(--grass);
}
.watch-box .where {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 11px; color: var(--text-mute); font-weight: 500;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  letter-spacing: 0.02em; text-transform: uppercase;
}
.watch-box.invert .where { color: var(--text-mute); border-color: var(--line-soft); }
.watch-box .where .flag { font-size: 18px; }
.watch-box .where strong { color: var(--text); font-family: var(--sans); font-size: 14px; text-transform: none; letter-spacing: -0.01em; font-weight: 700; }
.watch-box.invert .where strong { color: var(--ink); }

.watch-list { display: flex; flex-direction: column; gap: 4px; }
.watch-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; background: var(--bg-elev);
  border: 1px solid var(--line-soft); border-radius: 8px;
  transition: all 160ms var(--ease);
}
.watch-item:hover { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); transform: translateX(2px); }
.watch-item:hover .type { color: var(--lime-ink); opacity: 0.7; }
.watch-box.invert .watch-item { background: var(--paper); border-color: var(--line-soft); color: var(--ink); }
.watch-box.invert .watch-item:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.watch-box.invert .watch-item:hover .type { color: rgba(255,255,255,0.65); }
.watch-item .name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.watch-item .type { font-size: 11px; color: var(--text-mute); font-weight: 500; margin-top: 1px; }
.watch-item .arr { font-size: 14px; opacity: 0.6; }

.watch-box .switch-region {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-family: var(--sans); font-size: 11px; color: var(--text-mute); font-weight: 500;
}
.watch-box .switch-region a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
[data-theme="dark"] .watch-box .switch-region a { color: var(--paper); border-color: var(--paper); }
.watch-box.invert .switch-region { color: var(--text-mute); border-color: var(--line-soft); }
.watch-box.invert .switch-region a { color: var(--ink); border-color: var(--ink); }
[data-theme="dark"] .watch-box.invert { background: rgba(255,255,255,0.03); color: var(--paper); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .watch-box.invert .where strong,
[data-theme="dark"] .watch-box.invert .watch-item { color: var(--paper); }
[data-theme="dark"] .watch-box.invert .watch-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .watch-box.invert .switch-region a { color: var(--paper); border-color: var(--paper); }

/* ── Watch box: primary partner CTA + disclosure ── */
.watch-box .watch-primary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 8px 0 12px;
  background: linear-gradient(135deg, var(--partner-accent, #00e676) 0%, color-mix(in srgb, var(--partner-accent, #00e676) 70%, #0a1626) 100%);
  color: #0a1626;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(10,22,38,0.12);
  box-shadow: 0 4px 14px rgba(10,22,38,0.10);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
}
.watch-box .watch-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(10,22,38,0.18);
}
.watch-box .watch-primary-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: rgba(10,22,38,0.92);
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  flex-shrink: 0;
}
.watch-box .watch-primary-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.watch-box .watch-primary-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 0.78;
}
.watch-box .watch-primary-name {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.watch-box .watch-primary-sub {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.75;
  line-height: 1.3;
}
.watch-box .watch-primary-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(10,22,38,0.92);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.watch-box .watch-primary-cta .arr { font-size: 13px; }
.watch-box .watch-secondary-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-mute);
  margin: 6px 0 6px;
  opacity: 0.75;
}
.watch-box .watch-disclosure {
  font-size: 11px;
  color: var(--text-mute);
  padding: 10px 0 0;
  margin-top: 10px;
  line-height: 1.5;
  border-top: 1px solid rgba(10,22,38,0.06);
}
.watch-box .watch-disclosure strong { color: var(--text); }
.watch-box .sponsored-tag {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 4px;
  background: rgba(10,22,38,0.06);
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
[data-theme="dark"] .watch-box .watch-disclosure { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .watch-box .sponsored-tag { background: rgba(255,255,255,0.10); color: var(--paper); }
[data-theme="dark"] .watch-box .watch-secondary-label { color: rgba(255,255,255,0.55); }

/* Mobile: stack the primary CTA so it stays prominent */
@media (max-width: 480px) {
  .watch-box .watch-primary {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 10px 12px;
    padding: 12px 14px;
  }
  .watch-box .watch-primary-mark { grid-row: 1 / span 2; }
  .watch-box .watch-primary-cta {
    grid-column: 2;
    justify-self: start;
    padding: 6px 12px;
  }
  .watch-box .watch-primary-name { font-size: 15px; }
  .watch-box .watch-primary-sub { font-size: 11px; }
}

/* ──────────────────────────────────────────────
   STATS BAR
   ────────────────────────────────────────────── */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat-cell { background: var(--bg-card); padding: 22px 24px; }
.stat-cell .label {
  font-family: var(--sans); font-size: 12px; color: var(--text-mute); font-weight: 500; margin-bottom: 8px;
}
.stat-cell .value {
  font-family: var(--sans); font-weight: 700;
  font-size: 26px; line-height: 1.1; letter-spacing: -0.02em;
}

/* ──────────────────────────────────────────────
   COUNTRY GRID · Where-to-watch hub
   ────────────────────────────────────────────── */
.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.country-cell {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: var(--bg-card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); transition: all 220ms var(--ease);
}
.country-cell:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
[data-theme="dark"] .country-cell:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.country-cell .flag { font-size: 28px; }
.country-cell .name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.country-cell .sub { font-size: 13px; color: var(--text-mute); font-weight: 500; }
.country-cell:hover .sub { color: rgba(244,241,233,0.7); }
[data-theme="dark"] .country-cell:hover .sub { color: rgba(14,15,12,0.7); }

/* ──────────────────────────────────────────────
   TABLE · Editorial
   ────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.tbl th { color: var(--text-mute); font-family: var(--sans); font-size: 12px; font-weight: 600; }
.tbl tr:hover td { background: var(--bg-elev); }

/* ──────────────────────────────────────────────
   BREADCRUMBS
   ────────────────────────────────────────────── */
.crumbs { font-family: var(--sans); font-size: 13px; color: var(--text-mute); padding: 28px 0 0; font-weight: 500; }
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--lime-deep); }
.crumbs .sep { margin: 0 10px; opacity: 0.4; }

/* ──────────────────────────────────────────────
   PAGE HEADER (non-hero pages)
   ────────────────────────────────────────────── */
.page-header { padding: 28px 0 22px; border-bottom: 1px solid var(--line-soft); }
.page-header .eyebrow { margin-bottom: 10px; }
.page-header h1 {
  font-family: var(--sans); font-weight: 700; font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 10px; max-width: 24ch; color: var(--text);
}
.page-header h1 em { font-style: normal; color: var(--text); font-weight: 700; }
.page-header .lede { font-size: 16px; color: var(--text-dim); max-width: 60ch; margin: 0; line-height: 1.5; }

/* ──────────────────────────────────────────────
   LAYOUT
   ────────────────────────────────────────────── */
.layout-2col { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: flex-start; }
@media (max-width: 980px) {
  .layout-2col { grid-template-columns: 1fr; gap: 40px; }
  .watch-box { position: static; }
  /* .nav hides on mobile via the dedicated nav rules below */
  .match-row:not(.v3) { grid-template-columns: 70px 36px 1fr; }
  .match-row:not(.v3) .match-watch { grid-column: 1 / -1; padding-top: 8px; }
  .hero-editorial { min-height: 380px; padding: 48px 0 32px; }
}

/* ──────────────────────────────────────────────
   CARD · Generic editorial
   ────────────────────────────────────────────── */
.card {
  background: var(--bg-card); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 28px;
}
.card h3 {
  font-family: var(--sans); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; margin: 0 0 12px;
}
.card p { color: var(--text-dim); margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.card p:last-child { margin-bottom: 0; }
.card.invert { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card.invert p { color: rgba(244,241,233,0.75); }

/* FAQ — accordion-like cards stack */
.faq-stack .card { margin-bottom: 12px; }
.faq-stack .card strong { font-family: var(--sans); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; }

/* ──────────────────────────────────────────────
   FEATURE STRIP · "For the global tennis fan"
   ────────────────────────────────────────────── */
.feature-strip {
  background: var(--lime); color: var(--lime-ink);
  padding: 80px 0; position: relative; overflow: hidden;
}
.feature-strip h2 {
  font-family: var(--sans); font-weight: 700; font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -0.03em;
  margin: 0 0 48px; max-width: 22ch;
}
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.feature-item .num {
  font-family: var(--sans); font-weight: 700;
  font-size: 56px; line-height: 1; letter-spacing: -0.03em; margin-bottom: 14px;
  display: block;
}
.feature-item h3 {
  font-family: var(--sans); font-weight: 600; font-size: 18px;
  letter-spacing: -0.01em; margin: 0 0 10px;
}
.feature-item p { font-size: 15px; line-height: 1.55; color: rgba(14,15,12,0.75); margin: 0; }

/* ──────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────── */
.site-footer {
  background: var(--ink); color: var(--paper);
  padding: 80px 0 36px;
  margin-top: 80px;
}
[data-theme="dark"] .site-footer { background: var(--ink-2); border-top: 1px solid var(--line-soft); }
.footer-headline {
  font-family: var(--sans); font-weight: 700; font-size: clamp(40px, 6vw, 80px); line-height: 0.98; letter-spacing: -0.03em;
  margin: 0 0 56px; max-width: 16ch;
}
.footer-headline em { font-style: normal; color: var(--lime); font-weight: 600; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; padding-bottom: 56px; border-bottom: 1px solid rgba(244,241,233,0.1); }
.footer-col h4 { font-family: var(--sans); font-size: 13px; color: rgba(234,241,248,0.6); margin: 0 0 16px; font-weight: 600; }
.footer-col a { display: block; padding: 6px 0; font-size: 14px; color: rgba(244,241,233,0.85); transition: color 180ms var(--ease); }
.footer-col a:hover { color: var(--lime); }
.footer-bottom {
  margin-top: 28px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: rgba(234,241,248,0.55); font-family: var(--sans); font-weight: 500;
}

/* ──────────────────────────────────────────────
   UTILITIES
   ────────────────────────────────────────────── */
.muted { color: var(--text-mute); }
.dim { color: var(--text-dim); }
.divider { height: 1px; background: var(--line-soft); margin: 28px 0; border: 0; }
.row-flex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.serif { font-family: var(--sans); }
.italic { }
.mono { font-family: var(--mono); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px;
}

/* ──────────────────────────────────────────────
   FLAT-URL ADDITIONS (today-block / today-tname / live-dot-inline)
   ────────────────────────────────────────────── */
.today-block { padding: 0 0 12px; margin-bottom: 28px; }
.today-block + .today-block { margin-top: 8px; }
.today-tname {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  line-height: 1.0;
  color: var(--ink);
}
.live-dot-inline {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 4px rgba(212, 255, 61, 0.18);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(212, 255, 61, 0.18); }
  50% { box-shadow: 0 0 0 7px rgba(212, 255, 61, 0.0); }
}

/* ──────────────────────────────────────────────
   COURT BLUE v4.1 — additions for filters,
   preview pages, today-block-head, match-row tidy
   ────────────────────────────────────────────── */

/* Footer tag (was inline-styled mono uppercase) */
.footer-tag {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}

/* Today-block head: title + small "preview" link side-by-side */
.today-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.chip-link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
  white-space: nowrap;
}
.chip-link:hover {
  background: var(--ball, var(--lime));
  color: var(--ball-ink, #0A1626);
  border-color: var(--ball, var(--lime));
}

/* Match-row clean hierarchy */
.match-row .match-mid { min-width: 0; }
.match-players .pname { font-weight: 600; }
.match-court .sep { color: var(--text-faint); margin: 0 6px; }
.match-court .match-tour-name { color: var(--text); font-weight: 500; }
.match-court .match-court-name { color: var(--text-mute); }

/* Tour-card improvements */
.tour-card .card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
}
.tour-card .card-foot .dates { color: var(--text-mute); }
.tour-card .card-foot .preview-cta {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tour-card .card-foot .preview-cta .arr { transition: transform 0.15s; }
.tour-card:hover .card-foot .preview-cta .arr { transform: translateX(3px); }

/* Filter bar */
.filter-bar {
  background: var(--paper-2, #F2F4F7);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-theme="dark"] .filter-bar {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
  min-width: 64px;
  text-transform: none;
  letter-spacing: 0;
}
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s;
  text-transform: none;
  letter-spacing: 0;
}
.chip-btn:hover {
  border-color: var(--text);
}
.chip-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
[data-theme="dark"] .chip-btn.active {
  background: var(--ball, var(--lime));
  color: var(--ball-ink, #0A1626);
  border-color: var(--ball, var(--lime));
}
.filter-meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-mute);
  margin-top: 4px;
}
.filter-empty {
  text-align: center;
  padding: 60px 20px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text-mute);
}
.tour-card.hidden { display: none; }

/* Preview index grid */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.preview-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-3, #FFFFFF);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 18px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: all 0.15s;
}
[data-theme="dark"] .preview-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.preview-card:hover {
  border-color: var(--text);
  transform: translateY(-2px);
}
.preview-card .badge {
  position: absolute;
  top: 16px;
  right: 16px;
}
.preview-card-body { flex: 1; }
.preview-card h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  padding-right: 80px;
  color: var(--text);
}
.preview-card-meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.preview-card-meta .flag { font-size: 14px; }
.preview-card-snippet {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.5;
  margin: 0 0 16px;
}
.preview-card-cta {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.preview-card-cta .arr { transition: transform 0.15s; }
.preview-card:hover .preview-card-cta .arr { transform: translateX(3px); }

/* Long-form preview body */
.preview-body {
  max-width: 720px;
  font-family: var(--sans);
  color: var(--text);
}
.preview-body .lede {
  font-size: 22px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.preview-body p {
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 18px;
  color: var(--text);
}
.preview-h2 {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 36px 0 14px;
  color: var(--text);
}
.preview-body strong { color: var(--text); font-weight: 600; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .filter-row { gap: 8px; }
  .filter-label { min-width: 50px; font-size: 12px; }
  .chip-btn { font-size: 12px; padding: 5px 10px; }
  .preview-body .lede { font-size: 19px; }
  .preview-body p { font-size: 16px; }
  .preview-h2 { font-size: 22px; }
}

/* ──────────────────────────────────────────────
   UX UPGRADES — country picker, match status, inline broadcasters
   ────────────────────────────────────────────── */

/* Country popover (replaces prompt() picker) */
.country-popover {
  z-index: 9999; min-width: 280px; max-height: 70vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 60px -10px rgba(11,42,74,0.35), 0 4px 12px rgba(11,42,74,0.10);
  padding: 6px;
}
[data-theme="dark"] .country-popover { background: var(--ink); border-color: rgba(255,255,255,0.12); }
.cp-head {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-mute); padding: 10px 12px 8px;
}
.cp-row {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px; border: 0; background: transparent;
  font-family: var(--sans); font-size: 14px; color: var(--text);
  border-radius: 8px; cursor: pointer; text-align: left;
}
.cp-row:hover { background: var(--paper-2); }
[data-theme="dark"] .cp-row:hover { background: rgba(255,255,255,0.06); }
.cp-flag { font-size: 18px; line-height: 1; }
.cp-name { font-weight: 500; }
.cp-code { font-family: var(--sans); font-size: 11px; color: var(--text-mute); letter-spacing: 0.04em; }

/* Page header with emblem (tournament & preview pages) */
.page-header-with-emblem {
  display: grid; grid-template-columns: 96px 1fr; gap: 24px;
  align-items: start;
}
.page-header-emblem {
  width: 96px; height: 96px; display: block;
  filter: drop-shadow(0 4px 14px rgba(11,42,74,0.22));
}
.page-header-text { min-width: 0; }
@media (max-width: 720px) {
  .page-header-with-emblem {
    grid-template-columns: 64px 1fr; gap: 14px;
  }
  .page-header-emblem { width: 64px; height: 64px; }
}

/* Match-row layout v2 — adds status indicator + inline broadcaster */
.match-row {
  grid-template-columns: 90px 44px 1fr auto;
}
.match-row .match-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); margin-top: 6px; min-height: 18px;
}
.match-row .match-status.live {
  color: var(--ball-deep); font-weight: 700;
}
[data-theme="dark"] .match-row .match-status.live { color: var(--ball); }
.match-row .match-status.live .live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ball-deep);
  animation: pulse 1.6s ease-in-out infinite;
}
[data-theme="dark"] .match-row .match-status.live .live-dot { background: var(--ball); box-shadow: 0 0 10px var(--ball); }
.match-row .match-status.next { color: var(--hard); }
.match-row .match-status.done { color: var(--text-faint); }

.match-row.is-live { background: linear-gradient(90deg, rgba(232,249,78,0.10), transparent 60%); }
.match-row.is-live::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--ball-deep); border-radius: 2px;
}
[data-theme="dark"] .match-row.is-live::before { background: var(--ball); }
.match-row.is-done { opacity: 0.55; }
.match-row.is-done .match-bcast { display: none; }

/* Tour pill is now inline with the court line, not stacked under the time */
.match-row .match-court .tour-pill {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 3px; margin-right: 8px; letter-spacing: 0.04em;
  vertical-align: 1px;
}

/* Inline broadcaster on the right of each row */
.match-row .match-watch {
  display: flex; align-items: center; gap: 14px;
}
.match-bcast {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-family: var(--sans); line-height: 1.2;
}
.match-bcast-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-faint);
}
.match-bcast strong {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.match-arr {
  color: var(--text-faint); font-size: 16px; transition: transform 200ms var(--ease), color 200ms var(--ease);
}
.match-row:hover .match-arr { color: var(--text); transform: translateX(3px); }

/* v5 small "Watch <Partner>" pill on each match row */
.mr-watch-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  color: var(--text-mute);
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  padding: 5px 10px; border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: border-color 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease);
}
.mr-watch-pill strong {
  font-weight: 700; color: var(--ink); letter-spacing: 0;
}
.match-row:hover .mr-watch-pill {
  border-color: var(--ink); color: var(--ink); background: var(--paper);
}
[data-theme="dark"] .mr-watch-pill { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .mr-watch-pill strong { color: var(--paper); }
.match-row.is-done .mr-watch-pill { display: none; }

@media (max-width: 720px) {
  .match-row:not(.v3) { grid-template-columns: 70px 36px 1fr; padding: 14px 4px; }
  .match-row:not(.v3) .match-watch { grid-column: 1 / -1; padding-top: 6px; justify-content: flex-start; }
  .match-bcast { flex-direction: row; align-items: center; gap: 6px; }
  .match-bcast-label { font-size: 11px; }
  .match-bcast strong { font-size: 13px; }
  .match-row:not(.v3) .match-arr { display: none; }
  .match-row:not(.v3) .match-players { font-size: 16px; }
  .match-row:not(.v3) .match-court { font-size: 11px; }
}

/* Sticky watch box on desktop */
@media (min-width: 981px) {
  .layout-2col > div:nth-child(2) > .watch-box,
  .layout-2col > .watch-box-col > .watch-box {
    position: sticky; top: 88px;
  }
}

/* Make watch boxes appear ABOVE matches on mobile via order */
@media (max-width: 980px) {
  .layout-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .layout-2col > .watch-box-col { order: -1; min-width: 0; }
  .layout-2col > .match-list,
  .layout-2col > div:not(.watch-box-col) { min-width: 0; }
}

/* ──────────────────────────────────────────────
   MOBILE UX v3 · Readable & fast on phones
   ────────────────────────────────────────────── */

/* Global mobile overflow guard */
html, body { overflow-x: hidden; }
* { min-width: 0; }

@media (max-width: 720px) {
  /* Tighter container padding so content gets more horizontal room */
  .container { padding-left: 16px; padding-right: 16px; }
  section { padding: 36px 0; }

  /* HERO — portrait composition, headline anchored at top.
     The 9:16 photo has the player at center-bottom and empty navy court at top,
     so we show the photo full-bleed and lay text over the upper third. */
  .hero-editorial {
    min-height: 0;
    height: 78vh; max-height: 640px;
    padding: 22px 0 28px;
    align-items: flex-start;
  }
  .hero-editorial .hero-bg img,
  .hero-editorial .bg img { object-position: 50% 35%; }
  .hero-editorial .hero-bg::after,
  .hero-editorial .bg::after {
    /* Mobile: text at the top, player at the bottom. Strong navy wash at top,
       fading to clear in the middle where the player is. */
    background:
      linear-gradient(180deg, rgba(8,28,52,0.92) 0%, rgba(8,28,52,0.78) 22%, rgba(8,28,52,0.35) 42%, rgba(8,28,52,0.0) 60%, rgba(8,28,52,0.30) 100%);
  }
  .hero-editorial h1 {
    font-size: clamp(34px, 9.5vw, 46px);
    line-height: 1.02;
    max-width: 14ch;
    margin-bottom: 10px;
  }
  .hero-editorial .lede {
    font-size: 14px; line-height: 1.45;
    max-width: 36ch;
    margin-bottom: 16px;
  }
  .hero-eyebrow {
    font-size: 11px; padding: 4px 10px; margin-bottom: 12px;
  }
  .hero-cta-row { gap: 8px; }
  .hero-cta-row .btn,
  .hero-cta-row .btn-primary {
    padding: 12px 18px; font-size: 14px;
  }

  /* Page header */
  .page-header { padding: 18px 0 14px; }
  .page-header h1 { font-size: 28px; line-height: 1.1; }
  .page-header .lede { font-size: 14px; }

  /* Section titles */
  .section-title, h2 { font-size: 22px; line-height: 1.15; }
  .eyebrow { font-size: 11px; letter-spacing: 0.08em; }

  /* MATCH ROW — radically simpler on mobile.
     2-row layout: top = time + players + arrow; bottom = tour pill + court + bcast.
     v3 rows have their own grid (defined later) — DO NOT clobber them here. */
  .match-list { border-top: 1px solid var(--line-soft); }
  .match-row:not(.v3) {
    display: grid !important;
    grid-template-columns: 56px 32px minmax(0, 1fr) 18px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "time  emblem players  arr"
      "time  emblem meta     arr" !important;
    column-gap: 10px;
    row-gap: 4px;
    padding: 14px 4px !important;
    border-bottom: 1px solid var(--line-soft);
    align-items: center;
    min-height: 60px;
  }
  .match-emblem-wrap { grid-area: emblem; align-self: center; }
  .match-emblem { width: 30px !important; height: 30px !important; }
  .match-row:hover {
    background: transparent;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin: 0;
  }
  .match-time {
    grid-area: time;
    display: flex; flex-direction: column; gap: 2px;
    align-self: center;
  }
  .match-time .time {
    font-size: 16px; font-weight: 700; line-height: 1.1;
    color: var(--text); letter-spacing: -0.01em;
  }
  .match-row .match-status {
    margin-top: 0; min-height: 0;
    font-size: 9px; letter-spacing: 0.06em; font-weight: 700;
  }
  .match-row .match-status:empty { display: none; }
  .match-mid {
    grid-area: players;
    min-width: 0; align-self: center;
  }
  .match-players {
    font-size: 14px !important; font-weight: 600; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    color: var(--text);
  }
  .match-players .vs { margin: 0 5px; font-size: 12px; color: var(--text-mute); }
  .match-players .seed { font-size: 10px; margin-right: 2px; }
  .match-players .flag { font-size: 13px; margin-right: 3px; }
  .match-court {
    grid-area: meta;
    font-size: 11px; line-height: 1.3; margin-top: 0;
    color: var(--text-mute);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
  }
  .match-court .tour-pill {
    font-size: 9px; padding: 1px 5px; margin: 0; vertical-align: baseline;
    flex: 0 0 auto;
  }
  .match-court .match-tour-name { display: none; }
  .match-court .sep:first-of-type { display: none; }
  .match-court > span:not(.tour-pill):not(.sep) { overflow: hidden; text-overflow: ellipsis; }

  /* Hide broadcaster on mobile match rows (it's in the watch box already) */
  .match-watch { display: none !important; }
  .match-arr {
    grid-area: arr;
    display: flex !important; align-items: center; justify-content: flex-end;
    color: var(--text-faint); font-size: 16px;
    align-self: center;
  }
  .match-row.featured::before { left: -8px; width: 4px; height: 4px; }

  /* WEEK STRIP — let it scroll horizontally cleanly with snap */
  .week-strip {
    margin: 0 -16px; padding-left: 16px; padding-right: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .week-strip::-webkit-scrollbar { display: none; }
  .day-cell {
    min-width: 64px !important; padding: 12px 8px;
    scroll-snap-align: start;
  }
  .day-cell .day-num { font-size: 22px; }
  .day-cell .day-name, .day-cell .day-count { font-size: 10px; }

  /* TICKER — kill it on mobile, it adds noise */
  .ticker { display: none; }

  /* WATCH BOX — condensed on mobile */
  .watch-box {
    padding: 16px;
    border-radius: 12px;
  }
  .watch-box .wb-head { font-size: 12px; }
  .watch-box .wb-country-name { font-size: 16px; }
  .watch-box .wb-row { padding: 10px 12px; }
  .watch-box .wb-row strong { font-size: 14px; }

  /* TOURNAMENT CARDS — single column, denser */
  .tournament-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .tournament-card { padding: 16px; }
  .tournament-card h3, .tournament-card .t-name { font-size: 17px; }

  /* COUNTRY GRID — 2 columns, denser */
  .country-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .country-card { padding: 10px 12px; }
  .country-card .cc-name { font-size: 13px; }
  .country-card .cc-tours { font-size: 10px; }

  /* HEADER — tighter on mobile */
  .site-header { padding: 10px 0; }
  .logo { font-size: 16px; }
  .header-actions { gap: 6px; }
  .country-pill { font-size: 12px; padding: 6px 10px; }

  /* FOOTER — single column */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px; }
  .footer-col h4 { font-size: 13px; }
  .footer-col a { font-size: 13px; padding: 4px 0; }

  /* Bigger tap targets everywhere */
  a, button, .btn { min-height: 40px; }
  .match-row:not(.v3) { min-height: 64px; }

  /* Filter chips wrap nicely on mobile */
  .filter-bar { gap: 6px; }
  .chip { font-size: 12px; padding: 6px 10px; }
}

@media (max-width: 380px) {
  /* Legacy v1/v2 match-row only — v3 has its own 4-col grid + areas rule */
  .match-row:not(.v3) { grid-template-columns: 50px 1fr 18px !important; }
  .match-time .time { font-size: 16px; }
  .match-players { font-size: 14px !important; }
  .country-grid { grid-template-columns: 1fr !important; }
}

/* PERFORMANCE — defer rendering of off-screen sections (only really long ones) */
.country-grid, .tournament-grid, footer.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 400px;
}

/* ───── Rankings page ───── */
.rankings-tabs {
  display: flex;
  gap: 8px;
  margin: 24px 0 20px;
  flex-wrap: wrap;
}
.rt-tab {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s;
}
.rt-tab:hover { border-color: var(--text); }
.rt-tab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
[data-theme="dark"] .rt-tab.active {
  background: var(--ball, var(--lime));
  color: var(--ball-ink, #0A1626);
  border-color: var(--ball, var(--lime));
}
.rankings-pane.hidden { display: none; }
.rankings-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14px;
  margin: 8px 0 24px;
}
.rankings-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6B7280);
  border-bottom: 2px solid var(--line);
  padding: 10px 12px;
}
.rankings-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.rankings-table tbody tr:hover { background: rgba(11,42,74,0.03); }
[data-theme="dark"] .rankings-table tbody tr:hover { background: rgba(255,255,255,0.04); }
.rankings-table .r-rank {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 56px;
  font-size: 16px;
}
.rankings-table .r-mv { width: 28px; text-align: center; }
.rankings-table .r-name { font-weight: 500; }
.rankings-table .r-name .flag { display: inline-block; margin-right: 8px; }
.rankings-table .r-country { color: var(--text-muted, #6B7280); font-size: 13px; }
.rankings-table .r-points {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.mv { font-size: 12px; font-weight: 700; }
.mv.up   { color: #2E7D32; }
.mv.dn   { color: #C62828; }
.mv.same { color: var(--text-muted, #9CA3AF); }
[data-theme="dark"] .mv.up { color: #66BB6A; }
[data-theme="dark"] .mv.dn { color: #EF5350; }
.rankings-note {
  font-size: 13px;
  color: var(--text-muted, #6B7280);
  margin-top: 16px;
  padding: 16px;
  border-left: 3px solid var(--line);
  background: rgba(11,42,74,0.02);
}
[data-theme="dark"] .rankings-note { background: rgba(255,255,255,0.02); }
@media (max-width: 640px) {
  .rankings-table { font-size: 13px; }
  .rankings-table thead th { padding: 8px 6px; font-size: 11px; }
  .rankings-table tbody td { padding: 10px 6px; }
  .rankings-table .r-country,
  .rankings-table thead th:nth-child(4) { display: none; }
}

/* Rankings updated date */
.rankings-meta {
  margin-top: 12px;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #6B7280);
  display: flex;
  align-items: center;
  gap: 10px;
}
.rankings-meta::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ball, #E8F94E);
  box-shadow: 0 0 0 3px rgba(232,249,78,0.25);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 3px rgba(232,249,78,0.25); }
  50%     { box-shadow: 0 0 0 6px rgba(232,249,78,0.10); }
}

/* ───── Streaming partner CTA (Stake / bet365) ───── */
.partner-card {
  --partner-accent: #1FD082;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #0A1626 0%, #0B2A4A 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  text-decoration: none;
  color: var(--paper, #FAFBFC);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.partner-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--partner-accent) 18%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.partner-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.partner-card .partner-mark {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--partner-accent);
  line-height: 1;
  padding: 14px 20px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}
.partner-card .partner-body { min-width: 0; }
.partner-card .partner-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--partner-accent);
  margin-bottom: 6px;
}
.partner-card .partner-headline {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.partner-card .partner-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}
.partner-card .partner-cta {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: #0A1626;
  background: var(--partner-accent);
  padding: 12px 18px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: filter 0.15s;
}
.partner-card:hover .partner-cta { filter: brightness(1.08); }
.partner-card .partner-cta .arr { transition: transform 0.15s; }
.partner-card:hover .partner-cta .arr { transform: translateX(2px); }

.partner-card.compact {
  grid-template-columns: 1fr;
  padding: 18px 20px;
  gap: 12px;
  text-align: left;
}
.partner-card.compact .partner-mark { justify-self: start; font-size: 22px; padding: 8px 14px; }
.partner-card.compact .partner-headline { font-size: 18px; }
.partner-card.compact .partner-tagline { font-size: 12px; }
.partner-card.compact .partner-cta { justify-self: stretch; justify-content: center; font-size: 13px; padding: 10px 14px; }

/* When the partner card lives inside the narrow right rail, stack it vertically */
.watch-box-col .partner-card {
  grid-template-columns: 1fr;
  padding: 20px;
  gap: 14px;
  text-align: left;
}
.watch-box-col .partner-card .partner-mark { justify-self: start; font-size: 24px; padding: 10px 14px; }
.watch-box-col .partner-card .partner-headline { font-size: 18px; }
.watch-box-col .partner-card .partner-cta { justify-self: stretch; justify-content: center; }

@media (max-width: 720px) {
  .partner-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px;
    text-align: left;
  }
  .partner-card .partner-mark { justify-self: start; font-size: 24px; padding: 10px 14px; }
  .partner-card .partner-cta { justify-self: stretch; justify-content: center; }
}

/* Match-row stream CTA — replaces the old "Watch on" hint */
.match-stream-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(31,208,130,0.1);
  border: 1px solid rgba(31,208,130,0.35);
  color: #0A1626;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
[data-theme="dark"] .match-stream-cta { color: #E8F94E; background: rgba(31,208,130,0.14); }
.match-stream-cta strong { font-weight: 700; }
.match-stream-cta .match-stream-label {
  color: var(--text-muted, #6B7280);
  font-weight: 400;
}
.match-stream-cta[data-partner="bet365"] {
  background: rgba(2,123,91,0.1);
  border-color: rgba(2,123,91,0.35);
}

/* Surface stats badges (on match rows / previews) */
.surface-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(11,42,74,0.06);
  color: var(--ink, #0A1626);
  letter-spacing: 0.02em;
}
[data-theme="dark"] .surface-stat { background: rgba(255,255,255,0.06); color: var(--paper, #FAFBFC); }
.surface-stat .ss-label { font-weight: 500; opacity: 0.65; text-transform: uppercase; font-size: 9px; }
.surface-stat.clay  { background: rgba(201,123,78,0.14); color: #8C4D2A; }
.surface-stat.grass { background: rgba(61,122,78,0.14); color: #2F6741; }
.surface-stat.hard  { background: rgba(59,92,126,0.14); color: #2C4769; }
[data-theme="dark"] .surface-stat.clay  { color: #E8B891; }
[data-theme="dark"] .surface-stat.grass { color: #91D6A7; }
[data-theme="dark"] .surface-stat.hard  { color: #95B5DA; }

/* Player profile page */
.player-hero {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: center;
  padding: 32px 0 40px;
  border-bottom: 1px solid var(--line);
}
.player-hero .player-photo {
  width: 160px; height: 160px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface, #f4f4ee);
  border: 3px solid var(--ball, #E8F94E);
}
.player-hero .player-name {
  font-family: var(--serif, Geist, serif);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 6px;
}
.player-hero .player-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: var(--text-muted, #6B7280);
  margin-top: 8px;
}
.player-hero .player-meta strong { color: var(--ink, #0A1626); font-weight: 600; }
[data-theme="dark"] .player-hero .player-meta strong { color: var(--paper); }
.player-hero .rank-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ball, #E8F94E);
  color: #0A1626;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 640px) {
  .player-hero { grid-template-columns: 1fr; gap: 20px; text-align: left; padding: 20px 0 28px; }
  .player-hero .player-photo { width: 120px; height: 120px; }
  .player-hero .player-name { font-size: 32px; }
}

.surface-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 32px;
}
.surface-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface, #FBFBF9);
}
[data-theme="dark"] .surface-card { background: rgba(255,255,255,0.02); }
.surface-card .surface-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.surface-card.clay  .surface-name { color: #8C4D2A; }
.surface-card.grass .surface-name { color: #2F6741; }
.surface-card.hard  .surface-name { color: #2C4769; }
[data-theme="dark"] .surface-card.clay  .surface-name { color: #E8B891; }
[data-theme="dark"] .surface-card.grass .surface-name { color: #91D6A7; }
[data-theme="dark"] .surface-card.hard  .surface-name { color: #95B5DA; }
.surface-card .surface-record {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.surface-card .surface-pct {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .surface-grid { grid-template-columns: 1fr; }
}

.player-results {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14px;
}
.player-results thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
}
.player-results tbody td { padding: 12px; border-bottom: 1px solid var(--line); }
.player-results .pr-result.W { color: #2E7D32; font-weight: 700; }
.player-results .pr-result.L { color: #C62828; font-weight: 700; }
[data-theme="dark"] .player-results .pr-result.W { color: #66BB6A; }
[data-theme="dark"] .player-results .pr-result.L { color: #EF5350; }

/* ── Live streaming page ── */
.live-stream-section { margin-bottom: 40px; }
.live-stream-section .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.live-stream-section .section-head h2 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.live-stream-section .section-head .muted { font-size: 13px; color: var(--text-muted); }

.live-stream-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .live-stream-grid { grid-template-columns: repeat(2, 1fr); }
}

.live-stream-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s, transform 0.15s;
}
.live-stream-card:hover { border-color: var(--text-muted); }
.live-stream-card.is-live {
  border-color: #C62828;
  box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.12);
}
[data-theme="dark"] .live-stream-card.is-live { border-color: #EF5350; }

.live-stream-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.live-stream-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  min-width: 0;
  flex-wrap: wrap;
}
.live-stream-meta .tour-pill { flex-shrink: 0; }
.live-stream-meta .tournament-name {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-stream-meta .sep { opacity: 0.5; }

.live-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C62828;
  box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.6);
  animation: live-pulse 1.4s ease-out infinite;
}
[data-theme="dark"] .live-pulse { background: #EF5350; }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(198, 40, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); }
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(198, 40, 40, 0.1);
  color: #C62828;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[data-theme="dark"] .live-chip {
  background: rgba(239, 83, 80, 0.18);
  color: #EF5350;
}
.status-chip {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--line);
}
.status-chip.upcoming { color: var(--text); }
.status-chip.done { opacity: 0.7; }

.live-stream-score {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.live-stream-score td {
  padding: 8px 6px;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.live-stream-score tr:last-child td { border-bottom: none; }
.live-stream-score .player-cell {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.live-stream-score .pname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-stream-score .set-score {
  text-align: center;
  width: 36px;
  font-weight: 700;
  color: var(--text);
}
.live-stream-score .game-score {
  text-align: center;
  width: 44px;
  font-weight: 800;
  color: #C62828;
  background: rgba(198, 40, 40, 0.06);
  border-radius: 4px;
}
[data-theme="dark"] .live-stream-score .game-score { color: #EF5350; background: rgba(239, 83, 80, 0.12); }
.live-stream-score tr.serving td { background: rgba(232, 249, 78, 0.12); }
[data-theme="dark"] .live-stream-score tr.serving td { background: rgba(232, 249, 78, 0.06); }
.serve-dot {
  color: #B8C700;
  font-size: 10px;
  margin-right: 2px;
}

.live-stream-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--partner-accent, var(--ink));
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.15s, transform 0.15s;
}
.live-stream-cta:hover { filter: brightness(1.08); }
.live-stream-cta .arr { transition: transform 0.15s; }
.live-stream-cta:hover .arr { transform: translateX(2px); }

.plain-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plain-list li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  padding-left: 16px;
  position: relative;
}
.plain-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--text);
}
.plain-list li strong { color: var(--text); }

/* ── Entry lists ── */
.entry-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.entry-list-card {
  display: block;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.entry-list-card:hover {
  border-color: var(--text-muted);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.entry-list-card .el-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.entry-list-card h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.entry-list-card .el-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.entry-list-card .el-card-foot {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.el-card-status {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text-muted);
}
.el-card-status.upcoming { color: var(--text); }
.el-card-status.live { background: rgba(198,40,40,0.1); color: #C62828; border-color: rgba(198,40,40,0.2); }
[data-theme="dark"] .el-card-status.live { background: rgba(239,83,80,0.18); color: #EF5350; border-color: rgba(239,83,80,0.25); }
.el-card-status.past { opacity: 0.7; }

.top-seed {
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.entry-list-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14px;
}
.entry-list-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
}
.entry-list-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.entry-list-table .el-rank {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-muted);
  width: 60px;
}
.entry-list-table .el-seed { width: 60px; }
.entry-list-table .el-seed .seed-num {
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.entry-list-table .el-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.entry-list-table .el-country {
  color: var(--text-muted);
  font-size: 13px;
}
.entry-list-table .el-type {
  width: 80px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Rankings hub, guide articles, calendar, news, betting, players
   ═══════════════════════════════════════════════════════════════ */

/* Rankings hub (/rankings/) */
.rh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 24px 0 40px;
}
.rh-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 20px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, transform .15s ease;
}
.rh-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.rh-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.rh-card h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.01em; }
.rh-card p { margin: 0 0 14px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.rh-top {
  font-size: 13px;
  color: var(--text);
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-bottom: 8px;
}
.rh-arr {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.rh-section-title {
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 32px 0 14px;
}
.rh-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 48px;
}
.rh-guide {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
}
.rh-guide:hover { border-color: var(--accent); }
.rh-guide h4 { margin: 0 0 4px; font-size: 15px; }
.rh-guide p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }

/* Guide articles (/rankings/<slug>/, /betting-guide/<slug>/, etc) */
.guide-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 64px;
}
.guide-article .page-header { padding: 0; margin-bottom: 28px; }
.guide-article .page-header h1 { font-size: clamp(28px, 4vw, 38px); }
.guide-article .lede { font-size: 17px; line-height: 1.55; color: var(--text-muted); }
.guide-section {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-top: 24px;
}
.guide-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.guide-section h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.guide-section p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 14px;
}
.guide-back {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.guide-back a { color: var(--accent); text-decoration: none; font-weight: 600; }

/* Calendar table */
.calendar-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 64px;
  font-size: 14px;
}
.calendar-table th, .calendar-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.calendar-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.calendar-table .cal-date { white-space: nowrap; color: var(--text-muted); }
.calendar-table .cal-name a { color: var(--text); text-decoration: none; font-weight: 600; }
.calendar-table .cal-name a:hover { color: var(--accent); }
.calendar-table .cal-name .flag { margin-right: 6px; }
.calendar-table tr:hover { background: rgba(0,0,0,0.02); }

/* News + betting-guide grid (cards) */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 24px 0 64px;
}
.news-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease;
}
.news-card:hover { border-color: var(--accent); }
.news-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.news-card h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }
.news-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.news-arr { font-size: 13px; font-weight: 600; color: var(--accent); }

/* Betting sites feature blocks */
.bs-feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin: 24px 0 32px;
}
.bs-feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}
.bs-feature-card h2 { margin: 0 0 12px; font-size: 24px; letter-spacing: -0.01em; }
.bs-feature-card p { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin: 0 0 12px; }
.bs-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}
.bs-pros { list-style: none; padding: 0; margin: 0 0 16px; }
.bs-pros li {
  position: relative;
  padding: 4px 0 4px 22px;
  font-size: 14px;
  line-height: 1.5;
}
.bs-pros li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--accent);
  font-weight: 700;
}
.cta-btn {
  display: inline-block;
  padding: 10px 18px;
  background: var(--partner-accent, var(--accent));
  color: #fff !important;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.cta-btn strong { color: inherit; }

.bs-criteria { margin-top: 32px; }
.bs-criteria h2 { font-size: 22px; letter-spacing: -0.01em; }
.bs-criteria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.bs-criteria-grid h4 { margin: 0 0 4px; font-size: 14px; }
.bs-criteria-grid p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* Players hub */
.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 16px 0 36px;
}
.player-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, transform .15s ease;
}
.player-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.player-card-photo {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.player-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.player-mono {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-muted);
}
.player-card-rank {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
}
.player-card h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.3; }
.player-card-meta { font-size: 12px; color: var(--text-muted); }
.player-card-meta .flag { margin-right: 4px; }

/* Player profile */
.player-profile { max-width: 760px; margin: 0 auto; padding: 0 0 64px; }
.player-hero {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.player-hero-photo {
  width: 140px;
  height: 140px;
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  flex-shrink: 0;
}
.player-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.player-hero-text .eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
}
.player-hero-text h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 36px);
  letter-spacing: -0.01em;
}
.player-meta { color: var(--text-muted); font-size: 14px; }
.player-meta .flag { margin-right: 6px; }
.player-h2h-link {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.player-h2h-link:hover { border-color: var(--accent); }

@media (max-width: 600px) {
  .player-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .player-hero-photo { width: 100px; height: 100px; }
}

/* ───── API enhancements: H2H, match recaps, odds widget ───── */
.h2h-page .h2h-scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center;background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:2rem 1.5rem;margin:1.5rem 0 2rem}
.h2h-side{text-align:center;text-decoration:none;color:inherit;display:block;padding:1rem .5rem;border-radius:12px;transition:background .15s}
.h2h-side:hover{background:rgba(11,42,74,.04)}
.h2h-rank{font-family:'Geist Mono',monospace;font-size:.75rem;color:var(--ink-muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem}
.h2h-name{font-size:1.5rem;font-weight:700;line-height:1.15;margin-bottom:.5rem;color:var(--ink)}
.h2h-meta{font-size:.875rem;color:var(--ink-muted)}
.h2h-meta .flag{margin-right:.4em;font-size:1.15em;display:inline-block;line-height:1}
.h2h-tally{text-align:center;padding:0 1.5rem;border-left:1px solid var(--border);border-right:1px solid var(--border)}
.h2h-tally-row{display:flex;justify-content:center;align-items:baseline;gap:.5rem;font-family:'Geist Mono',monospace;font-weight:700;color:var(--navy)}
.h2h-tally-row .big{font-size:3rem;line-height:1;letter-spacing:-0.02em}
.h2h-tally-row .dash{font-size:2rem;color:var(--ink-muted)}
.h2h-tally-label{margin-top:.5rem;font-size:.8rem;color:var(--ink-muted);letter-spacing:.04em}
.h2h-table .h2h-win{font-family:'Geist Mono',monospace;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:6px}
.h2h-win.p1{background:#E8F94E;color:var(--ink)}
.h2h-win.p2{background:var(--navy);color:#fff}

@media (max-width:640px){
  .h2h-page .h2h-scoreboard{grid-template-columns:1fr;gap:.75rem}
  .h2h-tally{border-left:none;border-right:none;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1rem 0}
  .h2h-tally-row .big{font-size:2.25rem}
}

/* ───── Match recap layout ───── */
.match-recap .page-header .lede strong{color:var(--ink)}
.set-score{display:inline-block;font-family:'Geist Mono',monospace;font-size:.95rem;background:var(--paper);border:1px solid var(--border);padding:2px 8px;border-radius:6px;margin-left:.4em}
.match-grid{display:grid;grid-template-columns:1fr 280px;gap:2rem;margin-top:1.5rem}
.match-aside{position:sticky;top:1rem;align-self:start}
@media (max-width:880px){.match-grid{grid-template-columns:1fr}.match-aside{position:static}}

.match-stats-wrap{margin:1rem 0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.match-stats-table{width:100%;border-collapse:collapse;font-size:.95rem}
.match-stats-table th{background:var(--paper);padding:.75rem 1rem;font-weight:600;color:var(--ink);text-align:center}
.match-stats-table th.stat-label{font-size:.8rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:500}
.match-stats-table td{padding:.6rem 1rem;border-top:1px solid var(--border);text-align:center;font-family:'Geist Mono',monospace}
.match-stats-table td.stat-label{color:var(--ink-muted);text-transform:none;font-family:inherit;font-size:.85rem;letter-spacing:0;width:40%}

.pbp-wrap{display:flex;flex-direction:column;gap:1rem}
.pbp-set{border:1px solid var(--border);border-radius:12px;padding:1rem;background:#fff}
.pbp-set-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.6rem}
.pbp-set-head h4{margin:0;font-size:.95rem;color:var(--ink)}
.pbp-meta{font-size:.78rem;color:var(--ink-muted);font-family:'Geist Mono',monospace}
.pbp-games{display:flex;flex-wrap:wrap;gap:4px}
.pbp-game{display:inline-block;font-family:'Geist Mono',monospace;font-size:.7rem;padding:3px 7px;background:var(--paper);border:1px solid var(--border);border-radius:5px;color:var(--ink-muted)}
.pbp-game.break{background:#E8F94E;border-color:#d3e23f;color:var(--ink);font-weight:600}

/* ───── Odds widget ───── */
.odds-widget{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.25rem;border-top:3px solid var(--partner-accent,var(--navy))}
.odds-widget-head{margin-bottom:.75rem}
.odds-eyebrow{font-family:'Geist Mono',monospace;font-size:.7rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem}
.odds-source{font-size:.78rem;color:var(--ink-muted)}
.odds-pair{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.75rem 0}
.odds-side{text-align:center;background:var(--paper);border-radius:8px;padding:.75rem}
.odds-label{font-family:'Geist Mono',monospace;font-size:.7rem;color:var(--ink-muted);text-transform:uppercase}
.odds-price{font-size:1.65rem;font-weight:700;font-family:'Geist Mono',monospace;color:var(--ink);line-height:1.1;margin:.25rem 0}
.odds-book{font-size:.7rem;color:var(--ink-muted);font-family:'Geist Mono',monospace}
.odds-cta{display:block;text-align:center;background:var(--partner-accent,var(--navy));color:#fff;font-weight:600;padding:.75rem 1rem;border-radius:8px;text-decoration:none;margin-top:.5rem;font-size:.9rem}
.odds-cta:hover{filter:brightness(1.08)}
.odds-disclaimer{margin:.6rem 0 0;font-size:.7rem;color:var(--ink-muted);line-height:1.4}

/* Doubles rankings re-uses .rankings-table */
.rankings-table .team{font-weight:500}

/* ───────── Player statistical deep dive ───────── */
.dd-kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin:1.5rem 0 2rem}
@media (max-width:720px){.dd-kpi-strip{grid-template-columns:repeat(2,1fr)}}
.dd-kpi{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:1.1rem 1rem;text-align:center}
.dd-kpi-value{font-size:2rem;font-weight:700;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.dd-kpi-label{margin-top:.4rem;font-size:.78rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em}

.dd-toc-wrap{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:1rem 1.25rem;margin:1.5rem 0}
.dd-toc-wrap h3{margin:0 0 .5rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);font-weight:600}
.dd-toc{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem .75rem}
.dd-toc li{counter-increment:dd}
.dd-toc a{display:inline-block;padding:.3rem .7rem;border:1px solid var(--rule);border-radius:999px;font-size:.85rem;text-decoration:none;color:var(--navy);background:#fff}
.dd-toc a:hover{background:var(--ball);border-color:var(--ball);color:var(--ink)}

.dd-method{background:#F0F4FA;border-left:3px solid var(--navy);border-radius:8px;padding:1rem 1.25rem;margin:1rem 0 2rem}
.dd-method h3{margin:0 0 .5rem;font-size:1rem;color:var(--navy)}
.dd-method ul{margin:.25rem 0 0;padding-left:1.1rem;color:var(--ink-muted);font-size:.92rem;line-height:1.55}
.dd-method li+li{margin-top:.4rem}
.dd-method code{background:#fff;border:1px solid var(--rule);padding:0 .25rem;border-radius:3px;font-size:.85rem}

.dd-block{margin:2rem 0;padding:1.25rem 1.5rem;background:#fff;border:1px solid var(--rule);border-radius:10px}
.dd-block h2{margin:.25rem 0 .5rem;font-size:1.5rem;color:var(--navy);line-height:1.2}
.dd-block h3{margin:.25rem 0 .75rem;font-size:1.1rem;color:var(--navy)}
.dd-eyebrow{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted)}
.dd-lede{margin:0 0 1rem;color:var(--ink-muted);font-size:.95rem;line-height:1.55;max-width:62ch}
.dd-empty{margin:.5rem 0;color:var(--ink-muted);font-style:italic}
.dd-h2-major{margin:2.5rem 0 .75rem;font-size:1.7rem;color:var(--navy);border-bottom:2px solid var(--ball);padding-bottom:.4rem;display:inline-block}

.dd-table-wrap{overflow-x:auto;margin:.5rem 0 0}
.dd-table{width:100%;border-collapse:collapse;font-size:.92rem}
.dd-table thead th{text-align:left;padding:.55rem .75rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);background:#F7F9FC;border-bottom:1px solid var(--rule);font-weight:600;white-space:nowrap}
.dd-table tbody td{padding:.6rem .75rem;border-bottom:1px solid var(--rule);vertical-align:middle}
.dd-table tbody tr:nth-child(even) td{background:#FAFBFC}
.dd-table tbody tr:hover td{background:#F0F4FA}
.dd-table .num{font-variant-numeric:tabular-nums;color:var(--ink)}
.dd-table .num.strong{font-weight:700;color:var(--navy)}
.dd-table a{color:var(--navy);text-decoration:none;border-bottom:1px dotted var(--ink-muted)}
.dd-table a:hover{border-bottom-color:var(--navy)}

.tour-pill{display:inline-block;padding:.15rem .55rem;border-radius:4px;font-size:.7rem;font-weight:700;letter-spacing:.04em}
.tour-pill.atp{background:#0B2A4A;color:#fff}
.tour-pill.wta{background:#A12C7B;color:#fff}
.rank-chip{display:inline-block;background:var(--ball);color:var(--ink);padding:.1rem .45rem;border-radius:3px;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.rank-chip.outside{background:#E8EAEE;color:var(--ink-muted);font-weight:500;font-size:.7rem}

.dd-h2h-table .dd-rivalry{font-weight:600;color:var(--navy);font-size:.95rem}
.dd-h2h-table .dd-vs{color:var(--ink-muted);font-weight:400;font-size:.85rem;margin:0 .25rem}
.dd-h2h-table .dd-record{min-width:240px}
.dd-h2h-table .dd-h2h-link{display:inline-block;padding:.25rem .6rem;border:1px solid var(--rule);border-radius:6px;font-size:.8rem;background:#fff}
.dd-h2h-table .dd-h2h-link:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.h2h-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-top:.5rem;background:var(--rule)}
.h2h-bar-p1,.h2h-bar-p2{height:100%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#fff;min-width:0}
.h2h-bar-p1{background:#0B2A4A}
.h2h-bar-p2{background:#A12C7B}
.dd-muted{color:var(--ink-muted);font-size:.82rem}

.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
@media (max-width:820px){.dd-grid{grid-template-columns:1fr}}
.dd-grid .dd-block{margin:0}

.dd-caveats{background:#FAFBFC}
.dd-caveats ul{padding-left:1.1rem;color:var(--ink-muted);font-size:.92rem;line-height:1.55}
.dd-caveats li+li{margin-top:.35rem}

/* Deep dive promo card on /players/ */
.dd-promo{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:linear-gradient(135deg,#0B2A4A 0%,#143A66 100%);color:#fff;border-radius:12px;padding:1.5rem 1.75rem;margin:1.5rem 0;text-decoration:none;border:1px solid #143A66;transition:transform .15s ease,box-shadow .15s ease}
.dd-promo:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(11,42,74,.18)}
.dd-promo-body{flex:1;min-width:0}
.dd-promo-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ball);margin-bottom:.4rem}
.dd-promo-title{margin:0 0 .4rem;font-size:1.35rem;color:#fff;line-height:1.25}
.dd-promo-text{margin:0;color:rgba(255,255,255,.78);font-size:.92rem;line-height:1.5;max-width:62ch}
.dd-promo-cta{flex-shrink:0;background:var(--ball);color:var(--ink);padding:.65rem 1.1rem;border-radius:8px;font-weight:700;font-size:.92rem;white-space:nowrap}
@media (max-width:720px){
  .dd-promo{flex-direction:column;align-items:stretch}
  .dd-promo-cta{text-align:center}
}

/* ──────────────────────────────────────────────
   MOBILE MENU · Hamburger + slide-out drawer
   ────────────────────────────────────────────── */
.hamburger {
  display: none;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.hamburger:hover { border-color: var(--ink); }
[data-theme="dark"] .hamburger:hover { border-color: var(--paper); }
.hamburger span {
  display: block; width: 18px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 220ms var(--ease), opacity 180ms var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 22, 38, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 220ms var(--ease);
  z-index: 90;
}
.drawer-overlay[hidden] { display: none; }
.drawer-overlay.visible { opacity: 1; }

.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: var(--paper);
  color: var(--text);
  border-left: 1px solid var(--line-soft);
  box-shadow: -12px 0 36px rgba(10, 22, 38, 0.12);
  transform: translateX(100%);
  transition: transform 260ms var(--ease);
  z-index: 100;
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
[data-theme="dark"] .mobile-drawer { background: #0F1722; border-left-color: rgba(255,255,255,0.08); }
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer[aria-hidden="true"] { visibility: hidden; }
.mobile-drawer.open[aria-hidden="false"] { visibility: visible; }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0;
  background: inherit;
  z-index: 1;
}
.drawer-title {
  font-family: var(--sans); font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-mute);
}
.drawer-close {
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: transparent; color: var(--text);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.drawer-close:hover { border-color: var(--ink); background: var(--line-soft); }

.drawer-nav { padding: 12px 14px 32px; display: flex; flex-direction: column; gap: 4px; }
.drawer-link, .drawer-section > summary, .drawer-section > a {
  display: block; padding: 12px 14px; border-radius: 10px;
  font-size: 16px; font-weight: 500; color: var(--text);
  text-decoration: none;
}
.drawer-link:hover, .drawer-section > summary:hover { background: var(--line-soft); }
.drawer-link.active { background: var(--ink); color: var(--paper); }
[data-theme="dark"] .drawer-link.active { background: var(--paper); color: var(--ink); }

.drawer-section { border-radius: 10px; }
.drawer-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-section > summary::-webkit-details-marker { display: none; }
.drawer-section > summary::after {
  content: "▾";
  font-size: 11px; color: var(--text-mute);
  transition: transform 180ms var(--ease);
}
.drawer-section[open] > summary::after { transform: rotate(180deg); }
.drawer-section > a {
  padding: 10px 14px 10px 28px;
  font-size: 15px; font-weight: 400;
  color: var(--text-dim);
}
.drawer-section > a:hover { background: var(--line-soft); color: var(--text); }

body.drawer-locked { overflow: hidden; }

/* Show hamburger and hide desktop nav at the breakpoint */
@media (max-width: 980px) {
  .nav { display: none; }
  .hamburger { display: inline-flex; }
  .site-header .inner { gap: 12px; padding: 0 18px; }
  .header-tools { gap: 6px; }
  .country-pick { padding: 8px 10px; font-size: 12px; }
  .country-pick .flag { font-size: 14px; }
  .theme-toggle { width: 36px; height: 36px; }
}

/* Tablet: narrow nav slightly */
@media (max-width: 1180px) and (min-width: 981px) {
  .nav { gap: 0; margin-left: 8px; }
  .nav > a, .nav-trigger { padding: 8px 10px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer, .drawer-overlay, .nav-menu, .hamburger span { transition: none !important; }
}

/* ===== Enhanced player profile (Apr 2026) ===== */

/* Social links row */
.social-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.social-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border:1px solid var(--line,#0A1626);border-radius:999px;
  background:var(--bg-card);color:var(--text);text-decoration:none;
  font-size:13px;font-weight:600;line-height:1;transition:transform .12s,background .12s}
.social-pill:hover{background:var(--ball);color:var(--ball-ink);transform:translateY(-1px)}
.social-icon{display:inline-flex;align-items:center;width:14px;height:14px}
.social-icon svg{width:100%;height:100%;fill:currentColor}
[data-theme="dark"] .social-pill{background:var(--navy-2);border-color:var(--navy-2);color:var(--text)}
[data-theme="dark"] .social-pill:hover{background:var(--ball);color:var(--ball-ink)}

/* KPI status chips */
.pp-status{padding:0}
.pp-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:6px 0}
.pp-kpi{padding:14px 16px;border:1px solid var(--paper-2);border-radius:12px;
  background:var(--bg-card);transition:border-color .15s}
.pp-kpi:hover{border-color:var(--ball)}
.pp-kpi-value{font-size:22px;font-weight:800;letter-spacing:-0.01em;color:var(--text);
  font-variant-numeric:tabular-nums}
.pp-kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-dim);margin-top:4px;font-weight:600}

/* Form sparkline */
.form-spark{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.form-block{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:6px;font-size:11px;font-weight:700;
  font-family:system-ui,sans-serif;cursor:default;letter-spacing:0;
  border:1px solid transparent}
.form-block.win{background:#3F8C3F;color:#fff;border-color:#2E6A2E}
.form-block.loss{background:#B23B47;color:#fff;border-color:#8C2630}
[data-theme="dark"] .form-block.win{background:#4FA34F;border-color:#3F8C3F}
[data-theme="dark"] .form-block.loss{background:#C45766;border-color:#A93A4A}

/* Surface splits bar chart */
.ssp{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.ssp-row{display:grid;grid-template-columns:60px 1fr 110px;align-items:center;gap:12px}
.ssp-label{font-weight:700;font-size:13px;color:var(--text)}
.ssp-track{height:14px;background:var(--paper-2);border-radius:7px;overflow:hidden;position:relative}
.ssp-fill{height:100%;border-radius:7px;position:relative;opacity:.45}
.ssp-win{position:absolute;top:0;left:0;height:100%;background:rgba(0,0,0,.35);border-radius:7px 0 0 7px}
[data-theme="dark"] .ssp-track{background:var(--navy-3)}
[data-theme="dark"] .ssp-win{background:rgba(255,255,255,.30)}
.ssp-value{font-size:13px;color:var(--text);font-variant-numeric:tabular-nums;text-align:right}
.ssp-value strong{font-weight:800}
.ssp-wl{color:var(--text-dim);margin-left:6px;font-size:12px}
@media (max-width:560px){.ssp-row{grid-template-columns:50px 1fr 80px;gap:8px}}

/* Serve radar */
.serve-grid{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:center;margin-top:12px}
.serve-radar{width:260px;height:260px;display:block}
[data-theme="dark"] .serve-radar circle[fill="none"]{stroke:#23375A}
[data-theme="dark"] .serve-radar line{stroke:#23375A}
[data-theme="dark"] .serve-radar text{fill:var(--text-dim)}
.serve-numbers{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:0;
  font-size:14px;align-content:start}
.serve-numbers dt{color:var(--text-dim);font-weight:500}
.serve-numbers dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:680px){
  .serve-grid{grid-template-columns:1fr;justify-items:center}
  .serve-radar{width:240px;height:240px}
  .serve-numbers{width:100%;max-width:340px}
}

/* Equipment card */
.eq-card{display:grid;grid-template-columns:140px 1fr;gap:8px 18px;margin:8px 0 0;
  font-size:14px;line-height:1.5}
.eq-card dt{color:var(--text-dim);font-weight:600}
.eq-card dd{margin:0;color:var(--text);font-weight:500}
@media (max-width:520px){.eq-card{grid-template-columns:110px 1fr;gap:6px 12px;font-size:13px}}

/* Career timeline */
.career-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;margin-bottom:18px}
.career-stat{padding:16px;border:1px solid var(--paper-2);border-radius:12px;
  background:var(--bg-card);text-align:center}
.cs-num{font-size:28px;font-weight:800;color:var(--text);letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums}
.cs-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-dim);margin-top:4px;font-weight:600}
.career-table-wrap{overflow-x:auto;border:1px solid var(--paper-2);border-radius:12px}
.career-table{width:100%;border-collapse:collapse;font-size:14px}
.career-table th,.career-table td{padding:9px 14px;border-bottom:1px solid var(--paper-2);
  text-align:left}
.career-table th{background:var(--bg-elev);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim)}
.career-table td.num{font-variant-numeric:tabular-nums;text-align:right}
.career-table th:nth-child(3),.career-table th:nth-child(4){text-align:right}
.career-table tbody tr:last-child td{border-bottom:none}
[data-theme="dark"] .career-table th{background:var(--navy-3)}
[data-theme="dark"] .career-table th,[data-theme="dark"] .career-table td{border-bottom-color:var(--navy-2)}

/* Rivalry network */
.riv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:8px;margin-top:8px}
.riv-pill{display:flex;flex-direction:column;gap:2px;padding:10px 14px;
  border:1px solid var(--paper-2);border-radius:10px;background:var(--bg-card);
  text-decoration:none;color:var(--text);transition:border-color .15s,transform .12s}
a.riv-pill:hover{border-color:var(--ball);transform:translateY(-1px)}
.riv-opp{font-weight:700;font-size:13px;line-height:1.2}
.riv-line{font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;font-weight:600}

/* Section spacing inside profile */
.player-profile .guide-section{margin-bottom:32px}
.player-profile .guide-section h2{font-size:20px;margin:0 0 10px;letter-spacing:-0.01em}

/* Subtle .num in dd-tables for new leaderboards inherits existing styles */

/* ──────────────────────────────────────────────
   UX v3 · April 2026 — readability pass
   - Stronger text contrast tokens
   - New status pill component (LIVE / FINAL / NEXT / 17:30)
   - Compact match-row v3 with winner emphasis
   - Tournament page Stake CTA block
   - Section header utility
   ────────────────────────────────────────────── */

:root {
  --text-strong: #0A1626;     /* primary headings, winner names — WCAG AAA on paper */
  --text-body:   #1F2D44;     /* body copy */
  --text-meta:   #4A5C77;     /* meta info, dates, secondary lines — AA on paper */
  --green-live:  #169B62;     /* live indicator, finals */
  --green-soft:  #E5F4ED;     /* live row tint */
  --red-soft:    #FBECEC;
  --hard-blue:   #1B5FA1;     /* up-next */
}
[data-theme="dark"] {
  --text-strong: #F0F4FB;
  --text-body:   #DCE4F0;
  --text-meta:   #A4B5CC;
  --green-live:  #4ADBA1;
  --green-soft:  rgba(74,219,161,0.14);
  --red-soft:    rgba(255,120,120,0.14);
  --hard-blue:   #6BA8E5;
}

/* Section header utility — reused across home, today, tournaments, players */
.lt-sec-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(10,22,38,0.08); flex-wrap: wrap; }
[data-theme="dark"] .lt-sec-head { border-bottom-color: rgba(255,255,255,0.10); }
.lt-sec-head h2 { font-size: 22px; font-weight: 700; margin: 0;
  letter-spacing: -0.01em; color: var(--text-strong); }
.lt-sec-head .lt-sec-meta { font-size: 13px; color: var(--text-meta);
  font-weight: 500; font-variant-numeric: tabular-nums; }
.lt-sec-head .lt-sec-cta { font-size: 13px; font-weight: 600;
  color: var(--text-strong); text-decoration: none; }
.lt-sec-head .lt-sec-cta:hover { text-decoration: underline; }

/* Status pill v3 — readable on every state */
.lt-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 7px; border-radius: 4px;
  background: var(--paper-2); color: var(--text-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lt-status.is-live { background: var(--green-soft); color: var(--green-live); }
.lt-status.is-live .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-live);
  animation: pulse 1.6s ease-in-out infinite;
}
.lt-status.is-final { background: rgba(10,22,38,0.06); color: var(--text-strong); }
[data-theme="dark"] .lt-status.is-final { background: rgba(255,255,255,0.08); color: var(--text-strong); }
.lt-status.is-next { background: rgba(27,95,161,0.10); color: var(--hard-blue); }
.lt-status.is-time { background: transparent; color: var(--text-strong); padding: 3px 0;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; }

/* Match-row v3 — adds winner emphasis, scoreline, real readable status */
.match-row.v3 {
  display: grid;
  grid-template-columns: 78px 32px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(10,22,38,0.07);
  text-decoration: none;
  color: var(--text-body);
  position: relative;
  transition: background 120ms var(--ease);
}
[data-theme="dark"] .match-row.v3 { border-bottom-color: rgba(255,255,255,0.07); }
.match-row.v3:hover { background: rgba(212,255,61,0.06); }
.match-row.v3:last-child { border-bottom: none; }

.match-row.v3 .mr-time { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-start; }
.match-row.v3 .mr-emblem { width: 32px; height: 32px; flex-shrink: 0; }
.match-row.v3 .mr-emblem img { width: 100%; height: 100%; display: block; }

/* Stacked time pill: small date eyebrow + bigger clock */
.match-row.v3 .lt-status.is-time.is-stack {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; padding: 0;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.match-row.v3 .lt-status.is-time.is-stack .mr-date {
  font-size: 10px; font-weight: 600; color: var(--text-meta);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.match-row.v3 .lt-status.is-time.is-stack .mr-clock {
  font-size: 16px; font-weight: 700; color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.match-row.v3 .lt-status.is-time:not(.is-stack) {
  font-size: 16px; font-weight: 700; color: var(--text-strong);
  font-variant-numeric: tabular-nums; padding: 0;
}
.match-row.v3 .mr-mid { min-width: 0; }

.match-row.v3 .mr-players-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.match-row.v3 .mr-player {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--text-body);
  line-height: 1.4; min-width: 0;
}
.match-row.v3 .mr-player .pname { font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-row.v3 .mr-player.is-winner { color: var(--text-strong); font-weight: 700; }
.match-row.v3 .mr-player.is-winner .pname { font-weight: 700; }
.match-row.v3 .mr-player.is-loser { color: var(--text-meta); }
.match-row.v3 .mr-player .seed { color: var(--text-meta); font-size: 12px;
  font-weight: 500; font-variant-numeric: tabular-nums; }
.match-row.v3 .mr-player .flag { font-size: 17px; line-height: 1; }
.match-row.v3 .mr-player .winner-tick { color: var(--green-live); font-weight: 800;
  font-size: 14px; }
.match-row.v3 .mr-score {
  font-family: var(--sans); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600; color: var(--text-strong);
  padding-left: 12px; flex-shrink: 0;
}
.match-row.v3 .mr-score .set { display: inline-block; margin-right: 8px; }
.match-row.v3 .mr-score .set:last-child { margin-right: 0; }

.match-row.v3 .mr-tour-line {
  font-size: 12px; color: var(--text-meta); margin-top: 5px;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; min-width: 0;
}
.match-row.v3 .mr-tour-line .mr-tour-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--text-body);
}
.match-row.v3 .mr-tour-line > span:not(.tour-pill):not(.mr-tour-name) {
  flex-shrink: 0;
}
.match-row.v3 .mr-tour-line .tour-pill {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 3px; letter-spacing: 0.04em;
}
.match-row.v3 .mr-tour-line .sep { color: var(--text-faint); }

.match-row.v3 .mr-right {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--text-meta);
}
.match-row.v3 .mr-right .mr-arr {
  color: var(--text-faint); font-size: 16px;
  transition: transform 200ms var(--ease), color 200ms var(--ease);
}
.match-row.v3:hover .mr-arr { color: var(--text-strong); transform: translateX(3px); }

.match-row.v3.is-live { background: linear-gradient(90deg, var(--green-soft), transparent 60%); }
.match-row.v3.is-live::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--green-live); border-radius: 2px;
}
.match-row.v3.is-final .mr-loser { opacity: 0.78; }

@media (max-width: 720px) {
  .match-row.v3 {
    grid-template-columns: 56px 32px 1fr;
    grid-template-areas:
      "time   emblem mid"
      "right  right  right";
    column-gap: 12px;
    row-gap: 8px;
    padding: 12px 4px;
  }
  .match-row.v3 .mr-time   { grid-area: time; }
  .match-row.v3 .mr-emblem { grid-area: emblem; }
  .match-row.v3 .mr-mid    { grid-area: mid; min-width: 0; }
  .match-row.v3 .mr-right  {
    grid-area: right;
    border-top: 1px dashed rgba(10,22,38,0.10);
    padding-top: 8px;
    justify-content: flex-start;
    gap: 10px;
  }
  [data-theme="dark"] .match-row.v3 .mr-right { border-top-color: rgba(255,255,255,0.10); }
  .match-row.v3 .mr-player { font-size: 15px; }
  .match-row.v3 .mr-score  { font-size: 13px; padding-left: 8px; }
  .match-row.v3 .mr-arr    { display: none; }
  /* Tour-line: let the tournament name breathe instead of truncating to "M..." */
  .match-row.v3 .mr-tour-line {
    flex-wrap: wrap; white-space: normal; row-gap: 2px;
  }
  .match-row.v3 .mr-tour-line .mr-tour-name {
    overflow: visible; white-space: normal; text-overflow: clip;
  }
  /* Hide the optional court name on narrow viewports — tournament + round are enough */
  .match-row.v3 .mr-tour-line .sep + span:nth-of-type(2),
  .match-row.v3 .mr-tour-line > span:nth-last-child(-n+2):not(.tour-pill):not(.mr-tour-name):not(.sep) {
    /* keeps round; the second sep+text (court) is dropped by the rule below */
  }
}

@media (max-width: 480px) {
  .match-row.v3 {
    grid-template-columns: 52px 28px 1fr;
    column-gap: 10px;
    padding: 12px 2px;
  }
  .match-row.v3 .mr-emblem { width: 28px; height: 28px; }
  .match-row.v3 .lt-status.is-time:not(.is-stack),
  .match-row.v3 .lt-status.is-time.is-stack .mr-clock { font-size: 14px; }
  .match-row.v3 .mr-player { font-size: 14px; gap: 6px; }
  .match-row.v3 .mr-player .flag { font-size: 15px; }
  .match-row.v3 .mr-tour-line { font-size: 11px; }
  /* Drop the court (last · something) on very narrow screens — round is enough context */
  .match-row.v3 .mr-tour-line > .sep:nth-of-type(2),
  .match-row.v3 .mr-tour-line > .sep:nth-of-type(2) + span { display: none; }
  /* Watch pill: full width row, easier tap target */
  .match-row.v3 .mr-watch-pill {
    width: 100%; justify-content: center; padding: 8px 12px; font-size: 13px;
  }
}

/* Status counter strip ("X finished · Y live · Z upcoming") */
.lt-status-counter {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 12px 14px;
  background: var(--bg-elev); border-radius: 10px;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.lt-status-counter .ct-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-meta); }
.lt-status-counter .ct-item strong { color: var(--text-strong); font-weight: 700; }
.lt-status-counter .ct-item.is-live { color: var(--green-live); }
.lt-status-counter .ct-item.is-live strong { color: var(--green-live); }

/* Day-strip v3 — busier days highlighted */
.week-strip .day-cell.has-many { background: rgba(232,249,78,0.08); }
.week-strip .day-cell .day-count { font-variant-numeric: tabular-nums; }

/* Tournament page Stake CTA block — v5 sponsored card */
.lt-stake-cta {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 18px; align-items: center;
  padding: 18px 22px; margin: 24px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ball);
  border-radius: 14px;
  text-decoration: none !important;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.lt-stake-cta:hover {
  border-color: var(--ink); border-left-color: var(--ball);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1, 0 6px 18px rgba(15,27,45,0.08));
}
.lt-stake-cta::before {
  content: "S"; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--ink); color: var(--ball);
  font-family: var(--sans); font-weight: 800; font-size: 24px; letter-spacing: -0.02em;
  grid-row: 1 / span 2;
}
.lt-stake-cta[data-partner="bet365"]::before {
  content: "365"; font-size: 16px; background: #027B5B; color: #fff;
}
.lt-stake-cta > div:first-of-type { min-width: 0; }
.lt-stake-cta .cta-eyebrow {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-mute); margin-bottom: 4px;
  display: inline-flex; align-items: center; gap: 8px;
}
.lt-stake-cta .cta-eyebrow::after {
  content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-faint);
}
.lt-stake-cta .cta-headline {
  font-family: var(--sans);
  font-size: 17px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1.3;
}
.lt-stake-cta .cta-tagline {
  font-size: 12.5px; color: var(--text-mute); margin-top: 4px; line-height: 1.45;
  font-weight: 500;
}
.lt-stake-cta .cta-btn {
  background: var(--ball); color: var(--ball-ink);
  padding: 11px 18px; border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700; font-size: 13.5px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ball-deep, var(--ball));
  transition: transform 160ms var(--ease);
}
.lt-stake-cta:hover .cta-btn { transform: translateX(2px); }
.lt-stake-cta[data-partner="bet365"] .cta-btn { background: #027B5B; color: #fff; border-color: #016048; }
.lt-stake-cta .cta-disclaimer {
  grid-column: 2 / -1;
  font-size: 10.5px; color: var(--text-faint);
  margin-top: 2px; line-height: 1.45;
  font-weight: 500;
}
[data-theme="dark"] .lt-stake-cta { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .lt-stake-cta .cta-headline { color: var(--paper); }
[data-theme="dark"] .lt-stake-cta:hover { border-color: rgba(255,255,255,0.25); }
@media (max-width: 720px) {
  .lt-stake-cta {
    grid-template-columns: auto 1fr;
    gap: 14px 14px;
    padding: 16px 18px;
  }
  .lt-stake-cta::before { width: 44px; height: 44px; font-size: 20px; grid-row: 1; }
  .lt-stake-cta .cta-btn {
    grid-column: 1 / -1; justify-self: stretch; text-align: center;
    justify-content: center;
  }
  .lt-stake-cta .cta-disclaimer { grid-column: 1 / -1; }
}

/* Tournament index — Live / Coming up / Calendar groups */
.lt-tour-group { margin-bottom: 48px; }
.lt-tour-group .lt-tour-group-title {
  font-size: 18px; font-weight: 700; color: var(--text-strong);
  margin: 0 0 4px; display: flex; align-items: center; gap: 10px;
}
.lt-tour-group .lt-tour-group-title .live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green-live);
  animation: pulse 1.6s ease-in-out infinite;
}
.lt-tour-group p.lt-tour-group-sub { font-size: 13px; color: var(--text-meta); margin: 0 0 16px; }

/* H2H "What to expect" callout */
.h2h-callout {
  background: var(--bg-elev); border-left: 3px solid var(--lime);
  padding: 14px 18px; border-radius: 8px; margin: 18px 0 28px;
}
.h2h-callout h3 { font-size: 14px; font-weight: 700; margin: 0 0 8px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-meta); }
.h2h-callout p { font-size: 15px; color: var(--text-body); margin: 6px 0; line-height: 1.55; }
.h2h-callout p strong { color: var(--text-strong); }

/* Player profile — Now / How they play / Career / Watch buckets */
.pp-bucket-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--text-meta); margin: 32px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(10,22,38,0.10);
}
[data-theme="dark"] .pp-bucket-head { border-bottom-color: rgba(255,255,255,0.12); }
.pp-bucket-head:first-child { margin-top: 0; }

/* Match-recap fixes — hide stale odds widget on completed matches */
.match-recap.is-completed .odds-widget { display: none; }
.match-recap .lede strong { color: var(--text-strong); }

/* Matches index — recap card v3 */
.lt-recap-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.lt-recap-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid rgba(10,22,38,0.06);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 120ms var(--ease), transform 120ms var(--ease);
}
[data-theme="dark"] .lt-recap-card { border-color: rgba(255,255,255,0.08); }
.lt-recap-card:hover { border-color: var(--lime); transform: translateY(-1px); }
.lt-recap-card .rc-eyebrow {
  grid-column: 1 / -1;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-meta);
  display: flex; gap: 8px; align-items: center;
}
.lt-recap-card .rc-eyebrow .tour-pill { font-size: 10px; padding: 2px 5px; border-radius: 3px; }
.lt-recap-card .rc-winner { font-size: 15px; font-weight: 700; color: var(--text-strong); line-height: 1.3; }
.lt-recap-card .rc-loser { font-size: 14px; font-weight: 500; color: var(--text-meta); line-height: 1.3; }
.lt-recap-card .rc-score {
  font-family: var(--sans); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 700; color: var(--text-strong);
  align-self: center; text-align: right; white-space: nowrap;
  display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap;
}
.lt-recap-card .rc-score .sc { display: inline-block; }
.lt-recap-card .rc-score .sc + .sc { color: var(--text-meta); font-weight: 600; }
.lt-recap-card .rc-tick { color: var(--green-live); font-weight: 800; }

/* Group header inside /matches/ index */
.lt-recap-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 32px 0 12px;
}
.lt-recap-group-head h3 { font-size: 16px; font-weight: 700; margin: 0; color: var(--text-strong); }
.lt-recap-group-head .rg-meta { font-size: 12px; color: var(--text-meta); font-variant-numeric: tabular-nums; }


/* ───────────── Player dossier sections (v1) ───────────── */
.pp-bio { background: var(--paper, #FAFBFC); border-radius: 10px; padding: 20px 22px; }
[data-theme="dark"] .pp-bio { background: rgba(255,255,255,0.03); }
.pp-bio h2 { font-size: 18px; margin: 0 0 10px; color: var(--text-strong); }
.pp-bio-prose { font-size: 15.5px; line-height: 1.65; color: var(--text-body, #1f2a40); margin: 0; max-width: 70ch; }
.pp-bio-meta { margin-top: 10px; font-size: 12px; color: var(--text-meta); font-style: italic; }

.pp-style h2 { font-size: 18px; margin: 0 0 8px; color: var(--text-strong); }
.pp-style-summary { font-size: 15px; line-height: 1.6; color: var(--text-body); max-width: 70ch; margin: 0 0 16px; }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ps-card {
  border: 1px solid rgba(11,42,74,0.08);
  border-radius: 8px; padding: 12px 14px; background: #fff;
}
[data-theme="dark"] .ps-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.ps-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-meta); margin-bottom: 6px; }
.ps-card-text { font-size: 13.5px; line-height: 1.5; color: var(--text-body); }

.pp-highlights h2 { font-size: 18px; margin: 0 0 10px; color: var(--text-strong); }
.pp-highlight-list { margin: 0; padding-left: 18px; }
.pp-highlight-list li { font-size: 14.5px; line-height: 1.55; margin-bottom: 6px; color: var(--text-body); }

.pp-team h2 { font-size: 18px; margin: 0 0 10px; color: var(--text-strong); }
.pp-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.team-card { margin: 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 16px; row-gap: 6px; }
.team-card dt { font-size: 12px; color: var(--text-meta); font-weight: 600; }
.team-card dd { margin: 0; font-size: 14px; color: var(--text-body); }

.pp-rivalries h2 { font-size: 18px; margin: 0 0 10px; color: var(--text-strong); }
.riv-narrow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.riv-narrow {
  border-left: 3px solid var(--lime, #E8F94E);
  padding: 6px 0 6px 12px;
}
.riv-narrow-name { font-size: 14px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; }
.riv-narrow-text { font-size: 13.5px; line-height: 1.5; color: var(--text-body); }

.pp-news-block h2 { font-size: 18px; margin: 0 0 12px; color: var(--text-strong); }
.pp-headline-quote {
  margin: 0 0 16px; padding: 14px 16px;
  background: rgba(232, 249, 78, 0.18);
  border-left: 4px solid var(--lime, #E8F94E);
  border-radius: 4px;
}
.pp-headline-quote p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--text-strong); font-style: italic; }
.pp-headline-quote footer { margin-top: 8px; font-size: 12px; color: var(--text-meta); font-style: normal; }
.pp-news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(11,42,74,0.06); }
[data-theme="dark"] .pp-news-list { border-top-color: rgba(255,255,255,0.08); }
.pp-news-item {
  display: grid; grid-template-columns: 110px 1fr; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(11,42,74,0.06);
}
[data-theme="dark"] .pp-news-item { border-bottom-color: rgba(255,255,255,0.08); }
.pp-news-date { font-size: 12px; color: var(--text-meta); font-variant-numeric: tabular-nums; padding-top: 1px; }
.pp-news-text { font-size: 14.5px; line-height: 1.5; color: var(--text-body); }
.pp-news-text a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.pp-news-text a:hover { color: var(--text-strong); }
.pp-news-meta { margin-top: 10px; font-size: 12px; color: var(--text-meta); font-style: italic; }

/* Mobile tightening */
@media (max-width: 600px) {
  .pp-bio, .pp-style, .pp-highlights, .pp-team, .pp-rivalries, .pp-news-block { padding: 14px; }
  .pp-news-item { grid-template-columns: 80px 1fr; gap: 8px; }
  .pp-news-date { font-size: 11px; }
  .pp-bio-prose, .pp-style-summary { font-size: 15px; }
  .ps-grid { gap: 8px; }
}

/* ───────────── /check/ scheduler dashboard ───────────── */
.check-page { max-width: 1100px; }
.check-page h1 { margin-bottom: 6px; }
.check-page .lede { font-size: 15px; color: var(--text-meta); margin: 0 0 24px; }
.check-cron-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-bottom: 32px;
}
.check-cron-card {
  border: 1px solid rgba(11,42,74,0.1);
  border-radius: 10px; padding: 14px 16px; background: #fff;
}
[data-theme="dark"] .check-cron-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); }
.check-cron-card .ccc-name { font-size: 14px; font-weight: 700; color: var(--text-strong); margin-bottom: 6px; }
.check-cron-card .ccc-cadence { font-size: 13px; color: var(--text-body); margin-bottom: 8px; }
.check-cron-card .ccc-next { font-size: 12px; color: var(--text-meta); font-variant-numeric: tabular-nums; }
.check-cron-card .ccc-cron { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 11px; color: var(--text-meta); margin-top: 4px; }
.check-cron-card .ccc-link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--text-strong); text-decoration: none; border-bottom: 1px dotted currentColor; }

.check-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.check-table thead th {
  text-align: left; padding: 8px 10px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-meta);
  border-bottom: 1px solid rgba(11,42,74,0.1);
}
.check-table tbody td { padding: 9px 10px; border-bottom: 1px solid rgba(11,42,74,0.05); }
[data-theme="dark"] .check-table thead th { border-bottom-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .check-table tbody td { border-bottom-color: rgba(255,255,255,0.05); }
.check-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
.check-pill.fresh { background: rgba(22,155,98,0.15); color: #169B62; }
.check-pill.aging { background: rgba(232,180,8,0.18); color: #b58400; }
.check-pill.stale { background: rgba(220,53,69,0.12); color: #c92a3a; }
.check-pill.missing { background: rgba(74,92,119,0.15); color: var(--text-meta); }

@media (max-width: 600px) {
  .check-cron-grid { grid-template-columns: 1fr; }
  .check-table { font-size: 12px; }
  .check-table thead th, .check-table tbody td { padding: 7px 6px; }
}

/* ────────────────────────────────────────────────────────────
   v5 additions — SEO prose blocks, tournament TOC, past-champions
   table, FAQ accordion, related events, surface/tier chips.
   ──────────────────────────────────────────────────────────── */

/* SEO prose: comfortable reading column for intro + footer essays. */
.seo-prose {
  max-width: 760px; margin: 0 auto;
  font-size: 17px; line-height: 1.7; color: var(--text);
}
.seo-prose p { margin: 0 0 18px; }
.seo-prose strong { font-weight: 600; color: var(--ink); }
[data-theme="dark"] .seo-prose strong { color: var(--text); }
.seo-prose a { color: var(--text); border-bottom: 1px solid var(--line-soft); transition: border-color 120ms var(--ease); }
.seo-prose a:hover { border-color: var(--text); }
.seo-prose h2 {
  font-size: 28px; line-height: 1.2; margin: 36px 0 14px;
  letter-spacing: -0.01em; font-weight: 700;
}
.seo-prose h3 {
  font-size: 19px; line-height: 1.3; margin: 28px 0 10px;
  letter-spacing: -0.005em; font-weight: 600;
}
.seo-prose ul { padding-left: 20px; margin: 0 0 18px; }
.seo-prose li { margin: 0 0 6px; }

.seo-block { padding: 56px 0; border-top: 1px solid var(--line-soft); background: var(--paper); }
.seo-block.elev { background: var(--paper-2); }
.seo-block .eyebrow { text-align: center; margin-bottom: 8px; color: var(--text-mute); }
.seo-block .seo-h {
  font-size: 32px; line-height: 1.15; text-align: center;
  margin: 0 auto 28px; max-width: 760px; letter-spacing: -0.015em;
  font-weight: 700;
}
@media (max-width: 720px) {
  .seo-block { padding: 40px 0; }
  .seo-block .seo-h { font-size: 26px; }
  .seo-prose { font-size: 16px; }
}

/* Page-intro lede: 200-word block under page header on category pages. */
.page-intro {
  max-width: 760px; margin: 14px 0 0;
  font-size: 17px; line-height: 1.65; color: var(--text-dim);
}
.page-intro p { margin: 0 0 14px; }
.page-intro p:last-child { margin: 0; }
.page-intro strong { color: var(--ink); font-weight: 600; }
[data-theme="dark"] .page-intro strong { color: var(--text); }
.page-intro a { color: var(--text); border-bottom: 1px solid var(--line-soft); }
.page-intro a:hover { border-color: var(--text); }

/* Tournament page: quick-jump TOC. Sticks below header on scroll. */
.tour-toc {
  position: sticky; top: 60px; z-index: 30;
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin: 24px 0 32px;
}
.tour-toc-inner {
  display: flex; gap: 4px; overflow-x: auto;
  padding: 10px 0; scrollbar-width: none;
}
.tour-toc-inner::-webkit-scrollbar { display: none; }
.tour-toc a {
  flex: 0 0 auto;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text-dim); white-space: nowrap;
  transition: all 120ms var(--ease);
}
.tour-toc a:hover { background: var(--line-soft); color: var(--text); }
.tour-toc a.active { background: var(--ink); color: var(--paper); }
[data-theme="dark"] .tour-toc a.active { background: var(--paper); color: var(--ink); }

/* Tournament page: tier + surface chips with new colour mapping. */
.t-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.t-chip-surface-clay  { background: rgba(194,107,58,0.12);  color: var(--clay-deep); }
.t-chip-surface-grass { background: rgba(63,122,46,0.12);   color: var(--grass-deep); }
.t-chip-surface-hard  { background: rgba(30,91,184,0.12);   color: var(--hard); }
.t-chip-tier-slam     { background: rgba(184,138,58,0.16);  color: #7A5820; }
.t-chip-tier-1000     { background: rgba(15,27,45,0.08);    color: var(--ink); }
.t-chip-tier-500      { background: rgba(15,27,45,0.06);    color: var(--text-dim); }
.t-chip-tier-250      { background: rgba(15,27,45,0.04);    color: var(--text-mute); }
.t-chip-tier-finals   { background: rgba(235,225,80,0.30);  color: #5E5510; }
.t-chip-status-live   { background: var(--clay); color: #fff; }
.t-chip-status-up     { background: rgba(15,27,45,0.08); color: var(--ink); }
.t-chip-status-done   { background: rgba(15,27,45,0.04); color: var(--text-mute); }
[data-theme="dark"] .t-chip-tier-1000,
[data-theme="dark"] .t-chip-tier-500,
[data-theme="dark"] .t-chip-tier-250,
[data-theme="dark"] .t-chip-status-up { background: rgba(234,241,248,0.10); color: var(--text); }
[data-theme="dark"] .t-chip-status-done { background: rgba(234,241,248,0.06); color: var(--text-dim); }
.t-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

/* Past champions table */
.champ-table {
  width: 100%; border-collapse: collapse; font-size: 15px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden;
}
.champ-table th, .champ-table td {
  padding: 14px 18px; text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.champ-table th {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-mute);
  background: var(--paper-2);
}
[data-theme="dark"] .champ-table th { background: rgba(255,255,255,0.04); }
.champ-table tr:last-child td { border-bottom: 0; }
.champ-table .year { font-family: var(--mono); font-weight: 500; color: var(--text-dim); width: 80px; }
.champ-table .champ-name { font-weight: 600; color: var(--ink); }
[data-theme="dark"] .champ-table .champ-name { color: var(--text); }
.champ-table .score { font-family: var(--mono); font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.champ-table .nat { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-mute); margin-right: 6px; }
@media (max-width: 720px) {
  .champ-table th, .champ-table td { padding: 10px 12px; font-size: 14px; }
  .champ-table .year { width: 60px; }
  .champ-table .score { font-size: 12px; }
}

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 18px 20px; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: var(--ink);
}
[data-theme="dark"] .faq-item summary { color: var(--text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 22px; font-weight: 400;
  color: var(--text-mute); transition: transform 200ms var(--ease);
}
.faq-item[open] summary::after { content: '–'; }
.faq-item .faq-body {
  padding: 0 20px 18px; font-size: 15px; line-height: 1.65;
  color: var(--text-dim);
}
.faq-item .faq-body p { margin: 0 0 10px; }
.faq-item .faq-body p:last-child { margin: 0; }

/* Related events grid */
.related-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.related-card {
  display: block; padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: all 160ms var(--ease);
}
.related-card:hover { border-color: var(--ink); transform: translateY(-2px); }
[data-theme="dark"] .related-card:hover { border-color: var(--paper); }
.related-card .rc-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 8px;
}
.related-card .rc-name { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
[data-theme="dark"] .related-card .rc-name { color: var(--text); }
.related-card .rc-meta { font-size: 13px; color: var(--text-dim); }

/* Anchor scroll offset for sticky TOC */
[id] { scroll-margin-top: 130px; }

/* ──────────────────────────────────────────────
   v5 · Tournament wrap-up article (auto-generated for completed events)
   ────────────────────────────────────────────── */
.tour-wrap {
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--clay);
  border-radius: 16px;
  padding: 28px 32px;
  margin: 0;
  scroll-margin-top: 96px;
}
.tour-wrap .wrap-eyebrow {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--clay-deep, var(--clay));
  margin-bottom: 8px;
}
.tour-wrap .wrap-headline {
  font-family: var(--serif, var(--sans));
  font-size: 30px; font-weight: 700;
  line-height: 1.18; letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 760px;
}
.tour-wrap p {
  font-size: 16px; line-height: 1.65;
  color: var(--text-dim);
  margin: 0 0 14px;
  max-width: 720px;
}
.tour-wrap .wrap-finals {
  margin: 18px 0 14px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  max-width: 640px;
}
.tour-wrap .wrap-finals-eyebrow {
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 10px;
}
.tour-wrap .wrap-finals-list {
  list-style: none; padding: 0; margin: 0;
}
.tour-wrap .wrap-finals-list li {
  font-size: 15px; line-height: 1.5;
  color: var(--text-dim);
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.tour-wrap .wrap-finals-list li:first-child { border-top: 0; }
.tour-wrap .wrap-finals-list li strong { color: var(--ink); font-weight: 700; }
.tour-wrap .wrap-score {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 13px;
  color: var(--text-mute);
  background: var(--paper-2);
  padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--line-soft);
}
.tour-wrap .wrap-lookahead {
  font-size: 14px; color: var(--text-mute);
  font-style: normal;
  border-top: 1px dashed var(--line-soft);
  padding-top: 14px;
  margin-top: 4px;
}
[data-theme="dark"] .tour-wrap { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .tour-wrap .wrap-headline { color: var(--paper); }
[data-theme="dark"] .tour-wrap .wrap-finals { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .tour-wrap .wrap-finals-list li strong { color: var(--paper); }
@media (max-width: 720px) {
  .tour-wrap { padding: 20px 18px; }
  .tour-wrap .wrap-headline { font-size: 24px; }
}

/* ──────────────────────────────────────────────
   v5 · Look-ahead 2027 group on /tournaments/
   ────────────────────────────────────────────── */
.lt-tour-group.lt-lookahead {
  position: relative;
  padding: 22px 24px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  margin-top: 32px;
}
.lt-tour-group.lt-lookahead .lt-tour-group-title {
  color: var(--ink);
}
.lt-tour-group.lt-lookahead .lt-tour-group-title::before {
  content: "→"; display: inline-block; margin-right: 10px;
  color: var(--grass); font-weight: 700;
}
.tour-card[data-status="lookahead"] {
  background: var(--paper);
  opacity: 0.95;
}
.tour-card[data-status="lookahead"] .badge {
  background: rgba(63,122,46,0.12);
  color: var(--grass-deep);
  border-color: rgba(63,122,46,0.35);
  font-weight: 700;
}
.tour-card[data-status="lookahead"]:hover { opacity: 1; }
[data-theme="dark"] .lt-tour-group.lt-lookahead { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }

/* ──────────────────────────────────────────────
   MATCHES CARD · Home page table wrapper
   ────────────────────────────────────────────── */
.matches-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(10,22,38,0.02), 0 6px 22px rgba(10,22,38,0.04);
}
[data-theme="dark"] .matches-card {
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 6px 22px rgba(0,0,0,0.3);
}
.matches-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-soft);
}
[data-theme="dark"] .matches-card__head {
  background: rgba(255,255,255,0.03);
  border-bottom-color: rgba(255,255,255,0.08);
}
.matches-card__title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: 13px; font-weight: 700;
  color: var(--text-strong);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.matches-card__pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 8px; height: 8px;
  color: var(--live);
  font-size: 8px;
  line-height: 1;
}
.matches-card__meta {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-meta);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.matches-card .match-list {
  /* Reset any margins so the list sits flush inside the card */
  padding: 0;
}
.matches-card__foot {
  display: flex; justify-content: center;
  padding: 14px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-card);
}
[data-theme="dark"] .matches-card__foot { border-top-color: rgba(255,255,255,0.08); }
.matches-card__more {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 160ms var(--ease);
}
.matches-card__more:hover {
  background: var(--paper-2);
  color: var(--text-strong);
}
[data-theme="dark"] .matches-card__more:hover { background: rgba(255,255,255,0.05); }

/* When inside a card, drop the row's hover side-padding hack so it doesn't shift */
.matches-card .match-row.v3:hover {
  padding-left: 16px; padding-right: 16px;
  margin: 0; border-radius: 0;
}

@media (max-width: 720px) {
  .matches-card__head { padding: 12px 14px; }
  .matches-card__title { font-size: 12px; }
  .matches-card__meta { font-size: 10px; }
  .matches-card__foot { padding: 12px 14px; }
}

/* ──────────────────────────────────────────────
   FLAG IMAGES · SVG flags (replaces emoji flags)
   Chrome on Windows does not render flag emoji
   so we serve country flags as small images.
   ────────────────────────────────────────────── */
.flag-img {
  display: inline-block;
  width: 20px; height: 15px;
  object-fit: cover;
  border-radius: 2px;
  vertical-align: -3px;
  box-shadow: 0 0 0 1px rgba(10,22,38,0.08);
  background: var(--paper-2);
}
[data-theme="dark"] .flag-img {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
}
.flag-fallback {
  display: inline-block;
  min-width: 18px; height: 14px; line-height: 14px;
  text-align: center;
  background: rgba(10,22,38,0.06);
  color: var(--text-meta);
  font-size: 11px; font-weight: 600;
  border-radius: 2px;
  vertical-align: -2px;
  padding: 0 4px;
}
[data-theme="dark"] .flag-fallback {
  background: rgba(255,255,255,0.06);
}

/* When .flag wraps a flag-img, kill the emoji-era font-size and make it
   behave as a flex container so the image sits cleanly next to text. */
.flag:has(.flag-img) {
  font-size: inherit !important;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* Larger flag for the country-cell on /watch/ index */
.country-cell .flag .flag-img { width: 32px; height: 24px; vertical-align: middle; }
.watch-box .where .flag .flag-img { width: 22px; height: 17px; }
.tour-card .city .flag .flag-img,
.preview-card-meta .flag .flag-img { width: 16px; height: 12px; }

/* Match-row players: smaller flag, aligned with name */
.match-row .mr-player .flag .flag-img,
.match-row.v3 .mr-player .flag .flag-img { width: 18px; height: 13px; vertical-align: -2px; }

/* Country-pill in the header: tiny */
.country-pick .flag .flag-img { width: 16px; height: 12px; }

@media (max-width: 720px) {
  .flag-img { width: 18px; height: 13px; }
  .country-cell .flag .flag-img { width: 26px; height: 20px; }
}

/* ──────────────────────────────────────────────────────────────────
   PLAYER PROFILE — v2 redesign (29 Apr 2026)
   Fixes: narrow 760px column, broken hero, ragged 5+1 stat row,
   floating bucket headers, lonely single-card sections.
   ────────────────────────────────────────────────────────────────── */

/* Width: open the page up to a comfortable 1080px. */
.player-profile { max-width: 1080px !important; padding: 8px 0 72px !important; }

/* Hero: photo + identity + actions in one airy strip.
   Resolves the duplicate .player-hero rules with explicit grid. */
.player-profile .player-hero {
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  gap: 36px !important;
  align-items: center !important;
  padding: 28px 0 28px !important;
  border-bottom: 1px solid var(--line, rgba(10,22,38,0.10)) !important;
  margin-bottom: 4px !important;
}
.player-profile .player-hero-photo {
  width: 220px !important; height: 220px !important;
  border-radius: 18px !important;
  background: var(--paper-2, #F4EEE0) !important;
  border: 1px solid rgba(10,22,38,0.06);
  overflow: hidden !important;
  flex-shrink: 0;
}
.player-profile .player-hero-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.player-profile .player-hero-text .eyebrow {
  font-family: var(--mono, 'Geist Mono', monospace);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--text-meta, #6b7280); font-weight: 600;
  margin: 0 0 10px;
}
.player-profile .player-hero-text h1 {
  margin: 0 0 14px !important;
  font-size: clamp(36px, 5vw, 52px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.02 !important;
  color: var(--text-strong, #0F1B2D);
}
.player-profile .player-hero-text .player-meta {
  font-size: 14.5px; color: var(--text-meta);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper-2, #F4EEE0);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 0;
}
.player-profile .player-hero-text .player-meta .flag .flag-img {
  width: 18px; height: 13px;
}

/* Social row inside the hero — pills already styled, just spacing */
.player-profile .player-hero-text .pp-social,
.player-profile .player-hero-text .player-socials,
.player-profile .player-hero-text .pp-actions {
  margin-top: 16px !important;
}

/* Bio block: more breathing room, soft beige paper */
.player-profile .pp-bio {
  background: transparent !important;
  border: none !important;
  padding: 24px 0 8px !important;
  margin-bottom: 16px;
}
.player-profile .pp-bio h2 { font-size: 22px !important; margin: 0 0 12px !important; }
.player-profile .pp-bio-prose { font-size: 16.5px !important; line-height: 1.7 !important; max-width: 72ch; }

/* Bucket headers — make them look intentional (left bar accent) */
.player-profile .pp-bucket-head {
  font-family: var(--mono, 'Geist Mono', monospace);
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.14em !important;
  color: var(--text-meta) !important;
  margin: 36px 0 16px !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid rgba(10,22,38,0.10) !important;
  position: relative;
}
.player-profile .pp-bucket-head::before {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 56px; height: 2px; background: var(--ball-deep, #C9DC2A);
}

/* RIGHT NOW status strip — single row, even cells */
.player-profile .pp-status {
  background: linear-gradient(180deg, #fff 0%, #fdfbf5 100%);
  border: 1px solid rgba(10,22,38,0.08);
  border-radius: 14px;
  padding: 8px !important;
  margin: 0 0 24px !important;
  box-shadow: 0 1px 0 rgba(10,22,38,0.02);
}
[data-theme="dark"] .player-profile .pp-status {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
.player-profile .pp-status .pp-kpi-row {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 1px !important;
  margin: 0 !important;
  background: rgba(10,22,38,0.06);
  border-radius: 8px;
  overflow: hidden;
}
[data-theme="dark"] .player-profile .pp-status .pp-kpi-row { background: rgba(255,255,255,0.06); }

/* Big-match temperament + other secondary kpi rows: auto-fit cards.
   Only applies to non-status guide-sections. */
.player-profile .guide-section:not(.pp-status) > .pp-kpi-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  margin: 8px 0 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.player-profile .guide-section:not(.pp-status) > .pp-kpi-row .pp-kpi {
  background: #fff !important;
  border: 1px solid rgba(10,22,38,0.08) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
}
[data-theme="dark"] .player-profile .guide-section:not(.pp-status) > .pp-kpi-row .pp-kpi {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.player-profile .pp-status .pp-kpi {
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 14px !important;
  text-align: left;
  display: flex; flex-direction: column; gap: 4px;
}
[data-theme="dark"] .player-profile .pp-status .pp-kpi { background: #0F1B2D; }
.player-profile .pp-status .pp-kpi:hover { border: none !important; background: #fdfbf5 !important; }
[data-theme="dark"] .player-profile .pp-status .pp-kpi:hover { background: rgba(255,255,255,0.04) !important; }
.player-profile .pp-kpi-value {
  font-size: 24px !important; font-weight: 800; letter-spacing: -0.01em;
  color: var(--text-strong) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.player-profile .pp-kpi-label {
  font-size: 10.5px !important; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-meta) !important; font-weight: 600;
}

/* Recent form pill row (chips) */
.player-profile .pp-form,
.player-profile .pp-form-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 4px 0 24px;
}
.player-profile .pp-form-chip,
.player-profile .form-pip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 10px;
  border-radius: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}

/* News block */
.player-profile .pp-news-block { padding: 0 !important; background: transparent !important; }
.player-profile .pp-news-block h2 { font-size: 22px !important; margin: 0 0 12px !important; }
.player-profile .pp-headline-quote {
  background: rgba(232, 249, 78, 0.15) !important;
  border-left: 3px solid var(--ball-deep, #C9DC2A) !important;
  border-radius: 6px;
  padding: 16px 18px !important;
}

/* Style block */
.player-profile .pp-style { padding: 0 !important; background: transparent !important; }
.player-profile .pp-style h2 { font-size: 22px !important; }
.player-profile .pp-style-summary { font-size: 16px !important; line-height: 1.65; max-width: 80ch; margin-bottom: 18px !important; }
.player-profile .ps-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}
@media (max-width: 900px) {
  .player-profile .ps-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
.player-profile .ps-card { padding: 14px 16px !important; border-radius: 10px !important; }

/* Surface splits: section heading + bars */
.player-profile .guide-section h2 {
  font-size: 22px !important; margin: 0 0 6px !important;
  letter-spacing: -0.01em; color: var(--text-strong);
}
.player-profile .guide-section .muted { font-size: 14px; color: var(--text-meta); margin: 0 0 16px; }

/* Serve & return fingerprint — restore balance */
.player-profile .serve-section { padding: 0 !important; }
.player-profile .serve-grid {
  grid-template-columns: 320px 1fr !important;
  gap: 32px !important;
  align-items: center !important;
}
@media (max-width: 820px) {
  .player-profile .serve-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* Big-match temperament */
.player-profile .pp-bigmatch,
.player-profile .pp-bm-card {
  background: #fff;
  border: 1px solid rgba(10,22,38,0.08);
  border-radius: 12px;
  padding: 20px 22px;
}
.player-profile .pp-bm-num {
  font-size: 30px; font-weight: 800; color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.player-profile .pp-bm-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-meta); margin-top: 4px;
}

/* Notable rivalries — nicer cards */
.player-profile .pp-rivalries { padding: 0 !important; background: transparent !important; }
.player-profile .pp-rivalries h2 { font-size: 22px !important; }
.player-profile .riv-narrow-grid { gap: 14px !important; }
.player-profile .riv-narrow {
  background: #fff;
  border: 1px solid rgba(10,22,38,0.08) !important;
  border-left: 3px solid var(--ball-deep, #C9DC2A) !important;
  padding: 14px 16px !important;
  border-radius: 8px;
}
[data-theme="dark"] .player-profile .riv-narrow {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08) !important;
  border-left-color: var(--ball-deep, #C9DC2A) !important;
}
.player-profile .riv-narrow-name { font-size: 15px !important; margin-bottom: 6px !important; }

/* Rivalry network — single card mode */
.player-profile .rivalry-network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

/* Career snapshot — make 3 stats consistent */
.player-profile .career-stats-grid,
.player-profile .pp-career-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 0 0 20px;
}
.player-profile .pp-stat-large,
.player-profile .career-stat {
  background: #fff;
  border: 1px solid rgba(10,22,38,0.08);
  border-radius: 12px;
  padding: 18px 20px;
  text-align: center;
}
.player-profile .pp-stat-large .v,
.player-profile .career-stat-value {
  font-size: 30px; font-weight: 800; color: var(--text-strong);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.player-profile .pp-stat-large .l,
.player-profile .career-stat-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-meta); font-weight: 600; margin-top: 4px;
}

/* Career table — tighten */
.player-profile .career-table-wrap { margin: 0 0 16px; border-radius: 10px !important; }
.player-profile .career-table th { font-size: 11px !important; letter-spacing: 0.06em !important; padding: 10px 14px !important; }
.player-profile .career-table td { padding: 10px 14px !important; font-size: 13.5px !important; }

/* Team & equipment */
.player-profile .pp-team { padding: 0 !important; background: transparent !important; }
.player-profile .pp-team h2 { font-size: 22px !important; }
.player-profile .pp-team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
@media (max-width: 720px) {
  .player-profile .pp-team-grid { grid-template-columns: 1fr !important; }
}
.player-profile .team-card {
  background: #fff;
  border: 1px solid rgba(10,22,38,0.08);
  border-radius: 12px;
  padding: 16px 18px !important;
  display: grid !important;
  grid-template-columns: 130px 1fr !important;
  column-gap: 14px !important;
  row-gap: 8px !important;
}
[data-theme="dark"] .player-profile .team-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
.player-profile .team-card dt { font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-meta); font-weight: 600; }
.player-profile .team-card dd { font-size: 14px !important; color: var(--text-body); }

/* Career highlights */
.player-profile .pp-highlights { padding: 0 !important; background: transparent !important; }
.player-profile .pp-highlights h2 { font-size: 22px !important; }
.player-profile .pp-highlight-list li { font-size: 15px !important; line-height: 1.6 !important; margin-bottom: 8px !important; }

/* Crumbs above hero */
.player-profile + .crumbs,
main > .container > .crumbs { font-size: 13px; margin: 12px 0 8px; color: var(--text-meta); }

/* Full-bleed responsive */
@media (max-width: 880px) {
  .player-profile { padding: 4px 0 56px !important; }
  .player-profile .player-hero {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: left;
  }
  .player-profile .player-hero-photo { width: 140px !important; height: 140px !important; border-radius: 14px !important; }
  .player-profile .pp-kpi-row { grid-template-columns: repeat(3, 1fr) !important; }
  .player-profile .pp-kpi-value { font-size: 20px !important; }
  .player-profile .career-stats-grid,
  .player-profile .pp-career-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .player-profile .pp-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   Match-row v4 — ATP-broadcast head-to-head layout
   Layout: [time] [P1 avatar+name] [vs/score] [P2 avatar+name] [watch pill]
   Tournament strip across the bottom.
   ========================================================================== */

/* Player avatar component (used in match-row v4 and elsewhere) */
.player-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  aspect-ratio: 1 / 1;            /* guarantee a true circle */
  background: #0F1842;
  color: #fff;
  line-height: 1;
  /* Soft outer halo + thin inner ring that follows the circle */
  box-shadow:
    0 1px 2px rgba(10,22,38,0.12),
    0 0 0 1px rgba(10,22,38,0.06);
  isolation: isolate;             /* keeps inner ring crisp on retina */
}
.player-avatar::after {
  /* Inner highlight ring — follows the circle, never looks square */
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55);
  pointer-events: none;
}
.player-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Pull the face up: anchor on the forehead/eye-line, ATP-style framing */
  object-position: center 22%;
  display: block;
  border-radius: 50%;
  transform: scale(1.04);          /* tiny zoom so heads aren't clipped at the edge */
  transform-origin: center 30%;
}
.player-avatar--initials .pa-initials {
  font-family: var(--sans);
  font-weight: 700; font-size: 0.40em; letter-spacing: 0.02em;
  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.18);
  line-height: 1;
}
.player-avatar--photo {
  background: #F5F7FA;
}
[data-theme="dark"] .player-avatar {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.06);
}
[data-theme="dark"] .player-avatar::after {
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.18);
}

/* Override v3 grid with v4-specific layout */
.match-row.v3.v4 {
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 16px 14px 10px;
  position: relative;
}
.match-row.v3.v4 .mr-time {
  align-items: flex-start;
}

/* H2H block — three columns: left side, center vs/score, right side */
.match-row.v3.v4 .mr-h2h {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.match-row.v3.v4 .mr-side {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.match-row.v3.v4 .mr-side--right {
  flex-direction: row-reverse;
  text-align: right;
}
.match-row.v3.v4 .mr-side--right .mr-name-wrap {
  align-items: flex-end;
  text-align: right;
}
.match-row.v3.v4 .mr-avatar-wrap { position: relative; flex-shrink: 0; }
.match-row.v3.v4 .mr-tick {
  position: absolute; bottom: -2px;
  background: var(--green-live, #19a04b); color: #fff;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; font-weight: 800; line-height: 18px;
  text-align: center; box-shadow: 0 0 0 2px var(--paper, #fff);
}
.match-row.v3.v4 .mr-side--left  .mr-tick { right: -2px; }
.match-row.v3.v4 .mr-side--right .mr-tick { left: -2px; }
[data-theme="dark"] .match-row.v3.v4 .mr-tick { box-shadow: 0 0 0 2px var(--paper, #0F1842); }

.match-row.v3.v4 .mr-name-wrap {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 3px; min-width: 0;
}
.match-row.v3.v4 .mr-name {
  font-family: var(--sans);
  font-weight: 700; font-size: 17px; line-height: 1.2;
  color: var(--text-strong, #0F1842); letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.match-row.v3.v4 .mr-flag {
  display: inline-block; line-height: 1;
}
.match-row.v3.v4 .mr-flag .flag-img {
  width: 20px; height: 14px; border-radius: 2px;
  vertical-align: middle;
}
.match-row.v3.v4 .mr-seed {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  color: var(--text-meta, #6B7280);
  font-variant-numeric: tabular-nums;
  background: rgba(10,22,38,0.05);
  padding: 1px 5px; border-radius: 3px;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .match-row.v3.v4 .mr-seed { background: rgba(255,255,255,0.08); }

.match-row.v3.v4 .mr-side.is-loser .mr-name { color: var(--text-meta, #6B7280); font-weight: 600; }
.match-row.v3.v4 .mr-side.is-loser .player-avatar { opacity: 0.62; }
.match-row.v3.v4 .mr-side.is-winner .mr-name { color: var(--text-strong, #0F1842); }

/* Center column — 'vs' or score */
.match-row.v3.v4 .mr-center {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; min-width: 36px;
}
.match-row.v3.v4 .mr-vs {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700; color: var(--text-meta, #6B7280);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px;
  background: rgba(10,22,38,0.04);
}
[data-theme="dark"] .match-row.v3.v4 .mr-vs { background: rgba(255,255,255,0.06); }
.match-row.v3.v4 .mr-center--score {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 700;
  color: var(--text-strong, #0F1842);
  white-space: nowrap;
}
.match-row.v3.v4 .mr-center--score .set { display: inline-block; margin: 0 4px; }

/* Right rail — watch pill or time */
.match-row.v3.v4 .mr-right {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-meta, #6B7280);
  flex-shrink: 0;
}

/* Time column on the very left — large, tabular */
.match-row.v3.v4 .lt-status.is-time {
  font-size: 17px; font-weight: 700;
  color: var(--text-strong, #0F1842);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  padding: 0;
}
.match-row.v3.v4 .lt-status.is-final {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
}
.match-row.v3.v4 .lt-status.is-live {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--clay-deep, #7A1A2C); color: #fff;
  padding: 3px 8px; border-radius: 3px;
}

/* Tournament strip — bottom eyebrow spanning full row width */
.match-row.v3.v4 .mr-strip {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  color: var(--text-meta, #6B7280);
  text-transform: none; letter-spacing: 0;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.match-row.v3.v4 .mr-emblem-strip {
  display: inline-flex; align-items: center; flex-shrink: 0;
}
.match-row.v3.v4 .mr-emblem-strip img { width: 18px; height: 18px; display: block; opacity: 0.85; }
.match-row.v3.v4 .mr-strip .tour-pill {
  font-size: 9px; padding: 1px 5px; border-radius: 2px;
  font-weight: 700; letter-spacing: 0.05em; flex-shrink: 0;
}
.match-row.v3.v4 .mr-strip .mr-tour-name {
  font-weight: 600; color: var(--text-body, #2A3548);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.match-row.v3.v4 .mr-strip .sep { color: var(--text-faint, #9AA3B2); }

/* Pulse-dot on serving player avatar (live state hook for future) */
.match-row.v3.v4.is-live .mr-side.is-serving .mr-avatar-wrap::before {
  content: ''; position: absolute; top: -2px; right: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green-live, #19a04b);
  box-shadow: 0 0 0 2px var(--paper, #fff), 0 0 8px var(--green-live, #19a04b);
  animation: serving-pulse 1.4s ease-out infinite;
}
@keyframes serving-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.18); }
}

/* Mobile — stack the two players vertically so full names fit */
@media (max-width: 720px) {
  .match-row.v3.v4 {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "time   h2h"
      "strip  strip"
      "right  right";
    column-gap: 10px;
    row-gap: 8px;
    padding: 12px 10px 10px;
  }
  .match-row.v3.v4 .mr-time  { grid-area: time; }
  .match-row.v3.v4 .mr-h2h   {
    grid-area: h2h;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
  }
  /* Each side becomes a full-width row with avatar | name | (no flag) */
  .match-row.v3.v4 .mr-side {
    width: 100%;
    gap: 10px;
    min-width: 0;
    flex-direction: row;
    text-align: left;
  }
  .match-row.v3.v4 .mr-side--right {
    flex-direction: row; /* same direction as left on mobile */
    text-align: left;
  }
  .match-row.v3.v4 .mr-side--right .mr-name-wrap {
    align-items: flex-start;
    text-align: left;
  }
  .match-row.v3.v4 .mr-side--right .mr-tick {
    left: auto;
    right: -2px;
  }
  .match-row.v3.v4 .mr-name-wrap { gap: 2px; flex: 1 1 auto; min-width: 0; align-items: flex-start; }
  .match-row.v3.v4 .mr-name {
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;          /* allow wrap if long */
    overflow: visible;
    text-overflow: clip;
  }
  .match-row.v3.v4 .mr-flag { display: none; }
  .match-row.v3.v4 .mr-seed { font-size: 9px; padding: 0 5px; line-height: 1.3; }
  .match-row.v3.v4 .player-avatar { width: 38px !important; height: 38px !important; }
  .match-row.v3.v4 .player-avatar--initials .pa-initials { font-size: 13px; }

  /* The center 'vs' becomes a thin divider between the stacked sides */
  .match-row.v3.v4 .mr-center,
  .match-row.v3.v4 .mr-center--vs { display: none; }
  /* Score-mode center stays visible but moves to its own row */
  .match-row.v3.v4 .mr-center--score {
    display: block;
    font-size: 12px;
    margin: 2px 0;
    text-align: left;
    padding-left: 48px; /* align under avatar column */
  }

  .match-row.v3.v4 .mr-strip {
    grid-area: strip;
    margin-top: 0;
    padding: 0 2px;
    font-size: 10px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .match-row.v3.v4 .mr-emblem-strip img { width: 14px; height: 14px; }
  .match-row.v3.v4 .mr-strip .tour-pill { font-size: 8px; padding: 1px 4px; }
  .match-row.v3.v4 .mr-strip .mr-tour-name { white-space: normal; }

  .match-row.v3.v4 .mr-right {
    grid-area: right;
    border-top: 1px dashed rgba(10,22,38,0.10);
    padding-top: 8px;
    justify-content: flex-start;
  }
  [data-theme="dark"] .match-row.v3.v4 .mr-right { border-top-color: rgba(255,255,255,0.10); }

  .match-row.v3.v4 .lt-status.is-time { font-size: 13px; }
  .match-row.v3.v4 .mr-time .lt-status { font-size: 13px; }
}
@media (max-width: 480px) {
  .match-row.v3.v4 {
    grid-template-columns: 56px 1fr;
    column-gap: 8px;
    padding: 10px 8px 8px;
  }
  .match-row.v3.v4 .player-avatar { width: 34px !important; height: 34px !important; }
  .match-row.v3.v4 .player-avatar--initials .pa-initials { font-size: 12px; }
  .match-row.v3.v4 .mr-name { font-size: 13px; }
  .match-row.v3.v4 .mr-side { gap: 8px; }
  .match-row.v3.v4 .mr-time .lt-status { font-size: 12px; }
  .match-row.v3.v4 .lt-status.is-time { font-size: 12px; }
}

/* ─── Ticker pills (tour chips) ─────────────────────────────────────────────
   Colour-coded so ATP/WTA/Challenger/ITF/WTA-125 are visually distinct in the
   marquee strip. Sits inline before the player names.
*/
.ticker-pill {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: 2px;
  color: #fff;
  background: #6B7280;
  white-space: nowrap;
}
.ticker-pill.tk-atp    { background: #0F1842; }                 /* Navy: ATP */
.ticker-pill.tk-wta    { background: #B6175A; }                 /* Magenta: WTA */
.ticker-pill.tk-ch     { background: #2B6CB0; color: #fff; }    /* Blue: Challenger */
.ticker-pill.tk-wta125 { background: #C9437A; color: #fff; }    /* Light pink: WTA 125 */
.ticker-pill.tk-itf    { background: #4A5568; color: #fff; }    /* Slate: ITF */
.ticker-pill.tk-other  { background: #6B7280; }
[data-theme="dark"] .ticker-pill.tk-atp { background: #1E2A5C; }

/* ─── Match-row v4: clickable player sides + expand button + heads-up panel ──
   The whole row used to be a single <a>. As of April 30 2026 it's a <div>
   (because we want nested <a> for player profiles), and JS handles row-level
   navigation when the user clicks an empty area of the row.
*/
.match-row.v3.v4 { cursor: pointer; }
.match-row.v3.v4 .mr-side--linked {
  text-decoration: none; color: inherit;
  border-radius: 8px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 100ms var(--ease);
  cursor: pointer;
}
.match-row.v3.v4 .mr-side--linked:hover {
  background: rgba(15, 24, 66, 0.06);
}
[data-theme="dark"] .match-row.v3.v4 .mr-side--linked:hover {
  background: rgba(212, 255, 61, 0.10);
}
.match-row.v3.v4 .mr-side--linked .mr-name {
  border-bottom: 1px dashed transparent;
  transition: border-color 100ms var(--ease);
}
.match-row.v3.v4 .mr-side--linked:hover .mr-name {
  border-bottom-color: currentColor;
}

/* Right-rail expand button */
.match-row.v3.v4 .mr-expand {
  appearance: none;
  border: 1px solid rgba(15, 24, 66, 0.14);
  background: rgba(255, 255, 255, 0.6);
  width: 28px; height: 28px;
  margin-left: 8px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-body, #0F1842);
  font-size: 18px; line-height: 1;
  transition: transform 180ms var(--ease), background 120ms var(--ease), border-color 120ms var(--ease);
  flex-shrink: 0;
  padding: 0;
}
.match-row.v3.v4 .mr-expand:hover {
  background: var(--accent, #D4FF3D);
  border-color: rgba(15, 24, 66, 0.35);
}
.match-row.v3.v4.is-expanded .mr-expand {
  transform: rotate(180deg);
  background: var(--accent, #D4FF3D);
  border-color: rgba(15, 24, 66, 0.35);
}
[data-theme="dark"] .match-row.v3.v4 .mr-expand {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  color: #E8ECF7;
}
[data-theme="dark"] .match-row.v3.v4 .mr-expand:hover,
[data-theme="dark"] .match-row.v3.v4.is-expanded .mr-expand {
  background: var(--accent, #D4FF3D);
  color: #0F1842;
}
.match-row.v3.v4 .mr-expand-icon { display: block; pointer-events: none; }

.match-row.v3.v4 .mr-right {
  display: flex; align-items: center; gap: 8px;
}

/* ─── Heads-up panel ─────────────────────────────────────────────────────── */
.match-row.v3.v4 .mr-headsup {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding: 18px 16px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(15,24,66,0.04) 0%, rgba(15,24,66,0.02) 100%);
  border: 1px solid rgba(15, 24, 66, 0.10);
  animation: huFadeIn 220ms var(--ease, ease) both;
}
[data-theme="dark"] .match-row.v3.v4 .mr-headsup {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border-color: rgba(255,255,255,0.10);
}
@keyframes huFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.match-row.v3.v4 .hu-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.match-row.v3.v4 .hu-side {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  text-align: center;
  min-width: 0;
}
.match-row.v3.v4 .hu-avatar { display: block; }
.match-row.v3.v4 .hu-avatar .player-avatar { width: 88px !important; height: 88px !important; }
.match-row.v3.v4 .hu-avatar .player-avatar--initials .pa-initials { font-size: 28px; letter-spacing: 0.04em; }
.match-row.v3.v4 .hu-id {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
  font-size: 16px; font-weight: 700;
  color: var(--text-strong, #0F1842);
  line-height: 1.2;
}
[data-theme="dark"] .match-row.v3.v4 .hu-id { color: #F0F2FA; }
.match-row.v3.v4 .hu-name {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 100ms var(--ease);
}
.match-row.v3.v4 a.hu-name:hover { border-bottom-color: currentColor; }
.match-row.v3.v4 .hu-flag .flag-img { width: 20px; height: 15px; vertical-align: -2px; border-radius: 2px; }
.match-row.v3.v4 .hu-seed {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-meta, #6B7280);
}
.match-row.v3.v4 .hu-vs {
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-size: 22px;
  color: var(--text-meta, #6B7280);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.match-row.v3.v4 .hu-meta {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
}
.match-row.v3.v4 .hu-meta-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(15, 24, 66, 0.06);
  color: var(--text-body, #0F1842);
  text-transform: uppercase;
  line-height: 1.4;
}
[data-theme="dark"] .match-row.v3.v4 .hu-meta-pill {
  background: rgba(255,255,255,0.06);
  color: #E8ECF7;
}
.match-row.v3.v4 .hu-meta-pill.tour-pill { color: #fff; }
.match-row.v3.v4 .hu-meta-pill.tour-pill.atp { background: #0F1842; }
.match-row.v3.v4 .hu-meta-pill.tour-pill.wta { background: #B6175A; }

.match-row.v3.v4 .hu-ctas {
  margin-top: 14px;
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
}
.match-row.v3.v4 .hu-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  background: rgba(15, 24, 66, 0.08);
  color: var(--text-strong, #0F1842);
  border: 1px solid transparent;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.match-row.v3.v4 .hu-cta:hover {
  background: rgba(15, 24, 66, 0.14);
  border-color: rgba(15, 24, 66, 0.20);
}
.match-row.v3.v4 .hu-cta--watch {
  background: var(--accent, #D4FF3D);
  color: #0F1842;
}
.match-row.v3.v4 .hu-cta--watch:hover {
  background: #E8FF6B;
  border-color: #0F1842;
}
[data-theme="dark"] .match-row.v3.v4 .hu-cta {
  background: rgba(255,255,255,0.08);
  color: #F0F2FA;
}
[data-theme="dark"] .match-row.v3.v4 .hu-cta:hover {
  background: rgba(255,255,255,0.14);
}
[data-theme="dark"] .match-row.v3.v4 .hu-cta--watch {
  background: var(--accent, #D4FF3D);
  color: #0F1842;
}
.match-row.v3.v4 .hu-cta .arr { font-weight: 800; }

/* Mobile: stack heads-up vertically so 88px avatars don't crowd ───────────── */
@media (max-width: 720px) {
  .match-row.v3.v4 .mr-expand {
    width: 26px; height: 26px;
    font-size: 16px;
    margin-left: 6px;
  }
  .match-row.v3.v4 .hu-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }
  .match-row.v3.v4 .hu-vs {
    font-size: 18px;
    padding: 4px 0;
  }
  .match-row.v3.v4 .hu-avatar .player-avatar { width: 72px !important; height: 72px !important; }
  .match-row.v3.v4 .hu-id { font-size: 15px; }
  .match-row.v3.v4 .mr-headsup { padding: 14px 12px 12px; }
  .match-row.v3.v4 .hu-cta { padding: 8px 14px; font-size: 12px; }
}
@media (max-width: 480px) {
  .match-row.v3.v4 .mr-side--linked { padding: 3px 4px; margin: -3px -4px; }
}