/* 手机布局保留既有控件与操作，只调整空间和点击区域。 */
#ra2web-root .loading-screen .load-percent { display: none; }

#ra2web-root .mobile-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgb(0 0 0 / 55%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    box-sizing: border-box;
}

#ra2web-root .select.mobile-select-popup {
    width: min(100%, 520px);
    height: auto;
    margin: 0;
}

#ra2web-root .mobile-select-popup .select-layer {
    display: block;
    position: static;
    width: 100%;
    max-height: 60vh;
    max-height: 60dvh;
    overflow-y: auto;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

#ra2web-root .mobile-select-popup .select-layer .option {
    height: auto;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
}

#ra2web-root .mobile-select-popup .select-layer .option > div {
    width: 100%;
    min-height: 24px;
    line-height: 24px;
    white-space: normal;
    overflow-wrap: anywhere;
}

#ra2web-root .mobile-select-popup [role="option"]:focus-visible,
#ra2web-root[data-mobile-menu="true"] .select-value:focus-visible {
    outline: 2px solid yellow;
    outline-offset: -2px;
}

@media (max-width: 799px), (max-width: 1023px) and (max-height: 599px) {
    #ra2web-root:is([data-ui-layout="import"], [data-ui-layout="menu"], [data-ui-layout="game-menu"], [data-ui-layout="loading"]) .dialog-overlay {
        position: fixed !important;
        inset: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    #ra2web-root:is([data-ui-layout="import"], [data-ui-layout="menu"], [data-ui-layout="game-menu"], [data-ui-layout="loading"]) .message-box:not(.game-res-box) {
        position: relative;
        inset: auto;
        transform: none;
        width: min(100%, 520px);
        height: auto;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        background-size: 100% 100%;
        box-sizing: border-box;
        overflow: hidden;
        font-size: 16px;
    }

    #ra2web-root:is([data-ui-layout="import"], [data-ui-layout="menu"], [data-ui-layout="game-menu"], [data-ui-layout="loading"]) .message-box:not(.game-res-box) .message-box-content {
        padding: 20px;
        min-height: 0;
        height: auto;
        overflow-y: auto;
        overflow-wrap: anywhere;
        line-height: 1.5;
    }

    #ra2web-root:is([data-ui-layout="import"], [data-ui-layout="menu"], [data-ui-layout="game-menu"], [data-ui-layout="loading"]) .message-box:not(.game-res-box) .message-box-footer {
        position: static;
        padding: 12px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        flex-shrink: 0;
    }

    #ra2web-root:is([data-ui-layout="import"], [data-ui-layout="menu"], [data-ui-layout="game-menu"], [data-ui-layout="loading"]) .message-box .message-box-footer:empty { display: none; }

    #ra2web-root:is([data-ui-layout="import"], [data-ui-layout="menu"], [data-ui-layout="game-menu"], [data-ui-layout="loading"]) .message-box:not(.game-res-box) .dialog-button {
        flex: 1 1 126px;
        max-width: 200px;
        min-height: 44px;
        height: auto;
        margin: 0;
        padding: 10px;
        font-size: 16px;
    }

    #ra2web-root:is([data-ui-layout="import"], [data-ui-layout="menu"], [data-ui-layout="game-menu"], [data-ui-layout="loading"]) .message-box:not(.game-res-box):not(.basic-error-box) .dialog-button {
        background-image: var(--res-mnbttn);
        background-size: 300% 100%;
        background-repeat: no-repeat;
        background-position: 0 0;
        border: 0;
    }

    #ra2web-root:is([data-ui-layout="import"], [data-ui-layout="menu"], [data-ui-layout="game-menu"], [data-ui-layout="loading"]) .message-box:not(.game-res-box):not(.basic-error-box) .dialog-button:hover:not(:disabled) {
        background-position: 50% 0;
    }

    #ra2web-root:is([data-ui-layout="import"], [data-ui-layout="menu"], [data-ui-layout="game-menu"], [data-ui-layout="loading"]) .message-box:not(.game-res-box):not(.basic-error-box) .dialog-button:active:not(:disabled) {
        background-position: 100% 0;
    }

    #ra2web-root[data-ui-layout="import"] .splash-screen {
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow-y: auto;
        padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
        font-size: 16px;
        line-height: 1.5;
    }

    #ra2web-root[data-ui-layout="import"] .splash-loading { flex: 1 0 auto; }
    #ra2web-root[data-ui-layout="import"] :is(.splash-copyright, .splash-disclaimer) {
        position: static !important;
        text-align: left !important;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    #ra2web-root[data-ui-layout="loading"] .loading-screen {
        display: flex;
        flex-direction: column;
        gap: 16px;
        box-sizing: border-box;
        overflow-y: auto;
        padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
        font-size: 16px;
        line-height: 1.5;
    }

    #ra2web-root[data-ui-layout="loading"] .loading-screen > div {
        position: static;
        width: auto;
        max-width: 100%;
        flex-shrink: 0;
        box-sizing: border-box;
        overflow-wrap: anywhere;
        margin: 0;
        padding: 8px;
        background: rgb(0 0 0 / 45%);
    }
    #ra2web-root[data-ui-layout="loading"] .loading-screen .map-name { order: -4; }
    #ra2web-root[data-ui-layout="loading"] .loading-screen .country-name { order: -3; }
    #ra2web-root[data-ui-layout="loading"] .loading-screen .loading-text { order: -2; }
    #ra2web-root[data-ui-layout="loading"] .loading-screen .player-status-container { order: -1; }
    #ra2web-root[data-ui-layout="loading"] .loading-screen .special-unit-name { color: white; }
    #ra2web-root[data-ui-layout="loading"] .loading-screen .player-status {
        display: grid;
        grid-template-columns: 47px minmax(0, 1fr) auto;
        gap: 8px;
        margin: 0;
    }
    #ra2web-root[data-ui-layout="loading"] .loading-screen .player-status + .player-status { margin-top: 16px; }
    #ra2web-root[data-ui-layout="loading"] .loading-screen .player-status progress {
        width: 100%;
        height: 16px;
        grid-column: 1 / 3;
    }
    #ra2web-root[data-ui-layout="loading"] .loading-screen .load-percent { display: inline; }
    #ra2web-root[data-ui-layout="loading"] .loading-screen .player-country-icon { display: block; margin: 0; }
    #ra2web-root[data-ui-layout="loading"] .loading-screen .player-name {
        grid-column: 2 / -1;
        margin: 0;
        white-space: normal;
    }
    #ra2web-root[data-ui-layout="loading"] .loading-screen .player-load-status {
        grid-column: 1 / -1;
        margin: 0;
        white-space: normal;
    }
}

#ra2web-root[data-ui-layout="game-menu"] .dialog-overlay {
    z-index: 10001 !important;
    width: var(--mobile-game-width, 100vw) !important;
    height: var(--mobile-game-height, 100dvh) !important;
}