/* 六期 R6 观看模式（ui/watch.js）。播放器在上、当前句逐词卡在下、句子列表在右（手机上在下）。逐词卡沿用 spellkit.css 的 .sk .ana-* 配色。 */
.wt{--wt-bar:#1f2433;--wt-bar-ink:#f3ecdc;--wt-on:#f2e3bf;padding-top:14px}
html[data-theme="dark"] .wt{--wt-on:#3a4650}
.wt-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:12px}
.wt-top .wt-back{font-size:13px;padding:6px 0;min-height:0}
.wt-h{font:600 20px/1.3 Cormorant,Georgia,serif;margin:0;flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.wt-go{display:flex;gap:6px;flex-wrap:wrap}
.wt-go .wt-b{background:var(--paper);color:var(--ink);border:1px solid #ccc3ae;font-size:13px;padding:6px 12px}
.wt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.wt-main{min-width:0}
.wt-stage{position:relative;aspect-ratio:16/9;background:#0e1018;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px #2a223014}
.wt-player,.wt-player>div,.wt-player iframe,.wt-player video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.wt-player video{object-fit:contain;background:#0e1018}
.wt-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center;color:#f6efdd;
 background:radial-gradient(ellipse at 30% 20%,#56607e 0%,transparent 60%),radial-gradient(ellipse at 80% 90%,#7c5a6e 0%,transparent 55%),#232838}
.wt-cover-t{font:600 clamp(18px,3vw,28px)/1.3 Cormorant,Georgia,serif;margin:0;max-width:90%}
.wt-cover-s{font-size:12px;opacity:.75;margin:0}
.wt-cover-s{max-width:92%}.wt-pickvid{position:relative;margin-top:10px;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid #f6efdd99;border-radius:999px;background:#ffffff14;color:#f6efdd;font-size:13px;cursor:pointer}
.wt-cover .wt-bigplay{flex:none}
@media (max-width:700px){.wt-cover{gap:3px;padding:8px 12px}.wt-cover-t{font-size:17px}.wt-cover .wt-bigplay{width:46px;height:46px;margin-top:2px;font-size:18px}.wt-pickvid{margin-top:4px;min-height:36px;padding:4px 12px}}
.wt-pickvid:hover{background:#ffffff2a}.wt-pickvid input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}   /* R6：视频课这台设备上没有视频，在封面上选文件 */
.wt-bigplay{margin-top:10px;width:64px;height:64px;border-radius:50%;border:2px solid #f6efdd;background:#ffffff1a;color:#f6efdd;font-size:24px;cursor:pointer}
.wt-bigplay:hover{background:#ffffff33}
.wt-err{position:absolute;left:10px;right:10px;bottom:10px;background:#000000c0;color:#fff;font-size:13px;line-height:1.5;padding:8px 12px;border-radius:8px}
.wt-hint{margin:6px 0 0}
.wt-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--wt-bar);color:var(--wt-bar-ink);border-radius:10px;padding:6px 8px;margin-top:10px}
.wt-b{min-height:40px;min-width:40px;border-radius:8px;border:1px solid #ffffff26;background:transparent;color:inherit;font-size:15px;line-height:1;padding:6px 10px;cursor:pointer}
.wt-ctrl .wt-b:hover{background:#ffffff14}
.wt-b[aria-pressed="true"]{background:#f2c66d;color:#1b2140;border-color:#f2c66d}
.wt-b[data-big]{font-size:18px;min-width:48px}
.wt-count{font:600 14px/1 ui-monospace,Menlo,monospace;letter-spacing:.04em;padding:0 8px;margin-right:auto}
.wt-rate select{min-height:40px;border-radius:8px;border:1px solid #ffffff26;background:var(--wt-bar);color:inherit;padding:0 6px;font-size:14px}
.wt-card{background:var(--paper);border:1px solid #e0d7c4;border-radius:10px;padding:4px 14px 12px;margin-top:10px;min-height:150px}
.wt .sk .sk-ana{margin:20px 0 4px;gap:20px 8px}
.wt .sk .ana-t{font-size:clamp(19px,2.4vw,28px)}
.wt-szh{font-size:16px;margin-top:8px}
.wt-wait{font-size:12px;opacity:.7}
.wt-wline{text-align:center;font-size:13px;color:var(--muted);margin-top:10px;min-height:2.2em;line-height:1.7}
.wt-wline b{font-size:17px;color:var(--ink);margin-right:4px}
.wt-wline .ipa{color:var(--muted);margin-right:6px}
.wt-wbtns{display:inline-flex;gap:4px;margin-left:6px}
.wt-wbtns .btn{border:1px solid #ccc3ae;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;margin-left:0}
.wt-wbtns .sk-vocab.on{background:var(--green);color:#fffaf0;border-color:var(--green)}
.wt-foot{margin-top:8px}
.wt-off .wt-b{min-height:26px;min-width:26px;padding:0 6px;font-size:13px;color:var(--ink);border-color:#ccc3ae}
.wt-side{min-width:0;background:var(--paper);border:1px solid #e0d7c4;border-radius:10px;padding:10px 6px 6px}
.wt-side-h{font-size:14px;margin:0 8px 6px;display:flex;justify-content:space-between;align-items:baseline}
.wt-side-h small{color:var(--muted);font-weight:400}
.wt-list{list-style:none;margin:0;padding:0;max-height:46vh;overflow:auto;overscroll-behavior:contain;position:relative}
.wt-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 6px;width:100%;text-align:left;background:transparent;border:0;border-left:3px solid transparent;border-radius:6px;padding:7px 8px;cursor:pointer;color:var(--ink);font:inherit;min-height:0}
.wt-row:hover{background:#00000008}
.wt-row.on{background:var(--wt-on);border-left-color:#c9962f}
.wt-ts{font:12px/1.6 ui-monospace,Menlo,monospace;color:var(--muted)}
.wt-en{font-size:14px;line-height:1.45}
.wt-zh{grid-column:2;font-size:12px;color:var(--muted);line-height:1.5}
.wt-nosubs .wt-card,.wt-nosubs .wt-zh{display:none}
.wt-mine-row{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #e6dfcd}
.wt-mine-row small{color:var(--muted);margin-left:4px}
.wt-demos .secondary{margin-top:8px}
.wt-new textarea{width:100%;font:13px/1.5 ui-monospace,Menlo,monospace}
/* 电脑：句子列表放右边，跟着页面固定 */
@media(min-width:980px){
 #app[data-route^="/watch?"] .app-shell{width:min(100%,1280px)}
 .wt-grid{grid-template-columns:minmax(0,1fr) 360px;gap:20px}
 .wt-stage{aspect-ratio:auto;height:min(50dvh,calc((100vw - 460px)*9/16))}
 .wt-side{position:sticky;top:12px}
 .wt-list{max-height:calc(100dvh - 120px)}
}
@media(max-width:560px){
 .wt-h{font-size:18px;flex-basis:100%}
 .wt-go{width:100%}.wt-go .wt-b{flex:1}
 .wt-b{min-width:38px;padding:6px 8px}
 .wt-stage{border-radius:8px;margin:0 -8px}
}

/* ---- 右上角：沉浸、全屏 ---- */
.wt-view{display:flex;gap:6px;margin-left:auto}
.wt-view .wt-b{background:var(--paper);color:var(--ink);border:1px solid #ccc3ae;font-size:13px;padding:6px 12px}
.wt-view .wt-b[aria-pressed="true"]{background:#f2c66d;color:#1b2140;border-color:#f2c66d}

/* ---- 沉浸模式（所有设备）和整页全屏：藏掉站点顶栏、导航、页脚，观看区占满窗口 ---- */
html.wt-imm .top-brand,html.wt-imm .tabbar,html.wt-imm .site-footer,html.wt-imm .back-link.wt-back{display:none!important}
html.wt-imm .app-shell{width:100%!important;max-width:none!important;padding:0 12px!important;border:0!important;display:block!important;min-height:100dvh}
html.wt-imm #main{padding:0}
.wt:fullscreen{background:var(--wt-fs-bg,#0f1730);color:var(--ink);overflow:auto;padding:10px 14px;box-sizing:border-box}
.wt:-webkit-full-screen{background:var(--wt-fs-bg,#0f1730);overflow:auto;padding:10px 14px}
html:not([data-theme="dark"]) .wt{--wt-fs-bg:#efe7d6}
html.wt-imm .wt,.wt:fullscreen{padding-top:8px}
html.wt-imm .wt-top,.wt:fullscreen .wt-top{margin-bottom:8px}
html.wt-imm .wt-h,.wt:fullscreen .wt-h{font-size:17px}
@media(min-width:980px){
 html.wt-imm .wt,.wt:fullscreen{height:100dvh;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}
 html.wt-imm .wt-grid,.wt:fullscreen .wt-grid{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 400px}
 html.wt-imm .wt-main,.wt:fullscreen .wt-main{height:100%;overflow:auto}
 html.wt-imm .wt-stage,.wt:fullscreen .wt-stage{height:min(56dvh,calc((100vw - 470px)*9/16))}
 html.wt-imm .wt-side,.wt:fullscreen .wt-side{position:static;height:100%;display:flex;flex-direction:column;box-sizing:border-box}
 html.wt-imm .wt-list,.wt:fullscreen .wt-list{max-height:none;flex:1;min-height:0}
}
@media(max-width:979px){html.wt-imm .wt-list,.wt:fullscreen .wt-list{max-height:40dvh}
 html.wt-imm .wt-stage{position:sticky;top:0;z-index:5;margin:0 -12px;border-radius:0}   /* 手机沉浸：播放器钉在顶上，往下滑看逐词卡和列表 */
}

/* ---- 词卡：电脑浮层 / 手机底部弹层 ---- */
.wd-layer{position:fixed;inset:0;z-index:60}
.wd-back{position:absolute;inset:0;background:transparent}
.is-sheet .wd-back{background:#0008}
.wd-card{position:absolute;background:var(--paper-solid,#fffaf0);color:#2c2a24;border:1px solid #d9cfb9;border-radius:14px;box-shadow:0 14px 40px #0005;padding:12px 16px 0;max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;font-size:14px;line-height:1.55}
html[data-theme="dark"] .wd-card{background:#1c2a49;color:#f1e9d8;border-color:#3b4a6a}
.is-sheet .wd-card{left:0;right:0;bottom:0;top:auto;width:auto!important;max-height:78dvh;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom)}
.is-sheet .wd-card:before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:#9994;margin:0 auto 8px}
.wd-loading,.wd-none{color:#8a8473;padding:12px 0}
.wd-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wd-head h2{margin:0;font:600 26px/1.2 Cormorant,Georgia,serif;letter-spacing:.01em}
.wd-tools{display:flex;gap:6px}
.wd-icon{width:30px;height:30px;border-radius:50%;border:1px solid #cdc3ad;background:transparent;color:inherit;font-weight:700;cursor:pointer;line-height:1}
.wd-ph{display:flex;flex-wrap:wrap;gap:4px 16px;margin:4px 0 2px;color:#7a7462}
html[data-theme="dark"] .wd-ph{color:#c3c0b5}
.wd-ipa small{font-size:11px;border:1px solid currentColor;border-radius:3px;padding:0 3px;margin-right:2px;opacity:.8}
.wd-say{border:0;background:transparent;cursor:pointer;font-size:15px;padding:2px 4px;color:inherit}
.wd-chips{margin:4px 0}.wd-chips .chip{margin:0 4px 0 0}
.wd-state[data-state=new]{border-color:#d59a5a;color:#b06f2a}.wd-state[data-state=learning]{border-color:#6f9cf0;color:#4f7bd0}.wd-state[data-state=mastered]{border-color:#5cc28a;color:#3a9a66}
.wd-here{background:#f2c66d22;border-left:3px solid #f2c66d;padding:4px 8px;margin:8px 0;border-radius:4px}
.wd-here i,.wd-defs i{font-style:normal;color:#8a8473;margin-right:4px}
html[data-theme="dark"] .wd-here i,html[data-theme="dark"] .wd-defs i{color:#b9bcc4}
.wd-sec{border-top:1px solid #e6dfcd55;padding:8px 0 4px}
.wd-sec h3{font-size:12px;letter-spacing:.08em;color:#8a8473;margin:0 0 4px;font-weight:600;display:flex;align-items:center;gap:4px}
.wd-defs{margin:0;padding-left:0;list-style:none}.wd-defs li{margin:2px 0}
.wd-ex{font:17px/1.45 Cormorant,Georgia,serif;margin:0}
.wd-ex mark{background:#f2c66d66;color:inherit;border-radius:3px;padding:0 2px}
.wd-exzh{margin:2px 0 0;color:#6f6852}html[data-theme="dark"] .wd-exzh{color:#c9c3b2}
.wd-src{font-size:11px;color:#8a8473;margin:2px 0 0}.wd-src a{color:inherit}
.wd-forms{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0}
.wd-forms small{color:#8a8473;margin-right:2px}
.wd-go{border:0;background:transparent;color:#4f7bd0;text-decoration:underline;cursor:pointer;padding:0;font:inherit}
html[data-theme="dark"] .wd-go{color:#9fb6e8}
.wd-extra{display:flex;gap:10px;align-items:flex-start;border-top:1px solid #e6dfcd55;padding:8px 0 4px;font-size:13px}
.wd-extra p{margin:0 0 3px}
.wd-story{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;font-size:12px;flex:0 0 96px}
.wd-story img{width:96px;height:72px;object-fit:cover;border-radius:6px;border:1px solid #d9cfb9}
.wd-dsrc{font-size:11px;color:#8a8473;margin:4px 0 0}
.wd-foot{position:sticky;bottom:0;background:inherit;padding:10px 0 12px;margin-top:6px;border-top:1px solid #e6dfcd55}
.wd-book{width:100%;min-height:42px;border-radius:999px;border:1px solid var(--green,#4c6146);background:var(--green,#4c6146);color:#fffaf0;font-size:14px;cursor:pointer}
.wd-book.on{background:transparent;color:inherit;border-color:#cdc3ad}
.wd-book:disabled{opacity:.5}
.wd-rbox{background:#0000000a;border-radius:8px;padding:8px;margin:6px 0}
.wd-rbox p{margin:0 0 6px}.wd-rk{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.wd-rk .chip{cursor:pointer;background:transparent;color:inherit}.wd-rk .chip.on{background:#f2c66d;color:#1b2140}
.wd-rbox textarea{width:100%;box-sizing:border-box;margin-bottom:6px}
.wd-rdone{color:#3a9a66}
.ana-w.on .ana-t{color:var(--sk-gold)}
@media(max-width:560px){.wt-view{width:100%}.wt-view .wt-b{flex:1}}
.wt-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#1f2433;color:#f3ecdc;padding:10px 16px;border-radius:8px;font-size:14px;opacity:0;transition:opacity .2s;z-index:70;pointer-events:none}
.wt-toast.show{opacity:1}

/* ---- 观看模式课的拼句/听写：原声播放器常驻屏幕（YouTube 条款：可见、不小于 200×200）---- */
.md-dock{position:fixed;right:16px;bottom:16px;z-index:40;width:356px;background:#1f2433;color:#f3ecdc;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px #0006}
.md-stage{position:relative;width:100%;height:200px;background:#0e1018}
.md-player,.md-player>div,.md-player iframe,.md-player video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.md-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;font:600 18px/1.3 Cormorant,Georgia,serif;pointer-events:none;
 background:radial-gradient(ellipse at 30% 20%,#56607e 0%,transparent 60%),radial-gradient(ellipse at 80% 90%,#7c5a6e 0%,transparent 55%),#232838}
.md-bar{display:flex;gap:6px;padding:6px 8px 0}
.md-bar button{flex:1;min-height:34px;border-radius:8px;border:1px solid #ffffff26;background:transparent;color:inherit;font-size:13px;cursor:pointer}
.md-bar button[aria-pressed="true"]{background:#f2c66d;color:#1b2140;border-color:#f2c66d}
.md-state{margin:0;padding:4px 10px 8px;font-size:12px;opacity:.85}
.md-state[data-kind^=md_tts],.md-state[data-kind^=md_fail]{color:#f2c66d}
.md-state[data-kind=md_tap]{color:#ffb38a}
/* 宽屏：内容往左让出右边一栏给播放器；AI 老师小兔挪到播放器上面 */
@media(min-width:1000px){body.md-on .app-shell{width:min(1120px,calc(100vw - 420px))!important;margin-left:max(16px,calc((100vw - 400px - min(1120px,calc(100vw - 420px)))/2));margin-right:auto}
 body.md-on .tu{--tu-b:calc(16px + 290px)}}
@media(max-width:999px){
 .md-dock{left:0;right:0;top:0;bottom:auto;width:auto;border-radius:0 0 12px 12px}
 .md-stage{max-width:356px;margin:0 auto}
 .md-bar{padding-top:4px}.md-bar button{min-height:30px}.md-state{padding:2px 10px 6px}
 body.md-on .app-shell{padding-top:258px}
 body.md-on .top-brand,body.md-on #main>.page-heading{display:none}   /* 手机：播放器、打字区、键盘要同屏，站点顶栏和大标题先藏 */
 body.md-on #main>.back-link{min-height:0;padding:4px 0}
}

/* ---- 边看边玩：词卡区换成这一句的拼句/听写；只看模式照旧 ---- */
.wt-seg{display:inline-flex;border:1px solid #ccc3ae;border-radius:999px;overflow:hidden}
.wt-seg .wt-b{border:0;border-radius:0;background:transparent;color:var(--ink);font-size:13px;padding:6px 12px;min-height:36px}
.wt-seg .wt-b[aria-pressed="true"]{background:#f2c66d;color:#1b2140}
.wt-gamebox{display:none;margin-top:10px;padding:10px 14px}
.wt-playmode .wt-gamebox{display:block}
.wt-playmode .wt-card,.wt-playmode .wt-foot .wt-off{display:none}
.wt-gmode{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.wt-gmode .wt-b{background:transparent;color:var(--ink);border:1px solid #ccc3ae;font-size:13px;min-height:32px;padding:4px 10px}
.wt-gmode .wt-b[aria-pressed="true"]{background:#f2c66d;color:#1b2140;border-color:#f2c66d}
.wt-gmode .caption{margin-left:auto}
.wt-gamebox [data-wt=game]>h2:first-child{display:none}
.wt-mark{display:block;color:#e0b34a;font-size:11px;letter-spacing:-1px;min-height:1em}
/* 边看边玩（手机/窄屏）：视频钉在顶上，往下是拼句/听写和键盘，视频一直在画面上（YouTube 播放器不能藏） */
@media(max-width:979px){.wt-playmode .wt-stage{position:sticky;top:0;z-index:6;margin-left:-8px;margin-right:-8px;border-radius:0}
 .wt-playmode .wt-hint{display:none}}
.wt-mark{font-size:12px}

/* ---- 11-11 布局改：做题区就在视频正下方（边看边玩），大而醒目 ---- */
.wt-go{display:none}
.wt-playmode .wt-gamebox{display:block;margin:10px 0 0;padding:10px 16px 16px;border:2px solid #f2c66d;border-radius:12px;background:var(--paper);box-shadow:0 6px 20px #f2c66d22;min-height:240px}
.wt-gtabs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.wt-gtab{min-height:38px;padding:6px 14px;border-radius:999px;border:1px solid #ccc3ae;background:transparent;color:var(--ink);font-size:15px;cursor:pointer}
.wt-gtab[aria-selected="true"]{background:#f2c66d;color:#1b2140;border-color:#f2c66d;font-weight:600}
.wt-full{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:13px;text-decoration:underline;cursor:pointer}
.wt-gtts{font-size:12px;border:1px solid #e0b34a;color:#c08a1e;border-radius:4px;padding:1px 6px}
.wt-gbody{border:0!important;margin:0!important;padding:0!important;background:transparent!important}
.wt-gbody>h2:first-child,.wt-gbody .zj-part:first-of-type{display:none}
.wt-gbody .slot{font-size:22px}
.wt-wait-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:180px;text-align:center}
.wt-wait-n{font-size:18px;margin:0}
.wt-wait-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:10px}
.wt-wait-btns .primary,.wt-wait-btns .secondary{min-width:160px}
.wt-next-note{margin:0 0 4px;text-align:center;color:#3a9a66;font-weight:600}
.wt-shadow .wt-sh-res{text-align:center;margin:10px 0 0;font-size:15px;line-height:1.8}
.wt-sh-res .ok{color:#3a9a66}.wt-sh-res .miss{color:#c0563f;text-decoration:underline dotted}
.wt-sh-hit{font-weight:700;margin-right:6px}.wt-sh-hit.ok{color:#3a9a66}
.wt-textonly{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;color:#f6efdd;background:#232838;z-index:3}
.wt-textonly p{max-width:34em;margin:0;line-height:1.6}
.wt-istext .wt-stage{aspect-ratio:auto;height:auto;min-height:150px}
.wt-istext .wt-textonly{position:relative;inset:auto;min-height:150px}
.wt-istext .wt-player{display:none}
.wt-keys-play{display:none}.wt-playmode .wt-keys-play{display:inline}.wt-playmode .wt-keys-watch{display:none}
@media(max-width:979px){.wt-playmode .wt-gamebox{margin-left:-8px;margin-right:-8px;border-radius:10px}}
.wt-textonly[hidden]{display:none!important}   /* hidden 属性要压过上面的 display:flex，不然会盖住播放器挡点击 */
.wt-full2 .wt-full{margin:0;font-size:12px;color:var(--ink)}.wt-playmode .wt-full2{display:none}
.wt-tap{margin:.6em 0 0;color:#b45309;font-weight:600}