/*
  Full HD adaptation.
  Keep rules scoped to the pages they belong to: several pages share class
  names like .container, .content and #modsList.
*/

:root {
    --page-gap: clamp(10px, 0.85vw, 16px);
    --card-pad: clamp(8px, 0.65vw, 12px);
    --thumb-w: clamp(190px, 13vw, 245px);
    --thumb-h: clamp(135px, 9.7vw, 185px);
    --side-w: clamp(205px, 13vw, 260px);
}

@media (min-width: 1600px) and (max-width: 1920px) and (max-height: 1100px) {
    /* index.html */
    body:has(.marquee-infinite) {
        height: 100dvh;
        overflow: hidden;
    }

    body:has(.marquee-infinite) header {
        padding: 10px 14px;
    }

    body:has(.marquee-infinite) .name h4,
    body:has(.marquee-infinite) .name h5,
    body:has(.marquee-infinite) .name .h-1,
    body:has(.marquee-infinite) .name .h-2 {
        font-size: 1.55rem;
    }

    body:has(.marquee-infinite) header button {
        padding: 6px 12px;
        font-size: 0.82rem;
    }

    body:has(.marquee-infinite) .author-avatar {
        width: 36px;
        height: 36px;
    }

    body:has(.marquee-infinite) #author {
        font-size: 0.95rem;
    }

    body:has(.marquee-infinite) .marquee-infinite {
        margin: 8px auto;
        width: min(90%, 1720px);
    }

    body:has(.marquee-infinite) .group {
        gap: clamp(3rem, 5vw, 8em);
        padding-right: clamp(2rem, 4vw, 5em);
    }

    body:has(.marquee-infinite) .card {
        flex-basis: 4.6em;
        height: 4.9em;
    }

    body:has(.marquee-infinite) .main {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    body:has(.marquee-infinite) .mods-zone {
        padding: var(--page-gap);
        overflow-y: auto;
    }

    body:has(.marquee-infinite) .mods-header {
        grid-template-columns: minmax(180px, 1fr) auto minmax(220px, 1fr);
        gap: 10px;
    }

    body:has(.marquee-infinite) .mods-zone h2 {
        font-size: 1.25rem;
        margin-bottom: 6px;
    }

    body:has(.marquee-infinite) .modsCount,
    body:has(.marquee-infinite) .Comm {
        font-size: 0.9rem;
    }

    body:has(.marquee-infinite) #searchInput {
        width: 170px;
        padding: 5px 6px;
        font-size: 0.9rem;
    }

    body:has(.marquee-infinite) #modsList {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
        gap: var(--page-gap);
    }

    body:has(.marquee-infinite) .mod-card {
        padding: var(--card-pad);
        gap: 6px;
    }

    body:has(.marquee-infinite) .mod-title {
        font-size: clamp(1rem, 0.82vw, 1.15rem);
        line-height: 1.2;
    }

    body:has(.marquee-infinite) .mod-body {
        gap: 10px;
    }

    body:has(.marquee-infinite) .mod-thumb {
        width: var(--thumb-w);
        height: var(--thumb-h);
    }

    body:has(.marquee-infinite) .mod-description {
        font-size: clamp(0.82rem, 0.72vw, 0.98rem);
        line-height: 1.25;
        -webkit-line-clamp: 6;
    }

    body:has(.marquee-infinite) .mod-stats {
        gap: 6px;
        font-size: 0.82rem;
    }

    body:has(.marquee-infinite) .mod-stats span {
        padding: 4px 7px;
    }

    body:has(.marquee-infinite) .star {
        font-size: 1rem;
    }

    body:has(.marquee-infinite) .icon {
        width: 21px;
        height: 21px;
    }

    body:has(.marquee-infinite) .games-column {
        flex-basis: var(--side-w);
        padding: 8px;
        height: 100%;
        overflow-y: auto;
    }

    body:has(.marquee-infinite) .games-column h3 {
        font-size: 1rem;
    }

    body:has(.marquee-infinite) .game-item,
    body:has(.marquee-infinite) .category-item {
        padding: 7px 8px;
        font-size: 0.92rem;
    }

    /* personal_account.html */
    body:has(.sidebar) > .container {
        width: min(96vw, 1500px);
        height: calc(100dvh - 105px);
        max-height: none;
        margin: 18px auto;
        padding: 1rem;
    }

    body:has(.sidebar) > .container > .content {
        height: auto;
    }

    body:has(.sidebar) #modsList,
    body:has(.sidebar) #reportsList {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
    }

    /* information_page.html and cookie_policy.html */
    body:has(.nav-links) > .content {
        box-sizing: border-box;
        width: min(96vw, 1300px);
        min-width: 0;
        height: calc(100dvh - 120px);
        margin: 18px auto;
        padding: 1.2rem;
    }

    body:has(.nav-links) .nav-links {
        gap: 10px;
        padding: 10px;
        border-radius: 28px;
    }

    body:has(.nav-links) .nav-links a {
        padding: 7px 11px;
        font-size: 0.92rem;
    }

    body:has(.nav-links) .section-title {
        max-width: 100%;
        font-size: 1.45rem;
        box-sizing: border-box;
    }

    body:has(.nav-links) .about-text {
        font-size: 1.08rem;
    }

    body:has(.nav-links) .logo {
        width: 205px;
    }

    /* mod.html */
    body:has(#modName) > .container {
        width: min(96vw, 1050px);
        max-width: 1050px;
        height: auto;
        max-height: none;
        margin: 18px auto 30px;
        padding: 1.2rem;
        overflow: visible;
    }

    body:has(#modName) #mainScreenshot {
        width: min(560px, 100%);
        min-height: 240px;
    }

    body:has(#modName) #thumbs img {
        width: 105px;
        height: 74px;
    }

    /* upload_mods.html */
    body:has(#modForm) > .content {
        padding: 18px;
    }

    body:has(#modForm) > .content > .container {
        width: min(96vw, 560px);
        max-width: 560px;
        height: auto;
        max-height: none;
        min-height: 0;
        margin: 0;
        overflow: auto;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    body:has(.marquee-infinite) #modsList {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
    }
}