/* A touch screen held upright (js/ui/rotate.js shows it, docs/UI-GUIDE.md rule 9): the game is
   played sideways, so this covers everything, the loading screen too. The page's own navy and cyan. */
.rotate {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: calc(24px + var(--safe-t)) calc(24px + var(--safe-r)) calc(24px + var(--safe-b)) calc(24px + var(--safe-l));
  text-align: center; color: var(--ink); font-family: var(--font); touch-action: none;
  background: radial-gradient(ellipse at 50% 38%, #12243d, #0b1322 70%);
}
.rotate svg {
  width: 96px; height: 96px; margin-bottom: 14px; fill: none; stroke: var(--line); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 12px #2fd2ff55);
  animation: rotate-phone 2.4s ease-in-out infinite;
}
.rotate p { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: 0.06em; text-wrap: balance; }
.rotate small { font-size: 14px; font-weight: 600; opacity: 0.75; text-wrap: balance; }
@keyframes rotate-phone { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .rotate svg { animation: none; transform: rotate(-90deg); } }