* { box-sizing: border-box; margin: 0; padding: 0; }

body { position: relative; }

#sparkles-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: hidden;
}

#root { position: relative; z-index: 1; }

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}

.sparkle-dot {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  animation: sparkle var(--dur) var(--delay) infinite ease-in-out;
}

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

.gradient-text {
  background: linear-gradient(90deg, #8338ec, #ff006e, #00f5d4, #ffd166, #8338ec);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

@keyframes borderGlow {
  0%, 100% { border-color: #8338ec; box-shadow: 0 0 15px rgba(131,56,236,0.3); }
  25% { border-color: #ff006e; box-shadow: 0 0 15px rgba(255,0,110,0.3); }
  50% { border-color: #00f5d4; box-shadow: 0 0 15px rgba(0,245,212,0.3); }
  75% { border-color: #ffd166; box-shadow: 0 0 15px rgba(255,209,102,0.3); }
}

.glow-border {
  border: 2px solid #8338ec;
  animation: borderGlow 6s ease infinite;
}

@keyframes slotSpin {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

.glass {
  background: rgba(20, 20, 50, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
}

.glass-hover:hover {
  background: rgba(30, 30, 70, 0.7);
  border-color: rgba(255,255,255,0.15);
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeSlideUp 0.4s ease forwards;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(131,56,236,0.4); }
  50% { box-shadow: 0 0 20px rgba(131,56,236,0.8), 0 0 40px rgba(255,0,110,0.3); }
}

.btn-glow:hover {
  animation: pulse-glow 1.5s ease infinite;
}

@keyframes confetti-fall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
  position: fixed;
  top: -10px;
  width: 8px; height: 8px;
  z-index: 9999;
  pointer-events: none;
  animation: confetti-fall var(--fall-dur) var(--fall-delay) linear forwards;
}

.fandom-btn.selected {
  background: rgba(131,56,236,0.3) !important;
  border-color: #8338ec !important;
  box-shadow: 0 0 12px rgba(131,56,236,0.5);
}

.card-holographic {
  background: linear-gradient(135deg, rgba(131,56,236,0.1), rgba(255,0,110,0.05), rgba(0,245,212,0.1));
  position: relative;
  overflow: hidden;
}

.card-holographic::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(131,56,236,0.05) 25%, transparent 50%, rgba(0,245,212,0.05) 75%, transparent 100%);
  animation: holoRotate 8s linear infinite;
  pointer-events: none;
}

@keyframes holoRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 3px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(131,56,236,0.4); border-radius: 3px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(131,56,236,0.6); }

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0,245,212,0.5); }
  50% { box-shadow: 0 0 12px rgba(0,245,212,0.9); }
}

.version-badge {
  animation: badge-pulse 2s ease infinite;
  image-rendering: pixelated;
  font-family: 'Fira Code', monospace;
}

@media (max-width: 768px) {
  .desktop-sidebar { display: none; }
}