/* WNBA Tonight - Main Styles */

/* Custom utility classes */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.gradient-bg {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Game score animations */
.score-animation {
    animation: scoreUpdate 0.5s ease-in-out;
}

@keyframes scoreUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Loading spinner */
.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #f59e0b;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Team color utilities */
.team-primary {
    background-color: var(--team-primary, #f59e0b);
}

.team-secondary {
    background-color: var(--team-secondary, #ffffff);
}

/* Responsive text sizing */
@media (max-width: 640px) {
    .responsive-text {
        font-size: 0.875rem;
    }
}

/* Status indicators */
.status-scheduled {
    @apply bg-blue-100 text-blue-800;
}

.status-in-progress {
    @apply bg-green-100 text-green-800;
}

.status-completed {
    @apply bg-gray-100 text-gray-800;
}

.status-postponed {
    @apply bg-yellow-100 text-yellow-800;
}

.status-cancelled {
    @apply bg-red-100 text-red-800;
}

/* Game time formatting */
.game-time {
    font-variant-numeric: tabular-nums;
}

/* Broadcast badge styling */
.broadcast-badge {
    @apply inline-block px-2 py-1 text-xs font-medium rounded-full;
}

.broadcast-tv {
    @apply bg-purple-100 text-purple-800;
}

.broadcast-streaming {
    @apply bg-blue-100 text-blue-800;
}

.broadcast-radio {
    @apply bg-green-100 text-green-800;
}

/* Mobile-first responsive design */
.mobile-card {
    @apply block w-full p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow;
}

@media (min-width: 768px) {
    .mobile-card {
        @apply p-6;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        -webkit-print-color-adjust: exact;
    }
}