/* ============================================================
   FOREBET KENYA — Design System
   Palette: Committed dark. Cobalt brand, green function.
   Target: WCAG AA. Mobile-first.
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Brand palette (OKLCH) */
  --bg:            oklch(0.09 0.000 0);
  --surface:       oklch(0.13 0.008 225);
  --surface-raised:oklch(0.165 0.009 225);
  --border:        oklch(0.22 0.012 225);
  --border-subtle: oklch(0.17 0.008 225);

  /* Odds chips. Their own ramp rather than the generic surface tokens: they are
     the one control that has to read as pressable from across the page, and
     tying them to --surface is what made them invisible. */
  --odds-surface:       oklch(0.21 0.011 225);
  --odds-surface-hover: oklch(0.26 0.014 225);
  --odds-edge:          oklch(0.48 0.020 225);

  --ink:           oklch(0.95 0.000 0);
  --ink-secondary: oklch(0.65 0.010 225);
  --ink-muted:     oklch(0.58 0.010 225);  /* 4.5:1 on --surface-raised */

  --brand:         oklch(0.55 0.130 228);   /* cobalt — brand identity */
  --brand-dim:     oklch(0.18 0.040 228);
  --brand-hover:   oklch(0.60 0.130 228);
  --brand-ink:     oklch(0.68 0.120 228);  /* brand as text: 4.5:1 on raised */

  --green:         oklch(0.72 0.18  145);   /* wins, CTAs, positive */
  --green-dim:     oklch(0.20 0.055 145);
  --green-hover:   oklch(0.76 0.18  145);

  --red:           oklch(0.62 0.20  25);    /* loss, warning */
  --red-dim:       oklch(0.18 0.060 25);

  --amber:         oklch(0.76 0.16  75);    /* jackpot, special */
  --amber-dim:     oklch(0.20 0.055 75);

  --live-red:      oklch(0.65 0.22  25);

  /* Semantic */
  --odd-home:      var(--green);
  --odd-draw:      oklch(0.70 0.10  228);
  --odd-away:      var(--red);

  /* Elevation */
  --shadow-sm:     0 1px 3px oklch(0 0 0 / 0.4);
  --shadow-md:     0 4px 12px oklch(0 0 0 / 0.5);
  --shadow-lg:     0 12px 32px oklch(0 0 0 / 0.6);

  /* Layout */
  --sidebar-w:     220px;
  --betslip-w:     296px;
  --header-h:      56px;
  --ticker-h:      32px;

  /* Touch */
  --tap: 44px;

  /* Radius */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;

  /* Type
     Archivo is a grotesque built for dense interface and data work; it has the
     sturdiness this needs without Inter's ubiquity. IBM Plex Mono carries every
     figure — odds, money, kickoff times — because a betting slip lives or dies
     on whether numbers line up in a column.
     Fallbacks are metric-adjacent to keep the swap from shifting layout. */
  --font-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Type scale — fixed rem, ~1.2 ratio. Dense product UI needs spatial
     predictability, so no fluid clamp() here. */
  --t-xs:   0.6875rem;  /* 11px — meta, labels */
  --t-sm:   0.75rem;    /* 12px — secondary */
  --t-base: 0.875rem;   /* 14px — body, UI default */
  --t-md:   1.0625rem;  /* 17px — card and section titles */
  --t-lg:   1.3125rem;  /* 21px — page headings */
  --t-xl:   1.75rem;    /* 28px — featured odds */

  /* Z-index scale */
  --z-sidebar:  10;
  --z-header:   20;
  --z-drawer:   30;
  --z-betslip:  25;
  --z-modal:    40;
  --z-toast:    50;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.5;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

/* Every figure on the page: aligned in columns, unambiguous zero. */
[class*="odds"], [class*="amount"], [class*="score"], [class*="balance"],
.money, .match-time, .stat-v, .num {
  font-variant-numeric: tabular-nums lining;
}
input, button { font-size: inherit; }
[hidden] { display: none !important; }

/* ── LIVE TICKER ─────────────────────────────────────────── */
.ticker {
  height: var(--ticker-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
  animation: ticker-scroll 60s linear infinite;
  padding-left: 100%;
  font-size: 12px;
  color: var(--ink-secondary);
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ticker-live { color: var(--live-red); font-weight: 600; font-size: 10px; }
.ticker-score { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }

/* ── HEADER ──────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Menu toggle (mobile) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  color: var(--ink);
}
.menu-icon {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.menu-icon::before, .menu-icon::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: currentColor;
  left: 0;
}
.menu-icon::before { top: -5px; }
.menu-icon::after  { top: 5px; }

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-img { height: 28px; width: auto; display: block; }

/* Header nav */
.header-nav {
  display: flex;
  gap: 2px;
  flex: 1;
}
.hnav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  transition: color .15s, background .15s;
  position: relative;
}
.hnav-link:hover { color: var(--ink); background: var(--surface-raised); text-decoration: none; }
.hnav-link.active { color: var(--ink); }
.hnav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--green);
  border-radius: 2px 2px 0 0;
}
.live-badge {
  background: oklch(0.52 0.21 25);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}

/* Header end */
.header-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.balance-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px 6px 4px 10px;
}
.balance-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.balance-amount {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.auth-btns { display: flex; gap: 6px; }

.betslip-toggle {
  position: relative;
  background: none;
  border: 1px solid var(--border);
  color: var(--ink-secondary);
  padding: 7px;
  border-radius: var(--r-md);
  transition: color .15s, background .15s, border-color .15s;
}
.betslip-toggle:hover { color: var(--ink); background: var(--surface-raised); border-color: var(--border); }
.betslip-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--green);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .15s, color .15s, opacity .15s, border-color .15s;
  line-height: 1;
  white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--green);
  color: oklch(0.09 0.000 0);
  border-color: var(--green);
}
.btn-primary:hover:not(:disabled) { background: var(--green-hover); border-color: var(--green-hover); }

.btn-ghost {
  background: none;
  color: var(--ink-secondary);
  border-color: var(--border);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-raised); color: var(--ink); }

.btn-place {
  background: var(--green);
  color: oklch(0.09 0 0);
  border: none;
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: background .15s, transform .1s;
}
.btn-place:hover:not(:disabled) { background: var(--green-hover); }
.btn-place:active:not(:disabled) { transform: scale(0.98); }

.deposit-btn {
  background: var(--green);
  color: oklch(0.09 0 0);
  border: none;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 700;
  transition: background .15s;
}
.deposit-btn:hover { background: var(--green-hover); }

.w-full { width: 100%; }
.mt-2   { margin-top: 8px; }

/* ── MOBILE DRAWER ───────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.6);
  z-index: var(--z-drawer);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  backdrop-filter: blur(2px);
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-close {
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 18px;
  padding: 4px;
}

.drawer-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}
.drawer-link {
  display: block;
  padding: 13px 20px;
  color: var(--ink-secondary);
  font-size: 14px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background .15s, color .15s;
}
.drawer-link:hover { background: var(--surface-raised); color: var(--ink); text-decoration: none; }

.drawer-footer { padding: 16px; border-top: 1px solid var(--border); }

/* ── PAGE LAYOUT ─────────────────────────────────────────── */
.page-layout {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--betslip-w);
  align-items: start;
  gap: 0;
  min-height: calc(100vh - var(--header-h) - var(--ticker-h));
}

/* ── SPORTS SIDEBAR ──────────────────────────────────────── */
.sports-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--ticker-h));
  max-height: calc(100vh - var(--header-h) - var(--ticker-h));
  overflow-y: auto;
  border-right: 1px solid var(--border-subtle);
  padding-bottom: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sports-sidebar::-webkit-scrollbar { width: 4px; }
.sports-sidebar::-webkit-scrollbar-track { background: transparent; }
.sports-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.sidebar-block { padding: 16px 12px; border-bottom: 1px solid var(--border-subtle); }
.sidebar-heading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted);
  margin-bottom: 8px;
  padding: 0 4px;
}

.sport-list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.sport-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s;
  user-select: none;
}
.sport-item:hover { background: var(--surface-raised); color: var(--ink); }
.sport-item.active { background: var(--brand-dim); color: var(--brand-ink); }
.sport-icon { font-size: 15px; width: 20px; text-align: center; }
.sport-name { flex: 1; }
.sport-count {
  font-size: 10px;
  color: var(--ink-muted);
  background: var(--surface-raised);
  padding: 1px 6px;
  border-radius: 10px;
  font-family: var(--font-mono);
}
.sport-item.active .sport-count { background: var(--brand-dim); color: var(--brand-ink); }

.league-nav { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.league-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-secondary);
  font-size: 12px;
  transition: background .15s, color .15s;
}
.league-nav-item:hover { background: var(--surface-raised); color: var(--ink); }
.league-nav-item.active { color: var(--green); }
.league-nav-flag { font-size: 13px; }
.league-nav-name { flex: 1; }

/* Sidebar promo */
.sidebar-promo {
  background: linear-gradient(135deg, var(--amber-dim), oklch(0.14 0.03 228));
  border: 1px solid oklch(0.28 0.06 75);
  border-radius: var(--r-md);
  margin: 12px;
  padding: 16px !important;
  border-bottom: none !important;
}
.promo-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--amber);
  margin-bottom: 4px;
}
.promo-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--amber);
  font-family: var(--font-mono);
  line-height: 1.2;
}
.promo-sub { font-size: 11px; color: var(--ink-secondary); margin-top: 2px; }

/* ── MAIN CONTENT ────────────────────────────────────────── */
.main-content {
  border-right: 1px solid var(--border-subtle);
  min-height: calc(100vh - var(--header-h) - var(--ticker-h));
  /* A grid item defaults to min-width:auto, so wide content (the sport rail,
     the promo strip) stretches this past its track instead of being clipped to
     it. Without this the rail measures itself against 667px inside a 375px
     screen, its own overflow-x never engages, and the last sports sit off the
     edge unreachable. */
  min-width: 0;
}

/* API status */
.api-status {
  padding: 8px 16px;
  font-size: 11px;
  color: var(--ink-muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
}
.api-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse-live 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

/* Filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
  flex-wrap: wrap;
  position: sticky;
  top: var(--header-h);
  z-index: 5;
}
.filter-tabs { display: flex; gap: 2px; }
.filter-tab {
  background: none;
  border: none;
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  transition: background .15s, color .15s;
}
.filter-tab:hover { background: var(--surface-raised); color: var(--ink); }
.filter-tab.active { background: var(--surface-raised); color: var(--ink); font-weight: 600; }

.filter-markets { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.market-pill {
  background: none;
  border: 1px solid var(--border);
  color: var(--ink-secondary);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  transition: all .15s;
}
.market-pill:hover { border-color: var(--brand); color: var(--brand-ink); }
.market-pill.active { background: var(--brand-dim); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }

/* Featured match */
.featured-match {
  margin: 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.featured-match::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--brand));
}
.featured-inner { padding: 20px; }
.featured-league {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 16px;
}
.featured-kickoff {
  font-size: 11px;
  color: var(--ink-muted);
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--font-mono);
}
.featured-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.featured-team { text-align: center; }
.featured-team-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}
.featured-team-record { font-size: 11px; color: var(--ink-muted); margin-top: 4px; }
.featured-vs {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--surface);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.featured-odds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* ── ODDS BUTTON ─────────────────────────────────────────── */
/* The most-tapped element on the site. It used to sit at 1.04:1 against the row
   behind it with a border at 1.16:1 against its own fill, so it read as text
   floating on the page rather than as something you press. Two dark greys
   cannot carry 3:1 between them, so the border does the work: --odds-edge is
   light enough to clear 3:1 against the row, which is what makes the chip
   read as a chip. */
.odds-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 8px;
  background: var(--odds-surface);
  border: 1px solid var(--odds-edge);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  position: relative;
  overflow: hidden;
}
.odds-btn:hover {
  background: var(--odds-surface-hover);
  border-color: var(--ink-secondary);
}
.odds-btn.selected {
  background: var(--green-dim);
  border-color: var(--green);
}
.odds-btn.selected .odds-value { color: var(--green); }
.odds-btn:active { transform: scale(0.97); }

/* Column name on a row's odds chip. Redundant on desktop, where the sticky
   list header names the columns once; essential on mobile, where the row
   restacks and the odds sit on their own line with no header above them. */
.odds-label-col { display: none; }

.odds-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.odds-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.odds-btn.featured-odds-btn .odds-value { font-size: 20px; }

/* Odds flash animations */
@keyframes flash-up {
  0%   { background: var(--green-dim); }
  100% { background: transparent; }
}
@keyframes flash-down {
  0%   { background: var(--red-dim); }
  100% { background: transparent; }
}
.odds-btn.flash-up   { animation: flash-up   .6s ease-out; }
.odds-btn.flash-down { animation: flash-down .6s ease-out; }

.odds-arrow {
  font-size: 8px;
  position: absolute;
  top: 4px;
  right: 4px;
}
.odds-arrow.up   { color: var(--green); }
.odds-arrow.down { color: var(--red); }

/* ── MATCHES LIST ────────────────────────────────────────── */
.league-group { border-bottom: 1px solid var(--border-subtle); }

.league-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.league-group-header:hover { background: var(--surface-raised); }
.league-group-flag { font-size: 14px; }
.league-group-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.league-group-count {
  font-size: 10px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.league-group-chevron {
  color: var(--ink-muted);
  font-size: 10px;
  transition: transform .2s;
}
.league-group.collapsed .league-group-chevron { transform: rotate(-90deg); }
.league-group.collapsed .match-rows { display: none; }

/* Match row */
.match-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
  cursor: default;
  transition: background .12s;
}
.match-row:hover { background: var(--surface); }
.match-row:last-child { border-bottom: none; }

.match-time-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.match-time {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.match-time.live {
  color: var(--live-red);
  display: flex;
  align-items: center;
  gap: 3px;
}
.match-time.live::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--live-red);
  border-radius: 50%;
  animation: pulse-live 1.5s ease-in-out infinite;
}
.match-minute {
  font-size: 10px;
  color: var(--live-red);
  font-family: var(--font-mono);
}

.match-teams {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.match-score {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-raised);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
}

.match-odds {
  display: flex;
  gap: 4px;
  align-items: center;
}
.match-odds .odds-btn {
  min-width: 56px;
  padding: 7px 6px;
}
.match-odds .odds-value { font-size: 13px; }

/* More markets */
/* The way into every other market on a fixture. At 10px in muted grey with no
   noun it read as a footnote; Betika puts the same thing in green and says
   "Markets", and theirs gets used. */
.match-more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  /* Fixed width, not content width. .match-odds is an `auto` grid column, so a
     link that sizes to its own text moves the odds chips left or right
     depending on how many markets that fixture happens to have — rows would not
     line up with each other, let alone with the column header. */
  min-width: 92px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
  padding: 4px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s;
}
.match-more:hover { color: var(--ink); }

/* Column headers for the odds grid. The 1/X/2 labels used to repeat on every
   single row — three redundant strings per fixture, and on a phone that is most
   of the vertical space a row has. Named once here instead.

   The header mirrors .match-row's grid and .match-odds' flex exactly, including
   an invisible stand-in for the +markets link, because .match-odds is an `auto`
   column whose left edge moves with that link's width. Anything that only
   approximates the row's structure drifts out of line as soon as a fixture has
   a different market count. */
.match-list-head {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 7px 16px;
  position: sticky;
  top: 0;
  z-index: var(--z-sidebar);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.match-list-head-odds {
  display: flex;
  gap: 4px;
  align-items: center;
}
.match-list-head-odds span {
  /* Same box as .match-odds .odds-btn, padding included, or the labels sit off
     centre from the chips they name. flex-shrink off: the header is narrower
     than the row otherwise, and every cell drifts left. */
  flex: 0 0 56px;
  min-width: 56px;
  padding: 0;
  text-align: center;
}
/* Occupies the +markets link's width without being read out or seen. Matches
   .match-more's fixed width rather than guessing at its text. */
.match-list-head-odds span.match-list-head-spacer {
  flex: 0 0 92px;
  min-width: 92px;
  padding: 4px 6px;
  visibility: hidden;
}

/* ── BET SLIP ────────────────────────────────────────────── */
.betslip {
  position: sticky;
  top: calc(var(--header-h) + var(--ticker-h));
  max-height: calc(100vh - var(--header-h) - var(--ticker-h));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border-subtle);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.betslip::-webkit-scrollbar { width: 4px; }
.betslip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.betslip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
  flex-shrink: 0;
}
.betslip-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.betslip-type-toggle {
  display: flex;
  background: var(--surface-raised);
  border-radius: var(--r-sm);
  padding: 2px;
  gap: 2px;
}
.type-btn {
  background: none;
  border: none;
  color: var(--ink-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 3px;
  transition: background .15s, color .15s;
}
.type-btn.active { background: var(--surface); color: var(--ink); }

.betslip-clear {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 11px;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  transition: color .15s;
}
.betslip-clear:hover { color: var(--red); }

.betslip-close {
  display: none;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 18px;
  padding: 4px;
  border-radius: var(--r-sm);
}
.betslip-close:hover { color: var(--ink); }

.betslip-body {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.betslip-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--ink-muted);
  font-size: 12px;
  text-align: center;
  min-height: 200px;
}

/* Selection card */
.selection-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  position: relative;
}
.sel-match {
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 2px;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sel-market { font-size: 11px; color: var(--ink-secondary); margin-bottom: 6px; }
.sel-footer { display: flex; align-items: center; justify-content: space-between; }
.sel-pick {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.sel-odds {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
}
.sel-remove {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 14px;
  padding: 2px;
  line-height: 1;
  transition: color .15s;
}
.sel-remove:hover { color: var(--red); }

/* Betslip footer */
.betslip-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.stake-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.stake-label { font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.stake-quick { display: flex; gap: 4px; }
.stake-quick-btn {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--ink-secondary);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 3px;
  transition: all .15s;
}
.stake-quick-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }

.stake-input {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  outline: none;
  transition: border-color .15s;
  -moz-appearance: textfield;
}
.stake-input::-webkit-inner-spin-button,
.stake-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.stake-input:focus { border-color: var(--brand); }

.payout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.payout-label { color: var(--ink-secondary); }
.payout-odds {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
}
.payout-win { padding-top: 4px; border-top: 1px solid var(--border-subtle); }
.payout-amount {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--green);
}
/* Payout ceiling notice. Amber rather than red: the slip is not broken, it is
   over a business limit, and the message names the stake that would work. */
.betslip-warn {
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm, 6px);
  background: var(--amber-dim);
  color: var(--amber);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.betslip-terms {
  font-size: 10px;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.4;
}

/* ── MODALS ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.7);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modal-in .2s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 28px 24px;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: modal-slide-in .2s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes modal-slide-in {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 18px;
  padding: 4px;
  border-radius: var(--r-sm);
  transition: color .15s, background .15s;
  line-height: 1;
}
.modal-close:hover { color: var(--ink); background: var(--surface-raised); }

.modal-logo {
  height: 24px;
  width: auto;
  display: block;
  margin-bottom: 6px;
}

.modal-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--ink);
  text-wrap: balance;
}

/* Form fields */
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-secondary);
}
.field-input {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink);
  padding: 11px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.field-input:focus { border-color: var(--brand); }
.field-input::placeholder { color: var(--ink-muted); }

.field-prefix-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color .15s;
  background: var(--surface-raised);
}
.field-prefix-wrap:focus-within { border-color: var(--brand); }
.field-prefix {
  padding: 0 12px;
  background: var(--surface);
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.field-prefix-wrap .field-input { border: none; background: transparent; }
.field-prefix-wrap .field-input:focus { border: none; }

.field-pass-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.field-pass-wrap .field-input { padding-right: 40px; width: 100%; }
.pass-toggle {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--ink-muted);
  cursor: pointer;
  line-height: 1;
}

.field-hint { font-size: 11px; color: var(--ink-muted); }
.field-link { color: var(--brand-ink); font-size: 12px; }
.field-link:hover { text-decoration: underline; }
.field-optional { color: var(--ink-muted); font-weight: 400; }

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-secondary);
  line-height: 1.5;
}
.field-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--green);
}
.field-check a { color: var(--brand-ink); }

.field-error {
  background: var(--red-dim);
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
}

.modal-switch { text-align: center; font-size: 12px; color: var(--ink-secondary); margin-top: 12px; }
.modal-hint { font-size: 11px; color: var(--ink-muted); text-align: center; margin-top: 4px; line-height: 1.5; }
.link-btn {
  background: none;
  border: none;
  color: var(--brand-ink);
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* Deposit modal specifics */
.mpesa-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.mpesa-badge {
  background: #4cbb17;
  color: oklch(0.15 0 0);
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  letter-spacing: .05em;
}
.mpesa-powered { font-size: 11px; color: var(--ink-muted); }

.quick-amounts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.qa-btn {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--ink-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  transition: all .15s;
}
.qa-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }
.qa-btn.active { border-color: var(--green); color: var(--green); background: var(--green-dim); }

.deposit-steps { display: flex; flex-direction: column; }
.deposit-step { }

/* Pending / success / failed states */
.pending-state, .success-state, .failed-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 20px 0 8px;
}
.spinner {
  width: 48px; height: 48px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pending-title { font-size: 18px; font-weight: 700; }
.pending-sub { font-size: 13px; color: var(--ink-secondary); max-width: 280px; line-height: 1.6; }
.pending-amount-box {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 24px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pending-label { font-size: 11px; color: var(--ink-muted); }
.pending-amount {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
}

.success-icon {
  width: 56px; height: 56px;
  background: var(--green-dim);
  border: 2px solid var(--green);
  color: var(--green);
  font-size: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.failed-icon {
  width: 56px; height: 56px;
  background: var(--red-dim);
  border: 2px solid var(--red);
  color: var(--red);
  font-size: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Withdraw */
.balance-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--ink-secondary);
}
.balance-info-row strong { color: var(--green); font-family: var(--font-mono); }
.withdraw-info {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-muted);
  padding: 4px 0;
}

/* Play-through gate. Replaces the withdraw form rather than sitting above it:
   showing a form you are not allowed to submit invites people to fill it in and
   then tells them no. Amber, not red — nothing has gone wrong, the money is
   theirs, it just has to be played first. */
.withdraw-checking {
  padding: 24px 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
}
.withdraw-locked {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 0;
}
.withdraw-locked-head {
  font-size: 15px;
  font-weight: 700;
  color: var(--amber);
}
.withdraw-locked-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.withdraw-locked-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--amber-dim);
  overflow: hidden;
}
.withdraw-locked-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--amber);
  transition: width 320ms cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
  .withdraw-locked-bar span { transition: none; }
}
.withdraw-locked-note {
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}

/* ── TOAST ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-raised);
  border: 1px solid var(--green);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  z-index: var(--z-toast);
  box-shadow: var(--shadow-lg);
  animation: toast-in .25s cubic-bezier(0.2, 0, 0, 1);
  white-space: nowrap;
}
@keyframes toast-in {
  from { transform: translateX(-50%) translateY(10px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
.toast-icon { color: var(--green); font-weight: 700; }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  margin-top: 0;
}
.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 40px;
}
.footer-brand p {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 12px;
  max-width: 320px;
  line-height: 1.7;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.footer-col-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.footer-link {
  display: block;
  color: var(--ink-secondary);
  font-size: 12px;
  margin-bottom: 8px;
  transition: color .15s;
}
.footer-link:hover { color: var(--ink); text-decoration: none; }
.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding: 16px 24px;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--ink-muted);
}
.responsible-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rg-badge {
  background: var(--red-dim);
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.footer-copy { color: var(--ink-muted); }

/* ── FORM DOTS ───────────────────────────────────────────── */
.form-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  flex-shrink: 0;
}
.form-w { background: var(--green); color: oklch(0.14 0 0); }
.form-d { background: oklch(0.48 0.10 228); color: #fff; }
.form-l { background: oklch(0.52 0.20 25); }

/* Featured form */
.featured-form {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 8px;
}
.featured-form-right { justify-content: center; }

/* H2H bar */
.featured-h2h {
  margin: 16px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.h2h-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.h2h-label {
  font-size: 10px;
  color: var(--ink-muted);
  font-weight: 600;
  min-width: 44px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h2h-label:last-child { text-align: right; }
.h2h-bar {
  flex: 1;
  display: flex;
  height: 20px;
  border-radius: var(--r-sm);
  overflow: hidden;
  gap: 1px;
}
.h2h-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  min-width: 16px;
  transition: width .4s;
}
.h2h-home { background: var(--green); }
.h2h-draw { background: oklch(0.50 0.09 228); }
.h2h-away { background: var(--red); }
.h2h-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-muted);
  padding: 0 2px;
}

/* Match team form (inline, last 3) */
.match-team {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.match-team-name {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.match-team-form {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.match-team-form .form-dot {
  width: 13px;
  height: 13px;
  font-size: 8px;
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .ticker-track { animation: none; }
}

/* A price we will not honour. Rendered in place of the chip rather than as a
   disabled button, so it cannot be tapped, focused or submitted. */
.odds-btn-closed {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--ink-muted);
  cursor: not-allowed;
}
.odds-btn-closed .odds-value { color: var(--ink-muted); font-weight: 600; }

/* A slip entry whose match started while the slip sat open. */
.selection-stale {
  border-color: var(--amber-dim);
  background: color-mix(in oklab, var(--amber-dim) 40%, transparent);
}
.selection-stale .sel-odds { color: var(--ink-muted); }
.sel-stale-note {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--amber);
}

/* Sport rail. Desktop has the sidebar; on a phone that sidebar is behind a
   drawer, so five of the six verticals were effectively invisible. */
.sport-rail { display: none; }

.rail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  /* PRODUCT.md asks for >=44px on touch, and this rail exists only on touch. */
  min-height: var(--tap);
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  scroll-snap-align: start;
}
.rail-item.active {
  border-color: var(--brand);
  background: var(--brand-dim);
  color: var(--ink);
}
.rail-icon  { font-size: 15px; line-height: 1; }
.rail-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.rail-item.active .rail-count { color: var(--brand-ink); }

/* Promotions. Typographic rather than an image carousel: there is no artwork,
   and a carousel of empty frames is worse than a strip that says something
   true. Scrolls horizontally at every width — three cards is a rail, not a
   grid that needs to reflow. */
.promo-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 16px 12px;
  scrollbar-width: none;
}
.promo-strip::-webkit-scrollbar { display: none; }

.promo {
  flex: 0 0 min(280px, 78%);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: var(--r-md, 10px);
  border: 1px solid var(--border);
  background: var(--surface);
}
.promo-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.promo-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.promo-body  { font-size: 12px; line-height: 1.45; color: var(--ink-secondary); }
.promo-action {
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.promo-action:hover { border-color: var(--ink-secondary); }

.promo-amber .promo-kicker { color: var(--amber); }
.promo-amber { border-color: var(--amber-dim); }
.promo-green .promo-kicker { color: var(--green); }
.promo-brand .promo-kicker { color: var(--brand-ink); }

/* Shared slip codes. Sits above the slip contents rather than below, because
   loading someone else's slip is something you do before building your own. */
.betslip-code-row {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.betslip-code-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.betslip-code-input::placeholder {
  font-family: var(--font-body, inherit);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-muted);
}
.betslip-code-input:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: -1px;
}
.btn-code { padding: 8px 14px; font-size: 13px; }

.betslip-code-msg {
  padding: 8px 14px 0;
  font-size: 11px;
  line-height: 1.45;
}
.betslip-code-ok   { color: var(--green); }
.betslip-code-err  { color: var(--red); }
.betslip-code-info { color: var(--ink-secondary); }

.betslip-share {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-ink);
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
}
.betslip-share:hover { color: var(--ink); }

/* ── MOBILE BOTTOM NAV ───────────────────────────────────── */
/* Hidden by default and shown only at phone widths — a desktop already has the
   header nav and a permanently visible bet slip. */
.bottom-nav { display: none; }

@media (max-width: 900px) {
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-drawer);
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .bnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative;
    min-height: 56px;
    padding: 8px 2px 9px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ink-muted);
    background: none;
    border: none;
    transition: color .15s;
  }
  .bnav-item svg { width: 21px; height: 21px; }
  .bnav-item.active { color: var(--brand-ink); }
  .bnav-item:active { color: var(--ink); }

  /* Count sits on the icon, not after the label, so it reads at a glance. */
  .bnav-badge {
    position: absolute;
    top: 4px;
    left: 50%;
    margin-left: 4px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--red);
    color: oklch(0.99 0 0);
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }

  /* The bet slip. Raised out of the bar because it is not a peer of the other
     four — it is the thing the whole site exists to fill. */
  .bnav-fab {
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 54px;
    height: 54px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--brand);
    color: oklch(0.99 0 0);
    border: 3px solid var(--bg);
    box-shadow: var(--shadow-lg, 0 6px 18px oklch(0 0 0 / 0.45));
    transform: translateY(-12px);
    transition: transform .18s cubic-bezier(0.2, 0, 0, 1), background .15s;
  }
  .bnav-fab svg { width: 23px; height: 23px; }
  .bnav-fab:active { transform: translateY(-12px) scale(0.94); }
  .bnav-fab-count {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--green);
    color: oklch(0.14 0 0);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    border: 2px solid var(--bg);
  }

  /* Nothing may hide behind the bar: the last fixture in the list, and the
     Place Bet button inside the slip, both have to clear it. */
  .page-layout { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* The slip's own bottom clearance is set further down the file, after the
     safe-area rule that would otherwise override anything set here. */

  /* The sidebar is behind a drawer at this width, so the rail takes over. */
  .sport-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 10px 16px 4px;
    scrollbar-width: none;
  }
  .sport-rail::-webkit-scrollbar { display: none; }

  /* The header icon is redundant once the bar carries the slip. Scoped through
     .header-end to outrank the shared tap-target rule further down the file,
     which sets display:grid on this same element. */
  .header-end .betslip-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bnav-fab, .bnav-fab:active { transition: none; }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --betslip-w: 0px; }
  /* The parked bet slip sits a full viewport to the right of the fold, and a
     translated element still counts toward the scrollable area — so on a narrow
     phone the whole page could be dragged sideways to reveal it. `clip` rather
     than `hidden`: hidden makes the root a scroll container and kills the
     sticky header and list header. */
  html, body { overflow-x: clip; }
  .betslip {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 320px;
    z-index: var(--z-betslip);
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 100%;
  }
  .betslip.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .betslip-close { display: block; }
  .page-layout { grid-template-columns: var(--sidebar-w) 1fr; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  .sports-sidebar { display: none; }
  .page-layout { grid-template-columns: 1fr; }
  .menu-toggle { display: flex; }
  .header-nav { display: none; }

  /* The market pills scroll instead of disappearing. Hiding them stranded
     phone users on 1X2 with no way to reach Over/Under, BTTS or Double
     Chance. */
  .filter-bar {
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
  }
  .filter-tabs,
  .filter-markets {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .filter-tabs::-webkit-scrollbar,
  .filter-markets::-webkit-scrollbar { display: none; }
  .filter-tab,
  .market-pill {
    flex: none;
    scroll-snap-align: start;
    min-height: 36px;
  }
}

/* ── PHONE ────────────────────────────────────────────────
   The match row goes two-line: teams on top, odds underneath at full
   width. The odds must stay reachable — this is a betting product and
   the phone is the primary canvas. The previous rule hid .match-odds
   and left a chevron pointing at a match detail page that does not
   exist, so a phone user could not place a bet at all. */
@media (max-width: 640px) {
  .header-inner { gap: 10px; }
  .featured-team-name { font-size: 14px; }
  .featured-vs { padding: 6px 8px; }

  .match-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "time teams"
      "odds odds";
    row-gap: 8px;
    column-gap: 10px;
    padding: 12px 14px;
  }
  .match-time-col { grid-area: time; }
  .match-teams    { grid-area: teams; }

  .match-odds {
    grid-area: odds;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    width: 100%;
  }
  .match-odds .odds-btn { min-height: var(--tap); }

  /* The odds already fill their own line here, so the "+n" control would
     crowd them. The whole row opens the sheet on a phone; this chevron is
     the affordance for that (the old one pointed at a page that never
     existed). */
  .match-more { display: none; }
  /* The header aligns to the desktop grid and cannot follow the odds onto
     their own line, so the chips name themselves here instead. */
  .match-list-head { display: none; }
  .odds-label-col  { display: block; }
  .match-teams { position: relative; padding-right: 16px; }
  .match-teams::after {
    content: '\203a';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted);
    font-size: 18px;
    line-height: 1;
  }

  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .modal { padding: 20px; border-radius: var(--r-lg); }

  /* Full-bleed sheet instead of a floating panel on a small screen. */
  .betslip { width: 100%; }

  /* Logged-in header at 375px. Balance + Deposit + Withdraw together
     overflowed the viewport and forced the page to scroll sideways.
     Withdraw is reachable from the drawer, so the header keeps the two
     things a bettor needs mid-match: what they have, and how to top up. */
  .header-end { gap: 6px; min-width: 0; }
  .balance-chip {
    padding: 3px 4px 3px 8px;
    gap: 4px;
    min-width: 0;
  }
  .balance-amount { font-size: 12px; }
  .header-end .withdraw-btn { display: none; }
  .deposit-btn {
    white-space: nowrap;
    padding: 7px 10px;
  }
  .logo-img { height: 20px; }
}

/* Very narrow phones: drop the "KES" label, the amount still carries it. */
@media (max-width: 380px) {
  .balance-label { display: none; }
  .deposit-btn { font-size: 0; padding: 7px 12px; }
  .deposit-btn::after {
    content: '+';
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }
}

/* ═══════════════════════════════════════════════════════════
   WITHDRAW BUTTON · BET HISTORY
   ═══════════════════════════════════════════════════════════ */

.withdraw-btn {
  background: transparent;
  color: var(--ink-secondary);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.withdraw-btn:hover {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--ink-muted);
}

.field-hint { color: var(--ink-muted); font-weight: 400; font-size: 11px; }

.modal-wide { max-width: 560px; }

.bet-history { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

.bet-history-empty {
  padding: 32px 0;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}

.bh-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  padding: 12px 14px;
}
.bh-card.bh-won { border-color: color-mix(in oklch, var(--green) 40%, var(--border)); }
.bh-card.bh-lost { border-color: color-mix(in oklch, var(--red) 30%, var(--border)); }

.bh-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.bh-type { font-size: 11px; font-weight: 600; color: var(--ink-secondary); letter-spacing: .02em; }

.bh-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-secondary);
}
.bh-status-won    { background: var(--green-dim); color: var(--green); }
.bh-status-lost   { background: var(--red-dim);   color: var(--red); }
.bh-status-voided { background: var(--amber-dim); color: var(--amber); }

.bh-legs { display: flex; flex-direction: column; gap: 4px; }

.bh-leg {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.bh-leg:last-child { border-bottom: none; }
.bh-leg-match { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-leg-pick  { color: var(--ink-secondary); font-size: 11px; }
.bh-leg-odds  { font-family: var(--font-mono); color: var(--ink); }
.bh-leg-w .bh-leg-odds { color: var(--green); }
.bh-leg-l .bh-leg-odds { color: var(--red); }

/* The scoreline that decided the leg, and a mark so the outcome reads without
   relying on colour alone. */
.bh-leg-score {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
}
.bh-leg-mark { font-weight: 700; }

.bh-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--ink-secondary);
}
.bh-foot strong { color: var(--ink); font-family: var(--font-mono); font-weight: 500; }

.bh-date { margin-top: 6px; font-size: 10px; color: var(--ink-muted); }

@media (max-width: 480px) {
  .bh-leg { grid-template-columns: 1fr auto; }
  .bh-leg-pick { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════
   A11Y · TOUCH · SAFE AREA
   ═══════════════════════════════════════════════════════════ */

/* Keyboard focus. The stylesheet had no focus-visible rule at all, so
   keyboard users navigated on whatever ring the browser happened to draw
   over a dark surface. :focus-visible keeps it off mouse clicks. */
:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.odds-btn:focus-visible {
  outline-color: var(--green);
  outline-offset: 1px;
}

/* Touch devices latch :hover after a tap, leaving rows and odds buttons
   stuck in their hover state until you tap elsewhere. */
@media (hover: none) {
  .match-row:hover        { background: transparent; }
  .odds-btn:hover         { background: var(--odds-surface); border-color: var(--odds-edge); }
  .odds-btn.selected:hover { background: var(--green-dim); border-color: var(--green); }
  .league-nav-item:hover,
  .sport-item:hover       { background: transparent; color: var(--ink-secondary); }
  .drawer-link:hover      { background: transparent; color: var(--ink-secondary); }
  .hnav-link:hover        { background: transparent; color: var(--ink-secondary); }
}

/* The grey flash Chrome paints over tapped controls fights the palette. */
button, a, .odds-btn, .match-row, .league-nav-item, .sport-item {
  -webkit-tap-highlight-color: transparent;
}

/* These two were undersized on every pointer type, not just touch. */
.menu-toggle,
.drawer-close,
.modal-close,
.betslip-close,
.betslip-toggle {
  min-width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
}

/* Comfortable targets on touch. PRODUCT.md asks for >=44px.
   Keyed on the viewport as well as the pointer: a phone-width layout gets
   phone-sized targets even when the browser reports a fine pointer (device
   emulation, a narrow desktop window, a hybrid laptop). */
@media (pointer: coarse), (max-width: 900px) {
  .deposit-btn,
  .withdraw-btn,
  .btn,
  .filter-tab,
  .market-pill,
  .type-btn,
  .stake-quick-btn,
  .qa-btn,
  .betslip-clear,
  .modal-close,
  .betslip-close,
  .drawer-close,
  .menu-toggle,
  .betslip-toggle { min-height: var(--tap); }

  .modal-close,
  .betslip-close,
  .drawer-close,
  .menu-toggle,
  .betslip-toggle { min-width: var(--tap); }

  .drawer-link { min-height: var(--tap); display: flex; align-items: center; }

  .sel-remove {
    min-width: var(--tap);
    min-height: var(--tap);
    display: grid;
    place-items: center;
  }
}

/* Notched phones: keep the sticky panels clear of the home indicator. */
.betslip,
.drawer {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.betslip-footer {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* Place Bet sits at the bottom of the slip, which is exactly where the mobile
   nav bar is. Without this the primary action of the whole site is behind the
   bar. Declared here, after the safe-area rule above, because that rule has the
   same specificity and would otherwise win on source order. */
@media (max-width: 900px) {
  .betslip-footer {
    padding-bottom: calc(12px + 64px + env(safe-area-inset-bottom, 0px));
  }
}

/* An overscrolling bet slip should not drag the page behind it. */
.betslip,
.drawer,
.modal { overscroll-behavior: contain; }

/* ═══════════════════════════════════════════════════════════
   MATCH DETAIL SHEET
   ═══════════════════════════════════════════════════════════ */

/* Every market for one match. The pills filter the whole list; this is the
   per-match view the old hardcoded "+12" label pretended to offer. */
.match-sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: modal-slide-in .2s cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
}

.ms-head {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.ms-league {
  font-size: 11px;
  color: var(--ink-secondary);
  margin-bottom: 10px;
}
.ms-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.ms-team {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}
.ms-teams .ms-team:last-child { text-align: right; }
.ms-sep {
  font-size: 12px;
  color: var(--ink-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ms-live {
  color: var(--live-red);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .04em;
}
.ms-score {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink);
}
.ms-meta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}

.ms-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.ms-form { display: flex; gap: 3px; }
.ms-form-label {
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: .04em;
}

.ms-h2h { margin-top: 14px; }
.ms-h2h-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-secondary);
  margin-bottom: 6px;
}
.ms-h2h-tally { display: flex; gap: 6px; }
.ms-tally {
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: var(--r-sm);
}
.ms-tally-h { background: var(--green-dim); color: var(--green); }
.ms-tally-d { background: var(--surface-raised); color: var(--ink-secondary); }
.ms-tally-a { background: var(--red-dim); color: var(--red); }

.ms-h2h-list { list-style: none; margin-top: 10px; }
.ms-h2h-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  font-size: 11px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ms-h2h-row:last-child { border-bottom: none; }
.ms-h2h-date  { color: var(--ink-muted); font-family: var(--font-mono); }
.ms-h2h-match { color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-h2h-score { color: var(--ink); font-family: var(--font-mono); font-weight: 500; }

.ms-body {
  padding: 8px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ms-market { margin-top: 18px; }
.ms-market-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
  margin-bottom: 8px;
}
.ms-picks { display: grid; gap: 6px; }
.ms-picks[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.ms-picks[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
/* Correct score (17) and HT/FT (9) wrap into a compact auto grid rather than
   one very wide row. Any group with more than three picks gets it. */
.ms-picks:not([data-cols="1"]):not([data-cols="2"]):not([data-cols="3"]) {
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
}

.ms-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--tap);
  padding: 9px 8px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ms-pick:hover { border-color: var(--ink-muted); }
.ms-pick.selected {
  background: var(--green-dim);
  border-color: var(--green);
}
.ms-pick-label {
  font-size: 11px;
  color: var(--ink-secondary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.ms-pick.selected .ms-pick-label { color: var(--ink); }
.ms-pick-odds {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.ms-pick.selected .ms-pick-odds { color: var(--green); }

.ms-empty {
  padding: 32px 0;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}

/* The row is a control now, so it needs to look like one. */
.match-row { cursor: pointer; }
.match-row:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: -2px;
}

.match-more {
  cursor: pointer;
  background: none;
  border: none;
}

@media (hover: none) {
  .ms-pick:hover { border-color: var(--border); }
}

@media (max-width: 640px) {
  .match-sheet {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    margin-top: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .match-sheet-overlay { align-items: flex-end; padding: 0; }
  .ms-head { padding: 18px 16px 14px; }
  .ms-body { padding: 4px 16px 20px; }
  .ms-team { font-size: 15px; }

}

/* Excise disclosure. The 5% is withheld at source, so the figure that
   actually moves has to be visible before the user commits. */
.excise-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12px;
}
.excise-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-secondary);
}
.excise-row strong {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink-secondary);
}
.excise-total {
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
  color: var(--ink);
}
.excise-total strong { color: var(--green); }

/* Bet type is derived from the slip, so this is a status label, not a
   control. The old Single/Multi toggle asked the user to restate what the
   slip already said, and picking wrong produced a server rejection. */
.betslip-type {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   TYPE REFINEMENTS · COMING SOON
   ═══════════════════════════════════════════════════════════ */

/* Archivo runs slightly wide at display sizes; pull it back so headings read
   as set rather than as default. Floor is -0.03em, well inside the -0.04em
   limit where letters start colliding. */
.featured-team-name, .ms-team, .view-title, .modal-title {
  letter-spacing: -0.015em;
}
.promo-amount, .featured-odds .odds-value {
  letter-spacing: -0.02em;
}

/* Odds are the product. They get the mono face, tabular figures and enough
   weight to hold their own against the team name beside them. */
.odds-value, .ms-pick-odds, .sel-odds {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining;
  font-feature-settings: 'zero' 1;
}

/* ── COMING SOON ─────────────────────────────────────────── */
/* Jackpot is not built. These read as unavailable rather than clickable, so
   nothing on the page promises a product that does not exist yet. */
.soon-tag {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--amber);
  background: var(--amber-dim);
  padding: 2px 5px;
  border-radius: var(--r-sm);
  margin-left: 6px;
  vertical-align: middle;
}

.hnav-soon, .drawer-soon, .footer-soon {
  color: var(--ink-muted);
  cursor: default;
}
.hnav-soon:hover, .drawer-soon:hover, .footer-soon:hover {
  background: transparent;
  color: var(--ink-muted);
  text-decoration: none;
}

/* .promo-amount is mono because it normally holds a figure. This is a phrase,
   so it takes the body face. */
.promo-soon {
  font-family: var(--font-body);
  color: var(--amber);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* ── SAFER BETTING ───────────────────────────────────────── */
/* Deliberately plain. These controls should read as settings a person owns,
   not as a warning screen that gets dismissed without being read. */
.rg-intro   { font-size: 13px; line-height: 1.55; color: var(--ink-secondary); margin-bottom: 14px; }
.rg-loading { padding: 20px 0; text-align: center; color: var(--ink-muted); font-size: 13px; }
.rg-error   { color: var(--red); font-size: 13px; }

.rg-section { padding: 14px 0; border-top: 1px solid var(--border-subtle); }
.rg-section h3 { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }

.rg-limit { margin-bottom: 14px; }
.rg-limit-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--ink-secondary); margin-bottom: 5px;
}
.rg-limit-val { font-family: var(--font-mono); color: var(--ink); }

/* How much of a limit is gone, at a glance. Amber past three quarters: the
   point is to be noticed before the limit is reached, not after. */
.rg-bar { height: 5px; border-radius: 999px; background: var(--surface-raised); overflow: hidden; }
.rg-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--brand); transition: width 320ms cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-reduced-motion: reduce) { .rg-bar span { transition: none; } }

.rg-input-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px; font-size: 12px; color: var(--ink-secondary);
}
.rg-input-row input, .rg-input-row select {
  width: 45%; padding: 8px 10px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--ink);
  font-family: var(--font-mono); font-size: 13px;
}
.rg-input-row input:focus-visible, .rg-input-row select:focus-visible {
  outline: 2px solid var(--brand-ink); outline-offset: -1px;
}

.rg-note { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--ink-muted); }
.rg-pending {
  margin: 10px 0; padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--amber-dim); color: var(--amber);
  font-size: 11px; line-height: 1.5;
}
.rg-help {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle);
  font-size: 11px; line-height: 1.6; color: var(--ink-secondary);
}
.rg-excluded {
  padding: 14px; border-radius: var(--r-md);
  background: var(--amber-dim); color: var(--ink);
  font-size: 13px; line-height: 1.55;
}
.rg-excluded p + p { margin-top: 8px; }

/* The 18+ notice. Required on the page, so it is legible rather than hidden in
   grey at the bottom — a warning nobody can read is not a warning. */
.rg-notice {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-secondary);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}
.rg-notice strong { color: var(--amber); font-size: 12px; }
.rg-notice a { color: var(--brand-ink); }

/* ── BET HISTORY: tabs, day grouping, summary ────────────── */
.board-view[hidden],
.my-bets-page[hidden] {
  display: none;
}

.my-bets-page {
  padding: 16px;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.page-title {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 700;
}

.page-subtitle {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.bh-controls {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.bh-tabs { display: flex; gap: 6px; flex: 1; min-width: 0; }
.bh-tab {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-secondary);
  cursor: pointer; white-space: nowrap;
}
.bh-tab.active { border-color: var(--brand); background: var(--brand-dim); color: var(--ink); }
.bh-date-jump {
  padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--bg); color: var(--ink); font-size: 12px;
}
.bh-date-jump:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -1px; }

.bh-date-range {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.bh-date-field {
  display: grid;
  gap: 4px;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

@media (max-width: 480px) {
  .my-bets-page { padding: 12px; }
  .page-title { font-size: 21px; }
  .bh-controls { align-items: stretch; }
  .bh-tabs,
  .bh-date-range { width: 100%; }
  .bh-date-field { flex: 1 1 130px; }
  .bh-date-jump { width: 100%; }
  #bhClearDates { flex: 1 1 100%; }
}

.bh-summary {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  border-radius: var(--r-md, 8px); background: var(--surface-raised);
  font-size: 12px; color: var(--ink-secondary);
}
.bh-summary strong { color: var(--ink); font-family: var(--font-mono); }

.bh-day {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 14px 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border-subtle);
}
.bh-day:first-child { margin-top: 0; }
.bh-day-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.bh-day-stat { font-size: 11px; color: var(--ink-muted); font-family: var(--font-mono); }