:root {
  --iphone-safe-top: env(safe-area-inset-top, 0px);
  --iphone-safe-right: env(safe-area-inset-right, 0px);
  --iphone-safe-bottom: env(safe-area-inset-bottom, 0px);
  --iphone-safe-left: env(safe-area-inset-left, 0px);
}

.iphone-rotate-gate {
  display: none;
}

@media (pointer: coarse) and (max-width: 1100px) and (orientation: portrait) {
  html,
  body {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body > :not(.iphone-rotate-gate):not(audio):not(script) {
    visibility: hidden !important;
  }

  .iphone-rotate-gate {
    position: fixed;
    inset: 0;
    z-index: 60000;
    display: grid;
    place-items: center;
    visibility: visible !important;
    padding: calc(28px + var(--iphone-safe-top)) 28px calc(28px + var(--iphone-safe-bottom));
    overflow: hidden;
    color: #f3ecd7;
    background:
      radial-gradient(circle at 52% 42%, rgba(63, 107, 112, .3), transparent 36%),
      linear-gradient(155deg, #071419, #101f22 54%, #071012);
    text-align: center;
    font-family: "STKaiti", "KaiTi", serif;
  }

  .iphone-rotate-gate::before,
  .iphone-rotate-gate::after {
    content: "";
    position: absolute;
    left: -15%;
    width: 130%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(219, 193, 127, .7), transparent);
    animation: iphone-water-line 4s ease-in-out infinite;
  }

  .iphone-rotate-gate::before { top: 28%; }
  .iphone-rotate-gate::after { bottom: 24%; animation-delay: -2s; }

  .iphone-rotate-inner {
    position: relative;
    z-index: 1;
    width: min(82vw, 360px);
  }

  .iphone-phone-icon {
    position: relative;
    display: block;
    width: 58px;
    height: 102px;
    margin: 0 auto 34px;
    border: 2px solid #d8c188;
    border-radius: 13px;
    box-shadow: 0 0 24px rgba(216, 193, 136, .2);
    animation: iphone-turn 2.8s ease-in-out infinite;
  }

  .iphone-phone-icon::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 18px;
    height: 3px;
    border-radius: 3px;
    background: #d8c188;
    transform: translateX(-50%);
  }

  .iphone-rotate-gate h1 {
    margin: 0 0 12px;
    color: #f4e5bd;
    font-size: clamp(27px, 8vw, 38px);
    letter-spacing: 4px;
  }

  .iphone-rotate-gate p {
    margin: 0;
    color: rgba(239, 235, 219, .8);
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 1px;
  }

  .iphone-rotate-continue {
    display: block;
    min-width: 220px;
    min-height: 46px;
    margin: 22px auto 0;
    padding: 10px 18px;
    border: 1px solid rgba(216, 193, 136, .75);
    border-radius: 4px;
    color: #f4e5bd;
    background: rgba(40, 68, 69, .72);
    font: 700 16px/1.4 "STKaiti", "KaiTi", serif;
    letter-spacing: 2px;
  }

  .iphone-rotate-note {
    display: block;
    min-height: 24px;
    margin-top: 12px;
    color: #d8c188;
    font-size: 13px;
    line-height: 1.6;
  }
}

@media (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: pan-x;
  }

  .iphone-rotate-gate { display: none !important; }

  .hud-top {
    top: max(6px, var(--iphone-safe-top));
    right: calc(10px + var(--iphone-safe-right));
    left: calc(10px + var(--iphone-safe-left));
    min-height: 42px;
    padding: 5px 10px;
    gap: 8px;
    border-radius: 5px;
  }

  .brand { min-width: 118px; }
  .brand-cn { font-size: 15px !important; white-space: nowrap; }
  .brand i { display: none; }
  .route { min-width: 0; gap: 3px; }
  .route span { width: 7px; height: 7px; }
  .stamp-count { font-size: 12px; white-space: nowrap; }

  .hud-btn,
  button,
  [role="button"] {
    min-height: 40px;
    touch-action: manipulation;
  }

  .viewport {
    inset: 0;
    height: 100dvh;
  }

  .track {
    min-height: 100dvh;
  }

  .river-main {
    transform: translateX(-50%) scale(.82);
    transform-origin: center bottom;
  }

  .river-main[data-bank="south"] {
    transform-origin: center top;
  }

  .stop-city-name,
  .stop-play {
    min-height: 38px !important;
  }

  .stop-model-stage {
    min-height: 98px;
  }

  .modal,
  .game-modal,
  #architecture-gallery {
    padding:
      calc(8px + var(--iphone-safe-top))
      calc(12px + var(--iphone-safe-right))
      calc(8px + var(--iphone-safe-bottom))
      calc(12px + var(--iphone-safe-left));
  }

  .game-box,
  .gallery-shell,
  .modal-card {
    width: min(94vw, 920px) !important;
    max-height: calc(100dvh - 18px - var(--iphone-safe-top) - var(--iphone-safe-bottom)) !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gallery-model,
  model-viewer {
    touch-action: none;
  }

  .bottom-controls,
  .travel-controls,
  .journey-controls {
    bottom: calc(8px + var(--iphone-safe-bottom)) !important;
  }

  .opening-copy h2,
  .opening-copy h1 {
    max-width: none !important;
    white-space: nowrap;
    font-size: clamp(24px, 5.2vw, 45px) !important;
  }
}

@keyframes iphone-turn {
  0%, 24% { transform: rotate(0deg); }
  58%, 88% { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}

@keyframes iphone-water-line {
  0%, 100% { transform: translateX(-3%); opacity: .28; }
  50% { transform: translateX(3%); opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .iphone-phone-icon,
  .iphone-rotate-gate::before,
  .iphone-rotate-gate::after {
    animation: none;
  }
}