@charset "utf-8";
/* =========================================================
   播放页 V2 样式（左：播放器 / 右：影片信息 + 选集）
   只作用于 .play-container，不影响其它页面
   ---------------------------------------------------------
   竖屏适配说明：
   1) 播放器默认比例由 --play-ratio-w / --play-ratio-h 控制
      默认 3:4；想固定成 9:16 改成 9 / 16 即可
   2) 页面还带了一段自动识别：若播放器里的 <video> 能读取到
      真实宽高，会自动把比例改成视频本身的比例（竖屏自动贴合）
   3) 播放器高度同时受视口高度约束，桌面端不会撑出首屏
   ========================================================= */

.play-container {
  --play-accent: #128ACC;      /* 主题色（与全站一致） */
  --play-ratio-w: 3;           /* 播放器宽比 */
  --play-ratio-h: 4;           /* 播放器高比 */
  --play-card: #16161e;        /* 右侧面板底色 */
  --play-card-2: #22222c;      /* 选集 / 标签底色 */
  --play-line: #2a2a36;
}

/* ---------- 容器：桌面端适度加宽 ---------- */
@media (min-width: 992px) {
  .container.play-container {
    width: 96%;
    max-width: 1120px;
  }
}

/* ---------- 布局骨架 ---------- */
.play-container .play-wrap {
  display: block;
  padding: 14px 5px 0;
  margin: 0;
}
.play-container .play-main,
.play-container .play-side {
  min-width: 0;
}

/* ---------- 播放器：竖屏比例 + 圆角 ----------
   宽度 = min(栏宽, 620px, 视口高度换算值)，
   保证竖屏内容既够大，又不会把首屏撑得过高 */
.play-container .play-player {
  position: relative;
  width: 100%;
  max-width: min(620px, calc((100vh - 170px) * var(--play-ratio-w) / var(--play-ratio-h)));
  aspect-ratio: var(--play-ratio-w) / var(--play-ratio-h);
  margin: 0 auto;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  z-index: 1;
}
/* 播放器内部元素铺满容器（iframe / MacPlayer 等） */
.play-container .play-player iframe,
.play-container .play-player video,
.play-container .play-player embed,
.play-container .play-player object,
.play-container .play-player .MacPlayer,
.play-container .play-player .MacPlayer iframe,
.play-container .play-player .MacPlayer video,
.play-container .play-player .MacPlayer embed,
.play-container .play-player .MacPlayer object {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
/* 兼容旧版 .embed-responsive 的固定高度写法 */
.play-container .play-player.embed-responsive {
  height: auto;
  padding: 0;
}

/* ---------- 右侧面板 ---------- */
.play-container .play-side__inner {
  background: var(--play-card);
  border-radius: 14px;
  padding: 18px 18px 20px;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #3a3a48 transparent;
}
.play-container .play-side__inner::-webkit-scrollbar {
  width: 6px;
}
.play-container .play-side__inner::-webkit-scrollbar-thumb {
  background: #3a3a48;
  border-radius: 3px;
}
.play-container .play-side__inner::-webkit-scrollbar-track {
  background: transparent;
}

/* 标题 + 分类角标 */
.play-container .play-head {
  margin-bottom: 10px;
}
.play-container .play-title {
  display: inline;
  margin: 0;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
  color: #fff;
}
.play-container .play-title a {
  color: #fff;
}
.play-container .play-title a:hover {
  color: var(--play-accent);
}
.play-container .play-badge {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 8px;
  padding: 1px 9px;
  font-size: 12px;
  line-height: 18px;
  color: var(--play-accent);
  background: rgba(18, 138, 204, .14);
  border: 1px solid rgba(18, 138, 204, .45);
  border-radius: 20px;
  white-space: nowrap;
}

/* 数据行：评分 · 集数 · 播放量 · 年份 · 地区 · 语言 · 更新时间 */
.play-container .play-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 20px;
  color: #8b8b96;
}
.play-container .play-meta__item {
  white-space: nowrap;
}
.play-container .play-meta__score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffb400;
  font-weight: 700;
}
.play-container .play-meta__score em {
  font-style: normal;
}

/* 标签 */
.play-container .play-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.play-container .play-tag {
  display: inline-block;
  padding: 3px 13px;
  font-size: 12px;
  line-height: 20px;
  color: #b9b9c6;
  background: var(--play-card-2);
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.play-container .play-tag:hover {
  color: #fff;
  background: #2e2e3a;
}

/* 区块标题 */
.play-container .play-sec {
  margin-bottom: 20px;
}
.play-container .play-sec:last-child {
  margin-bottom: 0;
}
.play-container .play-sec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.play-container .play-sec__title {
  position: relative;
  margin: 0;
  padding-left: 11px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: #e9e9ef;
}
.play-container .play-sec__title:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -7px;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--play-accent);
}
.play-container .play-sec__extra {
  font-size: 12px;
  color: #7a7a86;
  white-space: nowrap;
}

/* 剧情简介 */
.play-container .play-desc {
  font-size: 13px;
  line-height: 1.85;
  color: #a9a9b6;
  word-break: break-word;
  overflow-wrap: break-word;
}
.play-container .play-desc img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px auto;
}

/* 选集网格 */
.play-container .play-eps ul {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.play-container .play-eps li {
  float: none;
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
}
.play-container .play-eps li a {
  display: block;
  padding: 8px 2px;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: #c3c3cf;
  background: var(--play-card-2);
  border-radius: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.play-container .play-eps li a:hover {
  color: #fff;
  background: #31313f;
}
.play-container .play-eps li.active a {
  color: #fff;
  font-weight: 700;
  background: var(--play-accent);
  background: linear-gradient(to right, var(--play-accent), var(--play-accent));
  box-shadow: 0 3px 12px rgba(18, 138, 204, .35);
}

/* =========================================================
   双栏布局：>= 992px（桌面 / 大平板横屏）
   ========================================================= */
@media (min-width: 992px) {
  .play-container .play-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
  }
  .play-container .play-side__inner {
    width: 100%;
  }
  /* 右侧内容比播放器高时，播放器吸顶跟随 */
  .play-container .play-player {
    position: sticky;
    top: 12px;
  }
}

/* =========================================================
   单列堆叠：< 992px（手机 + 平板竖屏）
   播放器与信息面板统一限宽 620px 居中，避免竖屏内容被拉得过高
   ========================================================= */
@media (max-width: 991px) {
  .play-container .play-wrap {
    padding: 10px 10px 0;
  }
  .play-container .play-player {
    max-width: min(620px, calc((100vh - 170px) * var(--play-ratio-w) / var(--play-ratio-h)));
    border-radius: 12px;
  }
  .play-container .play-side {
    max-width: 620px;
    margin: 12px auto 0;
  }
  .play-container .play-side__inner {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 14px;
    border-radius: 12px;
  }
}

/* =========================================================
   手机：< 768px
   ========================================================= */
@media (max-width: 767px) {
  .play-container .play-wrap {
    padding: 8px 8px 0;
  }
  .play-container .play-player {
    max-width: 100%;
    border-radius: 10px;
  }
  .play-container .play-side {
    max-width: 100%;
    margin-top: 10px;
  }
  .play-container .play-side__inner {
    padding: 12px;
  }
  .play-container .play-title {
    font-size: 18px;
  }
  .play-container .play-meta {
    font-size: 12px;
    gap: 5px 12px;
    margin-bottom: 12px;
  }
  .play-container .play-tags {
    gap: 6px;
    margin-bottom: 14px;
  }
  .play-container .play-tag {
    padding: 2px 10px;
  }
  .play-container .play-eps ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
  .play-container .play-eps li a {
    padding: 7px 2px;
  }
}

/* ---------- 超小屏 ---------- */
@media (max-width: 359px) {
  .play-container .play-eps ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}