:root {
    --login-mobile-frame-base-width: 390px;
    --login-mobile-frame-base-height: 844px;
    --login-mobile-frame-scale: 1;
    --login-mobile-frame-width: var(--login-mobile-frame-base-width);
    --login-mobile-frame-height: var(--login-mobile-frame-base-height);
    --login-viewport-height: 100vh;
}

@supports (height: 100dvh) {
    :root {
        --login-viewport-height: 100dvh;
    }
}

@media (min-width: 521px), (hover: hover) and (pointer: fine) {
    :root {
        --login-mobile-frame-scale: var(--web-mobile-frame-scale, min(calc(100vw / 390px), calc(100dvh / 844px)));
    }

    html {
        width: 100% !important;
        height: var(--login-viewport-height) !important;
        min-height: var(--login-viewport-height) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: #393939 !important;
    }

    body.bg-poker-gradient {
        width: var(--login-mobile-frame-width) !important;
        max-width: var(--login-mobile-frame-width) !important;
        height: var(--login-mobile-frame-height) !important;
        min-height: 0 !important;
        max-height: var(--login-mobile-frame-height) !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        position: relative !important;
        background-image: url(/Image/login_bg.jpg?v=111) !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-color: #030713 !important;
        box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 22px 60px rgba(0,0,0,.34) !important;
        transform: scale(var(--login-mobile-frame-scale)) translateZ(0);
        transform-origin: center center;
    }

    body.bg-poker-gradient .login-page {
        min-height: 100% !important;
    }
}