:root {
    --monster-public-app-width: 100vw;
    --monster-public-app-height: 100dvh;
    --monster-public-viewport-offset-left: 0px;
    --monster-public-viewport-offset-right: 0px;
    --monster-public-viewport-offset-top: 0px;
    --monster-public-viewport-offset-bottom: 0px;
    --monster-public-safe-top: env(safe-area-inset-top, 0px);
    --monster-public-safe-bottom: env(safe-area-inset-bottom, 0px);
    --monster-public-surface-side-gap: 1.5rem;
    --monster-public-surface-top-gap: 1.5rem;
    --monster-public-surface-bottom-gap: 1.5rem;
    --monster-public-modal-edge-gap: 14px;
    --monster-public-modal-panel-max-height: calc(var(--monster-public-app-height, 100dvh) - var(--monster-public-safe-top, 0px) - var(--monster-public-safe-bottom, 0px) - (var(--monster-public-modal-edge-gap, 14px) * 2));
}

.monster-public-surface {
    position: relative;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: var(--monster-public-app-height, 100dvh);
    box-sizing: border-box;
    overflow: visible;
    overflow-x: clip;
    padding-top: calc(var(--monster-public-surface-top-gap, 1.5rem) + var(--monster-public-safe-top, env(safe-area-inset-top, 0px)));
    padding-right: var(--monster-public-surface-side-gap, 1.5rem);
    padding-bottom: calc(var(--monster-public-surface-bottom-gap, 1.5rem) + var(--monster-public-safe-bottom, env(safe-area-inset-bottom, 0px)));
    padding-left: var(--monster-public-surface-side-gap, 1.5rem);
}

.monster-public-surface > * {
    flex: 0 0 auto;
    max-width: 100%;
}

/* Pseudo spacers center short auth screens without clipping tall content. */
.monster-public-surface--center::before,
.monster-public-surface--center::after {
    content: '';
    display: block;
    flex: 1 1 0;
    min-height: 0;
}

.monster-public-surface--login {
    --monster-public-surface-top-gap: 2rem;
    --monster-public-surface-bottom-gap: 2.5rem;
}

.monster-public-surface--reset {
    --monster-public-surface-top-gap: 1.5rem;
    --monster-public-surface-bottom-gap: 1.5rem;
}

.monster-public-surface--register {
    --monster-public-surface-top-gap: 2rem;
    --monster-public-surface-bottom-gap: 2.5rem;
}

.monster-public-surface--paid-register {
    --monster-public-surface-side-gap: 0.75rem;
    --monster-public-surface-top-gap: 2rem;
    --monster-public-surface-bottom-gap: 2rem;
}

@media (min-width: 640px) {
    .monster-public-surface--paid-register {
        --monster-public-surface-side-gap: 1rem;
    }
}

.monster-public-modal-overlay {
    position: fixed;
    inset:
        var(--monster-public-viewport-offset-top, 0px)
        var(--monster-public-viewport-offset-right, 0px)
        var(--monster-public-viewport-offset-bottom, 0px)
        var(--monster-public-viewport-offset-left, 0px);
    top: var(--monster-public-viewport-offset-top, 0px) !important;
    right: var(--monster-public-viewport-offset-right, 0px) !important;
    bottom: var(--monster-public-viewport-offset-bottom, 0px) !important;
    left: var(--monster-public-viewport-offset-left, 0px) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        max(12px, var(--monster-public-safe-top, env(safe-area-inset-top, 0px)))
        max(12px, env(safe-area-inset-right))
        max(14px, var(--monster-public-safe-bottom, env(safe-area-inset-bottom, 0px)))
        max(12px, env(safe-area-inset-left)) !important;
    max-height: var(--monster-public-app-height, 100dvh) !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.monster-public-modal-overlay.hidden {
    display: none !important;
}

.monster-public-modal-frame {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    max-height: 100%;
}

.monster-public-modal-panel {
    width: 100%;
    max-width: min(var(--monster-public-modal-max-width, 360px), calc(var(--monster-public-app-width, 100vw) - 24px));
    max-height: var(--monster-public-modal-panel-max-height, calc(var(--monster-public-app-height, 100dvh) - 28px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}