/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: Typing-piano
 * BUILD_ID: YR-2025-1228-K18                 // ← 公開用の可視ビルドID
 * CANARY_ZW
 * SPDX-License-Identifier: LicenseRef-Yuuraku-Proprietary
 * Contact: yuurakunomori@gmail.com  |  URL: https://yuurakus.jp/
 *
 * 重要
 * 
* [日本語 / Japanese]
 * 本スタイルシートおよび関連ファイルの著作権（著作権法上の権利）は、パソコンサロンゆうらくに専属します。
 * 法令で明示的に認められる場合を除き、当社の事前の書面許諾なく、複製・複写・転載・転用・編集・改変・翻案・
 * 逆コンパイル／リバースエンジニアリング・再配布・商用利用・公衆送信（Webへのアップロードを含む）・
 * 自動取得／スクレイピング等の二次利用を固く禁じます。侵害が判明した場合、警告なく直ちに
 * 差止請求・損害賠償請求等の法的措置を厳格に行います。
 * 【重要】本スタイルシートには検証用のBUILD IDおよび不可視の「カナリア文字（ウォーターマーク）」が埋め込まれ、
 * ソースには識別用IDが隠されています。これらの削除・改変は契約違反・不正競争・著作権侵害等として追及します。
 *
 * [English]
 * Copyright in this stylesheet and related files is owned exclusively by
 * Pasokon Salon Yuuraku unless otherwise stated. Except as expressly permitted by law,
 * any reproduction, modification, adaptation, reverse engineering, redistribution,
 * commercial use, public transmission (including posting on the web), or automated
 * collection/scraping without prior written permission is strictly prohibited.
 * Upon detection of infringement, we will immediately pursue legal remedies including
 * injunctive relief and damages. IMPORTANT: This stylesheet embeds a verifiable BUILD ID
 * and invisible “canary” watermark characters, and an identification ID is hidden in the source.
 * Removal or alteration will be treated as a violation and strictly enforced.
 *
 * [中文 / Chinese (Simplified)]
 * 本样式表及相关文件之著作权，除非另有说明，专属于「Pasokon Salon Yuuraku」。
 * 未经事先书面许可，严禁复制、转载、修改、改编、逆向工程、再分发、商业使用、
 * 公开传播（含上传至网络）及自动抓取/爬取等二次利用。一经发现侵权，将立即采取包括
 * 禁令与损害赔偿在内的法律措施。重要：本样式表内已嵌入可验证的BUILD ID与不可见
 * “金丝雀”水印字符，且源代码中隐藏有识别用ID。擅自删除或篡改将被视为违规并依法追究。
 *
 * [한국어 / Korean]
 * 본 스타일시트 및 관련 파일의 저작권은 별도 고지가 없는 한
 * ‘파소콘 살롱 유우라쿠(Pasokon Salon Yuuraku)’에 전속됩니다.
 * 사전 서면 허가 없이 복제, 전재, 전용, 수정, 각색, 리버스 엔지니어링,
 * 재배포, 상업적 이용, 공중송신(웹 게시 포함), 자동 수집·스크래핑 등의 2차 이용을 엄격히 금합니다.
 * 위반 시 예고 없이 즉시 금지청구 및 손해배상 청구 등 법적 조치를 취합니다.
 * 중요: 본 스타일시트에는 검증 가능한 BUILD ID와 보이지 않는 ‘카나리아(워터마크) 문자’가 포함되며,
 * 소스 내부에는 식별용 ID가 숨겨져 있습니다. 이를 삭제·변조하는 행위는 위반으로 간주되어 엄정 대응합니다.
 */

/* =========================================================
   Typing Piano (Simple)
   - UI is intentionally minimal; switches are placeholders.
   ========================================================= */

:root{
  --bg: #000;
  --panel: #0b0b0b;
  --orange: #f29a2e;
  --orange2:#d57a0f;
  --red: #ff1e1e;
  --whiteKey: #f6f6f6;
  --whiteKey2:#e7e7e7;
  --blackKey: #111;
  --blackKey2:#2a2a2a;
  --ink: #f2f2f2;
  --shadow: rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% 30%, #121212, #000 70%);
  color: var(--ink);
}

.app{ min-height:100%; display:flex; flex-direction:column; }

.top{
  padding: 26px 18px 0;
  background: linear-gradient(#000, #000);
}

.title{
  text-align:center;
  letter-spacing: .55em;
  font-weight: 800;
  font-size: clamp(32px, 4vw, 44px);
  color:#fff;
  text-shadow:
  0 3px 0 rgba(0,0,0,.55),          /* もとの黒影（立体感） */
  0 6px 26px rgba(255, 200, 0, .35), /* ゴールドの落ち影 */
  0 0 24px rgba(255, 230, 150, .85);  /* ほんのり金の縁光 */
  margin: 2px 0 14px;
}

.controls{
  display:flex;
  align-items:center;
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto 10px;
  padding: 0 6px;
  position: relative;
}

/* SOUNDボタン上に「現在の収録曲X曲」を“重ねて表示”する（レイアウトを押し下げない） */
.soundWrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.songCount{
  position: absolute;
  top: -18px;      /* ここで上下位置を微調整できます */
  left: 6px;       /* ここで左右位置を微調整できます */
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  text-shadow:
    0 2px 0 rgba(0,0,0,.55),
    0 10px 22px rgba(0,0,0,.55);
}

/* ================================
   ON/OFF上：現在の収録曲X曲 表示
================================ */
/* ================================
   ON/OFF上：現在の収録曲X曲 表示（ボタン列を下げない）
================================ */
.powerWrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* “高さを取らずに”ボタンの上へ重ねる */
.songCount{
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px); /* ボタン上の距離（好みで 6〜10px） */
  width: max-content;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(255,255,255,.88);
  line-height: 1;
  white-space: nowrap;

  text-shadow:
    0 2px 0 rgba(0,0,0,.75),
    0 6px 14px rgba(0,0,0,.55),
    0 0 16px rgba(255, 210, 120, .22);
}



.spacer{ flex:1; }
/* Right-top stack: "学習TOPへ" above the metronome controls */
.rightStack{ display:flex; flex-direction:column; gap: 10px; align-items:flex-end; }
.rightRow{ display:flex; align-items:center; gap: 10px; }
.btn-toplink{ text-decoration:none; padding: 10px 18px; }

.rightStack{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

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

.btn-toplink{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  min-width: 220px;  /* ボタンを横長にしたい場合はここを調整 */
}

.btn{
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  user-select:none;
}

.btn-orange{
  background: linear-gradient(#ffb35a, var(--orange2));
  color: #fff;
  box-shadow: 0 8px 16px var(--shadow);
}

.btn-orange:active{ transform: translateY(1px); }

.btn-tri{
  width: 46px;
  padding: 10px 0;
  text-align:center;
  background: linear-gradient(#ffb35a, var(--orange2));
  color:#fff;
}

/* 無効時（SOUNDの三角など、将来機能のプレースホルダ用） */
.btn-tri[disabled]{
  opacity: .55;
  cursor: not-allowed;
  pointer-events:none;
}


.tempo{
  display:flex;
  align-items:center;
  gap: 4px;
  padding: 9px 12px;
  border-radius: 8px;
  background: linear-gradient(#ffb35a, var(--orange2));
  color:#fff;
  font-weight: 900;
  letter-spacing: .03em;
  border: 2px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 16px var(--shadow);
  min-width: 92px;
  justify-content:center;
  cursor:pointer;
  user-select:none;

}
.tempo.is-running{
  filter: brightness(1.08);
  box-shadow: 0 10px 22px rgba(255,200,0,.18), 0 8px 16px var(--shadow);
}

/* 選曲などでテンポが変わった時に、♪表示を一瞬ハイライト */
.tempo.flash{
  animation: tempoFlash 650ms ease-out 1;
}
@keyframes tempoFlash{
  0%{
    transform: scale(1.04);
    filter: brightness(1.25);
    box-shadow:
      0 0 0 4px rgba(255,255,255,.20),
      0 18px 32px rgba(255,200,0,.55),
      0 8px 16px var(--shadow);
  }
  100%{
    transform: scale(1);
    filter: brightness(1);
    box-shadow: 0 8px 16px var(--shadow);
  }
}
@media (prefers-reduced-motion: reduce){
  .tempo.flash{ animation: none; }
}


.redline{
  height: 6px;
  background: var(--red);
  box-shadow: 0 0 18px rgba(255,0,0,.55);
}


.stage{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap: 16px;
  padding: 10px 16px 22px;
}

.piano-shell{
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 18px 10px 20px;
  background: linear-gradient(#0b0b0b, #050505);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.08);
}

/* Slight pseudo-3D perspective, like a photographed keyboard */
.piano{
  position:relative;
  height: 350px;
  margin: 0 auto;
  perspective: 900px;
  transform: translateZ(0);
}

.keys.whites{
  display:flex;
  height: 100%;
  position: relative;
  transform: rotateX(6deg);
  transform-origin: 50% 0%;
}

.key{
  position: relative;
  border: 1px solid rgba(0,0,0,.55);
  outline: none;
  cursor: pointer;
  user-select:none;
}

/* iOS/Touch：長押しで鍵盤ラベルが「選択状態」になり操作不能になるのを防ぐ */
.key,
.key *{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* 鍵盤上のスクロール/ズーム動作より、演奏操作を優先 */
.key{ touch-action: none; }

/* 文字部分は“触れる対象”にしない（ボタン本体として扱う） */
.key .lbl,
.key .note{ pointer-events: none; }

.key.white{
  flex: 1 1 0;
  height: 100%;
  background: linear-gradient(var(--whiteKey), var(--whiteKey2));
  border-radius: 0 0 10px 10px;
  box-shadow:
    inset 0 -8px 18px rgba(0,0,0,.12),
    0 12px 20px rgba(0,0,0,.45);
}

.key.white:not(:last-child){ border-right: 1px solid rgba(0,0,0,.25); }

.key.white .lbl{
  position:absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align:center;
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 26px);
  color:#000;
  text-shadow: 0 2px 0 rgba(255,255,255,.65);
  letter-spacing:.08em;
}

.key.white .note{
  position:absolute;
  bottom: 44px;
  left: 0;
  right: 0;
  text-align:center;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  font-weight: 800;
}

.keys.blacks{
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 62%;
  pointer-events:none; /* individual keys will re-enable */
}

.key.black{
  position:absolute;
  top: 0;
  width: 6.8%;
  height: 78%;
  background: linear-gradient(var(--blackKey2), var(--blackKey));
  border-radius: 0 0 8px 8px;
  box-shadow:
    inset 0 -10px 20px rgba(255,255,255,.06),
    0 14px 18px rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.08);
  pointer-events:auto;
  transform: rotateX(6deg);
  transform-origin: 50% 0%;
}

.key.black .lbl{
  position:absolute;
  left: 0;
  right: 0;
  top: 46%;
  text-align:center;
  font-weight: 900;
  font-size: clamp(14px, 1.8vw, 18px);
  color: #dcdcdc;
  text-shadow: 0 2px 0 rgba(0,0,0,.85);
  letter-spacing:.12em;
}

.key.black .note{
  position:absolute;
  left:0; right:0;
  top: 64%;
  text-align:center;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  font-weight: 800;
}

.key.active{
  filter: brightness(1.2);
}

.key.white.active{
  box-shadow:
    inset 0 -8px 18px rgba(0,0,0,.16),
    0 0 0 3px rgba(242,154,46,.35),
    0 12px 20px rgba(0,0,0,.45);
}

.key.black.active{
  box-shadow:
    inset 0 -10px 20px rgba(255,255,255,.10),
    0 0 0 3px rgba(242,154,46,.35),
    0 14px 18px rgba(0,0,0,.65);
}

.hint{
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 10px 6px 0;
  color: rgba(255,255,255,.86);
}

.hint-line{
  margin: 6px 0;
  line-height: 1.6;
}

.hint-line.small{ color: rgba(255,255,255,.65); font-size: 13px; }

/* =========================================
   Typing Piano GAME: Falling notes + Judge
   - White: yellow gradient bar -> judge GREEN line
   - Black: purple gradient bar -> judge BLUE line
========================================= */

.noteLayer{
  position:absolute;
  inset: 0;
  pointer-events:none;

  /* iPad Safari 対策: 3D要素(鍵盤)の上に確実に載せるため、
     noteLayer 自体を合成レイヤー化します */
  z-index: 30;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);

  overflow:hidden;
}


#piano[data-judge="off"] .judgeLine{ display:none; }

.judgeLine{
  position:absolute;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events:none;

  /* noteLayer より上 */
  z-index: 31;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);

  opacity: .75;
}


.judgeLine.white{
  top: 100%;
  background: linear-gradient(to right,
    rgba(0,255,120,0),
    rgb(204, 142, 8),
    rgba(0,255,120,0)
  );
  box-shadow: 0 0 14px rgba(204,178,120,.65);
}

.judgeLine.black{
  top: 47%;
  background: linear-gradient(to right,
    rgba(0,255,120,0),
    rgb(204, 142, 8),
    rgba(0,255,120,0)
  );
  box-shadow: 0 0 14px rgba(204,178,120,.65);
}

/* -----------------------------------------
   Judge result popup (center)
   - appears on PERFECT / GOOD / MISS
----------------------------------------- */
#piano[data-judge="off"] .judgePopup{ display:none; }

.judgePopup{
  position:absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  z-index: 20;
  pointer-events:none;
  user-select:none;

  font-weight: 900;
  letter-spacing: .10em;
  font-size: clamp(34px, 5.2vw, 78px);
  line-height: 1;

  color: #fff;
  opacity: 0;

  text-shadow:
    0 8px 22px rgba(0,0,0,.65),
    0 0 18px rgba(255,210,120,.55);
}

.judgePopup[data-kind="perfect"]{
  text-shadow:
    0 10px 26px rgba(0,0,0,.65),
    0 0 24px rgba(255,230,160,.75);
}

.judgePopup[data-kind="good"]{
  text-shadow:
    0 9px 24px rgba(0,0,0,.65),
    0 0 20px rgba(255,210,120,.55);
}

.judgePopup[data-kind="miss"]{
  color: rgba(255,110,110,1);
  text-shadow:
    0 10px 28px rgba(0,0,0,.70),
    0 0 24px rgba(255,90,90,.55);
}

.judgePopup.show{
  animation: judgePop .48s ease-out both;
}

@keyframes judgePop{
  0%   { opacity: 0; transform: translate(-50%, -46%) scale(.82); filter: blur(1px); }
  18%  { opacity: 1; transform: translate(-50%, -54%) scale(1.10); filter: blur(0px); }
  100% { opacity: 0; transform: translate(-50%, -78%) scale(1.02); filter: blur(0px); }
}

.noteBar{
  position:absolute;
  top: 0;
  border-radius: 14px;
  overflow: hidden; /* HOLDゲージを角丸内に収める */
  opacity: .88;

  filter: drop-shadow(0 10px 14px rgba(0,0,0,.55));
  -webkit-filter: drop-shadow(0 10px 14px rgba(0,0,0,.55));
}



/* durationBeats visual: bar bottom “head” so length differences are見えやすい */
.noteBar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 14px;
  border-radius: 999px;
  pointer-events:none;
  opacity: .9;
}
.noteBar.white::after{ background: rgba(255,255,255,.22); }
.noteBar.black::after{ background: rgba(210,160,255,.26); }


.noteBar.white{
  background: linear-gradient(to bottom,
    rgba(255,255,0,0) 0%,
    rgba(255,255,140,.20) 22%,
    rgba(255,255,140,.70) 62%,
    rgba(255,245,180,1) 100%
  );
}

.noteBar.black{
  background: linear-gradient(to bottom,
    rgba(170,0,255,0) 0%,
    rgba(170,0,255,.28) 22%,
    rgba(170,0,255,.78) 62%,
    rgba(220,140,255,1) 100%
  );
}



/* =========================================================
   durationBeats 色分け（音価で“ぱっと見”が分かるように）
   16分:0.25 / 8分:0.5 / 4分:1 / 付点4分:1.5 / 2分:2 / 全音符:4
   ※ white/black の“鍵種”は維持しつつ、音価で色味を少しずつ変える
========================================================= */

/* --- White keys (warm spectrum) --- */
.noteBar.white.dur025{
  background: linear-gradient(to bottom,
    rgba(210,255,160,0) 0%,
    rgba(210,255,160,.20) 22%,
    rgba(210,255,160,.70) 62%,
    rgba(210,255,160,1) 100%
  );
}
/* .noteBar.white.dur05 は既存 .noteBar.white を使用 */
.noteBar.white.dur1{
  background: linear-gradient(to bottom,
    rgba(255,255,0,0) 0%,
    rgba(255,240,120,.22) 22%,
    rgba(255,240,120,.78) 62%,
    rgba(255,230,120,1) 100%
  );
}
.noteBar.white.dur15{
  background: linear-gradient(to bottom,
    rgba(255,220,90,0) 0%,
    rgba(255,220,90,.22) 22%,
    rgba(255,220,90,.78) 62%,
    rgba(255,200,90,1) 100%
  );
}
.noteBar.white.dur2{
  background: linear-gradient(to bottom,
    rgba(255,190,60,0) 0%,
    rgba(255,190,60,.22) 22%,
    rgba(255,190,60,.80) 62%,
    rgba(255,170,60,1) 100%
  );
}
.noteBar.white.dur4{
  background: linear-gradient(to bottom,
    rgba(255,170,40,0) 0%,
    rgba(255,170,40,.24) 22%,
    rgba(255,170,40,.82) 62%,
    rgba(255,150,40,1) 100%
  );
}

/* --- Black keys (purple spectrum) --- */
.noteBar.black.dur025{
  background: linear-gradient(to bottom,
    rgba(90,80,255,0) 0%,
    rgba(90,80,255,.26) 22%,
    rgba(90,80,255,.74) 62%,
    rgba(150,180,255,1) 100%
  );
}
/* .noteBar.black.dur05 は既存 .noteBar.black を使用 */
.noteBar.black.dur1{
  background: linear-gradient(to bottom,
    rgba(190,0,255,0) 0%,
    rgba(190,0,255,.28) 22%,
    rgba(190,0,255,.80) 62%,
    rgba(240,120,255,1) 100%
  );
}
.noteBar.black.dur15{
  background: linear-gradient(to bottom,
    rgba(220,0,255,0) 0%,
    rgba(220,0,255,.28) 22%,
    rgba(220,0,255,.80) 62%,
    rgba(255,120,230,1) 100%
  );
}
.noteBar.black.dur2{
  background: linear-gradient(to bottom,
    rgba(255,0,220,0) 0%,
    rgba(255,0,220,.26) 22%,
    rgba(255,0,220,.78) 62%,
    rgba(255,100,200,1) 100%
  );
}
.noteBar.black.dur4{
  background: linear-gradient(to bottom,
    rgba(255,0,190,0) 0%,
    rgba(255,0,190,.26) 22%,
    rgba(255,0,190,.78) 62%,
    rgba(255,80,180,1) 100%
  );
}

/* =========================================================
   HOLD（長押し）中の見た目
========================================================= */
.noteBar.holding{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 0px;
  animation: holdPulse .75s ease-in-out infinite;
}
@keyframes holdPulse{
  0%,100%{ opacity: .88; }
  50%{ opacity: 1; }
}

.noteBar.hit{
  opacity: 0;
  transition: opacity .12s linear;
}

.noteBar.miss{
  opacity: .16;
  filter: grayscale(1);
  transition: opacity .18s linear;
}

/* ================================
   HOLD 進捗ゲージ（ホールド中だけ表示）
   - バーの中に「伸びる」表示
================================ */
.noteBar .holdGauge{
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  bottom: 6px;
  border-radius: 12px;
  transform-origin: bottom;
  transform: scaleY(0);
  opacity: 0;
  pointer-events: none;
}

/* ホールド中だけ見せる */
.noteBar.holding .holdGauge{ opacity: .95; }

/* 白鍵／黒鍵で見え方を微調整 */
.noteBar.white .holdGauge{
  background: linear-gradient(to top,
    rgba(255,255,255,.88),
    rgba(255,255,255,.26)
  );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),   /* 内側の輪郭 */
    0 0 10px rgba(255,255,255,.22),          /* 外側の発光（弱） */
    0 0 22px rgba(255,230,150,.14);          /* ほんのり暖色の縁光 */
}


.noteBar.black .holdGauge{
  background: linear-gradient(to top,
    rgba(255,255,255,.80),
    rgba(255,255,255,.20)
  );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),   /* 内側の輪郭 */
    0 0 12px rgba(255,255,255,.20),          /* 外側の発光（弱） */
    0 0 26px rgba(200,160,255,.16);          /* 紫寄りの縁光（黒鍵に馴染む） */
}



/* ===== Song Select Menu (SOUND) ===== */
.songMenu{
  position: fixed;
  z-index: 9999;
  background: rgba(20,20,20,.95);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.7);
}

.songMenuTitle{
  font-weight: 900;
  margin: 0 0 8px;
  color: rgba(255,255,255,.9);
  font-size: 14px;
}

.songMenuItem{
  width: 100%;
  display: block;
  text-align: left;
  padding: 10px 12px;
  margin: 6px 0;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}

.songMenuItem:hover{
  background: rgba(255,255,255,.12);
}

.songMenuItem.is-active{
  outline: 2px solid rgba(242,154,46,.65);
}

/* ================================
   選曲メニュー（SOUND）
================================ */
.songMenu{
  position: absolute;
  top: calc(100% + 10px);
  left: 6px;
  width: min(320px, 92vw);
  padding: 10px;
  border-radius: 12px;
  background: rgba(10,10,10,.92);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 42px rgba(0,0,0,.60);
  backdrop-filter: blur(6px);
  z-index: 50;
}

.songMenuHead{
  margin: 2px 2px 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .10em;
  color: rgba(255,255,255,.90);
}

.songMenuList{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.songItem{
  text-align: left;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 850;
}

.songItem:hover{
  background: rgba(242,154,46,.18);
  border-color: rgba(242,154,46,.35);
}

.songItem[aria-current="true"]{
  background: rgba(242,154,46,.28);
  border-color: rgba(242,154,46,.48);
}

.songItem small{
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  opacity: .75;
}


/* =========================================
   Result Modal (song end)
========================================= */

.resultModal{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 120;

  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
}

.resultModal[hidden]{
  display:none !important;
}

.resultCard{
  width: min(560px, 92vw);
  border-radius: 18px;
  padding: 18px 18px 14px;

  background: rgba(20,20,20,.88);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 26px 80px rgba(0,0,0,.70);

  color: rgba(255,255,255,.96);
  text-align:center;
}

.resultTitle{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .16em;
  margin-bottom: 6px;
}

.resultSong{
  font-size: 13px;
  letter-spacing: .06em;
  opacity: .86;
  margin-bottom: 14px;
}

.resultGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 auto 14px;
  max-width: 360px;
}

.resultRow{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.resultRow span{
  font-size: 12px;
  letter-spacing: .10em;
  opacity: .78;
}

.resultRow b{
  font-size: 18px;
  font-weight: 900;
}

.resultActions{
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom: 8px;
}

.btn.btn-dark{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}

.btn.btn-dark:hover{
  filter: brightness(1.08);
}

.resultHint{
  font-size: 11px;
  opacity: .72;
  letter-spacing: .08em;
}

/* ================================
   SCORE HUD（1行6列・ピアノ幅内）
================================ */
.piano-shell{
  position: relative; /* HUDをabsoluteで重ねるため */
}

.hud{
  position: absolute;
  top: 12px;

  /* ★右寄りの原因（right固定）をやめて、中央寄せにする */
  left: 50%;
  right: auto;
  transform: translateX(-50%);

  width: min(920px, calc(100% - 24px)); /* ピアノ幅を超えない */
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;

  border-radius: 16px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);

  pointer-events: none;
  z-index: 50;
}


.hud[hidden]{
  display: none !important;
}

.hudCell{
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: end;
  min-width: 0;
}

.hudLabel{
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .75;
  line-height: 1.1;
  white-space: nowrap;
}

.hudValue{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.0;
  text-align: right;
  white-space: nowrap;
}