/* Custom Dreamcast Menu Styles */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

.font-orbitron {
  font-family: 'Orbitron', monospace;
}

.dreamcast-bg {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
  animation: dreamcast-bg-flow 20s ease-in-out infinite;
}

@keyframes dreamcast-bg-flow {
  0%, 100% { background-position: 0% 50%, 100% 50%, 50% 0%; }
  50% { background-position: 100% 50%, 0% 50%, 50% 100%; }
}

.particles {
  background-image: 
    radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 40px 70px, rgba(59, 130, 246, 0.4), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(139, 69, 19, 0.3), transparent),
    radial-gradient(1px 1px at 160px 30px, rgba(255, 255, 255, 0.1), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: particles-drift 15s linear infinite;
}

@keyframes particles-drift {
  0% { transform: translateY(0px) translateX(0px); }
  100% { transform: translateY(-100px) translateX(50px); }
}

.dreamcast-swirl {
  background: conic-gradient(
    from 0deg,
    rgba(59, 130, 246, 0.8) 0deg,
    rgba(147, 51, 234, 0.6) 60deg,
    rgba(239, 68, 68, 0.4) 120deg,
    rgba(245, 158, 11, 0.6) 180deg,
    rgba(34, 197, 94, 0.4) 240deg,
    rgba(59, 130, 246, 0.8) 300deg,
    rgba(59, 130, 246, 0.8) 360deg
  );
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.6;
  box-shadow: 
    0 0 50px rgba(59, 130, 246, 0.5),
    inset 0 0 50px rgba(255, 255, 255, 0.1);
}

.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.dreamcast-glow {
  text-shadow: 
    0 0 10px rgba(59, 130, 246, 0.8),
    0 0 20px rgba(59, 130, 246, 0.6),
    0 0 30px rgba(59, 130, 246, 0.4);
}

.dreamcast-center-logo {
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(59, 130, 246, 0.6);
  animation: logo-pulse 4s ease-in-out infinite;
}

@keyframes logo-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.menu-option {
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: radial-gradient(circle, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.9) 100%);
  backdrop-filter: blur(5px);
  animation: menu-float 3s ease-in-out infinite;
}

.menu-option:nth-child(odd) {
  animation-delay: 0.5s;
}

@keyframes menu-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.menu-option-orange:hover {
  border-color: #f97316;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.6);
}

.menu-option-blue:hover {
  border-color: #3b82f6;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
}

.menu-option-green:hover {
  border-color: #22c55e;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
}

.menu-option-purple:hover {
  border-color: #a855f7;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
}

.menu-option-yellow:hover {
  border-color: #eab308;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.6);
}

.menu-option-red:hover {
  border-color: #ef4444;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}

.vmu-display {
  background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
  border-radius: 4px;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(34, 197, 94, 0.3);
}

.pixel-font {
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  text-rendering: pixelated;
  font-size: 10px;
}

/* Scanline effect (subtle) */
.dreamcast-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  opacity: 0.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dreamcast-swirl {
    width: 280px;
    height: 280px;
  }
  
  .menu-option {
    width: 60px;
    height: 60px;
  }
  
  .vmu-display {
    width: 160px;
  }
  
  .pixel-font {
    font-size: 8px;
  }
}