/**
 * AviatorPro "Light Luxury" Design System Foundation
 * Step 1 of 7: Design Tokens, Typography, Scales & Global Utilities
 * Theme: Light Luxury (Warm, Bright, Colorful porcelain with jewel-toned accents)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700;800&family=Noto+Sans+Bengali:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@600;700;800&family=Sora:wght@600;700;800&display=swap');
@import url('notify.css');

:root {
  /* ==========================================================================
     1. COLOR SYSTEM (CALM, ELEGANT, LUXURIOUS)
     ========================================================================== */
  /* Surfaces & Borders */
  --bg: #FCFAF7;
  --surface: #FFFFFF;
  --surface-muted: #F9F7F4;
  --border-subtle: #EFE9E1;
  --border-card: #EFE9E1;

  /* Primary Brand: Ruby #E11D48 (hover #BE123C) */
  --primary: #E11D48;
  --primary-hover: #BE123C;
  --primary-gradient: linear-gradient(135deg, #E11D48 0%, #F43F5E 100%);
  --primary-shadow: 0 4px 14px rgba(225, 29, 72, 0.2);

  /* Luxury Accent: Champagne Gold (text calibrated to #926004 for WCAG AA 5.39:1 on white / 4.88:1 on fill) */
  --gold-text: #926004;
  --gold-border: #D4A853;
  --gold-fill: #FBF3E0;

  /* Success / Wins */
  --success-text: #047857;
  --success-fill: #ECFDF5;

  /* Text Colors */
  --text-heading: #111827;
  --text-body: #374151;
  --text-secondary: #6B7280;

  /* Depth from Cards: Standard Shadows */
  --card-shadow: 0 1px 2px rgba(30, 20, 10, 0.04), 0 8px 24px rgba(30, 20, 10, 0.06);
  --card-shadow-hover: 0 4px 6px rgba(30, 20, 10, 0.05), 0 14px 32px rgba(30, 20, 10, 0.08);
  --hero-halo: 0 30px 60px -20px rgba(225, 29, 72, 0.25);

  /* ==========================================================================
     2. TYPOGRAPHY TOKENS
     ========================================================================== */
  --font-heading: 'Plus Jakarta Sans', 'Sora', 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-number: 'JetBrains Mono', 'Noto Sans Bengali', monospace;

  /* Dimensions & Spacing */
  --radius-card: 20px;
  --radius-btn: 12px;
  --btn-height: 48px;

  /* Fluid Headings */
  --font-display: clamp(40px, 6vw, 76px);
  --font-h1: clamp(28px, 3.5vw, 44px);
  --font-h2: clamp(22px, 2.5vw, 32px);
  --font-h3: clamp(18px, 1.8vw, 24px);
  --font-h4: clamp(15px, 1.2vw, 18px);

  /* Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-28: 112px;
  --space-30: 120px;
}

/* ==========================================================================
   4. GLOBAL RESET & BASE RULES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
  overflow-x: clip; /* Strict prevention of horizontal overflow */
  background: linear-gradient(180deg, #FCFAF7 0%, #FFFFFF 50%, #FBF7F1 100%) !important;
  background-attachment: fixed;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 15px; /* Minimum 15px mobile body */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
    font-size: 16px; /* Minimum 16px desktop body */
  }
}

/* Typography Headings (line-height 1.1, color #111827, balanced text wrap) */
h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #111827;
  line-height: 1.1;
  margin-top: 0;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--font-h1); font-weight: 800; line-height: 1.1; }
h2, .h2 { font-size: var(--font-h2); font-weight: 800; line-height: 1.15; }
h3, .h3 { font-size: var(--font-h3); font-weight: 700; line-height: 1.2; }
h4, .h4 { font-size: var(--font-h4); font-weight: 700; line-height: 1.25; }
.h-display { font-size: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }

/* Numeric & Money styling */
.font-num,
.font-mono-num {
  font-family: var(--font-number);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on, 'zero' on;
}

/* Form Inputs (Prevent iOS automatic zoom) */
input,
select,
textarea {
  font-size: 16px !important; /* Min 16px prevents iOS zoom on focus */
  font-family: inherit;
}

/* Selection */
::selection {
  background: var(--crimson-mid);
  color: #FFFFFF;
}

/* ==========================================================================
   5. REUSABLE UTILITIES
   ========================================================================== */

/* Glass Card */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
}

.glass-card-lg {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-warm-md);
}

/* Gradient Text Utilities */
.text-gold-gradient {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.text-crimson-gradient {
  background: var(--crimson-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.text-violet-gradient {
  background: var(--violet-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.text-sky-gradient {
  background: var(--sky-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.text-emerald-gradient {
  background: var(--emerald-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Base Button Framework */
.btn {
  min-height: var(--btn-min-height);
  padding: 0 var(--space-6);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
}

/* Active Press scale */
.btn:active {
  transform: scale(0.98);
}

/* Button Variants */
/* 1. Primary CTA (Crimson Gradient) */
.btn-primary {
  background: var(--crimson-gradient);
  color: #FFFFFF;
  box-shadow: var(--crimson-shadow);
}

/* 2. Gold Button */
.btn-gold {
  background: var(--gold-gradient);
  color: #1E1B3A;
  box-shadow: var(--gold-shadow);
}

/* 3. Outline Button */
.btn-outline {
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid var(--border-subtle);
  color: var(--text-heading);
  box-shadow: var(--shadow-warm-sm);
}

/* 4. Game Accent Button Variants */
.btn-aviator {
  background: var(--crimson-gradient);
  color: #FFFFFF;
  box-shadow: var(--crimson-shadow);
}

.btn-slots {
  background: var(--violet-gradient);
  color: #FFFFFF;
  box-shadow: var(--violet-shadow);
}

.btn-coinflip {
  background: var(--sky-gradient);
  color: #FFFFFF;
  box-shadow: var(--sky-shadow);
}

.btn-lottery {
  background: var(--emerald-gradient);
  color: #FFFFFF;
  box-shadow: var(--emerald-shadow);
}

/* Accent Card Wrappers per Game */
.accent-aviator {
  border-color: rgba(244, 63, 94, 0.35);
  box-shadow: var(--shadow-crimson-md);
}

.accent-slots {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: var(--shadow-violet-md);
}

.accent-coinflip {
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: var(--shadow-sky-md);
}

.accent-lottery {
  border-color: rgba(5, 150, 105, 0.35);
  box-shadow: var(--shadow-emerald-md);
}

/* Hover Effects ONLY inside @media (hover: hover) to protect touch devices */
@media (hover: hover) {
  .btn-primary:hover,
  .btn-aviator:hover {
    filter: brightness(1.05);
    box-shadow: var(--crimson-shadow-lg);
    transform: translateY(-1px);
  }

  .btn-gold:hover {
    filter: brightness(1.05);
    box-shadow: 0 14px 30px -4px rgba(245, 158, 11, 0.45);
    transform: translateY(-1px);
  }

  .btn-outline:hover {
    background: var(--surface-tint);
    border-color: rgba(244, 63, 94, 0.4);
    color: var(--crimson-start);
    transform: translateY(-1px);
  }

  .btn-slots:hover {
    filter: brightness(1.06);
    box-shadow: 0 14px 30px -4px rgba(124, 58, 237, 0.45);
    transform: translateY(-1px);
  }

  .btn-coinflip:hover {
    filter: brightness(1.06);
    box-shadow: 0 14px 30px -4px rgba(14, 165, 233, 0.45);
    transform: translateY(-1px);
  }

  .btn-lottery:hover {
    filter: brightness(1.06);
    box-shadow: 0 14px 30px -4px rgba(5, 150, 105, 0.45);
    transform: translateY(-1px);
  }

  .glass-card:hover {
    border-color: rgba(255, 255, 255, 1);
    box-shadow: var(--shadow-warm-md);
  }
}

/* ==========================================================================
   6. ACCESSIBILITY & PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:active {
    transform: none !important;
  }
}

/* ==========================================================================
   7. MOBILE-FIRST RESPONSIVE BREAKPOINT SYSTEM & CONTAINER SCALES
   base: 360px (mobile)
   sm:   640px (large mobile/phablet)
   md:   768px (tablets)
   lg:   1024px (desktops / laptops)
   xl:   1280px (large screens)
   2xl:  1600px (high-res displays)
   ========================================================================== */
@media (min-width: 360px) {
  :root {
    --container-padding: var(--space-4);
  }
}

@media (min-width: 640px) {
  :root {
    --container-padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-8);
  }
}

/* ==========================================================================
   8. LAYOUT & FULL-BLEED CONTAINER SYSTEM
   ========================================================================== */
.main-container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

.main-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1600px) {
  .main-container {
    max-width: 1200px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Section spacing: 80px desktop, 56px mobile (40px/28px top & bottom) */
.section-luxury,
.section-full-bleed {
  width: 100%;
  position: relative;
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

@media (min-width: 1024px) {
  .section-luxury,
  .section-full-bleed {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}

/* Small Gold Eyebrow Line above Section Titles - disabled to prevent ghost lines */
.gold-eyebrow-line {
  display: none !important;
}

/* ==========================================================================
   9. PAGE BACKGROUND: SINGLE CONTINUOUS WARM WHITE #FCFAF7
   ========================================================================== */
.page-bg-wrapper {
  display: none !important;
}

.color-blob {
  display: none !important;
}
.blob-peach {
  background: #FFE3C7;
  opacity: 0.70;
  width: 640px;
  height: 640px;
  top: 25%;
  right: -160px;
  animation-duration: 26s;
  animation-delay: -6s;
}

/* Lavender Blob (#E9DDFF, 65% opacity) - Lower Left */
.blob-lavender {
  background: #E9DDFF;
  opacity: 0.65;
  width: 560px;
  height: 560px;
  top: 55%;
  left: -150px;
  animation-duration: 28s;
  animation-delay: -12s;
}

/* Mint Blob (#D7F7EC, 60% opacity) - Bottom Right */
.blob-mint {
  background: #D7F7EC;
  opacity: 0.60;
  width: 540px;
  height: 540px;
  bottom: -120px;
  right: -90px;
  animation-duration: 25s;
  animation-delay: -18s;
}

@keyframes blob-drift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(55px, -45px) scale(1.08); }
  66% { transform: translate(-45px, 50px) scale(0.94); }
  100% { transform: translate(35px, -30px) scale(1.04); }
}

/* Mobile optimizations: only 2 smaller blobs, lower blur, no animation lag */
@media (max-width: 639px) {
  .blob-lavender,
  .blob-mint {
    display: none;
  }
  .blob-pink {
    width: 270px;
    height: 270px;
    filter: blur(48px);
    opacity: 0.65;
    top: -40px;
    left: -40px;
  }
  .blob-peach {
    width: 290px;
    height: 290px;
    filter: blur(48px);
    opacity: 0.60;
    top: 38%;
    right: -50px;
  }
}

/* Pause drift animation when reduced-motion is requested */
@media (prefers-reduced-motion: reduce) {
  .color-blob {
    animation: none !important;
  }
}

/* ==========================================================================
   10. 3-COLUMN PORTAL LAYOUT GRID & STICKY SIDE RAILS (≥1600px)
   ========================================================================== */

/* The main layout wrapper for page content */
.portal-layout-grid {
  width: 100%;
  margin: 0 auto;
}

/* Side rails hidden by default on all screens < 1600px (including 1280-1599px and mobile) */
.side-rail {
  display: none !important;
}

/* Between 1280px and 1599px: hide rails, main content uses full container */
@media (min-width: 1280px) and (max-width: 1599px) {
  .portal-layout-grid {
    display: block;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
  }
  .main-content-col {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
  }
}

/* 3-Column CSS Grid at ≥1600px: [left rail 260px] [main content, max 1180px] [right rail 280px], gap 24px, centered with max-width 1800px */
@media (min-width: 1600px) {
  .portal-layout-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1180px) 280px;
    justify-content: center;
    gap: 24px;
    max-width: 1800px;
    margin: 0 auto;
    padding: 16px 20px 48px;
    align-items: start; /* CRITICAL: allows sticky side rails to remain sticky */
    width: 100%;
    box-sizing: border-box;
  }

  .main-content-col {
    max-width: 1180px;
    width: 100%;
    min-width: 0;
  }

  /* Rails start BELOW the ticker (top offset = header + ticker height + 16px = 132px).
     Rails are position: sticky, top: (header + ticker + 16px) so they stay visible while scrolling the entire page.
     Internal scroll if taller than viewport: max-height: calc(100dvh - 140px), thin scrollbar. */
  .side-rail {
    display: flex !important;
    flex-direction: column;
    position: sticky;
    top: calc(72px + 44px + 16px);
    height: calc(100dvh - 140px);
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(225, 29, 72, 0.25) transparent;
    z-index: 25;
    box-sizing: border-box;
  }

  .side-rail::-webkit-scrollbar {
    width: 4px;
  }
  .side-rail::-webkit-scrollbar-track {
    background: transparent;
  }
  .side-rail::-webkit-scrollbar-thumb {
    background: rgba(244, 63, 94, 0.25);
    border-radius: 9999px;
  }
  .side-rail::-webkit-scrollbar-thumb:hover {
    background: rgba(244, 63, 94, 0.45);
  }

  .side-rail-left {
    width: 260px;
    overflow: hidden !important;
  }

  .side-rail-right {
    width: 280px;
  }
}

/* Custom scrollbar for right rail */
.rail-scrollable {
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 63, 94, 0.25) transparent;
}
.rail-scrollable::-webkit-scrollbar {
  width: 4px;
}
.rail-scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.rail-scrollable::-webkit-scrollbar-thumb {
  background: rgba(244, 63, 94, 0.25);
  border-radius: 9999px;
}
.rail-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 63, 94, 0.45);
}

/* Continuous vertical ticker animation for Left Rail */
@keyframes vertical-ticker-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.vertical-marquee-mask {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
}

.vertical-ticker-track {
  display: flex;
  flex-direction: column;
  animation: vertical-ticker-scroll 24s linear infinite;
  will-change: transform;
}

.vertical-ticker-track:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .vertical-ticker-track {
    animation: none !important;
    overflow-y: auto;
  }
}

/* ==========================================================================
   11. STEP 3: HEADER, TICKER, CATEGORY PILLS & NAVIGATION UTILITIES
   ========================================================================== */

/* Gradient Hairlines disabled for pure restrained luxury */
.gradient-hairline-bottom {
  border-bottom: 1px solid #EFE9E1;
}
.gradient-hairline-bottom::after {
  display: none !important;
}

.gradient-hairline-top {
  border-top: 1px solid #EFE9E1;
}
.gradient-hairline-top::before {
  display: none !important;
}

/* Gold-to-Orange Gradient Bonus Button with 4s Shimmer Sweep */
.btn-bonus-shimmer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 45%, #F97316 100%);
  color: #1E1B3A;
  font-family: var(--font-heading);
  font-weight: 800;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.35);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.btn-bonus-shimmer:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.45);
}
.btn-bonus-shimmer:active {
  transform: scale(0.97);
}
.btn-bonus-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
  transform: rotate(25deg);
  animation: bonus-shimmer-sweep 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
@keyframes bonus-shimmer-sweep {
  0%, 70% { transform: translateX(-150%) rotate(25deg); }
  100% { transform: translateX(500%) rotate(25deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-bonus-shimmer::after {
    animation: none !important;
  }
}

/* Live Ticker: Restrained Luxury (Clean text items, no colored pill borders) */
.ticker-pill {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: none;
  font-size: 13px;
  color: #374151;
}
.ticker-pill:hover {
  border-color: transparent;
}
.ticker-pill-aviator,
.ticker-pill-slot,
.ticker-pill-coin,
.ticker-pill-lottery {
  border-left: none !important;
}

/* Horizontal Ticker Marquee Track */
@keyframes ticker-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0px;
  animation: ticker-marquee 36s linear infinite;
  will-change: transform;
}
.ticker-marquee-track:hover,
.ticker-marquee-track:active {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .ticker-marquee-track {
    animation: none !important;
    overflow-x: auto;
  }
}

/* Category Pills: Horizontal scroll with scroll-snap & mobile fade mask */
.category-pills-container {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-pills-container::-webkit-scrollbar {
  display: none;
}
.category-pills-container > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

.category-pills-mask {
  -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black calc(100% - 36px), transparent 100%);
}
@media (min-width: 1024px) {
  .category-pills-mask {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.category-pill {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  touch-action: manipulation;
}
.category-pill-inactive {
  background: #FFFFFF;
  border: 1px solid #EFE9E1;
  color: #374151;
  box-shadow: 0 1px 2px rgba(30, 20, 10, 0.04);
}
.category-pill-inactive:hover {
  background: #F9F7F4;
  border-color: #D1D5DB;
  color: #111827;
}
.category-pill-active {
  background: #E11D48;
  color: #FFFFFF;
  border: 1px solid #E11D48;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25);
}

/* Slide-in Mobile Drawer (below lg) */
#mobile-drawer-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 85vw;
  max-width: 320px;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
#mobile-drawer-panel.drawer-open {
  transform: translateX(0) !important;
}

#mobile-drawer-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#mobile-drawer-backdrop.backdrop-open {
  opacity: 1;
  pointer-events: auto;
}

/* 56px Tap Rows in Drawer */
.drawer-nav-item {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  border-radius: 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-heading);
  transition: background-color 0.18s ease, color 0.18s ease;
  text-decoration: none;
}
.drawer-nav-item:hover,
.drawer-nav-item:active {
  background-color: var(--surface-tint);
  color: var(--crimson-start);
}

/* Mobile Bottom Nav (below md) */
.mobile-bottom-nav {
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-tab {
  min-height: 52px;
  min-width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform 0.15s ease;
}
.bottom-nav-tab:active {
  transform: scale(0.94);
}

/* ==========================================================================
   12. STEP 4: HERO SECTION - SUNRISE GRADIENT, ROTATING CONIC BORDER & FLOATS
   ========================================================================== */

/* ==========================================================================
   12. HERO SECTION - RESTRAINED CLEAN LUXURY & SUBTLE GLOW
   ========================================================================== */

/* Full-bleed hero background: transparent on page background #FCFAF7 */
.hero-sunrise-bg {
  background: transparent !important;
  position: relative;
  overflow: hidden;
}

/* Jackpot Card: Clean white card with Champagne Gold border */
.conic-gold-border {
  position: relative;
  border-radius: 20px;
  border: 1px solid #D4A853;
  background: #FFFFFF;
  box-shadow: var(--card-shadow);
  display: flex;
  overflow: hidden;
  min-width: 0;
}
.conic-gold-inner {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border-radius: 19px;
  height: 100%;
  width: 100%;
  min-width: 0;
}

/* Heroine Card Shadow: Soft large shadow */
.heroine-glow-halo {
  box-shadow: 0 30px 60px -20px rgba(225, 29, 72, 0.25) !important;
}

/* ==========================================================================
   STEP 5: CASINO HEROINES LOBBY & GAME CARDS (CALM LUXURY)
   ========================================================================== */

/* Typography utilities */
.font-sora {
  font-family: var(--font-heading), 'Sora', 'Noto Sans Bengali', sans-serif;
}
.font-jetbrains {
  font-family: var(--font-number), 'JetBrains Mono', 'Noto Sans Bengali', monospace;
  font-feature-settings: 'tnum' 1;
}

/* Dedicated Taka symbol styling */
.taka {
  font-family: 'Noto Sans Bengali', inherit, sans-serif;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
  display: inline;
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .lg\:line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Horizontal filter pills bar */
.heroine-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #EFE9E1;
  background: #FFFFFF;
  color: #374151;
  box-shadow: 0 1px 2px 0 rgba(30, 20, 10, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  user-select: none;
}
.heroine-filter-pill:hover {
  background: #F9F7F4;
  color: #111827;
  border-color: #D1D5DB;
}
.heroine-filter-pill.active {
  background: #E11D48 !important;
  color: #FFFFFF !important;
  border-color: #E11D48 !important;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25) !important;
}

/* Base Game Card: White, 1px border #EFE9E1, radius 20px, lift 4px on hover */
.game-card {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #EFE9E1 !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(30, 20, 10, 0.04), 0 8px 24px rgba(30, 20, 10, 0.06) !important;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.3s ease;
  will-change: transform;
}
.game-card:active {
  transform: scale(0.98);
}

/* 3px Top Accent Line per Game */
.game-card-crimson { border-top: 3px solid #E11D48 !important; }
.game-card-violet { border-top: 3px solid #7C3AED !important; }
.game-card-sky { border-top: 3px solid #0284C7 !important; }
.game-card-emerald { border-top: 3px solid #059669 !important; }
.game-card-gold { border-top: 3px solid #D4A853 !important; }

/* Image container and hover zoom */
.game-card-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background-color: #F8FAFC;
  isolation: isolate;
}
.game-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover effects (only inside @media (hover: hover)): border becomes warm gold tint #E7D9C2 */
@media (hover: hover) {
  .game-card:hover {
    transform: translateY(-4px) !important;
    border-color: #E7D9C2 !important;
    box-shadow: 0 4px 6px rgba(30, 20, 10, 0.05), 0 14px 32px rgba(30, 20, 10, 0.08) !important;
  }
  .game-card:hover .game-card-img {
    transform: scale(1.04);
  }
  .payment-tile:hover {
    border-color: #E7D9C2 !important;
    transform: translateY(-3px);
  }
  .tier-card:hover {
    border-color: #E7D9C2 !important;
  }
}

/* Game Card Title: No ellipsis, 2 lines allowed, equal min-height for row alignment */
.game-card-title-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  min-height: 48px;
}
@media (min-width: 640px) {
  .game-card-title-container {
    min-height: 56px;
  }
}
.game-card-title-text {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.28;
  color: #111827;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

#games {
  scroll-margin-top: 140px;
}

/* ==========================================================================
   STEP 6: AGENT SECTION, PAYMENTS TILES & FOOTER (RESTRAINED LUXURY)
   ========================================================================== */

/* Agent Section: Subtle luxury champagne gradient */
.agent-champagne-bg {
  background: linear-gradient(135deg, #FFFDF8 0%, #FAF0DB 100%) !important;
  position: relative;
}

#vip-agent {
  scroll-margin-top: 140px;
}

/* Gold Glow Frame for Duchess Vivian Image */
.gold-glow-frame {
  border: 1px solid #D4A853;
  box-shadow: 0 8px 24px rgba(212, 168, 83, 0.15);
}

/* Luxury Accent Gold Text */
.text-gold-orange-gradient {
  color: #926004 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
  font-weight: 800;
}

/* Tier Cards: Soft Champagne Gold fill with gold numbers */
.tier-card {
  position: relative;
  background: #FBF3E0 !important;
  border: 1px solid rgba(212, 168, 83, 0.4) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(30, 20, 10, 0.04), 0 8px 24px rgba(30, 20, 10, 0.06);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .tier-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(30, 20, 10, 0.05), 0 14px 32px rgba(30, 20, 10, 0.08);
    border-color: rgba(212, 168, 83, 0.7) !important;
  }
}

/* Payment Brand Tiles: Clean white cards with subtle shadow and border */
.payment-tile {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 24px !important;
  border: 1px solid #EFE9E1 !important;
  box-shadow: 0 1px 2px rgba(30, 20, 10, 0.04), 0 8px 24px rgba(30, 20, 10, 0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.payment-tile-bkash,
.payment-tile-nagad,
.payment-tile-rocket,
.payment-tile-upay {
  border: 1px solid #EFE9E1 !important;
  box-shadow: 0 1px 2px rgba(30, 20, 10, 0.04), 0 8px 24px rgba(30, 20, 10, 0.06) !important;
}

@media (hover: hover) {
  .payment-tile:hover {
    border-color: #D1D5DB !important;
    box-shadow: 0 4px 6px rgba(30, 20, 10, 0.05), 0 14px 32px rgba(30, 20, 10, 0.08) !important;
    transform: translateY(-3px);
  }
}

/* Footer: Seamless warm white #FCFAF7 */
.footer-lavender-bg {
  background: #FCFAF7 !important;
  border-top: 1px solid #EFE9E1 !important;
}

/* ==========================================================================
   STEP 7: MOTION, SCROLL REVEAL & FINAL QA POLISH
   ========================================================================== */

/* Scroll Reveal Fade-up 16px */
.reveal-init {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Reduced Motion Override for Reveal & Keyframes */
@media (prefers-reduced-motion: reduce) {
  .reveal-init {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .marquee-track,
  .ambient-blob,
  .animate-float-coin-1,
  .animate-float-coin-2,
  .animate-float-plane,
  .animate-sparkle,
  .btn-bonus-shimmer::after {
    animation: none !important;
  }
}

/* ==========================================================================
   LUXURY "WOW" MICRO-INTERACTIONS (60FPS TRANSFORM/OPACITY ONLY)
   ========================================================================== */

/* Primary Ruby Luxury CTA: Subtle Champagne Gold light pass */
.btn-luxury-ruby {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-luxury-ruby::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -70%;
  width: 45%;
  height: 220%;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.22) 40%, 
    rgba(212, 168, 83, 0.28) 60%, 
    transparent 100%
  );
  transform: rotate(25deg);
  animation: ruby-sheen-sweep 7s infinite cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}
@keyframes ruby-sheen-sweep {
  0%, 75% { transform: translateX(-160%) rotate(25deg); }
  100% { transform: translateX(650%) rotate(25deg); }
}

/* Mascot Badges Gentle Breathing Float */
.badge-breathing-float {
  animation: subtle-breathing 4s ease-in-out infinite;
  will-change: transform;
}
@keyframes subtle-breathing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Mega Jackpot Micro-Pulse on Real-time Tick */
.jackpot-tick {
  animation: jackpot-glow-pulse 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes jackpot-glow-pulse {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.025); filter: brightness(1.15); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .game-card,
  .game-card:hover,
  .game-card-img,
  .game-card:hover .game-card-img,
  .game-card:active {
    transform: none !important;
    transition: none !important;
  }
  .btn-luxury-ruby::after,
  .badge-breathing-float,
  .jackpot-tick {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ==========================================================================
   PART B: LUXURY "WOW" LAYER (60FPS TRANSFORM/OPACITY ONLY)
   ========================================================================== */

/* 1. Page Load Intro (Session based, max 1.2s) */
.intro-animating header {
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
.intro-animating.intro-header-done header {
  transform: translateY(0);
  opacity: 1;
}

.intro-animating .hero-stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
  will-change: transform, opacity;
}
.intro-animating .hero-stagger-item.intro-visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-animating .heroine-intro-card {
  transform: scale(0.96);
  filter: blur(6px);
  opacity: 0.7;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.85s ease;
  will-change: transform, filter, opacity;
}
.intro-animating .heroine-intro-card.intro-visible {
  transform: scale(1);
  filter: blur(0px);
  opacity: 1;
}

/* 2. Hero Heroine Card: Living Poster */
.living-poster-wrap {
  perspective: 1000px;
  transform-style: preserve-3d;
  position: relative;
  border-radius: 24px;
}
.living-poster-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.12s ease-out;
}
.living-poster-sheen {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: background, opacity;
}
.living-poster-wrap:hover .living-poster-sheen {
  opacity: 1;
}

/* Border Shimmer Sweep every 5s */
.poster-border-shimmer {
  position: relative;
}
.poster-border-shimmer::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 25px;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(212, 168, 83, 0.75) 50%, 
    transparent 100%
  );
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.5px;
  pointer-events: none;
  animation: border-shimmer-sweep 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 25;
}
@keyframes border-shimmer-sweep {
  0%, 70% { background-position: -200% 0; opacity: 0; }
  75% { opacity: 1; }
  100% { background-position: 200% 0; opacity: 0; }
}

/* Floating Gold Orbit Coins (5 coins) */
.gold-orbit-coin {
  position: absolute;
  pointer-events: none;
  z-index: 30;
  will-change: transform;
  filter: drop-shadow(0 4px 10px rgba(146, 96, 4, 0.28));
}
.gold-coin-1 {
  top: -14px;
  left: 20px;
  width: 34px;
  height: 34px;
  animation: coin-orbit-1 5.5s ease-in-out infinite;
}
.gold-coin-2 {
  top: 18px;
  right: -16px;
  width: 40px;
  height: 40px;
  animation: coin-orbit-2 6.2s ease-in-out infinite;
}
.gold-coin-3 {
  bottom: 80px;
  left: -18px;
  width: 26px;
  height: 26px;
  filter: blur(1.5px) drop-shadow(0 2px 6px rgba(146, 96, 4, 0.2));
  animation: coin-orbit-3 4.8s ease-in-out infinite;
}
.gold-coin-4 {
  bottom: 24px;
  right: -12px;
  width: 36px;
  height: 36px;
  animation: coin-orbit-4 6.8s ease-in-out infinite;
}
.gold-coin-5 {
  bottom: -16px;
  left: 35%;
  width: 30px;
  height: 30px;
  filter: blur(1px) drop-shadow(0 3px 8px rgba(146, 96, 4, 0.25));
  animation: coin-orbit-5 5.8s ease-in-out infinite;
}

@keyframes coin-orbit-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(12deg); }
}
@keyframes coin-orbit-2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(7px) rotate(-14deg); }
}
@keyframes coin-orbit-3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(18deg); }
}
@keyframes coin-orbit-4 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(8px) rotate(-10deg); }
}
@keyframes coin-orbit-5 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(15deg); }
}

/* 3. Real-Time Odometer Digits for Jackpot */
.odometer-wrapper {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  vertical-align: middle;
}
.odometer-digit {
  display: inline-block;
  height: 1.15em;
  line-height: 1.15em;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  width: 0.62em;
}
.odometer-ribbon {
  display: flex;
  flex-direction: column;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.odometer-ribbon span {
  display: block;
  height: 1.15em;
  line-height: 1.15em;
  text-align: center;
}
.odometer-punct {
  display: inline-block;
  vertical-align: top;
  line-height: 1.15em;
}

/* Multiplier crash flash effect */
.multiplier-crash-flash {
  animation: crash-flash 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes crash-flash {
  0% { transform: scale(1.1); color: #BE123C; filter: drop-shadow(0 0 12px rgba(225, 29, 72, 0.6)); }
  50% { transform: scale(0.96); color: #E11D48; }
  100% { transform: scale(1); color: #E11D48; filter: none; }
}

/* 4. Headline Gradient Flow & Twinkle Sparkle */
.headline-amount-gradient {
  background: linear-gradient(90deg, #E11D48 0%, #F97316 35%, #E11D48 70%, #F97316 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: headline-gradient-flow 6s linear infinite;
  display: inline-block;
}
@keyframes headline-gradient-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.plus-sparkle {
  position: absolute;
  top: -8px;
  right: -12px;
  color: #D4A853;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  animation: sparkle-twinkle 3s ease-in-out infinite;
}
@keyframes sparkle-twinkle {
  0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  40% { transform: scale(1.25) rotate(45deg); opacity: 1; filter: drop-shadow(0 0 6px #FBF3E0); }
  70% { transform: scale(0.85) rotate(90deg); opacity: 0.8; }
  85% { transform: scale(0) rotate(135deg); opacity: 0; }
}

/* 5. Game Cards: 3D Tilt, Sheen, Glow Ring & Hover Micro-Interactions */
.game-card-tilt {
  perspective: 800px;
  transform-style: preserve-3d;
}
.card-gloss-sheen {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: background, opacity;
}
.game-card:hover .card-gloss-sheen {
  opacity: 1;
}

@media (hover: hover) {
  .game-card:hover {
    transform: translateY(-5px) !important;
  }
  .game-card:hover .game-card-img {
    transform: scale(1.06) !important;
  }
  .game-card-crimson:hover {
    box-shadow: 0 0 0 1px rgba(225, 29, 72, 0.35), 0 16px 36px -8px rgba(225, 29, 72, 0.16) !important;
    border-color: rgba(225, 29, 72, 0.4) !important;
  }
  .game-card-violet:hover {
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.35), 0 16px 36px -8px rgba(124, 58, 237, 0.16) !important;
    border-color: rgba(124, 58, 237, 0.4) !important;
  }
  .game-card-sky:hover {
    box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.35), 0 16px 36px -8px rgba(2, 132, 199, 0.16) !important;
    border-color: rgba(2, 132, 199, 0.4) !important;
  }
  .game-card-emerald:hover {
    box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.35), 0 16px 36px -8px rgba(5, 150, 105, 0.16) !important;
    border-color: rgba(5, 150, 105, 0.4) !important;
  }
  .game-card-gold:hover {
    box-shadow: 0 0 0 1px rgba(212, 168, 83, 0.45), 0 16px 36px -8px rgba(212, 168, 83, 0.22) !important;
    border-color: rgba(212, 168, 83, 0.5) !important;
  }
  .game-card:hover .fa-arrow-right {
    transform: translateX(4px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* 6. Scroll Storytelling: Drawing Gold Eyebrow Rules & Connector */
.section-gold-rule {
  display: block;
  width: 28px;
  height: 2px;
  background-color: #D4A853;
  border-radius: 9999px;
  margin-bottom: 8px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.section-gold-rule.rule-visible {
  transform: scaleX(1);
}

.tier-connector-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.tier-connector-line.connector-drawn {
  transform: scaleX(1);
}

/* Blur-to-sharp scroll reveal */
.scroll-reveal-item {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(4px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
.scroll-reveal-item.reveal-done {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* 7. Ambient Luxury: Hero Canvas Dust & Cursor Glow */
#hero-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

#hero-cursor-glow {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 168, 83, 0.12) 0%, rgba(225, 29, 72, 0.04) 40%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  will-change: transform, opacity;
}

/* Magnetic Button Shift */
.btn-magnetic {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* 8. Delightful Feedback: Breathing Bonus Button & Leaderboard Medals */
.btn-bonus-breathing {
  animation: bonus-breathing 3s ease-in-out infinite;
  will-change: transform, box-shadow;
}
@keyframes bonus-breathing {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.55);
  }
}

.row-rank-1-shimmer {
  position: relative;
  overflow: hidden;
}
.row-rank-1-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 168, 83, 0.2) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: rank1-shimmer 4.5s infinite linear;
  pointer-events: none;
}
@keyframes rank1-shimmer {
  0% { transform: translateX(-150%); }
  100% { transform: translateX(150%); }
}

.ticker-item-flash {
  animation: gold-win-flash 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes gold-win-flash {
  0% { transform: translateX(-20px); opacity: 0; background-color: #FBF3E0; }
  40% { transform: translateX(0); opacity: 1; background-color: #FBF3E0; border-color: #D4A853; }
  100% { background-color: #FCFAF7; }
}

/* 9. Mobile: Carousel with Snap & Active Nav Bounce */
@media (max-width: 767px) {
  #heroines-cards-grid.mobile-snap-carousel {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
    padding-bottom: 12px;
    padding-left: 12px;
    padding-right: 12px;
    scrollbar-width: none;
  }
  #heroines-cards-grid.mobile-snap-carousel::-webkit-scrollbar {
    display: none;
  }
  #heroines-cards-grid.mobile-snap-carousel > .game-card {
    flex: 0 0 82% !important;
    width: 82% !important;
    scroll-snap-align: center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  }
  #heroines-cards-grid.mobile-snap-carousel > .game-card.carousel-center {
    transform: scale(1.02);
  }
}

.nav-tap-bounce {
  animation: nav-bounce 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes nav-bounce {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.22); }
  75% { transform: scale(0.94); }
}

/* 10. Strict Performance & Prefers-Reduced-Motion Reset */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .section-gold-rule,
  .tier-connector-line,
  .scroll-reveal-item,
  .hero-stagger-item,
  .heroine-intro-card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .gold-orbit-coin,
  #hero-particle-canvas,
  #hero-cursor-glow,
  .hero-rotating-ring,
  .hero-popout-character,
  .poster-border-shimmer::after,
  .row-rank-1-shimmer::after {
    display: none !important;
  }
}

/* ==========================================================================
   11. BOLD LUXURY SYSTEM: POP-OUT, MEGA JACKPOT BAND, BENTO & CALCULATOR
   ========================================================================== */

/* Thin Gold Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #FCFAF7;
}
::-webkit-scrollbar-thumb {
  background: #D4A853;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #B88E3E;
}
* {
  scrollbar-width: thin;
  scrollbar-color: #D4A853 #FCFAF7;
}

/* Standard Section Gaps: 72px Desktop / 48px Mobile Everywhere (36px/24px top & bottom) */
.section-full-bleed {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}
@media (max-width: 767px) {
  .section-full-bleed {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

/* 1. Hero Pop-Out Moment */
.hero-sunrise-bg {
  min-height: 640px;
}

.hero-rotating-ring {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1.5px dashed rgba(212, 168, 83, 0.4);
  animation: ring-rotate-slow 48s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes ring-rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-popout-wrap {
  position: relative;
  width: 100%;
  max-width: 580px;
  perspective: 1200px;
  margin-top: 40px;
}
.hero-card-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 28px;
  background: #FFFFFF;
  border: 1.5px solid rgba(212, 168, 83, 0.45);
  box-shadow: 0 25px 60px -15px rgba(225, 29, 72, 0.22), 0 10px 30px -10px rgba(212, 168, 83, 0.25);
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}
.hero-popout-character {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 108%;
  max-width: none;
  pointer-events: none;
  z-index: 15;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.45));
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-popout-wrap:hover .hero-popout-character {
  transform: translateX(-50%) translateY(-6px) scale(1.02);
}

/* Headline Animated Shine Sweep (6s Loop) */
.headline-shine-sweep {
  background: linear-gradient(110deg, #E11D48 0%, #E11D48 35%, #FFFFFF 50%, #F97316 65%, #E11D48 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: headline-sweep 6s infinite ease-in-out;
}
@keyframes headline-sweep {
  0%, 70% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 2. Full-Width Mega Jackpot Band */
.jackpot-band {
  background: linear-gradient(135deg, #E11D48 0%, #9F1239 40%, #6D28D9 100%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.15), 0 15px 40px -10px rgba(225, 29, 72, 0.35);
}
.jackpot-band-sparkles {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#FDE68A 1.5px, transparent 1.5px), radial-gradient(#FDE68A 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: 0 0, 22px 22px;
  opacity: 0.16;
  pointer-events: none;
}
.jackpot-band-odometer {
  color: #FDE68A;
  text-shadow: 0 0 24px rgba(253, 230, 138, 0.65), 0 0 50px rgba(212, 168, 83, 0.45);
  font-size: clamp(32px, 5vw, 64px);
  min-width: 0;
  max-width: 100%;
}

/* 3. Bento Game Lobby */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.bento-tile {
  position: relative;
  border-radius: 24px;
  background: #FFFFFF;
  border: 1px solid #EFE9E1;
  overflow: hidden;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.bento-tile:hover {
  transform: translateY(-5px);
}
.bento-zone-content {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.bento-zone-art {
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.bento-zone-art picture {
  display: block;
  height: 100%;
  width: auto;
}
.bento-zone-art img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
}
.bento-text-protect {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 75%, rgba(255, 255, 255, 0) 100%);
  border-radius: 14px;
  padding: 6px 10px 6px 0;
}
.bento-character-cutout {
  position: relative;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  display: block;
  max-height: 100%;
  max-width: 100%;
}
.bento-tile:hover .bento-character-cutout {
  transform: translateY(-8px) scale(1.04);
}
.bento-tile-aviator:hover {
  box-shadow: 0 0 0 1px rgba(225, 29, 72, 0.4), 0 20px 45px -10px rgba(225, 29, 72, 0.22);
  border-color: rgba(225, 29, 72, 0.45);
}
.bento-tile-scatters:hover {
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.4), 0 20px 45px -10px rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.45);
}
.bento-tile-coinflip:hover {
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.4), 0 20px 45px -10px rgba(2, 132, 199, 0.22);
  border-color: rgba(2, 132, 199, 0.45);
}
.bento-tile-lottery {
  border: 1px solid #EFE9E1 !important;
}
.bento-tile-lottery:hover {
  border-color: #EFE9E1 !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.08) !important;
}

/* 4. Spotlight Cards */
.spotlight-card {
  background: #FFFFFF;
  border: 1px solid #EFE9E1;
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.spotlight-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -6px rgba(0,0,0,0.08);
}

/* 5. Agent Champagne Luxury Background & Ladder */
.agent-champagne-bg {
  background: linear-gradient(135deg, #FFFBF2 0%, #FAF0DB 100%);
}
.agent-roulette-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  width: 52%;
  height: 100%;
  max-width: 680px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.45;
  /* Dual gradient mask: fades out softly on both the left edge and bottom edge — no hard rectangle */
  -webkit-mask-image: 
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,1) 55%),
    linear-gradient(to top, transparent 0%, rgba(0,0,0,0.6) 20%, rgba(0,0,0,1) 45%);
  mask-image: 
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,1) 55%),
    linear-gradient(to top, transparent 0%, rgba(0,0,0,0.6) 20%, rgba(0,0,0,1) 45%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.agent-vivian-overlap {
  position: absolute;
  right: -10px;
  bottom: 0;
  height: 104%;
  max-height: 480px;
  pointer-events: none;
  filter: drop-shadow(0 15px 35px rgba(146, 96, 4, 0.25));
  z-index: 10;
}
.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: #EFE9E1;
  outline: none;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E11D48;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.calc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* 6. Banking 88px Cards & 3-Step Visual */
.banking-step-line {
  position: absolute;
  top: 24px;
  left: 15%;
  right: 15%;
  border-top: 2px dashed rgba(212, 168, 83, 0.6);
  pointer-events: none;
  z-index: 0;
}
.payment-tile-large {
  height: 88px;
  min-height: 88px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.payment-tile-large:hover img {
  transform: scale(1.12);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Header Wallet Pill Hover & Tap Split (Cash & Locked Bonus) */
.wallet-pill-wrapper {
  position: relative;
  display: inline-flex;
}
.wallet-pill-wrapper.active .wallet-pill-popover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.wallet-pill-popover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}