/**
 * app.css — The Dog Track premium styles
 * Why: Top racing games have dark, atmospheric UIs that feel like being at a real
 * track under floodlights. We use rich gradients, subtle glow effects, and tight
 * spacing to create that immersive casino/sportsbook feel.
 */

/* ─── Rumble cold-boot splash (Wave R2) ──────────────────────── */
.dt-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 50% at 50% 30%, rgba(45, 212, 191, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(251, 191, 36, 0.1), transparent 50%),
    #070b14;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.dt-boot-splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.dt-boot-splash-inner {
  width: min(88vw, 340px);
  text-align: center;
  padding: 28px 22px;
}
.dt-boot-crest {
  font-size: 2.75rem;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 18px rgba(251, 191, 36, 0.45));
  animation: dt-boot-pulse 1.6s ease-in-out infinite;
}
.dt-boot-title {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #fbbf24;
  text-shadow: 0 0 24px rgba(251, 191, 36, 0.35);
  margin-bottom: 8px;
}
.dt-boot-sub {
  font-size: 0.82rem;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 18px;
  min-height: 1.2em;
}
.dt-boot-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(45, 212, 191, 0.25);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.dt-boot-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14b8a6, #2dd4bf 45%, #fbbf24);
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.55);
  transition: width 0.28s ease-out;
}
.dt-boot-pct {
  margin-top: 10px;
  font-family: Rajdhani, system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: rgba(226, 232, 240, 0.75);
}
@keyframes dt-boot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-boot-crest { animation: none; }
  .dt-boot-bar-fill { transition: none; }
}

/* ─── Site banners (anon / consent — design-system, not inline styles) ── */
.dt-banner {
  display: block;
  padding: 8px 16px;
  font-size: 0.85rem;
  text-align: center;
}
.dt-banner[hidden] { display: none !important; }
.dt-banner--warn {
  background: rgba(251, 146, 60, 0.12);
  border-bottom: 1px solid rgba(251, 146, 60, 0.4);
  color: #fdba74;
}
.dt-banner--danger {
  background: rgba(239, 68, 68, 0.18);
  border-bottom: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}
.dt-banner-link {
  color: #fbbf24;
  text-decoration: underline;
  margin-left: 6px;
  font-weight: 700;
}
.dt-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom, 12px));
  background: linear-gradient(180deg, #11182a, #0a0f1c);
  border-top: 1px solid rgba(45, 212, 191, 0.28);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  color: #e2e8f0;
  font-size: 0.85rem;
}
.dt-consent-banner[hidden] { display: none !important; }
.dt-consent-copy { max-width: 560px; line-height: 1.45; }
.dt-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dt-consent-btn {
  min-height: 44px;
  padding: 8px 16px;
}

/* ─── CSS Custom Properties ──────────────────────────────────── */
:root {
  --bg-primary: #070b14;
  --bg-secondary: #0d1320;
  --bg-card: #141c2e;
  --bg-card-hover: #1a2540;
  --bg-surface: #111827;
  --text-primary: #f0f0f0;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --accent-gold: #fbbf24;
  --accent-gold-dim: rgba(251,191,36,0.15);
  --accent-green: #10b981;
  --accent-red: #ef4444;
  --accent-blue: #3b82f6;
  --accent-blue-hover: #2563eb;
  --accent-purple: #8b5cf6;
  --border-color: #1f2937;
  --border-light: #374151;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.6);
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --gold-glow: 0 0 12px rgba(251,191,36,0.3);
  /* Cinematic UI tokens (shared contract) */
  --cinema-black: #000000;
  --scrim: rgba(0, 0, 0, 0.82);
  --cta-teal: linear-gradient(180deg, #2dd4bf 0%, #14b8a6 100%);
  --cta-gold: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  --glow-teal: 0 0 20px rgba(45, 212, 191, 0.4);
  --glow-gold: 0 0 24px rgba(251, 191, 36, 0.35);
  --radius-pill: 20px;
  --radius-hero: 0;
  --tap-min: 48px;
  /* Wave 5 — display vs body type */
  --font-display: Rajdhani, system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ─── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* ─── Header ─────────────────────────────────────────────────── */
.header {
  background: linear-gradient(180deg, #141c2e 0%, #0d1320 100%);
  border-bottom: 1px solid var(--border-color);
  /* S2: honor iPhone notch in regular Safari too, not only PWA standalone.
     env() falls back to 0 on devices without a notch, so this is safe. */
  padding: max(10px, env(safe-area-inset-top, 10px)) max(16px, env(safe-area-inset-right, 16px)) 10px max(16px, env(safe-area-inset-left, 16px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.header-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent-gold);
  letter-spacing: -0.5px;
  text-shadow: 0 0 20px rgba(251,191,36,0.2);
}
.header-title span { color: var(--text-primary); }

.header-balance {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 20px;
  padding: 4px 14px 4px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-gold);
}
.header-balance .coin-icon { font-size: 1rem; }

/* ─── Global next-post clock (all tabs + cinema) ─────────────────
   Always answers "when is the next race post?" without leaving the
   current screen. During race cinema the header is hidden — this pill
   re-pins itself fixed so the countdown never disappears. */
.global-post-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 36px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(45, 212, 191, 0.4);
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.16), rgba(15, 23, 42, 0.92));
  box-shadow: 0 0 16px rgba(45, 212, 191, 0.18);
  color: #e2e8f0;
  font-family: var(--font-display, Rajdhani, system-ui, sans-serif);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.global-post-time:hover {
  border-color: rgba(45, 212, 191, 0.7);
  box-shadow: var(--glow-teal);
}
.global-post-time:active { transform: scale(0.97); }
.global-post-time .gpt-kicker {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #5eead4;
  text-transform: uppercase;
}
.global-post-time .gpt-value {
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
  min-width: 3.2ch;
  text-align: center;
}
.global-post-time .gpt-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-post-time.is-urgent {
  border-color: rgba(251, 191, 36, 0.55);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(15, 23, 42, 0.92));
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.28);
  animation: gpt-urgent-pulse 1.2s ease-in-out infinite;
}
.global-post-time.is-urgent .gpt-kicker { color: #fbbf24; }
.global-post-time.is-live {
  border-color: rgba(239, 68, 68, 0.55);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.2), rgba(15, 23, 42, 0.92));
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.25);
  animation: none;
}
.global-post-time.is-live .gpt-kicker { color: #fca5a5; }
.global-post-time.is-live .gpt-value { color: #fff; }
.global-post-time.is-posting {
  border-color: rgba(251, 191, 36, 0.65);
  animation: gpt-urgent-pulse 0.9s ease-in-out infinite;
}
@keyframes gpt-urgent-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(251, 191, 36, 0.22); }
  50% { box-shadow: 0 0 22px rgba(251, 191, 36, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .global-post-time.is-urgent,
  .global-post-time.is-posting { animation: none; }
}
/* Compact on narrow phones — keep value, drop long meta */
@media (max-width: 520px) {
  .global-post-time { padding: 4px 10px; gap: 4px; min-height: 34px; }
  .global-post-time .gpt-meta { display: none; }
  .global-post-time .gpt-value { font-size: 0.88rem; }
}
/* Cinema: header is visibility:hidden — re-pin the clock so post never vanishes.
   Children may set visibility:visible even when a parent is hidden (CSS spec). */
body.race-cinema-active .global-post-time {
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top, 10px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9200;
  visibility: visible !important;
  pointer-events: auto;
  min-height: var(--tap-min);
  padding: 8px 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 20px rgba(45, 212, 191, 0.25);
}

/* ─── My Tickets header pill (Phase 1) ───────────────────────────
   Sits next to the coin balance.  Always visible.  Click opens the
   global Tickets drawer (#tickets-modal).  The is-pulsing animation
   fires whenever a settlement adds a new ticket so a fresh win is
   immediately obvious in peripheral vision. */
.header-tickets {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px;
  padding: 4px 12px;
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 999px;
  color: var(--accent-gold);
  font-weight: 700; font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.header-tickets:hover {
  background: rgba(251,191,36,0.14);
  border-color: rgba(251,191,36,0.6);
}
.header-tickets .tk-icon { font-size: 0.95rem; }
.header-tickets .tk-count {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  min-width: 1ch;
  text-align: right;
}
.header-tickets .tk-label { color: var(--text-muted); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.6px; text-transform: uppercase; }
@keyframes tk-pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(251,191,36,0.55); }
  60%  { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(251,191,36,0); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(251,191,36,0); }
}
.header-tickets.is-pulsing { animation: tk-pulse 0.9s ease-out 1; }

/* ─── My Tickets drawer modal ────────────────────────────────────
   Slide-down card, scrolls inside the body.  Mirrors .settings-overlay
   structure so future devs only have to learn one modal pattern.
   Visibility is owned by .active (same as achievements/missions/etc.);
   .closing keeps display during the exit fade. */
.tickets-overlay,
.tickets-overlay.modal-scrim {
  position: fixed; inset: 0; z-index: 9500;
  display: none;
  align-items: flex-start; justify-content: center;
  padding: max(60px, env(safe-area-inset-top, 60px)) 16px max(16px, env(safe-area-inset-bottom));
  background: var(--scrim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.22s ease;
  cursor: pointer;
  /* Override base .modal-scrim always-flex + entrance animation */
  animation: none;
}
.tickets-overlay.active,
.tickets-overlay.closing,
.tickets-overlay.modal-scrim.active,
.tickets-overlay.modal-scrim.closing {
  display: flex;
}
.tickets-overlay.is-open { opacity: 1; }
.tickets-card {
  width: 100%; max-width: 720px;
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1a2235 0%, #0f172a 100%);
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: var(--glow-teal), 0 24px 64px rgba(0,0,0,0.65);
  transform: translateY(-12px) scale(0.98);
  transition: transform 0.22s ease;
  cursor: default;
}
.tickets-overlay.is-open .tickets-card { transform: translateY(0) scale(1); }
.tickets-overlay.dt-modal-in.is-open .tickets-card {
  animation: dt-modal-card-in 0.22s ease-out;
}
/* Design-language aliases — keep tickets layout when also .modal-card */
.tickets-card.modal-card {
  max-width: 720px;
  text-align: left;
  padding: 0;
  width: 100%;
}
.settings-card.modal-card {
  max-width: 460px;
  text-align: left;
  width: 100%;
}
.tickets-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tickets-header h2 {
  margin: 0;
  color: #fbbf24;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tickets-sub {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 6px;
  font-size: 0.75rem; color: var(--text-secondary, #cbd5e1);
}
.tk-stat { display: inline-flex; align-items: center; gap: 4px; }
.tk-stat-k { color: var(--text-muted); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.6px; }
.tk-stat-v-pos { color: #10b981; font-weight: 700; }
.tk-stat-v-neg { color: #ef4444; font-weight: 700; }
.tk-stat-v-neutral { color: var(--text-muted); font-weight: 700; }
/* "🏆 Best" badge sits inside the same flex row but glows gold to draw
   the eye — it's the bragging-rights stat. */
.tk-stat-best {
  background: linear-gradient(90deg, rgba(251,191,36,0.12), transparent 80%);
  padding: 2px 8px; border-radius: 6px;
  box-shadow: inset 2px 0 0 var(--accent-gold);
}
.tickets-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 1.2rem; cursor: pointer; padding: 2px 8px;
  border-radius: 6px;
}
.tickets-close:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.tickets-filters {
  display: flex; gap: 6px; padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.tk-chip {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-secondary, #cbd5e1);
  padding: 4px 12px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px;
  cursor: pointer; transition: all 0.15s ease;
}
.tk-chip:hover { border-color: rgba(251,191,36,0.45); color: var(--text-primary); }
.tk-chip.active { background: rgba(251,191,36,0.14); border-color: var(--accent-gold); color: var(--accent-gold); }
.tickets-body {
  padding: 12px 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.tickets-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.tk-group { margin-bottom: 14px; }
.tk-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.72rem; color: var(--text-muted);
  letter-spacing: 0.4px; text-transform: uppercase;
}
.tk-group-race { color: var(--accent-gold); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.6px; }
.tk-group-meta { color: var(--text-muted); font-weight: 600; }
.tk-group-count { margin-left: auto; }
.tk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.82rem;
}
.tk-row:last-child { border-bottom: none; }
.tk-row-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-row-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 130px; }
.tk-type {
  font-weight: 800; letter-spacing: 0.6px; font-size: 0.72rem;
  color: var(--text-primary);
}
.tk-mode, .tk-flexi {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 0.6rem; letter-spacing: 0.5px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  color: var(--text-secondary, #cbd5e1);
}
.tk-flexi { background: rgba(99,102,241,0.18); color: #a5b4fc; }
.tk-sel { color: var(--text-secondary, #cbd5e1); font-size: 0.78rem; }
.tk-stake { color: var(--text-muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.tk-status {
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
}
.tk-row.is-won    .tk-status { color: #10b981; }
.tk-row.is-lost   .tk-status { color: #ef4444; }
.tk-row.is-pending .tk-status { color: #f59e0b; }
.tk-row.is-won    { background: rgba(16,185,129,0.05); }
.tk-row.is-lost   { opacity: 0.65; }

.header-streak-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.35);
  color: #fdba74;
}
.first-bet-cta,
.hub-action-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.12) 0%, rgba(15, 23, 42, 0.94) 55%, rgba(7, 11, 20, 0.98) 100%);
  border: 1px solid rgba(45, 212, 191, 0.38);
  border-radius: var(--radius-lg);
  box-shadow: var(--glow-teal), 0 8px 28px rgba(0, 0, 0, 0.4);
}
.hub-rail-hero {
  position: relative;
  width: 100%;
  height: 88px;
  margin: -4px 0 4px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(45, 212, 191, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.hub-rail-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  filter: saturate(1.08) contrast(1.05);
}
.hub-rail-hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(7, 11, 20, 0.75) 100%);
  pointer-events: none;
}
.first-bet-cta-head {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fbbf24;
  text-align: center;
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.35);
}
.photo-finish-hero--art {
  width: 100%;
  max-height: 160px;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}
.photo-finish-art {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Imagine bet-type badge sheet (2×3 grid on dark navy) */
.chip-icon--art {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url('/assets/ui/icons/bet-type-badges.jpg');
  background-size: 300% 200%;
  background-repeat: no-repeat;
  border-radius: 50%;
  font-size: 0 !important;
  line-height: 0;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.35);
}
.chip-art-0 { background-position: 0% 0%; }       /* win crown */
.chip-art-1 { background-position: 50% 0%; }      /* place */
.chip-art-2 { background-position: 100% 0%; }     /* show */
.chip-art-3 { background-position: 0% 100%; }     /* exacta stars */
.chip-art-4 { background-position: 50% 100%; }    /* trifecta */
.chip-art-5 { background-position: 100% 100%; }   /* jackpot diamond */
@media (max-width: 420px) {
  .hub-rail-hero { height: 72px; }
}
.first-bet-cta-btn { width: 100%; }
/* Warcraft Rumble dual-CTA: gold bet + teal watch, equal weight */
.hub-dual-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hub-dual-btn {
  width: 100%;
  min-height: var(--tap-min);
  font-size: 0.92rem;
}
.hub-try-one {
  width: 100%;
  min-height: 44px;
  font-weight: 700;
  border-color: rgba(251, 191, 36, 0.35);
  color: #fde68a;
  background: rgba(15, 23, 42, 0.75);
}
.first-bet-cta-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
}
@media (max-width: 380px) {
  .hub-dual-cta { grid-template-columns: 1fr; }
}
.trap-owned, .bcard-trap.trap-owned, .standing-trap.trap-owned {
  box-shadow: 0 0 0 2px #fbbf24, 0 0 8px rgba(251, 191, 36, 0.45);
}
.bet-dog-owned { outline: 1px solid rgba(251, 191, 36, 0.35); }
.gates-pill .race-info-value,
.gates-pill-val {
  color: #fbbf24 !important;
  font-family: Rajdhani, system-ui, sans-serif;
  font-weight: 900 !important;
  letter-spacing: 0.06em;
  animation: pulse 1.2s ease-in-out infinite;
}
.gates-pill {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.rival-ticker {
  margin-top: 6px;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  flex-shrink: 0;
}

.header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(16,185,129,0.6); }
  50% { opacity: 0.4; box-shadow: none; }
}

/* ─── Tab Navigation ─────────────────────────────────────────── */
.tab-nav {
  display: flex;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  z-index: 90;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  letter-spacing: 0.3px;
  min-height: var(--tap-min);
  font-family: Rajdhani, system-ui, sans-serif;
}
.tab-ico { font-size: 1.05rem; line-height: 1; }
.tab-txt { font-weight: 700; letter-spacing: 0.04em; }
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active { color: var(--accent-gold); border-bottom-color: var(--accent-gold); }
/* Springy active indicator underline (desktop top-nav) */
.tab-btn {
  position: relative;
}
.tab-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.28s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}
.tab-btn.active::after {
  width: 70%;
  opacity: 1;
}

/* ─── Main Content ───────────────────────────────────────────── */
.main-content {
  max-width: min(1600px, 100%);
  width: 100%;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
  overflow-x: clip;
}

/* ─── Rumble shell: bottom dock + slim header (mobile) ───────── */
@media (max-width: 768px) {
  body {
    /* Dock clearance so last content isn't under thumb nav */
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }
  .tab-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 200;
    justify-content: space-around;
    align-items: stretch;
    overflow: visible;
    padding: 4px 4px max(6px, env(safe-area-inset-bottom, 6px));
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, #070b14 100%);
    border-top: 1px solid rgba(45, 212, 191, 0.28);
    border-bottom: none;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55), 0 0 24px rgba(45, 212, 191, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .tab-btn {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    font-size: 0.62rem;
    border-bottom: none;
    border-top: 2px solid transparent;
    border-radius: 10px;
    min-width: 0;
    letter-spacing: 0.02em;
  }
  .tab-ico { font-size: 1.15rem; }
  .tab-txt {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .tab-btn.active {
    color: #fbbf24;
    border-top-color: transparent;
    background: rgba(251, 191, 36, 0.1);
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.18);
  }
  .tab-more-wrap {
    flex: 1 1 0;
    display: flex !important;
    position: relative;
  }
  .tab-more-btn {
    width: 100%;
    flex-direction: column;
  }
  .tab-more-menu {
    bottom: calc(100% + 8px);
    top: auto;
    right: 4px;
    left: auto;
  }
  /* Rumble: hide dock during live race / cinema — track is the hero */
  body.is-racing .tab-nav,
  body.race-cinema-active .tab-nav,
  body.is-racing .ticker-bar,
  body.race-cinema-active .ticker-bar {
    display: none !important;
  }
  body.is-racing,
  body.race-cinema-active {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Slim header — resource pill + icons */
  .header {
    padding-top: max(8px, env(safe-area-inset-top, 8px));
    padding-bottom: 8px;
    gap: 8px;
  }
  .header-balance {
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.08));
    border: 1px solid rgba(251, 191, 36, 0.4);
    box-shadow: var(--glow-gold);
    font-family: Rajdhani, system-ui, sans-serif;
    font-weight: 800;
  }
  .sound-toggle {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    padding: 8px;
    border-radius: 12px;
  }
  .sound-toggle .sound-txt { display: none; }
  .sound-toggle .sound-ico { font-size: 1.1rem; }
  .header-status #status-text { display: none; }
  .header-title { font-size: 0.95rem; }
}
.tab-panel { display: none; }
.tab-panel.active {
  display: block;
  animation: dt-tab-panel-in 0.2s ease-out;
}
@keyframes dt-tab-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Track Container — Top-Down Broadcast View ─────────────── */
.track-perspective-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 12px;
}
.track-container {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(251,191,36,0.15),
    0 0 30px rgba(251,191,36,0.08),
    var(--shadow-lg),
    0 12px 40px rgba(0,0,0,0.6);
  border: 1px solid rgba(251,191,36,0.12);
  background: #050a12;
  /* Match RacingViz SVG viewBox aspect (1240 x 700 ≈ 1.771) */
  aspect-ratio: 1240 / 700;
  min-height: 200px;
}
/* Film grain overlay — subtle cinematic texture */
.track-container::before {
  content: '';
  position: absolute; inset: 0; z-index: 10;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  mix-blend-mode: overlay;
  border-radius: var(--radius-lg);
}
.track-container.photo-finish-active::before {
  opacity: 0.06;
}

/* ─── Race Status Pill (controls + info) ───────────────────── */
.race-status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 8px 14px;
  margin-bottom: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.race-status-bar .race-controls {
  margin-bottom: 0;
  flex: 0 1 auto;
}
.race-status-bar .race-info {
  flex: 1 1 auto;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  min-width: 0;
}
body.is-racing .race-status-bar {
  padding: 6px 12px;
  margin-bottom: 6px;
}

/* ─── Race Controls ─────────────────────────────────────────── */
.race-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.race-controls select {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.2s;
}
.race-controls select:hover { border-color: var(--accent-gold); }
.race-controls select:focus { outline: none; border-color: var(--accent-gold); box-shadow: 0 0 0 2px rgba(251,191,36,0.15); }

/* ─── Race Info Bar ──────────────────────────────────────────── */
.race-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 10px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
}
.race-info-item { display: flex; align-items: center; gap: 6px; }
.race-info-label {
  color: var(--text-muted);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: Rajdhani, system-ui, sans-serif;
  font-weight: 700;
}
.race-info-value {
  color: var(--accent-gold);
  font-weight: 700;
  font-size: 0.9rem;
  font-family: Rajdhani, system-ui, sans-serif;
}
#race-phase {
  font-family: Rajdhani, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Race-ID badge in the race info bar — monospaced + boxed so it
   reads as a copyable identifier (vs the human-friendly Race #).
   The tooltip on hover exposes the full canonical race ID. */
.race-info-id-value {
  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: var(--text-secondary, #cbd5e1);
}
.race-info-id { cursor: help; }

/* ─── Toast notifications (non-blocking, bottom-center) ──────────
   Used by _showToast() in app.js for soft refusals + status
   messages that should never use alert(). */
.toast-host {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 10000;
  pointer-events: none;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.toast {
  min-width: 240px; max-width: 460px;
  padding: 10px 16px;
  background: rgba(17, 24, 42, 0.96);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 4px solid var(--accent-gold, #fbbf24);
  border-radius: 8px;
  color: var(--text-primary, #f1f5f9);
  font-size: 0.85rem;
  line-height: 1.35;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast-warn    { border-left-color: #f59e0b; }
.toast-error   { border-left-color: #ef4444; }
.toast-success { border-left-color: #10b981; }
.toast-info    { border-left-color: #60a5fa; }
/* Phase 5: dedicated winnings toast — bigger, gold-accented, clickable. */
.toast-win {
  border-color: rgba(45, 212, 191, 0.45) !important;
  box-shadow: var(--glow-teal), 0 8px 28px rgba(0, 0, 0, 0.5) !important;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(16,185,129,0.16));
  border: 1px solid rgba(251,191,36,0.55);
  border-left: 4px solid #fbbf24;
  border-radius: 10px;
  color: #fff;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(251,191,36,0.18), 0 0 0 1px rgba(0,0,0,0.4);
  text-align: left;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast-win:hover {
  background: linear-gradient(135deg, rgba(251,191,36,0.26), rgba(16,185,129,0.22));
  transform: translateY(-2px);
}
.toast-win-burst { font-size: 1.4rem; line-height: 1; }
.toast-win-msg   { display: flex; flex-direction: column; }
.toast-win-msg strong {
  color: #fbbf24;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.toast-win-sub   { color: rgba(255,255,255,0.7); font-size: 0.7rem; letter-spacing: 0.5px; margin-top: 2px; }
.toast-win-replay {
  margin-top: 6px; align-self: flex-start;
  padding: 5px 12px; border: none; border-radius: 6px;
  background: rgba(11,11,14,0.55); color: #fbbf24;
  font-size: 0.72rem; font-weight: 800; cursor: pointer;
  letter-spacing: 0.3px; transition: background 0.15s;
}
.toast-win-replay:hover { background: rgba(11,11,14,0.8); }

/* Circular countdown timer */
.countdown-ring {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdown-ring svg {
  position: absolute;
  top: 0; left: 0;
  transform: rotate(-90deg);
}
.countdown-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.1);
  stroke-width: 3;
}
.countdown-ring-fill {
  fill: none;
  stroke: var(--accent-gold);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}
.countdown-ring-fill.urgent { stroke: var(--accent-red); }
.countdown-ring-text {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.countdown-ring-label {
  font-size: 0.55rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: absolute;
  bottom: -4px;
}

.weather-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.weather-dry  { background: rgba(16,185,129,0.15); color: #6ee7b7; }
.weather-rain { background: rgba(59,130,246,0.15); color: #93c5fd; }
.weather-wind { background: rgba(156,163,175,0.15); color: #d6d3d1; }
.weather-heat { background: rgba(239,68,68,0.15); color: #fdba74; }
.weather-fog  { background: rgba(107,114,128,0.15); color: #d1d5db; }

/* ─── Announcer ──────────────────────────────────────────────── */
.announcer-box {
  background: linear-gradient(135deg, #141c2e 0%, #0d1320 100%);
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 12px;
  min-height: 52px;
  position: relative;
  overflow: hidden;
}
.announcer-label {
  position: absolute; top: 4px; left: 12px;
  font-size: 0.6rem; color: var(--accent-gold);
  text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.6;
}
.announcer-text {
  font-size: 1.05rem; font-weight: 600; color: #4ade80;
  margin-top: 14px; min-height: 1.4em;
}

/* ─── Dog Cards ──────────────────────────────────────────────── */
.dog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.dog-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-radius: var(--radius-md);
  padding: 12px;
  border-left: 4px solid #666;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: var(--tap-min);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  cursor: default;
  border: 1px solid var(--border-color);
  border-left-width: 4px;
}
.dog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
/* Phase 1.22 — keyboard a11y: dog cards are role=button, must show a
   visible focus ring so keyboard users know where they are. */
.dog-card:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
  transform: translateY(-2px);
}

.dog-card-header { display: flex; align-items: center; gap: 8px; }

/* GAP-11 — watch/follow star. Deliberately plain (not a full button
   treatment) so it doesn't compete visually with the trap number/name. */
.dog-follow-star {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 4px; flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.15s ease, transform 0.1s ease;
}
.dog-follow-star:hover, .dog-follow-star:focus-visible { color: var(--accent-gold); outline: none; }
.dog-follow-star:active { transform: scale(0.9); }
.dog-follow-star.is-followed { color: var(--accent-gold); }

.dog-trap {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.dog-name { font-weight: 700; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dog-meta { font-size: 0.7rem; color: var(--text-muted); }

/* "YOUR PICK" badge + card highlight — drawn when the player has any
   active ticket selecting this trap. Designed to be unmistakable during
   the live race without competing with the trap colour. */
.dog-card-mypick {
  box-shadow: 0 0 0 2px var(--accent-gold), 0 4px 14px rgba(251,191,36,0.25);
  background: linear-gradient(135deg, rgba(251,191,36,0.06), transparent 60%);
}
.dog-mypick {
  display: inline-block; margin-left: 6px;
  font-size: 0.55rem; font-weight: 900; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 4px; vertical-align: middle;
  background: var(--accent-gold); color: #0b0b0e;
  box-shadow: 0 0 8px rgba(251,191,36,0.5);
  animation: myPickPulse 1.8s ease-in-out infinite;
}
@keyframes myPickPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(251,191,36,0.5); }
  50%      { box-shadow: 0 0 14px rgba(251,191,36,0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .dog-mypick { animation: none; }
}

/* Player-owned dog in the race field / program */
.dog-owner-badge {
  display: inline-block; margin-left: 5px;
  font-size: 0.52rem; font-weight: 800; letter-spacing: 0.6px;
  padding: 1px 5px; border-radius: 3px; vertical-align: middle;
  background: rgba(148, 163, 184, 0.25); color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.dog-owner-badge.dog-owner-yours {
  background: rgba(52, 211, 153, 0.2); color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.45);
}
.dog-card-player {
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.15);
}

.dog-style-tag {
  font-size: 0.7rem; color: var(--accent-blue);
  background: rgba(59,130,246,0.1); border-radius: 4px;
  padding: 2px 6px; display: inline-block; width: fit-content;
}

/* Phase 9-D: pre-race form row on dog cards */
.dog-form-row {
  display: flex; align-items: center; gap: 5px; margin-top: 4px; flex-wrap: wrap;
}
.dog-form-label { font-size: 0.62rem; color: var(--text-muted); flex-shrink: 0; }
.dog-form-badges { display: flex; gap: 3px; }
.form-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 3px;
  font-size: 0.62rem; font-weight: 800;
}
.form-badge.fb-win  { background: var(--accent-green); color: #fff; }
.form-badge.fb-place { background: #3b82f6; color: #fff; }
.form-badge.fb-show  { background: #f59e0b; color: #000; }
.form-badge.fb-out   { background: var(--bg-surface); color: var(--text-muted); border: 1px solid var(--border-color); }
.dog-fig-badge {
  font-size: 0.6rem; font-weight: 700; color: var(--accent-gold);
  background: rgba(251,191,36,0.1); border-radius: 3px; padding: 1px 5px;
}
.dog-dslr-badge {
  font-size: 0.6rem; font-weight: 700; color: var(--text-muted);
  background: var(--bg-surface); border-radius: 3px; padding: 1px 5px;
}

/* Phase 9-D: betting race card form badges + inline popover */
.bcard-form {
  display: flex; align-items: center; gap: 3px; flex-shrink: 0;
}
.bcard-form-badges { display: flex; gap: 2px; }
.bcard-form-badges .form-badge { width: 16px; height: 16px; font-size: 0.58rem; }
.bcard-form-loading { font-size: 0.65rem; color: var(--text-muted); }

.dog-form-popover {
  position: fixed; z-index: 9500;
  width: min(280px, calc(100vw - 16px));
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 10px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.form-pop-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.form-pop-title { font-size: 0.82rem; font-weight: 800; color: var(--text-primary); }
.form-pop-replay {
  background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.35);
  color: var(--accent-blue); border-radius: 6px; padding: 2px 8px;
  font-size: 0.72rem; cursor: pointer;
}
.form-pop-table { display: flex; flex-direction: column; gap: 3px; }
.form-pop-row {
  display: grid; grid-template-columns: 28px 1fr 52px 36px; gap: 4px;
  font-size: 0.68rem; color: var(--text-secondary);
}
.form-pop-head { font-weight: 800; color: var(--text-muted); font-size: 0.6rem; text-transform: uppercase; }
.form-pop-pos { font-weight: 800; color: var(--text-primary); }
.form-pop-time, .form-pop-fig { font-family: var(--font-mono); }
.form-pop-meta {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
  font-size: 0.62rem; color: var(--text-muted);
}
.form-pop-dismiss {
  margin-top: 8px; font-size: 0.6rem; color: var(--text-muted); text-align: center;
}
@media (max-width: 640px) {
  .dog-form-popover {
    left: 8px !important; right: 8px; width: auto;
    bottom: 12px; top: auto !important;
  }
}

/* Stat bars */
.dog-stats { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.stat-row { display: flex; align-items: center; gap: 4px; font-size: 0.65rem; }
.stat-label { width: 26px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.stat-bar-bg { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.stat-bar-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease-out; }
.stat-val { width: 20px; text-align: right; color: var(--text-secondary); font-weight: 600; font-family: var(--font-mono); }

/* ─── Dead Heat Badge ────────────────────────────────────────── */
/* Clickable "DH" pill in the post-race results bulletin. Opens a
   photo-finish modal showing portraits of every tied dog. We style
   it as a button (not a span) so keyboard users can tab/enter into
   it; the bulletin overlay uses delegated clicks to handle activation. */
.dh-badge {
  display: inline-block; margin-left: 4px;
  padding: 1px 6px;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.6px;
  color: #1a1106; background: #fbbf24;
  border: 1px solid #b8860b; border-radius: 4px;
  cursor: pointer; vertical-align: middle;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 0 6px rgba(251,191,36,0.45);
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.dh-badge:hover, .dh-badge:focus-visible {
  transform: translateY(-1px);
  background: #fcd34d;
  box-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 0 12px rgba(251,191,36,0.7);
  outline: none;
}
.dh-badge:active { transform: translateY(0); }

/* ─── Bulletin Board Action Bar (Copy / Print / Close) ────────── */
.bb-actions {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(251,191,36,0.15);
}
.bb-btn {
  padding: 8px 18px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.5px;
  background: rgba(255,255,255,0.04);
  color: #cbd5e1;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, color 0.15s ease;
  font-family: inherit;
}
.bb-btn:hover, .bb-btn:focus-visible {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
  outline: none;
}
.bb-btn:active { transform: translateY(1px); }
.bb-btn-primary {
  background: linear-gradient(180deg, #fbbf24, #d97706);
  color: #1a1106; border-color: #b8860b;
  box-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 0 12px rgba(251,191,36,0.35);
}
.bb-btn-close { min-width: 120px; }
.bb-btn-primary:hover, .bb-btn-primary:focus-visible {
  background: linear-gradient(180deg, #fcd34d, #f59e0b);
  color: #1a1106;
  box-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 18px rgba(251,191,36,0.55);
}

/* ─── Live Standings — Infield Scoreboard layout ─────────────── */
/* The .ls-* classes drive the live, in-race sidebar (see App.
   _updateStandings). The legacy .standing-row classes below still
   power _renderPreRaceStandings (the pre-race lineup grid). */
.ls-row {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) minmax(60px,2fr) 32px;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  font-size: 0.78rem;
  border-radius: 4px;
  background: rgba(255,255,255,0.015);
  border-left: 2px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ls-row + .ls-row { margin-top: 2px; }
.ls-row.is-leader {
  background: linear-gradient(90deg, rgba(251,191,36,0.18), rgba(251,191,36,0.04));
  border-left-color: var(--accent-gold);
}
.ls-row.is-finished { opacity: 0.55; filter: saturate(0.6); }
.ls-row.ls-head {
  /* Stay above the data rows even though we use flex `order` to
     re-rank dogs. -1 wins over the per-row order index assigned in JS. */
  order: -1;
  background: transparent;
  border-left: none;
  padding: 4px 6px 3px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 4px;
}
.ls-row.ls-head .ls-trap,
.ls-row.ls-head .ls-name,
.ls-row.ls-head .ls-bar-h,
.ls-row.ls-head .ls-pct,
.ls-row.ls-head .ls-stam-h {
  background: transparent !important;
  color: var(--text-muted);
  font-weight: 800;
  text-shadow: none;
  box-shadow: none;
  border: 0;
  height: auto;
  width: auto;
  text-align: left;
}
.ls-row.ls-head .ls-trap { text-align: center; }
.ls-row.ls-head .ls-pct { text-align: right; }
.ls-trap {
  width: 22px; height: 22px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 0.78rem;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.65);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.45);
  flex-shrink: 0;
}
.ls-name {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  font-weight: 700;
  color: #e5e7eb;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ls-rank {
  font-size: 0.55rem; font-weight: 900; letter-spacing: 1px;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(251,191,36,0.25); color: var(--accent-gold);
  flex-shrink: 0;
}
.ls-row.is-leader .ls-rank { background: rgba(251,191,36,0.45); color: #1a1106; }
.ls-bar {
  position: relative;
  height: 10px;
  background: rgba(0,0,0,0.45);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.ls-bar-fill {
  display: block; height: 100%;
  border-radius: 5px;
  /* Smooth bar growth so the visible delta lands every tick instead
     of looking like a static snapshot. 0.18s matches the 3-tick
     batched repaint; longer transitions visibly lag the dogs. */
  transition: width 0.18s linear, background 0.4s ease;
  box-shadow: 0 0 6px rgba(255,255,255,0.18);
}
.ls-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 0.72rem;
  color: var(--text-secondary);
  text-align: right;
}
.ls-row.is-leader .ls-pct { color: var(--accent-gold); }
.ls-stam {
  grid-column: 1 / -1;
  height: 3px; margin-top: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.ls-stam-fill { display: block; height: 100%; transition: width 0.25s ease, background 0.4s ease; }

/* ─── Live Standings (legacy pre-race lineup grid) ───────────── */
.live-standings { margin-bottom: 12px; }

.standing-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; font-size: 0.78rem;
  border-radius: 4px;
  transition: background 0.2s;
}
.standing-row.leader { background: rgba(251,191,36,0.08); }
.standing-row.finished { opacity: 0.45; }
.standing-row.standing-header {
  padding: 4px 8px 3px; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 3px;
}
.standing-row.standing-header:hover { background: transparent; }
.standing-trap-head, .standing-stamina-head {
  font-size: 0.6rem; font-weight: 800; color: var(--text-muted);
  letter-spacing: 1.2px;
}
.standing-trap-head { width: 18px; text-align: center; }
.standing-stamina-head { width: 32px; text-align: center; }
.standing-pos { width: 18px; font-weight: 800; color: var(--text-muted); text-align: center; }
.standing-row.leader .standing-pos { color: var(--accent-gold); }
.standing-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 4px rgba(0,0,0,0.3); }
.standing-trap {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.7rem; color: #fff;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.3), 0 0 3px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.2);
}
.standing-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.standing-pct { font-size: 0.65rem; color: var(--text-muted); width: 28px; text-align: right; font-family: var(--font-mono); }
.standing-stamina { width: 32px; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.standing-stamina-fill { height: 100%; border-radius: 2px; transition: width 0.2s; }

/* ─── Results ────────────────────────────────────────────────── */
.results-panel {
  background: var(--bg-card); border-radius: var(--radius-md);
  padding: 14px; margin-bottom: 12px; border: 1px solid var(--border-color);
}
.results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.results-title { font-size: 1rem; font-weight: 800; color: var(--accent-gold); }
.results-meta { font-size: 0.75rem; color: var(--text-muted); }

.results-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.results-table th {
  text-align: left; padding: 6px 8px; color: var(--text-muted);
  border-bottom: 1px solid var(--border-color); font-weight: 600;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
}
.results-table td { padding: 7px 8px; border-bottom: 1px solid rgba(31,41,55,0.5); }

.result-row.podium { animation: resultReveal 0.4s ease-out both; }
@keyframes resultReveal { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.trap-swatch {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; vertical-align: middle; margin-right: 4px;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.result-name { font-weight: 600; }
.result-time { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); }
.result-margin { font-size: 0.75rem; color: var(--text-muted); }

.position-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-weight: 800; font-size: 0.75rem;
}
.pos-1 { background: var(--accent-gold); color: #000; box-shadow: var(--gold-glow); }
.pos-2 { background: #9ca3af; color: #000; }
.pos-3 { background: #b45309; color: #fff; }

/* ─── Betting Board ──────────────────────────────────────────── */
.bet-types-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}

.bet-type-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 8px 12px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.15s; color: var(--text-secondary);
  min-width: 80px;
}
.bet-type-btn:hover { border-color: var(--border-light); background: var(--bg-card-hover); }
.bet-type-btn.active {
  border-color: var(--accent-gold); background: var(--accent-gold-dim);
  color: var(--accent-gold); box-shadow: var(--gold-glow);
}
.bet-type-icon { font-size: 1.2rem; }
.bet-type-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; }
.bet-type-desc { font-size: 0.6rem; color: var(--text-muted); }
.bet-type-btn.active .bet-type-desc { color: rgba(251,191,36,0.6); }

/* ─── Compact Race Pill Strip ─────────────────────────────── */
.race-pill-strip {
  display: flex; flex-wrap: nowrap; gap: 3px; margin-bottom: 8px;
  padding: 4px 0 8px; border-bottom: 1px solid var(--border-color);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.race-pill-strip::-webkit-scrollbar { display: none; }
.race-pill {
  scroll-snap-align: start; flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; min-height: 36px;
  background: var(--pill-bg, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--pill-color, var(--border-color)) 40%, transparent);
  border-radius: 14px; cursor: pointer;
  transition: all 0.15s; color: var(--text-secondary);
  font-size: 0; /* collapse whitespace */
}
.race-pill:hover {
  border-color: var(--pill-color, var(--border-light));
  background: color-mix(in srgb, var(--pill-color, #fff) 12%, var(--bg-card));
}
.race-pill.active {
  border-color: var(--pill-color, var(--accent-gold));
  background: var(--pill-bg, var(--accent-gold-dim));
  box-shadow: 0 0 8px color-mix(in srgb, var(--pill-color, var(--accent-gold)) 30%, transparent);
}
/* Grade chip / emblem — solid --pill-color fallback if emblem image 404s */
.grade-chip,
.pill-grade {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background-color: var(--pill-color, var(--border-light));
  background-image: var(--grade-emblem, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #0a0e1a;
  font-size: 0.6rem; font-weight: 900;
  line-height: 1; flex-shrink: 0;
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--pill-color, #94a3b8) 55%, transparent),
    0 0 6px color-mix(in srgb, var(--pill-color, #94a3b8) 25%, transparent);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.85), 0 1px 1px rgba(0, 0, 0, 0.45);
  vertical-align: middle;
}
.grade-emblem.grade-chip:not(.pill-grade):not(.gpt-grade) {
  width: 18px; height: 18px;
  font-size: 0.65rem;
}
.bb-grade .grade-chip {
  margin-right: 4px;
}
.schedule-meta .grade-chip {
  margin-right: 2px;
}
.gpt-grade {
  width: 14px; height: 14px;
  font-size: 0.52rem;
}
.race-info-grade {
  display: inline-flex;
  align-items: center;
}
.race-info-grade .grade-chip {
  width: 22px; height: 22px;
  font-size: 0.75rem;
  border-radius: 6px;
}
.pill-num {
  font-size: 0.68rem; font-weight: 800;
  color: var(--text-primary); letter-spacing: -0.3px;
}
.race-pill.active .pill-num { color: var(--pill-color, var(--accent-gold)); }
.pill-wx { font-size: 0.72rem; line-height: 1; }
.pill-time {
  font-size: 0.58rem; font-weight: 600;
  color: var(--text-muted); font-family: var(--font-mono);
}
.race-pill.active .pill-time { color: var(--pill-color, var(--accent-gold)); opacity: 0.8; }
.race-pill.urgent .pill-time { color: var(--accent-red); font-weight: 800; }
.pill-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-green); flex-shrink: 0;
  animation: pill-pulse 2s ease infinite;
}
.race-pill.urgent .pill-dot { background: var(--accent-red); }
@keyframes pill-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.3; }
}

/* ─── Compact Bet Chips (icon + label strip) ─────────────── */
.bet-types-strip {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px;
}
.bet-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  min-height: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary);
}
.bet-chip:hover {
  border-color: rgba(45, 212, 191, 0.35);
  background: var(--bg-card-hover);
}
.bet-chip.active {
  border-color: var(--accent-gold);
  background: var(--accent-gold-dim);
  color: var(--accent-gold);
  box-shadow: var(--gold-glow);
}
.chip-icon { font-size: 0.9rem; line-height: 1; }
.chip-label {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* Legacy race-select-btn compat */
.race-selector-row {
  display: flex; flex-wrap: nowrap; gap: 4px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border-color);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.race-select-btn {
  scroll-snap-align: start; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 10px; min-width: 48px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.15s; color: var(--text-secondary);
}
.race-select-btn:hover { border-color: var(--border-light); background: var(--bg-card-hover); }
.race-select-btn.active {
  border-color: var(--accent-gold); background: var(--accent-gold-dim);
  color: var(--accent-gold); box-shadow: var(--gold-glow);
}
.race-select-num { font-size: 0.78rem; font-weight: 800; }
.race-select-time { font-size: 0.6rem; color: var(--text-muted); }
.race-select-btn.active .race-select-time { color: rgba(251,191,36,0.7); }

/* Dead heat banner */
.dead-heat-banner {
  background: linear-gradient(90deg, rgba(251,191,36,0.15), rgba(251,191,36,0.05));
  border: 1px solid rgba(251,191,36,0.3); border-radius: var(--radius-sm);
  padding: 6px 12px; margin-bottom: 8px; text-align: center;
  color: var(--accent-gold); font-weight: 700; font-size: 0.85rem;
}
.dh-tag {
  display: inline-block; font-size: 0.55rem; font-weight: 800;
  background: var(--accent-gold); color: #000; border-radius: 3px;
  padding: 1px 4px; vertical-align: middle; margin-left: 2px;
}
.trap-num {
  display: inline-block; min-width: 26px; text-align: center;
  font-weight: 900; font-size: 0.8rem; padding: 2px 5px;
  border-radius: 4px;
}

/* Race header in betting board */
.bet-race-header {
  font-size: 1.1rem; font-weight: 900; color: var(--accent-gold);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}

/* Bet mode row (STRAIGHT / BOX / WHEEL) */
.bet-mode-row {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.bet-mode-btn {
  flex: 1;
  padding: 8px 10px;
  min-height: var(--tap-min);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  transition: all 0.15s;
  text-align: center;
}
.bet-mode-btn:hover { border-color: var(--border-light); background: var(--bg-card-hover); }
.bet-mode-btn.active {
  border-color: var(--accent-blue); background: rgba(59,130,246,0.15);
  color: var(--accent-blue); box-shadow: 0 0 6px rgba(59,130,246,0.2);
}

.bet-selection-hint {
  font-size: 0.78rem; color: var(--text-muted);
  margin-bottom: 10px; padding: 0 2px;
}

/* Dog selection grid — Wave 4: always 2-col on phone, large taps */
.bet-dogs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .bet-dogs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.bet-dog-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  min-height: var(--tap-min);
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-primary);
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 640px) {
  .bet-dog-btn {
    min-height: 56px;
    padding: 12px 10px;
  }
}
.bet-dog-btn:hover {
  border-color: rgba(45, 212, 191, 0.35);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}
.bet-dog-btn.selected {
  border-color: var(--accent-gold);
  background: var(--accent-gold-dim);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.28);
}

.bet-dog-trap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Rajdhani, system-ui, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.bet-dog-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bet-dog-name {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.bet-dog-odds {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--accent-gold);
  letter-spacing: 0.04em;
  line-height: 1;
}


.bet-dog-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--accent-gold); color: #000;
  font-size: 0.6rem; font-weight: 800;
  padding: 1px 6px; border-radius: 8px;
  text-transform: uppercase;
}
/* Leg badge for positions mode */
.bet-dog-badge.leg-badge {
  background: #8b5cf6; color: #fff;
  font-size: 0.55rem; letter-spacing: 0.3px;
}
.bet-dog-btn.active-leg {
  border-color: #8b5cf6; background: rgba(139,92,246,0.15);
  box-shadow: 0 0 8px rgba(139,92,246,0.25);
}
.bet-dog-btn.other-leg {
  border-color: rgba(139,92,246,0.4); background: rgba(139,92,246,0.06);
}

/* Phase 7d: Standout/Banker badges */
.bet-dog-badge.standout-key {
  background: #ef4444; color: #fff;
  font-size: 0.55rem; letter-spacing: 0.3px;
}
.bet-dog-badge.standout-with {
  background: #3b82f6; color: #fff;
  font-size: 0.55rem; letter-spacing: 0.3px;
}
.bet-dog-btn.standout-key-selected {
  border-color: #ef4444; background: rgba(239,68,68,0.15);
  box-shadow: 0 0 8px rgba(239,68,68,0.25);
}
.bet-dog-btn.standout-with-selected {
  border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.06);
}

/* Phase 7e: Flexi-bet percentage selector */
.flexi-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding: 8px;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}
.flexi-label {
  font-size: 0.72rem; font-weight: 700; color: var(--text-secondary);
  white-space: nowrap;
}
.flexi-pct-btn {
  flex: 1; padding: 6px 4px; font-size: 0.7rem; font-weight: 700;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.15s; color: var(--text-secondary);
}
.flexi-pct-btn:hover {
  border-color: var(--accent-gold); color: var(--accent-gold);
}
.flexi-pct-btn.active {
  background: var(--accent-gold); color: #000;
  border-color: var(--accent-gold);
  box-shadow: var(--gold-glow);
}

/* Leg tabs row (1ST / 2ND / 3RD / 4TH position selectors) */
.leg-tabs-row {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.leg-tab-btn {
  flex: 1; padding: 8px 6px; text-align: center;
  background: var(--bg-card); border: 2px solid var(--border-color);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.15s; color: var(--text-secondary);
}
.leg-tab-btn:hover { border-color: var(--border-light); background: var(--bg-card-hover); }
.leg-tab-btn.active {
  border-color: #8b5cf6; background: rgba(139,92,246,0.15);
  color: #c4b5fd; box-shadow: 0 0 8px rgba(139,92,246,0.3);
}
.leg-tab-btn.has-dogs { border-color: rgba(139,92,246,0.5); }
.leg-tab-pos {
  display: block; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.leg-tab-dogs {
  display: block; font-size: 0.72rem; font-weight: 600;
  color: var(--accent-green); font-family: var(--font-mono);
  margin-top: 2px;
}
.over-budget { color: #ef4444 !important; }

.bet-no-dogs { text-align: center; color: var(--text-muted); padding: 30px; grid-column: 1/-1; }

/* Stake row — sticky bottom sheet on mobile (Wave 4 shop-CTA sheet) */
.bet-slip-area {
  background: linear-gradient(180deg, #141c2e 0%, #0f172a 100%);
  border: 1px solid rgba(45, 212, 191, 0.25);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
@media (max-width: 768px) {
  #panel-betting {
    /* dock + slip sheet clearance */
    padding-bottom: max(88px, calc(env(safe-area-inset-bottom, 0px) + 72px));
  }
  #panel-betting .bb-right {
    position: sticky;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    padding-bottom: 0;
  }
  #panel-betting .bet-slip-area {
    margin-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 1px solid rgba(45, 212, 191, 0.35);
    border-bottom: none;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.65), var(--glow-teal);
    background: linear-gradient(180deg, rgba(26, 34, 53, 0.98) 0%, #0a0f1c 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  #panel-betting .bet-actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
  }
  #panel-betting .bet-actions .btn-cta-primary {
    flex: 1;
    min-height: 52px;
    font-size: 1rem;
    letter-spacing: 0.08em;
  }
  #panel-betting .bet-chip {
    min-height: var(--tap-min);
    padding: 10px 12px;
  }
}

.stake-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.stake-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; margin-right: 4px; }

.stake-btn {
  padding: 5px 12px; font-size: 0.75rem; font-weight: 700;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 16px; cursor: pointer; color: var(--text-secondary);
  transition: all 0.15s;
}
.stake-btn:hover { border-color: var(--border-light); }
.stake-btn.active {
  background: var(--accent-gold-dim); border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Phase 1.18 — custom stake input next to the presets.
   Same pill silhouette as .stake-btn so the row reads as one control set. */
.stake-custom-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.stake-custom-prefix {
  position: absolute;
  left: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  pointer-events: none;
}
.stake-custom-input {
  /* 6ch keeps "10000" fully visible with the $ prefix tucked left of it */
  width: 6ch;
  padding: 5px 8px 5px 18px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  color: var(--text-primary);
  font-family: var(--font-mono, inherit);
  text-align: right;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  min-height: 44px;            /* matches preset touch target */
  box-sizing: border-box;
  -moz-appearance: textfield;  /* hide spinner in Firefox */
  appearance: textfield;
}
.stake-custom-input::-webkit-outer-spin-button,
.stake-custom-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stake-custom-input:hover { border-color: var(--border-light); }
.stake-custom-input:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 1px;
  border-color: var(--accent-gold);
}
.stake-custom-input.active {
  background: var(--accent-gold-dim);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}
.stake-custom-input.active + .stake-custom-prefix,
.stake-custom-input.active ~ .stake-custom-prefix {
  /* Match prefix color when input is the "winning" stake value. */
  color: var(--accent-gold);
}

/* Bet summary */
.bet-summary { margin-bottom: 12px; }
.bet-summary-line {
  display: flex; justify-content: space-between; padding: 4px 0;
  font-size: 0.78rem; color: var(--text-secondary);
  border-bottom: 1px solid rgba(31,41,55,0.3);
}
.bet-summary-val { font-weight: 700; color: var(--text-primary); }
.bet-summary-line.potential { border-bottom: none; padding-top: 8px; }
.bet-summary-line.potential span:first-child { color: var(--accent-gold); font-weight: 700; }
.payout-val { color: var(--accent-green) !important; font-size: 1rem; }

.bet-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.bet-actions .btn-cta-primary { min-width: 0; }

.bet-confirmed {
  background: var(--accent-green) !important; color: #fff !important;
  animation: betConfirmPulse 0.3s ease;
}
@keyframes betConfirmPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* Active bets grouped by race */
.active-bets-race-group { margin-bottom: 8px; }
.active-bets-race-label {
  font-size: 0.7rem; font-weight: 800; color: var(--accent-gold);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
  padding: 2px 6px; background: var(--accent-gold-dim); border-radius: 3px;
  display: inline-block;
}

/* Bet history */
.bet-history-title {
  font-size: 0.82rem; font-weight: 800; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin: 12px 0 6px; padding-top: 8px;
  border-top: 1px solid var(--border-color);
}
.bet-history-card {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; margin-bottom: 3px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); font-size: 0.72rem;
}
.bet-history-type { font-weight: 800; min-width: 60px; }
.bet-history-sel { flex: 1; color: var(--text-secondary); font-family: var(--font-mono); }
.bet-history-stake { color: var(--text-muted); font-weight: 600; }
.bet-history-result { font-weight: 800; min-width: 70px; text-align: right; }
.bet-history-card.bet-won {
  border-color: var(--accent-green); background: rgba(34,197,94,0.05);
}
.bet-history-card.bet-won .bet-history-result { color: var(--accent-green); }
.bet-history-card.bet-lost .bet-history-result { color: #ef4444; }
.bet-history-card.bet-refunded {
  border-color: var(--accent-gold); background: rgba(251,191,36,0.05);
}
.bet-history-card.bet-refunded .bet-history-result { color: var(--accent-gold); }

/* ─── Race Schedule ──────────────────────────────────────────── */
#race-schedule { margin-bottom: 14px; }
.schedule-title {
  font-size: 0.85rem; font-weight: 800; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.schedule-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 200px; overflow-y: auto;
}
.schedule-card {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  font-size: 0.75rem;
}
.schedule-card.betting-open {
  border-color: var(--accent-gold); background: var(--accent-gold-dim);
}
.schedule-card.schedule-selected {
  outline: 2px solid var(--accent-gold);
  outline-offset: 1px;
}
.schedule-card[data-schedule-race] {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.schedule-card[data-schedule-race]:hover {
  border-color: rgba(251, 191, 36, 0.55);
}
.schedule-race-num {
  font-weight: 900; font-size: 0.85rem; color: var(--accent-gold);
  min-width: 32px;
}
.schedule-details { flex: 1; min-width: 0; }
.schedule-time { font-weight: 600; color: var(--text-primary); }
.schedule-meta { font-size: 0.68rem; color: var(--text-muted); text-transform: capitalize; }
.schedule-status {
  font-weight: 800; font-size: 0.7rem; color: var(--text-muted);
  text-transform: uppercase;
}
.schedule-card.betting-open .schedule-status {
  color: var(--accent-green); animation: pulse 1.5s ease infinite;
}
.schedule-empty { text-align: center; color: var(--text-muted); padding: 12px; font-size: 0.8rem; }

/* Active bets */
.active-bets-title { font-size: 0.82rem; font-weight: 700; color: var(--accent-gold); margin: 12px 0 8px; }
.active-bet-card {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); margin-bottom: 6px; font-size: 0.78rem;
}
.active-bet-card.clickable { cursor: pointer; transition: all 0.15s; }
.active-bet-card.clickable:hover { border-color: var(--accent-gold); background: var(--accent-gold-dim); }
.active-bet-left { flex: 1; min-width: 0; }
.active-bet-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.active-bet-type { font-weight: 700; color: var(--accent-blue); font-size: 0.72rem; margin-bottom: 2px; }
.active-bet-sel { color: var(--text-secondary); font-size: 0.73rem; line-height: 1.4; }
.active-bet-stake { font-weight: 700; color: var(--accent-gold); }
.active-bet-status { font-size: 0.65rem; font-weight: 700; color: var(--accent-green); }
.active-bet-status.pulse { animation: pulse 1.5s ease-in-out infinite; }

/* Bet selection formatting spans */
.sel-trap { font-weight: 800; color: var(--text-primary); font-family: var(--font-mono); }
.sel-pos { font-weight: 800; color: var(--accent-blue); font-size: 0.65rem; margin-right: 2px; }
.sel-leg { white-space: nowrap; }
.sel-divider { color: var(--text-muted); margin: 0 3px; }
.sel-mode-tag {
  font-size: 0.6rem; font-weight: 800; color: var(--accent-gold);
  border: 1px solid var(--accent-gold); border-radius: 3px;
  padding: 0 4px; margin-left: 4px; vertical-align: middle;
}

/* ─── Bet Ticket Modal ───────────────────────────────────────── */
.bet-ticket-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: ticketFadeIn 0.2s ease-out;
}
.bet-ticket-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
}
@keyframes ticketFadeIn { from { opacity: 0; } to { opacity: 1; } }

.bet-ticket {
  position: relative; z-index: 1;
  width: 340px; max-width: 92vw; max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, #1a1f2e 0%, #141824 100%);
  border: 2px solid var(--accent-gold);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(251,191,36,0.15);
  padding: 0;
  font-family: var(--font-body);
  animation: ticketSlideUp 0.25s ease-out;
}
@keyframes ticketSlideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.ticket-header {
  text-align: center; padding: 18px 16px 12px;
  background: linear-gradient(135deg, rgba(251,191,36,0.12) 0%, transparent 100%);
}
.ticket-logo {
  font-size: 1.3rem; font-weight: 900; letter-spacing: 3px;
  color: var(--accent-gold); text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(251,191,36,0.3);
}
.ticket-track-sub {
  font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 2px; margin-top: 2px;
}

.ticket-divider {
  height: 1px; background: var(--border-color); margin: 0 16px;
}
.ticket-divider.dashed {
  background: none;
  border-top: 1px dashed rgba(255,255,255,0.12);
}

.ticket-race-info { padding: 10px 16px 6px; text-align: center; }
.ticket-race-num {
  font-size: 1.05rem; font-weight: 800; color: var(--text-primary);
}
.ticket-race-meta {
  font-size: 0.7rem; color: var(--text-muted); margin-top: 2px;
}

.ticket-bet-type {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 16px 10px;
}
.ticket-type-name {
  font-size: 1.1rem; font-weight: 900; color: var(--accent-blue);
  letter-spacing: 1px;
}
.ticket-mode-badge {
  font-size: 0.6rem; font-weight: 800; padding: 2px 8px;
  border: 1px solid var(--accent-gold); color: var(--accent-gold);
  border-radius: 4px; letter-spacing: 0.5px;
}

.ticket-selections { padding: 12px 16px; }
.ticket-leg-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 0.82rem; color: var(--text-primary);
}
.ticket-leg-row + .ticket-leg-row { border-top: 1px solid rgba(255,255,255,0.04); }
.ticket-pos-label {
  font-size: 0.65rem; font-weight: 800; color: var(--accent-blue);
  background: rgba(59,130,246,0.12); border-radius: 3px;
  padding: 2px 6px; min-width: 32px; text-align: center;
  flex-shrink: 0;
}
.ticket-trap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 0.72rem; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.ticket-financials { padding: 10px 16px; }
.ticket-fin-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 0.78rem; color: var(--text-secondary);
}
.ticket-fin-row.total {
  font-weight: 800; color: var(--text-primary); font-size: 0.88rem;
  border-top: 1px solid var(--border-color); padding-top: 8px; margin-top: 4px;
}
.ticket-fin-val { font-weight: 800; font-family: var(--font-mono); color: var(--accent-gold); }
.ticket-fin-row.total .ticket-fin-val { font-size: 1rem; }

.ticket-status-row { text-align: center; padding: 8px 16px; }
.ticket-status {
  display: inline-block; padding: 4px 16px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 1px;
}
.ticket-status.live {
  background: rgba(34,197,94,0.15); color: var(--accent-green);
  border: 1px solid var(--accent-green);
  animation: pulse 1.5s ease-in-out infinite;
}
.ticket-status.won {
  background: rgba(34,197,94,0.2); color: var(--accent-green);
  border: 1px solid var(--accent-green);
}
.ticket-status.lost {
  background: rgba(239,68,68,0.15); color: #ef4444;
  border: 1px solid #ef4444;
}
.ticket-status.refunded {
  background: rgba(251,191,36,0.15); color: var(--accent-gold);
  border: 1px solid var(--accent-gold);
}

.ticket-footer {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 16px;
}
.ticket-qr { flex-shrink: 0; }
.ticket-qr svg { display: block; border-radius: 4px; background: #fff; padding: 4px; }
.ticket-meta-col { flex: 1; min-width: 0; }
.ticket-id {
  font-size: 0.6rem; color: var(--text-muted); font-family: var(--font-mono);
  word-break: break-all; line-height: 1.3;
}
.ticket-time {
  font-size: 0.65rem; color: var(--text-secondary); margin-top: 4px;
}

.ticket-close-btn {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-secondary); font-size: 0.9rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.ticket-close-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* ─── Ticket: thermal-printer additions (rev 9) ─────────────── */
/* Perforated edge effect — recreate the half-circle tear-strip vibe of
   real pari-mutuel tickets without heavy SVG. Uses radial-gradient
   "holes" along the top + bottom of the ticket card. */
.ticket-perf {
  height: 10px; margin: 0;
  background-image: radial-gradient(circle at 6px 0, #0b0d12 5px, transparent 5px);
  background-size: 14px 10px; background-repeat: repeat-x;
}
.ticket-perf.top    { background-position: 0 0; }
.ticket-perf.bottom {
  background-image: radial-gradient(circle at 6px 10px, #0b0d12 5px, transparent 5px);
}

/* Track id under the masthead — small, monospaced, just the bare fact. */
.ticket-track-id {
  font-size: 0.6rem; color: var(--text-muted); font-family: var(--font-mono);
  letter-spacing: 1.4px; margin-top: 4px;
}

/* Race id (last 12 chars) shown beneath race meta — copyable for support */
.ticket-race-id {
  font-size: 0.6rem; color: var(--text-muted); font-family: var(--font-mono);
  letter-spacing: 1px; margin-top: 4px;
  user-select: all;
}

/* Allow each selection row to wrap so the provenance (kennel · @owner)
   sits on its own line under the dog name. Without this the row flexes
   the provenance off-screen on narrow tickets. */
.ticket-leg-row { flex-wrap: wrap; }
.ticket-dog-name { flex: 1; min-width: 0; font-weight: 600; }
.ticket-prov {
  flex-basis: 100%; padding-left: 30px;
  font-size: 0.65rem; color: var(--text-muted);
  font-family: var(--font-mono); letter-spacing: 0.3px;
}
.ticket-prov.muted { font-style: italic; opacity: 0.7; }
.ticket-prov-owner { color: var(--accent-blue); }
.ticket-leg-row .ticket-pos-label + .ticket-trap + .ticket-dog-name + .ticket-prov {
  /* Indent matches: pos-label(32) + gap(8) + trap(22) + gap(8) = 70px */
  padding-left: 70px;
}

/* Combos badge next to the bet type, e.g. "6× COMBOS" */
.ticket-combos-badge {
  font-size: 0.55rem; font-weight: 800; padding: 2px 6px;
  background: rgba(59,130,246,0.15); color: var(--accent-blue);
  border: 1px solid rgba(59,130,246,0.4); border-radius: 4px;
  letter-spacing: 0.6px;
}

/* Serial number block — formatted as XXXX-XXXX-XXXX so it reads cleanly
   when a player needs to call it out for support. */
.ticket-serial-label {
  font-size: 0.55rem; font-weight: 800; letter-spacing: 1.5px;
  color: var(--text-muted); text-transform: uppercase;
}
.ticket-serial {
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 800;
  color: var(--accent-gold); letter-spacing: 1.5px; margin-top: 2px;
  user-select: all;
}
.ticket-disclaimer {
  font-size: 0.55rem; color: var(--text-muted); font-style: italic;
  margin-top: 6px; line-height: 1.3;
}

/* Fallback when the QR library fails to load */
.ticket-qr-fallback {
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(239,68,68,0.08); border: 1px dashed rgba(239,68,68,0.4);
  color: #ef4444; font-size: 0.6rem; font-weight: 700;
  border-radius: 4px; text-align: center; padding: 6px;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; font-size: 0.82rem; font-weight: 700;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.5px;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--accent-gold); color: #000; }
.btn-primary:hover:not(:disabled) { background: #f59e0b; box-shadow: var(--gold-glow); }

.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); }
.btn-secondary:hover { background: var(--bg-card-hover); }
.btn-sm { padding: 6px 12px; font-size: 0.72rem; }

/* ─── Controls Row ───────────────────────────────────────────── */
.controls-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.controls-row select {
  padding: 8px 12px; background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.82rem;
  cursor: pointer;
}

/* ─── History ────────────────────────────────────────────────── */
.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-empty {
  text-align: center; color: var(--text-muted); padding: 48px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.history-empty .empty-icon { font-size: 3rem; line-height: 1; opacity: 0.85; }
.history-empty .empty-hero-img {
  width: 120px; height: 120px; object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
}
.history-empty .empty-title { font-size: 1rem; font-weight: 800; color: var(--text-primary); letter-spacing: 0.5px; }
.history-empty .empty-sub { font-size: 0.82rem; max-width: 400px; line-height: 1.45; color: var(--text-secondary); }
.history-empty .btn { margin-top: 6px; }

.history-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 10px 14px;
  transition: background 0.15s;
}
.history-item:hover { background: var(--bg-card-hover); }

.history-podium { flex-shrink: 0; }
.history-trap {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.history-details { flex: 1; min-width: 0; }
.history-winner { font-weight: 700; color: var(--accent-gold); font-size: 0.85rem; }
.history-meta { font-size: 0.7rem; color: var(--text-muted); }
.history-places { font-size: 0.7rem; color: var(--text-secondary); }
.history-time { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; }
.history-place-swatch {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; vertical-align: middle; margin-right: 2px;
}

/* ─── Sound Toggle ───────────────────────────────────────────── */
.sound-toggle {
  background: none; border: 1px solid var(--border-color);
  color: var(--text-muted); padding: 4px 10px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 0.78rem;
  transition: all 0.15s;
}
.sound-toggle.active { color: var(--accent-gold); border-color: rgba(251,191,36,0.4); }

/* ─── Header Sister-Site Link (Push Pull cross-promo) ─────────── */
/* Subtle outlined chip that matches the .sound-toggle aesthetic so the
   header reads as a row of related controls, not an ad.  Magnet icon
   nods to Push Pull's gameplay; subtle purple hover signals brand. */
.header-sister-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border-color);
  color: var(--text-muted); padding: 4px 10px;
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: 0.78rem; font-weight: 600;
  text-decoration: none; margin-left: 6px;
  transition: all 0.15s;
}
.header-sister-link:hover {
  color: #c084fc;
  border-color: rgba(192,132,252,0.45);
  background: rgba(192,132,252,0.08);
}
.header-sister-link:focus-visible {
  outline: 2px solid #c084fc;
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .header-sister-link .sister-link-label { display: none; }
  .header-sister-link { padding: 4px 8px; }
}

/* ─── Settings Gear Button + Modal ─────────────────────────────── */
.settings-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1rem;
  margin-left: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.2s ease;
}
.settings-btn:hover, .settings-btn:focus-visible {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.25);
  transform: rotate(40deg);
  outline: none;
}

.settings-overlay,
.settings-overlay.modal-scrim {
  position: fixed; inset: 0; z-index: 9500;
  display: none;
  align-items: center; justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: var(--scrim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.22s ease;
  cursor: pointer;
  animation: none;
}
.settings-overlay.active,
.settings-overlay.closing,
.settings-overlay.modal-scrim.active,
.settings-overlay.modal-scrim.closing {
  display: flex;
}
.settings-overlay.is-open { opacity: 1; }
.settings-card {
  width: 100%; max-width: 460px;
  background: linear-gradient(180deg, #1a2235 0%, #0f172a 100%);
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: var(--glow-teal), 0 24px 64px rgba(0,0,0,0.65);
  padding: 18px 18px 14px;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.22s ease;
  cursor: default;
}
.settings-overlay.is-open .settings-card { transform: translateY(0) scale(1); }
.settings-overlay.dt-modal-in.is-open .settings-card {
  animation: dt-modal-card-in 0.22s ease-out;
}
.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.settings-header h2 {
  margin: 0;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.settings-close {
  background: none; border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
  width: 28px; height: 28px; border-radius: 6px;
  cursor: pointer; font-size: 0.85rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.settings-close:hover, .settings-close:focus-visible {
  background: rgba(239,68,68,0.15); color: #fca5a5; outline: none;
}
.settings-section { margin-bottom: 16px; }
.settings-hero-img {
  display: block; width: 72px; height: 72px; object-fit: contain;
  margin: 0 auto 8px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.settings-section h3 {
  margin: 0 0 8px;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 1.5px;
  color: var(--text-muted); text-transform: uppercase;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
}
.settings-label {
  font-size: 0.82rem; color: var(--text-primary);
  flex: 1; min-width: 0;
}
.settings-action {
  background: rgba(251,191,36,0.12);
  color: var(--accent-gold);
  border: 1px solid rgba(251,191,36,0.3);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.75rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease;
}
.settings-action:hover, .settings-action:focus-visible {
  background: rgba(251,191,36,0.22);
  outline: none;
}
.settings-action:active { transform: translateY(1px); }

/* Phase 1.16 — master volume slider in Settings → Audio */
.settings-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 160px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(251,191,36,0.45) 0%, rgba(251,191,36,0.12) 100%);
  outline: none;
  cursor: pointer;
}
.settings-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-gold);
  border: 2px solid #0a0a0d;
  box-shadow: 0 0 6px rgba(251,191,36,0.5);
  cursor: pointer;
}
.settings-volume::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-gold);
  border: 2px solid #0a0a0d;
  box-shadow: 0 0 6px rgba(251,191,36,0.5);
  cursor: pointer;
}
.settings-volume:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 4px;
}

.settings-action.is-on {
  background: rgba(16,185,129,0.18);
  color: #34d399;
  border-color: rgba(16,185,129,0.45);
}

/* Self-service account / responsible-gambling / accessibility inputs.
   Reuses the settings-row layout but needs a real text input. */
.settings-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.8rem;
  flex: 1; min-width: 0;
}
.settings-input:focus-visible { outline: 2px solid var(--accent-gold); }
.settings-details { padding: 2px 12px; }
.settings-details > summary { padding: 8px 0; font-size: 0.82rem; }
.settings-details .settings-row { margin-top: 6px; background: transparent; border: none; padding: 4px 0; }
.form-help { font-size: 0.72rem; color: var(--text-muted); padding: 4px 12px 0; line-height: 1.4; }

/* Accessibility: reduced motion — collapse all CSS transitions/animations
   when the user opts in via Settings (independent of the OS-level
   prefers-reduced-motion, which we already respect passively elsewhere). */
body.a11y-reduce-motion, body.a11y-reduce-motion * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Accessibility: high contrast — boost text/border contrast site-wide. */
body.a11y-high-contrast {
  --text-muted: #cbd5e1;
  --border-color: rgba(255,255,255,0.35);
}
body.a11y-high-contrast .settings-row,
body.a11y-high-contrast .tk-row {
  border-color: rgba(255,255,255,0.35);
}

/* Accessibility: text size — scales the app's base font size. Applied to
   <html> so rem-based sizing throughout the app scales with it. */
html.a11y-text-large { font-size: 112%; }
html.a11y-text-xlarge { font-size: 128%; }

/* Cross-promo card — Push Pull Survival.  The hover lift + arrow
   slide tell the user this is an outbound link, not a tab toggle. */
.other-game-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(59,130,246,0.08));
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.other-game-card:hover, .other-game-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(168,85,247,0.6);
  box-shadow: 0 8px 18px rgba(168,85,247,0.18);
  outline: none;
}
.other-game-icon {
  font-size: 2rem; flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.other-game-text { flex: 1; min-width: 0; }
.other-game-title {
  font-size: 0.95rem; font-weight: 800; color: #c4b5fd;
  margin-bottom: 2px;
}
.other-game-tag {
  font-size: 0.72rem; color: var(--text-muted);
  line-height: 1.3;
}
.other-game-arrow {
  font-size: 1.1rem; color: #c4b5fd;
  transition: transform 0.2s ease;
}
.other-game-card:hover .other-game-arrow { transform: translate(3px, -3px); }
.settings-footer {
  margin-top: 4px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
  font-size: 0.6rem; letter-spacing: 1.5px;
  color: var(--text-muted);
}

/* ─── Two-column Layout ─────────────────────────────────────── */
.race-layout { display: grid; grid-template-columns: 1fr 240px; gap: 12px; margin-bottom: 12px; }
.race-sidebar {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 12px;
  max-height: 480px; overflow-y: auto;
}
.sidebar-title {
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 800px) {
  .race-layout { grid-template-columns: 1fr; }
  .race-sidebar { max-height: 200px; }
}
@media (max-width: 640px) {
  .header-title { font-size: 1rem; }
  .header-balance { font-size: 0.78rem; padding: 3px 10px; }
  .dog-cards { grid-template-columns: repeat(2, 1fr); }
  .bet-dogs-grid { grid-template-columns: repeat(2, 1fr); }
  .bet-types-row { gap: 4px; }
  .bet-type-btn { min-width: 60px; padding: 6px 8px; }
}
@media (max-width: 400px) {
  .dog-cards { grid-template-columns: 1fr; }
  .bet-dogs-grid { grid-template-columns: 1fr; }
  .tab-btn { padding: 8px 14px; font-size: 0.78rem; }
}

/* ─── Podium Display ─────────────────────────────────────────── */
.podium-display {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 8px; margin: 16px 0; padding: 0 20px;
}
.podium-slot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  animation: podiumReveal 0.5s ease-out both;
}
.podium-trap {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
.podium-name { font-size: 0.78rem; font-weight: 700; text-align: center; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winner-name { color: var(--accent-gold); text-shadow: 0 0 8px rgba(251,191,36,0.3); }
.podium-time { font-size: 0.65rem; color: var(--text-muted); font-family: var(--font-mono); }
.podium-block {
  padding: 6px 16px; border-radius: 4px 4px 0 0;
  font-size: 0.7rem; font-weight: 700; text-align: center;
  min-width: 70px;
}
.podium-block.p1 { background: linear-gradient(180deg, #fbbf24 0%, #b45309 100%); color: #000; height: 60px; display: flex; align-items: center; justify-content: center; }
.podium-block.p2 { background: linear-gradient(180deg, #9ca3af 0%, #6b7280 100%); color: #000; height: 44px; display: flex; align-items: center; justify-content: center; }
.podium-block.p3 { background: linear-gradient(180deg, #b45309 0%, #78350f 100%); color: #fff; height: 32px; display: flex; align-items: center; justify-content: center; }

.podium-1 .podium-trap { box-shadow: 0 0 16px rgba(251,191,36,0.5); }

@keyframes podiumReveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ─── Photo Finish Banner ────────────────────────────────────── */
.photo-finish-banner {
  background: linear-gradient(90deg, rgba(239,68,68,0.15) 0%, rgba(251,191,36,0.15) 50%, rgba(239,68,68,0.15) 100%);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-sm);
  padding: 8px 14px; margin-bottom: 12px;
  font-size: 0.82rem; font-weight: 700; color: #fca5a5;
  text-align: center;
  animation: photoFlash 0.8s ease;
}
.photo-flash { font-size: 1.2rem; margin-right: 6px; }
@keyframes photoFlash {
  0% { opacity: 0; } 20% { opacity: 1; } 40% { opacity: 0.3; } 60% { opacity: 1; } 80% { opacity: 0.6; } 100% { opacity: 1; }
}

/* ─── Bet Settlement Summary ─────────────────────────────────── */
.bet-settlement-summary {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
.settlement-title {
  font-size: 0.78rem; font-weight: 700; color: var(--accent-gold);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;
}
.settlement-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; font-size: 0.78rem;
  border-radius: 4px; margin-bottom: 4px;
}
.settlement-row.won { background: rgba(16,185,129,0.1); }
.settlement-row.lost { background: rgba(239,68,68,0.08); }
.settlement-type { font-weight: 700; min-width: 55px; color: var(--accent-blue); }
.settlement-sel { flex: 1; color: var(--text-secondary); }
.settlement-stake { color: var(--text-muted); }
.settlement-result { font-weight: 700; min-width: 60px; text-align: right; }
.settlement-row.won .settlement-result { color: var(--accent-green); }
.settlement-row.lost .settlement-result { color: var(--accent-red); }
.settlement-total {
  text-align: right; font-weight: 800; font-size: 0.9rem;
  padding: 6px 8px; margin-top: 4px;
}
.settlement-total.net-positive { color: var(--accent-green); }
.settlement-total.net-negative { color: var(--accent-red); }

/* ─── History Filter Bar ─────────────────────────────────────── */
.history-filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px; align-items: center;
}
.history-filter-bar input,
.history-filter-bar select {
  padding: 6px 10px; background: var(--bg-card);
  color: var(--text-primary); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); font-size: 0.78rem;
}
.history-filter-bar input { flex: 1; min-width: 120px; }
.history-filter-bar input::placeholder { color: var(--text-muted); }

/* ─── Hall of Fame (docs/COOLEST_GAME_EVER.md #1/#4) ────────────── */
.hof-header {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-bottom: 10px;
  font-size: 0.75rem; color: var(--text-muted);
}
.hof-trophy-mark {
  width: 28px; height: 28px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}
.hof-list { display: flex; flex-direction: column; gap: 8px; }
.hof-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.hof-row--podium {
  border-color: rgba(251,191,36,0.35);
  background: linear-gradient(135deg, rgba(251,191,36,0.07) 0%, rgba(45,212,191,0.03) 100%);
}
.hof-medal { font-size: 1.3rem; width: 34px; text-align: center; flex-shrink: 0; }
.hof-main { flex: 1; min-width: 0; }
.hof-name { font-weight: 800; font-size: 0.92rem; color: var(--text-primary); }
.hof-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.hof-stats {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: 0.78rem; font-weight: 700; color: var(--accent-gold); flex-shrink: 0;
}

/* ─── Personal Betting Analytics (docs/COOLEST_GAME_EVER.md #6) ─── */
.analytics-callouts { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.analytics-callout {
  padding: 8px 14px; border-radius: var(--radius-md); font-size: 0.8rem; font-weight: 700;
  background: var(--bg-card); border: 1px solid var(--border-color);
}
.analytics-callout--best { border-color: rgba(16,185,129,0.4); color: #10b981; }
.analytics-callout--worst { border-color: rgba(239,68,68,0.4); color: #ef4444; }
.analytics-table-wrap { overflow-x: auto; margin-top: 10px; }
.analytics-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.analytics-table th {
  color: var(--text-muted); font-weight: 700; font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color); padding: 6px 8px; text-align: left;
}
.analytics-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); }
.analytics-type { font-weight: 800; color: var(--text-primary); font-family: var(--font-mono); }

.history-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 10px 12px;
  margin-bottom: 12px;
  padding: 10px 14px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  font-size: 0.78rem;
}
.history-stat { display: flex; flex-direction: column; align-items: center; }
.history-stat-sparkline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.history-stat-sparkline-chart {
  display: flex;
  align-items: center;
  justify-content: center;
}
.history-sparkline {
  display: block;
}
.history-stat-val { font-weight: 800; font-size: 1rem; color: var(--accent-gold); }
.history-stat-label { color: var(--text-muted); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; }

/* ─── My Dogs Sub-Tabs ───────────────────────────────────────── */
.dogs-sub-tabs {
  display: flex; gap: 6px; margin-bottom: 14px;
}
.dogs-sub-btn {
  padding: 8px 16px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.dogs-sub-btn:hover { border-color: var(--border-light); background: var(--bg-card-hover); }
.dogs-sub-btn.active {
  border-color: var(--accent-gold); background: var(--accent-gold-dim);
  color: var(--accent-gold); box-shadow: var(--gold-glow);
}

/* ─── Kennel Cards ───────────────────────────────────────────── */
.kennel-empty { text-align: center; padding: 40px 20px; }
.kennel-empty .empty-hero-img {
  width: min(100%, 280px); height: 120px; object-fit: cover;
  border-radius: var(--radius-md); margin: 0 auto 12px;
  border: 1px solid rgba(45, 212, 191, 0.22);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  filter: saturate(1.08) contrast(1.04);
}
.kennel-header { margin-bottom: 10px; }
.kennel-header .screen-hero-img,
.market-header .screen-hero-img {
  display: block; width: 100%; height: 88px; object-fit: cover;
  object-position: center 40%; border-radius: var(--radius-md);
  margin-bottom: 8px;
  border: 1px solid rgba(45, 212, 191, 0.22);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  filter: saturate(1.08) contrast(1.05);
}
.kennel-count { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.kennel-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.kennel-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.kennel-card:hover { border-color: var(--border-light); box-shadow: var(--shadow); }
.kennel-card.injured { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.03); }

.kennel-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.kennel-card-head-text { flex: 1; min-width: 0; }
.kennel-form-row { margin: 8px 0 4px; }

.history-seed-tag {
  font-size: 0.62rem; font-family: 'JetBrains Mono', monospace;
  color: var(--accent-gold); opacity: 0.85; padding: 2px 6px;
  background: rgba(251,191,36,0.08); border-radius: 4px;
}
.bb-fairness .bb-btn { font-size: 0.68rem; }
.kennel-dog-name { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.dog-cosmetic-badges { display: inline-flex; gap: 2px; margin-left: 5px; vertical-align: middle; }
.dog-cosmetic-badge { font-size: 0.75rem; }
.kennel-dog-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.kennel-level {
  background: var(--accent-gold-dim); color: var(--accent-gold);
  font-weight: 800; font-size: 0.75rem; padding: 3px 8px;
  border-radius: var(--radius-sm); white-space: nowrap;
}

.kennel-stats { margin-bottom: 10px; }
.kennel-stat-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.kennel-stat-label { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); width: 28px; font-family: var(--font-mono); }
.kennel-stat-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.kennel-stat-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.kennel-stat-val { font-size: 0.65rem; font-weight: 700; color: var(--text-secondary); width: 22px; text-align: right; font-family: var(--font-mono); }

.kennel-condition { margin-bottom: 10px; padding-top: 8px; border-top: 1px solid var(--border-color); }
.kennel-cond-item { display: flex; gap: 10px; font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 6px; }
.injured-badge { color: #ef4444; font-weight: 700; }

.kennel-xp-bar {
  position: relative; height: 14px; background: rgba(255,255,255,0.06);
  border-radius: 7px; overflow: hidden;
}
.kennel-xp-fill { height: 100%; background: linear-gradient(90deg, #8b5cf6, #a78bfa); border-radius: 7px; transition: width 0.3s; }
.kennel-xp-text {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; color: #fff;
}

.kennel-actions { display: flex; gap: 6px; }

/* ─── Market Cards ───────────────────────────────────────────── */
.market-header { margin-bottom: 10px; }
.market-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.market-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.market-card:hover { border-color: var(--border-light); box-shadow: var(--shadow); }

.market-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.market-dog-name { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); }
.market-price { font-weight: 800; font-size: 0.9rem; color: var(--accent-green); }
.market-price.too-expensive { color: var(--accent-red); }
.market-dog-meta { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 8px; }

.market-stats-mini { display: flex; gap: 8px; margin-bottom: 6px; }
.market-stat {
  display: flex; flex-direction: column; align-items: center;
  font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase;
}
.market-stat-v { font-weight: 800; font-size: 0.82rem; color: var(--text-primary); }
.market-total { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 8px; }

.market-buy-btn { width: 100%; }

/* ─── Danger Button ──────────────────────────────────────────── */
.btn-danger {
  background: rgba(239,68,68,0.1); color: #ef4444;
  border: 1px solid rgba(239,68,68,0.3);
}
.btn-danger:hover { background: rgba(239,68,68,0.2); }

/* ─── Kennel Overview ────────────────────────────────────────── */
.kennel-overview {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 16px; margin-bottom: 14px;
}

/* Kennel skin cosmetics (equip flow fix) — each equipped skin gives the
   whole Kennel tab a distinct, visible treatment instead of a state
   change nobody could ever see. */
#panel-kennel.kennel-fx-neon_sign .kennel-overview {
  border-color: rgba(232,121,249,0.5);
  box-shadow: 0 0 24px rgba(232,121,249,0.25), inset 0 0 30px rgba(232,121,249,0.06);
}
#panel-kennel.kennel-fx-gold_trim .kennel-overview {
  border-color: rgba(251,191,36,0.55);
  box-shadow: 0 0 20px rgba(251,191,36,0.2);
}
#panel-kennel.kennel-fx-gold_trim .kennel-title { color: var(--accent-gold); }
#panel-kennel.kennel-fx-premium_turf .kennel-overview {
  border-color: rgba(16,185,129,0.5);
  background: linear-gradient(160deg, rgba(16,185,129,0.06) 0%, var(--bg-card) 60%);
}
.kennel-name-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.kennel-title { font-size: 1.1rem; font-weight: 800; color: var(--accent-gold); margin: 0; }
.kennel-overview-stats { display: flex; gap: 16px; }
.ko-stat { display: flex; flex-direction: column; align-items: center; }
.ko-val { font-weight: 800; font-size: 1rem; color: var(--text-primary); }
.ko-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ─── Daily Bonus ────────────────────────────────────────────── */
.kennel-daily-section {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(135deg, rgba(251,191,36,0.08) 0%, rgba(139,92,246,0.08) 100%);
  border: 1px solid rgba(251,191,36,0.2); border-radius: var(--radius-md);
  padding: 12px 16px; margin-bottom: 14px;
}
.daily-info { display: flex; flex-direction: column; gap: 2px; }
.daily-label { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); }
.daily-streak { font-size: 0.72rem; color: var(--accent-gold); }
.daily-claim-btn { white-space: nowrap; }

/* ─── Facility Cards ─────────────────────────────────────────── */
.facility-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.facility-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.facility-card:hover { border-color: var(--border-light); box-shadow: var(--shadow); }
.facility-card.maxed { border-color: rgba(16,185,129,0.3); }

.facility-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.facility-icon { font-size: 1.5rem; }
.facility-name { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); }
.facility-desc { font-size: 0.68rem; color: var(--text-muted); }
.facility-level {
  margin-left: auto; white-space: nowrap;
  font-weight: 800; font-size: 0.75rem; color: var(--accent-blue);
  background: rgba(59,130,246,0.1); padding: 3px 8px; border-radius: var(--radius-sm);
}

.facility-bar {
  height: 6px; background: rgba(255,255,255,0.06);
  border-radius: 3px; overflow: hidden; margin-bottom: 8px;
}
.facility-bar-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
  transition: width 0.4s ease;
}

.facility-perk { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.72rem; }
.perk-current { color: var(--accent-green); font-weight: 600; }
.perk-next { color: var(--text-muted); }

.facility-upgrade-btn { width: 100%; }
.facility-maxed-badge {
  text-align: center; font-size: 0.78rem; font-weight: 700;
  color: var(--accent-green); padding: 6px;
}

/* ─── Staff cards (reuse facility-card shell) ───────────────── */
.staff-grid { margin-top: 4px; }
.staff-card.hired { border-color: rgba(16,185,129,0.3); }
.staff-hire-btn { width: 100%; }
.staff-ops-line {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-color);
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ─── Reputation Panel ───────────────────────────────────────── */
.rep-panel {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px;
}
.rep-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.rep-badge {
  width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: var(--bg-main);
}
.rep-icon { font-size: 1.2rem; }
.rep-score { font-size: 0.7rem; font-weight: 800; color: var(--text-primary); }
.rep-info { flex: 1; }
.rep-level { font-weight: 800; font-size: 1rem; }
.rep-perks { font-size: 0.7rem; color: var(--text-muted); }

.rep-meters { margin-bottom: 10px; }
.rep-meter { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.rep-meter-label { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); width: 70px; }
.rep-meter-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.rep-meter-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.rep-meter-val { font-size: 0.65rem; font-weight: 700; color: var(--text-secondary); width: 48px; text-align: right; font-family: var(--font-mono); }

.rep-stats-row {
  display: flex; gap: 12px; font-size: 0.7rem; color: var(--text-muted);
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.rep-bans {
  background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 10px;
  font-size: 0.72rem;
}
.rep-bans-title { font-weight: 700; color: #ef4444; display: block; margin-bottom: 4px; }
.rep-ban-item { display: block; color: var(--text-secondary); }

/* ─── Cheat Cards ────────────────────────────────────────────── */
.cheat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.cheat-card {
  background: var(--bg-main); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 10px;
  transition: border-color 0.15s;
}
.cheat-card:hover { border-color: var(--border-light); }
.cheat-card.risk-low { border-left: 3px solid #10b981; }
.cheat-card.risk-medium { border-left: 3px solid #f59e0b; }
.cheat-card.risk-high { border-left: 3px solid #ef4444; }

.cheat-card-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.cheat-icon { font-size: 1.2rem; }
.cheat-name { font-weight: 700; font-size: 0.78rem; color: var(--text-primary); }
.cheat-desc { font-size: 0.65rem; color: var(--text-muted); }
.cheat-meta { display: flex; justify-content: space-between; font-size: 0.7rem; margin-bottom: 6px; }
.cheat-cost { font-weight: 700; color: var(--text-secondary); }
.cheat-risk { font-weight: 700; }
.cheat-risk--low { color: #10b981; }
.cheat-risk--medium { color: #f59e0b; }
.cheat-risk--high { color: #ef4444; }
.cheat-btn {
  width: 100%;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.cheat-btn:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
}
#cheat-toast.cheat-toast { display: none; }

/* ─── Training Toast ─────────────────────────────────────────── */
.train-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; background: var(--bg-card);
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); z-index: 1000;
  animation: slideIn 0.3s ease-out;
  font-size: 0.82rem;
}
.train-toast-stat { font-weight: 700; color: var(--accent-green); }
.train-toast-xp { color: var(--accent-purple); font-weight: 600; }
.train-toast-level { color: var(--accent-gold); font-weight: 800; }
.train-toast-cost { color: var(--accent-red); font-weight: 600; }
.train-toast-error { color: var(--accent-red); font-weight: 600; }

/* ─── Animations ─────────────────────────────────────────────── */
@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.animate-in { animation: slideIn 0.3s ease-out; }

@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px rgba(251,191,36,0.3); }
  50% { box-shadow: 0 0 15px rgba(251,191,36,0.6); }
}
.glow { animation: glow 2s ease-in-out infinite; }

/* ─── Safe Area Insets (notched devices) ─────────────────────── */
.header {
  padding-top: max(10px, env(safe-area-inset-top));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.main-content {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.tab-nav {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

/* ─── PWA Standalone Mode ────────────────────────────────────── */
@media (display-mode: standalone) {
  .header { padding-top: max(16px, env(safe-area-inset-top)); }
  body { overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
  .tab-nav { position: sticky; top: 0; z-index: 50; }
}

/* ─── Touch Targets (min 44px per WCAG) ──────────────────────── */
.btn, .tab-btn, .bet-type-btn, .bet-dog-btn, .stake-btn,
.dogs-sub-btn, .facility-upgrade-btn, .cheat-btn, .market-buy-btn {
  min-height: 44px;
}

/* ─── Focus Visible (keyboard nav) ───────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Skip to Content ────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100%; left: 16px;
  background: var(--accent-gold); color: #000;
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-weight: 700; z-index: 999;
  transition: top 0.2s;
}
.skip-link:focus { top: 8px; }

/* ─── Mobile: Small screens ──────────────────────────────────── */
@media (max-width: 480px) {
  .kennel-grid { grid-template-columns: 1fr; }
  .market-grid { grid-template-columns: 1fr; }
  .cheat-grid { grid-template-columns: 1fr; }
  .facility-grid { grid-template-columns: 1fr; }
  .podium-display { gap: 4px; padding: 0 8px; }
  .podium-block { min-width: 55px; padding: 4px 10px; }
  .history-stats-bar { flex-wrap: wrap; }
  .rep-header { flex-wrap: wrap; }
  .kennel-daily-section { flex-direction: column; gap: 8px; align-items: stretch; }
  .daily-claim-btn { width: 100%; }
  .settlement-row { flex-wrap: wrap; }
  .train-toast { left: 8px; right: 8px; transform: none; }
}

/* ─── High Contrast Mode ─────────────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --bg-card: #1a1a2e;
    --border-color: #555;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #cccccc;
  }
  .btn { border-width: 2px; }
  .position-badge { border: 2px solid currentColor; }
}

/* ─── Breeding UI ────────────────────────────────────────────── */
.breed-panel { padding: 8px 0; }
.breed-header { margin-bottom: 16px; }
.breed-selectors {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 16px;
}
.breed-slot { flex: 1; min-width: 0; }
.breed-slot-label {
  font-weight: 700; font-size: 0.85rem; color: var(--accent-gold);
  margin-bottom: 6px;
}
.breed-select {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-color); font-size: 0.85rem;
  margin-bottom: 8px; min-height: 44px;
}
.breed-cross {
  font-size: 1.8rem; font-weight: 700; color: var(--accent-gold);
  padding-top: 28px; flex-shrink: 0;
}
.breed-preview {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 10px; margin-top: 4px;
}
.breed-preview-empty {
  background: var(--bg-card); border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm); padding: 20px 10px;
  text-align: center; color: var(--text-muted); font-size: 0.8rem;
}
.breed-preview-name { font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.breed-preview-meta { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 6px; }
.breed-preview-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.breed-stat {
  font-size: 0.7rem; background: rgba(59,130,246,0.1);
  color: #3b82f6; padding: 2px 6px; border-radius: 4px; font-weight: 600;
}
.breed-preview-total { font-size: 0.75rem; color: var(--text-secondary); }
.breed-info {
  display: flex; gap: 16px; flex-wrap: wrap;
  background: var(--bg-card); border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 14px;
  border: 1px solid var(--border-color);
}
.breed-info-item { display: flex; gap: 6px; font-size: 0.8rem; color: var(--text-muted); }
.breed-info-val { color: var(--text-primary); font-weight: 600; }
.breed-btn {
  width: 100%; font-size: 1rem; padding: 12px;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  min-height: 48px;
}
.breed-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Lineage tag on kennel cards */
.kennel-lineage {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 0.75rem; color: var(--text-muted);
  border-top: 1px solid var(--border-color); margin-top: 4px; padding-top: 6px;
}
.lineage-gen {
  background: rgba(124,58,237,0.15); color: #a855f7;
  padding: 2px 8px; border-radius: 10px; font-weight: 700; font-size: 0.7rem;
}
.lineage-parents { font-style: italic; }

@media (max-width: 480px) {
  .breed-selectors { flex-direction: column; }
  .breed-cross { padding-top: 0; text-align: center; }
}

/* ─── Maintenance Section ────────────────────────────────────── */
.kennel-maintenance-section {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 12px; margin-top: 8px;
}
.maintenance-info {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px;
}
.maintenance-cost { color: var(--accent-gold); font-weight: 600; }

/* ─── Transaction Ledger ─────────────────────────────────────── */
.ledger-summary {
  display: flex; gap: 12px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 10px;
}
.ledger-stat { text-align: center; flex: 1; min-width: 60px; }
.ledger-stat-val { display: block; font-weight: 700; font-size: 0.95rem; }
.ledger-stat-val.earned { color: #10b981; }
.ledger-stat-val.spent { color: #ef4444; }
.ledger-stat-label { font-size: 0.7rem; color: var(--text-muted); }
.ledger-list {
  max-height: 300px; overflow-y: auto;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.ledger-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 0.78rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row.income { background: rgba(16,185,129,0.04); }
.ledger-row.expense { background: rgba(239,68,68,0.04); }
.ledger-label { font-weight: 600; white-space: nowrap; min-width: 90px; }
.ledger-desc { flex: 1; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-amount { font-weight: 700; white-space: nowrap; }
.ledger-row.income .ledger-amount { color: #10b981; }
.ledger-row.expense .ledger-amount { color: #ef4444; }
.ledger-time { color: var(--text-muted); font-size: 0.7rem; white-space: nowrap; }

/* ─── Race Main Layout (Track + Sidebar) ─────────────────────── */
.race-main-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 12px;
  margin-bottom: 12px;
}
.race-main-col { min-width: 0; }
.race-book-sidebar {
  display: flex; flex-direction: column; gap: 12px;
}
.race-card-section { margin-bottom: 12px; }

@media (max-width: 900px) {
  .race-main-layout { grid-template-columns: 1fr; }
  .race-book-sidebar { flex-direction: row; flex-wrap: wrap; }
  .race-book-sidebar > * { flex: 1; min-width: 200px; }
}

/* ─── Camera Director Panel ──────────────────────────────────── */
.camera-director-panel {
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #050a12;
  display: none; /* Hidden by default, shown during races */
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.camera-director-panel.active {
  display: block;
  animation: panelFadeIn 0.3s ease;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Layout Mode Switching — Mode A: Full width track, no camera */
.race-main-layout.mode-a .track-perspective-wrap {
  max-width: 100%;
}
.race-main-layout.mode-a .camera-director-panel {
  display: none;
}

/* Waiting hub — track hero + dual CTA rail (Rumble map-first calm) */
body:not(.is-racing) #panel-live.active .track-perspective-wrap {
  box-shadow: var(--glow-teal), 0 16px 48px rgba(0, 0, 0, 0.55);
  border-radius: var(--radius-lg);
  position: relative;
}
/* Wave R2 map-first: track first, status pill overlays lower edge (wait only) */
@media (max-width: 768px) {
  body:not(.is-racing) #panel-live.active {
    display: flex;
    flex-direction: column;
  }
  /* Track layout rises above status bar in paint order */
  body:not(.is-racing) #panel-live.active .race-main-layout {
    order: 1;
    margin-bottom: 0;
  }
  body:not(.is-racing) #panel-live.active .race-status-bar {
    order: 2;
    margin: -48px 10px 12px;
    position: relative;
    z-index: 6;
    padding: 6px 10px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(7, 11, 20, 0.9));
    border: 1px solid rgba(45, 212, 191, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  body:not(.is-racing) #panel-live.active .first-bet-cta,
  body:not(.is-racing) #panel-live.active .hub-action-rail {
    order: 3;
  }
  body:not(.is-racing) #panel-live.active .sidebar-drawer-toggle {
    order: 4;
  }
  body:not(.is-racing) #panel-live.active .sidebar-drawer-scrim {
    order: 0; /* scrim stays fixed; order irrelevant */
  }
  body:not(.is-racing) #panel-live.active .race-status-bar .race-info-label {
    font-size: 0.62rem;
  }
  body:not(.is-racing) #panel-live.active .race-status-bar .btn {
    min-height: 40px;
    padding: 6px 12px;
    font-size: 0.78rem;
  }
  body:not(.is-racing) #panel-live.active #btn-race-fullscreen {
    display: none; /* cinema FAB covers this on mobile wait */
  }
}
body:not(.is-racing) #panel-live.active .first-bet-cta,
body:not(.is-racing) #panel-live.active .hub-action-rail {
  position: sticky;
  bottom: max(8px, env(safe-area-inset-bottom, 8px));
  z-index: 45;
  margin-top: 4px;
}
/* Soft scrim under sticky dual-CTA so track art stays the hero */
body:not(.is-racing) #panel-live.active .first-bet-cta::before {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -8px;
  top: -12px;
  z-index: -1;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 11, 20, 0.75) 40%, rgba(7, 11, 20, 0.95) 100%);
  pointer-events: none;
  border-radius: var(--radius-lg);
}
body:not(.is-racing) #panel-live.active .first-bet-cta {
  position: sticky;
}
@media (max-width: 768px) {
  body:not(.is-racing) #panel-live.active .announcer-box,
  body:not(.is-racing) #panel-live.active .trackman-box,
  body:not(.is-racing) #panel-live.active .race-card-section,
  body:not(.is-racing) #panel-live.active .bot-activity-section {
    display: none;
  }
  body:not(.is-racing) #panel-live.active .race-status-bar {
    margin-bottom: 6px;
    padding: 6px 12px;
  }
}

/* Layout Mode B: Track 70%, Camera sidebar 30% */
.race-main-layout.mode-b {
  grid-template-columns: 7fr 3fr;
}
.race-main-layout.mode-b .camera-director-panel {
  display: block;
}

/* ─── Trackman Tips ─────────────────────────────────────────── */
.trackman-box {
  background: linear-gradient(135deg, rgba(251,191,36,0.06) 0%, rgba(139,92,246,0.06) 100%);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.trackman-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-purple), var(--accent-gold));
}
.trackman-label {
  font-size: 0.65rem; font-weight: 700; color: var(--accent-gold);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px;
}
.trackman-tips { display: flex; flex-direction: column; gap: 6px; }
.trackman-tip {
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4;
  padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.trackman-tip:last-child { border-bottom: none; }
.trackman-tip::before {
  content: '▸ '; color: var(--accent-gold); font-weight: 700;
}

/* ─── Bot Activity Feed ─────────────────────────────────────── */
.bot-activity-panel {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 12px;
}
.bot-activity-list {
  max-height: 200px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-light) transparent;
}
.bot-activity-item {
  font-size: 0.72rem; color: var(--text-secondary);
  padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.03);
  animation: slideIn 0.3s ease-out;
}
.bot-activity-item:last-child { border-bottom: none; }
.bot-activity-time {
  font-size: 0.6rem; color: var(--text-muted); margin-left: 4px;
}

/* ─── Dev QA Panel ──────────────────────────────────────────── */
.dev-panel {
  display: none; /* shown via app.js when ?dev=1 or localhost */
  background: linear-gradient(135deg, rgba(239,68,68,0.06) 0%, rgba(251,191,36,0.06) 100%);
  border: 2px dashed rgba(239,68,68,0.3);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: 16px;
}
.dev-panel-title {
  font-size: 0.75rem; font-weight: 800; color: var(--accent-red);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
}
.dev-panel-controls {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.dev-input {
  padding: 6px 10px; background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  font-size: 0.78rem; width: 120px;
}
.btn-gold {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000; font-weight: 800;
}
.btn-gold:hover { box-shadow: var(--gold-glow); }

/* ─── Shop System ───────────────────────────────────────────── */
.shop-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}
.shop-title {
  font-size: 1.4rem; font-weight: 800; color: var(--accent-gold);
  margin: 0; text-shadow: 0 0 20px rgba(251,191,36,0.2);
}
/* Equip flow (previously server-only, no client UI at all) */
.shop-equipped-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px; padding: 8px 12px;
  background: rgba(45,212,191,0.06); border: 1px solid rgba(45,212,191,0.2);
  border-radius: var(--radius-md); font-size: 0.78rem;
}
.shop-equipped-label { font-weight: 700; color: var(--text-muted); margin-right: 2px; }
.shop-equipped-chip {
  padding: 3px 9px; border-radius: 999px;
  background: rgba(45,212,191,0.14); color: #5eead4; font-weight: 600;
}
.btn-cta-equipped {
  background: rgba(16,185,129,0.15); color: #10b981;
  border: 1px solid rgba(16,185,129,0.4); cursor: default;
}
.shop-balance {
  font-size: 1.1rem; font-weight: 700; color: var(--accent-gold);
  background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.25);
  border-radius: 20px; padding: 6px 16px;
}
.shop-categories {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.shop-cat-btn {
  padding: 8px 16px; font-size: 0.82rem; font-weight: 600;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 20px; cursor: pointer; color: var(--text-secondary);
  transition: all 0.15s; min-height: 44px;
}
.shop-cat-btn:hover { border-color: var(--border-light); background: var(--bg-card-hover); }
.shop-cat-btn.active {
  border-color: var(--accent-gold); background: var(--accent-gold-dim);
  color: var(--accent-gold); box-shadow: var(--gold-glow);
}

.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 20px;
}

.shop-item {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 14px;
  transition: all 0.2s; position: relative; overflow: hidden;
  cursor: pointer;
}
.shop-item:hover {
  border-color: var(--border-light); box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.shop-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.shop-item.rarity-common::before { background: #9ca3af; }
.shop-item.rarity-rare::before { background: #3b82f6; }
.shop-item.rarity-epic::before { background: #8b5cf6; }
.shop-item.rarity-legendary::before { background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24); }
.shop-item.rarity-legendary { border-color: rgba(251,191,36,0.3); }

.shop-item-icon { font-size: 2rem; text-align: center; margin-bottom: 8px; }
.shop-item-name {
  font-weight: 700; font-size: 0.88rem; color: var(--text-primary);
  text-align: center; margin-bottom: 4px;
}
.shop-item-desc {
  font-size: 0.72rem; color: var(--text-muted); text-align: center;
  margin-bottom: 10px; line-height: 1.3;
}
.shop-item-price {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; font-weight: 800; font-size: 0.9rem; color: var(--accent-gold);
}
.shop-item-price.free { color: var(--accent-green); }
.shop-item-rarity {
  position: absolute; top: 8px; right: 8px;
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px;
}
.rarity-common .shop-item-rarity { background: rgba(156,163,175,0.15); color: #9ca3af; }
.rarity-rare .shop-item-rarity { background: rgba(59,130,246,0.15); color: #3b82f6; }
.rarity-epic .shop-item-rarity { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.rarity-legendary .shop-item-rarity { background: rgba(251,191,36,0.15); color: #fbbf24; }

.shop-item-limited {
  position: absolute; top: 8px; left: 8px;
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px;
  background: rgba(239,68,68,0.2); color: #fca5a5;
  animation: pulse 2s ease-in-out infinite;
}

/* Real-money items (Stripe checkout) — distinct blue "card" treatment so
   they never visually blend with coin-cost items (gambling-firewall
   clarity: this is a purchase of virtual currency, not a bet). */
.shop-item-real-money {
  position: absolute; top: 8px; left: 8px;
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px;
  background: rgba(59,130,246,0.18); color: #60a5fa;
}
.shop-buy-stripe {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  border-color: #2563eb !important;
}
.shop-buy-stripe:disabled { opacity: 0.6; }

.shop-buy-btn {
  width: 100%;
  margin-top: 10px;
  min-height: var(--tap-min);
}
.shop-sticky-bar {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin-top: 12px;
  padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, #0f172a 100%);
  border-top: 1px solid rgba(45, 212, 191, 0.35);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.55), var(--glow-teal);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.shop-sticky-balance {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fbbf24;
  white-space: nowrap;
}
.shop-sticky-cta {
  flex: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  #panel-shop {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .shop-sticky-bar {
    display: flex;
  }
}

/* Shop Inventory */
.shop-inventory {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 16px;
}
.inventory-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.inventory-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px; background: var(--bg-surface);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  font-size: 0.78rem; position: relative;
}
.inventory-item-icon { font-size: 1.5rem; }
.inventory-item-name { font-weight: 600; text-align: center; font-size: 0.72rem; }
.inventory-item-count {
  position: absolute; top: 4px; right: 4px;
  background: var(--accent-blue); color: #fff;
  font-size: 0.6rem; font-weight: 800;
  padding: 1px 5px; border-radius: 8px;
}
.inventory-use-btn {
  padding: 4px 10px; font-size: 0.68rem; font-weight: 700;
  background: var(--accent-green); color: #fff;
  border: none; border-radius: 4px; cursor: pointer;
  min-height: 28px;
}

/* ─── Leaderboard ───────────────────────────────────────────── */
.leaderboard-section { margin-top: 20px; }
.leaderboard-list { display: flex; flex-direction: column; gap: 4px; }
.leaderboard-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  font-size: 0.8rem;
}
.leaderboard-row:nth-child(1) { border-color: rgba(251,191,36,0.3); }
.leaderboard-row:nth-child(2) { border-color: rgba(156,163,175,0.3); }
.leaderboard-row:nth-child(3) { border-color: rgba(180,83,9,0.3); }
.lb-rank {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.72rem; flex-shrink: 0;
  background: var(--bg-surface); color: var(--text-muted);
}
.leaderboard-row:nth-child(1) .lb-rank { background: var(--accent-gold); color: #000; }
.leaderboard-row:nth-child(2) .lb-rank { background: #9ca3af; color: #000; }
.leaderboard-row:nth-child(3) .lb-rank { background: #b45309; color: #fff; }

/* Phase 1.9 — clickable leaderboard rows + self highlight + click flash */
.leaderboard-row { cursor: pointer; transition: border-color 0.12s, background 0.12s, transform 0.12s; }
.leaderboard-row:hover { border-color: rgba(251,191,36,0.45); background: rgba(251,191,36,0.04); }
.leaderboard-row:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}
.leaderboard-row.lb-row-me {
  border-color: rgba(74,222,128,0.55);
  background: linear-gradient(90deg, rgba(74,222,128,0.07), rgba(74,222,128,0.02));
}
.leaderboard-row.lb-row-me .lb-rank {
  background: #4ade80; color: #052e16;
}
.lb-you-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #052e16;
  background: #4ade80;
  border-radius: 4px;
  vertical-align: middle;
}
.leaderboard-row.lb-row-flash {
  animation: lb-row-flash 0.7s ease-out;
}
@keyframes lb-row-flash {
  0%   { box-shadow: 0 0 0 0 rgba(251,191,36,0.85); }
  60%  { box-shadow: 0 0 0 8px rgba(251,191,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
}
@media (prefers-reduced-motion: reduce) {
  .leaderboard-row.lb-row-flash { animation: none; }
}
.lb-name { flex: 1; font-weight: 600; }
.lb-tier {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
}
.lb-tier.casual { background: rgba(59,130,246,0.1); color: #3b82f6; }
.lb-tier.sharp { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.lb-tier.whale { background: rgba(251,191,36,0.1); color: #fbbf24; }
.lb-tier.degen { background: rgba(239,68,68,0.1); color: #ef4444; }
.lb-winnings { font-weight: 700; color: var(--accent-green); min-width: 60px; text-align: right; }

/* ─── Glassmorphism utility ─────────────────────────────────── */
.glass {
  background: rgba(20, 28, 46, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ─── Coin Splash Animation ─────────────────────────────────── */
@keyframes coinSplash {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-40px) scale(0.5); opacity: 0; }
}
.coin-splash {
  position: fixed; pointer-events: none; z-index: 9999;
  font-size: 1.5rem; animation: coinSplash 0.8s ease-out forwards;
}

/* ─── Sparkle effect ────────────────────────────────────────── */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}

/* ─── Night mode track glow + inner shadow ───────────────── */
.track-container::after {
  content: '';
  position: absolute; inset: 0; z-index: 11;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.5), inset 0 -20px 40px rgba(0,0,0,0.2);
  pointer-events: none;
}

/* ─── Responsive additions for new elements ─────────────────── */
@media (max-width: 640px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-categories { gap: 4px; }
  .shop-cat-btn { padding: 6px 12px; font-size: 0.78rem; }
  .shop-title { font-size: 1.1rem; }
  .trackman-box { padding: 10px 12px; }
}
@media (max-width: 480px) {
  .shop-grid { grid-template-columns: 1fr; }
  .inventory-grid { grid-template-columns: repeat(2, 1fr); }
  .leaderboard-row { padding: 6px 8px; font-size: 0.75rem; }
  .dev-panel-controls { flex-direction: column; }
  .dev-input { width: 100%; }
}

/* ─── Big Win live feed banner ───────────────────────────────────
   Bleeding-edge social-proof feature: server broadcasts to every
   connected client whenever ANY player crosses the big-win payout
   threshold (playerSettlement.js). Fixed top-center, slides down,
   auto-dismisses. Distinct gold/fire styling from ordinary toasts so
   it reads as "something exciting just happened," not a system message. */
.bigwin-banner {
  position: fixed; top: -80px; left: 50%; transform: translateX(-50%);
  z-index: 10000;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(217,119,6,0.95));
  color: #1a1200; font-weight: 700; font-size: 0.85rem;
  padding: 10px 20px; border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 30px rgba(251,191,36,0.35);
  transition: top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: min(92vw, 480px);
  pointer-events: none;
}
.bigwin-banner.is-visible { top: 0; }
.bigwin-icon { font-size: 1.3rem; flex-shrink: 0; }
.bigwin-hero-icon { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.bigwin-text { line-height: 1.3; }
.bigwin-amount { color: #7c2d12; }
@media (prefers-reduced-motion: reduce) {
  .bigwin-banner { transition: none; }
}

/* ─── Jackpot Escalation Banner (docs/COOLEST_GAME_EVER.md #4) ──── */
.jackpot-banner {
  align-items: center; justify-content: center; gap: 8px;
  /* v2.4.17: Grok abstract gold tote-glow art under a teal legibility scrim —
     a real jackpot deserves broadcast sparkle, not a flat gradient. */
  background:
    linear-gradient(90deg, rgba(6,24,20,0.82) 0%, rgba(8,30,26,0.62) 50%, rgba(6,24,20,0.82) 100%),
    url('/assets/ui/hero/jackpot-hero.jpg') center 38% / cover no-repeat,
    linear-gradient(90deg, rgba(16,185,129,0.10) 0%, rgba(45,212,191,0.16) 50%, rgba(16,185,129,0.10) 100%);
  border-bottom: 1px solid rgba(45,212,191,0.35);
  padding: 7px 14px;
  font-size: 0.8rem; font-weight: 700; color: #5eead4;
  text-align: center;
}
.jackpot-icon { font-size: 1rem; }
.jackpot-hero-icon { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; }
.jackpot-text { font-variant-numeric: tabular-nums; }

/* ─── Recent Wins Ticker Bar ─────────────────────────────────── */
.ticker-bar {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(251,191,36,0.08) 0%, rgba(5,10,25,0.95) 20%, rgba(5,10,25,0.95) 80%, rgba(251,191,36,0.08) 100%);
  border-bottom: 1px solid rgba(251,191,36,0.15);
  padding: 4px 12px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.72rem;
}
.ticker-label {
  flex-shrink: 0;
  color: var(--accent-gold);
  font-weight: 800;
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-right: 12px;
  padding: 2px 8px;
  background: rgba(251,191,36,0.1);
  border-radius: 4px;
  border: 1px solid rgba(251,191,36,0.2);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 0 6px;
  animation: tickerSlideIn 0.4s ease-out;
}
.ticker-item.ticker-placeholder { color: var(--text-muted); font-style: italic; font-weight: 400; }
.ticker-swatch {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.ticker-sep {
  color: rgba(255,255,255,0.1);
  padding: 0 4px;
  font-weight: 300;
}
@keyframes tickerSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ─── Godmode Panel ─────────────────────────────────────────── */
.godmode-panel {
  background: rgba(139,92,246,0.06);
  border: 1px dashed rgba(139,92,246,0.3);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
  display: none;
}
body.godmode .godmode-panel { display: block; }
.godmode-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(139,92,246,0.1);
}
.godmode-row:last-child { border-bottom: none; }

/* ─── Enhanced Announcer Glow ───────────────────────────────── */
.announcer-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(251,191,36,0.6), transparent);
  animation: announceGlow 3s ease-in-out infinite;
}
@keyframes announceGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ─── Tab Notification Dot ──────────────────────────────────── */
.tab-btn.has-notification::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-red);
  margin-left: 4px;
  animation: pulse 1.5s ease-in-out infinite;
}

/* ─── Track Container Night Glow Pulse ──────────────────────── */
@keyframes trackGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(251,191,36,0.05); }
  50% { box-shadow: 0 0 30px rgba(251,191,36,0.1); }
}
.track-perspective-wrap {
  animation: trackGlow 4s ease-in-out infinite;
}

/* ─── Track mobile breakpoints ──────────────────────────── */
@media (max-width: 640px) {
  .track-container {
    border-radius: var(--radius-md);
  }
  .track-perspective-wrap {
    margin: 0 auto 8px;
  }
}
@media (max-width: 480px) {
  .track-container {
    aspect-ratio: 16 / 9;
  }
}

/* ─── Winner Celebration Flash ──────────────────────────────── */
@keyframes winnerFlash {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.results-panel.celebrating {
  background-image: linear-gradient(90deg, transparent 0%, rgba(251,191,36,0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: winnerFlash 2s ease-in-out;
}

/* ─── History Sub-Tabs ────────────────────────────────────────── */
.history-sub-tabs {
  display: flex; gap: 3px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border-color);
}
.hsub-btn {
  flex: 1; padding: 6px 8px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); cursor: pointer;
  color: var(--text-secondary); font-size: 0.72rem; font-weight: 700;
  transition: all 0.15s; text-align: center;
}
.hsub-btn:hover { border-color: var(--border-light); background: var(--bg-card-hover); }
.hsub-btn.active {
  border-color: var(--accent-gold); background: var(--accent-gold-dim);
  color: var(--accent-gold); box-shadow: var(--gold-glow);
}
.history-content { min-height: 100px; }

/* History stat colors */
.stat-green { color: var(--accent-green) !important; }
.stat-red { color: var(--accent-red) !important; }

/* ─── Bet History Rows ───────────────────────────────────────── */
.history-bet-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin-bottom: 2px;
  background: var(--bg-card); border-radius: var(--radius-sm);
  font-size: 0.78rem; border-left: 3px solid var(--border-color);
  cursor: pointer; transition: background 0.15s;
}
.history-bet-row:hover { background: var(--bg-surface); }
.history-bet-row.bet-won { border-left-color: var(--accent-green); }
.history-bet-row.bet-lost { border-left-color: var(--accent-red); opacity: 0.7; }
.hbet-icon { font-size: 0.9rem; flex-shrink: 0; }
.hbet-id { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); min-width: 45px; }
.hbet-time { font-size: 0.65rem; color: var(--text-muted); min-width: 45px; }
.hbet-race-link { color: var(--accent-gold); text-decoration: none; min-width: 60px; }
.hbet-race-link:hover { text-decoration: underline; }
.hbet-type { font-weight: 800; font-size: 0.65rem; letter-spacing: 0.5px; color: var(--text-muted); min-width: 55px; }
.hbet-sel { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-secondary); }
.hbet-stake { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }
.hbet-payout { font-weight: 700; font-size: 0.75rem; min-width: 80px; text-align: right; }
.bet-won .hbet-payout { color: var(--accent-green); }
.bet-lost .hbet-payout { color: var(--accent-red); }
.hbet-replay { flex-shrink: 0; }
.hbet-replay-btn {
  background: var(--accent-blue); color: #fff; border: none;
  border-radius: 50%; width: 24px; height: 24px; font-size: 0.7rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, background 0.15s;
}
.hbet-replay-btn:hover { transform: scale(1.1); background: var(--accent-blue-hover); }
.hbet-detail {
  display: none;
  padding: 8px 12px; margin-top: 4px; margin-bottom: 8px;
  background: var(--bg-surface); border-radius: var(--radius-sm);
  font-size: 0.72rem; border-left: 2px solid var(--accent-gold);
}
.hbet-detail-row { display: flex; gap: 8px; margin-bottom: 4px; }
.hbet-detail-row:last-child { margin-bottom: 0; }
.hbet-detail-row strong { color: var(--text-muted); min-width: 100px; }
.hbet-detail-row span { color: var(--text-primary); font-family: var(--font-mono); }

/* ─── History Filters (Phase 9-A) ───────────────────────────────── */
.history-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 0 12px;
}
.filter-chip {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  color: var(--text-secondary); border-radius: 12px; padding: 4px 12px;
  font-size: 0.7rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.filter-chip:hover { border-color: var(--accent-gold); color: var(--text-primary); }
.filter-chip.active {
  background: var(--accent-gold); border-color: var(--accent-gold);
  color: #000;
}
/* Phase 4: visual separator between the status chip group and the
   date-range chip group inside the history filter strip. */
.history-filter-sep {
  display: inline-block;
  color: var(--border-color);
  font-weight: 700;
  margin: 0 2px;
  user-select: none;
}
/* Phase 1.26 — CSV export action button. Sits in the filter row but is
   visually distinct (no toggle state, slightly emphatic border) so users
   read it as a one-shot action, not a filter. */
.filter-chip.filter-export {
  margin-left: auto;
  border-color: var(--accent-green, #10b981);
  color: var(--accent-green, #10b981);
}
.filter-chip.filter-export:hover {
  background: var(--accent-green, #10b981);
  color: #000;
}
.filter-chip.filter-export:focus-visible {
  outline: 2px solid var(--accent-green, #10b981);
  outline-offset: 2px;
}
.history-sort {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  color: var(--text-secondary); border-radius: 6px; padding: 4px 8px;
  font-size: 0.7rem; cursor: pointer;
}
.history-search {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  color: var(--text-primary); border-radius: 6px; padding: 4px 8px;
  font-size: 0.7rem; min-width: 140px;
}
.history-search::placeholder { color: var(--text-muted); }

/* ─── Race History (Phase 9-B) ───────────────────────────────────── */
.history-race-replay {
  background: var(--accent-blue); color: #fff; border: none;
  border-radius: 6px; padding: 4px 10px; font-size: 0.7rem; font-weight: 700;
  cursor: pointer; margin-left: auto; transition: all 0.15s;
}
.history-race-replay:hover { background: var(--accent-blue-hover); transform: scale(1.05); }

/* Phase 1.11 — share button next to replay, action group on race rows */
.history-race-actions {
  display: flex; gap: 6px; align-items: center; margin-left: auto;
}
.hbet-share-btn {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.hbet-share-btn:hover {
  background: rgba(251,191,36,0.12);
  border-color: rgba(251,191,36,0.45);
  transform: scale(1.05);
}
.hbet-share-btn:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* ─── Dog History Rows ───────────────────────────────────────── */
.history-dog-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 3px;
  background: var(--bg-card); border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.history-dog-row:hover {
  background: var(--bg-card-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.hdog-name { font-weight: 700; color: var(--text-primary); flex: 1; }
.hdog-grade { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); padding: 2px 6px; background: var(--bg-surface); border-radius: 4px; }
.hdog-record { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); }
.hdog-earn { font-weight: 800; font-size: 0.78rem; min-width: 60px; text-align: right; }

/* ─── Financial History ──────────────────────────────────────── */
.history-section-title {
  font-size: 0.75rem; font-weight: 800; color: var(--accent-gold);
  text-transform: uppercase; letter-spacing: 1px;
  margin: 14px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}
.history-cost-grid {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 10px;
}
.hcost-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 10px; font-size: 0.78rem;
  background: var(--bg-card); border-radius: var(--radius-sm);
}
.hcost-row span:first-child { color: var(--text-secondary); }
.hcost-row span:last-child { font-weight: 700; font-family: var(--font-mono); }
.hcost-total { border-top: 1px solid var(--border-light); font-weight: 800; }
.hcost-total span:last-child { color: var(--accent-gold); }

/* ─── Accounting Tab (Phase 9-E) ───────────────────────────────── */
.acct-player-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px;
}
@media (max-width: 600px) { .acct-player-grid { grid-template-columns: repeat(2, 1fr); } }
.acct-player-card {
  background: var(--bg-card); border-radius: var(--radius-sm); padding: 10px 12px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
}
.acct-player-val { font-weight: 800; font-size: 0.95rem; font-family: var(--font-mono); }
.acct-player-label { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.acct-fee-explainer {
  font-size: 0.72rem; color: var(--text-muted); padding: 8px 12px;
  background: rgba(251,191,36,0.05); border: 1px solid rgba(251,191,36,0.15);
  border-radius: var(--radius-sm); margin-bottom: 10px; line-height: 1.5;
}
.acct-rollup-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; margin-bottom: 10px;
}
.acct-rollup-item {
  background: var(--bg-card); border-radius: var(--radius-sm); padding: 8px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.acct-rollup-label { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.acct-rollup-val { font-weight: 800; font-size: 0.82rem; font-family: var(--font-mono); }
.acct-race-table-wrap { overflow-x: auto; margin-bottom: 10px; }
.acct-race-table {
  width: 100%; border-collapse: collapse; font-size: 0.72rem;
}
.acct-race-table th {
  color: var(--text-muted); font-weight: 700; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color); padding: 4px 8px; text-align: left;
}
.acct-race-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-secondary); }
.acct-race-table tr:hover td { background: var(--bg-card-hover); }
.acct-race-id { font-family: var(--font-mono); font-weight: 700; color: var(--accent-blue); }
.acct-pct { font-size: 0.62rem; color: var(--text-muted); margin-left: 3px; }

/* Transaction rows */
.history-tx-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; margin-bottom: 1px;
  background: var(--bg-card); border-radius: var(--radius-sm);
  font-size: 0.75rem;
}
.htx-label { font-weight: 700; color: var(--text-primary); min-width: 90px; flex-shrink: 0; }
.htx-desc { color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; }
.htx-amount { font-weight: 800; font-family: var(--font-mono); min-width: 65px; text-align: right; }

/* ─── Race Entry Button (in dog cards) ───────────────────────── */
.dog-race-entry-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; font-size: 0.68rem; font-weight: 700;
  background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.3);
  border-radius: 12px; color: var(--accent-blue); cursor: pointer;
  transition: all 0.15s;
}
.dog-race-entry-btn:hover {
  background: rgba(59,130,246,0.2); border-color: var(--accent-blue);
}
.dog-race-entry-btn:disabled {
  opacity: 0.4; cursor: not-allowed;
}

/* ─── Betting Tips Box ────────────────────────────────────────── */
.betting-tips-box {
  background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.18);
  border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 8px;
}
.tips-rivalry-hero {
  display: block; width: 56px; height: 56px; object-fit: contain;
  float: right; margin: -4px 0 4px 8px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
}
.betting-tips-label {
  font-size: 0.72rem; font-weight: 800; color: var(--accent-gold);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}
.betting-tip-line {
  font-size: 0.78rem; color: var(--text-secondary); padding: 2px 0;
  line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.betting-tip-line:last-child { border-bottom: none; }

/* ─── Mini Race Card (in betting panel) ──────────────────────── */
.betting-race-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 8px 10px; margin-bottom: 8px;
}
.betting-card-label {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.betting-card-grid { display: flex; flex-direction: column; gap: 2px; }
.bcard-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 40px;
  font-size: 0.78rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.bcard-row:hover {
  background: var(--bg-card-hover);
  border-color: rgba(45, 212, 191, 0.2);
}
.bcard-row-clickable { cursor: pointer; }
.bcard-row-clickable:active { transform: scale(0.99); }
.bcard-trap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.bcard-name {
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bcard-style {
  font-size: 0.62rem; color: var(--text-muted); text-transform: capitalize;
  max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bcard-odds {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--accent-gold);
  min-width: 44px;
  text-align: right;
  letter-spacing: 0.03em;
}
/* Hot-streak dog row — subtle gold inset border + flame pulse on the
   icon. Kept understated so it suggests confidence rather than shouting. */
.bcard-row-hot {
  background: linear-gradient(90deg, rgba(251,146,60,0.08), transparent 70%);
  box-shadow: inset 2px 0 0 #f97316;
}
.bcard-hot {
  display: inline-block; margin-left: 4px; font-size: 0.85em;
  filter: drop-shadow(0 0 4px rgba(249,115,22,0.55));
  animation: bcardHotPulse 1.6s ease-in-out infinite;
}
@keyframes bcardHotPulse {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 4px rgba(249,115,22,0.55)); }
  50%      { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(249,115,22,0.85)); }
}
@media (prefers-reduced-motion: reduce) {
  .bcard-hot { animation: none; }
}

/* ─── Two-Column Betting Layout ──────────────────────────────── */
.bb-columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 8px;
}
@media (max-width: 768px) and (orientation: portrait) {
  .bb-columns { grid-template-columns: 1fr; }
}
@media (max-width: 768px) and (orientation: landscape) {
  .bb-columns { grid-template-columns: 1fr 1fr; gap: 8px; }
}
.bb-left, .bb-right {
  min-width: 0; /* prevent grid blowout */
}
.bb-race-header { margin-bottom: 8px; }
.bb-race-title {
  font-size: 1rem; font-weight: 800; color: var(--text-primary);
}
.bb-race-meta {
  display: flex; gap: 10px; font-size: 0.72rem; color: var(--text-muted);
  margin-top: 2px; flex-wrap: wrap;
}
.bb-grade { font-weight: 800; }
.bb-time { font-weight: 700; color: var(--accent-gold); }

/* ─── My Bets on This Race ───────────────────────────────────── */
.betting-my-bets {
  background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.18);
  border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 8px;
}
.my-bet-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.my-bet-row:last-child { border-bottom: none; }
.my-bet-type { font-weight: 800; min-width: 60px; color: var(--text-primary); display: inline-flex; align-items: center; gap: 4px; }
.my-bet-mode {
  font-size: 0.55rem; font-weight: 800; color: var(--accent-gold);
  background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.4);
  border-radius: 3px; padding: 1px 4px; letter-spacing: 0.5px;
}
.my-bet-combos {
  font-size: 0.6rem; font-weight: 800; color: var(--accent-blue);
  background: rgba(59,130,246,0.12); border-radius: 3px;
  padding: 1px 4px; margin-right: 4px;
}
.my-bet-sel { flex: 1; color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.7rem; }
.my-bet-stake { font-weight: 700; color: var(--text-primary); min-width: 50px; text-align: right; }
.my-bet-status { font-weight: 800; font-size: 0.68rem; min-width: 70px; text-align: right; }
.my-bet-status.stat-green { color: #10b981; }
.my-bet-status.stat-red { color: #ef4444; }
.my-bet-status.stat-pending { color: #f59e0b; }

/* Prediction card share (docs/COOLEST_GAME_EVER.md #10) */
.my-bet-share-btn {
  background: none; border: none; cursor: pointer;
  font-size: 0.85rem; padding: 2px 4px; flex-shrink: 0; opacity: 0.7;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.my-bet-share-btn:hover, .my-bet-share-btn:focus-visible { opacity: 1; outline: none; }
.my-bet-share-btn:active { transform: scale(0.9); }
.stat-green { color: #10b981; }
.stat-red { color: #ef4444; }

/* ─── Race Card Extras ───────────────────────────────────────── */
.bcard-breed {
  font-size: 0.6rem; color: var(--text-muted); max-width: 60px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bcard-stat {
  font-size: 0.58rem; color: var(--accent-gold); font-weight: 700;
  background: rgba(251,191,36,0.1); padding: 1px 4px; border-radius: 3px;
}
.bcard-form .dog-fig-badge, .bcard-form .dog-dslr-badge {
  font-size: 0.55rem; padding: 0 3px;
}

/* ─── Race History Details ───────────────────────────────────── */
.history-race-detail {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px;
}
.history-race-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 6px;
}
.history-race-head-main {
  flex: 1;
  min-width: min(100%, 200px);
}
.history-race-title {
  font-size: 0.95rem; font-weight: 800; color: var(--text-primary);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.history-race-id {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 2px 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: help;
}
.history-race-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.history-podium { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.history-podium-row {
  display: grid;
  grid-template-columns: 30px 22px minmax(0,1fr) 56px 60px;
  align-items: center; gap: 8px;
  font-size: 0.78rem; padding: 3px 4px;
  border-radius: 4px;
}
.history-podium-row:hover { background: rgba(255,255,255,0.025); }
.history-dog-payout {
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 800;
  color: #10b981;
  text-align: right;
}
.history-pos {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 900; color: #000;
}
.history-dog-name { font-weight: 700; color: var(--text-primary); flex: 1; }
.history-dog-time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
.history-my-bets {
  margin-top: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-sm);
}
.history-my-bets-title {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.history-my-bet-line {
  font-size: 0.72rem;
  line-height: 1.45;
  padding: 2px 0;
}
.history-my-bets-net {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.history-my-bets-net.net-positive { color: #10b981; }
.history-my-bets-net.net-negative { color: #ef4444; }
.history-bet-won { color: #10b981; font-weight: 700; }
.history-bet-lost { color: #ef4444; }
.history-payout {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 8px; padding: 10px 12px;
  font-size: 0.72rem; color: var(--text-muted);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
}
.history-payout-val {
  font-family: Rajdhani, system-ui, sans-serif;
  font-weight: 800;
  color: var(--accent-gold);
  font-variant-numeric: tabular-nums;
}
.history-payout-val--green { color: #10b981; }
.history-payout-val--red { color: #ef4444; }
.history-payout-val--gold { color: #fbbf24; }
.history-payout-muted { color: var(--text-muted); font-style: italic; }

/* ─── Enhanced Official Result Table (History & Betting) ────── */
.history-official-result {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  overflow: hidden;
}
.official-result-header {
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(251,191,36,0.1) 0%, rgba(251,191,36,0.02) 100%);
  border-bottom: 1px solid rgba(251,191,36,0.2);
}
.official-result-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--accent-gold);
  letter-spacing: 1.5px;
  text-shadow: 0 0 12px rgba(251,191,36,0.3);
  margin-bottom: 4px;
}
.official-result-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}
.photo-finish-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(255,215,0,0.15);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #ffd700;
  letter-spacing: 0.5px;
}
.official-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.official-result-table thead {
  background: rgba(0,0,0,0.3);
  border-bottom: 2px solid rgba(251,191,36,0.3);
}
.official-result-table th {
  padding: 8px 6px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
}
.official-result-table th.num {
  text-align: right;
}
.official-result-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.official-result-table td.num {
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: right;
  color: var(--text-secondary);
}
.official-result-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}
.dh-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  background: rgba(239,68,68,0.2);
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 800;
  color: #ef4444;
  letter-spacing: 0.5px;
}

/* Responsive design for various platforms */
@media (max-width: 768px) {
  .official-result-title {
    font-size: 0.95rem;
  }
  .official-result-meta {
    font-size: 0.68rem;
  }
  .official-result-table {
    font-size: 0.72rem;
  }
  .official-result-table th,
  .official-result-table td {
    padding: 6px 4px;
  }
  .official-result-table th.num,
  .official-result-table td.num {
    font-size: 0.66rem;
  }
}

@media (max-width: 480px) {
  .official-result-header {
    padding: 8px 10px;
  }
  .official-result-title {
    font-size: 0.85rem;
    letter-spacing: 1px;
  }
  .official-result-meta {
    font-size: 0.64rem;
  }
  .official-result-table {
    font-size: 0.66rem;
  }
  .official-result-table th,
  .official-result-table td {
    padding: 5px 3px;
  }
  .official-result-table th.num,
  .official-result-table td.num {
    font-size: 0.6rem;
  }
  /* Hide less critical columns on very small screens */
  .official-result-table th:nth-child(7),
  .official-result-table th:nth-child(8),
  .official-result-table td:nth-child(7),
  .official-result-table td:nth-child(8) {
    display: none;
  }
}

@media (min-width: 1200px) {
  .official-result-title {
    font-size: 1.3rem;
  }
  .official-result-meta {
    font-size: 0.82rem;
  }
  .official-result-table {
    font-size: 0.88rem;
  }
  .official-result-table th,
  .official-result-table td {
    padding: 10px 8px;
  }
}

/* ─── History Bet Result Toggle ───────────────────────────────── */
.hbet-result-toggle {
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s ease;
}
.hbet-result-toggle:hover {
  background: rgba(251,191,36,0.2);
  border-color: rgba(251,191,36,0.4);
}
.hbet-official-result {
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

/* ─── Betting Race Result Panel ───────────────────────────────── */
.betting-race-result {
  margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ─── Missions Panel ─────────────────────────────────────────────── */
.mission-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}
.mission-card:hover {
  background: var(--bg-card-hover);
}
.mission-card.mission-completed {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}
.mission-card-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.mission-card-content {
  flex: 1;
  min-width: 0;
}
.mission-card-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.mission-card-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.mission-card-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.mission-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}
.mission-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-gold), #f59e0b);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.mission-progress-text {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 35px;
  text-align: right;
}
.mission-card-reward {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-gold);
}

/* ─── Bot Activity Ticker ────────────────────────────────────── */
.bot-activity-section {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 6px 10px;
}
.bot-activity-ticker {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  max-height: 60px; overflow-y: auto;
}
.bot-activity-item {
  font-size: 0.68rem; color: var(--text-secondary);
  white-space: nowrap;
}
.bot-activity-item strong { color: var(--text-primary); }
.bot-activity-time { color: var(--text-muted); font-size: 0.6rem; margin-left: 4px; }

/* ─── Admin Audit Dashboard ─────────────────────────────────── */
.admin-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.admin-title {
  font-size: 1.2rem; font-weight: 800; color: var(--accent-gold);
  margin: 0; flex: 1;
}
.admin-ts {
  font-size: 0.68rem; color: var(--text-muted); font-family: var(--font-mono);
}
.admin-tabs {
  display: flex; gap: 4px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color); padding-bottom: 8px;
}
.admin-tab-btn {
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 6px 14px; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.admin-tab-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.admin-tab-btn.active {
  background: var(--accent-gold-dim); color: var(--accent-gold);
  border-color: var(--accent-gold);
}
.admin-body { min-height: 200px; }

/* KPI Grid */
.admin-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.admin-kpi-sm { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.admin-kpi {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 12px; text-align: center;
}
.admin-kpi-highlight {
  border-color: var(--accent-gold); background: var(--accent-gold-dim);
}
.admin-kpi-val {
  font-size: 1.3rem; font-weight: 900; color: var(--text-primary);
  font-family: var(--font-mono);
}
.admin-kpi-sm .admin-kpi-val { font-size: 1.05rem; }
.admin-kpi-label {
  font-size: 0.65rem; color: var(--text-muted); margin-top: 2px;
  text-transform: uppercase; letter-spacing: 0.3px;
}

/* Admin Sections */
.admin-section {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 12px; margin-bottom: 12px;
}
.admin-section-title {
  font-size: 0.82rem; font-weight: 700; color: var(--accent-gold);
  margin-bottom: 8px;
}
.admin-empty {
  text-align: center; padding: 30px; color: var(--text-muted);
  font-style: italic;
}
.admin-note {
  text-align: center; padding: 8px; color: var(--text-muted);
  font-size: 0.7rem; font-style: italic;
}

/* Admin Tables */
.admin-table {
  width: 100%; border-collapse: collapse; font-size: 0.75rem;
}
.admin-table-sm { font-size: 0.7rem; }
.admin-table th {
  background: rgba(251,191,36,0.08); color: var(--accent-gold);
  padding: 6px 8px; text-align: left; font-weight: 700;
  border-bottom: 1px solid var(--border-light); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.admin-table td {
  padding: 5px 8px; border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.admin-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.admin-table-total td {
  background: rgba(251,191,36,0.06); border-top: 2px solid var(--accent-gold);
}
.admin-mono { font-family: var(--font-mono); font-size: 0.68rem; }
.stat-green { color: #10b981; }
.stat-red { color: #ef4444; }
.stat-amber { color: #f59e0b; }

/* Trap color swatch in tables */
.admin-trap {
  display: inline-block; width: 18px; height: 18px; border-radius: 3px;
  text-align: center; line-height: 18px; font-size: 0.65rem;
  font-weight: 900; color: #000;
}

/* Position highlighting */
.admin-pos-1 td { background: rgba(251,191,36,0.06); }
.admin-pos-2 td { background: rgba(192,192,192,0.04); }
.admin-pos-3 td { background: rgba(205,127,50,0.04); }

/* Status badges */
.admin-status {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
}
.admin-status-betting_open { background: rgba(16,185,129,0.15); color: #10b981; }
.admin-status-packet_sent { background: rgba(59,130,246,0.15); color: #3b82f6; }
.admin-status-unknown { background: rgba(107,114,128,0.15); color: #6b7280; }

/* Bar chart */
.admin-bar-chart { display: flex; flex-direction: column; gap: 4px; }
.admin-bar-row {
  display: flex; align-items: center; gap: 8px;
}
.admin-bar-label {
  width: 28px; font-size: 0.72rem; font-weight: 800;
  font-family: var(--font-mono); text-align: right;
}
.admin-bar-track {
  flex: 1; height: 16px; background: var(--bg-surface);
  border-radius: 3px; overflow: hidden;
}
.admin-bar-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.3s ease;
}
.admin-bar-val {
  width: 24px; font-size: 0.7rem; font-weight: 700;
  color: var(--text-secondary); font-family: var(--font-mono);
}

/* Distribution chips */
.admin-dist-row { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-dist-chip {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 4px 10px;
  font-size: 0.72rem; color: var(--text-secondary);
}
.admin-dist-chip strong { color: var(--text-primary); }

/* Expandable race cards */
.admin-race-list { display: flex; flex-direction: column; gap: 6px; }
.admin-race-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); overflow: hidden;
}
.admin-race-header { width: 100%; }
.admin-race-expand {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; color: var(--text-secondary);
  padding: 8px 12px; cursor: pointer; font-size: 0.72rem;
  text-align: left; transition: background 0.15s;
}
.admin-race-expand:hover { background: var(--bg-card-hover); }
.admin-race-id {
  font-family: var(--font-mono); font-weight: 700; color: var(--accent-blue);
  min-width: 80px;
}
.admin-expand-arrow {
  margin-left: auto; font-size: 0.6rem; color: var(--text-muted);
  transition: transform 0.2s;
}
.admin-race-detail {
  padding: 10px 12px; border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.admin-detail-section {
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}
.admin-detail-section:last-child { border-bottom: none; margin-bottom: 0; }
.admin-detail-section strong {
  display: block; font-size: 0.72rem; color: var(--accent-gold);
  margin-bottom: 6px;
}
.admin-pool-summary {
  font-size: 0.72rem; color: var(--text-secondary);
  margin-top: 6px; padding: 4px 0;
}
.admin-pool-summary strong { color: var(--text-primary); }

/* Dog chips */
.admin-dog-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-dog-chip {
  background: var(--bg-surface); border: 2px solid;
  border-radius: var(--radius-sm); padding: 3px 8px;
  font-size: 0.68rem; color: var(--text-secondary);
}
.admin-dog-chip em {
  font-style: normal; color: var(--text-muted); font-size: 0.6rem;
}
.admin-dog-winner {
  background: rgba(251,191,36,0.12); border-width: 3px;
  font-weight: 700; color: var(--text-primary);
}

/* Header actions row */
.admin-header-actions {
  display: flex; align-items: center; gap: 8px;
}

/* Auto-refresh toggle */
.admin-auto-toggle {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.7rem; color: var(--text-muted); cursor: pointer;
}
.admin-auto-toggle input[type="checkbox"] {
  accent-color: var(--accent-gold); width: 14px; height: 14px;
}
.admin-countdown {
  font-family: var(--font-mono); font-weight: 700;
  color: var(--accent-gold); font-size: 0.72rem;
  min-width: 22px; display: inline-block; text-align: center;
}

/* Last race quick card */
.admin-last-race {
  border-left: 3px solid var(--accent-gold);
  background: rgba(251,191,36,0.04);
}

/* Sparkline SVG */
.admin-sparkline {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  padding: 4px;
}
.admin-sparkline-legend {
  display: flex; justify-content: space-between;
  font-size: 0.65rem; color: var(--text-muted); margin-top: 4px;
  padding: 0 4px;
}

/* Two-column layout */
.admin-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 700px) {
  .admin-two-col { grid-template-columns: 1fr; }
}

/* Filter bar */
.admin-filter-bar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  padding: 6px 10px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.admin-filter-label {
  font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.admin-filter-select {
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 3px 8px; font-size: 0.72rem; cursor: pointer;
}
.admin-filter-select:focus { border-color: var(--accent-gold); outline: none; }
.admin-filter-count {
  margin-left: auto; font-size: 0.68rem; color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Race time in expand header */
.admin-race-time {
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted);
}

/* Integrity section variants */
.admin-section-alert {
  border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05);
}
.admin-section-ok {
  border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.05);
}
.admin-kpi-pass { border-color: var(--accent-green); background: rgba(16,185,129,0.1); }
.admin-kpi-fail { border-color: var(--accent-red); background: rgba(239,68,68,0.1); }

/* Issue badges */
.admin-issue-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
}
.admin-issue-math { background: rgba(245,158,11,0.15); color: #f59e0b; }
.admin-issue-overpay { background: rgba(239,68,68,0.15); color: #ef4444; }

/* Bar value em for percentages */
.admin-bar-val em {
  font-style: normal; font-size: 0.58rem; color: var(--text-muted);
  margin-left: 2px;
}
.admin-bar-val { width: auto; min-width: 24px; }

/* Heat map cells */
.admin-heat-cell {
  text-align: center; font-size: 0.68rem; font-weight: 600;
  padding: 4px 2px; border-radius: 2px; line-height: 1.2;
  transition: background 0.2s;
}

/* Stat amber utility */
.stat-amber { color: #f59e0b; }

/* Trend arrows */
.admin-trend { font-size: 0.6rem; vertical-align: middle; margin-left: 2px; }
.admin-trend-up { color: #10b981; }
.admin-trend-down { color: #ef4444; }
.admin-trend-flat { color: var(--text-muted); font-size: 0.55rem; }

/* Responsive admin tabs */
@media (max-width: 600px) {
  .admin-tabs { flex-wrap: wrap; }
  .admin-tab-btn { padding: 5px 8px; font-size: 0.68rem; }
  .admin-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
  .admin-kpi-val { font-size: 1rem; }
  .admin-race-expand { flex-wrap: wrap; gap: 4px 8px; font-size: 0.65rem; }
  .admin-table { font-size: 0.65rem; }
  .admin-table th, .admin-table td { padding: 3px 4px; }
  .admin-header { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Print-friendly admin */
@media print {
  body { background: #fff; color: #000; }
  .tab-bar, .admin-header-actions, .admin-tabs, .admin-filter-bar button,
  .admin-race-expand .admin-expand-arrow { display: none !important; }
  .admin-race-detail { display: block !important; }
  .admin-kpi { border-color: #ccc; background: #f9f9f9; }
  .admin-table th { background: #eee; color: #000; }
  .admin-table td { color: #333; border-color: #ddd; }
  .admin-section { border-color: #ddd; background: #fff; }
  .admin-sparkline { background: #f5f5f5; }
  .stat-green { color: #059669; }
  .stat-red { color: #dc2626; }
  .stat-amber { color: #d97706; }
}

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

/* ─── Transaction receipt (bank / Robinhood trust surface) ───── */
.tx-receipt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: min(92vw, 280px);
  padding: 14px 18px !important;
  border: 1px solid rgba(45, 212, 191, 0.4) !important;
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.97), rgba(7, 11, 20, 0.98)) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(45, 212, 191, 0.2) !important;
  text-align: left !important;
}
.tx-receipt-title {
  font-family: var(--font-display, Rajdhani, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5eead4;
}
.tx-receipt-amount {
  font-family: var(--font-display, Rajdhani, system-ui, sans-serif);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: #4ade80;
  line-height: 1.1;
}
.tx-receipt-amount.is-debit { color: #fbbf24; }
.tx-receipt-balance {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
.tx-receipt-detail {
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EXCITING RACE GAMEPLAY SYSTEM
   Mini-map, win probabilities, drama indicators, excitement alerts
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Mini-map (Track Radar) */
.race-mini-map {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  background: rgba(7, 11, 20, 0.95);
  border: 2px solid rgba(251, 191, 36, 0.4);
  border-radius: var(--radius-lg);
  padding: 16px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(251, 191, 36, 0.15);
}

.race-mini-map.active {
  opacity: 1;
  pointer-events: auto;
}

.mm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mm-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 0.1em;
}

.mm-stage {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: mm-stage-pulse 1.5s ease-in-out infinite;
}

@keyframes mm-stage-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; color: var(--accent-gold); }
}

.mm-track {
  width: 100%;
  aspect-ratio: 16/10;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.8));
  border-radius: var(--radius-md);
  padding: 8px;
}

.mm-svg {
  width: 100%;
  height: 100%;
}

.mm-track-path {
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.2));
}

.mm-dot {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transition: all 0.1s ease-out;
}

.mm-legend {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mm-dot-key {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: var(--text-secondary);
}

.mm-key-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Win Probability Box */
.win-probability-box {
  position: absolute;
  top: 60px;
  left: 12px;
  width: 220px;
  background: rgba(7, 11, 20, 0.95);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-md);
  padding: 12px;
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
}

.win-probability-box.active {
  opacity: 1;
  pointer-events: auto;
}

.wp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wp-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 0.05em;
}

.wp-live {
  font-size: 0.6rem;
  color: var(--accent-red);
  animation: wp-live-blink 1s ease-in-out infinite;
}

@keyframes wp-live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.wp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  transition: all 0.2s ease;
}

.wp-row.leader {
  background: rgba(251, 191, 36, 0.1);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  margin: 0 -6px;
}

.wp-trap-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.wp-bar-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wp-bar-bg {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.wp-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease-out, background-color 0.3s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.wp-pct {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: right;
}

.wp-indicator {
  font-size: 0.55rem;
  font-weight: 700;
  min-width: 50px;
  text-align: right;
  animation: wp-indicator-pulse 0.5s ease-out;
}

.wp-indicator.surging {
  color: var(--accent-green);
}

.wp-indicator.fading {
  color: var(--accent-red);
}

@keyframes wp-indicator-pulse {
  0% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Excitement / Drama Overlay */
.excitement-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}

.ex-alert-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 60px;
}

.ex-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(7, 11, 20, 0.9);
  border: 1px solid;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transform: translateX(-120%);
  transition: transform 0.3s ease;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}

.ex-alert.show {
  transform: translateX(0);
}

.ex-alert-overtake {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.ex-alert-leadchange {
  border-color: var(--accent-gold);
  background: rgba(251, 191, 36, 0.15);
  color: var(--accent-gold);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.ex-alert-photofinish {
  border-color: var(--accent-red);
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-red);
  animation: ex-photofinish-pulse 0.5s ease-in-out infinite;
}

@keyframes ex-photofinish-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
  50% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.6); }
}

.ex-alert-neckneck {
  border-color: #a78bfa;
  color: #a78bfa;
}

.ex-alert-comeback {
  border-color: var(--accent-green);
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-green);
}

.ex-icon {
  font-size: 1.1rem;
}

.ex-message {
  flex: 1;
}

/* Drama Meter */
.ex-drama-meter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  background: rgba(7, 11, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ex-drama-bar {
  height: 4px;
  border-radius: 2px;
  transition: width 0.3s ease, background-color 0.3s;
}

.ex-drama-bar.low {
  background: var(--accent-green);
}

.ex-drama-bar.med {
  background: var(--accent-gold);
}

.ex-drama-bar.high {
  background: var(--accent-red);
  box-shadow: 0 0 8px currentColor;
}

.ex-drama-label {
  font-size: 0.55rem;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.1em;
}

/* Race Mode Toggle */
.race-mode-toggle {
  position: absolute;
  top: 8px;
  right: 80px;
  background: rgba(7, 11, 20, 0.8);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: var(--accent-gold);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-mono);
  z-index: 50;
}

.race-mode-toggle:hover {
  background: rgba(251, 191, 36, 0.15);
  box-shadow: var(--gold-glow);
}

.race-mode-toggle.radar-active {
  background: rgba(251, 191, 36, 0.9);
  color: #000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .race-mini-map {
    width: 280px;
    padding: 12px;
  }

  .win-probability-box {
    width: 180px;
    top: 50px;
    left: 8px;
    padding: 8px;
  }

  .wp-indicator {
    display: none;
  }

  .race-mode-toggle {
    right: 70px;
    font-size: 0.6rem;
    padding: 5px 8px;
  }

  .ex-drama-meter {
    width: 160px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EXCITING GAMEPLAY EFFECTS
   Momentum arrows, speed bursts, photo finish flash
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Momentum arrows on dogs */
.momentum-arrow polygon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transition: opacity 0.15s ease;
}

/* Photo finish flash overlay */
.photo-flash-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.05s ease-out;
}

/* Speed burst label */
.speed-burst-label {
  font-family: var(--font-mono);
  font-size: 5px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  animation: burst-label-pulse 0.3s ease-out;
}

@keyframes burst-label-pulse {
  0% { transform: scale(1.5); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Dog acceleration flash effect */
.dog-burst-flash {
  filter: brightness(1.5) drop-shadow(0 0 8px currentColor);
}

/* Speed lines behind dogs */
.speed-line {
  stroke-linecap: round;
  animation: speed-line-fade 0.3s ease-out forwards;
}

@keyframes speed-line-fade {
  0% { opacity: 0.6; stroke-width: 2; }
  100% { opacity: 0; stroke-width: 0.5; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COMMENTARY TICKER + CROWD NOISE METER
   Live race call feed and crowd excitement visualization
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Commentary Ticker */
.commentary-ticker {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  background: rgba(7, 11, 20, 0.92);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.commentary-ticker.active {
  opacity: 1;
}

.commentary-ticker.highlight {
  border-color: var(--accent-gold);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.ct-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--accent-gold);
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}

.ct-text {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.4;
  transition: opacity 0.15s ease;
  min-height: 1.2em;
}

/* Crowd Noise Meter */
.crowd-noise-meter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 80px;
  background: rgba(7, 11, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  z-index: 55;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(8px);
}

.crowd-noise-meter.active {
  opacity: 1;
}

.cnm-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 4px;
}

.cnm-bars {
  display: flex;
  gap: 2px;
  height: 24px;
  align-items: flex-end;
  justify-content: center;
}

.cnm-bar {
  width: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1px;
  transition: all 0.2s ease;
  height: 20%;
}

.cnm-bar:nth-child(1) { height: 15%; }
.cnm-bar:nth-child(2) { height: 25%; }
.cnm-bar:nth-child(3) { height: 35%; }
.cnm-bar:nth-child(4) { height: 50%; }
.cnm-bar:nth-child(5) { height: 65%; }
.cnm-bar:nth-child(6) { height: 80%; }
.cnm-bar:nth-child(7) { height: 90%; }
.cnm-bar:nth-child(8) { height: 100%; }

.cnm-bar.active {
  background: var(--accent-gold);
  box-shadow: 0 0 4px currentColor;
}

.cnm-bar.active.peak {
  background: var(--accent-red);
  animation: cnm-peak-pulse 0.5s ease-in-out infinite;
}

@keyframes cnm-peak-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.cnm-level {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
  letter-spacing: 0.05em;
}

.cnm-level.loud {
  color: var(--accent-gold);
  font-weight: 600;
}

.cnm-level.roar {
  color: var(--accent-red);
  font-weight: 700;
  animation: cnm-roar-blink 0.3s ease-in-out infinite;
}

@keyframes cnm-roar-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Responsive commentary + crowd noise */
@media (max-width: 768px) {
  .commentary-ticker {
    bottom: 50px;
    padding: 8px 12px;
  }

  .ct-text {
    font-size: 0.75rem;
  }

  .crowd-noise-meter {
    width: 70px;
    padding: 6px 8px;
  }

  .cnm-bar {
    width: 5px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MULTI-CAMERA RACE TRACKING SYSTEM
   12 cameras around the oval with broadcast-style UI
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Container for the multi-camera UI overlay */
.multi-camera-ui {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.multi-camera-ui.active {
  opacity: 1;
}

.multi-camera-ui > * {
  pointer-events: auto;
}

/* Camera strip - the row of camera dots at top */
.mc-camera-strip {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  background: rgba(7, 11, 20, 0.85);
  padding: 8px 12px;
  border-radius: 30px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), var(--gold-glow);
}

/* Individual camera dot */
.mc-cam-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.mc-cam-dot:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.mc-cam-dot.active {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
  animation: mc-pulse 1.5s ease-in-out infinite;
}

.mc-cam-dot.active .mc-cam-num {
  color: #000;
  font-weight: 700;
}

.mc-cam-num {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

@keyframes mc-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
  50% { box-shadow: 0 0 16px rgba(251, 191, 36, 0.7); }
}

/* Camera info panel - shows current camera name */
.mc-camera-info {
  position: absolute;
  top: 60px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(7, 11, 20, 0.9);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(251, 191, 36, 0.3);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}

.mc-cam-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.mc-cam-current {
  color: var(--accent-gold);
  font-weight: 700;
  font-size: 0.8rem;
}

.mc-cam-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mc-cam-desc {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Camera control buttons */
.mc-camera-controls {
  position: absolute;
  top: 60px;
  right: 12px;
  display: flex;
  gap: 8px;
}

.mc-btn {
  background: rgba(7, 11, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
}

.mc-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text-primary);
}

.mc-btn.active {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #000;
  box-shadow: var(--gold-glow);
}

/* Camera overlay indicators (corner brackets for broadcast feel) */
.mc-overlay-frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border: 2px solid transparent;
}

.mc-overlay-frame::before,
.mc-overlay-frame::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(251, 191, 36, 0.4);
}

.mc-overlay-frame::before {
  top: 8px;
  left: 8px;
  border-right: none;
  border-bottom: none;
}

.mc-overlay-frame::after {
  top: 8px;
  right: 8px;
  border-left: none;
  border-bottom: none;
}

/* Recording indicator */
.mc-rec-indicator {
  position: absolute;
  top: 16px;
  right: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.15);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.mc-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-red);
  animation: rec-blink 1s ease-in-out infinite;
}

.mc-rec-text {
  font-size: 0.6rem;
  font-family: var(--font-mono);
  color: var(--accent-red);
  font-weight: 600;
  letter-spacing: 0.05em;
}

@keyframes rec-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Responsive multi-camera UI */
@media (max-width: 768px) {
  .mc-camera-strip {
    padding: 6px 8px;
    gap: 4px;
  }

  .mc-cam-dot {
    width: 22px;
    height: 22px;
  }

  .mc-cam-num {
    font-size: 0.55rem;
  }

  .mc-camera-info {
    top: 50px;
    left: 8px;
    padding: 8px 10px;
  }

  .mc-cam-name {
    font-size: 0.75rem;
  }

  .mc-camera-controls {
    top: 50px;
    right: 8px;
  }

  .mc-btn {
    padding: 6px 10px;
    font-size: 0.6rem;
  }
}

/* Toggle button for enabling multi-camera mode (lives inline in race-controls) */
.mc-mode-toggle {
  background: rgba(7, 11, 20, 0.8);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: var(--accent-gold);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.mc-mode-toggle:hover {
  background: rgba(251, 191, 36, 0.15);
  box-shadow: var(--gold-glow);
}
.mc-mode-toggle.active {
  background: rgba(251, 191, 36, 0.2);
  border-color: var(--accent-gold);
}

/* Dev-only controls — hidden from players, revealed when body.dev-mode is set
   (gameConfig.js → ENV.isDev: localhost or ?dev URL param) */
.dev-only { display: none !important; }
body.dev-mode .dev-only { display: inline-flex !important; }
body.dev-mode select.dev-only { display: inline-block !important; }

/* ─── Broadcast Renderer Overlays (RacingViz) ──────────────────── */
.track-container #particle-canvas,
.track-container #confetti-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.track-container #particle-canvas { z-index: 5; }
.track-container #confetti-canvas { z-index: 30; }

.bcast-flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 32;
  background: radial-gradient(ellipse at 6% 73%, rgba(255,255,255,0.7), rgba(255,235,180,0.18) 28%, transparent 55%);
}
.bcast-flash.fire { animation: bcast-flash-fire 0.55s ease-out; }
@keyframes bcast-flash-fire { 0%{opacity:0} 15%{opacity:1} 100%{opacity:0} }

@keyframes bcast-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.55;transform:scale(0.85)} }
@keyframes bcast-tick { from{transform:translateX(100%)} to{transform:translateX(-100%)} }
@keyframes bcast-announce-in { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* Announcer log (top-left) — matches standalone racing-viz.html */
.bcast-announcer {
  position: absolute; top: 14px; left: 18px; width: 300px; max-height: 158px;
  background: rgba(6,8,12,0.78); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.06); border-left: 3px solid #fbbf24;
  border-radius: 8px; padding: 10px 12px; z-index: 22;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  display: flex; flex-direction: column; overflow: hidden; pointer-events: none;
}
.bcast-announcer-head {
  display: flex; align-items: center; gap: 6px;
  font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 9px;
  letter-spacing: 2.2px; color: #fbbf24; text-transform: uppercase; margin-bottom: 6px;
}
.bcast-announcer-head::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fbbf24;
  box-shadow: 0 0 6px rgba(251,191,36,0.6); animation: bcast-pulse 1.4s ease-in-out infinite;
}
.bcast-mic { font-size: 8px; color: rgba(255,255,255,0.35); letter-spacing: 1px; margin-left: auto; }
.bcast-announcer-log {
  flex: 1; overflow-y: auto; font-family: Inter, sans-serif; font-size: 11px;
  line-height: 1.5; color: #cfd3da; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(251,191,36,0.3) transparent;
}
.bcast-announcer-log::-webkit-scrollbar { width: 4px; }
.bcast-announcer-log::-webkit-scrollbar-thumb { background: rgba(251,191,36,0.25); border-radius: 2px; }
.announcer-line { display: flex; gap: 6px; margin-bottom: 4px; animation: bcast-announce-in 0.35s ease-out; }
.announcer-line .ts { color: #fbbf24; font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 9px; min-width: 32px; padding-top: 1px; }
.announcer-line .tx { color: #dde0e6; }
.announcer-line.hot .tx { color: #fde68a; font-weight: 600; }

/* Sidebar variant — pools lives beneath Live Positions in the right column.
   Uses normal document flow instead of absolute positioning over the track. */
.bcast-pools.bcast-pools--sidebar {
  position: static;
  width: auto;
  margin-top: 12px;
}

/* Wagering Pools (top-right in-track overlay) — matches standalone racing-viz.html */
.bcast-pools {
  position: absolute; top: 14px; right: 18px; width: 260px;
  background: linear-gradient(180deg, rgba(10,12,18,0.85), rgba(6,8,12,0.85));
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.06); border-top: 3px solid #22d3ee;
  border-radius: 9px; padding: 11px 13px; z-index: 22;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 28px rgba(34,211,238,0.06), inset 0 1px 0 rgba(255,255,255,0.04);
  pointer-events: none;
}
.bcast-pools-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 9px;
  letter-spacing: 2.2px; color: #22d3ee; text-transform: uppercase; margin-bottom: 8px;
}
.bcast-pulse-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #22d3ee; box-shadow: 0 0 6px rgba(34,211,238,0.7);
  animation: bcast-pulse 1.6s ease-in-out infinite; margin-right: 5px; vertical-align: middle;
}
.bcast-pools-status { font-size: 8px; color: rgba(255,255,255,0.45); letter-spacing: 1.2px; }
.bcast-pools-status.locked { color: #fbbf24; }
.bcast-pool-row {
  display: grid; grid-template-columns: 64px 1fr 76px; gap: 8px;
  align-items: center; padding: 5px 0; font-family: Rajdhani, sans-serif;
}
.bcast-pool-row + .bcast-pool-row { border-top: 1px solid rgba(255,255,255,0.035); }
.bcast-pool-name { font-weight: 700; font-size: 9.5px; color: #cfd3da; letter-spacing: 1.2px; text-transform: uppercase; }
/* Wave 4 — thinner, muted pool bars (don't compete with dog cards / CTAs) */
.bcast-pool-bar {
  height: 2px;
  background: rgba(255, 255, 255, 0.035);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
  opacity: 0.72;
}
.bcast-pool-fill {
  position: absolute; inset: 0; width: 0%;
  background: linear-gradient(90deg, rgba(34,211,238,0.55), rgba(6,182,212,0.45));
  box-shadow: none;
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1); border-radius: 2px;
}
.bcast-pool-amt { font-weight: 800; font-size: 12px; color: #fff; text-align: right; letter-spacing: 0.4px; font-variant-numeric: tabular-nums; }
.bcast-pools-total {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between;
}
.bcast-pools-total .lbl { font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 9.5px; letter-spacing: 1.6px; color: rgba(251,191,36,0.85); text-transform: uppercase; }
.bcast-pools-total .val { font-family: Rajdhani, sans-serif; font-weight: 800; font-size: 16px; color: #fbbf24; letter-spacing: 0.4px; text-shadow: 0 0 8px rgba(251,191,36,0.25); font-variant-numeric: tabular-nums; }
/* CRITICAL: position:relative keeps the absolutely-positioned ticker text inside its parent.
   Without this, the ticker escapes to the nearest positioned ancestor (.bcast-pools) and
   floats over the status badge — was rendering as garbled "12mGM!" text. */
.bcast-pools-ticker { position: relative; margin-top: 6px; height: 14px; overflow: hidden; font-family: Inter, sans-serif; font-size: 9px; color: rgba(255,255,255,0.55); }
.bcast-tk { position: absolute; white-space: nowrap; animation: bcast-tick 18s linear infinite; }

/* Payouts Card (bottom-left, post-race) — matches standalone racing-viz.html */
.bcast-payouts {
  position: absolute; bottom: 18px; left: 18px; width: 480px;
  background: linear-gradient(180deg, rgba(10,12,18,0.92), rgba(6,8,12,0.92));
  backdrop-filter: blur(20px) saturate(140%);
  border: 1.4px solid rgba(251,191,36,0.45); border-radius: 10px;
  padding: 12px 14px; z-index: 24;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 60px rgba(251,191,36,0.1), inset 0 1px 0 rgba(255,255,255,0.05);
  opacity: 0; transform: translateY(16px); transition: all 0.55s cubic-bezier(0.2,0.8,0.2,1);
  pointer-events: none;
}
.bcast-payouts.show { opacity: 1; transform: translateY(0); }
.bcast-payouts-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 2.4px; color: #fbbf24; text-transform: uppercase;
  margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid rgba(251,191,36,0.22);
}
.bcast-stake { color: rgba(255,255,255,0.45); font-size: 9px; letter-spacing: 1.2px; }
.bcast-stake b { color: #fde68a; font-weight: 700; }
.bcast-pay-cols { display: grid; grid-template-columns: 1fr 1px 1.15fr; gap: 14px; }
.bcast-pay-divider { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.08), transparent); }
.bcast-super-row .bcast-pay-type { color: #c4b5fd; }
.bcast-super-row .bcast-pay-amt.tri { color: #c4b5fd; text-shadow: 0 0 6px rgba(196,181,253,0.4); }
.bcast-pay-col-title {
  font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 9px;
  letter-spacing: 2px; color: rgba(251,191,36,0.7); text-transform: uppercase;
  margin-bottom: 5px; padding-left: 2px;
}
.bcast-pay-row {
  display: flex; align-items: center; gap: 7px; padding: 6px 7px;
  border-radius: 5px; margin-bottom: 3px;
  background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.025);
}
.bcast-pay-row.bcast-win-row { background: linear-gradient(90deg, rgba(251,191,36,0.12), rgba(251,191,36,0.02)); border-color: rgba(251,191,36,0.28); }
.bcast-pay-row.bcast-tri-row { background: linear-gradient(90deg, rgba(34,211,238,0.08), rgba(34,211,238,0.01)); border-color: rgba(34,211,238,0.22); }
.bcast-pay-type {
  font-family: Rajdhani, sans-serif; font-weight: 800; font-size: 10px;
  letter-spacing: 1.4px; color: #fff; min-width: 56px; text-transform: uppercase;
}
.bcast-pay-combo { display: flex; gap: 3px; flex: 1; align-items: center; }
.pay-trap {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Rajdhani, sans-serif; font-weight: 900; font-size: 10px;
  color: #fff; border: 1.4px solid;
  text-shadow: 0 1px 2px rgba(0,0,0,0.65);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.18);
}
.pay-trap-sep { color: rgba(255,255,255,0.25); font-size: 9px; font-weight: 700; margin: 0 2px; }
.bcast-pay-amt {
  font-family: Rajdhani, sans-serif; font-weight: 800; font-size: 13px;
  color: #4ade80; min-width: 60px; text-align: right; font-variant-numeric: tabular-nums;
}
.bcast-pay-amt.big { color: #fbbf24; font-size: 14px; }
.bcast-pay-amt.tri { color: #22d3ee; }

/* Hide overlays on small screens to keep the track readable */
@media (max-width: 720px) {
  .bcast-announcer, .bcast-pools, .bcast-payouts { display: none !important; }
}

/* ─── btn-info variant (used on Form button in kennel cards) ──────── */
.btn-info {
  background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.4);
  color: var(--accent-blue);
}
.btn-info:hover { background: rgba(59,130,246,0.3); border-color: var(--accent-blue); }

/* ─── Dog Detail Modal (Phase 9-C) ──────────────────────────────── */
.dog-detail-backdrop {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
  align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 24px 12px;
}
.dog-detail-backdrop.active { display: flex; }

.dog-detail-panel {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); width: 100%; max-width: 720px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.dog-detail-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
}
.dog-detail-icon { font-size: 1.2rem; }
.dog-detail-title { font-size: 1.1rem; font-weight: 800; flex: 1; color: var(--text-primary); }
.dog-detail-close {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.dog-detail-close:hover { color: var(--accent-red); background: rgba(239,68,68,0.1); }
.dog-detail-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.dog-detail-loading { color: var(--text-muted); font-size: 0.85rem; padding: 24px; text-align: center; }

.ddog-section { background: var(--bg-surface); border-radius: var(--radius-sm); padding: 12px; }
.ddog-section-title {
  font-size: 0.72rem; font-weight: 800; color: var(--accent-gold);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
}
.ddog-empty { color: var(--text-muted); font-size: 0.8rem; text-align: center; padding: 8px; }

.ddog-stats-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ddog-stat {
  display: flex; flex-direction: column; align-items: center; min-width: 52px;
  background: var(--bg-card); border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.ddog-stat-val { font-weight: 800; font-size: 1rem; color: var(--text-primary); }
.ddog-stat-label { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

.ddog-class-banner {
  margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 0.78rem; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.ddog-class-banner.class-drop {
  background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3);
  color: var(--accent-green);
}
.ddog-class-banner.class-up {
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25);
  color: var(--accent-red);
}
.ddog-class-hint {
  margin-left: auto; font-size: 0.66rem; font-weight: 500;
  color: var(--text-muted); font-style: italic;
}

.ddog-research-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ddog-research-item {
  flex: 1 1 120px; background: var(--bg-card); border-radius: var(--radius-sm);
  padding: 8px 12px; display: flex; justify-content: space-between; align-items: center;
}
.ddog-research-label { font-size: 0.72rem; color: var(--text-secondary); }
.ddog-research-val { font-weight: 800; font-size: 0.8rem; color: var(--accent-gold); }

/* GAP-12 — dog comparison table (Settings-style select + a simple
   3-column attribute grid; the winning side of each stat is highlighted
   via the existing .stat-green utility class). */
.ddog-compare-table { margin-top: 10px; }
.ddog-compare-header {
  display: grid; grid-template-columns: 1fr auto 1fr;
  font-size: 0.72rem; font-weight: 800; color: var(--text-primary);
  padding: 4px 0; text-align: center;
}
.ddog-compare-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 3px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.75rem;
}
.ddog-compare-label { color: var(--text-muted); text-align: center; font-weight: 700; }
.ddog-compare-val { text-align: center; font-weight: 700; color: var(--text-secondary); }

.ddog-form-table-wrap { overflow-x: auto; }
.ddog-form-table {
  width: 100%; border-collapse: collapse; font-size: 0.75rem;
}
.ddog-form-table th {
  color: var(--text-muted); font-weight: 700; font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color); padding: 4px 6px; text-align: left;
}
.ddog-form-row td { padding: 5px 6px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); }
.ddog-form-row.form-win td { background: rgba(16,185,129,0.06); color: var(--text-primary); }
.ddog-form-row:hover td { background: var(--bg-card-hover); }
.form-time { font-family: var(--font-mono); color: var(--text-secondary); }
.form-fig { font-weight: 800; font-family: var(--font-mono); }
.form-fig.fig-fast { color: var(--accent-green); }
.form-fig.fig-slow { color: var(--text-muted); }
.form-replay-btn {
  background: transparent; border: 1px solid rgba(59,130,246,0.4);
  color: var(--accent-blue); border-radius: 4px; padding: 2px 7px;
  font-size: 0.65rem; cursor: pointer; transition: all 0.15s;
}
.form-replay-btn:hover { background: rgba(59,130,246,0.2); }

@media (max-width: 640px) {
  .dog-detail-backdrop { padding: 0; align-items: flex-end; }
  .dog-detail-panel { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: 100%; }
  .ddog-form-table { font-size: 0.68rem; }
}

/* ─── Daily Double Launcher + Modal (Phase 7b) ─────────────────── */
.bb-utility-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.bb-utility-row .track-bias-banner { flex: 1; margin-bottom: 0; }
.carryover-ticker {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.carry-chip {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.3px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(139,92,246,0.18); color: #c4b5fd;
  border: 1px solid rgba(139,92,246,0.35); white-space: nowrap;
}
.carry-chip.carry-jackpot {
  background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(249,115,22,0.18));
  color: #fde68a; border-color: rgba(251,191,36,0.45);
  animation: carry-pulse 2.4s ease-in-out infinite;
}
@keyframes carry-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(251,191,36,0); }
  50% { box-shadow: 0 0 12px rgba(251,191,36,0.35); }
}
.dd-launch-btn {
  background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; border: none;
  font-weight: 800; font-size: 0.78rem; padding: 8px 14px;
  border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(139,92,246,0.35); transition: transform 0.15s, box-shadow 0.15s;
}
.dd-launch-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(139,92,246,0.5); }

@media (max-width: 375px) {
  .bb-utility-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .bb-utility-row .track-bias-banner {
    flex: 1 1 100%;
    min-width: 0;
  }
  .dd-launch-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    font-size: 0.72rem;
    padding: 10px 8px;
    text-align: center;
    min-height: 44px;
  }
}

.dd-backdrop {
  display: none; position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,0.78); backdrop-filter: blur(4px);
  align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 24px 12px;
}
.dd-backdrop.active { display: flex; }
.dd-panel {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); width: 100%; max-width: 720px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.dd-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
}
.dd-icon { font-size: 1.3rem; }
.dd-header h2 { font-size: 1.05rem; font-weight: 800; flex: 1; color: var(--accent-purple); margin: 0; }
.dd-close {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.dd-close:hover { color: var(--accent-red); background: rgba(239,68,68,0.1); }
.dd-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.dd-section { background: var(--bg-surface); border-radius: var(--radius-sm); padding: 12px; }
.dd-section-title {
  font-size: 0.74rem; font-weight: 800; color: var(--accent-gold);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
}
.dd-meta { color: var(--text-muted); font-weight: 600; font-size: 0.7rem; text-transform: none; letter-spacing: 0; }

.dd-traps {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px;
}
.dd-trap-btn {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s;
  text-align: left;
}
.dd-trap-btn:hover { border-color: var(--accent-purple); background: var(--bg-card-hover); }
.dd-trap-btn.selected { border-color: var(--accent-purple); background: rgba(139,92,246,0.12); }
.dd-trap-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px; font-weight: 800; font-size: 0.7rem;
}
.dd-trap-name { font-size: 0.74rem; color: var(--text-primary); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-empty { color: var(--text-muted); font-size: 0.78rem; padding: 8px; text-align: center; }

.dd-race-select {
  background: var(--bg-card); border: 1px solid var(--border-color);
  color: var(--text-primary); border-radius: 4px; padding: 4px 8px;
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
}

.dd-stakes { display: flex; gap: 6px; flex-wrap: wrap; }
.dd-stake-btn {
  background: var(--bg-card); border: 1px solid var(--border-color);
  color: var(--text-primary); padding: 8px 16px;
  font-weight: 700; font-size: 0.85rem; font-family: var(--font-mono);
  border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s;
}
.dd-stake-btn:hover:not(:disabled) { border-color: var(--accent-purple); }
.dd-stake-btn.active { background: var(--accent-purple); color: #fff; border-color: var(--accent-purple); }
.dd-stake-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.dd-summary {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 10px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.dd-summary-line {
  display: flex; justify-content: space-between; font-size: 0.82rem;
  color: var(--text-secondary);
}
.dd-summary-line strong { color: var(--text-primary); font-family: var(--font-mono); }
.dd-pool-info { font-size: 0.72rem; color: var(--text-muted); }
.dd-pool-amount { color: var(--accent-gold); font-weight: 700; font-family: var(--font-mono); }
.dd-pool-amount.muted { color: var(--text-muted); font-weight: 400; }

.dd-actions { display: flex; justify-content: center; }
.dd-actions .btn-primary {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  font-weight: 800; padding: 10px 24px; font-size: 0.92rem;
}

@media (max-width: 640px) {
  .dd-backdrop { padding: 0; align-items: flex-end; }
  .dd-panel { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: 100%; }
  .dd-traps { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Track Bias Banner (Phase 8a) ─────────────────────────────── */
.track-bias-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin-bottom: 8px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(251,191,36,0.12), rgba(251,191,36,0.04));
  border: 1px solid rgba(251,191,36,0.3); font-size: 0.78rem;
  animation: bias-fade-in 0.4s ease;
}
.track-bias-banner.bias-inside  { border-left: 3px solid #10b981; }
.track-bias-banner.bias-outside { border-left: 3px solid #ef4444; }
.track-bias-banner.bias-mid     { border-left: 3px solid #3b82f6; }
.bias-icon { font-size: 1.05rem; }
.bias-verdict { flex: 1; color: var(--text-primary); font-weight: 700; }
.bias-sample {
  font-size: 0.65rem; color: var(--text-muted);
  background: var(--bg-surface); padding: 2px 8px; border-radius: 10px;
}
@keyframes bias-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Replay Mode Overlay (Phase 2 client) ──────────────────────── */
#replay-mode-overlay {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,0.82); border: 1px solid rgba(251,191,36,0.4);
  border-radius: 8px; padding: 7px 14px;
  backdrop-filter: blur(6px); pointer-events: all;
  animation: replay-slide-in 0.3s ease;
}
@keyframes replay-slide-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.replay-badge {
  font-size: 0.72rem; font-weight: 900; letter-spacing: 1px;
  color: var(--accent-gold); text-shadow: 0 0 8px rgba(251,191,36,0.5);
  animation: replay-pulse 1.5s ease-in-out infinite;
}
@keyframes replay-pulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.6; }
}
.replay-info {
  font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap;
}
.replay-close {
  background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.4);
  color: #ef4444; border-radius: 5px; padding: 3px 10px;
  font-size: 0.7rem; font-weight: 700; cursor: pointer;
  transition: all 0.15s;
}
.replay-close:hover { background: rgba(239,68,68,0.3); border-color: #ef4444; }
@media (max-width: 640px) {
  #replay-mode-overlay { top: 4px; padding: 6px 10px; gap: 8px; }
  .replay-close { padding: 6px 14px; font-size: 0.8rem; min-height: 44px; }
}

/* ════════════════════════════════════════════════════════════════
   Sprint B / S2 — Mobile polish (rev 7)
   Last-resort overrides applied at the bottom of the file so they
   defeat any earlier rules. Scoped to small viewports — no impact
   on desktop layout.
   ════════════════════════════════════════════════════════════════ */

/* ─── Header: narrow phones & small tablets ───────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .header {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding-top: max(6px, env(safe-area-inset-top, 6px));
    padding-bottom: 6px;
    overflow-x: clip;
  }
  .header-left,
  .header-right {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 4px;
  }
  .header-right { justify-content: flex-end; }
  .header-title { font-size: 0.9rem; }
  .header-title span,
  .header-status #status-text,
  .header-tickets .tk-label,
  .header-sister-link .sister-link-label { display: none; }
  .header-sister-link { display: none; }
  .sound-toggle {
    padding: 8px;
    min-width: 44px;
    max-width: 44px;
    overflow: hidden;
    text-indent: -9999px;
    position: relative;
  }
  .sound-toggle::after {
    content: '🔇';
    text-indent: 0;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }
  .sound-toggle.active::after { content: '🔊'; }
  .track-container { min-height: 120px; }
  .announcer-box,
  .trackman-box { margin-bottom: 6px; }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .header {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 8px;
  }
  .header-left,
  .header-right {
    flex-wrap: wrap;
    gap: 6px;
  }
  .header-tickets .tk-label { display: none; }
  .header-title { font-size: 1.1rem; }
  .header-balance { font-size: 0.8rem; padding: 4px 12px; }
  .header-achievements,
  .header-missions,
  .header-tickets {
    margin-left: 0;
    padding: 5px 10px;
    font-size: 0.74rem;
  }
}

@media (max-width: 720px) {
  .header {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    overflow-x: clip;
  }
  .header-left {
    flex: none;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }
  .header-right {
    flex: none;
    width: 100%;
    max-width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }
  .header-title { font-size: 1rem; flex-shrink: 0; }
  .header-tickets .tk-label { display: none; }
  .header-tickets,
  .header-achievements,
  .header-missions,
  .header-balance { margin-left: 0; }
  .header-status #status-text { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sound-toggle {
    padding: 8px;
    min-width: 44px;
    max-width: 44px;
    overflow: hidden;
    text-indent: -9999px;
    position: relative;
  }
  .sound-toggle::after {
    content: '🔇';
    text-indent: 0;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }
  .sound-toggle.active::after { content: '🔊'; }
}

@media (max-width: 480px) {
  .header-title span { display: none; }
  .header-balance { padding: 4px 10px; font-size: 0.75rem; }
  .header-tickets { margin-left: 0; padding: 6px 10px; }
  .header-achievements,
  .header-missions {
    margin-left: 0;
    padding: 6px 10px;
    font-size: 0.72rem;
  }
  .sound-toggle {
    padding: 8px;
    min-width: 44px;
    max-width: 44px;
    overflow: hidden;
    text-indent: -9999px;
    position: relative;
  }
  .sound-toggle::after {
    content: '🔇';
    text-indent: 0;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }
  .sound-toggle.active::after { content: '🔊'; }
}

@media (max-width: 480px) {
  /* Prevent iOS Safari from auto-zooming when an input gets focus.
     Any input <16px triggers the zoom; this guarantees we never do. */
  input, select, textarea, button {
    font-size: max(16px, 1rem);
  }

  /* Honor home-indicator safe area on the bottom of the page so
     fixed-position bars don't sit underneath it. */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* The bet-type row on the place-bet panel is the most-tapped UI;
     guarantee 44px even when earlier rules shrink it. */
  .bet-type-btn,
  .stake-btn,
  .bet-dog-btn,
  .tab-btn,
  .race-select-btn,
  .shop-cat-btn,
  .market-buy-btn,
  .facility-upgrade-btn,
  .cheat-btn,
  .dogs-sub-btn,
  .sound-toggle {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Stop the tab nav from collapsing when there are too many tabs;
     let it scroll horizontally instead (matches iOS UITabBar idiom). */
  .tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .tab-nav::-webkit-scrollbar { display: none; }

  .toast-host {
    left: 8px;
    right: 8px;
    transform: none;
    width: auto;
  }
  .toast {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  /* Modal backdrops — make them edge-to-edge sheets on phone. */
  .modal-backdrop, .breed-modal-backdrop, .race-book-backdrop,
  .tickets-overlay, .settings-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal-content, .breed-modal, .race-book-modal,
  .tickets-card, .settings-card {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    max-height: min(90vh, 90dvh);
    overflow-y: auto;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .tickets-overlay { padding-top: 0 !important; }
  .settings-overlay { padding: 0 !important; }
}

/* iPhone-only: keep the sticky-bottom in-game elements above the
   home-indicator bar. */
@supports (padding: env(safe-area-inset-bottom)) {
  .ticker-bar,
  .commentary-ticker,
  #replay-mode-overlay {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* ─── Achievements (Phase 11) ──────────────────────────────────── */
/* Header pill — sits next to tickets pill, lights up gold when any
   achievement is unlocked.  Hidden via inline style for anonymous users. */
.header-achievements {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; padding: 6px 12px;
  background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.35);
  color: var(--accent-gold); border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.header-achievements:hover {
  background: rgba(251,191,36,0.22);
  box-shadow: 0 0 0 2px rgba(251,191,36,0.25);
}
.header-achievements:active { transform: translateY(1px); }
.header-achievements .ach-pill-count { font-variant-numeric: tabular-nums; }

.header-missions {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; padding: 6px 12px;
  background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.header-missions:hover {
  background: rgba(16, 185, 129, 0.22);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}
.header-missions:active { transform: translateY(1px); }
.header-missions .mission-pill-count { font-variant-numeric: tabular-nums; }

/* Achievement-flavored toast — bigger, gold border, click-to-open. */
.toast-achievement {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(20,16,8,0.95), rgba(40,30,12,0.95));
  border: 1px solid rgba(251,191,36,0.55);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 18px rgba(251,191,36,0.35);
  cursor: pointer; min-width: 280px; max-width: 380px; padding: 12px 16px;
  border-radius: var(--radius-md);
}
.toast-achievement:hover { border-color: rgba(251,191,36,0.8); }
.ach-toast-icon {
  font-size: 2rem; line-height: 1;
  filter: drop-shadow(0 0 8px rgba(251,191,36,0.6));
}
.ach-toast-body { flex: 1; min-width: 0; }
.ach-toast-eyebrow {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 1.5px;
  color: var(--accent-gold); text-transform: uppercase; margin-bottom: 2px;
}
.ach-toast-title { font-size: 0.95rem; font-weight: 800; color: var(--text-primary); }
.ach-toast-desc  { font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px; }

/* Tier accent on toast */
.toast-achievement.ach-tier-silver   { box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 18px rgba(192,192,192,0.35); border-color: rgba(192,192,192,0.6); }
.toast-achievement.ach-tier-silver   .ach-toast-eyebrow { color: #d1d5db; }
.toast-achievement.ach-tier-gold     { box-shadow: 0 6px 24px rgba(0,0,0,0.45), 0 0 22px rgba(251,191,36,0.55); }
.toast-achievement.ach-tier-platinum {
  box-shadow: 0 6px 28px rgba(0,0,0,0.5), 0 0 28px rgba(167,243,255,0.6);
  border-color: rgba(167,243,255,0.7);
}
.toast-achievement.ach-tier-platinum .ach-toast-eyebrow { color: #67e8f9; }

/* Filters strip inside the modal — reuses existing .filter-chip styling */
.achievements-filters {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px;
}

/* Card grid */
.achievements-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.ach-card {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 14px 12px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; transition: transform 0.12s, border-color 0.12s, box-shadow 0.15s;
  position: relative;
}
.ach-card:hover { transform: translateY(-2px); }
.ach-card-icon { font-size: 2rem; line-height: 1; margin-bottom: 4px; }
.ach-card-title { font-size: 0.85rem; font-weight: 800; color: var(--text-primary); }
.ach-card-desc  { font-size: 0.7rem;  color: var(--text-secondary); min-height: 28px; }
.ach-card-tier  {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-muted);
  margin-top: 4px; padding: 2px 8px; border-radius: 8px;
  background: var(--bg-card);
}

/* Locked: desaturated icon, faded text */
.ach-card.ach-locked { opacity: 0.55; }
.ach-card.ach-locked .ach-card-icon { filter: grayscale(0.8); }

/* Unlocked: tier-tinted border + glow */
.ach-card.ach-unlocked.ach-tier-bronze   { border-color: rgba(180,120,60,0.6); box-shadow: 0 0 12px rgba(180,120,60,0.25); }
.ach-card.ach-unlocked.ach-tier-silver   { border-color: rgba(200,200,210,0.65); box-shadow: 0 0 12px rgba(200,200,210,0.3); }
.ach-card.ach-unlocked.ach-tier-gold     { border-color: rgba(251,191,36,0.7);  box-shadow: 0 0 16px rgba(251,191,36,0.35); }
.ach-card.ach-unlocked.ach-tier-platinum {
  border-color: rgba(167,243,255,0.75);
  box-shadow: 0 0 18px rgba(167,243,255,0.45);
}
.ach-card.ach-unlocked .ach-card-tier {
  color: var(--accent-gold);
  background: rgba(251,191,36,0.1);
}
.ach-card.ach-unlocked.ach-tier-platinum .ach-card-tier {
  color: #67e8f9; background: rgba(103,232,249,0.1);
}

/* Phase 1.7 — toast deep-link landing flash on the matching card */
.ach-card-flash {
  animation: ach-card-flash 1.5s ease-out;
  outline: 2px solid rgba(251,191,36,0.9);
  outline-offset: 2px;
}
@keyframes ach-card-flash {
  0%   { box-shadow: 0 0 0 0 rgba(251,191,36,0.85); transform: scale(1); }
  20%  { box-shadow: 0 0 0 14px rgba(251,191,36,0); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 0 rgba(251,191,36,0);    transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ach-card-flash { animation: none; }
}

@media (max-width: 480px) {
  .achievements-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .header-achievements { padding: 8px 12px; min-height: 44px; }
  .header-missions { padding: 8px 12px; min-height: 44px; }
}

/* ─── Race Cinema — Fullscreen movie broadcast + video capture ─── */
.track-cinema-clickable {
  cursor: zoom-in;
}
.track-cinema-clickable::after {
  content: '⛶ CLICK FOR FULLSCREEN';
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 40;
  font-family: Rajdhani, sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(251, 191, 36, 0.85);
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(251, 191, 36, 0.25);
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.track-cinema-clickable:hover::after {
  opacity: 1;
}
.btn-cinema-fullscreen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 44px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.12), rgba(15, 23, 42, 0.9));
  color: #fbbf24;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.btn-cinema-fullscreen:hover {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.22), rgba(30, 41, 59, 0.95));
  border-color: rgba(251, 191, 36, 0.7);
}
.btn-cinema-fullscreen:active {
  transform: scale(0.98);
}
.btn-cinema-fullscreen[hidden] {
  display: none !important;
}
@media (max-width: 640px) {
  .btn-cinema-fullscreen {
    display: none !important;
  }
}
.bet-block-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  margin: 6px 0 0;
  line-height: 1.35;
}
.track-view-controls {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 10px));
  right: max(10px, env(safe-area-inset-right, 10px));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  pointer-events: auto;
}
.btn-track-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.btn-track-fullscreen {
  border: 1px solid rgba(251, 191, 36, 0.55);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.25), rgba(15, 23, 42, 0.92));
  color: #fbbf24;
}
.btn-track-fullscreen:hover {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.35), rgba(30, 41, 59, 0.95));
  border-color: rgba(251, 191, 36, 0.8);
}
.btn-track-action {
  border: 1px solid rgba(45, 212, 191, 0.45);
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.18), rgba(15, 23, 42, 0.92));
  color: #2dd4bf;
}
.btn-track-action:hover {
  color: #5eead4;
  border-color: rgba(45, 212, 191, 0.7);
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.28), rgba(30, 41, 59, 0.95));
}
.btn-track-view:active {
  transform: scale(0.98);
}
body.race-cinema-active .track-view-controls {
  display: none;
}
.track-cinema-clickable:has(.track-view-controls)::after {
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  .track-cinema-clickable::after {
    opacity: 1;
    content: '⛶ TAP CINEMA';
    right: max(10px, env(safe-area-inset-right, 10px));
    bottom: max(10px, env(safe-area-inset-bottom, 10px));
    font-size: 0.72rem;
    padding: 6px 10px;
    min-height: 32px;
    display: flex;
    align-items: center;
  }
  body.is-racing .track-cinema-clickable::after {
    animation: cinema-pulse 2s ease-in-out infinite;
  }
}
body.race-cinema-active {
  overflow: hidden;
  touch-action: none;
}
body.race-cinema-active .header,
body.race-cinema-active .tab-nav,
body.race-cinema-active .ticker-bar,
body.race-cinema-active .main-content,
body.race-cinema-active #anon-warn {
  visibility: hidden;
}
body.is-racing .ticker-bar,
body.is-racing .race-controls,
body.is-racing #first-bet-cta {
  display: none;
}
body.is-racing .race-info {
  margin-bottom: 4px;
}
body.is-racing .race-info-value {
  font-size: 0.82rem;
}
/* Wave 1 — hide in-track clutter during cinema (track silhouette only) */
body.race-cinema-active .bcast-announcer,
body.race-cinema-active .bcast-payouts,
body.race-cinema-active .bcast-pools,
body.race-cinema-active .bcast-pools--sidebar,
body.replay-cinema-active .bcast-announcer,
body.replay-cinema-active .bcast-payouts,
body.replay-cinema-active .bcast-pools,
.track-container.cinema-mode .bcast-announcer,
.track-container.cinema-mode .bcast-payouts,
.track-container.cinema-mode .bcast-pools {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
body.race-cinema-active .L-liveBadge,
body.race-cinema-active .live-badge,
body.replay-cinema-active .L-liveBadge,
body.replay-cinema-active .live-badge,
.track-container.cinema-mode .L-liveBadge,
.track-container.cinema-mode .live-badge {
  opacity: 0 !important;
  pointer-events: none;
}
/* Thin 2px progress bar stays visible (drawn in SVG at bottom of track) */
body.race-cinema-active .L-progressBar,
body.replay-cinema-active .L-progressBar,
.track-container.cinema-mode .L-progressBar {
  opacity: 1;
}
.race-cinema {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 9000;
  background: #000;
  overflow: hidden;
}
.race-cinema[hidden] {
  display: none !important;
}
.race-cinema:fullscreen,
.race-cinema:-webkit-full-screen {
  width: 100%;
  height: 100%;
}
.race-cinema-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 35%, rgba(251, 191, 36, 0.06), transparent 65%),
    #000;
  pointer-events: none;
}
.race-cinema-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.race-cinema-stage .track-perspective-wrap {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: none;
}
.race-cinema-stage .track-container,
.track-container.track-cinema-cover {
  width: 100vw;
  height: 100dvh;
  height: 100svh;
  max-width: 100vw;
  max-height: 100dvh;
  max-height: 100svh;
  aspect-ratio: unset;
  min-height: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.race-cinema-stage #track-svg,
.track-container.track-cinema-cover #track-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.race-cinema-stage #track-svg svg,
.track-container.track-cinema-cover #track-svg svg,
.race-cinema-stage #particle-canvas,
.race-cinema-stage #confetti-canvas,
.track-container.track-cinema-cover #particle-canvas,
.track-container.track-cinema-cover #confetti-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.race-cinema-stage .track-container::before,
.race-cinema-stage .track-container::after {
  border-radius: 0;
}
.race-cinema-stage .track-cinema-clickable::after {
  display: none;
}
.race-cinema-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.55) 100%);
}
.race-cinema-chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top, 12px)) max(16px, env(safe-area-inset-right, 16px)) 14px max(16px, env(safe-area-inset-left, 16px));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
  border: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.race-cinema-ui-idle .race-cinema-chrome {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}
/* Sticky exit — always tappable when chrome auto-hides (never trap the player) */
.race-cinema-sticky-exit {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 10px));
  right: max(12px, env(safe-area-inset-right, 12px));
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: rgba(7, 11, 20, 0.88);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), var(--glow-gold);
  color: #fbbf24;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s ease, transform 0.15s ease;
}
.race-cinema-sticky-exit:active {
  transform: scale(0.96);
}
.race-cinema-ui-idle .race-cinema-sticky-exit {
  display: inline-flex;
}
.race-cinema:not(.race-cinema-ui-idle) .race-cinema-sticky-exit {
  display: none;
}
.race-cinema-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.race-cinema-badge {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: #fff;
  background: #dc2626;
  padding: 3px 8px;
  border-radius: 3px;
  animation: cinema-pulse 1.2s ease-in-out infinite;
}
.race-cinema-badge.is-replay {
  background: #2563eb;
  animation: none;
}
.race-cinema-badge.is-finish {
  background: #d97706;
  animation: cinema-pulse 0.9s ease-in-out infinite;
}
.race-cinema-badge.is-official {
  background: #059669;
  animation: none;
}
@keyframes cinema-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.race-cinema-heading {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.5vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fbbf24;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.race-cinema-actions {
  display: flex;
  gap: 8px;
}
.race-cinema-btn {
  font-family: Rajdhani, sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(15, 23, 42, 0.9);
  color: #fbbf24;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.race-cinema-btn:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(251, 191, 36, 0.6);
}
.race-cinema-record.recording {
  border-color: #ef4444;
  color: #fca5a5;
}
.race-cinema-rec-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: 6px;
  vertical-align: middle;
}
.race-cinema-record.recording .race-cinema-rec-dot {
  animation: cinema-pulse 0.8s ease-in-out infinite;
}
.race-cinema-hint {
  position: absolute;
  bottom: max(10px, env(safe-area-inset-bottom, 10px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 0.7rem;
  color: rgba(148, 163, 184, 0.75);
  pointer-events: none;
  transition: opacity 0.45s ease;
  white-space: nowrap;
}
.race-cinema-expand-fab {
  position: fixed;
  right: max(14px, env(safe-area-inset-right, 14px));
  bottom: max(88px, calc(env(safe-area-inset-bottom, 14px) + 74px));
  z-index: 8800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  min-height: var(--tap-min);
  border: 1px solid rgba(251, 191, 36, 0.55);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(26, 34, 53, 0.96), rgba(15, 23, 42, 0.98));
  box-shadow: var(--glow-gold), 0 8px 28px rgba(0, 0, 0, 0.55);
  color: #fbbf24;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
}
@media (min-width: 721px) {
  .race-cinema-expand-fab {
    right: max(20px, env(safe-area-inset-right, 20px));
    bottom: max(24px, env(safe-area-inset-bottom, 24px));
  }
}
.race-cinema-expand-fab[hidden] {
  display: none !important;
}
.race-cinema-expand-fab:active {
  transform: scale(0.96);
}
.race-cinema-expand-icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* Mobile portrait → pseudo-landscape cinema (widescreen track) */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .race-cinema--mobile.race-cinema--portrait-landscape {
    inset: auto;
    width: 100lvh;
    width: 100dvh;
    height: 100lvw;
    height: 100dvw;
    max-width: 100lvh;
    max-height: 100lvw;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
  }
  .race-cinema--mobile.race-cinema--portrait-landscape .race-cinema-stage .track-container,
  .race-cinema--mobile.race-cinema--portrait-landscape .track-container.track-cinema-cover {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  .race-cinema--mobile.race-cinema--portrait-landscape .race-cinema-chrome {
    padding-top: max(8px, env(safe-area-inset-right, 8px));
    padding-left: max(12px, env(safe-area-inset-top, 12px));
    padding-right: max(12px, env(safe-area-inset-bottom, 12px));
  }
  .race-cinema--mobile.race-cinema--portrait-landscape .race-cinema-hint {
    bottom: max(8px, env(safe-area-inset-left, 8px));
  }
  .race-cinema--mobile.race-cinema--portrait-landscape .race-cinema-status {
    right: max(12px, env(safe-area-inset-left, 12px));
    bottom: max(24px, calc(env(safe-area-inset-left, 8px) + 16px));
  }
}

/* Physical landscape on phone — track aspect fits naturally */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .race-cinema--mobile .race-cinema-stage .track-container,
  .race-cinema--mobile .track-container.track-cinema-cover {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
  }
  .race-cinema--mobile .track-container.track-cinema-meet {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }
}

.race-cinema-rotate-prompt {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  color: #fbbf24;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.race-cinema-rotate-prompt.is-visible {
  opacity: 1;
  animation: rotatePromptFade 4.5s ease forwards;
}
.race-cinema-rotate-icon {
  font-size: 2.8rem;
  animation: rotatePhoneHint 1.8s ease-in-out infinite;
}
@keyframes rotatePhoneHint {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-90deg); }
  60% { transform: rotate(-90deg); }
}
@keyframes rotatePromptFade {
  0%, 12% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .race-cinema-rotate-icon { animation: none; }
  .race-cinema-rotate-prompt.is-visible { animation: none; opacity: 1; }
}

.dog-hero-sprite image {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
}
.track-container.track-movie-mode {
  background: #030508;
  filter: contrast(1.06) saturate(1.12);
}
.track-container.track-movie-mode #particle-canvas {
  mix-blend-mode: screen;
  opacity: 0.95;
}
.track-svg-movie .L-trackBase,
.track-svg-movie .L-trackTex {
  filter: saturate(1.15) contrast(1.08);
}
.track-svg-movie .anime-dog .dog-hero-sprite image {
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.75)) saturate(1.08);
}
.race-cinema-ui-idle .race-cinema-hint {
  opacity: 0;
}
.race-cinema-status {
  position: absolute;
  bottom: max(28px, calc(env(safe-area-inset-bottom, 10px) + 18px));
  right: max(16px, env(safe-area-inset-right, 16px));
  z-index: 10;
  font-family: Rajdhani, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #4ade80;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  transition: opacity 0.45s ease;
}
.race-cinema-ui-idle .race-cinema-status {
  opacity: 0;
}
/* Anime dog polish inside track */
.anime-dog .dog-speed-lines line {
  stroke: rgba(17, 17, 17, 0.4);
}
.anime-dog .dog-vest-fill {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* ─── Cinematic UI System — shared modals + CTAs ──────────────── */
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
/* Unified modal entrance: backdrop fade + card 0.97→1 rise (~220ms) */
@keyframes dt-modal-card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.dt-modal-in.active,
.dt-modal-in.is-open {
  animation: fadeIn 0.22s ease-out;
}
.dog-detail-backdrop.dt-modal-in.active .dog-detail-panel,
.dd-backdrop.dt-modal-in.active .dd-panel,
.modal-panel-scrim.dt-modal-in.active .modal-panel-card {
  animation: dt-modal-card-in 0.22s ease-out;
}

/* ─── DtSkeleton — neon-dark list placeholders ────────────────── */
.dt-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 4px;
}
.dt-skeleton-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius-md, 10px);
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(45, 212, 191, 0.12);
}
.dt-skeleton-bar {
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(45, 212, 191, 0.08) 0%,
    rgba(251, 191, 36, 0.18) 40%,
    rgba(45, 212, 191, 0.08) 80%
  );
  background-size: 200% 100%;
  animation: dt-skeleton-shimmer 1.2s ease-in-out infinite;
}
.dt-skeleton-bar--lg { width: 62%; height: 14px; }
.dt-skeleton-bar--sm { width: 38%; }
.dt-skeleton-bar:not(.dt-skeleton-bar--lg):not(.dt-skeleton-bar--sm) { width: 88%; }
@keyframes dt-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.shop-grid.dt-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: var(--scrim);
  cursor: pointer;
  animation: fadeIn 0.28s ease-out;
}
.modal-scrim--in-track {
  position: absolute;
  z-index: 999;
  border-radius: var(--radius-hero);
}
.modal-card {
  position: relative;
  width: min(92vw, 400px);
  padding: 24px 20px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(45, 212, 191, 0.35);
  background: linear-gradient(180deg, #1a2235 0%, #0f172a 100%);
  box-shadow: var(--glow-teal), 0 24px 64px rgba(0, 0, 0, 0.65);
  cursor: default;
  text-align: center;
  animation: modal-in 0.28s ease-out;
}
.modal-card--celebrate {
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: var(--glow-gold), 0 24px 64px rgba(0, 0, 0, 0.65);
}
.modal-hero {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 8px;
}
.modal-title {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fbbf24;
  margin-bottom: 8px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.modal-prompt {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
  animation: pulse 1.5s ease infinite;
}
.modal-dismiss {
  margin-top: 14px;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.btn-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--cta-teal);
  box-shadow: 0 4px 0 #0d9488, var(--glow-teal);
  color: #fff;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-cta-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #0d9488, var(--glow-teal);
}
.btn-cta-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-cta-gold {
  background: var(--cta-gold);
  box-shadow: 0 4px 0 #b45309, var(--glow-gold);
}
.btn-cta-gold:active {
  box-shadow: 0 2px 0 #b45309, var(--glow-gold);
}
@media (prefers-reduced-motion: reduce) {
  .modal-prompt { animation: none; }
  .modal-card { animation: none; }
}

/* Hub chrome diet — mobile */
@media (max-width: 640px) {
  body.is-racing .race-book-sidebar,
  body.race-cinema-active .race-book-sidebar {
    display: none;
  }
  body.is-racing .announcer-box,
  body.is-racing .trackman-box,
  body.race-cinema-active .announcer-box,
  body.race-cinema-active .trackman-box {
    display: none;
  }
  .header-tickets .tk-label,
  .header-sister-link .sister-link-label {
    display: none;
  }
  .header-title { font-size: 1rem; }
}
@media (max-width: 900px) {
  body.is-racing .race-main-layout,
  body.race-cinema-active .race-main-layout {
    grid-template-columns: 1fr;
  }
}

/* ─── Cinematic Wave 2–5 extensions ─────────────────────────── */

/* Tab overflow menu (mobile) */
.tab-more-wrap {
  position: relative;
  flex: 0 0 auto;
  display: none;
}
.tab-more-btn {
  color: var(--text-secondary) !important;
  border-bottom-color: transparent !important;
}
.tab-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  background: linear-gradient(180deg, #1a2235, #0f172a);
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: var(--radius-md);
  box-shadow: var(--glow-teal), 0 16px 40px rgba(0, 0, 0, 0.65);
  z-index: 120;
}
.tab-more-menu[hidden] { display: none; }
.tab-more-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  min-height: var(--tap-min);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tab-more-item:hover,
.tab-more-item.active {
  background: rgba(251, 191, 36, 0.12);
  color: var(--accent-gold);
}
@media (max-width: 640px) {
  .tab-btn-overflow { display: none !important; }
  .tab-more-wrap { display: block; }
  .header-title span { display: none; }
  .header-status #status-text { display: none; }
  .header-balance #player-balance { font-size: 0.85rem; }
  .bet-dogs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Sidebar slide-over drawer (mobile) */
.sidebar-drawer-toggle {
  display: none;
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 12px));
  bottom: max(72px, calc(env(safe-area-inset-bottom, 12px) + 60px));
  z-index: 85;
  padding: 10px 14px;
  min-height: var(--tap-min);
  border: 1px solid rgba(45, 212, 191, 0.45);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #1a2235, #0f172a);
  box-shadow: var(--glow-teal), 0 8px 24px rgba(0, 0, 0, 0.5);
  color: #e2e8f0;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
}
.sidebar-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-drawer-scrim[hidden] { display: none; }
@media (max-width: 900px) {
  .sidebar-drawer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  body.is-racing .sidebar-drawer-toggle,
  body.race-cinema-active .sidebar-drawer-toggle {
    display: none;
  }
  .race-book-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 300px);
    z-index: 200;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #11182a 0%, #0a0f1c 100%);
    border-left: 1px solid rgba(45, 212, 191, 0.25);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.65);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    flex-direction: column;
    flex-wrap: nowrap;
  }
  body.sidebar-drawer-open {
    overflow: hidden;
  }
  body.sidebar-drawer-open .race-book-sidebar {
    transform: translateX(0);
  }
  body.sidebar-drawer-open .sidebar-drawer-scrim {
    display: block;
  }
}

/* Achievements / missions — cinematic modal panels */
/* Achievements / missions share Rumble modal language (+ .modal-scrim alias) */
.modal-panel-scrim.modal-scrim {
  /* panel-scrim owns open/close via .active; override base .modal-scrim always-flex */
  display: none;
}
.modal-panel-scrim.modal-scrim.active {
  display: flex;
}
.modal-panel-card.modal-card {
  max-width: 880px;
  text-align: left;
  padding: 0;
  width: 100%;
}
.modal-panel-card--narrow.modal-card {
  max-width: 600px;
}

.modal-panel-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
  align-items: flex-start;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom));
  background: var(--scrim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow-y: auto;
  cursor: pointer;
}
.modal-panel-scrim.active {
  display: flex;
  animation: fadeIn 0.28s ease-out;
}
.modal-panel-card {
  position: relative;
  width: 100%;
  max-width: 880px;
  background: linear-gradient(180deg, #1a2235 0%, #0f172a 100%);
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: var(--glow-teal), 0 24px 64px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  cursor: default;
  animation: modal-in 0.28s ease-out;
}
.modal-panel-card--narrow { max-width: 600px; }
.modal-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
}
.modal-panel-icon { font-size: 1.2rem; }
.modal-panel-title {
  flex: 1;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fbbf24;
}
.modal-panel-meta {
  margin-right: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.modal-panel-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s, color 0.15s;
}
.modal-panel-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
.modal-panel-body {
  padding: 14px 18px 18px;
  max-height: min(70vh, 70dvh);
  overflow-y: auto;
}

/* ─── Weekly Community Challenge (docs/COOLEST_GAME_EVER.md §11) ─── */
.community-challenge-widget {
  margin-bottom: 14px; padding: 12px 14px;
  background: linear-gradient(135deg, rgba(251,191,36,0.08) 0%, rgba(45,212,191,0.05) 100%);
  border: 1px solid rgba(251,191,36,0.25); border-radius: var(--radius-md);
}
.community-challenge-widget:empty { display: none; }
.cc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cc-title { font-weight: 800; font-size: 0.88rem; }
.cc-days { font-size: 0.72rem; color: var(--accent-gold); font-weight: 700; }
.cc-desc { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.35; }
.cc-bar-track {
  height: 10px; border-radius: 6px; background: rgba(255,255,255,0.08);
  overflow: hidden; margin-bottom: 6px;
}
.cc-bar-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #2dd4bf, #fbbf24);
  transition: width 0.4s ease;
}
.cc-bar-fill--done { background: linear-gradient(90deg, #10b981, #fbbf24); }
.cc-progress { font-size: 0.7rem; color: var(--text-muted); text-align: right; }

/* Bulletin board — Wave 3: sits on modal-scrim + modal-card */
.bulletin-board-overlay.modal-scrim {
  overflow-y: auto;
  align-items: flex-start;
  padding-top: max(24px, env(safe-area-inset-top));
}
.bulletin-board.modal-card,
.bulletin-board {
  background: linear-gradient(180deg, #1a2235 0%, #0f172a 100%);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: var(--radius-lg);
  max-width: min(92vw, 700px);
  width: 100%;
  padding: 24px 28px;
  box-shadow: var(--glow-gold), 0 24px 64px rgba(0, 0, 0, 0.8);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #e5e7eb;
  cursor: default;
  text-align: left;
  animation: modal-in 0.28s ease-out;
}
.modal-card--wide {
  max-width: min(92vw, 720px);
  text-align: left;
  padding: 20px;
}
.bulletin-board-head {
  text-align: center;
  margin-bottom: 16px;
}
.bulletin-board-title {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(251, 191, 36, 0.3);
}
.bb-meta {
  font-size: 0.85rem;
  color: #9ca3b8;
  margin-top: 4px;
}
.bb-pf-tag {
  color: #ffd700;
  font-weight: 700;
  margin-top: 6px;
  font-size: 0.9rem;
  font-family: Rajdhani, system-ui, sans-serif;
  letter-spacing: 0.06em;
}
.bb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px;
}
.bb-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.bb-thead tr {
  border-bottom: 2px solid rgba(251, 191, 36, 0.3);
  color: #9ca3b8;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.bb-th {
  padding: 6px 4px;
  text-align: left;
  font-family: Rajdhani, system-ui, sans-serif;
  font-weight: 700;
}
.bb-th--num { text-align: right; }
.bb-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.bb-row--p1 { background: rgba(251, 191, 36, 0.08); font-weight: 600; }
.bb-row--p2 { background: rgba(192, 192, 192, 0.06); font-weight: 600; }
.bb-row--p3 { background: rgba(205, 127, 50, 0.06); font-weight: 600; }
.bb-td {
  padding: 8px 4px;
  vertical-align: top;
}
.bb-td--pos { font-weight: 800; font-size: 0.9rem; }
.bb-td--pos1 { color: #fbbf24; }
.bb-td--pos2 { color: #c0c0c0; }
.bb-td--pos3 { color: #cd7f32; }
.bb-td--pos-other { color: #6b7280; }
.bb-td--name { max-width: 160px; overflow: hidden; }
.bb-td--name-top { color: #fff; }
.bb-td--name-other { color: #9ca3b8; }
.bb-dog-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-dog-prov {
  font-size: 0.62rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-dog-prov--house {
  color: #4b5563;
  font-style: italic;
}
.bb-td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bb-td--behind { color: #9ca3b8; font-size: 0.75rem; }
.bb-pay-win { color: #10b981; }
.bb-pay-place { color: #60a5fa; }
.bb-pay-show { color: #a78bfa; }
.bb-pay-empty { color: #4b5563; }
.bb-trap-pill {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 4px;
  font-weight: 800;
  font-size: 0.7rem;
}
.bb-exotics-title {
  font-size: 0.7rem;
  font-weight: 800;
  color: #9ca3b8;
  letter-spacing: 1.4px;
  margin-bottom: 6px;
  font-family: Rajdhani, system-ui, sans-serif;
}
.bb-exotics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
@media (max-width: 520px) {
  .bb-exotics-grid { grid-template-columns: 1fr; }
}
.bb-exotic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  gap: 8px;
}
.bb-exotic-label {
  font-weight: 800;
  font-size: 0.74rem;
  color: #e5e7eb;
  letter-spacing: 0.5px;
  font-family: Rajdhani, system-ui, sans-serif;
}
.bb-exotic-pay {
  font-weight: 800;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.bb-pool-summary {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: 0.75rem;
  color: #6b7280;
}
.bb-your-bets {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.bb-your-bets-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e5e7eb;
  margin-bottom: 6px;
  font-family: Rajdhani, system-ui, sans-serif;
}
.bb-bet-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  padding: 3px 0;
}
.bb-bet-line--win { color: #10b981; }
.bb-bet-line--loss { color: #ef4444; }
.bb-bet-net {
  text-align: right;
  font-weight: 800;
  font-size: 0.85rem;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 4px;
  font-family: Rajdhani, system-ui, sans-serif;
  letter-spacing: 0.04em;
}
.bb-bet-net--pos { color: #10b981; }
.bb-bet-net--neg { color: #ef4444; }
.bb-auto-hint {
  text-align: center;
  margin-top: 6px;
  font-size: 0.6rem;
  color: #4b5563;
  letter-spacing: 1px;
}
.sidebar-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.sidebar-drawer-close {
  display: none;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s, color 0.15s;
  align-items: center;
  justify-content: center;
}
.sidebar-drawer-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
@media (max-width: 900px) {
  .sidebar-drawer-close {
    display: inline-flex;
  }
}

/* Jackpot moment — Wave 3 celebrate shell + gold takeover card */
.jackpot-moment-overlay.modal-scrim {
  z-index: 10001;
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.25), rgba(0, 0, 0, 0.88) 70%);
  animation: jackpotFadeIn 0.3s ease-out;
}
.jackpot-moment-card.modal-card,
.jackpot-moment-card {
  text-align: center;
  padding: 36px 28px;
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #ec4899 100%);
  color: #0b0b0e;
  border-radius: 20px;
  border: none;
  box-shadow: 0 30px 80px rgba(251, 191, 36, 0.45), 0 0 120px rgba(251, 191, 36, 0.3);
  animation: jackpotPunch 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: min(90vw, 420px);
}
.jackpot-trophy-mark {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin: 0 auto 8px;
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(11, 11, 14, 0.35), 0 0 10px rgba(45, 212, 191, 0.4);
}
.jackpot-moment-card .modal-title,
.jackpot-moment-title {
  color: #0b0b0e !important;
  font-size: clamp(2.2rem, 6vw, 3.5rem) !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  margin: 8px 0 12px;
}
.jackpot-moment-mult {
  font-size: 1.15rem;
  font-weight: 800;
  margin-top: 10px;
  letter-spacing: 2px;
  font-family: Rajdhani, system-ui, sans-serif;
}
.jackpot-moment-amount {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.jackpot-moment-actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.jackpot-moment-card .btn-cta-primary,
.jackpot-moment-card .btn-cta-gold {
  color: #0b0b0e;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}
.jackpot-replay-btn,
.jackpot-share-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
  min-height: var(--tap-min);
}
.jackpot-replay-btn {
  background: #0b0b0e;
  color: #fbbf24;
}
.jackpot-share-btn {
  background: rgba(11, 11, 14, 0.35);
  color: #0b0b0e;
}

/* Big / Huge win moments (below jackpot tier) */
.win-moment-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: var(--scrim);
  cursor: pointer;
  animation: fadeIn 0.28s ease-out;
}
.win-moment-overlay--huge {
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.18), rgba(0, 0, 0, 0.88) 72%);
}
.win-moment-card {
  width: min(92vw, 380px);
  cursor: default;
}
.win-moment-amount {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: clamp(2rem, 7vw, 3.2rem);
  font-weight: 900;
  color: #10b981;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 8px 0 4px;
}
.win-moment-mult {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
}

/* Wave 5 — Display typography (Rajdhani) */
.sidebar-title,
.ticker-label,
.bcast-pools-total .val,
#race-phase,
.race-info-value,
.jackpot-text,
.header-balance,
.tab-txt,
.gates-pill-val,
.modal-title,
.settings-card h2,
.tickets-card h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.header-title {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

/* Floating payout popup (celebrations.js) */
@keyframes payoutFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  15% { opacity: 1; transform: translateY(-10px) scale(1.1); }
  30% { transform: translateY(-20px) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.8); }
}
.payout-popup {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 20px rgba(251, 191, 36, 0.4);
  animation: payoutFloat 2s ease-out forwards;
}
.payout-popup.is-centered {
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
}
.payout-amount { font-variant-numeric: tabular-nums; }

/* Shop purchase success */
.shop-purchase-scrim {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9600;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: var(--scrim);
  cursor: pointer;
  animation: fadeIn 0.28s ease-out;
}
.shop-purchase-card {
  width: min(92vw, 360px);
  text-align: center;
  cursor: default;
}
.shop-purchase-icon { font-size: 2.5rem; margin-bottom: 6px; }
.shop-purchase-grant {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: #10b981;
  margin: 8px 0;
}

/* Bulletin fairness footer */
.bb-fairness {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 6px;
  font-size: 0.72rem;
  color: #9ca3b8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.bb-fairness-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bb-fairness-label strong { color: #10b981; font-weight: 700; }
.bb-fairness-seed {
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 6px;
  border-radius: 3px;
  color: #fbbf24;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Login page shares app.css CTA tokens when linked */
.login-cinematic .login-card {
  border: 1px solid rgba(45, 212, 191, 0.35);
  box-shadow: var(--glow-teal), 0 24px 64px rgba(0, 0, 0, 0.65);
  background: linear-gradient(180deg, #1a2235 0%, #0f172a 100%);
}
.login-cinematic .login-title {
  font-family: Rajdhani, system-ui, sans-serif;
  letter-spacing: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
  .tickets-card,
  .settings-card,
  .modal-panel-card,
  .bulletin-board,
  .jackpot-moment-card,
  .win-moment-overlay,
  .race-book-sidebar,
  .bet-dog-btn:hover,
  .payout-popup,
  .gates-pill .race-info-value,
  .gates-pill-val {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* ─── Cinematic batch: empty states, history, kennel, bb helpers ─ */
.btn-cta-primary.btn-sm {
  min-height: 36px;
  padding: 8px 16px;
  font-size: 0.82rem;
  box-shadow: 0 3px 0 #0d9488, var(--glow-teal);
}
.btn-cta-primary.btn-sm:active {
  box-shadow: 0 1px 0 #0d9488, var(--glow-teal);
}

.history-empty {
  padding: 48px 28px;
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.04) 0%, rgba(0, 0, 0, 0.15) 100%);
  border: 1px solid rgba(45, 212, 191, 0.12);
  border-radius: var(--radius-md);
  margin: 8px 0;
}
.history-empty .empty-icon {
  font-size: 3.2rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
.history-empty .empty-title {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.history-empty .empty-cta { margin-top: 14px; }

.betting-empty-state { margin-top: 8px; }

.history-stats-bar {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06) 0%, rgba(45, 212, 191, 0.04) 100%);
  border-color: rgba(251, 191, 36, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.history-stat-val {
  font-family: Rajdhani, system-ui, sans-serif;
  letter-spacing: 0.04em;
}
.history-filter-bar input,
.history-filter-bar select {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.history-filter-bar input:focus,
.history-filter-bar select:focus {
  outline: none;
  border-color: rgba(45, 212, 191, 0.45);
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.12);
}

.history-item {
  border-radius: var(--radius-md);
  border-color: rgba(255, 255, 255, 0.08);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.history-item:hover {
  border-color: rgba(45, 212, 191, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.history-winner {
  font-family: Rajdhani, system-ui, sans-serif;
  letter-spacing: 0.04em;
}

.hsub-btn.active {
  border-color: rgba(45, 212, 191, 0.5);
  background: rgba(45, 212, 191, 0.1);
  color: #2dd4bf;
  box-shadow: var(--glow-teal);
}

.kennel-daily-section {
  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.28);
}
.daily-label {
  font-family: Rajdhani, system-ui, sans-serif;
  letter-spacing: 0.06em;
}

.facility-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.12) 100%);
}
.facility-card:hover {
  border-color: rgba(45, 212, 191, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.facility-card.maxed {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.12);
}
.facility-name {
  font-family: Rajdhani, system-ui, sans-serif;
  letter-spacing: 0.04em;
}

.official-result-title {
  font-family: Rajdhani, system-ui, sans-serif;
}
.betting-race-result .official-result-play,
.history-official-result .official-result-play {
  margin: 10px 12px 12px;
}

.bb-exotics-block { margin-top: 14px; }
.bb-trap-pill--round {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  font-size: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.bb-combo-sep,
.bb-combo-dash {
  color: #6b7280;
  margin: 0 4px;
  font-weight: 600;
}
.bb-exotic-combo {
  display: flex;
  align-items: center;
  gap: 2px;
}
.bb-exotic-row--tri { border-color: rgba(45, 212, 191, 0.25); }
.bb-exotic-row--super { border-color: rgba(167, 139, 250, 0.25); }
.bb-exotic-pay--tri { color: #2dd4bf; }
.bb-pool-val { font-weight: 800; }
.bb-pool-val--gold { color: #fbbf24; }
.bb-pool-val--green { color: #10b981; }
.bb-pool-val--blue { color: #60a5fa; }

/* History race cards — cinematic polish */
.history-race-detail {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.12) 100%);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.history-race-detail:hover {
  border-color: rgba(45, 212, 191, 0.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
.history-race-title {
  font-family: Rajdhani, system-ui, sans-serif;
  letter-spacing: 0.04em;
}
.history-payout {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.04) 0%, rgba(45, 212, 191, 0.03) 100%);
  border-color: rgba(251, 191, 36, 0.12);
}

/* ─── Sidebar sections + hot dogs ─────────────────────────────── */
.sidebar-section {
  margin-top: 16px;
}
.sidebar-section--lg {
  margin-top: 18px;
}
.sidebar-loading,
.sidebar-empty {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.sidebar-loading--sm,
.sidebar-empty {
  padding: 12px;
  font-size: 0.8rem;
}
.hot-dogs-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.hot-dog-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.hot-dog-chip:hover {
  border-color: rgba(45, 212, 191, 0.35);
  background: rgba(45, 212, 191, 0.06);
  transform: translateY(-1px);
}
.hot-trap {
  font-family: Rajdhani, system-ui, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  color: var(--accent-gold);
}
.hot-odds {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* ─── Financials tab — cinematic + responsive ───────────────────── */
.history-financials {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.history-section-title {
  font-family: Rajdhani, system-ui, sans-serif;
  letter-spacing: 0.1em;
}
.history-cost-grid--split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.hcost-row {
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.hcost-total {
  grid-column: 1 / -1;
}
.acct-player-card,
.acct-rollup-item {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.1) 100%);
}
.acct-player-val,
.acct-rollup-val {
  font-family: Rajdhani, system-ui, sans-serif;
  letter-spacing: 0.03em;
}
.acct-race-table-wrap {
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.12);
}
.acct-race-table {
  min-width: 540px;
}
.acct-race-table th:first-child,
.acct-race-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-card);
}
.acct-race-table thead th:first-child {
  background: rgba(0, 0, 0, 0.35);
}

/* ─── History / financials responsive layouts ───────────────────── */
@media (max-width: 900px) {
  #panel-history {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 720px) {
  .history-sub-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 10px;
  }
  .history-sub-tabs::-webkit-scrollbar { display: none; }
  .hsub-btn {
    flex: 0 0 auto;
    min-width: 84px;
    padding: 8px 10px;
  }

  .history-race-head-main {
    flex: 1 1 100%;
  }
  .history-race-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .history-bet-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 8px;
    padding: 10px 12px;
  }
  .hbet-sel {
    flex: 1 1 100%;
    order: 10;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 2px;
  }
  .hbet-stake { margin-left: 0; }
  .hbet-payout { margin-left: auto; }
  .hbet-result-toggle { margin-left: 0; }

  .history-dog-row {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .hdog-name { flex: 1 1 100%; }
  .hdog-earn { margin-left: auto; }

  .acct-player-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .acct-rollup-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .history-stats-bar,
  .history-stats-bar--fin {
    grid-template-columns: repeat(2, 1fr);
  }
  .history-stat-sparkline {
    grid-column: 1 / -1;
  }

  .history-payout {
    flex-direction: column;
    gap: 8px;
  }
  .history-payout > span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .history-cost-grid--split {
    grid-template-columns: 1fr;
  }

  .history-tx-row {
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 8px 10px;
  }
  .htx-desc {
    flex: 1 1 100%;
    white-space: normal;
    line-height: 1.35;
  }
  .htx-amount {
    margin-left: auto;
  }

  .acct-player-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .acct-rollup-grid {
    grid-template-columns: 1fr;
  }

  .ledger-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .ledger-stat { min-width: 0; }
  .ledger-row {
    flex-wrap: wrap;
    gap: 4px;
  }
  .ledger-desc {
    flex: 1 1 100%;
    white-space: normal;
  }
  .ledger-time { margin-left: auto; }

  .maintenance-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .hot-dogs-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .bb-table {
    min-width: 0;
    font-size: 0.76rem;
  }
  .history-official-result .bb-table-wrap,
  .hbet-official-result .bb-table-wrap,
  .betting-race-result .bb-table-wrap {
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 400px) {
  .history-sub-tabs .hsub-btn {
    min-width: 72px;
    font-size: 0.68rem;
  }
  .acct-player-grid {
    grid-template-columns: 1fr;
  }
  .history-stats-bar {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── Dog hero portraits (Imagine assets + SVG fallback) ─────────── */
.dog-portrait-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dog-portrait-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.08) 0%, rgba(0, 0, 0, 0.35) 100%);
  border: 1px solid rgba(45, 212, 191, 0.2);
}
.dog-portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.4s ease;
}
.dog-portrait-img.is-failed { display: none; }
.dog-portrait-fallback {
  display: none;
  width: 100%;
  aspect-ratio: 1;
}
.dog-portrait-fallback.is-visible { display: block; }
.dog-portrait-svg-fallback { width: 100%; height: auto; display: block; }
.dog-portrait-trap {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  font-family: Rajdhani, system-ui, sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  color: #fff;
  text-align: center;
  line-height: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.dog-portrait-name {
  font-family: Rajdhani, system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dog-portrait--sm .dog-portrait-media { width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; }
.dog-portrait--sm .dog-portrait-name { display: none; }
.dog-portrait--md .dog-portrait-media { aspect-ratio: 4/3; }
.dog-portrait--lg .dog-portrait-media { aspect-ratio: 16/10; max-height: 200px; }
.dog-portrait--hero .dog-portrait-media,
.dog-portrait--cinema .dog-portrait-media {
  aspect-ratio: 16/10;
  max-height: min(42vh, 280px);
}
.dog-portrait-frame--cinematic .dog-portrait-media {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(45, 212, 191, 0.15);
  border-color: rgba(251, 191, 36, 0.35);
}
.dog-portrait-frame--cinematic .dog-portrait-img {
  animation: portraitKenBurns 8s ease-in-out infinite alternate;
}
.dog-portrait-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
  animation: portraitShine 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes portraitKenBurns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-2%, -1%); }
}
@keyframes portraitShine {
  0%, 100% { opacity: 0; transform: translateX(-30%); }
  50% { opacity: 1; transform: translateX(30%); }
}

.market-card-hero { margin-bottom: 8px; }
.dog-detail-hero {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.dog-detail-hero .dog-portrait--lg { width: min(100%, 320px); }
.photo-finish-hero,
.win-moment-portrait {
  margin: 0 auto 10px;
  width: min(100%, 300px);
}
.photo-finish-card { max-width: min(92vw, 400px); }
.dh-card-portrait { margin-bottom: 10px; }
.dh-card-portrait .dog-portrait-media { max-height: 140px; }

/* Fullscreen cinema cutaway — Ken Burns hero moment */
.dog-cinema-cutaway {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.88) 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.dog-cinema-cutaway.is-active { opacity: 1; }
.dog-cinema-cutaway-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
.dog-cinema-cutaway-inner {
  position: relative;
  text-align: center;
  max-width: min(92vw, 380px);
  animation: cutawayRise 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.dog-cinema-cutaway-eyebrow {
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #fbbf24;
  margin-bottom: 10px;
  text-shadow: 0 2px 12px rgba(251, 191, 36, 0.4);
}
.dog-cinema-cutaway-sub {
  margin-top: 10px;
  font-family: Rajdhani, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.04em;
}
@keyframes cutawayRise {
  from { opacity: 0; transform: translateY(16px) scale(0.92); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dog-portrait-frame--cinematic .dog-portrait-img,
  .dog-portrait-shine,
  .dog-cinema-cutaway-inner {
    animation: none;
  }
}

/* ─── Header/page overflow guard (iPhone portrait + landscape) ─ */
@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) {
  .header-title span { display: none; }
  .header-status #status-text { display: none; }
  .header-sister-link { display: none; }
  .header-tickets,
  .header-achievements,
  .header-missions,
  .header-balance,
  .header-streak-pill {
    flex-shrink: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Wave 5 — global pulse / motion kill-switch
   OS prefers-reduced-motion OR in-app a11y-reduce-motion
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .race-cinema-badge,
  .race-cinema-badge.is-finish,
  body.is-racing .track-cinema-clickable::after,
  .dt-boot-crest,
  .bcard-hot,
  .active-bet-status.pulse,
  .glow,
  .my-pick,
  .dog-mypick,
  .pill-pulse,
  .ex-alert-photofinish,
  .cnm-peak,
  .cnm-roar,
  .mc-pulse,
  .rec-dot,
  .bcast-pools-status::before,
  .announcer-mic-dot,
  .carry-over-live,
  .replay-live-dot,
  .dt-skeleton-bar,
  .tab-panel.active,
  .dt-modal-in.active,
  .dt-modal-in.is-open,
  .tickets-overlay.dt-modal-in.is-open .tickets-card,
  .settings-overlay.dt-modal-in.is-open .settings-card,
  .dog-detail-backdrop.dt-modal-in.active .dog-detail-panel,
  .dd-backdrop.dt-modal-in.active .dd-panel,
  .modal-panel-scrim.dt-modal-in.active .modal-panel-card {
    animation: none !important;
  }
  .tab-panel.active {
    transform: none;
  }
  .tab-btn::after {
    transition: none;
  }
  .tickets-card,
  .settings-card {
    transform: none !important;
    transition: opacity 0.15s ease;
  }
  .dt-skeleton-bar {
    background: rgba(45, 212, 191, 0.12);
  }
}
body.a11y-reduce-motion .race-cinema-badge,
body.a11y-reduce-motion .race-cinema-badge.is-finish,
body.a11y-reduce-motion .dt-boot-crest,
body.a11y-reduce-motion .bcard-hot,
body.a11y-reduce-motion .glow,
body.a11y-reduce-motion .dog-mypick {
  animation: none !important;
}

/* Wave 1 — Replay viewer shares cinema stage language */
body.replay-cinema-active {
  overflow: hidden;
  background: var(--cinema-black, #000);
}
body.replay-cinema-active .replay-shell {
  max-width: none;
  padding: 0;
  height: 100dvh;
  height: 100svh;
}
body.replay-cinema-active .replay-stage-host {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
body.replay-cinema-active .track-perspective-wrap,
body.replay-cinema-active .track-container,
body.replay-cinema-active .replay-track-wrap {
  width: 100vw;
  height: 100dvh;
  height: 100svh;
  max-width: 100vw;
  max-height: 100dvh;
  aspect-ratio: unset;
  min-height: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  margin: 0;
}
body.replay-cinema-active .replay-status,
body.replay-cinema-active .replay-results {
  position: fixed;
  z-index: 20;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(92vw, 480px);
}
body.replay-cinema-active .replay-status {
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  background: rgba(7, 11, 20, 0.85);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(251, 191, 36, 0.25);
  font-family: var(--font-display);
  font-weight: 700;
  color: #fbbf24;
}
body.replay-cinema-active .replay-results {
  bottom: max(56px, calc(env(safe-area-inset-bottom, 16px) + 40px));
}

/* v2.4.22: screen-blended light plates (Grok pure-black VFX art).
   Centering uses the independent `translate` property so GSAP's transform
   writes (scale/rotation) cannot clobber it. */
.dt-vfx-light {
  position: absolute; left: 50%; top: 50%;
  width: 120vmin; height: 120vmin; max-width: 900px; max-height: 900px;
  translate: -50% -50%;
  transform-origin: center center;
  mix-blend-mode: screen; pointer-events: none;
  will-change: transform, opacity; z-index: 60;
}