/**
 * adaptive/desktop.css — laptop+ / monitors.
 * Linked as (min-width: 1024px) in index.html (--bp-xl+).
 */

@media (max-width: 1280px) and (min-width: 1024px) {
    /* Не wrap header: fixed chrome + wrap = двойная высота → CLS ~1.0+. */
    .app-header {
        flex-wrap: nowrap;
        row-gap: 0;
    }

    .app-header-start {
        flex: 0 0 auto;
        min-width: 0;
    }

    .nav-links {
        order: 0;
        flex: 1 1 auto;
        display: flex;
        flex-wrap: nowrap;
        gap: 4px 8px;
        align-items: center;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-links a {
        margin: 0;
        white-space: nowrap;
        font-size: 0.88rem;
        padding: 4px 2px;
    }

    .user-area {
        margin-left: auto;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
}

@media (min-width: 1920px) {
    .main-content {
        max-width: 1680px;
    }

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

@media (min-width: 2560px) {
    .main-content {
        max-width: 1880px;
    }

    .discord-layout.discord-layout-wide {
        grid-template-columns: 72px 280px 1fr 280px;
    }
}

@media (min-width: 2560px) and (min-aspect-ratio: 21/9) {
    .main-content {
        max-width: 2100px;
    }

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