/* ============================================================
   crashgames.com — v4 design system
   Neo-crypto premium palette. Stake/Shuffle-tier polish.
   Primary audience: 18-34 crypto degens. Default: dark mode.
   ============================================================ */

/* ============================================================
   §1  DESIGN TOKENS — LIGHT MODE BASE
   ============================================================ */
:root {
  /* ── Color: Brand ── */
  --color-primary:          #6366F1;   /* Electric indigo-violet */
  --color-primary-dark:     #4F46E5;   /* Pressed/active state */
  --color-primary-hover:    #818CF8;   /* Hover — lighter in dark ctx */
  --color-primary-muted:    rgba(99, 102, 241, 0.12);
  --color-primary-light:    #EEF2FF;   /* Tint bg for callouts */
  --color-primary-glow:     rgba(99, 102, 241, 0.30);

  /* ── Color: Accent magenta (use SPARINGLY — highlights, RTP %, best-pick) */
  --color-accent:           #EC4899;   /* Hot pink / vivid magenta */
  --color-accent-hover:     #F472B6;
  --color-accent-muted:     rgba(236, 72, 153, 0.12);
  --color-accent-glow:      rgba(236, 72, 153, 0.25);

  /* ── Color: Money-green (99%+ RTP tags, positive signals) */
  --color-success:          #10B981;
  --color-success-hover:    #34D399;
  --color-success-muted:    rgba(16, 185, 129, 0.12);
  --color-success-bg:       rgba(16, 185, 129, 0.10);
  --color-success-glow:     rgba(16, 185, 129, 0.25);

  /* ── Color: Semantic ── */
  --color-danger:           #F43F5E;
  --color-warning:          #F59E0B;
  --color-gold:             #FBBF24;

  /* ── Color: Light-mode surfaces ── */
  --color-bg:               #F8FAFC;   /* Off-white, blue-tinted */
  --color-surface:          #FFFFFF;
  --color-surface-alt:      #F1F5F9;   /* Section alt bg */
  --color-surface-raised:   #FFFFFF;   /* Cards on bg */
  --color-border:           #E2E8F0;
  --color-border-subtle:    #F1F5F9;

  /* ── Color: Light-mode text ── */
  --color-text:             #0F172A;
  --color-text-muted:       #475569;
  --color-text-faint:       #94A3B8;

  /* ── Gradients ── */
  --grad-primary:           linear-gradient(135deg, #6366F1 0%, #EC4899 100%);
  --grad-primary-subtle:    linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(236,72,153,0.08) 100%);
  --grad-hero-dark:         radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,0.18) 0%, transparent 70%),
                            radial-gradient(ellipse 50% 40% at 80% 20%, rgba(236,72,153,0.10) 0%, transparent 60%);
  --grad-success:           linear-gradient(135deg, #10B981 0%, #059669 100%);

  /* ── Typography ── */
  --font-display: 'General Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Type scale ── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  64px;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-section: clamp(64px, 8vw, 120px);

  /* ── Radii ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ── Shadows (blue-tinted, not gray) ── */
  --shadow-sm:   0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:   0 4px 16px rgba(99, 102, 241, 0.08), 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-lg:   0 12px 40px rgba(99, 102, 241, 0.12), 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-glow: 0 0 20px var(--color-primary-glow);

  /* ── Layout ── */
  --container:        1240px;
  --container-narrow: 760px;
  --header-h:         64px;

  /* ── Motion ── */
  --easing:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   150ms;
  --t-base:   200ms;        /* All hover states: 200ms ease-out */
  --t-slow:   350ms;
}

/* ============================================================
   §2  DARK MODE TOKENS (default — most crypto users prefer dark)
   ============================================================ */
[data-theme="dark"] {
  /* ── Surfaces: near-black with blue undertone ── */
  --color-bg:              #0A0E1A;   /* Near-black, blue-tinted */
  --color-surface:         #141B2D;   /* Cards / panels */
  --color-surface-alt:     #1A2236;   /* Alt sections */
  --color-surface-raised:  #1E2740;   /* Raised elements */
  --color-border:          #263354;   /* Border in dark */
  --color-border-subtle:   #1E2740;

  /* ── Text ── */
  --color-text:            #E8EDF5;
  --color-text-muted:      #8899B4;
  --color-text-faint:      #4A5A73;

  /* ── Primary (brighter in dark for contrast) ── */
  --color-primary:         #818CF8;
  --color-primary-dark:    #6366F1;
  --color-primary-hover:   #A5B4FC;
  --color-primary-muted:   rgba(129, 140, 248, 0.15);
  --color-primary-light:   rgba(99, 102, 241, 0.12);
  --color-primary-glow:    rgba(129, 140, 248, 0.35);

  /* ── Accent (magenta, boosted in dark) ── */
  --color-accent:          #F472B6;
  --color-accent-hover:    #FB7EC2;
  --color-accent-muted:    rgba(244, 114, 182, 0.12);
  --color-accent-glow:     rgba(244, 114, 182, 0.28);

  /* ── Success ── */
  --color-success:         #34D399;
  --color-success-hover:   #6EE7B7;
  --color-success-muted:   rgba(52, 211, 153, 0.12);
  --color-success-bg:      rgba(52, 211, 153, 0.10);
  --color-success-glow:    rgba(52, 211, 153, 0.28);

  /* ── Semantic ── */
  --color-danger:          #FB7185;
  --color-warning:         #FBBF24;

  /* ── Gradients (darker versions) ── */
  --grad-primary:          linear-gradient(135deg, #818CF8 0%, #F472B6 100%);
  --grad-primary-subtle:   linear-gradient(135deg, rgba(129,140,248,0.18) 0%, rgba(244,114,182,0.08) 100%);
  --grad-hero-dark:        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,0.22) 0%, transparent 70%),
                           radial-gradient(ellipse 50% 40% at 80% 20%, rgba(236,72,153,0.12) 0%, transparent 60%);

  /* ── Shadows (deeper in dark) ── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(129, 140, 248, 0.06);
  --shadow-lg:   0 12px 48px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(129, 140, 248, 0.08);
  --shadow-glow: 0 0 24px var(--color-primary-glow);
}

/* ============================================================
   §3  RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Default to dark mode — crypto degens live in the dark */
}

/* Ensure new pages get dark by default (JS handles localStorage recall) */
html:not([data-theme]) { color-scheme: dark; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--t-base) ease-out;
}
a:hover { color: var(--color-primary-hover); }

button { font-family: inherit; cursor: pointer; }

/* ── Display headings: General Sans, confident tracking ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);   /* 40px → 64px */
  letter-spacing: -0.03em;
  line-height: 1.1;
}
h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem); /* 28px → 40px */
  letter-spacing: -0.025em;
}
h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
h4 { font-size: var(--text-xl); }

p  { margin: 0 0 var(--space-4); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--color-surface-alt);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}

/* ── Numeric display class: JetBrains Mono + tabular nums ── */
.numeric,
.rtp-value,
.score-value,
.multiplier-value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============================================================
   §4  LAYOUT
   ============================================================ */
.container        { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.container--narrow{ max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-5); }

.section {
  padding: var(--space-section) 0;
}
.section--alt   { background: var(--color-surface-alt); }
.section--dark  { background: var(--color-text); color: #fff; }
.section--tight { padding: var(--space-5) 0; }
.section--hero  { padding: var(--space-8) 0 var(--space-6); }

/* ============================================================
   §5  SITE HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* Subtle bottom border with primary glow in dark mode */
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--t-base) ease-out, border-color var(--t-base) ease-out;
}

[data-theme="dark"] .site-header {
  border-bottom-color: rgba(129, 140, 248, 0.18);
  box-shadow: 0 1px 0 rgba(129, 140, 248, 0.10), 0 4px 20px rgba(0,0,0,0.25);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* ── Logo ── */
.site-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.03em;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: opacity var(--t-base) ease-out;
}
.site-logo:hover { opacity: 0.85; color: var(--color-text); }

/* "100" badge: gradient primary → accent */
.site-logo__mark {
  width: 30px;
  height: 30px;
  background: var(--grad-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  font-family: var(--font-mono);
  /* Inner highlight at top */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 8px rgba(99,102,241,0.40);
  flex-shrink: 0;
}

/* .com highlight rendered via CSS on the b tag inside logo */
.site-logo b { color: var(--color-primary); font-weight: 700; }

/* ── Site nav ── */
.site-nav { display: flex; gap: var(--space-5); align-items: center; }
.site-nav a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 4px 0;
  position: relative;
  transition: color var(--t-base) ease-out;
}
.site-nav a:hover { color: var(--color-text); }
/* Underline hover indicator */
.site-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 2px;
  background: var(--grad-primary);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) ease-out;
}
.site-nav a:hover::after { transform: scaleX(1); }

.site-nav__cta {
  background: var(--grad-primary);
  color: #fff !important;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: 0 2px 12px var(--color-primary-glow);
  transition: transform var(--t-base) ease-out, box-shadow var(--t-base) ease-out, opacity var(--t-base) ease-out;
}
.site-nav__cta:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 20px var(--color-primary-glow);
  opacity: 0.95;
  color: #fff !important;
}
.site-nav__cta::after { display: none !important; }

/* Theme toggle */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  transition: all var(--t-base) ease-out;
}
.theme-toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-muted);
}
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun  { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

/* Mobile nav */
.mobile-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--color-text);
  padding: 4px;
}
.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0;
  background: var(--color-surface);
  z-index: 99;
  padding: var(--space-5);
  overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-lg);
  transition: color var(--t-base) ease-out, padding-left var(--t-base) ease-out;
}
.mobile-nav a:hover { color: var(--color-primary); padding-left: 8px; }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .mobile-toggle { display: inline-flex; }
}

/* ============================================================
   §6  DISCLOSURE BAR
   ============================================================ */
.disclosure-bar {
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
}
.disclosure-bar a { color: var(--color-primary); }

/* ============================================================
   §7  BREADCRUMBS
   ============================================================ */
.breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.breadcrumb a { color: var(--color-text-muted); transition: color var(--t-base) ease-out; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb__sep { margin: 0 var(--space-2); opacity: 0.4; }

/* ============================================================
   §8  HERO SECTIONS
   ============================================================ */
.hero {
  padding: var(--space-8) 0 var(--space-7);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Gradient mesh background — dark mode only, CSS-only, no images */
[data-theme="dark"] .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-hero-dark);
  pointer-events: none;
  z-index: 0;
}

/* Noise texture overlay for depth */
[data-theme="dark"] .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* SVG noise via data URI — lightweight, no images */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.hero > .container { position: relative; z-index: 1; }

.hero h1 {
  margin-bottom: var(--space-4);
}

/* Gradient text for hero H1 — striking but readable */
[data-theme="dark"] .hero h1 {
  background: linear-gradient(135deg, #E8EDF5 30%, var(--color-primary) 70%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 680px;
  margin: 0 auto var(--space-6);
  line-height: 1.65;
}

.hero__tags {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* ============================================================
   §9  TAGS / BADGES
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-primary-muted);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 12px;
  border: 1px solid transparent;
  transition: all var(--t-base) ease-out;
  white-space: nowrap;
}
.tag:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-muted);
}

.tag--success {
  background: var(--color-success-muted);
  color: var(--color-success);
  box-shadow: 0 0 12px var(--color-success-glow);
}
.tag--success:hover {
  border-color: var(--color-success);
  box-shadow: 0 0 16px var(--color-success-glow);
}

.tag--accent {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  box-shadow: 0 0 12px var(--color-accent-glow);
}
.tag--accent:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 16px var(--color-accent-glow);
}

.tag--featured {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 2px 12px var(--color-primary-glow);
}

/* Score tag - used inline on room-row names */
.tag--score {
  background: var(--color-success-muted);
  color: var(--color-success);
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px var(--color-success-glow);
}

/* ============================================================
   §10  BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
  padding: 12px 22px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--t-base) ease-out;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Primary: gradient bg with depth, glow on hover */
.btn--primary {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: #fff;
  /* Inner highlight at top */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 8px var(--color-primary-glow);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: #fff;
  transform: translateY(-1px) scale(1.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 6px 24px var(--color-primary-glow);
}
.btn--primary:active {
  transform: translateY(0) scale(0.99);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 8px var(--color-primary-glow);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-primary-muted);
  color: var(--color-primary-hover);
  box-shadow: 0 0 0 3px var(--color-primary-muted);
}

.btn--ghost {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover {
  background: var(--color-border);
  color: var(--color-text);
  transform: translateY(-1px);
}

/* Accent button — used for top highlights only */
.btn--accent {
  background: linear-gradient(135deg, #DB2777 0%, #EC4899 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 8px var(--color-accent-glow);
}
.btn--accent:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 6px 24px var(--color-accent-glow);
  color: #fff;
}

.btn--sm { padding: 8px 14px; font-size: var(--text-xs); }
.btn--lg { padding: 16px 32px; font-size: var(--text-base); }

/* ============================================================
   §11  CARDS
   ============================================================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);   /* 16px as specified */
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) ease-out, box-shadow var(--t-base) ease-out, border-color var(--t-base) ease-out;
  position: relative;
  overflow: hidden;
}

/* Dark mode: 1px inner highlight at top */
[data-theme="dark"] .card {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--color-primary);
}
[data-theme="dark"] .card:hover {
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05);
}

.card--flat { box-shadow: none; padding: var(--space-4); }
.card--flat:hover { transform: none; border-color: var(--color-border); box-shadow: none; }

.card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: 0;
}

/* ============================================================
   §12  GAME GRID & GAME CARDS
   ============================================================ */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);  /* upgraded from 16px to 24px */
}

.game-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  color: var(--color-text);
  transition: transform var(--t-base) ease-out, box-shadow var(--t-base) ease-out, border-color var(--t-base) ease-out;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .game-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
  color: var(--color-text);
}

[data-theme="dark"] .game-card:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary);
}

.game-card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-card__icon svg { width: 100%; height: 100%; }

.game-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.game-card__rtp {
  display: inline-block;
  background: var(--color-success-muted);
  color: var(--color-success);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  padding: 3px 10px;
  margin-bottom: var(--space-2);
  box-shadow: 0 0 8px var(--color-success-glow);
}

.game-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ============================================================
   §13  TABLES
   ============================================================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--text-sm);
  background: var(--color-surface);
}

.table th,
.table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.table th {
  background: var(--color-surface-alt);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* Monospace numbers in RTP/score/percentage columns */
.table td:last-child,
.table td.numeric,
.table td[data-col="rtp"],
.table td[data-col="score"] {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

/* Striped rows */
.table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--color-surface-alt) 50%, transparent);
}

.table tr:last-child td { border-bottom: 0; }

/* Hover row highlight */
.table tbody tr {
  transition: background var(--t-fast) ease-out;
}
.table tbody tr:hover td {
  background: var(--color-primary-muted) !important;
}

/* ============================================================
   §14  ROOM ROWS
   ============================================================ */
.room-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;  /* bigger logo slot */
  gap: var(--space-5);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  /* Thin colored left border via --brand-color custom property */
  border-left: 3px solid var(--brand-color, var(--color-primary));
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  transition: transform var(--t-base) ease-out, box-shadow var(--t-base) ease-out, border-color var(--t-base) ease-out;
  position: relative;
}

[data-theme="dark"] .room-row {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.room-row:hover {
  border-color: var(--brand-color, var(--color-primary));
  border-left-color: var(--brand-color, var(--color-primary));
  box-shadow: var(--shadow-md);
  transform: translateX(2px);
}

/* Logo box: 80×80 with white bg + inner shadow in dark mode for brand contrast */
.room-row__logo {
  width: 80px;
  height: 80px;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: -0.02em;
  color: var(--color-primary);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  transition: box-shadow var(--t-base) ease-out;
}
.room-row__logo img,
.room-row__logo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

[data-theme="dark"] .room-row__logo {
  background: #FFFFFF;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.08);
}

.room-row__body { min-width: 0; }
.room-row__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Inline score spans inside room-row__name (currently inline style) */
.room-row__name > span {
  background: var(--color-success-muted) !important;
  color: var(--color-success) !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-full) !important;
  font-size: 12px !important;
  font-family: var(--font-mono) !important;
  font-feature-settings: "tnum" 1 !important;
  font-weight: 700 !important;
  margin-left: 0 !important;
  box-shadow: 0 0 8px var(--color-success-glow);
}

.room-row__tag {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 4px;
}

.room-row__rtp {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: var(--text-xs);
  color: var(--color-success);
  font-weight: 600;
  margin-top: 2px;
}

.room-row__rank {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-weight: 800;
  font-size: var(--text-3xl);
  color: var(--color-primary);
  width: 48px;
  text-align: center;
  opacity: 0.35;
}

/* ============================================================
   §15  PROSE (long-form guides & reviews)
   ============================================================ */
.prose {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-text);
}
.prose > * + * { margin-top: var(--space-4); }
.prose h2 {
  font-size: var(--text-3xl);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
.prose h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose blockquote {
  border-left: 3px solid var(--color-primary);
  padding: var(--space-2) var(--space-5);
  margin: var(--space-5) 0;
  color: var(--color-text-muted);
  font-style: italic;
  background: var(--color-primary-muted);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t-base) ease-out;
}
.prose a:hover { color: var(--color-primary-hover); }
.prose strong { color: var(--color-text); font-weight: 700; }

/* ============================================================
   §16  TL;DR BOX (elevated treatment)
   ============================================================ */
.tldr {
  position: relative;
  background: var(--grad-primary-subtle);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-6) var(--space-5) var(--space-5);
  margin: 0 0 var(--space-6);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  /* Subtle inner highlight */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* "TL;DR" label as floating tag at top-left edge */
.tldr::before {
  content: 'TL;DR';
  position: absolute;
  top: -12px;
  left: var(--space-4);
  background: var(--grad-primary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px var(--color-primary-glow);
}

/* Hide the inline <strong>TL;DR</strong> since we use ::before now */
.tldr > strong:first-child,
.tldr strong[class=""] {
  display: none;
}

.tldr p:last-child { margin-bottom: 0; }

/* ============================================================
   §17  FAQ ACCORDION
   ============================================================ */
.faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  transition: border-color var(--t-base) ease-out, box-shadow var(--t-base) ease-out;
}
.faq details[open] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-muted);
}
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--t-base) ease-out;
}
.faq summary:hover { color: var(--color-primary); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--color-primary);
  font-size: var(--text-xl);
  font-weight: 400;
  transition: transform var(--t-base) ease-out;
}
.faq details[open] summary::after { content: "−"; transform: rotate(0deg); }
.faq summary + * { margin-top: var(--space-3); }

/* ============================================================
   §18  SIDEBAR LAYOUT
   ============================================================ */
.layout-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-7);
}
@media (max-width: 900px) {
  .layout-sidebar { grid-template-columns: 1fr; }
}
.sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  align-self: start;
}
.sidebar__title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
  font-weight: 700;
}

/* CTA box (the "Try Stake" style box — elevated in dark mode) */
[data-theme="dark"] [style*="background:var(--color-primary-light)"],
[data-theme="dark"] [style*="background: var(--color-primary-light)"] {
  background: var(--grad-primary-subtle) !important;
  border: 1px solid rgba(129, 140, 248, 0.25) !important;
  box-shadow: 0 0 40px rgba(99, 102, 241, 0.12) !important;
}

/* ============================================================
   §19  GAME DEMO WIDGET CONTAINER
   NOTE: .game-shell / .game-stage / .game-controls are owned by
   games.css — do NOT redefine them here or layout breaks.
   ============================================================ */

/* ── Keyframe: pulsing green dot for LIVE badge ── */
@keyframes live-pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ── Keyframe: general pulse (for other pulse use cases) ── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(0.97); }
}

/* ── Keyframe: glow pulse for featured elements ── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--color-primary-glow); }
  50%       { box-shadow: 0 0 24px var(--color-primary-glow), 0 0 48px var(--color-accent-glow); }
}

/* ============================================================
   §20  FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) 0 var(--space-6);
  margin-top: var(--space-section);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
[data-theme="dark"] .site-footer {
  background: color-mix(in srgb, var(--color-surface) 70%, var(--color-bg));
  border-top-color: rgba(129, 140, 248, 0.12);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-7);
  margin-bottom: var(--space-6);
}
.site-footer h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: var(--space-2); }
.site-footer ul a {
  color: var(--color-text-muted);
  transition: color var(--t-base) ease-out;
}
.site-footer ul a:hover { color: var(--color-primary); }
.site-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
@media (max-width: 700px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   §21  UTILITIES
   ============================================================ */
.stack    > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.row      { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

.text-muted   { color: var(--color-text-muted); }
.text-faint   { color: var(--color-text-faint); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-accent  { color: var(--color-accent); }

.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.text-center { text-align: center; }
.text-mono   { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--space-3); }
.mt-5 { margin-top: var(--space-5); }
.mb-0 { margin-bottom: 0; }

.hide-mobile { }
@media (max-width: 700px) { .hide-mobile { display: none; } }
.show-mobile { display: none; }
@media (max-width: 700px) { .show-mobile { display: block; } }

/* ── Gradient text utility ── */
.gradient-text {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Section label (UPPERCASE eyebrow text) ── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  display: block;
}

/* ============================================================
   §22  TRANSITIONS — ensure ALL interactive elements use 200ms ease-out
   ============================================================ */
a,
button,
.btn,
.card,
.game-card,
.room-row,
.tag,
.theme-toggle,
.faq details,
.faq summary,
.table tbody tr,
.site-nav a,
.mobile-nav a,
.site-footer ul a {
  transition-duration: var(--t-base);
  transition-timing-function: ease-out;
}

/* ============================================================
   §23  SECTION HEADING STYLES (inline style overrides → CSS classes)
   ============================================================ */

/* These classes cover the most common inline style patterns found in the HTML */
.section-heading {
  text-align: center;
  margin-bottom: var(--space-2);
}
.section-subheading {
  text-align: center;
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
}
.category-heading {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

/* ============================================================
   §24  RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 1024px) {
  .layout-sidebar {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (max-width: 900px) {
  .layout-sidebar       { grid-template-columns: 1fr; }
  .room-row             { grid-template-columns: 72px 1fr auto; gap: var(--space-3); }
  .room-row__logo       { width: 72px; height: 72px; }
  .site-footer__grid    { grid-template-columns: 1fr 1fr; }
  .game-grid            { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
}

@media (max-width: 640px) {
  .room-row             { grid-template-columns: 1fr; gap: var(--space-3); }
  .room-row__logo       { display: none; }
  .room-row__rank       { display: none; }
  .hero                 { padding: var(--space-7) 0 var(--space-6); }
}

@media (max-width: 700px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   §25  INLINE STYLE COVERAGE (patterns found in audit)
   These classes should replace the most common inline patterns.
   The existing inline styles still work (use CSS vars), but
   these classes provide cleaner alternatives.
   ============================================================ */

/* CTA box used in room pages and guides (currently inline style) */
.cta-box {
  background: var(--grad-primary-subtle);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  margin-top: var(--space-6);
  text-align: center;
  border: 1px solid rgba(99, 102, 241, 0.18);
}
[data-theme="dark"] .cta-box {
  background: var(--grad-primary-subtle);
  border-color: rgba(129, 140, 248, 0.22);
  box-shadow: 0 0 40px rgba(99, 102, 241, 0.10);
}
.cta-box h3 { margin-bottom: var(--space-2); }
.cta-box p  { margin-bottom: var(--space-4); color: var(--color-text-muted); }

/* Inline score badge — used in sidebar card heads */
.score-badge {
  background: var(--color-success-muted);
  color: var(--color-success);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  box-shadow: 0 0 8px var(--color-success-glow);
}

/* Card link pattern (card used as anchor — color:inherit pattern) */
a.card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.card:hover { color: inherit; }

/* Category section heading + game grid inline style pattern */
.game-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: var(--space-5);
}

/* ============================================================
   §26  SIDEBAR RTP TABLE (overrides inline font-size on table)
   ============================================================ */
.sidebar .table {
  font-size: 13px;
  margin: 0;
}
.sidebar .table td {
  padding: 8px 12px;
}
/* RTP values column — monospace */
.sidebar .table td:last-child {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  color: var(--color-success);
  font-weight: 600;
}

/* ============================================================
   §27  SECTION TITLE OVERRIDES (index.html inline style patterns)
   h2 + p.text-muted with inline margin patterns → handled by
   .section-heading and .section-subheading classes above,
   but also fix the raw inline margin-bottom on h3 in lobby
   ============================================================ */
.section h2[style],
.section h3[style] {
  /* Allow inline margin overrides from content pipeline but
     ensure font family is always display */
  font-family: var(--font-display) !important;
}

/* ============================================================
   §28  DARK MODE REFINEMENTS
   ============================================================ */

/* Ensure score spans inside room-row__name get the styled treatment */
[data-theme="dark"] .room-row__name > span[style*="background:var(--color-success-bg)"] {
  background: var(--color-success-muted) !important;
  box-shadow: 0 0 10px var(--color-success-glow) !important;
}

/* Header inline <b> for .com text */
.site-logo span b {
  color: var(--color-primary);
  font-weight: 700;
}

/* Force dark mode on the tldr strong that hides the label */
.tldr strong:first-child { display: none; }

/* ===========================================================
   BEST CRYPTO CASINOS — comparison table + detailed room cards
   =========================================================== */

/* utility */
.num { font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
.section-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin: 0 0 var(--space-5); }

/* ----------- comparison table ----------- */
.compare-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
@media (max-width: 1100px) { .compare-wrap { overflow-x: auto; } }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--text-sm);
  min-width: 980px;
}
.compare-table thead th {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}
.compare-table thead th:first-child { padding-left: 20px; }
.compare-table thead th:last-child { padding-right: 20px; text-align: right; }

.compare-table tbody td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody td:first-child { padding-left: 20px; }
.compare-table tbody td:last-child { padding-right: 20px; text-align: right; }

.compare-row { transition: background 200ms ease; }
.compare-row:hover { background: var(--color-surface-alt); }

.rank-cell {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  width: 56px;
}

/* brand cell — logo + name stack */
.brand-cell { min-width: 230px; }
.brand-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.brand-logo-wrap {
  flex: 0 0 96px;
  width: 96px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0F172A;
  border-radius: var(--radius-md);
  padding: 6px 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
[data-theme="light"] .brand-logo-wrap,
:root:not([data-theme="dark"]) .brand-logo-wrap { background: #0B1220; }
.brand-logo-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-meta strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.1;
}
.brand-tag {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.brand-link:hover .brand-meta strong { color: var(--color-primary-hover); }

/* score pill */
.score-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-feature-settings: "tnum" 1;
}
.score-elite  { background: var(--color-success-bg); color: var(--color-success); box-shadow: 0 0 0 1px var(--color-success-muted), 0 0 16px var(--color-success-glow); }
.score-strong { background: var(--color-primary-muted); color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary-muted); }
.score-good   { background: rgba(148, 163, 184, 0.14); color: var(--color-text-muted); }

/* RTP cell color coding */
.rtp-cell {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  position: relative;
}
.rtp-cell.rtp-high { color: var(--color-success); }
.rtp-cell.rtp-mid  { color: var(--color-primary); }
.rtp-cell.rtp-low  { color: var(--color-text-muted); }
.rtp-cell.rtp-high::before,
.rtp-cell.rtp-mid::before,
.rtp-cell.rtp-low::before {
  content: "";
  position: absolute;
  inset: 6px 4px;
  border-radius: var(--radius-sm);
  z-index: -1;
}
.rtp-cell.rtp-high::before { background: var(--color-success-muted); }
.rtp-cell.rtp-mid::before  { background: var(--color-primary-muted); }

/* promo code chip */
.promo-code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

/* legend */
.compare-legend {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.legend-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.legend-chip.rtp-high { color: var(--color-success); background: var(--color-success-muted); }
.legend-chip.rtp-mid  { color: var(--color-primary); background: var(--color-primary-muted); }
.legend-chip.rtp-low  { color: var(--color-text-muted); background: rgba(148, 163, 184, 0.14); }
.legend-note { margin-left: 4px; }

/* ----------- detailed room rows ----------- */
.room-row-stack { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); }

.room-row--detailed {
  display: grid;
  grid-template-columns: 56px 120px 1fr 200px;
  gap: 20px;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.room-row--detailed:hover {
  border-color: var(--color-primary-muted);
  box-shadow: 0 6px 32px rgba(0,0,0,0.06), 0 0 0 1px var(--color-primary-muted);
}
.room-row--detailed .room-row__rank {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--color-text-muted);
  padding-top: 4px;
}
.room-row__logo--img {
  width: 120px !important;
  height: 56px !important;
  background: #0B1220 !important;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.room-row__logo--img img { width: 100%; height: 100%; object-fit: contain; padding: 0 !important; }

.room-row__body { min-width: 0; }
.room-row--detailed .room-row__name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
}
.room-row--detailed .room-row__name a { color: var(--color-text); text-decoration: none; font-size: var(--text-xl); font-weight: 700; font-family: var(--font-display); }
.room-row--detailed .room-row__name a:hover { color: var(--color-primary); }
.room-row--detailed .room-row__tag {
  color: var(--color-text-muted);
  margin: 0 0 12px;
  font-size: var(--text-sm);
}
.room-row__highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
.room-row__highlights li {
  font-size: 13px;
  color: var(--color-text);
  padding-left: 18px;
  position: relative;
  line-height: 1.4;
}
.room-row__highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--color-success);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-success-glow);
}
.room-row__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
  font-size: 12px;
  color: var(--color-text-muted);
}
.room-row__facts strong {
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  margin-right: 4px;
}

.room-row__cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: center;
}
.room-row__cta .btn { width: 100%; }
.room-row__code {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0;
}
.room-row__code code {
  font-family: var(--font-mono);
  font-weight: 700;
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.room-row__readmore {
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}
.room-row__readmore:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 880px) {
  .room-row--detailed {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto auto;
  }
  .room-row__logo--img { grid-column: 2 / 3; grid-row: 1; }
  .room-row__body { grid-column: 1 / -1; grid-row: 2; }
  .room-row__cta { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: center; justify-content: space-between; }
  .room-row__cta .btn { width: auto; flex: 1; }
  .room-row__highlights { grid-template-columns: 1fr; }
}

/* ============================================================
   §20  HERO IMAGE VARIANTS (editorial photography overlays)
   ============================================================ */
.hero--imaged {
  padding-top: var(--space-9);
  padding-bottom: var(--space-8);
  min-height: 380px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
.hero--imaged > .container { width: 100%; }

/* Dark legibility scrim on top of background image — OVERRIDE the [data-theme="dark"] .hero::before mesh */
.hero.hero--imaged::before,
[data-theme="dark"] .hero.hero--imaged::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(10,14,26,0.78) 0%, rgba(10,14,26,0.55) 50%, rgba(10,14,26,0.30) 80%, rgba(10,14,26,0.15) 100%),
    linear-gradient(180deg, rgba(10,14,26,0.40) 0%, rgba(10,14,26,0.20) 30%, rgba(10,14,26,0.55) 75%, rgba(10,14,26,0.95) 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.hero.hero--imaged::after,
[data-theme="dark"] .hero.hero--imaged::after {
  background-image: none !important;
}

/* Hero H1 gets a soft drop-shadow on imaged backgrounds for extra safety */
.hero--imaged h1 {
  filter: drop-shadow(0 2px 24px rgba(10,14,26,0.6));
}
.hero--imaged::after {
  background-image: none; /* drop SVG noise for image heroes — image already has texture */
}

/* Variant images */
.hero--lobby { background-image: url('/assets/img/hero-lobby.jpg'); min-height: 460px; }
.hero--rooms { background-image: url('/assets/img/hero-rooms.jpg'); }
.hero--best  { background-image: url('/assets/img/hero-best-casinos.jpg'); }
.hero--guides{ background-image: url('/assets/img/hero-section-accent.jpg'); }

/* Force white text + gradient H1 on imaged heroes regardless of theme */
.hero--imaged h1 {
  background: linear-gradient(135deg, #ffffff 0%, #f0e6ff 50%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.hero--imaged .hero__sub { color: rgba(255,255,255,0.85); }
.hero--imaged .tag { backdrop-filter: blur(8px); background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.15); }
.hero--imaged .tag--success { background: rgba(16,185,129,0.18); color: #34d399; border-color: rgba(16,185,129,0.35); }

/* Per-room hero strip — slimmer, image right, copy left */
.room-hero-strip {
  position: relative;
  min-height: 280px;
  border-radius: var(--radius-xl);
  margin: 0 0 var(--space-6);
  overflow: hidden;
  background: var(--color-surface);
  background-image: url('/assets/img/hero-rooms.jpg');
  background-size: cover;
  background-position: center 30%;
  border: 1px solid var(--color-border);
}
.room-hero-strip::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,14,26,0.92) 0%, rgba(10,14,26,0.75) 35%, rgba(10,14,26,0.35) 70%, rgba(10,14,26,0.05) 100%);
}
.room-hero-strip__inner {
  position: relative; z-index: 1;
  height: 100%;
  padding: var(--space-5) var(--space-6);
  display: flex; flex-direction: column; justify-content: center;
  max-width: 60%;
}
.room-hero-strip h1 {
  color: #fff;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
  margin: 0 0 12px;
  background: none;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.room-hero-strip .room-hero-strip__meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
}
.room-hero-strip .room-hero-strip__meta .tag {
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
@media (max-width: 720px) {
  .room-hero-strip { height: auto; min-height: 200px; }
  .room-hero-strip__inner { max-width: 100%; }
  .room-hero-strip::before {
    background: linear-gradient(180deg, rgba(10,14,26,0.85) 0%, rgba(10,14,26,0.75) 100%);
  }
}

/* =========================================================
   §22 v3.1 — Bankroll surfaces, casino-floor lobby, scroll reveals
   ========================================================= */

/* --- Header bankroll pill --- */
.bankroll-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 10px 6px 12px; border-radius:999px;
  background:linear-gradient(135deg, rgba(99,102,241,0.18), rgba(236,72,153,0.18));
  border:1px solid rgba(236,72,153,0.45);
  color:var(--color-ink); text-decoration:none;
  font-family:'Inter', sans-serif; font-weight:600; font-size:13px;
  line-height:1; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow:0 0 0 0 rgba(236,72,153,0.0);
}
.bankroll-pill:hover{
  transform:translateY(-1px);
  border-color:rgba(236,72,153,0.85);
  box-shadow:0 6px 22px -8px rgba(236,72,153,0.55);
}
.bankroll-pill__label{ text-transform:uppercase; letter-spacing:.08em; font-size:10px; opacity:.7; }
.bankroll-pill__amount{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:14px; color:var(--color-success, #10B981); }
[data-theme="dark"] .bankroll-pill__amount{ color:#34D399; }
.bankroll-pill__cta{
  background:linear-gradient(135deg, #6366F1, #EC4899);
  color:#fff; padding:5px 9px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
}
@media (max-width:720px){
  .bankroll-pill__label, .bankroll-pill__cta{ display:none; }
  .bankroll-pill{ padding:6px 12px; }
}

.icon-btn-sm{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  background:transparent; border:1px solid var(--color-line);
  color:var(--color-ink-dim); cursor:pointer; transition:all .15s ease;
}
.icon-btn-sm:hover{ color:var(--color-ink); border-color:var(--color-primary); }
@media (max-width:720px){ .icon-btn-sm{ display:none; } }

/* --- Floating CTA (hidden on game pages and homepage hero) --- */
.floating-cta{
  position:fixed; bottom:18px; right:18px; z-index:80;
  display:none; align-items:center; gap:8px;
  padding:10px 14px 10px 16px; border-radius:999px;
  background:linear-gradient(135deg, #6366F1, #EC4899);
  color:#fff !important; text-decoration:none;
  font-family:'Inter', sans-serif; font-weight:600; font-size:13px;
  box-shadow:0 12px 32px -10px rgba(236,72,153,0.6), 0 4px 12px rgba(0,0,0,0.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.floating-cta.is-visible{ display:inline-flex; animation:fctaPop .4s cubic-bezier(.2,1.2,.4,1); }
.floating-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -10px rgba(236,72,153,0.7); }
.floating-cta__label{ opacity:.85; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.floating-cta__amount{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:14px; }
.floating-cta__arrow{ font-size:16px; line-height:1; }
@keyframes fctaPop{ from{ opacity:0; transform:translateY(20px) scale(.9);} to{ opacity:1; transform:none;} }
@media (max-width:480px){
  .floating-cta__label{ display:none; }
  .floating-cta{ bottom:12px; right:12px; padding:10px 12px; }
}

/* --- Homepage bankroll banner --- */
.bankroll-banner{
  display:grid; grid-template-columns: 1fr auto; gap:28px;
  align-items:center;
  padding:28px 32px;
  background:linear-gradient(135deg, rgba(99,102,241,0.16), rgba(236,72,153,0.16));
  border:1px solid rgba(236,72,153,0.30);
  border-radius:20px;
  margin-bottom:48px;
  position:relative; overflow:hidden;
}
.bankroll-banner::before{
  content:""; position:absolute; inset:-50% -10% auto auto; width:60%; height:200%;
  background:radial-gradient(ellipse at center, rgba(236,72,153,0.25) 0%, transparent 60%);
  filter:blur(40px); pointer-events:none;
}
.bankroll-banner__left{ position:relative; z-index:1; }
.bankroll-banner__eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:11px;
  color:var(--color-ink-dim); font-weight:700; margin-bottom:4px;
}
.bankroll-banner__amount{
  font-family:'JetBrains Mono', monospace; font-weight:800;
  font-size:clamp(40px, 7vw, 64px); line-height:1;
  background:linear-gradient(135deg, #10B981 0%, #34D399 50%, #6EE7B7 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:6px;
  text-shadow:0 0 28px rgba(16,185,129,0.35);
}
.bankroll-banner__sub{ color:var(--color-ink-dim); font-size:15px; max-width:520px; line-height:1.5; }
.bankroll-banner__right{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; position:relative; z-index:1; }
.btn--lg{ padding:14px 22px; font-size:16px; font-weight:700; }
.btn--ghost{ background:transparent; border:1px solid var(--color-line); color:var(--color-ink-dim); }
.btn--ghost:hover{ color:var(--color-ink); border-color:var(--color-primary); }
@media (max-width:720px){
  .bankroll-banner{ grid-template-columns:1fr; padding:22px; gap:18px; }
  .bankroll-banner__right{ align-items:stretch; }
  .bankroll-banner__right .btn--lg{ width:100%; text-align:center; }
}

/* --- Casino floor lobby --- */
.section--lobby{ padding-top:48px; }
.lobby-h2{
  text-align:center; font-size:clamp(28px,4vw,40px); margin-bottom:6px;
  background:linear-gradient(135deg, #fff 0%, #C7D2FE 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
[data-theme="light"] .lobby-h2{
  background:linear-gradient(135deg, #0A0E1A 0%, #6366F1 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.lobby-sub{ text-align:center; color:var(--color-ink-dim); margin-bottom:36px; font-size:15px; }
.lobby-rail{ margin-top:40px; }
.lobby-rail__title{
  font-size:18px; font-weight:700; margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
  text-transform:uppercase; letter-spacing:.06em;
}
.lobby-rail__title::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(236,72,153,0.4), transparent);
}
.lobby-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px;
}

.lobby-card{
  position:relative; display:block; text-decoration:none;
  border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
  border:1px solid var(--color-line);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.1), border-color .2s ease, box-shadow .25s ease;
  isolation:isolate;
}
.lobby-card:hover{
  transform:translateY(-4px);
  border-color:rgba(236,72,153,0.55);
  box-shadow:0 16px 40px -16px rgba(236,72,153,0.5), 0 8px 18px -12px rgba(0,0,0,0.4);
}
.lobby-card__art{
  aspect-ratio: 16 / 10;
  background:linear-gradient(135deg, #1E1B4B 0%, #312E81 30%, #6B21A8 70%, #9D174D 100%);
  position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.lobby-card__art::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 30%, rgba(236,72,153,0.30), transparent 50%),
             radial-gradient(circle at 70% 80%, rgba(99,102,241,0.30), transparent 50%);
  pointer-events:none;
}
.lobby-card__hover{
  position:absolute; inset:0; z-index:2;
  background:rgba(10,14,26,0.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s ease;
}
.lobby-card:hover .lobby-card__hover{ opacity:1; }
.lobby-card__play{
  background:linear-gradient(135deg, #6366F1, #EC4899);
  color:#fff; padding:12px 22px; border-radius:999px;
  font-weight:700; font-size:14px; letter-spacing:.02em;
  box-shadow:0 8px 24px -6px rgba(236,72,153,0.55);
}
.lobby-card__body{ padding:14px 16px 16px; }
.lobby-card__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.lobby-card__name{ font-family:'General Sans', sans-serif; font-weight:700; font-size:17px; }
.lobby-card__rtp{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:11px;
  background:rgba(16,185,129,0.15); color:#10B981;
  padding:3px 7px; border-radius:6px; letter-spacing:.02em;
}
.lobby-card__desc{ color:var(--color-ink-dim); font-size:13px; line-height:1.45; margin:0; }

/* The icons.js auto-injects an SVG into [data-icon]. Style that SVG as the art. */
.lobby-card__art svg{
  position:relative; z-index:1;
  width:88px; height:88px;
  color:rgba(255,255,255,0.92);
  filter:drop-shadow(0 4px 16px rgba(236,72,153,0.45));
}

/* --- Scroll-reveal --- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1.1); will-change:opacity, transform; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* v3.1 — Make site-logo SVG never squish */
.site-logo{ display:inline-flex; align-items:center; flex-shrink:0; }
.site-logo__svg{ display:block; max-width:none; height:40px; width:auto; }
.site-header__inner{ gap:16px; }
.site-header .row{ flex-shrink:0; }

/* ===========================================================================
   §23 v3.4 — Pulsing bankroll pill, vivid lobby cards, deep-card grid
=========================================================================== */

/* Pulsing always-visible bankroll pill */
.bankroll-pill{
  animation:pillPulse 2.8s ease-in-out infinite;
}
.bankroll-pill:hover{
  animation:none;
}
@keyframes pillPulse{
  0%, 100%{
    box-shadow:0 0 0 0 rgba(236,72,153,0.0), 0 0 0 1px rgba(236,72,153,0.45) inset;
    border-color:rgba(236,72,153,0.45);
  }
  50%{
    box-shadow:0 0 0 6px rgba(236,72,153,0.0), 0 0 22px -2px rgba(236,72,153,0.55);
    border-color:rgba(236,72,153,0.95);
  }
}

/* All Games page: bankroll banner section wrapper */
.bankroll-banner-section{
  padding:0 0 28px;
}
.bankroll-banner-section .bankroll-banner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 32px;margin-bottom:0;
  background:linear-gradient(135deg, rgba(16,185,129,.18), rgba(236,72,153,.14));
  border:1px solid rgba(16,185,129,.40);
  border-radius:18px;
}
.bankroll-banner-section .bankroll-banner__label{
  text-transform:uppercase;letter-spacing:.16em;font-size:12px;
  color:var(--color-ink-dim);font-weight:700;
}
.bankroll-banner-section .bankroll-banner__amount{
  font-family:'JetBrains Mono', monospace;font-weight:800;
  font-size:clamp(36px, 6vw, 56px);line-height:1;
  background:linear-gradient(135deg, #10B981 0%, #34D399 50%, #6EE7B7 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 28px rgba(16,185,129,0.35);
  flex:1;text-align:center;
}
.bankroll-banner-section .bankroll-banner__cta{
  text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:700;
  color:#EC4899;
  padding:10px 18px;border:1px solid rgba(236,72,153,.45);border-radius:999px;
  background:rgba(236,72,153,.06);
  animation:pillPulse 2.8s ease-in-out infinite;
}
@media (max-width:720px){
  .bankroll-banner-section .bankroll-banner{flex-direction:column;text-align:center;padding:18px;}
  .bankroll-banner-section .bankroll-banner__amount{font-size:42px;}
}

/* Lobby card art — punch up vividness, fix "business meeting" feel */
.lobby-card{
  background:linear-gradient(180deg, #1a1226 0%, #0e0a1a 100%);
  border:1px solid rgba(167,139,255,.20);
  box-shadow:0 4px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.lobby-card:hover{
  transform:translateY(-4px) scale(1.01);
  border-color:rgba(236,72,153,.55);
  box-shadow:0 14px 40px rgba(236,72,153,.25), 0 0 0 1px rgba(236,72,153,.35) inset;
}
.lobby-card__art{
  background:linear-gradient(135deg, #6366F1 0%, #8B5CF6 35%, #EC4899 75%, #F59E0B 100%);
  position:relative;overflow:hidden;
}
.lobby-card__art::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 45%),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,.45), transparent 60%);
  pointer-events:none;
}
.lobby-card__hover{
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
}
.lobby-card__play{
  font-size:18px;letter-spacing:.04em;font-weight:800;
  padding:12px 22px;border-radius:999px;
  background:linear-gradient(135deg, #10B981, #34D399);
  color:#0a0b0d;
  box-shadow:0 8px 24px rgba(16,185,129,.45);
}

[data-theme="light"] .lobby-card{
  background:linear-gradient(180deg, #fff 0%, #f7f3ea 100%);
  border:1px solid rgba(99,102,241,.30);
}

/* Deep-card grid (real-money comparison hubs) */
.deep-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;margin-top:24px;
}
.deep-card{
  display:block;padding:18px;border-radius:12px;text-decoration:none;color:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.deep-card:hover{
  transform:translateY(-2px);
  border-color:rgba(236,72,153,.55);
  background:linear-gradient(180deg, rgba(236,72,153,.06), rgba(99,102,241,.04));
}
.deep-card__head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-bottom:8px;
}
.deep-card__name{
  font-family:'General Sans', 'Inter', sans-serif;
  font-weight:700;font-size:17px;
  background:linear-gradient(135deg, #fff 0%, #C7D2FE 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.deep-card__arrow{color:#EC4899;font-size:18px;font-weight:700;}
.deep-card__desc{
  font-size:13px;color:var(--color-ink-dim);line-height:1.55;margin:0;
}
[data-theme="light"] .deep-card{
  background:#fff;border:1px solid rgba(0,0,0,.08);
}
[data-theme="light"] .deep-card__name{
  background:linear-gradient(135deg, #0A0E1A 0%, #6366F1 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* Hero override on All Games page — slightly taller, sexier image weight */
.hero--rooms{ min-height:340px; }

/* =========================================================
   §24 v3.5 - Home-is-Lobby compact strip + per-game vivid art
   ========================================================= */

/* Slim lobby strip at top of home (replaces big hero) */
.lobby-strip{
  background:linear-gradient(180deg,
              rgba(99,102,241,0.10) 0%,
              rgba(236,72,153,0.06) 50%,
              transparent 100%);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:28px 0 24px;
}
.lobby-strip__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.lobby-strip__left{ flex:1; min-width:280px; }
.lobby-strip__title{
  font-family:'General Sans', sans-serif;
  font-size:clamp(38px, 4.6vw, 60px);
  line-height:1.02; margin:0 0 6px;
  background:linear-gradient(135deg, #fff 0%, #C7D2FE 50%, #F9A8D4 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.lobby-strip__sub{
  color:var(--color-ink-dim);
  font-size:16px; line-height:1.5; margin:0; max-width:560px;
}
.lobby-strip__bankroll{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:6px; padding:14px 22px;
  background:linear-gradient(135deg, rgba(16,185,129,0.10), rgba(99,102,241,0.10));
  border:1px solid rgba(16,185,129,0.30);
  border-radius:16px;
  min-width:240px;
}
.lobby-strip__eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--color-ink-dim);
}
.lobby-strip__amount{
  font-family:'JetBrains Mono', monospace;
  font-weight:800; font-size:30px;
  color:#10B981;
  letter-spacing:-0.5px;
  text-shadow:0 0 24px rgba(16,185,129,0.45);
}

[data-theme="light"] .lobby-strip{
  background:linear-gradient(180deg,
              rgba(99,102,241,0.06) 0%,
              rgba(236,72,153,0.04) 60%,
              transparent 100%);
}
[data-theme="light"] .lobby-strip__title{
  background:linear-gradient(135deg, #0A0E1A 0%, #6366F1 60%, #EC4899 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
[data-theme="light"] .lobby-strip__bankroll{
  background:linear-gradient(135deg, rgba(16,185,129,0.06), rgba(99,102,241,0.06));
}

.section--lobby-tight{ padding-top:28px; }

/* Editorial hero section that lives BELOW the games */
.section--editorial{ padding:64px 0; }
.editorial-hero{
  text-align:center; max-width:760px; margin:0 auto;
  padding:48px 32px;
  background:linear-gradient(135deg, rgba(99,102,241,0.08), rgba(236,72,153,0.08));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
}
.editorial-hero .eyebrow{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:#EC4899; margin-bottom:14px;
}
.editorial-hero h2{ font-size:clamp(28px, 3.4vw, 42px); margin:0 0 14px; line-height:1.1; }
.editorial-hero p{ color:var(--color-ink-dim); font-size:17px; line-height:1.6; margin:0 auto 22px; max-width:600px; }
[data-theme="light"] .editorial-hero{
  background:linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.06));
  border:1px solid rgba(0,0,0,.08);
}

/* PER-GAME color treatments on lobby-card.art
   Each game gets its own gradient + accent so the lobby feels like a casino floor, not a wall of purple. */
.lobby-card[href*="crash"]    .lobby-card__art{ background:linear-gradient(135deg, #0F172A 0%, #1E40AF 40%, #DC2626 100%); }
.lobby-card[href*="limbo"]    .lobby-card__art{ background:linear-gradient(135deg, #042F2E 0%, #047857 50%, #10B981 100%); }
.lobby-card[href*="mines"]    .lobby-card__art{ background:linear-gradient(135deg, #1C1917 0%, #57534E 35%, #F59E0B 100%); }
.lobby-card[href*="plinko"]   .lobby-card__art{ background:linear-gradient(135deg, #4C1D95 0%, #7C3AED 40%, #EC4899 100%); }
.lobby-card[href*="dice"]     .lobby-card__art{ background:linear-gradient(135deg, #0C0A09 0%, #292524 40%, #FBBF24 100%); }
.lobby-card[href*="roulette"] .lobby-card__art{ background:linear-gradient(135deg, #14532D 0%, #166534 50%, #DC2626 100%); }
.lobby-card[href*="chicken"]  .lobby-card__art{ background:linear-gradient(135deg, #7C2D12 0%, #EA580C 50%, #FBBF24 100%); }
.lobby-card[href*="coin"]     .lobby-card__art{ background:linear-gradient(135deg, #422006 0%, #B45309 50%, #FCD34D 100%); }
.lobby-card[href*="keno"]     .lobby-card__art{ background:linear-gradient(135deg, #082F49 0%, #0369A1 50%, #06B6D4 100%); }

/* Bigger, more iconic art frame */
.lobby-card{ border-radius:20px; }
.lobby-card__art{ aspect-ratio: 16 / 11; }
.lobby-card__art svg{
  width:104px; height:104px;
  color:rgba(255,255,255,0.96);
  filter:drop-shadow(0 6px 20px rgba(0,0,0,0.45));
}
.lobby-card__art::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 75% 20%, rgba(255,255,255,0.18), transparent 55%);
  pointer-events:none;
}
.lobby-rail__title{
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--color-ink-dim);
}
.lobby-rail__title::after{
  display:inline-block; margin-left:14px;
  content:""; width:80px; height:2px; vertical-align:middle;
  background:linear-gradient(90deg, #6366F1, #EC4899);
  border-radius:2px;
}

/* Bigger grid on home (3 columns desktop) */
.section--lobby-tight .lobby-grid{
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:18px;
}
@media (max-width: 700px){
  .lobby-strip__row{ flex-direction:column; align-items:stretch; }
  .lobby-strip__bankroll{ align-items:flex-start; }
}

/* §26 v3.6 — per-brand room hero art (replaces shared graphic) */
.room-hero-strip--art{
  position:relative; overflow:hidden;
  background:transparent; height:auto; min-height:280px;
  border-radius:24px;
  margin-bottom:32px;
  padding:0;
}
.room-hero-strip--art::before{ display:none; }
.room-hero-strip--art .room-hero-strip__art{
  position:absolute; inset:0; z-index:0;
  display:block;
}
.room-hero-strip--art .room-hero-strip__art svg{
  width:100%; height:100%; display:block;
}
.room-hero-strip--art .room-hero-strip__inner{
  position:relative; z-index:1;
  padding:32px 36px 28px;
  /* Stronger overlay: dark scrim across full height so h1/meta always read white on dark,
     no matter what the brand SVG gradient looks like underneath (esp. light-bg brands like 1xBet). */
  background:linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.78) 100%);
  border-radius:24px;
  min-height:280px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.room-hero-strip--art h1{
  font-size:clamp(22px, 2.6vw, 32px);
  color:#fff; margin:0 0 12px;
  text-shadow:0 2px 14px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.6);
  max-width:62%;
}
.room-hero-strip--art .room-hero-strip__meta .tag{
  background:rgba(0,0,0,0.55); color:#fff;
  border:1px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(4px);
}
.room-hero-strip--art .room-hero-strip__meta .tag--success{
  background:rgba(16,185,129,0.85); color:#04231C; border-color:transparent;
}
@media (max-width:700px){
  .room-hero-strip--art{ min-height:240px; }
  .room-hero-strip--art .room-hero-strip__inner{ padding:24px 22px 22px; min-height:240px; }
}

/* §27 v3.6 — guide pages spacing + hero */
.guide-hero-section{
  padding:48px 0 32px;
  background:linear-gradient(180deg, rgba(99,102,241,0.04), transparent);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.guide-eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:#EC4899; margin-bottom:18px;
}
.guide-title{
  font-size:clamp(32px, 4.2vw, 52px);
  line-height:1.08; margin:0 0 18px;
  letter-spacing:-0.025em;
}
.guide-deck{
  font-size:19px; line-height:1.55;
  color:var(--color-text-muted); max-width:65ch; margin:0;
}
.guide-body-section{ padding:48px 0 72px; }

/* Tighter, calmer reading rhythm for guide prose */
.prose--guide{ font-size:18px; line-height:1.78; }
.prose--guide > * + * { margin-top:1.15em; }
.prose--guide h2{
  font-size:28px; margin-top:2.4em; margin-bottom:0.6em;
  padding-top:0.4em; line-height:1.2; letter-spacing:-0.015em;
  border-top:1px solid rgba(255,255,255,0.06);
}
.prose--guide h2:first-child{ border-top:none; padding-top:0; margin-top:0; }
.prose--guide h3{
  font-size:21px; margin-top:1.9em; margin-bottom:0.5em;
  line-height:1.25;
}
.prose--guide p{ margin:0 0 1.1em; }
.prose--guide ul, .prose--guide ol{ margin:0 0 1.4em; padding-left:1.6em; }
.prose--guide li{ margin-bottom:0.55em; }
.prose--guide li > p{ margin-bottom:0.3em; }
.prose--guide table{ margin:1.5em 0; }
.prose--guide blockquote{ margin:1.6em 0; }

.guide-cta{
  margin-top:64px; padding:36px 28px;
  background:linear-gradient(135deg, rgba(99,102,241,0.10), rgba(236,72,153,0.10));
  border:1px solid rgba(255,255,255,0.10);
  border-radius:20px; text-align:center;
}
.guide-cta h3{ margin:0 0 8px; font-size:22px; }
.guide-cta p{ color:var(--color-text-muted); margin:0 0 18px; }

[data-theme="light"] .prose--guide h2{ border-top-color:rgba(0,0,0,0.06); }
[data-theme="light"] .guide-cta{
  background:linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.06));
  border-color:rgba(0,0,0,0.08);
}

/* §28 v3.6 — h2 underline slide-in animation */
.h2-anim{
  position:relative;
  padding-bottom:14px;
}
.h2-anim::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:3px;
  background:linear-gradient(90deg, #6366F1, #EC4899);
  border-radius:2px;
  transition:width 0.9s cubic-bezier(.2,.9,.3,1.1);
}
.h2-anim--in::after{ width:80px; }

@media (prefers-reduced-motion: reduce){
  .h2-anim::after{ transition:none; }
  .h2-anim--in::after{ width:80px; }
}

/* §29 v3.6 — stats strip with countup numbers */
.stats-strip{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:24px; padding:36px 28px;
  background:linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.06));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
}
.stat{ text-align:center; }
.stat__num{
  font-family:'General Sans', Inter, sans-serif;
  font-weight:800; font-size:clamp(34px, 4.2vw, 52px);
  line-height:1; letter-spacing:-0.03em;
  background:linear-gradient(135deg, #6366F1, #EC4899);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:flex; align-items:baseline; justify-content:center; gap:2px;
  margin-bottom:10px;
}
.stat__suffix, .stat__prefix{
  font-size:0.6em; font-weight:700;
}
.stat__label{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-ink-dim);
}
@media (max-width:700px){
  .stats-strip{ grid-template-columns:repeat(2, 1fr); padding:24px 16px; gap:18px; }
}
[data-theme="light"] .stats-strip{
  background:linear-gradient(135deg, rgba(99,102,241,0.04), rgba(236,72,153,0.04));
  border-color:rgba(0,0,0,0.06);
}

/* =========================================================
   §31 v3.7 — MOBILE UX rescue (cards 2-up, compact hero, header fits)
   Symptom: on iPhone-class viewports the lobby cards rendered one-per-row
   ~320px tall; the header pill + reset + theme toggle clipped off-screen;
   and the "The Lobby" hero plus bankroll panel pushed real game tiles
   ~1000px down the page. This block fixes all three.
   ========================================================= */
@media (max-width: 720px){
  /* Header chrome: keep all controls visible, never overflow */
  .site-header__inner{ padding-left:14px; padding-right:14px; gap:10px; }
  .site-logo__svg{ height:32px; }
  .site-header .row{ gap:8px; }

  /* Bankroll pill in header collapses to amount only (label/play hidden via
     existing @720 rule). Make sure it never pushes other icons off-screen. */
  .bankroll-pill{ flex-shrink:1; min-width:0; }
  .bankroll-pill__amount{ font-size:13px; }

  /* Lobby hero strip — stack and slim down so games appear above fold */
  .lobby-strip{ padding:18px 0 14px; }
  .lobby-strip__row{ gap:14px; }
  .lobby-strip__title{
    font-size:clamp(30px, 9vw, 40px);
    line-height:1.0; margin-bottom:4px;
  }
  .lobby-strip__sub{ font-size:14px; line-height:1.45; }
  .lobby-strip__bankroll{
    align-self:stretch;
    flex-direction:row; align-items:center; justify-content:space-between;
    padding:8px 12px; min-width:0; gap:10px;
  }
  .lobby-strip__eyebrow{ font-size:9px; letter-spacing:.08em; flex-shrink:0; max-width:90px; line-height:1.2; }
  .lobby-strip__amount{ font-size:20px; line-height:1; margin:0; flex:1; text-align:center; }
  .lobby-strip__bankroll .btn--sm{ padding:5px 10px; font-size:11px; flex-shrink:0; }

  /* THE FIX: lobby grid goes 2-up on phones instead of 1-up.
     Selector specificity must beat .section--lobby-tight .lobby-grid (0,2,0). */
  .lobby-grid,
  .section--lobby .lobby-grid,
  .section--lobby-tight .lobby-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }
  .lobby-card{ border-radius:14px; }
  .lobby-card__art{ aspect-ratio: 4 / 3; }
  .lobby-card__art svg{ width:54px; height:54px; }
  .lobby-card__body{ padding:10px 12px 12px; }
  .lobby-card__name{ font-size:14px; }
  .lobby-card__rtp{ font-size:10px; padding:2px 5px; }
  .lobby-card__desc{ font-size:12px; line-height:1.35; }

  /* Section spacing — kill the giant gaps that make scroll feel endless */
  .section--lobby{ padding-top:18px; }
  .section--lobby-tight{ padding-top:14px; padding-bottom:18px; }
  .lobby-rail{ margin-bottom:22px; }
  .lobby-rail__title{ font-size:11px; margin-bottom:10px; }

  /* Stats strip — keep 2x2 but tighter so it doesn't eat the screen */
  .stats-strip{ padding:18px 12px; gap:14px; margin:18px 0; }
  .stat__num{ font-size:32px; }
  .stat__label{ font-size:9px; letter-spacing:.10em; }

  /* Disclosure bar — three lines on mobile is ugly */
  .disclosure-bar{ font-size:10px; padding:4px 0; line-height:1.3; }
  .disclosure-bar .container{ padding-left:12px; padding-right:12px; }
}

@media (max-width: 380px){
  /* Tiny phones — keep 2-up but allow even smaller art */
  .lobby-card__art svg{ width:46px; height:46px; }
  .lobby-strip__title{ font-size:28px; }
  .site-logo__svg{ height:28px; }
}

/* ============================================================
 * §32 — Iter 2.7: Unique game art on lobby cards + game pages
 * ============================================================ */

/* Replace lobby-card gradients with the cohesive art-deco illustrations.
   The PNGs are 16:9 with art-deco corner frames + central iconic subject.
   We layer a soft gradient overlay so the card body remains legible. */
.lobby-card__art{
  position: relative;
  overflow: hidden;
}
.lobby-card[href*="crash"]    .lobby-card__art{ background: #0a0d18 url('/assets/img/games/game-art-crash.png') center/cover no-repeat; }
.lobby-card[href*="limbo"]    .lobby-card__art{ background: #0a1612 url('/assets/img/games/game-art-limbo.png') center/cover no-repeat; }
.lobby-card[href*="mines"]    .lobby-card__art{ background: #1a1612 url('/assets/img/games/game-art-mines.png') center/cover no-repeat; }
.lobby-card[href*="plinko"]   .lobby-card__art{ background: #150b1f url('/assets/img/games/game-art-plinko.png') center/cover no-repeat; }
.lobby-card[href*="dice"]     .lobby-card__art{ background: #0a0d18 url('/assets/img/games/game-art-dice.png') center/cover no-repeat; }
.lobby-card[href*="roulette"] .lobby-card__art{ background: #0a1410 url('/assets/img/games/game-art-roulette.png') center/cover no-repeat; }
.lobby-card[href*="chicken"]  .lobby-card__art{ background: #14100a url('/assets/img/games/game-art-chicken.png') center/cover no-repeat; }
.lobby-card[href*="coin"]     .lobby-card__art{ background: #14110a url('/assets/img/games/game-art-coin.png') center/cover no-repeat; }
.lobby-card[href*="keno"]     .lobby-card__art{ background: #0a1224 url('/assets/img/games/game-art-keno.png') center/cover no-repeat; }

/* Hide the injected SVG icon now that we have full-bleed illustrations. */
.lobby-card__art svg{ display: none !important; }

/* Subtle bottom fade so the card name pill stays readable against bright art. */
.lobby-card__art::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

/* Game page hero strip — show the art-deco illustration on the right.
   Each game-page <body> can be tagged with [data-game="<slug>"] (build patch will do this). */
[data-game] .bf-header{
  position: relative;
}
[data-game="crash"]    .bf-header{ background: linear-gradient(90deg, rgba(10,13,24,0.95) 0%, rgba(10,13,24,0.6) 60%, rgba(10,13,24,0.05) 100%), url('/assets/img/games/game-art-crash.png') right center/cover no-repeat; }
[data-game="limbo"]    .bf-header{ background: linear-gradient(90deg, rgba(10,22,18,0.95) 0%, rgba(10,22,18,0.6) 60%, rgba(10,22,18,0.05) 100%), url('/assets/img/games/game-art-limbo.png') right center/cover no-repeat; }
[data-game="mines"]    .bf-header{ background: linear-gradient(90deg, rgba(26,22,18,0.95) 0%, rgba(26,22,18,0.6) 60%, rgba(26,22,18,0.05) 100%), url('/assets/img/games/game-art-mines.png') right center/cover no-repeat; }
[data-game="plinko"]   .bf-header{ background: linear-gradient(90deg, rgba(21,11,31,0.95) 0%, rgba(21,11,31,0.6) 60%, rgba(21,11,31,0.05) 100%), url('/assets/img/games/game-art-plinko.png') right center/cover no-repeat; }
[data-game="dice"]     .bf-header{ background: linear-gradient(90deg, rgba(10,13,24,0.95) 0%, rgba(10,13,24,0.6) 60%, rgba(10,13,24,0.05) 100%), url('/assets/img/games/game-art-dice.png') right center/cover no-repeat; }
[data-game="roulette"] .bf-header{ background: linear-gradient(90deg, rgba(10,20,16,0.95) 0%, rgba(10,20,16,0.6) 60%, rgba(10,20,16,0.05) 100%), url('/assets/img/games/game-art-roulette.png') right center/cover no-repeat; }
[data-game="chicken"]  .bf-header{ background: linear-gradient(90deg, rgba(20,16,10,0.95) 0%, rgba(20,16,10,0.6) 60%, rgba(20,16,10,0.05) 100%), url('/assets/img/games/game-art-chicken.png') right center/cover no-repeat; }
[data-game="coin"]     .bf-header{ background: linear-gradient(90deg, rgba(20,17,10,0.95) 0%, rgba(20,17,10,0.6) 60%, rgba(20,17,10,0.05) 100%), url('/assets/img/games/game-art-coin.png') right center/cover no-repeat; }
[data-game="keno"]     .bf-header{ background: linear-gradient(90deg, rgba(10,18,36,0.95) 0%, rgba(10,18,36,0.6) 60%, rgba(10,18,36,0.05) 100%), url('/assets/img/games/game-art-keno.png') right center/cover no-repeat; }
[data-game] .bf-header{
  padding: 28px 24px;
  border-radius: var(--radius-xl, 18px);
  min-height: 160px;
  margin-bottom: 24px;
}
[data-game] .bf-header h1{
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}

@media (max-width: 720px){
  [data-game] .bf-header{
    background-position: right -120px center !important;
    min-height: 140px;
  }
}

/* ============================================================
 * §33 — Iter 2.7b: Target the actual header classes
 *   - Homepage hero: .lobby-strip gets Vegas-girl right-side accent
 *   - Game pages:    .game-head gets game-art right-side accent
 * ============================================================ */

.lobby-strip{
  position: relative;
  overflow: hidden;
  /* Iter 2.8 — new hero composite. Woman sits hard-right, dark left for title. */
  background:
    linear-gradient(90deg, rgba(10,14,26,0.96) 0%, rgba(10,14,26,0.78) 35%, rgba(10,14,26,0.20) 70%, rgba(10,14,26,0.00) 100%),
    url('/assets/img/hero-home-v4.jpg') right center/cover no-repeat;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
.lobby-strip .container{ position: relative; z-index: 1; }
@media (max-width: 720px){
  .lobby-strip{
    background:
      linear-gradient(180deg, rgba(10,14,26,0.86) 0%, rgba(10,14,26,0.70) 55%, rgba(10,14,26,0.45) 100%),
      url('/assets/img/hero-home-v4.jpg') 75% center/cover no-repeat;
  }
}

/* Face-frame — hero strips show people; anchor crop so faces are visible, not just hair */
.hero--lobby, .hero--rooms, .hero--best, .hero--guides{
  background-position: center 30% !important;
  background-size: cover;
}
.hero--guides{ background-position: center 35% !important; }
.hero--lobby{ background-position: right 25% !important; }
.hero--best{  background-position: right 25% !important; }
.hero--rooms{ background-position: right 30% !important; }

/* Game-page header pill — overlay a per-game illustration on the right. */
[data-game] .game-head{
  position: relative;
  overflow: hidden;
}
[data-game="crash"]    .game-head{ background: linear-gradient(90deg, rgba(10,13,24,0.95) 0%, rgba(10,13,24,0.75) 55%, rgba(10,13,24,0.05) 100%), url('/assets/img/games/game-art-crash.png') right center/cover no-repeat; }
[data-game="limbo"]    .game-head{ background: linear-gradient(90deg, rgba(10,22,18,0.95) 0%, rgba(10,22,18,0.75) 55%, rgba(10,22,18,0.05) 100%), url('/assets/img/games/game-art-limbo.png') right center/cover no-repeat; }
[data-game="mines"]    .game-head{ background: linear-gradient(90deg, rgba(26,22,18,0.95) 0%, rgba(26,22,18,0.75) 55%, rgba(26,22,18,0.05) 100%), url('/assets/img/games/game-art-mines.png') right center/cover no-repeat; }
[data-game="plinko"]   .game-head{ background: linear-gradient(90deg, rgba(21,11,31,0.95) 0%, rgba(21,11,31,0.75) 55%, rgba(21,11,31,0.05) 100%), url('/assets/img/games/game-art-plinko.png') right center/cover no-repeat; }
[data-game="dice"]     .game-head{ background: linear-gradient(90deg, rgba(10,13,24,0.95) 0%, rgba(10,13,24,0.75) 55%, rgba(10,13,24,0.05) 100%), url('/assets/img/games/game-art-dice.png') right center/cover no-repeat; }
[data-game="roulette"] .game-head{ background: linear-gradient(90deg, rgba(10,20,16,0.95) 0%, rgba(10,20,16,0.75) 55%, rgba(10,20,16,0.05) 100%), url('/assets/img/games/game-art-roulette.png') right center/cover no-repeat; }
[data-game="chicken"]  .game-head{ background: linear-gradient(90deg, rgba(20,16,10,0.95) 0%, rgba(20,16,10,0.75) 55%, rgba(20,16,10,0.05) 100%), url('/assets/img/games/game-art-chicken.png') right center/cover no-repeat; }
[data-game="coin"]     .game-head{ background: linear-gradient(90deg, rgba(20,17,10,0.95) 0%, rgba(20,17,10,0.75) 55%, rgba(20,17,10,0.05) 100%), url('/assets/img/games/game-art-coin.png') right center/cover no-repeat; }
[data-game="keno"]     .game-head{ background: linear-gradient(90deg, rgba(10,18,36,0.95) 0%, rgba(10,18,36,0.75) 55%, rgba(10,18,36,0.05) 100%), url('/assets/img/games/game-art-keno.png') right center/cover no-repeat; }

[data-game] .game-head .left h1{ color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.5); }

@media (max-width: 720px){
  [data-game] .game-head{
    background-position: right -140px center !important;
    background-size: cover !important;
  }
}

/* ============================================================
 * §34 — Iter 2.7c: Readable win/lose flash overlay
 *   Was unstyled <div class="big-flash"> — relied on inherited
 *   fonts and zero contrast. Now: chunky centered chip with
 *   a strong scrim, big legible type, colour-coded outcome.
 * ============================================================ */

.game-stage{ position: relative; }

.big-flash{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'General Sans', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 8vw, 84px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.6),
    0 6px 24px rgba(0,0,0,0.85),
    0 0 80px currentColor;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 75%);
  z-index: 50;
  pointer-events: none;
  animation: bigFlashIn 0.18s ease-out, bigFlashOut 0.35s ease-in 0.85s forwards;
  border-radius: 14px;
}

/* Inner chip so the actual label has a hard-edged background. */
.big-flash::before{
  content: attr(data-label);
}

/* WIN — vivid green */
.big-flash.win{
  color: #6EF49A;
  text-shadow:
    0 2px 0 rgba(0,30,15,0.8),
    0 6px 24px rgba(0,0,0,0.9),
    0 0 60px rgba(110,244,154,0.6);
}

/* LOSE — vivid red */
.big-flash.lose{
  color: #FF6B6B;
  text-shadow:
    0 2px 0 rgba(30,0,0,0.8),
    0 6px 24px rgba(0,0,0,0.9),
    0 0 60px rgba(255,107,107,0.55);
}

@keyframes bigFlashIn{
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes bigFlashOut{
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* On phones, scale down a touch so long labels fit. */
@media (max-width: 480px){
  .big-flash{ font-size: clamp(30px, 13vw, 60px); }
}

/* ===== §35 — CRASHGAMES wordmark logo (June 2026 rebrand) ===== */
.site-logo{
  display:inline-flex; align-items:center;
  line-height:0;             /* kill any phantom text gap */
}
.site-logo__img{
  display:block;
  height:36px; width:auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
  transition: filter .25s ease, transform .25s ease;
}
.site-logo:hover .site-logo__img{
  filter: drop-shadow(0 0 14px rgba(212,175,55,0.45));
  transform: translateY(-1px);
}
.site-footer .site-logo__img{ height:32px; }
/* On phones, tighten the wordmark slightly so the bankroll pill + theme toggle fit. */
@media (max-width: 480px){
  .site-logo__img{ height:28px; }
  .site-footer .site-logo__img{ height:26px; }
}
/* Hide any legacy SVG that might still ship from an old cached deploy. */
.site-logo__svg{ display:none !important; }

/* ───────────────────────────────────────────────────────────────────
   §36  MOBILE REWORK (Iter 2.8) — game pages
   Goal: slim 48px title bar, drawer for Where-to-play / stats,
         sticky bottom action bar with Bet + CTA always thumb-reachable.
         Kill horizontal overflow on every page.
   Touches: only @media (max-width: 640px). Desktop untouched.
   ─────────────────────────────────────────────────────────────────── */

/* ─── Global: kill horizontal page bleed on phones ───────────────── */
html, body{ max-width: 100vw; overflow-x: hidden; }
.wrap, .container, main, header, footer{ max-width: 100%; }

@media (max-width: 640px){
  /* ── Header fits in 100vw ────────────────────────────────────── */
  .site-header .wrap,
  .site-header .topbar,
  .site-header > .row{
    gap: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    flex-wrap: nowrap;
  }
  .site-logo__img{ height: 26px !important; }
  .bankroll-pill{
    padding: 4px 8px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }
  .bankroll-pill__label{ display: none !important; }
  .bankroll-pill__cta{ display: none !important; }
  .bankroll-pill__amount{ font-size: 12px !important; }
  .theme-toggle, .icon-btn{
    width: 32px !important; height: 32px !important;
    flex: 0 0 32px;
  }
  .nav-burger{ margin-right: 0 !important; }

  /* ── Hamburger drawer: hide fully off-canvas (no leak) ────────── */
  .main-nav, .site-nav, [data-nav-drawer]{
    transform: translateX(100%);
    transition: transform .25s ease;
  }
  .main-nav.is-open, .site-nav.is-open, [data-nav-drawer].is-open{
    transform: translateX(0);
  }

  /* ── Game-head becomes a SLIM 48px bar ───────────────────────── */
  [data-game] .game-head{
    min-height: 48px !important;
    padding: 6px 12px !important;
    background-size: cover !important;
    background-position: right center !important;
    border-radius: 10px !important;
    margin: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  [data-game] .game-head .left{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0;
    flex: 1 1 auto;
  }
  [data-game] .game-head .left .back{
    font-size: 13px !important;
    padding: 4px 8px !important;
    border-radius: 999px;
    line-height: 1;
  }
  [data-game] .game-head .left h1.h3{
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  [data-game] .game-head .left .tag{
    font-size: 10px !important;
    padding: 3px 6px !important;
    white-space: nowrap;
  }
  /* The meta row (status + WTP + stats) collapses into a single
     icon-action that opens the WTP drawer. Status text hides.
     The "stats" button moves to the sticky bottom bar. */
  [data-game] .game-head .meta{
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto;
  }
  [data-game] .game-head .meta [data-status]{ display: none !important; }
  [data-game] .game-head .meta .wtp-toggle{
    font-size: 11px !important;
    padding: 6px 10px !important;
    height: 32px !important;
    border-radius: 999px;
    white-space: nowrap;
    /* keep the star, drop the rest of the label visually */
  }
  [data-game] .game-head .meta .wtp-toggle{
    font-size: 0 !important;            /* hide text */
    width: 36px !important;
    padding: 0 !important;
    color: transparent;
  }
  [data-game] .game-head .meta .wtp-toggle::before{
    content: "★";
    color: #ffd24a;
    font-size: 16px;
    line-height: 32px;
    display: inline-block;
  }
  /* "stats" button hides from the title bar — it lives in the bottom bar */
  [data-game] .game-head .meta .drawer-toggle{ display: none !important; }

  /* ── Game body: clamp width, eat the side gutter ─────────────── */
  .game-body, .game-stage, .game-shell{
    max-width: 100%;
    overflow-x: hidden;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }
  .game-stage .row{ flex-wrap: wrap !important; gap: 8px !important; }
  .game-stage .row .btn-sm{ flex: 0 0 auto; }

  /* ── Plinko multipliers row: horizontal scroll with snap ─────── */
  .plinko-multipliers, .plinko-mults, .multipliers-row,
  .game-stage .multipliers{
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 4px;
    /* visual hint that there is more */
    mask-image: linear-gradient(90deg, #000 0, #000 95%, transparent 100%);
  }
  .plinko-multipliers > *, .plinko-mults > *, .multipliers-row > *,
  .game-stage .multipliers > *{
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* ── Mines grid clamps to viewport width ─────────────────────── */
  .mines-grid, [data-mines-grid], .game-stage .grid-5,
  [data-game="mines"] .game-stage > .grid,
  [data-game="mines"] .game-stage .board{
    max-width: calc(100vw - 32px) !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
    box-sizing: border-box;
  }
  [data-game="mines"] .game-stage .row{ flex-wrap: wrap; }

  /* ── Compact the "Playing with" strip ────────────────────────── */
  .bet-bar .playing-with{
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center;
    gap: 6px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    margin: 0 !important;
  }
  .bet-bar .playing-with .pw-label{ font-size: 11px !important; opacity: .7; }
  .bet-bar .playing-with .pw-amount{ font-size: 13px !important; font-weight: 700; }
  .bet-bar .playing-with .pw-note{ display: none !important; }

  /* ── STICKY BOTTOM ACTION BAR ────────────────────────────────── */
  .bet-bar{
    position: sticky !important;
    bottom: 0 !important;
    left: 0; right: 0;
    z-index: 50;
    background: rgba(10, 13, 24, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.45);
    margin: 0 !important;
  }
  .bet-bar-inner{
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px !important;
    padding: 0 !important;
  }
  .bet-bar .bet-amount{
    display: grid !important;
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas: "input half double max"
                         "cost  cost  cost   cost";
    gap: 6px !important;
    align-items: center;
  }
  .bet-bar .bet-amount .field{
    grid-area: input;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .bet-bar .bet-amount .field .field-label{ display: none !important; }
  .bet-bar .bet-amount .field .input{
    height: 42px !important;
    font-size: 16px !important;   /* prevents iOS zoom on focus */
    padding: 0 10px !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .bet-bar .bet-chips{
    display: contents !important;  /* let chips flow into grid cells */
  }
  .bet-bar .bet-chip{
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    border-radius: 8px;
  }
  .bet-bar .bet-chip[data-chip="half"]  { grid-area: half; }
  .bet-bar .bet-chip[data-chip="double"]{ grid-area: double; }
  .bet-bar .bet-chip[data-chip="max"]   { grid-area: max; }
  .bet-bar .bet-cost{
    grid-area: cost;
    text-align: center;
    height: 32px;
    line-height: 32px;
    font-size: 12px !important;
    border-radius: 8px;
    padding: 0 10px !important;
  }
  .bet-bar .bet-action{
    display: flex !important;
    gap: 6px;
  }
  .bet-bar .bet-action .btn{
    flex: 1 1 auto;
    height: 52px !important;       /* thumb-reachable */
    font-size: 16px !important;
    border-radius: 10px !important;
    font-weight: 800;
    letter-spacing: 0.04em;
  }
  /* Inject a STATS chip next to the action button so users can open
     the drawer from the thumb zone. The HTML for it is added by
     iter28-mobile.js (it just clones [data-drawer-toggle]). */
  .bet-bar .stats-mobile-btn{
    flex: 0 0 52px;
    height: 52px;
    width: 52px;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #cbd5e1;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .bet-bar .stats-mobile-btn:active{ background: rgba(255,255,255,0.12); }

  /* Make sure page content has room above the sticky bar */
  body.game-page main, body[data-game] main, [data-game] .game-shell{
    padding-bottom: 132px !important;   /* matches sticky bar height */
  }

  /* ── Drawers (Where-to-play + stats) become full-screen sheets ── */
  .wtp-drawer, .drawer{
    position: fixed !important;
    inset: 0 !important;
    transform: translateY(100%);
    transition: transform .28s ease;
    z-index: 60;
    background: #0a0d18;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px calc(40px + env(safe-area-inset-bottom)) !important;
  }
  .wtp-drawer[aria-hidden="false"],
  .wtp-drawer.is-open,
  .drawer.is-open{
    transform: translateY(0) !important;
  }

  /* ── Room hero strip + breadcrumbs spacing ───────────────────── */
  .breadcrumbs + section, .breadcrumbs + .hero{ margin-top: 0 !important; }
  .room-hero, .hero--room{ padding-top: 16px !important; }
}

/* ─── Smallest phones (≤400px) — trim further so 320px still works ── */
@media (max-width: 400px){
  .site-logo__img{ height: 22px !important; }
  .bankroll-pill__amount{ font-size: 11px !important; }
  [data-game] .game-head .left h1.h3{ font-size: 16px !important; }
  [data-game] .game-head .left .tag{ font-size: 9px !important; padding: 2px 5px !important; }
  .bet-bar .bet-action .btn{ height: 48px !important; font-size: 15px !important; }
}

/* ─── §36b  Room-page spacing fix ─────────────────────────────── */
/* The breadcrumbs section + hero section were producing a tall dead
   black band on mobile. Tighten both: zero top padding on the room
   hero section, micro padding on the breadcrumb section. */
body.room-page .section--tight,
[data-page="room"] .section--tight,
main > .section--tight:first-child{
  padding-top: 12px !important;
  padding-bottom: 6px !important;
}
main > .section:has(.room-hero-strip){
  padding-top: 4px !important;
  padding-bottom: 16px !important;
}
@media (max-width: 640px){
  main > .section:has(.room-hero-strip){
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .room-hero-strip,
  .room-hero-strip--art{
    margin-bottom: 16px !important;
    border-radius: 16px !important;
    min-height: 220px !important;
  }
  .room-hero-strip--art .room-hero-strip__inner{
    padding: 18px 18px 18px !important;
    min-height: 220px !important;
    border-radius: 16px !important;
  }
  .room-hero-strip h1, .room-hero-strip--art h1{
    font-size: 22px !important;
    max-width: 100% !important;
    line-height: 1.15 !important;
  }
}

/* ─── §36c  Vegas-girl section accent on room pages ───────────── */
/* Add a small Vegas-girl accent strip in the negative space at the
   bottom-right of the room hero. Falls back gracefully if the asset
   is missing. */
.room-hero-strip--art::after{
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 240px; height: 100%;
  background: url('/assets/img/hero-section-accent.jpg') right center / cover no-repeat;
  opacity: 0.32;
  mask-image: linear-gradient(90deg, transparent 0%, #000 65%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 65%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 640px){
  .room-hero-strip--art::after{ width: 160px; opacity: 0.22; }
}

/* ─── §36d  Header overflow killer (mobile) ─────────────────────
   Issue: .top-nav and the reset/theme/burger row both occupy
   width and push past 100vw. The hamburger menu is the intended
   mobile nav anyway, so hide .top-nav on phones. */
@media (max-width: 640px){
  .site-header{ overflow: hidden; }
  .site-header .wrap{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 6px 10px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  .site-header .top-nav{ display: none !important; }
  .site-header .icon-btn-sm[data-reset]{ display: none !important; } /* keep header tight, reset lives in /lobby */
  /* The row holding bankroll + theme + burger needs to NOT shrink the burger out */
  .site-header > .wrap > .row,
  .site-header > .wrap > div:last-child{
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    min-width: 0;
  }
  .site-header .bankroll-pill{
    max-width: 120px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-header .nav-burger{
    flex: 0 0 32px !important;
    margin-right: 0 !important;
  }

  /* Mobile menu overlay: keep fully off-canvas when closed */
  .mobile-menu{
    position: fixed !important;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 70;
    background: #0a0d18;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
  }
  .mobile-menu[aria-hidden="false"],
  .mobile-menu.is-open{
    transform: translateX(0);
  }

  /* Disclosure bar overflow */
  .disclosure-bar, .global-disclosure, .top-disclosure{
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ─── §36e  Mobile menu — HARD off-canvas (override) ───────────── */
@media (max-width: 640px){
  .mobile-menu, [data-mobile-menu]{
    position: fixed !important;
    top: 0 !important;
    left: auto !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    box-sizing: border-box;
    transform: translateX(100vw) !important;
    transition: transform .25s ease !important;
    z-index: 70 !important;
    background: #0a0d18 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 60px 20px 40px !important;
  }
  .mobile-menu.is-open, .mobile-menu.open,
  .mobile-menu[aria-hidden="false"],
  [data-mobile-menu].is-open,
  [data-mobile-menu].open,
  [data-mobile-menu][aria-hidden="false"]{
    transform: translateX(0) !important;
  }
  .mobile-menu a{
    display: block;
    padding: 12px 4px;
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .mobile-menu .kicker{
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 18px 0 8px;
  }
}

/* ─── §36f  Drawer hard-close override ─────────────────────────── */
@media (max-width: 640px){
  .wtp-drawer, .drawer{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    box-sizing: border-box !important;
    transform: translateY(100vh) !important;   /* fully off-screen */
    transition: transform .28s ease !important;
    z-index: 60 !important;
    background: #0a0d18 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px calc(40px + env(safe-area-inset-bottom)) !important;
  }
  .wtp-drawer.is-open,
  .wtp-drawer[aria-hidden="false"],
  .drawer.is-open,
  .drawer[aria-hidden="false"]{
    transform: translateY(0) !important;
  }
}

/* ─── §36g  Final overflow killer (mobile) ─────────────────────── */
/* The disclosure bar text and certain inline-styled rows are pushing
   beyond 100vw. Wrap or clip everything. */
@media (max-width: 640px){
  *, *::before, *::after{ max-width: 100vw; }
  body, html{
    overflow-x: clip !important;     /* stronger than hidden, no scroll */
  }
  .disclosure-bar, .top-disclosure, .global-disclosure,
  header + .disclosure, header > .disclosure, .compliance-bar{
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 11px !important;
  }
}

/* ===========================================================
   §37  TYPOGRAPHY — single display face for big readouts
   ===========================================================
   Drop the geometric/bubbly Space-Grotesk on huge numerals;
   use JetBrains Mono Bold for the chunky 1.0000×, 12.34×,
   draw values, pocket numbers, keno hits etc. Cleaner,
   more "instrument", matches the "100% RTP" technical voice.

   Note: JetBrains Mono is already loaded on every game page
   via the existing Google Fonts link. No new font network calls.
*/

/* All large in-game readouts: limbo/crash/dice/coin mult, roulette draw, keno board */
.limbo-mult,
.crash-mult,
[data-mult].big,
.roulette-result,
.dice-roll-value,
.coin-call,
.keno-draw,
.draw-display,
.stage-mult,
.big-readout {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "ss01" 1, "cv01" 1 !important;
}

/* Big-flash overlay text — same display face for cohesion */
.big-flash {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

/* TARGET label (limbo) — keep mono, tighten */
.limbo-tline__value {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}

/* Bet input + cost pill — tight mono digits */
[data-bet],
[data-bet-cost-amt],
[data-target],
[data-cashout],
[data-balance] {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* ===========================================================
   §38  DESKTOP THREADING — bet-bar reads as ONE control group
   ===========================================================
   On desktop the bet input, chips, cost pill, ROLL button
   used to read as 4 disconnected widgets. Tighten gaps,
   align baselines, give the whole row a subtle frame so it
   reads as a single instrument.
*/

@media (min-width: 768px) {

  .bet-bar {
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 14px 16px !important;
    margin-top: 18px;
  }

  .bet-bar-inner {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
  }

  /* bet input + chips + cost all share one tight cluster */
  .bet-amount {
    display: flex !important;
    align-items: end !important;
    gap: 10px !important;
    flex: 1 1 auto;
  }

  .bet-amount .field {
    min-width: 132px !important;
  }

  .bet-amount .input[data-bet] {
    height: 44px;
    font-size: 18px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
  }

  .bet-amount .input[data-bet]:focus {
    border-color: var(--gold, #D4AF37);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
    outline: none;
  }

  .bet-chips {
    display: flex !important;
    gap: 4px !important;
    align-self: flex-end;
    padding-bottom: 0;
  }

  .bet-chips .bet-chip {
    height: 44px;
    min-width: 44px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    color: rgba(255,255,255,0.85);
    transition: all 120ms ease;
  }

  .bet-chips .bet-chip:hover {
    background: rgba(212,175,55,0.10);
    border-color: rgba(212,175,55,0.45);
    color: #fff;
  }

  /* cost pill — visually attached to chips */
  .bet-cost {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    margin-left: 4px;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    align-self: flex-end;
  }

  .bet-cost .bc-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
  }

  .bet-cost .bc-amt {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-weight: 700;
    font-size: 16px;
    color: var(--gold, #D4AF37);
    letter-spacing: -0.02em;
  }

  /* ROLL button — substantial, the visual anchor of the cluster */
  .bet-action {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .bet-action .btn-lg {
    height: 52px;
    padding: 0 32px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 10px;
    background: linear-gradient(180deg, #C2F542 0%, #A6D928 100%);
    color: #0A0A0E;
    border: none;
    box-shadow: 0 4px 14px rgba(194,245,66,0.25), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 90ms ease, box-shadow 90ms ease;
  }

  .bet-action .btn-lg:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(194,245,66,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  }

  .bet-action .btn-lg:active {
    transform: translateY(0);
  }

  /* playing-with row sits above, smaller, more like a status line */
  .playing-with {
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
}

/* ===========================================================
   §38b  STAGE — readout container gets subtle on-brand frame
   ===========================================================
   So the big number doesn't float in a void. Soft gold radial
   behind the limbo/crash/dice mult, very low opacity.
*/

.game-stage {
  position: relative;
}

.game-stage::before {
  content: "";
  position: absolute;
  inset: 10% 25%;
  background: radial-gradient(ellipse at center,
              rgba(212,175,55,0.06) 0%,
              rgba(212,175,55,0) 70%);
  pointer-events: none;
  z-index: 0;
}

.game-stage > * { position: relative; z-index: 1; }

/* ==========================================================================
   §39 BRAND v2 — Lobby card tile art (crashgames.com)
   ========================================================================== */
.lobby-card__art{
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  position: relative;
}
.lobby-card[href*="crash"]    .lobby-card__art{ background-image: url('../assets/img/tiles_v2/tile_crash_v2.jpg'); }
.lobby-card[href*="limbo"]    .lobby-card__art{ background-image: url('../assets/img/tiles_v2/tile_limbo_v2.jpg'); }
.lobby-card[href*="mines"]    .lobby-card__art{ background-image: url('../assets/img/tiles_v2/tile_mines_v2.jpg'); }
.lobby-card[href*="plinko"]   .lobby-card__art{ background-image: url('../assets/img/tiles_v2/tile_plinko_v2.jpg'); }
.lobby-card[href*="dice"]     .lobby-card__art{ background-image: url('../assets/img/tiles_v2/tile_dice_v2.jpg'); }
.lobby-card[href*="roulette"] .lobby-card__art{ background-image: url('../assets/img/tiles_v2/tile_roulette_v2.jpg'); }
.lobby-card[href*="chicken"]  .lobby-card__art{ background-image: url('../assets/img/tiles_v2/tile_chicken_v2.jpg'); }
.lobby-card[href*="coin"]     .lobby-card__art{ background-image: url('../assets/img/tiles_v2/tile_coin_v2.jpg'); }
.lobby-card[href*="keno"]     .lobby-card__art{ background-image: url('../assets/img/tiles_v2/tile_keno_v2.jpg'); }
/* Hide legacy SVG icons now that we have real art */
.lobby-card__art svg{ display: none !important; }
/* Subtle dark gradient on left side for text legibility on body row */
.lobby-card__art::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,12,20,.55) 0%, rgba(8,12,20,.12) 35%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}
.lobby-card__hover{ z-index: 2; }

/* ==========================================================================
   §40 MOBILE FIXES — From mobile_ux_audit_mqay23ye 2026-06-12
   ========================================================================== */
@media (max-width: 768px){
  /* 1) Sticky bet bar — pin to viewport, not scroll container */
  .bet-bar{
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: rgba(10,14,22,.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(212,175,55,.22);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  /* Push game-shell content above the fixed bar */
  .game-shell{ padding-bottom: 140px !important; }

  /* 2) Tap targets — 44x44 minimum */
  .icon-btn, .nav-icon, .btn-icon, .header-icon{
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* 3) Kill iOS zoom-on-focus across ALL game inputs */
  [data-game] input,
  .game-shell input[type="text"],
  .game-shell input[type="number"],
  .game-shell input[inputmode="decimal"],
  .seed-input, .target-input, .cashout-input{
    font-size: 16px !important;
  }

  /* 4) Roulette bet buttons — bigger tap area */
  .rbet{
    padding: 12px 8px !important;
    font-size: 13px !important;
    min-height: 44px !important;
  }
}

/* 5) Index hamburger — unify with §36e off-canvas pattern */
[data-mobile-nav].open,
[data-mobile-nav].is-open{
  transform: translateX(0) !important;
}
[data-mobile-nav]{
  transition: transform .25s ease;
}
@media (max-width: 768px){
  [data-mobile-nav]:not(.open):not(.is-open){
    transform: translateX(-100%);
    pointer-events: none;
  }
}