@charset "UTF-8";
.opening-film{display:none}
#campaign-app[data-opening-entry=first] :is(#opening-soundtrack-gate,#opening-soundtrack-link){display:none!important}
.opening-cinematic{background:#000}
.opening-cinematic .opening-film{display:block;position:fixed;inset:0;z-index:20;width:100%;height:100svh;object-fit:contain;background:#000}
.opening-cinematic .opening-stage{display:none!important}
.opening-cinematic #opening-pause:not([hidden]){display:block;min-width:90px;min-height:44px}
.opening-cinematic .opening-now{font-size:clamp(10px,1.1vw,14px);background:#0009;border-radius:4px;padding:5px 9px;width:max-content;max-width:85vw;pointer-events:none}
.opening-cinematic .opening-progress{bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));opacity:.72}
.opening-cinematic .opening-now{bottom:max(43px,calc(env(safe-area-inset-bottom) + 37px))}
.opening-cinematic.opening-ending .opening-film{opacity:0;transition:opacity .5s ease}
.opening-cinematic #opening-pause[hidden]{display:none}
.opening-cinematic #opening-skip b{position:relative;padding-right:20px;font-size:18px;line-height:1.15;letter-spacing:.06em;white-space:nowrap}
.opening-cinematic #opening-skip b:before{content:'';position:absolute;right:0;top:50%;width:12px;height:2px;background:currentColor;transform:translateY(-50%)}
.opening-cinematic #opening-skip b:after{content:'';position:absolute;right:0;top:50%;width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.opening-cinematic :is(.opening-options,.opening-actions,.opening-progress,.opening-now){transition:opacity .15s linear}
.opening-cinematic-blackout :is(.opening-options,.opening-actions,.opening-progress,.opening-now){opacity:0}
/* Keep exit and pause available when deliberately reached, even in darkness. */
.opening-cinematic-blackout :is(.opening-options,.opening-actions):is(:hover,:focus-within){opacity:.8}
.opening-cinematic-blackout :is(.opening-options,.opening-actions) button{background:#000;border-color:#282828;box-shadow:none}
@media(max-width:600px){.opening-cinematic .opening-actions{gap:8px}.opening-cinematic #opening-skip{width:112px;min-height:44px}.opening-cinematic #opening-skip b{font-size:12px;letter-spacing:.03em}.opening-cinematic #opening-skip span{font-size:6px}.opening-cinematic #opening-pause{padding:0 12px;min-width:78px}}
@media(prefers-reduced-motion:reduce){.opening-cinematic.opening-ending .opening-film{transition:none}}
