/* ===== 播放页整体：左列（播放器/操作列/简介/选集/推荐视频）+ 右侧「相关内容」榜单整栏并排，评论独立一排，比照目标站 safilm69.com 需求调整 ===== */
.dg-play-main {
  padding: 16px 0 48px;
}

/* 左列 + 侧栏并排的外层容器，取代原本各区块各自居中的写法 */
.dg-pw-row {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.dg-pw-container {
  width: calc(100% - 356px);
  min-width: 0;
}

.dg-player-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.dg-player-box {
  position: relative;
  width: 100%;
  /* 灰階底色：让第三方播放器半透明控制列有可视分隔，非取代播放画面黑底 */
  background: #232323;
  aspect-ratio: 16/9;
  overflow: hidden;
}

/* 第三方播放器常自带固定宽高内联样式不会跟着撑满，这里强制第一层元素 100% 填满 .dg-player-box */
.dg-player-box > * {
  width: 100% !important;
  height: 100% !important;
}

/* 相关内容榜单：沿用 detail.html 既有 .dg-cb-side 侧栏元件，固定宽度对齐目标站实测 340px、不参与伸缩。
   左列（播放器～推荐视频）远比 15 笔榜单高，改用 sticky 吸顶跟随捲动，
   不可再用 align-self:stretch 撑满左列高度——.dg-cb-side 内部子层是 flex-column，
   撑满后 .dg-vlt-rank-item{flex:1} 会把每笔榜单项拉成等分巨高，排版会跑掉（见使用者回报） */
.dg-pw-side.dg-cb-side {
  flex: 0 0 340px;
  position: sticky;
  top: 16px;
}

/* ===== 播放器下方：点赞/踩/收藏/分享/反馈/下载操作列，横跨播放器栏宽度 ===== */
.dg-pw-below-player {
  margin-top: 10px;
  padding: 10px 16px;
  background: var(--bg-white);
  border-radius: var(--radius);
}

.dg-pw-vote-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-pw-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
}

.dg-pw-vote-btn .mac-icon {
  font-size: 16px;
}

.dg-pw-vote-btn.digg_link:hover {
  color: var(--accent);
}

.dg-pw-vote-btn.digg_link.disabled {
  color: var(--accent);
  pointer-events: none;
}

/* ===== 标题 + 分类/热度 ===== */
.dg-pw-title {
  margin: 20px 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.dg-pw-stat-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.dg-pw-stat-tag {
  color: var(--text);
}

.dg-pw-sep {
  width: 1px;
  height: 12px;
  background: var(--border-mid);
}

.dg-pw-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dg-pw-stat-hot {
  color: var(--accent);
}

.dg-pw-stat-hot .mac-icon {
  color: var(--accent-red);
  font-size: 14px;
}

/* ===== 信息栏：小海报 + 上映/导演/主演/简介/评分 ===== */
.dg-pw-info-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.dg-pw-info-pic {
  display: block;
  width: 160px;
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elev);
}

.dg-pw-info-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dg-pw-info-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dg-pw-info-line {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}

.dg-pw-info-line a {
  color: var(--text);
}

.dg-pw-info-line a:hover {
  color: var(--accent);
}

.dg-pw-info-label {
  color: var(--text-muted);
}

.dg-pw-info-namelist a:not(:last-child)::after {
  content: "/";
  color: var(--text-muted);
  margin: 0 2px;
}

.dg-pw-info-desc {
  color: var(--text-light);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dg-pw-info-desc .dg-pw-info-label {
  color: var(--text-muted);
}

.dg-pw-info-score {
  font-weight: 700;
  color: var(--accent);
}

.dg-pw-info-score-empty {
  color: var(--text-muted);
}

/* ===== 选集列表：来源 tab（多线路才出现）+ 集数网格 ===== */
.dg-pw-lines {
  margin-bottom: 8px;
}

.dg-pw-source-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.dg-pw-source-tabs::-webkit-scrollbar {
  display: none;
}

.dg-pw-source-tab.dg-source-tab {
  flex-shrink: 0;
  padding: 6px 20px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-elev);
  border: none;
  border-radius: var(--radius);
}

.dg-pw-source-tab.dg-source-tab.dg-active {
  color: #14120a;
  font-weight: 700;
  background: var(--accent);
}

.dg-pw-source-panel.dg-playlist-panel { display: none; }
.dg-pw-source-panel.dg-playlist-panel.dg-active { display: block; }

.dg-playlist-empty {
  padding: 16px 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* 集数胶囊：比照目标站 grid-cols-10 圆角胶囊，选中态实心橙底。
   固定收纳 4 排半高度（露出第 5 排一半，提示可继续滚动），超出的集数改滚轮/触控捲动查看，不做展开收起按钮。
   4×34px 胶囊 + 3×10px 排距 + 半颗胶囊(17px) + 半排距(5px) = 188px */
.dg-pw-episode-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
  max-height: 188px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-light);
}

.dg-pw-episode-grid::-webkit-scrollbar {
  width: 6px;
}

.dg-pw-episode-grid::-webkit-scrollbar-track {
  background: var(--bg-light);
  border-radius: 999px;
}

.dg-pw-episode-grid::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 999px;
}

.dg-pw-episode.dg-episode {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 34px;
  padding: 0 6px;
  border-radius: 17px;
  background: var(--bg-elev);
  color: var(--text);
  border: none;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dg-pw-episode.dg-episode:hover {
  color: var(--accent);
}

.dg-pw-episode.dg-episode.dg-active {
  background: var(--accent);
  color: #14120a;
  font-weight: 700;
}

/* ===== 推荐视频（左列 .dg-pw-container 内，随左列宽度收窄，6 筆一排，共 3 排） ===== */
.dg-pw-more-section {
  margin: 32px 0 0;
}

.dg-pw-more-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
}

.dg-pw-vod-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
}

/* 防御性封顶：本环境 num 参数不保证限制笔数（桌面/平板 6 栏 3 排 = 18 笔） */
.dg-pw-vod-grid > .dg-vod-card:nth-child(n+19) {
  display: none;
}

/* ===== 评论（目标站播放页无此区块，本站既有功能保留；独立满版一排，不受左右分栏影响） ===== */
.dg-pw-comment-section {
  max-width: var(--max-w);
  margin: 32px auto 0;
  padding: 0 16px;
}

/* ===== RWD ===== */
@media (max-width: 1024px) {
  .dg-pw-row {
    flex-direction: column;
  }
  .dg-pw-container {
    width: 100%;
  }
  .dg-pw-side.dg-cb-side {
    flex: 0 0 auto;
    width: 100%;
    position: static;
  }
  .dg-pw-episode-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 767px) {
  .dg-play-main { padding: 0 0 68px; }
  .dg-pw-row { padding: 10px 10px 0; }

  .dg-player-wrap { border-radius: 0; }

  .dg-pw-below-player { margin-top: 0; border-radius: 0; padding: 10px; }
  .dg-pw-vote-list { gap: 16px; }

  .dg-pw-title { font-size: 17px; }

  .dg-pw-info-row { gap: 12px; }
  .dg-pw-info-pic { width: 110px; }
  .dg-pw-info-desc { -webkit-line-clamp: 2; }

  .dg-pw-episode-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .dg-pw-episode.dg-episode { font-size: 12px; }

  .dg-pw-comment-section { padding: 0 10px; }
  .dg-pw-vod-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .dg-pw-vod-grid > .dg-vod-card:nth-child(n+10) {
    display: none;
  }
}

@media (max-width: 479px) {
  .dg-pw-episode-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 分享弹窗已移除：点击分享按钮改为直接复制网址（逻辑见 footer.js） */