/* styles/orientation.css
   Mobile portrait lockout + landscape-scale support (Phase 5 / Part B).
   The game is designed at 1920×1080 with absolute-positioned SVG
   biomes. Reworking the layout for portrait phones is out of scope;
   instead, we lock portrait mode behind a "rotate your device" overlay
   and scale the 1920×1080 stage to fit any landscape viewport via
   engine/orientation.js's transform: scale().

   This is a pragmatic compromise — the game is fully playable on a
   landscape phone or tablet, but portrait phones see only the rotation
   prompt. Far better than the prior "unreadable shrunken UI" state. */

/* ---------- PORTRAIT LOCKOUT ---------- */

#orientation-portrait-lock {
  position: fixed;
  inset: 0;
  z-index: 9999;            /* above everything — modals, prompts, HUD */
  background: linear-gradient(180deg, #05080f 0%, #0a0e1a 100%);
  display: none;            /* shown only by the portrait media query */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(248, 232, 192, 0.92);
  font-family: var(--serif, 'Georgia', serif);
  padding: 24px;
}

.opl-content {
  max-width: 320px;
}

.opl-icon {
  font-size: 4rem;
  margin-bottom: 28px;
  color: rgba(232, 216, 255, 0.85);
  text-shadow: 0 0 30px rgba(232, 216, 255, 0.35);
  display: inline-block;
  animation: opl-rotate-hint 2.4s ease-in-out infinite;
  line-height: 1;
}

@keyframes opl-rotate-hint {
  0%,  20% { transform: rotate(0deg); }
  60%      { transform: rotate(-90deg); }
  85%, 100% { transform: rotate(-90deg); }
}

.opl-title {
  font-style: italic;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.25;
  margin-bottom: 14px;
  color: rgba(232, 216, 255, 0.95);
  letter-spacing: 0.01em;
}

.opl-text {
  font-family: var(--serif, 'Georgia', serif);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(232, 224, 208, 0.78);
  letter-spacing: 0.01em;
}

/* ---------- TRIGGER: PORTRAIT ON SMALL/MEDIUM VIEWPORTS ---------- */
/* Limit the lockout to phones + small tablets. A 1080×1920 portrait
   desktop monitor would also match `orientation: portrait` but is
   clearly playable — gate by max-width so only handhelds lock out. */
@media (orientation: portrait) and (max-width: 900px) {
  #orientation-portrait-lock {
    display: flex;
  }
  /* Stop the stage from doing anything visible underneath — saves GPU
     work on weak phones and prevents any stray pointer through. */
  #stage {
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opl-icon { animation: none; transform: rotate(-45deg); }
}