/* Ordinary touch-browser tabs only. Safari owns the translucent browser chrome;
   document backgrounds can extend behind it, viewport-fixed panels cannot be
   relied on to do so. Keep short pages still without locking the document.
   Desktop, installed apps, dialogs and the desktop game keep their layouts. */
@media (display-mode: browser) and (pointer: coarse) {
    html[data-browser-edges] {
        background-color: var(--theme-bg, #f8f8f8);
        min-height: 100%;
        height: auto;
        overflow-x: clip;
        overflow-y: auto;
    }

    html[data-browser-edges] body {
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        overflow-x: clip;
        overflow-y: visible;
    }

    /* These were full-width fixed coloured surfaces touching the top edge. */
    html[data-browser-edges] #landing-page-content,
    html[data-browser-edges] #games-page,
    html[data-browser-edges] #contact-container {
        position: relative;
        inset: auto;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: clip;
    }

    /* Override the old in-app-browser script's inline pixel height, including
       when the address bar or software keyboard changes the available space. */
    html[data-browser-edges] #landing-page-content {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding-top: max(80px, env(safe-area-inset-top, 0px));
        padding-bottom: max(80px, env(safe-area-inset-bottom, 0px));
    }

    /* Let the document carry overflow instead of full-screen nested scrollers.
       Inline display/overflow changes for open dialogs continue to take effect. */
    html[data-browser-edges] .terminal-container,
    html[data-browser-edges] .terminal-content {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    html[data-browser-edges="contact"] #terminal {
        padding: 0;
    }

    html[data-browser-edges] #contact-container {
        padding-top: max(40px, env(safe-area-inset-top, 0px));
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
        padding-left: max(10px, env(safe-area-inset-left, 0px));
        padding-right: max(10px, env(safe-area-inset-right, 0px));
    }

    html[data-browser-edges] #games-page {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    html[data-browser-edges] #games-page .content-container {
        height: auto;
        flex: 1 0 auto;
        overflow: visible;
    }

    /* Paint the decorative canvas as part of the page, not a fixed top bar. */
    html[data-browser-edges] #pointWavesCanvas {
        position: absolute !important;
        height: 100% !important;
        max-height: none !important;
    }

    /* These decorative layers must not become Safari's top-edge hit target. */
    html[data-browser-edges] #particles-js {
        pointer-events: none;
    }

    html[data-browser-edges]:is([data-browser-edges="index"], [data-browser-edges="login"], [data-browser-edges="forgot-password"]) .terminal-content {
        padding-top: max(20px, env(safe-area-inset-top, 0px));
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
        padding-left: max(20px, env(safe-area-inset-left, 0px));
        padding-right: max(20px, env(safe-area-inset-right, 0px));
    }

    /* Floating controls retain their existing look and stay inside safe areas. */
    html[data-browser-edges] #landing-page-content .special-login-button,
    html[data-browser-edges] #landing-page-content .special-signup-button,
    html[data-browser-edges] #games-page .back-button,
    html[data-browser-edges] #games-page .home-button {
        top: calc(15px + env(safe-area-inset-top, 0px)) !important;
    }

    html[data-browser-edges] #games-page .back-button,
    html[data-browser-edges] #landing-page-content .special-signup-button {
        left: calc(15px + env(safe-area-inset-left, 0px)) !important;
    }

    html[data-browser-edges] #games-page .home-button,
    html[data-browser-edges] #landing-page-content .special-login-button {
        right: calc(15px + env(safe-area-inset-right, 0px)) !important;
    }

    html[data-browser-edges] .games-info-icon {
        bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    /* Move bottom controls using bottom, rather than animating their padding
       as Chrome expands into Android's gesture-navigation area. */
    html[data-browser-edges]:is([data-browser-edges="products"], [data-browser-edges="think_heart"], [data-browser-edges="hc_chip"], [data-browser-edges="hc_vision"]) .back-button-container {
        bottom: env(safe-area-inset-bottom, 0px);
        padding-bottom: clamp(14px, 3vw, 20px);
    }
}