/* ═══════════════════════════════════════════════════════════════════════════════
   ROYALNEX STORE — LUXURY MOCHA BROWN, CHAMPAGNE GOLD & BURNT AMBER MASTER THEME
   Palette:
   - Mocha Brown:    #5b4632
   - Champagne Gold: #f4d9a0
   - Burnt Amber:    #c8792c
   - Deep Mocha:     #0c0806 / #16100b
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* User-Specified Background Palette Ramp */
  --bg-ramp-1: #211B1A;
  --bg-ramp-2: #382A28;
  --bg-ramp-3: #60433D;
  --bg-ramp-4: #916B60;
  --bg-ramp-5: #C1A094;
  --bg-ramp-6: #E8D8CE;

  /* User-Specified Main Theme Colors */
  --theme-mocha: #5B4632;
  --theme-gold:  #F4D9A0;
  --theme-amber: #C8792C;

  --mocha-deep: #0A0A0A;
  --mocha-dark: #211B1A;
  --mocha-mid:  #382A28;
  --mocha-brown: #5B4632;
  --mocha-light: #60433D;

  --champagne-pale: #E8D8CE;
  --champagne-light: #C1A094;
  --champagne-gold: #F4D9A0;
  --champagne-dark: #C8792C;

  --amber-light: #F4D9A0;
  --burnt-amber: #C8792C;
  --amber-deep: #5B4632;

  /* Global Overrides */
  --bg: #0A0A0A !important;
  --bg2: #211B1A !important;
  --bg-card: rgba(33, 27, 26, 0.85) !important;
  --surface: rgba(91, 70, 50, 0.35) !important;
  --surface2: rgba(56, 42, 40, 0.65) !important;
  --surface-hover: rgba(96, 67, 61, 0.75) !important;

  --line: rgba(244, 217, 160, 0.24) !important;
  --line-subtle: rgba(255, 255, 255, 0.08) !important;
  --glass-line: rgba(244, 217, 160, 0.36) !important;
  --amber-glow: rgba(200, 121, 44, 0.45) !important;
  --gold-glow: rgba(244, 217, 160, 0.35) !important;

  --text: #E8D8CE !important;
  --text-strong: #FFFFFF !important;
  --muted: #C1A094 !important;
  --mute: #C1A094 !important;
  --muted-light: #E8D8CE !important;

  --primary: #F4D9A0 !important;
  --primary2: #E8D8CE !important;
  --accent: #C8792C !important;
  --accent-gold: #F4D9A0 !important;
  --accent-amber: #C8792C !important;
  --gold: #F4D9A0 !important;
  --ink: #FFFFFF !important;

  --good: #10b981 !important;
  --warn: #c8792c !important;
  --bad: #ef4444 !important;

  --shadow-gold: 0 16px 45px -10px rgba(244, 217, 160, 0.45) !important;
  --shadow-amber: 0 16px 45px -10px rgba(200, 121, 44, 0.5) !important;
}

/* ── Global Cinematic Canvas & Background ── */
html {
  background: #0A0A0A !important;
  color-scheme: dark !important;
}

body,
body.ultra,
body.royal-gold,
body.royal-mocha {
  background: #0A0A0A !important;
  color: var(--text) !important;
  min-height: 100vh;
  position: relative;
  background-image:
    radial-gradient(1100px 650px at 50% -10%, rgba(244, 217, 160, 0.16), transparent 70%),
    radial-gradient(900px 550px at 95% 20%, rgba(200, 121, 44, 0.18), transparent 60%),
    radial-gradient(850px 500px at 5% 75%, rgba(91, 70, 50, 0.28), transparent 65%),
    linear-gradient(rgba(244, 217, 160, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 217, 160, 0.02) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, 48px 48px, 48px 48px !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Dynamic Interactive Spotlight ── */
.cinematic-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(600px circle at var(--mouse-x, 50vw) var(--mouse-y, 30vh), rgba(244, 217, 160, 0.07), transparent 80%);
  transition: opacity 0.3s ease;
}

/* ── Typography & Shimmers: Champagne Gold + Burnt Amber ── */
h1, h2, h3, h4, .brand-t, .hero-u h1, .sh h2 {
  color: #ffffff;
  letter-spacing: -0.5px;
}

.shimmer,
.grad,
.hero-u h1 span.shimmer,
.sh h2 span.shimmer,
.phead h1 span.shimmer {
  background: linear-gradient(
    105deg,
    #fae8c3 0%,
    #f4d9a0 25%,
    #ffffff 45%,
    #c8792c 65%,
    #fae8c3 100%
  ) !important;
  background-size: 250% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  animation: royalShimmer 5s linear infinite !important;
  display: inline-block;
  text-shadow: 0 0 35px rgba(244, 217, 160, 0.4);
}

@keyframes royalShimmer {
  0% { background-position: 250% 0; }
  100% { background-position: -250% 0; }
}

.eyebrow,
.kick {
  color: var(--champagne-gold) !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(244, 217, 160, 0.5);
  background: rgba(91, 70, 50, 0.35) !important;
  border: 1px solid rgba(244, 217, 160, 0.35) !important;
}

.tchip {
  background: rgba(91, 70, 50, 0.32) !important;
  border: 1px solid rgba(244, 217, 160, 0.32) !important;
  color: var(--champagne-light) !important;
  box-shadow: 0 0 16px rgba(200, 121, 44, 0.22);
}

/* ── Liquid Glassmorphism Architecture ── */
.glass,
.card,
.panel,
.cc,
.ft,
.how,
.rev,
.stat,
.statbar .in,
.cline,
.vault-reward-banner,
.co-line {
  background: linear-gradient(
    135deg,
    rgba(91, 70, 50, 0.35) 0%,
    rgba(35, 25, 17, 0.65) 100%
  ) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(244, 217, 160, 0.24) !important;
  box-shadow:
    inset 0 1px 1px 0 rgba(244, 217, 160, 0.35),
    inset 0 0 18px 0 rgba(200, 121, 44, 0.12),
    0 24px 60px -20px rgba(0, 0, 0, 0.75) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

/* Liquid Glass Glint Sheen Animation on Hover */
.card::after,
.cc::after,
.panel::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 35%,
    rgba(244, 217, 160, 0.15) 50%,
    transparent 65%
  );
  transform: rotate(25deg) translateY(-100%);
  transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 2;
}

.card:hover::after,
.cc:hover::after,
.panel:hover::after {
  transform: rotate(25deg) translateY(100%);
}

.card:hover,
.cc:hover,
.panel:hover {
  transform: translateY(-6px) scale3d(1.01, 1.01, 1.01) !important;
  border-color: rgba(244, 217, 160, 0.55) !important;
  box-shadow:
    inset 0 1px 2px 0 rgba(244, 217, 160, 0.5),
    0 0 35px -5px rgba(200, 121, 44, 0.38),
    0 30px 70px -15px rgba(0, 0, 0, 0.85) !important;
}

/* ── 3D Card Interactive Tilt Styles ── */
.tilt-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.tilt-3d-inner {
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d;
}

.tilt-3d-inner .badge,
.tilt-3d-inner .chip,
.tilt-3d-inner .price {
  transform: translateZ(24px);
}

/* ── Buttons: Champagne Gold & Burnt Amber Ember Radiance ── */
.btn.gold,
.btn.primary {
  background: linear-gradient(
    135deg,
    #fae8c3 0%,
    #f4d9a0 30%,
    #c8792c 70%,
    #914e13 100%
  ) !important;
  color: #1a120a !important;
  font-weight: 800 !important;
  border: 1px solid rgba(244, 217, 160, 0.6) !important;
  box-shadow:
    0 0 0 1px rgba(244, 217, 160, 0.4),
    0 12px 32px -8px rgba(200, 121, 44, 0.65),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.btn.gold:hover,
.btn.primary:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 0 0 1px #f4d9a0,
    0 16px 45px -6px rgba(200, 121, 44, 0.85),
    0 0 25px rgba(244, 217, 160, 0.5) !important;
}

.btn.ghost {
  background: rgba(91, 70, 50, 0.22) !important;
  border: 1px solid rgba(244, 217, 160, 0.32) !important;
  color: var(--champagne-gold) !important;
  backdrop-filter: blur(12px) !important;
}

.btn.ghost:hover {
  background: rgba(91, 70, 50, 0.45) !important;
  border-color: var(--champagne-gold) !important;
  box-shadow: 0 0 20px rgba(200, 121, 44, 0.3) !important;
  color: #ffffff !important;
}

/* ── Navigation Header: Frosted Mocha Glass ── */
.uh {
  background: rgba(14, 10, 7, 0.82) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-bottom: 1px solid rgba(244, 217, 160, 0.2) !important;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.8) !important;
}

.uh nav a.l:hover {
  color: #ffffff !important;
  background: rgba(91, 70, 50, 0.4) !important;
}

.uh nav a.l.on {
  color: var(--champagne-gold) !important;
  background: rgba(200, 121, 44, 0.22) !important;
  border: 1px solid rgba(244, 217, 160, 0.3) !important;
}

/* ── Live Vouch Count Ribbon & Badge ── */
.vouch-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(91, 70, 50, 0.5), rgba(200, 121, 44, 0.25));
  border: 1px solid rgba(244, 217, 160, 0.4);
  padding: 8px 18px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 13px;
  color: var(--champagne-gold);
  box-shadow: 0 0 25px rgba(200, 121, 44, 0.35), inset 0 1px 1px rgba(244, 217, 160, 0.4);
  letter-spacing: 0.5px;
}

.vouch-live-pill .vouch-icon {
  font-size: 16px;
  animation: pulseVouch 2s infinite ease-in-out;
}

@keyframes pulseVouch {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px #f4d9a0); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 10px #c8792c); }
}

/* ── Hero Glass & Cinematic Banner ── */
.hero-u {
  background:
    radial-gradient(900px 500px at 75% 40%, rgba(200, 121, 44, 0.18), transparent 60%),
    linear-gradient(90deg, rgba(12, 8, 6, 0.98), rgba(12, 8, 6, 0.72) 50%, rgba(12, 8, 6, 0.45)),
    url(../assets/banner.gif) center/cover no-repeat !important;
  border-radius: 28px;
  border: 1px solid rgba(244, 217, 160, 0.25);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9);
  position: relative;
}

/* ── Cart Drawer & Checkout Liquid Glass ── */
#cartDrawer,
.cdrawer {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  display: none !important;
}

#cartDrawer.open,
.cdrawer.open {
  display: block !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#cartDrawer .csheet,
.cdrawer .csheet,
.csheet {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  height: 100% !important;
  width: min(440px, 100vw) !important;
  background: rgba(18, 13, 9, 0.95) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border-left: 1px solid rgba(244, 217, 160, 0.28) !important;
  border-right: none !important;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.95) !important;
  transform: translateX(105%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 1000000 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

#cartDrawer.open .csheet,
.cdrawer.open .csheet {
  transform: translateX(0) !important;
}

.cbadge {
  background: linear-gradient(135deg, #fae8c3, #c8792c) !important;
  color: #1a120a !important;
  box-shadow: 0 0 16px rgba(200, 121, 44, 0.7) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ROYAL MENU BUTTON & LIQUID GLASS DRAWER
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Luxury Header Royal Menu Button ── */
.btn-royal-menu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(91, 70, 50, 0.5), rgba(43, 31, 21, 0.8));
  border: 1px solid rgba(244, 217, 160, 0.38);
  padding: 8px 18px;
  border-radius: 999px;
  color: var(--champagne-gold, #f4d9a0);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(244, 217, 160, 0.3);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: 8px;
  flex-shrink: 0;
}

.btn-royal-menu:hover {
  background: linear-gradient(135deg, rgba(200, 121, 44, 0.45), rgba(91, 70, 50, 0.85));
  border-color: #f4d9a0;
  color: #ffffff;
  box-shadow: 0 0 25px rgba(244, 217, 160, 0.45), 0 8px 24px rgba(200, 121, 44, 0.35);
  transform: translateY(-1px);
}

.royal-menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.5px;
  width: 16px;
  height: 14px;
}

.royal-menu-icon i {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--champagne-gold, #f4d9a0);
  border-radius: 2px;
  transition: all 0.25s ease;
}

.btn-royal-menu:hover .royal-menu-icon i {
  background: #ffffff;
}

.btn-royal-menu:hover .royal-menu-icon i:nth-child(2) {
  transform: translateX(2px);
  background: var(--burnt-amber, #c8792c);
}

@media (max-width: 860px) {
  .btn-royal-menu {
    margin-left: auto;
    padding: 7px 14px;
    font-size: 11px;
    gap: 7px;
  }
  .burger {
    display: none !important;
  }
}

@media (min-width: 861px) {
  .btn-royal-menu {
    margin-left: 14px;
  }
}

/* ── Prevent body scrolling when Menu Drawer is open ── */
body.royal-menu-open {
  overflow: hidden !important;
}

/* ── Royal Menu Liquid Glass Drawer ── */
.royal-menu-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.royal-menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.royal-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 8, 6, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.royal-menu-drawer {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: linear-gradient(180deg, rgba(24, 17, 12, 0.98) 0%, rgba(12, 8, 6, 0.99) 100%);
  border-left: 1px solid rgba(244, 217, 160, 0.3);
  box-shadow: -25px 0 80px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  overflow: hidden;
}

.royal-menu-overlay.open .royal-menu-drawer {
  transform: translateX(0);
}

.royal-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(244, 217, 160, 0.16);
  background: rgba(91, 70, 50, 0.2);
}

.royal-menu-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.royal-menu-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(244, 217, 160, 0.5);
  box-shadow: 0 0 16px rgba(244, 217, 160, 0.3);
  object-fit: contain;
}

.royal-menu-titles {
  display: flex;
  flex-direction: column;
}

.royal-menu-name {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.royal-menu-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--champagne-gold, #f4d9a0);
}

.royal-menu-close {
  background: rgba(91, 70, 50, 0.3);
  border: 1px solid rgba(244, 217, 160, 0.28);
  color: var(--champagne-gold, #f4d9a0);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.royal-menu-close:hover {
  background: rgba(200, 121, 44, 0.4);
  color: #ffffff;
  border-color: #f4d9a0;
  transform: rotate(90deg);
}

.royal-menu-search {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(244, 217, 160, 0.1);
  background: rgba(12, 8, 6, 0.4);
}

.royal-menu-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(91, 70, 50, 0.35);
  border: 1px solid rgba(244, 217, 160, 0.24);
  border-radius: 12px;
  padding: 6px 12px;
  transition: border-color 0.2s ease;
}

.royal-menu-search-form:focus-within {
  border-color: var(--champagne-gold, #f4d9a0);
  box-shadow: 0 0 15px rgba(244, 217, 160, 0.25);
}

.royal-menu-search-form .search-ico {
  font-size: 14px;
  opacity: 0.7;
}

.royal-menu-search-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 13px;
  font-family: inherit;
}

.royal-menu-search-form button {
  background: linear-gradient(135deg, rgba(200, 121, 44, 0.8), rgba(91, 70, 50, 0.9));
  border: 1px solid rgba(244, 217, 160, 0.4);
  color: #fff;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.royal-menu-body {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

.rm-cascade {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.royal-menu-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.royal-menu-sect-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: var(--champagne-gold, #f4d9a0);
  padding: 4px 8px;
  text-transform: uppercase;
  opacity: 0.85;
}

.royal-menu-links {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rm-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: #e4decb;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  background: transparent;
}

.rm-link:hover {
  background: rgba(244, 217, 160, 0.1);
  color: #ffffff;
  transform: translateX(4px);
  box-shadow: inset 2px 0 0 var(--champagne-gold, #f4d9a0);
}

.rm-ico {
  font-size: 16px;
  flex-shrink: 0;
}

.rm-pill {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 99px;
}

.rm-pill.hot {
  background: rgba(239, 68, 68, 0.25);
  color: #ff8a80;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.rm-pill.gold {
  background: rgba(200, 121, 44, 0.3);
  color: var(--champagne-gold, #f4d9a0);
  border: 1px solid rgba(244, 217, 160, 0.4);
}

.rm-pill.green {
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.royal-menu-footer {
  padding: 18px 24px;
  border-top: 1px solid rgba(244, 217, 160, 0.16);
  background: rgba(18, 13, 9, 0.95);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.drawer-curr-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.d-curr-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--champagne-gold, #f4d9a0);
  text-transform: uppercase;
}

.drawer-curr-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap !important;
}

.drawer-c-btn {
  background: rgba(91, 70, 50, 0.35);
  border: 1px solid rgba(244, 217, 160, 0.25);
  color: #d6ccbe;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.drawer-c-btn.active,
.drawer-c-btn:hover {
  background: var(--burnt-amber, #c8792c);
  border-color: var(--champagne-gold, #f4d9a0);
  color: #ffffff;
}

/* ── Mystery Daily Drop Modal ── */
.mystery-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(10, 10, 10, 0.85) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.mystery-modal.active {
  display: flex !important;
}

.mystery-box {
  background: linear-gradient(180deg, rgba(33, 27, 26, 0.98) 0%, rgba(18, 13, 12, 0.99) 100%) !important;
  border: 1px solid rgba(244, 217, 160, 0.35) !important;
  border-radius: 24px !important;
  padding: 32px 28px !important;
  max-width: 480px !important;
  width: 100% !important;
  text-align: center !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 40px rgba(200, 121, 44, 0.2) !important;
  position: relative !important;
}

/* ── Back to Top Clean Stacking Above Chat Bubble ── */
#backToTop {
  position: fixed !important;
  bottom: 96px !important;
  right: 26px !important;
  z-index: 9999 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f4d9a0 0%, #c8792c 100%) !important;
  color: #120d0c !important;
  border: 1.5px solid rgba(244, 217, 160, 0.7) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7), 0 0 18px rgba(244, 217, 160, 0.4) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(16px) !important;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

#backToTop.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

#backToTop:hover {
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(244, 217, 160, 0.6) !important;
}

@media (max-width: 768px) {
  #backToTop {
    bottom: 148px !important;
    right: 20px !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 17px !important;
  }
}