/* ロゴオーバーレイ（パノラマ上に固定表示される） */
.logo-overlay {
  border-radius: 0;
  overflow: visible;
  background: transparent;
  cursor: pointer;
  z-index: 1000;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.logo-overlay img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
  background: transparent;
}

/* テキストオーバーレイ: 背景は薄暗い半透明、角丸＋パディングで読みやすくする */
.overlay-text {
  background: rgba(0,0,0,0.45) !important; /* 文字のみ薄暗い背景 */
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  -webkit-user-select: text;
  user-select: text;
  box-shadow: none; /* 影は不要 */
}

/* 小画面調整 */
@media (max-width: 520px) {
  .logo-overlay { width: 88px !important; }
  .overlay-text { font-size: 12px !important; padding: 5px 8px !important; }
}

/* 動画オーバーレイ用の内部コンテナ */
.overlay-video {
  display: inline-block;
  background: transparent; /* 内部は透明。枠が必要ならここで指定 */
  padding: 0;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
}

/* iframe（YouTube）自体のスタイル */
.overlay-video iframe {
  display: block;
  width: 100%;
  height: auto;
  max-width: 640px; /* 必要に応じて調整 */
  background: transparent;
  border: none;
}

/* レスポンシブ補助: 小さい画面では幅を抑える */
@media (max-width: 520px) {
  .overlay-video iframe {
    max-width: 320px;
  }
}

/* Sidebar group header */
.scene-group {
  list-style: none;
  margin: 0;
  padding: 0;
}
.scene-group .group-header {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.215);
}
.scene-group .group-header:focus {
  outline: 2px solid rgba(255,255,255,0.12);
  outline-offset: -2px;
}

/* 矢印表示（疑似要素を使用） */
.scene-group .group-header::after {
  content: "▸";
  transform: rotate(0deg);
  transition: transform 180ms ease;
  margin-left: 12px;
  font-size: 12px;
  opacity: 0.9;
}

/* 展開状態: 矢印を回転させ内容を表示する */
.scene-group:not(.collapsed) .group-header::after {
  transform: rotate(90deg);
}

/* グループの内容（デフォルトは折りたたんでコンパクトにする） */
.scene-group .group-content {
  padding-left: 6px;
  transition: max-height 220ms ease, opacity 180ms ease;
  overflow: hidden;
}

/* 折りたたみ: 内容を隠す */
.scene-group.collapsed .group-content {
  max-height: 0;
  opacity: 0;
  display: block; /* 流れは維持するが高さはゼロにする */
}

/* 展開: 内容を表示する */
.scene-group:not(.collapsed) .group-content {
  max-height: 2000px; /* 十分大きくして全アイテムを表示できるようにする */
  opacity: 1;
}

/* グループ内部のアンカーは既存スタイルを継承する */
.scene-group .group-content .scene { display: block; }

/* タッチターゲット: .text の元のスタイルを維持する */
.scene-group .group-content .text {
  padding-left: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ---------- 修正: autorotate の背景 / トグルの高さ / モバイルの縦中央寄せ ---------- */

/* sceneListToggle と autorotate をデスクトップで同じ見た目にし中央寄せにする */
#sceneListToggle,
#autorotateToggle {
  width: 40px !important;
  height: 40px !important;
  padding: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(103,115,131,0.8) !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

/* autorotate を右上に固定表示し、左トグルと見た目を合わせる */
#autorotateToggle {
  position: fixed !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 14010 !important;
  margin: 0 !important;
}

/* 固定ボタン内のアイコンは通常のフローで配置（flex により中央寄せ） */
#autorotateToggle .icon,
#sceneListToggle .icon {
  position: static !important;
  width: 28px !important;
  height: 28px !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
}

/* フルスクリーンボタンがある場合は autorotate のオフセットを保持する */
body.fullscreen-enabled #autorotateToggle {
  right: 48px !important;
}
body.fullscreen-enabled.mobile #autorotateToggle {
  right: 58px !important;
  top: 10px !important;
}

/* モバイルでは両トグルを少し大きめにする */
@media (max-width: 520px) {
  #sceneListToggle,
  #autorotateToggle {
    width: 50px !important;
    height: 50px !important;
    padding: 5px !important;
  }
  #autorotateToggle { top: 10px !important; right: 10px !important; }
  #sceneListToggle { top: 0 !important; left: 0 !important; } /* 左端に固定 */
}

/* サイドバー項目のアンカーを flex コンテナにしてテキストを縦中央にする */
#sceneList .scene > a {
  display: flex !important;
  align-items: center !important;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* 左にアクセントバーのスペースを確保するためのパディング */
  padding-left: 8px;
}

/* .text のパディングと縦中央揃えを統一する。
   モバイルでは line-height をアイテム高さに合わせて完全に中央寄せする。 */
#sceneList .scene .text {
  padding: 0 12px;
  line-height: normal;
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* モバイル: 行高をアイテム高さに合わせて垂直中央を調整 */
@media (max-width: 520px) {
  .mobile #sceneList .scene { height: 40px; }
  .mobile #sceneList .scene .text {
    line-height: 40px !important;    /* 選択背景内でテキストを中央に配置する */
    padding: 0 12px;
  }
}

/* 左アクセント擬似要素の位置が padding-left と一致することを保証する */
#sceneList .scene > a::before {
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 4px;
}

/* サイドバーの表示/非表示は変数幅を利用するようにする */
#sceneList {
  /* 表示時はビューポート左端に配置される */
  left: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: transform 320ms ease, left 320ms ease !important;
  z-index: 13005;
}

/* 有効状態: パネルを確実に表示してフローティングコントロールより前面にする */
#sceneList.enabled {
	z-index: 16050 !important;
  transition: transform 320ms ease, left 320ms ease !important;
}

/* デスクトップ: サイドバー幅変数を用いて translateX で隠す */
@media (min-width: 521px) {
  #sceneList {
    left: 0 !important;
    transform: translateX(calc(-1 * var(--sidebar-width))) !important;
    -webkit-transform: translateX(calc(-1 * var(--sidebar-width))) !important;
    margin-left: 0 !important;
    transition: transform 320ms ease !important;
  }

  #sceneList.enabled {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
  }
}

/* モバイル: left ベースのスライドを維持する（フル幅コンテナ） */
@media (max-width: 520px) {
  #sceneList {
    left: calc(-100% - var(--sidebar-left-offset)) !important;
    transform: none !important;
  }
  #sceneList.enabled {
    left: var(--sidebar-left-offset) !important;
    transform: none !important;
  }

  /* モバイルで .scenes が固定ボタンより前面に出るようにする */
  #sceneList.enabled .scenes {
    z-index: 14025 !important;
  }
}
@media (min-width: 521px) {
  /* 各シーン行を 40px に揃え、テキストを中央寄せにする */
  #sceneList .scene {
    height: 40px !important;
  }
  #sceneList .scene > a {
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    padding-left: 8px !important;
  }
  #sceneList .scene .text {
    line-height: 40px !important;
    padding: 0 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* === sceneListToggle を autorotateToggle と視覚的・配置的に一致させる === */
#sceneListToggle {
  position: fixed !important;            /* autorotate と同じくビューポートに固定 */
  top: 8px !important;
  left: 8px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(103,115,131,0.8) !important;
  border-radius: 10px !important;
  z-index: 14010 !important;             /* autorotate と同列に配置 */
  box-sizing: border-box !important;
}

/* モバイル: autorotate と同じ余白を使う（少し大きめ） */
@media (max-width: 520px) {
  #sceneListToggle {
    top: 10px !important;
    left: 10px !important;
    width: 50px !important;
    height: 50px !important;
    padding: 5px !important;
  }
}

/* アイコンを autorotate のアイコンと同サイズにする */
#sceneListToggle .icon {
  position: static !important;
  width: 28px !important;
  height: 28px !important;
}

/* モバイル: シーン名を画面中央に配置し、固定トグルと重ならないようにする */
@media (max-width: 520px) {
  .mobile #titleBar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 66px !important;
    z-index: 14000 !important;
    box-sizing: border-box !important;
    padding-left: env(safe-area-inset-left, 0) !important;
    padding-right: env(safe-area-inset-right, 0) !important;
  }

  .mobile #titleBar .sceneName {
    position: absolute !important;
    left: 50% !important;
    top: 8px !important; /* 上からの垂直オフセット */
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    max-width: calc(100% - 120px) !important; /* 両側に約60pxのスペースを残す */
    width: auto !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    display: block !important;
    white-space: normal !important;
    text-overflow: unset !important;
    overflow: visible !important;
    text-align: center !important;
    box-sizing: border-box !important;
    z-index: 14001 !important; /* コントロールより上に表示 */
  }
}

@media (min-width: 521px) {
  /* デスクトップ向けに場所名を大きく表示する */
  #titleBar .sceneName {
    font-size: 24px !important;       /* 20px → 24px に拡大 */
    padding: 12px 24px !important;    /* 横パディングを広げてバランスを調整 */
    max-width: calc(100% - 200px) !important; /* 左右コントロール分の余白を確保 */
    line-height: 1.1 !important;
  }
}

/* 最終上書き: 全ブレークポイントでオフセットが適用されるようにし、上下左右の余白を作る */

/* デフォルトのオフセット（調整可能） */
:root {
  --sidebar-left-offset: 12px;
  --sidebar-right-offset: 12px;
  --sidebar-top-offset: 8px;
  /* サイドバー下部の余白をアンケート（bottom:20px）と同じにする。
     safe-area-inset-bottom を加味して端末のナビバー／インセットにも対応。 */
  --sidebar-bottom-offset: calc(20px + env(safe-area-inset-bottom, 0px));
  --sidebar-width: 220px;
  --sidebar-bg: rgba(20,24,30,0.48);
}

/* サイドバーコンテナがトップオフセットを尊重するようにする（デスクトップ既定） */
#sceneList {
  top: calc(56px + var(--sidebar-top-offset)) !important;
  left: var(--sidebar-left-offset) !important; /* 表示時は左側に余白を置く */
}

/* デスクトップ: 隠す挙動に左オフセットを含める */
@media (min-width: 521px) {
  #sceneList {
    transform: translateX(calc(-1 * (var(--sidebar-width) + var(--sidebar-left-offset)))) !important;
    -webkit-transform: translateX(calc(-1 * (var(--sidebar-width) + var(--sidebar-left-offset)))) !important;
  }
  #sceneList.enabled {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    left: var(--sidebar-left-offset) !important;
  }
}

/* モバイル: top/left/right のオフセットと幅を調整し、隠す状態ではオフセット込みで完全に画面外に移動させる */
@media (max-width: 520px) {
  #sceneList {
    top: calc(66px + var(--sidebar-top-offset)) !important;
    left: calc(-100% - var(--sidebar-left-offset)) !important;
    right: var(--sidebar-right-offset) !important;
    width: calc(100% - var(--sidebar-left-offset) - var(--sidebar-right-offset)) !important;
  }
  #sceneList.enabled {
    left: var(--sidebar-left-offset) !important;
    right: var(--sidebar-right-offset) !important;
    width: calc(100% - var(--sidebar-left-offset) - var(--sidebar-right-offset)) !important;
  }

  /* モバイル: 内部コンテンツはモバイルタイトルバーと上下オフセットを考慮する必要がある */
  #sceneList.enabled .scenes {
    max-height: calc(100vh - (66px + var(--sidebar-top-offset) + var(--sidebar-bottom-offset))) !important;
  }
  /* フォールバックの内部制限 */
  #sceneList .scenes {
    max-height: calc(100vh - (66px + var(--sidebar-top-offset) + var(--sidebar-bottom-offset))) !important;
  }
}

/* サイドバー左端とトグルの左端を揃える（デスクトップとモバイル両方） */
#sceneListToggle {
  /* サイドバーの左オフセットを使い、トグルの左端を揃える */
  left: calc(var(--sidebar-left-offset)) !important;
  /* 固定位置と top は既存ルールを保持する（明示的に記載） */
  position: fixed !important;
  top: 8px !important;
}

/* モバイル: safe-area inset と top オフセットを考慮し、トグルを視覚的に整列させる */
@media (max-width: 520px) {
  #sceneListToggle {
    left: calc(var(--sidebar-left-offset) + env(safe-area-inset-left, 0px)) !important;
    top: calc(8px + var(--sidebar-top-offset, 0px)) !important;
    width: 50px !important; /* モバイルサイズを維持 */
    height: 50px !important;
  }
}

/* 角丸を両側に適用する */
#sceneList {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}
#sceneList .scenes {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* sceneList が幅計算で一貫するよう box-sizing を保証する */
#sceneList, #sceneList .scenes {
  box-sizing: border-box !important;
}

/* トグルボタンにサイドバーと同じ半透明背景を強制する */
#sceneListToggle,
#autorotateToggle {
  background: var(--sidebar-bg) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: 10px !important;
  color: inherit !important;
  /* サイズや配置は既存のルールを保つ */
}

/* 有効状態でも同じ見た目を保つ */
#sceneListToggle.enabled,
#autorotateToggle.enabled {
  background: var(--sidebar-bg) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* モバイル: 同じ背景を保ち safe-area inset を尊重する */
@media (max-width: 520px) {
  #sceneListToggle,
  #autorotateToggle {
    background: var(--sidebar-bg) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  #sceneListToggle {
    left: calc(var(--sidebar-left-offset) + env(safe-area-inset-left, 0px)) !important;
  }
}

/* 変更: 言語切替を autorotate の左側（同じトップ位置）に移動 */
#languageToggle {
  position: fixed;
  /* autorotate の right:8px + autorotate幅 40px + スペース 8px を合計して左側に配置 */
  right: calc(8px + 40px + 8px);
  top: 8px; /* autorotate と同じ高さに揃える */
  z-index: 14011; /* autorotate(14010) より少し上に出す */
  display:flex;
  gap:6px;
  background: rgba(6,12,24,0.44);
  padding:6px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(6,12,18,0.45);
}

/* ページ右上の言語ボタンの見た目（既存のまま）。色は維持 */
#languageToggle .lang-btn {
  color: #fff;
  background: transparent;
  border: none;
  padding:6px 10px;
  border-radius:8px;
  font-weight:700;
}
#languageToggle .lang-btn.active {
  background: linear-gradient(180deg,#1f6fe8,#165fcf);
  color: #fff;
}

/* モバイル時: autorotate と同じオフセット・サイズ（autorotate がモバイルで 50px に拡大するため合わせる） */
@media (max-width:520px) {
  /* モバイルでは言語ボタンを画面左下にコンパクト化（safe-area に対応） */
  #languageToggle {
    position: fixed !important;
    left: calc(var(--sidebar-left-offset,12px) + env(safe-area-inset-left, 8px)) !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    right: auto !important;
    z-index: 10000 !important; /* ミニマップ拡張時（z-index: 14000台）より下に配置 */
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 10px !important;
    background: rgba(6,12,24,0.44) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 8px 20px rgba(6,12,18,0.35) !important;
  }
   #languageToggle .lang-btn { padding:6px 8px; font-size:13px; }
}

/* ---------- 最終上書き: デスクトップ含む全ブレークポイントで折り返しを有効化 ---------- */
/* 既存の強いルール（height:40px !important 等）を確実に上書きする */
#sceneList .scene {
  height: auto !important;
  min-height: 40px !important; /* 見た目は維持 */
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  box-sizing: border-box !important;
}

#sceneList .scene > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  height: auto !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* テキストは折り返しを許可（デスクトップは最大2行、モバイルは最大3行） */
#sceneList .scene .text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
  max-height: calc(2 * 1.25em) !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  padding: 0 12px !important;
}

/* モバイルでは行数を増やす */
@media (max-width: 520px) {
  #sceneList .scene .text {
    -webkit-line-clamp: 3 !important;
    max-height: calc(3 * 1.3em) !important;
    line-height: 1.3 !important;
  }
}

/* 擬似要素（アクセントバー）の位置を複数行に合わせる */
#sceneList .scene > a::before {
  top: 10px !important;
  bottom: 10px !important;
}