/* Custom styles for Majority Rules game */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Animation for button press feedback */
.active\\:scale-95:active {
  transform: scale(0.95);
}

/* Custom loading animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom confetti animation */
@keyframes confetti {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

.confetti {
  animation: confetti 3s ease-out forwards;
}

/* Smooth transitions for all interactive elements */
button, input, .transition-all {
  transition: all 0.2s ease-in-out;
}

/* Focus styles for accessibility */
button:focus, input:focus {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

/* Mobile-optimized tap targets */
@media (max-width: 768px) {
  button {
    min-height: 48px;
    touch-action: manipulation;
  }
  
  /* Prevent zoom on input focus on iOS */
  input {
    font-size: 16px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bg-blue-100 {
    background-color: #E5F3FF;
    border: 2px solid #1E40AF;
  }
  
  .bg-green-100 {
    background-color: #ECFDF5;
    border: 2px solid #166534;
  }
  
  .text-gray-600 {
    color: #000000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-pulse, .animate-spin {
    animation: none;
  }
  
  .transition-all, .transition-colors {
    transition: none;
  }
}