.btn {
  @apply px-4 py-2 rounded font-medium transition-colors cursor-pointer;
}

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white border border-blue-600 hover:border-blue-700;
}

.btn-success {
  @apply bg-green-600 hover:bg-green-700 text-white border border-green-600 hover:border-green-700;
}

.btn-danger {
  @apply bg-red-600 hover:bg-red-700 text-white border border-red-600 hover:border-red-700;
}

.btn-secondary {
  @apply bg-gray-600 hover:bg-gray-700 text-white border border-gray-600 hover:border-gray-700;
}

.btn-outline {
  @apply bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 hover:border-gray-400;
}

.btn-sm {
  @apply px-3 py-1 text-sm;
}

.btn-lg {
  @apply px-6 py-3 text-lg;
}

/* Form Components */
.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
}

.form-select {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors appearance-none bg-white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.form-select:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

/* Disabled button hover hints */
.btn-disabled-hint {
  position: relative;
}

.btn-disabled-hint:hover::after {
  content: attr(data-hint);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #374151;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  margin-bottom: 4px;
}

.btn-disabled-hint:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #374151;
  z-index: 1000;
  margin-bottom: -4px;
}

/* Player card hover effects during action mode */
.player-card-targetable {
  transition: all 0.2s ease-in-out;
}

.player-card-targetable:hover:not(.performer-highlighted) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
  border-color: #3b82f6;
}

.player-card-targetable:hover:not(.performer-highlighted) .bg-blue-100 {
  background-color: #dbeafe !important;
  color: #1e40af !important;
}

/* Mafia kill mode hover effects */
.player-card-mafia-targetable {
  transition: all 0.2s ease-in-out;
}

.player-card-mafia-targetable:hover:not(.performer-highlighted) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
}

.player-card-mafia-targetable:hover:not(.performer-highlighted) .bg-blue-100 {
  background-color: #fecaca !important;
  color: #dc2626 !important;
}

/* Performer highlighting */
.performer-highlighted {
  transition: all 0.2s ease-in-out;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.5);
}

.performer-highlighted .bg-blue-100 {
  background-color: #dcfce7 !important;
  color: #166534 !important;
}