/* =============================================
   PIXEL CONQUEST - STYLES
   Version: 0.2.0
   ============================================= */

/* Reset & Base */
* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

body { 
  font-family: 'Press Start 2P', monospace; 
  background: #0a0a0f; 
  color: #fff;
  min-height: 100vh;
}

/* =============================================
   ANIMATIONS
   ============================================= */

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

@keyframes shake { 
  0%, 100% { transform: translateX(0); } 
  25% { transform: translateX(-2px); } 
  75% { transform: translateX(2px); } 
}

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

@keyframes glitch {
  0%, 100% { text-shadow: 2px 0 #ff3b3b, -2px 0 #3bff5b; }
  25% { text-shadow: -2px 0 #ff3b3b, 2px 0 #3b8bff; }
  50% { text-shadow: 2px 0 #3b8bff, -2px 0 #ff3b3b; }
  75% { text-shadow: -2px 0 #3bff5b, 2px 0 #3b8bff; }
}

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

@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px currentColor; }
  50% { box-shadow: 0 0 40px currentColor; }
}

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

/* =============================================
   FACTION COLORS
   ============================================= */

.text-vampire { color: #ff3b3b; }
.text-werewolf { color: #3bff5b; }
.text-human { color: #3b8bff; }
.text-gold { color: #ffbb3b; }

.bg-vampire { background: #2a0a0a; }
.bg-werewolf { background: #0a2a0a; }
.bg-human { background: #0a1a2a; }

.glow-vampire { text-shadow: 0 0 10px #ff6b6b; }
.glow-werewolf { text-shadow: 0 0 10px #6bff8b; }
.glow-human { text-shadow: 0 0 10px #6ba8ff; }

/* =============================================
   SCROLLBAR STYLING
   ============================================= */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0a0a0f;
}

::-webkit-scrollbar-thumb {
  background: #2a2a4f;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3a3a6f;
}

/* =============================================
   BUTTON HOVER EFFECTS
   ============================================= */

button {
  transition: all 0.2s ease;
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

/* =============================================
   MOBILE RESPONSIVENESS
   ============================================= */

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}