/* ============================================================================
   ORIENTATION LOCK (CSS catch-all layer)
   ----------------------------------------------------------------------------
   Belt-and-suspenders portrait lock for the HIIT / carnival games.

   Layered defense:
     1. PWA manifest  "orientation": "portrait"   -> OS locks installed PWAs
     2. Screen Orientation API (orientation.js)    -> locks fullscreen/PWA on
                                                      Android/Chrome
     3. THIS FILE                                  -> universal fallback. Works
        even where (1) and (2) silently fail or are unsupported, most notably
        iOS Safari at the URL (no install), which honors neither the manifest
        orientation nor screen.orientation.lock().

   When the viewport is wider than it is tall, we cover the screen with a
   full-bleed overlay asking the player to return to portrait, and hide the
   game underneath so a landscape-broken layout is never visible. The instant
   the device returns to portrait the overlay is gone (pure CSS media query,
   no JS required), so it cannot get "stuck".
   ============================================================================ */

#orientationLock {
    display: none;
}

@media screen and (orientation: landscape) and (max-width: 1024px) {
    /* Hide the game itself so a broken landscape layout is never shown. */
    body > *:not(#orientationLock) {
        visibility: hidden !important;
    }

    #orientationLock {
        display: flex !important;
        visibility: visible !important;
        position: fixed;
        inset: 0;
        z-index: 2147483647;   /* above every in-game overlay / fixed clock */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        margin: 0;
        padding: 24px;
        box-sizing: border-box;
        text-align: center;
        background: var(--game-bg, #fefeef);
        color: black;
        font-family: inherit;
    }

    #orientationLock .rotate-icon {
        font-size: 64px;
        line-height: 1;
        animation: orientationRotateHint 2s ease-in-out infinite;
    }

    #orientationLock .rotate-text {
        font-size: clamp(20px, 6vw, 32px);
        font-weight: bold;
        max-width: 90%;
    }
}

@keyframes orientationRotateHint {
    0%, 60%, 100% { transform: rotate(0deg); }
    30%           { transform: rotate(-90deg); }
}