/* Shared, visible footer. Keep game content in the layout rather than masking
   overflow or pinning the footer over playable controls. */
:is(.bingo-page, .wheel-page, .promogod-page) > header {
    flex: 0 0 auto;
}

:is(.bingo-page, .wheel-page, .promogod-page) > footer {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 2px 12px;
}

:is(.bingo-page, .wheel-page, .promogod-page) .site-footer-inner {
    display: block;
    width: min(100%, 1120px);
}

:is(.bingo-page, .wheel-page, .promogod-page) .site-telegram-promo {
    margin: 0 0 2px;
}

:is(.bingo-page, .wheel-page, .promogod-page) .site-footer-links {
    gap: 4px 14px;
}

:is(.bingo-page, .wheel-page, .promogod-page) :is(.site-privacy-link, .site-footer-cookie-settings) {
    font-size: 12px;
    line-height: 1.2;
}

:is(.bingo-page, .wheel-page, .promogod-page) .site-telegram-footer-link {
    min-height: 20px;
    font-size: 12px;
}

:is(.bingo-page, .wheel-page, .promogod-page) .site-telegram-footer-note {
    font-size: 11px;
}

:is(.bingo-page, .wheel-page, .promogod-page) .site-footer-copyright {
    flex-basis: 100%;
    margin: 0;
    font-size: 11px;
    line-height: 1.1;
}

@media (min-width: 1001px) {
    :is(.bingo-page, .wheel-page, .promogod-page) {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        min-height: 0;
    }

    /* Keep the original game sizes and block order. Fit the footer by reducing
       decorative spacing, never by relocating controls or scaling the games. */
    .bingo-page .bingo-shell {
        --bingo-difficulty-height: 54px;
        --bingo-toolbar-height: 44px;
        --bingo-controls-gap: 2px;
        --bingo-game-gap: 4px;
        --bingo-skip-height: 38px;
        --bingo-skip-gap: 6px;
        --bingo-side-top: calc(var(--bingo-skip-height) + var(--bingo-skip-gap) + 1px);
        --bingo-top-panel-height: calc(var(--bingo-difficulty-height) + var(--bingo-controls-gap) + var(--bingo-toolbar-height) + var(--bingo-game-gap) + var(--bingo-skip-height));
        padding-top: 3px;
    }

    .bingo-page .bingo-difficulty-panel {
        height: var(--bingo-difficulty-height);
        margin-bottom: var(--bingo-controls-gap);
        padding: 2px 7px;
        row-gap: 2px;
    }

    .bingo-page .bingo-difficulty-panel > .bingo-record-row {
        height: 18px;
        padding-top: 0;
    }

    .bingo-page .bingo-toolbar {
        height: var(--bingo-toolbar-height);
        min-height: var(--bingo-toolbar-height);
        padding: 3px 7px;
    }

    .bingo-page .bingo-stat {
        line-height: 1.1;
    }

    .bingo-page .bingo-stat span {
        margin-bottom: 2px;
    }

    .bingo-page .bingo-game-layout {
        margin-top: var(--bingo-game-gap);
    }

    .bingo-page .bingo-skip-button {
        height: var(--bingo-skip-height);
        min-height: var(--bingo-skip-height);
        margin-bottom: var(--bingo-skip-gap);
    }

    .bingo-page :is(.bingo-player-stack, .bingo-leaderboard) {
        top: var(--bingo-side-top);
    }

    .bingo-page .bingo-promo-panel {
        top: 3px;
        height: var(--bingo-top-panel-height);
        padding: 3px 9px;
    }

    .bingo-page .bingo-promo-heading {
        margin-bottom: 3px;
    }

    .bingo-page .bingo-promo-options {
        gap: 2px 5px;
    }

    .bingo-page #bingo-promo-hint {
        margin-top: 1.5px;
    }

    .wheel-page .wheel-shell {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 450px auto auto;
        grid-template-areas: "heading" "wheel" "legend" "controls" "status";
        flex: 1 1 0;
        min-height: 0;
        row-gap: 2px;
        padding: 2px 0;
        align-content: center;
        justify-content: center;
    }

    .wheel-page .wheel-heading {
        grid-area: heading;
    }

    .wheel-page .wheel-stage {
        grid-area: wheel;
        align-self: center;
        justify-self: center;
        width: 450px;
        height: 450px;
        aspect-ratio: 1;
    }

    .wheel-page .wheel-legend {
        grid-area: legend;
        align-self: center;
    }

    .wheel-page .wheel-controls {
        grid-area: controls;
    }

    .wheel-page .wheel-status {
        grid-area: status;
    }

    .wheel-page :is(.wheel-legend, .wheel-status) {
        margin: 0;
    }
}