/* 剧详情 / 播放页（drama.html、watch.html 的 head 加载）：设计稿 .detail-reference / .reference-player 的补充，以及 H5 播放器嵌入 16:9 视口的修正。 */
.pc-detail { gap: 26px; }
.detail-chapters .chapter-link.locked, .reference-episodes .episode-grid button.locked { color: #80828c; }
.detail-chapters .chapter-link .ep-lock, .reference-episodes .episode-grid button .ep-lock { position: absolute; left: 6px; top: 5px; display: block; pointer-events: none; opacity: .7; }
.reference-episodes .episode-grid button .ep-lock { left: 3px; top: 3px; }
.ep-lock svg { width: 11px; height: 11px; stroke-width: 2.2; }
.reference-episodes .ep-lock svg { width: 8px; height: 8px; }
.detail-chapters .chapter-link .ep-price, .reference-episodes .episode-grid button .ep-price { position: absolute; left: -1px; top: -1px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 5px 2px 4px; border-radius: 4px 0 6px 0; background: #e44b26; color: #fff0bd; font-size: 10px; font-weight: 700; font-style: normal; line-height: 1; pointer-events: none; }
.ep-price svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.reference-episodes .episode-grid button .ep-price { top: auto; bottom: -1px; border-radius: 0 6px 0 6px; font-size: 9px; padding: 1px 4px 1px 3px; }
.reference-episodes .ep-price svg { width: 8px; height: 8px; }
@media (max-width: 767px) { .detail-chapters .chapter-link .ep-price { top: auto; bottom: -1px; border-radius: 0 6px 0 9px; font-size: 9px; padding: 1px 4px 1px 3px; } .detail-chapters .ep-price svg { width: 8px; height: 8px; } }
.detail-reference .detail-actions > button.active { color: #ff4b5a; border-color: #e5091480; }
.detail-reference .detail-actions > .primary, .reference-player-actions button.primary { width: auto; height: auto; margin-top: 0; }
.reference-player-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.reference-player-actions button svg { width: 15px; height: 15px; }
.reference-player-actions button[aria-pressed=true]:not(.primary) { color: #ff4b5a; border-color: #e5091480; }
/* 播放页右栏顶部的剧信息：封面 + 剧名 / 集数 / 分类，标签，简介默认 3 行、超出出「More」 */
.watch-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.watch-info-head { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.watch-info-head img { width: 64px; height: 96px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: #17181c; }
.watch-info-head > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.watch-info-title { font-size: 16px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.watch-info-head:hover .watch-info-title { color: #ff5a66; }
.watch-info-tags { gap: 6px; }
.watch-info-synopsis .clamp-text { cursor: auto; line-height: 1.7; white-space: pre-line; }
.watch-info-synopsis .text-btn { padding: 2px 0; font-size: 12px; color: #ff5a66; }
/* 播放器：竖屏 H5 组件放进横向视口；点赞 / 评论 / 集数挪到外部操作行与选集网格，组件内对应控件隐藏 */
.reference-player .video-viewport .player-root { position: absolute; inset: 0; }
.reference-player .video-viewport .player-root > .player-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 1; }
.reference-player .player-root .player-side, .reference-player .player-root .player-copy, .reference-player .player-root [data-act="episodes"], .reference-player .player-root [data-ep-label] { display: none; }
.reference-player .player-root button { border: 0; padding: 0; }
.reference-player .player-root .play-zone { inset: 0 0 72px 0; background: none; border-radius: 0; }
.reference-player .player-root .player-top { top: 14px; left: 16px; }
.reference-player .player-root .player-bottom { bottom: 14px; left: 16px; right: 16px; }
.reference-player .player-root .scrubber { margin: 0 0 12px; }
.reference-player .player-root .player-controls { justify-content: flex-end; }
.reference-player .player-root .player-time { display: block; font-size: 11px; margin-bottom: 6px; text-shadow: 0 1px 3px #000; }

/* 「New」角标：原稿贴在按钮内右上角，PC 侧栏按钮只有 ~48px 宽会盖住集数；改成挂在右上角外沿的小标签，集数不被遮挡 */
.reference-episodes .episode-grid button > .episode-new,
.detail-chapters .chapter-link > .chapter-new {
  top: -6px; right: -4px; min-width: 0; min-height: 0; padding: 2px 4px;
  font-size: 8px; letter-spacing: .3px; text-transform: uppercase; line-height: 1;
  border-radius: 3px; box-shadow: 0 0 0 2px #111216;
}
.reference-episodes .episode-grid { padding-top: 6px; }
.detail-chapters .chapter-link { position: relative; }
.reference-episodes .episode-grid button.active > .episode-new { box-shadow: 0 0 0 2px #111216; }

/* 选集侧栏标题「剧名 · Episodes」与右侧「Now · Episode 01」并排，长剧名被挤成三行：改为上下排，标题最多两行 */
.reference-episodes .episode-side-heading { flex-direction: column; gap: 4px; }
.reference-episodes .episode-side-heading h2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reference-episodes .episode-side-heading .current-episode { padding-top: 0; }

/* 播放页布局：「返回 + 标题」横跨两列，视频顶与右栏顶平齐；右栏拉伸到与左列（视频 + 操作行）同高，选集网格占剩余高度在栏内滚动。
   网格按 flex-basis 0 计入行高，右栏只要求「剧信息 + 两行集数」的高度：左列比这矮（约 1200 宽以下）时右栏比左列长，换选集仍可用。
   设计稿右栏是 sticky + 视口高度，左右底部对不齐。 */
.player-route .reference-player { row-gap: 20px; align-content: start; }
.reference-player > .player-title-row { grid-column: 1 / -1; }
.player-route .reference-player .reference-player-actions { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .player-route .reference-player .reference-episodes { position: static; align-self: stretch; height: auto; max-height: none; overflow: hidden; }
  .player-route .reference-player .reference-episodes .episode-grid { flex: 1 1 0; min-height: 86px; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 767px) {
  .player-route .reference-player .reference-player-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* 播放页底部推荐栏 */
.pc-watch-page .related-shelf { margin-top: 32px; }

/* 最后一集播完的「Up next」卡片：盖在播放器上（挂在 #player 里，浏览器全屏时也看得见） */
.reference-player .player-root .up-next { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: #000000b8; backdrop-filter: blur(2px); }
.up-next-card { display: flex; gap: 18px; align-items: stretch; max-width: min(520px, calc(100% - 32px)); padding: 18px; border-radius: 10px; background: #141519f2; border: 1px solid #ffffff1a; box-shadow: 0 12px 40px #0009; }
.up-next-card img { width: 96px; height: 144px; flex-shrink: 0; object-fit: cover; border-radius: 6px; background: #17181c; }
.up-next-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; justify-content: center; }
.up-next-eyebrow { color: #ff5a66; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.up-next-title { font-size: 18px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.up-next-count { color: #b9bbc4; font-size: 13px; font-variant-numeric: tabular-nums; }
.up-next-actions { display: flex; gap: 10px; margin-top: 6px; }
.reference-player .player-root .up-next-actions button { padding: 9px 18px; border-radius: 6px; border: 1px solid #ffffff24; background: #ffffff0f; font-size: 13px; }
.reference-player .player-root .up-next-actions button.primary { background: #e50914; border-color: #e50914; color: #fff; }