/* =============================================================================
   MARBLE CLASH — UI v2 "Modern Brass" layout & skin layer
   -----------------------------------------------------------------------------
   * Presentation only. No element IDs, onclick handlers or JS hooks are changed.
   * Every rule is scoped under `html.ui-v2` (set by the flag script in <head>),
     so removing that class (or visiting with ?ui=v1) restores the legacy look.
   * The `html.ui-v2` prefix adds specificity (0,1,1) on top of each legacy
     selector, letting these `!important` rules win over the legacy
     `!important` layers without deleting them.
   * Mobile rules key off `body.mobile-mode` (set by updateDeviceMode() in JS)
     instead of a CSS width query, so touch tablets at 901-1024px get the
     mobile layout too (legacy bug fix).
   * Never style `display` on elements whose visibility JS toggles inline
     (#slipTabContent, #myBetsTabContent, #winner-banner, #countdown-banner,
     runner cards...) except where explicitly noted.
   ============================================================================= */

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

/* Elements added for v2 stay hidden in the legacy UI */
.mc-more { display: none; }
.mc-compact-only { display: none !important; }
.mc-v2-only { display: none !important; }
html.ui-v2 .mc-v1-only { display: none !important; }
html.ui-v2 .mc-v2-only { display: flex !important; }

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
html.ui-v2 {
  --mc-bg: #1a110a;
  --mc-bg-2: #22170e;
  --mc-surface: #2c1e12;
  --mc-surface-2: #382717;
  --mc-surface-3: #46311e;
  --mc-line: rgba(214, 170, 92, 0.24);
  --mc-line-strong: rgba(214, 170, 92, 0.55);
  --mc-brass: #deb366;
  --mc-brass-hi: #f6d898;
  --mc-brass-lo: #a77c38;
  --mc-gold-grad: linear-gradient(180deg, #f8dea0 0%, #e0b464 52%, #b98a3c 100%);
  --mc-gold-grad-hover: linear-gradient(180deg, #ffe9b8 0%, #e8c070 52%, #c4953f 100%);
  --mc-ink: #2a1a07;
  --mc-text: #fbf1de;
  --mc-muted: #cdb48d;
  --mc-dim: #a08a69;
  --mc-green: #44d987;
  --mc-red: #f0605c;
  --mc-live: #ff3d3d;
  --mc-radius-sm: 8px;
  --mc-radius: 12px;
  --mc-radius-lg: 16px;
  --mc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mc-font-display: 'Barlow Condensed', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --mc-safe-top: env(safe-area-inset-top, 0px);
  --mc-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Mobile chrome metrics (used by fixed overlays so they line up) */
  --mc-m-header-h: 52px;
  --mc-m-tier-h: 60px;
  --mc-m-handle-h: 28px;
  --mc-m-nav-h: 58px;
  --mc-m-stage-h: clamp(210px, 42dvh, 440px);
}

/* -----------------------------------------------------------------------------
   2. GLOBAL
   -------------------------------------------------------------------------- */
html.ui-v2 * { font-family: var(--mc-font); }
html.ui-v2 body {
  background: radial-gradient(1200px 500px at 50% -10%, rgba(214, 170, 92, 0.07), transparent 60%),
              linear-gradient(180deg, #23180e 0%, var(--mc-bg) 100%) !important;
  color: var(--mc-text);
  -webkit-font-smoothing: antialiased;
}
html.ui-v2 ::-webkit-scrollbar { width: 6px; height: 6px; }
html.ui-v2 ::-webkit-scrollbar-thumb { background: rgba(214, 170, 92, 0.25); border-radius: 6px; }
html.ui-v2 ::-webkit-scrollbar-track { background: transparent; }
html.ui-v2 button:focus-visible,
html.ui-v2 a:focus-visible { outline: 2px solid var(--mc-brass-hi); outline-offset: 2px; }

/* -----------------------------------------------------------------------------
   3. HEADER (desktop baseline)
   -------------------------------------------------------------------------- */
html.ui-v2 header {
  height: 60px;
  padding: 0 16px !important;
  gap: 14px;
  background: linear-gradient(180deg, rgba(46, 31, 18, 0.98) 0%, rgba(32, 22, 13, 0.98) 100%) !important;
  border-bottom: 1px solid var(--mc-line-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255, 222, 160, 0.06), 0 8px 28px rgba(0, 0, 0, 0.45) !important;
  color: var(--mc-text) !important;
}
html.ui-v2 header .brand-section .logo-text {
  font-family: var(--mc-font-display) !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, #fff4d6 0%, #eac57a 45%, #b68836 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 6px rgba(214, 170, 92, 0.25)) !important;
}
html.ui-v2 header .brand-section .logo-accent {
  font-family: var(--mc-font-display) !important;
  -webkit-text-fill-color: transparent !important;
  color: inherit !important;
}
html.ui-v2 header .brand-section .badge-live { display: none !important; }

/* Race status: one segmented "LIVE · RACE #7 · Map · State" chip */
html.ui-v2 header .brand-section { flex-shrink: 0; }
html.ui-v2 header .header-center {
  gap: 8px;
  padding: 4px 5px 4px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid var(--mc-line);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  white-space: nowrap;
}
html.ui-v2 header .header-center::before {
  content: 'LIVE';
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  background: rgba(255, 61, 61, 0.14);
  border: 1px solid rgba(255, 61, 61, 0.45);
  color: #ff8a86;
  font: 800 10px/1 var(--mc-font);
  letter-spacing: 1px;
  box-shadow: 0 0 12px rgba(255, 61, 61, 0.18);
  flex-shrink: 0;
}
html.ui-v2 header .header-center .race-chip,
html.ui-v2 header #raceBadge,
html.ui-v2 header #themeBadge {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 2px !important;
  color: var(--mc-brass-hi) !important;
  font: 700 12px/1 var(--mc-font) !important;
  letter-spacing: 0.4px !important;
}
html.ui-v2 header #themeBadge { color: var(--mc-muted) !important; font-weight: 600 !important; }
html.ui-v2 header .header-center .state-indicator {
  min-width: 0 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
  gap: 7px !important;
}
html.ui-v2 header #stateText {
  min-width: 0 !important;
  font-size: 12px !important;
  letter-spacing: 0.3px !important;
  max-width: 230px;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle;
}
@media (max-width: 1500px) {
  html.ui-v2 header #stateText { max-width: 180px; }
}
html.ui-v2 header .pulse-dot { width: 7px !important; height: 7px !important; }

/* Primary nav: quiet text tabs instead of a wall of buttons */
html.ui-v2 header .header-right { gap: 8px; }
html.ui-v2 header #btnHeaderShowcase,
html.ui-v2 header #btnHeaderCases,
html.ui-v2 header #btnHeaderGarage,
html.ui-v2 header .mc-more-btn {
  height: 36px !important;
  padding: 0 11px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: rgba(245, 233, 212, 0.86) !important;
  font: 600 13px/1 var(--mc-font) !important;
  letter-spacing: 0.2px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
html.ui-v2 header #btnHeaderShowcase:hover,
html.ui-v2 header #btnHeaderCases:hover,
html.ui-v2 header #btnHeaderGarage:hover,
html.ui-v2 header .mc-more-btn:hover,
html.ui-v2 header .mc-more.open .mc-more-btn {
  background: rgba(214, 170, 92, 0.1) !important;
  border-color: var(--mc-line) !important;
  color: var(--mc-brass-hi) !important;
  transform: none !important;
}
/* Moved into the "More" menu */
html.ui-v2 header #btnHeaderShowcase,
html.ui-v2 header #btnHeaderGuide,
html.ui-v2 header #btnHeaderSupport,
html.ui-v2 header #btnHeaderPromo { display: none !important; }
@media (max-width: 1380px) {
  html.ui-v2 header #btnHeaderCases,
  html.ui-v2 header #btnHeaderGarage { display: none !important; }
}
/* Guest settings pill (rendered by auth_modal.js) */
html.ui-v2 header #guestMenuBtn {
  height: 36px;
  display: inline-flex !important;
  align-items: center;
  padding: 0 11px !important;
  background: rgba(214, 170, 92, 0.06) !important;
  border: 1px solid var(--mc-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
html.ui-v2 header #guestMenuBtn > span { color: var(--mc-muted) !important; font: 600 12px/1 var(--mc-font) !important; }
html.ui-v2 #left-panel .chat-online-badge { white-space: nowrap !important; }

/* Wallet */
html.ui-v2 header .wallet-pill {
  height: 38px;
  padding: 0 4px 0 12px !important;
  gap: 8px !important;
  border-radius: 11px !important;
  background: rgba(0, 0, 0, 0.42) !important;
  border: 1px solid var(--mc-line-strong) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}
html.ui-v2 header .wallet-pill .balance-amount {
  font-family: var(--mc-font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: var(--mc-brass-hi) !important;
  -webkit-text-fill-color: var(--mc-brass-hi) !important;
  text-shadow: none !important;
}
html.ui-v2 header .wallet-pill[data-currency="SC"] .balance-amount {
  color: var(--mc-green) !important;
  -webkit-text-fill-color: var(--mc-green) !important;
}
html.ui-v2 header .wallet-pill .currency-switch-btn {
  height: 28px;
  padding: 0 9px !important;
  border-radius: 8px !important;
  background: var(--mc-surface-3) !important;
  border: 1px solid var(--mc-line) !important;
  color: var(--mc-brass-hi) !important;
  font: 700 10.5px/1 var(--mc-font) !important;
  box-shadow: none !important;
}
html.ui-v2 header .wallet-pill .currency-switch-btn:hover { border-color: var(--mc-brass) !important; }

/* Deposit = primary CTA */
html.ui-v2 header .deposit-cta-btn {
  height: 38px;
  padding: 0 18px !important;
  border-radius: 11px !important;
  background: var(--mc-gold-grad) !important;
  border: 1px solid rgba(255, 236, 190, 0.55) !important;
  color: var(--mc-ink) !important;
  font: 800 13.5px/1 var(--mc-font) !important;
  letter-spacing: 0.3px !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 18px rgba(214, 170, 92, 0.28) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
html.ui-v2 header .deposit-cta-btn:hover {
  background: var(--mc-gold-grad-hover) !important;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(214, 170, 92, 0.38) !important;
}

/* Auth slot (re-rendered by auth_modal.js with inline styles) */
html.ui-v2 header #header-auth-slot .nav-btn {
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font: 700 12.5px/1 var(--mc-font) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center !important;
  gap: 6px !important;
}
html.ui-v2 header #header-auth-slot #navSignInBtn,
html.ui-v2 header #header-auth-slot #navProfileBtn,
html.ui-v2 header #header-auth-slot #guestMenuBtn {
  background: rgba(214, 170, 92, 0.08) !important;
  border: 1px solid var(--mc-line-strong) !important;
  color: var(--mc-brass-hi) !important;
}
html.ui-v2 header #header-auth-slot #navRegisterBtn {
  background: transparent !important;
  border: 1px solid var(--mc-brass) !important;
  color: var(--mc-text) !important;
}
html.ui-v2 header .user-profile-pill {
  background: rgba(214, 170, 92, 0.08) !important;
  border: 1px solid var(--mc-line-strong) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html.ui-v2 .user-dropdown-menu {
  background: linear-gradient(180deg, #30211a 0%, #24180f 100%) !important;
  border: 1px solid var(--mc-line-strong) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7) !important;
}

/* -----------------------------------------------------------------------------
   4. "MORE" MENU (new, presentation-only; calls existing global functions)
   -------------------------------------------------------------------------- */
html.ui-v2 .mc-more { display: flex; align-items: center; position: relative; flex-shrink: 0; }
html.ui-v2 .mc-more-dots { display: none; }
html.ui-v2 .mc-more-caret { font-size: 10px; opacity: 0.7; transition: transform 0.15s ease; }
html.ui-v2 .mc-more.open .mc-more-caret { transform: rotate(180deg); }
html.ui-v2 .mc-more-menu {
  display: none;
  position: fixed;
  top: 66px;
  right: 16px;
  min-width: 232px;
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  padding: 6px;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(180deg, rgba(48, 33, 20, 0.99) 0%, rgba(34, 23, 14, 0.99) 100%);
  border: 1px solid var(--mc-line-strong);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4);
  z-index: 100001;
}
html.ui-v2 .mc-more.open .mc-more-menu { display: flex; animation: mcMenuIn 0.14s ease-out; }
@keyframes mcMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
html.ui-v2 .mc-more-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mc-text);
  font: 600 13.5px/1.2 var(--mc-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
html.ui-v2 .mc-more-item:hover,
html.ui-v2 .mc-more-item:focus-visible { background: rgba(214, 170, 92, 0.1); color: var(--mc-brass-hi); }
html.ui-v2 .mc-more-item .mc-ico { width: 22px; text-align: center; font-size: 16px; }
html.ui-v2 .mc-more-sep { height: 1px; margin: 4px 8px; background: var(--mc-line); }
html.ui-v2 .mc-more-label-sm {
  padding: 8px 12px 4px;
  color: var(--mc-dim);
  font: 700 10px/1 var(--mc-font);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
/* Items only needed when the header can't show Cases/Garage */
@media (max-width: 1380px) {
  html.ui-v2 .mc-compact-only { display: flex !important; }
}
html.ui-v2 body.mobile-mode .mc-compact-only { display: flex !important; }

/* -----------------------------------------------------------------------------
   5. TIER / JACKPOT STRIP (desktop baseline)
   -------------------------------------------------------------------------- */
html.ui-v2 .room-selector-bar {
  padding: 8px 12px !important;
  background: linear-gradient(180deg, var(--mc-bg-2) 0%, #1c130b 100%) !important;
  border-bottom: 1px solid var(--mc-line) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}
html.ui-v2 .tier-carousel-wrapper { gap: 8px !important; max-width: 1400px; }
html.ui-v2 .tier-carousel-container { gap: 8px !important; padding: 2px !important; }
html.ui-v2 .tier-scroll-btn {
  width: 30px !important;
  height: 52px !important;
  border-radius: 10px !important;
  background: var(--mc-surface) !important;
  border: 1px solid var(--mc-line) !important;
  color: var(--mc-brass-hi) !important;
  box-shadow: none !important;
}
html.ui-v2 .tier-scroll-btn:hover { border-color: var(--mc-brass) !important; }
html.ui-v2 .tier-card-btn {
  position: relative;
  overflow: hidden;
  min-width: 140px !important;
  padding: 8px 12px 8px 13px !important;
  gap: 4px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #35251a 0%, #281b11 100%) !important;
  border: 1px solid var(--mc-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  color: var(--mc-text) !important;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}
html.ui-v2 .tier-card-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tier-accent, var(--mc-brass));
  box-shadow: 0 0 10px var(--tier-glow, transparent);
  opacity: 0.85;
}
html.ui-v2 .tier-card-btn::after,
html.ui-v2 .tier-card-btn.active::after { display: none !important; }
html.ui-v2 .tier-card-btn:hover {
  border-color: var(--mc-line-strong) !important;
  transform: translateY(-1px) !important;
}
html.ui-v2 .tier-card-btn.active {
  background: linear-gradient(180deg, rgba(214, 170, 92, 0.2) 0%, rgba(214, 170, 92, 0.06) 100%), #2c1e12 !important;
  border: 1px solid var(--mc-brass) !important;
  box-shadow: 0 0 0 1px rgba(214, 170, 92, 0.35), 0 8px 24px rgba(214, 170, 92, 0.16) !important;
}
html.ui-v2 .tier-card-btn .tier-card-name {
  font: 700 12.5px/1.1 var(--mc-font) !important;
  color: var(--mc-text) !important;
  text-shadow: none !important;
  letter-spacing: 0.2px !important;
}
html.ui-v2 .tier-card-btn .tier-card-price {
  font: 600 10.5px/1 var(--mc-font) !important;
  color: var(--mc-muted) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
html.ui-v2 .tier-card-btn .tier-card-pot {
  font-family: var(--mc-font-display) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
  color: var(--mc-brass-hi) !important;
  text-shadow: none !important;
}
html.ui-v2 .tier-card-btn .tier-card-streak {
  font: 600 10px/1 var(--mc-font) !important;
  color: var(--mc-muted) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 6px !important;
  padding: 3px 6px !important;
}
html.ui-v2 .tier-card-btn.active .tier-card-name { color: var(--mc-brass-hi) !important; }
html.ui-v2 .tier-card-btn.active .tier-card-price { color: var(--mc-text) !important; background: transparent !important; border: 0 !important; }
html.ui-v2 .tier-card-btn.active .tier-card-pot { color: #fff3d8 !important; }

/* -----------------------------------------------------------------------------
   6. MAIN LAYOUT, PANELS & FOOTER (desktop baseline)
   -------------------------------------------------------------------------- */
html.ui-v2 #left-panel {
  background: var(--mc-bg-2) !important;
  border-right: 1px solid var(--mc-line) !important;
}
html.ui-v2 #right-panel {
  background: var(--mc-bg-2) !important;
  border-left: 1px solid var(--mc-line) !important;
}
html.ui-v2 #stage-container { background: #050302; }
html.ui-v2 footer {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 16px !important;
  background: var(--mc-bg) !important;
  border-top: 1px solid var(--mc-line) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  color: var(--mc-muted) !important;
}
html.ui-v2 footer .hash-badge {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--mc-line) !important;
  border-radius: 7px !important;
  color: var(--mc-brass-hi) !important;
  font-size: 10.5px !important;
  padding: 3px 8px !important;
}

/* -----------------------------------------------------------------------------
   7. STAGE OVERLAYS
   -------------------------------------------------------------------------- */
/* Progressive pot pill */
html.ui-v2 .jackpot-ticker-card {
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(16, 11, 6, 0.82) !important;
  border: 1px solid var(--mc-line-strong) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html.ui-v2 .jackpot-ticker-badge { color: var(--mc-brass-hi) !important; font: 700 11px/1.2 var(--mc-font) !important; letter-spacing: 0.8px !important; }

/* In-race standings */
html.ui-v2 #in-race-leaderboard .runner-card {
  background: rgba(16, 11, 6, 0.8) !important;
  border: 1px solid rgba(214, 170, 92, 0.16) !important;
  border-radius: 9px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--mc-text) !important;
}
html.ui-v2 #in-race-leaderboard .runner-card .runner-name {
  color: var(--mc-text) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
html.ui-v2 #in-race-leaderboard .runner-card .runner-rank { color: var(--mc-muted) !important; font-weight: 800 !important; text-shadow: none !important; }
html.ui-v2 #in-race-leaderboard .runner-card .runner-rank.podium-1 { color: #ffd76a !important; }
html.ui-v2 #in-race-leaderboard .runner-card .runner-rank.podium-2 { color: #d9dee6 !important; }
html.ui-v2 #in-race-leaderboard .runner-card .runner-rank.podium-3 { color: #e09a5e !important; }
html.ui-v2 #in-race-leaderboard .runner-card:has(.podium-1) { border-color: rgba(255, 215, 106, 0.55) !important; }
html.ui-v2 #in-race-leaderboard .runner-card:has(.podium-2) { border-color: rgba(217, 222, 230, 0.4) !important; }
html.ui-v2 #in-race-leaderboard .runner-card:has(.podium-3) { border-color: rgba(224, 154, 94, 0.45) !important; }
html.ui-v2 #in-race-leaderboard .runner-card .runner-dist { color: var(--mc-green) !important; font-weight: 700 !important; }
html.ui-v2 #in-race-leaderboard .runner-card .runner-progress-bar { background: rgba(255, 255, 255, 0.08) !important; border-radius: 2px !important; }
html.ui-v2 #in-race-leaderboard .runner-card.is-picked,
html.ui-v2 #in-race-leaderboard .runner-card.is-player-owned {
  border-color: rgba(68, 217, 135, 0.7) !important;
  background: linear-gradient(90deg, rgba(68, 217, 135, 0.18), rgba(16, 11, 6, 0.82)) !important;
}

/* Minimap */
html.ui-v2 #minimap-card {
  background: rgba(16, 11, 6, 0.82) !important;
  border: 1px solid var(--mc-line-strong) !important;
  border-radius: 10px !important;
}

/* Camera dock (inline styles + JS-written inline colours are overridden) */
html.ui-v2 #camera-selector-dock {
  gap: 2px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: rgba(16, 11, 6, 0.82) !important;
  border: 1px solid var(--mc-line-strong) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html.ui-v2 #camera-selector-dock .cam-dock-btn {
  padding: 7px 13px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--mc-muted) !important;
  font: 700 11px/1 var(--mc-font) !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
html.ui-v2 #camera-selector-dock .cam-dock-btn:hover { color: var(--mc-text) !important; background: rgba(214, 170, 92, 0.08) !important; }
html.ui-v2 #camera-selector-dock .cam-dock-btn.active {
  background: var(--mc-gold-grad) !important;
  color: var(--mc-ink) !important;
  border-color: rgba(255, 236, 190, 0.5) !important;
  box-shadow: 0 4px 14px rgba(214, 170, 92, 0.3) !important;
}
html.ui-v2 #camera-selector-dock #btnPerfToggle {
  background: rgba(68, 217, 135, 0.08) !important;
  border: 1px solid rgba(68, 217, 135, 0.35) !important;
  color: var(--mc-green) !important;
}

/* Countdown & winner banner */
html.ui-v2 #countdown-banner {
  font-family: var(--mc-font-display) !important;
  font-weight: 800 !important;
  color: #fff6e0 !important;
  text-shadow: 0 0 40px rgba(214, 170, 92, 0.7), 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}
html.ui-v2 #winner-banner {
  background: linear-gradient(180deg, rgba(50, 34, 21, 0.98) 0%, rgba(34, 23, 14, 0.98) 100%) !important;
  border: 1px solid var(--mc-brass) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), 0 0 40px rgba(214, 170, 92, 0.2) !important;
}
html.ui-v2 #winner-banner h2 {
  font-family: var(--mc-font-display) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: var(--mc-brass-hi) !important;
}
html.ui-v2 #winner-banner .podium-row {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--mc-line) !important;
  border-radius: 10px !important;
}

/* -----------------------------------------------------------------------------
   8. BET SLIP (desktop baseline; mobile tweaks in §10)
   -------------------------------------------------------------------------- */
html.ui-v2 #right-panel .slip-tabs {
  gap: 4px;
  padding: 8px 10px 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--mc-line) !important;
}
html.ui-v2 #right-panel .slip-tab {
  padding: 11px 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--mc-dim) !important;
  font: 700 12px/1 var(--mc-font) !important;
  letter-spacing: 0.8px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.ui-v2 #right-panel .slip-tab:hover { color: var(--mc-text) !important; }
html.ui-v2 #right-panel .slip-tab.active {
  color: var(--mc-brass-hi) !important;
  border-bottom-color: var(--mc-brass) !important;
}
html.ui-v2 #btnSlipRules {
  background: transparent !important;
  border: 1px solid var(--mc-line) !important;
  color: var(--mc-muted) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font: 600 11px/1 var(--mc-font) !important;
  padding: 6px 9px !important;
}
html.ui-v2 #btnSlipRules:hover { color: var(--mc-brass-hi) !important; border-color: var(--mc-line-strong) !important; }
html.ui-v2 #slipTabContent,
html.ui-v2 #myBetsTabContent { padding: 12px !important; }

/* Stake (tier) quick chips — desktop only (mobile uses top strip) */
html.ui-v2 #tierQuickChipsRow { gap: 6px !important; margin-bottom: 10px !important; }
html.ui-v2 #tierQuickChipsRow .tier-quick-chip {
  min-height: 34px !important;
  border-radius: 9px !important;
  background: var(--mc-surface) !important;
  border: 1px solid var(--mc-line) !important;
  color: var(--mc-text) !important;
  font: 600 12px/1 var(--mc-font) !important;
  box-shadow: none !important;
}
html.ui-v2 #tierQuickChipsRow .tier-quick-chip b { color: var(--mc-brass-hi) !important; font-weight: 700 !important; }
html.ui-v2 #tierQuickChipsRow .tier-quick-chip:hover { border-color: var(--mc-line-strong) !important; }
html.ui-v2 #tierQuickChipsRow .tier-quick-chip.active {
  background: var(--mc-gold-grad) !important;
  border-color: rgba(255, 236, 190, 0.55) !important;
  color: var(--mc-ink) !important;
  box-shadow: 0 4px 12px rgba(214, 170, 92, 0.25) !important;
}
html.ui-v2 #tierQuickChipsRow .tier-quick-chip.active b { color: var(--mc-ink) !important; }

/* Jackpot card */
html.ui-v2 #roomMarketHeader {
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  border-radius: var(--mc-radius) !important;
  background: radial-gradient(120% 140% at 0% 0%, rgba(214, 170, 92, 0.22) 0%, rgba(214, 170, 92, 0.05) 55%, transparent 100%), var(--mc-surface) !important;
  border: 1px solid var(--mc-line-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.06), 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}
html.ui-v2 #roomMarketTitle { font: 800 11.5px/1.2 var(--mc-font) !important; letter-spacing: 0.8px !important; }
html.ui-v2 #roomMarketTargetPot {
  font-family: var(--mc-font-display) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  margin-top: 3px !important;
}
html.ui-v2 #roomMarketPicksBadge { font-family: var(--mc-font) !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 999px !important; }

/* Market controls (JS-rendered, inline-styled) */
html.ui-v2 #marketControls {
  padding: 12px !important;
  margin-bottom: 10px !important;
  border-radius: var(--mc-radius) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid var(--mc-line) !important;
}
html.ui-v2 #marketControls .quick-pick-chips-wrap { gap: 6px !important; }
html.ui-v2 #marketControls .qp-btn {
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, rgba(222, 179, 102, 0.26) 0%, rgba(222, 179, 102, 0.12) 100%), var(--mc-surface-2) !important;
  border: 1px solid rgba(222, 179, 102, 0.38) !important;
  color: var(--mc-text) !important;
  font: 700 12px/1 var(--mc-font) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}
html.ui-v2 #marketControls .qp-btn:hover { border-color: var(--mc-line-strong) !important; color: var(--mc-brass-hi) !important; }
html.ui-v2 #marketControls .qp-btn:active { transform: scale(0.96) !important; }
html.ui-v2 #marketControls #qp-clear { color: var(--mc-red) !important; border-color: rgba(240, 96, 92, 0.35) !important; }
html.ui-v2 #marketControls #qp-toggle-grid {
  color: var(--mc-brass-hi) !important;
  border-color: var(--mc-line-strong) !important;
  background: rgba(214, 170, 92, 0.08) !important;
}
html.ui-v2 #picked-marbles-rack { gap: 6px !important; }
html.ui-v2 #picked-marbles-rack .picked-pill {
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--mc-line-strong) !important;
  font: 700 11.5px/1 var(--mc-font) !important;
}
html.ui-v2 #marblePickGrid {
  gap: 4px !important;
  padding: 6px !important;
  background: rgba(0, 0, 0, 0.32) !important;
  border: 1px solid var(--mc-line) !important;
  border-radius: 10px !important;
}
html.ui-v2 #marblePickGrid .marble-pick-btn {
  font: 700 10.5px/1 var(--mc-font) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(214, 170, 92, 0.12) !important;
  color: var(--mc-muted) !important;
  box-shadow: none !important;
}
html.ui-v2 #marblePickGrid .marble-pick-btn:hover { border-color: var(--mc-line-strong) !important; color: var(--mc-text) !important; }
/* Selected state is only expressed via inline style (`color: #000;`) in bet_slip.js */
html.ui-v2 #marblePickGrid .marble-pick-btn[style*="color: #000;"] {
  background: var(--mc-gold-grad) !important;
  border-color: rgba(255, 236, 190, 0.6) !important;
  color: var(--mc-ink) !important;
  box-shadow: 0 0 10px rgba(214, 170, 92, 0.4) !important;
}

/* Stake summary card + payout card */
html.ui-v2 #slipTabContent > .form-group:not(#marketControls),
html.ui-v2 #slipTabContent .payout-box {
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  border-radius: var(--mc-radius) !important;
  background: var(--mc-surface) !important;
  border: 1px solid var(--mc-line) !important;
  box-shadow: none !important;
}
html.ui-v2 #wagerTotalStakeDisplay,
html.ui-v2 #betPayoutDisplay,
html.ui-v2 #betMultiplierDisplay {
  font-family: var(--mc-font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}
html.ui-v2 #wagerRunnersSummary { font-weight: 700 !important; }

/* Docked bet bar + PLACE BET */
html.ui-v2 #docked-bet-bar {
  padding: 10px 12px 12px !important;
  gap: 8px !important;
  background: linear-gradient(180deg, rgba(46, 31, 18, 0.98) 0%, rgba(32, 22, 13, 0.99) 100%) !important;
  border-top: 1px solid var(--mc-line-strong) !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4) !important;
}
html.ui-v2 #docked-bet-bar .docked-room-tag { color: var(--mc-brass-hi) !important; font: 700 11px/1.2 var(--mc-font) !important; letter-spacing: 0.4px !important; }
html.ui-v2 #docked-bet-bar .docked-mult-tag {
  font: 700 10.5px/1 var(--mc-font) !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  background: rgba(214, 170, 92, 0.12) !important;
  border: 1px solid var(--mc-line-strong) !important;
  color: var(--mc-brass-hi) !important;
}
html.ui-v2 #docked-bet-bar .docked-payout-text { color: var(--mc-text) !important; font: 700 12px/1.2 var(--mc-font) !important; }
html.ui-v2 #docked-bet-bar .place-bet-btn {
  height: 50px !important;
  min-height: 50px !important;
  border-radius: 13px !important;
  background: var(--mc-gold-grad) !important;
  border: 1px solid rgba(255, 236, 190, 0.6) !important;
  color: var(--mc-ink) !important;
  font-family: var(--mc-font-display) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 10px 26px rgba(214, 170, 92, 0.3) !important;
}
html.ui-v2 #docked-bet-bar .place-bet-btn:hover:not(:disabled) {
  background: var(--mc-gold-grad-hover) !important;
  transform: translateY(-1px) !important;
}
html.ui-v2 #docked-bet-bar .place-bet-btn:active:not(:disabled) { transform: scale(0.98) !important; }
html.ui-v2 #docked-bet-bar .place-bet-btn:disabled {
  background: linear-gradient(180deg, rgba(60, 42, 24, 0.9), rgba(36, 25, 14, 0.95)) !important;
  border: 1px dashed rgba(214, 170, 92, 0.35) !important;
  color: rgba(243, 209, 140, 0.62) !important;
  opacity: 1 !important; /* JS sets inline 0.5–0.6; text was unreadable */
  font-size: 16px !important;
  box-shadow: none !important;
}

/* Live bets feed */
html.ui-v2 .ticker-section { border-top: 1px solid var(--mc-line) !important; background: transparent !important; }
html.ui-v2 .ticker-title { color: var(--mc-dim) !important; font: 700 10px/1 var(--mc-font) !important; letter-spacing: 1.2px !important; }

/* -----------------------------------------------------------------------------
   9. CHAT (both layouts)
   -------------------------------------------------------------------------- */
html.ui-v2 #left-panel .chat-header {
  background: var(--mc-surface) !important;
  border-bottom: 1px solid var(--mc-line) !important;
}
html.ui-v2 #left-panel .chat-title { font: 700 12px/1 var(--mc-font) !important; letter-spacing: 1px !important; color: var(--mc-brass-hi) !important; }
html.ui-v2 #left-panel .chat-room-tabs {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--mc-line) !important;
  border-radius: 10px !important;
}
html.ui-v2 #left-panel .chat-room-tab { color: var(--mc-muted) !important; font: 600 11px/1 var(--mc-font) !important; padding: 7px 4px !important; border-radius: 8px !important; }
html.ui-v2 #left-panel .chat-room-tab.active {
  background: var(--mc-surface-3) !important;
  color: var(--mc-brass-hi) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}
html.ui-v2 #left-panel .chat-msg-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(214, 170, 92, 0.1) !important;
  border-radius: 11px !important;
  font-size: 12px !important;
}
html.ui-v2 #left-panel .chat-msg-card.chat-big-win-card {
  background: linear-gradient(135deg, rgba(214, 170, 92, 0.22), rgba(214, 170, 92, 0.06)) !important;
  border: 1px solid var(--mc-brass) !important;
  box-shadow: 0 0 18px rgba(214, 170, 92, 0.18) !important;
}
html.ui-v2 #left-panel .chat-username { color: var(--mc-brass-hi) !important; font-weight: 700 !important; }
html.ui-v2 #left-panel .chat-msg-text { color: var(--mc-text) !important; }
html.ui-v2 #left-panel .chat-input-area { background: var(--mc-surface) !important; border-top: 1px solid var(--mc-line) !important; }
html.ui-v2 #left-panel .chat-input-wrapper {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--mc-line) !important;
  border-radius: 11px !important;
}
html.ui-v2 #left-panel .chat-input-field { font-size: 13px !important; color: var(--mc-text) !important; padding: 10px 6px !important; }
html.ui-v2 #left-panel .chat-send-btn {
  background: var(--mc-gold-grad) !important;
  color: var(--mc-ink) !important;
  border: 0 !important;
  border-radius: 9px !important;
  font: 800 11px/1 var(--mc-font) !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
}

/* -----------------------------------------------------------------------------
   10. MOBILE LAYOUT  (body.mobile-mode — set by JS at <=900px or touch <=1024px)
   -------------------------------------------------------------------------- */
html.ui-v2 body.mobile-mode {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
html.ui-v2 body.mobile-mode footer { display: none !important; }
html.ui-v2 body.mobile-mode .desktop-only { display: none !important; }

/* ---- Header ---- */
html.ui-v2 body.mobile-mode header {
  height: calc(var(--mc-m-header-h) + var(--mc-safe-top)) !important;
  min-height: calc(var(--mc-m-header-h) + var(--mc-safe-top)) !important;
  padding: var(--mc-safe-top) 8px 0 !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
html.ui-v2 body.mobile-mode header .brand-section .logo-text {
  display: flex !important;
  flex-direction: column !important;
  font-size: 15px !important;
  letter-spacing: 1.6px !important;
  line-height: 0.92 !important;
}
html.ui-v2 body.mobile-mode header .brand-section .logo-accent { display: block !important; }
/* Very narrow phones: compact "MC" monogram so the money buttons keep their room */
@media (max-width: 379px) {
  html.ui-v2 body.mobile-mode header .brand-section .logo-text { font-size: 0 !important; letter-spacing: 0 !important; }
  html.ui-v2 body.mobile-mode header .brand-section .logo-accent { display: none !important; }
  html.ui-v2 body.mobile-mode header .brand-section .logo-text::before { content: 'MC'; font-size: 22px; letter-spacing: 0.5px; line-height: 1; }
}
html.ui-v2 body.mobile-mode header .header-right {
  gap: 5px !important;
  overflow: visible !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}
html.ui-v2 body.mobile-mode header #guestMenuBtn { display: none !important; } /* its items live in the ⋯ menu */
html.ui-v2 body.mobile-mode header #btnHeaderShowcase,
html.ui-v2 body.mobile-mode header #btnHeaderGuide,
html.ui-v2 body.mobile-mode header #btnHeaderCases,
html.ui-v2 body.mobile-mode header #btnHeaderGarage,
html.ui-v2 body.mobile-mode header #btnHeaderSupport,
html.ui-v2 body.mobile-mode header #btnHeaderPromo { display: none !important; }
html.ui-v2 body.mobile-mode header .wallet-pill {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 3px 0 9px !important;
  gap: 5px !important;
  border-radius: 11px !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}
html.ui-v2 body.mobile-mode header .wallet-pill .balance-amount {
  font-size: 15px !important;
  min-width: 0 !important;
  max-width: 34vw;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-shrink: 1 !important;
}
html.ui-v2 body.mobile-mode header .wallet-pill .currency-switch-btn {
  position: relative !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -999px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  flex: 0 0 28px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
html.ui-v2 body.mobile-mode header .wallet-pill .currency-switch-btn::after {
  content: '⇄';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--mc-brass-hi);
}
html.ui-v2 body.mobile-mode header .deposit-cta-btn {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
  border-radius: 11px !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}
html.ui-v2 body.mobile-mode header #header-auth-slot { gap: 4px !important; flex-shrink: 0 !important; }
html.ui-v2 body.mobile-mode header #header-auth-slot > div { gap: 4px !important; }
html.ui-v2 body.mobile-mode header #header-auth-slot .nav-btn {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
  gap: 4px !important;
}
html.ui-v2 body.mobile-mode header #header-auth-slot #navRegisterBtn { display: none !important; }
html.ui-v2 body.mobile-mode header .user-avatar-circle { width: 34px !important; height: 34px !important; font-size: 13px !important; }
html.ui-v2 body.mobile-mode header .mc-more-btn {
  width: 34px !important;
  height: 36px !important;
  padding: 0 !important;
  justify-content: center !important;
  border: 1px solid var(--mc-line) !important;
  background: rgba(214, 170, 92, 0.06) !important;
  flex-shrink: 0 !important;
}
html.ui-v2 body.mobile-mode header .mc-more-label,
html.ui-v2 body.mobile-mode header .mc-more-caret { display: none !important; }
html.ui-v2 body.mobile-mode header .mc-more-dots { display: inline !important; font-size: 18px; line-height: 1; letter-spacing: 1px; }
html.ui-v2 body.mobile-mode .mc-more-menu { min-width: 240px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 140px); overflow-y: auto; }

/* ---- Race status: lifted out of the header onto the top-left of the video ---- */
html.ui-v2 body.mobile-mode header .header-center {
  display: flex !important;
  position: fixed !important;
  top: calc(var(--mc-safe-top) + var(--mc-m-header-h) + var(--mc-m-tier-h) + 8px);
  left: 8px;
  max-width: calc(100vw - 80px);
  height: 28px;
  padding: 0 10px 0 3px !important;
  gap: 7px !important;
  background: rgba(12, 8, 4, 0.74) !important;
  border: 1px solid var(--mc-line-strong) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  pointer-events: none;
  z-index: 5;
}
html.ui-v2 body.mobile-mode header .header-center::before { padding: 3px 7px 3px 6px; font-size: 9.5px; }
html.ui-v2 body.mobile-mode header #raceBadge { display: inline-flex !important; font-size: 11.5px !important; }
html.ui-v2 body.mobile-mode header #themeBadge { display: none !important; }
html.ui-v2 body.mobile-mode header .header-center .state-indicator {
  display: flex !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  gap: 6px !important;
}
html.ui-v2 body.mobile-mode header #stateText {
  font-size: 11.5px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.ui-v2 body.mobile-mode header .pulse-dot { width: 6px !important; height: 6px !important; }
/* Hide the status pill when a mobile panel is in fullscreen-stage mode? No — keep it; it's useful. */

/* ---- Tier strip: swipeable cards that SHOW THE POT ---- */
html.ui-v2 body.mobile-mode .room-selector-bar {
  display: flex !important;
  height: var(--mc-m-tier-h) !important;
  min-height: var(--mc-m-tier-h) !important;
  padding: 6px 0 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
html.ui-v2 body.mobile-mode .tier-carousel-wrapper { width: 100% !important; max-width: 100% !important; gap: 0 !important; }
html.ui-v2 body.mobile-mode .tier-scroll-btn { display: none !important; }
html.ui-v2 body.mobile-mode .tier-carousel-container {
  gap: 7px !important;
  padding: 0 10px !important;
  overflow-x: auto !important;
  scroll-snap-type: x proximity;
  scroll-padding-left: 10px;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
html.ui-v2 body.mobile-mode .tier-carousel-container::-webkit-scrollbar { display: none !important; }
html.ui-v2 body.mobile-mode .tier-card-btn {
  min-width: 108px !important;
  height: 48px !important;
  padding: 6px 11px 6px 12px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  border-radius: 12px !important;
  scroll-snap-align: start;
  flex-shrink: 0 !important;
}
html.ui-v2 body.mobile-mode .tier-card-btn .tier-card-header { gap: 6px !important; justify-content: space-between !important; }
html.ui-v2 body.mobile-mode .tier-card-btn .tier-card-name { font-size: 11.5px !important; }
html.ui-v2 body.mobile-mode .tier-card-btn .tier-card-price { font-size: 10px !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
html.ui-v2 body.mobile-mode .tier-card-btn .tier-card-pot-row { display: flex !important; }
html.ui-v2 body.mobile-mode .tier-card-btn .tier-card-pot { font-size: 17px !important; }
html.ui-v2 body.mobile-mode .tier-card-btn .tier-card-streak { display: none !important; }

/* ---- Main column ---- */
html.ui-v2 body.mobile-mode #main-layout {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.ui-v2 body.mobile-mode #stage-container {
  order: 1 !important;
  width: 100% !important;
  height: var(--mc-m-stage-h) !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: none !important;
  position: relative !important;
  overflow: hidden !important;
}
@media (max-height: 700px) {
  html.ui-v2 { --mc-m-stage-h: clamp(190px, 36dvh, 300px); }
}
html.ui-v2 body.mobile-mode #webgl-canvas { touch-action: none; }
html.ui-v2 body.mobile-mode #jackpotTickerCard,
html.ui-v2 body.mobile-mode .stage-top-hud { display: none !important; }

html.ui-v2 body.mobile-mode #left-panel,
html.ui-v2 body.mobile-mode #right-panel,
html.ui-v2 body.mobile-mode #mobile-leaderboard-panel {
  order: 2 !important;
  width: 100% !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 0 !important;
  border-top: 1px solid var(--mc-line) !important;
  background: var(--mc-bg-2) !important;
  border-radius: 18px 18px 0 0;
  margin-top: -14px;          /* sheet overlaps the bottom edge of the video */
  position: relative;
  z-index: 25;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.55) !important;
}
/* Tab visibility (mirrors legacy rules so touch tablets 901-1024px work too) */
html.ui-v2 body.mobile-mode #left-panel { display: none !important; }
html.ui-v2 body.mobile-mode #right-panel { display: flex !important; }
html.ui-v2 body.mobile-mode #mobile-leaderboard-panel { display: none !important; }
html.ui-v2 body.mobile-mode.show-chat #left-panel { display: flex !important; }
html.ui-v2 body.mobile-mode.show-chat #right-panel { display: none !important; }
html.ui-v2 body.mobile-mode.show-leaderboard #mobile-leaderboard-panel { display: flex !important; }
html.ui-v2 body.mobile-mode.show-leaderboard #right-panel,
html.ui-v2 body.mobile-mode.show-leaderboard #left-panel { display: none !important; }

/* Chat in mobile always shows its content (desktop "collapsed" state doesn't apply) */
html.ui-v2 body.mobile-mode #left-panel.collapsed .chat-room-tabs,
html.ui-v2 body.mobile-mode #left-panel.collapsed .chat-input-area,
html.ui-v2 body.mobile-mode #left-panel.collapsed .chat-header-top .chat-title-group { display: flex !important; }
html.ui-v2 body.mobile-mode #left-panel.collapsed .chat-messages { display: flex !important; }
html.ui-v2 body.mobile-mode #left-panel.collapsed .chat-header { padding: 8px 12px !important; }
html.ui-v2 body.mobile-mode #left-panel.collapsed .chat-header-top { justify-content: space-between !important; }
html.ui-v2 body.mobile-mode #left-panel .chat-toggle-btn { display: none !important; }
html.ui-v2 body.mobile-mode #left-panel .chat-input-field { font-size: 16px !important; } /* stops iOS focus-zoom */
html.ui-v2 body.mobile-mode #left-panel .chat-header { background: transparent !important; }

/* ---- Grab handle (tap = fullscreen race view, existing behaviour) ---- */
html.ui-v2 body.mobile-mode .mobile-panel-handlebar,
html.ui-v2 body.mobile-mode #mobile-slip-handlebar {
  display: flex !important;
  position: relative;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 6px !important;
  height: var(--mc-m-handle-h) !important;
  min-height: var(--mc-m-handle-h) !important;
  max-height: var(--mc-m-handle-h) !important;
  padding: 0 12px 5px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--mc-dim) !important;
  font: 600 10px/1 var(--mc-font) !important;
  letter-spacing: 0.3px;
  flex-shrink: 0 !important;
  cursor: pointer;
}
html.ui-v2 body.mobile-mode .mobile-panel-handlebar::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 4px;
  background: rgba(214, 170, 92, 0.38);
}
html.ui-v2 body.mobile-mode .mobile-panel-handlebar .slip-handlebar-icon { font-size: 8px !important; color: var(--mc-dim) !important; }

/* ---- Fullscreen race view (theater) ---- */
html.ui-v2 body.mobile-mode.theater-mode #stage-container {
  height: auto !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}
html.ui-v2 body.mobile-mode.theater-mode #left-panel,
html.ui-v2 body.mobile-mode.theater-mode #right-panel,
html.ui-v2 body.mobile-mode.theater-mode #mobile-leaderboard-panel {
  height: var(--mc-m-handle-h) !important;
  min-height: var(--mc-m-handle-h) !important;
  max-height: var(--mc-m-handle-h) !important;
  flex: 0 0 var(--mc-m-handle-h) !important;
}
html.ui-v2 body.mobile-mode.theater-mode #slipTabContent,
html.ui-v2 body.mobile-mode.theater-mode #myBetsTabContent,
html.ui-v2 body.mobile-mode.theater-mode #docked-bet-bar,
html.ui-v2 body.mobile-mode.theater-mode .slip-tabs,
html.ui-v2 body.mobile-mode.theater-mode .chat-messages,
html.ui-v2 body.mobile-mode.theater-mode .chat-input-area,
html.ui-v2 body.mobile-mode.theater-mode .chat-header,
html.ui-v2 body.mobile-mode.theater-mode .chat-room-tabs,
html.ui-v2 body.mobile-mode.theater-mode #mobile-leaderboard-list,
html.ui-v2 body.mobile-mode.theater-mode #mobile-leaderboard-panel > div:not(.mobile-panel-handlebar) { display: none !important; }

/* ---- Overlays inside the video ---- */
html.ui-v2 body.mobile-mode #in-race-leaderboard {
  top: 44px !important;
  left: 8px !important;
  width: 132px !important;
  max-width: 140px !important;
  max-height: calc(100% - 100px) !important;
  transform: none !important;
  gap: 3px !important;
}
html.ui-v2 body.mobile-mode #in-race-leaderboard .runner-card:nth-child(n+4) { display: none !important; }
html.ui-v2 body.mobile-mode #in-race-leaderboard .runner-card { padding: 3px 7px !important; }
html.ui-v2 body.mobile-mode #minimap-card { top: 8px !important; right: 6px !important; }
html.ui-v2 body.mobile-mode #camera-selector-dock {
  bottom: 22px !important;          /* clears the sheet's rounded overlap */
  max-width: calc(100% - 16px) !important;
  padding: 3px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
html.ui-v2 body.mobile-mode.theater-mode #camera-selector-dock { bottom: 10px !important; }
html.ui-v2 body.mobile-mode #camera-selector-dock .cam-dock-btn { padding: 6px 11px !important; font-size: 10.5px !important; }
html.ui-v2 body.mobile-mode #btnCamOrbit,
html.ui-v2 body.mobile-mode #btnPerfToggle,
html.ui-v2 body.mobile-mode #btnStageTheater { display: none !important; }
html.ui-v2 body.mobile-mode #btnCamTopDown span:last-child { font-size: 0 !important; }
html.ui-v2 body.mobile-mode #btnCamTopDown span:last-child::after { content: 'TOP-DOWN'; font-size: 10.5px; }
html.ui-v2 body.mobile-mode #camera-selector-dock > div { display: none !important; } /* divider */

/* ---- Bet slip content ---- */
html.ui-v2 body.mobile-mode #right-panel .slip-tabs { display: none !important; } /* bottom nav already has Bet / My Bets */
html.ui-v2 body.mobile-mode #slipTabContent,
html.ui-v2 body.mobile-mode #myBetsTabContent {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  padding: 4px 12px 14px !important;
}
html.ui-v2 body.mobile-mode #tierQuickChipsRow,
html.ui-v2 body.mobile-mode #slipTabContent .payout-box,
html.ui-v2 body.mobile-mode #btnSlipRules,
html.ui-v2 body.mobile-mode .ticker-section { display: none !important; }
html.ui-v2 body.mobile-mode #roomMarketHeader { padding: 12px 14px !important; }
html.ui-v2 body.mobile-mode #roomMarketTargetPot { font-size: 26px !important; }

html.ui-v2 body.mobile-mode #marketControls { padding: 12px 10px !important; }
html.ui-v2 body.mobile-mode #marketControls .quick-pick-chips-wrap {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
html.ui-v2 body.mobile-mode #marketControls .qp-btn {
  min-height: 44px !important;
  padding: 0 !important;
  font-size: 12px !important;
  letter-spacing: -0.1px !important;
  justify-content: center;
}
html.ui-v2 body.mobile-mode #marketControls #qp-clear { grid-column: span 2; }
html.ui-v2 body.mobile-mode #marketControls #qp-toggle-grid { grid-column: span 4; margin-left: 0 !important; }
html.ui-v2 body.mobile-mode #picked-marbles-rack .picked-pill { height: 32px !important; padding: 0 12px !important; font-size: 12px !important; }
html.ui-v2 body.mobile-mode #marblePickGrid {
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)) !important;
  gap: 5px !important;
  max-height: 264px !important;
  overscroll-behavior: contain;
}
html.ui-v2 body.mobile-mode #marblePickGrid .marble-pick-btn { font-size: 13px !important; min-height: 40px !important; border-radius: 9px !important; }

/* ---- Docked PLACE BET bar ---- */
html.ui-v2 body.mobile-mode #docked-bet-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 7px !important;
  padding: 8px 12px 10px !important;
  min-height: 0 !important;
  flex-shrink: 0 !important;
}
/* Legacy bug fix: hide the buy bar on the My Bets tab (JS sets inline none, legacy CSS forced it back) */
html.ui-v2 body.mobile-mode #right-panel:has(#tabMyBets.active) #docked-bet-bar { display: none !important; }
html.ui-v2 body.mobile-mode #docked-bet-bar .docked-bet-info { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
html.ui-v2 body.mobile-mode #docked-bet-bar .docked-meta-row { min-width: 0 !important; overflow: hidden !important; flex-shrink: 1 !important; }
html.ui-v2 body.mobile-mode #docked-bet-bar .docked-room-tag { overflow: hidden !important; text-overflow: ellipsis !important; }
html.ui-v2 body.mobile-mode #docked-bet-bar .docked-payout-text { color: var(--mc-green) !important; flex-shrink: 0; }
html.ui-v2 body.mobile-mode #docked-bet-bar .place-bet-btn {
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  font-size: 20px !important;
  border-radius: 14px !important;
}
html.ui-v2 body.mobile-mode #docked-bet-bar .place-bet-btn:disabled { font-size: 16px !important; }

/* ---- Bottom navigation ---- */
html.ui-v2 body.mobile-mode #mobile-nav-bar {
  display: flex !important;
  height: auto !important;
  min-height: calc(var(--mc-m-nav-h) + var(--mc-safe-bottom)) !important;
  padding: 4px 6px max(6px, var(--mc-safe-bottom)) !important;
  gap: 2px;
  flex-shrink: 0 !important;
  background: rgba(32, 22, 13, 0.98) !important;
  border-top: 1px solid var(--mc-line) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5) !important;
  position: relative;
  z-index: 50;
}
html.ui-v2 body.mobile-mode .mobile-nav-btn {
  position: relative;
  flex: 1 1 0 !important;
  min-height: 48px !important;
  padding: 4px 0 2px !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--mc-dim) !important;
  font: 600 10.5px/1 var(--mc-font) !important;
  letter-spacing: 0.2px;
}
html.ui-v2 body.mobile-mode .mobile-nav-btn .mob-icon { font-size: 19px !important; filter: grayscale(0.55) opacity(0.75); transition: filter 0.15s ease, transform 0.15s ease; }
html.ui-v2 body.mobile-mode .mobile-nav-btn.active { color: var(--mc-brass-hi) !important; background: rgba(214, 170, 92, 0.08) !important; }
html.ui-v2 body.mobile-mode .mobile-nav-btn.active .mob-icon { filter: none; transform: translateY(-1px); }
html.ui-v2 body.mobile-mode .mobile-nav-btn.active::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 26px;
  height: 3px;
  margin-left: -13px;
  border-radius: 0 0 3px 3px;
  background: var(--mc-brass);
  box-shadow: 0 0 10px rgba(214, 170, 92, 0.6);
}
html.ui-v2 body.mobile-mode .mobile-nav-btn:active { transform: scale(0.94); }
html.ui-v2 body.mobile-mode #mobActiveWagersBadge {
  position: absolute !important;
  top: 2px !important;
  left: calc(50% + 6px) !important;
  margin: 0 !important;
  min-width: 16px;
  text-align: center;
  background: var(--mc-red) !important;
  color: #fff !important;
  font: 800 9px/1.5 var(--mc-font) !important;
  padding: 0 4px !important;
}
html.ui-v2 body.mobile-mode .mob-avatar-circle {
  width: 24px !important;
  height: 24px !important;
  border: 1.5px solid var(--mc-brass) !important;
  background: linear-gradient(135deg, #7a5524, #4a3214) !important;
}

/* ---- Toasts/menus that hard-code chrome offsets ---- */
html.ui-v2 body.mobile-mode .user-dropdown-menu { top: calc(var(--mc-safe-top) + var(--mc-m-header-h) + 6px) !important; }
html.ui-v2 body.mobile-mode #winner-banner { width: 92vw !important; max-width: 380px !important; }

/* -----------------------------------------------------------------------------
   11. MOBILE REFINEMENTS (pass 2 — from screenshot review)
   -------------------------------------------------------------------------- */
/* Bottom nav buttons: always icon-over-label (legacy only set this <=900px) */
html.ui-v2 body.mobile-mode .mobile-nav-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
html.ui-v2 body.mobile-mode .mob-avatar-circle {
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  font-size: 11px !important;
  color: #fff !important;
}

/* Camera dock: text-only pills on phones so all 4 views fit at 360px */
html.ui-v2 body.mobile-mode #camera-selector-dock .cam-dock-btn > span:first-child { display: none !important; }
html.ui-v2 body.mobile-mode #camera-selector-dock .cam-dock-btn { padding: 7px 12px !important; }

/* Jackpot card: compact single row on phones (pot is also on the tier strip) */
html.ui-v2 body.mobile-mode #roomMarketHeader {
  padding: 9px 12px !important;
  margin-bottom: 8px !important;
  align-items: center !important;
}
html.ui-v2 body.mobile-mode #roomMarketTitle { font-size: 10.5px !important; }
html.ui-v2 body.mobile-mode #roomMarketTargetPot { font-size: 21px !important; margin-top: 2px !important; }
html.ui-v2 body.mobile-mode #roomMarketPicksBadge { font-size: 9.5px !important; padding: 2px 7px !important; }
html.ui-v2 body.mobile-mode #roomMarketStreakNotice { font-size: 10px !important; margin-top: 4px !important; }

/* Picks header row inside market controls (inline-styled by bet_slip.js) */
html.ui-v2 body.mobile-mode #marketControls > div[style*="space-between"] { gap: 8px; margin-bottom: 10px !important; }
html.ui-v2 body.mobile-mode #marketControls > div[style*="space-between"] > span { font-size: 11px !important; line-height: 1.25 !important; }
html.ui-v2 body.mobile-mode #marketControls > div[style*="space-between"] > span:last-child { white-space: nowrap; font-family: var(--mc-font) !important; font-weight: 800 !important; }

@media (max-width: 379px) {
  html.ui-v2 body.mobile-mode #marketControls .qp-btn { font-size: 11px !important; letter-spacing: -0.3px !important; }
}

/* Tablets / landscape in mobile-mode: keep the slip at a readable width */
@media (min-width: 640px) {
  html.ui-v2 body.mobile-mode #slipTabContent,
  html.ui-v2 body.mobile-mode #myBetsTabContent,
  html.ui-v2 body.mobile-mode #docked-bet-bar {
    padding-left: max(12px, calc((100% - 720px) / 2)) !important;
    padding-right: max(12px, calc((100% - 720px) / 2)) !important;
  }
}

/* Pass 3 fixes */
/* v1-only nav tab must beat the generic mobile nav display rule above */
html.ui-v2 body #mobile-nav-bar .mc-v1-only,
html.ui-v2 body.mobile-mode #mobile-nav-bar .mobile-nav-btn.mc-v1-only { display: none !important; }

/* Status pill on video: long states ("WINNER: #60 Circuit Breaker") truncate inside the pill */
html.ui-v2 body.mobile-mode header .header-center .state-indicator {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
html.ui-v2 body.mobile-mode header #stateText {
  display: block !important;
  min-width: 0 !important;
  max-width: 100%;
}
html.ui-v2 body.mobile-mode header #raceBadge,
html.ui-v2 body.mobile-mode header .header-center::before { flex-shrink: 0 !important; }