[hidden]{display:none!important}body{min-height:100svh}body:after{content:'';position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,#0b090950,#0b0909d9 75%,#0b0909),url('/static/haunt/assets/mansion-hero.webp') center top/cover no-repeat;opacity:.6;pointer-events:none}.haunt-fog{position:fixed;z-index:-1}h1{font-family:Haunt,Impact,fantasy;font-size:clamp(44px,6vw,88px);line-height:.98;letter-spacing:1px;margin-bottom:22px;text-shadow:0 4px 15px #000}h1 span,h2 span{color:#ff873f}h2{font-family:Cinzel,Georgia,serif}.subtitle{color:#cfbaa1;font-size:18px}.eyebrow{letter-spacing:3px}.guest{display:grid;place-items:center;padding:40px 20px}.guest-card{width:min(100%,490px);text-align:center;padding:32px 16px}.guest-card h1{font-size:clamp(46px,11vw,68px)}.guest-card .eyebrow{font-size:9px}.divider{display:flex;align-items:center;gap:20px;color:#be884e;margin:25px 0}.divider:before,.divider:after{content:'';height:1px;background:linear-gradient(90deg,transparent,#9a643c);flex:1}.divider:after{transform:rotate(180deg)}.invitation{font-family:Cinzel,Georgia,serif;font-size:20px;margin-bottom:30px}.big{width:100%;min-height:66px;font-size:14px;gap:20px}.big span{font-size:26px}.footnote{font-size:13px;color:#aa9584;margin:28px 0 0}.preview-frame{height:300px;border:1px solid #cd672d;background:#120e0c;box-shadow:0 0 30px #f95d1b24;display:grid;place-items:center;padding:8px}.preview-frame img{width:100%;height:100%;object-fit:contain;min-height:0}.preview-frame p{padding:25px}#filename{overflow-wrap:anywhere;font-size:13px;color:#b8a28c;margin:12px 0}#change{display:block;width:100%}#error{color:#ffc3aa;margin-top:16px;overflow-wrap:anywhere}#error:empty,#status:empty{display:none}progress{width:100%;height:12px;accent-color:#ff671f;margin-top:20px}.seal{font-size:65px;color:#ff873f;text-shadow:0 0 35px #ff671f;margin:20px}#success h2{font:38px Haunt,Impact,fantasy;color:#ff984d}#success .primary{margin-top:15px}.projector{height:100svh;overflow:hidden;padding:3vh 3.2vw 1vh;display:flex;flex-direction:column}.projector #app{height:100%;display:flex;flex-direction:column}.projector header{position:relative;flex:none}.projector h1{font-size:clamp(35px,4vw,76px);line-height:1;margin:0 0 8px}.projector h1 br{display:none}.projector h1 span:before{content:' '}.projector .subtitle{margin-bottom:18px;font-size:clamp(14px,1.2vw,23px)}#connection{color:#e9a867;font-size:11px;letter-spacing:1.8px}.projector #connection{position:absolute;right:0;top:14px}.offline{color:#ffb4a2!important}.projector-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,25%);gap:3vw;min-height:0;flex:1;padding-top:12px}.stage{min-height:0;position:relative;padding:12px;display:grid;place-items:center;overflow:hidden}.stage:after{display:none}#empty{text-align:center;z-index:1;padding:30px}#empty h2{font:clamp(30px,4vw,72px)/1.2 Haunt,Impact,fantasy}#empty p:last-child{color:#cfbaa1;font-size:22px}#photo-slot{position:absolute;inset:10px 10px 44px}.photo-scene{height:100%;width:100%;position:relative;overflow:hidden;animation:materialize .8s ease-out;background:#100e0c}.photo-scene>img:not(.photo-blur){position:relative;height:100%;width:100%;object-fit:contain;display:block}.photo-blur{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;filter:blur(25px) brightness(.25);opacity:.8}.stage:has(.photo-scene){border-color:#f47a36;box-shadow:0 0 32px #e8561926,inset 0 0 0 4px #1d0d08}.photo-meta{position:absolute;bottom:12px;font:11px Cinzel,Georgia,serif;letter-spacing:3px;color:#d4a97a}.scan-panel{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.scan-panel .eyebrow{margin-bottom:10px}.scan-panel h2{font:clamp(28px,3vw,55px)/1 Haunt,Impact,fantasy;letter-spacing:2px;margin-bottom:20px}.qr-frame{padding:10px;background:#fff;border:5px solid #9f542b;outline:1px solid #e7a25e;box-shadow:0 0 35px #ff671f26;width:min(100%,340px);aspect-ratio:1}.qr-frame img{display:block;width:100%;height:100%}.scan-panel>p:not(.eyebrow){font-size:clamp(14px,1.3vw,23px);margin:20px 0 0;line-height:1.4}.scan-panel .public-url{font-size:clamp(12px,1.05vw,20px)!important;color:#ffb879;overflow-wrap:anywhere;max-width:100%;margin-top:12px!important}.projector footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex:none;min-height:45px;color:#baa38c;font:9px Cinzel,Georgia,serif;letter-spacing:2px}.projector footer button{font-size:12px}.host-shell{max-width:1200px;margin:auto;padding:60px 24px}.host-shell h1{font-size:60px}.host-shell form{padding:24px;max-width:480px;display:grid;gap:12px}.host-toolbar{padding:25px;display:flex;gap:15px;flex-wrap:wrap;align-items:center}.host-toolbar h2,.host-toolbar #connection{width:100%;margin:0}.host-toolbar label{display:flex;align-items:center;gap:12px}.host-toolbar input{width:80px}.host-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin-top:30px}.host-grid article{background:#171110;border:1px solid #65432f;padding:10px;display:flex;flex-direction:column;gap:12px}.host-grid img{width:100%;height:220px;object-fit:contain}.danger{border:1px solid #75503e;padding:16px;margin-top:25px}.danger input{margin:10px}.danger summary{cursor:pointer;min-height:44px;padding:10px}.host-shell a{font-size:12px}@keyframes materialize{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@media(max-width:600px){body:after{background-image:linear-gradient(180deg,#0b090950,#0b0909e8 65%,#0b0909),url('/static/haunt/assets/mansion-mobile.webp')}.guest{padding:20px 12px}.guest-card{padding:25px 10px}.subtitle{font-size:16px}.preview-frame{height:260px}.host-shell h1{font-size:44px}.host-shell{padding:50px 16px}.projector{min-width:800px}.haunt-web{opacity:.35}}@media(prefers-reduced-motion:reduce){.photo-scene{animation:none}}
.stage{background:radial-gradient(ellipse at 50% 80%,#38234550,transparent 75%),linear-gradient(100deg,#1d1713,#100e0c)}.guest-card{background:radial-gradient(ellipse at center,#32213d22,transparent 70%)}
/* Camera-first guest view: controls stay beneath the viewfinder on a phone. */
.camera-guest{padding:max(12px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));align-items:start}.camera-guest #app{width:100%}.camera-guest .guest-card{width:min(100%,460px);padding:0;margin:auto;background:none}.camera-heading{padding:12px 0 18px}.camera-heading h1{font-size:clamp(25px,6.4vw,32px);line-height:1.1;letter-spacing:.6px;margin:0}.camera-view{position:relative;aspect-ratio:3/4;max-height:calc(100svh - 180px);overflow:hidden;background:radial-gradient(ellipse,#30213666,#0b0909 80%);border:1px solid #9d522d;box-shadow:0 0 28px #ff671f1c;border-radius:14px}.camera-view video{width:100%;height:100%;object-fit:contain;display:block}.camera-view video.selfie{transform:scaleX(-1)}#camera-help{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:30px;background:linear-gradient(#0b09097a,#0b0909c9)}#camera-message{font-size:17px;color:#d9c6b3;margin:0 0 8px;max-width:260px}.camera-corner{position:absolute;width:30px;height:30px;border-color:#ff9c5d;pointer-events:none}.camera-corner.top-left{top:14px;left:14px;border-top:2px solid;border-left:2px solid}.camera-corner.bottom-right{bottom:14px;right:14px;border-bottom:2px solid;border-right:2px solid}.camera-actions{display:grid;grid-template-columns:1fr 90px 1fr;align-items:center;justify-items:center;gap:14px;padding:20px 0 8px}.camera-option{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:58px;background:none;border:0;color:#f2d6a5;font:14px Barlow,Arial,sans-serif}.camera-option span{font:30px/1.2 Arial,sans-serif}.shutter{width:76px;height:76px;border-radius:50%;padding:5px;background:none;border:2px solid #ffb37f;box-shadow:0 0 24px #ff671f33}.shutter span{display:block;width:100%;height:100%;background:#ff7835;border:2px solid #130b08;border-radius:50%}.shutter:active:not(:disabled) span{background:#ffd2b0;transform:scale(.94)}.camera-guest .preview-frame{height:auto;aspect-ratio:3/4;max-height:calc(100svh - 230px);border-radius:14px;margin-bottom:18px;overflow:hidden}.camera-guest #retake{display:block;width:100%}.camera-guest #success{padding-top:12vh}.camera-guest #error,.camera-guest #status{font-size:15px}.camera-guest .primary{border-radius:5px}@media(max-height:650px){.camera-heading{padding:5px 0 10px}.camera-actions{padding-top:12px}.camera-view{max-height:calc(100svh - 155px)}}
/* Reserve a projector-safe inset and size the QR to the space left by its text. */
.projector{display:block;height:100dvh;min-height:0;max-height:100dvh;min-width:0;padding:4vh 4vw;overflow:hidden}
.projector #app{display:grid;width:100%;height:100%;min-height:0;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(6px,1.2vh,16px)}
.projector header{min-width:0}.projector header>.eyebrow{font-size:clamp(8px,.7vw,11px);margin-bottom:clamp(4px,.8vh,10px)}
.projector h1{font-size:clamp(24px,min(3.5vw,6.5vh),72px);margin-bottom:clamp(4px,.8vh,9px)}
.projector .subtitle{font-size:clamp(12px,1.2vw,23px);line-height:1.3;margin-bottom:0}
.projector #connection{top:0;max-width:30%;font-size:clamp(7px,.65vw,11px);text-align:right;letter-spacing:1px}
.projector-layout{height:100%;min-height:0;min-width:0;padding:0;gap:3vw;grid-template-columns:minmax(0,1fr) minmax(0,28%)}
.projector .scan-panel{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:clamp(4px,1vh,12px);min-width:0;min-height:0;align-items:center;justify-items:center}
.projector .scan-panel .eyebrow{font-size:clamp(7px,.7vw,11px);line-height:1.2;margin:0;letter-spacing:2px}
.projector .scan-panel h2{font-size:clamp(22px,min(3vw,6vh),55px);line-height:1;margin:0}
.projector .qr-space{width:100%;height:100%;min-height:0;min-width:0;display:grid;place-items:center;container-type:size}
.projector .qr-frame{width:min(100cqw,100cqh,380px);height:auto;max-width:100%;aspect-ratio:1;padding:clamp(4px,.5vw,10px);border-width:clamp(2px,.3vw,5px)}
.projector .scan-panel>p:not(.eyebrow){font-size:clamp(11px,min(1.3vw,2.4vh),23px);line-height:1.3;margin:0}
.projector .scan-panel .public-url{font-size:clamp(10px,min(1.05vw,2vh),20px)!important;margin:0!important}
.projector footer{min-width:0;min-height:28px;gap:12px;font-size:clamp(7px,.55vw,10px);letter-spacing:1px;line-height:1.2}
.projector footer button{min-height:28px;flex:none;padding:3px 0;font-size:clamp(10px,.7vw,13px)}
.projector #count{text-align:right}.projector #empty{padding:clamp(12px,2vw,30px)}
.projector #empty h2{font-size:clamp(24px,min(4vw,7vh),72px);margin-bottom:clamp(10px,2vh,24px)}
.projector #empty p:last-child{font-size:clamp(14px,min(1.7vw,3vh),24px);margin-bottom:0}
@media(max-height:500px){.projector header>.eyebrow{display:none}.projector .scan-panel>.eyebrow{display:none}.projector .scan-panel{grid-template-rows:auto minmax(0,1fr) auto auto}.projector footer>span:first-child{display:none}.projector footer{justify-content:space-between}.projector #empty>.eyebrow{font-size:8px;margin-bottom:10px}}
.projector .scan-panel{grid-template-columns:minmax(0,1fr);justify-content:stretch}