.downloads-page {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   HEADER
   ========================================================= */

.downloads-header {
    min-height: 90px;

    padding:
        20px
        clamp(22px, 5vw, 80px);

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid var(--border);

    background:
        rgba(7, 7, 9, 0.9);
}


.downloads-brand {
    display: flex;
    align-items: end;
    gap: 3px;
}


.downloads-brand-main {
    font-size: 29px;
    font-weight: 950;

    letter-spacing: -0.055em;
}


.downloads-brand-dot {
    color: var(--red-bright);

    font-size: 20px;
    font-weight: 950;
}


.downloads-back {
    min-height: 38px;

    padding:
        0
        14px;

    display: flex;
    align-items: center;
    gap: 9px;

    border:
        1px solid var(--border);

    border-radius: 4px;

    color: #9999a1;

    font-size: 8px;
    font-weight: 900;
}


.downloads-back span {
    color: var(--red-bright);
}


/* =========================================================
   MAIN
   ========================================================= */

.downloads-main {
    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    padding:
        36px
        clamp(22px, 5vw, 80px)
        70px;

    flex: 1;
}


.breadcrumb {
    margin-bottom: 30px;

    display: flex;
    gap: 9px;

    color: #66666e;

    font-size: 8px;
    font-weight: 800;
}


.breadcrumb span:last-child {
    color: #9999a0;
}


/* =========================================================
   TITLE
   ========================================================= */

.downloads-title {
    margin-bottom: 25px;
}


.downloads-kicker {
    color: var(--red-bright);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.22em;
}


.downloads-title h1 {
    margin:
        4px
        0
        6px;

    font-size:
        clamp(32px, 4vw, 50px);

    font-weight: 950;

    letter-spacing: -0.045em;
}


.downloads-title p {
    margin: 0;

    color: #7d7d85;

    font-size: 11px;
}


/* =========================================================
   NOTE
   ========================================================= */

.downloads-note {
    margin-bottom: 26px;

    padding:
        17px
        19px;

    display: flex;
    align-items: flex-start;
    gap: 14px;

    border:
        1px solid rgba(227, 38, 46, 0.15);

    border-radius: 5px;

    background:
        linear-gradient(
            110deg,
            rgba(80, 15, 20, 0.18),
            rgba(15, 15, 18, 0.72)
        );
}


.downloads-note-icon {
    width: 27px;
    height: 27px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(227, 38, 46, 0.4);

    border-radius: 50%;

    color: var(--red-bright);

    font-size: 11px;
    font-weight: 900;
}


.downloads-note strong {
    color: #d6d6da;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.08em;
}


.downloads-note p {
    margin:
        3px
        0
        0;

    color: #777780;

    font-size: 9px;
}


/* =========================================================
   GAME DOWNLOAD SECTIONS
   ========================================================= */

.download-games {
    display: flex;
    flex-direction: column;

    gap: 20px;
}


.download-game {
    position: relative;

    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: 7px;

    background: #0d0d10;

    isolation: isolate;

    transition:
        border-color 180ms ease,
        transform 180ms ease;
}


.download-game:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(227, 38, 46, 0.38);
}


.download-game-art {
    position: absolute;
    inset: 0;

    z-index: -3;

    background-size: cover;
    background-position: center;

    filter:
        saturate(0.72)
        brightness(0.48);

    transition:
        filter 320ms ease,
        transform 520ms ease;
}


.download-game:hover .download-game-art {
    filter:
        saturate(1.15)
        brightness(0.84);

    transform:
        scale(1.035);
}


.download-game-overlay {
    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(7, 7, 9, 0.985) 0%,
            rgba(7, 7, 9, 0.94) 38%,
            rgba(7, 7, 9, 0.72) 70%,
            rgba(7, 7, 9, 0.45) 100%
        );
}


.download-game-content {
    padding:
        22px
        23px;
}


/* =========================================================
   GAME HEADER
   ========================================================= */

.download-game-header {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
}


.download-type {
    display: inline-block;

    margin-bottom: 7px;

    padding:
        4px
        7px;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: 3px;

    color: #85858d;

    font-size: 7px;
    font-weight: 900;
}


.download-game-header h2 {
    margin:
        0
        0
        5px;

    color: #f0f0f2;

    font-size: 23px;
    font-weight: 950;
}


.download-game-header p {
    margin: 0;

    color: #777780;

    font-size: 10px;
}


.game-details-link {
    flex-shrink: 0;

    color: #8b8b93;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.08em;

    transition:
        color 180ms ease;
}


.game-details-link:hover {
    color: var(--red-bright);
}


/* =========================================================
   DOWNLOAD LIST
   ========================================================= */

.download-list {
    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.055);

    border-radius: 5px;

    background:
        rgba(6, 6, 8, 0.58);
}


.download-item {
    min-height: 72px;

    padding:
        11px
        13px;

    display: grid;

    grid-template-columns:
        42px
        minmax(220px, 1fr)
        150px
        auto;

    align-items: center;
    gap: 16px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.045);
}


.download-item:last-child {
    border-bottom: 0;
}


.download-item:hover {
    background:
        linear-gradient(
            90deg,
            rgba(227, 38, 46, 0.045),
            transparent
        );
}


.download-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(227, 38, 46, 0.22);

    border-radius: 4px;

    background:
        rgba(227, 38, 46, 0.06);

    color: var(--red-bright);

    font-size: 13px;
    font-weight: 900;
}


.download-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.download-info strong {
    color: #dcdce0;

    font-size: 10px;
    font-weight: 850;
}


.download-info span {
    margin-top: 3px;

    color: #66666e;

    font-size: 8px;
}


.download-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}


.download-version,
.download-size {
    padding:
        5px
        7px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 3px;

    background:
        rgba(0, 0, 0, 0.3);

    color: #85858d;

    font-size: 7px;
    font-weight: 850;
}


.download-button {
    min-width: 145px;
    min-height: 35px;

    padding:
        0
        11px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 4px;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 0.05em;
}


.download-button.unavailable {
    border:
        1px solid rgba(255, 255, 255, 0.08);

    background:
        rgba(0, 0, 0, 0.28);

    color: #62626a;
}


/* =========================================================
   DISABLED GAMES
   ========================================================= */

.disabled-game .download-game-art {
    filter:
        grayscale(0.7)
        brightness(0.38);
}


.game-state {
    padding:
        6px
        9px;

    border-radius: 4px;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 0.08em;
}


.game-state.preparing {
    color: var(--orange);

    border:
        1px solid rgba(230, 162, 60, 0.18);

    background:
        rgba(230, 162, 60, 0.06);
}


.game-state.planned {
    color: #85858d;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.025);
}


.coming-download {
    min-height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px dashed rgba(255, 255, 255, 0.065);

    border-radius: 5px;

    background:
        rgba(0, 0, 0, 0.22);

    color: #5f5f67;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.11em;
}


/* =========================================================
   FOOTER
   ========================================================= */

.downloads-footer {
    min-height: 80px;

    padding:
        20px
        clamp(22px, 5vw, 80px);

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    border-top:
        1px solid var(--border);

    color: #6e6e76;

    font-size: 9px;
}


.downloads-footer strong {
    color: #a0a0a7;
}


.downloads-footer a {
    justify-self: end;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 850px) {

    .download-item {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto;

        gap: 12px;
    }


    .download-meta {
        display: none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .downloads-header {
        padding:
            15px
            16px;
    }


    .downloads-brand-main {
        font-size: 23px;
    }


    .downloads-brand-dot {
        font-size: 16px;
    }


    .downloads-main {
        padding:
            25px
            13px
            45px;
    }


    .downloads-note {
        padding:
            15px;
    }


    .download-game-content {
        padding:
            18px
            15px;
    }


    .download-game-header {
        flex-direction: column;

        gap: 12px;
    }


    .download-game-header h2 {
        font-size: 19px;
    }


    .download-item {
        min-height: 95px;

        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap:
            10px
            12px;
    }


    .download-button {
        grid-column:
            1 / -1;

        width: 100%;
    }


    .download-meta {
        display: none;
    }


    .downloads-footer {
        grid-template-columns: 1fr;

        gap: 9px;

        text-align: center;
    }


    .downloads-footer a {
        justify-self: center;
    }

}