/* ==========================================
   MH Steps — Clean CSS (Blue Glow Highlight)
   ========================================== */

/* -------------------
   Theme variables
------------------- */
.mh-steps {
  /* UI tokens */
  --hit:   #ff0000;  /* o の文字色（表示用） */
  --rest:  #ff7777;  /* x の文字色（表示用） */
  --ink:   #0f172a;
  --muted: #6b7280;
  --panel: #ffffff;
  --wrap:  #f8fafc;
  --line:  #e5e7eb;

  /* Highlight (Blue) */
  --hl-main:   #3b82f6;        /* 青の本体色 */
  --hl-sub:    #bfdbfe;        /* 薄い青（restや弱い強調） */
  --hl-rgb:    59,130,246;     /* drop-shadow用のRGB */
  --hl-press:  #dbeafe;        /* 押下時の淡い青 */

  max-width: 900px;
  margin: clamp(24px, 6vw, 48px) auto;
  padding: clamp(24px, 5vw, 40px);
  background: var(--panel);
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.12);
  color: var(--ink);
  font-family: inherit;
}

/* -------------------
   Panel / Controls
------------------- */
.mh-steps__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(20px, 5vw, 32px);
}
.mh-steps__actions {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px;
}
.mh-steps__status { font-weight: 600; font-size: .95rem; color: #1f2937; }
.mh-steps__hint   { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--muted); text-align: center; }
.mh-steps.is-sound-on .mh-steps__status { color: #0369a1; }

.mh-steps__controls {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  margin-bottom: .75rem;
}
.mh-steps__pattern-select select {
  padding: .25rem .5rem; border: 1px solid #ddd; border-radius: .5rem; background: #fff;
}
.mh-steps__pattern-view { display: none; }
.mh-steps__pattern-label { opacity: .7; }
.mh-steps__pattern-string {
  letter-spacing: .04em; padding: .25rem .5rem;
  border: 1px dashed #ddd; border-radius: .5rem; background: #fff;
}
.mh-steps__pattern-string .pat-hit  { color: var(--hit); }
.mh-steps__pattern-string .pat-rest { color: var(--rest); }

.mh-steps__tempo {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
}
.mh-steps__tempo-mark { display: block; width: 28px; height: 20px; }
.mh-steps__bpm-input {
  width: 42px; padding: .35rem .5rem; border: 1px solid #d1d5db; border-radius: .5rem;
  font-size: 1rem; line-height: 1.2;
}
/* メトロノーム */
.mh-steps__metronome {
  display: block; width: 24px; height: 24px; cursor: pointer;
  transition: transform .12s ease, filter .12s ease; user-select: none;
}
.mh-steps__metronome.is-on {
  transform: scale(1.1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)) hue-rotate(15deg) saturate(1.2);
}

/* クリッピング回避余白 */
.mh-steps__wrap { overflow-y: visible; padding-top: 48px; }

/* -------------------
   Stage / Scroller
------------------- */
.mh-steps__stage { position: relative; }
.mh-steps__wrap {
  position: relative; padding: clamp(12px, 4vw, 24px);
  background: var(--wrap); border-radius: 18px; border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  overflow-x: auto; overflow-y: visible;
  -webkit-overflow-scrolling: touch; touch-action: pan-x;
}
/* サウンドONの軽いアクセント */
.mh-steps.is-sound-on .mh-steps__wrap {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 2px rgba(var(--hl-rgb), .08);
}

/* スクロールバー */
.mh-steps__wrap::-webkit-scrollbar { height: 10px; }
.mh-steps__wrap::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 999px; }
.mh-steps__wrap::-webkit-scrollbar-track { background: transparent; }

/* キーボードコンテナ */
.mh-steps__keyboard {
  width: max-content; min-width: 100%; margin: 0 auto; touch-action: pan-x;
}

/* -------------------
   Key Baseline (SVG)
   keyboard.js が吐く .kb-w / .kb-b に適用
------------------- */
.mh-steps .kb-w {
  fill: #ffffff; stroke: #9ca3af; stroke-width: 1;
  transition: fill .18s ease, filter .18s ease;
  touch-action: pan-x;
}
.mh-steps .kb-b {
  fill: #111827; stroke: #020617; stroke-width: 1.4;
  transition: fill .18s ease, filter .18s ease;
  touch-action: pan-x;
}

/* -------------------
   Pointer Press (押下時)
------------------- */
.mh-steps .kb-w.is-active {
  fill: var(--hl-press);
  filter: drop-shadow(0 6px 12px rgba(var(--hl-rgb), .28));
}
.mh-steps .kb-b.is-active {
  fill: #1f2937;
  filter: drop-shadow(0 8px 18px rgba(var(--hl-rgb), .32));
}

/* -------------------
   Playback Highlight
   （再生ガイド：塗り + 青いグロー）
------------------- */

/* 0) overlay可能化 */
[data-midi] { position: relative; }

/* 1) SVG自体を塗り替え（強調） */
[data-midi].key--hit  .kb-w,
[data-midi].key--hit  .kb-b { fill: var(--hl-main) !important; }
[data-midi].key--rest .kb-w,
[data-midi].key--rest .kb-b { fill: var(--hl-sub)  !important; opacity: .95; }

/* 2) 青い発光（周囲のグロー） */
[data-midi].key--hit  .kb-w,
[data-midi].key--hit  .kb-b {
  filter: drop-shadow(0 6px 14px rgba(var(--hl-rgb), .45)) saturate(1.15);
}
[data-midi].key--rest .kb-w,
[data-midi].key--rest .kb-b {
  filter: drop-shadow(0 4px 10px rgba(var(--hl-rgb), .28));
}

/* 3) 旧アウトライン演出の抑止 */
.key--hit, .key--rest { outline: none !important; box-shadow: none !important; }

/* 4) divベース鍵盤へのフォールバック（併用時） */
[data-midi].key--hit  { background: var(--hl-main) !important; }
[data-midi].key--rest { background: var(--hl-sub)  !important; opacity: .95 !important; }

/* -------------------
   Playback Hint in UI
------------------- */
.mh-steps--playing .mh-steps__hint::after {
  content: " 再生中…";
  color: var(--hit);
  margin-left: .25rem;
}

/* -------------------
   Key Cue Layer (note/rest icons)
------------------- */
.mh-keycue-layer {
  position: absolute; left: 0; right: 0; top: 0;
  height: 110px; pointer-events: none; z-index: 10;
}
.mh-keycue {
  position: absolute; width: 36px; height: 36px;
  transform: translate(-50%, 0);
  opacity: .95;
  transition: transform .12s ease, opacity .12s ease;
}
.mh-keycue--black { top: 48px; }
.mh-keycue--white { top: 100px; }
.mh-keycue img { width: 100%; height: 100%; display: block; }
.mh-keycue.is-active { transform: translate(-50%, 0) scale(2); }

/* -------------------
   Disabled states / Stop
------------------- */
.is-playing #mh-steps-bpm:disabled { color: #9ca3af; background: #f3f4f6; }
#mh-steps-bpm:disabled {
  color: #9ca3af; background: #f3f4f6; cursor: not-allowed;
}
.is-playing #mh-metronome.is-disabled { filter: grayscale(1) opacity(.5); cursor: default; }
#mh-metronome.is-disabled {
  pointer-events: none; filter: grayscale(1) opacity(.5); cursor: default;
}
.mh-steps__stop {
  margin-left: .5rem; padding: .35rem .7rem;
  border: 1px solid #ef4444; background: #fee2e2;
  color: #991b1b; border-radius: .5rem; font-weight: 700; cursor: pointer;
}
.mh-steps__stop[hidden] { display: none; }

/* -------------------
   Rotate Overlay (縦向きスマホで表示)
------------------- */
.mh-rotate-overlay {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center; flex-direction: column;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  z-index: 9999; padding: 24px; text-align: center;
}
.mh-rotate-overlay__img {
  max-width: min(70vw, 520px); width: 100%; height: auto; margin-bottom: 16px; opacity: .95;
}
.mh-rotate-overlay__text {
  font-size: clamp(14px, 4vw, 18px); color: #334155; margin: 0;
}
/* iOS セーフエリア */
@supports(padding: max(0px)) {
  .mh-rotate-overlay {
    padding-left:  max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-top:   max(24px, env(safe-area-inset-top));
    padding-bottom:max(24px, env(safe-area-inset-bottom));
  }
}

/* -------------------
   Responsive
------------------- */
@media (max-width: 900px) {
  .mh-steps { margin-inline: clamp(16px, 4vw, 24px); }
}
@media (max-width: 540px) {
  .mh-steps {
    margin: clamp(8px, 3vw, 12px) auto;
    padding: clamp(8px, 3vw, 12px);
  }
  .mh-steps__actions { gap: 12px; }
  .mh-steps__status  { font-size: .9rem; }
  .mh-steps__wrap    { padding: clamp(8px, 3vw, 12px); }
  .mh-keycue { width: 15px; height: 15px; }
}

/* -------------------
   Motion preference
------------------- */
@media (prefers-reduced-motion: reduce) {
  .mh-steps * { transition: none !important; }
}

/* -------------------
   Show rotate overlay only on smartphones in portrait
------------------- */
@media (orientation: portrait) and (max-width: 900px) {
  .mh-rotate-overlay { display: flex; }
  html, body { overflow: hidden; }
}
/* === Robust Blue Highlight Patch (append at file bottom) === */

/* HIT（強）: 親[data-midi]にclassが付く場合 / キー自体にclassが付く場合の両対応 */
.mh-steps [data-midi].key--hit .kb-w,
.mh-steps [data-midi].key--hit .kb-b,
.mh-steps .kb-w.key--hit,
.mh-steps .kb-b.key--hit {
  fill: #3b82f6 !important;                        /* 青本体 */
  filter: drop-shadow(0 6px 14px rgba(59,130,246,.45)) saturate(1.15) !important;
  opacity: 1 !important;
}

/* REST（弱）: 同様に両対応 */
.mh-steps [data-midi].key--rest .kb-w,
.mh-steps [data-midi].key--rest .kb-b,
.mh-steps .kb-w.key--rest,
.mh-steps .kb-b.key--rest {
  fill: #bfdbfe !important;                         /* 薄青 */
  filter: drop-shadow(0 4px 10px rgba(59,130,246,.28)) !important;
  opacity: .95 !important;
}

/* 旧アウトラインを明示無効化（万一残っていた場合） */
.mh-steps .key--hit,
.mh-steps .key--rest {
  outline: none !important;
  box-shadow: none !important;
}
/* ===== 強コントラスト版：どれかがONなら全体を“光らせる” ===== */

/* 1) #keyboardWrap 自体を光らせる（外枠グロー） */
#keyboardWrap:has([data-midi].key--hit) {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 3px rgba(59,130,246,.20),
    0 18px 40px rgba(59,130,246,.35);
  border-radius: 18px;  /* 好みで */
}

/* 2) ON鍵盤はさらにビカッと（塗り＋強グロー＋わずかに拡大） */
#keyboardWrap [data-midi].key--hit .kb-w,
#keyboardWrap [data-midi].key--hit .kb-b {
  fill: #3b82f6 !important;              /* 濃い青 */
  filter: drop-shadow(0 10px 22px rgba(59,130,246,.55))
          saturate(1.25) brightness(1.05) !important;
  transform: translateZ(0);               /* ちらつき防止 */
}
#keyboardWrap [data-midi].key--hit {
  /* SVGでも視認性を上げるため、親に微スケール（pathには効かない場合あり）
  transform: scale(1.02);
  transform-origin: center bottom; */
  transform: none !important;
}

/* 3) “ON以外”は一時的に薄く（非注目化） */
#keyboardWrap:has([data-midi].key--hit) [data-midi]:not(.key--hit) .kb-w,
#keyboardWrap:has([data-midi].key--hit) [data-midi]:not(.key--hit) .kb-b {
  opacity: .35;
  filter: grayscale(.6) brightness(.9);
}

/* 4) 休符（key--rest）はONよりは目立たせない淡青＋軽いグロー */
#keyboardWrap [data-midi].key--rest .kb-w,
#keyboardWrap [data-midi].key--rest .kb-b {
  fill: #bfdbfe !important;              /* 薄い青 */
  filter: drop-shadow(0 6px 14px rgba(59,130,246,.35));
  opacity: .95;
}

/* 5) 押下時（.is-active）が勝ってしまう場合の保険（最後に置く） */
#keyboardWrap [data-midi].key--hit .kb-w.is-active,
#keyboardWrap [data-midi].key--hit .kb-b.is-activ
/* ========== Perceptual Blue & Warm Rest (append at file bottom) ========== */

/* 配色トークン（必要なら調整） */
.mh-steps {
  --hitW:  #2563eb;                 /* 白鍵ONの本体色（濃い青）   */
  --hitB:  #60a5fa;                 /* 黒鍵ONの本体色（明るい青） */
  --ringB: 59,130,246;              /* 青リングのRGB（3b82f6）    */

  --restFill:  #f59e0b;             /* 休符の塗り（アンバー）     */
  --restRing:  245,158,11;          /* 休符リングのRGB            */
}

/* ---- ON: 白鍵/黒鍵で青を出し分け + リング + グロー ---- */
.mh-steps [data-midi].key--hit .kb-w {
  fill: var(--hitW) !important;
  stroke: rgba(var(--ringB), 0.95) !important;
  stroke-width: 1.6 !important;
  filter: drop-shadow(0 10px 22px rgba(var(--ringB), .55))
          saturate(1.25) brightness(1.04) !important;
}
.mh-steps [data-midi].key--hit .kb-b {
  fill: var(--hitB) !important;
  stroke: rgba(var(--ringB), 0.98) !important;
  stroke-width: 1.6 !important;
  filter: drop-shadow(0 12px 26px rgba(var(--ringB), .60))
          saturate(1.28) brightness(1.08) !important;
}

/* ONリングの“1回だけパルス”演出（心理的に注意を引く） */
.mh-steps [data-midi].key--hit { position: relative; }
.mh-steps [data-midi].key--hit::after {
  content: "";
  position: absolute;
  inset: -3px;                      /* 鍵盤より少し外側にリング */
  border: 2px solid rgba(var(--ringB), .75);
  border-radius: 6px;               /* 角丸は鍵盤形に合わせて */
  pointer-events: none;
  animation: mhBluePulse .9s ease-out 1;
}
@keyframes mhBluePulse {
  0%   { opacity: .0; transform: scale(.96); }
  35%  { opacity: .85; transform: scale(1.00); }
  100% { opacity: .0; transform: scale(1.04); }
}

/* ---- 休符：暖色＋破線 + 軽いグロー（“止まる”の記号性） ---- */
.mh-steps [data-midi].key--rest .kb-w,
.mh-steps [data-midi].key--rest .kb-b {
  fill: var(--restFill) !important;
  stroke: rgba(var(--restRing), .95) !important;
  stroke-width: 1.8 !important;
  stroke-dasharray: 3 2 !important; /* 破線で“途切れ”を可視化 */
  filter: drop-shadow(0 6px 14px rgba(var(--restRing), .35)) !important;
  opacity: .98 !important;
}

/* ---- ONがある間は、OFFキーを減光して主役を際立たせる ---- */
#keyboardWrap:has([data-midi].key--hit) [data-midi]:not(.key--hit):not(.key--rest) .kb-w,
#keyboardWrap:has([data-midi].key--hit) [data-midi]:not(.key--hit):not(.key--rest) .kb-b {
  opacity: .28;
  filter: grayscale(.75) brightness(.85);
}

/* 押下時ハイライトが勝つ場合の保険（ONは常に最前） */
#keyboardWrap [data-midi].key--hit .kb-w.is-active,
#keyboardWrap [data-midi].key--hit .kb-b.is-active {
  fill: var(--hitB) !important; /* 黒鍵基準の明るい青に寄せて視認性↑ */
  filter: drop-shadow(0 14px 30px rgba(var(--ringB), .66))
          saturate(1.32) brightness(1.1) !important;
  opacity: 1 !important;
}

/* 既存の“鍵盤を物理的に動かす”transformは無効にしてズレ防止 */
#keyboardWrap [data-midi].key--hit { transform: none !important; }