/* ============================================================================
   orientation-lock.css — phones are designed portrait-only.

   The web platform can't reliably *lock* orientation: Screen Orientation API
   `lock()` only works in fullscreen / installed-PWA contexts, so a normal page
   in mobile Safari/Chrome can't force it. The portable approach is to cover the
   app with a "rotate your device" prompt whenever a phone is held in landscape,
   and simply not render it on devices that are allowed to go wide.

   Phone vs. tablet without UA sniffing: in landscape, the viewport HEIGHT is the
   device's short edge. Even the largest phones top out around ~430px there
   (iPhone Pro Max); tablets start at ~600px+ (iPad's short edge is 768px). So we
   gate on `max-height: 500px` — covers every phone, exempts every tablet.

   `pointer: coarse` keeps a desktop browser shrunk to a short landscape window
   from ever tripping the overlay; only touch devices qualify.

   The overlay markup lives in App.razor and is always in the DOM; it's display:
   none until this media query matches, so there's no JS and no flash.
   ============================================================================ */

.cm-rotate-lock {
    display: none;
}

@media only screen and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    .cm-rotate-lock {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 99999;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-4, 1rem);
        padding: var(--space-6, 2rem);
        text-align: center;
        background: var(--bg, #0a0a0c);
        color: var(--fg, #f4f4f6);
        /* Cover any safe-area notches in landscape so nothing peeks out. */
        padding-left: max(var(--space-6, 2rem), env(safe-area-inset-left));
        padding-right: max(var(--space-6, 2rem), env(safe-area-inset-right));
    }

    /* Freeze the app underneath while the prompt is up. */
    body:has(.cm-rotate-lock) {
        overflow: hidden;
    }

    .cm-rotate-lock__icon {
        font-size: 3rem;
        color: var(--accent, #f5d442);
        animation: cm-rotate-lock-wobble 2.4s ease-in-out infinite;
    }

    .cm-rotate-lock__title {
        font-family: var(--type-display, 'Anton', sans-serif);
        text-transform: uppercase;
        letter-spacing: 0.01em;
        line-height: 0.95;
        font-size: 1.75rem;
        margin: 0;
    }

    .cm-rotate-lock__hint {
        font-family: var(--type-body, system-ui, sans-serif);
        font-size: var(--fs-caption, 0.8125rem);
        color: var(--fg-muted, #a8a9b0);
        max-width: 28ch;
        margin: 0;
    }
}

/* A gentle back-and-forth tilt hinting "turn me upright". Respect reduced-motion. */
@keyframes cm-rotate-lock-wobble {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-18deg); }
    60%      { transform: rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cm-rotate-lock__icon {
        animation: none;
    }
}