.cinema-dialog{position:fixed;inset:0;width:100%;height:100svh;max-width:none;max-height:none;margin:0;padding:28px 6%;border:0;background:#04070d;color:var(--cream);overflow-y:auto;box-shadow:none}.cinema-dialog::backdrop{background:#000}.cinema-dialog>.close-button{position:fixed;top:max(12px,env(safe-area-inset-top));right:18px;z-index:2;background:#0a0d13b0;border-radius:50%;color:#d5c9b2}.cinema-stage{width:min(1080px,100%);min-height:calc(100svh - 56px);margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:16px}.cinema-topline{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:0 50px 0 0}.cinema-counter{font:11px Georgia,serif;letter-spacing:3px;color:#807765;white-space:nowrap}.video-slot{width:100%;background:#000;display:flex;align-items:center;justify-content:center;min-height:150px}#cinemaVideo{display:block;width:100%;max-height:72svh;object-fit:contain;background:#000}.cinema-placeholder{min-height:48svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(ellipse,#2930424d,transparent 70%);padding:35px 15px}.cinema-placeholder>span{font-size:70px;color:var(--gold);filter:drop-shadow(0 0 25px #f4d59850)}.cinema-placeholder h2{font-size:28px;letter-spacing:3px}.cinema-placeholder p{font-size:12px;letter-spacing:1px;color:#9aa4b3;max-width:420px;line-height:2.2}.cinema-feedback{display:flex;flex-direction:column;align-items:center;gap:4px}.cinema-feedback .media-hint:empty{display:none}.cinema-feedback .primary-button{margin:8px 0;font-size:11px}.cinema-progress{display:flex;gap:16px;align-items:center;justify-content:center;font-size:9px;letter-spacing:2px;color:#596273;margin-top:8px}.cinema-progress>i{display:block;width:60px;height:1px;background:#d7bc8725}.cinema-progress .active{color:#d7bc87}.cinema-progress .complete{color:#a39a88}.preview-end-button{padding:10px 17px;min-height:44px;border:1px dashed #9d88b477;background:#30233955;color:#c6b3dc;font-size:11px;letter-spacing:1px;margin:6px 0}.preview-end-button:hover{background:#40304d88}
@media(max-width:600px){.cinema-dialog{padding:65px 5% 25px}.cinema-stage{min-height:calc(100svh - 90px);gap:16px}.cinema-topline{padding:0;align-items:center}.cinema-topline .eyebrow{font-size:9px;letter-spacing:1px}.cinema-counter{font-size:9px;letter-spacing:2px}#cinemaVideo{max-height:67svh}.cinema-placeholder{min-height:42svh;padding:20px 8px;gap:20px}.cinema-placeholder h2{font-size:23px;letter-spacing:1px}.cinema-placeholder p{font-size:11px;letter-spacing:.5px}.cinema-placeholder>span{font-size:58px}.cinema-progress{font-size:8px;gap:13px}.cinema-feedback .media-hint{font-size:11px}.preview-end-button{font-size:10px}}
/* Rotate the entire phone cinema, including controls, when the viewport stays portrait.
   Native orientation locking is only a progressive enhancement. */
.cinema-stage{position:relative}.cinema-stage>.close-button{top:-8px;right:-4px;z-index:2;background:#0a0d13b0;border-radius:50%}.orientation-hint{display:none}
@media(orientation:portrait) and (max-width:900px){.cinema-dialog{padding:0;overflow:hidden}.cinema-stage{position:absolute;left:50%;top:50%;width:calc(100svh - 44px);height:calc(100vw - 32px);min-height:0;max-width:none;margin:0;transform:translate(-50%,-50%) rotate(90deg);display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px}.cinema-topline{grid-row:1;padding-right:50px}.cinema-topline .eyebrow{font-size:10px;letter-spacing:2px}.cinema-stage>.close-button{top:-12px;right:-8px}.video-slot,.cinema-placeholder{grid-row:2;min-height:0;height:100%;width:100%}#cinemaVideo{width:100%;height:100%;max-height:100%;object-fit:contain}.cinema-placeholder{padding:8px 20px;gap:10px}.cinema-placeholder>span{font-size:32px}.cinema-placeholder h2{font-size:22px;line-height:1.5}.cinema-placeholder p{font-size:10px;line-height:1.8;max-width:none}.cinema-feedback{grid-row:3;gap:0}.cinema-feedback .media-hint{margin:0 0 4px;font-size:10px}.cinema-feedback .primary-button{min-height:44px;padding:8px 20px;margin:0}.preview-end-button{margin:0;min-height:44px;padding:8px 18px;font-size:10px}.cinema-progress{grid-row:4;margin:0;font-size:8px;gap:12px}.orientation-hint{display:inline;color:#7e899c;font-size:8px;letter-spacing:1px;margin-left:15px}.cinema-progress>i{width:40px}}
@media(orientation:landscape) and (max-height:600px){.cinema-dialog{padding:max(12px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-right));overflow:hidden}.cinema-stage{width:100%;height:calc(100svh - 28px);min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px}.cinema-topline{grid-row:1;padding-right:50px}.video-slot,.cinema-placeholder{grid-row:2;min-height:0;height:100%}#cinemaVideo{width:100%;height:100%;max-height:100%;object-fit:contain}.cinema-placeholder{padding:8px;gap:10px}.cinema-placeholder>span{font-size:30px}.cinema-placeholder h2{font-size:22px;line-height:1.5}.cinema-placeholder p{font-size:10px;line-height:1.8;max-width:none}.cinema-feedback{grid-row:3;gap:0}.cinema-feedback .media-hint{margin:0 0 4px;font-size:10px}.cinema-feedback .primary-button,.preview-end-button{min-height:44px;padding:8px 18px;margin:0}.cinema-progress{grid-row:4;margin:0;font-size:8px}.cinema-stage>.close-button{top:-12px;right:-8px}}
.prepare-button{margin-top:27px;min-height:48px;font-size:11px}.arm-hint{font-size:9px;color:#8291a6;letter-spacing:1px;margin-top:15px}#ceremonyCountdown{font:38px/1.2 Georgia,serif;font-variant-numeric:tabular-nums;letter-spacing:4px;color:#e3ce9e}.cinema-stage[data-scene=wheel],.cinema-stage[data-scene=spinning]{background:radial-gradient(ellipse at 28% 48%,#9d734316,transparent 65%)}.wheel-stage{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;width:100%;height:min(57svh,430px);padding:12px 35px;background:radial-gradient(ellipse at 27% 50%,#cba75b12,transparent 65%)}.wheel-frame{height:100%;width:auto;aspect-ratio:1;max-height:390px;max-width:100%;position:relative;justify-self:center;filter:drop-shadow(0 0 25px #cda35d22)}.wheel-rotor{position:absolute;inset:0;will-change:transform}.wheel-rotor svg{width:100%;height:100%;display:block}.wheel-frame:after{content:'';position:absolute;inset:3.7%;border:2px solid #e5cc94;border-radius:50%;box-shadow:0 0 0 4px #96723d25,inset 0 0 20px #bd8c4926;pointer-events:none}.wheel-pointer{position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:29px solid #ffe8b2;filter:drop-shadow(0 2px 2px #0009);z-index:3}.wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:19%;height:19%;display:grid;place-items:center;background:radial-gradient(circle,#e4c184,#8a6638);border:3px solid #dec08b;border-radius:50%;box-shadow:0 4px 20px #0006;color:#fff2ce;font-size:32px}.wheel-copy{text-align:left;min-width:0}.wheel-copy .eyebrow{font-size:8px;letter-spacing:2px}.wheel-copy h2{font-size:30px;line-height:1.6;letter-spacing:2px;margin:14px 0}.wheel-copy>p:not(.eyebrow):not(.wheel-winner){font-size:12px;line-height:2;letter-spacing:1px;color:#9daabd;max-width:290px}.wheel-copy .primary-button{font-size:11px;letter-spacing:1px;margin-top:24px;min-height:48px}.wheel-winner{color:#eacb89;font-size:12px;letter-spacing:3px;margin-top:7px}#winnerIcon{width:88px;height:88px;object-fit:contain;margin-top:10px;filter:drop-shadow(0 0 20px #dfb75935)}.reveal-dialog{max-width:480px}
@media(orientation:portrait) and (max-width:900px){.wheel-stage{grid-row:2;height:100%;min-height:0;grid-template-columns:1fr 1fr;gap:25px;padding:4px 24px}.wheel-frame{max-height:100%}.wheel-copy .eyebrow{font-size:6px;letter-spacing:1.5px}.wheel-copy h2{font-size:21px;margin:7px 0;letter-spacing:1px}.wheel-copy>p:not(.eyebrow):not(.wheel-winner){font-size:10px;line-height:1.8;letter-spacing:.5px}.wheel-copy .primary-button{margin-top:15px;padding:8px 18px;min-height:44px;font-size:10px}.wheel-center{font-size:22px;border-width:2px}.wheel-pointer{border-left-width:7px;border-right-width:7px;border-top-width:22px}.wheel-winner{font-size:10px;letter-spacing:2px}#winnerIcon{width:58px;height:58px;margin-top:5px}#ceremonyCountdown{font-size:27px;letter-spacing:3px}.cinema-placeholder>span{font-size:25px}.cinema-placeholder{gap:8px}}
@media(orientation:landscape) and (max-height:600px){.wheel-stage{grid-row:2;height:100%;min-height:0;grid-template-columns:1fr 1fr;gap:28px;padding:4px 30px}.wheel-frame{max-height:100%}.wheel-copy .eyebrow{font-size:7px;letter-spacing:1.5px}.wheel-copy h2{font-size:23px;margin:8px 0;letter-spacing:1px}.wheel-copy>p:not(.eyebrow):not(.wheel-winner){font-size:10px;line-height:1.8}.wheel-copy .primary-button{margin-top:14px;min-height:44px;padding:8px 20px;font-size:10px}.wheel-center{font-size:22px;border-width:2px}.wheel-pointer{border-left-width:7px;border-right-width:7px;border-top-width:22px}#winnerIcon{width:60px;height:60px;margin-top:4px}.wheel-winner{font-size:10px}#ceremonyCountdown{font-size:28px}.cinema-placeholder>span{font-size:25px}.cinema-placeholder{gap:8px}}
@media(orientation:landscape) and (max-height:600px) and (pointer:coarse){#giftDialog{position:fixed;left:50%;top:50%;margin:0;width:min(88svh,430px);max-width:none;max-height:calc(100vw - 35px);transform:translate(-50%,-50%) rotate(-90deg);padding:38px 23px 25px}#giftDialog h2{font-size:25px}#giftDialog .summon-circle{width:72px;height:72px;margin-bottom:17px}#giftDialog .gift-reveal-note{padding:13px}#giftDialog .gift-reveal-note p{font-size:17px}}
/* Playback has no headings, step labels or native transport bar. */
.cinema-dialog[data-display=video]{padding:0;overflow:hidden;background:#000}
.cinema-stage[data-display=video]{position:absolute;left:50%;top:50%;width:100vw;height:100svh;max-width:none;min-height:0;margin:0;padding:0;display:block;transform:translate(-50%,-50%);background:#000}
.cinema-stage[data-display=video] .cinema-topline,.cinema-stage[data-display=video] .cinema-progress{display:none}
.cinema-stage[data-display=video] .video-slot{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.cinema-stage[data-display=video] #cinemaVideo{width:100%;height:100%;max-height:none;object-fit:cover}
.cinema-stage[data-display=video] .cinema-feedback{position:absolute;z-index:3;left:12%;right:12%;bottom:max(24px,env(safe-area-inset-bottom));gap:8px;pointer-events:none;text-align:center}
.cinema-stage[data-display=video] .cinema-feedback>*{pointer-events:auto}
.cinema-stage[data-display=video] .cinema-feedback .media-hint:not(:empty){margin:0;padding:7px 14px;border-radius:20px;background:#000a;color:#eee;text-shadow:0 1px 3px #000}
.cinema-stage[data-display=video]>.close-button{top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:40px;height:40px;background:#0004;color:#fff;opacity:.22}
.cinema-stage[data-display=video]>.close-button:hover,.cinema-stage[data-display=video]>.close-button:focus-visible{opacity:1}
@media(orientation:portrait) and (max-width:900px){.cinema-stage[data-display=video]{width:100svh;height:100vw;transform:translate(-50%,-50%) rotate(90deg)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}