/* GPT-SoVITS 場景播放器共用樣式
   同時被 inference_webui.py（Gradio 內嵌預覽）與 player_server.py（獨立分享連結頁）載入，
   不要在兩邊各自複製一份，改這裡兩邊自動生效。

   控制列採 YT 風格 overlay：進度條+按鈕蓋在影片區域下緣，平常隱藏，
   滑鼠移入影片區或暫停中才顯示（.vp-wrap:hover / .vp-wrap.vp-paused），
   影片下方不再佔一條固定高度，說明區可以更大。 */

.vp-wrap{position:relative;width:100%;max-width:640px;background:#000;border-radius:8px;overflow:hidden;}
.vp-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;cursor:default;background:#111;}
.vp-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity;-webkit-user-drag:none;user-select:none;}
.vp-subtitle{position:absolute;left:0;right:0;bottom:12%;display:none;flex-direction:column;align-items:center;gap:4px;padding:0 16px;pointer-events:none;}
/* 字幕底：不是一塊背景色塊，而是文字本身的黑色陰影/描邊（像字的黑影貼在畫面上），
   用多方向 text-shadow 疊出粗黑輪廓，不佔額外背景區域，文字本身也加大加粗更醒目。 */
.vp-subtitle-line{display:inline-block;max-width:92%;padding:0;background:none;color:var(--vp-sub-color,#fff);font-size:calc(var(--vp-sub-size,18px) * 1.35);font-family:var(--vp-sub-font,inherit);font-weight:900;white-space:pre-wrap;text-align:center;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
    0 4px 8px rgba(0,0,0,.85);
}
.vp-center-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;cursor:pointer;}

/* overlay 容器：蓋在影片下緣，漸層打底讓白色控制項在亮圖上也看得清 */
.vp-overlay{position:absolute;left:0;right:0;bottom:0;z-index:5;opacity:0;pointer-events:none;transition:opacity .2s;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));padding-top:24px;}
.vp-wrap:hover .vp-overlay,.vp-wrap.vp-paused .vp-overlay{opacity:1;pointer-events:auto;}
.vp-progress{position:relative;width:100%;height:12px;display:flex;align-items:center;cursor:pointer;padding:0 2px;box-sizing:border-box;}
.vp-progress::before{content:'';position:absolute;left:2px;right:2px;height:3px;border-radius:2px;background:rgba(255,255,255,.32);}
.vp-progress-fill{position:absolute;left:2px;height:3px;border-radius:2px;background:#e33;pointer-events:none;}
.vp-progress-handle{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:#e33;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .15s;}
.vp-progress:hover .vp-progress-handle{opacity:1;}
.vp-controls{display:flex;align-items:center;gap:6px;padding:2px 8px 6px;background:none;}
.vp-btn{background:none;border:none;padding:4px 6px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;}
.vp-btn:hover{background:rgba(255,255,255,.18);}
.vp-time{color:#eee;font-size:12px;min-width:92px;}
.vp-spacer{flex:1;}
.vp-vol-slider{width:48px;height:3px;cursor:pointer;accent-color:#e33;}
.vp-icon{display:inline-block;width:14px;height:14px;position:relative;box-sizing:border-box;}
.vp-icon-play{width:0 !important;height:0 !important;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid #fff;background:none;}
/* 以下 icon 規則原檔尾截斷遺失，重建版本（樣式為合理推測，非原始內容） */
.vp-icon-pause{width:10px;height:14px;}
.vp-icon-pause::before,.vp-icon-pause::after{content:'';position:absolute;top:0;bottom:0;width:3px;border-radius:1px;background:#fff;}
.vp-icon-pause::before{left:1px;}
.vp-icon-pause::after{right:1px;}
.vp-icon-fs{border:2px solid #fff;border-radius:2px;}
.vp-btn:hover .vp-icon-fs{width:15px;height:15px;}

/* 圖片右鍵自訂多功能選單（取代瀏覽器內建「另存圖片」），見 player.js openCtxMenu */
.vp-ctxmenu{position:fixed;background:#1f1f1f;border:1px solid #333;border-radius:6px;padding:4px 0;min-width:200px;z-index:1000;box-shadow:0 4px 16px rgba(0,0,0,.5);font-size:13px;color:#eee;font-family:inherit;}
.vp-ctxmenu-item{padding:8px 14px;cursor:pointer;white-space:nowrap;}
.vp-ctxmenu-item:hover{background:rgba(255,255,255,.12);}

/* 18+ 內容警告角標：常駐顯示在畫面角落，不擋播放操作 */
.vp-age-badge{position:absolute;top:8px;left:8px;background:rgba(200,20,20,.85);color:#fff;font-size:11px;font-weight:bold;padding:2px 6px;border-radius:3px;letter-spacing:.5px;pointer-events:none;z-index:4;}

/* 播放速度彈窗（右鍵選單「播放速度」開啟），見 player.js openSpeedPop */
.vp-speed-pop{position:fixed;background:#1f1f1f;border:1px solid #333;border-radius:6px;padding:10px 12px;min-width:226px;z-index:1001;box-shadow:0 4px 16px rgba(0,0,0,.5);font-size:13px;color:#eee;font-family:inherit;}
.vp-speed-title{margin-bottom:4px;}
.vp-speed-val{color:#e33;font-weight:bold;}
.vp-speed-slider{width:100%;height:3px;cursor:pointer;accent-color:#e33;margin:6px 0 10px;box-sizing:border-box;}
.vp-speed-presets{display:flex;gap:4px;flex-wrap:wrap;}
.vp-speed-preset{background:rgba(255,255,255,.1);border:none;color:#eee;font-size:12px;padding:4px 8px;border-radius:4px;cursor:pointer;font-family:inherit;}
.vp-speed-preset:hover{background:rgba(255,255,255,.22);}
.vp-speed-preset.vp-speed-on{background:#e33;color:#fff;}

/* 字幕設定子選單：由 player.js 右鍵選單「字幕」開啟。 */
.vp-subtitle-size-value{color:#e33;font-weight:bold;}
.vp-subtitle-size-slider{width:100%;height:3px;cursor:pointer;accent-color:#e33;margin:6px 0 10px;box-sizing:border-box;}

.vp-subtitle-menu-pop{position:fixed;background:#1f1f1f;border:1px solid #333;border-radius:6px;padding:10px 12px;min-width:226px;z-index:1001;box-shadow:0 4px 16px rgba(0,0,0,.5);font-size:13px;color:#eee;font-family:inherit;}
.vp-subtitle-menu-title{padding:0 4px 5px;color:#aaa;font-size:12px;}
.vp-subtitle-menu-option{display:block;width:100%;background:none;border:none;border-radius:4px;color:#eee;padding:7px 8px;text-align:left;font:inherit;cursor:pointer;}
.vp-subtitle-menu-option:hover{background:rgba(255,255,255,.12);}
.vp-subtitle-menu-option.vp-subtitle-menu-on{color:#fff;background:#e33;}