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

:root {
  --cyan: #00FFFF;
  --magenta: #FF00FF;
  --hotpink: #FF1493;
  --purple: #1a0033;
  --midnight: #0a0a2e;
  --neongreen: #39FF14;
  --gold: #FFD700;
}

body {
  font-family: 'Share Tech Mono', monospace;
  background: #050510;
  color: #e0e0ff;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, 
    #050510 0%, #1a0033 15%, #0a0a2e 30%, 
    #120025 45%, #050520 60%, #1a0040 75%, 
    #0a0a2e 90%, #050510 100%);
  background-size: 400% 400%;
  animation: bgShift 20s ease infinite;
  z-index: -3;
}

@keyframes bgShift {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

#scanlines {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 255, 0.015) 2px,
    rgba(0, 255, 255, 0.015) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

#particles-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
}

.font-orbitron { font-family: 'Orbitron', sans-serif; }
.font-mono { font-family: 'Share Tech Mono', monospace; }

/* Title gradient text */
.gradient-title {
  background: linear-gradient(90deg, #00FFFF, #FF00FF, #FFD700, #00FFFF);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleGradient 4s ease infinite;
}

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

/* Pulsing glow */
.glow-pulse {
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(0,255,255,0.5), 0 0 20px rgba(255,0,255,0.3); }
  50% { text-shadow: 0 0 20px rgba(0,255,255,0.8), 0 0 40px rgba(255,0,255,0.5), 0 0 60px rgba(255,215,0,0.3); }
}

/* Module card gradients */
.module-gradient-1 { background: linear-gradient(135deg, #00FFFF20, #FF00FF20); border-image: linear-gradient(135deg, #00FFFF, #FF00FF) 1; }
.module-gradient-2 { background: linear-gradient(135deg, #1a003380, #39FF1420); border-image: linear-gradient(135deg, #39FF14, #00FFFF) 1; }
.module-gradient-3 { background: linear-gradient(135deg, #FF149320, #FFD70020); border-image: linear-gradient(135deg, #FF1493, #FFD700) 1; }
.module-gradient-4 { background: linear-gradient(135deg, #FF00FF20, #00FFFF20); border-image: linear-gradient(135deg, #9B59B6, #3498DB) 1; }
.module-gradient-5 { background: linear-gradient(135deg, #FFD70020, #FF000020); border-image: linear-gradient(135deg, #FFD700, #FF4500) 1; }
.module-gradient-6 { background: linear-gradient(135deg, #00FFFF20, #39FF1420); border-image: linear-gradient(135deg, #00FFFF, #39FF14) 1; }

.module-active {
  box-shadow: 0 0 15px rgba(0,255,255,0.4), 0 0 30px rgba(255,0,255,0.2), inset 0 0 15px rgba(0,255,255,0.1);
  animation: activeBorder 2s ease-in-out infinite;
}

@keyframes activeBorder {
  0%, 100% { box-shadow: 0 0 15px rgba(0,255,255,0.4), 0 0 30px rgba(255,0,255,0.2); }
  50% { box-shadow: 0 0 25px rgba(0,255,255,0.6), 0 0 50px rgba(255,0,255,0.4); }
}

.module-inactive {
  opacity: 0.4;
  filter: grayscale(0.5);
}

/* Launch button */
.launch-btn {
  background: linear-gradient(135deg, #FF00FF, #00FFFF, #FFD700);
  background-size: 300% 300%;
  animation: launchGradient 3s ease infinite;
  position: relative;
  overflow: hidden;
}

.launch-btn::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(135deg, #FF00FF, #00FFFF, #FFD700, #FF00FF);
  background-size: 400% 400%;
  animation: launchGradient 3s ease infinite;
  z-index: -1;
  filter: blur(8px);
  opacity: 0.7;
}

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

.launch-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(0,255,255,0.5), 0 0 60px rgba(255,0,255,0.3);
}

.launch-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Viewport border */
.viewport-border {
  border: 2px solid transparent;
  background-image: linear-gradient(#0a0a2e, #0a0a2e), linear-gradient(135deg, #0a0a6e, #00FFFF, #ffffff40, #00FFFF, #0a0a6e);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Synergy bar */
.synergy-bar-bg {
  background: linear-gradient(90deg, #1a003380, #0a0a2e80);
}

.synergy-bar-fill {
  background: linear-gradient(90deg, #FF1493, #FF00FF, #00FFFF, #39FF14);
  background-size: 200% 100%;
  animation: synergyShift 3s ease infinite;
  transition: width 0.5s ease;
}

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

/* Glitch effect */
.glitch-text {
  animation: glitch 0.3s infinite;
}

@keyframes glitch {
  0% { text-shadow: 2px 0 #FF00FF, -2px 0 #00FFFF; transform: translate(0); }
  20% { text-shadow: -2px 2px #FF00FF, 2px -2px #00FFFF; transform: translate(-2px, 2px); }
  40% { text-shadow: 2px -2px #FF00FF, -2px 2px #00FFFF; transform: translate(2px, -1px); }
  60% { text-shadow: -1px 2px #FF00FF, 1px -2px #00FFFF; transform: translate(-1px, 1px); }
  80% { text-shadow: 2px 0 #FF00FF, -2px 0 #00FFFF; transform: translate(1px, -2px); }
  100% { text-shadow: 0 0 #FF00FF, 0 0 #00FFFF; transform: translate(0); }
}

/* Confetti */
.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  animation: confettiFall 3s ease forwards;
  z-index: 100;
  pointer-events: none;
}

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

/* Spinning planet */
.spin-planet {
  animation: spinPlanet 8s linear infinite;
  display: inline-block;
}

@keyframes spinPlanet {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* Phase colors */
.phase-1 { background: linear-gradient(135deg, #0a0a2e, #1a0060, #00FFFF10); }
.phase-2 { background: linear-gradient(135deg, #1a0033, #0a0a4e, #FF00FF10); }
.phase-3 { background: linear-gradient(135deg, #0a1a2e, #003050, #39FF1410); }
.phase-4 { background: linear-gradient(135deg, #2a0033, #1a0050, #FFD70010); }
.phase-success { background: linear-gradient(135deg, #0a2a0a, #003020, #39FF1430); }
.phase-fail { background: linear-gradient(135deg, #2a0a0a, #300000, #FF000030); }

/* Puppy reward area */
.puppy-zone {
  background: linear-gradient(135deg, #FFD70040, #FF149340, #E6E6FA40);
  border: 2px solid;
  border-image: linear-gradient(135deg, #FFD700, #FF1493, #E6E6FA) 1;
}

/* Stats panel */
.stats-panel {
  background: linear-gradient(180deg, #0a0a2eee, #1a0033ee, #0a0a2eee);
  border-left: 2px solid;
  border-image: linear-gradient(180deg, #00FFFF, #FF00FF, #FFD700) 1;
}

/* Circular progress ring */
.progress-ring-circle {
  transition: stroke-dashoffset 0.5s ease;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Tooltip */
.module-tooltip {
  background: linear-gradient(135deg, #0a0a2ef0, #1a0033f0);
  border: 1px solid #00FFFF60;
  backdrop-filter: blur(10px);
}

/* Responsive */
@media (max-width: 768px) {
  .module-dock {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Gradient text utility */
.text-gradient-cyan-magenta {
  background: linear-gradient(90deg, #00FFFF, #FF00FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-gold-pink {
  background: linear-gradient(90deg, #FFD700, #FF1493);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-green-cyan {
  background: linear-gradient(90deg, #39FF14, #00FFFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Wireframe planet animation */
.wireframe-rotate {
  animation: wireRotate 20s linear infinite;
}

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

/* Overload special animation */
.overload-animation {
  animation: overload 0.5s ease infinite alternate;
}

@keyframes overload {
  0% { filter: hue-rotate(0deg) brightness(1); }
  100% { filter: hue-rotate(180deg) brightness(1.5); }
}

/* Footer gradient underline */
.footer-underline {
  height: 2px;
  background: linear-gradient(90deg, transparent, #00FFFF, #FF00FF, #FFD700, #FF00FF, #00FFFF, transparent);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a2e; }
::-webkit-scrollbar-thumb { 
  background: linear-gradient(180deg, #00FFFF, #FF00FF);
  border-radius: 4px;
}