/* MOBILE GRID FIX - FORCE 3 COLUMNS */
@media (max-width: 768px) {
    .games-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* Mobile: 3 games per row */
        gap: 15px !important;
        padding: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .game-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* SMALL MOBILE: Still 3 games per row but tighter spacing */
@media (max-width: 480px) {
    .games-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
}

/* MOBILE SLOTS CATEGORY FIXES */
@media (max-width: 768px) {
    /* Fix category container width */
    .categories-container,
    .category-filters,
    .filter-buttons {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Fix category buttons layout */
    .category-btn,
    .filter-btn {
        flex: 0 0 auto !important; display: inline-flex !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 12px !important;
        padding: 8px 6px !important;
    }
    
    /* Fix "View More" button */
    .view-more-btn {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 10px !important;
    }
    
    /* Fix games grid in categories */
    .games-grid {
        width: 100% !important;
        padding: 0 5px !important;
        margin: 0 !important;
    }
    
    /* Ensure category header doesn't overflow */
    .category-header,
    .lobby-title {
        font-size: 1.2rem !important;
        padding: 0 10px !important;
        word-wrap: break-word !important;
    }
    
    /* Fix any absolute positioned elements */
    .category-filters {
        position: relative !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Horizontal scroll for categories if needed */
    .filter-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .filter-buttons::-webkit-scrollbar {
        display: none !important;
    }
}

/* EXTRA SMALL MOBILE FIXES */
@media (max-width: 480px) {
    .category-btn,
    .filter-btn {
        font-size: 11px !important;
        padding: 6px 4px !important;
        min-height: 36px !important;
    }
    
    .games-grid {
        padding: 0 3px !important;
    }
    
    .game-card {
        min-width: 0 !important;
    }
}