/* ==========================================================
   鲲鹏AI · 播放器样式（真实视频源）
   ========================================================== */

/* ---------- 加载态 ---------- */
.player-loading {
  position: absolute; inset: 0; z-index: 8;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35);
}
.player-loading__ring {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  animation: plSpin .8s linear infinite;
}
@keyframes plSpin { to { transform: rotate(360deg); } }

/* ---------- 错误 / 无源提示 ---------- */
.video-error {
  position: absolute; inset: 0; z-index: 9;
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: #c2c8d0; font-size: 14px; text-align: center; padding: 20px;
  background: rgba(8,10,13,.9);
}

/* ---------- 控制条 ---------- */
.player-bar { z-index: 10; }

.player-progress {
  position: relative;
  display: flex; align-items: center;
  height: 14px;                  /* 触摸目标足够大 */
  cursor: pointer;
}
/* 轨道 */
.player-progress::before {
  content: ""; position: absolute; left: 0; right: 0;
  height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.28);
}
/* 缓冲进度 */
.player-buffer {
  position: absolute; left: 0; height: 4px; width: 0;
  border-radius: 2px; background: rgba(255,255,255,.4);
}
/* 已播放 */
.player-progress__bar {
  position: absolute; left: 0; height: 4px; width: 0;
  border-radius: 2px; background: var(--blue);
}
/* 拖动手柄：平时隐藏，悬停/拖动时出现 */
.player-progress__dot {
  position: absolute; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transform: translateX(-50%) scale(0);
  transition: transform .15s;
}
.player-bar:hover .player-progress__dot,
.player-progress.is-dragging .player-progress__dot { transform: translateX(-50%) scale(1); }

.player-ctrl {
  display: flex; align-items: center; gap: 12px;
  color: #fff; font-size: 13px;
  padding-top: 2px;
}
.player-ctrl i {
  font-style: normal; cursor: pointer;
  padding: 4px 6px; border-radius: 4px;
  opacity: .9; transition: opacity .15s, background .15s;
}
.player-ctrl i:hover { opacity: 1; background: rgba(255,255,255,.14); }
.player-ctrl i.is-active { color: #7ab4ff; opacity: 1; }

.player-time { font-variant-numeric: tabular-nums; opacity: .85; }

/* 倍速菜单 */
.player-rate {
  position: relative; flex-shrink: 0;
}
.rate-menu {
  position: absolute; bottom: 26px; right: 0;
  background: rgba(20,22,26,.96);
  border-radius: 6px; padding: 4px 0;
  display: none; min-width: 62px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.rate-menu.show { display: block; }
.rate-item {
  padding: 7px 14px; font-size: 13px; color: #cfd4da;
  cursor: pointer; text-align: center; white-space: nowrap;
}
.rate-item:hover { background: rgba(255,255,255,.12); color: #fff; }
.rate-item.is-active { color: #7ab4ff; }

/* 清晰度菜单 */
.quality-menu {
  display: flex; align-items: center; gap: 2px;
  background: rgba(20,22,26,.8);
  border-radius: 4px; padding: 2px;
}
.q-btn {
  font-size: 12px; color: #cfd4da;
  padding: 4px 9px; border-radius: 3px;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.q-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.q-btn.is-active { background: var(--blue); color: #fff; }

/* ---------- 全屏 ---------- */
.c-video-player-box.is-fullscreen {
  position: fixed !important;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.c-video-player-box.is-fullscreen video,
.c-video-player-box.is-fullscreen .video-stage {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 原生全屏时同样处理（Safari 需要） */
.c-video-player-box:fullscreen video { object-fit: contain; }
.c-video-player-box:-webkit-full-screen video { object-fit: contain; }

/* 全屏时控制条常驻，不用 hover */
.c-video-player-box.is-fullscreen .player-bar { display: block !important; }

/* 移动端隐藏倍速与清晰度（触控区太小，容易误触） */
@media (max-width: 900px) {
  .player-ctrl { gap: 8px; font-size: 14px; }
  .player-ctrl i { padding: 8px 8px; }        /* 更大触摸区 */
  .player-progress { height: 22px; }          /* 更易拖动 */
  .player-progress::before { height: 5px; }
  .player-progress__bar, .player-buffer { height: 5px; }
  .player-progress__dot { width: 16px; height: 16px; }
  /* 手机端隐藏倍速/清晰度（纵向时触屏易误触），
     但横屏或全屏时空间足够，改为显示 */
  .player-rate, .quality-menu { display: none; }
  .player-bar { padding: 28px 8px 8px; }
  .player-time { font-size: 12px; }
  /* 底部导航把手在播放器下方，控制条再往下会让位 */
  .player-ctrl .time { margin-left: auto; }
}

/* ---------- 横屏：控制条加大 ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .player-ctrl i { padding: 10px 12px; }
  .player-progress { height: 26px; }
  /* 横屏空间够，显示倍速与清晰度 */
  .player-rate, .quality-menu { display: flex; }
}

/* ---------- 减少动画偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .player-loading__ring { animation: none; }
  .player-progress__dot { transition: none; }
}