/* Responsive Breakpoints */

/* Small devices (≤320px) */
@media (max-width: 320px) {
    .game-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

/* Extra small devices (≤386px) */
@media (max-width: 386px) {
    .game-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
    }
    
    .cards {
        grid-auto-columns: minmax(240px, 1fr);
    }
}

/* Small phones (≤499px) */
@media (max-width: 499px) {
    .game-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
    
    .section-title h2 {
        font-size: 0.9rem;
    }
}

/* Medium phones (≤530px) */
@media (max-width: 530px) {
    .cards {
        grid-auto-columns: 100%;
    }
}

/* Small tablets (≤576px) */
@media (max-width: 576px) {
    .article-content {
        font-size: 1rem !important;
    }
    
    .display-6 {
        font-size: 1.5rem;
    }
    
    .ambassador-img {
        width: 80px;
        height: 80px;
    }
}

/* Tablets (≤769px) */
@media (max-width: 769px) {
    .game-grid {
        grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    }
    
    .ambassador-img {
        width: 100px;
        height: 100px;
    }
    
    /* Footer accordion on mobile */
    .collapse:not(.show) {
        display: none;
    }
    
    .site-footer .h5 {
        font-size: 0.95rem;
    }
}

/* Desktop navigation breakpoint */
@media (max-width: 991px) {
    .game-grid {
        grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    }
    
    .game-card .card-body {
        padding: 0.35rem 0.5rem;
    }
    
    .game-card .card-body small {
        font-size: 0.7rem;
    }
}

/* Large cards layout */
@media (max-width: 1099px) {
    .cards {
        grid-auto-columns: minmax(280px, 1fr);
    }
}

@media (min-width: 1100px) {
    .cards {
        grid-auto-columns: minmax(300px, 1fr);
    }
}

/* Desktop (≥768px) - Footer headings without collapse */
@media (min-width: 768px) {
    .site-footer .collapse {
        display: block !important;
    }
}

/* Print styles */
@media print {
    .navbar,
    .site-footer,
    #backToTop,
    .random-spin,
    .sidebar,
    .btn-toggle-content {
        display: none !important;
    }
    
    .article-content {
        font-size: 12pt;
    }
}