/* music.html 専用CSS（共通の見た目はcss/style.cssを参照。既存ページのスタイルには一切影響しない） */

/* フッター（codes.html・faq.html・videos.htmlと同じ見た目に揃える） */
.footer{
  text-align:center;
  margin-top:24px;
  font-size:10px;
  color:var(--text-sub);
  opacity:0.6;
  line-height:1.8;
}

body.dark .footer{
  color:#b3a89a;
}

.music-notice{
  margin:10px 0 16px;
  padding:10px 14px;
  border-radius:14px;
  background:var(--card-sub);
  border:1px solid var(--border);
  color:var(--text-sub);
  font-size:12px;
  line-height:1.6;
  text-align:center;
}

body.dark .music-notice{
  background:#383329;
  border-color:#46423b;
  color:#b3a89a;
}

/* 編集/練習モードタブ＋音のON/OFF */
.music-mode-tabs{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  margin-bottom:12px;
}

.music-mode-btn{
  flex:1 1 auto;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card-sub);
  color:var(--text-sub);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.music-mode-btn.active{
  background:var(--indigo);
  border-color:var(--indigo);
  color:#fdf9ef;
}

body.dark .music-mode-btn{
  background:#383329;
  border-color:#46423b;
  color:#b3a89a;
}

body.dark .music-mode-btn.active{
  background:var(--indigo-soft);
  border-color:var(--indigo-soft);
}

.music-sound-btn{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card-sub);
  color:var(--text-sub);
  cursor:pointer;
}

.music-sound-btn.muted{
  color:var(--vermillion);
  border-color:var(--vermillion);
}

body.dark .music-sound-btn{
  background:#383329;
  border-color:#46423b;
  color:#b3a89a;
}

body.dark .music-sound-btn.muted{
  color:var(--vermillion-soft);
  border-color:var(--vermillion-soft);
}

/* 編集モードのサブタブ（準備／作る）。常時表示のコントロールを最小限にするため、
   編集/練習/追従の主タブ(.music-mode-tabs)のすぐ下に、同じ丸ピル型で一段
   小さめのサブタブとして配置し、既存タブと統一感を保ちつつ階層を分かりやすくする */
.music-edit-tabs{
  display:flex;
  gap:6px;
  margin-bottom:12px;
}

.music-edit-tab-btn{
  flex:1 1 auto;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card-sub);
  color:var(--text-sub);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.music-edit-tab-btn.active{
  background:var(--indigo);
  border-color:var(--indigo);
  color:#fdf9ef;
}

body.dark .music-edit-tab-btn{
  background:#2c2823;
  border-color:#46423b;
  color:#b3a89a;
}

body.dark .music-edit-tab-btn.active{
  background:var(--indigo-soft);
  border-color:var(--indigo-soft);
}

.music-edit-tab-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* レイアウト（パネルを縦積み） */
.music-layout{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.music-panel-section{
  padding:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 4px 12px rgba(52,48,43,0.06);
}

body.dark .music-panel-section{
  background:#2c2823;
  border-color:#46423b;
}

.music-panel-title{
  font-size:11px;
  font-weight:700;
  color:var(--text-sub);
  margin-bottom:8px;
  letter-spacing:0.04em;
}

body.dark .music-panel-title{
  color:#b3a89a;
}

.music-score-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.music-score-header-row .music-panel-title{
  margin-bottom:0;
}

.music-history-controls{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}

.music-unsaved-indicator{
  font-size:11px;
  color:var(--vermillion);
  white-space:nowrap;
}

body.dark .music-unsaved-indicator{
  color:var(--dark-highlight);
}

.music-history-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card-sub);
  color:var(--text-sub);
  cursor:pointer;
}

.music-history-btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
}

body.dark .music-history-btn{
  background:#383329;
  border-color:#46423b;
  color:#b3a89a;
}

/* 楽器選択 */
.music-instrument-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.music-instrument-btn{
  flex:1 1 auto;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card-sub);
  color:var(--text-sub);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}

.music-instrument-btn.active{
  background:var(--indigo);
  border-color:var(--indigo);
  color:#fdf9ef;
}

body.dark .music-instrument-btn{
  background:#383329;
  border-color:#46423b;
  color:#b3a89a;
}

body.dark .music-instrument-btn.active{
  background:var(--indigo-soft);
  border-color:var(--indigo-soft);
}

/* 配置（15鍵2列／15鍵3列／22キーなど）の切り替え */
.music-layout-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.music-layout-btn{
  flex:1 1 auto;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-sub);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}

.music-layout-btn.active{
  background:var(--vermillion);
  border-color:var(--vermillion);
  color:#fdf9ef;
}

body.dark .music-layout-btn{
  background:#2c2823;
  border-color:#46423b;
  color:#b3a89a;
}

body.dark .music-layout-btn.active{
  background:var(--vermillion-soft);
  border-color:var(--vermillion-soft);
}

/* 配置・半音表示などの「詳細設定」（初見の操作を減らすため折りたたんでおく） */
.music-advanced-settings{
  margin-top:8px;
}

.music-advanced-settings summary{
  font-size:11px;
  font-weight:700;
  color:var(--text-sub);
  cursor:pointer;
  list-style:none;
}

.music-advanced-settings summary::-webkit-details-marker{
  display:none;
}

.music-advanced-settings summary::before{
  content:"▸ ";
}

.music-advanced-settings[open] summary::before{
  content:"▾ ";
}

body.dark .music-advanced-settings summary{
  color:#b3a89a;
}

/* ピアノ「22キー」限定の半音表示トグル */
.music-semitone-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  font-size:12px;
  color:var(--text);
  cursor:pointer;
}

body.dark .music-semitone-row{
  color:#ece4d4;
}

.music-key-label-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
  font-size:11px;
  color:var(--text-sub);
  cursor:pointer;
}

body.dark .music-key-label-toggle-row{
  color:#b3a89a;
}

/* 演奏ボタンに小さく表示する、対応するキーボードキーのラベル */
.music-note-key{
  position:absolute;
  top:2px;
  left:4px;
  font-size:9px;
  font-weight:700;
  line-height:1;
  color:var(--text-sub);
  opacity:0.75;
  pointer-events:none;
  text-transform:uppercase;
}

body.dark .music-note-key{
  color:#b3a89a;
}

.music-note-btn{
  position:relative;
}

/* 曲名・テンポ */
.music-score-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}

.music-score-name-input{
  flex:1 1 160px;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card-sub);
  color:var(--text);
  font-size:13px;
  font-family:inherit;
}

.music-bpm-row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--text-sub);
}

.music-bpm-input{
  width:60px;
  padding:8px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card-sub);
  color:var(--text);
  font-size:13px;
  text-align:center;
}

.music-timesig-row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--text-sub);
}

.music-timesig-select{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card-sub);
  color:var(--text);
  font-size:13px;
  font-family:inherit;
}

body.dark .music-score-name-input,
body.dark .music-bpm-input,
body.dark .music-timesig-select{
  background:#383329;
  border-color:#46423b;
  color:#ece4d4;
}

/* フリーテンポ譜面：BPM・拍子は演奏に影響しない「目安」であることを示す小さなバッジ */
.music-freetiming-badge{
  padding:2px 8px;
  border-radius:999px;
  background:var(--vermillion);
  color:#fdf9ef;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

body.dark .music-freetiming-badge{
  background:var(--vermillion-soft);
}

/* 録音トグル */
.music-record-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  cursor:pointer;
  margin-bottom:4px;
}

body.dark .music-record-toggle-row{
  color:#ece4d4;
}

.music-record-hint{
  margin:0 0 10px;
  font-size:11px;
  color:var(--vermillion);
  line-height:1.6;
}

body.dark .music-record-hint{
  color:var(--vermillion-soft);
}

/* 区間リピート：譜面の一部分だけ選んで繰り返し練習できる */
.music-loop-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:8px 0;
}

.music-loop-row .music-header-btn{
  flex:0 0 auto;
  padding:7px 12px;
  font-size:11px;
}

.music-loop-row .music-header-btn.active{
  background:var(--vermillion);
  border-color:var(--vermillion);
}

body.dark .music-loop-row .music-header-btn.active{
  background:var(--vermillion-soft);
  border-color:var(--vermillion-soft);
}

.music-loop-range{
  font-size:11px;
  font-weight:700;
  color:var(--text-sub);
}

body.dark .music-loop-range{
  color:#b3a89a;
}

.music-loop-toggle{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  color:var(--text);
  cursor:pointer;
}

body.dark .music-loop-toggle{
  color:#ece4d4;
}

/* 選択中の区間に含まれる音を強調表示する */
.music-chip.in-loop{
  border-color:var(--vermillion);
}

body.dark .music-chip.in-loop{
  border-color:var(--vermillion-soft);
}

/* ループ再生ON中、区間の外の音は控えめにして今どこを繰り返しているか分かりやすくする */
.music-chip.out-of-loop{
  opacity:0.4;
}

/* 区間選択中、開始の音だけを選んだ直後（終了はまだ）を点滅表示して、
   次にどこをタップすればよいか分かりやすくする */
.music-chip.loop-pending{
  border-style:dashed;
  border-color:var(--vermillion);
  animation:music-loop-pending-pulse 1.1s ease-in-out infinite;
}

body.dark .music-chip.loop-pending{
  border-color:var(--vermillion-soft);
}

@keyframes music-loop-pending-pulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(177,80,59,0.35); }
  50%{ box-shadow:0 0 0 4px rgba(177,80,59,0); }
}

/* パネル内に並べるヘッダー風ボタン */
.music-panel-btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.music-header-btn{
  flex:1 1 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--indigo);
  background:var(--indigo);
  color:#fdf9ef;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}

body.dark .music-header-btn{
  background:var(--indigo-soft);
  border-color:var(--indigo-soft);
}

.music-header-btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
}

/* ボタンの視覚的優先度：主要(無指定＝.music-header-btnの既定の塗りつぶし)／
   副次(.music-btn-secondary)／破壊的操作(.music-btn-danger)の3段階に統一する。
   形状(パディング・角丸等)は個々のベースクラスに任せ、ここでは色だけ上書きする */
.music-btn-secondary{
  background:var(--card-sub);
  border-color:var(--border);
  color:var(--text-sub);
}

body.dark .music-btn-secondary{
  background:#2c2823;
  border-color:#46423b;
  color:#b3a89a;
}

.music-btn-danger{
  background:transparent;
  border-color:var(--vermillion);
  color:var(--vermillion);
}

body.dark .music-btn-danger{
  border-color:var(--vermillion-soft);
  color:var(--vermillion-soft);
}

/* 保存済み譜面一覧の「削除」ボタンは.music-saved-actions button側の見た目が
   詳細度で勝ってしまうため、ここだけ個別に上書きする */
.music-saved-actions button.music-btn-danger{
  border-color:var(--vermillion);
  color:var(--vermillion);
  background:transparent;
}

body.dark .music-saved-actions button.music-btn-danger{
  border-color:var(--vermillion-soft);
  color:var(--vermillion-soft);
}

#musicScoreEditRow{
  flex-direction:column;
  align-items:stretch;
  margin-top:10px;
}

/* 再生（編集／練習／追従の全モード共通。#musicPlaybackRowが1つのDOMノードとして
   各モードのアンカーへ付け替えられるため、ここで一度定義するだけで全モードに反映される） */
.music-playback-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
}

/* シークバー：曲全体を実時間の連続バーとして表示し、任意の位置へドラッグできる。
   token単位のスナップではなく、min="0" max="1000"の目盛りを曲の合計時間(ms)に
   割り当てることで連続的な位置指定にしている（JS側で値/1000を秒として扱う） */
.music-seek-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.music-seek-slider{
  flex:1;
  accent-color:var(--indigo);
}

.music-seek-time{
  flex-shrink:0;
  font-size:11px;
  color:var(--text-sub);
  min-width:76px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.music-playback-controls-row{
  display:flex;
  align-items:center;
  gap:14px;
}

.music-playpause-btn{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid var(--indigo);
  background:var(--indigo);
  color:#fdf9ef;
  cursor:pointer;
}

body.dark .music-playpause-btn{
  background:var(--indigo-soft);
  border-color:var(--indigo-soft);
}

.music-speed-control{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
}

.music-speed-control input[type="range"]{
  flex:1;
  accent-color:var(--indigo);
}

.music-speed-control span{
  flex-shrink:0;
  font-size:12px;
  color:var(--text-sub);
  min-width:44px;
  text-align:right;
}

.music-practice-hint{
  margin:10px 0 0;
  font-size:11px;
  color:var(--text-sub);
  line-height:1.6;
}

body.dark .music-practice-hint{
  color:#b3a89a;
}

/* 音の長さ選択（録音中は押した長さで決まるため無効化する） */
.music-duration-options{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px;
}

.music-duration-options.disabled{
  opacity:0.4;
  pointer-events:none;
}

.music-duration-btn{
  padding:7px 11px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card-sub);
  color:var(--text-sub);
  font-size:11px;
  cursor:pointer;
}

.music-duration-btn.active{
  background:var(--indigo);
  border-color:var(--indigo);
  color:#fdf9ef;
}

body.dark .music-duration-btn{
  background:#383329;
  border-color:#46423b;
  color:#b3a89a;
}

body.dark .music-duration-btn.active{
  background:var(--indigo-soft);
  border-color:var(--indigo-soft);
}

/* 譜面表示（グリッド譜。編集プレビュー・練習ハイライト共通）。
   時系列のマスが折り返しながら並び、各マスの中に「演奏ボタンと同じ形」の
   ミニ鍵盤ドットを表示して、押す位置がひと目で分かるようにする */
.music-score-display{
  display:flex;
  flex-wrap:wrap;
  overflow-x:visible;
  gap:6px;
  padding:10px;
  border-radius:12px;
  background:var(--card-sub);
  min-height:56px;
  align-items:flex-start;
}

body.dark .music-score-display{
  background:#383329;
}

.music-score-empty{
  padding:14px;
  color:var(--text-sub);
  font-size:12px;
  white-space:nowrap;
}

.music-chip{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px;
  border-radius:9px;
  background:var(--card);
  border:1px solid var(--border);
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* マス内のミニ鍵盤ドット（演奏ボタンと同じ行×列の配置を再現） */
.music-chip-grid{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.chip-dot-row{
  display:flex;
  gap:3px;
}

.chip-dot{
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--text-sub);
  opacity:.35;
  flex-shrink:0;
}

/* 実際に押す音＝画像の白い四角にあたる部分 */
.chip-dot.active{
  width:12px;
  height:12px;
  border-radius:3px;
  background:var(--text);
  opacity:1;
}

body.dark .chip-dot{
  background:#8a8074;
}

body.dark .chip-dot.active{
  background:#ece4d4;
}

.music-chip.current .chip-dot.active{
  background:#fdf9ef;
}

.music-chip.selected .chip-dot.active{
  background:#fdf9ef;
}

.music-chip.current{
  background:var(--indigo);
  border-color:var(--indigo);
}

/* 休符：画像の「消灯したマス」と同じ見た目にする。ドットは全て非点灯のまま、
   マス全体を控えめにして他の音符と見分けやすくする */
.music-chip.rest{
  border-style:dashed;
  opacity:.55;
}

.music-chip.rest.current{
  opacity:1;
}

.music-chip-bar{
  width:2px;
  height:32px;
  border-radius:0;
  background:var(--vermillion);
  border:none;
}

body.dark .music-chip{
  background:#2c2823;
  border-color:#46423b;
}

body.dark .music-chip.current{
  background:var(--indigo-soft);
  border-color:var(--indigo-soft);
}

body.dark .music-chip-bar{
  background:var(--vermillion-soft);
}

/* 手直し対象として選択中の音（編集モードでタップして選ぶ） */
.music-chip.selected{
  background:var(--indigo);
  border-color:var(--indigo);
  box-shadow:0 0 0 2px rgba(60,90,110,0.25);
}

.music-chip.selected .music-note-digit,
.music-chip.selected .music-note-kana{
  color:#fdf9ef;
}

body.dark .music-chip.selected{
  background:var(--indigo-soft);
  border-color:var(--indigo-soft);
}

/* ハミングから自動変換され、まだ確認・修正していない音 */
.music-chip.hum-review{
  border-style:dashed;
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(200,168,107,0.45);
}

/* シークバーをドラッグ中のプレビュー位置（音は鳴らさず、その時点の音だけを示す）。
   先読みガイド(indigo)・正解フィードバック(vermillion)・区間リピート(vermillion)と
   衝突しない色として--goldを使う */
.music-chip.seek-preview{
  border-style:dashed;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(200,168,107,0.4);
}

/* 選んだ音を手直しする操作パネル */
.music-note-toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 0;
}

.music-note-toolbar .music-header-btn{
  flex:0 0 auto;
  padding:7px 12px;
  font-size:11px;
}

.music-note-toolbar-label{
  flex:1 1 auto;
  font-size:12px;
  font-weight:700;
  color:var(--text);
}

body.dark .music-note-toolbar-label{
  color:#ece4d4;
}

/* ハミングからの自動変換直後、未確認の音が残っていることを知らせるバナー */
.music-review-banner{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
  padding:8px 12px;
  border-radius:10px;
  border:1px dashed var(--gold);
  background:rgba(200,168,107,0.14);
}

.music-review-banner span{
  font-size:11px;
  color:var(--text);
  line-height:1.5;
}

body.dark .music-review-banner{
  background:rgba(200,168,107,0.1);
}

body.dark .music-review-banner span{
  color:#ece4d4;
}

.music-review-clear-btn{
  flex-shrink:0;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--gold);
  background:transparent;
  color:var(--text);
  font-size:11px;
  cursor:pointer;
  white-space:nowrap;
}

body.dark .music-review-clear-btn{
  color:#ece4d4;
}

.music-note-digit{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  line-height:1.3;
}

.music-note-kana{
  font-size:9px;
  color:var(--text-sub);
  line-height:1.2;
}

body.dark .music-note-digit{
  color:#ece4d4;
}

body.dark .music-note-kana{
  color:#b3a89a;
}

/* 演奏ボタン（実機の配置を再現） */
.music-instrument-grid{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.music-instrument-row{
  display:flex;
  gap:6px;
}

.music-note-btn{
  /* 押し込み表現（押し感）の調整用変数。強さ・速さをここの数値だけで
     調整できるようにまとめてある（先読みガイド／正解フィードバックと同じ方針）。
     押し込み中(--press-*)は反応の速さを損なわないよう100ms未満にし、
     離した後に元へ戻る(--press-release-*)側だけ軽いバウンド感を出す時間・
     イージングにしている */
  --press-scale:0.92;
  --press-duration:70ms;
  --press-ease:ease-out;
  --press-release-duration:220ms;
  --press-release-ease:cubic-bezier(0.34, 1.56, 0.64, 1); /* 少しだけ行き過ぎてから戻る「バウンド」イージング */
  --press-shadow-rest:0 2px 0 rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.12);
  --press-shadow-active:0 0 0 rgba(0, 0, 0, 0);

  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:10px 2px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card-sub);
  cursor:pointer;
  box-shadow:var(--press-shadow-rest);
  /* 離した後に元のサイズ・影へ戻る動き（バウンド感を出すため少し長め・
     オーバーシュートするイージング）。押し込み中はtransition-durationだけ
     .pressed/:active側で上書きして速くする（プロパティ自体はここで一括定義） */
  transition:transform var(--press-release-duration) var(--press-release-ease),
    box-shadow var(--press-release-duration) var(--press-release-ease);
  -webkit-tap-highlight-color:transparent;
  /* 長押し（録音・練習モードでの押しっぱなし）でOS標準のテキスト選択や
     コピー/調べるメニューが出てしまうのを防ぐ */
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  /* touch-actionがauto(既定)のままだと、ブラウザが「スクロール/ピンチ操作の
     可能性」を判定するためタップ開始からpointerdownの確定発火までを一瞬保留する
     ことがあり、同時押し・連打で一部の指の反応が遅れる/取りこぼされる原因になる。
     このボタン上では独自にpointerイベントだけを処理するため、ブラウザ標準の
     ジェスチャー認識自体を無効化し即座にpointerdownが届くようにする
     （副作用として長押し時のテキスト選択・拡大鏡UIの抑止にも寄与する） */
  touch-action:none;
}

.music-note-digit,
.music-note-kana{
  user-select:none;
  -webkit-user-select:none;
}

/* 練習モード：実機の演奏画面スクリーンショット(1600×1118px)を基準にした
   絶対座標で、ボタンの位置・大きさを実機と同じ相対比になるよう再現する
   （js/music-config.js の positions/accidentalPositions を参照）。
   実機の画面アスペクト比(1600:1118)を保ったまま、画面サイズが違う端末でも
   レターボックス/ピラーボックス状に収める（実機の演奏画面と同じ挙動）。
   コンテナクエリ(cqh)を使うことで、JSでのリサイズ計算なしに常に画面へ
   ぴったり収まるサイズを算出できる */
.music-instrument-grid.practice-size{
  position:relative;
  z-index:1; /* 背景に重ねる実機画像(#musicCalibBgImage, z-index:0)より上に表示する */
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  container-type:size;
}

/* 「作る」タブで録音中は、通常のパネル内でも練習モードと同じ実機座標配置
   （js/music-editor.jsのrenderInstrumentGrid）を使う。全画面の練習ステージ
   （高さ=画面いっぱい）とは違い、ここは通常のドキュメントフロー内のため、
   height:100%（親の高さ）だけでは高さが定まらない。明示的な高さを与えることで、
   .music-stage-frameのアスペクト比計算(cqh)が機能するようにする */
#musicInstrumentGridAnchorEdit .music-instrument-grid.practice-size{
  height:clamp(240px, 48vh, 460px);
}

.music-stage-frame{
  position:relative;
  aspect-ratio:1600 / 1118;
  width:min(100%, 143.113cqh); /* 1600/1118 ≒ 1.43113。高さいっぱいに収まる幅の上限 */
  max-width:100%;
  max-height:100%;
  container-type:size;
}

/* ボタンの大きさ・位置は端末によって「ちょうど良い」感覚に個人差・機種差があるため、
   固定値ではなくユーザーが調整モードで拡大縮小・移動でき、その値をlocalStorageに
   保存して端末ごとに記憶する（js/music-editor.jsのapplyCalibTransform）。
   調整していない場合のデフォルト値もJS側(MUSIC_CALIB_DEFAULT)で管理する */

/* 調整モード中、位置合わせの目安として実機のスクリーンショットを薄く背景表示できる。
   画像は保存せずその場限り（js/music-editor.jsでURL.createObjectURLを都度発行） */
#musicCalibBgImage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover; /* containだと画面より横長の端末で左右が余白になり画像が届かないため、
                        cover で常に左右いっぱいに表示する（はみ出た上下は自動的に隠れる） */
  /* Safariのツールバー分だけ表示領域の縦幅が実際の画面より少し小さくなり、cover側で
     上下を少しトリミングすることになる。上端はどのみち上部バーで隠れる部分なので、
     下側を基準に揃えて削れる分を上だけに寄せる */
  object-position:center bottom;
  opacity:0.55;
  pointer-events:none;
  z-index:0;
  display:none;
}

/* 調整モード中だけ表示する、ドラッグ・ピンチ操作を受け止める透明レイヤー。
   演奏ボタンより上、上部バー(z-index:2)より下に置き、誤って音が鳴るのを防ぎつつ
   上部バーの操作（ロック・終了など）はそのまま行える */
.music-calib-catcher{
  display:none;
  position:absolute;
  inset:0;
  z-index:1;
  touch-action:none;
  cursor:move;
}

.music-practice-stage.calibrating .music-calib-catcher{
  display:block;
}

/* 調整モード中、左右中央に近づくと磁石のように吸着し、その間だけ縦の補助線を
   表示する（js/music-editor.jsのMUSIC_CALIB_SNAP_THRESHOLD／.snappedクラスの
   切り替え）。縦位置(offsetY)は端末や好みによって中央からずらすのが正しい
   場合が多いためスナップ対象にしない。上部バー・下部の操作パネルの下に
   隠れるようz-indexは低めにしておく */
.music-calib-guide{
  display:none;
  position:absolute;
  z-index:1;
  background:var(--vermillion);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.12s ease;
}

.music-practice-stage.calibrating .music-calib-guide{
  display:block;
}

.music-calib-guide.snapped{
  opacity:0.85;
}

.music-calib-guide-v{
  top:0;
  bottom:0;
  left:50%;
  width:1.5px;
  transform:translateX(-50%);
}

body.dark .music-calib-guide{
  background:var(--vermillion-soft);
}

.music-calib-toggle-btn{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card-sub);
  color:var(--text-sub);
  cursor:pointer;
}

.music-calib-toggle-btn.active{
  background:var(--indigo);
  border-color:var(--indigo);
  color:#fdf9ef;
}

/* 前回ロックして保存した調整値がデフォルトと異なる（＝調整済み）ことを示す印。
   色だけに頼らないよう、通常時には存在しない小さな丸自体の有無で判別できるようにする */
.music-calib-toggle-btn.has-custom::after{
  content:"";
  position:absolute;
  top:-2px;
  right:-2px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--vermillion);
  border:1.5px solid var(--card);
}

body.dark .music-calib-toggle-btn{
  background:#383329;
  border-color:#46423b;
  color:#b3a89a;
}

body.dark .music-calib-toggle-btn.active{
  background:var(--indigo-soft);
  border-color:var(--indigo-soft);
}

body.dark .music-calib-toggle-btn.has-custom::after{
  background:var(--vermillion-soft);
  border-color:#2c2823;
}

/* 練習モードに初めて入った時だけ、調整ボタンの存在を一度だけ知らせる吹き出し */
.music-calib-hint-bubble{
  display:none;
  position:absolute;
  top:34px;
  right:0;
  z-index:4;
  max-width:150px;
  padding:6px 10px;
  border-radius:10px;
  background:var(--indigo);
  color:#fdf9ef;
  font-size:11px;
  line-height:1.4;
  text-align:left;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

.music-calib-hint-bubble.show{
  display:block;
}

.music-calib-hint-bubble::before{
  content:"";
  position:absolute;
  top:-5px;
  right:10px;
  width:10px;
  height:10px;
  background:var(--indigo);
  transform:rotate(45deg);
}

body.dark .music-calib-hint-bubble,
body.dark .music-calib-hint-bubble::before{
  background:var(--indigo-soft);
}

/* 調整モード中に画面下部へ出す操作パネル（背景画像を選ぶ／リセット／ロック） */
.music-calib-overlay{
  display:none;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  box-sizing:border-box;
  background:linear-gradient(rgba(52,48,43,0), rgba(52,48,43,0.55) 40%);
}

.music-practice-stage.calibrating .music-calib-overlay{
  display:flex;
}

.music-calib-hint{
  margin:0;
  font-size:11px;
  color:#fdf9ef;
  text-align:center;
}

.music-calib-btn-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}

.music-calib-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}

.music-calib-btn.music-calib-lock-btn{
  background:var(--indigo);
  border-color:var(--indigo);
  color:#fdf9ef;
}

body.dark .music-calib-btn{
  background:#2c2823;
  border-color:#46423b;
  color:#ece4d4;
}

body.dark .music-calib-btn.music-calib-lock-btn{
  background:var(--indigo-soft);
  border-color:var(--indigo-soft);
}

/* 円形ボタン：aspect-ratioだけだと数字+かなの2行分のテキストで縦に伸びてしまうため、
   高さも%で明示して真円を保つ（フレームの縦横比は1600:1118で固定なので、
   幅%×(1600/1118)が同じ見た目の大きさになる高さ%になる）。
   半音ボタンの当たり判定(::before)を円の外側まで広げるため、overflowはvisibleのままにする
   （内容がわずかに円をはみ出す場合があるが、タップ判定の正しさを優先する） */
.music-stage-btn{
  position:absolute;
  width:5.56%;
  height:calc(5.56% * 1600 / 1118);
  padding:0;
  border-radius:50%;
  transform:translate(-50%, -50%);
}

.music-stage-btn .music-note-digit{
  font-size:clamp(9px, 2.6cqw, 32px);
}

.music-stage-btn .music-note-kana{
  font-size:clamp(6px, 1.3cqw, 16px);
}

/* 半音ボタンは実機の見た目通りメインボタンの約72%サイズ。円が小さくなるぶん
   文字サイズも比例して縮小し、2行のテキストが円の中に収まりやすくする */
.music-stage-btn.accidental{
  width:calc(5.56% * 0.72);
  height:calc(5.56% * 0.72 * 1600 / 1118);
}

.music-stage-btn.accidental .music-note-digit{
  font-size:clamp(7px, calc(2.6cqw * 0.72), 23px);
}

.music-stage-btn.accidental .music-note-kana{
  font-size:clamp(5px, calc(1.3cqw * 0.72), 12px);
}

/* 視覚サイズのままだと実機よりタップしづらいため、当たり判定だけ少し広げる */
.music-stage-btn.accidental::before{
  content:"";
  position:absolute;
  inset:-6px;
}

.music-note-btn:active,
.music-note-btn.pressed{
  background:var(--indigo);
  /* 「物理的に押し込んだ」感覚：わずかに縮小しつつ、浮き上がって見えていた
     影(--press-shadow-rest)を潰して沈み込んだように見せる。押し込み中は
     反応の速さを損なわないよう、ここでtransition-durationだけ短く上書きする
     （プロパティ自体はベースの.music-note-btnで定義済み） */
  transform:scale(var(--press-scale));
  box-shadow:var(--press-shadow-active);
  transition-duration:var(--press-duration);
  transition-timing-function:var(--press-ease);
}

.music-note-btn:active .music-note-digit,
.music-note-btn:active .music-note-kana,
.music-note-btn.pressed .music-note-digit,
.music-note-btn.pressed .music-note-kana{
  color:#fdf9ef;
}

/* 練習モードの演奏ボタン(.music-stage-btn)はtranslate(-50%,-50%)で中心寄せ
   配置されているため、上のルールのようにtransform:scale(...)だけを書くと
   その位置指定が上書きされボタンがずれて見えてしまう（正解フィードバックの
   アニメーションで対処した問題と同じ）。ここでもtranslateとscaleを同じ
   transform値の中に明示的にまとめて書く必要がある */
.music-stage-btn:active,
.music-stage-btn.pressed{
  transform:translate(-50%, -50%) scale(var(--press-scale));
}

/* ピアノの黒鍵（半音ボタン）は実機同様、ダークモードに関わらず常に黒で固定する */
.music-note-btn.accidental{
  background:#1a1a1a;
  border-color:#000;
}

.music-note-btn.accidental .music-note-digit,
.music-note-btn.accidental .music-note-kana{
  color:#fdf9ef;
}

/* 黒鍵も白鍵と同じく、押している間は色が変わって押し込んだことが分かるようにする。
   通常時に黒固定にしている.music-note-btn.accidentalと詳細度が同じ(クラス2つ)だと
   後に定義された側が勝つだけになり打ち消し合ってしまうため、:active/.pressedを
   加えて詳細度を上げて確実に上書きする */
.music-note-btn.accidental:active,
.music-note-btn.accidental.pressed{
  background:var(--indigo);
}

/* ── 練習モードのキー点灯（先読みガイド／正解フィードバック）調整用変数 ──
   強さ・色・速さをここの数値だけで調整できるようにまとめてある。
   色はRGB成分だけを持たせ、rgba()側で不透明度を変えられるようにしている
   （--indigo/--vermillion等の既存パレット変数とちょうど同じ値。演奏ボタンの
   .pressedや他のUI要素と衝突しない、既存のアクセントカラーをそのまま使う） */
.music-note-btn.practice-guide,
.music-note-btn.practice-correct{
  --practice-guide-rgb:60, 90, 110;        /* 先読みガイドの色(indigo) */
  --practice-guide-rgb-dark:90, 125, 146;  /* ダークモード時 */
  --practice-guide-ring-width:5px;
  --practice-guide-outline-width:2px;
  --practice-guide-glow-blur:24px;
  --practice-guide-glow-spread:9px;
  --practice-guide-glow-blur-peak:32px;
  --practice-guide-glow-spread-peak:12px;
  --practice-guide-opacity-peak:0.95;
  --practice-guide-opacity-low:0.6;
  --practice-guide-bg-opacity:0.32;
  --practice-guide-pulse-duration:1s;

  --practice-correct-rgb:177, 80, 59;        /* 正解フィードバックの色(vermillion) */
  --practice-correct-rgb-dark:201, 112, 88;  /* ダークモード時 */
  --practice-correct-ring-width:8px;
  --practice-correct-glow-blur:40px;
  --practice-correct-glow-spread:16px;
  --practice-correct-opacity-peak:1;
  --practice-correct-scale-peak:1.16;
  --practice-correct-duration:0.75s;
}

/* 練習モードのキー点灯：次に弾くべき音への先読みガイド。
   .pressed（実際に押した瞬間の背景色変化）とは独立して付け外しするため
   背景色は変えずbox-shadow・outlineで表現する。常時点灯のため、
   ゆっくり明滅させて「光っているのが分かる」強さを保ちつつ目のチカチカを防ぐ。
   実機はボタンが密集しているため、隣接ボタンへ極端ににじまない範囲のぼかし幅にしてある */
.music-note-btn.practice-guide{
  background:rgba(var(--practice-guide-rgb), var(--practice-guide-bg-opacity));
  outline:var(--practice-guide-outline-width) solid rgb(var(--practice-guide-rgb));
  outline-offset:1px;
  box-shadow:0 0 0 var(--practice-guide-ring-width) rgb(var(--practice-guide-rgb)), 0 0 var(--practice-guide-glow-blur) var(--practice-guide-glow-spread) rgba(var(--practice-guide-rgb), var(--practice-guide-opacity-peak));
  animation:music-practice-guide-pulse var(--practice-guide-pulse-duration) ease-in-out infinite;
}

@keyframes music-practice-guide-pulse{
  0%, 100%{ box-shadow:0 0 0 var(--practice-guide-ring-width) rgb(var(--practice-guide-rgb)), 0 0 var(--practice-guide-glow-blur) var(--practice-guide-glow-spread) rgba(var(--practice-guide-rgb), var(--practice-guide-opacity-peak)); }
  50%{ box-shadow:0 0 0 var(--practice-guide-ring-width) rgb(var(--practice-guide-rgb)), 0 0 var(--practice-guide-glow-blur-peak) var(--practice-guide-glow-spread-peak) rgba(var(--practice-guide-rgb), var(--practice-guide-opacity-low)); }
}

body.dark .music-note-btn.practice-guide{
  background:rgba(var(--practice-guide-rgb-dark), calc(var(--practice-guide-bg-opacity) + 0.05));
  outline-color:rgb(var(--practice-guide-rgb-dark));
  box-shadow:0 0 0 var(--practice-guide-ring-width) rgb(var(--practice-guide-rgb-dark)), 0 0 var(--practice-guide-glow-blur) var(--practice-guide-glow-spread) rgba(var(--practice-guide-rgb-dark), var(--practice-guide-opacity-peak));
  animation-name:music-practice-guide-pulse-dark;
}

@keyframes music-practice-guide-pulse-dark{
  0%, 100%{ box-shadow:0 0 0 var(--practice-guide-ring-width) rgb(var(--practice-guide-rgb-dark)), 0 0 var(--practice-guide-glow-blur) var(--practice-guide-glow-spread) rgba(var(--practice-guide-rgb-dark), var(--practice-guide-opacity-peak)); }
  50%{ box-shadow:0 0 0 var(--practice-guide-ring-width) rgb(var(--practice-guide-rgb-dark)), 0 0 var(--practice-guide-glow-blur-peak) var(--practice-guide-glow-spread-peak) rgba(var(--practice-guide-rgb-dark), var(--practice-guide-opacity-low)); }
}

/* 正解フィードバック：正しく押した瞬間、先読みガイドより一回り太いリング・
   高い不透明度で強く光り、一瞬だけ拡大してから元の大きさに戻りつつ
   フェードアウトする（「押せた」ことが直感的に伝わるように）。
   translate(-50%, -50%)は演奏ボタン本体の中心寄せ配置(.music-stage-btn)を
   保つために必須（scale()だけを書くとその位置指定が上書きされ、ボタンが
   ずれて見えてしまう） */
@keyframes music-practice-correct-flash{
  0%{
    transform:translate(-50%, -50%) scale(1);
    box-shadow:0 0 0 var(--practice-correct-ring-width) rgb(var(--practice-correct-rgb)), 0 0 var(--practice-correct-glow-blur) var(--practice-correct-glow-spread) rgba(var(--practice-correct-rgb), var(--practice-correct-opacity-peak));
  }
  20%{
    transform:translate(-50%, -50%) scale(var(--practice-correct-scale-peak));
    box-shadow:0 0 0 var(--practice-correct-ring-width) rgb(var(--practice-correct-rgb)), 0 0 var(--practice-correct-glow-blur) var(--practice-correct-glow-spread) rgba(var(--practice-correct-rgb), var(--practice-correct-opacity-peak));
  }
  100%{
    transform:translate(-50%, -50%) scale(1);
    box-shadow:0 0 0 var(--practice-correct-ring-width) rgba(var(--practice-correct-rgb), 0), 0 0 0 0 rgba(var(--practice-correct-rgb), 0);
  }
}

@keyframes music-practice-correct-flash-dark{
  0%{
    transform:translate(-50%, -50%) scale(1);
    box-shadow:0 0 0 var(--practice-correct-ring-width) rgb(var(--practice-correct-rgb-dark)), 0 0 var(--practice-correct-glow-blur) var(--practice-correct-glow-spread) rgba(var(--practice-correct-rgb-dark), var(--practice-correct-opacity-peak));
  }
  20%{
    transform:translate(-50%, -50%) scale(var(--practice-correct-scale-peak));
    box-shadow:0 0 0 var(--practice-correct-ring-width) rgb(var(--practice-correct-rgb-dark)), 0 0 var(--practice-correct-glow-blur) var(--practice-correct-glow-spread) rgba(var(--practice-correct-rgb-dark), var(--practice-correct-opacity-peak));
  }
  100%{
    transform:translate(-50%, -50%) scale(1);
    box-shadow:0 0 0 var(--practice-correct-ring-width) rgba(var(--practice-correct-rgb-dark), 0), 0 0 0 0 rgba(var(--practice-correct-rgb-dark), 0);
  }
}

.music-note-btn.practice-correct{
  animation:music-practice-correct-flash var(--practice-correct-duration) ease-out;
}

body.dark .music-note-btn.practice-correct{
  animation-name:music-practice-correct-flash-dark;
}

/* ミスフィードバック：期待していない音を押した瞬間、押したボタンだけを
   赤茶色で短く光らせつつ小さく左右に揺らす（正解フィードバックとは色・
   動きの両方で区別し、色だけに頼らないようにする）。translate(-50%, -50%)の
   再指定が必要な理由は正解フィードバックと同じ */
@keyframes music-practice-miss-flash{
  0%{
    transform:translate(-50%, -50%) translateX(0);
    box-shadow:0 0 0 4px rgb(var(--music-practice-miss-rgb)), 0 0 18px 4px rgba(var(--music-practice-miss-rgb), 0.9);
  }
  30%{
    transform:translate(-50%, -50%) translateX(-3px);
  }
  60%{
    transform:translate(-50%, -50%) translateX(3px);
  }
  100%{
    transform:translate(-50%, -50%) translateX(0);
    box-shadow:0 0 0 4px rgba(var(--music-practice-miss-rgb), 0), 0 0 0 0 rgba(var(--music-practice-miss-rgb), 0);
  }
}

@keyframes music-practice-miss-flash-dark{
  0%{
    transform:translate(-50%, -50%) translateX(0);
    box-shadow:0 0 0 4px rgb(var(--music-practice-miss-rgb-dark)), 0 0 18px 4px rgba(var(--music-practice-miss-rgb-dark), 0.9);
  }
  30%{
    transform:translate(-50%, -50%) translateX(-3px);
  }
  60%{
    transform:translate(-50%, -50%) translateX(3px);
  }
  100%{
    transform:translate(-50%, -50%) translateX(0);
    box-shadow:0 0 0 4px rgba(var(--music-practice-miss-rgb-dark), 0), 0 0 0 0 rgba(var(--music-practice-miss-rgb-dark), 0);
  }
}

.music-note-btn.practice-miss{
  --music-practice-miss-rgb:139, 74, 61;
  animation:music-practice-miss-flash 0.4s ease-out;
}

body.dark .music-note-btn.practice-miss{
  --music-practice-miss-rgb-dark:196, 122, 108;
  animation-name:music-practice-miss-flash-dark;
}

/* シークバーをドラッグ中、その時点で鳴る予定の音を無音のままプレビュー表示する。
   先読みガイド(indigo)・正解フィードバック(vermillion)と見分けやすいよう--goldを使う */
.music-note-btn.seek-preview{
  outline:2px dashed rgb(200, 168, 107);
  outline-offset:1px;
  box-shadow:0 0 0 4px rgba(200, 168, 107, 0.35);
}

body.dark .music-note-btn{
  background:#383329;
  border-color:#46423b;
  /* 暗い背景の上では黒い影の視認性が下がるため、不透明度を上げて釣り合わせる */
  --press-shadow-rest:0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.35);
}

/* body.dark .music-note-btn(型セレクタ込みで詳細度が高い)がそのままだと、
   ダークモードでは.pressed/:active側のindigo背景が上書きされてしまい
   白鍵を押しても色が変わって見えなかったため、同じ形で明示的に上書きする */
body.dark .music-note-btn:active,
body.dark .music-note-btn.pressed{
  background:var(--indigo);
}

body.dark .music-note-btn.accidental{
  background:#1a1a1a;
  border-color:#000;
}

/* body.dark .music-note-btn.accidental(型セレクタ込みで詳細度が高い)に対抗して
   ダークモードでも黒鍵の押下時色変化を確実に上書きするため、同じ形で明示する */
body.dark .music-note-btn.accidental:active,
body.dark .music-note-btn.accidental.pressed{
  background:var(--indigo);
}

/* 黒鍵（半音ボタン）が先読みガイド(.practice-guide)の対象になった時も、
   白鍵と同じ色でしっかり光らせる。ライトモードでは.music-note-btn.accidentalの
   方が先に定義されているため.practice-guideの背景でそのまま上書きできるが、
   ダークモードは逆順（body.dark .music-note-btn.accidentalの方が後）で
   詳細度も同じため、このままだと黒鍵だけガイドの背景色が点かない。
   :active/.pressedと同じ要領で詳細度を上げて明示的に上書きする */
.music-note-btn.accidental.practice-guide{
  background:rgba(var(--practice-guide-rgb), var(--practice-guide-bg-opacity));
}

body.dark .music-note-btn.accidental.practice-guide{
  background:rgba(var(--practice-guide-rgb-dark), calc(var(--practice-guide-bg-opacity) + 0.05));
}

/* 「作る」タブの録音中に「全画面で演奏する」で開ける全画面ステージ。練習モードと
   同じ構成（演奏ボタン領域を画面全体に敷き、上部バー・譜面プレビューをその上に
   重ねる）にすることで、練習モードの「実機画像に重ねる」調整機能一式
   （.music-calib-*、js/music-editor.jsが調整時にstageへ付け替える）を
   そのまま使えるようにする。#musicInstrumentGridAnchorRecord・
   #musicScoreDisplayAnchorRecordそれぞれのサイズ・重ね順は、練習モード側の
   同等ルール（.music-practice-stage #musicInstrumentGridAnchorPractice等）と
   揃えてある */
.music-record-stage{
  display:none;
  position:fixed;
  inset:0;
  z-index:1900;
  background:var(--card);
  overflow:hidden;
}

.music-record-stage.active{
  display:block;
}

body.dark .music-record-stage{
  background:#211e19;
}

@media (orientation:portrait){
  .music-record-stage.active{
    width:100vh;
    height:100vw;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) rotate(90deg);
  }
}

.music-record-stage-title{
  flex:1;
  min-width:0;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.dark .music-record-stage-title{
  color:#ece4d4;
}

.music-practice-stage-overlay-top #musicScoreDisplayAnchorRecord{
  flex-shrink:1;
  min-height:0;
  overflow:hidden;
  margin-top:8px;
}

.music-record-stage #musicInstrumentGridAnchorRecord{
  position:absolute;
  inset:0;
  padding:6px 10px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
}

.music-record-stage.calibrating .music-calib-catcher{
  display:block;
}

.music-record-stage.calibrating .music-calib-guide{
  display:block;
}

.music-record-stage.calibrating .music-calib-overlay{
  display:flex;
}

/* 練習モード：全画面の専用ステージ。実機の指の感覚に合わせて練習できるよう、
   通常のページ（ナビ・楽器選択などの編集用パネル）を覆い隠し、譜面と演奏ボタンだけの
   画面にする。端末が縦向きの場合はCSSで画面全体を90度回転させ、実機同様の横画面表示を
   自動的に行う（iOS Safariは画面回転ロックAPIに対応していないため、回転操作自体を
   要求するのではなく見た目を横画面化する方式を採る） */
.music-practice-stage{
  display:none;
  position:fixed;
  inset:0;
  z-index:1900;
  background:var(--card);
  overflow:hidden;
}

.music-practice-stage.active{
  display:block;
}

body.dark .music-practice-stage{
  background:#211e19;
}

@media (orientation:portrait){
  .music-practice-stage.active{
    width:100vh;
    height:100vw;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) rotate(90deg);
  }
}

/* 上部バー・譜面プレビューは演奏ボタン領域の上に重ねて表示する固定オーバーレイ。
   実際に使っている高さぶんだけ pointer-events を戻し、それ以外(下の余白)は
   クリックをすり抜けさせてボタンを押せるようにする。
   演奏ボタンの絶対座標はjs/music-config.jsの基準フレーム(1600×1118px)に対する
   %で決まる。全レイアウト中で最も上にある演奏ボタン（22キー・半音ON時の
   最上段、半音ボタン中心y=755px・直径はメインボタンの72%）の上端は、
   おおよそ (755 - 1118*0.0556*0.72/2) / 1118 ≈ 64.7% の位置になる。
   このオーバーレイの高さをそれより確実に低い値に制限し、内容が収まらない
   場合は内部（譜面プレビュー側）でスクロールさせることで、譜面プレビューが
   伸びても演奏ボタンと重ならないことを保証する（従来は「ボタンは上部2/3には
   出ない」という前提のみに依存しており、実測では余裕が1〜2%しかなかった） */
.music-practice-stage-overlay-top{
  --music-practice-topbar-safe-max:60%;
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:6px 10px 0;
  max-height:var(--music-practice-topbar-safe-max);
  overflow:hidden;
  box-sizing:border-box;
  pointer-events:none;
  /* 演奏ボタンの長押し中に、この上に重なっているテキストがiOSの選択候補と
     みなされコピー/調べるメニューが出てしまうのを防ぐ（子要素にも継承される） */
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

.music-practice-stage-overlay-top > *{
  pointer-events:auto;
}

.music-practice-stage-topbar{
  position:relative;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-right:96px; /* 右上に重ねるアイコン類とぶつからないよう余白を確保 */
}

.music-practice-stage #musicPlaybackAnchorPractice .music-playback-row{
  flex-shrink:0;
  gap:6px;
}

/* シークバーは参考画像のような目立たない進捗バーとして上部に細く表示する。
   ドラッグでの移動は引き続きできる */
.music-practice-stage #musicPlaybackAnchorPractice .music-seek-row{
  gap:8px;
}

.music-practice-stage #musicPlaybackAnchorPractice .music-seek-slider{
  height:4px;
}

/* 経過時間の表示欄を、参考画像と同じ「進捗％」として再利用する
   （JS側でpageMode==="practice"のときだけ％表示に切り替える） */
.music-practice-stage #musicPlaybackAnchorPractice .music-seek-time{
  min-width:44px;
  font-size:12px;
  font-weight:700;
  color:var(--text);
}

body.dark .music-practice-stage #musicPlaybackAnchorPractice .music-seek-time{
  color:#ece4d4;
}

/* 参考画像と同じく、左に大きな再生/一時停止ボタンを置く */
.music-practice-stage #musicPlaybackAnchorPractice .music-playback-controls-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.music-practice-stage .music-playpause-btn{
  width:52px;
  height:52px;
}

.music-practice-stage #musicPlaybackAnchorPractice .music-speed-control{
  flex:none;
  width:100px;
}

/* 曲名は表示せず、詳しい情報は下部の曲情報パネル(.music-practice-song-info)にまとめる */
.music-practice-stage-name{
  display:none;
}

/* 練習モードの正解/ミス回数バッジ。色だけに頼らず✓/✗の記号でも区別する。
   現在位置・次の音・演奏パッドより目立たないよう、小さく控えめに表示する */
.music-practice-accuracy{
  --music-practice-miss-rgb:139, 74, 61;       /* 落ち着いた赤茶（vermillionの正解表示とは別トーン） */
  --music-practice-miss-rgb-dark:196, 122, 108;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
}

.music-practice-accuracy-correct,
.music-practice-accuracy-miss{
  display:inline-flex;
  align-items:center;
  gap:3px;
}

.music-practice-accuracy-correct{
  color:var(--vermillion);
}

.music-practice-accuracy-miss{
  color:rgb(var(--music-practice-miss-rgb));
}

body.dark .music-practice-accuracy-correct{
  color:var(--vermillion-soft);
}

body.dark .music-practice-accuracy-miss{
  color:rgb(var(--music-practice-miss-rgb-dark));
}

/* 位置調整・音量・閉じるは、参考画像のように右上に小さくまとめて重ねる */
.music-practice-topbar-icons{
  position:absolute;
  top:0;
  right:0;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:6px;
}

.music-practice-exit-btn{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card-sub);
  color:var(--text-sub);
  cursor:pointer;
}

.music-practice-stage .music-sound-btn,
.music-record-stage .music-sound-btn{
  width:28px;
  height:28px;
}

body.dark .music-practice-exit-btn{
  background:#383329;
  border-color:#46423b;
  color:#b3a89a;
}

.music-practice-stage-overlay-top #musicScoreDisplayAnchorPractice{
  flex-shrink:1;
  min-height:0;
  overflow:hidden;
  margin-top:8px;
}

/* 演奏ボタン領域はステージ全体(position:fixed;inset:0の.music-practice-stage)を
   基準に中央寄せする。上部バー・譜面プレビューはその上に重ねる別要素のため、
   ここでの中央寄せ計算には影響しない（実機と同じく画面全体を基準にできる）。
   実機の演奏画面にはセーフエリア分の余白は存在しないため、paddingは上下左右
   対称の最小値に留め、コンテナの実効サイズ（＝フレームの拡大率）を削らない。
   上下左右が対称なので、中央寄せもtransformなしで自然に成立する */
.music-practice-stage #musicInstrumentGridAnchorPractice{
  position:absolute;
  inset:0;
  padding:6px 10px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* 練習ステージの譜面プレビューは、参考画像と同じくマスを折り返して複数行表示し、
   演奏ボタンの邪魔をしない範囲(画面上部)いっぱいに見せる。現在位置の行が
   常に見えるよう、縦方向にスクロールできるようにする */
.music-practice-stage .music-score-display,
.music-record-stage .music-score-display{
  margin:0;
  min-height:0;
  max-height:100%;
  padding:8px;
  flex-wrap:wrap;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  background:rgba(0,0,0,0.28);
  border-radius:14px;
  align-content:flex-start;
}

body.dark .music-practice-stage .music-score-display,
body.dark .music-record-stage .music-score-display{
  background:rgba(0,0,0,0.35);
}

/* 10個のブロックを弾き終えて次のブロックへ自動的に切り替わった瞬間、
   新しい音符たちがふわっと流れ込んできたことが分かるようにする軽い演出 */
@keyframes music-score-block-enter{
  0%{ opacity:0; transform:translateX(10px); }
  100%{ opacity:1; transform:translateX(0); }
}

.music-score-display.block-enter{
  animation:music-score-block-enter 0.3s ease-out;
}

.music-practice-stage .music-chip,
.music-record-stage .music-chip{
  width:auto;
  height:auto;
  padding:5px;
  border-radius:8px;
}

.music-practice-stage .music-chip-bar,
.music-record-stage .music-chip-bar{
  height:auto;
  align-self:stretch;
}

/* 左下：曲名・楽器/配置・テンポ・長さをまとめた情報パネル（参考画像の左下相当） */
.music-practice-song-info{
  position:absolute;
  left:14px;
  bottom:calc(33% + 10px);
  z-index:2;
  max-width:60%;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
}

.music-practice-song-title{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  margin-bottom:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.music-practice-song-meta{
  font-size:10px;
  color:var(--text-sub);
  line-height:1.5;
}

body.dark .music-practice-song-title{
  color:#ece4d4;
}

body.dark .music-practice-song-meta{
  color:#b3a89a;
}

/* 端末が縦向きのまま練習モードに入ったとき、画面全体はCSSで横画面に見えるよう
   回転させているが、それだけでは「なぜ斜めに表示されているか」が伝わりにくいため、
   回転させていない案内を上に重ねて、実際に端末を横向きにするよう促す */
.music-rotate-prompt{
  display:none;
  position:fixed;
  inset:0;
  z-index:1950;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 40px;
  text-align:center;
  background:rgba(52,48,43,0.55);
  color:#fdf9ef;
  pointer-events:none;
}

@media (orientation:portrait){
  .music-practice-stage.active + .music-rotate-prompt{
    display:flex;
  }
}

.music-rotate-prompt-icon{
  animation:musicRotateHint 1.6s ease-in-out infinite;
}

@keyframes musicRotateHint{
  0%, 100%{ transform:rotate(0deg); }
  50%{ transform:rotate(-90deg); }
}

.music-rotate-prompt p{
  margin:0;
  font-size:13px;
  line-height:1.6;
}

/* 追従モード：ボタンは出さず、大きな数字譜だけを表示する全画面ステージ。
   実機の画面とiPadのSplit Viewなどで並べて使う想定なので、練習モードと違って
   横画面には固定しない（縦長の狭い分割画面でもそのまま使えるようにする） */
.music-follow-stage{
  display:none;
  position:fixed;
  inset:0;
  z-index:1900;
  flex-direction:column;
  gap:8px;
  padding:6px 14px calc(6px + env(safe-area-inset-bottom));
  box-sizing:border-box;
  background:var(--card);
}

.music-follow-stage.active{
  display:flex;
}

body.dark .music-follow-stage{
  background:#211e19;
}

.music-follow-display{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  overflow:hidden;
}

.music-follow-current{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.music-follow-current-notes{
  display:flex;
  gap:14px;
  font-size:clamp(48px, 18vw, 130px);
  font-weight:700;
  color:var(--indigo);
  line-height:1;
}

body.dark .music-follow-current-notes{
  color:var(--indigo-soft);
}

.music-follow-current-kana{
  font-size:16px;
  color:var(--text-sub);
}

body.dark .music-follow-current-kana{
  color:#b3a89a;
}

.music-follow-next{
  display:flex;
  align-items:center;
  gap:8px;
  opacity:0.55;
}

.music-follow-next-label{
  font-size:11px;
  font-weight:700;
  color:var(--text-sub);
}

.music-follow-next-notes{
  display:flex;
  gap:6px;
  font-size:clamp(20px, 6vw, 42px);
  font-weight:700;
  color:var(--text);
}

body.dark .music-follow-next-notes{
  color:#ece4d4;
}

.music-follow-empty{
  color:var(--text-sub);
  font-size:14px;
}

body.dark .music-follow-empty{
  color:#b3a89a;
}

.music-follow-stage .music-practice-hint{
  flex-shrink:0;
  margin:0;
}

/* 保存済み譜面一覧 */
.music-saved-box{
  max-width:400px;
  max-height:80vh;
  display:flex;
  flex-direction:column;
}

.music-saved-list{
  overflow-y:auto;
  margin:12px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.music-saved-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  padding:24px 0;
  color:var(--text-sub);
  font-size:13px;
}

body.dark .music-saved-empty{
  color:#b3a89a;
}

.music-saved-badge{
  display:inline-block;
  padding:1px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  vertical-align:middle;
  background:var(--card);
  color:var(--text-sub);
  border:1px solid var(--border);
}

.music-saved-badge-draft{
  background:var(--vermillion);
  border-color:var(--vermillion);
  color:#fdf9ef;
}

body.dark .music-saved-badge{
  background:#2c2823;
  border-color:#46423b;
  color:#b3a89a;
}

body.dark .music-saved-badge-draft{
  background:var(--vermillion-soft);
  border-color:var(--vermillion-soft);
  color:#2c2823;
}

.music-saved-item-draft{
  outline:2px dashed var(--vermillion);
  outline-offset:-2px;
}

body.dark .music-saved-item-draft{
  outline-color:var(--vermillion-soft);
}

.music-saved-dates{
  opacity:0.8;
}

.music-saved-rename-input{
  width:100%;
  box-sizing:border-box;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid var(--indigo);
  background:var(--card);
  color:var(--text);
  font-size:13px;
  font-family:inherit;
}

body.dark .music-saved-rename-input{
  background:#2c2823;
  color:#ece4d4;
}

.music-saved-item{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--card-sub);
}

.music-saved-item.current{
  outline:2px solid var(--indigo);
}

body.dark .music-saved-item{
  background:#383329;
}

.music-midi-preview-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 12px;
  margin:10px 0;
  padding:10px 12px;
  border-radius:12px;
  background:var(--card-sub);
}

body.dark .music-midi-preview-stats{
  background:#383329;
}

.music-midi-stat-row{
  display:flex;
  justify-content:space-between;
  gap:6px;
  font-size:12px;
}

.music-midi-stat-row span{
  color:var(--text-sub);
}

body.dark .music-midi-stat-row span{
  color:#b3a89a;
}

.music-midi-preview-warnings{
  margin:0 0 10px;
  padding-left:18px;
  font-size:11px;
  color:var(--vermillion);
}

body.dark .music-midi-preview-warnings{
  color:var(--dark-highlight);
}

.music-midi-preview-warnings:empty{
  display:none;
}

.music-saved-info{
  flex:1;
  min-width:0;
}

.music-saved-name{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.dark .music-saved-name{
  color:#ece4d4;
}

.music-saved-meta{
  font-size:11px;
  color:var(--text-sub);
}

body.dark .music-saved-meta{
  color:#b3a89a;
}

.music-saved-actions{
  flex-shrink:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.music-saved-actions button{
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card);
  color:var(--text-sub);
  font-size:11px;
  cursor:pointer;
}

body.dark .music-saved-actions button{
  background:#2c2823;
  border-color:#46423b;
  color:#b3a89a;
}

.music-step-hint{
  font-size:11px;
  line-height:1.5;
  color:var(--text-sub);
  margin:0 0 10px;
}

body.dark .music-step-hint{
  color:#b3a89a;
}

/* ハミングから作る（β機能） */
.music-hum-box{
  max-width:380px;
  max-height:85vh;
  overflow-y:auto;
  text-align:left;
}

.music-hum-caution{
  margin:0 0 14px;
  font-size:12px;
  line-height:1.6;
  color:var(--text-sub);
}

body.dark .music-hum-caution{
  color:#b3a89a;
}

.music-hum-source-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.music-hum-upload-label{
  cursor:pointer;
}

.music-hum-recording-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
}

body.dark .music-hum-recording-row{
  color:#ece4d4;
}

.music-hum-rec-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--vermillion);
  animation:music-hum-rec-blink 1s ease-in-out infinite;
}

body.dark .music-hum-rec-dot{
  background:var(--vermillion-soft);
}

@keyframes music-hum-rec-blink{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.25; }
}

.music-hum-pitch-row{
  display:flex;
  justify-content:center;
  margin-bottom:10px;
  padding:10px;
  border-radius:12px;
  background:var(--card-sub);
}

body.dark .music-hum-pitch-row{
  background:#383329;
}

.music-hum-pitch-value{
  font-family:'Shippori Mincho', serif;
  font-size:20px;
  font-weight:700;
  color:var(--indigo);
  letter-spacing:0.04em;
}

body.dark .music-hum-pitch-value{
  color:#e8d2a8;
}

.music-hum-pitch-value.is-silent{
  font-size:14px;
  font-weight:400;
  color:var(--text-sub);
}

body.dark .music-hum-pitch-value.is-silent{
  color:#b3a89a;
}

.music-hum-file-row{
  margin-bottom:10px;
  font-size:12px;
  color:var(--text-sub);
}

body.dark .music-hum-file-row{
  color:#b3a89a;
}

.music-hum-progress-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.music-hum-progress-bar{
  flex:1;
  height:6px;
  border-radius:999px;
  background:var(--card-sub);
  overflow:hidden;
}

body.dark .music-hum-progress-bar{
  background:#383329;
}

.music-hum-progress-fill{
  height:100%;
  background:var(--indigo);
  border-radius:999px;
  transition:width 0.2s;
}

body.dark .music-hum-progress-fill{
  background:var(--indigo-soft);
}

.music-hum-progress-label{
  flex-shrink:0;
  font-size:11px;
  color:var(--text-sub);
  white-space:nowrap;
}

body.dark .music-hum-progress-label{
  color:#b3a89a;
}

.music-hum-error{
  min-height:1.4em;
  margin:0 0 8px;
  font-size:12px;
  color:var(--vermillion);
}

body.dark .music-hum-error{
  color:var(--vermillion-soft);
}

/* はじめての案内（①楽器→②テンポ→③録音か手入力か） */
.music-onboarding-box{
  max-width:360px;
}

.music-onboarding-progress{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:14px;
}

.music-onboarding-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--border);
}

.music-onboarding-dot.active{
  background:var(--indigo);
}

body.dark .music-onboarding-dot{
  background:#46423b;
}

body.dark .music-onboarding-dot.active{
  background:var(--indigo-soft);
}

.music-onboard-hint{
  margin:0 0 12px;
  font-size:12px;
  line-height:1.6;
  color:var(--text-sub);
}

body.dark .music-onboard-hint{
  color:#b3a89a;
}

.music-onboard-instrument-buttons{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.music-onboard-instrument-btn{
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card-sub);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.music-onboard-instrument-btn.active{
  background:var(--indigo);
  border-color:var(--indigo);
  color:#fdf9ef;
}

body.dark .music-onboard-instrument-btn{
  background:#383329;
  border-color:#46423b;
  color:#ece4d4;
}

body.dark .music-onboard-instrument-btn.active{
  background:var(--indigo-soft);
  border-color:var(--indigo-soft);
}

.music-onboard-tempo-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  font-size:13px;
  color:var(--text);
}

body.dark .music-onboard-tempo-row{
  color:#ece4d4;
}

.music-onboard-tempo-row .music-bpm-input,
.music-onboard-tempo-row .music-timesig-select{
  flex:1;
}

.music-onboard-choice-btn{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
  padding:12px 14px;
  margin-bottom:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card-sub);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.music-onboard-choice-btn strong{
  font-size:13px;
}

.music-onboard-choice-btn span{
  font-size:11px;
  color:var(--text-sub);
  line-height:1.5;
}

body.dark .music-onboard-choice-btn{
  background:#383329;
  border-color:#46423b;
  color:#ece4d4;
}

body.dark .music-onboard-choice-btn span{
  color:#b3a89a;
}

.music-onboard-nav{
  display:flex;
  gap:8px;
  margin-top:6px;
}

.music-onboard-nav .music-header-btn{
  flex:1;
  justify-content:center;
}

/* ヘルプモーダル */
.music-help-box{
  max-width:380px;
  max-height:85vh;
  overflow-y:auto;
  text-align:left;
}

/* トースト通知 */
#musicToast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(10px);
  background:var(--indigo);
  color:#fdf9ef;
  padding:10px 22px;
  border-radius:999px;
  font-size:13px;
  opacity:0;
  transition:opacity 0.25s, transform 0.25s;
  pointer-events:none;
  z-index:2100;
  white-space:nowrap;
}

#musicToast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* iPad（768px〜） */
@media (min-width:768px){
  .music-note-btn{
    padding:14px 4px;
  }
}

/* タブレット横画面・PC（1024px〜）：編集画面を「操作パネル（左）｜譜面表示・演奏（右）」の
   2カラムに分割する。practice-stage/follow-stageは.music-layoutの外側にある独立した
   全画面オーバーレイのため、この変更の影響を受けない（実機と同じ絶対配置のまま）。
   準備／作るの2つのタブパネル(#musicTabPanelPrepare/#musicTabPanelCreate)は同じ
   grid-areaを共有し、どちらか一方だけがdisplay:noneでない状態で表示される
   （タブ切替のJSは無変更） */
@media (min-width:1024px){
  .music-layout{
    display:grid;
    grid-template-columns:minmax(300px,380px) 1fr;
    grid-template-areas:
      "controls score"
      "controls grid";
    align-items:start;
    gap:16px;
  }

  #musicTabPanelPrepare,
  #musicTabPanelCreate{
    grid-area:controls;
    /* 左カラムの中身が右カラムより少ない時も、スクロール領域を分けて
       常に画面内に収まるようにする */
    max-height:calc(100vh - 160px);
    overflow-y:auto;
  }

  #musicScoreSection{
    grid-area:score;
  }

  #musicPerformSection{
    grid-area:grid;
  }

  /* 演奏ボタン(編集モードの伸縮グリッド。練習モードの実機座標配置(.practice-size)は
     対象外)は、右カラムの幅いっぱいに伸びるとボタンが不自然に巨大化するため、
     押しやすい大きさで頭打ちにする。譜面表示側(#musicScoreSection)は逆に
     幅を使うほど1行に多くの音符を表示できるため、ここでは制限しない */
  #musicPerformSection .music-instrument-grid:not(.practice-size){
    max-width:640px;
  }

  /* 譜面ライブラリ・MIDI/変換プレビューのモーダルも、この幅からは横に余裕を持たせる */
  .music-saved-box{
    max-width:560px;
  }

  .music-saved-item{
    flex-direction:row;
    align-items:center;
  }

  .music-hum-box{
    max-width:480px;
  }
}

/* PC（1400px〜） */
@media (min-width:1400px){
  .music-layout{
    max-width:1400px;
    margin:0 auto;
    grid-template-columns:minmax(320px,420px) 1fr;
    gap:24px;
  }

  .music-saved-box{
    max-width:640px;
  }

  .music-hum-box{
    max-width:520px;
  }
}

/* OSで「視差効果を減らす」設定がオンの場合、常時ループするアニメーション・
   演出用のフラッシュ演出を無効化する（音そのものや操作結果の判定には影響しない） */
@media (prefers-reduced-motion:reduce){
  .music-chip.loop-pending,
  .music-note-btn.practice-guide,
  .music-note-btn.practice-correct,
  .music-note-btn.practice-miss,
  .music-rotate-prompt-icon,
  .music-hum-rec-dot,
  .music-score-display.block-enter{
    animation:none !important;
  }
}

/* キーボード操作時にフォーカス位置が視覚的に分かるようにする
   （マウス/タッチのクリックでは表示されない:focus-visibleを使う） */
.music-mode-btn:focus-visible,
.music-edit-tab-btn:focus-visible,
.music-instrument-btn:focus-visible,
.music-layout-btn:focus-visible,
.music-duration-btn:focus-visible,
.music-header-btn:focus-visible,
.music-sound-btn:focus-visible,
.music-calib-toggle-btn:focus-visible,
.music-playpause-btn:focus-visible,
.music-practice-exit-btn:focus-visible,
.music-note-btn:focus-visible,
.music-chip:focus-visible,
.music-seek-slider:focus-visible,
.music-timesig-select:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:2px;
}