/* Phones held sideways: the site is designed for portrait on phones, so a full-screen note asks to turn the phone
   upright (assets/rotate_note.js adds it). Only a touch screen in landscape under 500px tall: tablets, desktop and
   portrait phones never see it. Nothing underneath is reset, so turning back carries on where you were. */
#rotate-note { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px) and (pointer: coarse) {   /* phone widths only: the widest phone sideways is ~932px */
  #rotate-note {
    display: flex; position: fixed; inset: 0; z-index: 2147483000; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; background: #0b1220; color: #e6edf6;
    padding: 24px max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left));
    font: 400 15px/1.5 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  }
  #rotate-note .rn-box { display: flex; flex-direction: column; align-items: center; gap: 10px; transform-origin: center; }
  #rotate-note .rn-icon { font-size: 44px; line-height: 1; display: inline-block; animation: rn-turn 2.4s ease-in-out infinite; }
  #rotate-note b { font-size: 20px; font-weight: 700; }
  #rotate-note span { color: #9fb2c8; max-width: 360px; }
  html, body { overflow: hidden !important; }
}
@keyframes rn-turn { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { #rotate-note .rn-icon { animation: none; } }