/* Prevent mobile rubber-band/overscroll from revealing space beyond the viewport. */
html,
body {
    position: fixed;
    inset: 0;
    overscroll-behavior: none;
    touch-action: none;
}

/* Triggers whenever the visible viewport is wider than the 9:16 artboard, which crops the canvas
   vertically (e.g. iPhone Safari with its toolbar reducing the effective viewport height). */
@media (orientation: portrait) and (min-aspect-ratio: 9/16) {
    .stage-canvas {
        top: 0;
        transform: translateX(-50%);
    }

    .language-buttons {
        bottom: calc(100cqh - var(--app-vh) * 100 + var(--app-vh) * 8);
    }

    .home-action {
        bottom: calc(100cqh - var(--app-vh) * 100 + var(--app-vh) * 15);
    }

    .home-message-bottom {
        bottom: calc(100cqh - var(--app-vh) * 100 + var(--app-vh) * 4);
    }

    .question-footer-group {
        /* Logo + text move together, so no fixed ceiling is needed anymore. */
        bottom: max(2.3cqh, calc(100cqh - var(--app-vh) * 100 + var(--app-vh) * 2.3));
    }

    .feedback-institutional-bottom {
        bottom: max(2.6cqh, calc(100cqh - var(--app-vh) * 100 + var(--app-vh) * 2.6));
    }
}

@media (orientation: portrait) and (min-width: 700px) and (max-width: 1024px) {
    .stage-canvas {
        top: 50%;
        width: min(calc(var(--app-vw) * 100), calc(var(--app-vh) * 100 * var(--stage-aspect-width) / var(--stage-aspect-height)));
        transform: translate(-50%, -50%);
    }
}

/* The original iPhone SE/5 loses too much vertical space to Safari chrome. Keep the full
   9:16 artboard visible instead of cropping controls from its bottom edge. */
@media (orientation: portrait) and (max-width: 320px) {
    .stage-canvas {
        top: 50%;
        width: min(calc(var(--app-vw) * 100), calc(var(--app-vh) * 100 * var(--stage-aspect-width) / var(--stage-aspect-height)));
        transform: translate(-50%, -50%);
    }

    .question-box {
        padding-top: 1.3cqh;
        padding-bottom: 1.3cqh;
    }
}