/* ============================================================
 * 播放器公共样式（xgplayer）
 * 视频详情页与吃瓜帖子详情页共用，任何新增播放器的页面直接引这一份，
 * 不要再往各自的页面 CSS 里复制一遍。
 * ⚠️ 必须排在 /static/js/xg.css 之后加载，否则同特异度下会被它压掉。
 * ============================================================ */

.media-stage {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 535px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #000;
}
.media-stage .playBtn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  z-index: 10;
  cursor: pointer; /* 它是个 <img> 而非 <button>，不写就没有手型光标，看着像不可点 */
}

.media-stage .media-stage__frame {
  width: 100%;
  height: 100%;
}

/* xgplayer 会把 .media-stage__frame 本身当作 root 并补上 .xgplayer，铺满 16:9 容器 */
.media-stage .xgplayer {
  width: 100%;
  height: 100%;
  background: #000;
}

.media-stage .xgplayer video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
 * 播放器操作栏——对齐 Figma
 *   PC : 39053:42929「控件」880×53，播放器 952×535，左右留白 30、距底 40
 *   H5 : 32190:160709「控件」343×33，播放器 343×190，左右留白 12、距底 10
 * 结构：进度条独占一行在上，下方一行左(播放/音量/时间) + 右(设置/全屏)
 * ============================================================ */
.media-stage .xgplayer .xgplayer-controls {
  /* 底部渐变遮罩：设计稿 image 171，PC 150px 高，透明 → 纯黑 */
  height: 150px;
  padding: 0 30px 40px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  display: flex;
  align-items: flex-end;
}

/* xg-inner-controls 带 .xg-pos 是绝对定位，吃不到父级 padding，只能自己定位。
   它只承载按钮行：设计稿按钮行 24 高、底边距播放器底 40 */
.media-stage .xgplayer .xg-inner-controls {
  left: 30px;
  right: 30px;
  bottom: 40px;
  width: auto;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  background: none;
}

/* 进度条本就被 xgplayer 绝对定位在按钮行上方（默认 top:-20px），
   这里只校正高度与间距。xgplayer 在 .xgplayer-progress 里给了 5px 上内距，
   实测轨道比栅格顶低 5px，所以取 -34 才是设计稿的 4px 进度条 + 25px 间距 */
.media-stage .xgplayer .xg-center-grid {
  left: 0;
  right: 0;
  top: -34px;
  bottom: auto;
  width: auto;
  height: 4px;
  margin: 0;
}

.media-stage .xgplayer .xg-left-grid,
.media-stage .xgplayer .xg-right-grid {
  height: 24px;
  display: flex;
  align-items: center;
}

/* 默认是 row-reverse（新插件自动靠右），会把 order 反过来，这里改回正序 */
.media-stage .xgplayer .xg-right-grid {
  margin-left: auto;
  flex-direction: row;
}

.media-stage .xgplayer .xgplayer-progress {
  height: 4px;
  margin: 0;
  padding: 0;
}

.media-stage .xgplayer .xgplayer-progress-outer,
.media-stage .xgplayer .xgplayer-progress-inner {
  height: 4px;
  border-radius: 2px;
  /* 轨道：白 30% */
  background: rgba(255, 255, 255, 0.3);
}

/* 缓冲段不在设计稿里，透明掉避免多出一层灰 */
.media-stage .xgplayer .xgplayer-progress-cache {
  background: transparent;
}

/* 已播放段：白 → #999 线性渐变（设计稿 Rectangle 21） */
.media-stage .xgplayer .xgplayer-progress-played {
  border-radius: 2px;
  background: linear-gradient(90deg, #ffffff 0%, #999999 100%);
}

.media-stage .xgplayer .xgplayer-progress-played::before,
.media-stage .xgplayer .xgplayer-progress-played::after {
  display: none;
}

/* 拖拽圆点：设计稿 Ellipse 10，12px 纯白。
   xgplayer 默认 scale(0)、只在 hover/拖拽时放大，设计稿要求常显，故覆盖 transform */
.media-stage .xgplayer .xgplayer-progress-btn {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: translate(-6px, -6px) scale(1);
}

/* 图标统一 24×24。注意元素是 <xg-icon class="xgplayer-play">，
   xg-icon 是标签名不是类名，必须按各自的功能类来选 */
.media-stage .xgplayer .xgplayer-play,
.media-stage .xgplayer .xgplayer-volume,
.media-stage .xgplayer .xgplayer-fullscreen,
.media-stage .xgplayer .xgplayer-playbackrate {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-stage .xgplayer .xgplayer-play .xgplayer-icon,
.media-stage .xgplayer .xgplayer-volume .xgplayer-icon,
.media-stage .xgplayer .xgplayer-fullscreen .xgplayer-icon,
.media-stage .xgplayer .xgplayer-playbackrate .xgplayer-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 内置 svg 的 viewBox 是 28×40，塞进 24 见方后按 xMidYMid meet 取 min(24/28,24/40)=0.6
   统一缩放，字形只剩 9×11.5 / 12×10.8，比铺满 24 的齿轮和全屏明显小一圈。
   scale(1.5) 把字形放到约 17 / 16，与设计稿的 14×17、15.5 对齐；
   transform 不影响布局，按钮盒仍是 24（H5 是 16），比例通用 */
.media-stage .xgplayer .xgplayer-play svg,
.media-stage .xgplayer .xgplayer-volume svg {
  width: 100%;
  height: 100%;
  transform: scale(1.5);
}

/* 音量挪到左侧、紧跟播放键（设计稿：播放 / 音量 / 时间） */
.media-stage .xgplayer .xgplayer-volume {
  order: 1;
  margin-left: 24px !important;
}

/* 时间：xgplayer 用内联 style 写死 display:block，这里不跟它抢，靠 line-height 居中。
   font-size:0 是为了吃掉各 span 之间 HTML 缩进产生的空白节点——
   设计稿是 00:05/00:50，斜杠两侧不留空隙 */
.media-stage .xgplayer .xgplayer-time {
  order: 2;
  width: auto;
  min-width: 0;
  height: 24px;
  margin-left: 24px;
  padding: 0;
  font-size: 0;
  line-height: 24px;
}

.media-stage .xgplayer .xgplayer-time span {
  /* 设计稿 #AAAAAA / 18px / 字重 500 */
  color: #aaaaaa;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  opacity: 1;
  margin: 0;
  padding: 0;
}

/* 右侧只留「设置 + 全屏」：网页全屏与清晰度不在设计稿里 */
.media-stage .xgplayer .xgplayer-cssfullscreen,
.media-stage .xgplayer .xgplayer-definition {
  display: none !important;
}

/* 倍速按钮改造成设计稿的齿轮「设置」：隐掉 1x 文字，下拉列表即设置面板 */
.media-stage .xgplayer .xgplayer-playbackrate {
  order: 1;
  width: 24px;
  min-width: 24px;
  margin-right: 20px;
}

.media-stage .xgplayer .xgplayer-playbackrate .xgplayer-icon {
  width: 24px;
  height: 24px;
  background: url("/static/images/player-setting.svg") no-repeat center / 24px 24px;
}

.media-stage .xgplayer .xgplayer-playbackrate .icon-text {
  display: none !important;
}

/* xgplayer 默认强调色是红（音量滑条 rgb(250,31,65)、选中项 rgb(255,0,0)），
   换成站内主色 #FECB03（base.css 的 --color-primary-500）。
   进度条不动——设计稿那里就是白→#999 的渐变 */
.media-stage .xgplayer .xgplayer-volume .xgplayer-drag,
.media-stage .xgplayer .xgplayer-slider .xgplayer-drag {
  background: var(--color-primary-500, #fecb03);
}

.media-stage .xgplayer .xgplayer-volume .xgplayer-bar {
  background: rgba(255, 255, 255, 0.3);
}

/* xg.css 原文是 `li:hover, li.selected { color: red }`，两个状态都得覆盖，
   只改 selected 的话悬浮时仍然是红的 */
.media-stage .xgplayer .xg-options-list li:hover,
.media-stage .xgplayer .xg-options-list li:hover span,
.media-stage .xgplayer .xg-options-list li.selected,
.media-stage .xgplayer .xg-options-list li.selected span {
  color: var(--color-primary-500, #fecb03);
}

.media-stage .xgplayer .xgplayer-error .xgplayer-error-refresh {
  color: var(--color-primary-500, #fecb03);
}

/* 倍速面板：默认 padding 4px、行高 20，选项挤在一起，放宽到 36 一行。
   xgplayer 给面板加了 opacity:.85，叠上半透明底色后实际只有 0.61，
   进度条会从面板中间透出来一条横线，所以这里把整体透明度收掉、底色调实 */
.media-stage .xgplayer .xg-options-list {
  padding: 6px 0;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 8px;
  opacity: 1;
  z-index: 20;
}

.media-stage .xgplayer .xg-options-list li {
  height: auto;
  margin: 0;
  padding: 8px 16px;
  line-height: 20px;
  text-align: center;
}

.media-stage .xgplayer .xg-options-list li:hover {
  background: rgba(255, 255, 255, 0.12);
}

.media-stage .xgplayer .xgplayer-fullscreen {
  order: 2;
}

/* 全屏用设计稿导出的图标替掉内置 svg（内置是四角括号，设计稿是圆角方框） */
.media-stage .xgplayer .xgplayer-fullscreen .xgplayer-icon {
  width: 24px;
  height: 24px;
  background: url("/static/images/player-fullscreen.svg") no-repeat center / 24px 24px;
}

.media-stage .xgplayer .xgplayer-fullscreen .xgplayer-icon svg {
  display: none;
}

/* ============================================================
 * 前贴广告覆盖层——对齐 Figma 39888:115495(PC) / 39875:111250(H5)
 * 盖住整个播放器(视频+操作栏);素材是福利应用(logo+名称+简介)
 * ============================================================ */
.media-preroll {
  position: absolute;
  inset: 0;
  z-index: 12; /* 盖过 playBtn(10)/poster(1) 与 xgplayer 全部图层 */
  background: linear-gradient(180deg, #23232a 0%, #0b0b0e 100%);
}

/* 整个覆盖层都是广告可点区;banner 图全幅铺满(设计稿即全幅背景) */
.media-preroll__content {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.media-preroll__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右上「30s | VIP可关闭广告」:黑 60% 底、左半圆角、右侧贴边(设计稿 x+w=画板宽) */
.media-preroll__vip {
  position: absolute;
  top: 16px;
  right: 0;
  height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 100px 0 0 100px;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  font-family: inherit;
}

.media-preroll__count {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  min-width: 24px;
  text-align: center;
}

.media-preroll__sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.2);
}

.media-preroll__vip-text {
  font-size: 14px;
  line-height: 20px;
  background: linear-gradient(90deg, #ffe580 0%, #facc15 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 中央「使用观影券*1 跳过广告」:蓝渐变胶囊(设计稿垂直位 229/535 ≈ 43%) */
.media-preroll__skip {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translateX(-50%);
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 30px;
  background: linear-gradient(90deg, #5f82ff 0%, #335ef7 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}

/* 播放器 JS 还在下载时点了播放：按钮呼吸，表示"点击已收到"，就绪后会自动开播 */
.media-stage--pending .playBtn {
  animation: video-player-pending 1s ease-in-out infinite;
  cursor: progress;
}

@keyframes video-player-pending {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-stage--pending .playBtn {
    animation: none;
    opacity: 0.5;
  }
}

.media-stage__unavailable {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.media-stage__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.media-stage__poster--hidden {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 768px) {
  /* ---- 播放器操作栏 H5：Figma 32190:160709「控件」343×33，播放器 343×190 ----
     进度条 2px，图标 16px，左右留白 12，按钮行距底 10，时间 12px/400 */
  .media-stage .xgplayer .xgplayer-controls {
    height: 30px; /* 设计稿底部渐变 image 171 在 H5 只有 30 高 */
    padding: 0;
  }

  .media-stage .xgplayer .xg-inner-controls {
    left: 12px;
    right: 12px;
    bottom: 10px;
    height: 19px;
  }

  .media-stage .xgplayer .xg-center-grid {
    /* 2px 进度条 + 12px 间距，再补 xgplayer 的 5px 上内距 */
    top: -19px;
    height: 2px;
  }

  .media-stage .xgplayer .xgplayer-progress,
  .media-stage .xgplayer .xgplayer-progress-outer,
  .media-stage .xgplayer .xgplayer-progress-inner {
    height: 2px;
  }

  /* 真正可见的白圆是 ::before（xgplayer 写死 12px），H5 要跟着缩到 6 */
  .media-stage .xgplayer .xgplayer-progress-btn,
  .media-stage .xgplayer .xgplayer-progress-btn::before {
    width: 6px;
    height: 6px;
  }

  .media-stage .xgplayer .xgplayer-progress-btn {
    transform: translate(-3px, -3px) scale(1);
  }

  .media-stage .xgplayer .xg-left-grid,
  .media-stage .xgplayer .xg-right-grid {
    height: 19px;
  }

  .media-stage .xgplayer .xgplayer-play,
  .media-stage .xgplayer .xgplayer-volume,
  .media-stage .xgplayer .xgplayer-fullscreen,
  .media-stage .xgplayer .xgplayer-playbackrate,
  .media-stage .xgplayer .xgplayer-play .xgplayer-icon,
  .media-stage .xgplayer .xgplayer-volume .xgplayer-icon,
  .media-stage .xgplayer .xgplayer-fullscreen .xgplayer-icon,
  .media-stage .xgplayer .xgplayer-playbackrate .xgplayer-icon,
  .media-stage .xgplayer .xgplayer-play svg,
  .media-stage .xgplayer .xgplayer-volume svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
  }

  .media-stage .xgplayer .xgplayer-playbackrate .xgplayer-icon,
  .media-stage .xgplayer .xgplayer-fullscreen .xgplayer-icon {
    background-size: 16px 16px;
  }

  /* 设计稿：播放→音量 12，音量→时间 12，设置→全屏 20 */
  .media-stage .xgplayer .xgplayer-volume {
    margin-left: 12px !important;
  }

  .media-stage .xgplayer .xgplayer-time {
    height: 19px;
    margin-left: 12px;
    line-height: 19px;
  }

  .media-stage .xgplayer .xgplayer-time span {
    font-size: 12px;
    font-weight: 400;
    line-height: 19px;
  }

  .media-stage .xgplayer .xgplayer-playbackrate {
    margin-right: 20px;
  }

  /* 设计稿 H5 播放按钮 41×41 */
  .media-stage .playBtn {
    width: 41px;
    height: 41px;
  }

  /* 前贴广告 H5:引导条 26 高/12px 字,跳过按钮 30 高/14px */
  .media-preroll__vip {
    top: 12px;
    height: 26px;
    gap: 8px;
  }

  .media-preroll__count,
  .media-preroll__vip-text {
    font-size: 12px;
    line-height: 18px;
  }

  .media-preroll__count {
    min-width: 21px;
  }

  .media-preroll__skip {
    height: 30px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }

  /* 倍速面板：H5 播放器只有 190 高，齿轮距顶 163，而 PC 那套 36px 行高
     5 项要 192px，比播放器还高，会被容器的 overflow:hidden 从顶部裁掉。
     这里收到 28px 一行（5 项 148px），并加 max-height 兜底：
     以后若加了清晰度等更多选项，超出就内部滚动，绝不再被裁 */
  .media-stage .xgplayer .xg-options-list {
    padding: 4px 0;
    max-height: 150px;
    overflow-y: auto;
  }

  .media-stage .xgplayer .xg-options-list li {
    padding: 4px 12px;
    font-size: 12px;
    line-height: 20px;
  }
}