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

html, body {
  overflow-x: hidden;
}

body {
  font-family: 'Nunito', sans-serif;
  background: #1a1a2e;
  color: #fef5e7;
}

/* Animations */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

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

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

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

/* Particles Background */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particles::before,
.particles::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ff6b9d;
  border-radius: 50%;
  animation: float 8s infinite;
  box-shadow: 
    100px 50px 0 #00d4ff,
    200px 150px 0 #ff6b9d,
    300px 80px 0 #ffd700,
    400px 200px 0 #00d4ff,
    50px 250px 0 #9b59b6,
    150px 300px 0 #ff6b9d,
    250px 100px 0 #00d4ff,
    350px 250px 0 #ffd700,
    450px 50px 0 #9b59b6;
}

.particles::after {
  animation-delay: 2s;
  left: 50%;
}

/* Buttons */
.menu-button {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
  border: 2px solid rgba(0, 212, 255, 0.5);
  border-radius: 0.75rem;
  padding: 1rem 2rem;
  color: #fef5e7;
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.menu-button:hover {
  border-color: #00d4ff;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
  transform: translateY(-2px);
}

.menu-button.primary {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3), rgba(0, 212, 255, 0.3));
  border-color: #ff6b9d;
}

.menu-button.primary:hover {
  border-color: #ff6b9d;
  box-shadow: 0 0 20px rgba(255, 107, 157, 0.5);
}

/* Choice buttons */
.choice-button:hover {
  background: linear-gradient(90deg, rgba(255, 107, 157, 0.4), rgba(0, 212, 255, 0.4)) !important;
  border-color: #ff6b9d !important;
  transform: translateX(5px);
  box-shadow: 0 0 15px rgba(255, 107, 157, 0.3);
}

/* Typing cursor */
.typing-cursor {
  animation: pulse 0.7s infinite;
  color: #ff6b9d;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff6b9d, #00d4ff);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff6b9d, #00d4ff);
}

/* Range inputs */
input[type="range"] {
  -webkit-appearance: none;
  background: rgba(0, 212, 255, 0.2);
  border-radius: 4px;
  height: 8px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #00d4ff, #ff6b9d);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .dialogue-box {
    min-height: 35vh !important;
  }
  
  .character-display {
    padding-bottom: 35% !important;
  }
}

/* Image loading placeholder */
img {
  background: linear-gradient(90deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

img[src] {
  animation: none;
  background: transparent;
}