/* iPhone X以降のSafeArea対応（iOS PWA専用） */
@supports (padding: max(0px)) {
  /* iOS PWA専用のクラスベース判定 */
  body.ios-pwa-active {
    padding-bottom: max(env(safe-area-inset-bottom), 10px) !important;
    box-sizing: border-box !important;
  }

  /* メインコンテナの位置調整 */
  body.ios-pwa-active #animation_container {
    bottom: max(env(safe-area-inset-bottom), 10px) !important;
    height: calc(100vh - max(env(safe-area-inset-bottom), 15px)) !important;
    margin-bottom: 0 !important;
    transform: translateY(calc(-1 * max(env(safe-area-inset-bottom), 10px) / 2)) !important;
  }

  /* キャンバス自体の位置調整 */
  body.ios-pwa-active #canvas {
    height: calc(100vh - max(env(safe-area-inset-bottom), 15px)) !important;
    margin-bottom: max(env(safe-area-inset-bottom), 10px) !important;
  }

  /* プリローダーの位置調整 */
  body.ios-pwa-active #_preload_div_ {
    bottom: max(env(safe-area-inset-bottom), 10px) !important;
    transform: translateY(calc(-1 * max(env(safe-area-inset-bottom), 10px) / 2)) !important;
  }

  /* DOMオーバーレイコンテナの調整 */
  body.ios-pwa-active #dom_overlay_container {
    height: calc(100vh - max(env(safe-area-inset-bottom), 15px)) !important;
    margin-bottom: max(env(safe-area-inset-bottom), 10px) !important;
  }

  /* モーダル関連の調整 */
  body.ios-pwa-active .modal .modal-content {
    margin-bottom: max(env(safe-area-inset-bottom), 10px) !important;
  }

  /* 向き変更メッセージにもセーフエリアを適用 */
  body.ios-pwa-active #orientation_message {
    padding-bottom: calc(20px + max(env(safe-area-inset-bottom), 10px)) !important;
  }

  /* インストールモーダルにもセーフエリアを適用 */
  body.ios-pwa-active #installModal .modal-content {
    margin-bottom: max(env(safe-area-inset-bottom), 10px) !important;
  }
}

/* iOS特有の調整（フォールバック） */
@media (display-mode: standalone) {
  body.ios-safe-area-fix {
    padding-bottom: 10px !important;
  }

  body.ios-safe-area-fix #animation_container {
    bottom: 10px !important;
    height: calc(100vh - 15px) !important;
    transform: translateY(-5px) !important;
  }

  body.ios-safe-area-fix #canvas {
    height: calc(100vh - 15px) !important;
    margin-bottom: 10px !important;
  }

  body.ios-safe-area-fix #_preload_div_ {
    bottom: 10px !important;
    transform: translateY(-5px) !important;
  }

  body.ios-safe-area-fix #dom_overlay_container {
    height: calc(100vh - 15px) !important;
    margin-bottom: 10px !important;
  }

  body.ios-safe-area-fix .modal .modal-content {
    margin-bottom: 10px !important;
  }
}

/* 横向きメッセージボタンのスタイル */
.orientation-message-button {
  margin-top: 25px;
  padding: 10px 20px;
  font-size: 1em;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* 横向きメッセージコンテナのスタイル */
#orientation_message {
  display: none; /* JSで制御するが、念のため初期はnone */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(240, 240, 240, 0.97);
  z-index: 10000;
  color: #333;
  font-family: sans-serif;
  font-size: 16px;
  /* flexboxを使って子要素を中央揃えにする */
  flex-direction: column; /* display:flexはJSで設定 */
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}