/* ============================================================
   UIパーツ専用スタイル (ui.css) - Organized Version
   ============================================================ */

/* --- 1. グローバル・レイアウト (全体の配置) --- */
#control-panel-wrapper {
    position: fixed;
    left: 20px;
    bottom: 195px;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    gap: 15px;
}
.control-panel-container {
    position: absolute;
    left: 50%; top: calc(13% - 20px); /* ★ 20px上にずらす */
    transform: translate(-50%, -30%);
    width: 100%;
    z-index: 100;
    pointer-events: none;
    display: flex;
    justify-content: center;
}
.mode-selector-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; 
}
#local-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 2. 共通コンポーネント (ボタン・刻印・タグ基本) --- */
/* (Base styles moved to ui-base.css) */

/* --- 3. 個別配置と特定パーツ --- */
/* 各モードタグの座標調整 */
#tag-session { width: 660px; height: 280px; margin-top: 5px; margin-left: 140px; transform: translateY(120px) !important; }
#tag-studio  { width: 670px; height: 240px; margin-top: -35px; margin-left: 150px; transform: translateY(70px) !important; }

/* ★ 負のmargin-topで重ねているため、DOM順（後＝手前）だと
   Session/Studioのボタンが下のタグに隠れてしまう。
   そこで明示的に「上にあるタグほど手前」になるようz-indexを固定する。
   （.active になった時は既存の z-index:10 がこれより優先される） */
#tag-session { position: relative; z-index: 2; }
#tag-studio  { position: relative; z-index: 1; }

/* 刻印の内容と位置 */
#tag-session::before { content: "Session Mode"; top: 88px; left: 70px; font-size: 17px; }
#tag-studio::before  { content: "Studio Mode"; top: 60px; left: 65px; font-size: 19px; }

/* 【STUDIO】内パーツ */
#tag-studio .play-stamp,
#tag-studio .stop-stamp {
    position: absolute;
    min-width: 90px;
    z-index: 100;
}
#tag-studio .play-stamp  { top: 130px; left: 70px; }
#tag-studio .stop-stamp  { top: 132px; left: 180px; }
#tag-studio .guide-stamp.active {
    background: var(--color-gold-glow) !important;
    box-shadow: 0 0 10px var(--color-gold-glow), var(--shadow-inset-soft) !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.6) !important;
}
.studio-stacked-btns {
    position: absolute;
    top: 91px; left: 288px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}
#studio-song-display {
    position: absolute;
    top: 90px; left: 405px;
    width: 200px; height: 28px;
    display: flex;
    align-items: center;
    padding: 4px 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- 4. システム操作エリア --- */

/* --- 5. フローティングボタン & モーダル --- */
.settings-floating-btn:active {
    transform: rotate(45deg) scale(0.95);
    transition: transform 0.1s;
}
.gear-svg {
    width: 60%; height: 60%;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* Playlist モーダル関連 */
#playlist-modal-overlay .lottie-container {
    position: relative;
    width: 600px;
    height: 600px;
}

#playlist-content-layer {
    position: absolute;
    padding-bottom: 80px; 
    box-sizing: border-box; /* paddingを含めたサイズ計算にするために必須 */
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}

/* --- 6. 設定画面内コンポーネント --- */
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(210, 180, 140, 0.2);
    padding-bottom: 15px;
}
.settings-title {
    font-family: var(--font-serif); 
    color: #d2b48c;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.close-x {
    color: #8b5a2b;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s ease;
}
.close-x:hover {
    color: #f5deb3;
    transform: scale(1.1);
}
.settings-body {
    flex-grow: 1; 
    overflow-y: auto;
    color: #e0cda9;
    font-family: 'Times New Roman', Times, serif;
}
.settings-placeholder {
    font-style: italic;
    opacity: 0.6;
    text-align: center;
    padding: 20px;
}
.settings-group {
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2); 
    border-radius: 4px;
    border: 1px solid rgba(99, 74, 53, 0.3);
}
.settings-group-label {
    display: block;
    font-size: 0.75rem;
    color: #c9a063;
    letter-spacing: 2px;
    margin-bottom: 20px; 
    text-transform: uppercase;
    font-weight: bold;
}
.settings-footer {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    padding: 20px 40px;
    border-top: 1px solid rgba(191, 161, 16, 0.2);
    background: rgba(0, 0, 0, 0.3); 
    margin-top: auto; 
}
.settings-footer .btn-stamp-base,
.settings-footer .btn-stamp-gold {
    min-width: 120px;
    height: 40px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* --- 7. 鍵盤の基礎設定とエフェクト --- */
.key {
    position: relative;
    overflow: hidden;
}
.key.is-veiled::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 5;
    background-image: 
        linear-gradient(to bottom, 
            rgba(0, 0, 0, 1) 0%, 
            rgba(0, 0, 0, 0.9) 40%, 
            rgba(0, 0, 0, 0.8) 100%);
    opacity: 0.95;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.key.key-assigned::after {
    opacity: 0;
}
/* ★ パフォーマンス対策：表示範囲の境界から近い鍵盤(is-veiled-near)だけに
   コストの高いblurフィルターを残し、遠い鍵盤(is-veiled-far)はgrayscaleのみの
   軽い表現にする。GPU負荷の高いblurの対象を大幅に減らせる。 */
.key.is-veiled-near {
    filter: grayscale(0.5) blur(0.5px);
    transition: filter 0.4s ease;
}
.key.is-veiled-far {
    filter: grayscale(0.5);
    transition: filter 0.4s ease;
}
.key.key-assigned {
    filter: grayscale(0) blur(0);
}

.studio-seek-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px; 

    /* 独立したレイヤーにする */
    position: fixed; 
    z-index: 200; /* 全てのUIより前面 */
    
    /* pointer-eventsを確実に有効化 */
    pointer-events: auto !important;

    /* --- ここから位置調整 --- */
    /* 画面下端からの距離 */
    bottom: 410px; 
    /* 画面左端からの距離 */
    left: 850px; 
    /* ★ #tag-studio (translateY(70px)) と同じ移動量に揃えて追従させる */
    transform: translateY(70px);

    height: auto; 
    user-select: none;
}

#studio-seek-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 110%;
    background: transparent;
    cursor: pointer;
    outline: none;
    position: relative;
    z-index: 1000;
}

#studio-seek-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: #1a1a1a;
    border-radius: 3px;
}

/* つまみ部分（Google Chrome, Edge, Safari用） */
#studio-seek-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 12px;
    /* ★ 標準よりわずかに暗めのゴールドに調整 */
    background: linear-gradient(145deg, #b8923a, #6b4423);
    border-radius: 2px;
    margin-top: -9px;
    border: 1px solid var(--color-wood-frame);
}

#studio-seek-slider::-moz-range-track {
    width: 100%;
    height: 6px;
    background: #1a1a1a;
    border-radius: 3px;
}

#studio-seek-slider::-moz-range-thumb {
    height: 24px;
    width: 12px;
    background: linear-gradient(145deg, #b8923a, #6b4423);
    border-radius: 2px;
    border: 1px solid var(--color-wood-frame);
}

#studio-time-display {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 900;
    color: #2a1b0c;
    text-shadow: 0.5px 0.5px 0px rgba(255, 255, 255, 0.4); 
    margin-top: 8px; 
    white-space: nowrap;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.2); 
    padding: 1px 6px;
    border-radius: 2px;
}

/* --- レールの判定エリアを広げる --- */
#studio-seek-slider::-webkit-slider-runnable-track {
    height: 10px;
    cursor: pointer;
}