@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.basketball-title {
  font-family: 'Bebas Neue', cursive;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.stat-btn {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.stat-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

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

.pulse {
  animation: pulse 0.3s ease-in-out;
}

input:focus {
  outline: none;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

button:active {
  transform: translateY(1px);
}

/* Make colors work with Tailwind's JIT */
.bg-blue-500 { background-color: #3b82f6 !important; }
.bg-blue-600 { background-color: #2563eb !important; }
.bg-red-500 { background-color: #ef4444 !important; }
.bg-red-600 { background-color: #dc2626 !important; }
.bg-green-500 { background-color: #22c55e !important; }
.bg-green-600 { background-color: #16a34a !important; }
.bg-purple-500 { background-color: #a855f7 !important; }
.bg-purple-600 { background-color: #9333ea !important; }
.bg-yellow-500 { background-color: #eab308 !important; }
.bg-yellow-600 { background-color: #ca8a04 !important; }
.bg-orange-500 { background-color: #f97316 !important; }
.bg-orange-600 { background-color: #ea580c !important; }
.bg-indigo-500 { background-color: #6366f1 !important; }
.bg-indigo-600 { background-color: #4f46e5 !important; }

.hover\:bg-blue-600:hover { background-color: #2563eb !important; }
.hover\:bg-red-600:hover { background-color: #dc2626 !important; }
.hover\:bg-green-600:hover { background-color: #16a34a !important; }
.hover\:bg-purple-600:hover { background-color: #9333ea !important; }
.hover\:bg-yellow-600:hover { background-color: #ca8a04 !important; }
.hover\:bg-orange-600:hover { background-color: #ea580c !important; }
.hover\:bg-indigo-600:hover { background-color: #4f46e5 !important; }

/* Responsive typography */
@media (max-width: 640px) {
  .stat-btn {
    min-height: 70px;
    font-size: 0.7rem;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Prevent zoom on double-tap for mobile */
* {
  touch-action: manipulation;
}