/* ========== 自動ツアー進捗表示の改善版スタイル ========== */

/* ツアーオーダーサイドバー: より詳細な進捗情報対応版 */
.tour-order-sidebar {
  position: fixed;
  left: calc(var(--sidebar-left-offset, 12px) + var(--safe-left));
  top: calc(56px + var(--safe-top) + var(--sidebar-top-offset, 8px));
  width: var(--sidebar-width, 300px);
  max-height: calc(var(--app-height) - (56px + var(--safe-top) + var(--sidebar-top-offset, 8px) + var(--sidebar-bottom-offset, 20px)));
  overflow: hidden;
  background: var(--sidebar-bg, rgba(20, 24, 30, 0.62));
  color: #fff;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  z-index: 16060;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);

  /* sceneList と同様のスライド開閉（デフォルト: 閉じ） */
  transform: translateX(calc(-1 * (var(--sidebar-width, 300px) + var(--sidebar-left-offset, 12px))));
  -webkit-transform: translateX(calc(-1 * (var(--sidebar-width, 300px) + var(--sidebar-left-offset, 12px))));
  transition: transform 320ms ease, left 320ms ease;
  will-change: transform, left;
}

/* 有効状態: 表示（スライドイン） */
.tour-order-sidebar.enabled {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

/* モバイル: sceneList と同様に left ベースでスライド */
.mobile .tour-order-sidebar {
  left: calc(-100% - var(--sidebar-left-offset, 12px) - var(--safe-left)) !important;
  right: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: left 320ms ease !important;
  /* スマホでは常にサイドバー幅（--sidebar-width）で表示する */
  width: var(--sidebar-width, 220px) !important;
  max-width: var(--sidebar-width, 220px) !important;
}

.mobile .tour-order-sidebar.enabled {
  left: calc(var(--sidebar-left-offset, 12px) + var(--safe-left)) !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* ツアーコントロール（サイドバー内インライン配置・縦並び） */
 .tour-controls-inline {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 10px;
   background: linear-gradient(135deg, rgba(31, 111, 232, 0.18), rgba(31, 111, 232, 0.12));
   border-bottom: 1px solid rgba(31, 111, 232, 0.3);
   border-radius: 8px;
   margin-bottom: 8px;
 }

.tour-controls-inline button {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tour-controls-row {
  display: flex;
  gap: 8px;
}

.tour-controls-row button {
  width: 100%;
}

.tour-controls-inline button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

.tour-controls-inline #tourStartBtnInline {
  background: linear-gradient(135deg, #1f6fe8, #165fcf);
  border-color: rgba(31, 111, 232, 0.5);
  box-shadow: 0 0 8px rgba(31, 111, 232, 0.4);
}

.tour-controls-inline #tourStartBtnInline:hover {
  background: linear-gradient(135deg, #2476f3, #176ed6);
  box-shadow: 0 0 12px rgba(31, 111, 232, 0.6);
}

/* ツアー進捗ヘッダーセクション */
.tour-progress-header {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(31, 111, 232, 0.16), rgba(22, 95, 207, 0.12));
}

.tour-progress-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.tour-progress-header h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  padding: 0;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 進捗情報行 */
.tour-progress-info {
  display: none;
}

.tour-progress-info-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tour-progress-info-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tour-progress-info-value {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

/* プログレスバーコンテナ */
.tour-progress-bar-container {
  position: relative;
  height: 4px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.tour-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #1f6fe8, #165fcf);
  border-radius: 2px;
  transition: width 300ms ease;
  box-shadow: 0 0 8px rgba(31, 111, 232, 0.75);
}

/* 現在ステップ情報 */
.tour-current-step {
  padding: 10px;
  background: rgba(31, 111, 232, 0.18);
  border: 1px solid rgba(31, 111, 232, 0.3);
  border-radius: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}

.tour-current-step-name {
  font-weight: 700;
  color: #fff;
  font-size: 14px;
  margin-bottom: 4px;
}

.tour-current-step-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* ツアーリストコンテナ */
.tour-order-list-container {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px;
}

/* PC版: 縦スクロール */
.desktop .tour-order-list-container {
  overflow-y: auto;
  overflow-x: hidden;
}

/* モバイル横向きなど「高さが足りない」時のコンパクト表示（JS が .compact を付与） */
.mobile .tour-order-sidebar.compact .tour-progress-header {
  padding: 10px !important;
}

.mobile .tour-order-sidebar.compact .tour-progress-header-top {
  margin-bottom: 8px !important;
}

.mobile .tour-order-sidebar.compact .tour-controls-inline {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 8px !important;
  margin-bottom: 8px !important;
}

.mobile .tour-order-sidebar.compact .tour-controls-inline button {
  width: calc(50% - 3px) !important;
  padding: 8px 8px !important;
  font-size: 12px !important;
}

.mobile .tour-order-sidebar.compact .tour-controls-inline #tourStartBtnInline {
  /* compact 時は「再開」も他ボタン同様に2列に収める */
  width: calc(50% - 3px) !important;
}

.mobile .tour-order-sidebar.compact .tour-controls-row {
  width: 100% !important;
  gap: 6px !important;
}

.mobile .tour-order-sidebar.compact .tour-controls-row button {
  flex: 1 1 0 !important;
  width: auto !important;
  padding: 8px 8px !important;
  font-size: 12px !important;
}

.mobile .tour-order-sidebar.compact .tour-current-step {
  padding: 8px !important;
  margin-bottom: 8px !important;
}

/* 追加: モバイル版では順番リストを横スクロールにする（高さ制限でも見切れにくい） */
.mobile .tour-order-list-container {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 10px;
  scroll-behavior: smooth;
  padding: 8px 10px !important;
}

.mobile .tour-order-list {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mobile .tour-order-list li {
  flex: 0 0 auto !important;
  width: 220px !important;
  margin: 0 !important;
  scroll-snap-align: start;
}

/* ツアーリスト */
.tour-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tour-order-list li {
  margin: 0 0 6px 0;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
}

.tour-order-list li:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ステップナンバー */
.tour-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(31, 111, 232, 0.3);
  color: rgba(31, 111, 232, 0.9);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.tour-step-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* アクティブ状態: 現在進行中のステップ */
.tour-order-list li.active {
  background: linear-gradient(135deg, rgba(31, 111, 232, 0.25), rgba(31, 111, 232, 0.18));
  border: 1px solid rgba(31, 111, 232, 0.55);
  color: #fff;
  box-shadow: 0 0 12px rgba(31, 111, 232, 0.3);
}

.tour-order-list li.active .tour-step-number {
  background: linear-gradient(135deg, #1f6fe8, #165fcf);
  color: #fff;
  box-shadow: 0 0 8px rgba(31, 111, 232, 0.5);
}

/* 完了済みステップ */
.tour-order-list li.completed {
  opacity: 0.85;
  color: rgba(255, 255, 255, 0.5);
}

.tour-order-list li.completed .tour-step-number {
  background: rgba(76, 175, 80, 0.2);
  color: rgba(76, 175, 80, 0.7);
}

/* 未実施ステップ */
.tour-order-list li.pending {
  opacity: 0.85;
}

.tour-order-list li.pending .tour-step-number {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
}

/* ステップの経過時間バー（削除） */
.tour-step-timer {
  display: none !important;
}

/* モバイル対応 */
@media (max-width: 520px) {
  .tour-order-sidebar {
    /* モバイル: 画面全体を覆わない（幅は sidebar-width を上限に）+ 左スライド開閉 */
    left: calc(-100% - var(--sidebar-left-offset, 12px) - env(safe-area-inset-left, 0)) !important;
    top: calc(66px + var(--sidebar-top-offset, 8px)) !important;
    width: calc(100% - var(--sidebar-left-offset, 12px) - var(--sidebar-right-offset, 12px) - env(safe-area-inset-left, 0) - env(safe-area-inset-right, 0)) !important;
    max-width: var(--sidebar-width, 300px) !important;
    /* デフォルトは縦画面で邪魔になりにくいように少し抑える（横画面は下の上書きで解除） */
    max-height: min(calc(100vh - (66px + var(--sidebar-top-offset, 8px) + var(--sidebar-bottom-offset, 20px))), 62vh) !important;
  }

  .tour-order-sidebar.enabled {
    left: calc(var(--sidebar-left-offset, 12px) + env(safe-area-inset-left, 0)) !important;
  }

  .tour-order-list-container {
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 10px;
    scroll-behavior: smooth;
    padding: 8px 10px !important;
  }

  .tour-order-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .tour-progress-header {
    padding: 12px;
  }

  .tour-progress-info {
    font-size: 12px;
  }

  .tour-order-list li {
    flex: 0 0 auto !important;
    width: 220px !important;
    margin: 0 !important;
    scroll-snap-align: start;
    font-size: 12px;
    padding: 8px;
  }

  .tour-step-number {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
}

/* スマホ横画面では高さ制限(62vh)を外して、シーン順が見える領域を優先する */
@media (max-width: 520px) and (orientation: landscape) {
  .tour-order-sidebar {
    max-height: calc(100vh - (66px + var(--sidebar-top-offset, 8px) + var(--sidebar-bottom-offset, 20px))) !important;
    height: calc(100vh - (66px + var(--sidebar-top-offset, 8px) + var(--sidebar-bottom-offset, 20px))) !important;
  }
}

/* モバイル横向き（高さが低い時だけ）: 上部コントロールをコンパクト化してリスト領域を確保 */
@media (orientation: landscape) and (max-height: 440px) {
  .mobile .tour-progress-header {
    padding: 10px !important;
  }

  .mobile .tour-progress-header-top {
    margin-bottom: 8px !important;
  }

  .mobile .tour-controls-inline {
    /* 縦並び→折り返し2列レイアウト */
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px !important;
    margin-bottom: 8px !important;
  }

  .mobile .tour-controls-inline button {
    /* 2列にして高さを削減 */
    width: calc(50% - 3px) !important;
    padding: 8px 8px !important;
    font-size: 12px !important;
  }

  /* 開始/再開ボタンは目立たせるため全幅 */
  .mobile .tour-controls-inline #tourStartBtnInline {
    width: 100% !important;
  }

  /* ただし「再開」時はコンパクトに（2列に収める） */
  .mobile .tour-controls-inline #tourStartBtnInline.is-resume {
    width: calc(50% - 3px) !important;
  }

  /* 戻る/次へ の行も詰める */
  .mobile .tour-controls-row {
    width: 100% !important;
    gap: 6px !important;
  }
  .mobile .tour-controls-row button {
    flex: 1 1 0 !important;
    width: auto !important;
    padding: 8px 8px !important;
    font-size: 12px !important;
  }

  .mobile .tour-current-step {
    padding: 8px !important;
    margin-bottom: 8px !important;
  }

}

/* スクロールバーのスタイリング（Webkit対応） */
.tour-order-sidebar::-webkit-scrollbar {
  width: 6px;
}

.tour-order-sidebar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}

.tour-order-sidebar::-webkit-scrollbar-thumb {
  background: rgba(31, 111, 232, 0.55);
  border-radius: 3px;
  transition: background 200ms ease;
}

.tour-order-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 111, 232, 0.75);
}

/* アニメーション */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 8px rgba(31, 111, 232, 0.55);
  }
  50% {
    box-shadow: 0 0 16px rgba(31, 111, 232, 0.75);
  }
  100% {
    box-shadow: 0 0 8px rgba(31, 111, 232, 0.55);
  }
}

.tour-order-list li.active {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Orientation Modal */
.orientation-modal {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  text-align: center;
}
.orientation-content {
  position: relative;
  padding: 20px;
  max-width: 80%;
}
.orientation-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
  padding: 10px;
}
.orientation-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  position: relative;
  /* 回転の“見切れ”を避けるため、外枠は正方形のコンテナにする */
  display: block;
}

/* 回転を示す矢印（回転フェーズのみ表示） */
.orientation-arrows {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  opacity: 0;
  animation: arrows-visibility 1.9s ease-in-out infinite;
  will-change: opacity;
}

/* 矢印自体を時計回りに回す（視認性アップ） */
.orientation-arrows-spin {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  animation: arrows-spin-cw 1.9s linear infinite;
  will-change: transform;
}

.orientation-arrow {
  position: absolute;
  left: 50%;
  opacity: 0.95;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: rgba(255,255,255,0.95);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255,255,255,0.18);
}

/* 矢尻 */
.orientation-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

/* 上の矢印（右向き） */
.orientation-arrow-left {
  top: -6px;
}

.orientation-arrow-left::after {
  right: -1px;
  border-left: 12px solid rgba(255,255,255,0.95);
}

/* 下の矢印（左向き） */
.orientation-arrow-right {
  bottom: -6px;
}

.orientation-arrow-right::after {
  left: -1px;
  border-right: 12px solid rgba(255,255,255,0.95);
}

/* 端末の形（縦長の長方形）を擬似要素で描画し、それ自体を回転させる */
.orientation-icon::before {
  content: '';
  position: absolute;
  /* 72x72 の中で 40x60 を中央配置 */
  top: 6px;
  bottom: 6px;         /* 高さ 60px */
  left: 16px;
  right: 16px;         /* 幅 40px */
  border: 2px solid #fff;
  border-radius: 6px;
  box-sizing: border-box;
  transform-origin: 50% 50%;
  /* 縦→横→縦 を繰り返して「横向きにしてね」を明確に見せる */
  animation: device-rotate-loop 1.9s ease-in-out infinite;
  will-change: transform;
}

@keyframes device-rotate-loop {
  /* 縦のまま少し待つ */
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(0deg); }
  /* 横向きに回す */
  45%  { transform: rotate(90deg); }
  /* 横向きを少し保持 */
  72%  { transform: rotate(90deg); }
  /* 縦へ戻す */
  100% { transform: rotate(0deg); }
}

/* 矢印は「横向きになる(縦→横)」間と横向き保持中だけ表示し、戻る時は消す */
@keyframes arrows-spin-cw {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 矢印は「縦→横」回転中だけ表示（横保持/横→縦では非表示） */
@keyframes arrows-visibility {
  /* 縦のまま */
  0%   { opacity: 0; }
  18%  { opacity: 0; }
  /* 横向きに回すフェーズで表示 */
  22%  { opacity: 1; }
  45%  { opacity: 1; }
  /* 横向き保持に入ったら消す */
  55%  { opacity: 0; }
  100% { opacity: 0; }
}