/* ==========================================
   1. ピアノ全体の構造 (Outer Shell)
   ========================================== */
#view-piano {
    position: fixed;
    bottom: -50px; /* ★ -220pxだと画面外に出すぎたため、控えめな値に調整 */
    left: 0;
    width: 100%;
    height: 280px; /* ★ 鍵盤のサイズは元の280pxに戻す */
    z-index: 100100 !important; /* Canvas(99)より高く設定 */
    background-color: transparent;
    display: flex;
    flex-direction: column;
    border: none;
    /* ★ GAME ON終了時（メイン画面へ戻る時）、暗幕(#sg-canvas-container)の
       フェードアウトと同じ5秒かけてゆっくり明るさを戻す */
    transition: opacity 5s ease-in-out;
}

/* ★ GAME ON開始時、暗幕のフェードインと同じタイミング・速さで
   鍵盤もゆっくり暗くする（終了時は上の#view-pianoのtransitionが使われる） */
body.studio-game-active #view-piano {
    opacity: 0.5;
    transition: opacity 1.5s ease-in;
}

#piano-viewport {
    flex: 1;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    /* 背景色を透明（transparent）に変更 */
    background-color: transparent !important; 
    border-top: 2px solid #333;
    scrollbar-width: none;
}

/* ★ 高さの指定が無く、鍵盤(height:100%)が0になって見えなくなっていたため追加
   （※ overflow:hidden は付けない。付けると #piano-viewport の scrollWidth 計算が
      崩れ、ミニマップの可視範囲枠が画面幅いっぱいになってしまう） */
#range-mask {
    height: 100%;
    position: relative;
}

#piano-viewport::-webkit-scrollbar {
    display: none; /* Chrome/Safari用：スクロールバー非表示 */
}

.piano-keyboard {
    display: flex;
    height: 100%;
    align-items: flex-start;
    padding: 0 10px;
    position: relative; 
}

/* ==========================================
   2. ミニマップ (Minimap)
   ========================================== */
.piano-minimap-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px 0;
    background: transparent; 
}

.minimap-base {
    width: 16vw;
    height: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    position: relative;
}

.minimap-viewport-frame {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    pointer-events: none;
}

/* ==========================================
   3. 鍵盤とラベルの基本設定 (Key Basics)
   ========================================== */
.key {
    position: relative;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: transform 0.05s, background-color 0.1s;
    overflow: visible;
}

/* 打鍵時の光レイヤー */
.key::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    transition: opacity 0.1s;
    pointer-events: none;
    z-index: 5;
}

/* 音名ラベル */
.key-label {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 900;
    pointer-events: none;
    z-index: 10;
    transition: all 0.1s ease;
    text-align: center;
    width: 100%;
}

.key.black.guide-active {
    background-color: #ffea00 !important;
    border: 2px solid #fff !important;
    z-index: 10 !important; /* 一番手前 */
    
    box-shadow: 
        0 0 10px #ffea00, 
        0 0 20px #ffea00, 
        0 0 30px #ff8c00, 
        inset 0 0 15px rgba(255, 255, 255, 0.8) !important;
    transition: all 0.05s ease !important;
}

/* --- 白鍵のガイド（黒鍵のガイドよりは後ろ、Canvasよりは前） --- */
.key.white.guide-active {
    background-color: #ffea00 !important;
    border: 2px solid #fff !important;
    z-index: 7 !important; /* 黒鍵ガイド(10)より後ろ、Canvas(5)より前 */
    
    box-shadow: 
        0 0 10px #ffea00, 
        0 0 20px #ffea00, 
        0 0 30px #ff8c00, 
        inset 0 0 15px rgba(255, 255, 255, 0.8) !important;
    transition: all 0.05s ease !important;
}

/* --- 白鍵 --- */
.key.white {
    width: 4.7619vw; 
    height: 220px;
    background: linear-gradient(180deg, #fff 0%, #eee 100%);
    border: 1px solid #ccc;
    border-radius: 0 0 6px 6px;
    /* ★ z-indexが低い(1)だと、GAME ON演出キャンバス等との重なりで
       文字のグローが見えなくなる不具合の原因だったことが判明。安全な値に引き上げる */
    z-index: 2;
    /* ★ 黒鍵と同じ「上から照らす」立体感を出す影を追加 */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

/* ★ GAME ON中だけ、鍵盤上部（画面境目）から光が差し込むような
   グラデーション演出を追加する（黒鍵は元々このトーンを持っている） */
body.studio-game-active .key.white {
    background: linear-gradient(
        180deg,
        #fff6d8 0%,
        #ffedb0 6%,
        #fff 22%,
        #eee 100%
    );
    box-shadow:
        inset 0 18px 22px -12px rgba(255, 210, 120, 0.65),
        2px 2px 5px rgba(0, 0, 0, 0.5) !important;
}

.key.white .key-label {
    color: rgba(0, 0, 0, 0.6);
}

/* ★ GAME ON中だけ、白鍵の番号を黒鍵と同じ「白く光る」見た目にする。
   通常時（GAME ONではない時）は元の薄いグレー文字のまま変更しない。
   （GAME ON以外の場面で白背景に白文字を乗せると見えなくなるため） */
body.studio-game-active .key.white.key-assigned .key-label {
    color: #000;
    text-shadow:
        0 0 4px #000,
        0 0 8px rgba(0, 0, 0, 0.75),
        0 0 14px rgba(0, 0, 0, 0.55);
}

/* --- 黒鍵 --- */
.key.black {
    width: 2.8vw; 
    height: 140px;
    background: linear-gradient(180deg, #333 0%, #000 100%);
    /* ★ 白鍵がguide-active(z-index:7)で光っている時でも、
       待機中の黒鍵が必ずその上に来るよう、7より高い値にする */
    z-index: 8;
    margin-left: -1.4vw; 
    margin-right: -1.4vw;
    border-radius: 0 0 4px 4px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.key.black .key-label {
    color: #fff;
    bottom: 8px;
    text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

body.studio-game-active .key.black.key-assigned .key-label {
    text-shadow:
        0 0 4px #fff,
        0 0 8px #ffe9a8,
        0 0 14px rgba(255, 220, 130, 0.9);
}

/* ==========================================
   4. 通常時の演奏エフェクト (Active Effects)
   ========================================== */
.key.active { 
    transform: translateY(6px); 
}

.key.active::after {
    background: linear-gradient(to bottom, rgba(0, 120, 212, 0.8) 0%, transparent 100%);
    opacity: 1;
}

.key.active .key-label {
    color: #0078d4 !important;
    transform: translateX(-50%) scale(1.2);
    text-shadow: 0 0 5px rgba(255,255,255,0.8);
}

/* ============================================================
   5. Liveモード演出 (Wireframe & Neon) - 優先度完全制覇＆AI・ユーザー叩き分け仕様
   ============================================================ */

/* ピアノ全体のビューポートを完全透過 */
body.session-active #view-piano {
    background-color: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
    transition: all 0.8s ease-in-out;
}

body.session-active #piano-viewport {
    background-color: rgba(0, 0, 0, 1.8) !important; /* 少しだけ背景色を乗せるとぼかしが綺麗に見えます */
    backdrop-filter: blur(90px); /* 👈 これがぼかしの正体です。数値はお好みで調整してください */
    -webkit-backdrop-filter: blur(10px); /* Safari対応 */
    border-top: none !important;
    transition: all 0.8s ease-in-out;
}

/* 🦴 【① 起動した瞬間に、色・影・元の古い枠線をパッと完全消去】
   通常時の強力なグラデーション、立体的な影、通常時のバラバラな境界線を、
   起動の瞬間（0秒）に、白鍵・黒鍵すべて同時に【完全に透明（虚無）】にします。 */
body.session-active .key,
body.session-active .key.white,
body.session-active .key.black,
body.session-active .key-container .key,
body.session-active .key-container .key.white,
body.session-active .key-container .key.black {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    
    /* ⚠️ 通常時の個別の境界線（left, right, bottom）をすべて個別に名指しして確実に透明化 */
    border: 1px solid transparent !important;
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    
    transition: none !important; /* 0秒で即時消去するためにtransitionを無効化 */
}

/* 🕸️ 【② タイムラグ後、0.8秒かけて白・黒すべての骨格線だけを再度生成】
   通常時の強力な個別優先度（border-leftなど）に打ち勝つために、
   ここでも4辺個別に色のフェードイン（0.8s）を命令します。
   これでブラウザは言い訳ができなくなり、白鍵の輪郭も100%確実に描き出します。 */
body.skeleton-generating .key,
body.skeleton-generating .key.white,
body.skeleton-generating .key.black {
    /* 構造を一律 1px solid に固定 */
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    
    /* 🌟 個別指定の優先度をハッキングし、全方向の枠線色を滑らかにフェードイン */
    border-left-color: rgba(255, 255, 255, 0.25) !important;
    border-right-color: rgba(255, 255, 255, 0.25) !important;
    border-top-color: rgba(255, 255, 255, 0.25) !important;
    border-bottom-color: rgba(255, 255, 255, 0.25) !important;
    
    /* 変化させる対象を border-color（すべての辺の色）に指定 */
    transition: border-color 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 🐈‍⬛ 黒鍵は白鍵の上に重なっているため、枠線が重なりで消えないように最前面へ引き上げ */
body.session-active .key.black {
    z-index: 100 !important;
}
body.skeleton-generating .key.black {
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-left-color: rgba(255, 255, 255, 0.45) !important;
    border-right-color: rgba(255, 255, 255, 0.45) !important;
    border-top-color: rgba(255, 255, 255, 0.45) !important;
    border-bottom-color: rgba(255, 255, 255, 0.45) !important;
}

/* 🚨 最前面のテスト用赤レイヤー（.key-visual-layer）をSessionモード時限定で完全非表示 */
body.session-active .key-visual-layer {
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* 音名ラベル（文字）：エフェクトを遮らない薄い白に統一 */
body.session-active .key .key-label {
    color: rgba(255, 255, 255, 0.6) !important;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8) !important;
}

/* ============================================================
   🌌 Liveモード時の打鍵エフェクト（AI[奥:青] と ユーザー[手前:黄]）
   ============================================================ */

/* ------------------------------------------------------------
   🤖 ① AIの打鍵時：向かって奥側（上部）が青色（ネオンブルー）に発光 
------------------------------------------------------------ */
body.session-active .key.active.from-ai {
    transform: translateY(1px);
    
    /* 奥側（上から25%まで）を鮮やかな青にして、手前に向かって透明に消えていくグラデーション */
    background: linear-gradient(to bottom, 
        rgba(0, 102, 255, 0.85) 0%, 
        rgba(0, 204, 255, 0.4) 25%, 
        transparent 65%
    ) !important;
    
    /* 枠線も奥側（上辺）を中心にネオンブルーへ発光 */
    border-top-color: rgba(0, 204, 255, 1) !important;
    border-left-color: rgba(0, 204, 255, 0.3) !important;
    border-right-color: rgba(0, 204, 255, 0.3) !important;
    border-bottom-color: rgba(255, 255, 255, 0.25) !important; /* 下辺は骨格線のまま */
    
    /* 上方向（奥）を中心に広がる美しい青いグロー（影）効果 */
    box-shadow: 0 -4px 12px rgba(0, 204, 255, 0.6) !important;
    transition: all 0.05s ease;
}
body.session-active .key.active.from-ai .key-label {
    color: #fff !important;
    text-shadow: 0 0 6px #00ccff;
}

/* 🤖 AI打鍵時：白鍵の内壁（.white-fill）の透過衝突を防止 */
body.session-active .key.active.from-ai .white-fill {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* ------------------------------------------------------------
   🧑 ② ユーザーの打鍵時：向かって手前側（下部）が黄色（ネオンイエロー）に発光
------------------------------------------------------------ */

/* 🌟 白鍵・黒鍵共通の大元コンテナ（.key）の黄色発光設定 */
body.session-active .key.active.from-user {
    transform: translateY(2px) !important;
    background: linear-gradient(to top, 
        rgba(255, 204, 0, 0.9) 0%, 
        rgba(255, 153, 0, 0.5) 35%, 
        transparent 75%
    ) !important;
    border-bottom-color: rgba(255, 204, 0, 1) !important;
    border-left-color: rgba(255, 204, 0, 0.4) !important;
    border-right-color: rgba(255, 204, 0, 0.4) !important;
    border-top-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 14px rgba(255, 204, 0, 0.7) !important;
    transition: all 0.05s ease;
}

/* 🌟 【大本命・これが足りなかった処理です！】
   AI側と全く同じように、ユーザーが弾いた瞬間も、内側の白い壁（.white-fill）を
   完全に【透明（虚無）】にして消し飛ばします。
   これにより、大元（.key）に塗られた美しい黄色のグラデーションが最前面に一瞬で露出します。 */
body.session-active .key.active.from-user .white-fill {
    background: transparent !important; /* 👈 通常時の白壁シールドを完全に破壊 */
    border: none !important;
    box-shadow: none !important;
}

body.session-active .key.active.from-user .key-label {
    color: #fff !important;
    text-shadow: 0 0 6px #ffcc00;
}

/* 打鍵時は共通のアフター要素（通常時の立体エフェクト）を非表示 */
body.session-active .key.active::after {
    display: none !important;
}

/* ============================================================
   ミニマップの透過設定
   ============================================================ */
body.session-active .piano-minimap-container {
    background: transparent !important;
    border: none !important;
}
body.session-active .minimap-base {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
body.session-active .minimap-viewport-frame {
    background: rgba(0, 255, 255, 0.05) !important;
    border: 1px solid rgba(0, 255, 255, 0.5) !important;
}


/* ==========================================
   6. 通常時（非Session時）の鍵盤コンテナ・レイヤー構造
   ========================================== */
/* 💡 ここは通常時の表示（立体感やテストレイヤーの確認）を100%維持します。
   Sessionモード時は、上の5章の body.session-active ルールが!importantでこれらを強制上書き・隠蔽します */

/* コンテナ：ここが基準点（0,0）になるようにする */
.key-container {
    position: relative;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    overflow: visible !important;
}

/* 白鍵コンテナの幅 */
.key-container.white {
    width: 4.7619vw;
}

/* 黒鍵コンテナ：piano.css の既存設定と競合しないよう調整 */
.key-container.black {
    width: 0;
    position: relative;
    z-index: 100; /* 黒鍵は常に白鍵より上 */
}

/* 層1: エフェクトレイヤー（目視確認用） */
.key-visual-layer {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: 250; /* 確認のため最前面へ */
    background-color: rgba(255, 0, 0, 0.6) !important; /* 不透明度を上げ、!importantで強制 */
    pointer-events: none;
    border-radius: 0 0 8px 8px;
    display: block !important;
}

/* 層2: 鍵盤本体 */
.key-container .key {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    top: 0 !important;
}

/* 黒鍵本体のサイズ調整 */
.key-container.black .key,
.key-container.black .key-visual-layer {
    width: 3vw !important;
    height: 160px !important;
    margin-left: -1.5vw !important; /* 中央寄せ */
}

/* ガイドモード用：active クラスの影響を完全に排除する */
.key:not(.active):not(.guide-active) {
    background-color: initial !important; /* 初期値に戻す */
    box-shadow: none !important;
}

/* 確実にクラスを消した時に色を戻すためのルール */
.key {
    transition: background-color 0.1s ease, transform 0.1s ease;
}