/* ============================================
   Player Modal - 全屏沉浸式播放器（V2）
   对标设计稿：导航栏 + 全屏视频 + 右侧操作栏
             + 进度条 + 底部EP信息栏(#1c1c1e)
   ============================================ */

/* ---- 播放器容器 ---- */

/* ================================
  顶部导航栏（渐变透明，与 For You 一致）
  ================================ */

/* 右侧占位，保持标题居中 */

/* ================================
   视频区域（全屏填充）
   ================================ */

/* ---- iOS 点击暂停/播放透明层（video pointer-events:none，由此层全权接管）---- */

/* ---- 暂停/播放状态图标（短暂闪现） ---- */

/* 滑动包装器：整屏滑动（视频+进度条+底部EP栏一起滑） */

/* 动画状态 */

/* ---- 字幕样式：去背景色，上移 10px ---- */
#drama-video::cue {
  background: transparent !important;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
#drama-video::cue(v) {
  background: transparent !important;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
/* 字幕上移 10px：通过调整 textTrack 的 line 属性在 JS 中实现 */

.drama-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  /* 无实际视频源时，防止 video 原生层拦截触摸事件（iOS/Android WebView） */
  pointer-events: none;
}

/* 视频占位背景（无视频源时显示海报） */

/* ---- 上滑提示箭头 ---- */

@keyframes swipe-hint-pulse {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 0.7; transform: translateX(-50%) translateY(-8px); }
}

/* ============================================
   播放器状态页（覆盖在视频区域上）
   - locked-state: 未解锁剧集
   - error-state:   加载失败
   ============================================ */

@keyframes state-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 状态图标 */

/* 加载中 GIF */

/* loading 状态页整体往上挪 */
#player-loading-state.show {
  padding-bottom: 80px; /* 用底部 padding 把内容往上推 */
}

/* 状态提示文字 */

/* ---- Unlock Now 按钮（金色渐变） ---- */

/* ---- Try again 按钮（白色描边） ---- */

/* ================================
   右侧操作栏（Favorite + Speed）
   叠加在视频区域右下角
   ================================ */

#p-quality {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  opacity: 0;
  cursor: pointer;
}

/* 收藏激活状态 — 金色 */

/* ================================
   进度条区域
   ================================ */

/* ================================
   底部剧集信息栏 (#1c1c1e)
   点击 → 弹出选集
   ================================ */

#player-ep-text {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

@media (min-width: 768px) {
  

  

  

  

  .drama-video,
  .player-video-placeholder img {
    object-fit: contain;
  }

  

  

  }

/* ===== 共享 Sheet 动画 ===== */
@keyframes sheet-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ---- 选集弹框（底部 Sheet 样式 — 对标设计稿） ---- */

/* ---- 拖拽指示条顶部区域（独立背景 + 圆角对齐外层） ---- */

/* ---- 拖拽指示条（Sheet 标识）---- */

/* ---- 剧集信息头部（封面 + 元数据）---- */

/* 收藏星标按钮 */

/* ---- 选集网格 — 6列 ---- */

/* 当前播放集 — 金色高亮 */

/* 已解锁（默认白底黑字，无需额外样式） */

/* 未解锁 — 锁图标右上角（使用图片资源） */

/* ============================================
   倍速选择弹窗（底部 Sheet）
   0.5x / 0.75x / 1x / 1.25x / 1.5x / 2x / 2.5x / 3x
   4×2 网格，独立于 #player-modal
   ============================================ */

/* ============================================
   倍速弹窗拖拽指示条（参考选集弹窗）
   ============================================ */

/* 顶部容器（包裹 handle，与选集弹窗样式一致） */

/* 拖拽指示条 */

/* 标题 */

/* 倍速按钮 4列 × 2行 */

/* 选中态 — 金色 */

/* ============================================
   剧集解锁弹窗（底部 Sheet）
   Price/Account + Membership + Coins
   对标设计稿：黑色半透明蒙版 + 底部圆角弹窗
   ============================================ */

.ep-unlock-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-modal, 200) + 60);
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.ep-unlock-overlay.show {
  display: flex;
  animation: sheet-fade-in 0.2s ease forwards;
}

.ep-unlock-modal {
  width: 100%;
  max-height: 80vh;
  background: #000;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: sheet-slide-up 0.3s ease forwards;
}

/* ---- 顶部栏：Price / Account / 关闭 ---- */

/* ---- 滚动内容区 ---- */

/* ---- Section ---- */

/* ---- 订阅计划卡片列表 ---- */

/* 选中状态 */

/* ---- Coins 充值网格 2x2 ---- */

/* ---- 底部固定栏：Use Coins to Unlock ---- */

@media (min-width: 768px) {
  .ep-picker-modal,
  .speed-modal,
  .ep-unlock-modal {
    max-width: 480px;
  }}