.rot { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) and (hover: none) {
  html, body { background: #003b7c; }
  .rot {
    position: fixed; inset: 0; z-index: 1000; display: block; height: 100lvh;
    background: #003b7c; touch-action: pinch-zoom; overscroll-behavior: none;
  }
  .rot__in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; height: 100svh; padding: 0 24px; }
  .rot__icon { display: block; width: 48px; height: 48px; color: #ffe500; }
  .rot__text {
    margin: 0; color: #fff; font-family: 'CA Metro', 'Arial Narrow', Arial, sans-serif; font-weight: 800; font-size: 22px;
    line-height: 1.15; letter-spacing: .02em; text-align: center; text-transform: uppercase;
  }
  .rot__text .br { display: block; }
}