/* 审片页播放器（player.js）：中央大按钮 + 同宽控制栏 + 原片 / 成片对比（分割线 / 并排）。配色沿用放映台（--stage*）和琥珀记号色。 */

.pl-wrap { position: relative; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pl-wrap video { display: block; width: 100%; max-height: calc(100vh - 390px); aspect-ratio: 9 / 16; object-fit: contain; background: #000; }

.pl-box { position: relative; display: flex; justify-content: center; min-width: 0; }
.pl-mainbox { width: 100%; }
/* 分割线：原片叠在成片上面，按分割线裁掉右边：左 = 原片，右 = 成片 */
.pl-refbox { position: absolute; inset: 0; pointer-events: none; }
.pl-refbox video { height: 100%; width: 100%; max-height: none; }
/* 并排：两个框排一行（左原片、右成片）；横屏片排一列（上原片、下成片） */
.pl-wrap.side { display: flex; gap: 2px; }
.pl-wrap.side.landscape { flex-direction: column; }
.pl-wrap.side .pl-box { flex: 1 1 0; width: auto; display: block; }   /* 块级：flex 项里 aspect-ratio 会把 max-height 反推成宽度，画面跑偏 */
.pl-wrap.side .pl-refbox { position: relative; inset: auto; order: -1; }
.pl-wrap.side video, .pl-wrap.side .pl-refbox video { width: 100%; height: auto; max-height: calc(100vh - 390px); }
.pl-wrap.side.landscape video, .pl-wrap.side.landscape .pl-refbox video { max-height: calc((100vh - 390px) / 2); }
.pl-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 44px; margin-left: -22px; z-index: 3;
  cursor: ew-resize; touch-action: none;
}
.pl-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: var(--mark); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
/* 把手放在上方 1/5 处：中间留给大播放键，下方是字幕条（对比时要看的正是字幕） */
.pl-knob {
  position: absolute; top: 20%; left: 2px; margin-top: -20px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--mark); color: #1b1200; font: 700 0.95rem/1 var(--font); letter-spacing: -0.05em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.pl-wrap.dragging .pl-knob, .pl-divider:focus-visible .pl-knob { transform: scale(1.1); }
.pl-divider:focus-visible { outline: none; }
.pl-tag { position: absolute; top: 8px; z-index: 2; pointer-events: none; white-space: nowrap; padding: 3px 8px; border-radius: 4px; background: rgba(23, 26, 33, .78); color: var(--stage-ink); font-size: 0.78rem; font-weight: 600; }
.pl-tag-l { left: 8px; }
.pl-tag-r { right: 8px; display: none; }
.pl-wrap.comparing .pl-tag-r { display: block; }

/* 对比方式切换：画面顶上居中的小分段按钮（下方是字幕条，中间是播放键，都不能挡） */
.pl-mode { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 5; display: inline-flex;
  border-radius: var(--radius-s); overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); background: rgba(23, 26, 33, .82); }
.pl-mode button { min-height: 36px; padding: 0 10px; border: 0; border-radius: 0; background: transparent; color: #b9bfcc; font-size: 0.8rem; }
.pl-mode button[aria-pressed="true"] { background: var(--stage-ink); color: var(--stage); font-weight: 600; }

/* 中央大按钮：暂停时常显；播放中点画面才淡入，2 秒后淡出 */
.pl-big {
  position: absolute; left: 50%; top: 50%; z-index: 4; width: 84px; height: 84px; margin: -42px 0 0 -42px; padding: 0;
  border-radius: 50%; border: 0; justify-content: center; background: rgba(23, 26, 33, .72); color: #fff;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; transform: scale(.92);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}
.pl-big:hover { background: rgba(23, 26, 33, .88); }
.pl-big .pl-ico { width: 42px; height: 42px; }
.pl-wrap.paused .pl-big, .pl-wrap.peek .pl-big { opacity: 1; pointer-events: auto; transform: scale(1); }
.pl-wrap.comparing .pl-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.pl-wrap.comparing .pl-big .pl-ico { width: 32px; height: 32px; }

/* 外挂字幕（自己画）：白字、黑描边 + 淡阴影，贴在画面底部 6 %；字号由 player.js 按画面高度算。
   字体用系统字体兜底（国内连不上 Google Fonts），中文要有字形。 */
.pl-cap {
  position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .12em;
  padding: 0 4%; text-align: center; pointer-events: none;
  font-family: "Onest", system-ui, -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-weight: 600; line-height: 1.25; color: #fff; letter-spacing: .005em;
}
.pl-cap-line {
  max-width: 100%; padding: .04em .3em; border-radius: 4px; background: rgba(0, 0, 0, .35); overflow-wrap: anywhere;
  -webkit-text-stroke: .14em #000; paint-order: stroke fill;
  text-shadow: 0 0 .12em #000, 0 .06em .18em rgba(0, 0, 0, .8);
}

.pl-ico { width: 24px; height: 24px; fill: currentColor; flex: none; }

/* 控制栏：和放映台同宽，按钮点击区 ≥ 48px */
.pl-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pl-group { display: flex; align-items: center; gap: 4px; }
.pl-btn {
  min-width: 46px; min-height: 48px; padding: 0; justify-content: center; border-radius: var(--radius-s);
  background: var(--stage-2); border: 1px solid #343a48; color: var(--stage-ink);
}
.pl-btn:hover { background: #2d3341; border-color: #465066; }
.pl-play { min-width: 54px; background: var(--mark); border-color: var(--mark); color: #1b1200; }
.pl-play:hover { background: #f2b23a; border-color: #f2b23a; }
.pl-tc {
  flex: 1; min-width: 64px; min-height: 48px; padding: 2px 6px; border: 0; background: none; color: var(--stage-ink);
  flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.pl-tc:hover { background: var(--stage-2); }
.pl-tc-time { font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; }
.pl-tc-frame { font-size: 0.78rem; color: #9aa1b0; }
/* 倍速 / 字幕：点开的小菜单，向上弹 */
.pl-pop { position: relative; }
.pl-rate { min-width: 52px; font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-btn[aria-pressed="true"] { background: var(--stage-ink); border-color: var(--stage-ink); color: var(--stage); }
.pl-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 120px; padding: 4px;
  display: flex; flex-direction: column; gap: 2px; background: var(--stage-2); border: 1px solid #465066;
  border-radius: var(--radius-m); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.pl-menu button { min-height: 44px; justify-content: flex-start; border: 0; background: transparent; color: var(--stage-ink);
  font-size: 0.9rem; white-space: nowrap; }
.pl-menu button:hover { background: #2d3341; }
.pl-menu button[aria-checked="true"] { color: var(--mark); font-weight: 600; }
.pl-menu button[aria-checked="true"]::before { content: "✓"; width: 1em; }
.pl-menu button[aria-checked="false"]::before { content: ""; width: 1em; }

@media (max-width: 900px) {
  .pl-wrap video { max-height: 30vh; width: auto; }
  .pl-refbox video { width: 100%; }
  .pl-wrap.side video, .pl-wrap.side .pl-refbox video { max-height: 30vh; }
  .pl-wrap.side.landscape video, .pl-wrap.side.landscape .pl-refbox video { max-height: 15vh; }
  .pl-bar { margin-top: 8px; gap: 6px; }
  .pl-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .pl-big .pl-ico { width: 32px; height: 32px; }
}
@media (max-width: 520px) {
  .pl-group { gap: 4px; }
  .pl-btn { min-width: 44px; min-height: 44px; }
  .pl-play { min-width: 48px; }
  .pl-tc { padding: 0 2px; }
  .pl-tc-time { font-size: 0.92rem; }
  .pl-tc-frame { font-size: 0.72rem; }
}

/* 画面版本选择（app.js renderEpisode）：桌面一排按钮 + 说明；手机收成一个按钮 + 弹层 */
.variant-pick { display: none; gap: 4px; }
.variant-hint { margin-top: 8px; font-size: 0.8rem; line-height: 1.4; color: #9aa1b0; }
.variant-pop > p.vp-hint { font-weight: 400; font-size: 0.85rem; color: var(--muted); }
.variant-pop ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.variant-pop li button { width: 100%; justify-content: flex-start; min-height: 44px; }
.variant-pop li button[aria-pressed="true"] { border-color: var(--mark); background: var(--mark-soft); color: var(--mark-ink); font-weight: 600; }
@media (max-width: 900px) {
  .variant-seg, .variant-hint { display: none; }
  .variant-pick { display: inline-flex; min-width: 0; }
  .variant-pick .vp-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}