/* ── Rotate overlay ── */
body {
   background: #000;
}

@media (orientation: landscape) and (max-height: 500px) {
   .wrapper {
      display: none;
   }
}

.rotate-overlay {
   font-family: sans-serif;
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   height: 100dvh;
   z-index: 99999;
   background: #000;
   align-items: center;
   justify-content: center;
}

@media (orientation: landscape) and (max-height: 500px) {
   .rotate-overlay {
      display: flex;
      overflow: hidden;
      touch-action: none;
      overscroll-behavior: none;
   }
}

.rotate-overlay__content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
   color: #fff;
   text-align: center;
   padding: 20px;
}

.rotate-overlay__content svg {
   width: 80px;
   height: 80px;
   animation: rotate-hint 1.5s ease-in-out infinite alternate;
}

.rotate-overlay__content p {
   font-size: 1.8rem;
   max-width: 26rem;
   line-height: 1.4;
}

@keyframes rotate-hint {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(-90deg);
   }
}