/*
 * course.css — 目录页与播放页共用样式
 * ==========================================================================
 * 版面依据：网站运营/course-player-preview.html
 * CSS 变量与主站 index.html 同一套（22/23 完全一致），不另起。
 * 预览稿里的「预览控制条」与假课件画面不在此文件内 —— 那是给 YAYA 看的。
 */

:root {
  --bg-1: #f7eefb; --bg-2: #efe3fa; --bg-3: #f6d9ea; --bg-4: #f6dfc8; --bg-5: #d8c5f3;
  --surface: rgba(255,255,255,.26);
  --surface-strong: rgba(255,255,255,.34);
  --surface-soft: rgba(255,255,255,.18);
  --line: rgba(255,255,255,.34);
  --line-strong: rgba(255,255,255,.48);
  --text: #2c2143;
  --muted: #645779;
  --primary: #8b5cf1; --primary-dark: #7549db; --primary-soft: rgba(139,92,241,.14);
  --peach: #f3b996; --gold: #e8c488;
  --shadow: 0 24px 70px rgba(98,70,145,.16);
  --shadow-soft: 0 14px 38px rgba(98,70,145,.12);
  --radius-lg: 28px; --radius-md: 22px; --radius-sm: 14px;

  /* 左右栏宽比。放成变量方便日后调，改这一个数就够。 */
  --split: 75;
}

* { box-sizing: border-box; }

html { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.65;
  background:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,.64), transparent 18%),
    radial-gradient(circle at 78% 14%, rgba(246,223,200,.78), transparent 22%),
    linear-gradient(150deg, var(--bg-1), var(--bg-2) 32%, var(--bg-3) 62%, var(--bg-5));
  background-attachment: fixed;
}

/* ======================= 页面外壳（导航条 + 页尾） =======================
 * 🔴 全站唯一实现。样式**只许写在这一区**，不许散落到各页面自己的 <style>，
 *    也不许由 JS 传参进来 —— 外观固定是这套外壳存在的全部意义。
 *    结构由 public/js/course-chrome.js 生成；页面自己不写 <header>/<footer>
 *    （selfcheck_web 有一条断言钉着）。
 *
 * 背景/模糊/边框这几个值**抄自主站 ielts-production/index.html 的 .site-header**
 * （96-111 行），不是照截图猜的：
 *    position: sticky; top: 0; z-index: 50
 *    background: rgba(255,255,255,.14)
 *    border-bottom: 1px solid rgba(255,255,255,.26)
 *    backdrop-filter: blur(18px)
 *    .inner min-height: 82px / display:flex / align-items:center
 * 页尾用同一组变量与同一个 .chrome-inner，两者不各写各的。
 *
 * 🔴 z-index 50 是有上限含义的：伪全屏的 #playerFs 是 z-index 500 的 fixed 元素，
 *    导航条必须落在它下面。改这个数之前先看全屏那一区。
 * 🔴 导航条**不是** #playerFs 的祖先（它是 body 的直接子节点，与 .wrap 平级），
 *    所以这里的 backdrop-filter 不会给 position:fixed 的全屏元素偷走包含块。
 *    这是 P3-2d 踩过的坑，动结构时要守住这一点。
 * ---------------------------------------------------------------------- */
.chrome-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.chrome-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 26px;
  min-height: 82px;
  display: flex; align-items: center; gap: 20px;
}
.chrome-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.chrome-logo { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; display: block; }
.chrome-name { font-weight: 800; letter-spacing: .4px; font-size: 15px; white-space: nowrap; }
.chrome-name-a { color: var(--text); }
.chrome-name-b { color: var(--primary-dark); }

.chrome-crumb {
  font-size: 13px; color: var(--muted);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chrome-crumb i { font-style: normal; opacity: .5; margin: 0 6px; }
.chrome-crumb a { color: inherit; text-decoration: none; }
.chrome-crumb a:hover { color: var(--primary-dark); }

.chrome-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.chrome-actions { display: flex; align-items: center; gap: 8px; }
.chrome-acct { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.chrome-email { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chrome-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--primary), var(--peach));
}
.chrome-action, .chrome-logout {
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .55);
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 99px; cursor: pointer;
  text-decoration: none; transition: .18s; white-space: nowrap;
}
.chrome-action:hover:not(:disabled), .chrome-logout:hover:not(:disabled) { background: #fff; }
.chrome-logout:disabled { opacity: .55; cursor: default; }

.chrome-footer {
  margin-top: 48px;
  background: rgba(255, 255, 255, .14);
  border-top: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.chrome-footer-inner {
  min-height: 64px;
  justify-content: center;
  font-size: 12.5px; color: var(--muted);
}

/* 手机：导航条保持**一行不换行**。
 * 390px 上「logo+站名 / 面包屑 / 邮箱 / 头像 / 登出」五样塞不下，必须舍一样。
 * 舍面包屑 —— 这也是改版前的做法（旧 CSS 在 ≤900px 就 .crumb{display:none}），
 * 不是本次新造的取舍。登出必须留着：它是这一屏唯一的出口。 */
@media (max-width: 720px) {
  .chrome-inner { padding: 0 14px; gap: 10px; min-height: 60px; flex-wrap: nowrap; }
  .chrome-crumb { display: none; }
  .chrome-brand { gap: 9px; }
  .chrome-logo { width: 32px; height: 32px; }
  .chrome-name { font-size: 14px; }
  .chrome-right { gap: 8px; }
  .chrome-email { max-width: 11ch; }
  .chrome-action, .chrome-logout { padding: 5px 11px; }
  .chrome-footer-inner { min-height: 56px; text-align: center; padding: 0 14px; }
}

/* ---------- 容器 ---------- */
.wrap { max-width: 1400px; margin: 0 auto; padding: 8px 26px 40px; }
.card {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---------- 通用 ---------- */
.notice {
  padding: 14px 18px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.5); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted); margin-bottom: 16px;
}
.notice b { color: var(--text); }
.btn {
  border: 1px solid var(--line-strong); background: rgba(255,255,255,.55);
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 15px; border-radius: 99px; cursor: pointer; transition: .18s;
}
.btn:hover:not(:disabled) { background: #fff; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--primary); color: #fff; border-color: transparent; }
.btn.primary:hover:not(:disabled) { background: var(--primary-dark); }
.center-msg { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 14px; }

/* ================= 目录页 ================= */
.cat-head { display: flex; align-items: flex-end; gap: 14px; padding: 6px 4px 18px; flex-wrap: wrap; }
.cat-title { font-size: 22px; font-weight: 800; letter-spacing: .3px; margin: 0; }
.cat-meta { font-size: 12.5px; color: var(--muted); margin-left: auto; display: flex; gap: 14px; align-items: center; }
.pill {
  font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 99px;
  background: var(--primary-soft); color: var(--primary-dark);
}
.pill.warn { background: rgba(243,185,150,.28); color: #8a5a2b; }
.pill.lock { background: rgba(100,87,121,.14); color: var(--muted); }

.chapter { margin-bottom: 26px; }
.chapter-h {
  font-size: 13px; font-weight: 700; color: var(--text); opacity: .62;
  letter-spacing: .6px; margin: 0 0 12px; padding-left: 4px;
}
.lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }

.lesson {
  border: 0; padding: 0; text-align: left; font: inherit; color: inherit;
  background: var(--surface-strong); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  overflow: hidden; cursor: pointer; transition: .18s; display: block; width: 100%;
}
.lesson:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); }
.lesson:disabled { cursor: default; opacity: .72; }
.lesson-thumb {
  position: relative; aspect-ratio: 16/9; background: #ded6ee; overflow: hidden;
}
.lesson-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lesson-thumb .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85); font-size: 12px;
  background: linear-gradient(140deg, var(--bg-5), var(--peach));
}
.lesson-dur {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(20,16,33,.72); color: #fff; font-size: 11px;
  padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums;
}
.lesson-lockicon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(30,24,50,.42); color: #fff; font-size: 22px;
}
.lesson-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.35); }
.lesson-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--peach)); }
/* 🔴 目录卡片必须有课名文字：第三章那 20 张封面是同一套模板，
      缩到 480x270 后只有中间大字看得清，题型英文名会偏小 */
.lesson-body { padding: 11px 13px 13px; }
.lesson-name { font-size: 13.5px; font-weight: 600; line-height: 1.5; margin: 0 0 5px; }
.lesson-sub { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.lesson-sub .done { color: var(--primary-dark); font-weight: 700; }

/* ================= 播放页 ================= */
.grid {
  display: grid;
  grid-template-columns: calc(var(--split) * 1%) calc((100 - var(--split)) * 1%);
  gap: 20px; align-items: start;
}
.player { overflow: hidden; padding: 0; }
/* 视频上方标题栏：只显示课名，别的都不要 */
.player-head {
  padding: 15px 24px; border-bottom: 1px solid var(--line);
  font-size: 15.5px; font-weight: 700; letter-spacing: .2px;
}
.stage { position: relative; aspect-ratio: 16/9; background: #141021; overflow: hidden; }
/* 竖屏那一节（1080x1920）：按 9:16 收窄并居中，
   两侧留的是卡片背景而不是播放器黑边——视觉上是"一张竖着的卡片"，
   不是"16:9 里塞了个竖视频" */
.stage[data-orientation="portrait"] {
  aspect-ratio: 9/16;
  max-height: calc(100vh - 260px);
  width: auto; margin: 0 auto; background: #141021;
}
.stage video { width: 100%; height: 100%; display: block; background: #141021; object-fit: contain; }
/* 🔴 width/height 必须显式写。canvas 是替换元素，position:absolute + inset:0
   不会给它定尺寸——它会按 width/height **属性**的固有尺寸排版。
   属性是 CSS 尺寸 × dpr，所以少了这两行，画布就被排成两三倍大：
   画布坐标 1:1 映射到屏幕（字大一倍），且只有左上角那块落在舞台里
   （水印漂到别处就整行看不见）。dpr 越高越离谱。 */
.wm-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 6;
}
/* 🔴 遮罩不吃点击：它盖在整个舞台上（含 .bigplay），一旦因为任何原因留在
   DOM 里，学生连播放按钮都点不到。里面的按钮单独开回来。 */
.stage-msg {
  position: absolute; inset: 0; z-index: 9; display: none;
  align-items: center; justify-content: center; text-align: center;
  background: rgba(20,16,33,.86); color: #fff; font-size: 14px; padding: 24px; line-height: 1.8;
  pointer-events: none;
}
.stage-msg button { pointer-events: auto; }
.stage-msg.show { display: flex; }

/* 控制条 */
.ctrl { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: rgba(255,255,255,.5); border-top: 1px solid var(--line); }
.iconbtn {
  width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--primary); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(139,92,241,.35); transition: .18s;
}
.iconbtn:hover { background: var(--primary-dark); }
.iconbtn.ghost { background: rgba(139,92,241,.12); color: var(--primary-dark); box-shadow: none; font-size: 15px; }
.iconbtn.ghost:hover { background: rgba(139,92,241,.22); }
.bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(139,92,241,.18); position: relative; cursor: pointer; }
.bar .fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--primary), var(--peach)); }
.bar .knob { position: absolute; left: 0; top: 50%; transform: translate(-50%,-50%); width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2.5px solid var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.speedwrap { position: relative; flex: none; }
.speedbtn { border: 1px solid var(--line-strong); background: rgba(255,255,255,.6); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 99px; cursor: pointer; transition: .18s; }
.speedbtn:hover { background: #fff; }
.speedmenu { position: absolute; bottom: calc(100% + 10px); right: 0; background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: none; min-width: 96px; z-index: 20; }
.speedmenu.open { display: block; }
.speedmenu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; font-size: 12.5px; padding: 7px 12px; border-radius: 9px; cursor: pointer; color: var(--muted); }
.speedmenu button:hover { background: var(--primary-soft); }
.speedmenu button.on { color: var(--primary-dark); font-weight: 700; background: var(--primary-soft); }

/* 视频下方：只有上一节 / 下一节两个按钮 */
.below { padding: 16px 22px 18px; display: flex; align-items: center; gap: 12px; }
.spacer { flex: 1; }

/* ---------- 右栏 ---------- */
.side { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 150px); }
.tabs { display: flex; gap: 4px; padding: 12px 12px 0; flex: none; }
.tab { flex: 1; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 10px 6px; border-radius: 12px 12px 0 0; cursor: pointer; position: relative; transition: .18s; }
.tab.on { color: var(--primary-dark); background: rgba(255,255,255,.55); }
.tab.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2.5px; border-radius: 3px; background: var(--primary); }
.panelbody { padding: 18px 20px 22px; overflow-y: auto; flex: 1; font-size: 13.5px; line-height: 1.85; color: #3b3255; }
.panelbody h3, .panelbody h4 { font-size: 13px; font-weight: 700; color: var(--primary-dark); margin: 20px 0 8px; letter-spacing: .3px; }
.panelbody h3:first-child, .panelbody h4:first-child { margin-top: 0; }
.panelbody p { margin: 0 0 10px; }
.panelbody ul, .panelbody ol { margin: 0 0 12px; padding-left: 18px; }
.panelbody li { margin-bottom: 6px; }
.panelbody blockquote { margin: 0 0 12px; padding: 10px 14px; background: rgba(255,255,255,.55); border-left: 3px solid var(--primary-soft); border-radius: 0 10px 10px 0; }
.panelbody code { background: rgba(139,92,241,.1); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }
.panelbody a { color: var(--primary-dark); }
.empty-note { color: var(--muted); font-size: 12.5px; }

/* ---------- 「本节说明」专属：标题紧挨正文 + 作业清单自动分列 ----------
   依据：本节说明_排版预览v2.html 里标注「要加进 course.css」的那几行，作者已确认。

   🔴 必须按 #panelNote 收窄，不能写 .panelbody ——
      目录(#panelToc)与本节说明(#panelNote)共用 .panelbody 这个类，
      写成类选择器会把目录一起改掉。
   🔴 只作用于 ul。ol 保持单列不动，正文里写编号步骤时还要用。 */
#panelNote p { margin: 0 0 12px; }
#panelNote p strong { color: var(--primary); font-weight: 600; }
#panelNote ul {
  list-style: none; padding-left: 0; margin: -4px 0 0;
  column-width: 8.4em; column-gap: 14px;
}
#panelNote ul li {
  break-inside: avoid; padding: 1.5px 0;
  /* 🔴 预览里没有这一句，因为预览没有 .panelbody li 那条基础样式。
     不清掉它，每条之间会多出 6px，密度和作者确认的版本对不上。 */
  margin: 0;
  font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.attach { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; margin-top: 14px; }
.attach .ic { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--primary-soft); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.attach .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach .dl { margin-left: auto; flex: none; color: var(--primary-dark); font-weight: 600; cursor: pointer; background: none; border: 0; font: inherit; font-size: 12.5px; }

.toc-h { font-size: 11.5px; font-weight: 700; color: var(--text); opacity: .55; letter-spacing: .6px; margin: 14px 0 6px; padding-left: 10px; }
.toc-h:first-child { margin-top: 0; }
.toc-item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 11px; cursor: pointer; font-size: 12.5px; color: var(--muted); border: 0; background: transparent; font-family: inherit; width: 100%; text-align: left; }
.toc-item:hover { background: rgba(255,255,255,.5); }
.toc-item.on { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.toc-item .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; flex: none; }
.toc-item .dot.done { opacity: 1; }
.toc-item .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-item .dur { margin-left: auto; font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; flex: none; }

/* ---------- 对话框 ---------- */
.mask { position: fixed; inset: 0; background: rgba(30,24,50,.45); display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.mask.show { display: flex; }
.dialog { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow); padding: 24px 24px 20px; max-width: 380px; width: 100%; }
.dialog h3 { margin: 0 0 8px; font-size: 15px; color: var(--text); }
.dialog p { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); line-height: 1.8; }
.dialog .row { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- 手机端：右栏落到播放器下方，不再左右分栏 ---------- */
@media (max-width: 900px) {
  .wrap { padding: 8px 14px 32px; }
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .side { max-height: none; }
  .player-head { font-size: 14.5px; padding: 13px 18px; }
  .spacer { display: none; }
  .below .btn { flex: 1; text-align: center; }
  .stage[data-orientation="portrait"] { max-height: none; width: 100%; }
  .lesson-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .cat-title { font-size: 18px; }
  .ctrl { gap: 8px; padding: 10px 12px; }
  .time { font-size: 11px; }
}

/* ---------- 全屏 ---------- */
.stage:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; max-height: none; }
.stage:-webkit-full-screen { width: 100vw; height: 100vh; }

/* ---------- 大播放按钮（iOS 必须用户手势才能开播，autoplay 会被静默拦截） ---------- */
.bigplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 7; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(139,92,241,.92); color: #fff; font-size: 22px; padding-left: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: .18s; display: flex;
  align-items: center; justify-content: center;
}
.bigplay:hover { background: var(--primary); transform: translate(-50%,-50%) scale(1.06); }
.bigplay[hidden] { display: none; }

/* ---------- 调试角标（长按标题 3 秒） ---------- */
/* 🔴 absolute 且在 .stage 内部：伪全屏时 .stage 变成 z-index:500 的全屏定位元素，
   角标若留在外面会被它盖住，全屏状态的数据就拍不到 —— 这次要查的恰恰是全屏。
   pointer-events:none 一定要留：elementFromPoint 会跳过它，
   否则水印自检会把这个诊断工具本身判成 canvas_covered，加个工具反而把播放弄停。 */
.debug-badge {
  position: absolute; left: 8px; top: 8px; z-index: 20;
  background: rgba(20,16,33,.92); color: #d8c5f3; font-size: 10px; line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 7px 9px; border-radius: 8px;
  max-width: calc(100% - 16px); max-height: calc(100% - 16px); overflow: hidden;
  white-space: pre-wrap; word-break: break-all;
  pointer-events: none;
}
.debug-badge[hidden] { display: none; }

/* 播放器区域：禁选中、禁拖拽 */
/* 🔴 禁选中必须覆盖整张播放卡片，不能只覆盖 .stage。
   长按唤角标时，手指若落在 .player-head 这类有文字的地方，
   iOS 微信会弹出系统的「拷贝/搜一搜/翻译」选字菜单，把长按手势整个抢走。 */
.stage, .stage *, .card.player, .card.player * {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.stage video { pointer-events: none; }   /* 交互全部走我们自己的控制条 */

/* ---------- CSS 伪全屏（元素全屏不可用时的回落） ----------
   为什么需要：iOS 老版本只支持 video.webkitEnterFullscreen()，
   那会进系统原生播放器，把水印 canvas 整个盖掉。
   宁可全屏观感将就，也不能让水印失效。 */
body.pseudo-fs { overflow: hidden; }

/* ---------- 全屏：目标是 #playerFs（画面 + 控制条），不是光秃秃的 .stage ----------
   桌面走元素全屏 → :fullscreen 这一支；iOS 走 CSS 伪全屏 → body.pseudo-fs 这一支。
   两支样式必须一致，否则两条路径的观感会分叉。 */
body.pseudo-fs #playerFs,
#playerFs:fullscreen,
#playerFs:-webkit-full-screen {
  position: fixed; inset: 0; z-index: 500;
  width: 100vw; height: 100vh; margin: 0;
  display: flex; flex-direction: column;
  background: #000; border-radius: 0;
}
/* 画面占满剩余空间；竖屏节的 9:16 限制在全屏下要放开 */
body.pseudo-fs #playerFs .stage,
body.pseudo-fs #playerFs .stage[data-orientation="portrait"],
#playerFs:fullscreen .stage,
#playerFs:fullscreen .stage[data-orientation="portrait"],
#playerFs:-webkit-full-screen .stage,
#playerFs:-webkit-full-screen .stage[data-orientation="portrait"] {
  flex: 1 1 auto; min-height: 0;
  width: 100%; height: auto; max-height: none;
  aspect-ratio: auto; margin: 0; border-radius: 0; background: #000;
}
/* 🔴 全屏下 video 必须显式撑满并 contain。
   只靠 aspect-ratio 撑开的话，容器一变成全屏，video 会塌成 0 高。 */
body.pseudo-fs #playerFs .stage video,
#playerFs:fullscreen .stage video,
#playerFs:-webkit-full-screen .stage video {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* 控制条：全屏内叠在画面底部，**常驻不自动隐藏**。
   自动隐藏 + 手势唤出在手机上很容易做成"点了没反应"，又把学生困在里面一次。
   z-index 要高于水印 canvas(6)，这样它可点；水印仍在 video 之上。 */
body.pseudo-fs #playerFs .ctrl,
#playerFs:fullscreen .ctrl,
#playerFs:-webkit-full-screen .ctrl {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(20,16,33,.72); border-top: 0;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
/* 自动隐藏：只在全屏态生效（选择器本身就带 body.pseudo-fs / :fullscreen），
   非全屏的控制条永远常驻。
   🔴 隐藏时必须 pointer-events:none —— 否则它虽然看不见却还在吃点击，
      学生点画面想唤出控制条，点到的却是透明的进度条。 */
body.pseudo-fs #playerFs.ctrl-hidden .ctrl,
#playerFs:fullscreen.ctrl-hidden .ctrl,
#playerFs:-webkit-full-screen.ctrl-hidden .ctrl {
  opacity: 0; pointer-events: none; transform: translateY(100%);
}
body.pseudo-fs #playerFs .ctrl,
#playerFs:fullscreen .ctrl,
#playerFs:-webkit-full-screen .ctrl {
  transition: opacity .22s ease, transform .22s ease;
}
body.pseudo-fs #playerFs .ctrl .time,
#playerFs:fullscreen .ctrl .time,
#playerFs:-webkit-full-screen .ctrl .time { color: #fff; }
body.pseudo-fs #playerFs .ctrl .speedbtn,
#playerFs:fullscreen .ctrl .speedbtn,
#playerFs:-webkit-full-screen .ctrl .speedbtn { color: #fff; border-color: rgba(255,255,255,.35); }

/* 真全屏下竖屏节也要放开限制 */
.stage:fullscreen[data-orientation="portrait"],
.stage:-webkit-full-screen[data-orientation="portrait"] {
  width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; margin: 0;
}