/* 短剧：抖音式滑动播放 */
/* ================= 短剧：抖音式滑动播放 ================= */
.shorts{
  position:fixed;inset:0;z-index:120;background:#000;
  height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;
}
.shorts[hidden]{display:none}
.shorts-stage{
  position:relative;width:100%;height:100%;overflow:hidden;background:#000;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;
}
.shorts-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.shorts-shade{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.6),transparent 16%,transparent 76%,rgba(0,0,0,.68));
}
.shorts-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:10px;padding:max(12px,env(safe-area-inset-top)) 14px 18px}
.shorts-title{
  flex:1;min-width:0;font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 5px rgba(0,0,0,.85);padding-top:env(safe-area-inset-top);
}
.sb{
  width:38px;height:38px;border-radius:50%;border:0;padding:0;flex:none;
  display:grid;place-items:center;background:rgba(22,23,27,.55);color:#fff;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.sb svg{width:18px;height:18px}
.shorts-side{position:absolute;right:10px;bottom:100px;z-index:3;display:flex;flex-direction:column;gap:14px}
.shorts-side .sb{width:46px;height:46px;background:rgba(22,23,27,.42)}
.shorts-side .sb svg{width:22px;height:22px}
.shorts-bottom{position:absolute;left:0;bottom:0;right:72px;z-index:3;padding:0 16px max(16px,env(safe-area-inset-bottom))}
.shorts-name{font-size:16px;font-weight:650;text-shadow:0 1px 5px rgba(0,0,0,.85)}
.shorts-sub{font-size:12.5px;color:rgba(255,255,255,.78);margin-top:4px;text-shadow:0 1px 4px rgba(0,0,0,.85)}
.shorts-prog{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;background:rgba(255,255,255,.16)}
.shorts-prog i{display:block;height:100%;width:0;background:var(--accent)}
.shorts-hint{
  position:absolute;left:50%;bottom:20%;transform:translateX(-50%);z-index:4;
  padding:9px 16px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;
  animation:shortsHint 2.6s ease forwards;pointer-events:none;
}
@keyframes shortsHint{0%,72%{opacity:1}100%{opacity:0;visibility:hidden}}
.shorts-spin{
  position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;z-index:4;
  border-radius:50%;border:3px solid rgba(255,255,255,.22);border-top-color:var(--accent);
  animation:shortsSpin .8s linear infinite;
}
@keyframes shortsSpin{to{transform:rotate(360deg)}}
/* 换集时的滑动过渡 */
.shorts-stage.s-in-up{animation:shortsInUp .2s ease}
.shorts-stage.s-in-down{animation:shortsInDown .2s ease}
@keyframes shortsInUp{from{transform:translateY(44px);opacity:.2}to{transform:none;opacity:1}}
@keyframes shortsInDown{from{transform:translateY(-44px);opacity:.2}to{transform:none;opacity:1}}