/**
 * MAXXBET Canonical Design System — Tokens & Utilities
 * Seamless Dual-Theme Parity: Dark Mode (Cockpit) & Light Mode (Platinum)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root,
html.light {
  /* Surface Canvas & Layers (Platinum Velocity) */
  --mxb-surface-canvas: #f8fafc;
  --mxb-surface-card: #ffffff;
  --mxb-surface-container-lowest: #ffffff;
  --mxb-surface-container-low: #ffffff;
  --mxb-surface-container: #f1f5f9;
  --mxb-surface-container-high: #e2e8f0;
  --mxb-surface-container-highest: #cbd5e1;

  /* Typography & Text Contrast */
  --mxb-text-primary: #0f172a;
  --mxb-text-secondary: #334155;
  --mxb-text-muted: #64748b;
  --mxb-text-inverse: #f8fafc;

  /* Borders & Dividers */
  --mxb-border-subtle: #e2e8f0;
  --mxb-border-interactive: #cbd5e1;
  --mxb-border-focus: #10b981;

  /* Tactical Accents */
  --mxb-primary: #10b981;
  --mxb-primary-hover: #059669;
  --mxb-primary-tint: rgba(16, 185, 129, 0.08);
  --mxb-on-primary: #ffffff;

  --mxb-secondary: #d97706;
  --mxb-secondary-hover: #b45309;
  --mxb-secondary-tint: rgba(217, 119, 6, 0.1);
  --mxb-on-secondary: #ffffff;

  --mxb-tertiary: #0284c7;
  --mxb-tertiary-tint: rgba(2, 132, 199, 0.1);

  --mxb-error: #ef4444;
  --mxb-error-tint: rgba(239, 68, 68, 0.1);
  --mxb-on-error: #ffffff;

  /* Elevation Shadows (Micro & Surgical) */
  --mxb-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --mxb-shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --mxb-shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.08);
  --mxb-glow-primary: 0 0 16px -2px rgba(16, 185, 129, 0.25);

  /* Fonts */
  --mxb-font-display: 'Plus Jakarta Sans', sans-serif;
  --mxb-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mxb-font-mono: 'JetBrains Mono', monospace;
}

html.dark {
  /* Surface Canvas & Layers (High-Velocity Cockpit) */
  --mxb-surface-canvas: #0c1324;
  --mxb-surface-card: #0f172a;
  --mxb-surface-container-lowest: #070d1f;
  --mxb-surface-container-low: #151b2d;
  --mxb-surface-container: #191f31;
  --mxb-surface-container-high: #23293c;
  --mxb-surface-container-highest: #2e3447;

  /* Typography & Text Contrast */
  --mxb-text-primary: #f8fafc;
  --mxb-text-secondary: #bbcabf;
  --mxb-text-muted: #86948a;
  --mxb-text-inverse: #0f172a;

  /* Borders & Dividers */
  --mxb-border-subtle: #1e293b;
  --mxb-border-interactive: #334155;
  --mxb-border-focus: #4edea3;

  /* Tactical Accents */
  --mxb-primary: #4edea3;
  --mxb-primary-hover: #10b981;
  --mxb-primary-tint: rgba(78, 222, 163, 0.12);
  --mxb-on-primary: #003824;

  --mxb-secondary: #ffb95f;
  --mxb-secondary-hover: #ee9800;
  --mxb-secondary-tint: rgba(255, 185, 95, 0.12);
  --mxb-on-secondary: #472a00;

  --mxb-tertiary: #4cd7f6;
  --mxb-tertiary-tint: rgba(76, 215, 246, 0.12);

  --mxb-error: #ffb4ab;
  --mxb-error-tint: rgba(255, 180, 171, 0.12);
  --mxb-on-error: #690005;

  /* Elevation Shadows & Luminescent Glows */
  --mxb-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --mxb-shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.6);
  --mxb-shadow-lg: 0 16px 36px -4px rgba(0, 0, 0, 0.7);
  --mxb-glow-primary: 0 0 20px -2px rgba(78, 222, 163, 0.4);
}

/* ==========================================================================
   Base & Tabular Typography Helpers
   ========================================================================== */

.tabular-nums,
.mxb-odds,
.mxb-timer,
.mxb-currency {
  font-feature-settings: 'tnum' 1, 'cv05' 1;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Canonical Component Classes
   ========================================================================== */

/* Odds Selection Box */
.mxb-odds-box {
  background-color: var(--mxb-surface-container);
  border: 1px solid var(--mxb-border-subtle);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.mxb-odds-box:hover {
  background-color: var(--mxb-surface-container-high);
  border-color: var(--mxb-border-interactive);
  transform: translateY(-1px);
}

.mxb-odds-box.is-selected {
  background-color: var(--mxb-primary-tint);
  border: 1.5px solid var(--mxb-primary);
  box-shadow: var(--mxb-glow-primary);
}

.mxb-odds-box.is-selected .mxb-odds-value {
  color: var(--mxb-primary);
  font-weight: 700;
}

.mxb-odds-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--mxb-text-muted);
  line-height: 14px;
}

.mxb-odds-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--mxb-text-primary);
  line-height: 18px;
}

/* Odds Dynamic Flash Animations */
@keyframes mxbFlashUp {
  0% { border-color: var(--mxb-primary); background-color: var(--mxb-primary-tint); }
  100% { border-color: var(--mxb-border-subtle); background-color: var(--mxb-surface-container); }
}

@keyframes mxbFlashDown {
  0% { border-color: var(--mxb-error); background-color: var(--mxb-error-tint); }
  100% { border-color: var(--mxb-border-subtle); background-color: var(--mxb-surface-container); }
}

.mxb-odds-flash-up {
  animation: mxbFlashUp 0.6s ease-out;
}

.mxb-odds-flash-down {
  animation: mxbFlashDown 0.6s ease-out;
}

/* Primary Button (CTA) */
.mxb-btn-primary {
  background-color: var(--mxb-primary);
  color: var(--mxb-on-primary);
  font-family: var(--mxb-font-display);
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  box-shadow: var(--mxb-glow-primary);
  transition: all 0.2s ease;
}

.mxb-btn-primary:hover {
  background-color: var(--mxb-primary-hover);
  transform: translateY(-1px);
}

.mxb-btn-primary:active {
  transform: scale(0.98);
}

/* Secondary Button (Gold / Cashout) */
.mxb-btn-secondary {
  background-color: var(--mxb-secondary);
  color: var(--mxb-on-secondary);
  font-family: var(--mxb-font-display);
  font-weight: 700;
  font-size: 13px;
  border-radius: 8px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mxb-btn-secondary:hover {
  background-color: var(--mxb-secondary-hover);
}

/* Canonical Badges */
.mxb-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--mxb-error-tint);
  color: var(--mxb-error);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mxb-badge-vip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--mxb-secondary);
  color: var(--mxb-on-secondary);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Card Container */
.mxb-card {
  background-color: var(--mxb-surface-card);
  border: 1px solid var(--mxb-border-subtle);
  border-radius: 12px;
  box-shadow: var(--mxb-shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}