/* 数字人直播
   ★ 桌面：播放器尽量大（约 78% 宽）+ 右侧窄队列栏；
     移动：播放器置顶满宽，队列在下方。
   ★ 全屏对象是 .pl-stage，全屏时导航/队列/页脚天然不在画面里。
   ★ 与 live-tv.css 结构刻意保持一致 —— 同一站点两个播放页，
     观众的操作位置应当一样，不该各长各的。 */

.pl-wrap { max-width: 1400px; }

.pl-layout { display: flex; gap: 18px; align-items: flex-start; }
.pl-stage  { flex: 1 1 auto; min-width: 0; }
.pl-list   { flex: 0 0 260px; max-height: 70vh; overflow-y: auto; }

/* ---- 播放器 ---- */
.pl-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border: 1px solid var(--metal); border-radius: 4px;
  overflow: hidden;
}
.pl-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block; background: #000;
  /* ★ contain 而不是 cover：成片是 1672×942（≈16:9 但不精确），
       cover 会把主播的头顶或下巴裁掉。宁可留黑边也不裁人。 */
  object-fit: contain;
}

/* 自动播放被浏览器拒绝时的手动播放提示 —— 绝不留黑屏 */
.pl-overlay {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
}
.pl-overlay[hidden] { display: none; }
.pl-play {
  padding: 14px 28px; font-size: 15px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--gold);
  background: rgba(0,0,0,.6); color: var(--gold);
}
.pl-play:hover { background: var(--gold); color: #0B0D10; }

/* 全屏：整个 stage 铺满，只留画面 */
.pl-stage.is-fs { background: #000; display: flex; flex-direction: column; }
.pl-stage.is-fs .pl-frame { flex: 1 1 auto; aspect-ratio: auto; border: 0; border-radius: 0; }
.pl-stage.is-fs .pl-bar,
.pl-stage.is-fs .pl-meta { display: none; }

/* ---- 控制条 ---- */
.pl-bar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-top: 10px;
}
.pl-now { font-size: 16px; font-weight: 600; color: var(--text); }
.pl-spacer { flex: 1 1 auto; }
.pl-meta { margin: 8px 0 0; line-height: 1.8; }

/* ---- 队列 ---- */
.pl-list-head { margin: 0 0 8px; }
.pl-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--metal); border-radius: 4px;
  background: var(--panel-2, #14181d); color: var(--text);
}
.pl-item:hover { border-color: var(--gold); }
.pl-item.on { border-color: var(--gold); background: rgba(212,175,55,.10); }
.pl-item-name { display: block; font-size: 13px; line-height: 1.6; }
.pl-item-meta { display: block; margin-top: 3px; }

/* ---- 移动端 ---- */
@media (max-width: 900px) {
  .pl-layout { flex-direction: column; }
  .pl-list { flex: 1 1 auto; width: 100%; max-height: none; }
}