.film-viewer{--deep:#0b0b0c;--frame:#060606;--lime:#aaff00}
/* 弹窗：影院式单片 */
.film-viewer{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--deep);color:#fff;overflow:hidden}
.film-viewer::backdrop{background:rgba(0,0,0,.72)}
.film-viewer[open]{display:flex;flex-direction:column;animation:fp-in .32s cubic-bezier(.2,.7,.2,1)}
@keyframes fp-in{from{opacity:0}}
.fp-bar{flex:none;display:flex;justify-content:space-between;align-items:center;gap:24px;height:88px;padding:0 32px}
.fp-meta{min-width:0}
.fp-cat{display:inline-flex;align-items:center;gap:8px;font:400 12px/1.4 "HS Sans";color:#ffffffa0}
.fp-cat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.fp-meta h2{margin-top:4px;font:700 22px/1.35 "HS Sans";white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-close{color:#fff;flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff40;border-radius:50%;background:transparent;cursor:pointer;transition:background .3s,border-color .3s}
.film-viewer .fp-close svg{color:#fff;width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round}
.film-viewer .fp-close:hover{background:#ffffff20;border-color:#fff;color:#fff}

/* 舞台：容器按影片实际比例（JS 写入 --ar），在可用区域内取最大，不拉伸、不裁切 */
.fp-stage{flex:1;min-height:0;display:grid;place-items:center;padding:0 32px 40px;container-type:size}
.fp-frame{--ar:16/9;position:relative;aspect-ratio:var(--ar);width:min(100cqw,1280px,100cqh * (var(--ar)));max-height:100cqh;background:var(--frame);overflow:hidden;border-radius:2px}
@supports not (width:1cqw){.fp-frame{width:min(100%,1280px,(100vh - 168px) * (var(--ar)))}}
.fp-frame video{display:block;width:100%;height:100%;object-fit:contain;background:transparent}

/* 开始按钮：仅首次，播放后交给原生控件 */
.fp-start{position:absolute;inset:0;display:none;place-items:center;border:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35));cursor:pointer}
.fp-frame[data-state="idle"] .fp-start{display:grid}
.fp-start-ico{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--lime);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fp-start-ico svg{width:30px;height:30px;fill:#000;margin-left:4px}
.fp-start:hover .fp-start-ico,.fp-start:focus-visible .fp-start-ico{transform:scale(1.06)}
.fp-start:focus-visible{outline:2px solid var(--lime);outline-offset:-4px}

/* 状态层：缓冲 / 错误 / 结束 */
.fp-status{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;pointer-events:none}
.fp-frame:is([data-state="loading"],[data-state="error"],[data-state="ended"]) .fp-status{display:flex}
.fp-frame[data-state="loading"] .fp-status{background:rgba(0,0,0,.18)}
.fp-frame:is([data-state="error"],[data-state="ended"]) .fp-status{background:rgba(6,6,6,.82);pointer-events:auto}
.fp-spin{width:36px;height:36px;border-radius:50%;border:2px solid #ffffff26;border-top-color:var(--lime);animation:fp-spin .9s linear infinite}
.fp-frame:not([data-state="loading"]) .fp-spin{display:none}
@keyframes fp-spin{to{transform:rotate(360deg)}}
.fp-msg{font:400 14px/1.6 "HS Sans";color:#ffffffcc;max-width:420px}
.fp-retry{display:none;height:44px;padding:0 24px;border:0;border-radius:999px;background:var(--lime);color:#000;font:700 14px/1 "HS Sans";cursor:pointer}
.fp-frame:is([data-state="error"],[data-state="ended"]) .fp-retry{display:inline-flex;align-items:center}


@media(max-width:760px){
  .fp-bar{height:64px;padding:0 16px;padding-top:env(safe-area-inset-top)}
  .fp-meta h2{font-size:17px}
  .fp-stage{padding:0 0 calc(24px + env(safe-area-inset-bottom))}
  .fp-frame{border-radius:0}
  .fp-start-ico{width:64px;height:64px}
  .fp-start-ico svg{width:24px;height:24px}
}
@media(prefers-reduced-motion:reduce){.film-viewer[open]{animation:none}.fp-start-ico{transition:none}.fp-spin{animation-duration:2.4s}}