/* 直播电视台
   ★ 桌面：播放器约 78% 宽 + 右侧窄频道栏；移动：播放器置顶满宽，频道在下方。
   ★ 全屏对象是 .tv-stage，全屏时导航/列表/页脚天然不在画面里。 */

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

.tv-filter {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin: 0 0 14px;
}
.tv-filter .type-tabs { flex: 1 1 auto; }
.tv-search {
  flex: 0 0 220px; max-width: 100%;
  padding: 7px 12px; border-radius: 4px;
  border: 1px solid var(--metal); background: var(--panel-2, #14181d);
  color: var(--text); font-size: 13px;
}
.tv-search:focus { outline: none; border-color: var(--gold); }

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

/* ---- 播放器 ---- */
.tv-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border: 1px solid var(--metal); border-radius: 4px;
  overflow: hidden;
}
.tv-frame:focus { outline: 1px solid var(--gold); outline-offset: 2px; }
.tv-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; display: block; background: #000;
}
.tv-status {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; text-align: center;
  padding: 24px; color: var(--muted); font-size: 14px; line-height: 1.8;
  pointer-events: none; background: rgba(0,0,0,.55);
}

/* ---- 休息图（无空档兜底，2026-08-06）----
   ★★ 出现时机：① 频道清单为空 ② 所有频道都播不出来（live-tv.js 的 REST 状态）
   ★★★ object-fit 只允许 contain，绝不 cover —— cover 会把休息图裁掉边，
        而这张图上有文字/人物，裁掉就等于放了一张残图上播出画面。
   ★ z-index 高于 .tv-status：进休息状态时状态文字应该被盖住，
     否则画面上会同时出现"所有频道都暂时无法播放"和休息图，像是出了两个错。 */
.tv-rest {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: #000; overflow: hidden;
}
.tv-rest[hidden] { display: none; }
.tv-rest img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center center;
  display: block;
}
/* ★ 有图时文字退到角落做说明；无图时它是唯一内容，居中显示。
     用 :has() 会有兼容性问题，所以反过来：默认居中，有图时绝对定位到底部。 */
.tv-rest-text {
  color: var(--muted); font-size: 15px; line-height: 1.8;
  text-align: center; padding: 0 24px;
}
.tv-rest img + .tv-rest-text {
  position: absolute; left: 0; right: 0; bottom: 14px;
  font-size: 13px; color: rgba(230, 236, 243, .72);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}

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

/* ---- 控制条 ---- */
.tv-bar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-top: 10px;
}
.tv-now { font-size: 16px; font-weight: 600; color: var(--text); }
.tv-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--metal); color: var(--muted);
}
.tv-spacer { flex: 1 1 auto; }
.tv-desc { margin: 8px 0 0; line-height: 1.8; }
.tv-note { margin: 20px 0 0; line-height: 1.8; }

/* ---- 频道列表 ---- */
.tv-list-head { margin: 0 0 8px; }
.tv-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 12px; margin-bottom: 6px; border-radius: 4px;
  background: var(--panel-2, #14181d); border: 1px solid transparent;
  color: var(--muted); font: inherit;
}
.tv-item:hover { border-color: var(--metal); color: var(--text); }
.tv-item.on { border-color: var(--gold); color: var(--gold); }
.tv-item-name { display: block; font-size: 14px; font-weight: 600; }
.tv-item-meta { display: block; margin-top: 2px; }
/* ★ 只读清单（YouTube 新闻电视台的频道来源）：不是切台按钮，
     所以去掉手型与 hover 反馈 —— 看起来能点却点不动比不给反馈更糟。 */
.tv-item.is-static { cursor: default; }
.tv-item.is-static:hover { border-color: transparent; color: var(--muted); }

/* ---- 移动端：播放器置顶满宽，频道列表在下方 ---- */
@media (max-width: 900px) {
  .tv-layout { flex-direction: column; }
  .tv-list {
    flex: 1 1 auto; width: 100%; max-height: none;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
  }
  .tv-list-head { grid-column: 1 / -1; }
  .tv-item { margin-bottom: 0; }
  .tv-search { flex: 1 1 100%; }
}

/* ==========================================================================
   ★★★ 2026-08-10 真全屏（用户："全屏以后不可以自己缩小，这样右侧还有字，
        一直持续的全屏播放 24 小时"）
   --------------------------------------------------------------------------
   全屏的对象是 .tv-frame（播放区容器），**不是 YouTube 那个 iframe** ——
   iframe 每切一条新闻都会被 destroyPlayer() 销毁重建，全屏挂它身上必掉。
   ========================================================================== */

/* 全屏时的播放区：铺满、纯黑、去掉圆角与比例约束 */
.tv-frame:fullscreen,
.tv-frame:-webkit-full-screen {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  aspect-ratio: auto; border-radius: 0; background: #000;
}
.tv-frame:fullscreen .tv-video,
.tv-frame:-webkit-full-screen .tv-video {
  width: 100%; height: 100%; border: 0;
}

/* ★★ 全屏时把页面其余部分整个藏掉。
     ★ 用 body.tv-fs 这个标记类，不用 :fullscreen 伪类 ——
       全屏的是 .tv-frame，导航/hero/侧栏是它的**祖先**，不在全屏子树里，
       伪类根本选不到它们。 */
body.tv-fs .site-header,
body.tv-fs .site-footer,
body.tv-fs .tv-wrap .hero,
body.tv-fs .tv-list,
body.tv-fs .tv-bar,
body.tv-fs .tv-note { display: none !important; }
body.tv-fs { overflow: hidden; background: #000; }