/* Portrait lock gate — phones only */
.orient-gate {
  display: none;
}

@media (orientation: portrait) and (max-width: 900px) {
  .orient-gate {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: max(24px, env(safe-area-inset-top)) 28px max(24px, env(safe-area-inset-bottom));
    background:
      radial-gradient(ellipse at 50% 30%, rgba(123, 79, 184, 0.28), transparent 55%),
      #1e2433;
    color: #f0e6d4;
    text-align: center;
    font-family: "Raleway", "Manrope", system-ui, sans-serif;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
  }

  .orient-gate__icon {
    width: min(42vw, 160px);
    height: auto;
    opacity: 0.95;
    animation: orientTilt 1.6s ease-in-out infinite;
  }

  .orient-gate__title {
    margin: 0;
    font-size: clamp(1.25rem, 5.5vw, 1.7rem);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .orient-gate__text {
    margin: 0;
    max-width: 18em;
    font-size: clamp(0.95rem, 3.8vw, 1.1rem);
    line-height: 1.45;
    opacity: 0.88;
  }

  /* Block the game while portrait */
  html.orient-portrait,
  html.orient-portrait body {
    overflow: hidden !important;
    touch-action: none !important;
  }

  html.orient-portrait #app,
  html.orient-portrait .scene,
  html.orient-portrait .stage {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@keyframes orientTilt {
  0%,
  100% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(90deg);
  }
  60% {
    transform: rotate(90deg);
  }
}

@media (orientation: landscape) {
  .orient-gate {
    display: none !important;
  }
}