/* 点PQ問題メーカー スタイルシート
   「組み合わせ滑車メーカー」と同じ配色・パネル構造を踏襲する。 */

:root {
  --bg-main: #0f172a;
  --accent: #fbbf24;
  --accent-blue: #38bdf8;
  --accent-purple: #a78bfa;
  --accent-green: #4ade80;
  --accent-red: #f87171;
  --text: #f1f5f9;
  --text-dim: #cbd5e1;
  --text-secondary: #94a3b8;
  --glass: rgba(15, 23, 42, 0.72);
  --border: rgba(255, 255, 255, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* スマホでボタンをタップしたときの、ブラウザ標準の四角い光りを消す(押した状態はCSSで示している) */
button, a, select, input { -webkit-tap-highlight-color: transparent; }

/* 親(.app-container)がuser-select:noneなので、数値入力欄だけ入力できるよう戻す(iOS Safari対策) */
input { user-select: text; -webkit-user-select: text; }

body {
  font-family: 'Inter', 'Outfit', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  background-color: var(--bg-main);
  color: var(--text);
  overflow: hidden;
}

.app-container {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  /* pan-yも許可しておく(理由は下の「iPadのように…」のコメントを参照)。
     キャンバス自体はtouch-action:noneなので、ここでpan-yを許可してもキャンバスの
     ドラッグ操作(JS側のパン)には影響しない。 */
  touch-action: pan-y pinch-zoom;
}

.main-content {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
}

.title-row {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.app-title {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  pointer-events: none;
}

#title-help-nav { pointer-events: auto; }
.title-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  transition: all 0.15s ease;
}
.title-help-btn:hover,
.title-help-btn.active {
  border-color: var(--accent);
  color: #fff;
  background: rgba(251, 191, 36, 0.16);
}

#top-nav { position: absolute; top: 20px; left: 20px; z-index: 1000; }

.portal-link-btn-mini {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.portal-link-btn-mini:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  transform: translateY(-2px);
}

canvas#makerCanvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  touch-action: none;
  cursor: grab;
}
canvas#makerCanvas.panning { cursor: grabbing; }

.header-controls {
  position: absolute;
  top: 45px; right: 20px;
  display: flex; flex-direction: column;
  gap: 6px; z-index: 1000;
  width: 320px;
  max-height: calc(100% - 65px);
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  /* 以前はここに pointer-events: none (子要素だけ auto で戻す) を指定していた。
     狙いはパネルの余白を指が素通りしてキャンバス操作できるようにすることだったが、
     iOS Safariには「overflow:autoのスクロールコンテナ自身にpointer-events:noneが
     付いていると、子要素がautoでもそのコンテナへのタッチスクロールが認識されない」
     というクセがあり、iPadで縦長パネルがスクロールできない不具合の原因になっていた。
     このパネルはdisplay:flexで中身の高さぶんしか箱を持たないため、素通りさせたい
     余白はほぼ無い。安全側に倒し、pointer-eventsは既定のauto(タッチスクロール優先)のままにする。 */
}

.floating-panel {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  width: 100%;
  flex-shrink: 0;
}

/* 汎用の浮動ウィンドウ(ヘルプポップオーバー) */
.floating-window-base {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: rgba(10, 16, 30, 0.98);
  border: 2px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 1500;
  top: 90px;
  left: 12px; /* 実際の位置はJSで「押した?ボタンのそば」に決める */
  width: 300px;
  max-width: calc(100vw - 20px);
}
.floating-window-base.measuring { visibility: hidden; }
.floating-window-base.dragging { transition: none; }
.floating-window-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  cursor: grab;
  touch-action: none; /* ヘッダーはドラッグ用のつまみ(本文はスクロールできるよう別扱い) */
}
.floating-window-base.dragging .floating-window-header { cursor: grabbing; }
.floating-window-title {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floating-window-close {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}
.floating-window-close:hover {
  background: rgba(248, 113, 113, 0.2);
  border-color: var(--accent-red);
  color: #fff;
}
.floating-window-body {
  padding: 10px 12px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-dim);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.floating-window-body p + p { margin-top: 8px; }

/* ヘルプポップオーバー(共通1枚): 高さがあふれたら本文だけスクロールする */
.help-popover {
  width: 330px;
  max-height: min(72dvh, 480px);
}
.help-popover .help-section + .help-section { margin-top: 10px; }
.help-popover .help-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-blue);
  margin-bottom: 2px;
}

/* 再生設定の小窓(P3)。中身(フェーズ4・5で動点ごとの一時停止相手・計測の一覧を追加する)が
   増えても、なるべく縦長にならないようコンパクトにまとめる方針。 */
.playback-settings-popover {
  width: 300px;
  max-height: min(60dvh, 420px);
}
/* 再生設定の小窓: 動点ごとの「一時停止する相手」セクション(P4)。動点タブの引き返す相手UI
   (turn-target-dot)と土台を合わせつつ、コンパクトな縦積みにまとめる。 */
.pss-mover-list { display: flex; flex-direction: column; gap: 8px; }
.pss-mover { padding-top: 8px; }
.pss-mover:first-child { padding-top: 0; }
.pss-mover + .pss-mover { border-top: 1px solid var(--border); }
.pss-mover-head { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; }
.pss-mover-head .mover-dot { width: 22px; height: 22px; font-size: 0.78rem; }
.pss-group { display: flex; align-items: flex-start; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.pss-group-label { flex-shrink: 0; font-size: 0.68rem; color: var(--text-secondary); padding-top: 5px; min-width: 34px; }
.pss-chip-row { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.pss-chip-row .turn-target-dot { width: 24px; height: 24px; font-size: 0.74rem; }
/* 頂点チップ: 未選択はグレー、選択すると青(通常の頂点チップと同様。動点チップは動点自身の色で区別する) */
.pss-vertex-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'Outfit', sans-serif; font-size: 0.74rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s ease;
}
.pss-vertex-dot:hover { border-color: var(--accent-blue); color: #fff; }
.pss-vertex-dot.selected {
  background: rgba(56, 189, 248, 0.22);
  border-color: var(--accent-blue);
  color: #fff;
}
.pss-empty { color: var(--text-secondary); font-size: 0.72rem; }
.pss-meta { margin-top: 3px; }

/* 再生設定の小窓: 計測項目(平行・垂直・面積比較・中心角)の「発生したら停止」一覧(P5)。
   計測タブ側の.measure-stop-toggleと同じチェックボックスを、ここでも1行ずつ並べる
   (双方向連動: どちらで操作してもms.stopOnEventが一致するようJS側で同期する)。 */
.pss-measure-list { display: flex; flex-direction: column; gap: 2px; }
.pss-measure-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 2px;
  font-size: 0.74rem;
  cursor: pointer;
}
.pss-measure-row + .pss-measure-row { border-top: 1px solid var(--border); }
.pss-measure-row input { accent-color: var(--accent-red); cursor: pointer; flex-shrink: 0; }
.pss-measure-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-left: 3px solid var(--m-color, var(--accent-blue));
  padding-left: 6px;
}

/* 再生設定の小窓: 値を持つ計測項目(距離・面積・弧の長さ・おうぎ形の面積)の停止条件の行。
   [項目名] [☐最小] [☐最大] [☐値 [___]cm] を横並びにし、狭いときは折り返す。
   (.pss-measure-rowとは別のクラス: あちらのinputは幅を固定しており、数値の入力欄が潰れるため) */
.pss-value-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 4px 2px;
  font-size: 0.74rem;
}
.pss-measure-row + .pss-value-row, .pss-value-row + .pss-measure-row, .pss-value-row + .pss-value-row { border-top: 1px solid var(--border); }
.pss-value-row .pss-measure-title { flex: 1 1 96px; min-width: 0; }
.pss-inline-check { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.pss-inline-check input { accent-color: var(--accent-red); cursor: pointer; flex-shrink: 0; }
.pss-value-group { display: inline-flex; align-items: center; gap: 4px; }
.pss-value-input {
  width: 64px; padding: 2px 5px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-size: 0.72rem; font-variant-numeric: tabular-nums;
}
.pss-value-input.invalid { border-color: var(--accent-red); }
.pss-value-unit { font-size: 0.7rem; color: var(--text-secondary); }

/* 再生設定の小窓: 「指定した秒数で停止」(入力欄+追加ボタン、設定ずみの秒数のチップ) */
.pss-time-block { margin-bottom: 10px; }
.pss-time-row { display: flex; align-items: center; gap: 4px; }
.pss-time-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.pss-time-chip { font-size: 0.72rem; }
.pss-time-msg { margin-top: 3px; font-size: 0.68rem; color: var(--accent-red); }
.pss-time-msg:empty { display: none; }

/* 「?」ボタン(タイトル横の「読んでね」とは別に、各タブ・再生パネルに置く) */
.help-btn {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  font-size: 0.72rem; font-weight: 700; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.help-btn:hover, .help-btn.active {
  border-color: var(--accent-blue);
  color: #fff;
  background: rgba(56, 189, 248, 0.16);
}
/* ヒント文と「?」ボタンを横並びにする(保存タブ) */
.hint-row { display: flex; align-items: flex-start; gap: 8px; }
.hint-row .hint-box { flex: 1; min-width: 0; }
.hint-row .help-btn { margin-top: 8px; }
/* 小見出しの右端に「?」ボタンを置く */
.draw-subhead.has-help { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.hint-box {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 8px 10px;
}
.hint-box.phase-note {
  margin-top: 10px;
  color: var(--accent);
  background: rgba(251, 191, 36, 0.08);
  border: 1px dashed rgba(251, 191, 36, 0.3);
}

/* モード切替(直線モード/円モード。円モード フェーズ1)。設定パネルの最上位に置く、
   タブ切替よりひと回り目立たせたスイッチ。 */
#appModeSwitch {
  margin-bottom: 10px;
}
#appModeSwitch .mode-btn {
  font-size: 0.82rem;
}
#appModeSwitch .mode-btn.active {
  background: rgba(251, 191, 36, 0.22);
  color: var(--accent);
}

.tab-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 10px;
  padding: 3px;
}
.tab-btn {
  flex: 1 1 30%;
  padding: 6px 6px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.tab-btn:hover:not(.active) { color: var(--text-dim); }
.tab-btn.active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.action-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: none; border-radius: 8px; color: #fff;
  padding: 8px 12px; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}
.action-btn:hover { transform: translateY(-1px); }
.action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.secondary-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-dim);
  padding: 8px 12px; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease;
}
.secondary-btn:hover:not(:disabled) { border-color: var(--accent-blue); color: #fff; }
.secondary-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.checkbox-row {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.8rem; color: var(--text-dim);
  cursor: pointer; margin-top: 8px;
}
.checkbox-row input[type="checkbox"] {
  width: 15px; height: 15px; flex-shrink: 0;
  accent-color: var(--accent-blue); cursor: pointer;
}
/* チェックボックス行の右端に「?」ボタンを置く(出会ったら引き返す、など) */
.checkbox-help-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.checkbox-help-row .checkbox-row { margin-top: 8px; }
/* 「他の動点と出会ったら引き返す」の相手を選ぶ、丸いボタン(動点と同じPを丸で囲んだ形)。
   選ぶと、その動点の色で光る。選んでいないものはグレーのまま(1つも選んでいなければ、この機能はOFF)。 */
.turn-target-row { margin-top: 6px; }
.turn-target-chips { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.turn-target-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mover-color, #94a3b8);
  border: 2px solid transparent;
  color: #0f172a;
  font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 700;
  line-height: 1; padding: 0;
  cursor: pointer; transition: all 0.15s ease;
  filter: grayscale(1); opacity: 0.5;
}
.turn-target-dot:hover { opacity: 0.8; }
.turn-target-dot.selected {
  filter: none; opacity: 1;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22), 0 0 10px var(--mover-color, transparent);
}
.turn-target-empty { color: var(--text-secondary); font-size: 0.72rem; }

.view-btn-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.view-btn-row .secondary-btn,
.view-btn-row .action-btn {
  flex: 1;
  padding: 7px 4px;
  font-size: 0.72rem;
}

.draw-subhead {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  margin: 10px 0 4px;
}
.draw-subhead:first-child { margin-top: 0; }

.action-btn.armed {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.4);
}

/* 頂点をつなぐ操作でできた辺の一覧(滑車アプリのひも一覧と同じ考え方) */
.edge-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
  max-height: 160px;
  overflow-y: auto;
}
.edge-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
}
.edge-item-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
}
.edge-item-del {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 6px;
  color: var(--accent-red);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}
.edge-item-del:hover { background: rgba(248, 113, 113, 0.3); }

.sim-stats {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.82rem; color: var(--text-dim);
}
.sim-stats b { color: var(--accent); font-variant-numeric: tabular-nums; }
/* 移動距離: 動点ごとの枠を固定幅にして、数値が変わっても全体の幅が動かないようにする */
.stat-distance-row { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 10px; }
.stat-distance-row > .stat-distance { flex: 0 0 auto; }
/* 動点は最大4つ。2列に並べるので、何個でも最大2行に収まる(ラベルは1行目の左に置き、行を増やさない) */
.stat-distance { display: grid; grid-template-columns: repeat(2, max-content); gap: 2px 14px; justify-items: start; }
.stat-distance-label { white-space: nowrap; }
.stat-distance-item { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.stat-distance-name { font-weight: 600; }
.stat-distance-num { display: inline-block; min-width: 7ch; text-align: right; } /* 「6000.00」(最大60秒×100cm/秒)まで収まる幅 */

#sim-panel {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 40px));
  z-index: 900;
  padding: 10px 18px;
}
/* 「?」ボタンをパネルの右上の角に固定する(#sim-panelはposition:fixedなので、
   このボタンの配置の基準になる)。タイトル行とぶつからないよう、内容側に少し
   右側の余白を確保しておく。 */
.panel-corner-help-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 1;
}
/* 再生設定(一時停止条件)の小窓を開く歯車ボタン。「?」ボタンのすぐ左に並べる(P3)。 */
.panel-corner-gear-btn {
  position: absolute;
  top: 8px;
  right: 36px; /* panel-corner-help-btn(right:10px・幅20px)の左に6pxの隙間で並ぶ */
  z-index: 1;
}
#sim-panel .panel-content { padding-right: 50px; }
#sim-panel .sim-stats {
  text-align: center;
}

/* 自動で一時停止したときの、理由のツールチップ(キャンバス上の小窓。movers-playback.jsのshowStopReason)。
   ヘルプ・グラフ拡大の小窓と同じfloating-window-baseを使い、位置はJSで決める。ヘルプの小窓より下の重なり順にする */
.stop-tooltip { width: 280px; z-index: 1400; border-color: rgba(251, 191, 36, 0.6); }
.stop-tooltip-body { display: flex; flex-direction: column; gap: 8px; }
.stop-reason-text {
  color: #fde68a; font-size: 0.8rem; font-weight: 600; line-height: 1.5;
  white-space: pre-line; overflow-wrap: anywhere;
}
.stop-reason-play-btn { align-self: flex-start; padding: 6px 14px; }


/* ---- 共通部品(滑車アプリから移植: 危険ボタン・スライダー) ---- */
.danger-btn {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 8px; color: var(--accent-red);
  padding: 8px 12px; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease;
}
.danger-btn:hover { background: rgba(248, 113, 113, 0.22); }

input[type="range"] {
  -webkit-appearance: none; width: 100%;
  height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.1); outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--accent-blue);
  cursor: pointer; box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border: none;
  border-radius: 50%; background: var(--accent-blue);
  cursor: pointer;
}

.slider-step-row { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.slider-step-row input[type="range"] { flex: 1 1 auto; }
.step-btn {
  flex: 0 0 auto;
  width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.62rem; line-height: 1;
  cursor: pointer; transition: all 0.2s ease;
}
.step-btn:hover:not(:disabled) { border-color: var(--accent-blue); color: #fff; }
.step-btn:active:not(:disabled) { transform: scale(0.92); }
.step-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---- Phase 3: 動点パネル ---- */
.hint-box { margin-top: 6px; }
.hint-box.warn {
  color: #fdba74;
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.35);
}

.palette-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 0.65rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s ease;
}
.palette-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.palette-btn:hover { border-color: var(--mover-color, var(--accent-blue)); color: #fff; }
.palette-btn.selected {
  border-color: var(--mover-color);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.palette-btn.armed {
  border-color: var(--accent);
  background: rgba(251, 191, 36, 0.15);
  color: var(--accent);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3);
}
.palette-state { white-space: nowrap; }

.mover-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--mover-color, #94a3b8);
  color: #0f172a;
  font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 700;
  line-height: 1;
}

.mover-editor {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.mover-editor-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem;
}
.mover-editor-head b { flex: 1; min-width: 0; }
.mover-del-btn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 8px;
  color: var(--accent-red);
  font-size: 0.8rem;
  cursor: pointer; transition: all 0.2s ease;
}
.mover-del-btn:hover { background: rgba(248, 113, 113, 0.25); }

.route-display {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem; font-weight: 700;
  color: var(--mover-color, var(--text));
  background: rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  padding: 7px 10px;
  line-height: 1.5;
  word-break: break-all;
}
.route-meta {
  font-size: 0.72rem; color: var(--text-secondary);
  margin-top: 4px; min-height: 1.1em;
}
.route-next-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 6px 0 4px;
  font-size: 0.72rem; color: var(--text-secondary);
}
.route-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.route-chip {
  min-width: 30px;
  padding: 4px 9px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 999px;
  color: var(--accent);
  font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s ease;
}
.route-chip:hover { background: rgba(251, 191, 36, 0.28); color: #fff; }
.route-chips-empty { color: var(--text-secondary); }

.mode-switch {
  display: flex; gap: 2px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 10px; padding: 3px;
}
/* モード切替の右に折りたたみボタンを並べる */
.mode-row { display: flex; align-items: stretch; gap: 6px; }
.mode-row .mode-switch { flex: 1; min-width: 0; }
.panel-collapse-btn {
  flex: 0 0 auto; width: 38px;
  background: rgba(0, 0, 0, 0.28); border: none; border-radius: 10px;
  color: var(--text-secondary); font-size: 0.85rem; line-height: 1;
  cursor: pointer; transition: all 0.15s ease;
}
.panel-collapse-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
/* 折りたたみ中: モード切替の行だけ残し、タブ・各パネル・「表示」パネルを隠す */
#build-panel.collapsed > :not(.mode-row) { display: none !important; }
.header-controls.panels-collapsed #view-panel { display: none !important; }
.mode-btn, .dir-btn {
  flex: 1; padding: 7px 4px;
  background: transparent; border: none; border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s ease;
}
.mode-btn:hover:not(.active), .dir-btn:hover:not(.active) { color: var(--text-dim); }
.mode-btn.active, .dir-btn.active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.mode-desc {
  font-size: 0.72rem; line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 6px;
}

.speed-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-dim); }
.speed-row input[type="number"] {
  width: 90px; padding: 7px 8px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 0.9rem; font-variant-numeric: tabular-nums;
  outline: none;
}
.speed-row input[type="number"]:focus { border-color: var(--accent-blue); }
.speed-row input[type="number"].invalid { border-color: var(--accent-red); }

/* 速さ・スタート/角速度・スタートを1行にまとめる(案A: 動点パネルの高さを詰める) */
.speed-start-row { display: flex; gap: 8px; flex-wrap: wrap; }
.speed-field {
  flex: 1 1 0; min-width: 108px;
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-dim);
  cursor: text;
}
.speed-field input[type="number"] {
  width: 100%; min-width: 0; padding: 7px 6px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 0.9rem; font-variant-numeric: tabular-nums;
  outline: none;
}
.speed-field input[type="number"]:focus { border-color: var(--accent-blue); }
.speed-field input[type="number"].invalid { border-color: var(--accent-red); }
.speed-field span { white-space: nowrap; }

/* 「出会う時刻」など、長くなりがちな1行の値は折り返さず省略する */
.route-meta.route-meta-oneline {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Phase 5: 再生エンジン(▶/⏸ボタン + 速度切替 + ループ再生) */
.sim-time-row {
  flex: 1 1 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.sim-time-titlebox { display: flex; align-items: center; gap: 6px; }
.sim-time-title { font-size: 0.82rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.sim-time-control { display: flex; flex-direction: column; gap: 4px; }
.sim-time-control label { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; }
.sim-time-control label span {
  display: inline-block; min-width: 2.8em; text-align: right;
  font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums;
}
.sim-time-control input[type="range"] { width: 150px; max-width: 100%; }

.playback-top-row { display: flex; align-items: center; gap: 8px; }
.playback-time-label { flex: 0 1 auto; white-space: nowrap; }
.reset-time-btn { width: 28px; height: 28px; flex-shrink: 0; }

.play-btn {
  flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: none; border-radius: 50%; color: #fff;
  font-size: 0.8rem; line-height: 1;
  cursor: pointer; transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35);
}
.play-btn:hover { transform: translateY(-1px); }
.play-btn:active { transform: scale(0.94); }
.play-btn.playing {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  box-shadow: 0 3px 10px rgba(234, 88, 12, 0.4);
}

.playback-options-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 2px;
}
.speed-select-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.74rem; color: var(--text-secondary); white-space: nowrap;
}
.speed-select-label select {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 0.76rem; font-weight: 600;
  padding: 2px 4px; cursor: pointer; outline: none;
}
.speed-select-label select:focus { border-color: var(--accent-blue); }
.loop-chk-row { margin-top: 0; font-size: 0.74rem; white-space: nowrap; }


/* ---- Phase 4: 計測パネル ---- */
/* 計測の種類が5つになったので、「面積比較」は2段目に全幅で置く(上の4つは従来どおり1段) */
#measureTypeSwitch { flex-wrap: wrap; }
.mtype-btn[data-mtype="areaRatio"] { flex: 1 1 100%; }
/* 円モードは、種類が6つ(距離・面積・面積比較・中心角・弧の長さ・おうぎ形の面積。フェーズ7b)なので、3×2にならべる */
#measureTypeSwitch.circle-mode .mtype-btn { flex: 1 1 calc(33.333% - 2px); }
/* 中心角(円モード)の目標の角度の欄。上の「点を選ぶ」ボタンの列とくっつかないように、少しあける */
#measureAngleBox { margin-top: 8px; }
.mtype-btn {
  flex: 1; padding: 7px 2px;
  background: transparent; border: none; border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.74rem; font-weight: 600; white-space: nowrap;
  cursor: pointer; transition: all 0.15s ease;
}
.mtype-btn:hover:not(.active) { color: var(--text-dim); }
.mtype-btn.active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.measure-draft { margin-top: 8px; }
.measure-draft-display { color: var(--text); font-size: 0.85rem; }
/* 面積比較で、いま面積1・面積2のどちらを選んでいるかを示す文字を点滅させる */
.picking-blink {
  color: var(--accent);
  font-weight: 700;
  animation: picking-blink-kf 1.1s ease-in-out infinite;
}
@keyframes picking-blink-kf {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .picking-blink { animation: none; }
}

.point-chip {
  min-width: 30px;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--chip-color, var(--border));
  border-radius: 999px;
  color: var(--chip-color, var(--text-dim));
  font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s ease;
}
.point-chip:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.point-chip.picked { background: rgba(255, 255, 255, 0.14); color: #fff; }
.point-chip sup { font-size: 0.6rem; margin-left: 2px; color: var(--accent); }

.measure-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.measure-item {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid var(--border);
  border-left: 4px solid var(--m-color, var(--accent-blue));
  border-radius: 8px;
  padding: 6px 8px;
}
.measure-item.holding {
  border-color: var(--m-color);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
}
.measure-item-head { display: flex; align-items: center; gap: 8px; }
.measure-item-title { flex: 1; font-size: 0.8rem; font-weight: 700; color: var(--m-color, var(--text)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.measure-vis { display: flex; align-items: center; gap: 3px; font-size: 0.68rem; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.measure-vis input { accent-color: var(--accent-blue); cursor: pointer; }
/* 平行・垂直・面積比較・中心角のカードにつく「発生したら停止」のチェックボックス */
.measure-stop-toggle { display: flex; align-items: center; gap: 3px; font-size: 0.68rem; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.measure-stop-toggle input { accent-color: var(--accent-red); cursor: pointer; }
.measure-item-value { font-size: 0.76rem; color: var(--text-dim); margin-top: 3px; font-variant-numeric: tabular-nums; }
.measure-item-events { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; font-size: 0.7rem; color: var(--text-secondary); }
.event-btn {
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--m-color, var(--border));
  border-radius: 999px;
  color: var(--text);
  font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: all 0.15s ease;
}
.event-btn:hover { background: rgba(255, 255, 255, 0.2); }
/* 距離・面積のグラフの「最小」「最大」ボタン(押すと、その値になる時刻の一覧が出る) */
.event-btn.active { background: var(--m-color, var(--accent-blue)); color: #0f172a; }
.measure-extrema-btns { margin-top: 6px; }
/* 「任意の値」ボタンの中身(数値の入力欄+結果)。最小・最大の時刻の一覧と縦に並べるため、
   自分の中の行(入力欄の行・結果の行)を上から順に積む */
.measure-target-box { margin-top: 4px; }
.measure-target-box + .measure-item-events,
.measure-item-events + .measure-target-box { margin-top: 6px; }

/* Phase 6: 距離・面積の折れ線グラフ */
.measure-graph-wrap { margin-top: 6px; }
.measure-graph {
  display: block; width: 100%; height: 104px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--border); border-radius: 6px;
  cursor: crosshair; touch-action: none;
}

/* 計測グラフの「拡大」ボタン(項目名の横)。拡大中は項目の色でぬりつぶす */
.graph-expand-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--m-color, var(--border));
  border-radius: 999px;
  color: var(--text);
  font-size: 0.68rem; font-weight: 600; white-space: nowrap;
  cursor: pointer; transition: all 0.15s ease;
}
.graph-expand-btn:hover { background: rgba(255, 255, 255, 0.2); }
.graph-expand-btn.active { background: var(--m-color, var(--accent-blue)); color: #0f172a; }
.graph-expand-btn svg { flex-shrink: 0; }

/* 計測タブ: タップした場所に候補(頂点・動点)が複数あるときの選択ポップアップ。
   ヘッダーはドラッグできない見た目(gapなし)にせず共通のfloating-window-headerのままにしているが、
   ドラッグ処理そのものは付けていない(タップの都度、その場所のそばに出し直すだけの軽い小窓のため)。 */
.pick-chooser {
  width: 200px;
  max-height: min(60dvh, 320px);
}
.pick-chooser .floating-window-header { cursor: default; }
.pick-chooser-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pick-chooser-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border-radius: 8px;
  padding: 7px 10px;
}
.pick-chooser-btn .pick-chooser-kind {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-dim);
}

/* 拡大したグラフの小窓(ヘッダーをドラッグして動かす。グラフは縦に並ぶ) */
.graph-window {
  width: 480px;
  max-height: min(85dvh, 760px);
  border-color: var(--accent-blue);
}
.graph-window .floating-window-title { color: var(--accent-blue); }
.graph-window-item {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid var(--border);
  border-left: 4px solid var(--m-color, var(--accent-blue));
  border-radius: 8px;
  padding: 6px 8px 8px;
}
.graph-window-item + .graph-window-item { margin-top: 10px; }
.graph-window-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.graph-window-item-title { font-size: 0.82rem; font-weight: 700; color: var(--m-color, var(--text)); white-space: nowrap; }
.graph-window-item-value {
  flex: 1; min-width: 0; text-align: right;
  font-size: 0.74rem; color: var(--text-dim); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.graph-window-item-close {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  font-size: 0.85rem; line-height: 1;
  cursor: pointer; transition: all 0.15s ease;
}
.graph-window-item-close:hover { background: rgba(248, 113, 113, 0.2); border-color: var(--accent-red); color: #fff; }
.measure-graph.big { height: 200px; }

/* Phase 7: 保存タブ(名前入力欄+保存ボタン、保存済み一覧) */
.save-name-row { display: flex; gap: 6px; margin-top: 8px; }
.save-name-input {
  flex: 1; min-width: 0;
  padding: 7px 10px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 0.8rem; outline: none;
}
.save-name-input:focus { border-color: var(--accent-blue); }
.save-name-row .action-btn { flex-shrink: 0; white-space: nowrap; }

.save-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px; max-height: 260px; overflow-y: auto;
}
.save-item {
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px;
}
.save-item-info { min-width: 0; }
.save-item-name { font-size: 0.8rem; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.save-item-date { font-size: 0.68rem; color: var(--text-secondary); margin-top: 1px; }
.save-item-buttons { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.save-preview-btn {
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-dim); padding: 5px 9px;
  font-size: 0.72rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.save-preview-btn:hover { border-color: var(--accent-blue); color: #fff; }
.save-load-btn {
  flex-shrink: 0;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.4); border-radius: 8px;
  color: var(--accent-blue); padding: 5px 9px;
  font-size: 0.72rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.save-load-btn:hover { background: rgba(56, 189, 248, 0.26); }
.save-rename-btn, .save-del-btn {
  flex-shrink: 0; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 0.75rem;
  cursor: pointer; transition: all 0.2s ease;
}
.save-rename-btn { background: rgba(255,255,255,0.08); border: 1px solid var(--border); color: var(--text-dim); }
.save-rename-btn:hover { border-color: var(--accent-blue); color: #fff; }
.save-del-btn { background: rgba(248, 113, 113, 0.15); border: 1px solid rgba(248, 113, 113, 0.4); color: var(--accent-red); }
.save-del-btn:hover { background: rgba(248, 113, 113, 0.28); }

/* 保存データのプレビュー中バナー(画面上部に固定表示) */
.preview-banner {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 2000;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid var(--accent-blue); border-radius: 12px;
  padding: 8px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  max-width: calc(100% - 24px);
}
.preview-banner-text { font-size: 0.8rem; color: var(--text-dim); overflow-wrap: anywhere; }
.preview-banner-text b { color: var(--accent-blue); }
.preview-banner-buttons { display: flex; gap: 6px; flex-shrink: 0; }
.preview-banner .action-btn,
.preview-banner .secondary-btn { padding: 6px 10px; font-size: 0.74rem; }

/* プレビュー中は、キャンバス操作と作図/動点/計測タブでの編集を一時的に無効化する
   (保存タブ自体は他の保存データをすぐ見比べられるよう有効なまま、再生パネルも
   問題の動きを試せるよう有効なままにしておく)。 */
body.preview-mode #makerCanvas { pointer-events: none; }
body.preview-mode #build-panel .tab-panel:not([data-tab-panel="save"]) {
  pointer-events: none;
  opacity: 0.45;
}

.hidden { display: none !important; }

/* 幅769〜1100pxのPC・タブレット横向き: 中央に置くと右のパネル(幅320px)や、左上の戻るボタンと
   ぶつかるので、再生パネルは左下に寄せ、タイトルも右パネルの手前までに収める。 */
@media (min-width: 769px) and (max-width: 1100px) {
  #sim-panel {
    left: 20px;
    transform: none;
    width: min(420px, calc(100vw - 380px));
  }
  .title-row { left: 72px; transform: none; }
}

/* 補足: 以前はここで「iPadのように画面幅は広い(スマホ用の縦積みレイアウトに切り替わら
   ない)のに、タッチで操作する端末」を (min-width: 769px) and (pointer: coarse) で
   判定して、そのときだけ.app-containerにtouch-action:pan-yを足していた。
   しかし、外付けトラックパッド/マウス接続時や画面分割(Split View)などで実機の
   pointer/幅の判定が期待どおりにならない場合があり、縦長パネルが指でスクロール
   できない不具合が再現した。タッチ操作の許可範囲は親子で「共通部分」になる仕様
   なので、そもそも親(.app-container)側でpan-yを許可していないと、子要素
   (.header-controlsなど)がtouch-action:pan-yを指定していても効かない。
   そのため条件分岐はやめて、.app-container自体に常時pan-yを許可することにした
   (上の基本ルールを参照。キャンバスは別途touch-action:noneなので、
   いままでどおりJS側の操作のままになる)。 */

@media (max-width: 768px) {
  body { overflow-y: auto; }
  .app-container { width: 100%; height: auto; overflow-y: auto; touch-action: auto; }
  .main-content {
    position: relative; width: 100%; height: auto; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center;
    padding: 15px; gap: 10px;
  }
  .title-row { position: relative; top: 0; left: 0; transform: none; order: 1; z-index: auto; margin-bottom: 4px; white-space: normal; flex-wrap: wrap; justify-content: center; }
  .app-title { font-size: 1.25rem; }
  #top-nav { position: absolute; top: 15px; left: 15px; }
  .header-controls {
    display: contents;
  }
  #build-panel { order: 2; width: 100% !important; max-width: 480px; position: relative; margin-top: 40px; }
  #view-panel { order: 2; width: 100% !important; max-width: 480px; position: relative; }
  canvas#makerCanvas {
    position: relative; order: 3; width: 100% !important; height: 380px !important;
    max-width: 480px; border-radius: 12px; border: 1px solid var(--border);
    background: rgba(15, 23, 42, 0.4); z-index: 1;
  }
  #sim-panel {
    order: 4; width: 100% !important; max-width: 480px;
    position: relative; left: auto; bottom: auto; transform: none;
  }
  #sim-panel .sim-stats { text-align: left; }
  .stat-distance-row { justify-content: flex-start; }
  .sim-time-row { justify-content: flex-start; }
  .sim-time-control { flex: 1 1 160px; }
  .sim-time-control input[type="range"] { width: auto; }
  .playback-options-row { justify-content: flex-start; }
  .floating-panel { width: 100% !important; max-width: 100%; max-height: none; overflow-y: visible; }
}

/* ---- お手軽セット(直線モード: 正方形・長方形・正六角形・平行四辺形/円モード: カード選択) ---- */
/* 図形の種類が4つになったので、2×2に並べる(計測タブの面積比較と同じ考えかた)。
   円モードのカード(.circle-preset-btn)も、種類が増えたときに同じように2列に並ぶ */
#presetTypeSwitch, #circlePresetTypeSwitch { flex-wrap: wrap; }
.preset-type-btn, .circle-preset-btn {
  flex: 1 1 calc(50% - 1px); padding: 7px 2px;
  background: transparent; border: none; border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  cursor: pointer; transition: all 0.15s ease;
}
.preset-type-btn:hover:not(.active), .circle-preset-btn:hover:not(.active) { color: var(--text-dim); }
.preset-type-btn.active, .circle-preset-btn.active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* カードを押したときに、そのカードだけ短く弾ませる(すでに選んでいるカードを
   もう一度押しても、押したことが目で分かるようにするため) */
@keyframes card-pick-kf {
  0% { transform: scale(1); }
  40% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.preset-type-btn.card-pick-flash, .circle-preset-btn.card-pick-flash {
  animation: card-pick-kf 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .preset-type-btn.card-pick-flash, .circle-preset-btn.card-pick-flash { animation: none; }
}
.preset-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.preset-field { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-dim); }
.preset-field input[type="number"] {
  width: 72px; padding: 7px 8px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 0.9rem; font-variant-numeric: tabular-nums;
  outline: none;
}
.preset-field input[type="number"]:focus { border-color: var(--accent-blue); }
.preset-field input[type="number"].invalid { border-color: var(--accent-red); }

/* iOS Safariは、16px未満の入力欄にフォーカスすると画面が勝手に拡大されてしまう。
   スマホ幅・タッチ端末では入力欄・セレクトを16pxにして、拡大されないようにする。 */
@media (max-width: 768px), (pointer: coarse) {
  .speed-row input[type="number"],
  .speed-field input[type="number"],
  .stepper-row input[type="number"],
  .measure-ratio input[type="number"],
  .preset-field input[type="number"],
  .save-name-input,
  .speed-select-label select {
    font-size: 16px;
  }
}

/* タッチ端末: 指で押しやすいよう、ボタン・スライダー・チェックボックスを大きめにする */
@media (pointer: coarse) {
  .tab-btn { padding: 9px 6px; font-size: 0.78rem; }
  .action-btn, .secondary-btn, .danger-btn { min-height: 40px; padding: 9px 12px; }
  .view-btn-row .secondary-btn, .view-btn-row .action-btn { padding: 9px 4px; }
  .palette-btn { padding: 10px 2px; }
  .mode-btn, .dir-btn, .mtype-btn, .preset-type-btn, .circle-preset-btn { padding: 10px 4px; }
  .route-chip, .point-chip { min-width: 40px; min-height: 36px; padding: 6px 12px; }
  .pick-chooser-btn { min-height: 40px; }
  .event-btn { padding: 6px 11px; }
  .edge-item-del { width: 32px; height: 32px; font-size: 0.85rem; }
  .mover-del-btn { width: 32px; height: 32px; font-size: 0.9rem; }
  .save-rename-btn, .save-del-btn { width: 34px; height: 34px; font-size: 0.9rem; }
  .save-preview-btn, .save-load-btn { padding: 9px 11px; }
  .step-btn { width: 36px; height: 36px; font-size: 0.8rem; }
  .play-btn { width: 42px; height: 42px; font-size: 1rem; }
  .help-btn { width: 30px; height: 30px; font-size: 0.9rem; }
  .title-help-btn { padding: 8px 14px; font-size: 0.8rem; }
  .floating-window-close { width: 32px; height: 32px; font-size: 1.05rem; }
  .graph-window-item-close { width: 32px; height: 32px; font-size: 1.05rem; }
  .graph-expand-btn { padding: 6px 11px; }
  .checkbox-row input[type="checkbox"], .measure-vis input, .measure-stop-toggle input, .pss-measure-row input, .pss-inline-check input { width: 20px; height: 20px; }
  .checkbox-row { gap: 9px; padding: 3px 0; }
  .speed-select-label select { padding: 5px 6px; }
  .portal-link-btn-mini { width: 44px; height: 44px; }
  input[type="range"] { height: 8px; }
  input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }
  input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }
  .preview-banner .action-btn, .preview-banner .secondary-btn { min-height: 38px; }
}

/* 動点の経路: 「1つ戻す」を『次に進める頂点』の行の右端に置く */
.route-next-row .route-undo-btn { margin-left: auto; padding: 4px 10px; font-size: 0.72rem; }
.route-next-row .route-done-btn { padding: 4px 12px; font-size: 0.72rem; }
.route-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.route-chip:disabled:hover { background: rgba(251, 191, 36, 0.12); color: var(--accent); }

/* 動点の「速さ」「スタート」: 1行ずつ、ラベル・[−]・入力欄・[＋]・単位の並び */
.stepper-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 0.78rem; color: var(--text-dim); }
.stepper-label { width: 4.2em; flex: none; font-weight: 600; color: var(--text); }
.stepper-btn {
  flex: none; width: 32px; height: 32px; padding: 0;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: all 0.15s ease;
}
.stepper-btn:hover { background: rgba(255,255,255,0.16); }
.stepper-btn:active { transform: scale(0.94); }
.stepper-row input[type="number"] {
  flex: 0 1 84px; min-width: 0; width: 84px; padding: 7px 6px; text-align: center;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 0.9rem; font-variant-numeric: tabular-nums;
  outline: none;
}
.stepper-row input[type="number"]:focus { border-color: var(--accent-blue); }
.stepper-row input[type="number"].invalid { border-color: var(--accent-red); }
.stepper-unit { white-space: nowrap; }
@media (max-width: 768px), (pointer: coarse) {
  .stepper-btn { width: 38px; height: 38px; }
  .stepper-row input[type="number"] { font-size: 16px; } /* iOSの自動拡大を防ぐ */
}

/* ======================================================================
   チュートリアル(紙芝居モーダル)
   「?」ボタンのヘルプポップオーバーとは別物: 画面中央に大きく出す、進行つきの説明。
   作図→動点→測定→保存の順に、1コマずつイラスト+説明文を出し、前へ/次へ・ドットで進む。
   ====================================================================== */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 10, 20, 0.72);
  backdrop-filter: blur(6px);
  animation: tutorial-fade-in 0.18s ease;
}
.tutorial-overlay.hidden { display: none; }
@keyframes tutorial-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tutorial-card {
  width: 100%;
  max-width: 420px;
  max-height: min(88dvh, 680px);
  display: flex;
  flex-direction: column;
  background: rgba(10, 16, 30, 0.98);
  border: 2px solid var(--tutorial-color, var(--border));
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.tutorial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tutorial-head-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.tutorial-illustration {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 20px 4px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, transparent 70%);
}
.tutorial-illustration svg { width: 100%; max-width: 280px; height: auto; display: block; }

.tutorial-body {
  padding: 6px 22px 4px;
  overflow-y: auto;
  min-height: 0;
  touch-action: pan-y;
}
.tutorial-step-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--tutorial-color, var(--accent));
  background: color-mix(in srgb, var(--tutorial-color, var(--accent)) 16%, transparent);
  border: 1px solid var(--tutorial-color, var(--accent));
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.tutorial-slide-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.tutorial-slide-text {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-dim);
}
.tutorial-slide-text b { color: var(--tutorial-color, var(--accent)); }
.tutorial-slide-text p + p { margin-top: 8px; }

.tutorial-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 0 4px;
  flex-shrink: 0;
}
.tutorial-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tutorial-dot:hover { background: rgba(255, 255, 255, 0.32); }
.tutorial-dot.active {
  width: 20px;
  border-radius: 5px;
  background: var(--tutorial-color, var(--accent));
}

.tutorial-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 16px;
  flex-shrink: 0;
}
.tutorial-nav .secondary-btn, .tutorial-nav .action-btn { flex: 1; text-align: center; }
#tutorialSkipBtn { flex: 0 1 auto; opacity: 0.75; }
#tutorialNextBtn { flex: 1.3; }
.tutorial-nav .action-btn {
  background: linear-gradient(135deg, var(--tutorial-color, #0284c7) 0%, var(--tutorial-color, #0369a1) 100%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--tutorial-color, #0284c7) 40%, transparent);
}

@media (pointer: coarse) {
  .tutorial-dot { width: 10px; height: 10px; }
  .tutorial-dot.active { width: 24px; }
  .tutorial-nav .secondary-btn, .tutorial-nav .action-btn { min-height: 42px; }
}
@media (max-width: 480px) {
  .tutorial-overlay { padding: 12px; }
  .tutorial-card { border-radius: 14px; }
  .tutorial-illustration { padding: 14px 14px 0; }
  .tutorial-body { padding: 6px 16px 4px; }
  .tutorial-nav { padding: 10px 12px 14px; flex-wrap: wrap; }
  #tutorialSkipBtn { order: 3; flex: 1 1 100%; }
}