/* --- ミニマップ --- */
#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 がコンテナサイズを制御する） */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  transition: transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center center;
}

/* マーカーコンテナ: 画面中央に固定する */
#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;
}

.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%;
  /* 目立ちすぎないように少し縮小 */
  width: 10px;
  height: 10px;
  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;
  inset: 0;
  /* 改良: ラベルをマーカーより前面に出すため z-index を調整（marker z-index:2 の上） */
  z-index: 3;
  display: none;              /* 拡大時にのみ表示 */
  pointer-events: none;       /* コンテナ自体はイベントを受けない */
}
#miniMap.mini-expanded .mini-map-dots,
#miniMap:hover .mini-map-dots {
  display: block;
}

/* 各シーンの丸ドット */
.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%);
  /* 当たり判定を視覚サイズに合わせる */
  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; }
}

/* --- 改良: ミニマップの拡大を transform:scale() で行い滑らかにする ---
   --- 変更点: マーカーと扇形は親の拡大を打ち消して常に同じ見た目サイズを維持する --- */
:root {
  --mini-base-size: 180px;
  --mini-expanded-scale: 3; /* デフォルト（モバイルは別で上書きする） */
  --mini-expanded-scale-mobile: 2.4; /* モバイルの拡大倍率を大きめにする */

  /* 逆スケールは自動計算する */
  --mini-inverse-scale: calc(1 / var(--mini-expanded-scale));
  --mini-inverse-scale-mobile: calc(1 / var(--mini-expanded-scale-mobile));
}

/* 追加: 画面幅が狭いデスクトップ向けに拡大倍率を小さくする */
@media (min-width: 521px) and (max-width: px) {
  :root {
    --mini-expanded-scale: 2.2; /* 中間サイズの画面では控えめに拡大 */
    --mini-inverse-scale: calc(1 / 2.2);
  }
}

/* 基本設定: GPU フレンドリーにする */
#miniMap {
  width: var(--mini-base-size);
  height: var(--mini-base-size);
  will-change: transform, box-shadow;
  /* 少し速めの遷移でタップ操作に即応する */
  transition: transform 220ms cubic-bezier(0.22,0.8,0.3,1), box-shadow 220ms cubic-bezier(0.22,0.8,0.3,1);
  /* モバイルでは中央から拡大する方が自然なので既定は右下にする（モバイルで上書きする） */
  transform-origin: right bottom;
}

/* 画像: 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 で中央に配置し、通常時の scale は 1 にする */
  transform: translate(-50%, -50%) scale(1);
  transition: transform 260ms cubic-bezier(0.22,0.8,0.3,1);
  will-change: transform;
}

/* ドットは見た目サイズを固定する（拡大時も同じ見た目に保つ） */
.map-marker-dot {
  width: 12px;
  height: 12px;
  transition: transform 260ms cubic-bezier(0.22,0.8,0.3,1);
  will-change: transform, width, height;
}

/* ホバー／拡大時の見え方: 親コンテナのみ拡大してレイアウトを崩さないようにする
   デスクトップは translate を使わず scale のみで拡大し、モバイルは translate 補正を併用する */
#miniMap.mini-expanded,
#miniMap:hover {
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  /* デスクトップでは単純に scale のみ適用する */
  transform: scale(var(--mini-expanded-scale));
}

/* モバイル: ベースサイズを小さくし、モバイル専用の逆スケールと中央原点で自然な拡大を行う */
@media (max-width: 520px) {
  :root { --mini-base-size: 140px; }
  #miniMap {
    width: var(--mini-base-size);
    height: var(--mini-base-size);
    transform-origin: right bottom !important; /* 右下を固定して左上に拡大 */
    transition: transform 220ms cubic-bezier(0.22,0.8,0.3,1), box-shadow 220ms cubic-bezier(0.22,0.8,0.3,1);
  }
  /* モバイルでは translate 変数を併用してはみ出し補正を行う */
  #miniMap.mini-expanded,
  #miniMap:hover {
    transform: translate(var(--mini-translate-x, 0px), var(--mini-translate-y, 0px)) scale(var(--mini-expanded-scale-mobile));
    /* 右下固定を明示 */
    transform-origin: right bottom !important;
  }

  /* マーカーの打ち消しスケール */
  #miniMap.mini-expanded #miniMapMarker,
  #miniMap:hover #miniMapMarker { transform: translate(-50%, -50%) scale(var(--mini-inverse-scale-mobile)); }

  #miniMap.mini-expanded .map-marker-dot,
  #miniMap:hover .map-marker-dot { width: 14px; height: 14px; transform: scale(1); }
}

/* デスクトップ: 拡大時に現在地ドットを小さくする */
@media (min-width: 521px) {
  #miniMap.mini-expanded .map-marker-dot,
  #miniMap:hover .map-marker-dot { width: 6px; height: 6px; transform: scale(1); }
}

/* --- アンケートボタンとモーダル --- */
/* 変更: 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; }