/* Escape the Kooky Manor of Fright — Developed by Slyness */
/* Ten inventory slots still fit beside the label, hint and logo. */
.inventory{gap:calc(.5*var(--u))}
.inventory-slot{width:calc(4.9*var(--u));height:calc(4.9*var(--u))}
.inventory-label{width:calc(8*var(--u))}

/* Altar: the fourth offering (Larme Spectrale) sits below the circle. */
.modal-altar .offering:nth-of-type(4){left:calc(20.5*var(--u));top:calc(19.5*var(--u))}
.modal-altar .offering:nth-of-type(2),.modal-altar .offering:nth-of-type(3){top:calc(10*var(--u))}

/* ---------- In-scene pieces ---------- */
.slab-hotspot{overflow:visible}
.crypt-slab{position:absolute;inset:0;display:block;clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);background:linear-gradient(#5a4e63,#3a3043 70%,#2a2232);box-shadow:inset 0 0 calc(1.2*var(--u)) #0009;transition:filter .3s}
.crypt-slab:before{content:'';position:absolute;inset:14% 18%;border:calc(.15*var(--u)) solid #221a29;clip-path:inherit;opacity:.7}
.crypt-slab i{position:absolute;left:47%;top:38%;width:6%;aspect-ratio:1;border:calc(.25*var(--u)) solid #8a7a6c;border-radius:50%;box-shadow:0 0 calc(.3*var(--u)) #000}
.crypt-slab.open{background:radial-gradient(ellipse at 50% 80%,#0a2b20 0%,#05030a 55%);box-shadow:inset 0 calc(.8*var(--u)) calc(1.5*var(--u)) #000,0 0 calc(2*var(--u)) #3df0a033}
.crypt-slab.open:before{inset:auto 10% 12%;height:22%;border:0;background:repeating-linear-gradient(#2e2833 0 30%,#120e16 30% 50%);opacity:.8}
.crypt-slab.open i{display:none}

.telescope-glint{position:absolute;left:6%;top:4%;width:14%;aspect-ratio:1;border-radius:50%;background:radial-gradient(#fff 0,#c9e7ff88 30%,transparent 70%);animation:glint 2.6s ease-in-out infinite}
@keyframes glint{0%,100%{opacity:.25;scale:.7}50%{opacity:1;scale:1.15}}

.lectern-glow{position:absolute;inset:0;border-radius:calc(1*var(--u));pointer-events:none}
.lectern-glow.solved{background:radial-gradient(ellipse at 50% 30%,#9cffd040,transparent 70%)}


.organ-glow{position:absolute;inset:0;pointer-events:none}
.organ-glow.solved{background:radial-gradient(ellipse at 50% 45%,#8dffc22a,transparent 60%);animation:altar-pulse 3s ease-in-out infinite alternate}

.vitrine-light{position:absolute;inset:0;display:block}
.vitrine-light.open{background:radial-gradient(ellipse at 50% 42%,#56ff9d38,transparent 65%)}
.moon-lock{position:absolute;left:30%;right:30%;top:49%;display:grid;grid-template-columns:1fr 1fr;gap:6%;padding:3%;background:#1d1424e6;border:calc(.15*var(--u)) solid #b08e4f;border-radius:calc(.3*var(--u))}
.moon-lock .moon{width:100%;height:auto}


/* ---------- Puzzle dialogs ---------- */
.mystery-modal .rumble{animation:rumble .45s linear}
@keyframes rumble{0%,100%{translate:0}20%{translate:calc(-.5*var(--u))}40%{translate:calc(.5*var(--u))}60%{translate:calc(-.3*var(--u))}80%{translate:calc(.3*var(--u))}}

.riddle-plaque{width:72%;margin:calc(2.4*var(--u)) auto 0;padding:calc(2.4*var(--u)) calc(3*var(--u));background:linear-gradient(135deg,#3a2c44,#20182b);border:calc(.8*var(--u)) ridge #6a4f45;box-shadow:inset 0 0 calc(3*var(--u)) #0008;text-align:center}
.riddle-plaque p{margin:0;font-family:'IM Fell English',Georgia,serif;font-style:italic;font-size:calc(1.75*var(--u));line-height:1.6;color:#efd9b4}
.present-row{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(.8*var(--u));margin:calc(2.2*var(--u)) auto 0;max-width:85%}
.present-row em{color:#8d7b96}
.present-item{display:flex;flex-direction:column;align-items:center;gap:calc(.3*var(--u));width:calc(8*var(--u));padding:calc(.6*var(--u));border:1px solid #67516f;border-radius:calc(.4*var(--u));background:#170f20;color:#cdb9cf;font-size:calc(.7*var(--u));cursor:pointer;transition:border-color .2s,box-shadow .2s}
.present-item img{width:calc(4.2*var(--u));height:calc(4.2*var(--u));object-fit:contain}
.present-item:hover,.present-item:focus-visible{border-color:#edbc68;box-shadow:0 0 calc(1*var(--u)) #eab14e55}

.staff{width:100%;height:auto;overflow:visible}
.staff line{stroke:#3a2a22;stroke-width:1.3}
.staff .ledger{stroke-width:1.6}
.staff .stem{stroke:#1c120d;stroke-width:1.8}
.staff ellipse{fill:#1c120d}

.staff-hint{font-family:'IM Fell English',Georgia,serif;font-style:italic;font-size:13px;fill:#9b3b25;text-anchor:middle}
.inspect-staff{margin-top:calc(1*var(--u));padding:calc(.4*var(--u)) calc(.8*var(--u));background:linear-gradient(#efe0bb,#d6c08f);border-radius:calc(.3*var(--u));box-shadow:inset 0 0 calc(1*var(--u)) #7a5a2a88}

.organ-workspace{width:calc(70*var(--u));margin:calc(1.4*var(--u)) auto 0;display:flex;flex-direction:column;align-items:center;gap:calc(1.4*var(--u))}
.organ-score{width:calc(46*var(--u));min-height:calc(11*var(--u));padding:calc(.6*var(--u)) calc(1.4*var(--u));background:linear-gradient(#efe0bb,#d3bb88);border:calc(.4*var(--u)) solid #4a3022;border-radius:calc(.3*var(--u));box-shadow:0 calc(.6*var(--u)) calc(1.4*var(--u)) #0008,inset 0 0 calc(1.4*var(--u)) #7a5a2a88}
.organ-score.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(.8*var(--u));background:linear-gradient(#3a2a2f,#22171f);color:#bba7b6;font-family:'IM Fell English',Georgia,serif;font-size:calc(1.3*var(--u))}
.organ-score.empty p{margin:0}
.organ-score.empty span{font-size:calc(1*var(--u));color:#8d7b96}
.organ-score .button{font-size:calc(1*var(--u));padding:calc(.7*var(--u)) calc(1.2*var(--u))}
.organ-pipes{display:flex;gap:calc(.7*var(--u));align-items:flex-end;height:calc(4.4*var(--u))}
.organ-pipes i{width:calc(1.5*var(--u));height:100%;border-radius:calc(.75*var(--u)) calc(.75*var(--u)) 0 0;background:linear-gradient(90deg,#4b4656,#9a95a8 45%,#3b3645);box-shadow:inset 0 calc(-.3*var(--u)) 0 #1a1520;transition:background .3s,box-shadow .3s}
.organ-pipes i:nth-child(odd){height:80%}
.organ-pipes i.lit{background:linear-gradient(90deg,#3b8a63,#b5ffd8 45%,#2d6a4b);box-shadow:0 0 calc(1.2*var(--u)) #7dffbd88}
.organ-keys{display:flex;padding:calc(.8*var(--u)) calc(1*var(--u)) calc(1*var(--u));background:linear-gradient(#4c3122,#2a1a12);border-radius:calc(.4*var(--u));box-shadow:0 calc(.8*var(--u)) calc(1.6*var(--u)) #000a}
.organ-key{width:calc(6.2*var(--u));height:calc(15*var(--u));margin:0 calc(.12*var(--u));border:1px solid #1a1210;border-radius:0 0 calc(.5*var(--u)) calc(.5*var(--u));background:linear-gradient(#f3ead6,#d8cbaa 85%,#b8a983);cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(1*var(--u));font-family:'IM Fell English',Georgia,serif;font-size:calc(1.3*var(--u));color:#4a3424;transition:translate .08s,background .2s}
.organ-key:hover:not(:disabled),.organ-key:focus-visible{background:linear-gradient(#fff6e2,#e8d9b6 85%,#c9b98f)}
.organ-key:active:not(:disabled){translate:0 calc(.3*var(--u));background:linear-gradient(#d8f5df,#a9d7b6)}
.organ-key:disabled{cursor:default;filter:brightness(.55)}
.organ-workspace.solved .organ-key{filter:brightness(.8) sepia(.4) hue-rotate(80deg)}

.sky-view{position:relative;width:calc(36*var(--u));aspect-ratio:1;margin:calc(1.4*var(--u)) auto 0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 40%,#2a1c4a,#0b0717 70%);border:calc(1.2*var(--u)) solid #6b4f2c;box-shadow:0 0 0 calc(.3*var(--u)) #c89b55,inset 0 0 calc(4*var(--u)) #000,0 calc(1*var(--u)) calc(3*var(--u)) #000a}
.sky-stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 33% 52%,#fff,transparent),radial-gradient(1.5px 1.5px at 48% 12%,#fff,transparent),radial-gradient(1px 1px at 61% 40%,#dcd,transparent),radial-gradient(1px 1px at 82% 48%,#fff,transparent),radial-gradient(1.5px 1.5px at 18% 46%,#fff,transparent),radial-gradient(1px 1px at 52% 86%,#fff,transparent),radial-gradient(1px 1px at 90% 70%,#fff,transparent),radial-gradient(1px 1px at 40% 70%,#ccf,transparent),radial-gradient(1.5px 1.5px at 70% 8%,#fff,transparent);animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.6}to{opacity:1}}
.sky-moon{position:absolute;width:20%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:calc(.3*var(--u))}
.sky-moon .moon{width:100%;filter:drop-shadow(0 0 calc(1*var(--u)) #f5e9c088)}
.sky-moon b{font-family:'IM Fell English',Georgia,serif;font-weight:400;font-size:calc(1.5*var(--u));color:#e9d8a8;text-shadow:0 0 calc(.5*var(--u)) #000}

.moon{display:block}
.moon-dark{fill:#1a1428}
.moon-lit{fill:#f2e7c4}
.moon-rim{fill:none;stroke:#8f84a6;stroke-width:1.4}

.moon-dials{display:flex;justify-content:center;gap:calc(2.4*var(--u));margin-top:calc(3*var(--u))}
.moon-dial{display:grid;grid-template-columns:auto calc(9*var(--u)) auto;grid-template-rows:auto;align-items:center;justify-items:center;gap:calc(.6*var(--u)) calc(.4*var(--u))}
.moon-dial>b{grid-column:1/-1;font-family:'IM Fell English',Georgia,serif;font-weight:400;font-size:calc(1.8*var(--u));color:#e2c98f}
.moon-dial small{grid-column:1/-1;font-size:calc(.85*var(--u));color:#a993b5;min-height:calc(1.2*var(--u))}
.dial-face{width:calc(9*var(--u));aspect-ratio:1;padding:calc(.9*var(--u));border-radius:50%;background:radial-gradient(#2a1e3a,#100b18);border:calc(.4*var(--u)) solid #8c6a3c;box-shadow:inset 0 0 calc(1*var(--u)) #000,0 0 calc(1*var(--u)) #0008}
.dial-face .moon{width:100%;height:100%}
.dial-step{width:calc(2.6*var(--u));height:calc(2.6*var(--u));border-radius:50%;border:1px solid #8b6887;background:#1d1426;color:#e8c39a;font-size:calc(1.6*var(--u));line-height:1;cursor:pointer}
.dial-step:hover,.dial-step:focus-visible{border-color:#f0b66a;box-shadow:0 0 calc(.8*var(--u)) #e8a64c66}
.lock-try{display:block;width:calc(24*var(--u));margin:calc(2.6*var(--u)) auto 0;font-size:calc(1.1*var(--u))}

.skull-bone{fill:#d8ccb4;stroke:#1a1219;stroke-width:2}
.skull-eye{fill:#140c14;transition:fill .3s}
.skull-eye.lit{fill:#7dffbd;filter:drop-shadow(0 0 4px #3dff9a)}
.skull-nose{fill:#2a1d27}
.skull-teeth{stroke:#5a4a4d;stroke-width:1.6}

/* Keep the tallest puzzle dialogs inside a 16:9 frame. */
.organ-score{width:calc(42*var(--u));min-height:0}
.organ-score .staff{height:calc(9.5*var(--u))}
.organ-key{height:calc(11*var(--u))}
.sky-view{width:calc(31*var(--u))}

/* The message bubble catches clicks so dismissing it never triggers what lies beneath. */
.bubble{pointer-events:auto;cursor:pointer}

/* ---------- Exit gate (scene 11): iron leaves between the stone pillars ---------- */
.exit-gate{position:absolute;left:33.2%;top:27%;width:36%;height:57%;z-index:2;pointer-events:none;display:flex;perspective:calc(60*var(--u));filter:drop-shadow(0 calc(.4*var(--u)) calc(.4*var(--u)) #000c)}
.exit-leaf{position:relative;flex:1;height:100%;transform-style:preserve-3d;transition:transform 2.4s cubic-bezier(.45,0,.25,1)}
.exit-leaf.left{transform-origin:0 50%}
.exit-leaf.right{transform-origin:100% 50%}
.exit-leaf>i{position:absolute;bottom:0;width:4.2%;top:calc(var(--rise)*2.6%);background:linear-gradient(90deg,#08050c,#3b3045 45%,#130e18);border-radius:calc(.1*var(--u))}
.exit-leaf.left>i{left:calc(4% + var(--rise)*14.2%)}
.exit-leaf.right>i{right:calc(4% + var(--rise)*14.2%)}
.exit-leaf>i:before{content:'';position:absolute;left:50%;top:0;width:260%;aspect-ratio:.55;translate:-50% -88%;clip-path:polygon(50% 0,100% 62%,62% 58%,62% 100%,38% 100%,38% 58%,0 62%);background:linear-gradient(#5a4a63,#1a1420)}
.exit-leaf .rail{position:absolute;left:0;right:0;height:2.4%;background:linear-gradient(#4d405a,#120d17);box-shadow:0 calc(.15*var(--u)) 0 #0008}
.exit-leaf .r1{top:24%}.exit-leaf .r2{top:58%}.exit-leaf .r3{bottom:7%}
.exit-leaf.left .rail{border-radius:calc(.3*var(--u)) 0 0 calc(.3*var(--u))}
.exit-leaf .scroll{position:absolute;top:31%;width:46%;height:20%;border:calc(.35*var(--u)) solid #2a2131;border-radius:50% 50% 0 0;border-bottom:0}
.exit-leaf.left .scroll{right:6%}.exit-leaf.right .scroll{left:6%}
.exit-leaf:after{content:'';position:absolute;top:22%;bottom:0;width:5%;background:linear-gradient(90deg,#08050c,#4d405a 50%,#08050c)}
.exit-leaf.left:after{left:0}.exit-leaf.right:after{right:0}
.exit-lock{position:absolute;left:-7%;top:42%;width:14%;height:15%;background:linear-gradient(135deg,#7a6550,#3a2c22);border:calc(.2*var(--u)) solid #08050c;border-radius:calc(.3*var(--u));box-shadow:0 0 calc(1*var(--u)) #000a;z-index:2}
.exit-lock:after{content:'';position:absolute;left:38%;top:30%;width:24%;height:40%;background:#08050c;clip-path:polygon(30% 0,70% 0,70% 45%,100% 100%,0 100%,30% 45%)}
.exit-gate.open .exit-leaf.left{transform:rotateY(58deg)}
.exit-gate.open .exit-leaf.right{transform:rotateY(-58deg)}
.exit-gate.open{z-index:5}
.exit-gate.open .exit-lock{opacity:0;transition:opacity .4s}
.exit-gate.open .exit-leaf{animation:exit-swing 2.6s cubic-bezier(.45,0,.25,1)}
.exit-gate.open .exit-leaf.right{animation-name:exit-swing-r}
@keyframes exit-swing{0%,20%{transform:none}100%{transform:rotateY(58deg)}}
@keyframes exit-swing-r{0%,20%{transform:none}100%{transform:rotateY(-58deg)}}

/* ---------- Ossuary: the five Hollow niches ---------- */
.hollow-wall{position:absolute;inset:8% 6%;display:block;pointer-events:none;border-radius:calc(1*var(--u));opacity:0;transition:opacity 1s}
.hollow-wall.solved{opacity:1;background:radial-gradient(ellipse at 50% 60%,#5dffa83a,transparent 65%)}
.hollow-puzzle{display:flex;flex-direction:column;align-items:center;gap:calc(1.6*var(--u));margin-top:calc(1.2*var(--u))}
.hollow-niches{display:flex;gap:calc(1.2*var(--u));padding:calc(1.2*var(--u)) calc(1.6*var(--u));background:linear-gradient(#3a3242,#1d1823);border:calc(.6*var(--u)) ridge #5b4c5e;box-shadow:inset 0 0 calc(2*var(--u)) #000a}
.hollow-niche{width:calc(9*var(--u));height:calc(13*var(--u));display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:calc(.3*var(--u));padding:calc(.6*var(--u)) calc(.5*var(--u)) calc(.5*var(--u));border:1px solid #4b3d50;border-radius:calc(4.5*var(--u)) calc(4.5*var(--u)) calc(.3*var(--u)) calc(.3*var(--u));background:radial-gradient(ellipse at 50% 35%,#1e1626,#08060b 80%);color:#cbb9a0;font-family:'IM Fell English',Georgia,serif;font-size:calc(.95*var(--u));cursor:pointer;transition:border-color .2s,box-shadow .2s,translate .2s}
.hollow-niche svg{width:100%;flex:1;min-height:0}
.hollow-niche:hover:not(:disabled),.hollow-niche:focus-visible{border-color:#b58fff;box-shadow:0 0 calc(1*var(--u)) #b58fff44}
.hollow-niche.picked{border-color:#edbc68;box-shadow:0 0 calc(1.4*var(--u)) #eab14e77;translate:0 calc(-.5*var(--u))}
.hollow-niche:disabled{cursor:default}
.hollow-puzzle.solved .hollow-niches{box-shadow:inset 0 0 calc(2*var(--u)) #000a,0 0 calc(3*var(--u)) #4dff9e55}
.hollow-epitaph{width:calc(56*var(--u));padding:calc(1.2*var(--u)) calc(2*var(--u));background:linear-gradient(135deg,#3a2c44,#20182b);border:calc(.4*var(--u)) ridge #6a4f45;font-family:'IM Fell English',Georgia,serif;color:#e3cfa9}
.hollow-epitaph p{margin:0 0 calc(.5*var(--u));font-style:italic;font-size:calc(1.25*var(--u))}
.hollow-epitaph ul{margin:0;padding-left:calc(1.6*var(--u));columns:2;column-gap:calc(2*var(--u));font-style:italic;font-size:calc(1.1*var(--u));line-height:1.5}
.hollow-epitaph li::marker{content:'† ';color:#8f6e52}
.hollow-actions{display:flex;justify-content:center;gap:calc(.8*var(--u));margin-top:calc(1*var(--u))}
.hollow-actions .button{font-size:calc(.95*var(--u));padding:calc(.6*var(--u)) calc(1.1*var(--u))}
.acc-crown{fill:#e2b44c;stroke:#2a1a0a;stroke-width:1.6;stroke-linejoin:round}
.acc-gem{fill:#c2273b;stroke:#2a1a0a;stroke-width:.8}
.acc-wax{fill:#2b2433;stroke:#08050c;stroke-width:1.2}
.acc-drip{fill:#3b3345}
.acc-flame{fill:#ffb84d;filter:drop-shadow(0 0 3px #ff9a2e)}
.acc-strap{stroke:#120c10;stroke-width:2.6}
.acc-patch{fill:#120c10;stroke:#3a2a30;stroke-width:1}
.acc-crack{fill:none;stroke:#2a1d27;stroke-width:1.8;stroke-linejoin:round}
.acc-veil{fill:#f2ecf7;opacity:.42;stroke:#cfc6db;stroke-width:.8}
.acc-rose{fill:#b3243a;stroke:#3a0a12;stroke-width:1}
.acc-rose-in{fill:#7a1424}

/* Once the exit gate swings open, the view travels down the path toward the dawn. */
.escaping .world.scene-11{transform-origin:51% 52%;animation:exit-zoom 4.8s cubic-bezier(.55,0,.75,.4) forwards}
@keyframes exit-zoom{0%,38%{scale:1;filter:none}100%{scale:3.4;filter:brightness(1.9) saturate(.7)}}
@media(prefers-reduced-motion:reduce){.escaping .world.scene-11{animation:none}}
.inventory-hint{width:calc(14*var(--u));font-size:calc(.95*var(--u));line-height:1.6;color:#e2d0e6;text-shadow:0 1px 2px #000}.inventory-hint b{color:#f0b46a;font-weight:700;letter-spacing:calc(.03*var(--u))}