:root {
  --neon-cyan: #00ffff;
  --neon-magenta: #ff00ff;
  --neon-yellow: #ffff00;
  --cosmic-purple: #6a0dad;
  --cosmic-blue: #1a1a3e;
  --cosmic-dark: #0a0a1a;
}

body {
  background: var(--cosmic-dark);
  color: #e0e0e0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Animated starfield background */
.starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(to bottom, #0a0a1a 0%, #1a1a3e 100%);
  overflow: hidden;
}

.starfield::before,
.starfield::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  box-shadow: 
    100px 200px white,
    300px 100px white,
    500px 300px white,
    700px 150px white,
    900px 250px white,
    200px 400px white,
    400px 350px white,
    600px 450px white,
    800px 400px white,
    150px 550px white,
    350px 500px white,
    550px 600px white,
    750px 550px white,
    950px 650px white,
    1100px 200px white,
    1300px 400px white,
    1500px 300px white,
    50px 150px white,
    250px 50px white,
    450px 200px white;
  animation: twinkle 3s infinite;
}

.starfield::after {
  animation-delay: 1.5s;
  box-shadow: 
    150px 250px white,
    350px 150px white,
    550px 350px white,
    750px 200px white,
    950px 300px white,
    250px 450px white,
    450px 400px white,
    650px 500px white,
    850px 450px white,
    200px 600px white,
    400px 550px white,
    600px 650px white,
    800px 600px white,
    1000px 700px white,
    1150px 250px white,
    1350px 450px white,
    1550px 350px white,
    100px 100px white,
    300px 100px white,
    500px 250px white;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Navigation */
.navbar {
  background: rgba(26, 26, 62, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--neon-cyan);
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
}

.brand-icon {
  font-size: 2rem;
  vertical-align: middle;
  filter: drop-shadow(0 0 10px var(--neon-cyan));
}

.nav-link {
  color: #e0e0e0 !important;
  transition: all 0.3s;
}

.nav-link:hover,
.nav-link.active {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 10px var(--neon-cyan);
}

/* Neon text effects */
.neon-text {
  color: var(--neon-cyan);
  text-shadow: 
    0 0 5px var(--neon-cyan),
    0 0 10px var(--neon-cyan),
    0 0 20px var(--neon-cyan);
}

.text-cosmic {
  color: #b0b0d0;
}

/* Cosmic panel */
.cosmic-panel {
  background: rgba(26, 26, 62, 0.8);
  backdrop-filter: blur(10px);
  border: 2px solid var(--neon-magenta);
  border-radius: 15px;
  box-shadow: 
    0 0 20px rgba(255, 0, 255, 0.3),
    inset 0 0 20px rgba(255, 0, 255, 0.1);
}

/* Ship preview */
.ship-preview-container {
  text-align: center;
}

.ship-preview {
  background: rgba(0, 0, 0, 0.5);
  border: 3px solid var(--neon-cyan);
  border-radius: 10px;
  padding: 40px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 30px rgba(0, 255, 255, 0.3),
    inset 0 0 30px rgba(0, 255, 255, 0.1);
}

.ship-pixel-art {
  font-size: 120px;
  filter: drop-shadow(0 0 20px var(--neon-cyan));
  transition: all 0.3s;
}

.ship-preview-small {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--neon-cyan);
  border-radius: 8px;
  padding: 20px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ship-pixel-art-small {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

/* Stats */
.stat-progress {
  height: 25px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-progress .progress-bar {
  transition: width 0.5s ease;
  box-shadow: 0 0 10px currentColor;
}

/* Form controls */
.cosmic-input {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--neon-magenta);
  color: #e0e0e0;
  transition: all 0.3s;
}

.cosmic-input:focus {
  background: rgba(0, 0, 0, 0.7);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
  color: #ffffff;
}

.cosmic-input option {
  background: var(--cosmic-dark);
  color: #e0e0e0;
}

.color-picker {
  width: 100%;
  height: 50px;
  cursor: pointer;
}

/* Buttons */
.btn-neon {
  background: transparent;
  border: 2px solid var(--neon-cyan);
  color: var(--neon-cyan);
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.3s;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.btn-neon:hover {
  background: var(--neon-cyan);
  color: var(--cosmic-dark);
  box-shadow: 0 0 20px var(--neon-cyan);
  transform: translateY(-2px);
}

.btn-cosmic {
  background: transparent;
  border: 2px solid var(--neon-magenta);
  color: var(--neon-magenta);
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.3s;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
}

.btn-cosmic:hover {
  background: var(--neon-magenta);
  color: white;
  box-shadow: 0 0 20px var(--neon-magenta);
  transform: translateY(-2px);
}

/* Ship cards */
.ship-card {
  transition: all 0.3s;
  height: 100%;
}

.ship-card:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 5px 30px rgba(255, 0, 255, 0.5),
    inset 0 0 20px rgba(255, 0, 255, 0.1);
}

.ship-votes {
  font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 768px) {
  .ship-pixel-art {
    font-size: 80px;
  }
  
  .ship-preview {
    min-height: 200px;
    padding: 20px;
  }
}