/* ================================================================
   O-シミュレーターモード
   ================================================================ */

/* トグルボタン（右下固定） */
/* モバイルシムボタン：一旦非表示 */
#sim-toggle-btn {
  display: none;
  width: calc(100% - 20px);
  margin: 6px 10px 8px;
  padding: 7px 12px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 4px;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  font-family: inherit;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition);
}

#sim-toggle-btn:hover {
  background: var(--primary-hover);
}

#sim-toggle-btn.sim-active {
  background: var(--color-sim-active);
}

#sim-toggle-btn.sim-active:hover {
  background: var(--color-sim-hover);
}

/* フルスクリーン透明オーバーレイ（入力ハンドリング用） */
#sim-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  /* 子要素ごとに個別に有効化 */
}

/* ミニマップ外枠（右上・画面幅の30%） */
#sim-minimap-container {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30vmin;
  height: 30vmin;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px var(--overlay-light);
  pointer-events: none;
}

/* ミニマップ内側（このdivをCSS rotateでヘディングアップ回転させる） */
#sim-minimap-inner {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transition: transform 0.1s linear;
}

/* MapLibreが描画するdiv */
#sim-minimap-map {
  width: 100%;
  height: 100%;
}

/* 中心の現在位置ドット（常に中央固定、回転しない） */
#sim-minimap-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--color-marker);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px var(--overlay-base);
  pointer-events: none;
  z-index: 2;
}

/* 進行方向の三角マーカー（ドットの上に重なる） */
#sim-minimap-arrow {
  position: absolute;
  top: calc(50% - 18px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid var(--color-marker);
  filter: drop-shadow(0 0 2px #fff);
  pointer-events: none;
  z-index: 2;
}

/* ジョイスティックゾーン（左下） */
#sim-joystick-zone {
  position: absolute;
  bottom: 30px;
  left: 20px;
  width: 140px;
  height: 140px;
  pointer-events: auto;
}

/* 視点操作ゾーン（右半分・透明） */
#sim-look-zone {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  pointer-events: auto;
  touch-action: none;
  /* デバッグ用: background: rgba(255,0,0,0.05); */
}

/* ズームスライダー（左上） */
#sim-zoom-ctrl {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--overlay-light);
  padding: 5px 10px;
  border-radius: 20px;
  pointer-events: auto;
}

#sim-zoom-ctrl label {
  color: var(--on-primary);
  font-size: var(--font-sm);
  opacity: 0.85;
  white-space: nowrap;
}

#sim-zoom-slider {
  width: 90px;
}

#sim-zoom-val {
  color: var(--on-primary);
  font-size: var(--font-sm);
  min-width: 28px;
  text-align: right;
}

/* ================================================================
   PC O-シミュレーターモード
   ================================================================ */

/* PCシムトグルボタン（シミュレーター設定セクション内） */
#pc-sim-toggle-btn,
#pc-sim-bird-btn {
  display: block;
  width: calc(100% - 20px);
  margin: 6px 10px 8px;
  padding: 7px 12px;
  color: var(--on-primary);
  border: none;
  border-radius: 4px;
  font-size: var(--font-base);
  font-weight: var(--font-semi);
  font-family: inherit;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition);
}

#pc-sim-toggle-btn {
  background: var(--primary);
}

#pc-sim-toggle-btn:hover {
  background: var(--primary-hover);
}

#pc-sim-toggle-btn.pc-sim-active {
  background: var(--color-sim-active);
}

#pc-sim-toggle-btn.pc-sim-active:hover {
  background: var(--color-sim-hover);
}

#pc-sim-bird-btn {
  margin-top: 0;
  background: #2f9e44;
}

#pc-sim-bird-btn:hover {
  background: #2b8a3e;
}

#pc-sim-bird-btn.pc-sim-active {
  background: #1f7a33;
}

#pc-sim-bird-btn.pc-sim-active:hover {
  background: #176329;
}

/* 開始地点ヒントテキスト（ボタン下） */
#pc-sim-start-hint {
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-align: center;
  padding: 0 0 2px;
  letter-spacing: 0.02em;
}

/* 操作ヒントバー（画面上部中央・Pointer Lock 中に表示） */
#pc-sim-hint {
  display: none;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  background: var(--overlay-dark);
  color: var(--on-primary);
  font-size: var(--font-sm);
  padding: 8px 16px;
  border-radius: 16px;
  white-space: nowrap;
  pointer-events: none;
  align-items: center;
  gap: 0;
}

#pc-sim-hint .hint-group,
#pc-sim-readmap-label .hint-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#pc-sim-hint .hint-action,
#pc-sim-readmap-label .hint-action {
  color: var(--white-strong);
  font-size: var(--font-sm);
  margin-left: 2px;
}

#pc-sim-hint .hint-sep,
#pc-sim-readmap-label .hint-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.4);
  margin: 0 12px;
  vertical-align: middle;
}

#pc-sim-hint kbd,
#pc-sim-readmap-label kbd {
  display: inline-block;
  background: var(--white-subtle);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 5px;
  font-family: inherit;
  font-size: var(--font-xs);
  line-height: 1.6;
  vertical-align: middle;
}

#pc-sim-hint .hint-or,
#pc-sim-readmap-label .hint-or {
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--font-xs);
  margin: 0 1px;
}

/* 十字照準（Pointer Lock 中に画面中央に表示）
   mix-blend-mode: difference + 白 = 背景の補色を自動計算して常に視認できる */
#pc-sim-crosshair {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 25;
  pointer-events: none;
  width: 20px;
  height: 20px;
  mix-blend-mode: difference;
}

#pc-sim-crosshair::before,
#pc-sim-crosshair::after {
  content: '';
  position: absolute;
  background: var(--bg-surface);
  /* difference blend で背景の補色として表示 */
}

#pc-sim-crosshair::before {
  /* 横線 */
  width: 20px;
  height: 2px;
  top: 9px;
  left: 0;
}

#pc-sim-crosshair::after {
  /* 縦線 */
  width: 2px;
  height: 20px;
  top: 0;
  left: 9px;
}

/* PCシム: 現在位置ドット（CSS fixed — maplibregl.Marker の terrain 投影ズレを回避） */
#pc-sim-pos-dot {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 24;
  /* 十字線の下 */
  pointer-events: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e63030;
  border: 3px solid var(--white-strong);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 6px var(--overlay-base);
}

/* セットアップ時の開始地点クロスヘア（シミュレーション未開始時に常時表示） */
/* 開始位置クリックモード: 赤丸カーソル */
#sim-start-cursor {
  display: none;
  position: fixed;
  width: 14px;
  height: 14px;
  background: var(--color-marker);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px var(--overlay-mid);
  pointer-events: none;
  z-index: 30;
  /* カーソル（矢印や手の先端）の少し下に赤丸を表示 */
  transform: translate(-50%, 10px);
}

/* 操作ガイド */
#sim-start-hint-overlay {
  display: none;
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.68);
  color: var(--on-primary);
  font-size: var(--font-base);
  font-weight: 500;
  padding: 7px 18px;
  border-radius: 6px;
  z-index: 30;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* 読図アクション オーバーレイ */
#pc-sim-readmap-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--overlay-mid);
  align-items: center;
  justify-content: center;
}

#pc-sim-readmap-overlay.visible {
  display: flex;
}

#pc-sim-readmap-wrapper {
  position: relative;
  width: min(80vmin, 640px);
  height: min(80vmin, 640px);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px var(--overlay-dark);
  border: 2px solid var(--white-border);
}

#pc-sim-readmap-inner {
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  transform-origin: center center;
}

#pc-sim-readmap-map {
  width: 100%;
  height: 100%;
}

/* 読図マップ中心の現在位置ドット */
#pc-sim-readmap-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--color-marker);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 2;
}

/* 読図マップの進行方向マーカー（常に上 = 進行方向） */
#pc-sim-readmap-arrow {
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 12px solid var(--color-marker);
  filter: drop-shadow(0 0 2px #fff);
  pointer-events: none;
  z-index: 2;
}

/* 鳥瞰モード時: ドット・矢印を青に */
#pc-sim-readmap-overlay.bird-mode #pc-sim-readmap-dot {
  background: var(--primary);
}

#pc-sim-readmap-overlay.bird-mode #pc-sim-readmap-arrow {
  border-bottom-color: var(--primary);
}

/* 読図ラベル */
#pc-sim-readmap-label {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--overlay-dark);
  color: var(--white-strong);
  font-size: var(--font-sm);
  padding: 8px 16px;
  border-radius: 16px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}