/* ============================================
   TummyTalk — Mobile App-Shell im Browser
   Technik: docs/TECHNIK-MOBILE-ANSICHT-BROWSER.md
   Zielmaß ~393×852. Ab 700px: zentrierte Phone-Bühne.
   Admin-UI bindet diese Datei bewusst nicht ein.
   ============================================ */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    /* Breite der Bühne am Rechner (BeautyHills: 430px) */
    --app-max: 430px;
    --app-stage-bg: #e8e2e6;
}

html,
body {
    max-width: 100vw;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

.min-screen {
    min-height: 100vh;
    min-height: 100dvh;
}

/*
 * Darstellung am Rechner
 * Die App ist mobil gebaut. Ab 700px Fensterbreite wird sie mittig in einer
 * Bühne von --app-max gezeigt. Am Telefon greift nichts davon.
 *
 * position:fixed richtet sich am Viewport aus — deshalb Chrome/Overlays
 * einzeln auf die Bühne holen (Selektoren mit body davor für Spezifität).
 */
@media (min-width: 700px) {
    html {
        background: var(--app-stage-bg);
    }

    body {
        max-width: var(--app-max);
        margin-inline: auto;
        min-height: 100vh;
        min-height: 100dvh;
        box-shadow: 0 0 40px rgba(61, 46, 58, 0.14);
    }

    /* Volle Breite der Bühne */
    body .tt-bottom-nav,
    body .tt-status-bar,
    body .bottom-nav,
    body .tt-aurora,
    body .score-modal-overlay,
    body .modal-overlay,
    body .share-modal-overlay,
    body .document-modal-overlay,
    body .locked-modal-overlay {
        left: 50%;
        right: auto;
        width: 100%;
        max-width: var(--app-max);
        transform: translateX(-50%);
    }

    /* Floating-Buttons am rechten Rand der Bühne, nicht des Fensters */
    body .scorecard-fab,
    body .scorecard-float-btn {
        right: calc(50% - (var(--app-max) / 2) + 20px);
        left: auto;
        width: auto;
        max-width: none;
        transform: none;
    }
}