/* =========================================
   details.css - 最終完成版
   ========================================= */

/* 詳細ページのコンテナ全体 */
#details-view {
    background-color: #050505;
    color: #ffffff;
    min-height: 100vh;
    padding-bottom: 0;
    overflow: visible;
}

/* --- ヒーローセクション --- */
.details-hero {
    position: relative;
    width: 100%;
    height: 95vh;
    display: flex;
    align-items: flex-end;
    padding: 0 2.5% 30px;
    box-sizing: border-box;
    background-color: #050505;
    
    /* ★追加：1枚目の画像をベースにセット */
    background-image: var(--bg-image);
    background-size: cover; 
    background-position: center top; 
    background-repeat: no-repeat;
    transition: background-image 1.5s ease-in-out;
}

/* 背景画像専用レイヤー */
.details-hero::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 100vw; 
    height: 100%;
    
    /* ★修正：--bg-image を --bg-image-next に変更し、初期状態を透明(0)にする */
    background-image: var(--bg-image-next); 
    background-size: cover; 
    background-position: center top; 
    background-repeat: no-repeat;
    z-index: 1; 
    border-top-left-radius: 16px; 
    
    opacity: 0; 
    transition: opacity 2s ease-in-out;
    pointer-events: none;
}
.details-hero.bg-swap::after {
    opacity: 1;
}

/* ウルトラワイドモニター（21:9）向けの背景画像制限 */
@media (min-aspect-ratio: 21/9), (min-width: 2000px) {
    .details-hero::after {
        width: 85vw; /* 画像は85%に抑える */
    }
}

/* グラデーションレイヤー（Prime Video風） */
.details-hero::before {
    content: ''; 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, 
                    rgba(5,5,5,1) 0%, 
                    rgba(5,5,5,1) 15%, 
                    rgba(5,5,5,0.8) 30%, 
                    rgba(5,5,5,0.4) 45%, 
                    rgba(5,5,5,0) 70%
                ),
                linear-gradient(to top, rgba(5,5,5,1) 0%, rgba(5,5,5,0.7) 10%, transparent 30%);
    z-index: 2;
   transition: opacity 0.8s ease-in-out, transform 0.6s ease;
}

/* ウルトラワイド用のグラデーション調整（境界線を隠す） */
@media (min-aspect-ratio: 21/9), (min-width: 2000px) {
    .details-hero::before {
        background: linear-gradient(to right, 
                        rgba(5,5,5,1) 0%, 
                        rgba(5,5,5,1) 15vw, 
                        rgba(5,5,5,1) 20vw, 
                        rgba(5,5,5,0.8) 35vw, 
                        rgba(5,5,5,0) 65vw
                    ),
                    linear-gradient(to top, rgba(5,5,5,1) 0%, rgba(5,5,5,0.7) 10%, transparent 30%);
    }
}

/* --- 予告動画コンテナ (常に100vw) --- */
#details-trailer-container {
    position: absolute;
    top: 0; left: 0;
    width: 100vw !important;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease;
    overflow: hidden;
    pointer-events: none;
}

/* ★修正：YouTube iframeを「横幅ピッタリ」にする計算式 */
#details-trailer-container iframe {
    position: absolute;
    /* 横幅は常に画面いっぱい */
    width: 100vw !important;
    /* 16:9比率を維持した高さ (100 * 9 / 16) */
    height: 56.25vw !important; 
    
    /* 上下中央に配置して、はみ出た分を均等にカット */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* 隙間を作らないための保険 */
    min-width: 100% !important;
    min-height: 100% !important;
    
    border: none;
    object-fit: cover;
}

/* 動画再生中の表示切り替え */
.is-playing-video #details-trailer-container {
    opacity: 1;
    visibility: visible;
}
.is-playing-video.details-hero::after {
    opacity: 0;
}

/* --- UI要素の共通フェード設定 --- */
.info-col-main, 
.info-col-synopsis, 
.tabs-header, 
.details-mute-btn {
    transition: opacity 1.0s ease, visibility 1.0s ease;
    will-change: opacity;
}

/* 各UI要素の配置（z-indexをグラデーションより上に設定） */
.info-col-main { position: relative; z-index: 3; width: 20vw; min-width: 420px; margin-right: 50px; }
.info-col-synopsis { position: relative; z-index: 3; flex: 1; margin-right: 30vw; }

/* ロゴ */
.details-logo {
    height: 20vh; width: auto; max-width: 25vw; max-height: 30vh;
    margin-bottom: 25px; object-fit: contain;
    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.7));
}
/* サブアクション（予告編等） */
.details-sub-actions {
    display: flex; gap: 15px; align-items: center; margin-bottom: 15px;
    position: relative; z-index: 4;
}
.details-sub-btn {
    background: none; border: none; padding: 0; color: #bcbcbc; cursor: pointer;
    display: flex; align-items: center; gap: 6px; transition: color 0.2s, transform 0.2s;
}
.details-sub-btn:hover { color: white; transform: translateY(-2px); }
.details-trailer-btn { font-size: 1.1rem; font-weight: bold; }
.details-icon-btn { padding: 4px; }

/* メインアクション（再生等） */
.details-actions-row { 
    display: flex; gap: 15px; width: 100%; margin-bottom: 0; 
    position: relative; z-index: 4;
}
.details-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; 
    font-size: 1.3rem; font-weight: bold; border-radius: 12px; border: none; cursor: pointer; transition: 0.2s;
}
.details-btn:hover { transform: scale(1.03); }

/* 再生ボタン（白） */
.details-play-btn { background-color: white; color: black; padding: 12px 24px; flex: 1; }
.details-play-btn:hover { background-color: #e6e6e6; }

/* お気に入りボタン（透過グレー） */
.details-main-fav-btn { 
    background-color: rgba(60, 60, 60, 0.8); color: white; padding: 12px; 
    aspect-ratio: 1 / 1; width: 52px; height: 52px;
}
.details-main-fav-btn:hover { background-color: rgba(90, 90, 90, 0.9); }
.details-main-fav-btn.is-favorite {
    background-color: rgba(255, 255, 255, 0.15); /* 少し白っぽくして目立たせる */
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

/* 登録済みのボタンにホバーした時は、背景を真っ白にしてアイコンを黒くする */
.details-main-fav-btn.is-favorite:hover {
    background-color: #ffffff;
    color: #000000;
}

/* アイドル時（シネマティックモード）でも、お気に入りボタンのアニメーションを滑らかに保つ */
.details-main-fav-btn {
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.2s, 
                color 0.2s, 
                border 0.2s !important;
}
/* ミュートボタン */

.is-playing-video .details-mute-btn {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* --- その他の既存スタイル (タグ、タブ、グリッドなど) --- */
.details-tags-container { display: flex; flex-direction: column; gap: 12px; margin-top: 25px; }
.tag-group { display: flex; align-items: flex-start; gap: 10px; }
.tags-wrapper { display: flex; flex-wrap: wrap; gap: 10px; } /* 追加: タグ自体はこの中で折り返す */
.tag-label { color: #999; font-size: 0.95rem; font-weight: bold; min-width: 70px; margin-right: 4px; margin-top: 6px; }
.detail-tag {
    display: inline-flex; align-items: center; padding: 6px 14px;
    background-color: rgba(30, 30, 30, 0.6); color: #e5e5e5; font-size: 0.9rem;
    border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.15);
}





.tabs-header {
    position: relative !important;
    z-index: 1;
    background-color: transparent;
    transition: none;
    
    /* ★以下の4行を追加・修正（左右の余白を他のコンテンツと揃え、高さを太くする） */
    padding: 0 2.5%; 
    height: 64px; /* Prime Videoに近い高さ（必要に応じて数値は微調整してください） */
    display: flex;
    box-sizing: border-box;
}

/* 新しく追加：Prime Videoの btf-sticky-nav に相当する「合体専用」のクローン */
.tabs-header.tabs-header-clone {
    position: fixed !important;
    top: var(--navbar-height, 70px) !important;
    left: 0;
    width: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: var(--merge-color, #000) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: opacity 0.05s ease, visibility 0.05s ease;
    
    /* ★クローン側にも元のタブと全く同じ余白と高さを追加 */
    padding: 0 2.5%;
    height: 64px;
    display: flex;
    box-sizing: border-box;
}

/* スクロールして閾値を越えたら出現させる */
.tabs-header.tabs-header-clone.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* ボタンを押せるようにする */
}













.tab-button { 
    background: none; 
    border: none; 
    color: #666; 
    font-size: 1.1rem; 
    font-weight: 700; 
    height: 100%; 
    cursor: pointer; 
    transition: color 0.3s; /* 文字色の変化 */
    
    /* ★追加：下線(::after)の位置の基準にするため必須 */
    position: relative; 
    padding: 0 20px;
}
.tab-button:hover, .tab-button.active { color: #fff; }

.tab-button::after {
    content: '';
    position: absolute;
    bottom: 8px; /* タブの下端からの位置。必要に応じて数値を調整してください */
    left: 0;
    width: 100%;
    height: 3px; /* 線の太さ */
    background-color: #ffffff; /* 線の色 */
    border-radius: 2px; /* 線の両端を少し丸くする */
    
    /* ★重要：最初は線を0倍にして隠し、中央から伸びる設定にする */
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* 滑らかなアニメーション */
}

/* ★追加：アクティブなタブ（またはホバー時）は線を1倍にして表示する */
.tab-button.active::after,
.tab-button:hover::after {
    transform: scaleX(1);
}

.content-sections { 
    padding: 0 0 100px; 
}

/* ★修正：外枠の右パディングを 0 にして、スライダーを画面端まで貫通させる */
.section-block {
    padding-left: 2.5% !important;
    padding-right: 0 !important; /* 7枚目を出すために必須の設定 */
    padding-top: 40px;
    margin-bottom: 80px;
    box-sizing: border-box;
}

/* リスト形式のエピソードは右端に余白が必要なので、個別に設定 */
#episodes-list-container {
    padding-right: 2.5% !important;
}

/* --- 関連コンテンツ・エピソード（スライダー）専用設定 --- */
#related-section,
.episode-slider-wrapper {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 !important;
    overflow: visible !important;
}
.episode-slider-wrapper {
    padding-top: 20px !important;
    padding-bottom: 10px !important;
}

/* タイトルをホーム画面と同じ位置（左から2.5%）に合わせる */
#related-section .section-title,
.episode-slider-wrapper h3 {
    margin-left: 2.5% !important;
}

/* 2. スライダー本体の余白設定（ホーム画面と完全一致） */
.resume-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow: visible !important; 
    gap: var(--card-gap, 10px);
    /* スライダー内部に左右2.5%のパディングを作る。これがチラ見せの絶対条件 */
    padding: 10px 2.5% 40px 2.5% !important;
    width: 100%;
}

/* スライダーの終端にホームと同じ「壁（スペーサー）」を追加 */
.resume-grid::after {
    content: "";
    display: block;
    flex: 0 0 2.5% !important;
    width: 2.5% !important;
    min-width: 2.5% !important;
    margin-left: calc(-1 * var(--card-gap, 10px));
    height: 1px;
    pointer-events: none;
}

/* カード幅の計算：ホーム画面の変数をそのまま適用 */
.resume-grid .movie-card-wrapper {
    /* 画面幅(100vw) - 左右のパディング(5vw) - 隙間の合計 を表示枚数で割る */
    flex: 0 0 calc((100vw - 5vw - (var(--card-gap, 10px) * (var(--display-cards, 6) - 1))) / var(--display-cards, 6)) !important;
    width: calc((100vw - 5vw - (var(--card-gap, 10px) * (var(--display-cards, 6) - 1))) / var(--display-cards, 6)) !important;
    aspect-ratio: 16 / 9 !important;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

/* ハンドル（矢印）の高さを 16:9 画像に同期 */
#related-section .handle,
.episode-slider-wrapper .handle {
    height: calc((100vw / var(--display-cards)) * 9 / 16 + 20px);
    top: 10px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    z-index: 20000;
}
#related-section .handle-right,
.episode-slider-wrapper .handle-right {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}






/* アイドル時にこのセクション自体を隠さないようにする設定（もし必要なら） */
#details-view.is-video-idle #related-section {
    opacity: 1;
}



/* --- UI要素のベース設定（アニメーションの土台） --- */
.info-col-main, 
.info-col-synopsis, 
.tabs-header, 
.details-mute-btn,
.details-hero::before,
.hero-gradient-idle-layer,
.details-sub-actions,
.details-main-fav-btn,
.details-tags-container,
.details-play-btn,
.details-resume-bar-root {
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0s, 
                opacity 0.3s ease-out 0s,
                visibility 0.3s 0s; 
    will-change: transform, opacity;
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

/* --- ★追加：ロゴ専用のベース設定（元に戻る時の動き） --- */
.details-logo {
    /* 戻る時のアニメーション速度（大きさと位置が滑らかに戻るように調整） */
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0s, 
                opacity 0.6s ease-out 0s; 
    will-change: transform, opacity;
    
    /* 通常時の位置とサイズ */
    transform: translateY(0) scale(1);
    
    /* ★超重要：戻る時も「左下基準」に固定することでカクつきを完全になくす */
    transform-origin: left bottom; 
    
    opacity: 1;
    visibility: visible;
}

/* ... (グラデーション構成は変更なし) ... */

/* =========================================
   シネマティックモード (マウスアイドル時) 
   ========================================= */

/* --- 1. 深く沈んで消える要素（★ロゴをここから削除） --- */
#details-view.is-video-idle .details-sub-actions,
#details-view.is-video-idle .details-main-fav-btn,
#details-view.is-video-idle .details-tags-container,
#details-view.is-video-idle .info-col-synopsis,
#details-view.is-video-idle .details-resume-bar-root {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0s, 
                opacity 0.4s ease-in 0.3s,
                visibility 0s 0.7s;
    opacity: 0;
    visibility: hidden;
    transform: translateY(120px); 
    pointer-events: none;
}
#details-view.is-video-idle .tabs-header {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important; /* 下に沈ませない */
    pointer-events: auto !important;     /* タブの切り替えも可能にする */
    transition: transform 0.6s ease;
}

/* --- ★追加：ロゴは消さず、小さくして沈ませる --- */
#details-view.is-video-idle .details-logo {
     /* 少し薄くする */
    visibility: visible;
    /* 下降(120px)と縮小(0.8倍)を組み合わせる */
    transform: translateY(140px) scale(0.9) !important;
    transform-origin: left bottom; /* 左下を基準に縮小 */
    pointer-events: none;
    /* ロゴ専用の時間差なしのアニメーション */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0s, 
                opacity 0.8s 0s;
}

/* ... (グラデーションの入れ替えは変更なし) ... */

/* --- 2. 表示し続ける要素 --- */

/* 再生ボタン：★ tag-group があった位置（約100px下）へドッキング */
#details-view.is-video-idle .details-play-btn {
    opacity: 1 !important;
    visibility: visible !important;
    /* ★修正：位置調整。タグと同じ高さになるように 100px に設定 */
    transform: translateY(100px) !important;
    z-index: 1001;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}



/* ... (ナビゲーションバーと動画コンテナは変更なし) ... */

/* 4. ナビゲーションバー（維持） */
#details-view.is-video-idle .nav, 
#details-view.is-video-idle header {
    opacity: 1 !important;
    z-index: 1100;
}

/* 5. 動画コンテナ */
#details-view.is-video-idle #details-trailer-container {
    z-index: 1; 
}

.info-col-synopsis {
    /* 1. 滑らかさを生むイージングに変更 (少し速めてキレを出す) */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease;
    
    /* 2. 計算を安定させるために行高を px で固定 */
    line-height: 28px; 
    max-height: 84px; /* 28px * 3行 = 84px */
    
    /* 3. ブラウザにアニメーションの準備をさせ、ガタつきを抑える */
    will-change: max-height; 
    
    overflow: hidden;
    position: relative;
    cursor: pointer;
    display: block;
    
    /* 文字のレンダリングを安定させる */
    -webkit-font-smoothing: antialiased;
}

/* 文字の太さと色を Prime Video風に強調 */
.hero-overview {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #ebebeb !important;
    line-height: 28px !important;
}

/* ★追加：Jellyfinが自動出力する<p>タグ等の余白を消去 */
/* これがないと、見えない余白に文字が下に押し出されて3行目が切れます */
.info-col-synopsis p,
.info-col-synopsis span {
    margin: 0 !important;
    padding: 0 !important;
}

/* ホバー時に少し明るくする */
.info-col-synopsis:hover {
    opacity: 0.8;
}

/* --- ★Prime Videoの肝：グラデーション付きの「...」オーバーレイ --- */
.info-col-synopsis::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    
    /* 1. 幅を広め(6em)にして、変化を非常に緩やかにする */
    width: 6em; 
    /* 2. 高さを line-height (28px) と厳密に一致させて段差をなくす */
    height: 28px; 
    
    /* 3. 多段階グラデーション：
       0%から30%付近までをほぼ透明に保つことで、左側の「角」を物理的に消します */
    background: linear-gradient(
        to right, 
        rgba(5, 5, 5, 0) 0%,      /* 開始点：完全透明 */
        rgba(5, 5, 5, 0.05) 20%,  /* 20%地点：まだほぼ透明（境界線をぼかす） */
        rgba(5, 5, 5, 0.4) 50%,   /* 50%地点：半分くらい文字を隠す */
        rgba(5, 5, 5, 0.9) 80%,   /* 80%地点：ほぼ背景色 */
        rgba(5, 5, 5, 1) 95%,     /* 95%地点：完全に背景色と同化 */
        rgba(5, 5, 5, 1) 100%
    );
    
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 4px; /* 「...」の位置調整 */
    pointer-events: none; /* 背後の文字のクリックを邪魔しない */
}

/* 展開された時はオーバーレイの「...」を消す */
.info-col-synopsis.is-expanded::after {
    display: none;
}



/* --- 動画コンテナのフェードアウト用クラス --- */
#details-trailer-container {
    /* 既存の設定はそのまま残す */
    transition: opacity 1s ease; /* 1秒かけて透明になる */
}

/* ★追加：動画が終わった時にJSから付与されるクラス */
#details-trailer-container.is-hidden {
    opacity: 0 !important;
    pointer-events: none; /* クリック判定も消す */
}

.info-col-synopsis.is-short::after {
    display: none;
}


.details-mute-btn {
    position: absolute;
    top: 15%;
    right: 2.5%;
    z-index: 100;
    
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    
    /* ★修正：初期状態を「非表示」にする（opacityでアニメーションさせます） */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.3s ease, background 0.3s ease;
}
/* マウスホバー時のエフェクト */
.details-mute-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}
#details-view.is-video-idle .is-playing-video .details-mute-btn {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ★追加：アイドル時（UI非表示状態）でもミュートボタンだけは消さずに固定する */
#details-view.is-video-idle .details-mute-btn {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* クリックも引き続き可能にする */
}
#details-view.is-video-idle .hero-gradient-idle-layer {
    opacity: 1 !important;
    display: block !important;
}

/* ヒーローセクション（親要素）の黒い影や背景塗りつぶしをすべて無効化する */
#details-view.is-video-idle .details-hero {
    box-shadow: none !important;
    background-color: transparent !important;
}

/* もし左側や下部に別の擬似要素(::beforeなど)で影を作っていた場合、それも消す */
#details-view.is-video-idle .details-hero::before {
    opacity: 0 !important;
    visibility: visible !important; /* display:noneにならないようにする */
}
#details-view.is-video-idle .hero-gradient-idle-layer {
    /* 画面下部（0%）は背景色（#050505）、少し上（25%）で完全に透明になる設定 */
    background: linear-gradient(to top, #050505 0%, rgba(5, 5, 5, 0) 25%) !important;
}

/* 念のため、親要素(.details-hero)に影(box-shadow)でグラデーションをつけていた場合はそれも消す */
#details-view.is-video-idle .details-hero {
    box-shadow: none !important;
    background-color: transparent !important;
}

.hero-gradient-idle-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 下から上へのグラデーションをここで担当 */
    background: linear-gradient(to top, rgba(5,5,5,1) 0%, rgba(5,5,5,0.7) 10%, transparent 30%);
    z-index: 2;
    pointer-events: none;
    /* ここは transition を書かない（消さないため） */
}

/* =========================================
   TVシリーズ用 シーズン選択UI
   ========================================= */

/* TVシリーズの場合、タイトルやあらすじ全体を上に押し上げる */
.details-hero.is-series {
    padding-bottom: 80px; /* 通常の30pxから増やして隙間を作る */
}

/* シーズンUIのコンテナ（左下に固定） */
.season-selector-wrapper {
    position: absolute;
    bottom: 20px; 
    left: 2.5%;
    z-index: 10;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}

/* 1シーズンの時のラベル */
.season-single-label {
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}

/* 複数シーズンの時のドロップダウンボタン (Prime Video風) */
.season-dropdown {
    background-color: rgba(60, 60, 60, 0.8); /* マイリストボタンと色を合わせる */
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px 40px 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 13px;
    appearance: none; /* デフォルトの矢印を消す */
    cursor: pointer;
    /* 右側に下向き矢印のアイコンを描画 */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\"%3E%3Cpath d=\"M7 10l5 5 5-5z\"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    backdrop-filter: blur(5px); /* すりガラス効果 */
    transition: 0.2s;
}

.season-dropdown:hover {
    background-color: rgba(90, 90, 90, 0.9);
}

.season-dropdown:focus {
    outline: none;
    border-color: white;
}

/* 開いたときの選択肢の背景 */
.season-dropdown option {
    background-color: #222;
    color: white;
}

/* アイドル時（UIが消える時）はシーズンボタンも一緒に沈んで消える */
#details-view.is-video-idle .season-selector-wrapper {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(120px);
    pointer-events: none;
}


/* =========================================
   エピソード一覧 (基本は16:9向けの縦並びリスト)
   ========================================= */
.episodes-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.episode-card {
    display: flex;
    height: 26vh; 
    
    background: transparent;
    /* ③ border-radiusを24pxに変更 */
    border-radius: 24px; 
    overflow: hidden;
    cursor: pointer;
    
    /* ② 枠線をなくす (noneに上書き、もしくは行ごと削除) */
    border: none; 
    
    /* ① topとbottomに1emのpaddingを追加 (左右は0にしています) */
    padding: 1em 1.5em;
    
    transition: transform 0.2s, background 0.2s;
}

.episode-card:hover {
    background: rgba(40, 40, 40, 0.9);
    transform: scale(1.01);
}

.episode-img-wrapper {
    position: relative;
    height: 100%;
    width: auto;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    background: #000;
    
    /* ④ 画像自体にも角丸を追加し、はみ出しを防ぐ */
    border-radius: 16px; 
    overflow: hidden;
    
    /* ※もし画像が左の壁にくっつくのが気になる場合は、
       上の .episode-card の padding を `padding: 1em;`（全方向に余白）にすると綺麗になります */
}

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

.episode-play-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.episode-card:hover .episode-play-overlay {
    opacity: 1;
}

.episode-play-overlay svg {
    padding: 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    color: white;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s ease, background 0.2s ease;
}

/* ホバーした時にサークルを強調する演出 */
.episode-card:hover .episode-play-overlay svg {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.82);
}

.episode-info {
    padding: 15px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.episode-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 0 8px 0;
}

.episode-overview {
    font-size: 0.95rem;
    color: #bbb;
    margin: 0;
    line-height: 1.5;
    /* 長いあらすじは3行で「...」にする */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   ウルトラワイド(21:9)向け グリッドレイアウト
   ========================================= */
@media (min-aspect-ratio: 21/9), (min-width: 2000px) {
    .episodes-layout {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 1列に4つ配置 */
        gap: 20px;
    }
    
    .episode-card {
        flex-direction: column; /* 画像とテキストを縦並びに変更 */
        height: auto;
        padding: 0 0 1em 0;
    }
    
    .episode-card:hover {
        transform: scale(1.03); /* グリッドの時は少し大きめに拡大 */
    }

    .episode-img-wrapper {
        width: 100%; 
        height: auto;
    }
    
    .episode-info {
        padding: 12px 15px;
        justify-content: flex-start;
    }
}



/* 詳細セクション全体の2カラムレイアウト */
.details-extended-layout {
    display: flex;
    gap: 5%;
    align-items: flex-start;
    margin-top: 20px;
}

/* 左カラム：情報エリア (全体の40%を使用) */
.details-info-column {
    flex: 0 0 40%;
}

/* 右カラム：キャストエリア (残りのスペースを使用) */
.details-cast-column {
    flex: 1;
}

/* 各項目の見出し */
.details-heading {
    font-size: 1.2rem;
    color: #fff;
    margin: 0 0 15px 0;
    font-weight: bold;
    border-left: 3px solid #fff;
    padding-left: 10px;
}

/* あらすじ（全行） */
.details-full-overview {
    font-size: 1rem;
    line-height: 1.6;
    color: #ddd;
    margin-bottom: 30px;
}

/* 作品データ・言語の表組み */
.details-meta-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.meta-group {
    display: flex;
    align-items: baseline;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}
.meta-label {
    flex: 0 0 100px; /* ラベルの幅を固定 */
    color: #888;
    font-size: 0.95rem;
}
.meta-value {
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* キャストのグリッド配置 */
.cast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
}
.cast-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cast-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 丸く切り抜く */
    object-fit: cover;
    background-color: #222;
    margin-bottom: 10px;
    border: 2px solid transparent;
    transition: border 0.2s;
}
.cast-card:hover .cast-photo {
    border: 2px solid #fff; /* ホバーで枠線を出す */
}
.cast-name {
    font-size: 0.9rem;
    color: #fff;
    font-weight: bold;
    margin-bottom: 4px;
}
.cast-role {
    font-size: 0.8rem;
    color: #888;
}

/* ウルトラワイドモニターなどのレスポンシブ対応 */
@media (max-width: 1000px) {
    .details-extended-layout {
        flex-direction: column; /* 画面が狭い場合は縦並びに変更 */
        gap: 40px;
    }
    .details-info-column, .details-cast-column {
        flex: 1 1 auto;
        width: 100%;
    }
}


/* ====== 既存のコードに追加 ====== */

/* 1. フォーカスされた時、ラッパーごと最前面（合体タブよりも上）に持ってくる */
.season-selector-wrapper.is-active {
    z-index: 10000;
}

/* 2. 画面全体を暗くするオーバーレイ（初期状態は透明でクリック不可） */
.season-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75); /* 0.75でPrime Videoのようなリッチな暗さに */
    z-index: -1; /* ラッパー内では一番下（セレクトボックスの真裏）に配置 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none; 
}

/* 3. アクティブ時にオーバーレイを表示し、周りのクリックを吸収させる */
.season-selector-wrapper.is-active .season-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; 
}


/* カスタムドロップダウンの枠 */
.custom-select-container {
    position: relative;
    display: inline-block;
}

/* ボタン部分（Flexboxを使って文字とアイコンを両端に配置） */
.season-dropdown.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    background-image: none !important;

    /* ★修正：右のパディングを 10px 程度まで小さくして、矢印を右に逃がす */
    padding-right: 10px !important;
    padding-left: 15px; /* 左側は文字があるので少し余裕を持たせる */

    /* ★追加：ボタン自体の幅が狭すぎると矢印が動けないので、最低幅を少し広げる */
    min-width: 140px; 
}
.season-dropdown.custom-select-trigger .material-symbols-outlined {
    margin: 0;
    display: flex;
    align-items: center;
}
.season-dropdown.custom-select-trigger::after,
.season-dropdown.custom-select-trigger::before {
    content: none !important;
    display: none !important;
}

/* 展開されるメニューのリスト（ボタンに覆いかぶさるように配置） */
.custom-select-list {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    min-width: 160px;
    background-color: #111111; /* ★変更：Prime Videoのブルーから、暗いグレー（ほぼ黒）に変更 */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
    list-style: none;
    padding: 8px 0;
    margin: 0;
    z-index: 10001; 
    
    opacity: 0;
    visibility: hidden;
    transform: scaleY(0.9);
    transform-origin: top;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;

    max-height: 430px; 
    overflow-y: auto;  
    scrollbar-width: thin; 
}

/* ラッパーが is-active になったらメニューを表示 */
.season-selector-wrapper.is-active .custom-select-list {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
}

/* メニューの各選択肢 */
.custom-dropdown-item {
    padding: 12px 16px;
    color: #f1f5f9;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

/* ★ホバー時：背景を白、文字を黒にして目立たせる */
.custom-dropdown-item:hover {
    background-color: #ffffff;
    color: #000000;
}

/* 現在選択されているシーズンのデザイン */
.custom-dropdown-item.selected {
    color: #f1f5f9; /* ★変更：青色をやめ、他の文字と同じ色にする */
    background-color: #333333; /* ★追加：背景を少し灰色にして選択中であることを示す */
}

/* 選択済みのものをホバーした時も白黒にする */
.custom-dropdown-item.selected:hover {
    background-color: #ffffff;
    color: #000000;
}

/* WebKit系（Chrome, Safari, Edge）のカスタムスクロールバー */
.custom-select-list::-webkit-scrollbar {
    width: 6px; /* スクロールバーをスマートな細さに */
}

/* スクロールバーの背景（トラック） */
.custom-select-list::-webkit-scrollbar-track {
    background: transparent; /* 背景に馴染ませる */
    border-radius: 4px;
}

/* スクロールバーの動く部分（つまみ） */
.custom-select-list::-webkit-scrollbar-thumb {
    background: #555; /* 目立ちすぎないグレー */
    border-radius: 4px;
}

/* つまみをホバーした時 */
.custom-select-list::-webkit-scrollbar-thumb:hover {
    background: #888; /* 少し明るくして操作できることを伝える */
}


/* アイドル状態（UI非表示時）はクローンも強制的に隠す */
/* bodyのクラス名は、現在お使いの「隠す用クラス」に合わせて調整してください */
body.nav-hidden .tabs-header-clone,
body.is-idle .tabs-header-clone {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-100%) !important; /* 上に追い出す */
    transition: all 0.4s ease !important;
}

/* クローンが元のヘッダーより上にズレて表示されるのを防ぐ固定設定 */
.tabs-header-clone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* z-indexをメインナビ(100)より少し低い98等に調整すると、より自然です */
    z-index: 98; 
    pointer-events: none;
}

/* 表示されている時だけクリックを有効にする */
.tabs-header-clone.is-visible {
    pointer-events: auto;
}

#details-view.is-video-idle .tabs-header-clone {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-100%) !important; /* 上に隠す */
    transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.details-play-btn.search-request-btn {
    background-color: #6c5ce7 !important; /* 指定の紫色 */
    color: #ffffff !important;           /* 文字色を白に固定 */
    width: auto;
    padding: 12px 40px;
    min-width: 250px;
    border: none;
    transition: background-color 0.2s, 
                transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
}

/* ホバー時の演出（少し明るくする） */
.details-play-btn.search-request-btn:hover:not(:disabled) {
    background-color: #a29bfe !important; 
    color: #ffffff !important;
    transform: scale(1.03) !important; /* 他のボタンと拡大率も合わせるなら1.03 */
}

/* リクエスト済み（無効化）の状態 */
.details-play-btn.search-request-btn.requested-btn {
    background-color: rgba(108, 92, 231, 0.3) !important; 
    color: rgba(255, 255, 255, 0.5) !important;           
    border: 1px solid rgba(108, 92, 231, 0.5);
    cursor: not-allowed;
    
    /* ★修正：アイドル解除時も滑らかに元の場所へ戻るようにする */
    transform: translateY(0); 
}

.episode-watched-badge {
    position: absolute;
    top: 10px; /* 少し内側に配置 */
    right: 10px; /* 少し内側に配置 */
    background-color: rgba(0, 0, 0, 0.75); /* 背景を少し濃くして視認性を確保 */
    color: #ffffff; /* アイコンは白 */
    border-radius: 50%; /* 🌟 完全な丸にする */
    /* padding を削除し、width と height でサイズを固定します */
    width: 36px; /* 🌟 バッジ全体のサイズを大きく */
    height: 36px; /* 🌟 バッジ全体のサイズを大きく */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    backdrop-filter: blur(4px); /* 背景ぼかしは維持 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 🌟 少し影をつけて立体感を出す */
}

.episode-watched-badge .material-symbols-outlined {
    font-size: 24px; /* 🌟 アイコン自体も大きく */
    font-weight: bold;
}











/* --- 詳細画面専用：ホーム画面と同じデザインの進捗バー --- */
.details-resume-bar-root {
    display: block !important;
    position: relative !important;
    /* 🌟 幅は再生ボタンと同期させる計算式のまま */
    width: calc(100% - 67px) !important;
    
    margin-left: 0 !important;
    margin-right: auto !important;
    padding: 0 !important; 
    
    /* 🌟 予告編ボタンとの間隔 */
    margin-top: 25px !important;  
    margin-bottom: 12px !important; 
    
    height: 8px; /* 8pxに変更 */
    clear: both;
    z-index: 10;
}

/* 背景のグレー部分（すりガラス効果あり） */
.details-resume-bar-track {
    width: 100%;
    height: 100%;
    background-color: rgba(95, 95, 95, 0.8) !important; /* ホームと同じ半透明黒 */
    backdrop-filter: blur(4px); /* すりガラス効果 */
    border-radius: 10px; /* 両端を丸く */
    overflow: hidden;
}

/* 白い進捗部分 */
.details-resume-bar-fill {
    height: 100%;
    background-color: #ffffff !important; /* 赤から白に変更 */
    border-radius: 10px;
    transition: width 0.3s ease; /* ホームと同じ速度 */
}