@media (max-width: 1600px) {
    .sss_top {
        height: 1200px;
        gap: 22px;
    }

    .sss_logo {
        width: 520px;
        margin-bottom: 50px;
    }

    .dev_inner {
        margin: 0 100px;
        padding: 50px 50px 70px;
    }

    .screenshots_section,
    .tiers_section,
    .download_section {
        padding: 110px 100px;
    }

    .screenshots_gallery {
        padding: 40px 45px;
    }

    .sss-thumb {
        height: 300px;
    }

    .tier_capsule {
        width: 360px;
    }

    .download_cover {
        width: 360px;
    }
}

@media (max-width: 1200px) {
    header {
        padding: 10px 12px 60px 0;
    }

    .nav_bar ul {
        gap: 22px;
    }

    .sss_top {
        height: 1100px;
    }

    .sss_logo {
        width: 460px;
        margin-bottom: 45px;
    }

    .sss_btn {
        font-size: 24px;
        width: 230px;
        padding: 16px 0;
    }

    .dev_inner {
        margin: 0 60px;
        padding: 46px 42px 64px;
    }

    .game_title {
        font-size: 44px;
    }

    .dev_title {
        font-size: 30px;
    }

    .progress_label {
        width: 140px;
        font-size: 18px;
    }

    .progress_bar {
        width: 60%;
    }

    .screenshots_section,
    .tiers_section,
    .download_section {
        padding: 100px 70px;
    }

    .screenshots_gallery {
        padding: 36px 38px;
    }

    .sss-thumb {
        height: 270px;
    }

    .tiers_row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 32px;
    }

    .tier_capsule {
        width: 320px;
    }

    .download_intro {
        gap: 24px;
        padding: 28px 32px;
    }

    .download_cover {
        width: 320px;
    }

    .download_platforms {
        flex-wrap: wrap;
        gap: 32px;
    }

    .download_platform {
        width: calc(50% - 16px);
    }
}

@media (max-width: 990px) {
    body {
        background: none;
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100svh;
        background-image: url("/sss/images/sand_back.webp");
        background-size: cover;
        background-position: 75%;
        background-repeat: no-repeat;
        z-index: -1;
        pointer-events: none;
    }

    .sss_top {
        height: 980px;
        gap: 20px;
        padding-top: 120px;
    }

    .sss_logo {
        width: 380px;
        margin-bottom: 35px;
    }

    .sss_btn {
        font-size: 22px;
        width: 210px;
    }

    .dev_inner {
        margin: 0 32px;
        padding: 42px 32px 58px;
    }

    .game_title {
        font-size: 38px;
    }

    .game_desc p {
        font-size: 16px;
    }

    .progress_block {
        flex-direction: column;
        gap: 12px;
    }

    .progress_label {
        width: auto;
        text-align: center;
    }

    .progress_bar {
        width: 75%;
    }

    .screenshots_section,
    .tiers_section,
    .download_section {
        padding: 90px 40px;
    }

    .screenshots_title,
    .tiers_title,
    .download_title {
        font-size: 34px;
    }

    .screenshots_gallery {
        flex-direction: column;
        padding: 32px 30px;
        gap: 16px;
        position: relative;
    }

    .sss-track {
        width: 100%;
    }

    .sss-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 28px;
        padding: 6px 12px;
    }

    .sss-arrow:hover,
    .sss-arrow:active,
    .sss-arrow:focus-visible {
        transform: translateY(-50%) scale(1.03);
    }

    .sss-arrow.disabled {
        transform: translateY(-50%);
    }

    .sss-arrow.left {
        left: 8px;
    }

    .sss-arrow.right {
        right: 8px;
    }

    .sss-thumb {
        height: 240px;
    }

    #sssModalClose {
        top: 24px;
        right: 24px;
        font-size: 36px;
    }

    .sss-modal-arrow {
        font-size: 42px;
        padding: 6px 12px;
    }

    #sssModalPrev { left: 20px; }
    #sssModalNext { right: 20px; }

    .download_intro {
        flex-direction: column;
        align-items: flex-start;
    }

    .download_cover {
        width: 100%;
        max-width: 360px;
    }

    .download_platform {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .sss_top {
        height: auto;
        padding: 160px 24px 80px;
        gap: 18px;
    }

    .sss_logo {
        width: 320px;
        margin-bottom: 30px;
    }

    .sss_btn {
        font-size: 20px;
        width: 200px;
        padding: 14px 0;
    }

    .dev_inner {
        margin: 0 24px;
        padding: 38px 24px 50px;
    }

    .game_title {
        font-size: 34px;
    }

    .dev_title {
        font-size: 28px;
        margin: 45px 0 30px 0;
    }

    .progress_bar {
        width: 100%;
    }

    .screenshots_section,
    .tiers_section,
    .download_section {
        padding: 80px 24px;
    }

    .screenshots_title,
    .tiers_title,
    .download_title {
        font-size: 30px;
    }

    .screenshots_gallery {
        padding: 28px 24px;
    }

    .sss-thumb {
        height: 220px;
    }

    .tier_capsule {
        width: 100%;
        max-width: 420px;
    }

    .tier_glass {
        padding: 40px 20px;
    }

    .download_intro {
        padding: 24px;
    }

    .download_platforms {
        gap: 24px;
    }
}

@media (max-width: 520px) {
    .sss_top {
        padding: 150px 20px 70px;
    }

    .sss_logo {
        width: 240px;
        margin-bottom: 24px;
    }

    .sss_btn {
        font-size: 18px;
        width: 190px;
        padding: 12px 0;
    }

    .game_title {
        font-size: 30px;
    }

    .game_desc p {
        font-size: 14px;
    }

    .dev_title {
        font-size: 24px;
    }

    .progress_label {
        font-size: 16px;
    }

    .progress_bar {
        height: 22px;
    }

    .progress_value {
        font-size: 12px;
    }

    .screenshots_title,
    .tiers_title,
    .download_title {
        font-size: 26px;
    }

    .screenshots_gallery {
        padding: 10px;
    }

    .sss-thumb {
        height: 190px;
    }

    .sss-arrow {
        font-size: 24px;
        padding: 6px 10px;
    }

    .tier_name {
        font-size: 24px;
    }

    .tier_price {
        font-size: 18px;
    }

    .tier_desc {
        font-size: 14px;
    }

    .tier_btn {
        font-size: 16px;
        padding: 10px 28px;
    }

    .download_platform_name {
        font-size: 20px;
    }

    .download_link {
        font-size: 16px;
    }

    footer p {
        font-size: 12px;
        line-height: 1.7;
    }
}

@media (max-width: 420px) {
    .sss_top {
        gap: 14px;
        padding: 140px 16px 60px;
    }

    .download_intro {
        gap: 18px;
    }

    .download_platform {
        padding: 18px;
    }
}