/* Portrait-only on mobile. A plain website can't actually prevent the OS
   from rotating the screen (the Screen Orientation Lock API only works
   inside an installed PWA in standalone display mode, which this app isn't
   set up as, and iOS Safari doesn't support it even then) -- so instead this
   blocks the app underneath with a "please rotate back" overlay whenever the
   viewport is both landscape AND short enough to be a phone, not a tablet
   or laptop legitimately used in landscape. max-height: 500px is the common
   threshold for this: phones in landscape are well under it (iPhone 14
   landscape height ~430px), tablets are well over it (iPad landscape
   ~810px+), so this never fires for a device that's supposed to be usable
   in landscape. Pure CSS/no JS -- nothing to race against orientationchange
   timing, and it can't be defeated by a user simply resizing a desktop
   browser window narrow, since that never changes reported `orientation`. */

#orientation-lock-overlay {
  display: none;
}

@media (orientation: landscape) and (max-height: 500px) {
  #app-scale-root {
    display: none;
  }

  #orientation-lock-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    text-align: center;
    background: #0e0e0e;
    color: #e9f0ee;
    font-family: Roboto, sans-serif;
  }

  #orientation-lock-overlay svg {
    width: 56px;
    height: 56px;
    color: #41aa05;
    animation: orientation-lock-rotate 1.8s ease-in-out infinite;
  }

  #orientation-lock-overlay p {
    margin: 0;
    max-width: 320px;
    font-size: 15px;
    line-height: 1.5;
  }

  @keyframes orientation-lock-rotate {
    0%, 15% { transform: rotate(0deg); }
    45%, 65% { transform: rotate(90deg); }
    100% { transform: rotate(90deg); }
  }
}