/* Guitar Compass — acoustic workshop theme
   ローズウッド・ブラス・アイボリー。楽器としての質感を最優先。
   レイアウトは縦2段: ダイアトニック・ファン（NOTE/CHORDは扇の脇に内包）/ 指板。 */

:root {
  --bg: #140e08;
  --panel: #1f1610;
  --panel-2: #281c13;
  --edge: #3c2c1d;
  --edge-soft: #2e2114;
  --text: #f2e8d5;     /* アイボリー */
  --text-dim: #a89274; /* 焼けた紙 */
  --accent: #e05a3a;   /* テラコッタ（ルート・現在コード） */
  --hit: #f0bd5e;      /* ブラス／アンバー（検出音） */
  --t: #a3bd7d;        /* セージ: トニック */
  --sd: #87a9c4;       /* ダスティブルー: サブドミナント */
  --d: #d98a62;        /* クレイ: ドミナント */
  --wood: #3a2316;     /* ローズウッド指板 */
  --serif: 'Iowan Old Style', Georgia, 'Times New Roman', 'Hiragino Mincho ProN', serif;
}

* { box-sizing: border-box; }

/* ブラウザ標準の青いフォーカスリングをテーマ色に置き換え（キーボード操作時のみ表示） */
button:focus, select:focus, [role="button"]:focus { outline: none; }
button:focus-visible, select:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--hit);
  outline-offset: 2px;
}

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  background:
    radial-gradient(120% 90% at 50% -10%, #241710 0%, var(--bg) 58%, #0d0805 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- ヘッダー ---------- */

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--edge-soft);
  background: linear-gradient(180deg, rgba(58, 35, 22, 0.35), rgba(20, 14, 8, 0));
}

.logo {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--text);
}
.logo span { color: var(--hit); font-style: italic; }

.label {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 2px;
}

.key-box { display: flex; align-items: center; gap: 10px; }

.key-name {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  min-width: 46px;
  text-align: center;
  color: var(--hit);
  cursor: pointer;
  border-bottom: 1.5px dashed color-mix(in srgb, var(--hit) 45%, transparent);
  transition: border-color 150ms;
}
.key-name:hover { border-bottom-color: var(--hit); }

select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 14px;
}

.chip {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms, background 150ms;
}
.chip:hover { color: var(--text); border-color: var(--text-dim); }
.chip.is-on {
  color: #1a120a;
  background: var(--hit);
  border-color: var(--hit);
  font-weight: 700;
}

.mic-box { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.meter {
  width: 110px;
  height: 6px;
  background: #0e0905;
  border: 1px solid var(--edge-soft);
  border-radius: 4px;
  overflow: hidden;
}
#levelBar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7d6332, var(--hit));
  transition: width 60ms linear;
}

.gate-range { width: 88px; accent-color: var(--hit); }

.mic-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ec6a45, var(--accent));
  border: 1px solid #b4452c;
  color: #fff;
  font-size: 19px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(224, 90, 58, 0.25);
  transition: transform 100ms, box-shadow 150ms;
}
.mic-btn:active { transform: translateY(1px); box-shadow: none; }
.mic-btn.is-on { background: #4a392a; border-color: var(--edge); box-shadow: none; }
.mic-btn.error { animation: shake 0.4s; background: #8c2f1d; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* ---------- 1画面レイアウト（縦2段） ---------- */

main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(190px, 36vh);
  grid-template-areas:
    "fan"
    "fret";
  gap: 12px;
  padding: 12px 18px 14px;
}

.panel {
  background: linear-gradient(165deg, var(--panel-2), var(--panel) 55%);
  border: 1px solid var(--edge-soft);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(242, 232, 213, 0.04), 0 6px 24px rgba(0, 0, 0, 0.35);
  min-height: 0;
}

.fan-panel {
  grid-area: fan;
  position: relative;
  display: flex;
  justify-content: center;
  padding: 12px 14px 8px;
}
.fan-panel svg { height: 100%; width: 100%; }

.fret-panel {
  grid-area: fret;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  transition: padding-left 200ms ease;
}
/* ガイドモード中は左にツール分の余白を確保し、指板と重ねない */
.fret-panel.guide-on { padding-left: 140px; }
/* 指板SVGのラッパ。デスクトップでは素通し、モバイルでは横スクロールコンテナになる */
.fret-scroll {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fret-panel svg { width: 100%; height: 100%; }

/* 123 ⇄ ABC セグメントトグル（指板右上） */
.seg-toggle {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 1;
  display: flex;
  border: 1px solid var(--edge);
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(20, 14, 8, 0.6);
  user-select: none;
}
.seg-toggle span {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  transition: background 150ms, color 150ms;
}
.seg-toggle span.on {
  background: var(--hit);
  color: #1a120a;
}

/* 指板左上のガイドツール群（ガイドチップ + 押さえ方トグル） */
.fret-tools {
  position: absolute;
  top: 10px;
  left: 14px;
  z-index: 1;
  display: flex;
  flex-direction: column; /* チップの下にフレット切替を縦積み（指板と重ねない） */
  align-items: flex-start;
  gap: 10px;
}
.voicing-toggle { position: static; }
.seg-toggle.hidden { display: none; }

/* ガイドモードチップ: 指板の金枠と同色 = 「この枠はこのコード」/ ✕で解除 */
.guide-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--hit);
  color: #241504;
  border: none;
  border-radius: 999px;
  padding: 7px 10px 7px 18px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(240, 189, 94, 0.35);
  animation: chip-in 220ms ease-out; /* 出現で目を引き、解除手段の在処を知らせる */
}
.guide-chip .x {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(36, 21, 4, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: -apple-system, sans-serif;
  transition: background 150ms, transform 150ms;
}
.guide-chip:hover .x { background: rgba(36, 21, 4, 0.45); transform: scale(1.1); }
.guide-chip.hidden { display: none; }

@keyframes chip-in {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ガイドモード中は指板パネル自体も金色の縁取り（モード中であることを面で示す） */
.fret-panel.guide-on {
  border-color: rgba(240, 189, 94, 0.45);
  cursor: pointer; /* どこをタップしても解除できる */
}

/* ---------- 現在の音/コード（扇の脇のオーバーレイ） ---------- */

.now-note, .now-chord {
  position: absolute;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}
.now-note { left: 30px; }
.now-chord { right: 30px; align-items: flex-end; text-align: right; }

/* ♪ / ♬ アイコンラベル（言語非依存） */
.now-note .label, .now-chord .label {
  font-size: 17px;
  letter-spacing: 0;
  opacity: 0.7;
}

.big {
  font-family: var(--serif);
  font-size: 50px;
  font-weight: 700;
  line-height: 1.05;
  min-height: 54px;
}
#noteName { color: var(--hit); }
#chordName { color: var(--text); }

.chord-meta { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.degree { font-size: 19px; color: var(--text-dim); font-weight: 700; }
.func {
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  padding: 1px 8px;
}
.func.func-T { background: color-mix(in srgb, var(--t) 22%, transparent); color: var(--t); }
.func.func-SD { background: color-mix(in srgb, var(--sd) 22%, transparent); color: var(--sd); }
.func.func-D { background: color-mix(in srgb, var(--d) 25%, transparent); color: var(--d); }

/* チューナー（セント表示） */
.cents {
  position: relative;
  height: 8px;
  width: 132px;
  background: #0e0905;
  border-radius: 4px;
  border: 1px solid var(--edge-soft);
}
.cents-center {
  position: absolute;
  left: 50%;
  top: -3px;
  width: 1.5px;
  height: 13px;
  background: var(--text-dim);
}
.cents-bar {
  position: absolute;
  left: calc(50% - 3.5px);
  top: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hit);
  opacity: 0;
  transition: transform 70ms linear;
}
.cents-bar.visible { opacity: 1; }
.cents-bar.in-tune { background: var(--t); box-shadow: 0 0 6px var(--t); }

/* ---------- ダイアトニック・ファン ---------- */

.seg { cursor: pointer; }
.seg text { pointer-events: none; user-select: none; }

.seg-path {
  fill: #241810;
  stroke: var(--edge-soft);
  stroke-width: 1;
  transition: fill 200ms;
}
.seg:hover .seg-path { filter: brightness(1.25); }

.seg-label {
  fill: var(--text);
  font-family: var(--serif);
  font-weight: 700;
}
.seg-roman {
  fill: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.05em;
}

.seg.func-T .seg-path { fill: color-mix(in srgb, var(--t) 17%, #241810); }
.seg.func-SD .seg-path { fill: color-mix(in srgb, var(--sd) 17%, #241810); }
.seg.func-D .seg-path { fill: color-mix(in srgb, var(--d) 19%, #241810); }

.seg.ghost .seg-path { fill: #1a120c; }
.seg.ghost .seg-label { fill: #56432f; }

.seg.suggest .seg-path {
  stroke: var(--hit);
  stroke-width: 2.5;
  animation: pulse 1.3s ease-in-out infinite;
}

.seg.active .seg-path {
  fill: var(--accent);
  stroke: #f8cdb4;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 10px rgba(224, 90, 58, 0.45));
}
.seg.active .seg-label { fill: #fff; }
.seg.active .seg-roman { fill: #ffd9c4; }

/* ピン留め（ガイドモード）中のセル: 指板の金枠と同じ金色の枠で「保持中」を示す */
.seg.active.pinned .seg-path {
  stroke: var(--hit);
  stroke-width: 3;
}

/* ガイドモード: ピン留め以外をブラー＆減光して「いまは別モード」を一目で示す */
.seg, .fan-hub {
  transition: opacity 250ms ease, filter 250ms ease;
}
body.guide-mode .seg:not(.pinned),
body.guide-mode .fan-hub {
  opacity: 0.3;
  filter: blur(1.6px);
  pointer-events: auto; /* 候補セルはクリックでピン替え可能なまま */
}
body.guide-mode .fan-tools { visibility: hidden; }

/* ガイドモード中だけ左上に現れる大きな✕ */
.guide-close {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--hit);
  background: rgba(20, 14, 8, 0.75);
  color: var(--hit);
  font-size: 19px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(240, 189, 94, 0.25);
  transition: background 150ms, transform 120ms;
}
body.guide-mode .guide-close {
  display: flex;
  animation: chip-in 220ms ease-out;
}
.guide-close:hover { background: var(--hit); color: #241504; transform: scale(1.08); }

@keyframes pulse {
  0%, 100% { stroke-opacity: 0.25; }
  50% { stroke-opacity: 1; }
}

/* 中心ハブ（クリックでキーピッカー） */
.fan-hub { cursor: pointer; }
.fan-hub text { user-select: none; }
.hub-ring {
  fill: rgba(20, 14, 8, 0.01);
  stroke: color-mix(in srgb, var(--hit) 35%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  transition: stroke 150ms;
}
.fan-hub:hover .hub-ring { stroke: var(--hit); }

.fan-key {
  fill: var(--hit);
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
}
.fan-sub { fill: var(--text-dim); font-size: 13px; font-family: var(--serif); }

/* トニックのセルは常時うっすら発光（帰る場所） */
.seg.tonic .seg-path {
  stroke: color-mix(in srgb, var(--hit) 55%, transparent);
  stroke-width: 1.5;
}

/* ---------- キーピッカー（五度圏全周） ---------- */

.picker-group { display: none; }
svg.picking .picker-group { display: block; }
svg.picking .fan-group, svg.picking .fan-hub { display: none; }

.pick-seg { cursor: pointer; }
.pick-seg text { pointer-events: none; user-select: none; }
.pick-seg .seg-path {
  fill: #241810;
  stroke: var(--edge-soft);
  transition: fill 150ms;
}
.pick-seg:hover .seg-path { fill: #3a2a1a; }
.pick-seg .seg-label { fill: var(--text-dim); }
.pick-seg:hover .seg-label { fill: var(--text); }

.pick-seg.current .seg-path {
  fill: color-mix(in srgb, var(--hit) 30%, #241810);
  stroke: var(--hit);
  stroke-width: 1.5;
}
.pick-seg.current .seg-label { fill: var(--text); }

/* ピッカー中に弾いている音のルート候補 */
.pick-seg.preview .seg-path {
  stroke: var(--hit);
  stroke-width: 3;
  animation: pulse 0.8s ease-in-out infinite;
}
.pick-seg.preview .seg-label { fill: var(--hit); }

.picker-hub { cursor: pointer; }
.picker-hub-circle {
  fill: #1a120c;
  stroke: var(--edge);
  transition: stroke 150ms;
}
.picker-hub:hover .picker-hub-circle { stroke: var(--text-dim); }
.picker-close {
  fill: var(--text-dim);
  font-size: 22px;
  pointer-events: none;
  user-select: none;
}

/* 扇パネル左上のトグル群（m / 7th） */
.fan-tools {
  position: absolute;
  top: 10px;
  left: 14px;
  z-index: 1;
  display: flex;
  gap: 8px;
}
.fan-tools .chip {
  background: rgba(20, 14, 8, 0.6);
  font-family: var(--serif);
  font-size: 13px;
  min-width: 40px;
}
.fan-tools .chip.is-on {
  background: var(--hit);
  color: #1a120a;
  font-weight: 700;
}

/* ---------- 指板 ---------- */

.fb-board {
  fill: var(--wood);
  stroke: #221208;
  stroke-width: 1.5;
}
.fb-nut { stroke: #ece0c8; stroke-width: 7; stroke-linecap: round; }
.fb-fret { stroke: #8a8174; stroke-width: 2; }
.fb-string { stroke: #c8a368; opacity: 0.9; }
.fb-marker { fill: #d9c9ae; opacity: 0.38; }
.fb-fretnum {
  fill: var(--text-dim);
  font-size: 18px;
  font-weight: 700;
  font-family: var(--serif);
}

.fb-dot { fill: transparent; stroke: none; transition: fill 120ms; }
.fb-deg { fill: transparent; font-size: 16px; font-weight: 700; user-select: none; }
svg.mode-name .fb-deg { font-size: 13px; }

.fb-pos.in-scale .fb-dot { fill: #efe5d0; stroke: #1f1208; stroke-width: 0.5; }
.fb-pos.in-scale .fb-deg { fill: #43301d; }
/* キーのルート(1)の赤塗りは通常表示のみ。コードモード中は主役をコードのルートに譲る */
svg:not(.chord-mode) .fb-pos.is-root .fb-dot { fill: var(--accent); stroke: #f6c0a8; stroke-width: 1; }
svg:not(.chord-mode) .fb-pos.is-root .fb-deg { fill: #fff; }

/* コードモード: 選択中の押さえ方（シェイプ）を機能色で塗りつぶして主役にし、
   その他の構成音は細いリング、コード外のスケール音は沈める */
#fretSvg { --chord-color: var(--hit); }
#fretSvg[data-func="T"] { --chord-color: var(--t); }
#fretSvg[data-func="SD"] { --chord-color: var(--sd); }
#fretSvg[data-func="D"] { --chord-color: var(--d); }

svg.chord-mode .fb-pos.in-scale:not(.chord-tone):not(.chord-root):not(.shape-tone):not(.shape-root):not(.hit-exact):not(.hit-pc) {
  opacity: 0.55;
}

/* 指板全体の構成音（コンテキスト）: 機能色の細リング。
   ルートも同じ控えめ表示 — 目立つのは「塗り=押さえる場所」だけにする */
.fb-pos.chord-tone .fb-dot,
.fb-pos.chord-root .fb-dot {
  stroke: var(--chord-color);
  stroke-width: 2.5;
}

/* 押さえ方ガイド（クリックでピン留め時のみ）: コードダイアグラムの黒丸相当をオレンジ塗りで */
.fb-shape-box {
  fill: rgba(240, 189, 94, 0.09);
  stroke: rgba(240, 189, 94, 0.5);
  stroke-width: 1.5;
  display: none;
  pointer-events: none;
}
.fb-shape-box.show { display: block; }

.fb-pos.shape-tone .fb-dot,
.fb-pos.shape-root .fb-dot {
  fill: var(--accent);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.5;
}
.fb-pos.shape-tone .fb-deg,
.fb-pos.shape-root .fb-deg { fill: #fff; font-weight: 800; }

/* ルート（ルート弦）は白い太枠＋少し大きく */
.fb-pos.shape-root .fb-dot {
  stroke: #fff;
  stroke-width: 3;
  transform: scale(1.18);
  transform-origin: center;
  transform-box: fill-box;
}

/* 金枠の内側: 押さえる位置（塗り）以外は薄くして、枠内の主役を一つにする */
.fb-pos.in-box:not(.shape-tone):not(.shape-root):not(.hit-exact) {
  opacity: 0.25;
}

/* ミュート弦の ✕（ナット左）: 暗い円盤で開放弦ドットを覆い、赤い✕で「弾かない」を明示 */
.fb-mute {
  opacity: 0;
  user-select: none;
  pointer-events: none;
  transition: opacity 150ms;
}
.fb-mute.show { opacity: 1; }
.fb-mute-bg {
  fill: #1a110a;
  stroke: #3c2c1d;
  stroke-width: 1;
}
.fb-mute-x {
  fill: var(--accent);
  font-size: 18px;
  font-weight: 800;
}

/* 検出音 */
.fb-pos.hit-pc .fb-dot { fill: color-mix(in srgb, var(--hit) 55%, #efe5d0); }
.fb-pos.hit-exact .fb-dot {
  fill: var(--hit);
  stroke: #fff;
  stroke-width: 2.5;
  animation: hitpulse 0.9s ease-out infinite;
}
.fb-pos.hit-exact .fb-deg, .fb-pos.hit-exact.is-root .fb-deg { fill: #241504; }

@keyframes hitpulse {
  0% { stroke-opacity: 1; }
  100% { stroke-opacity: 0.25; }
}

/* ---------- 全画面マイク起動オーバーレイ ---------- */

.start-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 8, 4, 0.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
/* 成功したらフェードなしで即座に消す（フェードは「できたか分からない」） */
.start-overlay.hidden { display: none; }

.start-mic {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border: 1px solid #b4452c;
  background: linear-gradient(180deg, #ee6d47, var(--accent) 70%);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 50px rgba(224, 90, 58, 0.4);
  transition: transform 150ms ease;
}
.start-mic:hover { transform: scale(1.06); }
.start-mic:active { transform: scale(0.97); }

/* ソナー状に広がる輪（「ここを押すと音を聴く」を言葉なしで伝える） */
.start-mic::before,
.start-mic::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid rgba(240, 189, 94, 0.65);
  animation: sonar 2.2s ease-out infinite;
  pointer-events: none;
}
.start-mic::after { animation-delay: 1.1s; }

@keyframes sonar {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* 指を押し下げた瞬間〜マイク許可待ち:
   ボタンがアンバーに反転＋縮む＋速い脈動 = 「受け付けた」が一目で分かる */
.start-mic.connecting {
  background: var(--hit);
  border-color: #c79a3e;
  color: #241504;
  transform: scale(0.9);
  box-shadow: 0 6px 30px rgba(240, 189, 94, 0.5);
  animation: connecting-pulse 0.55s ease-in-out infinite;
}
.start-mic.connecting::before, .start-mic.connecting::after {
  animation-play-state: paused;
  opacity: 0;
}

@keyframes connecting-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 189, 94, 0.6); }
  50% { box-shadow: 0 0 0 18px rgba(240, 189, 94, 0); }
}

.start-mic.error {
  animation: shake 0.4s;
  background: #8c2f1d;
  box-shadow: 0 10px 50px rgba(140, 47, 29, 0.5);
}
.start-mic.error::before, .start-mic.error::after { animation-play-state: paused; opacity: 0; }

.start-skip {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(242, 232, 213, 0.25);
  background: transparent;
  color: rgba(242, 232, 213, 0.55);
  font-size: 16px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.start-skip:hover { color: var(--text); border-color: var(--text-dim); }

/* ---------- モバイル（縦持ち・横持ちスマホ〜狭いウィンドウ） ----------
   方針: 扇は大きく・♪/♬は扇の下に左右2カラム・指板は実寸のまま横スクロール
   （縮めて全フレットを押し込むと判読不能になるため）。
   縦持ち = 縦積み（この基本ブロック） / 横持ち = 左右2カラム（後続の landscape ブロック）。
   iPad（縦 744px〜）はデスクトップの2段1画面レイアウトをそのまま使う（15Fを縮小しても判読可）。 */

@media (max-width: 700px), (max-width: 1000px) and (max-height: 540px) {
  /* スクロール・画面切り替えは作らない。すべて1画面に収め切る */
  body { overflow: hidden; }

  /* ヘッダーは置かない: ロゴは情報ゼロ、キー名は扇中心ハブと重複、メーター/感度は非表示。
     必須のマイクボタンだけ右上にフロートさせる（扇パネルの空きコーナーに重なる） */
  .topbar {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
    z-index: 5;
    padding: 0;
    border: none;
    background: none;
  }
  .logo, .key-box, .meter, .gate-range { display: none; }
  .mic-btn { width: 42px; height: 42px; font-size: 17px; }

  main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .panel { flex: 0 0 auto; }

  /* 扇: 全幅。♪/♬はデスクトップ同様に扇の左右の空きコーナーへ内包（行を足さない） */
  .fan-panel { padding: 8px; align-items: center; }
  .fan-panel svg { width: 100%; max-width: 430px; height: auto; }
  .now-note { left: 12px; bottom: 10px; }
  .now-chord { right: 12px; bottom: 10px; }
  .big { font-size: 30px; min-height: 34px; }
  .cents { width: 104px; }

  /* 指板: 縦持ちでは縦向きの指板（main.jsが向きを切替）が残りの高さいっぱいに収まる。
     123⇄ABCは縦長ピルにして右余白へ — 盤面の高さを食わず、両向きで同じ位置 */
  #labelModeBtn {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    flex-direction: column;
  }
  .fret-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
  }
  .fret-panel.guide-on { padding-left: 8px; }
  .fret-tools {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .fret-panel.guide-on .fret-tools { margin-bottom: 6px; }
  .guide-chip { font-size: 16px; padding: 6px 8px 6px 14px; }
  .fret-scroll { flex: 1 1 auto; min-height: 0; padding-right: 60px; }
  .fret-panel svg { width: 100%; height: 100%; }

  /* タッチターゲットを指で押せる高さに */
  .seg-toggle span { padding: 8px 13px; }
  .fan-tools .chip { padding: 7px 15px; }
}

/* 横持ちスマホ: 左=扇（♪/♬内包）/ 右=指板の2カラムで1画面完結。
   縦積み（指板全幅）も試したが扇が潰れすぎて不評 — 再導入しない */
@media (max-width: 1000px) and (max-height: 540px) and (orientation: landscape) {
  body { overflow: hidden; }

  main {
    flex-direction: row;
    align-items: stretch;
    padding: 8px calc(8px + env(safe-area-inset-right))
             calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
    min-height: 0;
  }
  .panel { min-height: 0; }

  .fan-panel { flex: 0 0 260px; }
  .fan-panel svg { max-width: 244px; }
  .big { font-size: 24px; min-height: 28px; }
  .cents { width: 90px; }

  .fret-panel { flex: 1 1 auto; min-width: 0; }
}

/* 背の低い横長ウィンドウ（スマホより広いがデスクトップ前提が崩れる高さ）:
   1画面に押し込まず縦スクロールを許可 */
@media (min-width: 1001px) and (max-height: 540px) {
  body { overflow: auto; }
  main { min-height: 540px; }
}