@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply bg-gray-900 text-white;
    }
}

@layer components {
    .btn-primary {
        @apply px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium;
    }
    
    .btn-secondary {
        @apply px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors duration-200 font-medium;
    }
    
    .card {
        @apply bg-gray-800 rounded-xl shadow-xl p-6 border border-gray-700;
    }
    
    .input-field {
        @apply w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200;
    }
    
    .game-card {
        @apply bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 border border-gray-700 hover:border-primary-500 transition-all duration-300 cursor-pointer transform hover:scale-105;
    }
    
    .page-container {
        @apply container mx-auto px-4 py-8 max-w-7xl;
    }
}

/* RTL Support for Persian */
[dir="rtl"] {
    direction: rtl;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-900;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-700 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-600;
}