:root {
  --banana-yellow: #FFD700;
  --banana-bright: #FFC107;
  --banana-cream: #FFF8DC;
  --bg-deep: #0d0d1a;
  --bg-mid: #1a1a2e;
  --bg-card: #16213e;
  --neon-pink: #ff2e63;
  --neon-blue: #08d9d6;
  --neon-green: #39ff14;
  --cosmic-purple: #8b5cf6;
}

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

body {
  font-family: 'Fredoka', sans-serif;
  background: var(--bg-deep);
  color: #f0f0f0;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(255,215,0,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(255,46,99,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

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

.font-bangers { font-family: 'Bangers', cursive; }

@keyframes bounceTitle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  25% { transform: translateY(-6px) rotate(1deg); }
  50% { transform: translateY(-2px) rotate(-0.5deg); }
  75% { transform: translateY(-8px) rotate(0.5deg); }
}

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

@keyframes spinReelBounce {
  0% { transform: translateY(-600%); }
  60% { transform: translateY(5%); }
  80% { transform: translateY(-2%); }
  100% { transform: translateY(0); }
}

@keyframes revealBanana {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes shakeScreen {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-8px) translateY(4px); }
  20% { transform: translateX(8px) translateY(-4px); }
  30% { transform: translateX(-6px) translateY(2px); }
  40% { transform: translateX(6px) translateY(-2px); }
  50% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

@keyframes pulseFire {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.1); filter: brightness(1.3); }
}

@keyframes rainbowBorder {
  0% { border-color: #ff0000; box-shadow: 0 0 20px #ff000066; }
  14% { border-color: #ff8800; box-shadow: 0 0 20px #ff880066; }
  28% { border-color: #ffff00; box-shadow: 0 0 20px #ffff0066; }
  42% { border-color: #00ff00; box-shadow: 0 0 20px #00ff0066; }
  57% { border-color: #0088ff; box-shadow: 0 0 20px #0088ff66; }
  71% { border-color: #8800ff; box-shadow: 0 0 20px #8800ff66; }
  85% { border-color: #ff00ff; box-shadow: 0 0 20px #ff00ff66; }
  100% { border-color: #ff0000; box-shadow: 0 0 20px #ff000066; }
}

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

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

@keyframes crystalSparkle {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

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

@keyframes numberTick {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(255,215,0,0.3); }
  50% { box-shadow: 0 0 25px rgba(255,215,0,0.6), 0 0 50px rgba(255,215,0,0.2); }
}

@keyframes buttonPress {
  0% { transform: scale(1); }
  50% { transform: scale(0.93); }
  100% { transform: scale(1); }
}

@keyframes bananaRain {
  0% { transform: translateY(-50px) rotate(0deg) translateX(0); opacity: 1; }
  100% { transform: translateY(100vh) rotate(360deg) translateX(50px); opacity: 0; }
}

.animate-bounce-title {
  animation: bounceTitle 2s ease-in-out infinite;
}

.animate-shake {
  animation: shakeScreen 0.5s ease-in-out;
}

.animate-reveal {
  animation: revealBanana 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-pulse-fire {
  animation: pulseFire 1s ease-in-out infinite;
}

.animate-rainbow {
  animation: rainbowBorder 2s linear infinite;
  border-width: 3px;
  border-style: solid;
}

.animate-slide-up {
  animation: slideUp 0.4s ease-out forwards;
}

.animate-button-press {
  animation: buttonPress 0.15s ease-in-out;
}

.animate-glow {
  animation: glowPulse 2s ease-in-out infinite;
}

.cosmic-bg {
  background: linear-gradient(270deg, #8b5cf6, #ec4899, #3b82f6, #10b981, #f59e0b);
  background-size: 1000% 1000%;
  animation: cosmicSwirl 3s ease infinite;
}

.crystal-sparkle::after {
  content: '✨';
  position: absolute;
  animation: crystalSparkle 1s ease-in-out infinite;
}

.reel-container {
  overflow: hidden;
  height: 100px;
  position: relative;
}

.reel-strip {
  transition: transform 0.1s;
}

.reel-spinning .reel-strip {
  animation: spinReel 0.3s linear infinite;
}

.reel-stopping .reel-strip {
  animation: spinReelBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  z-index: 100;
  pointer-events: none;
  animation: confettiFall 2.5s linear forwards;
}

.banana-rain-piece {
  position: fixed;
  font-size: 24px;
  z-index: 100;
  pointer-events: none;
  animation: bananaRain 3s ease-in forwards;
}

.peel-btn {
  background: linear-gradient(135deg, #FFD700 0%, #FFC107 50%, #ff9800 100%);
  color: #1a1a2e;
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  letter-spacing: 2px;
  border: none;
  padding: 16px 48px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 6px 0 #b8860b, 0 8px 20px rgba(255,215,0,0.3);
  position: relative;
  user-select: none;
}

.peel-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #b8860b, 0 12px 30px rgba(255,215,0,0.4);
}

.peel-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #b8860b, 0 4px 10px rgba(255,215,0,0.2);
}

.peel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.stat-card {
  background: linear-gradient(135deg, rgba(22,33,62,0.9), rgba(13,13,26,0.9));
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 12px;
  padding: 12px 16px;
  transition: border-color 0.3s;
}

.stat-card:hover {
  border-color: rgba(255,215,0,0.4);
}

.collection-slot {
  background: rgba(22,33,62,0.8);
  border: 2px solid rgba(255,215,0,0.1);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  transition: all 0.3s;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.collection-slot.discovered {
  border-color: rgba(255,215,0,0.4);
}

.collection-slot.undiscovered {
  filter: grayscale(1) brightness(0.4);
}

.multiplier-badge {
  background: linear-gradient(135deg, #ff4500, #ff8c00);
  padding: 4px 16px;
  border-radius: 20px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,215,0,0.5); }

.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(4px);
}

.modal-box {
  background: var(--bg-card);
  border: 2px solid var(--banana-yellow);
  border-radius: 16px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  text-align: center;
}

.auto-spin-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  background: rgba(255,255,255,0.1);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.3s;
  border: none;
}

.auto-spin-toggle.active {
  background: var(--banana-yellow);
}

.auto-spin-toggle .toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.auto-spin-toggle.active .toggle-knob {
  transform: translateX(24px);
}

.tab-btn {
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s;
  background: transparent;
  color: rgba(255,255,255,0.5);
}

.tab-btn.active {
  background: rgba(255,215,0,0.15);
  color: var(--banana-yellow);
}

.tab-btn:hover {
  color: var(--banana-yellow);
}

@media (max-width: 768px) {
  .peel-btn {
    font-size: 1.2rem;
    padding: 14px 36px;
  }
}