#opening-cinematic{position:absolute;inset:0;z-index:200;background:#000;overflow:hidden;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none;container-type:size;animation:movie-in .3s ease-out}
@keyframes movie-in{from{opacity:0}}
#opening-cinematic[hidden]{display:none}
#opening-cinematic video{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .35s ease}
#opening-cinematic.movie-ready video{opacity:1}
#opening-cinematic.movie-ending video,#opening-cinematic.movie-ending .movie-skip,#opening-cinematic.movie-ending .movie-message{opacity:0;pointer-events:none}
/* 手机上 #stage 已按安全区内缩（host.css body.mobile main），这里不再叠 env()；百分比 / cq 单位都量本层，
   竖屏转 90° 时跟着转过来的盒子走，而不是物理视口。字先文字后环，环不占左侧位置，字贴住左下角。 */
.movie-skip{position:absolute;left:2.6%;bottom:4%;display:flex;align-items:center;gap:.4em;min-height:46px;min-width:88px;margin:0;padding:6px 12px;background:transparent;border:0;color:white;text-shadow:0 1px 3px #000,0 0 5px #000;font:500 clamp(16px,2.2vw,28px)/1.2 sans-serif;font-size:clamp(17px,4.2cqmin,28px);cursor:pointer;-webkit-text-stroke:.3px #fff;touch-action:none}
.movie-skip svg{width:1.3em;height:1.3em;flex:none;visibility:hidden;transform:rotate(-90deg)}
.movie-skip.holding svg{visibility:visible}
.movie-skip circle{fill:none;stroke-width:2.5}
.movie-ring-back{stroke:#ffffff50}
.movie-ring{stroke:#fff;stroke-dasharray:126;stroke-dashoffset:126;stroke-linecap:round}
.movie-message{position:absolute;inset:30% 10%;display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;font-size:clamp(16px,2vw,25px)}
.movie-message[hidden]{display:none}
.movie-message span{flex-basis:100%;text-align:center}
.movie-message button{background:#151b1fe6;border:1px solid #ffffff99;color:#fff;padding:12px 22px;border-radius:2px;min-height:44px}
.movie-message button[hidden]{display:none}