/* Escape the Kooky Manor of Fright — Developed by Slyness */
/* Library: the real bookcase of the backdrop swings inward to reveal the passage. */
.secret-door{position:absolute;left:35.5%;top:7.5%;width:13.2%;height:83%;perspective:calc(70*var(--u));z-index:2;pointer-events:none;isolation:isolate;transform:translateZ(0)}
.secret-passage,.door-panel{position:absolute;inset:0;clip-path:polygon(0 0,100% 2.4%,100% 100%,62.9% 100%,62.9% 76.9%,0 75.7%)}
.secret-passage{clip-path:polygon(0 0,100% 2.4%,100% 100%,0 100%)}
/* The reading table is cut from the scene and kept OUTSIDE the 3D door, so it never swings and never covers items. */
.table-front{position:absolute;left:35.5%;top:7.5%;width:13.2%;height:83%;z-index:2;pointer-events:none;background:url(assets/scene-4.webp) 40.9% 44.12%/757.58% 120.48% no-repeat;clip-path:polygon(-7.13% 75.60%,60.83% 76.96%,63.61% 77.32%,59.16% 78.34%,59.16% 86.66%,58.04% 86.97%,58.04% 103.92%,-7.13% 103.92%,-7.13% 99.21%,43.56% 100.31%,43.56% 86.50%,20.72% 87.91%,-2.67% 89.48%,-7.13% 89.80%)}
.secret-passage{visibility:hidden;background:radial-gradient(ellipse 70% 30% at 50% 100%,#57e3a066,transparent 70%),radial-gradient(ellipse 50% 60% at 50% 70%,#2e8f6a33,transparent 70%),linear-gradient(90deg,#020104,#0b0712 18%,#150e1e 50%,#0b0712 82%,#020104)}
.secret-passage span{position:absolute;left:12%;right:12%;bottom:0;height:38%;background:repeating-linear-gradient(#3a2c40 0 3%,#140d1a 3% 11%);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);opacity:.75;mask:linear-gradient(transparent,#000 60%)}
.secret-door.open .secret-passage{visibility:visible}
.secret-door.opening .secret-passage{animation:passage-glow 2.6s ease-out}
.door-panel{background:url(assets/scene-4.webp) 40.9% 44.12%/757.58% 120.48% no-repeat;transform-origin:0 50%;backface-visibility:hidden}
.secret-door.open .door-panel{transform:rotateY(74deg);filter:brightness(.45);clip-path:polygon(0 0,100% 2.4%,100% 76.9%,62.9% 76.9%,62.9% 76.9%,0 75.7%)}
.secret-door.opening .door-panel{animation:door-swing 2.6s cubic-bezier(.55,0,.25,1) both}
.door-panel.rumble{animation:rumble .55s ease-out}
.seal-lights{position:absolute;left:22%;right:22%;top:3.6%;display:flex;justify-content:space-between}
.seal-lights i{width:calc(.75*var(--u));aspect-ratio:1;rotate:45deg;background:#1d1424;border:1px solid #8a6b52;box-shadow:inset 0 0 2px #000}
.seal-lights i.lit{background:radial-gradient(#fff6d0,#f0b65a 60%,#a5642a);border-color:#ffe2a0;box-shadow:0 0 calc(.8*var(--u)) #ffc46a,0 0 calc(1.8*var(--u)) #ff9e3d88}
.rune-book{position:absolute;width:11.4%;padding:0;cursor:pointer;pointer-events:auto;border:0;border-radius:2px 2px 1px 1px;background:linear-gradient(90deg,#1a0f1d,#4f2738 28%,#6a3448 50%,#3c1d2c 78%,#160b16);box-shadow:inset 0 0 0 1px #00000080,calc(.15*var(--u)) 0 calc(.3*var(--u)) #0009;display:grid;place-items:center;transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,1.6,.5,1),filter .3s}
.rune-book:before,.rune-book:after{content:'';position:absolute;left:0;right:0;top:12%;height:6%;background:linear-gradient(90deg,#5a4122,#d1a660,#5a4122)}
.rune-book:after{top:auto;bottom:12%}
.rune-book b{font-family:'Segoe UI Symbol','Noto Sans Symbols 2','DejaVu Sans',Georgia,serif;font-weight:400;font-size:calc(1.05*var(--u));line-height:1;color:#a9895a;text-shadow:0 0 calc(.3*var(--u)) #000;transition:color .3s,text-shadow .3s}
.rune-book:hover,.rune-book:focus-visible{transform:translateY(-3%) scale(1.06);filter:brightness(1.35)}
.rune-book:hover b,.rune-book:focus-visible b{color:#ffd994;text-shadow:0 0 calc(.6*var(--u)) #ffbc55}
.rune-book:hover .hotspot-label,.rune-book:focus-visible .hotspot-label{opacity:1}
.rune-book.pulled{transform:translate(-8%,4%) scale(1.16) rotate(-4deg);filter:brightness(1.25);box-shadow:inset 0 0 0 1px #000a,calc(-.4*var(--u)) calc(.4*var(--u)) calc(.6*var(--u)) #000c}
.rune-book.pulled b{color:#fff0c2;text-shadow:0 0 calc(.4*var(--u)) #ffc664,0 0 calc(1.2*var(--u)) #ff9a3c}
.rune-book.pulling{animation:book-pull .6s cubic-bezier(.3,1.5,.5,1)}
.rune-book:disabled{cursor:default}


/* Dining room: canvas fire sits inside the painted fireplace and lights the room. */
.scene-fire{position:absolute;left:68.5%;top:44%;width:16%;height:24%;z-index:2;pointer-events:none;mask:linear-gradient(transparent,#000 25%,#000 80%,transparent)}
.scene-fire canvas,.modal-fire canvas,.altar-sparks canvas,.moonbeam canvas,.vortex-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene-fire.igniting{animation:ignite 1.4s ease-out}
.hearth-light{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse 22% 30% at 78% 60%,#3fe08a26,transparent 70%)}
.hearth-light.lit{background:radial-gradient(ellipse 40% 60% at 78% 58%,#5cffa455,#2bd18a1f 45%,transparent 75%),radial-gradient(ellipse 70% 40% at 70% 95%,#3fe08a22,transparent 70%)}
.hearth-offering{position:absolute;bottom:6%;width:18%;aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 calc(.2*var(--u)) calc(.2*var(--u)) #000) brightness(.85)}
.hearth-offering img{width:100%;height:100%;object-fit:contain}
.candle-offering{left:24%}
.formula-offering{left:56%;rotate:-12deg}
.modal-hearth{position:relative;height:calc(24.7*var(--u));background:url(assets/scene-7.webp) 93.75% 54.5%/277.8% 222.2% no-repeat;border:1px solid #5a4560;border-radius:calc(.6*var(--u));box-shadow:0 calc(.6*var(--u)) calc(2*var(--u)) #000a;overflow:hidden}
.modal-hearth:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 calc(3*var(--u)) #000c;pointer-events:none}
.modal-hearth .hearth-light{background:radial-gradient(ellipse 30% 30% at 50% 62%,#3fe08a26,transparent 70%)}
.modal-hearth .hearth-light.lit{background:radial-gradient(ellipse 70% 70% at 50% 62%,#5cffa450,transparent 75%)}
.modal-fire{position:absolute;left:23.6%;top:31.1%;width:44.4%;height:53.3%;mask:linear-gradient(transparent,#000 25%,#000 80%,transparent)}
.hearth-slot{position:absolute;left:25%;top:35.6%;width:52.8%;height:53.3%}

/* Attic: moonlight falls from the rose window onto a ritual circle painted on the floor. */
.moonbeam{position:absolute;left:30%;top:28%;width:40%;height:56%;z-index:1;pointer-events:none;mix-blend-mode:screen;filter:blur(calc(.8*var(--u)));mask:linear-gradient(transparent,#000 30%);opacity:.75}
.moonbeam>i{position:absolute;inset:0;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);background:linear-gradient(#eaf0ff66,#dfe6ff30 55%,#fff3d044)}
.moonbeam.bright{opacity:1}
.moonbeam.bright>i{background:linear-gradient(#fffbe0a0,#fff4c460 55%,#ffe9a890)}
.scene-10 .nav-down{left:12%}
.celestial-altar{overflow:visible}
.altar-circle{position:absolute;inset:0;display:block}
.altar-circle svg{width:100%;height:100%;overflow:visible}
.altar-lines{fill:none;stroke:#cdbb92;stroke-width:.7;opacity:.5}
.altar-lines.blur{stroke:#e8d6a4;stroke-width:2.2;opacity:.18}
.altar-circle text{font-family:Georgia,serif;font-size:6.5px;fill:#d9c79c;text-anchor:middle;dominant-baseline:middle;opacity:.6}
.altar-circle.forged .altar-lines{stroke:#fff0b8;opacity:1}
.altar-circle.forged .altar-lines.blur{opacity:.9;animation:altar-pulse 2.4s ease-in-out infinite alternate}
.altar-circle.forged text{fill:#fff4cc;opacity:1}
.socket{position:absolute;width:8.5%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(#0d0914 50%,#3b2e3d);box-shadow:0 0 0 1px #a8916d88,inset 0 0 calc(.4*var(--u)) #000;display:grid;place-items:center}
.socket img{width:115%;height:115%;object-fit:contain;filter:drop-shadow(0 0 calc(.6*var(--u)) #ffe2a0aa)}
.socket.filled{box-shadow:0 0 0 1px #ffe2a0,0 0 calc(1.2*var(--u)) #ffd88a88}
.celestial-altar.forging .altar-circle{animation:altar-flash 1.8s ease-out}
.altar-sparks{position:absolute;left:30%;top:28%;width:38%;height:58%;pointer-events:none;z-index:3;mix-blend-mode:screen}
.modal-altar>.altar-circle{inset:calc(5*var(--u)) 0 calc(3*var(--u))}
.modal-altar .socket{display:none}
.modal-altar>.altar-sparks{left:0;top:0;width:100%;height:100%}

/* Exit gate: a spectral vortex between the two pillars. */
.vortex-target{z-index:4!important}
.vortex-canvas{filter:drop-shadow(0 0 calc(1.5*var(--u)) #6b2fb088)}
.dissolving-vortex{position:absolute;left:33%;top:14%;width:34%;height:66%;z-index:4;pointer-events:none}
.freedom-glow{position:absolute;inset:10% 25% 15%;pointer-events:none;z-index:3;mix-blend-mode:screen;background:radial-gradient(ellipse at 50% 45%,#fff6c066,transparent 65%);animation:dawn 3s ease-out}

@keyframes door-swing{0%{transform:none;filter:none}10%{transform:translateX(.6%)}18%{transform:translateX(-.4%)}26%{transform:rotateY(0);clip-path:polygon(0 0,100% 2.4%,100% 100%,62.9% 100%,62.9% 76.9%,0 75.7%)}55%,100%{clip-path:polygon(0 0,100% 2.4%,100% 76.9%,62.9% 76.9%,62.9% 76.9%,0 75.7%)}100%{transform:rotateY(74deg);filter:brightness(.45)}}
@keyframes passage-glow{0%,25%{opacity:0}100%{opacity:1}}
@keyframes rumble{15%{translate:-1.2% 0}35%{translate:1.2% 0}55%{translate:-.8% 0}75%{translate:.4% 0}}
@keyframes book-pull{from{transform:none;filter:brightness(2)}}
@keyframes ignite{0%{filter:brightness(4);scale:1.25 1.4;translate:0 -10%}100%{filter:none;scale:1;translate:0}}
@keyframes altar-pulse{from{opacity:.5}to{opacity:1}}
@keyframes altar-flash{0%{filter:brightness(4) drop-shadow(0 0 calc(2*var(--u)) #fff3c0)}100%{filter:none}}
@keyframes dawn{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.secret-door.opening .door-panel{animation:none}}

/* Nursery music box: a painted illustration that rocks while its melody plays. */
.music-box{position:absolute;inset:0;display:block;pointer-events:none}
.music-box img{width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 calc(.4*var(--u)) calc(.4*var(--u)) #000a)}
.music-turning .music-box img{animation:music-rock .55s ease-in-out 4}
/* On the nursery floor: a soft contact shadow and the room's dim violet light. */
.floor-music .music-box:before{content:'';position:absolute;left:12%;right:10%;bottom:9%;height:12%;border-radius:50%;background:radial-gradient(closest-side,#0a0612e6,#0a061200)}
.floor-music .music-box img{position:relative;filter:brightness(.78) saturate(.85) drop-shadow(calc(-.3*var(--u)) calc(.2*var(--u)) calc(.3*var(--u)) #0008)}
@keyframes music-rock{0%,100%{rotate:0deg}25%{rotate:-2deg}75%{rotate:2deg}}

/* Crypt engravings: runes carved in a stone plaque. */
.engraved-runes{background:none;box-shadow:none}
.engraved-runes i{font-family:'Segoe UI Symbol','Noto Sans Symbols 2','DejaVu Sans',Georgia,serif;font-size:calc(2.6*var(--u));color:#8fbfa9;text-shadow:calc(-.1*var(--u)) calc(-.1*var(--u)) 0 #0b0810,calc(.06*var(--u)) calc(.06*var(--u)) 0 #6b6178,0 0 calc(.9*var(--u)) #6fe3b055}

/* Painted props that replace the old CSS drawings. */
.crypt-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(.82) saturate(.9)}
.crypt-placed{position:absolute;left:26%;top:32.6%;width:16%;height:35.3%;z-index:2;pointer-events:none}
.crypt-doorway{position:absolute;left:38.5%;top:45%;width:23%;height:37%;border-radius:50% 50% 0 0/24% 24% 0 0;background:radial-gradient(ellipse 70% 40% at 50% 95%,#6dffb070,transparent 70%),repeating-linear-gradient(transparent 0 7%,#ffffff08 7% 9%) 0 100%/100% 35% no-repeat,linear-gradient(#020104,#0a0611 55%,#16261f);box-shadow:inset 0 0 calc(1*var(--u)) #000}
.crypt-ground{position:absolute;left:24.5%;top:62%;width:19%;height:6%;z-index:1;pointer-events:none;background:radial-gradient(ellipse,#05030ad0,transparent 70%)}
.crypt-fog{position:absolute;left:21%;top:59.5%;width:26%;height:9%;z-index:3;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,#cbbbe266,transparent 70%);filter:blur(calc(.5*var(--u)));animation:crypt-fog 9s ease-in-out infinite alternate}
@keyframes crypt-fog{from{translate:-4% 0;opacity:.7}to{translate:4% 0;opacity:1}}
.crypt-hotspot:hover .crypt-art{filter:drop-shadow(0 0 calc(.8*var(--u)) #b9a0ff88) brightness(1.05)}
.grandfather{position:absolute;inset:0;display:block}
.grandfather img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 calc(.4*var(--u)) calc(.5*var(--u)) #000b) brightness(.9)}
.pendulum{position:absolute;left:calc(50% - 1px);top:37%;height:31%;width:2px;background:linear-gradient(#8a6a3a,#d4a95c);transform-origin:top;rotate:0deg}
.pendulum i{position:absolute;bottom:calc(-.8*var(--u));left:50%;translate:-50% 0;width:calc(1.8*var(--u));aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe7a8,#c99a4c 45%,#6b4a22);box-shadow:0 0 calc(.6*var(--u)) #e8c06a55}
.grandfather.running .pendulum{animation:pendulum 1.5s ease-in-out infinite alternate}
.clock-face-hand{position:absolute;left:calc(50% - .12*var(--u));top:7%;width:calc(.24*var(--u));height:12%;background:linear-gradient(#2a1a10,#5a3a1a);border-radius:2px;transform-origin:50% 100%;rotate:var(--angle);box-shadow:0 0 1px #000}
.clock-drawer{position:absolute;left:27.5%;top:85.3%;width:45%;height:8%;transition:transform .5s}
.clock-drawer.open{background:#07040a;box-shadow:inset 0 calc(.3*var(--u)) calc(.4*var(--u)) #000}
.clock-drawer.open:after{content:'';position:absolute;left:-6%;right:-6%;top:55%;height:85%;background:linear-gradient(#5a3540,#3c2229);border:2px solid #140d1a;border-radius:2px;box-shadow:0 calc(.4*var(--u)) calc(.5*var(--u)) #000a}
.thorn-patch img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transform-origin:0 100%;transform:skewY(-10.6deg);mask:linear-gradient(#000 90%,transparent 99%);animation:thorn-sway 5s ease-in-out infinite alternate;filter:drop-shadow(0 0 calc(.5*var(--u)) #000)}
.thorn-patch:hover img{filter:drop-shadow(0 0 calc(.7*var(--u)) #c46a6a99)}

/* Hall apparition: a wraith that lunges across the hall. */
.ghost{background:none;clip-path:none;border-radius:0;mix-blend-mode:normal;width:15%;height:38%;top:16%;left:66%;filter:drop-shadow(0 0 calc(1.5*var(--u)) #9ef1c4aa)}
.ghost img{width:100%;height:100%;object-fit:contain}
.ghost i,.ghost span{display:none}
@keyframes pendulum{from{rotate:-5deg}to{rotate:5deg}}
@keyframes thorn-sway{from{rotate:-1deg}to{rotate:1.2deg}}
@keyframes haunt{0%{opacity:0;translate:calc(4*var(--u)) calc(3*var(--u));scale:.6}12%{opacity:.85}20%{translate:calc(2*var(--u)) calc(2*var(--u));scale:.75}30%{opacity:.3}34%{opacity:.9}60%{opacity:.8;scale:1.4}100%{opacity:0;translate:calc(-28*var(--u)) calc(-2*var(--u));scale:2.2}}
.scene-3 .nav-down{left:28%}

/* Haunted portrait: a painted face whose glowing pupils follow the player. */
.portrait{background:none;border:0;transform:none;box-shadow:none}
/* The frame is painted in perspective: clip to its exact quad, then lean the canvas to match. */
.portrait-clip{position:absolute;inset:0;clip-path:polygon(0 11.3%,97.2% 0,100% 95.4%,0 100%);background:#120d18}
.portrait-canvas{position:absolute;inset:-4% 0;transform:skewY(-6deg)}
.portrait-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(.9)}
.portrait-art:not([src]){visibility:hidden}
.portrait-canvas:has(.portrait-art:not([src])) .eye{display:none}
.portrait .eye{position:absolute;z-index:2;width:14%;height:8%;translate:-50% -50%;background:none;display:grid;place-items:center}
.portrait .eye b{width:calc(.32*var(--u));height:calc(.32*var(--u));border-radius:50%;background:#f4ffd8;box-shadow:0 0 calc(.35*var(--u)) #c8ff6a,0 0 calc(.9*var(--u)) #7dff4a;transition:transform .12s;animation:pupil-flicker 4s steps(1) infinite}
.portrait:hover .eye b{background:#ffe0d8;box-shadow:0 0 calc(.4*var(--u)) #ff6a5a,0 0 calc(1.2*var(--u)) #ff2a2a}
.portrait:hover .portrait-art{filter:brightness(.95) saturate(1)}
.portrait-canvas:after{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 35%,transparent 40%,#0a0710aa);pointer-events:none}
.ghost{filter:drop-shadow(0 0 calc(1.2*var(--u)) #b9a8ff88)}
@keyframes pupil-flicker{0%,93%,100%{opacity:1}94%,96%{opacity:.1}}

/* Storm: a real bolt seen through the glass, and soft light spilling from the windows. */
.storm{position:absolute;inset:0;pointer-events:none;z-index:1}
.storm-flash{position:absolute;inset:0;mix-blend-mode:screen;opacity:0;animation:lightning 19s linear 7s infinite}
.scene-3 .storm-flash{background:radial-gradient(ellipse 9% 26% at 23% 27%,#efe8ff,#b9a6ff88 45%,transparent 80%),radial-gradient(ellipse 11% 26% at 80.5% 24%,#efe8ff,#b9a6ff88 45%,transparent 80%),radial-gradient(ellipse 60% 75% at 60% 30%,#9d85ff38,transparent 80%)}
.scene-5 .storm-flash{background:radial-gradient(ellipse 45% 40% at 68% 14%,#f1eaffdd,#b9a6ff55 45%,transparent 80%),radial-gradient(ellipse 80% 60% at 60% 30%,#9d85ff30,transparent 80%)}
.storm-window{position:absolute;overflow:hidden;opacity:0;mix-blend-mode:screen;animation:bolt 19s linear 7s infinite}
.scene-3 .storm-window{left:75.5%;top:8%;width:10.5%;height:33%;border-radius:50% 50% 0 0/22% 22% 0 0}
.scene-5 .storm-window{left:58%;top:2%;width:20%;height:42%}
.storm-window svg{position:absolute;left:15%;top:-5%;width:70%;height:110%;overflow:visible}
.storm-window path{fill:none;stroke:#fbf8ff;stroke-width:2.6;stroke-linejoin:bevel;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #a98bff) drop-shadow(0 0 22px #7d5cff)}
@keyframes bolt{0%,1.2%,100%{opacity:0}.25%,.55%{opacity:1}.4%{opacity:.3}1.4%,2.1%{opacity:0}1.6%{opacity:.7}}

/* Cemetery medallion: lying flat on the pedestal, catching the moonlight. */
.scene-1 [data-take="medallion"] img{transform:perspective(calc(30*var(--u))) rotateX(58deg);filter:drop-shadow(0 calc(.5*var(--u)) calc(.3*var(--u)) #000c);animation:gleam 3.2s ease-in-out infinite}
.scene-1 [data-take="medallion"]:before{content:'';position:absolute;inset:30% 4% 18%;border-radius:50%;background:radial-gradient(#000a,transparent 70%)}
.scene-1 [data-take="medallion"] .item-tooltip{bottom:80%}
@keyframes gleam{0%,70%,100%{filter:drop-shadow(0 calc(.5*var(--u)) calc(.3*var(--u)) #000c) brightness(1)}82%{filter:drop-shadow(0 calc(.5*var(--u)) calc(.3*var(--u)) #000c) drop-shadow(0 0 calc(.8*var(--u)) #ffd98a) brightness(1.25)}}

.button#restart.confirming{border-color:#e07a5f;color:#ffd2c4;background:linear-gradient(180deg,#3a1a22e0,#24121ae8)}

/* Broken newel post in the hall: its ball has snapped off and rolled away. */
.broken-newel{position:absolute;left:69%;top:60%;width:5%;height:30%;z-index:2;pointer-events:none;overflow:visible}
.broken-newel path,.broken-newel ellipse{vector-effect:non-scaling-stroke;stroke-linejoin:round}
.newel-hole{fill:#000}
.newel-splinter{fill:#4c405a;stroke:#140d1a;stroke-width:1px}
.newel-ball{stroke:#0d0912;stroke-width:1.6px}
.newel-ball-stub{fill:#2e2238;stroke:#0d0912;stroke-width:1.4px}
.newel-ball-shadow{fill:#000;opacity:.55}
.newel-crack{fill:none;stroke:#0d0912;stroke-width:1.6px}
.newel-debris path{fill:#5a4c66;stroke:#120c18;stroke-width:1.3px}.newel-debris path.dark{fill:#3a2c45}.newel-debris{filter:drop-shadow(0 1px 1px #000c)}
.vortex-canvas{inset:auto!important;left:-60%!important;top:-25%!important;width:220%!important;height:150%!important;pointer-events:none}

/* Grand Hall: wrought-iron gate at the foot of the stairs; once unlocked its leaves stay swung back against the rails. */
.stair-gate{position:absolute;inset:0;display:block;pointer-events:none;filter:drop-shadow(0 calc(.2*var(--u)) calc(.2*var(--u)) #000a)}
.stair-gate.open{inset:auto;z-index:1}
.iron-gate{width:100%;height:100%;overflow:visible}
.iron-gate .gate-leaf{transform-box:fill-box;transition:transform 1.2s cubic-bezier(.5,0,.3,1)}
.iron-gate .gate-l{transform-origin:0 50%}
.iron-gate .gate-r{transform-origin:100% 50%}
.stair-gate.open .gate-leaf{transform:scaleX(.2)}
.stair-gate.open .gate-lock{opacity:0}
.stair-gate.opening .gate-leaf{animation:gate-swing 1.3s cubic-bezier(.5,0,.3,1)}
.stair-gate.opening .gate-lock{animation:gate-lock-off .5s ease-out}
@keyframes gate-swing{0%,15%{transform:none}100%{transform:scaleX(.2)}}
@keyframes gate-lock-off{from{opacity:1}to{opacity:0}}

/* Painted set dressing (props.js): standing in the scenery, beneath every interactive item. */
.macabre-props{position:absolute;inset:0;z-index:1;pointer-events:none}
.macabre-prop{position:absolute;object-fit:contain;filter:brightness(var(--light,.8)) drop-shadow(0 calc(.3*var(--u)) calc(.3*var(--u)) #000a)}
.macabre-prop.mirrored{transform:scaleX(-1)}