/* Loaded after page styles. Keep the approved desktop composition above 900px. */
@media (max-width: 900px) {
    /* The final desktop hero rule otherwise overwrites its earlier mobile width. */
    .home-page .hero__content {
        width: 100%;
        max-width: none;
        padding: 30px 22px;
    }

    .home-page .hero {
        min-height: 0;
        height: auto;
    }

    .home-page .hero h1,
    .home-page .hero h1 > span,
    .home-page .hero h1 > strong {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .home-page .lower-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-page .lower-grid > .content-panel {
        min-width: 0;
        min-height: 0;
        grid-column: auto;
    }

    .home-header[data-global-site-shell] .home-header__inner {
        width: calc(100% - 24px);
        min-height: 0;
        padding: 12px 0;
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 10px 12px;
    }

    .home-header[data-global-site-shell] .brand {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        height: 44px;
    }

    .home-header[data-global-site-shell] .brand__logo {
        width: min(190px, 100%);
        max-height: 44px;
    }

    .home-header[data-global-site-shell] .mobile-menu-button {
        grid-column: 2;
        grid-row: 1;
        width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .home-header[data-global-site-shell] .header-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
        width: 100%;
    }

    /* Undo the old mobile rule hiding every guest action with !important. */
    .home-header[data-global-site-shell] .header-actions > .login-button {
        display: inline-flex !important;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 14px;
        line-height: 1.3;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .home-header .header-actions > .account-menu[data-header-wallet-center="v2"] {
        width: 100%;
        min-width: 0;
    }

    .home-header .account-menu[data-header-wallet-center="v2"] .account-menu__summary {
        width: 100%;
        min-width: 0;
        min-height: 62px;
        padding: 8px 10px;
        grid-template-columns: 34px minmax(0, 1fr) 12px;
        gap: 10px;
    }

    .home-header .account-menu[data-header-wallet-center="v2"] .account-menu__copy > strong {
        font-size: 14px;
        line-height: 1.3;
    }

    .home-header .account-menu__balances { flex-wrap: wrap; gap: 5px 10px; }
    .home-header .account-balance-mini b { font-size: 12px; line-height: 1.3; }
    .home-header .account-balance-mini i {
        display: inline-grid;
        width: 15px;
        height: 15px;
        font-size: 10px;
    }

    /* Anchor to the real, variable-height header instead of a fixed 66px top. */
    .home-header .account-menu[data-header-wallet-center="v2"] .account-menu__dropdown[data-account-menu-links="folded-v1"] {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 166px);
        max-height: calc(100dvh - 166px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .home-header .account-menu__dropdown[data-account-menu-links="folded-v1"] .account-menu__profile-copy strong {
        font-size: 16px;
        line-height: 1.4;
    }
    .home-header .account-menu__dropdown[data-account-menu-links="folded-v1"] .account-menu__profile-copy small { font-size: 12px; }
    .home-header .account-menu__dropdown[data-account-menu-links="folded-v1"] .account-menu__links > a,
    .home-header .account-menu__dropdown[data-account-menu-links="folded-v1"] .account-menu__logout,
    .home-header .account-menu__dropdown[data-account-menu-links="folded-v1"] .account-wallet-fold__trigger {
        min-height: 44px;
        font-size: 14px;
        line-height: 1.4;
    }
    .home-header .account-menu__dropdown[data-account-menu-links="folded-v1"] .account-wallet-fold__link {
        min-height: 44px;
        font-size: 13px;
    }
    .home-header .account-menu__dropdown[data-account-menu-links="folded-v1"] .account-wallet-row {
        min-height: 42px;
        gap: 8px;
    }
    .home-header .account-menu__dropdown[data-account-menu-links="folded-v1"] .account-wallet-row > span,
    .home-header .account-menu__dropdown[data-account-menu-links="folded-v1"] .account-wallet-row > b { font-size: 13px; }

    .home-header .mobile-nav { width: calc(100% - 24px); }
    .home-header .mobile-nav a,
    .home-header .mobile-nav > span,
    .home-header .mobile-nav__group > summary {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 14px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }
    .home-header .mobile-nav__group > summary > span {
        min-width: 0;
        min-height: 0;
        padding: 0;
        font-size: inherit;
        line-height: inherit;
    }
    .home-header .mobile-nav__group > summary b { font-size: 14px; }
    .home-header .mobile-nav .mobile-nav__open-parent { font-size: 13px !important; }
    .home-header .mobile-nav .guest-auth-actions > .login-button {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 14px;
    }

    .home-footer__inner,
    .home-footer__bottom,
    .profile-footer__inner,
    .account-footer__inner {
        width: calc(100% - 24px);
        min-width: 0;
        gap: 16px;
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 12px;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }
    .profile-footer__inner,
    .account-footer__inner,
    .home-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    .home-footer .footer-brand { flex-wrap: wrap; }
    .home-footer .footer-brand small { font-size: 12px; letter-spacing: .3px; line-height: 1.6; }
    .home-footer .footer-nav { gap: 12px 20px; }
    .home-footer .footer-nav a,
    .home-footer .footer-nav__node > span {
        display: flex;
        align-items: center;
        min-height: 44px;
        font-size: 14px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }
    .home-footer .footer-nav__submenu a,
    .home-footer .footer-nav__submenu span { font-size: 12px; }
    .home-footer .footer-status { flex-wrap: wrap; gap: 16px; }
    .home-footer .footer-status strong { font-size: 14px; }
    .home-footer .footer-status small { font-size: 12px; line-height: 1.5; }
}

/* Landscape phones and small tablets need the same readable text scale. */
@media (max-width: 900px) {
    .home-page .hero,
    .home-page .home-main { width: calc(100% - 24px); }
    .home-page .hero__content { padding: 28px 18px; }
    .home-page .hero__eyebrow { font-size: 12px; line-height: 1.6; letter-spacing: 2px; }
    .home-page .hero h1 {
        margin-top: 14px;
        font-size: clamp(28px, 8vw, 42px);
        line-height: 1.12;
        letter-spacing: -.6px;
    }
    .home-page .hero h1 > strong { font-size: 1em; }
    .home-page .hero__content > p { max-width: none; font-size: 16px; line-height: 1.65; }
    .home-page .hero__shade {
        background: linear-gradient(90deg, rgba(5, 8, 16, .97), rgba(5, 8, 16, .83)), linear-gradient(0deg, #050810, transparent 70%);
    }
    .home-page .hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .home-page .button {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        height: auto;
        padding: 12px 14px;
        font-size: 14px;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .home-page .hero-benefits { width: 100%; max-width: none; gap: 8px 14px; }
    .home-page a.hero-benefit { min-height: 58px; gap: 8px; }
    .home-page a.hero-benefit > span:not(.hero-benefit__icon) { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }

    .home-page .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .home-page .feature-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 14px;
        min-height: 170px;
        padding: 18px;
    }
    .home-page .feature-card__icon {
        position: relative;
        top: auto;
        left: auto;
        width: 44px;
        height: 44px;
        align-self: start;
    }
    .home-page .feature-card__content { width: 100%; max-width: none; min-width: 0; padding: 0; }
    .home-page .feature-card h2 { font-size: 20px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
    .home-page .feature-card p { max-width: none; color: #b7c0d4; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
    .home-page .feature-card__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 14px; line-height: 1.5; }
    .home-page .feature-card__art { width: 38%; opacity: .28; }
    .home-page .feature-card::before { background: linear-gradient(90deg, rgba(7, 10, 20, .98), rgba(7, 10, 20, .75)); }

    .home-page .lower-grid { margin-top: 14px; gap: 14px; }
    .home-page .panel-heading { min-height: 60px; height: auto; padding: 12px; flex-wrap: wrap; gap: 8px; }
    .home-page .panel-heading > div { min-width: 0; flex: 1 1 190px; }
    .home-page .panel-heading__accent { flex: 0 0 4px; }
    .home-page .panel-heading h2 { font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
    .home-page .panel-heading small { font-size: 12px; }
    .home-page .panel-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }

    .home-page .server-scene { height: auto; aspect-ratio: 3 / 1; min-height: 112px; }
    .home-page .server-state { font-size: 12px; line-height: 1.4; }
    .home-page .server-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-page .server-stats > div { padding: 12px; border: 0; }
    .home-page .server-stats > div:first-child { border-bottom: 1px solid rgba(79, 71, 123, .22); }
    .home-page .server-stats > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .home-page .server-stats > div:nth-child(3) { grid-column: 2; grid-row: 1; border-left: 1px solid rgba(79, 71, 123, .22); border-bottom: 1px solid rgba(79, 71, 123, .22); }
    .home-page .server-panel .server-stats strong { color: #eef1fb; font-size: 16px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
    .home-page .server-stats span { color: #a8b3cc; font-size: 12px; line-height: 1.5; }
    .home-page .server-address strong { font-size: 14px; line-height: 1.5; }
    .home-page .server-address__value { min-height: 36px; font-size: 16px; }
    .home-page .server-address small { font-size: 12px; line-height: 1.5; }
    .home-page .server-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .home-page .server-actions .server-join,
    .home-page .server-copy { width: 100%; min-height: 46px; margin: 0; font-size: 14px; line-height: 1.5; }
    .home-page .server-feedback { min-height: 18px; margin: 8px 12px 14px; font-size: 12px; line-height: 1.5; }

    .home-page .news-list { padding: 12px; gap: 12px; }
    .home-page .news-item { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
    .home-page .news-item > div { min-width: 0; }
    .home-page .news-item img,
    .home-page .news-item__placeholder { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
    .home-page .news-item__placeholder { display: grid; place-items: center; font-size: 32px; color: #c19af4; background: #17112b; }
    .home-page .news-item__badge { padding: 4px 7px; font-size: 12px; line-height: 1.4; }
    .home-page .news-item h3 { margin-top: 8px; font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
    .home-page .news-item p { margin-top: 7px; color: #aeb8ce; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
    .home-page .news-empty { padding: 20px 12px; font-size: 14px; line-height: 1.6; }
    .home-page .news-empty strong,
    .home-page .news-empty span { display: block; }

    .home-page .rules-panel__content { padding: 18px; }
    .home-page .rules-title > div { min-width: 0; }
    .home-page .rules-title h2 { font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
    .home-page .rules-title p { font-size: 14px; line-height: 1.6; }
    .home-page .rules-list,
    .home-page .rules-button { width: 100%; }
    .home-page .rules-list > span { min-height: 46px; padding: 10px; color: #b8c1d5; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
    .home-page .rules-list b { flex: 0 0 26px; width: 26px; height: 26px; font-size: 12px; }
    .home-page .rules-panel__art { width: 50%; opacity: .25; }
    .home-page .rules-panel__shade { background: linear-gradient(90deg, rgba(7, 10, 19, .97), rgba(7, 10, 19, .82)); }
}