@import "tailwindcss";

@theme {
  --font-sans: "Outfit", sans-serif;
  
  /* Design System Colors */
  --color-gold-primary: #FFD700;
  --color-gold-secondary: #FFC107;
  --color-gold-dim: #b8991a;
  --color-dark-bg: #0a0a0a;
  --color-dark-surface: #111111;
  --color-dark-surface-elevated: #1a1a1a;
  --color-dark-border: rgba(255, 255, 255, 0.08);
  --color-gold-border: rgba(255, 215, 0, 0.25);
  
  /* Animations */
  --animate-shimmer: shimmer 2s infinite;
  --animate-fade-in: fadeIn 0.3s ease-out forwards;
  --animate-slide-up: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;

  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Custom Base Layer styles */
@layer base {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
  body {
    background-color: #0a0a0a;
    color: #ffffff;
    font-family: "Outfit", sans-serif;
    line-height: 1.6;
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: #0a0a0a;
  }
  ::-webkit-scrollbar-thumb {
    background: #222222;
    border-radius: 9999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #b8991a;
  }
  
  ::selection {
    background-color: var(--color-gold-primary, #FFD700) !important;
    color: #0a0a0a !important;
  }
}

/* Custom Utilities */
.glass {
  background: rgba(17, 17, 17, 0.7);
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-gold {
  background: rgba(17, 17, 17, 0.75);
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  border: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 4px 24px rgba(255, 215, 0, 0.05);
}

/* Shimmer overlay for loading state cards */
.shimmer-wrapper {
  position: relative;
  overflow: hidden;
}
.shimmer-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0.08) 60%,
    rgba(255, 255, 255, 0) 100
  );
  animation: shimmer 2s infinite;
}

/* --- RAFFLE CARD THEMES --- */

/* FLAMES THEME */
.theme-flames {
  position: relative;
  border-color: rgba(255, 69, 0, 0.5) !important;
  box-shadow: 0 0 20px rgba(255, 69, 0, 0.2) !important;
  background: linear-gradient(180deg, rgba(35, 10, 0, 0.6) 0%, #0a0a0a 100%) !important;
  overflow: hidden;
}
.theme-flames:hover {
  border-color: #ff4500 !important;
  box-shadow: 0 0 35px rgba(255, 69, 0, 0.4), inset 0 0 15px rgba(255, 69, 0, 0.2) !important;
}
.theme-flames h3 {
  color: #ffb732 !important;
  text-shadow: 0 0 8px rgba(255, 100, 0, 0.6);
}
.theme-flames .participate-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ff9900 0%, #ff2a00 60%, #990000 100%);
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px #ffea00;
  border: 1px solid #ffea00 !important;
  box-shadow: 0 0 20px #ff2a00, inset 0 0 15px #ffea00;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  z-index: 1;
}

.theme-flames .participate-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,234,0,0.8) 10%, transparent 40%),
              radial-gradient(circle, rgba(255,100,0,0.9) 20%, transparent 50%),
              radial-gradient(circle, rgba(255,20,0,0.8) 30%, transparent 60%);
  background-size: 100px 100px, 120px 120px, 150px 150px;
  background-position: 0 0, 30px 50px, 70px 20px;
  animation: flamingParticles 2s infinite ease-in-out alternate;
  filter: blur(3px);
  z-index: -1;
  opacity: 0.7;
}

.theme-flames .participate-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath fill='%23ffdd00' fill-opacity='0.4' d='M0 120L15 95C30 70 60 20 75 20C90 20 90 70 105 95L120 120Z'/%3E%3Cpath fill='%23ff5500' fill-opacity='0.5' d='M20 120L35 85C50 50 80 10 95 10C110 10 100 60 115 85L130 120Z'/%3E%3Cpath fill='%23ff1100' fill-opacity='0.6' d='M-10 120L5 80C20 40 50 15 65 15C80 15 70 55 85 80L100 120Z'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  animation: flameFlicker 1.5s infinite linear;
  z-index: -1;
}

.theme-flames .participate-btn:hover {
  box-shadow: 0 0 30px #ff2a00, inset 0 0 25px #ffea00;
  transform: scale(1.03);
  filter: brightness(1.2);
}

.theme-flames .progress-fill {
  background: linear-gradient(45deg, #ff0000, #ff7300, #ff0000) !important;
  background-size: 200% auto;
  animation: fireGradient 3s linear infinite;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

@keyframes flamingParticles {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.1); }
  100% { transform: translateY(-20px) scale(1); }
}

@keyframes flameFlicker {
  0% { background-position: 0 0; }
  100% { background-position: 80px -40px; }
}

@keyframes fireGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Contenedor y Brasas Flotantes (Ember Rain) */
.flames-ember-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.ember-particle {
  position: absolute;
  bottom: -15px;
  background: linear-gradient(135deg, #ff4500 0%, #ff9900 50%, #ffea00 100%);
  box-shadow: 0 0 8px #ff4500, 0 0 4px #ffea00;
  opacity: 0.95;
  border-radius: 50%;
  animation: floatEmberUp linear infinite;
}

.ember-particle:nth-child(odd) {
  animation-name: floatEmberUpTwist;
}

@keyframes floatEmberUp {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-500px) scale(1.2);
    opacity: 0;
  }
}

@keyframes floatEmberUpTwist {
  0% {
    transform: translateY(0) translateX(0) scale(0.9);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(-250px) translateX(25px) scale(1.3);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-500px) translateX(-15px) scale(0.9);
    opacity: 0;
  }
}

/* SYNTHWAVE THEME */
.theme-synthwave {
  border-color: rgba(255, 0, 255, 0.3) !important;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.1) !important;
  background: linear-gradient(180deg, #110022 0%, #0a0a0a 100%) !important;
}
.theme-synthwave:hover {
  border-color: #ff00ff !important;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.4), inset 0 0 10px rgba(0, 255, 255, 0.2) !important;
}
.theme-synthwave h3 {
  color: #00ffff !important;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}
.theme-synthwave .participate-btn {
  background: linear-gradient(90deg, #ff00ff, #00ffff);
  color: #000 !important;
  border: 1px solid #fff !important;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5), 0 0 10px rgba(0, 255, 255, 0.5);
}
.theme-synthwave .participate-btn:hover {
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.8);
  transform: scale(1.02);
}
.theme-synthwave .progress-fill {
  background: linear-gradient(90deg, #ff00ff, #00ffff) !important;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5), 0 0 10px rgba(0, 255, 255, 0.5);
}

/* CYBERPUNK THEME */
.theme-cyberpunk {
  border-color: #fcee0a !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0px #00ffff !important;
  background-color: #0f172a !important;
}
.theme-cyberpunk:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #ff003c !important;
}
.theme-cyberpunk img {
  filter: contrast(1.2) saturate(1.2);
}
.theme-cyberpunk h3 {
  color: #fcee0a !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.theme-cyberpunk .participate-btn {
  background-color: #fcee0a !important;
  background-image: none !important;
  color: #000 !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  font-weight: 900 !important;
  border: 2px solid #000 !important;
}
.theme-cyberpunk .participate-btn:hover {
  background-color: #00ffff !important;
}
.theme-cyberpunk .progress-fill {
  background-color: #fcee0a !important;
  background-image: none !important;
  border-radius: 0 !important;
  border-right: 2px solid #000 !important;
}
.theme-cyberpunk .progress-container {
  border-radius: 0 !important;
  border-color: #fcee0a !important;
}

/* GOLD THEME (LUXURY ORO) */
/* GOLD THEME (LUXURY ORO) + CONFETI DE ORO CALLENDO */
.theme-gold {
  position: relative;
  border-color: rgba(255, 215, 0, 0.5) !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.1) !important;
  background: linear-gradient(180deg, rgba(30, 25, 0, 0.6) 0%, #0a0a0a 100%) !important;
  overflow: hidden;
}
.theme-gold:hover {
  border-color: #ffd700 !important;
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.5), inset 0 0 20px rgba(255, 215, 0, 0.3) !important;
}
.theme-gold h3 {
  color: #ffd700 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
.theme-gold .participate-btn {
  background: linear-gradient(45deg, #FFD700, #FFF8DC, #FFC107, #FFD700);
  background-size: 200% auto;
  color: #000 !important;
  animation: goldShimmer 3s linear infinite;
  border: 1px solid #FFF !important;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
  font-weight: 900 !important;
}
.theme-gold .participate-btn:hover {
  box-shadow: 0 6px 25px rgba(255, 215, 0, 0.7);
  transform: scale(1.02);
}
.theme-gold .progress-fill {
  background: linear-gradient(45deg, #FFD700, #FFF8DC, #FFC107) !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

/* Contenedor y Copos de Confeti Dorado (Gold Confetti Snow) */
.gold-confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.confetti-flake {
  position: absolute;
  top: -15px;
  background: linear-gradient(135deg, #FFD700 0%, #FFF8DC 50%, #FFC107 100%);
  box-shadow: 0 0 8px #FFD700, 0 0 4px #FFFFFF;
  opacity: 0.95;
  animation: fallGoldSnow linear infinite;
}

.confetti-flake:nth-child(odd) {
  border-radius: 2px;
  animation-name: fallGoldSnowTwist;
}
.confetti-flake:nth-child(even) {
  border-radius: 50%;
}

@keyframes fallGoldSnow {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.9);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(500px) rotate(360deg) scale(1.1);
    opacity: 0;
  }
}

@keyframes fallGoldSnowTwist {
  0% {
    transform: translateY(0) rotate(0deg) skewX(0deg) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  50% {
    transform: translateY(250px) rotate(180deg) skewX(20deg) scale(1.3);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(500px) rotate(360deg) skewX(0deg) scale(1);
    opacity: 0;
  }
}

@keyframes goldShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* MATRIX THEME (NEON VERDE) */
.theme-matrix {
  border-color: rgba(0, 255, 65, 0.4) !important;
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.15) !important;
  background-color: #021207 !important;
}
.theme-matrix:hover {
  border-color: #00ff41 !important;
  box-shadow: 0 0 25px rgba(0, 255, 65, 0.4), inset 0 0 12px rgba(0, 255, 65, 0.2) !important;
}
.theme-matrix h3 {
  color: #00ff41 !important;
  font-family: monospace;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
}
.theme-matrix .participate-btn {
  background-color: #00ff41 !important;
  background-image: none !important;
  color: #000 !important;
  font-family: monospace;
  font-weight: 900 !important;
  border: 1px solid #fff !important;
  box-shadow: 0 4px 15px rgba(0, 255, 65, 0.4);
}
.theme-matrix .participate-btn:hover {
  background-color: #00ff66 !important;
  box-shadow: 0 6px 25px rgba(0, 255, 65, 0.8);
  transform: scale(1.02);
}
.theme-matrix .progress-fill {
  background-color: #00ff41 !important;
  background-image: none !important;
  box-shadow: 0 0 12px rgba(0, 255, 65, 0.7);
}

/* COSMIC THEME (NEBULA PURPURA) */
.theme-cosmic {
  position: relative;
  border-color: rgba(138, 43, 226, 0.4) !important;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.15) !important;
  background: linear-gradient(180deg, #180b2a 0%, #0a0a0a 100%) !important;
  overflow: hidden;
}
.theme-cosmic:hover {
  border-color: #8a2be2 !important;
  box-shadow: 0 0 30px rgba(138, 43, 226, 0.4), inset 0 0 15px rgba(138, 43, 226, 0.2) !important;
}
.theme-cosmic h3 {
  color: #d8b4fe !important;
  text-shadow: 0 0 8px rgba(216, 180, 254, 0.5);
}
.theme-cosmic .participate-btn {
  background: linear-gradient(90deg, #6b21a8, #c026d3);
  color: #fff !important;
  border: 1px solid #f0abfc !important;
  box-shadow: 0 4px 15px rgba(192, 38, 211, 0.4);
}
.theme-cosmic .participate-btn:hover {
  box-shadow: 0 6px 25px rgba(192, 38, 211, 0.7);
  transform: scale(1.02);
}
.theme-cosmic .progress-fill {
  background: linear-gradient(90deg, #6b21a8, #c026d3) !important;
  box-shadow: 0 0 12px rgba(192, 38, 211, 0.6);
}

/* Contenedor y Estrellas / Polvo Cósmico (Hyperdrive Stardust) */
.cosmic-stardust-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.stardust-particle {
  position: absolute;
  background: #ffffff;
  box-shadow: 0 0 8px #d8b4fe, 0 0 4px #ffffff;
  border-radius: 50%;
  animation: pulseStardust infinite alternate ease-in-out;
}

.stardust-particle:nth-child(odd) {
  animation-name: driftStardust;
}

@keyframes pulseStardust {
  0% {
    opacity: 0.2;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1.4);
  }
}

@keyframes driftStardust {
  0% {
    opacity: 0.1;
    transform: translateY(0) translateX(0) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateY(-30px) translateX(15px) scale(1.3);
  }
  100% {
    opacity: 0.1;
    transform: translateY(-60px) translateX(-10px) scale(0.8);
  }
}

/* BLOOD THEME (CRIMSON FURY) */
.theme-blood {
  border-color: rgba(220, 38, 38, 0.4) !important;
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.15) !important;
  background-color: #170303 !important;
}
.theme-blood:hover {
  border-color: #dc2626 !important;
  box-shadow: 0 0 25px rgba(220, 38, 38, 0.4), inset 0 0 12px rgba(220, 38, 38, 0.2) !important;
}
.theme-blood h3 {
  color: #fca5a5 !important;
  text-shadow: 0 0 8px rgba(252, 165, 165, 0.5);
}
.theme-blood .participate-btn {
  background: linear-gradient(90deg, #991b1b, #ef4444);
  color: #fff !important;
  border: 1px solid #fca5a5 !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}
.theme-blood .participate-btn:hover {
  box-shadow: 0 6px 25px rgba(239, 68, 68, 0.7);
  transform: scale(1.02);
}
.theme-blood .progress-fill {
  background: linear-gradient(90deg, #991b1b, #ef4444) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

/* ICE THEME (GLACIAL NEON) */
.theme-ice {
  position: relative;
  border-color: rgba(6, 182, 212, 0.4) !important;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.15) !important;
  background: linear-gradient(180deg, #041926 0%, #0a0a0a 100%) !important;
  overflow: hidden;
}
.theme-ice:hover {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.4), inset 0 0 12px rgba(6, 182, 212, 0.2) !important;
}
.theme-ice h3 {
  color: #67e8f9 !important;
  text-shadow: 0 0 8px rgba(103, 232, 249, 0.5);
}
.theme-ice .participate-btn {
  background: linear-gradient(90deg, #0891b2, #22d3ee);
  color: #000 !important;
  font-weight: 900 !important;
  border: 1px solid #cffafe !important;
  box-shadow: 0 4px 15px rgba(34, 211, 238, 0.4);
}
.theme-ice .participate-btn:hover {
  box-shadow: 0 6px 25px rgba(34, 211, 238, 0.7);
  transform: scale(1.02);
}
.theme-ice .progress-fill {
  background: linear-gradient(90deg, #0891b2, #22d3ee) !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
}

/* Contenedor y Ventisca Glacial (Sub-Zero Blizzard) */
.ice-blizzard-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.blizzard-flake {
  position: absolute;
  top: -15px;
  background: linear-gradient(135deg, #cffafe 0%, #ffffff 50%, #67e8f9 100%);
  box-shadow: 0 0 8px #06b6d4, 0 0 4px #ffffff;
  opacity: 0.95;
  border-radius: 50%;
  animation: blowBlizzard linear infinite;
}

.blizzard-flake:nth-child(odd) {
  border-radius: 2px;
  animation-name: blowBlizzardTwist;
}

@keyframes blowBlizzard {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(500px) translateX(-250px) rotate(360deg) scale(1.2);
    opacity: 0;
  }
}

@keyframes blowBlizzardTwist {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(250px) translateX(-150px) rotate(180deg) scale(1.4);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(500px) translateX(-350px) rotate(360deg) scale(0.9);
    opacity: 0;
  }
}

/* MONEY THEME (SORTEOS DE DINERO / CASH RAIN) */
.theme-money {
  position: relative;
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2), inset 0 0 10px rgba(255, 215, 0, 0.1) !important;
  background: linear-gradient(180deg, rgba(6, 40, 25, 0.6) 0%, #0a0a0a 100%) !important;
  overflow: hidden;
}
.theme-money:hover {
  border-color: #10b981 !important;
  box-shadow: 0 0 35px rgba(16, 185, 129, 0.5), inset 0 0 20px rgba(255, 215, 0, 0.25) !important;
}
.theme-money h3 {
  color: #10b981 !important;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.6), 0 0 4px rgba(255, 215, 0, 0.4);
}
.theme-money .participate-btn {
  background: linear-gradient(45deg, #10b981, #059669, #ffd700, #10b981);
  background-size: 200% auto;
  color: #000 !important;
  animation: moneyShimmer 3s linear infinite;
  border: 1px solid #ffd700 !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4), 0 0 10px rgba(255, 215, 0, 0.4);
  font-weight: 900 !important;
}
.theme-money .participate-btn:hover {
  box-shadow: 0 6px 25px rgba(16, 185, 129, 0.7), 0 0 15px rgba(255, 215, 0, 0.7);
  transform: scale(1.02);
}
.theme-money .progress-fill {
  background: linear-gradient(45deg, #10b981, #ffd700, #10b981) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

/* Contenedor y Billetes/Símbolos Flotantes (Money Cash Rain) */
.money-cash-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.cash-particle {
  position: absolute;
  top: -25px;
  color: #10b981;
  font-weight: 900;
  font-family: monospace;
  text-shadow: 0 0 8px #10b981, 0 0 3px #ffd700;
  opacity: 0.95;
  animation: fallCashRain linear infinite;
}

.cash-particle:nth-child(odd) {
  color: #ffd700;
  text-shadow: 0 0 8px #ffd700, 0 0 3px #10b981;
  animation-name: fallCashTwist;
}

@keyframes fallCashRain {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.9);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(500px) rotate(360deg) scale(1.2);
    opacity: 0;
  }
}

@keyframes fallCashTwist {
  0% {
    transform: translateY(0) rotate(0deg) skewY(0deg) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  50% {
    transform: translateY(250px) rotate(180deg) skewY(20deg) scale(1.4);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(500px) rotate(360deg) skewY(0deg) scale(1);
    opacity: 0;
  }
}

@keyframes moneyShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* VALENTINE THEME (SAN VALENTIN - CORAZONES FLOTANTES) */
.theme-valentine {
  position: relative;
  border-color: rgba(255, 20, 147, 0.5) !important;
  box-shadow: 0 0 20px rgba(255, 20, 147, 0.2) !important;
  background: linear-gradient(180deg, rgba(45, 5, 25, 0.6) 0%, #0a0a0a 100%) !important;
  overflow: hidden;
}
.theme-valentine:hover {
  border-color: #ff1493 !important;
  box-shadow: 0 0 35px rgba(255, 20, 147, 0.4), inset 0 0 15px rgba(255, 20, 147, 0.2) !important;
}
.theme-valentine h3 {
  color: #ff69b4 !important;
  text-shadow: 0 0 8px rgba(255, 105, 180, 0.6);
}
.theme-valentine .participate-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ff1493 0%, #c71585 100%);
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 10px #ffc0cb;
  border: 1px solid #ffc0cb !important;
  box-shadow: 0 0 20px #ff1493, inset 0 0 15px #ffc0cb;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  z-index: 1;
}
.theme-valentine .participate-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' fill-opacity='0.25' d='M20 35A10 10 0 0 1 40 35A10 10 0 0 1 60 35Q60 55 40 70Q20 55 20 35Z'/%3E%3Cpath fill='%23ffc0cb' fill-opacity='0.3' d='M65 75A7 7 0 0 1 79 75A7 7 0 0 1 93 75Q93 89 79 99Q65 89 65 75Z'/%3E%3Cpath fill='%23ff69b4' fill-opacity='0.35' d='M5 15A6 6 0 0 1 17 15A6 6 0 0 1 29 15Q29 27 17 37Q5 27 5 15Z'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  animation: floatUpHearts 3s infinite linear;
  z-index: -1;
}
.theme-valentine .participate-btn:hover {
  box-shadow: 0 0 30px #ff1493, inset 0 0 25px #ffc0cb;
  transform: scale(1.03);
  filter: brightness(1.15);
}
.theme-valentine .progress-fill {
  background: linear-gradient(90deg, #ff1493, #ff69b4) !important;
  box-shadow: 0 0 12px rgba(255, 20, 147, 0.6);
}

/* Contenedor y Corazones Flotantes (Heart Bubble Drift) */
.valentine-hearts-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.heart-bubble {
  position: absolute;
  bottom: -20px;
  opacity: 0.9;
  animation: floatHeartBubble linear infinite;
}

.heart-bubble:nth-child(odd) {
  animation-name: floatHeartBubbleSway;
}

@keyframes floatHeartBubble {
  0% {
    transform: translateY(0) scale(0.7);
    opacity: 0;
  }
  10% {
    opacity: 0.85;
  }
  85% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(-500px) scale(1.2);
    opacity: 0;
  }
}

@keyframes floatHeartBubbleSway {
  0% {
    transform: translateY(0) translateX(0) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  50% {
    transform: translateY(-250px) translateX(20px) scale(1.1);
  }
  85% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-500px) translateX(-15px) scale(1.3);
    opacity: 0;
  }
}

/* HALLOWEEN THEME (HALLOWEEN - MURCIELAGOS Y CALABAZAS) */
.theme-halloween {
  position: relative;
  border-color: rgba(255, 102, 0, 0.5) !important;
  box-shadow: 0 0 20px rgba(255, 102, 0, 0.2) !important;
  background: linear-gradient(180deg, rgba(35, 10, 45, 0.7) 0%, #05010a 100%) !important;
  overflow: hidden;
}
.theme-halloween:hover {
  border-color: #ff6600 !important;
  box-shadow: 0 0 35px rgba(255, 102, 0, 0.4), inset 0 0 15px rgba(138, 43, 226, 0.4) !important;
}
.theme-halloween h3 {
  color: #ff6600 !important;
  text-shadow: 0 0 10px rgba(138, 43, 226, 0.8);
}
.theme-halloween .participate-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ff6600 0%, #4a0e78 100%);
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px #ff6600;
  border: 1px solid #ff9933 !important;
  box-shadow: 0 0 20px #ff6600, inset 0 0 15px #8a2be2;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  z-index: 1;
}
.theme-halloween .participate-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%231a052e' fill-opacity='0.4' d='M10 50 Q20 40 30 50 Q40 40 50 50 Q40 60 30 50 Q20 60 10 50Z'/%3E%3Cpath fill='%23ff9933' fill-opacity='0.35' d='M65 30 C65 15 85 15 85 30 C85 45 65 45 65 30 Z M70 28 L72 32 L68 32 Z M80 28 L82 32 L78 32 Z M71 36 Q75 40 79 36 Z'/%3E%3C/svg%3E");
  background-size: 70px 70px;
  animation: spookyDrift 3.5s infinite linear;
  z-index: -1;
}
.theme-halloween .participate-btn:hover {
  box-shadow: 0 0 30px #ff6600, inset 0 0 25px #8a2be2;
  transform: scale(1.03);
  filter: brightness(1.2);
}
.theme-halloween .progress-fill {
  background: linear-gradient(90deg, #ff6600, #8a2be2) !important;
  box-shadow: 0 0 12px rgba(255, 102, 0, 0.6);
}

/* Contenedor y Enjambre de Murciélagos & Calabazas (Bat Swarm) */
.halloween-swarm-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.spooky-particle {
  position: absolute;
  bottom: -25px;
  opacity: 0.9;
  animation: spookyFloat linear infinite;
}

.spooky-particle:nth-child(odd) {
  animation-name: spookyFloatZigzag;
}

@keyframes spookyFloat {
  0% {
    transform: translateY(0) translateX(0) scale(0.8);
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  85% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-480px) translateX(60px) scale(1.1);
    opacity: 0;
  }
}

@keyframes spookyFloatZigzag {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(0.9);
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  25% {
    transform: translateY(-120px) translateX(30px) rotate(10deg) scale(1);
  }
  50% {
    transform: translateY(-240px) translateX(-20px) rotate(-10deg) scale(1.2);
  }
  75% {
    transform: translateY(-360px) translateX(25px) rotate(8deg) scale(1.1);
  }
  85% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-480px) translateX(-10px) rotate(0deg) scale(0.9);
    opacity: 0;
  }
}

/* CHRISTMAS THEME (NAVIDAD - BOMBILLITOS Y COPOS DE NIEVE) */
.theme-christmas {
  position: relative;
  border-color: rgba(0, 191, 99, 0.5) !important;
  box-shadow: 0 0 20px rgba(0, 191, 99, 0.2) !important;
  background: linear-gradient(180deg, rgba(10, 40, 20, 0.7) 0%, #0a0a0a 100%) !important;
  overflow: hidden;
}
.theme-christmas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Cdefs%3E%3Cfilter id='gR'%3E%3CfeGaussianBlur stdDeviation='2' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cfilter id='gY'%3E%3CfeGaussianBlur stdDeviation='2' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cfilter id='gB'%3E%3CfeGaussianBlur stdDeviation='2' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cfilter id='gG'%3E%3CfeGaussianBlur stdDeviation='2' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0,5 Q40,20 80,5 Q120,20 160,5' fill='none' stroke='%230a2210' stroke-width='3'/%3E%3Cg transform='translate(20,13)'%3E%3Crect x='-3' y='-2' width='6' height='5' fill='%230a2210' rx='1'/%3E%3Cellipse cx='0' cy='10' rx='5' ry='8' fill='%23ff0055' filter='url(%23gR)'/%3E%3Cellipse cx='-2' cy='7' rx='1.5' ry='3' fill='%23ffffff'/%3E%3C/g%3E%3Cg transform='translate(60,13)'%3E%3Crect x='-3' y='-2' width='6' height='5' fill='%230a2210' rx='1'/%3E%3Cellipse cx='0' cy='10' rx='5' ry='8' fill='%23ffdd00' filter='url(%23gY)'/%3E%3Cellipse cx='-2' cy='7' rx='1.5' ry='3' fill='%23ffffff'/%3E%3C/g%3E%3Cg transform='translate(100,13)'%3E%3Crect x='-3' y='-2' width='6' height='5' fill='%230a2210' rx='1'/%3E%3Cellipse cx='0' cy='10' rx='5' ry='8' fill='%2300e5ff' filter='url(%23gB)'/%3E%3Cellipse cx='-2' cy='7' rx='1.5' ry='3' fill='%23ffffff'/%3E%3C/g%3E%3Cg transform='translate(140,13)'%3E%3Crect x='-3' y='-2' width='6' height='5' fill='%230a2210' rx='1'/%3E%3Cellipse cx='0' cy='10' rx='5' ry='8' fill='%2300ff66' filter='url(%23gG)'/%3E%3Cellipse cx='-2' cy='7' rx='1.5' ry='3' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 160px 40px;
  z-index: 30;
  pointer-events: none;
  animation: twinkleLights 1.5s infinite alternate ease-in-out;
}
.theme-christmas:hover {
  border-color: #00bf63 !important;
  box-shadow: 0 0 35px rgba(0, 191, 99, 0.4), inset 0 0 15px rgba(255, 215, 0, 0.3) !important;
}
.theme-christmas h3 {
  color: #ffd700 !important;
  text-shadow: 0 0 8px rgba(0, 191, 99, 0.7);
}
.theme-christmas .participate-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #cc0000 0%, #008000 100%);
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px #ffd700;
  border: 1px solid #ffd700 !important;
  box-shadow: 0 0 20px #cc0000, inset 0 0 15px #ffd700;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  z-index: 1;
}
.theme-christmas .participate-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' fill-opacity='0.8'/%3E%3Ccircle cx='50' cy='60' r='4' fill='%23ffd700' fill-opacity='0.7'/%3E%3Ccircle cx='80' cy='30' r='2.5' fill='%23ffffff' fill-opacity='0.9'/%3E%3Ccircle cx='35' cy='85' r='2' fill='%23ffffff' fill-opacity='0.6'/%3E%3C/svg%3E");
  background-size: 50px 50px;
  animation: fallingSnow 3s infinite linear;
  z-index: -1;
}
.theme-christmas .participate-btn:hover {
  box-shadow: 0 0 30px #cc0000, inset 0 0 25px #ffd700;
  transform: scale(1.03);
  filter: brightness(1.2);
}
.theme-christmas .progress-fill {
  background: linear-gradient(90deg, #cc0000, #00bf63, #ffd700) !important;
  box-shadow: 0 0 12px rgba(0, 191, 99, 0.6);
}

/* Contenedor y Nevada Mágica con Regalos (Magic Snowfall) */
.christmas-snow-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.xmas-flake {
  position: absolute;
  top: -20px;
  opacity: 0.95;
  animation: magicSnowfall linear infinite;
}

.xmas-flake:nth-child(odd) {
  animation-name: magicSnowfallDrift;
}

@keyframes magicSnowfall {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translateY(500px) rotate(360deg) scale(1.1);
    opacity: 0;
  }
}

@keyframes magicSnowfallDrift {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(0.9);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  50% {
    transform: translateY(250px) translateX(30px) rotate(180deg) scale(1.2);
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translateY(500px) translateX(-20px) rotate(360deg) scale(1);
    opacity: 0;
  }
}

@keyframes twinkleLights {
  0% { filter: brightness(0.85) drop-shadow(0 0 4px rgba(255,255,255,0.5)); }
  50% { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255,221,0,0.85)); }
  100% { filter: brightness(0.95) drop-shadow(0 0 12px rgba(0,229,255,0.85)); }
}
@keyframes floatUpHearts {
  0% { background-position: 0 100px; }
  100% { background-position: 30px 0; }
}
@keyframes spookyDrift {
  0% { background-position: 100px 0; }
  100% { background-position: 0 50px; }
}
@keyframes fallingSnow {
  0% { background-position: 0 0; }
  100% { background-position: 25px 100px; }
}

/* ==========================================================================
   🏍️ TEMA: MOTORES (MOTO ROAD 8-BITS)
   ========================================================================== */
.theme-moto {
  border-color: rgba(255, 69, 0, 0.5) !important;
  box-shadow: 0 0 15px rgba(255, 69, 0, 0.4), inset 0 0 10px rgba(255, 69, 0, 0.2) !important;
  background: linear-gradient(145deg, #181111 0%, #221515 100%) !important;
}

.theme-moto:hover {
  border-color: rgba(255, 69, 0, 0.9) !important;
  box-shadow: 0 0 25px rgba(255, 69, 0, 0.7), inset 0 0 15px rgba(255, 69, 0, 0.4) !important;
}

/* Barra de progreso / Carretera */
.theme-moto .progress-container {
  background: #1a1a1a !important;
  border: 1px solid #444 !important;
  overflow: hidden !important;
}

.theme-moto .progress-fill {
  background: linear-gradient(90deg, #8b0000 0%, #ff4500 50%, #ff8c00 100%) !important;
  box-shadow: 0 0 10px rgba(255, 69, 0, 0.8) !important;
}

.theme-moto .progress-fill span {
  color: #ffffff !important;
  text-shadow: 0 0 5px #000, 0 0 10px #ff4500 !important;
}

/* Líneas de carretera en movimiento estilo arcade 8-bits */
.moto-highway-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  pointer-events: none;
}

.moto-highway-track .highway-lines {
  position: absolute;
  top: 50%;
  left: 0;
  width: 200%;
  height: 4px;
  margin-top: -2px;
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 15px, #ffcc00 15px, #ffcc00 30px);
  animation: highwayMove 0.5s linear infinite;
  opacity: 0.8;
}

@keyframes highwayMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-30px); }
}

/* Motero 8-Bits corriendo */
.moto-rider-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 35;
  pointer-events: none;
}

.moto-rider-8bit {
  position: absolute;
  right: 0; /* Ubicado en la punta de la barra */
  top: 50%;
  transform: translate(10px, -50%);
  display: flex;
  align-items: center;
  animation: motoBounce 0.2s font-smooth infinite alternate;
  filter: drop-shadow(0 2px 4px rgba(255, 69, 0, 0.9));
}

.moto-rider-8bit .rider-icon {
  font-size: 1.6rem;
  line-height: 1;
  display: inline-block;
  transform: scaleX(-1); /* Orientado hacia la derecha si el emoji mira a la izquierda */
}

.moto-rider-8bit .smoke-particles {
  position: absolute;
  left: -15px;
  top: 60%;
  width: 10px;
  height: 10px;
  background: rgba(200, 200, 200, 0.8);
  border-radius: 50%;
  animation: exhaustSmoke 0.4s linear infinite;
}

@keyframes motoBounce {
  0% { transform: translate(10px, -55%); }
  100% { transform: translate(10px, -45%); }
}

@keyframes exhaustSmoke {
  0% { transform: translateX(0) scale(0.5); opacity: 0.8; }
  100% { transform: translateX(-20px) scale(1.5); opacity: 0; }
}

/* Botón de Motores */
.theme-moto .participate-btn {
  background: linear-gradient(90deg, #ff4500 0%, #ff8c00 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
  border: 1px solid #ffaf7a !important;
  box-shadow: 0 0 15px rgba(255, 69, 0, 0.6) !important;
  position: relative;
  overflow: hidden;
}

.theme-moto .participate-btn:hover {
  animation: motoRev 0.1s linear infinite alternate !important;
  box-shadow: 0 0 25px rgba(255, 69, 0, 0.9) !important;
  background: linear-gradient(90deg, #ff8c00 0%, #ff4500 100%) !important;
}

@keyframes motoRev {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-2px, 1px) rotate(0.5deg); }
}


/* ==========================================================================
   🏎️ TEMA: COCHES / HYPERCAR (NEON DRIFT)
   ========================================================================== */
.theme-coche {
  border-color: rgba(0, 255, 255, 0.5) !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4), inset 0 0 12px rgba(138, 43, 226, 0.4) !important;
  background: linear-gradient(145deg, #0a0f1d 0%, #120c1f 100%) !important;
}

.theme-coche:hover {
  border-color: rgba(0, 255, 255, 0.9) !important;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.8), inset 0 0 20px rgba(138, 43, 226, 0.6) !important;
}

/* Tacómetro LED / Velocímetro en la barra */
.theme-coche .progress-container {
  background: #05070f !important;
  border: 1px solid #1a2344 !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8) !important;
}

.theme-coche .progress-fill {
  background: linear-gradient(90deg, #00ffcc 0%, #0099ff 50%, #8a2be2 100%) !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.8) !important;
}

.theme-coche .progress-fill span {
  color: #ffffff !important;
  text-shadow: 0 0 8px #00ffcc, 0 0 12px #8a2be2 !important;
}

.coche-tachometer-track {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 5px, rgba(255,255,255,0.1) 5px, rgba(255,255,255,0.1) 7px);
}

/* Hypercar en la punta con fuego azul/morado de escape */
.coche-drift-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 35;
  pointer-events: none;
}

.car-exhaust-fire {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(12px, -50%);
  display: flex;
  align-items: center;
  filter: drop-shadow(0 2px 6px rgba(0, 255, 255, 0.9));
}

.car-exhaust-fire .car-icon {
  font-size: 1.6rem;
  line-height: 1;
  display: inline-block;
  transform: scaleX(-1); /* Asegura que apunte en dirección de avance */
  animation: carDrift 2s ease-in-out infinite alternate;
}

.car-exhaust-fire .exhaust-flames {
  position: absolute;
  left: -18px;
  top: 50%;
  width: 20px;
  height: 8px;
  margin-top: -4px;
  background: linear-gradient(90deg, transparent 0%, #00ffcc 50%, #ff00ff 100%);
  border-radius: 50%;
  animation: nitroFlame 0.1s linear infinite alternate;
}

@keyframes carDrift {
  0% { transform: scaleX(-1) translateY(-2px) rotate(-3deg); }
  100% { transform: scaleX(-1) translateY(2px) rotate(3deg); }
}

@keyframes nitroFlame {
  0% { transform: scaleX(0.8); opacity: 0.7; filter: hue-rotate(0deg); }
  100% { transform: scaleX(1.3); opacity: 1; filter: hue-rotate(45deg); }
}

/* Botón de Coches (START ENGINE / NITRO) */
.theme-coche .participate-btn {
  background: linear-gradient(90deg, #00ffcc 0%, #0066ff 50%, #8a2be2 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9) !important;
  border: 1px solid #00ffff !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.6) !important;
  position: relative;
  overflow: hidden;
  letter-spacing: 1px;
}

.theme-coche .participate-btn:hover {
  box-shadow: 0 0 30px rgba(0, 255, 255, 1), 0 0 15px rgba(138, 43, 226, 0.8) !important;
  background: linear-gradient(90deg, #8a2be2 0%, #0066ff 50%, #00ffcc 100%) !important;
  transform: translateY(-2px) scale(1.02);
}

.theme-coche .participate-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: rotate(45deg);
  animation: nitroReflect 2.5s infinite;
}

@keyframes nitroReflect {
  0% { transform: translate(-100%, -100%) rotate(45deg); }
  50%, 100% { transform: translate(100%, 100%) rotate(45deg); }
}

/* Prevenir zoom automático al hacer focus en inputs en iOS (Safari/Chrome) */
@media (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="file"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* MATRIX CYBER GREEN CODE WATERFALL EFFECTS */
.matrix-rain-container { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; opacity: 0.18; }
.matrix-column { position: absolute; top: -150px; color: #00ff41; font-family: 'Courier New', Courier, monospace; font-weight: 900; writing-mode: vertical-rl; text-orientation: upright; animation: matrixColumnFall linear infinite; text-shadow: 0 0 6px #00ff41, 0 0 2px #ffffff; letter-spacing: 2px; }
@keyframes matrixColumnFall { 0% { transform: translateY(0); opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(550px); opacity: 0; } }