/* --- ミニマップ --- */
#miniMap {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 180px;
  height: 180px;
  z-index: 12000;
  background: rgb(255, 255, 255);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  overflow: hidden;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
  pointer-events: auto;
  user-select: none;
  /* デフォルトで表示。シーンに地図がない場合は JS 側で hide する */
  display: block;
  overscroll-behavior: contain; /* ホイール/タッチ操作のスクロールを親へ伝播させない */
}

/* マップ画像コンテナ: transform でズームとパンを行う */
#miniMap .mini-map-image {
  /* 変更: コンテナ中央を基準に配置し、JSでtranslate制御する */
  position: absolute;
  left: 50%;
  top: 50%;
  /* width/height は JS で制御されるが、初期値として 100% を指定しない（中央配置のため） */
  object-fit: none;
  display: block;
  pointer-events: none;
  user-select: none;
  transition: transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: 0 0; /* JSのtranslate計算は左上基準で行うため */
  /* 高画質レンダリング設定 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Canvas も同様に中央配置 */
#miniMapCanvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  pointer-events: none;
  user-select: none;
}

/* マーカーコンテナ: 画面中央に固定する */
#miniMapMarker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  pointer-events: none;
  display: block;
  transform: translate(-50%, -50%);
  z-index: 2;
  /* 追加: 画像の移動と同期させるため left/top もアニメーション */
  transition: left 360ms cubic-bezier(0.22,0.8,0.3,1), top 360ms cubic-bezier(0.22,0.8,0.3,1);
  will-change: left, top;
}

/* ドラッグ中は即時追従（遅延を無効化） */
#miniMap.mini-dragging #miniMapMarker {
  transition: none !important;
}

/* 視野角を示す扇形 */
.map-marker-sector {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center center;
}

/* ドラッグ中は遅延をなくして「吸い付く」追従にする */
#miniMap.mini-dragging .map-marker-sector {
  transition: none !important;
}

#miniMap.mini-dragging .mini-map-image {
  transition: none !important;
}

.map-marker-sector svg {
  width: 100%;
  height: 100%;
  display: block;
}

.map-marker-sector path {
  fill: url(#sectorGradient);
  stroke: none; /* 曲線部分を透明にするためにストロークを削除 */
}

/* 中央の位置ドット */
.map-marker-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  /* WebKit等での高DPI対応のため scale 変数を適用 */
  width: calc(12px * var(--mini-overlay-scale, 1));
  height: calc(12px * var(--mini-overlay-scale, 1));
  background: #f5b700;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(245, 183, 0, 0.8), 0 0 3px rgba(255, 255, 255, 0.6);
  animation: pulse 2s ease-in-out infinite;
  z-index: 1;
}

/* パルスアニメーション */
@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.7;
  }
}

/* 追加: ミニマップの全シーンドット */
.mini-map-dots {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  overflow: visible;
  /* 改良: ラベルをマーカーより前面に出すため z-index を調整（marker z-index:2 の上） */
  z-index: 3;
  display: none;              /* 拡大時にのみ表示 */
  pointer-events: none;       /* コンテナ自体はイベントを受けない */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#miniMap.mini-expanded .mini-map-dots,
#miniMap:hover .mini-map-dots {
  display: block;
}

/* ツアー中: 拡張時の「他パノラマへ移動する丸」を非表示（現在地は常に表示） */
body.tour-running #miniMap.mini-expanded .mini-map-dot:not(.current),
body.tour-running #miniMap:hover .mini-map-dot:not(.current) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 各シーンの丸ドット */
.mini-map-dot {
  position: absolute;
  left: 0; top: 0;
  /* 小さめにして画面の邪魔にならないように */
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8); /* 透明度を下げて背景マップが見やすく */
  /* 境界線を薄くして柔らかく */
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 0 4px rgba(0,0,0,0.2); /* 影を柔らかくして目立つが控えめに */
  transform: translate(-50%, -50%) scale(var(--mini-overlay-scale, 1));
  /* 当たり判定を視覚サイズに合わせる */
  padding: 0 !important;
  box-sizing: content-box !important;
  pointer-events: auto;       /* クリック可能（ラベルは無効化する） */
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;

  /* 追加: ラベルが dot の枠外へ出ても表示できるようにする */
  overflow: visible !important;
}

/* 小画面でわずかに大きく */
@media (max-width: 520px) {
  /* モバイルでは若干小さめ（だがデフォルトより控えめ） */
  .mini-map-dot { width: 7px; height: 7px; border-width: 1px; }
}

/* --- 改良: ミニマップの拡大を width/height で行い WebKit でも高画質を維持する ---
   --- transform:scale()を使わないことで、WebKitでも各要素が正しいサイズでレンダリングされる --- */
:root {
  --mini-base-size: 180px;
  /* 拡大倍率（参照用、実際の拡大はwidth/heightで行う） */
  --mini-expanded-scale: 3; /* デスクトップ既定：控えめに */
  --mini-expanded-scale-mobile: 2.2; /* モバイル既定：さらに控えめに */
  /* 拡大後のサイズ */
  --mini-expanded-size: calc(var(--mini-base-size) * var(--mini-expanded-scale));
  --mini-expanded-size-mobile: calc(var(--mini-base-size) * var(--mini-expanded-scale-mobile));
}

/* 基本設定: GPU フレンドリーにする */
#miniMap {
  width: var(--mini-base-size);
  height: var(--mini-base-size);
  /* 画面からはみ出さないよう制限 */
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 36px);
  will-change: width, height, box-shadow;
  /* width/height の変更をアニメーション */
  transition: width 220ms cubic-bezier(0.22,0.8,0.3,1), 
              height 220ms cubic-bezier(0.22,0.8,0.3,1), 
              box-shadow 220ms cubic-bezier(0.22,0.8,0.3,1);
}

/* 画像: JS が正確な translate/scale を制御する */
#miniMap .mini-map-image {
  will-change: transform;
  transition: transform 260ms cubic-bezier(0.22,0.8,0.3,1);
  transform-origin: 0 0;
}

/* マーカー: レイアウトは維持しつつ transform で位置調整する */
#miniMapMarker {
  /* translate で中央に配置 */
  transform: translate(-50%, -50%);
  transition: left 260ms cubic-bezier(0.22,0.8,0.3,1), top 260ms cubic-bezier(0.22,0.8,0.3,1);
  will-change: left, top;
}

/* ドットは見た目サイズを固定する */
.map-marker-dot {
  width: 12px;
  height: 12px;
  transition: none;
  will-change: auto;
}

/* ホバー時の見え方: デスクトップのホバーのみCSS側で処理 */
/* transform:scale()を使わず、width/heightを変更して高画質を維持 */
#miniMap:hover {
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  width: var(--mini-expanded-size);
  height: var(--mini-expanded-size);
}

/* タッチ端末では :hover がタップ後に残ることがあるため hover 拡大を無効化 */
@media (hover: none) {
  #miniMap:hover {
    width: var(--mini-base-size);
    height: var(--mini-base-size);
  }
}

/* 拡大時の見え方: JS側で処理する */
/* width/heightベースの拡大でWebKitでも高画質を維持 */
#miniMap.mini-expanded {
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  width: var(--mini-expanded-size);
  height: var(--mini-expanded-size);
}

/* PC(hover可能)では mini-expanded でも拡大表示する */
@media (any-hover: hover) {
  #miniMap.mini-expanded { 
    width: var(--mini-expanded-size); 
    height: var(--mini-expanded-size); 
  }
}


/* モバイル: ベースサイズを小さくし、width/height ベースで拡大する */
@media (max-width: 520px) {
  :root { 
    --mini-base-size: 140px; 
    --mini-expanded-size-mobile: calc(var(--mini-base-size) * var(--mini-expanded-scale-mobile));
  }
  #miniMap {
    width: var(--mini-base-size);
    height: var(--mini-base-size);
    /* width/height の変更をアニメーション */
    transition: width 220ms cubic-bezier(0.22,0.8,0.3,1), 
                height 220ms cubic-bezier(0.22,0.8,0.3,1), 
                box-shadow 220ms cubic-bezier(0.22,0.8,0.3,1);
  }
  
  /* モバイルではホバーは反応させない（ミニマップは常にタップで操作） */
  #miniMap:hover {
    width: var(--mini-base-size);
    height: var(--mini-base-size);
  }
  
  /* モバイルでは expand クラス時に拡大サイズを適用 */
  #miniMap.mini-expanded {
    width: var(--mini-expanded-size-mobile);
    height: var(--mini-expanded-size-mobile);
    /* 画面いっぱいに近い拡張時は余白を少しだけ小さくする */
    right: 12px;
    bottom: 12px;
  }
}

/* スマホ横向き: 画面の高さが低いので、縮小時は更に小さく、拡張時は少し大きめに */
@media screen and (max-height: 500px) and (orientation: landscape) {
  #miniMap {
    width: 120px !important;
    height: 120px !important;
    right: calc(12px + var(--safe-right, 0px)) !important;
    bottom: calc(12px + var(--safe-bottom, 0px)) !important;
  }
  #miniMap:hover {
    width: 120px !important;
    height: 120px !important;
  }
  #miniMap.mini-expanded {
    width: 340px !important;
    height: 340px !important;
    max-width: calc(100vw - 24px - var(--safe-left, 0px) - var(--safe-right, 0px)) !important;
    max-height: calc(var(--app-height, 100vh) - 24px - var(--safe-top, 0px) - var(--safe-bottom, 0px)) !important;
    right: calc(12px + var(--safe-right, 0px)) !important;
    bottom: calc(12px + var(--safe-bottom, 0px)) !important;
  }

  /* マーカーは常に同じサイズ（打ち消しスケールは不要） */
  #miniMap.mini-expanded #miniMapMarker { transform: translate(-50%, -50%); }
  #miniMap:hover #miniMapMarker { transform: translate(-50%, -50%); }

  #miniMap.mini-expanded .map-marker-dot,
  #miniMap:hover .map-marker-dot { 
    width: calc(12px * var(--mini-overlay-scale, 1));
    height: calc(12px * var(--mini-overlay-scale, 1));
  }
}

/* デスクトップ: 拡大時もサイズを維持（小さくしない） */
@media (min-width: 521px) {
  #miniMap.mini-expanded .map-marker-dot,
  #miniMap:hover .map-marker-dot { 
    width: calc(12px * var(--mini-overlay-scale, 1));
    height: calc(12px * var(--mini-overlay-scale, 1));
  }
}

/* WebKit: 拡大時にオーバーレイスケールが二重に効いて丸が肥大するのを防ぐ */
@supports (-webkit-touch-callout: none) {
  #miniMap.mini-expanded .map-marker-dot,
  #miniMap:hover .map-marker-dot {
    width: 12px;
    height: 12px;
  }
}

/* =====================================================
   シーンドットとラベルのスタイル
   ===================================================== */

/* --- width/height ベースの拡大により WebKit でも高画質を維持 --- */

/* シーンドット */
.mini-map-dot {
  position: absolute;
  left: 0; top: 0;
  /* width/heightベース拡大では要素サイズは変わらないので、拡大時に見やすいサイズに */
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(0,0,0,0.25);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  overflow: visible !important;
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

/* ホバー時のドット強調 */
.mini-map-dot:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%) scale(1.15);
}

/* 小画面でのドットサイズ調整 */
@media (max-width: 520px) {
  .mini-map-dot { width: 16px; height: 16px; }
}

/* ミニマップ内のシーン名ラベル */
.mini-map-dot .mini-map-label {
  position: absolute;
  /* ドットの右端から固定距離で配置 */
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  /* ドットとラベルの間隔 */
  margin-left: 6px;
  white-space: nowrap;
  /* width/heightベース拡大では要素サイズは変わらないので、拡大時に見やすいサイズに */
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 8px;
  background: rgba(20,24,30,0.85);
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  pointer-events: none !important;
  display: block;
  opacity: 0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 6;
  transition: opacity 120ms ease;
  box-sizing: border-box;
  /* 高品質テキストレンダリング */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 表示トリガー: ホバーとタッチ一時表示 */
#miniMap .mini-map-dot:hover .mini-map-label,
#miniMap .mini-map-dot.show-label .mini-map-label,
.mini-map-dot:hover .mini-map-label,
.mini-map-dot.show-label .mini-map-label {
  opacity: 0.92 !important;
}

/* 右端寄せ回避: ドットの左側にラベルを配置 */
.mini-map-dot.near-right .mini-map-label {
  left: auto !important;
  right: 100% !important;
  margin-left: 0;
  margin-right: 4px;
  transform: translateY(-50%);
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: calc(var(--mini-base-size) - 36px) !important;
  box-sizing: border-box !important;
}

/* 現在のシーンを示すドットは非表示（マーカーのみ表示） */
.mini-map-dot.current {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.mini-map-dot.current .mini-map-label {
  display: none !important;
}

/* ドット／マーカーの慣性を無効化 */
.mini-map-dot {
  transition: none !important;
}

#miniMapMarker {
  transition: none !important;
}

/* --- アンケートボタンとモーダル --- */
/* 変更: surveyButton をコンテナ (#surveyContainer) の中に入れて、コンテナで固定配置する。
   これにより dismiss（✕）をコンテナ内に絶対配置して常に視認できるようにする。 */
#surveyContainer {
  position: fixed;
  left: 50%;
  bottom: 20px;
  /* より左寄せするために変換量を増やします（-50% → -60%） */
  transform: translateX(-60%);
  z-index: 15050;
  display: inline-block;
  box-sizing: border-box;
  pointer-events: auto;
  max-width: calc(100% - (var(--mini-base-size, 180px) + 96px));
  margin-left: calc(var(--sidebar-left-offset, 12px) + 12px);
  word-wrap: break-word;
  white-space: normal;
  box-sizing: border-box;
}

/* surveyButton はコンテナ内の要素にする（位置はコンテナで管理） */
#surveyContainer > #surveyButton {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg,#ff7a2d,#ff5a00);
  color: #fff;
  padding: 10px 16px; /* 変更: 横幅を削る（以前は 14px 22px） */
  border-radius: 26px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
#surveyContainer > #surveyButton:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,0.45); }

/* モーダルオーバーレイ本体の定義（既存） */
#surveyModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  z-index: 17060;
  padding: 20px;
  box-sizing: border-box;
  transition: opacity 200ms ease;
}
#surveyModal.visible { display: flex; }