/*
 * Mobile orientation blocker (landscape)
 *
 * Note:
 * - Web apps (browser/PWA/WebView) cannot truly lock device orientation reliably.
 * - This CSS overlay prevents the UI from being used in landscape on small screens.
 */

@media (max-width: 900px) and (orientation: landscape) {
  body::before {
    content: "Please rotate your device to portrait.";
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    font-size: 18px;
    line-height: 1.4;
  }

  /* Hide app UI while showing the overlay */
  body > * {
    visibility: hidden;
  }
}