/* One coordinate system for the background and the live GLB, on every screen. */
.stage:has(#room:not([hidden])){width:min(100vw,177.68svh);height:auto;aspect-ratio:1672/941;align-self:center}
#room>picture>img{object-fit:fill;image-rendering:pixelated;filter:brightness(1.08) saturate(.92) contrast(1.025)}
/* Fixed ink grain is shared by the drawing and the animated model. It does
   not shimmer with the animation and never covers dialogue or controls. */
#room{isolation:isolate}
#window-rain{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;image-rendering:pixelated}
#room::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:url('assets/ink-grain.svg') repeat;background-size:192px 192px;mix-blend-mode:soft-light;opacity:.55}
#room .hotspot{z-index:4}
main:has(#room:not([hidden]))::before{content:"";position:absolute;inset:0;pointer-events:none;background:url('assets/ink-grain.svg') repeat;mix-blend-mode:soft-light;opacity:.16}
main:has(#room:not([hidden])){background:radial-gradient(ellipse at 48% 44%,#ac8250 0%,#765438 55%,#513c2d 100%)}
#scene-projector{position:absolute;left:18.5%;top:28%;width:22%;height:59%;background:transparent;--poster-color:transparent;pointer-events:none;filter:sepia(.65) saturate(1.15) contrast(1.07) brightness(1.07) url(#projector-ink);z-index:2}
#room .projector{left:22%;top:33%;width:15%;height:48%;z-index:3}
#room .exit{left:0;top:12%;width:6%;height:72%}
#room .screen{left:30.5%;top:11%;width:19.5%;height:23%;z-index:3}
#room .person{left:78%;top:34%;width:14%;height:22%}
#room .ticket-tin{left:91%;top:57%;width:8%;height:9%;min-height:24px}
#room .projection{left:31.5%;top:13%;width:17%;height:18%;transform:rotate(2deg);opacity:0;animation:none;transition:opacity .5s;color:#d5c6a3;z-index:1}
#room .projection span{font:clamp(9px,1.6vw,25px) serif;letter-spacing:.15em}
#room .projection small{display:none}
#room.projecting .projection{opacity:.9}
.projector-beam{position:absolute;left:29%;top:12%;width:21%;height:37%;background:linear-gradient(140deg,#ffe5a82b,#ffdf8b0a);clip-path:polygon(11% 100%,8% 0,100% 4%,95% 58%);opacity:0;pointer-events:none;z-index:1;transition:opacity .45s}
#room.projecting .projector-beam{opacity:1;animation:beam-flicker 1.9s infinite}
#room.projecting #scene-projector{filter:sepia(.65) saturate(1.2) contrast(1.07) brightness(1.12) url(#projector-ink)}
#room .projector span{opacity:1;font-size:clamp(10px,1vw,14px);padding:4px 9px;bottom:5%;background:#17130fbd;border-color:#d6b78344}
#room .projector:disabled{cursor:wait}
#room .projector:hover{box-shadow:none}
@keyframes beam-flicker{0%,100%{opacity:.85}50%{opacity:1}52%{opacity:.88}}
@media(max-width:600px) and (orientation:portrait){
 main:has(#room:not([hidden])){display:grid;place-items:center;background:radial-gradient(ellipse at 48% 44%,#ac8250 0%,#765438 55%,#513c2d 100%)}
 .stage:has(#room:not([hidden])){width:100%;height:auto;aspect-ratio:1672/941}
 #room .projection span{font-size:10px}
 #room .hotspot span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.projector-beam{animation:none!important}}