/* Base */
html.html_main {
    overflow: hidden !important;
}

.body_main {
    margin: 0;
    overflow: hidden !important;
}

/* ====== BEFORE & AFTER LAUNCH (shared layout) ====== */
.before_launch,
.after_launch {
    background-color: #1C2D39;

    /* Viewport height: fallback + modern Android/iOS fix */
    min-height: 100vh;          /* fallback */
    min-height: 100dvh;         /* fixes Android URL bar issues */

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 0 60px;
}

.before_launch .main_outer,
.after_launch .main_outer {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    flex: 1;
    min-height: 0;              /* allow shrinking so footer can stay visible */
    display: flex;
    flex-direction: column;
    justify-content: center;    /* center main content vertically */
}

.before_launch .main_outer .main_inner,
.after_launch .main_outer .main_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    text-align: center;
}

.before_launch .main_outer .main_inner .logo,
.after_launch .main_outer .main_inner .logo {
    width: 100%;
    height: 400px;
    object-fit: contain;
}

/* Text sizes */
.before_launch .main_outer .main_inner .text,
.after_launch  .main_outer .main_inner .text {
    font-size: 38px;            /* desktop */
    font-family: 'jost', sans-serif;
    font-weight: 700;
    color: #e7cd93;
}

/* Optional extra image used in after launch */
.after_launch .main_outer .main_inner .small_img {
    width: 440px;
    object-fit: cover;
}

/* New: "Coming in September" link under the game logo */
.after_launch .main_outer .main_inner .coming_soon {
    font-size: 18px;
    font-family: 'jost', sans-serif;
    font-weight: 400;
    color: #d8c7a3;
    text-decoration: none;
    margin-top: -10px; /* pulls it closer to the game logo */
}

.after_launch .main_outer .main_inner .coming_soon:hover {
    color: #e7cd93;
}

/* Footer pinned to bottom + safe area inset */
.before_launch .footer_sec,
.after_launch  .footer_sec {
    margin-top: auto;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

.before_launch .footer_sec a,
.after_launch  .footer_sec a {
    color: #e7b973;
    font-size: 18px;
    text-decoration: underline;
    letter-spacing: 1px;
    text-transform: none;
}

/* ====== Responsive ====== */
@media (max-width: 1024px) {
    .before_launch,
    .after_launch {
        gap: 20px;
        padding: 0 34px;
    }

    .before_launch .main_outer .main_inner .logo,
    .after_launch  .main_outer .main_inner .logo {
        height: 300px;
    }

    .after_launch .main_outer .main_inner .small_img {
        width: 350px;
    }

    .before_launch .main_outer .main_inner .text,
    .after_launch  .main_outer .main_inner .text {
        font-size: 40px; /* tablet */
    }

    .after_launch .main_outer .main_inner .coming_soon {
        font-size: 16px;
        margin-top: -8px;
    }
}

@media (max-width: 767px) {
    /* IMPORTANT: allow scrolling on Android/iOS */
    html.html_main,
    .body_main {
        overflow: auto !important;   /* override the global hidden */
        height: 100%;
    }

    .before_launch,
    .after_launch {
        padding: 0 25px;
        overflow-y: auto;            /* enable inner scroll if needed */
        /* keep the dvh fix from above */
    }

    .before_launch .main_outer .main_inner,
    .after_launch  .main_outer .main_inner {
        gap: 30px !important;
    }

    .before_launch .main_outer .main_inner .logo,
    .after_launch  .main_outer .main_inner .logo {
        height: 250px;
        object-fit: contain;
    }

    .after_launch .main_outer .main_inner .small_img {
        width: 300px;
    }

    .before_launch .main_outer .main_inner .text,
    .after_launch  .main_outer .main_inner .text {
        font-size: 28px; /* mobile */
    }

    .after_launch .main_outer .main_inner .coming_soon {
        font-size: 15px;
        margin-top: -6px;
    }

    .before_launch .footer_sec a,
    .after_launch  .footer_sec a {
        font-size: 14px;
    }
}

/* Optional: extra help for very short screens */
@media (max-height: 600px) {
    .before_launch .main_outer .main_inner .logo,
    .after_launch  .main_outer .main_inner .logo {
        height: 200px;
    }
    .before_launch .main_outer .main_inner .text,
    .after_launch  .main_outer .main_inner .text {
        font-size: 24px;
    }
}