/* Portrait gate (jury 2026-04-28, Pass 10): full-viewport overlay shown
   only on portrait/square viewports. The dojo is a 16:9 landscape game;
   compressing it into a tall phone viewport always loses fidelity. Ask
   the user to rotate. Hidden by default; revealed by media query.
   The (C') 16:9 frame CSS in dojo-game.css remains as a fallback for
   users who tap the bypass button or whose orientation lock prevents
   rotation. */

.portrait-gate {
  display: none;
}

@media (max-aspect-ratio: 1/1) {
  .portrait-gate {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    background: var(--color-bg-deep);
    color: var(--color-pixel-cream);
    font-family: var(--font-body);
    text-align: center;
    overflow-y: auto;
  }
}

.portrait-gate-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 320px;
}

.portrait-gate-kanji {
  font-family: var(--font-kanji);
  font-size: 64px;
  line-height: 1;
  color: var(--color-gold);
  text-shadow:
    0 0 12px rgba(255, 209, 102, 0.5),
    0 0 24px rgba(255, 209, 102, 0.2);
}

.portrait-gate-koro {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 0 18px rgba(255, 209, 102, 0.35));
}

.portrait-gate-rotate-icon {
  color: var(--color-teal);
  animation: portraitGateRotate 2.4s ease-in-out infinite;
  margin: 4px 0;
}

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

.portrait-gate-title {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--color-pixel-cream);
  margin: 0;
  line-height: 1.5;
}

.portrait-gate-body {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(254, 246, 228, 0.85);
  margin: 0;
}

.portrait-gate-hint {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(254, 246, 228, 0.55);
  font-style: italic;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .portrait-gate-rotate-icon {
    animation: none;
  }
}