.halloween-intro{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;color:#fff;background:radial-gradient(ellipse at center,#381451 0%,#160b24 75%);overflow:hidden}
.halloween-intro[open]{display:flex;flex-direction:column;align-items:center;justify-content:center}
.halloween-intro::backdrop{background:#160b24}
.intro-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;flex:1;min-height:0}
.intro-stage video{display:block;width:100%;height:100%;object-fit:contain}
.intro-controls{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:1100px;box-sizing:border-box;padding:16px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));flex-shrink:0}
.halloween-intro button{font:700 16px/1.3 system-ui,sans-serif;min-height:48px;padding:12px 18px;border-radius:12px;border:1px solid #bd8eeb;background:#2c1742;color:#fff;cursor:pointer}
.halloween-intro #intro-skip{background:#ffd36c;border-color:#ffe5a0;color:#231032;box-shadow:0 2px 14px #dda22e33}
.halloween-intro button:focus-visible,.player-home .intro-replay:focus-visible{outline:3px solid #fff;outline-offset:4px}
.halloween-intro button:hover{filter:brightness(1.12)}
.intro-stage .intro-start{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#211032ee;white-space:nowrap}
.halloween-intro [hidden],.player-home .intro-replay[hidden]{display:none!important}
.player-home .intro-replay{appearance:none;border:0;background:transparent;color:#ddc7f1;font:inherit;cursor:pointer;min-height:44px;padding:8px 12px;text-decoration:underline;text-underline-offset:4px}
body.intro-active{overflow:hidden}
body.intro-active .shell *,body.intro-active .shell *::before,body.intro-active .shell *::after{animation-play-state:paused!important}
@media(max-width:400px){.halloween-intro button{font-size:14px;padding:11px 13px}.intro-controls{gap:8px}}
@media(max-height:450px){.intro-controls{padding-top:6px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.halloween-intro button{min-height:44px;padding:8px 14px}}

/* Sound state remains visible, separate from the uninterrupted film. */
.halloween-intro .intro-controls .intro-sound{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:48px;padding:10px 14px;background:linear-gradient(145deg,#9b4fd0,#58217e);border:1px solid #d6a5ff;border-radius:14px;color:#fff;box-shadow:inset 0 1px 0 #ffffff35,0 3px 12px #a851ec44;font-size:13px;touch-action:manipulation}
.halloween-intro .intro-sound svg{display:block;width:26px;height:26px;flex-shrink:0;overflow:visible}
.halloween-intro .intro-sound[data-muted=true] .sound-waves{display:none}
.halloween-intro .intro-sound[data-muted=false] .sound-slash{display:none}
.halloween-intro .intro-sound[data-muted=true]{border-color:#eed4ff}
.halloween-intro .intro-sound-label{white-space:nowrap}
@media(max-width:360px){.halloween-intro .intro-controls .intro-sound{padding:9px 10px;gap:5px;font-size:12px}.halloween-intro .intro-sound svg{width:23px;height:23px}}

.halloween-intro #intro-skip{display:inline-flex;align-items:center;justify-content:center;text-align:center;background:#ff922b;border-color:#ffbb72;color:#291207;box-shadow:inset 0 1px 0 #ffd5a866,0 2px 14px #ef701e33}