html.route-theme-wolf_taxi,
html.route-theme-wolf_taxi body {
  --theme-primary: #facc15;
  --theme-primary-rgb: 250, 204, 21;
  --theme-secondary: #ca8a04;
  --theme-accent: #fde047;
  --background: #08060f;
  --background-secondary: #171022;
  --background-tertiary: #241733;
  --background-card: #120c1d;
  --border: #5b3b13;
  --theme-gradient-1: #fef08a;
  --theme-gradient-2: #fde047;
  --theme-gradient-3: #facc15;
  --theme-gradient-4: #ca8a04;
  --theme-gradient-5: #854d0e;
  --theme-gradient-6: #fde047;
  --theme-gradient-7: #facc15;
  --theme-gradient-8: #ca8a04;
  --theme-gradient-9: #713f12;
  --theme-glow: rgba(250, 204, 21, 0.28);
  --theme-glow-strong: rgba(250, 204, 21, 0.48);
  --theme-ring: #facc15;
  --theme-border-glow-1: rgba(250, 204, 21, 1);
  --theme-border-glow-2: rgba(250, 204, 21, 0.1);
  --theme-user-accent: #fde047;
  min-height: 100%;
  background: #08060f;
}

/* Shared legacy theme layout utilities */
.background-top {
  /* Mobile: Use theme background color */
  background-color: var(--background);
  position: relative;
  padding: 0;
  overflow-x: hidden;
}

.bmw108-dollar-rain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bmw108-dollar-rain span {
  position: absolute;
  top: -80px;
  color: rgba(96, 165, 250, 0.28);
  font-size: clamp(24px, 4vw, 58px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 18px rgba(59, 130, 246, 0.65);
  animation: bmw108-dollar-fall 12s linear infinite;
}

.bmw108-dollar-rain span:nth-child(1) {
  left: 3%;
  animation-delay: -1s;
  animation-duration: 13s;
}

.bmw108-dollar-rain span:nth-child(2) {
  left: 9%;
  animation-delay: -8s;
  animation-duration: 16s;
}

.bmw108-dollar-rain span:nth-child(3) {
  left: 16%;
  animation-delay: -3s;
  animation-duration: 11s;
}

.bmw108-dollar-rain span:nth-child(4) {
  left: 24%;
  animation-delay: -10s;
  animation-duration: 15s;
}

.bmw108-dollar-rain span:nth-child(5) {
  left: 31%;
  animation-delay: -5s;
  animation-duration: 12s;
}

.bmw108-dollar-rain span:nth-child(6) {
  left: 38%;
  animation-delay: -13s;
  animation-duration: 18s;
}

.bmw108-dollar-rain span:nth-child(7) {
  left: 45%;
  animation-delay: -2s;
  animation-duration: 14s;
}

.bmw108-dollar-rain span:nth-child(8) {
  left: 53%;
  animation-delay: -9s;
  animation-duration: 17s;
}

.bmw108-dollar-rain span:nth-child(9) {
  left: 60%;
  animation-delay: -6s;
  animation-duration: 13s;
}

.bmw108-dollar-rain span:nth-child(10) {
  left: 67%;
  animation-delay: -12s;
  animation-duration: 16s;
}

.bmw108-dollar-rain span:nth-child(11) {
  left: 73%;
  animation-delay: -4s;
  animation-duration: 12s;
}

.bmw108-dollar-rain span:nth-child(12) {
  left: 80%;
  animation-delay: -11s;
  animation-duration: 19s;
}

.bmw108-dollar-rain span:nth-child(13) {
  left: 86%;
  animation-delay: -7s;
  animation-duration: 14s;
}

.bmw108-dollar-rain span:nth-child(14) {
  left: 91%;
  animation-delay: -15s;
  animation-duration: 18s;
}

.bmw108-dollar-rain span:nth-child(15) {
  left: 96%;
  animation-delay: -6s;
  animation-duration: 15s;
}

.bmw108-dollar-rain span:nth-child(16) {
  left: 50%;
  animation-delay: -16s;
  animation-duration: 20s;
}

@keyframes bmw108-dollar-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -80px, 0) rotate(0deg);
  }
  10%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(42px, calc(100vh + 120px), 0) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bmw108-dollar-rain span {
    animation: none;
    opacity: 0.28;
    transform: translateY(20vh);
  }
}

/* Desktop: Apply background image based on theme */
@media (min-width: 768px) {
  .background-top {
    background: url(/images/themes/bg-gold.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 30px 0;
  }

  /* Theme-specific backgrounds */
  html[data-theme='gold'] .background-top,
  html:not([data-theme]) .background-top {
    background-image: url(/images/themes/bg-gold.jpg);
  }

  html[data-theme='red'] .background-top {
    background-image: url(/images/themes/bg-red.png);
  }

  html[data-theme='crimson'] .background-top {
    background-image: url(/images/themes/bg-crimson.png);
  }

  html[data-theme='blue'] .background-top {
    background-image: url(/images/themes/bg-blue.png);
  }

  html[data-theme='purple'] .background-top {
    background-image: url(/images/themes/bg-purple.png);
  }

  html[data-theme='green'] .background-top {
    background-image: url(/images/themes/bg-green.png);
  }

  html[data-theme='cyan'] .background-top {
    background-image: url(/images/themes/bg-cyan.png);
  }

  /* New themes - background-top */
  html[data-theme='pink'] .background-top {
    background-image: url(/images/themes/bg-pink.png);
  }

  html[data-theme='magenta'] .background-top {
    background-image: url(/images/themes/bg-magenta.png);
  }

  html[data-theme='yellow'] .background-top {
    background-image: url(/images/themes/bg-yellow.png);
  }

  html[data-theme='orange'] .background-top {
    background-image: url(/images/themes/bg-orange.png);
  }

  html[data-theme='teal'] .background-top {
    background-image: url(/images/themes/bg-teal.png);
  }

  html[data-theme='indigo'] .background-top {
    background-image: url(/images/themes/bg-indigo.png);
  }

  html[data-theme='rose'] .background-top {
    background-image: url(/images/themes/bg-rose.png);
  }

  html[data-theme='amber'] .background-top {
    background-image: url(/images/themes/bg-amber.png);
  }

  html[data-theme='lime'] .background-top {
    background-image: url(/images/themes/bg-lime.png);
  }

  html[data-theme='emerald'] .background-top {
    background-image: url(/images/themes/bg-emerald.png);
  }

  html[data-theme='sky'] .background-top {
    background-image: url(/images/themes/bg-sky.png);
  }

  html[data-theme='violet'] .background-top {
    background-image: url(/images/themes/bg-violet.png);
  }

  html[data-theme='fuchsia'] .background-top {
    background-image: url(/images/themes/bg-fuchsia.png);
  }

  html[data-theme='slate'] .background-top {
    background-image: url(/images/themes/bg-slate.png);
  }

  html[data-theme='whitered'] .background-top {
    background-image: url(/images/themes/bg-whitered.jpg);
  }
}

/* ============================================
   FOOTER BACKGROUND - Theme-specific
   Desktop only (md:768px+), uses theme-specific hexagon images
   ============================================ */

/* Base footer styles - all screen sizes */
.footer-bg {
  background-color: var(--background);
  padding: 0;
}

/* Desktop: Theme-specific footer backgrounds */
@media screen and (min-width: 768px) {
  /* Default/Gold theme */
  .footer-bg {
    background-image: url('/images/themes/footer-gold.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  /* Theme-specific overrides */
  [data-theme='gold'] .footer-bg {
    background-image: url('/images/themes/footer-gold.jpg');
  }

  [data-theme='red'] .footer-bg {
    background-image: url('/images/themes/footer-red.jpg');
  }

  [data-theme='crimson'] .footer-bg {
    background-image: url('/images/themes/footer-crimson.jpg');
  }

  [data-theme='blue'] .footer-bg {
    background-image: url('/images/themes/footer-blue.jpg');
  }

  [data-theme='purple'] .footer-bg {
    background-image: url('/images/themes/footer-purple.jpg');
  }

  [data-theme='green'] .footer-bg {
    background-image: url('/images/themes/footer-green.jpg');
  }

  [data-theme='cyan'] .footer-bg {
    background-image: url('/images/themes/footer-cyan.jpg');
  }

  [data-theme='pink'] .footer-bg {
    background-image: url('/images/themes/footer-pink.jpg');
  }

  [data-theme='magenta'] .footer-bg {
    background-image: url('/images/themes/footer-magenta.jpg');
  }

  [data-theme='yellow'] .footer-bg {
    background-image: url('/images/themes/footer-yellow.jpg');
  }

  [data-theme='orange'] .footer-bg {
    background-image: url('/images/themes/footer-orange.jpg');
  }

  [data-theme='teal'] .footer-bg {
    background-image: url('/images/themes/footer-teal.jpg');
  }

  [data-theme='indigo'] .footer-bg {
    background-image: url('/images/themes/footer-indigo.jpg');
  }

  [data-theme='rose'] .footer-bg {
    background-image: url('/images/themes/footer-rose.jpg');
  }

  [data-theme='amber'] .footer-bg {
    background-image: url('/images/themes/footer-amber.jpg');
  }

  [data-theme='lime'] .footer-bg {
    background-image: url('/images/themes/footer-lime.jpg');
  }

  [data-theme='emerald'] .footer-bg {
    background-image: url('/images/themes/footer-emerald.jpg');
  }

  [data-theme='sky'] .footer-bg {
    background-image: url('/images/themes/footer-sky.jpg');
  }

  [data-theme='violet'] .footer-bg {
    background-image: url('/images/themes/footer-violet.jpg');
  }

  [data-theme='fuchsia'] .footer-bg {
    background-image: url('/images/themes/footer-fuchsia.jpg');
  }

  [data-theme='slate'] .footer-bg {
    background-image: url('/images/themes/footer-slate.jpg');
  }

  [data-theme='whitered'] .footer-bg {
    background-image: url('/images/themes/footer-whitered.jpg');
  }
}