/* ═══════════════════════════════════════════════════════════════════════════
   GOLDPOT — Premium Dark/Gold Theme v2
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0a0a0f;
  --bg2: #12121a;
  --bg3: #1a1a28;
  --surface: #1e1e2e;
  --surface2: #252538;
  --gold: #f0c040;
  --gold-light: #ffe066;
  --gold-dark: #c8941e;
  --gold-glow: rgba(240, 192, 64, 0.3);
  --blue: #60c0ff;
  --pink: #ff6090;
  --white: #ffffff;
  --text: #e8e8f0;
  --text2: #9898b0;
  --text3: #8888a8;
  --green: #40e070;
  --red: #ff4060;
  --purple: #b060ff;
  --card: #1e1e2e;
  --border: #2a2a3e;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', var(--font);

  /* Spacing scale */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;

  /* Font-size scale */
  --fs-2xs: 0.65rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-md: 0.95rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.3rem;
  --fs-2xl: 1.6rem;
  --fs-3xl: 2rem;
  --fs-4xl: 2.5rem;
  --fs-5xl: 3.5rem;

  /* Accent colors (offers) */
  --lightning: #ff6020;
  --lightning-light: #ff8040;
  --surge: #40a0ff;
  --surge-light: #80c0ff;
  --allin: #40e070;
  --allin-light: #a0e0b0;
  --jackpot-blue: #4080ff;
  --jackpot-light: #80c0ff;

  /* Z-index scale */
  --z-nav: 100;
  --z-sticky: 200;
  --z-hero: 500;
  --z-toast: 600;
  --z-checkout: 700;
  --z-modal: 1000;
  --z-overlay: 5000;
  --z-ticker: 9000;
  --z-splash: 10000;
  --z-error: 100000;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }

/* ─── Offer Dismiss Button ───────────────────────────────────────────────── */
.offer-dismiss {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 10;
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--text3);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  line-height: 1;
}
.offer-dismiss:hover {
  background: rgba(255,255,255,0.15);
  color: var(--white);
  transform: scale(1.1);
}
.flash-banner, .jackpot-banner, .starter-offer,
.lightning-section, .mystery-section, .surge-section,
.allin-section, .streak-saver, .limited-section {
  position: relative;
}
.offer-dismissed {
  display: none !important;
}

/* ─── FOCUS / ACCESSIBILITY ──────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
button:focus:not(:focus-visible) { outline: none; }

/* ─── Screen-reader only utility ─────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ─── Skip-to-content link ───────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #1a1000; padding: 12px 24px;
  border-radius: var(--radius-sm); font-weight: 700; font-size: 0.9rem;
  z-index: 100000; text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ─── ERROR TOAST ──────────────────────────────────────────────────────── */
.error-toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, #ff2040, #ff4060, #ff2040);
  color: #fff; padding: 14px 28px; border-radius: var(--radius);
  font-size: 0.85rem; font-weight: 600; z-index: 100000; opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none; max-width: 90vw; text-align: center;
  box-shadow: 0 8px 32px rgba(255,64,96,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;
  backdrop-filter: blur(12px);
  display: flex; align-items: center; gap: 10px;
}
.error-toast::before {
  content: '⚠'; font-size: 1.1rem; flex-shrink: 0;
}
.error-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Disabled button state */
.btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ─── SPLASH ─────────────────────────────────────────────────────────────── */
.splash {
  position: fixed; inset: 0; z-index: 10000; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.splash-inner { text-align: center; }

/* ─── VIDEO LOGO (shared) ────────────────────────────────────────────────── */
.logo-video-wrap {
  position: relative;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  filter: drop-shadow(0 0 30px rgba(240,192,64,0.5)) drop-shadow(0 0 60px rgba(240,192,64,0.2));
}
.logo-video-wrap::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(240,192,64,0.3);
  pointer-events: none;
  animation: logo-ring-pulse 3s ease-in-out infinite;
}
@keyframes logo-ring-pulse {
  0%, 100% { border-color: rgba(240,192,64,0.15); transform: scale(1); }
  50% { border-color: rgba(240,192,64,0.5); transform: scale(1.02); }
}
.logo-video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Splash logo — large */
.splash-logo-video {
  width: 180px; height: 180px;
  margin-bottom: 28px;
  animation: splash-logo-enter 0.8s cubic-bezier(0.23,1,0.32,1);
}
@keyframes splash-logo-enter {
  0% { opacity: 0; transform: scale(0.6) rotateY(90deg); }
  100% { opacity: 1; transform: scale(1) rotateY(0deg); }
}

/* Hero logo — medium */
.hero-logo-video {
  width: 140px; height: 140px;
  margin-bottom: 16px;
}

/* Top bar logo — compact */
.topbar-logo-video {
  width: 36px; height: 36px;
  filter: drop-shadow(0 0 8px rgba(240,192,64,0.4));
}
.topbar-logo-video::after { display: none; }

.logo-glow {
  width: 120px; height: 120px; margin: 0 auto 24px;
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
  border-radius: 50%; animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; } }
.logo, .logo-sm { font-family: var(--font-display); font-weight: 700; letter-spacing: 4px; color: var(--white); }
.logo { font-size: 3rem; }
.logo span, .logo-sm span { color: var(--gold); }
.logo-sm { font-size: 1.1rem; letter-spacing: 3px; }
.splash-tagline { font-size: 0.8rem; letter-spacing: 4px; color: var(--text3); margin-top: 8px; font-weight: 500; }
.splash-h1 { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; }
.splash-loader { margin-top: 40px; width: 200px; margin-left: auto; margin-right: auto; }
.loader-bar { height: 3px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.loader-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); border-radius: 3px; animation: load-fill 1s ease-out forwards; }
@keyframes load-fill { to { width: 100%; } }

/* ─── HERO SCREEN ────────────────────────────────────────────────────────── */
.hero-screen {
  position: fixed; inset: 0; z-index: var(--z-hero);
  background: linear-gradient(180deg, #0a0a0f 0%, #1a1020 50%, #0a0a0f 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
}
.hero-inner {
  max-width: 420px; width: 100%; text-align: center;
  animation: heroFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes heroFadeIn { from { opacity: 0; transform: translateY(30px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.hero-tagline {
  font-size: 1.1rem; color: var(--text); margin-top: 8px; font-weight: 600;
}
.hero-pot-showcase {
  margin: 28px 0 24px;
  background: linear-gradient(135deg, rgba(240,192,64,0.1), rgba(240,192,64,0.05));
  border: 1px solid rgba(240,192,64,0.2);
  border-radius: var(--radius); padding: 20px;
}
.hero-pot-label { font-size: 0.75rem; color: var(--text3); letter-spacing: 3px; text-transform: uppercase; }
.hero-pot-amount {
  font-family: var(--font-display); font-size: 3rem; color: var(--gold);
  text-shadow: 0 0 30px rgba(240,192,64,0.5); margin: 4px 0;
}
.hero-pot-sub { font-size: 0.82rem; color: var(--text2); }
.hero-how {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left; margin-bottom: 20px;
}
.hero-how-step {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.88rem; color: var(--text2);
}
.hero-step-num {
  width: 26px; height: 26px; min-width: 26px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #1a1000; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 0.75rem;
}
.hero-proof {
  display: flex; justify-content: center; gap: 16px;
  margin-bottom: 16px; padding: 14px;
  background: var(--surface); border-radius: var(--radius-sm);
  border: 1px solid var(--surface2);
}
.hero-proof-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hero-proof-val { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold); font-weight: 700; }
.hero-proof-label { font-size: 0.65rem; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; }
.hero-proof-divider { width: 1px; background: var(--surface2); }
.hero-recent-winner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 20px; font-size: 0.85rem; color: var(--text2);
  animation: heroPulse 2s cubic-bezier(0.43, 0.13, 0.23, 0.96) infinite;
}
@keyframes heroPulse { 0%,100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } }
.hero-cta {
  width: 100%; font-size: 1.1rem; padding: 16px; margin-bottom: 12px;
}
.hero-fine {
  font-size: 0.65rem; color: var(--text3); line-height: 1.5;
}
.hero-fine a { color: var(--text2); }

/* ─── PAYOUT PROOF ───────────────────────────────────────────────────────── */
.payout-proof-section { padding: 0 16px 20px; max-width: 440px; margin: 0 auto; }
.payout-proof-card {
  background: linear-gradient(135deg, rgba(64,224,112,0.08), rgba(64,224,112,0.03));
  border: 1px solid rgba(64,224,112,0.2); border-radius: var(--radius);
  padding: 20px; text-align: center;
}
.payout-proof-title { color: var(--green); font-size: 0.95rem; margin-bottom: 14px; }
.payout-proof-stats {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  margin-bottom: 14px;
}
.payout-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.payout-stat-val { font-family: var(--font-display); font-size: 1.15rem; color: var(--green); font-weight: 700; }
.payout-stat-label { font-size: 0.65rem; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; }
.payout-stat-divider { width: 1px; height: 30px; background: var(--surface2); }
.payout-methods {
  display: flex; justify-content: center; gap: 10px; margin-bottom: 10px;
}
.payout-method {
  background: var(--surface2); padding: 4px 12px; border-radius: 20px;
  font-size: 0.72rem; color: var(--text2); font-weight: 600;
}
.payout-guarantee { font-size: 0.72rem; color: var(--text3); line-height: 1.4; margin: 0; }

/* ─── TRUST FOOTER ENHANCEMENTS ──────────────────────────────────────────── */
.footer-trust {
  display: flex; justify-content: center; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.footer-trust-badge {
  background: var(--surface2); padding: 4px 10px; border-radius: 20px;
  font-size: 0.65rem; color: var(--text2); font-weight: 600;
}
.footer-responsible {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--surface2);
  font-size: 0.6rem; color: var(--text3); line-height: 1.5;
}
.footer-responsible a { color: var(--text2); }
.footer-company { font-size: 0.6rem; color: var(--text3); margin-top: 6px; }
.footer-company a { color: var(--text2); }

/* ─── TOP BAR ────────────────────────────────────────────────────────────── */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; position: sticky; top: 0; z-index: 100;
  background: rgba(10, 10, 15, 0.95); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(240, 192, 64, 0.1);
}
.top-right { display: flex; align-items: center; gap: 8px; }
.live-badge {
  display: flex; align-items: center; gap: 5px; font-size: 0.75rem;
  color: var(--green); font-weight: 600; background: rgba(64, 224, 112, 0.1);
  padding: 5px 10px; border-radius: 20px;
}
.pulse { width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: pulse-dot 1.5s cubic-bezier(0.43, 0.13, 0.23, 0.96) infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.8); } }
.streak-badge {
  font-size: 0.75rem; font-weight: 700; color: var(--lightning-light);
  background: rgba(255, 128, 64, 0.1); padding: 5px 10px; border-radius: 20px;
}
.level-badge {
  font-size: 0.7rem; font-weight: 700; background: var(--surface);
  padding: 5px 10px; border-radius: 20px; color: var(--gold);
  border: 1px solid var(--surface2);
}
.btn-icon {
  background: var(--surface); border: 1px solid var(--surface2);
  color: var(--text2); border-radius: 10px; padding: 7px; cursor: pointer; transition: all 0.2s;
}
.btn-icon:hover { background: var(--surface2); color: var(--gold); }

.server-info {
  text-align: center;
  font-size: 0.68rem;
  color: var(--text2);
  padding: 6px 10px;
  background: rgba(96, 192, 255, 0.06);
  border-bottom: 1px solid rgba(96, 192, 255, 0.16);
  letter-spacing: 0.3px;
}

/* ─── DAILY BONUS BAR — Q5: collapsible into top-bar ────────────────────── */
.daily-bar {
  background: linear-gradient(90deg, rgba(240, 192, 64, 0.12), rgba(255, 96, 144, 0.08));
  border-bottom: 1px solid rgba(240, 192, 64, 0.1);
  padding: 6px 16px; overflow: hidden;
  max-height: 44px; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), padding 0.35s, opacity 0.25s;
}
.daily-bar.collapsed { max-height: 0; padding: 0 16px; opacity: 0; pointer-events: none; }
.daily-bar-inner { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 0.8rem; font-weight: 600; }
.btn-daily, .btn-spin {
  background: var(--gold); color: #1a1000; border: none; padding: 10px 16px;
  border-radius: 20px; font-weight: 700; font-size: 0.75rem; cursor: pointer; transition: all 0.2s;
  min-height: 44px;
}
.btn-spin { background: var(--purple); color: white; }
.btn-daily:hover { background: var(--gold-light); }
.btn-spin:hover { opacity: 0.9; }

/* ─── BORDER TICKER — scrolling text around all 4 edges ──────────────────── */
.border-ticker-side {
  position: fixed;
  z-index: 9999;
  background: var(--bg2);
  overflow: hidden;
}
/* ── Horizontal sides (top / bottom) ── */
/* Q3: shrink tickers from 28→20px to reclaim viewport */
.border-ticker-top,
.border-ticker-bottom {
  left: 0; right: 0;
  height: 20px;
}
.border-ticker-top {
  top: 0;
  border-bottom: 1px solid rgba(240,192,64,0.18);
}
.border-ticker-bottom {
  bottom: 0;
  border-top: 1px solid rgba(240,192,64,0.18);
}
/* ── Vertical sides (left / right) ── */
.border-ticker-left,
.border-ticker-right {
  top: 20px; bottom: 20px;
  width: 20px;
}
.border-ticker-left {
  left: 0;
  border-right: 1px solid rgba(240,192,64,0.18);
}
.border-ticker-right {
  right: 0;
  border-left: 1px solid rgba(240,192,64,0.18);
}

/* ── Horizontal tracks ── */
.border-ticker-top .border-ticker-track,
.border-ticker-bottom .border-ticker-track {
  display: flex; gap: 48px; align-items: center; height: 100%;
  white-space: nowrap; padding-left: 100%;
  animation: bticker-h 35s linear infinite;
}
.border-ticker-bottom .border-ticker-track {
  animation-direction: reverse;
}

/* ── Vertical tracks ── */
.border-ticker-left .border-ticker-track,
.border-ticker-right .border-ticker-track {
  display: flex; flex-direction: column; gap: 48px;
  align-items: center; width: 100%;
  white-space: nowrap; padding-top: 100vh;
  animation: bticker-v 40s linear infinite;
}
.border-ticker-left .border-ticker-track {
  animation-direction: reverse;
}
.border-ticker-left .border-ticker-track .tick-item,
.border-ticker-right .border-ticker-track .tick-item {
  writing-mode: vertical-lr;
  text-orientation: mixed;
}

@keyframes bticker-h { to { transform: translateX(-50%); } }
@keyframes bticker-v { to { transform: translateY(-50%); } }

/* ── Ticker items (shared) ── */
.tick-item {
  font-size: 0.72rem; color: var(--text2);
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: 0.3px;
}
.tick-item b { color: var(--gold-light); }
.tick-paid { color: var(--gold) !important; font-weight: 600; }
.tick-winner { color: var(--gold-light) !important; font-weight: 700; }
.tick-flash { color: var(--lightning-light) !important; }
.tick-vip { color: var(--purple) !important; }
.tick-jackpot { color: var(--blue) !important; }
.tick-jackpot-winner { color: var(--gold-light) !important; font-weight: 800; }
.tick-mission, .tick-milestone { color: var(--green) !important; }
.tick-mystery { color: var(--purple) !important; }
.tick-lightning, .tick-surge { color: var(--lightning-light) !important; }
.tick-allin { color: var(--pink) !important; }
.tick-limited { color: var(--red) !important; }
.tick-mega { color: var(--gold) !important; font-weight: 700; }

/* ── Body offset for the border frame ── */
body {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 300px; /* Q4: narrower chat sidebar */
  padding-right: 20px;
  transition: padding-left 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* Hide left ticker when chat sidebar is present */
.border-ticker-left {
  display: none !important;
}

@media (max-width: 600px) {
  /* hide vertical bars on small screens for usability */
  .border-ticker-left,
  .border-ticker-right {
    display: none;
  }
  body {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ─── POT TABS ───────────────────────────────────────────────────────────── */
.pot-tabs-section { padding: 16px 16px 0; }
.pot-tabs { display: flex; gap: 4px; background: var(--surface); border-radius: var(--radius-sm); padding: 3px; }
.pot-tab {
  flex: 1; padding: 10px; text-align: center; border: none; background: none;
  color: var(--text3); font-weight: 700; font-size: 0.8rem; letter-spacing: 1px;
  border-radius: 8px; cursor: pointer; transition: all 0.2s; font-family: var(--font);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pot-tab.active { background: var(--bg); color: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.pot-tab-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ─── POT SECTION ────────────────────────────────────────────────────────── */
.pot-section {
  text-align: center; padding: 24px 16px 20px;
  background: radial-gradient(ellipse at 50% 0%, rgba(240, 192, 64, 0.06) 0%, transparent 60%);
}
.pot-label { font-size: 0.7rem; letter-spacing: 5px; color: var(--gold); font-weight: 700; margin-bottom: 6px; }
.pot-amount {
  font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; color: var(--white);
  text-shadow: 0 0 40px var(--gold-glow); line-height: 1.1; transition: all 0.3s;
}
.pot-amount.bump { animation: bump 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bump { 50% { transform: scale(1.12); } }
.pot-entries { font-size: 0.8rem; color: var(--text3); margin-top: 6px; }
.pot-bar-wrap { max-width: 300px; margin: 16px auto 0; }
.pot-bar { height: 6px; background: var(--surface2); border-radius: 6px; overflow: hidden; }
.pot-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  border-radius: 6px; transition: width 0.8s ease; box-shadow: 0 0 12px var(--gold-glow);
}
.pot-bar-label { font-size: 0.7rem; color: var(--text3); margin-top: 4px; text-align: right; }

/* ─── GAME ───────────────────────────────────────────────────────────────── */
.game-section { padding: 0 16px; }
.game-container {
  position: relative; width: 100%; max-width: 400px; margin: 0 auto;
  aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden;
  background: #1a0e08;
  border: 2px solid rgba(240,192,64,0.15);
  box-shadow: 0 0 30px rgba(240,192,64,0.08), inset 0 0 40px rgba(0,0,0,0.3);
}
#gameCanvas { width: 100%; height: 100%; display: block; }
.game-overlay {
  position: absolute; top: 0; left: 0; right: 0;
  pointer-events: none; z-index: 10;
}
.mine-hud {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 10px 12px; background: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0.3), transparent);
}
.mine-hud-left, .mine-hud-center, .mine-hud-right { display: flex; flex-direction: column; gap: 2px; }
.mine-hud-left { align-items: flex-start; }
.mine-hud-center { align-items: center; }
.mine-hud-right { align-items: flex-end; }
.mine-lives { font-size: 1rem; }
.mine-shield { font-size: 0.9rem; }
.mine-gold {
  font-family: var(--font-display); font-size: 1.1rem; color: var(--gold); font-weight: 700;
  text-shadow: 0 0 8px rgba(240,192,64,0.3);
  transition: color 0.3s, transform 0.15s;
}
.mine-banked {
  font-size: 0.8rem; color: var(--allin); font-weight: 600;
  text-shadow: 0 0 6px rgba(64,224,112,0.2);
}
.mine-depth { font-family: var(--font-display); font-size: 1.1rem; color: var(--white); font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.mine-mult { font-size: 0.85rem; font-weight: 800; color: #f0c040; text-shadow: 0 0 10px rgba(240,192,64,0.4); }
.mine-cashout-wrap {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  z-index: 15; opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.mine-cashout-wrap.active { opacity: 1; pointer-events: auto; }
.btn-cashout {
  background: linear-gradient(135deg, #20a040, var(--allin)); color: #fff; border: none;
  padding: 12px 36px; border-radius: 30px; font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; letter-spacing: 1px; cursor: pointer;
  box-shadow: 0 4px 24px rgba(64, 224, 112, 0.5), 0 0 12px rgba(64, 224, 112, 0.2);
  transition: transform 0.15s, box-shadow 0.2s;
  position: relative; overflow: hidden;
}
.btn-cashout::after {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  animation: shimmer 3s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.btn-cashout:active { transform: scale(0.93); }
.game-start-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: rgba(10, 10, 15, 0.88);
  z-index: 20; text-align: center; padding: 20px;
}
.coin-icon { font-size: 3.5rem; margin-bottom: 10px; animation: float 2.5s cubic-bezier(0.34, 0.82, 0.38, 0.99) infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
.game-start-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); font-weight: 700; letter-spacing: 2px; }
.game-start-sub { font-size: 0.8rem; color: var(--text2); margin-top: 6px; }
.game-bonus-info { font-size: 0.7rem; color: var(--gold); margin-top: 10px; background: rgba(240,192,64,0.1); padding: 6px 12px; border-radius: 20px; }

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
/* Q6: action button grouping — primary vs advanced */
.action-section { padding: 20px 16px; max-width: 440px; margin: 0 auto; }
.action-advanced { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s; }
.action-advanced.expanded { max-height: 600px; opacity: 1; }
.btn-show-more-actions {
  width: 100%; border: 1px dashed var(--border); background: none; color: var(--text2);
  padding: 10px; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; margin-top: 8px; transition: all 0.2s; display: flex; align-items: center;
  justify-content: center; gap: 6px;
}
.btn-show-more-actions:hover { border-color: var(--gold); color: var(--gold); }
.btn-show-more-actions .chevron { transition: transform 0.3s; font-size: 0.65rem; }
.btn-show-more-actions.expanded .chevron { transform: rotate(180deg); }
.next-action-banner {
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(96, 192, 255, 0.14), rgba(240, 192, 64, 0.12));
  border: 1px solid rgba(96, 192, 255, 0.3);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}
.next-action-text {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.btn-next-action {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 14px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  cursor: pointer;
  min-height: 44px;
  color: #031019;
  background: linear-gradient(135deg, #60c0ff, #f0c040);
}
.btn-next-action:active { transform: scale(0.98); }

/* Guided Flow Step Indicator */
.guided-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 10px;
}
.g-step {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800;
  color: var(--text3);
  background: var(--surface2);
  border: 2px solid var(--border);
  transition: all 0.3s;
}
.g-step.active {
  color: #031019;
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px var(--gold-glow);
}
.g-step.done {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}
.g-step-line {
  width: 20px; height: 2px;
  background: var(--border);
}

/* Locked section teaser — hide entirely to reduce scroll */
.section-locked {
  display: none !important;
}

/* Spin availability badge */
.spin-avail {
  font-size: 0.65rem;
  color: var(--green);
  font-weight: 700;
}
.btn-spin.disabled { opacity: 0.5; pointer-events: none; }

/* Free entry disabled state */
.btn-free.disabled { opacity: 0.5; pointer-events: none; }

.starter-offer {
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(64, 224, 112, 0.18), rgba(96, 192, 255, 0.16));
  border: 1px solid rgba(96, 192, 255, 0.35);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-align: center;
}
.starter-offer-badge {
  display: inline-block;
  background: rgba(64, 224, 112, 0.22);
  border: 1px solid rgba(64, 224, 112, 0.45);
  color: #7ef0a8;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 10px;
  border-radius: 999px;
}
.starter-offer-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #d7f7ff;
  margin-top: 6px;
}
.starter-offer-sub {
  font-size: 0.76rem;
  color: var(--text2);
  margin-top: 4px;
  margin-bottom: 10px;
}
.btn-starter-offer {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(135deg, var(--allin), var(--blue));
  color: #041019;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.btn-starter-offer:active { transform: scale(0.98); }
.btn {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; padding: 14px; border: none; border-radius: var(--radius);
  cursor: pointer; font-family: var(--font); transition: all 0.2s;
  position: relative; overflow: hidden;
}
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent); pointer-events: none; }
.btn:active { transform: scale(0.95); transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* Ripple effect */
.btn-ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0); animation: btnRipple 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none; z-index: 1;
}
@keyframes btnRipple {
  to { transform: scale(4); opacity: 0; }
}
.btn-premium {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  color: #1a1000; box-shadow: 0 4px 24px var(--gold-glow), 0 0 60px rgba(240, 192, 64, 0.15);
}
.btn-premium:hover { box-shadow: 0 6px 32px rgba(240, 192, 64, 0.5); }
.btn-quick-entry {
  background: var(--surface); color: var(--gold); border: 1px solid var(--gold-dark);
  margin-top: 6px; padding: 10px; font-size: 0.85rem;
}
.btn-quick-entry:hover { border-color: var(--gold); }
.btn-price { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.btn-label { font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; }
.btn-sub { font-size: 0.65rem; opacity: 0.7; margin-top: 2px; }
.btn-row { display: flex; gap: 8px; margin-top: 8px; }
.btn-bundle {
  flex: 1; background: var(--surface); color: var(--gold); border: 1px solid var(--gold-dark);
  padding: 10px 6px;
}
.btn-bundle.hot { border-color: var(--pink); color: var(--pink); background: rgba(255,96,144,0.08); }
.btn-savings {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; opacity: 0.8;
  background: rgba(240,192,64,0.15); padding: 2px 8px; border-radius: 10px;
  margin-bottom: 4px; display: inline-block;
}
.btn-bundle.hot .btn-savings { background: rgba(255,96,144,0.15); }
.btn-mega-bundle {
  flex: 2; background: linear-gradient(135deg, #1a102e, #2a1848);
  color: var(--purple); border: 1px solid var(--purple);
}
.btn-mega-bundle .btn-savings { background: rgba(176,96,255,0.15); color: var(--purple); }
.btn-free { flex: 1; background: var(--surface); color: var(--text2); border: 1px solid var(--surface2); }
.btn-free:hover { background: var(--surface2); color: var(--text); }

/* ─── STATS ──────────────────────────────────────────────────────────────── */
.stats-section { padding: 0 16px; max-width: 440px; margin: 0 auto; }
.stats-card {
  display: flex; background: var(--surface); border-radius: var(--radius);
  padding: 16px; border: 1px solid var(--surface2);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s;
}
.stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 16px rgba(240,192,64,0.06);
}
.stat { flex: 1; text-align: center; }
.stat-val { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); font-weight: 700; }
.stat-label { font-size: 0.65rem; color: var(--text3); margin-top: 3px; letter-spacing: 1px; }
.stat-divider { width: 1px; background: var(--surface2); margin: 0 2px; }

/* ─── BALANCE CARD ───────────────────────────────────────────────────────── */
.balance-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 16px; border: 1px solid var(--surface2); text-align: center;
  margin-bottom: 10px; position: relative; overflow: hidden;
}
.balance-card.has-balance { border-color: var(--gold); }
.balance-card.has-balance::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(240,192,64,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.balance-header { margin-bottom: 6px; }
.balance-label { font-size: 0.7rem; color: var(--text3); letter-spacing: 2px; font-weight: 600; }
.balance-amount {
  font-family: var(--font-display); font-size: 2rem; color: var(--gold);
  font-weight: 800; line-height: 1.2;
}
.balance-detail { font-size: 0.72rem; color: var(--text3); margin-top: 4px; }
.btn-withdraw {
  margin-top: 12px; padding: 10px 28px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #34d399, #10b981); color: #000;
  font-weight: 700; font-size: 0.85rem; letter-spacing: 1px; border: none;
  cursor: pointer; transition: all 0.2s;
}
.btn-withdraw:hover { transform: scale(1.03); filter: brightness(1.1); }
.btn-withdraw.hidden { display: none; }

/* ─── WITHDRAW MODAL ─────────────────────────────────────────────────────── */
.withdraw-modal { max-width: 400px; text-align: left; }
.withdraw-title {
  text-align: center; font-family: var(--font-display); font-size: 1.3rem;
  color: var(--gold); margin-bottom: 16px;
}
.withdraw-balance-display {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface); border-radius: var(--radius-sm); padding: 12px 16px;
  border: 1px solid var(--surface2); margin-bottom: 8px;
}
.withdraw-bal-label { color: var(--text3); font-size: 0.8rem; }
.withdraw-bal-amount { font-family: var(--font-display); font-size: 1.3rem; color: #34d399; font-weight: 700; }
.withdraw-pending-info {
  text-align: center; font-size: 0.75rem; color: var(--text3); margin-bottom: 12px;
}
.withdraw-label {
  display: block; font-size: 0.75rem; color: var(--text3); letter-spacing: 1px;
  font-weight: 600; margin: 14px 0 6px;
}
.withdraw-amount-row {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); border-radius: var(--radius-sm); padding: 4px 8px;
  border: 1px solid var(--surface2);
}
.withdraw-dollar { color: var(--gold); font-weight: 700; font-size: 1.1rem; }
.withdraw-input {
  flex: 1; background: transparent; border: none; color: var(--white);
  font-size: 1.1rem; font-weight: 600; padding: 8px 4px; outline: none;
  font-family: var(--font-display);
}
.withdraw-input::placeholder { color: var(--text3); }
#withdrawHandleWrap .withdraw-input {
  background: var(--bg); border: 1px solid var(--surface2); border-radius: var(--radius-sm);
  padding: 10px 12px; width: 100%; box-sizing: border-box;
}
.btn-withdraw-max {
  background: var(--surface2); color: var(--gold); border: none; padding: 10px 16px;
  border-radius: var(--radius-sm); font-size: 0.7rem; font-weight: 700;
  cursor: pointer; letter-spacing: 1px; min-height: 44px;
}
.btn-withdraw-max:hover { background: var(--surface); }
.withdraw-min-note { font-size: 0.68rem; color: var(--text3); margin-top: 4px; }
.withdraw-method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.withdraw-method-option {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface); border: 2px solid var(--surface2); border-radius: var(--radius-sm);
  padding: 14px 8px; cursor: pointer; transition: all 0.2s; color: var(--text2);
}
.withdraw-method-option:hover { border-color: var(--text3); }
.withdraw-method-option.selected { border-color: #34d399; background: rgba(52,211,153,0.08); }
.wm-icon { font-size: 1.3rem; font-weight: 800; }
.wm-label { font-size: 0.7rem; font-weight: 600; }
.connect-status-msg {
  font-size: 0.8rem; color: var(--text3); text-align: center;
  margin: 10px 0 8px; line-height: 1.4;
}
.connect-status-msg.connected { color: #34d399; }
.connect-status-msg.pending { color: #fbbf24; }
.connect-bank-btn { width: 100%; margin-bottom: 4px; }
.connect-dashboard-btn { width: 100%; font-size: 0.75rem; color: var(--text3); text-decoration: underline; background: none; border: none; cursor: pointer; padding: 6px; }
.withdraw-submit-btn { margin-top: 18px; width: 100%; }
.withdraw-success-icon { font-size: 2.5rem; text-align: center; margin: 10px 0; }
.withdraw-success-msg {
  text-align: center; font-size: 0.9rem; font-weight: 600; color: var(--white);
  margin-bottom: 6px; line-height: 1.4;
}
.withdraw-success-sub { text-align: center; font-size: 0.75rem; color: var(--text3); margin-bottom: 14px; }
.withdraw-history { margin-top: 16px; }
.wh-title {
  font-size: 0.7rem; color: var(--text3); letter-spacing: 1px; font-weight: 600;
  margin-bottom: 8px; border-top: 1px solid var(--surface2); padding-top: 12px;
}
.wh-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--surface2);
  font-size: 0.78rem; gap: 8px;
}
.wh-status { white-space: nowrap; }
.wh-detail { flex: 1; color: var(--text2); text-align: center; }
.wh-date { color: var(--text3); font-size: 0.7rem; white-space: nowrap; }

/* ─── ACHIEVEMENTS ───────────────────────────────────────────────────────── */
.achievements-section { padding: 20px 16px; max-width: 440px; margin: 0 auto; }
.section-title {
  font-family: var(--font-display); font-size: 0.9rem; color: var(--white);
  letter-spacing: 2px; margin-bottom: 14px; text-align: center;
}
.achievements-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.achievement {
  background: var(--surface); border: 1px solid var(--surface2); border-radius: var(--radius-sm);
  padding: 10px 14px; text-align: center; font-size: 0.7rem; color: var(--text3);
  min-width: 90px; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.achievement:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.achievement.unlocked { border-color: var(--gold-dark); color: var(--gold); background: rgba(240,192,64,0.05); }
.achievement-icon { font-size: 1.3rem; margin-bottom: 4px; }
.achievement-name { font-weight: 600; }
.achievement.locked { opacity: 0.4; }

/* ─── LEADERBOARD ────────────────────────────────────────────────────────── */
.leaderboard-section {
  padding: 0 16px 20px; max-width: 440px; margin: 0 auto;
}
.lb-header {
  text-align: center; margin-bottom: 16px;
}
.lb-title {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
  letter-spacing: 3px; color: var(--gold);
  text-shadow: 0 0 20px rgba(240,192,64,0.3);
}
.lb-subtitle {
  font-size: 0.7rem; color: var(--text3); letter-spacing: 2px;
  text-transform: uppercase; margin-top: 2px;
}

/* Podium — top 3 */
.lb-podium {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 8px; margin-bottom: 14px; min-height: 100px;
}
.lb-podium-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 10px 10px; border-radius: var(--radius);
  position: relative; flex: 1; max-width: 120px;
  animation: podiumSlide 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.lb-podium-card:nth-child(1) { animation-delay: 0.15s; }
.lb-podium-card:nth-child(2) { animation-delay: 0s; }
.lb-podium-card:nth-child(3) { animation-delay: 0.3s; }
@keyframes podiumSlide {
  from { opacity: 0; transform: translateY(30px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 1st place */
.lb-podium-card.lb-p1 {
  background: linear-gradient(180deg, rgba(240,192,64,0.15) 0%, rgba(240,192,64,0.05) 100%);
  border: 1px solid rgba(240,192,64,0.3);
  order: 2; padding-top: 16px;
  box-shadow: 0 0 25px rgba(240,192,64,0.15);
}
/* 2nd place */
.lb-podium-card.lb-p2 {
  background: linear-gradient(180deg, rgba(192,192,210,0.12) 0%, rgba(192,192,210,0.04) 100%);
  border: 1px solid rgba(192,192,210,0.2);
  order: 1;
}
/* 3rd place */
.lb-podium-card.lb-p3 {
  background: linear-gradient(180deg, rgba(205,127,50,0.12) 0%, rgba(205,127,50,0.04) 100%);
  border: 1px solid rgba(205,127,50,0.2);
  order: 3;
}
.lb-podium-medal { font-size: 1.6rem; line-height: 1; }
.lb-podium-name {
  font-weight: 700; font-size: 0.78rem; color: var(--white);
  margin-top: 6px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 90px;
}
.lb-podium-entries {
  font-family: var(--font-display); font-size: 0.85rem;
  color: var(--gold); font-weight: 700; margin-top: 2px;
}
.lb-podium-level {
  font-size: 0.62rem; color: var(--text3); margin-top: 2px;
}

/* List rows (4th and below) */
.leaderboard-list { display: flex; flex-direction: column; gap: 4px; }
.lb-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); padding: 10px 14px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}
.lb-row:hover {
  border-color: var(--surface2);
  background: var(--bg3);
}
.lb-you {
  border-color: rgba(240,192,64,0.25) !important;
  background: linear-gradient(90deg, rgba(240,192,64,0.06), transparent) !important;
}
.lb-rank {
  font-family: var(--font-display); font-size: 0.85rem; color: var(--text3);
  font-weight: 700; min-width: 24px; text-align: center;
}
.lb-name {
  flex: 1; font-weight: 600; font-size: 0.82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-entries {
  font-family: var(--font-display); color: var(--gold); font-weight: 700;
  font-size: 0.82rem; white-space: nowrap;
}
.lb-streak {
  font-size: 0.72rem; color: var(--text3); white-space: nowrap;
}
.lb-empty {
  text-align: center; color: var(--text3); padding: 24px 16px;
  font-size: 0.85rem;
}

/* ─── REFERRAL ───────────────────────────────────────────────────────────── */
.referral-section { padding: 0 16px 20px; max-width: 440px; margin: 0 auto; }
.referral-card {
  background: linear-gradient(135deg, var(--surface), var(--bg3));
  border-radius: var(--radius); padding: 20px; text-align: center;
  border: 1px solid var(--surface2);
}
.referral-title { font-family: var(--font-display); font-size: 1rem; color: var(--white); font-weight: 700; }
.referral-sub { font-size: 0.75rem; color: var(--text2); margin-top: 5px; }
.referral-code-wrap { display: flex; margin-top: 14px; gap: 8px; }
.referral-input {
  flex: 1; background: var(--bg); color: var(--gold);
  border: 1px solid var(--surface2); border-radius: var(--radius-xs);
  padding: 10px; font-family: var(--font-display); font-size: 1rem;
  text-align: center; letter-spacing: 3px;
}
.btn-copy {
  background: var(--gold); color: #1a1000; border: none;
  padding: 10px 18px; border-radius: var(--radius-xs);
  font-weight: 700; cursor: pointer; font-size: 0.75rem; letter-spacing: 1px;
}
.btn-copy:hover { background: var(--gold-light); }
.btn-ref-copy-link {
  display: block; width: 100%; margin-top: 8px; padding: 10px;
  background: var(--surface2); color: var(--text); border: 1px solid var(--gold-dim);
  border-radius: var(--radius-xs); font-weight: 600; font-size: 0.8rem;
  cursor: pointer; transition: all 0.2s; text-align: center;
}
.btn-ref-copy-link:hover { background: var(--gold-dim); color: #1a1000; }
.referral-share-row { display: flex; gap: 8px; margin-top: 10px; }
.btn-share {
  flex: 1; padding: 8px; border: none; border-radius: var(--radius-xs);
  font-weight: 600; font-size: 0.75rem; cursor: pointer; transition: all 0.2s;
}
.btn-share:hover { transform: translateY(-1px); }
.btn-share-x { background: #1a1a2e; color: var(--white); border: 1px solid #333; }
.btn-share-sms { background: #1a2e1a; color: var(--green); border: 1px solid #2a4a2a; }
.btn-share-link { background: #1a1e2e; color: #60a0ff; border: 1px solid #2a3a5a; }

/* ─── REFERRAL DASHBOARD ─────────────────────────────────────────────────── */
.referral-dashboard-section { padding: 0 16px 20px; max-width: 440px; margin: 0 auto; }
.referral-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ref-stat-card {
  background: linear-gradient(135deg, var(--surface), var(--bg3));
  border-radius: var(--radius-sm); padding: 16px; text-align: center;
  border: 1px solid var(--surface2);
}
.ref-stat-val { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); font-weight: 700; }
.ref-stat-label { font-size: 0.7rem; color: var(--text2); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }
.ref-list-wrap {
  background: var(--surface); border-radius: var(--radius-sm);
  border: 1px solid var(--surface2); margin-top: 12px; overflow: hidden;
}
.ref-list-title { padding: 10px 14px; font-size: 0.75rem; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border); }
.ref-list { max-height: 200px; overflow-y: auto; }
.ref-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 0.8rem; }
.ref-row:last-child { border-bottom: none; }
.ref-name { color: var(--white); font-weight: 600; }
.ref-date { color: var(--text3); font-size: 0.7rem; }
.ref-reward { color: var(--green); font-weight: 700; font-size: 0.7rem; }
.ref-empty { padding: 20px; text-align: center; color: var(--text3); font-size: 0.8rem; }

/* ─── WINNERS ────────────────────────────────────────────────────────────── */
.winners-section {
  padding: 0 16px 20px;
  max-width: 440px;
  margin: 0 auto;
}
.winners-section .section-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 3px;
  text-align: center;
  color: var(--gold);
  margin-bottom: 16px;
  text-shadow: 0 0 20px var(--gold-glow);
}
.winners-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.winner-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(30,30,46,0.9), rgba(37,37,56,0.7));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(240,192,64,0.1);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s, box-shadow 0.3s;
  animation: winnerSlideIn 0.4s ease both;
}
.winner-item::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(240,192,64,0.04), transparent);
  animation: winnerShimmer 4s ease-in-out infinite;
}
.winner-item:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(240,192,64,0.25);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 24px rgba(240,192,64,0.1);
}
.winner-item.pot-mini  { border-left: 3px solid var(--green); }
.winner-item.pot-gold  { border-left: 3px solid var(--gold); }
.winner-item.pot-mega  { border-left: 3px solid var(--pink); }
.winner-item.pot-flash { border-left: 3px solid var(--blue); }
.winner-item.pot-jackpot { border-left: 3px solid var(--purple); }

.winner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.winner-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; color: #1a1000; font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.winner-avatar.av-mini  { background: linear-gradient(135deg, #2db85a, var(--green)); }
.winner-avatar.av-gold  { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); }
.winner-avatar.av-mega  { background: linear-gradient(135deg, #d04070, var(--pink)); }
.winner-avatar.av-flash { background: linear-gradient(135deg, #3090d0, var(--blue)); }
.winner-avatar.av-jackpot { background: linear-gradient(135deg, #8040d0, var(--purple)); }

.winner-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.winner-details-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.winner-pot-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  width: fit-content;
}
.winner-pot-badge.badge-mini  { background: rgba(64,224,112,0.15); color: var(--green); }
.winner-pot-badge.badge-gold  { background: rgba(240,192,64,0.15); color: var(--gold); }
.winner-pot-badge.badge-mega  { background: rgba(255,96,144,0.15); color: var(--pink); }
.winner-pot-badge.badge-flash { background: rgba(96,192,255,0.15); color: var(--blue); }
.winner-pot-badge.badge-jackpot { background: rgba(176,96,255,0.15); color: var(--purple); }

.winner-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.winner-prize-amount {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold-light);
  text-shadow: 0 0 12px var(--gold-glow);
}
.winner-prize-amount.prize-mega {
  font-size: 1.3rem;
  color: var(--pink);
  text-shadow: 0 0 16px rgba(255,96,144,0.4);
}
.winner-prize-amount.prize-jackpot {
  font-size: 1.3rem;
  color: var(--purple);
  text-shadow: 0 0 16px rgba(176,96,255,0.4);
}
.winner-time {
  font-size: 0.65rem;
  color: var(--text3);
}
.winner-empty {
  text-align: center;
  color: var(--text3);
  padding: 24px 16px;
  font-size: 0.9rem;
  background: linear-gradient(135deg, rgba(30,30,46,0.6), rgba(37,37,56,0.4));
  border-radius: var(--radius);
  border: 1px dashed rgba(240,192,64,0.15);
}

@keyframes winnerSlideIn {
  from { opacity: 0; transform: translateX(-16px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes winnerShimmer {
  0%, 100% { left: -100%; }
  50% { left: 150%; }
}

/* ─── HOW IT WORKS ───────────────────────────────────────────────────────── */
.how-section { padding: 0 16px 20px; max-width: 440px; margin: 0 auto; }
.how-steps { display: flex; flex-direction: column; gap: 10px; }
.how-step {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); padding: 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--surface2);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s, border-color 0.25s;
}
.how-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  border-color: rgba(240,192,64,0.15);
}
.how-num {
  width: 30px; height: 30px; min-width: 30px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #1a1000; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 0.85rem;
}
.how-text { font-size: 0.8rem; line-height: 1.4; }
.how-text strong { color: var(--white); }

/* ─── TAB PANELS & BOTTOM NAV ────────────────────────────────────────────── */
/* Q8: adaptive bottom padding per tab */
.tab-panel { display: none; opacity: 0; transition: opacity 0.25s ease; padding-bottom: 70px; }
.tab-panel.active { display: block; opacity: 1; }
.tab-panel.short-content { padding-bottom: 40px; }

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  background: linear-gradient(to top, #0d0d15 60%, rgba(13,13,21,0.97));
  border-top: 1px solid var(--surface2);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); /* Q37: auto-hide */
}
.bottom-nav.nav-hidden {
  transform: translateY(100%);
}
.bottom-nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 10px 0;
  background: none; border: none; color: var(--text3);
  font-family: var(--font); font-size: 0.7rem; font-weight: 600;
  cursor: pointer; transition: color 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  min-height: 48px;
}
.bottom-nav-btn .bnav-icon {
  font-size: 1.35rem; line-height: 1;
  transition: filter 0.2s, transform 0.15s;
}
.bottom-nav-btn .bnav-label { letter-spacing: 0.03em; }
.bottom-nav-btn.active { color: var(--gold); }
/* Q10: active tab indicator bar */
.bottom-nav-btn.active::after {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%;
  height: 3px; background: var(--gold); border-radius: 0 0 3px 3px;
}
.bottom-nav-btn.active .bnav-icon {
  filter: drop-shadow(0 0 6px var(--gold-glow));
  transform: scale(1.15);
}

/* Notification dot for tabs */
.bottom-nav-btn .bnav-dot {
  position: absolute; top: 2px; right: 22%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); border: 2px solid #0d0d15;
  animation: badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badge-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Q14: disabled button tooltip explanation */
.btn.disabled, .btn-flash-enter.disabled,
.btn-free.disabled, .btn-watchad.disabled {
  position: relative;
}
.btn-disabled-reason {
  display: block; font-size: 0.65rem; color: var(--red);
  font-weight: 500; margin-top: 2px; opacity: 0.9;
}

/* Scroll-to-top button */
.scroll-to-top {
  position: fixed; bottom: 80px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface2); color: var(--gold);
  border: 1px solid var(--gold-dim);
  font-size: 1.2rem; cursor: pointer;
  z-index: 899; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  transform: translateY(10px);
  backdrop-filter: blur(8px);
}
.scroll-to-top.visible {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.footer {
  text-align: center; padding: 24px 16px calc(70px + env(safe-area-inset-bottom)); max-width: 440px; margin: 0 auto;
  font-size: 0.65rem; color: var(--text3); line-height: 1.5;
  border-top: 1px solid var(--surface2);
}
.footer p + p { margin-top: 6px; }
.footer-links a { color: var(--text2); text-decoration: none; }
.footer-links a:hover { color: var(--gold); }

/* ─── MODALS ─────────────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}
.modal-content {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(18,18,26,0.98) 0%, rgba(14,14,20,0.99) 100%);
  border-radius: 20px; padding: 24px; max-width: 380px; width: 100%;
  border: 1px solid rgba(240,192,64,0.08);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset,
              0 0 80px rgba(240,192,64,0.04);
  text-align: center; animation: modal-in 0.5s cubic-bezier(0.16,1,0.3,1);
}
.modal-content > * {
  animation: modalStagger 0.4s cubic-bezier(0.16,1,0.3,1) backwards;
}
.modal-content > *:nth-child(1) { animation-delay: 0.05s; }
.modal-content > *:nth-child(2) { animation-delay: 0.1s; }
.modal-content > *:nth-child(3) { animation-delay: 0.15s; }
.modal-content > *:nth-child(4) { animation-delay: 0.2s; }
.modal-content > *:nth-child(5) { animation-delay: 0.25s; }
.modal-content > *:nth-child(6) { animation-delay: 0.3s; }
@keyframes modal-in {
  from { transform: scale(0.92) translateY(24px); opacity: 0; filter: blur(4px); }
  to { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
}
@keyframes modalStagger {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.winner-modal { overflow: hidden; }
.winner-trophy { font-size: 3.5rem; margin-bottom: 10px; animation: float 2s ease-in-out infinite; }
.winner-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); letter-spacing: 2px; }
.winner-name { font-size: 1.1rem; color: var(--white); margin-top: 10px; font-weight: 600; }
.winner-prize { font-family: var(--font-display); font-size: 1.8rem; color: var(--gold); margin-top: 6px; font-weight: 700; }
.winner-round { font-size: 0.75rem; color: var(--text3); margin: 6px 0 16px; }
.name-icon { font-size: 2.5rem; margin-bottom: 6px; }
.name-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold); letter-spacing: 2px; }
.name-sub { font-size: 0.8rem; color: var(--text2); margin: 4px 0 16px; }
.name-input {
  width: 100%; background: var(--bg); color: var(--white);
  border: 1px solid var(--surface2); border-radius: var(--radius-xs);
  padding: 12px; font-size: 1rem; text-align: center; font-family: var(--font); margin-bottom: 8px;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.name-input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240,192,64,0.15), 0 4px 12px rgba(240,192,64,0.1);
  background: rgba(240,192,64,0.03);
}
.name-input::placeholder { color: var(--text3); transition: opacity 0.2s; }
.name-input:focus::placeholder { opacity: 0.4; }
.ref-input { font-size: 0.8rem; }

/* ─── Custom State Picker ──────────────────────────────────────────────── */
.state-picker { position: relative; width: 100%; margin-bottom: 8px; }
.state-picker-btn {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; margin-bottom: 0; text-align: left; appearance: none;
}
.state-picker-btn.selected { color: var(--white); }
.state-picker-btn:not(.selected) .state-picker-label { color: var(--text3); }
.state-picker-arrow { color: var(--text3); transition: transform 0.2s; flex-shrink: 0; }
.state-picker.open .state-picker-arrow { transform: rotate(180deg); }
.state-picker-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000;
  background: var(--surface); border: 1px solid var(--surface2);
  border-radius: var(--radius-xs); box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  max-height: 260px; display: flex; flex-direction: column;
  animation: stateDrop 0.15s ease-out;
}
@keyframes stateDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.state-picker-search-wrap { padding: 8px; border-bottom: 1px solid var(--surface2); }
.state-picker-search {
  width: 100%; background: var(--bg); color: var(--white); border: 1px solid var(--surface2);
  border-radius: var(--radius-xs); padding: 8px 10px; font-size: 0.85rem;
  font-family: var(--font); outline: none; transition: border-color 0.2s;
}
.state-picker-search:focus { border-color: var(--gold); }
.state-picker-search::placeholder { color: var(--text3); }
.state-picker-list { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
.state-picker-list::-webkit-scrollbar { width: 4px; }
.state-picker-list::-webkit-scrollbar-track { background: transparent; }
.state-picker-list::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 4px; }
.state-picker-group-label {
  padding: 6px 12px 4px; font-size: 0.6rem; font-weight: 700; letter-spacing: 1.5px;
  color: var(--gold); text-transform: uppercase; user-select: none;
}
.state-picker-option {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  font-size: 0.85rem; color: var(--text2); cursor: pointer; transition: background 0.1s, color 0.1s;
}
.state-picker-option:hover, .state-picker-option.highlighted {
  background: rgba(240,192,64,0.08); color: var(--white);
}
.state-picker-option.selected-opt {
  color: var(--gold); font-weight: 600;
}
.state-picker-option.blocked {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
.state-blocked-tag {
  margin-left: auto; font-size: 0.6rem; color: var(--danger, #ff4d4d); text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 600;
}
.state-picker-option .state-abbr {
  font-size: 0.7rem; color: var(--text3); font-weight: 600; min-width: 22px;
}
.state-picker-empty {
  padding: 16px; text-align: center; color: var(--text3); font-size: 0.8rem;
}
.name-legal { font-size: 0.65rem; color: var(--text3); margin-top: 10px; }

/* ─── Wheel Modal (Premium Canvas Wheel) ────────────────────────────────── */
.wheel-modal { text-align: center; max-width: 420px; }
.wheel-title {
  font-family: var(--font-display); font-size: 1.4rem; color: var(--gold);
  letter-spacing: 3px; margin-bottom: 20px; display: flex; align-items: center;
  justify-content: center; gap: 10px;
}
.wheel-title-icon { font-size: 1.6rem; }

/* Stage wraps container for overflow control */
.wheel-stage {
  position: relative; display: flex; justify-content: center; margin-bottom: 24px;
}

.wheel-container {
  position: relative; width: 340px; height: 340px;
}
.wheel-glow {
  position: absolute; inset: -28px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(240,192,64,0.3) 0%, transparent 70%);
  animation: wheel-glow-pulse 2s ease-in-out infinite;
}
@keyframes wheel-glow-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* LED layer under the main wheel */
.wheel-led-canvas {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1; pointer-events: none;
}

#wheelCanvas {
  position: relative; z-index: 2; display: block; width: 100%; height: 100%;
  border-radius: 50%;
}
.wheel-center-cap {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; z-index: 3;
  background: linear-gradient(135deg, #1a1a2a 0%, #2a2a40 100%);
  border: 3px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px rgba(240,192,64,0.5), inset 0 0 14px rgba(240,192,64,0.15),
              0 4px 12px rgba(0,0,0,0.5);
}
.wheel-center-logo {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 2px; color: var(--gold);
  text-shadow: 0 0 8px rgba(240,192,64,0.6);
}
.wheel-pointer-wrap {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 10;
  transition: transform 0.1s;
}
.wheel-pointer-bounce { animation: pointer-bounce 0.12s ease; }
@keyframes pointer-bounce {
  0% { transform: translateX(-50%) rotate(0); }
  40% { transform: translateX(-50%) rotate(10deg); }
  100% { transform: translateX(-50%) rotate(0); }
}

/* Spinning state: glow intensifies */
.wheel-container.spinning .wheel-glow {
  animation: wheel-glow-spin 0.5s ease-in-out infinite;
}
@keyframes wheel-glow-spin {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* Result */
.wheel-result-wrap {
  position: relative; margin-bottom: 16px; padding: 16px 24px;
  border-radius: var(--radius-sm); overflow: hidden;
}
.wheel-result-glow {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(240,192,64,0.18), rgba(255,96,144,0.1));
  border: 1px solid rgba(240,192,64,0.3); border-radius: var(--radius-sm);
  animation: result-glow 1.5s ease-in-out infinite alternate;
}
@keyframes result-glow {
  0% { border-color: rgba(240,192,64,0.2); box-shadow: inset 0 0 0 transparent; }
  100% { border-color: rgba(240,192,64,0.6); box-shadow: inset 0 0 30px rgba(240,192,64,0.06); }
}
.wheel-result-text {
  position: relative; z-index: 1;
  font-size: 1.3rem; font-weight: 800; color: var(--gold-light);
  text-shadow: 0 0 24px rgba(240,192,64,0.5);
}

/* Spin button */
.wheel-spin-btn {
  font-size: 1.05rem; padding: 14px 52px; letter-spacing: 3px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 0 28px rgba(240,192,64,0.3);
  transition: all 0.2s, box-shadow 0.3s;
  text-transform: uppercase;
}
.wheel-spin-btn:hover:not(:disabled) {
  box-shadow: 0 0 42px rgba(240,192,64,0.5); transform: translateY(-2px);
}
.wheel-spin-btn:disabled { opacity: 0.6; cursor: wait; }
.wheel-spin-btn-icon { font-size: 1.2rem; }

/* Wheel confetti */
.wheel-confetti {
  position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: visible;
}
.wheel-confetti-piece {
  position: absolute; border-radius: 2px;
  top: 50%; left: 50%; opacity: 0;
  animation: wheel-confetti-burst 1.6s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes wheel-confetti-burst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(1080deg) scale(0.2); }
}

/* Confetti */
.confetti-container { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.confetti-piece { position: absolute; width: 10px; height: 10px; top: -10px; animation: confetti-fall 3s ease-in forwards; }
@keyframes confetti-fall { to { top: 110%; transform: rotate(720deg); } }

/* ─── Winner Share Buttons ───────────────────────────────────────────────── */
.winner-share-row { margin: 16px 0 8px; text-align: center; }
.winner-share-label { font-size: 0.85rem; color: var(--gold); font-weight: 700; margin-bottom: 10px; letter-spacing: 1px; }
.winner-share-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.btn-win-share {
  padding: 8px 14px; border: none; border-radius: var(--radius-xs);
  font-weight: 700; font-size: 0.75rem; cursor: pointer; transition: all 0.2s;
}
.btn-win-x { background: #1a1a2e; color: var(--white); border: 1px solid #333; }
.btn-win-sms { background: #1a2e1a; color: var(--green); border: 1px solid #2a4a2a; }
.btn-win-native { background: linear-gradient(135deg, #2a1a3e, #1a2a3e); color: #b080ff; border: 1px solid #3a2a5a; }
.btn-win-copy { background: #1a1e2e; color: #60a0ff; border: 1px solid #2a3a5a; }
.btn-win-share:hover { filter: brightness(1.2); transform: translateY(-1px); }

/* ─── Achievement Share Button ───────────────────────────────────────────── */
.ach-share-btn {
  display: block; margin: 6px auto 0; padding: 3px 10px;
  background: transparent; color: var(--gold); border: 1px solid var(--gold-dark);
  border-radius: 12px; font-size: 0.6rem; font-weight: 600; cursor: pointer;
  letter-spacing: 0.5px; transition: all 0.2s;
}
.ach-share-btn:hover { background: var(--gold); color: #1a1000; }

/* ─── Referral Dashboard Copy Link ───────────────────────────────────────── */
.ref-copy-link-wrap { text-align: center; margin-top: 14px; }
.btn-ref-copy-link {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #1a1000; border: none; padding: 12px 24px;
  border-radius: var(--radius-xs); font-weight: 700; font-size: 0.85rem;
  cursor: pointer; letter-spacing: 0.5px; transition: all 0.2s;
  box-shadow: 0 2px 12px rgba(240,192,64,0.3);
}
.btn-ref-copy-link:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(240,192,64,0.5); }

/* ─── TOAST ──────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(30,30,46,0.95), rgba(20,20,32,0.98));
  color: var(--gold); padding: 12px 24px;
  border-radius: 30px; font-size: 0.82rem; font-weight: 600;
  border: 1px solid rgba(240,192,64,0.3); z-index: var(--z-toast);
  animation: toast-in 0.4s cubic-bezier(0.16,1,0.3,1), toast-out 0.4s ease 2.2s forwards;
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(240,192,64,0.1);
  backdrop-filter: blur(12px);
}
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(30px) scale(0.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(-50%) translateY(-15px) scale(0.95); } }

/* ─── BONUS POPUP ────────────────────────────────────────────────────────── */
.bonus-popup {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 700; pointer-events: none;
}
.bonus-popup-inner {
  text-align: center; animation: bonus-pop 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.bonus-icon { font-size: 3rem; }
.bonus-text { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); font-weight: 700; text-shadow: 0 0 20px var(--gold-glow); }
@keyframes bonus-pop {
  0% { opacity: 0; transform: scale(0.3) rotate(-5deg); }
  25% { opacity: 1; transform: scale(1.25) rotate(2deg); }
  80% { opacity: 1; transform: scale(1) translateY(-35px) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.95) translateY(-65px); }
}

/* ─── COIN BURST ─────────────────────────────────────────────────────────── */
.coin-burst {
  position: fixed; pointer-events: none; z-index: var(--z-toast);
  font-size: 1.5rem; animation: coin-burst-anim 0.8s ease-out forwards;
}
@keyframes coin-burst-anim { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5) translateY(-60px); } }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .pot-amount { font-size: 4.5rem; }
  .game-container { max-width: 440px; }
}
@media (hover: none) { .btn:active { transform: scale(0.95); } }

/* Mobile: small screens */
@media (max-width: 374px) {
  .top-bar { padding: 8px 10px; }
  .top-right { gap: 4px; }
  .top-right .level-badge { display: none; }
  .live-badge { font-size: 0.65rem; padding: 4px 6px; }
  .streak-badge { font-size: 0.65rem; padding: 4px 6px; }
  .btn-icon { padding: 5px; }
  .pot-amount { font-size: 2.5rem; }
  .pot-tabs { gap: 2px; }
  .pot-tab { padding: 7px 4px; font-size: 0.65rem; letter-spacing: 0; }
  .countdown-timer { gap: 4px; }
  .cd-num { font-size: 1.1rem; min-width: 32px; }
  .cd-unit { font-size: 0.5rem; }
  .cd-sep { font-size: 0.8rem; }
  .action-section { padding: 14px 10px; }
  .btn-row { flex-wrap: wrap; }
  .btn-bundle { min-width: 45%; }
  .stats-card { flex-wrap: wrap; gap: 8px; }
  .stat { min-width: 40%; }
  .stat-divider { display: none; }
  .daily-bar-inner { flex-wrap: wrap; gap: 6px; font-size: 0.7rem; }
  .jackpot-banner-btns { flex-direction: column; gap: 6px; }
  .flash-banner-inner { flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 0.75rem; }
  .modal-content { padding: 20px 16px; max-width: 95vw; }
}

/* Mobile: medium screens */
@media (max-width: 480px) {
  .pot-amount { font-size: 3rem; }
  .btn-mega-bundle { flex: 1; }
  .referral-code-wrap { flex-direction: column; }
  .referral-input { text-align: center; }
  .lb-item { padding: 10px; gap: 8px; }
  .how-step { padding: 10px; }
  .jackpot-banner-prize { font-size: 1.8rem; }
  .countdown-wrap { padding: 0 10px; }
}

/* Tablet landscape — Q1: widen for tablets */
@media (min-width: 768px) and (max-width: 1024px) {
  .app { max-width: 680px; margin: 0 auto; }
  .action-section, .pot-section, .stats-section, .missions-section,
  .milestones-section, .achievements-section, .referral-section,
  .how-section, .payout-proof-section, .winners-section { max-width: 600px; }
  .game-container { max-width: 500px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .app { max-width: 540px; margin: 0 auto; }
  body {
    display: flex; justify-content: center;
    background: linear-gradient(135deg, #06060a 0%, #0a0a14 50%, #06060a 100%);
  }
  .app {
    border-left: 1px solid var(--surface2);
    border-right: 1px solid var(--surface2);
    box-shadow: 0 0 80px rgba(240, 192, 64, 0.04);
    min-height: 100vh;
  }
}

/* Age confirmation checkbox */
.age-confirm {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; color: var(--text2); margin: 8px 0;
  cursor: pointer; justify-content: center;
}
.age-confirm input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--gold);
  cursor: pointer;
}

/* ─── ONBOARDING ─────────────────────────────────────────────────────────── */
.onboarding-modal { max-width: 400px; }
.onboard-steps {
  display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 16px;
}
.onboard-step {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: var(--text3); background: var(--surface);
  border: 2px solid var(--surface2); transition: all 0.3s;
}
.onboard-step.active { background: var(--gold); color: #1a1000; border-color: var(--gold); }
.onboard-step.done { background: var(--green); color: #fff; border-color: var(--green); }
.onboard-step-line { width: 40px; height: 2px; background: var(--surface2); margin: 0 8px; }
.onboard-panel { animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px) scale(0.97); } to { opacity: 1; transform: translateX(0) scale(1); } }

/* ─── PAYMENT GRID ───────────────────────────────────────────────────────── */
.payment-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0;
}
.pay-option {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface); border: 2px solid var(--surface2); border-radius: var(--radius-sm);
  padding: 14px 8px; cursor: pointer; transition: all 0.2s; color: var(--text);
  font-family: var(--font);
}
.pay-option:hover { border-color: var(--gold); background: rgba(240, 192, 64, 0.06); }
.pay-option.selected { border-color: var(--gold); background: rgba(240, 192, 64, 0.1); box-shadow: 0 0 16px var(--gold-glow); }
.pay-icon {
  font-size: 1.2rem; font-weight: 800; line-height: 1;
}
.pay-option[data-method="apple_pay"] .pay-icon { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.pay-option[data-method="google_pay"] .pay-icon { color: #4285f4; font-family: 'Inter', sans-serif; }
.pay-option[data-method="cashapp"] .pay-icon {
  background: #00d632; color: #fff; width: 24px; height: 24px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.pay-option[data-method="paypal"] .pay-icon { color: #003087; font-family: 'Inter', sans-serif; font-weight: 900; font-style: italic; }
.pay-option[data-method="venmo"] .pay-icon { color: #3d95ce; font-family: 'Inter', sans-serif; font-weight: 900; }
.pay-label { font-size: 0.7rem; font-weight: 600; color: var(--text2); }
.pay-badge {
  position: absolute; top: -6px; right: -4px;
  background: var(--green); color: #fff; font-size: 0.5rem; font-weight: 800;
  padding: 2px 6px; border-radius: 8px; letter-spacing: 0.5px;
}
.pay-badge-hot { background: var(--pink); }

/* Secure payment note */
.pay-secure-note {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  text-align: center;
  margin: 10px 0 2px;
  line-height: 1.4;
}

/* Card Form */
.card-form { margin: 8px 0; animation: slideIn 0.25s ease; }
.card-row { display: flex; gap: 8px; }
.card-row .name-input { flex: 1; }

/* Payment top bar button */
.pay-btn-top { position: relative; }
.pay-btn-top .pay-active-dot {
  position: absolute; top: -2px; right: -2px;
  width: 8px; height: 8px; background: var(--green); border-radius: 50%;
  border: 2px solid var(--bg);
}

/* Current method display */
.current-method {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(240, 192, 64, 0.08); border: 1px solid rgba(240, 192, 64, 0.2);
  border-radius: var(--radius-sm); padding: 10px; margin-bottom: 12px;
  font-size: 0.8rem; font-weight: 600; color: var(--gold);
}

/* Skip button */
.btn-skip {
  display: block; width: 100%; background: none; border: none; color: var(--text3);
  font-size: 0.75rem; padding: 10px; cursor: pointer; font-family: var(--font); margin-top: 4px;
  transition: color 0.2s;
}
.btn-skip:hover { color: var(--text2); }

/* ─── CHECKOUT SHEET ─────────────────────────────────────────────────────── */
.checkout-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-checkout);
  animation: sheetUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.checkout-sheet.hidden { display: none !important; }
@keyframes sheetUp { from { transform: translateY(100%) scale(0.98); } to { transform: translateY(0) scale(1); } }
.checkout-inner {
  background: var(--bg2); border-top: 1px solid var(--gold-dark);
  border-radius: var(--radius) var(--radius) 0 0; padding: 16px 20px 20px;
  max-width: 440px; margin: 0 auto;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);
}
.checkout-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.checkout-title { font-weight: 700; font-size: 0.9rem; color: var(--white); }
.checkout-close {
  background: var(--surface); border: none; color: var(--text3); width: 28px; height: 28px;
  border-radius: 50%; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center;
}
.checkout-details { text-align: center; margin-bottom: 12px; }
.checkout-item { font-size: 0.8rem; color: var(--text2); margin-bottom: 4px; }
.checkout-price { font-family: var(--font-display); font-size: 1.8rem; color: var(--gold); font-weight: 700; }
.checkout-savings { font-size: 0.7rem; color: var(--green); font-weight: 600; margin-top: 2px; }
.btn-checkout {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gold); color: #1a1000; border: none; border-radius: var(--radius-sm);
  padding: 14px; font-size: 1rem; font-weight: 800; cursor: pointer; font-family: var(--font);
  transition: all 0.2s; letter-spacing: 0.5px;
}
.btn-checkout:hover { box-shadow: 0 4px 24px var(--gold-glow); }
.btn-checkout:active { transform: scale(0.97); }
.checkout-pay-icon { font-size: 1.1rem; }
.checkout-odds { text-align: center; font-size: 0.75rem; color: var(--gold); margin-top: 8px; font-weight: 600; }
.checkout-secure { text-align: center; font-size: 0.65rem; color: var(--text3); margin-top: 8px; }

/* No payment method prompt */
.no-payment-prompt {
  text-align: center; padding: 12px; background: rgba(255, 64, 96, 0.08);
  border: 1px solid rgba(255, 64, 96, 0.2); border-radius: var(--radius-sm);
  margin: 8px 0; font-size: 0.8rem; color: var(--pink);
}
.no-payment-prompt button {
  background: var(--gold); color: #1a1000; border: none; border-radius: 20px;
  padding: 6px 16px; font-weight: 700; font-size: 0.75rem; cursor: pointer;
  margin-top: 6px; font-family: var(--font);
}

/* ═══ COUNTDOWN TIMER ═══ */
.countdown-wrap {
  text-align: center; margin-top: 14px; padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255,64,96,0.08), rgba(240,192,64,0.08));
  border: 1px solid rgba(255,64,96,0.2); border-radius: var(--radius-sm);
  animation: countdownPulse 2s ease-in-out infinite;
}
@keyframes countdownPulse {
  0%, 100% { border-color: rgba(255,64,96,0.2); }
  50% { border-color: rgba(255,64,96,0.5); }
}
.countdown-label {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 2px; color: var(--red);
  text-transform: uppercase; margin-bottom: 8px;
}
.countdown-timer { display: flex; align-items: center; justify-content: center; gap: 4px; }
.cd-block { display: flex; flex-direction: column; align-items: center; }
.cd-num {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
  color: var(--white); min-width: 44px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border-radius: var(--radius-xs);
  padding: 6px 10px; line-height: 1;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative; overflow: hidden;
}
.cd-num::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(0,0,0,0.2);
  pointer-events: none;
}
.cd-num.cd-flip {
  animation: cdFlip 0.4s cubic-bezier(0.4,0,0.2,1);
}
@keyframes cdFlip {
  0% { transform: perspective(200px) rotateX(0deg); }
  50% { transform: perspective(200px) rotateX(-90deg); opacity: 0.6; }
  100% { transform: perspective(200px) rotateX(0deg); }
}
.cd-unit { font-size: 0.55rem; font-weight: 700; color: var(--text3); margin-top: 3px; letter-spacing: 1px; }
.cd-sep { font-size: 1.4rem; font-weight: 700; color: var(--red); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.countdown-wrap.urgent { border-color: var(--red); background: rgba(255,64,96,0.12); }
.countdown-wrap.urgent .cd-num { color: var(--red); }
.countdown-wrap.urgent .countdown-label { animation: urgentFlash 0.8s ease-in-out infinite; }
@keyframes urgentFlash { 50% { opacity: 0.5; } }

/* ═══ WATCH AD BUTTON ═══ */
.btn-ad {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; padding: 14px 20px; border: 2px dashed rgba(96,192,255,0.4);
  border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(96,192,255,0.06), rgba(96,192,255,0.02));
  color: var(--blue); cursor: pointer; transition: all 0.2s; gap: 2px; position: relative;
  font-family: var(--font);
}
.btn-ad:hover { background: rgba(96,192,255,0.1); border-color: var(--blue); transform: scale(1.01); }
.btn-ad:active { transform: scale(0.98); }
.btn-ad .btn-ad-icon { font-size: 1.3rem; }
.btn-ad .btn-label { font-weight: 800; font-size: 0.85rem; letter-spacing: 0.5px; }
.btn-ad .btn-sub { font-size: 0.7rem; color: var(--text3); }
.btn-ad.disabled { opacity: 0.4; pointer-events: none; border-color: rgba(96,192,255,0.15); }
.btn-ad.watching { pointer-events: none; }
.btn-ad.watching .btn-label::after {
  content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 8px;
  border: 2px solid var(--blue); border-top-color: transparent; border-radius: 50%;
  animation: spin 0.8s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ AD OVERLAY (fake ad) ═══ */
.ad-overlay {
  position: fixed; inset: 0; z-index: 10000; background: #000; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
}
.ad-overlay.hidden { display: none; }
.ad-content {
  text-align: center; color: #fff; max-width: 320px;
}
.ad-brand { font-size: 0.7rem; color: #666; margin-bottom: 30px; letter-spacing: 2px; }
.ad-visual {
  width: 200px; height: 200px; margin: 0 auto 20px; border-radius: 20px;
  background: linear-gradient(135deg, #f0c040, #ff6090, #60c0ff);
  display: flex; align-items: center; justify-content: center; font-size: 4rem;
  animation: adPulse 2s ease-in-out infinite;
}
@keyframes adPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.ad-text { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.ad-subtext { font-size: 0.8rem; color: #888; margin-bottom: 20px; }
.ad-timer-bar {
  width: 240px; height: 6px; background: #222; border-radius: 3px; overflow: hidden; margin: 0 auto 10px;
}
.ad-timer-fill {
  height: 100%; background: var(--gold); border-radius: 3px; width: 0%;
  transition: width 0.1s linear;
}
.ad-skip { font-size: 0.75rem; color: #555; }
.ad-close {
  position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 20px;
  padding: 6px 14px; font-size: 0.75rem; cursor: pointer; font-family: var(--font);
  display: none;
}
.ad-close.visible { display: block; }

/* ═══ NEAR-MISS MODAL ═══ */
.near-miss-modal { text-align: center; max-width: 360px; }
.near-miss-icon { font-size: 3.5rem; margin-bottom: 8px; animation: nearShake 0.6s ease-in-out; }
@keyframes nearShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px) rotate(-5deg); }
  30% { transform: translateX(8px) rotate(5deg); }
  45% { transform: translateX(-6px) rotate(-3deg); }
  60% { transform: translateX(6px) rotate(3deg); }
  75% { transform: translateX(-3px); }
}
.near-miss-title {
  font-family: var(--font-display); font-size: 1.8rem; color: var(--red);
  margin-bottom: 8px; text-shadow: 0 0 20px rgba(255,64,96,0.5);
}
.near-miss-text { color: var(--text); font-size: 0.95rem; line-height: 1.5; margin-bottom: 6px; }
.near-miss-cta {
  color: var(--gold); font-weight: 700; font-size: 0.85rem; margin-bottom: 16px;
  padding: 8px 16px; background: rgba(240,192,64,0.08); border-radius: var(--radius-xs);
  border: 1px solid rgba(240,192,64,0.2);
}
.near-miss-dismiss {
  background: none !important; border: none !important; color: var(--text3) !important;
  font-size: 0.8rem !important; padding: 8px !important; margin-top: 4px;
}

/* ═══ FLASH POT ═══ */
.flash-banner {
  background: linear-gradient(90deg, var(--lightning-light), var(--lightning), var(--lightning-light));
  background-size: 200% 100%;
  animation: flashShimmer 2s ease infinite;
  padding: 10px 16px; border-radius: var(--radius-sm);
  margin: 8px 16px 0;
}
@keyframes flashShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.flash-banner-inner {
  display: flex; align-items: center; gap: 10px; justify-content: center;
}
.flash-icon { font-size: 1.3rem; animation: flashPulse 0.6s ease infinite alternate; }
@keyframes flashPulse { from { transform: scale(1); } to { transform: scale(1.3); } }
.flash-text { color: #fff; font-weight: 700; font-size: 0.9rem; }
.flash-text b { font-size: 1.1rem; }
.btn-flash-enter {
  background: #fff; color: var(--lightning); font-weight: 800; font-size: 0.8rem;
  padding: 6px 16px; border: none; border-radius: 20px; cursor: pointer;
  transition: transform 0.2s;
}
.btn-flash-enter:active { transform: scale(0.95); }
.flash-banner.flash-urgent {
  animation: flashUrgent 0.4s ease infinite alternate;
}
@keyframes flashUrgent {
  from { box-shadow: 0 0 10px rgba(255,96,32,0.5); }
  to { box-shadow: 0 0 25px rgba(255,96,32,0.9), 0 0 50px rgba(255,96,32,0.3); }
}
.flash-tab {
  background: linear-gradient(135deg, var(--lightning-light), var(--lightning)) !important;
  color: #fff !important; font-weight: 800 !important;
  animation: flashTabGlow 1.5s ease infinite alternate;
}
@keyframes flashTabGlow {
  from { box-shadow: 0 0 8px rgba(255,128,64,0.4); }
  to { box-shadow: 0 0 20px rgba(255,128,64,0.8); }
}

/* ═══ FLASH POT TICKER ITEMS ═══ */
.tick-flash { color: var(--lightning-light) !important; font-weight: 700; }

/* ═══ MUTE BUTTON ═══ */
.mute-btn {
  font-size: 1rem; min-width: 36px; text-align: center;
}
.logout-btn {
  font-size: 1rem; min-width: 36px; text-align: center; opacity: 0.7;
}
.logout-btn:hover { opacity: 1; }

/* ═══ POT URGENCY BAR ═══ */
.pot-urgency {
  padding: 10px 16px; text-align: center; font-weight: 800; font-size: 0.85rem;
  border-radius: var(--radius-sm); margin: 8px 16px 0; display: flex;
  align-items: center; justify-content: center; gap: 8px;
}
.urgency-high {
  background: linear-gradient(90deg, rgba(240,192,64,0.15), rgba(240,192,64,0.25));
  color: var(--gold); border: 1px solid rgba(240,192,64,0.3);
  animation: urgencyPulse 2s ease infinite;
}
.urgency-critical {
  background: linear-gradient(90deg, rgba(255,64,96,0.2), rgba(255,64,96,0.35));
  color: var(--red); border: 1px solid rgba(255,64,96,0.4);
  animation: urgencyCritical 0.8s ease infinite alternate;
}
@keyframes urgencyPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
@keyframes urgencyCritical {
  from { box-shadow: 0 0 8px rgba(255,64,96,0.3); transform: scale(1); }
  to { box-shadow: 0 0 20px rgba(255,64,96,0.6); transform: scale(1.01); }
}
.urgency-icon { font-size: 1.1rem; }

/* ═══ WHALE BUNDLE ═══ */
.btn-whale-bundle {
  background: linear-gradient(135deg, #1a1a3a, #2a1a4a) !important;
  border: 2px solid var(--purple) !important; position: relative; overflow: hidden;
}
.btn-whale-bundle::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(176,96,255,0.1) 50%, transparent 70%);
  animation: whaleShine 3s ease infinite;
}
@keyframes whaleShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.btn-whale-bundle .btn-savings { color: var(--purple) !important; }
.btn-whale-bundle .btn-sub { color: rgba(176,96,255,0.7); font-size: 0.7rem; }

/* ═══ PLAY AGAIN BUTTON ═══ */
.btn-play-again {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #000; border: none; padding: 12px 28px; border-radius: 30px;
  font-weight: 800; font-size: 0.95rem; cursor: pointer; margin-top: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px var(--gold-glow);
  animation: playAgainPulse 1.5s ease infinite;
}
.btn-play-again:active { transform: scale(0.95); }
@keyframes playAgainPulse {
  0%, 100% { box-shadow: 0 4px 15px var(--gold-glow); }
  50% { box-shadow: 0 4px 30px rgba(240,192,64,0.5); }
}

/* ═══ VIP SECTION ═══ */
.vip-section { padding: 0 16px; margin: 12px 0; }
.vip-card {
  background: linear-gradient(135deg, #1a1020, #2a1a38);
  border: 1px solid rgba(240,192,64,0.25); border-radius: var(--radius);
  padding: 20px; position: relative; overflow: hidden;
}
.vip-card::before {
  content: ''; position: absolute; top: -50%; right: -50%;
  width: 200%; height: 200%; pointer-events: none;
  background: radial-gradient(circle at 70% 30%, rgba(240,192,64,0.06) 0%, transparent 60%);
}
.vip-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.vip-crown { font-size: 1.4rem; }
.vip-title {
  font-family: var(--font-display); font-size: 1.1rem; color: var(--gold);
  letter-spacing: 1px; flex: 1;
}
.vip-tag {
  background: var(--gold); color: #000; font-size: 0.65rem; font-weight: 800;
  padding: 3px 8px; border-radius: 10px; letter-spacing: 0.5px;
}
.vip-perks { margin-bottom: 16px; }
.vip-perk {
  color: var(--text2); font-size: 0.82rem; padding: 4px 0; line-height: 1.4;
}
.vip-tiers { display: flex; gap: 10px; }
.btn-vip {
  flex: 1; background: var(--surface2); border: 1px solid rgba(240,192,64,0.2);
  border-radius: var(--radius-sm); padding: 14px 10px; cursor: pointer;
  text-align: center; transition: all 0.2s; position: relative;
}
.btn-vip:hover { border-color: var(--gold); background: rgba(240,192,64,0.08); }
.btn-vip:active { transform: scale(0.97); }
.vip-price {
  color: var(--gold); font-weight: 800; font-size: 1.2rem;
  font-family: var(--font-display);
}
.vip-period { color: var(--text3); font-size: 0.75rem; }
.btn-vip-best {
  border-color: var(--gold) !important; background: rgba(240,192,64,0.06) !important;
}
.vip-best-tag {
  position: absolute; top: -1px; right: -1px;
  background: var(--gold); color: #000; font-size: 0.55rem; font-weight: 800;
  padding: 2px 8px; border-radius: 0 var(--radius-sm) 0 var(--radius-xs);
}
.vip-status { text-align: center; padding-top: 10px; }
.vip-active-badge {
  display: inline-block; background: rgba(240,192,64,0.15);
  color: var(--gold); font-weight: 800; font-size: 0.85rem;
  padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(240,192,64,0.3);
  animation: vipBadgeGlow 2s ease infinite alternate;
}
@keyframes vipBadgeGlow {
  from { box-shadow: 0 0 8px rgba(240,192,64,0.2); }
  to { box-shadow: 0 0 20px rgba(240,192,64,0.4); }
}
.vip-expires {
  display: block; color: var(--text3); font-size: 0.75rem; margin-top: 6px;
}
.vip-glow {
  box-shadow: 0 0 10px rgba(240,192,64,0.4) !important;
  border-color: var(--gold) !important;
}

/* ═══ DOUBLE DOWN MODAL ═══ */
.dd-modal { text-align: center; }
.dd-icon { font-size: 2.5rem; margin-bottom: 8px; animation: ddBounce 0.6s ease infinite alternate; }
@keyframes ddBounce { from { transform: scale(1); } to { transform: scale(1.15); } }
.dd-title {
  font-family: var(--font-display); font-size: 1.6rem; color: var(--gold);
  margin-bottom: 10px;
}
.dd-text {
  color: var(--text); font-size: 0.95rem; margin-bottom: 6px;
}
.dd-text b { color: var(--gold); }
.dd-pricing {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 4px;
}
.dd-orig-price {
  font-family: var(--font-display); font-size: 1.2rem; color: var(--text3);
  text-decoration: line-through; opacity: 0.6;
}
.dd-price {
  font-family: var(--font-display); font-size: 2rem; color: var(--green);
}
.dd-sub {
  color: var(--text3); font-size: 0.8rem; margin-bottom: 18px;
}
.dd-btn {
  width: 100%; animation: ddBtnPulse 1.5s ease infinite;
}
@keyframes ddBtnPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(240,192,64,0.3); }
  50% { box-shadow: 0 4px 30px rgba(240,192,64,0.5); }
}

/* ═══ VIP TICKER ITEM ═══ */
.tick-vip { color: var(--gold) !important; font-weight: 700; }

/* ═══ LEVEL PROGRESS BAR ═══ */
.level-progress-card {
  background: var(--card); border-radius: var(--radius); padding: 14px 16px;
  margin-top: 10px; border: 1px solid var(--border);
}
.level-prog-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; font-size: 0.82rem;
}
.level-prog-current { font-weight: 700; color: var(--text); }
.level-prog-next { color: var(--text3); font-size: 0.75rem; }
.level-prog-bar {
  height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden;
}
.level-prog-fill {
  height: 100%; border-radius: 4px; transition: width 0.5s ease;
  background: linear-gradient(90deg, var(--gold), #ffdf80);
}
.level-prog-sub {
  margin-top: 6px; font-size: 0.72rem; color: var(--text3); text-align: center;
}

/* ═══ HOT STREAK BAR ═══ */
.hot-streak-bar {
  background: linear-gradient(90deg, #ff440020, #ff880020);
  border: 1px solid #ff660040; border-radius: 12px;
  padding: 10px 16px; margin: 8px 16px; display: flex;
  align-items: center; gap: 8px; animation: hotPulse 2s ease infinite;
}
.hot-streak-icon { font-size: 1.3rem; }
.hot-streak-text { font-size: 0.82rem; color: #ff8830; font-weight: 700; }
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,100,0,0.15); }
  50% { box-shadow: 0 0 20px rgba(255,100,0,0.3); }
}

/* ═══ SESSION REWARD BAR ═══ */
.session-reward-bar {
  margin: 8px 16px; background: var(--card); border-radius: 12px;
  padding: 10px 14px; border: 1px solid var(--border);
}
.session-reward-inner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.session-reward-icon { font-size: 1.1rem; }
.session-reward-text { font-size: 0.8rem; color: var(--text2); flex: 1; }
.session-reward-text b { color: var(--text); font-weight: 700; }
.session-reward-dots { display: flex; gap: 6px; }
.sr-dot {
  font-size: 0.7rem; font-weight: 700; padding: 3px 8px;
  border-radius: 20px; background: var(--bg); color: var(--text3);
  border: 1px solid var(--border); transition: all 0.3s;
}
.sr-dot.earned {
  background: var(--green); color: #fff; border-color: var(--green);
}
.sr-dot.ready {
  background: var(--gold); color: var(--bg); border-color: var(--gold);
  animation: dotPulse 1s ease infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ═══ DAILY MISSIONS ═══ */
.missions-section { padding: 0 16px 10px; }
.missions-list { display: flex; flex-direction: column; gap: 8px; }
.mission-card {
  background: var(--card); border-radius: var(--radius-sm); padding: 12px 16px;
  border: 1px solid var(--border); display: flex; align-items: center; gap: 12px;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s, border-color 0.25s;
}
.mission-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  border-color: rgba(96,192,255,0.2);
}
.mission-card.complete { border-color: var(--green); }
.mission-card.claimed { opacity: 0.5; }
.mission-info { flex: 1; }
.mission-label { font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.mission-progress-wrap {
  display: flex; align-items: center; gap: 8px;
}
.mission-bar {
  flex: 1; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden;
}
.mission-bar-fill {
  height: 100%; border-radius: 3px; transition: width 0.4s ease;
  background: linear-gradient(90deg, var(--blue), var(--gold));
}
.mission-card.complete .mission-bar-fill {
  background: linear-gradient(90deg, var(--green), #60e080);
}
.mission-bar-text { font-size: 0.7rem; color: var(--text3); white-space: nowrap; }
.mission-reward {
  font-size: 0.7rem; font-weight: 700; color: var(--gold);
  white-space: nowrap;
}
.btn-claim-mission {
  background: var(--green); color: #fff; border: none; border-radius: 8px;
  padding: 6px 12px; font-size: 0.75rem; font-weight: 700; cursor: pointer;
  animation: claimPulse 1.2s ease infinite;
}
@keyframes claimPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(64,224,112,0.3); }
  50% { box-shadow: 0 2px 16px rgba(64,224,112,0.6); }
}

/* ═══ MILESTONES ═══ */
.milestones-section { padding: 0 16px 10px; }
.milestones-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.milestones-list::-webkit-scrollbar { display: none; }
.milestone-card {
  flex: 0 0 auto; background: var(--card); border-radius: 12px;
  padding: 12px 16px; border: 1px solid var(--border); text-align: center;
  min-width: 100px; position: relative;
}
.milestone-card.unlocked { border-color: var(--gold); }
.milestone-card.claimed { opacity: 0.5; }
.milestone-games {
  font-size: 1.1rem; font-weight: 800; color: var(--gold);
  font-family: var(--font-display);
}
.milestone-label { font-size: 0.7rem; color: var(--text3); margin: 4px 0; }
.milestone-reward { font-size: 0.72rem; font-weight: 700; color: var(--green); }
.btn-claim-milestone {
  background: var(--gold); color: var(--bg); border: none; border-radius: 6px;
  padding: 4px 10px; font-size: 0.7rem; font-weight: 700; cursor: pointer;
  margin-top: 6px;
}
.milestone-lock { font-size: 1.1rem; margin-bottom: 2px; }

/* ═══ MISSION TICKER ITEMS ═══ */
.tick-mission { color: var(--green) !important; font-weight: 600; }
.tick-milestone { color: var(--gold) !important; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   💎 DIAMOND JACKPOT SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Jackpot Banner ─────────────────────────────────────────────────────── */
.jackpot-banner {
  margin: 8px 16px; position: relative; overflow: hidden; border-radius: 20px;
  background: linear-gradient(135deg, #0a0a2e 0%, #1a103a 40%, #0d1a3a 100%);
  border: 2px solid rgba(176, 224, 255, 0.4);
  box-shadow: 0 0 30px rgba(176, 224, 255, 0.15), 0 0 60px rgba(176, 224, 255, 0.05), inset 0 1px 0 rgba(255,255,255,0.08);
}
.jackpot-banner-inner { position: relative; z-index: 1; padding: 20px 18px 16px; }
.jackpot-banner-glow {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(176,224,255,0.15) 0%, transparent 70%);
  animation: jp-glow-pulse 3s ease-in-out infinite;
}
@keyframes jp-glow-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.jackpot-banner-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.jackpot-banner-icon { font-size: 1.6rem; animation: jp-icon-shine 2s ease-in-out infinite; }
@keyframes jp-icon-shine {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.4) drop-shadow(0 0 10px rgba(176,224,255,0.8)); transform: scale(1.1); }
}
.jackpot-banner-label {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  background: linear-gradient(90deg, #b0e0ff, #e0f0ff, #80c0ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}
.jackpot-banner-live {
  background: #ff4060; color: #fff; font-size: 0.65rem; font-weight: 800;
  padding: 2px 8px; border-radius: 6px; letter-spacing: 1px;
  animation: jp-live-blink 1.5s ease-in-out infinite;
}
@keyframes jp-live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.jackpot-banner-prize {
  font-family: var(--font-display); font-size: 2.8rem; font-weight: 800;
  background: linear-gradient(180deg, #e0f0ff 0%, #b0e0ff 40%, #80b0ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; text-align: center; line-height: 1;
  filter: drop-shadow(0 0 20px rgba(176,224,255,0.4));
  animation: jp-prize-pulse 4s ease-in-out infinite;
}
@keyframes jp-prize-pulse {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(176,224,255,0.4)); }
  50% { filter: drop-shadow(0 0 40px rgba(176,224,255,0.8)); }
}
.jackpot-banner-bar-wrap {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 8px;
}
.jackpot-banner-bar {
  flex: 1; height: 10px; background: rgba(176,224,255,0.1);
  border-radius: 5px; overflow: hidden; border: 1px solid rgba(176,224,255,0.2);
}
.jackpot-banner-bar-fill {
  height: 100%; border-radius: 5px; width: 0%;
  background: linear-gradient(90deg, #4080ff, #60c0ff, #b0e0ff);
  box-shadow: 0 0 12px rgba(96,192,255,0.6);
  transition: width 0.8s ease;
  position: relative;
}
.jackpot-banner-bar-fill::after {
  content: ''; position: absolute; right: 0; top: -2px; bottom: -2px; width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6));
  border-radius: 0 5px 5px 0;
  animation: jp-bar-shimmer 2s ease-in-out infinite;
}
@keyframes jp-bar-shimmer {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.jackpot-banner-pct {
  font-size: 0.8rem; font-weight: 700; color: #b0e0ff; min-width: 35px; text-align: right;
}
.jackpot-banner-info {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; color: rgba(176,224,255,0.7); margin-bottom: 14px;
}
.jackpot-banner-timer {
  font-family: var(--font-display); font-weight: 700; color: #b0e0ff;
  font-size: 0.9rem; letter-spacing: 1px;
}
.jackpot-banner-btns {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.btn-jackpot-enter {
  position: relative; overflow: hidden; padding: 10px 8px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #1a2050, #202860);
  border: 1px solid rgba(176,224,255,0.3); color: #e0f0ff;
  font-family: var(--font); font-weight: 700; font-size: 0.75rem;
  cursor: pointer; text-align: center; transition: all 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.btn-jackpot-enter:active { transform: scale(0.96); }
.btn-jackpot-enter:hover { border-color: rgba(176,224,255,0.6); box-shadow: 0 0 15px rgba(176,224,255,0.2); }
.jp-btn-label { font-size: 0.7rem; opacity: 0.8; }
.jp-btn-price { font-size: 1rem; font-weight: 800; font-family: var(--font-display); color: #b0e0ff; }
.jp-btn-tag {
  position: absolute; top: -1px; right: -1px;
  font-size: 0.55rem; font-weight: 800; padding: 2px 6px;
  border-radius: 0 12px 0 8px; letter-spacing: 0.5px;
}
.jp-hot { border-color: var(--gold); }
.jp-hot .jp-btn-tag { background: var(--gold); color: var(--bg); }
.jp-hot .jp-btn-price { color: var(--gold); }
.jp-whale { border-color: var(--purple); }
.jp-whale .jp-btn-tag { background: var(--purple); color: #fff; }
.jp-whale .jp-btn-price { color: var(--purple); }

.jackpot-banner-odds {
  margin-top: 10px; text-align: center; font-size: 0.78rem;
  color: rgba(176,224,255,0.6);
}
.jackpot-banner-odds b { color: #b0e0ff; }

/* Jackpot Banner urgency states */
.jackpot-banner.jackpot-urgent {
  border-color: rgba(255,64,96,0.6);
  animation: jp-urgent-border 0.5s ease-in-out infinite alternate;
}
@keyframes jp-urgent-border {
  from { border-color: rgba(255,64,96,0.6); box-shadow: 0 0 30px rgba(255,64,96,0.2); }
  to { border-color: rgba(176,224,255,0.6); box-shadow: 0 0 30px rgba(176,224,255,0.2); }
}
.jackpot-banner.jackpot-critical .jackpot-banner-timer {
  color: #ff4060; animation: jp-timer-flash 0.4s ease-in-out infinite alternate;
}
@keyframes jp-timer-flash {
  from { color: #ff4060; }
  to { color: #fff; }
}

/* ─── Jackpot Tab ─────────────────────────────────────────────────────────── */
.jackpot-tab {
  background: linear-gradient(135deg, rgba(176,224,255,0.1), rgba(176,224,255,0.05)) !important;
  border: 1px solid rgba(176,224,255,0.3) !important;
  animation: jp-tab-glow 2s ease-in-out infinite;
}
@keyframes jp-tab-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(176,224,255,0.2); }
  50% { box-shadow: 0 0 16px rgba(176,224,255,0.5); }
}

/* ─── Jackpot Winner Modal ───────────────────────────────────────────────── */
.jackpot-winner-modal {
  background: linear-gradient(135deg, #0a0a2e, #1a1050) !important;
  border: 2px solid rgba(176,224,255,0.5) !important;
  text-align: center; padding: 40px 30px !important;
  position: relative; overflow: hidden;
}
.jp-winner-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(176,224,255,0.2), transparent 70%);
  animation: jp-glow-pulse 2s ease-in-out infinite;
}
.jp-winner-icon { font-size: 4rem; margin-bottom: 8px; position: relative; z-index: 1; animation: jp-icon-shine 1.5s ease-in-out infinite; }
.jp-winner-title {
  font-family: var(--font-display); font-size: 1.8rem;
  background: linear-gradient(90deg, #b0e0ff, #e0f0ff, #80c0ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  position: relative; z-index: 1; margin-bottom: 12px;
}
.jp-winner-name {
  font-size: 1.3rem; font-weight: 700; color: #e0f0ff;
  position: relative; z-index: 1; margin-bottom: 8px;
}
.jp-winner-prize {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 800;
  background: linear-gradient(180deg, #e0f0ff, #b0e0ff, #80b0ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  position: relative; z-index: 1; margin-bottom: 8px;
  animation: jp-prize-pulse 2s ease-in-out infinite;
}
.jp-winner-tier {
  font-size: 0.85rem; color: rgba(176,224,255,0.6); letter-spacing: 2px;
  font-weight: 700; position: relative; z-index: 1; margin-bottom: 6px;
}
.jp-winner-sub {
  font-size: 0.8rem; color: rgba(176,224,255,0.4); position: relative; z-index: 1;
  margin-bottom: 20px;
}

/* ─── Jackpot Announce Modal ─────────────────────────────────────────────── */
.jackpot-announce-modal {
  background: linear-gradient(135deg, #0a0a2e, #1a1050) !important;
  border: 2px solid rgba(176,224,255,0.5) !important;
  text-align: center; padding: 40px 24px !important;
  position: relative; overflow: hidden;
}
.jp-announce-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(176,224,255,0.15), transparent 60%);
  animation: jp-glow-pulse 3s ease-in-out infinite;
}
.jp-announce-icon {
  font-size: 4rem; position: relative; z-index: 1;
  animation: jp-announce-bounce 1s ease-in-out infinite;
}
@keyframes jp-announce-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.1); }
}
.jp-announce-title {
  font-family: var(--font-display); font-size: 1.6rem;
  background: linear-gradient(90deg, #b0e0ff, #fff, #b0e0ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  position: relative; z-index: 1; margin: 8px 0;
  letter-spacing: 2px;
}
.jp-announce-prize {
  font-family: var(--font-display); font-size: 3.5rem; font-weight: 800;
  background: linear-gradient(180deg, #e8f4ff, #b0e0ff, #6090ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  position: relative; z-index: 1; line-height: 1.1;
  animation: jp-prize-pulse 3s ease-in-out infinite;
}
.jp-announce-tier {
  font-size: 0.9rem; color: rgba(176,224,255,0.5); letter-spacing: 3px;
  font-weight: 700; position: relative; z-index: 1;
  margin: 6px 0 12px;
}
.jp-announce-sub {
  font-size: 0.85rem; color: rgba(176,224,255,0.5); position: relative; z-index: 1;
  margin-bottom: 20px;
}
.jp-announce-btn {
  background: linear-gradient(135deg, #2040a0, #3060d0) !important;
  border: 1px solid rgba(176,224,255,0.4) !important;
  font-size: 1.1rem !important; padding: 14px 32px !important;
  animation: jp-btn-glow 2s ease-in-out infinite;
}
@keyframes jp-btn-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(96,192,255,0.3); }
  50% { box-shadow: 0 0 30px rgba(96,192,255,0.6); }
}

/* ─── Jackpot Tier Colors ────────────────────────────────────────────────── */
.jackpot-banner[data-tier="silver"] { border-color: rgba(192,192,224,0.4); }
.jackpot-banner[data-tier="silver"] .jackpot-banner-prize {
  background: linear-gradient(180deg, #e0e0f0, #c0c0e0, #a0a0c0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.jackpot-banner[data-tier="gold"] { border-color: rgba(240,192,64,0.4); }
.jackpot-banner[data-tier="gold"] .jackpot-banner-prize {
  background: linear-gradient(180deg, #ffe066, #f0c040, #d0a020);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.jackpot-banner[data-tier="gold"] .jackpot-banner-label {
  background: linear-gradient(90deg, #f0c040, #ffe066, #f0c040);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.jackpot-banner[data-tier="platinum"] { border-color: rgba(224,224,240,0.4); }
.jackpot-banner[data-tier="platinum"] .jackpot-banner-bar-fill {
  background: linear-gradient(90deg, #8080c0, #c0c0e0, #e0e0ff);
}

/* ─── Jackpot Ticker Items ───────────────────────────────────────────────── */
.tick-jackpot {
  color: #b0e0ff !important; font-weight: 700;
  text-shadow: 0 0 8px rgba(176,224,255,0.5);
}
.tick-jackpot-winner {
  color: #b0e0ff !important; font-weight: 800;
  text-shadow: 0 0 12px rgba(176,224,255,0.7);
  animation: jp-ticker-flash 1s ease-in-out infinite;
}
@keyframes jp-ticker-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOMO EXCLUSIVE OFFERS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Lightning Deal ───────────────────────────────────────────────────── */
.lightning-section { padding: 0 16px; margin: 12px 0; }
.lightning-card {
  background: linear-gradient(135deg, #1a0800 0%, #2a1000 50%, #1a0800 100%);
  border: 2px solid var(--lightning);
  border-radius: 16px; padding: 20px; text-align: center;
  position: relative; overflow: hidden;
  box-shadow: 0 0 30px rgba(255,96,32,0.3), inset 0 0 40px rgba(255,96,32,0.05);
  animation: lightning-pulse 2s ease-in-out infinite;
}
@keyframes lightning-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(255,96,32,0.3), inset 0 0 40px rgba(255,96,32,0.05); }
  50% { box-shadow: 0 0 50px rgba(255,96,32,0.5), inset 0 0 60px rgba(255,96,32,0.1); }
}
.lightning-badge {
  display: inline-block; background: linear-gradient(90deg, var(--lightning), var(--lightning-light));
  color: #fff; font-size: 0.65rem; font-weight: 800; letter-spacing: 1px;
  padding: 3px 12px; border-radius: 20px; margin-bottom: 10px;
}
.lightning-header { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.lightning-icon { font-size: 1.8rem; }
.lightning-discount { font-size: 1.8rem; font-weight: 900; color: var(--lightning); font-family: 'Space Grotesk', sans-serif; }
.lightning-tag {
  background: rgba(255,96,32,0.2); border: 1px solid var(--lightning); border-radius: 6px;
  padding: 2px 8px; font-size: 0.6rem; font-weight: 700; color: var(--lightning-light);
}
.lightning-detail { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.lightning-prices { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.lightning-original { font-size: 1rem; color: #666; text-decoration: line-through; }
.lightning-sale { font-size: 1.6rem; font-weight: 900; color: var(--lightning); }
.lightning-timer-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lightning-timer-bar { flex: 1; height: 6px; background: rgba(255,96,32,0.2); border-radius: 3px; overflow: hidden; }
.lightning-timer-fill { height: 100%; background: linear-gradient(90deg, #ff4020, var(--lightning-light)); border-radius: 3px; transition: width 1s linear; }
.lightning-time { font-size: 1.2rem; font-weight: 800; color: var(--lightning); font-family: 'Space Grotesk', sans-serif; min-width: 50px; }
.btn-lightning {
  width: 100%; padding: 14px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #ff4020, var(--lightning-light)); color: #fff;
  font-size: 1rem; font-weight: 800; letter-spacing: 0.5px;
  box-shadow: 0 4px 20px rgba(255,64,32,0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn-lightning:active { transform: scale(0.97); }
.lightning-fomo { font-size: 0.7rem; color: var(--lightning-light); margin-top: 8px; opacity: 0.7; }

/* ─── Mystery Box ──────────────────────────────────────────────────────── */
.mystery-section { padding: 0 16px; margin: 12px 0; }
.mystery-header { text-align: center; margin-bottom: 12px; }
.mystery-icon { font-size: 2rem; }
.mystery-title { color: #f0c040; margin: 4px 0; font-size: 1.2rem; }
.mystery-sub { color: #999; font-size: 0.75rem; }
.mystery-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mystery-box {
  background: linear-gradient(145deg, #1a1520, #0f0a15);
  border: 2px solid #333; border-radius: 14px; padding: 14px 8px;
  text-align: center; cursor: pointer; position: relative; overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.3s, box-shadow 0.3s; user-select: none;
}
.mystery-box:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.mystery-box:active { transform: scale(0.95); }
.mbox-glow {
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 60%);
  animation: mbox-shimmer 3s ease-in-out infinite;
}
@keyframes mbox-shimmer {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}
.mystery-bronze { border-color: #cd7f32; }
.mystery-bronze .mbox-tier { color: #cd7f32; }
.mystery-silver { border-color: #c0c0c0; }
.mystery-silver .mbox-tier { color: #c0c0c0; }
.mystery-gold { border-color: #f0c040; }
.mystery-gold .mbox-tier { color: #f0c040; }
.mbox-popular {
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(90deg, var(--red), var(--lightning-light)); color: #fff;
  font-size: 0.55rem; font-weight: 800; padding: 2px 0; letter-spacing: 1px;
}
.mbox-icon { font-size: 2rem; margin: 6px 0; }
.mbox-tier { font-size: 0.7rem; font-weight: 800; letter-spacing: 1px; margin-bottom: 4px; }
.mbox-range { font-size: 0.7rem; color: #aaa; margin-bottom: 6px; }
.mbox-price { font-size: 1.3rem; font-weight: 900; color: #fff; margin-bottom: 4px; }
.mbox-odds { font-size: 0.55rem; color: #f0c040; font-weight: 600; }
.mystery-cooldown { text-align: center; margin-top: 10px; color: var(--lightning-light); font-size: 0.8rem; }

/* ─── Power Surge ──────────────────────────────────────────────────────── */
.surge-section { padding: 0 16px; margin: 12px 0; }
.surge-card {
  background: linear-gradient(135deg, #001020, #002040);
  border: 2px solid var(--surge); border-radius: var(--radius); padding: 20px;
  text-align: center; position: relative; overflow: hidden;
  box-shadow: 0 0 20px rgba(64,160,255,0.2);
}
.surge-glow {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at center, rgba(64,160,255,0.08), transparent 70%);
}
.surge-header { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; position: relative; }
.surge-icon { font-size: 1.5rem; }
.surge-title { color: var(--surge); margin: 0; font-size: 1.1rem; }
.surge-desc { color: var(--surge-light); font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; position: relative; }
.surge-price { font-size: 1.4rem; font-weight: 900; color: #fff; margin-bottom: 12px; position: relative; }
.btn-surge {
  width: 100%; padding: 12px; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #2060ff, var(--surge)); color: #fff;
  font-size: 0.95rem; font-weight: 800; position: relative;
  box-shadow: 0 4px 15px rgba(64,160,255,0.3);
}
.btn-surge:active { transform: scale(0.97); }
.surge-active { margin-top: 12px; position: relative; }
.surge-active-badge {
  background: linear-gradient(90deg, #2060ff, var(--surge)); color: #fff;
  padding: 4px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 800;
}
.surge-timer { display: block; color: var(--surge); font-size: 1.3rem; font-weight: 800; margin-top: 6px; font-family: 'Space Grotesk', sans-serif; }

/* ─── All-In Pack ──────────────────────────────────────────────────────── */
.allin-section { padding: 0 16px; margin: 12px 0; }
.allin-card {
  background: linear-gradient(135deg, #0a1520, #102030);
  border: 2px solid var(--allin); border-radius: var(--radius); padding: 20px;
  text-align: center;
  box-shadow: 0 0 20px rgba(64,224,112,0.15);
}
.allin-header { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.allin-icon { font-size: 1.5rem; }
.allin-title { color: var(--allin); margin: 0; font-size: 1.1rem; }
.allin-tag {
  background: var(--allin); color: #000; font-size: 0.6rem; font-weight: 800;
  padding: 2px 8px; border-radius: 6px;
}
.allin-desc { color: var(--allin-light); font-size: 0.85rem; margin-bottom: 10px; }
.allin-pots { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
.allin-pot {
  border: 2px solid; border-radius: 8px; padding: 4px 10px;
  font-size: 0.7rem; font-weight: 700; color: #fff;
}
.allin-prices { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; }
.allin-original { font-size: 1rem; color: #666; text-decoration: line-through; }
.allin-sale { font-size: 1.6rem; font-weight: 900; color: var(--allin); }
.btn-allin {
  width: 100%; padding: 12px; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #20a050, var(--allin)); color: #000;
  font-size: 0.95rem; font-weight: 800;
  box-shadow: 0 4px 15px rgba(64,224,112,0.3);
}
.btn-allin:active { transform: scale(0.97); }

/* ─── Streak Saver ─────────────────────────────────────────────────────── */
.streak-saver {
  margin: 8px 16px; background: linear-gradient(135deg, #2a1000, #1a0500);
  border: 2px solid #ff4040; border-radius: 12px; overflow: hidden;
  animation: saver-pulse 2s ease-in-out infinite;
}
@keyframes saver-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255,64,64,0.2); }
  50% { box-shadow: 0 0 30px rgba(255,64,64,0.4); }
}
.saver-inner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }

/* ─── LAUNCH FUND ────────────────────────────────────────────────────────── */
.launch-fund-section {
  padding: 12px 16px;
  max-width: 440px;
  margin: 0 auto;
}
.launch-fund-card {
  background: linear-gradient(135deg, #0d1a00, #1a2800);
  border: 2px solid rgba(100, 220, 60, 0.3);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.launch-fund-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}
.launch-fund-icon { font-size: 1.6rem; }
.launch-fund-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #90ee90;
  letter-spacing: 1px;
}
.launch-fund-desc {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.4;
}
.launch-fund-bar-wrap { margin-bottom: 8px; }
.launch-fund-bar {
  height: 22px;
  background: var(--bg3);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.launch-fund-fill {
  height: 100%;
  background: linear-gradient(90deg, #2ecc40, #60ee60, #a0ff80);
  border-radius: 12px;
  transition: width 0.8s ease;
  box-shadow: 0 0 12px rgba(46, 204, 64, 0.4);
  min-width: 0;
}
.launch-fund-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.8rem;
}
.launch-fund-raised {
  color: #60ee60;
  font-weight: 700;
}
.launch-fund-goal {
  color: var(--muted);
}
.launch-fund-donors {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.launch-fund-buttons {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.btn-donate {
  background: linear-gradient(135deg, #2ecc40, #27ae34);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-donate:hover {
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(46, 204, 64, 0.4);
}
.btn-donate:active { transform: scale(0.97); }
.launch-fund-fine {
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM POLISH — Gold Particles, Skeleton Screens, Micro-interactions
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Gold Particle System ───────────────────────────────────────────────── */
.gold-particle {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-light), var(--gold));
  box-shadow: 0 0 6px var(--gold-glow), 0 0 12px rgba(240,192,64,0.2);
  animation: goldParticleFly 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
.gold-particle:nth-child(even) {
  width: 4px; height: 4px;
  animation-duration: 1s;
}
.gold-particle:nth-child(3n) {
  width: 3px; height: 3px;
  background: var(--gold-light);
  animation-duration: 0.8s;
}
@keyframes goldParticleFly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0); }
}

/* ─── Skeleton Loading Screens ───────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--surface) 25%,
    rgba(255,255,255,0.04) 37%,
    var(--surface) 63%
  );
  background-size: 400% 100%;
  animation: skeletonShimmer 1.8s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-circle { border-radius: 50%; }
.skeleton-card {
  height: 80px; border-radius: var(--radius);
  border: 1px solid var(--surface2);
}

/* ─── Pot Amount Odometer Effect ─────────────────────────────────────────── */
.pot-amount {
  font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; color: var(--white);
  text-shadow: 0 0 40px var(--gold-glow), 0 2px 0 rgba(0,0,0,0.3); line-height: 1.1; transition: all 0.3s;
  letter-spacing: -1px;
}

/* ─── Premium Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(240,192,64,0.15); border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(240,192,64,0.3); }
* { scrollbar-width: thin; scrollbar-color: rgba(240,192,64,0.15) transparent; }

/* ─── Selection Color ────────────────────────────────────────────────────── */
::selection { background: rgba(240,192,64,0.3); color: var(--white); }
::-moz-selection { background: rgba(240,192,64,0.3); color: var(--white); }

/* ─── Premium Button Hover Shine ─────────────────────────────────────────── */
.btn-premium::before {
  content: ''; position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  transform: rotate(45deg) translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none; z-index: 2;
}
.btn-premium:hover::before { transform: rotate(45deg) translateX(100%); }

/* ─── Balance Card Shimmer ───────────────────────────────────────────────── */
.balance-card.has-balance::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(240,192,64,0.03), transparent);
  animation: balanceShimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes balanceShimmer {
  0%, 100% { left: -100%; }
  50% { left: 150%; }
}

/* ─── Referral Card Premium Border ───────────────────────────────────────── */
.referral-card {
  background: linear-gradient(135deg, var(--surface), var(--bg3));
  border-radius: var(--radius); padding: 20px; text-align: center;
  border: 1px solid var(--surface2);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.referral-card:hover {
  border-color: rgba(240,192,64,0.2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* ─── VIP Card Glass Effect Enhancement ──────────────────────────────────── */
.vip-card {
  background: linear-gradient(135deg, #1a1020, #2a1a38);
  border: 1px solid rgba(240,192,64,0.25); border-radius: var(--radius);
  padding: 20px; position: relative; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 30px rgba(240,192,64,0.05);
}

/* ─── Withdraw Method Hover ──────────────────────────────────────────────── */
.withdraw-method-option {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface); border: 2px solid var(--surface2); border-radius: var(--radius-sm);
  padding: 14px 8px; cursor: pointer; transition: all 0.25s cubic-bezier(0.4,0,0.2,1); color: var(--text2);
}
.withdraw-method-option:hover {
  border-color: var(--text3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ─── Pay Option Premium Hover ───────────────────────────────────────────── */
.pay-option {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface); border: 2px solid var(--surface2); border-radius: var(--radius-sm);
  padding: 14px 8px; cursor: pointer; transition: all 0.25s cubic-bezier(0.4,0,0.2,1); color: var(--text);
  font-family: var(--font);
}
.pay-option:hover {
  border-color: var(--gold); background: rgba(240, 192, 64, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(240,192,64,0.08);
}

/* ─── AD BANNER SLOTS ────────────────────────────────────────────────────── */
.ad-banner-slot {
  max-width: 440px;
  margin: 12px auto;
  padding: 0 16px;
  min-height: 50px;
}
.saver-icon { font-size: 1.5rem; }
.saver-text { flex: 1; }
.saver-text b { color: #ff6060; font-size: 0.85rem; display: block; }
.saver-sub { color: #999; font-size: 0.7rem; }
.btn-saver {
  padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer;
  background: linear-gradient(135deg, #ff2020, #ff6040); color: #fff;
  font-size: 0.75rem; font-weight: 800; white-space: nowrap;
}
.btn-saver:active { transform: scale(0.95); }

/* ─── Limited Edition Drop ─────────────────────────────────────────────── */
.limited-section { padding: 0 16px; margin: 12px 0; }
.limited-card {
  background: linear-gradient(135deg, #1a0020, #200030);
  border: 2px solid var(--purple); border-radius: var(--radius); padding: 20px;
  text-align: center; position: relative; overflow: hidden;
  box-shadow: 0 0 25px rgba(176,96,255,0.2);
}
.limited-fire { position: absolute; top: 8px; right: 12px; font-size: 1.2rem; animation: limited-fire 1s ease-in-out infinite; }
@keyframes limited-fire {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
.limited-badge {
  display: inline-block; background: linear-gradient(90deg, var(--purple), #8040d0);
  color: #fff; font-size: 0.6rem; font-weight: 800; letter-spacing: 2px;
  padding: 3px 14px; border-radius: 20px; margin-bottom: 10px;
}
.limited-label { font-size: 1rem; font-weight: 700; color: #e0c0ff; margin-bottom: 8px; }
.limited-price-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.limited-original { font-size: 1rem; color: #666; text-decoration: line-through; }
.limited-sale { font-size: 1.6rem; font-weight: 900; color: var(--purple); }
.limited-stock-wrap { margin-bottom: 12px; }
.limited-stock-bar { height: 8px; background: rgba(176,96,255,0.15); border-radius: 4px; overflow: hidden; }
.limited-stock-fill {
  height: 100%; background: linear-gradient(90deg, #ff4040, var(--lightning-light), var(--allin));
  border-radius: 4px; transition: width 0.5s;
}
.limited-stock-text { display: block; font-size: 0.75rem; color: var(--lightning-light); font-weight: 700; margin-top: 4px; }
.limited-stock-fill.low { background: linear-gradient(90deg, #ff2020, #ff4040) !important; }
.btn-limited {
  width: 100%; padding: 14px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #8040d0, var(--purple)); color: #fff;
  font-size: 0.95rem; font-weight: 800;
  box-shadow: 0 4px 20px rgba(176,96,255,0.3);
}
.btn-limited:active { transform: scale(0.97); }
.limited-buyers { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; }
.limited-buyer-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--allin);
  animation: buyer-blink 1.5s ease-in-out infinite;
}
@keyframes buyer-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
#limitedBuyerText { font-size: 0.65rem; color: #999; }

/* ─── Mystery Box Reveal Modal ─────────────────────────────────────────── */
.mystery-reveal-modal { text-align: center; max-width: 350px; }
.mystery-reveal-box { font-size: 4rem; animation: mbox-bounce 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
@keyframes mbox-bounce {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}
.mystery-reveal-rarity { margin: 8px 0; font-size: 1.5rem; letter-spacing: 2px; }
.mystery-reveal-rarity.common { color: #aaa; }
.mystery-reveal-rarity.rare { color: #60c0ff; text-shadow: 0 0 20px rgba(96,192,255,0.5); }
.mystery-reveal-rarity.legendary { color: #f0c040; text-shadow: 0 0 30px rgba(240,192,64,0.7); animation: legendary-glow 1s ease-in-out infinite; }
@keyframes legendary-glow {
  0%, 100% { text-shadow: 0 0 30px rgba(240,192,64,0.7); }
  50% { text-shadow: 0 0 60px rgba(240,192,64,1), 0 0 100px rgba(240,192,64,0.5); }
}
.mystery-reveal-entries { font-size: 2rem; font-weight: 900; color: #fff; margin: 8px 0; }
.mystery-reveal-sub { font-size: 0.8rem; color: #999; margin-bottom: 16px; }

/* ─── Mega Multiplier Modal ────────────────────────────────────────────── */
.mega-mult-modal { text-align: center; max-width: 360px; position: relative; overflow: hidden; }
.mega-mult-glow {
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(240,192,64,0.1), transparent 60%);
  animation: mega-glow-spin 4s linear infinite;
}
@keyframes mega-glow-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.mega-mult-icon { font-size: 3rem; position: relative; animation: mega-float 2s ease-in-out infinite; }
@keyframes mega-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.mega-mult-title { color: #f0c040; margin: 8px 0; position: relative; }
.mega-mult-value {
  font-size: 2.5rem; font-weight: 900; color: #fff; position: relative;
  font-family: 'Space Grotesk', sans-serif;
  text-shadow: 0 0 20px rgba(240,192,64,0.5);
}
.mega-mult-desc { color: #ccc; font-size: 0.85rem; margin: 8px 0; position: relative; }
.mega-mult-price { font-size: 1.5rem; font-weight: 900; color: #f0c040; margin: 8px 0; position: relative; }
.mega-mult-rare {
  font-size: 0.7rem; color: var(--lightning-light); margin-bottom: 14px; position: relative;
  animation: rare-blink 2s ease-in-out infinite;
}
@keyframes rare-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.mega-mult-btn { margin-bottom: 8px; }

/* ─── FOMO Ticker Event Styles ─────────────────────────────────────────── */
.tick-mystery { color: var(--gold) !important; font-weight: 700; }
.tick-lightning { color: var(--lightning) !important; font-weight: 700; }
.tick-surge { color: var(--surge) !important; font-weight: 700; }
.tick-allin { color: var(--allin) !important; font-weight: 700; }
.tick-limited { color: var(--purple) !important; font-weight: 700; }
.tick-mega { color: var(--gold) !important; font-weight: 800; text-shadow: 0 0 10px rgba(240,192,64,0.5); }

/* ═══════════════════════════════════════════════════════════════════════════
   LIVE CHAT — LEFT SIDEBAR FEED
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar ── */
.chat-sidebar {
  position: fixed;
  top: 20px;
  left: 0;
  bottom: 20px;
  width: 300px; /* Q4: narrower sidebar */
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(10,10,18,0.55) 0%, rgba(6,6,12,0.45) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid rgba(240,192,64,0.12);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.35s;
}
.chat-sidebar.collapsed {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ── Header ── */
.chat-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(240,192,64,0.08);
  background: linear-gradient(135deg, rgba(240,192,64,0.06), transparent);
  flex-shrink: 0;
}
.chat-sidebar-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-sidebar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(64,224,112,0.7);
  animation: chatDotPulse 2s ease infinite;
}
@keyframes chatDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.chat-sidebar-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: var(--gold);
  font-weight: 700;
}
.chat-sidebar-online {
  font-size: 0.65rem;
  color: var(--text3);
  letter-spacing: 0.5px;
}
.chat-sidebar-collapse {
  background: none;
  border: 1px solid rgba(240,192,64,0.15);
  color: var(--gold);
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.chat-sidebar-collapse:hover {
  background: rgba(240,192,64,0.08);
  border-color: rgba(240,192,64,0.3);
}

/* ── Feed area ── */
.chat-feed {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(240,192,64,0.12) transparent;
}
.chat-feed::-webkit-scrollbar { width: 4px; }
.chat-feed::-webkit-scrollbar-track { background: transparent; }
.chat-feed::-webkit-scrollbar-thumb {
  background: rgba(240,192,64,0.15);
  border-radius: 2px;
}
.chat-empty {
  text-align: center;
  color: var(--text3);
  font-size: 0.85rem;
  padding: 80px 16px;
  opacity: 0.6;
}

/* ── Individual message ── */
.chat-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: chatMsgIn 0.35s cubic-bezier(0.4,0,0.2,1) both;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background 0.2s;
  position: relative;
}
.chat-msg:hover {
  background: rgba(255,255,255,0.03);
}
@keyframes chatMsgIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Avatar */
.chat-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  margin-top: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Message body */
.chat-msg-body {
  flex: 1;
  min-width: 0;
}
.chat-msg-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.chat-msg-name {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.chat-msg-name.vip {
  color: var(--gold);
  text-shadow: 0 0 10px rgba(240,192,64,0.4);
}
.chat-msg-level {
  font-size: 0.58rem;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.06);
  color: var(--text3);
}
.chat-msg-level.high {
  background: rgba(240,192,64,0.12);
  color: var(--gold);
}
.chat-msg-vip-badge {
  font-size: 0.52rem;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(135deg, rgba(240,192,64,0.2), rgba(240,192,64,0.08));
  color: var(--gold);
  border: 1px solid rgba(240,192,64,0.2);
}
.chat-msg-time {
  font-size: 0.58rem;
  color: var(--text3);
  margin-left: auto;
  white-space: nowrap;
  opacity: 0.7;
}
.chat-msg-text {
  font-size: 0.85rem;
  color: var(--text2);
  line-height: 1.45;
  word-break: break-word;
}

/* ── Reactions on messages ── */
.chat-react-trigger {
  background: rgba(30,30,46,0.85);
  border: 1px solid rgba(240,192,64,0.15);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.chat-react-trigger:hover {
  border-color: rgba(240,192,64,0.4);
  background: rgba(30,30,46,0.95);
}
.chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.chat-reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  user-select: none;
}
.chat-reaction:hover {
  background: rgba(240,192,64,0.1);
  border-color: rgba(240,192,64,0.25);
}
.chat-reaction.mine {
  background: rgba(240,192,64,0.12);
  border-color: rgba(240,192,64,0.3);
}
.chat-reaction-emoji { font-size: 14px; }
.chat-reaction-count {
  font-size: 0.65rem;
  color: var(--text3);
  font-weight: 600;
}
.chat-reaction.mine .chat-reaction-count { color: var(--gold); }

/* Reaction popup picker (per-message) */
.chat-react-popup {
  position: absolute;
  top: -8px;
  right: 32px;
  background: rgba(20,20,30,0.96);
  border: 1px solid rgba(240,192,64,0.2);
  border-radius: 10px;
  padding: 4px 6px;
  display: flex;
  gap: 2px;
  z-index: 5;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  animation: reactPopIn 0.2s cubic-bezier(0.4,0,0.2,1);
}
@keyframes reactPopIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
.chat-react-popup button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.15s, transform 0.15s;
}
.chat-react-popup button:hover {
  background: rgba(240,192,64,0.12);
  transform: scale(1.2);
}

/* Floating reaction animation */
.chat-reaction-float {
  position: absolute;
  font-size: 22px;
  pointer-events: none;
  animation: reactFloat 1.2s ease-out forwards;
  z-index: 10;
}
@keyframes reactFloat {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.4); }
}

/* System messages */
.chat-msg-system {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text3);
  padding: 4px 0;
  opacity: 0.7;
  font-style: italic;
}
.chat-msg-system.win {
  color: var(--gold);
  opacity: 1;
  font-weight: 600;
  font-style: normal;
}

/* ── Emoji picker ── */
.chat-emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px 12px;
  border-top: 1px solid rgba(240,192,64,0.06);
  background: rgba(0,0,0,0.2);
}
.chat-emoji-picker.hidden { display: none; }
.chat-emoji-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s, transform 0.15s;
}
.chat-emoji-btn:hover {
  background: rgba(240,192,64,0.1);
  transform: scale(1.15);
}

/* ── Typing indicator ── */
.chat-typing {
  padding: 6px 14px;
  font-size: 0.72rem;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.chat-typing.hidden { display: none; }
.chat-typing-dots {
  display: inline-flex;
  gap: 3px;
}
.chat-typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
  animation: typingDot 1.4s infinite;
}
.chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.3); }
}

/* ── Input area ── */
.chat-sidebar-input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(240,192,64,0.08);
  background: rgba(0,0,0,0.25);
  flex-shrink: 0;
  position: relative;
}
.chat-emoji-toggle {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.chat-emoji-toggle:hover { transform: scale(1.15); }
.chat-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 0.84rem;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  min-width: 0;
}
.chat-input::placeholder { color: var(--text3); }
.chat-input:focus {
  border-color: rgba(240,192,64,0.3);
  background: rgba(255,255,255,0.06);
}
.chat-send {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.chat-send:hover {
  transform: scale(1.08);
  box-shadow: 0 0 14px rgba(240,192,64,0.35);
}
.chat-send:active { transform: scale(0.95); }

/* ── Expand button (collapsed state) ── */
.chat-expand-btn {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 10001;
  background: linear-gradient(180deg, rgba(18,18,26,0.9), rgba(10,10,15,0.95));
  border: 1px solid rgba(240,192,64,0.2);
  border-left: none;
  border-radius: 0 10px 10px 0;
  padding: 14px 10px;
  color: var(--gold);
  font-size: 18px;
  cursor: pointer;
  writing-mode: vertical-lr;
  letter-spacing: 3px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 4px 0 20px rgba(0,0,0,0.4);
  transition: background 0.2s, border-color 0.2s;
}
.chat-expand-btn:hover {
  background: rgba(240,192,64,0.08);
  border-color: rgba(240,192,64,0.4);
}
.chat-expand-btn.hidden { display: none; }
.chat-expand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  writing-mode: horizontal-tb;
  margin-top: 6px;
  box-shadow: 0 2px 8px rgba(255,64,96,0.4);
  animation: chatBadgePulse 2s ease infinite;
}
.chat-expand-badge.hidden { display: none; }
@keyframes chatBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .chat-sidebar {
    width: 280px;
  }
  body {
    padding-left: 28px !important; /* don't push content on tablet */
  }
}
@media (max-width: 600px) {
  .chat-sidebar {
    width: 260px;
  }
  body {
    padding-left: 0 !important;
  }
}
@media (max-width: 480px) {
  .chat-sidebar {
    width: 100%;
    border-right: none;
  }
}

/* ── Header right buttons ── */
.chat-sidebar-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-header-btn {
  background: none;
  border: 1px solid rgba(240,192,64,0.12);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.chat-header-btn:hover {
  background: rgba(240,192,64,0.08);
  border-color: rgba(240,192,64,0.3);
}

/* ── Message actions (reply, react, delete) ── */
.chat-msg-actions {
  position: absolute;
  top: 4px;
  right: 6px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}
.chat-msg:hover .chat-msg-actions { opacity: 1; }
.chat-action-btn {
  background: rgba(30,30,46,0.85);
  border: 1px solid rgba(240,192,64,0.15);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text3);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chat-action-btn:hover {
  border-color: rgba(240,192,64,0.4);
  background: rgba(30,30,46,0.95);
  color: var(--text);
}
.chat-delete-btn:hover {
  border-color: rgba(255,64,96,0.5);
  color: var(--red);
}

/* ── Reply preview inside message ── */
.chat-reply-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 4px;
  background: rgba(240,192,64,0.04);
  border-left: 2px solid rgba(240,192,64,0.3);
  border-radius: 0 6px 6px 0;
  font-size: 0.72rem;
  color: var(--text3);
  cursor: pointer;
  transition: background 0.2s;
}
.chat-reply-preview:hover { background: rgba(240,192,64,0.08); }
.chat-reply-icon { font-size: 11px; opacity: 0.6; }
.chat-reply-name { color: var(--gold); font-weight: 600; }
.chat-reply-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* ── Reply bar (above input) ── */
.chat-reply-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(240,192,64,0.05);
  border-top: 1px solid rgba(240,192,64,0.12);
  font-size: 0.72rem;
  color: var(--text3);
  flex-shrink: 0;
}
.chat-reply-bar.hidden { display: none; }
.chat-reply-bar-icon { font-size: 14px; color: var(--gold); }
.chat-reply-bar-label { white-space: nowrap; }
.chat-reply-bar-name { color: var(--gold); }
.chat-reply-bar-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
  opacity: 0.7;
}
.chat-reply-bar-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.chat-reply-bar-close:hover { color: var(--red); background: rgba(255,64,96,0.1); }

/* ── Highlighted message (when clicking reply) ── */
.chat-msg-highlight {
  animation: chatHighlight 1.5s ease;
}
@keyframes chatHighlight {
  0%, 100% { background: transparent; }
  30% { background: rgba(240,192,64,0.12); }
}

/* ── Message mentioned highlight ── */
.chat-msg-mentioned {
  background: rgba(240,192,64,0.06) !important;
  border-left: 2px solid var(--gold);
}

/* ── @Mention styling in text ── */
.chat-mention {
  color: var(--gold);
  font-weight: 600;
  cursor: pointer;
}
.chat-mention-me {
  background: rgba(240,192,64,0.12);
  padding: 0 3px;
  border-radius: 3px;
}

/* ── @Mention autocomplete dropdown ── */
.chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 12px;
  right: 12px;
  background: rgba(16,16,24,0.97);
  border: 1px solid rgba(240,192,64,0.2);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
  animation: mentionDropIn 0.15s ease;
}
.chat-mention-dropdown.hidden { display: none; }
@keyframes mentionDropIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text);
  transition: background 0.15s;
}
.chat-mention-item:hover,
.chat-mention-item.active {
  background: rgba(240,192,64,0.08);
}
.chat-mention-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

/* ── Scroll-to-bottom FAB ── */
.chat-scroll-fab {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #000;
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 15;
  box-shadow: 0 4px 16px rgba(240,192,64,0.35);
  animation: fabBounce 2s ease infinite;
  transition: transform 0.2s;
}
.chat-scroll-fab:hover { transform: translateX(-50%) scale(1.08); }
.chat-scroll-fab.hidden { display: none; }
@keyframes fabBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

/* ── GIF toggle button ── */
.chat-gif-toggle {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text3);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.chat-gif-toggle:hover {
  background: rgba(240,192,64,0.1);
  border-color: rgba(240,192,64,0.25);
  color: var(--gold);
}

/* ── GIF Picker ── */
.chat-gif-picker {
  border-top: 1px solid rgba(240,192,64,0.06);
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
  max-height: 260px;
  display: flex;
  flex-direction: column;
  animation: gifPickerIn 0.2s ease;
}
.chat-gif-picker.hidden { display: none; }
@keyframes gifPickerIn {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 260px; }
}
.chat-gif-search {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 0.82rem;
  font-family: var(--font);
  outline: none;
  box-sizing: border-box;
}
.chat-gif-search::placeholder { color: var(--text3); }
.chat-gif-search:focus { background: rgba(255,255,255,0.06); }
.chat-gif-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(240,192,64,0.12) transparent;
}
.chat-gif-item {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.chat-gif-item:hover {
  transform: scale(1.04);
  box-shadow: 0 0 12px rgba(240,192,64,0.3);
}
.chat-gif-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text3);
  padding: 30px 10px;
  font-size: 0.78rem;
}

/* ── GIF in message ── */
.chat-gif {
  margin-top: 4px;
}
.chat-gif img {
  max-width: 180px;
  max-height: 140px;
  border-radius: 8px;
  object-fit: cover;
}

/* ── Cosmetic: title badge ── */
.chat-msg-title {
  font-size: 0.52rem;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, rgba(176,96,255,0.15), rgba(176,96,255,0.06));
  color: #c4b5fd;
  border: 1px solid rgba(176,96,255,0.2);
}

/* ── Cosmetic: message effects ── */
.chat-effect-sparkle {
  position: relative;
}
.chat-effect-sparkle::after {
  content: '✨';
  position: absolute;
  top: -2px;
  right: 40px;
  font-size: 12px;
  animation: sparkleFloat 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sparkleFloat {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-6px); }
}
.chat-effect-glow .chat-msg-text {
  text-shadow: 0 0 8px rgba(240,192,64,0.3);
}

/* ─── Command / Action Messages ─── */
.chat-msg-command {
  background: linear-gradient(135deg, rgba(96,192,255,0.08), rgba(176,96,255,0.08));
  border-left: 3px solid #60c0ff;
  border-radius: 8px;
  padding-left: 10px;
}
.chat-msg-action {
  background: rgba(240,192,64,0.06);
  border-left: 3px solid #f0c040;
  font-style: italic;
}
.chat-cmd-icon {
  font-size: 1.1em;
  margin-right: 4px;
}

/* ─── Text Formatting ─── */
.chat-inline-code {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'Fira Code', monospace;
  font-size: 0.88em;
  color: #e0d0ff;
}

/* ─── Chat Poll Card ─── */
.chat-poll-card {
  background: linear-gradient(135deg, rgba(20,15,40,0.95), rgba(30,20,60,0.95));
  border: 1px solid rgba(167,139,250,0.35);
  border-radius: 12px;
  margin: 8px 6px;
  padding: 12px;
  animation: chatPollSlideIn 0.4s ease;
}
@keyframes chatPollSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-poll-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.chat-poll-icon {
  font-size: 1.3em;
}
.chat-poll-question {
  font-weight: 700;
  color: #e8e0ff;
  font-size: 0.92rem;
  flex: 1;
}
.chat-poll-by {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
}
.chat-poll-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-poll-option {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s;
  color: #ddd;
  font-size: 0.85rem;
  position: relative;
  overflow: hidden;
}
.chat-poll-option:hover {
  border-color: rgba(167,139,250,0.5);
  background: rgba(167,139,250,0.08);
}
.chat-poll-option.chat-poll-voted {
  border-color: #a78bfa;
  background: rgba(167,139,250,0.12);
}
.chat-poll-option.chat-poll-winner {
  border-color: #f0c040;
  background: rgba(240,192,64,0.1);
}
.chat-poll-option-label {
  flex: 1;
  z-index: 1;
}
.chat-poll-option-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  z-index: 0;
}
.chat-poll-option-fill {
  display: block;
  height: 100%;
  background: rgba(167,139,250,0.15);
  border-radius: 8px;
  transition: width 0.5s ease;
}
.chat-poll-option-count {
  font-weight: 700;
  color: #a78bfa;
  min-width: 20px;
  text-align: right;
  z-index: 1;
  font-size: 0.82rem;
}
.chat-poll-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
}
.chat-poll-ended .chat-poll-option {
  cursor: default;
  opacity: 0.8;
}

/* ─── Entry Rain Message ─── */
.chat-rain-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(240,192,64,0.1), rgba(255,120,0,0.08));
  border: 1px solid rgba(240,192,64,0.3);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 8px 6px;
  animation: chatRainMsgIn 0.5s ease;
}
@keyframes chatRainMsgIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.chat-rain-icon {
  font-size: 1.5em;
}
.chat-rain-info {
  font-size: 0.85rem;
  color: #e8e0ff;
  line-height: 1.4;
}
.chat-rain-detail {
  font-size: 0.75rem;
  color: rgba(240,192,64,0.7);
  margin-top: 2px;
}

/* ─── Rain Overlay Animation ─── */
.chat-rain-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
}
.chat-rain-coin {
  position: absolute;
  top: -40px;
  animation: rainFall linear forwards;
  pointer-events: none;
}
@keyframes rainFall {
  0% { top: -40px; opacity: 1; transform: rotate(0deg); }
  80% { opacity: 1; }
  100% { top: 110vh; opacity: 0; transform: rotate(360deg); }
}

/* ─── Slash Command Hints ─── */
.chat-slash-hints {
  position: absolute;
  bottom: 100%;
  left: 8px;
  right: 8px;
  background: rgba(15,10,30,0.97);
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 10px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 30;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.5);
  padding: 4px;
}
.chat-slash-hints.hidden { display: none; }
.chat-slash-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}
.chat-slash-item:hover {
  background: rgba(167,139,250,0.12);
}
.chat-slash-icon {
  font-size: 1.2em;
  width: 28px;
  text-align: center;
}
.chat-slash-cmd {
  font-weight: 700;
  color: #a78bfa;
  font-size: 0.85rem;
  min-width: 70px;
}
.chat-slash-desc {
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
}

/* ─── Chat Error Toast ─── */
.chat-error-toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  max-width: 360px;
  width: calc(100% - 32px);
  background: rgba(220,38,38,0.95);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  z-index: 100001;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  text-align: center;
  box-shadow: 0 4px 20px rgba(220,38,38,0.4);
}
.chat-error-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── @Mention No-Match ─── */
.chat-mention-empty {
  padding: 10px 14px;
  color: rgba(255,255,255,0.35);
  font-size: 0.8rem;
  text-align: center;
}

/* ─── GIF Retry Button ─── */
.chat-gif-retry {
  margin-top: 8px;
  background: rgba(167,139,250,0.2);
  border: 1px solid rgba(167,139,250,0.4);
  color: #a78bfa;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.2s;
}
.chat-gif-retry:hover {
  background: rgba(167,139,250,0.35);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* VIP DIAMOND                                                           */
/* ═══════════════════════════════════════════════════════════════════════ */
.btn-vip-diamond {
  background: linear-gradient(135deg, #1a1040, #2a1060) !important;
  border: 2px solid #a78bfa !important;
  position: relative;
  overflow: hidden;
}
.btn-vip-diamond::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(167,139,250,.2));
  animation: diamondShimmer 3s ease-in-out infinite;
}
@keyframes diamondShimmer {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.vip-diamond-tag {
  display: block;
  font-size: .65rem;
  font-weight: 800;
  color: #a78bfa;
  letter-spacing: .05em;
  margin-bottom: 2px;
}
.vip-diamond-perks {
  margin-top: 12px;
  text-align: left;
  padding: 0 8px;
}
.vip-diamond-perks .vip-perk {
  color: #c4b5fd;
  font-size: .78rem;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* BATTLE PASS                                                            */
/* ═══════════════════════════════════════════════════════════════════════ */
.battle-pass-section {
  margin: 20px 0;
  background: linear-gradient(135deg, rgba(15,10,30,.9), rgba(25,15,50,.9));
  border: 1px solid rgba(167,139,250,.3);
  border-radius: 16px;
  padding: 16px;
}
.bp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.bp-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bp-icon { font-size: 1.3rem; }
.bp-title {
  font-size: 1rem;
  font-weight: 800;
  color: #a78bfa;
  letter-spacing: .05em;
}
.bp-season {
  font-size: .7rem;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
  padding: 2px 8px;
  border-radius: 8px;
}
.bp-timer {
  font-size: .75rem;
  color: #f59e0b;
  font-weight: 600;
}
.bp-xp-bar-wrap {
  position: relative;
  margin-bottom: 14px;
}
.bp-xp-bar {
  height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: hidden;
}
.bp-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
  border-radius: 4px;
  transition: width .5s ease;
}
.bp-xp-text {
  font-size: .65rem;
  color: rgba(255,255,255,.5);
  display: block;
  text-align: right;
  margin-top: 3px;
}
.bp-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(167,139,250,.3) transparent;
}
.bp-tier {
  flex: 0 0 72px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 8px 4px;
  text-align: center;
  position: relative;
  transition: border-color .3s, background .3s;
}
.bp-tier.bp-unlocked {
  border-color: rgba(167,139,250,.5);
  background: rgba(167,139,250,.08);
}
.bp-tier.bp-current {
  border-color: #a78bfa;
  box-shadow: 0 0 12px rgba(167,139,250,.3);
}
.bp-tier-num {
  font-size: .6rem;
  color: rgba(255,255,255,.4);
  font-weight: 700;
  margin-bottom: 4px;
}
.bp-tier-free, .bp-tier-premium {
  font-size: .65rem;
  padding: 3px 0;
  border-radius: 4px;
  margin: 2px 0;
}
.bp-tier-free {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
}
.bp-tier-premium {
  background: rgba(167,139,250,.15);
  color: #c4b5fd;
  font-weight: 600;
}
.bp-tier-premium.bp-locked {
  opacity: .4;
  filter: grayscale(.8);
}
.bp-tier-claim {
  font-size: .55rem;
  font-weight: 700;
  color: #22c55e;
  margin-top: 4px;
  cursor: pointer;
  display: none;
}
.bp-tier.bp-claimable .bp-tier-claim { display: block; }
.bp-tier-check { display: none; }
.bp-tier.bp-claimed .bp-tier-check {
  display: block;
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: .6rem;
}
.bp-premium-cta {
  margin-top: 10px;
}
.bp-premium-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(167,139,250,.15), rgba(124,58,237,.15));
  border: 1px solid rgba(167,139,250,.3);
  border-radius: 10px;
  padding: 10px 14px;
}
.bp-premium-icon { font-size: 1.1rem; }
.bp-premium-text {
  flex: 1;
  font-size: .78rem;
  color: #c4b5fd;
  font-weight: 600;
}
.btn-bp-premium {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 800;
  font-size: .8rem;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* TOURNAMENT                                                             */
/* ═══════════════════════════════════════════════════════════════════════ */
.tournament-section {
  margin: 20px 0;
}
.tourney-card {
  background: linear-gradient(135deg, rgba(15,25,15,.9), rgba(20,40,20,.9));
  border: 1px solid rgba(34,197,94,.3);
  border-radius: 16px;
  padding: 16px;
}
.tourney-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tourney-icon { font-size: 1.3rem; }
.tourney-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 800;
  color: #22c55e;
  letter-spacing: .05em;
}
.tourney-timer {
  font-size: .85rem;
  color: #f59e0b;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tourney-prize-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.tourney-prize-label {
  font-size: .75rem;
  color: rgba(255,255,255,.5);
}
.tourney-prize-val {
  font-size: 1.4rem;
  font-weight: 900;
  color: #22c55e;
}
.tourney-entry-fee {
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  margin-bottom: 12px;
}
.tourney-leaderboard {
  margin: 8px 0 12px;
}
.tourney-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: .78rem;
  border-radius: 6px;
}
.tourney-lb-row:nth-child(odd) { background: rgba(255,255,255,.03); }
.tourney-lb-rank {
  width: 22px;
  font-weight: 800;
  color: #22c55e;
}
.tourney-lb-name { flex: 1; color: rgba(255,255,255,.8); }
.tourney-lb-score { font-weight: 700; color: #f0c040; }
.btn-tourney {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #166534, #22c55e);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
  letter-spacing: .03em;
}
.tourney-entered {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 4px;
}
.tourney-entered-badge {
  color: #22c55e;
  font-weight: 700;
  font-size: .8rem;
}
.tourney-your-score {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* LUCKY BOOST / SECOND CHANCE / GIFT / COSMETICS BUTTONS                */
/* ═══════════════════════════════════════════════════════════════════════ */
.btn-row-mini {
  gap: 8px !important;
}
.btn-row-mini .btn {
  flex: 1;
  padding: 10px 8px;
  font-size: .78rem;
}
.btn-lucky-boost {
  background: linear-gradient(135deg, #065f46, #10b981) !important;
  border: 1px solid rgba(16,185,129,.4) !important;
}
.btn-second-chance {
  background: linear-gradient(135deg, #1e3a5f, #3b82f6) !important;
  border: 1px solid rgba(59,130,246,.4) !important;
}
.btn-gift {
  background: linear-gradient(135deg, #7c2d12, #f97316) !important;
  border: 1px solid rgba(249,115,22,.4) !important;
}
.btn-cosmetics {
  background: linear-gradient(135deg, #4a1d96, #8b5cf6) !important;
  border: 1px solid rgba(139,92,246,.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* URGENCY BUNDLE                                                         */
/* ═══════════════════════════════════════════════════════════════════════ */
.urgency-section {
  margin: 16px 0;
  animation: urgencyPulse 2s ease-in-out infinite;
}
@keyframes urgencyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.01); }
}
.urgency-card {
  background: linear-gradient(135deg, rgba(40,10,10,.95), rgba(60,15,15,.95));
  border: 2px solid #ef4444;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.urgency-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(239,68,68,.05) 10px,
    rgba(239,68,68,.05) 20px
  );
}
.urgency-badge {
  display: inline-block;
  background: #ef4444;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
  letter-spacing: .05em;
  animation: urgencyFlash 1s ease-in-out infinite;
}
@keyframes urgencyFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}
.urgency-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.urgency-pot-label {
  font-weight: 800;
  font-size: 1rem;
  color: #f0c040;
}
.urgency-fill {
  font-size: .85rem;
  color: #ef4444;
  font-weight: 700;
}
.urgency-deal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
}
.urgency-entries {
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
}
.urgency-original {
  font-size: .85rem;
  color: rgba(255,255,255,.4);
  text-decoration: line-through;
}
.urgency-sale {
  font-size: 1.2rem;
  font-weight: 900;
  color: #22c55e;
}
.urgency-discount {
  background: #ef4444;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
}
.urgency-bar-wrap { margin-bottom: 12px; position: relative; }
.urgency-bar {
  height: 8px;
  background: rgba(255,255,255,.1);
  border-radius: 4px;
  overflow: hidden;
}
.urgency-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #f97316);
  border-radius: 4px;
  transition: width .5s ease;
}
.btn-urgency {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  letter-spacing: .03em;
  position: relative;
}
.urgency-fomo {
  font-size: .7rem;
  color: rgba(255,255,255,.4);
  margin-top: 8px;
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* GIFT MODAL                                                             */
/* ═══════════════════════════════════════════════════════════════════════ */
.gift-modal {
  max-width: 380px;
  text-align: center;
}
.gift-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: #f97316;
  margin-bottom: 4px;
}
.gift-sub {
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 16px;
}
.gift-label {
  display: block;
  text-align: left;
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  margin-bottom: 4px;
  margin-top: 10px;
}
.gift-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  color: #fff;
  font-size: .85rem;
  outline: none;
}
.gift-input:focus { border-color: #f97316; }
.gift-qty-row {
  display: flex;
  gap: 8px;
  margin: 6px 0 10px;
}
.gift-qty-btn {
  flex: 1;
  padding: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  color: rgba(255,255,255,.7);
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.gift-qty-btn.active {
  background: rgba(249,115,22,.2);
  border-color: #f97316;
  color: #f97316;
}
.gift-select {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  color: #fff;
  font-size: .85rem;
  outline: none;
}
.gift-total {
  font-size: 1rem;
  font-weight: 700;
  color: #22c55e;
  margin: 14px 0 10px;
}
.gift-send-btn {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* COSMETICS SHOP MODAL                                                   */
/* ═══════════════════════════════════════════════════════════════════════ */
.cosmetics-modal {
  max-width: 420px;
}
.cosmetics-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: #8b5cf6;
  margin-bottom: 4px;
  text-align: center;
}
.cosmetics-sub {
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 14px;
  text-align: center;
}
.cosmetics-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}
.cosmetics-tab {
  flex: 1;
  padding: 8px 4px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: rgba(255,255,255,.6);
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.cosmetics-tab.active {
  background: rgba(139,92,246,.2);
  border-color: #8b5cf6;
  color: #c4b5fd;
}
.cosmetics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}
.cosmetic-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  transition: all .2s;
  cursor: pointer;
}
.cosmetic-item:hover {
  border-color: rgba(139,92,246,.5);
  background: rgba(139,92,246,.08);
}
.cosmetic-item.cosmetic-owned {
  border-color: rgba(34,197,94,.4);
}
.cosmetic-item.cosmetic-equipped {
  border-color: #22c55e;
  background: rgba(34,197,94,.1);
}
.cosmetic-preview {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.cosmetic-name {
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  margin-bottom: 4px;
}
.cosmetic-price-tag {
  font-size: .7rem;
  color: #22c55e;
  font-weight: 700;
}
.cosmetic-owned-tag {
  font-size: .6rem;
  color: rgba(34,197,94,.7);
  font-weight: 600;
}
.cosmetic-equipped-tag {
  font-size: .6rem;
  color: #22c55e;
  font-weight: 700;
}

/* ─── PVP DUEL ARENA ──────────────────────────────────────────────────── */
.duel-arena-section {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.duel-arena-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.duel-arena-title {
  font-size: 2rem;
  color: var(--gold);
  text-shadow: 0 2px 12px rgba(255,215,0,.4);
  margin-bottom: .3rem;
  letter-spacing: 2px;
}
.duel-arena-sub {
  color: #ccc;
  font-size: .95rem;
}
.duel-stats-bar {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: .7rem;
  flex-wrap: wrap;
}
.duel-stat {
  background: rgba(255,215,0,.08);
  border: 1px solid rgba(255,215,0,.15);
  padding: .35rem .8rem;
  border-radius: 20px;
  font-size: .85rem;
  color: #ddd;
}
.duel-stat strong {
  color: var(--gold);
}

/* Duel Record Card */
.duel-record-card {
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  text-align: center;
}
.duel-record-title {
  font-size: .85rem;
  letter-spacing: 2px;
  color: #999;
  margin-bottom: .5rem;
  text-transform: uppercase;
}
.duel-record-stats {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.dr-stat {
  font-size: .9rem;
  color: #ddd;
}
.dr-wins strong { color: #22c55e; }
.dr-losses strong { color: #ef4444; }
.dr-streak strong { color: var(--gold); }
.dr-best strong { color: #a855f7; }
.dr-earned strong { color: #22c55e; }

/* Create Duel Card */
.duel-create-card {
  background: linear-gradient(135deg, rgba(0,0,0,.5), rgba(255,215,0,.05));
  border: 1px solid rgba(255,215,0,.25);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  text-align: center;
}
.duel-create-title {
  color: var(--gold);
  font-size: 1.2rem;
  margin-bottom: .8rem;
}
.duel-stake-selector {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.duel-stake-btn {
  padding: .6rem 1.2rem;
  border: 2px solid rgba(255,215,0,.3);
  border-radius: 10px;
  background: rgba(0,0,0,.4);
  color: var(--gold);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.duel-stake-btn:hover, .duel-stake-btn.active {
  border-color: var(--gold);
  background: rgba(255,215,0,.15);
  box-shadow: 0 0 12px rgba(255,215,0,.3);
  transform: translateY(-2px);
}
.duel-boost-selector {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.duel-boost-btn {
  padding: .4rem .8rem;
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 8px;
  background: rgba(0,0,0,.3);
  color: #ddd;
  font-size: .78rem;
  cursor: pointer;
  transition: all .2s;
}
.duel-boost-btn:hover { border-color: var(--gold); }
.duel-boost-btn.active {
  border-color: #22c55e;
  background: rgba(34,197,94,.12);
  color: #22c55e;
}
.duel-create-btn {
  font-size: 1.1rem;
  padding: .7rem 2.5rem;
}

/* Duel List */
.duel-list-card {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,215,0,.15);
  border-radius: 14px;
  padding: 1.2rem;
  margin-bottom: 1.2rem;
}
.duel-list-title {
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: .8rem;
}
.duel-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: 300px;
  overflow-y: auto;
}
.duel-empty {
  color: #777;
  text-align: center;
  padding: 1.5rem;
  font-style: italic;
}
.duel-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .8rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,215,0,.1);
  border-radius: 10px;
  transition: border-color .2s;
}
.duel-list-item:hover {
  border-color: rgba(255,215,0,.3);
}
.duel-li-creator {
  color: var(--gold);
  font-weight: 700;
  font-size: .9rem;
}
.duel-li-stake {
  color: #22c55e;
  font-weight: 700;
  font-size: 1rem;
}
.duel-li-boosts {
  color: #aaa;
  font-size: .75rem;
}
.duel-li-time {
  color: #888;
  font-size: .7rem;
}
.duel-join-btn {
  padding: .35rem .8rem;
  font-size: .85rem;
  border-radius: 8px;
}

/* LIVE DUEL VIEW */
.duel-live-view {
  background: linear-gradient(135deg, rgba(0,0,0,.6), rgba(255,50,0,.05));
  border: 2px solid #ef4444;
  border-radius: 18px;
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  animation: duelPulse 2s ease-in-out infinite;
}
@keyframes duelPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(239,68,68,.2); }
  50% { box-shadow: 0 0 30px rgba(239,68,68,.4); }
}
.duel-live-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.duel-live-badge {
  background: #ef4444;
  color: #fff;
  padding: .2rem .6rem;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 700;
  animation: liveBadge 1s ease-in-out infinite;
}
@keyframes liveBadge {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.duel-live-stake {
  color: var(--gold);
  font-size: 1.1rem;
  font-weight: 700;
}
.duel-live-spectators {
  color: #aaa;
  font-size: .85rem;
}
.duel-live-players {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
}
.duel-player {
  flex: 1;
  max-width: 340px;
  text-align: center;
}
.duel-player-name {
  color: var(--gold);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .3rem;
}
.duel-player-boosts {
  font-size: .75rem;
  color: #aaa;
  margin-bottom: .3rem;
}
.duel-player-score {
  font-size: 2.2rem;
  font-weight: 900;
  color: #22c55e;
  text-shadow: 0 0 10px rgba(34,197,94,.4);
  margin-bottom: .5rem;
}
.duel-player-ready {
  color: #22c55e;
  font-weight: 700;
  font-size: .85rem;
}
.duel-vs {
  font-size: 1.5rem;
  color: #ef4444;
  font-weight: 900;
  padding-top: 3rem;
  text-shadow: 0 0 10px rgba(239,68,68,.4);
}
.duel-game-canvas {
  width: 100%;
  max-width: 320px;
  border: 2px solid rgba(255,215,0,.2);
  border-radius: 10px;
  background: rgba(0,0,0,.5);
}
.duel-live-actions {
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.duel-ready-btn {
  font-size: 1.1rem;
  padding: .6rem 2rem;
  animation: readyPulse 1.5s ease-in-out infinite;
}
@keyframes readyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.duel-tip-btn {
  font-size: .8rem;
  padding: .4rem .8rem;
  background: rgba(255,215,0,.1) !important;
  border: 1px solid rgba(255,215,0,.3) !important;
}
.duel-countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}
.duel-countdown-text {
  display: block;
  font-size: 1rem;
  color: #fff;
  letter-spacing: 3px;
}
.duel-countdown-num {
  font-size: 5rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 40px rgba(255,215,0,.6);
  animation: countBounce .5s ease-out;
}
@keyframes countBounce {
  0% { transform: scale(2); opacity: 0; }
  60% { transform: scale(.9); }
  100% { transform: scale(1); opacity: 1; }
}

/* Duel History */
.duel-history-card {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,215,0,.1);
  border-radius: 14px;
  padding: 1.2rem;
  margin-bottom: 1.2rem;
}
.duel-history-title {
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: .8rem;
}
.duel-history {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-height: 250px;
  overflow-y: auto;
}
.duel-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem .6rem;
  background: rgba(255,255,255,.02);
  border-radius: 8px;
  font-size: .8rem;
}
.duel-hi-winner {
  color: #22c55e;
  font-weight: 700;
}
.duel-hi-loser {
  color: #888;
}
.duel-hi-score {
  color: #ddd;
  font-size: .75rem;
}
.duel-hi-prize {
  color: var(--gold);
  font-weight: 700;
}

/* Duel Result Modal */
.duel-result-modal {
  text-align: center;
  max-width: 400px;
}
.duel-result-icon {
  font-size: 3.5rem;
  margin-bottom: .3rem;
}
.duel-result-title {
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: .8rem;
}
.duel-result-title.defeat {
  color: #ef4444;
}
.duel-result-title.tie {
  color: #f59e0b;
}
.duel-result-scores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.duel-result-p1, .duel-result-p2 {
  text-align: center;
}
.drp-name {
  display: block;
  color: #ccc;
  font-size: .85rem;
  margin-bottom: .2rem;
}
.drp-score {
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
}
.duel-result-vs {
  color: #ef4444;
  font-weight: 900;
  font-size: 1.2rem;
}
.duel-result-prize {
  font-size: 1.5rem;
  font-weight: 900;
  color: #22c55e;
  margin-bottom: 1rem;
  text-shadow: 0 0 10px rgba(34,197,94,.4);
}
.duel-result-prize.loss {
  color: #ef4444;
}
#btnDuelRematch {
  margin-right: .5rem;
}

@media (max-width: 700px) {
  .duel-live-players {
    flex-direction: column;
    align-items: center;
  }
  .duel-vs {
    padding-top: 0;
    font-size: 1.2rem;
  }
  .duel-game-canvas {
    max-width: 280px;
  }
  .duel-arena-title {
    font-size: 1.4rem;
  }
}

/* ─── GOLDPOT LIVE — Streaming ─────────────────────────────────────────── */
.stream-section {
  margin: 2rem auto;
  max-width: 900px;
  padding: 0 1rem;
}
.stream-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.stream-title {
  font-size: 2rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ff6090, #f0c040, #60c0ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.stream-sub {
  color: #aaa;
  margin-top: .25rem;
}
.stream-stats-bar {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}
.stream-stat {
  font-size: .85rem;
  color: #ccc;
}
.stream-stat strong {
  color: #f0c040;
}

/* Go Live Card */
.stream-go-live-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(240,192,64,.15);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.stream-go-live-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #f0c040;
  margin-bottom: .5rem;
}
.stream-go-live-desc {
  color: #aaa;
  font-size: .85rem;
  margin-bottom: 1rem;
}
.stream-title-input {
  width: 100%;
  max-width: 400px;
  padding: .65rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(240,192,64,.25);
  background: rgba(0,0,0,.3);
  color: #fff;
  font-size: .9rem;
  margin-bottom: 1rem;
  text-align: center;
}
.stream-title-input::placeholder { color: #666; }
.stream-go-live-btn {
  padding: .7rem 2rem;
  font-size: 1rem;
  animation: pulse 2s infinite;
}
.stream-end-btn {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  padding: .7rem 2rem;
  font-size: 1rem;
}

/* Stream List */
.stream-list-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.stream-list-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #60c0ff;
  margin-bottom: .75rem;
}
.stream-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.stream-empty {
  text-align: center;
  color: #666;
  padding: 1.5rem;
  font-style: italic;
}
.stream-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: .75rem 1rem;
  cursor: pointer;
  transition: all .2s;
}
.stream-item:hover {
  border-color: rgba(240,192,64,.3);
  background: rgba(240,192,64,.06);
}
.stream-item-info {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.stream-item-name {
  font-weight: 700;
  color: #fff;
}
.stream-item-title {
  font-size: .8rem;
  color: #aaa;
}
.stream-item-meta {
  display: flex;
  gap: 1rem;
  font-size: .8rem;
  color: #888;
}
.stream-item-badge {
  background: #ef4444;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 6px;
  animation: liveBlink 1.5s infinite;
}
@keyframes liveBlink {
  0%,100% { opacity: 1; }
  50% { opacity: .5; }
}
.stream-item-watch {
  background: linear-gradient(135deg, #f0c040, #e6a800);
  color: #1a1a2e;
  font-weight: 700;
  border: none;
  padding: .45rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
}

/* Stream Viewer */
.stream-viewer {
  background: rgba(10,10,30,.95);
  border: 1px solid rgba(240,192,64,.2);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.stream-viewer-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.stream-live-badge {
  background: #ef4444;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 6px;
  animation: liveBlink 1.5s infinite;
}
.stream-viewer-title {
  flex: 1;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stream-viewer-count {
  color: #aaa;
  font-size: .85rem;
}
.stream-leave-btn {
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stream-viewer-body {
  display: flex;
  gap: 0;
  min-height: 460px;
}
.stream-canvas-wrap {
  position: relative;
  flex: 0 0 360px;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stream-canvas {
  display: block;
  background: #0a0a1e;
}
.stream-score-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,.6);
  color: #f0c040;
  font-weight: 700;
  font-size: .8rem;
  padding: .2rem .6rem;
  border-radius: 6px;
}
.stream-gift-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
  font-size: 3rem;
  opacity: 0;
  transition: opacity .3s;
}
.stream-gift-overlay.active {
  opacity: 1;
  animation: giftPop .8s ease-out;
}
@keyframes giftPop {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 0; }
  30% { transform: translate(-50%,-50%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

.stream-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255,255,255,.06);
  overflow-y: auto;
  max-height: 460px;
}
.stream-sc-feed {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding: .75rem;
}
.stream-sc-title,
.stream-gift-title,
.stream-top-title {
  font-weight: 700;
  font-size: .85rem;
  color: #f0c040;
  margin-bottom: .5rem;
}
.stream-sc-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.stream-sc-msg {
  padding: .5rem .65rem;
  border-radius: 8px;
  font-size: .8rem;
  border-left: 3px solid;
  background: rgba(255,255,255,.03);
}
.stream-sc-msg .sc-sender {
  font-weight: 700;
  margin-right: .4rem;
}
.stream-sc-msg .sc-tier {
  font-size: .65rem;
  padding: .1rem .35rem;
  border-radius: 4px;
  margin-right: .3rem;
  font-weight: 700;
  color: #1a1a2e;
}

/* SC Buy Area */
.stream-sc-buy {
  padding: .65rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.stream-sc-input {
  width: 100%;
  padding: .5rem .65rem;
  border-radius: 8px;
  border: 1px solid rgba(240,192,64,.2);
  background: rgba(0,0,0,.3);
  color: #fff;
  font-size: .8rem;
  margin-bottom: .5rem;
}
.stream-sc-input::placeholder { color: #555; }
.stream-sc-tiers {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}
.stream-sc-tier-btn {
  border: 1px solid;
  background: rgba(0,0,0,.3);
  color: #fff;
  padding: .3rem .6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 700;
  transition: all .2s;
}
.stream-sc-tier-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

/* Gift Grid */
.stream-gift-section {
  padding: .65rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.stream-gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
}
.stream-gift-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: .4rem .25rem;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  color: #fff;
}
.stream-gift-btn:hover {
  border-color: rgba(240,192,64,.3);
  background: rgba(240,192,64,.08);
  transform: scale(1.05);
}
.stream-gift-emoji {
  font-size: 1.3rem;
  display: block;
}
.stream-gift-label {
  font-size: .65rem;
  color: #aaa;
  display: block;
  margin-top: .1rem;
}
.stream-gift-price {
  font-size: .65rem;
  color: #f0c040;
  font-weight: 700;
}

/* Subscribe */
.stream-sub-section {
  padding: .65rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.stream-sub-btn {
  width: 100%;
  font-size: .85rem;
  padding: .55rem;
}

/* Hype Train */
.stream-hype-section {
  padding: .65rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.stream-hype-title {
  font-weight: 700;
  font-size: .85rem;
  color: #ff6090;
  margin-bottom: .4rem;
}
.stream-hype-bar {
  height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: .3rem;
}
.stream-hype-fill {
  height: 100%;
  background: linear-gradient(90deg, #f0c040, #ff6090, #b9f2ff);
  border-radius: 4px;
  transition: width .5s ease;
}
.stream-hype-reward {
  font-size: .75rem;
  color: #f0c040;
}

/* Top Gifters */
.stream-top-gifters {
  padding: .65rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.stream-top-list {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.stream-top-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  padding: .25rem .4rem;
  border-radius: 6px;
  background: rgba(255,255,255,.03);
}
.stream-top-rank {
  font-weight: 700;
  min-width: 22px;
}
.stream-top-name {
  flex: 1;
  color: #fff;
}
.stream-top-amount {
  color: #f0c040;
  font-weight: 700;
}

/* Stream Uptime */
.stream-uptime {
  font-size: .75rem;
  color: rgba(255,255,255,.5);
  font-family: 'Courier New', monospace;
  letter-spacing: .5px;
}
.stream-item-uptime {
  font-size: .7rem;
  color: rgba(255,255,255,.4);
  font-family: 'Courier New', monospace;
  margin-left: .4rem;
}

/* Free Chat Section */
.stream-chat-section {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.stream-chat-title {
  font-size: .8rem;
  font-weight: 700;
  color: #f0c040;
  padding: .5rem .65rem .3rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.stream-chat-list {
  flex: 1;
  min-height: 100px;
  max-height: 180px;
  overflow-y: auto;
  padding: .3rem .65rem;
  scroll-behavior: smooth;
}
.stream-chat-list::-webkit-scrollbar { width: 4px; }
.stream-chat-list::-webkit-scrollbar-track { background: transparent; }
.stream-chat-list::-webkit-scrollbar-thumb { background: rgba(240,192,64,.3); border-radius: 4px; }
.stream-sc-list::-webkit-scrollbar { width: 4px; }
.stream-sc-list::-webkit-scrollbar-track { background: transparent; }
.stream-sc-list::-webkit-scrollbar-thumb { background: rgba(240,192,64,.3); border-radius: 4px; }

.stream-chat-msg {
  padding: .2rem 0;
  font-size: .78rem;
  line-height: 1.35;
  color: rgba(255,255,255,.8);
  animation: chatFadeIn .25s ease;
}
.stream-chat-msg.system-msg {
  color: rgba(240,192,64,.7);
  font-style: italic;
  font-size: .72rem;
}
.chat-sender {
  font-weight: 700;
  color: #f0c040;
  margin-right: .3rem;
}
.stream-chat-input-wrap {
  display: flex;
  gap: .3rem;
  padding: .4rem .65rem;
  border-top: 1px solid rgba(255,255,255,.04);
}
.stream-chat-input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: .35rem .5rem;
  color: #fff;
  font-size: .78rem;
  outline: none;
  transition: border-color .2s;
}
.stream-chat-input:focus {
  border-color: rgba(240,192,64,.4);
}
.stream-chat-send {
  background: linear-gradient(135deg, #f0c040, #e0a020);
  border: none;
  border-radius: 6px;
  padding: .35rem .6rem;
  color: #1a1a2e;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  transition: opacity .2s;
}
.stream-chat-send:hover {
  opacity: .85;
}

/* Super Chat Timestamps & Entrance */
.sc-time {
  float: right;
  font-size: .65rem;
  color: rgba(255,255,255,.35);
  font-family: 'Courier New', monospace;
  margin-left: .4rem;
}
.sc-entrance {
  animation: scSlideIn .35s ease-out;
}
@keyframes scSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes chatFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Subscribe Button States */
.stream-sub-btn.subscribed,
.stream-sub-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  background: linear-gradient(135deg, #3a8f3a, #2d7a2d);
}

/* Streamer Bar */
.stream-streamer-bar {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: .75rem;
  background: rgba(240,192,64,.08);
  border-top: 1px solid rgba(240,192,64,.15);
  font-size: .85rem;
  color: #f0c040;
  font-weight: 600;
}

/* Stream Responsive */
@media (max-width: 700px) {
  .stream-viewer-body {
    flex-direction: column;
  }
  .stream-canvas-wrap {
    flex: none;
    width: 100%;
  }
  .stream-canvas {
    width: 100%;
    height: auto;
  }
  .stream-sidebar {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.06);
    max-height: 350px;
  }
  .stream-title {
    font-size: 1.4rem;
  }
  .stream-stats-bar {
    gap: .75rem;
  }
}

/* ─── Session Time Warning ───────────────────────────────────────────────── */
.session-time-warning {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.7); z-index: 100002;
  display: flex; align-items: center; justify-content: center;
}
.stw-inner {
  background: var(--surface); border: 1px solid var(--gold);
  border-radius: 16px; padding: 28px 24px; max-width: 340px; width: 90%;
  text-align: center; color: var(--white); font-size: .9rem;
}
.stw-icon { font-size: 2rem; display: block; margin-bottom: 10px; }
.stw-inner p { color: var(--text2); font-size: .78rem; margin: 10px 0 16px; }
.stw-inner a { color: var(--gold); }
.stw-close {
  background: var(--gold); color: var(--bg); border: none;
  padding: 10px 28px; border-radius: 10px; font-weight: 700;
  font-size: .85rem; cursor: pointer;
}

/* ─── Email Verify Banner ────────────────────────────────────────────────── */
.email-verify-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100001;
  background: linear-gradient(135deg, #1a3a5c, #0d2240);
  color: var(--white); text-align: center; padding: 10px 16px;
  font-size: .8rem; border-bottom: 1px solid rgba(240,192,64,.3);
}
.email-verify-banner a { color: var(--gold); font-weight: 700; margin-left: 6px; }
.evb-close {
  background: none; border: none; color: var(--text3); font-size: 1.1rem;
  cursor: pointer; margin-left: 10px; vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   50 NAVIGATION & SPACE IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Q2: scale game canvas on larger phones */
@media (min-width: 414px) and (max-width: 600px) {
  .game-container { max-width: 100% !important; }
}

/* Q7: smooth dismiss animation for offer sections */
.offer-dismissing {
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s, margin 0.35s;
  max-height: 0 !important; opacity: 0 !important; overflow: hidden;
  margin-top: 0 !important; margin-bottom: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
}

/* Q13: tab swipe peek indicator */
.tab-peek-indicator {
  position: fixed; top: 50%; z-index: 898;
  width: 4px; height: 60px; border-radius: 2px;
  background: var(--gold); opacity: 0; transition: opacity 0.2s;
  transform: translateY(-50%); pointer-events: none;
}
.tab-peek-indicator.left { left: 0; }
.tab-peek-indicator.right { right: 0; }
.tab-peek-indicator.visible { opacity: 0.5; }

/* Q15: scroll-to-top inside modals */
.modal-scroll-top {
  position: sticky; bottom: 10px; float: right;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface2); color: var(--gold); border: 1px solid var(--border);
  font-size: 0.9rem; cursor: pointer; display: none;
  align-items: center; justify-content: center; z-index: 2;
}
.modal-scroll-top.visible { display: flex; }

/* Q19: sticky pot section on play tab */
.pot-section-sticky {
  position: sticky; top: 44px; z-index: 50;
  background: rgba(10, 10, 15, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(240,192,64,0.08);
  padding: 12px 20px 10px !important;
  transition: padding 0.3s, box-shadow 0.3s;
}
.pot-section-sticky .pot-amount { font-size: 2.2rem; }
.pot-section-sticky .pot-label { margin-bottom: 2px; }
.pot-section-sticky .pot-entries { margin-top: 2px; }
.pot-section-sticky .pot-bar-wrap { margin: 8px auto 0; }
.pot-section-sticky .countdown-wrap { display: none; }

/* Q21: section divider spacing */
.section-divider {
  height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 20px 16px;
}

/* Q22: fixed-height jackpot/flash banners to avoid layout shift */
.flash-banner, .jackpot-banner {
  min-height: 0; transition: min-height 0.3s, opacity 0.3s;
}

/* Q24: sticky section headers */
.section-title-sticky {
  position: sticky; top: 44px; z-index: 40;
  background: rgba(10, 10, 15, 0.95); backdrop-filter: blur(8px);
  padding: 10px 16px 8px; margin: 0 -16px; width: calc(100% + 32px);
  border-bottom: 1px solid rgba(240,192,64,0.06);
}

/* Q26: bottom-sheet modals on mobile */
@media (max-width: 600px) {
  .modal-content.bottom-sheet {
    position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important; max-width: 100% !important; width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 85vh; overflow-y: auto;
    animation: sheetUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .modal-content.bottom-sheet::before {
    content: ''; display: block; width: 40px; height: 4px;
    background: var(--text3); border-radius: 2px;
    margin: 0 auto 12px; opacity: 0.5;
  }
}

/* Q27: wider modals for content-heavy ones */
.wheel-modal, .pay-modal, .withdraw-modal { max-width: 420px; }

/* Q29-30: consistent modal close button */
.modal-close-btn {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: none; color: var(--text2);
  font-size: 1rem; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s; z-index: 2;
}
.modal-close-btn:hover { background: rgba(255,255,255,0.15); color: var(--white); }

/* Q31: distinguish auto-popup vs user-triggered */
.modal.auto-popup .modal-content {
  animation: modal-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(240,192,64,0.2);
}
@keyframes modal-bounce-in {
  0% { opacity: 0; transform: scale(0.8) translateY(40px); }
  60% { transform: scale(1.03) translateY(-5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Q35: larger tap targets for leaderboard rows and mission items */
.lb-item, .mission-item, .milestone-item, .achievement-item {
  min-height: 48px; padding: 12px;
}

/* Q36: safe area awareness */
@supports (padding: env(safe-area-inset-top)) {
  .border-ticker-top { padding-top: env(safe-area-inset-top); }
  .border-ticker-bottom { padding-bottom: env(safe-area-inset-bottom); }
  body { padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* Q37: auto-hide bottom nav on scroll — hide class set by JS */

/* Q38: fullscreen chat on mobile */
@media (max-width: 600px) {
  .chat-sidebar:not(.collapsed) {
    width: 100% !important; left: 0 !important; right: 0 !important;
    top: 0 !important; bottom: 0 !important;
    border-radius: 0 !important;
  }
}

/* Q40: chat floating bubble mode */
.chat-bubble {
  position: fixed; bottom: 76px; right: 12px;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #1a1000; font-size: 1.3rem; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 901; box-shadow: 0 4px 20px rgba(240,192,64,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  animation: float 3s cubic-bezier(0.34, 0.82, 0.38, 0.99) infinite;
}
.chat-bubble:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(240,192,64,0.4); }
.chat-bubble-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--red); color: #fff;
  font-size: 0.65rem; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; border: 2px solid var(--bg);
}

/* Q41: chat badge on bottom nav */
.bnav-chat-badge {
  position: absolute; top: 2px; right: 18%;
  min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 0.55rem;
  font-weight: 700; display: flex; align-items: center;
  justify-content: center; padding: 0 3px;
  border: 2px solid #0d0d15;
  animation: badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Q42: resizable desktop chat sidebar */
@media (min-width: 601px) {
  .chat-sidebar { resize: horizontal; overflow: auto; min-width: 220px; max-width: 400px; }
}

/* Q43: directional tab slide animation */
.tab-panel {
  transform: translateX(0);
}
.tab-slide-left { animation: tabSlideLeft 0.3s cubic-bezier(0.16,1,0.3,1); }
.tab-slide-right { animation: tabSlideRight 0.3s cubic-bezier(0.16,1,0.3,1); }
@keyframes tabSlideLeft {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tabSlideRight {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Q44: landscape orientation support */
@media (orientation: landscape) and (max-height: 500px) {
  .top-bar { padding: 6px 16px; }
  .daily-bar { padding: 4px 16px; }
  .pot-section { padding: 12px 16px; }
  .pot-amount { font-size: 2rem !important; }
  .game-container { max-height: 50vh; }
  .action-section { padding: 10px 16px; }
  .bottom-nav { padding: 4px 0; }
  .bottom-nav-btn { min-height: 40px; padding: 6px 0; }
  .bottom-nav-btn .bnav-icon { font-size: 1.1rem; }
}

/* Q45: onboarding progress indicator */
.onboard-progress {
  display: flex; gap: 4px; justify-content: center; margin-bottom: 14px;
}
.onboard-progress-dot {
  width: 8px; height: 8px; border-radius: 4px;
  background: var(--surface2); transition: all 0.3s;
}
.onboard-progress-dot.active {
  width: 24px; background: var(--gold);
}

/* Q47: skeleton loading shimmer */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.short { width: 60%; }
.skeleton-circle { border-radius: 50%; }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Q48: reconnect banner */
.reconnect-banner {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--surface), var(--bg3));
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 20px; color: var(--text2); font-size: 0.78rem;
  font-weight: 600; z-index: 100001; display: flex;
  align-items: center; gap: 8px;
  animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.reconnect-banner .spinner {
  width: 14px; height: 14px; border: 2px solid var(--text3);
  border-top-color: var(--gold); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   UX IMPROVEMENTS — Primary CTA, Bundles, Offers, Ticker
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix 5: Stronger primary CTA — larger, more prominent */
.btn-primary-cta {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; padding: 20px 14px; border: none; border-radius: var(--radius);
  cursor: pointer; font-family: var(--font); transition: all 0.2s;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  color: #1a1000;
  box-shadow: 0 6px 32px var(--gold-glow), 0 0 80px rgba(240, 192, 64, 0.2);
  animation: primaryPulse 3s ease-in-out infinite;
}
.btn-primary-cta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  pointer-events: none;
}
.btn-primary-cta:active { transform: scale(0.95); }
.btn-primary-cta .btn-price {
  font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1;
}
.btn-primary-cta .btn-label {
  font-size: 1rem; font-weight: 800; letter-spacing: 1.5px;
}
.btn-primary-cta .btn-sub {
  font-size: 0.72rem; opacity: 0.7; margin-top: 2px;
}
@keyframes primaryPulse {
  0%, 100% { box-shadow: 0 6px 32px var(--gold-glow), 0 0 80px rgba(240, 192, 64, 0.2); }
  50% { box-shadow: 0 8px 40px rgba(240, 192, 64, 0.5), 0 0 100px rgba(240, 192, 64, 0.3); }
}

/* Fix 1: Secondary row — FREE + Quick side by side */
.btn-row-secondary {
  display: flex; gap: 8px; margin-top: 10px;
}
.btn-row-secondary .btn-free,
.btn-row-secondary .btn-quick-entry {
  flex: 1; margin-top: 0;
}

/* Fix 1: Collapsible bundle group */
.btn-show-bundles {
  width: 100%; border: 1px dashed var(--border); background: none; color: var(--text2);
  padding: 10px; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; margin-top: 10px; transition: all 0.2s; display: flex; align-items: center;
  justify-content: center; gap: 6px;
}
.btn-show-bundles:hover { border-color: var(--gold); color: var(--gold); }
.btn-show-bundles .chevron { transition: transform 0.3s; font-size: 0.65rem; }
.btn-show-bundles.expanded .chevron { transform: rotate(180deg); }
.bundle-group {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
}
.bundle-group.expanded { max-height: 500px; opacity: 1; }

/* Fix 2: Offer rotation — only show first 2 non-dismissed offers */
.tab-panel[data-panel="offers"] > section.offer-rotated-hidden {
  display: none !important;
}

/* Fix 4: Referral stats inside the referral card */
.referral-card .referral-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 14px 0 12px;
}
.referral-card .ref-stat-card {
  background: rgba(240, 192, 64, 0.06);
  border: 1px solid rgba(240, 192, 64, 0.15);
}
.referral-card .ref-list-wrap {
  margin-top: 14px;
  border: 1px solid var(--surface2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Fix 7: Condense border ticker on mobile — single top bar only */
@media (max-width: 600px) {
  .border-ticker-bottom {
    display: none;
  }
  .border-ticker-top {
    height: 18px;
  }
  body {
    padding-top: 18px;
    padding-bottom: 0;
  }
}