* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Bricolage Grotesque', sans-serif; }

:root {
  --bg-primary: #0f0f1a;
  --bg-secondary: #1a1a2e;
  --bg-card: #22223a;
  --text-primary: #f0f0f5;
  --text-secondary: #9999bb;
  --accent: #FF1C1C;
  --accent-glow: rgba(255, 28, 28, 0.3);
}

.light-mode {
  --bg-primary: #f5f5fa;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --text-primary: #1a1a2e;
  --text-secondary: #666688;
  --accent: #FF1C1C;
  --accent-glow: rgba(255, 28, 28, 0.15);
}

@keyframes pokeball-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes stat-fill {
  from { width: 0%; }
  to { width: var(--fill-width); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce-in {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

@keyframes toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

.animate-fade-in { animation: fade-in-up 0.4s ease-out forwards; }
.animate-bounce-in { animation: bounce-in 0.5s ease-out forwards; }
.animate-toast-in { animation: toast-in 0.3s ease-out forwards; }
.animate-toast-out { animation: toast-out 0.3s ease-in forwards; }

.stat-bar-fill {
  animation: stat-fill 0.8s ease-out forwards;
  width: var(--fill-width);
}

.pokeball-spinner {
  animation: pokeball-spin 1s linear infinite;
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, rgba(255,255,255,0.08) 50%, var(--bg-card) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s infinite;
}

.type-badge-glow {
  box-shadow: 0 0 8px var(--type-color, rgba(255,255,255,0.2));
}

.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom scrollbar for detail views */
.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: var(--text-secondary); border-radius: 3px; }

.detail-overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid white;
}