:root {
  --plyr-color-main: #84CC16;
}

/* Fix Safari select styling */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 1.85rem !important;
}

select option {
    background-color: #1F2937;
    color: white;
}

/* Line clamp utility for text truncation */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Game card hover effects */
.game-card {
    transition: all 0.3s ease;
    transform: translateY(0);
}

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

/* Discount badge */
.discount-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: #84CC16;
    color: #1F2937;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.90rem;
    z-index: 10;
}

/* Search input focus styles */
.search-input:focus {
    box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.1);
}

/* Navigation active state */
.nav-link-active {
    color: #84CC16;
    font-weight: 600;
}

/* Loading spinner */
.spinner {
    border: 2px solid #374151;
    border-top: 2px solid #84CC16;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

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

/* Responsive design improvements */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
    }

    .search-container {
        padding: 0 1rem;
    }

    .game-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1F2937;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #4B5563;
}

/* Button animations */
.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(132, 204, 22, 0.3);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Card image aspect ratio fallback */
.aspect-w-1 {
  position: relative;
  width: 100%;
}

.aspect-h-1 {
  padding-bottom: 100%; /* 1:1 aspect ratio */
}

.aspect-w-1 > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section spacing consistency */
.section-spacing {
    padding: 2.5rem 1.5rem; /* 40px 24px */
}

/* Card grid spacing */
.card-grid {
    gap: 1rem; /* 16px gutter */
}

/* Enhanced focus styles for accessibility */
button:focus,
input:focus,
a:focus {
    outline: 2px solid #84CC16;
    outline-offset: 2px;
}

/* Smooth transitions for all interactive elements */
* {
    transition-property: color, background-color, border-color, opacity, transform;
    transition-timing-function: ease-in-out;
    transition-duration: 200ms;
}