.session-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    left: var(--session-controls-left);
    top: var(--session-controls-top);
    transform: translateY(-50%);
    gap: var(--session-gap);
    pointer-events: auto;
    z-index: 10;
}

.session-controls .btn-stamp-base {
    min-width: var(--session-btn-width);
    text-align: center;
    height: 30px;
    padding: 5px 10px;
    transition: all 0.2s ease;
}

#session-play-pause-btn[data-playing="true"] {
    background-color: #4a3f28 !important;
    color: #a89a7e !important;
    border-color: #38301e !important;
    text-shadow: none !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.7) !important;
    animation: none !important;
    transition: all 0.3s ease;
}

#session-play-pause-btn[data-playing="true"]:hover {
    background-color: #3d3421 !important;
    filter: brightness(1.0) !important;
}

/* --- RECボタンの「録音中」スタイルをよりリッチに --- */
#session-rec-btn[data-recording="true"] {
    background-color: #8a1a1a !important; /* 真鍮に合う深い赤 */
    color: #ffb3b3 !important;
    border-color: #5c1111 !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8), 0 0 10px rgba(255, 0, 0, 0.3) !important;
    animation: rec-pulse 1.5s infinite !important; /* ui.cssのアニメーションと統一 */
}

/* PLAYボタン：アクティブ時は「押されている」質感を強調 */
#session-play-pause-btn[data-playing="true"] {
    background-color: #5c4a28 !important; /* 真鍮が沈んだ色 */
    color: #ffd700 !important;           /* 文字は金色 */
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.8) !important;
}

/* RECボタン：
#session-rec-btn {
    transition: opacity 0.3s ease;
}

/* PLAYがONの時のみRECを鮮やかにする（任意） */
#session-play-pause-btn[data-playing="true"] ~ #session-rec-btn {
    opacity: 1;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* ============================================================
   Session Mode: 没入型宇宙空間（演出定義 - 重ね順完全適合版）
   ============================================================ */

/* 1. 全面を覆う宇宙の闇 */
.session-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at center, #0c0d19 0%, #030305 100%);
    
    /* 🌟 通常UI（木枠など）の上に覆い被さり、かつピアノ全体(500)の裏に潜る数値 */
    z-index: 400 !important; 
    
    overflow: hidden;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none; /* 鍵盤の打鍵をブロックしない */
    transition: opacity 1.0s ease-in-out;
}

.session-overlay.active {
    opacity: 1;
}

/* 宇宙エフェクト用キャンバス */
#session-effect-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* 🌟 暗闇(400)のすぐ前面、かつピアノ(500)のすぐ後ろの隙間に固定！ */
    z-index: 450 !important; 
    
    pointer-events: none !important;
    display: block !important;
}

/* AI伴奏の風味選択ドロップダウン（REC ボタンの右） */
.session-genre-select {
    font-family: 'Kiwi Maru', serif;
    font-size: 13px;
    color: #e0d8c8;
    background: #1a1a1a;
    border: 1px solid #8c6239;
    border-radius: 6px;
    padding: 4px 8px;
    height: 28px;
    cursor: pointer;
    outline: none;
}

.session-genre-select:hover {
    border-color: #bfa110;
}

.session-genre-select option {
    font-family: 'Kiwi Maru', serif;
    background: #1a1a1a;
    color: #e0d8c8;
}
#session-esc-hint {
    position: fixed !important;
    top: 20px !important;
    left: 24px !important;
    z-index: 460 !important;
    font-family: 'Kiwi Maru', serif !important;
    font-size: 14px; /* ★ ここでフォントサイズを調整できます */
    color: #e0d8c8;
    opacity: 0;
    pointer-events: none !important;
}

.session-overlay.active #session-esc-hint {
    animation: escHintFlashFade 5s ease forwards;
}

/* 0.3秒で軽く光り、1秒手前で落ち着き、3秒保持してから徐々に消える */
@keyframes escHintFlashFade {
    0%   { opacity: 0; }
    6%   { opacity: 0.9; }   /* ★ 強すぎない一瞬の光り */
    20%  { opacity: 0.55; }  /* 落ち着いた表示に移行 */
    60%  { opacity: 0.55; }  /* ここまで（約3秒）表示を保持 */
    100% { opacity: 0; }     /* 残り2秒でゆっくり消える */
}


/* ============================================================
   通常UI層 ＆ ピアノ内部の「黒板」のフェードアウト処理
   ============================================================ */

/* ボタンが格納されたメインUI層、およびピアノ内の黒板を
   Session起動時に1.0秒かけて完全に透明化させて隠します */
.session-active #ui-layer,
.session-active #view-piano .blackboard-container {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 1.0s ease-in-out !important;
}

/* 通常画面に戻る時（Escキーなど）のリバースアニメーション用設定 */
#ui-layer,
#view-piano .blackboard-container {
    transition: opacity 1.0s ease-in-out;
}


/* ============================================================
   【修正】ピアノのフェードインを廃止・半透明化のみ同期
   ============================================================ */

/* 通常時のピアノ：常に配置を固定し、余計なフェードインはさせない */
#view-piano {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 500 !important; /* 宇宙の暗闇(200)よりも手前に常駐 */
    
    opacity: 1 !important; /* 常にパッと表示されている状態を維持 */
    transition: opacity 1.0s ease-in-out !important; /* 透明度の変化だけを1秒かける */
}

/* Sessionモードがアクティブになった瞬間（.session-active） */
.session-active #view-piano {
    /* 鍵盤そのものは消さず、1.0秒かけてじわ〜っと半透明グラフィックに変貌させる */
    opacity: 0.5 !important; 
}