/* スマホ専用。itch.ioのiframe内にも独立した縦スクロール領域を設ける。
   PCマウス環境の960×600には適用しない。 */
@media (max-width: 899px), (hover: none) and (pointer: coarse) {
  html, body {
    height: auto;
    min-height: 100%;
    max-height: none;
    overflow-y: auto;
    touch-action: auto;
  }
  html { scrollbar-gutter: auto; }
  /* 高さを固定して切り落とさず、超過した内容をこの中でスクロール。
     min-heightはアドレスバー表示時の高さ、max-heightは現在の表示高さ。
     iframeの外側のページスクロールが無効でも開始ボタンへ到達できる構造。 */
  .app, .app:has(#game:not([hidden])) {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    scroll-padding-block: 16px;
  }
  /* モバイル側でiframe幅が大きく報告されても、タイトルは縦に並べる。 */
  .app .cover {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 24px;
    padding: 24px 0;
  }
  .app .cover-art { height: 210px; }
  .app .cover-copy h1 { font-size: 40px; }
  .app .cover-copy h1 br { display: none; }
  .app .cover-copy .primary { width: 100%; }
  .scene-viewport { touch-action: pan-x pan-y pinch-zoom; }
}

/* タッチ端末の縦向き・ゲーム中のみ。PCと横向きには適用しない。 */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .app:has(#game:not([hidden])) {
    padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .app:has(#game:not([hidden])) > header { padding-bottom: 8px; }
  #game .room-heading { padding: 10px 0 6px; }
  #game .room-heading .eyebrow { margin-bottom: 2px; }
  #game .scene-scroll-help { margin: 0 0 8px; line-height: 1.5; }
  #game .scene-viewport .scene {
    /* 旧680px幅（約383px高）から約293～326px高へ。
       親画像とクリック範囲を一緒に縮小。縦横比・百分率座標は維持。 */
    min-width: 560px;
    min-width: clamp(520px, 80svh, 580px);
  }
  #game .room-nav { margin: 8px 0; gap: 8px; }
  #game .room-nav button { min-height: 44px; padding: 6px 12px; }
  /* A/B/Cは既存の現在地表示。画面移動は左右ボタンのまま。 */
  #game #dots { gap: 4px; }
  #game #dots span { min-width: 28px; text-align: center; font-size: 14px; padding: 4px; }
  #game .message {
    min-height: 0;
    margin: 0 0 10px;
    padding: 10px 12px;
    line-height: 1.5;
  }
  #game .inventory { padding: 12px; }
  #game #items { margin: 8px 0; gap: 6px; }
  #game .item { min-height: 48px; padding: 6px 10px; }
  #game .inventory .muted { margin-top: 8px; line-height: 1.5; }
}