/* プレーヤーコンテナ（初期状態は display: none または opacity: 0 などで隠す想定ですが、今回は hidden クラスで制御します） */
.player-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 10000 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
body.player-active .navbar,
body.player-active .header,
body.player-active nav,
body.player-active #main-nav {
    display: none !important;
}

/* 🌟 プレイヤー表示中は後ろのページをスクロールさせない（誤操作防止） */
body.player-active {
    overflow: hidden !important;
}

/* hiddenクラスがついている時は非表示 */
.player-container.hidden {
    display: none;
}

/* 戻るボタンを左上に配置 */
.close-player-btn {
    /* 🌟 位置は親の .player-top-left-zone に任せるため、これらは削除・変更 */
    position: static !important; 
    margin: 0 !important; 
    
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white;
    border: none;
    border-radius: 15px; /* 丸から少し角丸に変更してモダンに */
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.close-player-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: scale(1.05);
}

.player-top-left-zone {
    position: absolute;
    top: 30px; /* 画面端からの距離 */
    left: 30px;
    display: flex;
    align-items: center;
    gap: 20px; /* ボタンとタイトルの隙間 */
    z-index: 10000;
    transition: opacity 0.5s ease, visibility 0.5s;
    pointer-events: auto;
}

/* 🌟 追加：作品タイトルのデザイン（モノトーン仕様） */
.player-item-title {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    /* 映像が明るくても文字が読めるように強い影をつける */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 長すぎる場合は「...」にする */
    max-width: 45vw; /* 画面の横幅半分くらいで止める */
    letter-spacing: -0.01em;
    user-select: none;
}

.player-ui-overlay.idle .player-top-left-zone,
.player-ui-overlay.idle .player-bottom-panel {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
}









/* ビデオ要素を画面いっぱいに広げる */
#main-video-player {
    width: 100%;
    height: 100%;
    outline: none;
}



.player-ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* display: flex; 🌟 これらは不要になるので消すかコメントアウト */
    /* flex-direction: column; */
    /* justify-content: space-between; */
    z-index: 10;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
    pointer-events: auto;
}

.player-ui-overlay.idle {
    cursor: none !important; /* 🌟 UI上のカーソルを消す */
}

.player-ui-overlay.idle * {
    cursor: none !important;
}


/* 下部パネル */
.player-bottom-panel { 
    position: absolute; /* 🌟 追加：絶対位置指定 */
    bottom: 0;          /* 🌟 追加：一番下に配置 */
    left: 0;            /* 🌟 追加 */
    width: 100%;        /* 🌟 追加 */
    padding: 0 30px 40px; 
    box-sizing: border-box; /* パディングで横幅がはみ出さないように */
    z-index: 100;
    
    /* 下からのグラデーションをここにも少し入れると操作しやすくなります */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    
    transition: opacity 0.5s ease, visibility 0.5s;
}
.seek-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 20px; /* 少しボタンとの距離を広げるとより綺麗です */
    padding: 0; /* 🌟 0に設定 */
    box-sizing: border-box;
}

/* 🌟 時間テキストのデザイン（ChidaFilm仕様） */
#time-current, #time-remaining {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    min-width: 45px; /* 時間の桁が変わってもバーがガタガタ動かないように固定幅にする */
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8); /* 映像が白くても読めるように影をつける */
    user-select: none;
}


/* 🌟 既存のシークバーを少し修正 */
.seek-bar-container {
    flex: 1; /* 🌟 魔法のコード：両端の時間以外の「余った空間すべて」をバーにする */
    height: 13px;
    background-color: rgba(50, 50, 50, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    /* margin-bottom: 15px; ← wrapperに移動したのでこれは消してください */
}
#seek-bar-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 13px; /* 🌟 魔法のコード：高さと同じ最小幅を持たせることで絶対に丸みを失わない */
    background-color: #ffffff; /* 🌟 白に変更 */
    border-radius: 8px; /* 🌟 進行バー自体の先も丸くする */
}
.seek-bar-container::before {
    content: '';
    position: absolute;
    top: -25px;    /* バーの上方向へ25px反応エリアを広げる */
    bottom: -25px; /* バーの下方向へ25px反応エリアを広げる */
    left: 0;
    right: 0;
    cursor: pointer;
    z-index: 5;    /* 他の要素より手前でマウスをキャッチする */
}

.bottom-controls-row { display: flex; justify-content: space-between; align-items: center; }
.left-controls, .right-controls { display: flex; align-items: center; gap: 20px; position: relative; }
.right-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 🌟 これにより、右詰めで配置されます */
    gap: 20px; /* ボタン同士の間隔 */
}
.player-icon-btn {
    background: none;
    border: none;
    color: #ffffff; /* 純白に固定 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;       /* 一旦0にしてズレをリセット */
    width: 48px;      /* ボタン自体のサイズを固定 */
    height: 48px;     /* ボタン自体のサイズを固定 */
    transition: transform 0.2s, color 0.2s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.player-icon-btn:hover {
    
    transform: scale(1.15); /* 少し大きめに跳ねさせる */
}
.time-display { color: white; font-size: 14px; font-family: sans-serif; }

.player-popup-menu {
    position: absolute; 
    bottom: 80px; /* 少し上に浮かせる */
    right: 0;
    
    /* 🌟 深層すりガラス仕様（音量バーと完全一致） */
    background: rgba(0, 0, 0, 0.75) !important; 
    backdrop-filter: blur(40px) saturate(200%) brightness(0.9) !important; 
    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(0.9) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 24px !important; /* 丸みを音量バーに合わせる */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7) !important;
    
    min-width: 220px; 
    max-height: 400px; 
    overflow-y: auto; 
    color: white; 
    padding: 15px; /* 余白を広げてリッチに */
}
.player-popup-menu.hidden { display: none !important; }
.player-popup-menu h4 { margin: 0 0 10px; font-size: 14px; color: #bbb; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
.player-popup-menu ul { list-style: none; padding: 0; margin: 0; }

/* 🌟 メニュー項目もモダン＆モノトーンに */
.player-popup-menu li { 
    padding: 10px 14px; 
    cursor: pointer; 
    font-size: 14px; 
    border-radius: 12px; 
    display: flex; 
    align-items: center; 
    gap: 4px; /* 🌟 10pxから4pxへ：チェックマークとの距離を縮める */
    transition: background 0.2s ease; 
}
.player-popup-menu li:hover { background: rgba(255, 255, 255, 0.1); } /* グレーを白の半透明に */
.player-popup-menu li.active { color: #ffffff !important; font-weight: bold; background: rgba(255, 255, 255, 0.05); } /* 赤を廃止 */
.player-popup-menu li.active::before { 
    content: '✓'; 
    color: #ffffff;
    margin-right: 2px; /* 🌟 さらに微調整で隣接させる */
}


::cue {
    color: white;
    background-color: transparent; /* 背景の黒帯を消す */
    /* 文字が読みやすいように強いドロップシャドウと縁取りをつける */
    text-shadow: 
        0px 0px 8px rgba(0,0,0,0.9), 
        2px 2px 4px rgba(0,0,0,0.9),
        -1px -1px 2px rgba(0,0,0,0.9);
    font-family: 'Noto Sans JP', sans-serif; /* ここで好きなフォントを指定 */
    font-size: 1.5rem; /* 字幕の大きさ */
    font-weight: 700;
}

.player-snapshot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5; /* ビデオ(0)より上で、UI(10)より下 */
    pointer-events: none;
    filter: blur(5px) brightness(0.8);
}
.player-snapshot.hidden {
    display: none;
}

.player-loader {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50; /* 🌟 確実に一番手前に持ってくる（Snapshotは5、UIは10なので50なら絶対勝てる） */
    pointer-events: none;
}

/* 🌟 モダンなスピナーのアニメーション */
.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 4px solid #fff; /* ラインの色 */
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.lds-ring div:nth-child(3) { animation-delay: -0.15s; }

@keyframes lds-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



.player-icon-btn svg {
    width: 40px;
    height: 40px;
    transition: transform 0.2s;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}
.player-icon-btn svg:not([stroke]) {
    fill: #ffffff;
}
/* Material IconsとSVGが混在しても中心が合うように調整 */

.player-icon-btn svg[stroke="currentColor"] {
    stroke-width: 2.2px; /* 線を少し太くしてはっきりさせる */
}
.player-icon-btn svg[stroke] {
    fill: none !important; /* 👈 これで真っ白を回避 */
    stroke: #ffffff;
    stroke-width: 2.2px;
}


.big-icon-overlay {
    position: absolute;
    /* 🌟 親要素の真ん中を基準にする */
    top: 50% !important;
    left: 50% !important;
    /* 🌟 常に自分のサイズの半分だけ左上に引き戻す（これで完全中央） */
    transform: translate(-50%, -50%) scale(0); 
    
    width: 140px;         /* さらに少し大きくしました */
    height: 140px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    pointer-events: none;
    opacity: 0;
    z-index: 1000;
    margin: 0;            /* 余計な余白をカット */
    padding: 0;           /* 余計な余白をカット */
}

.big-icon-overlay svg {
    width: 90px;          /* アイコンもさらに大きく、はっきりと */
    height: 90px;
    fill: #ffffff;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6)); /* 光を強くしてはっきり */
}

/* 🌟 アニメーションをよりダイナミックに */
.big-icon-overlay.animate {
    animation: youtubePopFix 0.6s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

@keyframes youtubePopFix {
    0% { 
        opacity: 0; 
        /* 🌟 すべてのコマで translate(-50%, -50%) を絶対に外さない */
        transform: translate(-50%, -50%) scale(0.5); 
    }
    40% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1.1); 
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(1.6); 
    }
}
#seek-preview-container {
    position: absolute;
    bottom: 85px; 
    
    /* PCでの高さ。ここを基準に幅は自動(aspect-ratio)で決まる */
    height: 180px; 
    aspect-ratio: 16 / 9; /* 初期値。JSで上書きされます */
    
    background-color: #000;
    background-repeat: no-repeat;

    border-radius: 15px;
    z-index: 100;
    pointer-events: none;
    display: none;
    overflow: hidden; /* 🌟 これで枠外を確実にはみ出させない */
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    transform: translateX(-50%);
}

@media (min-width: 1024px) {
    #seek-preview-container {
        height: 23vh !important; /* 35vhから25vhへ。画質とサイズのバランスを優先 */
        bottom: 70px; /* 少し下げて本編の邪魔を減らす */
    }
}
#seek-preview-time {
    position: absolute;  /* 🌟 これがないと JS の .style.left が効きません！ */
    bottom: 25px;        /* 画像枠の少し下あたりに表示（お好みで調整） */
    color: #fff;
    background: rgba(0, 0, 0, 0.7); /* 背景を少し暗くして読みやすく */
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    z-index: 101;        /* 画像より手前に表示 */
    display: none;       /* 🌟 初期状態は隠す */
    pointer-events: none;
    transform: translateX(-50%); /* マウスの真ん中に来るように調整 */
}
.hidden {
    display: none !important;
}

.seek-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0); /* 通常は隠す */
    transition: transform 0.1s ease;
    z-index: 15;
    pointer-events: none; /* クリックを邪魔しない */
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

/* 🌟 バーにホバーした時や、ドラッグ中にツマミを表示 */
.seek-bar-container:hover .seek-thumb,
.seek-bar-container.dragging .seek-thumb {
    transform: translate(-50%, -50%) scale(1);
}

/* ドラッグ中は少し大きくする演出 */
.seek-bar-container.dragging .seek-thumb {
    transform: translate(-50%, -50%) scale(1.3);
    background-color: #ffffff;
}

.volume-control-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* ホバー時に出現するスライダーの土台 */
/* --- 🌟 ポップアップとバーの長さをさらに大幅に拡張 --- */

/* --- 🌟 音量ポップアップ：超ロング＆深層すりガラス仕様 --- */

.volume-slider-popup {
    position: absolute;
    bottom: 75px; 
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    
    /* 🌟 ポップアップ：280px -> 210px に短縮 */
    width: 48px;   
    height: 210px; 
    
    /* 深層すりガラス（維持） */
    background: rgba(0, 0, 0, 0.4) !important; 
    backdrop-filter: blur(40px) saturate(200%) brightness(0.9) !important; 
    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(0.9) !important;
    
    border-radius: 24px;
    display: block !important; 
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 🌟 スライダー：230px -> 160px に短縮 */
#volume-range {
    -webkit-appearance: none;
    appearance: none;
    
    width: 170px !important; 
    height: 5px !important; /* 少しだけ細くしてより精密な印象に */
    
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(-90deg) !important;
    
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    margin: 0 !important;
}

/* つまみのサイズ微調整 */
#volume-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px !important;
    height: 16px !important;
    background: #ffffff !important;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,0,0,0.8);
    cursor: pointer;
}

.volume-control-wrapper:hover .volume-slider-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.volume-indicator {
    position: absolute;
    top: 30px;
    right: 30px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2000;
    
    /* 🌟 初期状態は非表示、上からスッと出てくるアニメーション */
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

/* 表示された時のクラス */
.volume-indicator.show {
    opacity: 1;
    transform: translateY(0);
}

.indicator-bar-container {
    width: 260px;
    height: 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    overflow: hidden;
}

.indicator-bar-fill {
    height: 100%;
    background: white;
    width: 100%;
    transition: width 0.15s ease-out;
}

#indicator-percent {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 1px;
}

.volume-indicator-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9); /* 少し小さくしておく */
    
    /* 🌟 縦並び：アイコンが上、バーが下 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    padding: 40px;
    border-radius: 40px;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* 🌟 アイドル状態(UI非表示)でも、この要素に .show がつけば強制表示 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 9999;
    pointer-events: none;
}

.volume-indicator-center.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
    pointer-events: auto; /* 通知が出ている間はクリックを逃さない（任意） */
}

/* スピーカーアイコンを巨大化 */
.volume-big-icon {
    font-size: 100px !important; /* 🌟 迫力のサイズ */
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.4));
}


#player-ui.idle .volume-indicator-center.show,
.volume-indicator-center.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1);
}

#volume-icon {
    /* 🌟 サイズ：32px -> 40px にアップ */
    width: 40px !important;
    height: 40px !important;
    
    /* 他のアイコンと中心を合わせるための微調整 */
    display: block;
    object-fit: contain;
    transition: transform 0.2s ease;
}
.volume-control-wrapper .player-icon-btn {
    width: 56px !important;
    height: 56px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ホバー時のリアクションを少し強調 */
.volume-control-wrapper .player-icon-btn:hover #volume-icon {
    transform: scale(1.1);
}

.player-ui-overlay.is-loading {
    /* グラデーションも消して、背景画像だけが見えるようにする */
    background: none !important;
    pointer-events: none; /* クリックやマウスホイールを無効化 */
}

/* ロード中は戻るボタンと下部パネルを消去 */
.player-ui-overlay.is-loading .close-player-btn,
.player-ui-overlay.is-loading .player-bottom-panel {
    display: none !important;
}

/* スピナー（リング）は表示したままにする */
.player-loader {
    z-index: 100; /* UIよりさらに上に表示 */
}
.player-container.is-loading #big-icon-overlay,
.player-container.is-loading .big-icon-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
}

/* ロード中にUIのグラデーションやボタンも隠す（既存の修正を親クラスに変更） */
.player-container.is-loading .player-ui-overlay {
    background: none !important;
    pointer-events: none;
}

.player-container.is-loading .close-player-btn,
.player-container.is-loading .player-bottom-panel {
    display: none !important;
}

/* --- 設定メニューのスタイル --- */
#settings-menu {
    width: 260px;
    right: 20px;
    bottom: 80px;
    padding: 0 !important; 
    overflow: hidden !important;

    /* 🌟ここも背景を濃くする (0.4 -> 0.75) */
    background: rgba(0, 0, 0, 0.75) !important; 
    backdrop-filter: blur(40px) saturate(200%) brightness(0.9) !important; 
    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 24px !important;
}

.settings-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.settings-list li {
    padding: 14px 18px;
    cursor: pointer;
    display: flex;
    justify-content: flex-start; /* 🌟 space-betweenから変更：左寄せにする */
    align-items: center;
    gap: 6px; /* 🌟 テキストとの隙間を最小限に */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}
.settings-list li.active::before {
    content: '✓';
    color: #ffffff;
    font-weight: bold;
    margin-right: 2px;
}

.settings-list li:hover {
    background-color: rgba(255, 255, 255, 0.1); /* 白の半透明 */
}

.settings-list li.active {
    color: #ffffff; /* 🌟 緑色を廃止しピュアホワイトに */
    font-weight: bold;
}

.settings-value {
    font-size: 0.85em;
    color: #bbb;
    margin-left: auto; /* 🌟 これを入れると、値だけを右端にキープできます */
}

.settings-header {
    display: flex;
    align-items: center;
    padding: 15px 18px;
    background-color: rgba(255, 255, 255, 0.05); /* すりガラスの上に薄い白で区切る */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: bold;
}

.settings-back-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    margin-right: 15px;
    font-size: 1.2em;
    padding: 0;
    transition: color 0.2s ease;
}

.settings-back-btn:hover {
    color: #ccc; /* 🌟 緑色を廃止 */
}

#playback-stats-overlay {
    position: absolute;
    top: 90px; /* 🌟 戻るボタン(約70px)と被らないように下に移動 */
    left: 20px;
    
    /* 🌟 深層すりガラス仕様に統一 */
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(40px) saturate(200%) brightness(0.9) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(0.9) !important;
    
    color: #fff;
    padding: 20px; /* 少し余白を広げて見やすく */
    border-radius: 20px; /* 🌟 他のメニューに合わせて丸くする */
    font-family: 'Consolas', 'Monaco', monospace; /* エンジニア風フォント */
    font-size: 0.85rem;
    z-index: 1000;
    width: 320px;
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7) !important;
}

#playback-stats-overlay h4 {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 🌟 モノトーンの線に */
    font-size: 1rem;
    color: #fff;
    font-weight: bold;
}

#close-stats-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

#close-stats-btn:hover {
    color: #fff; /* 🌟 赤を廃止してピュアホワイトへ */
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px; /* 行間を少し広げて見やすく */
}

.stat-label {
    color: #aaa; /* グレーにしてメリハリを */
}

/* 🌟 値のテキストを右揃え＆白字で強調 */
.stat-row span:not(.stat-label) {
    color: #fff;
    font-weight: bold;
    text-align: right;
}

/* 再生情報パネル */
.player-stats-panel {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: #eee;
    padding: 15px;
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', monospace; /* エンジニアっぽいフォント */
    font-size: 13px;
    z-index: 1000;
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 5px;
    color: #00e5ff; /* 少しサイバーな色 */
    font-weight: bold;
}

.stats-table {
    border-collapse: collapse;
}

.stats-table th {
    text-align: left;
    padding-right: 15px;
    color: #aaa;
    font-weight: normal;
}

.stats-table td {
    text-align: right;
    color: #fff;
}

.stats-close-icon {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

.stats-close-icon:hover {
    color: #ff4444;
}


/* --- 字幕 2カラムメニュー専用スタイル --- */

.subtitle-dual-pane {
    width: 600px !important; /* 少し広げて余裕を持たせる */
    padding: 0 !important;
    
    /* 🌟 ここも深層すりガラスで上書き */
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(40px) saturate(200%) brightness(0.9) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.subtitle-pane-container {
    display: flex;
    height: 380px;
}

/* 左側：言語リスト */
.subtitle-pane-left {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

/* 中央：仕切り線 */
.subtitle-pane-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 20px 0;
}

/* 右側：詳細設定 */
.subtitle-pane-right {
    flex: 1.2;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.pane-title {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 20px;
    font-weight: bold;
}

/* スライダーの設定項目 */
.sub-setting-item {
    margin-bottom: 25px;
}

.sub-setting-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.val-num {
    color: #ffffff !important; /* 🌟 赤色を廃止 */
    font-weight: bold;
    background: rgba(255, 255, 255, 0.1); /* 数字の後ろに薄いグレーの座布団を敷いて視認性UP */
    padding: 2px 8px;
    border-radius: 6px;
}

/* モダンなスライダー */
.sub-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sub-hint {
    font-size: 0.8rem;
    color: #888;
}

input[type="range"]#sub-size-slider,
input[type="range"]#sub-pos-slider {
    flex: 1;
    height: 4px;
    cursor: pointer;
    accent-color: #ffffff; /* 🌟 スライダーのツマミもピュアホワイトに */
}

/* モダンなトグルスイッチ（モノトーン仕様） */
.modern-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

.modern-switch input { opacity: 0; width: 0; height: 0; }

.modern-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255,255,255,0.2); /* ダークグレーから半透明に */
    transition: .3s;
    border-radius: 24px;
}

.modern-switch input:checked + .modern-switch-slider {
    background-color: #ffffff; /* ONの時は白く光る */
}

.modern-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: #ccc;
    transition: .3s;
    border-radius: 50%;
}

.modern-switch input:checked + .modern-switch-slider:before {
    transform: translateX(22px);
    background-color: #000; /* ONの時の丸は黒に */
}

.flex-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub-setting-subtext {
    font-size: 0.8rem;
    color: #888;
    margin-top: 4px;
}




/* エピソードメニュー専用のスタイル例 */
#episode-menu {
    min-width: 280px;
    max-height: 400px; /* 長すぎる場合に備えて */
    display: flex;
    flex-direction: column;
}

.episode-menu-header {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 10px;
}

#player-season-selector {
    width: 100%;
    background: #333;
    color: white;
    border: 1px solid #444;
    padding: 5px;
    border-radius: 4px;
    outline: none;
}

#player-episode-list {
    overflow-y: auto;
    flex-grow: 1;
}

#player-episode-list li.active {
    color: #00a4dc; /* 再生中のエピソードをハイライト */
    background: rgba(0, 164, 220, 0.1);
}

/* エピソードリストのリッチデザイン */
.rich-episode-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.rich-episode-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background 0.2s ease;
}

.rich-episode-list li:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* サムネイル画像 */
.episode-thumbnail-container {
    flex-shrink: 0;
    width: 140px; /* 画像の幅 */
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background-color: #222;
    position: relative;
}

.episode-thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* テキスト情報 */
.episode-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.episode-title {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}

.episode-desc {
    font-size: 0.8rem;
    color: #aaa;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2行で省略 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}