/* 星火逐日 App · AIGC 动效影片播放器（B3.5） */

/* 全屏影院层：复用 .sheet 显隐机制（is-open / translateY / visibility），覆盖为全屏黑场 */
.video-sheet{
  z-index:60;top:0;height:100%;max-height:100%;
  border:0;border-radius:0;background:#0a0705;box-shadow:none;overflow:hidden;
}

/* ---------- 舞台 ---------- */
.vs-stage{
  position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;
  background:radial-gradient(circle at 50% 32%, #261a12, #0a0705 72%);
}
.vs-media{position:absolute;top:0;left:0;right:0;bottom:0}
.vs-img{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
  opacity:.6;filter:saturate(.92) brightness(.92);
}
.vs-media::after{
  content:"";position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(10,7,5,.6),rgba(10,7,5,.12) 30%,rgba(10,7,5,.18) 55%,rgba(10,7,5,.9));
}
.vs-grain{
  position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;
  background:radial-gradient(circle at 82% 12%, rgba(232,200,135,.12), transparent 42%);
}

/* Ken Burns 运镜：五种方向，时长由 JS 内联 animation-duration 控制 */
@keyframes kbA{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-1.6%,-2%)}}
@keyframes kbB{from{transform:scale(1.16) translate(1.6%,1.2%)}to{transform:scale(1.04) translate(0,0)}}
@keyframes kbC{from{transform:scale(1.12) translate(-2.4%,0)}to{transform:scale(1.12) translate(2.4%,0)}}
@keyframes kbD{from{transform:scale(1.12) translate(2.4%,0)}to{transform:scale(1.12) translate(-2.4%,0)}}
@keyframes kbE{from{transform:scale(1.06) translate(0,2.2%)}to{transform:scale(1.18) translate(0,-2.2%)}}
.vs-img.kb-a{animation:kbA linear forwards}
.vs-img.kb-b{animation:kbB linear forwards}
.vs-img.kb-c{animation:kbC linear forwards}
.vs-img.kb-d{animation:kbD linear forwards}
.vs-img.kb-e{animation:kbE linear forwards}

/* ---------- 顶部条 ---------- */
.vs-top{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 12px;
  background:linear-gradient(180deg,rgba(10,7,5,.78),rgba(10,7,5,0));
}
.vs-btn{
  width:37px;height:37px;border-radius:50%;flex:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(232,200,135,.35);background:rgba(22,14,9,.6);
  color:#e8c887;font-size:15px;line-height:1;
}
.vs-btn:active{background:rgba(58,35,20,.8)}
.vs-kicker{
  flex:1;min-width:0;font-size:11px;letter-spacing:.08em;color:rgba(244,234,214,.72);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vs-badge{
  flex:none;font-size:9px;letter-spacing:.16em;color:#e8c887;white-space:nowrap;
  border:1px solid rgba(232,200,135,.4);border-radius:999px;padding:3px 9px;
  background:rgba(22,14,9,.55);
}

/* ---------- 序幕 ---------- */
.vs-title{
  position:absolute;left:8%;right:8%;top:32%;z-index:4;text-align:center;pointer-events:none;
}
.vs-title .vs-year{
  display:block;font-family:var(--serif);font-size:62px;font-weight:700;line-height:1;
  letter-spacing:.04em;color:#e8c887;text-shadow:0 0 34px rgba(232,200,135,.35);
}
.vs-title .vs-name{
  display:block;margin-top:12px;font-family:var(--serif);font-size:21px;font-weight:700;
  letter-spacing:.08em;line-height:1.55;color:#f4ead6;text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.vs-title .vs-kind{
  display:inline-block;margin-top:16px;font-size:9.5px;letter-spacing:.26em;
  color:rgba(232,200,135,.9);border:1px solid rgba(232,200,135,.42);border-radius:999px;
  padding:4px 15px;background:rgba(22,14,9,.45);
}

/* ---------- 逐句字幕 ---------- */
.vs-cap{
  position:absolute;left:0;right:0;bottom:calc(102px + env(safe-area-inset-bottom));
  z-index:4;padding:0 26px;text-align:center;pointer-events:none;
  opacity:0;
}
.vs-cap.is-in{animation:capIn .55s ease both}
@keyframes capIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.vs-cap span{
  font-family:var(--serif);font-size:15.5px;line-height:1.85;letter-spacing:.05em;color:#f4ead6;
  text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 24px rgba(0,0,0,.65);
}

/* ---------- 寄语 / 落款 ---------- */
.vs-quote{
  position:absolute;left:9%;right:9%;top:36%;z-index:4;text-align:center;pointer-events:none;
  font-family:var(--serif);font-size:17.5px;line-height:2.05;letter-spacing:.06em;color:#e8c887;
  text-shadow:0 2px 12px rgba(0,0,0,.85);
}
.vs-end{
  position:absolute;left:0;right:0;top:39%;z-index:4;text-align:center;pointer-events:none;
}
.vs-end b{
  display:block;font-family:var(--serif);font-size:25px;font-weight:700;
  letter-spacing:.32em;text-indent:.32em;color:#e8c887;
  text-shadow:0 0 26px rgba(232,200,135,.4);
}
.vs-end span{
  display:block;margin-top:12px;font-size:9.5px;letter-spacing:.22em;color:rgba(244,234,214,.62);
}

/* ---------- 底部控件 ---------- */
.vs-ctrl{
  position:absolute;left:0;right:0;bottom:0;z-index:7;
  display:flex;align-items:center;gap:11px;
  padding:26px 16px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(10,7,5,0),rgba(10,7,5,.88) 45%);
}
.vs-track{
  position:relative;flex:1;height:24px;cursor:pointer;touch-action:manipulation;
}
.vs-rail,.vs-fill{
  position:absolute;top:50%;left:0;height:3px;border-radius:99px;
  transform:translateY(-50%);pointer-events:none;
}
.vs-rail{right:0;background:rgba(232,200,135,.2)}
.vs-fill{width:0;background:linear-gradient(90deg,#c9a44a,#e8c887);box-shadow:0 0 8px rgba(232,200,135,.5)}
.vs-time{
  flex:none;font-size:10px;letter-spacing:.06em;color:rgba(232,200,135,.85);
  font-variant-numeric:tabular-nums;
}

/* ---------- 播完层：只占中部区域，不挡顶部 ✕ 与底部控件 ---------- */
.vs-done{
  position:absolute;left:0;right:0;top:16%;bottom:26%;z-index:5;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:10px;pointer-events:none;
  animation:capIn .4s ease both;
}
.vs-done[hidden]{display:none}
.vs-done .primary-btn{
  pointer-events:auto;min-width:158px;letter-spacing:.14em;
  box-shadow:0 6px 22px rgba(0,0,0,.55);
}

/* ================= 知识小测层（B3.7）：影片播完自动弹出 ================= */
.vs-quiz{
  position:absolute;left:4.5%;right:4.5%;top:9%;bottom:23%;z-index:6;
  display:flex;flex-direction:column;gap:11px;
  background:linear-gradient(170deg,rgba(26,16,10,.96),rgba(18,11,7,.96));
  border:1px solid rgba(232,200,135,.35);border-radius:14px;
  padding:15px 15px 13px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  overflow-y:auto;
}
.vsq-head{display:flex;align-items:center;justify-content:space-between}
.vsq-head b{font-family:var(--serif);font-size:14px;letter-spacing:.14em;color:var(--gold)}
.vsq-head span{font-size:10.5px;letter-spacing:.1em;color:rgba(232,200,135,.75)}
.vsq-q{font-size:14.5px;font-weight:600;line-height:1.7;color:#f5ead2}
.vsq-opts{display:flex;flex-direction:column;gap:8px}
.vsq-opt{
  display:flex;align-items:center;gap:9px;text-align:left;
  border:1px solid rgba(232,200,135,.28);border-radius:10px;
  background:rgba(232,200,135,.05);padding:10px 12px;
  font-size:12.5px;line-height:1.55;color:#efe2c6;cursor:pointer;transition:.15s;
}
.vsq-opt:active{background:rgba(232,200,135,.12)}
.vsq-opt:disabled{cursor:default;opacity:.72}
.vsq-opt i{
  font-style:normal;flex:none;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:11px;color:var(--gold);
  border:1px solid rgba(232,200,135,.4);
}
.vsq-opt.is-right{border-color:rgba(140,200,110,.65);background:rgba(96,150,70,.16);color:#e8f4d8;opacity:1}
.vsq-opt.is-right i{border-color:rgba(160,210,120,.7);color:#bfe39a}
.vsq-opt.is-wrong{border-color:rgba(224,81,47,.6);background:rgba(224,81,47,.12);color:#f4d3c8;opacity:1}
.vsq-exp{
  border-left:2px solid rgba(212,162,78,.55);padding:2px 0 2px 10px;
  font-size:11.5px;line-height:1.75;color:rgba(240,225,195,.85);
}
.vsq-next{align-self:flex-end;min-width:112px;padding:8px 18px;font-size:12.5px}
.vsq-result{text-align:center;padding:6px 0 2px}
.vsq-score{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--gold)}
.vsq-comment{margin-top:6px;font-size:12px;line-height:1.7;color:rgba(240,225,195,.85)}
.vsq-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.vsq-actions .vs-btn2{
  border:1px solid rgba(232,200,135,.4);background:transparent;border-radius:999px;
  color:var(--gold-2);padding:9px 18px;font-size:12.5px;letter-spacing:.06em;cursor:pointer;
}
@media (prefers-reduced-motion:no-preference){
  .vs-quiz{animation:vsQuizIn .32s cubic-bezier(.22,1.1,.32,1)}
  @keyframes vsQuizIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* ========== C6.1 纸白主题（html[data-theme="paper"]）装饰色覆盖 ========== */
/* 播放器本体（舞台 / 画面 / 片头 / 字幕 / 控件）按惯例保留深色影院底；
   仅覆盖知识小测浮层（不透明交互面板，属界面 UI）。其投影落在深色舞台
   上，需保留一定深度，用暖深棕替代纯黑而非浅棕。 */
html[data-theme="paper"] .vs-quiz{
  background:linear-gradient(170deg,rgba(255,253,247,.97),rgba(250,243,230,.97));
  border-color:rgba(176,138,62,.4);
  box-shadow:0 18px 44px rgba(40,24,12,.5);
}
/* 测层内浅米色文字 → 深金 / 深棕 */
html[data-theme="paper"] .vsq-head span{color:#8a6a1d}
html[data-theme="paper"] .vsq-q{color:#6f5a2e}
html[data-theme="paper"] .vsq-opt{
  border-color:rgba(176,138,62,.32);background:rgba(176,138,62,.06);color:#6f5a2e;
}
html[data-theme="paper"] .vsq-opt:active{background:rgba(176,138,62,.14)}
html[data-theme="paper"] .vsq-opt i{border-color:rgba(176,138,62,.45)}
/* 答对：浅绿底 + 深绿字 */
html[data-theme="paper"] .vsq-opt.is-right{border-color:rgba(63,122,82,.55);background:#e4efdc;color:#3f7a52}
html[data-theme="paper"] .vsq-opt.is-right i{border-color:rgba(63,122,82,.6);color:#3f7a52}
/* 答错：浅红底 + 深红字 */
html[data-theme="paper"] .vsq-opt.is-wrong{border-color:rgba(169,50,38,.55);background:rgba(169,50,38,.10);color:#b8443c}
/* 解析 / 评语 / 操作按钮 */
html[data-theme="paper"] .vsq-exp{border-left-color:rgba(176,138,62,.6);color:#6f5a2e}
html[data-theme="paper"] .vsq-comment{color:#6f5a2e}
html[data-theme="paper"] .vsq-actions .vs-btn2{border-color:rgba(176,138,62,.5)}