/* The playable layer of the tours (includes/house-exhibits/acts.php, quests.php): props beside the chapter text, spots on
   the photos, the Black Sacrament, Hakkvild's great door, the Shout, the quest tracker and the full-screen effects.
   Round 3 and round 4 art; light effects are real alpha. */

/* props and words: an object with a cue; clicked, it changes state and shows its card */
.hx-act{margin:26px 0 30px;max-width:460px}
.hx-act-thing{display:flex;align-items:flex-end;gap:18px;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.hx-act-thing:focus-visible{outline:2px solid var(--hx-accent);outline-offset:6px}
.hx-act-art{position:relative;display:block;flex:none;width:140px;aspect-ratio:3/4;transition:width .9s cubic-bezier(.3,.6,.3,1),aspect-ratio .9s}
.hx-act-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 18px #000b);transition:opacity .9s ease,transform .8s ease,filter .8s}
.hx-act-after{opacity:0}
.hx-act-thing:hover .hx-act-art>img{transform:translateY(-3px)}
.hx-act.is-done .hx-act-before{opacity:0}.hx-act.is-done .hx-act-after{opacity:1}
.hx-act:not(:has(.hx-act-after)).is-done .hx-act-before{opacity:1}
.hx-act-cue{display:inline-flex;align-items:center;gap:10px;padding-bottom:4px;font:italic 19px/1.3 'Cormorant Garamond',Georgia,serif;color:var(--hx-accent);border-bottom:1px solid color-mix(in srgb,var(--hx-accent) 40%,transparent)}
.hx-act-cue::before{content:'';flex:none;width:6px;height:6px;border:1px solid var(--hx-accent);rotate:45deg}
.hx-act.is-done .hx-act-cue{opacity:.45}.hx-act.is-done .hx-act-cue::before{background:var(--hx-accent)}
.hx-act-card{margin-top:16px;padding:14px 18px;border-left:2px solid var(--hx-accent);background:#00000059;animation:hx-act-in .6s ease both}
.hx-act-title{margin:0 0 6px;font:400 26px/1.2 var(--hx-title);color:var(--hx-ink)}
.hx-act-line{margin:0;font:italic 19px/1.5 'Cormorant Garamond',Georgia,serif;color:#ddd5c8}
.hx-act-note{margin:8px 0 0;font:11px/1.5 Arial,sans-serif;color:var(--hx-muted)}
.hx-act-list{margin:0;padding-left:20px;font:italic 18px/1.5 'Cormorant Garamond',Georgia,serif;color:#ddd5c8}.hx-act-list li{margin:0 0 4px;padding-left:4px}
/* wide props: the open book, the unrolled writ, the word wall, the tome, the sarcophagus with its mask */
.hx-act-tenets.is-done .hx-act-art,.hx-act-contract.is-done .hx-act-art,.hx-act-dah.is-done .hx-act-art{width:min(460px,100%);aspect-ratio:3/2}
.hx-act-fus .hx-act-art{width:200px;aspect-ratio:2/1}.hx-act-fus.is-done .hx-act-art{width:min(460px,100%)}
.hx-act-dah .hx-act-art{width:170px;aspect-ratio:3/2}
.hx-act-ro .hx-act-art{width:220px;aspect-ratio:4/3}.hx-act-ro .hx-act-art>img{width:58%}.hx-act-ro .hx-act-mask{left:auto;right:0;width:46%!important;height:auto!important;top:18%;bottom:auto}
.hx-act-paper{position:absolute;display:block;color:#3b2a18;opacity:0;transition:opacity .8s ease .7s;text-align:left;font:15px/1.45 'Cormorant Garamond',Georgia,serif}
.hx-act.is-done .hx-act-paper{opacity:1}
.hx-act-paper b{display:block;margin:0 0 6px;font:400 17px/1.2 var(--hx-title);color:#2a1c10}
.hx-act-paper ol{margin:0;padding-left:18px}.hx-act-paper li{margin:0 0 4px;padding-left:2px}
.hx-paper-book{inset:36% 57% 36% 16%;display:grid;place-items:center;text-align:center}
.hx-paper-book b{font-size:clamp(15px,1.4vw,20px);line-height:1.25}
.hx-paper-scroll{inset:40% 17% 18% 17%;text-align:center;font-size:clamp(14px,1.25vw,18px)}
.hx-act-runes{position:absolute;left:50%;top:52%;width:58%;translate:-50% -50%;display:block;color:#a9d4ff;opacity:0;transition:opacity .6s}
.hx-act-dah .hx-act-runes{top:50%;width:48%;color:#5a3f22}
.hx-runes{display:block;width:100%;height:auto;fill:currentColor;overflow:visible}
.hx-act.is-done .hx-act-runes{opacity:1}
.hx-act.is-done .hx-runes use{animation:hx-rune-flare 1.4s ease both;animation-delay:calc(var(--i)*.45s)}
.hx-act-card .hx-act-runes{position:static;translate:none;width:min(180px,60%);margin:0 0 10px;opacity:1;color:#a9d4ff}
.hx-act-ro.is-done .hx-act-mask{filter:drop-shadow(0 0 16px #6fb8ff) brightness(1.15)}
.hx-act-candle.is-done .hx-act-art::after{content:'';position:absolute;left:46%;top:-2%;width:8%;height:30%;border-radius:50%;background:linear-gradient(#d8d4cc00,#d8d4cc55);filter:blur(4px);animation:hx-smoke 3.2s ease-out forwards}
.hx-act-banner.is-done .hx-act-art>img,.hx-act-goblet.is-done .hx-act-art>img{transform-origin:50% 0;animation:hx-sway 2.6s ease-in-out}
.hx-act-goblet.is-done .hx-act-art>img{transform-origin:50% 100%;animation:hx-toast 1.4s ease-in-out}
.hx-act-relief.is-done .hx-act-art>img,.hx-act-relief.is-done .hx-act-before{filter:drop-shadow(0 0 24px #b3121f) brightness(1.1)}
.hx-act-blade.is-done .hx-act-art>img{filter:drop-shadow(0 0 18px #3a1b4a) brightness(.7)}
.hx-act-ash{position:absolute;left:8%;top:10%;width:56%;aspect-ratio:1;pointer-events:none;background:url('/img/house-exhibits/round4/ash-puff-sheet.webp') 0 0/400% 200% no-repeat;background-position:calc(var(--f,0) * 33.333%) calc(var(--r,0) * 100%)}

/* spots on the photos */
.hx-chapter figure{position:relative}
.hx-spot{position:absolute;width:54px;height:54px;translate:-50% -50%;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;z-index:3}
.hx-spot span{position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--hx-accent) 80%,white);box-shadow:0 0 16px var(--hx-accent),inset 0 0 12px color-mix(in srgb,var(--hx-accent) 40%,transparent);animation:hx-spot-ping 2.8s ease-in-out infinite}
.hx-spot span::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--hx-accent);box-shadow:0 0 10px var(--hx-accent)}
.hx-spot:focus-visible{outline:2px solid var(--hx-accent);outline-offset:4px}
.hx-spot.is-done span{animation:none;opacity:.25}
.hx-views .hx-spot{width:40px;height:40px}
.hx-spot-line{position:absolute;left:12px;right:12px;bottom:12px;margin:0;padding:10px 14px;z-index:4;background:#000000c4;border-left:2px solid var(--hx-accent);font:italic 17px/1.4 'Cormorant Garamond',Georgia,serif;color:#efe6d6;animation:hx-act-in .5s ease both;pointer-events:none}
.hx-spot-line b{font:400 17px/1 var(--hx-title);font-style:normal;color:var(--hx-ink);margin-right:6px}
.hx-fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hx-fx-aura{position:absolute;width:70%;aspect-ratio:1;translate:-50% -55%;background:url('/img/house-exhibits/round4/sithis-aura.webp') center/contain no-repeat;animation:hx-aura 3.6s ease-out forwards}
.hx-fx-glow{position:absolute;width:38%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--fx-c,#ffcf8a) 85%,white) 0,color-mix(in srgb,var(--fx-c,#ffcf8a) 45%,transparent) 22%,transparent 62%);animation:hx-glow 3s ease-out forwards}
.hx-fx-ring{position:absolute;width:30%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:2px dotted #ffd59a;box-shadow:0 0 18px #ffb35a;animation:hx-ring-turn 2.6s cubic-bezier(.3,.6,.3,1) forwards}
.hx-fx-ring+.hx-fx-ring{width:22%;animation-direction:reverse}
.hx-fx-ripple{position:absolute;width:12%;aspect-ratio:2.4;translate:-50% -50%;border-radius:50%;border:2px solid #cfe8ff;animation:hx-ripple 2.4s ease-out forwards}
.hx-fx-mote{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--fx-c,#dff1ff);box-shadow:0 0 8px var(--fx-c,#bfe2ff);animation:hx-mote 4s ease-in-out forwards}
.hx-fx-gust{position:absolute;inset:0;background:url('/img/house-exhibits/round3/pine-wind.webp') center/cover;animation:hx-gust 2.6s ease-in-out forwards}

/* the Black Sacrament */
.hx-sacrament{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:44px;align-items:center;margin:70px auto 80px}
.hx-sacrament-copy h2{font:400 clamp(32px,3.2vw,48px)/1.1 var(--hx-title);margin:16px 0}.hx-sacrament-copy p{font:14px/1.8 Arial,sans-serif;color:var(--hx-muted)}
.hx-chant{margin:20px 0 0;padding-left:16px;border-left:2px solid #b3121f;font:italic 21px/1.5 'Cormorant Garamond',Georgia,serif;color:#e6c8c4;animation:hx-act-in 1.2s ease both}
.hx-sacrament-stage{position:relative;aspect-ratio:1672/941;overflow:hidden;border:1px solid #ffffff14;background:#000}
.hx-sacrament-dark,.hx-sacrament-lit{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-sacrament-lit{-webkit-mask-image:var(--lit,linear-gradient(transparent,transparent));mask-image:var(--lit,linear-gradient(transparent,transparent))}
.hx-sacrament.is-done .hx-sacrament-lit{-webkit-mask-image:none;mask-image:none;animation:hx-fade 1.4s ease both}
.hx-sacrament-candle{position:absolute;width:10%;aspect-ratio:1;translate:-50% -50%;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;z-index:2}
.hx-sacrament-candle span{position:absolute;inset:18%;border-radius:50%;border:1px solid #ffb35a99;box-shadow:0 0 14px #ff9a3c66;animation:hx-spot-ping 2.8s ease-in-out infinite}
.hx-sacrament-candle.is-lit{pointer-events:none}.hx-sacrament-candle.is-lit span{display:none}
.hx-sacrament-candle:focus-visible{outline:2px solid #ffb35a;outline-offset:2px}
.hx-sacrament-relief{position:absolute;right:3%;top:5%;height:62%;width:auto;opacity:0;transition:opacity 1.8s ease .8s;filter:drop-shadow(0 0 26px #b3121fcc)}
.hx-sacrament.is-done .hx-sacrament-relief{opacity:.92}

/* Hakkvild's great door */
.hx-greatdoor{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:44px;align-items:center;margin:70px auto 80px}
.hx-greatdoor-stage{position:relative;aspect-ratio:16/10;overflow:hidden;background:#05070b;border:1px solid #ffffff14}
.hx-greatdoor-back{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;filter:blur(5px) brightness(.42)}
.hx-greatdoor-frame{position:absolute;left:50%;top:50%;height:96%;aspect-ratio:1024/1536;translate:-50% -48%;perspective:1500px}
.hx-greatdoor-frame>img{position:absolute;max-width:none}
.hx-greatdoor-beyond{left:21.78%;top:14.71%;width:56.44%;height:78.58%;object-fit:cover;z-index:1}
.hx-greatdoor-leaf{top:14.71%;height:78.58%;z-index:2;transition:transform 2.3s cubic-bezier(.4,.05,.2,1) .8s}
.hx-greatdoor-left{left:21.78%;width:28.32%;transform-origin:0 50%}
.hx-greatdoor-right{left:50.1%;width:28.12%;transform-origin:100% 50%}
.hx-greatdoor-spill{left:6%;top:4%;width:88%;height:96%;z-index:3;opacity:0;transition:opacity 1.8s ease 1.5s}
.hx-greatdoor-surround{inset:0;width:100%;height:100%;z-index:4}
.hx-greatdoor-beam{left:10%;top:42%;width:80%;height:auto;z-index:5;transition:transform 1.2s cubic-bezier(.5,0,.3,1),opacity .9s ease .5s}
.hx-greatdoor-wind{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.3;pointer-events:none;animation:hx-wind 16s linear infinite}
.hx-greatdoor.is-open .hx-greatdoor-beam{transform:translateX(75%);opacity:0}
.hx-greatdoor.is-open .hx-greatdoor-left{transform:rotateY(78deg)}.hx-greatdoor.is-open .hx-greatdoor-right{transform:rotateY(-78deg)}
.hx-greatdoor.is-open .hx-greatdoor-spill{opacity:.85}
.hx-greatdoor-copy h2{font:400 clamp(30px,3vw,44px)/1.1 var(--hx-title);margin:16px 0}.hx-greatdoor-copy p{font:italic 19px/1.5 'Cormorant Garamond',Georgia,serif;color:#d8d0c4}
.hx-greatdoor-lift{margin-top:10px;cursor:pointer;color:var(--hx-ink)}.hx-greatdoor-lift:disabled{opacity:.45;cursor:default}
.hx-greatdoor-status{min-height:26px;color:var(--hx-accent)!important}

/* the Shout */
.hx-shout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:44px;align-items:center;margin:60px auto 20px;padding:40px 44px;border:1px solid #89bce033;background:#0b1118cc}
.hx-shout-medallion{width:180px;height:auto;filter:grayscale(.7) brightness(.6);transition:filter 1.2s}
.hx-shout.is-ready .hx-shout-medallion{filter:drop-shadow(0 0 24px #6fb8ff88)}
.hx-shout-copy h2{font:400 clamp(30px,3vw,44px)/1.1 var(--hx-title);margin:14px 0 6px}
.hx-shout-words{display:flex;gap:30px;margin:18px 0}
.hx-shout-word{display:grid;justify-items:center;gap:6px;color:#89bce0;opacity:.25;transition:opacity .8s}.hx-shout-word.is-learned{opacity:1}
.hx-shout-word .hx-runes{height:46px;width:auto;filter:drop-shadow(0 0 8px #89bce0)}
.hx-shout-word i{font:400 13px/1 var(--hx-title);font-style:normal;letter-spacing:.14em;text-transform:uppercase}
.hx-shout-hint{font:13px/1.7 Arial,sans-serif;color:var(--hx-muted)}
.hx-shout-button{cursor:pointer;color:var(--hx-ink)}.hx-shout-button:disabled{opacity:.4;cursor:default}
.hx-shout-status{min-height:26px;font:italic 20px/1.5 'Cormorant Garamond',Georgia,serif;color:#cfe6ff}

/* the quest tracker */
.hx-questbar{position:fixed;left:18px;bottom:18px;z-index:60;width:max-content;max-width:min(320px,calc(100vw - 36px));opacity:0;translate:0 12px;pointer-events:none;transition:opacity .5s,translate .5s}
.hx-questbar.is-shown{opacity:1;translate:none;pointer-events:auto}
.hx-questbar-toggle{display:flex;align-items:center;gap:12px;padding:7px 16px 7px 7px;border:1px solid color-mix(in srgb,var(--hx-accent) 40%,transparent);border-radius:40px;background:#08090ddb;backdrop-filter:blur(6px);color:var(--hx-ink);cursor:pointer;text-align:left}
.hx-questbar-toggle:focus-visible{outline:2px solid var(--hx-accent);outline-offset:3px}
.hx-questbar-emblem{position:relative;width:46px;height:46px;flex:none}
.hx-questbar-emblem img{position:absolute;inset:0;width:100%;height:100%}
.hx-questbar-fill{clip-path:inset(calc((1 - var(--p,0)) * 100%) 0 0 0);transition:clip-path .9s ease}
.hx-questbar-words .hx-questbar-fill{clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0)}
.hx-questbar-text b{display:block;font:400 13px/1.2 var(--hx-title);letter-spacing:.05em}
.hx-questbar-text span{font:11px/1.4 Arial,sans-serif;color:var(--hx-accent)}
.hx-questbar-list{list-style:none;margin:0 0 8px;padding:10px 16px;background:#08090df2;border:1px solid #ffffff1c;border-radius:12px;max-height:50vh;overflow:auto;position:absolute;left:0;bottom:calc(100% + 8px);width:min(320px,calc(100vw - 36px))}
.hx-questbar-list li{position:relative;padding:8px 0 8px 18px;border-bottom:1px solid #ffffff10}.hx-questbar-list li:last-child{border:0}
.hx-questbar-list li::before{content:'';position:absolute;left:0;top:14px;width:7px;height:7px;border:1px solid var(--hx-accent);rotate:45deg}
.hx-questbar-list li.is-found::before{background:var(--hx-accent)}
.hx-questbar-list b{display:block;font:400 15px/1.3 'Cormorant Garamond',Georgia,serif;color:var(--hx-ink)}
.hx-questbar-list span{font:11px/1.5 Arial,sans-serif;color:var(--hx-muted)}.hx-questbar-list li.is-found span{opacity:.45}
.hx-questbar-toast{position:absolute;left:0;bottom:calc(100% + 10px);margin:0;padding:10px 16px;white-space:nowrap;background:#08090df2;border:1px solid color-mix(in srgb,var(--hx-accent) 50%,transparent);border-radius:10px;font:italic 17px/1.3 'Cormorant Garamond',Georgia,serif;color:var(--hx-ink);opacity:0;transition:opacity .4s;pointer-events:none}
.hx-questbar-toast.is-shown{opacity:1}
.hx-questbar.is-complete .hx-questbar-emblem{filter:drop-shadow(0 0 10px var(--hx-accent))}

/* full-screen moments: the word's light, the shout, the shroud, the Void */
.hx-screen{position:fixed;inset:0;z-index:9000;pointer-events:none;background-position:center;background-size:cover;background-repeat:no-repeat}
.hx-screen-rush{background-image:url('/img/house-exhibits/round4/word-rush.webp');animation:hx-rush 1.6s ease-out forwards}
.hx-screen-shout{background-image:url('/img/house-exhibits/round4/shout-shockwave.webp');background-size:contain;animation:hx-shout 1.8s cubic-bezier(.2,.7,.3,1) forwards}
.hx-screen-shroud{background:#05030a url('/img/house-exhibits/round4/shroud-smoke.webp') center/cover;animation:hx-shroud 3.2s ease forwards}
.hx-screen-void{background:radial-gradient(ellipse at 50% 50%,#2a0008aa,#000000e6 70%);animation:hx-void 2.6s ease forwards}
.hx-screen p{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;font:400 clamp(34px,5vw,64px)/1.1 'Forum',Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:#d8c9e6;text-shadow:0 0 30px #000;animation:hx-fade 1s ease 1.1s both}
body.hx-shaking main{animation:hx-shake .6s ease-in-out 2}

@keyframes hx-act-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:none}}
@keyframes hx-rune-flare{0%{opacity:.15;filter:none}40%{opacity:1;filter:drop-shadow(0 0 14px #bfe2ff) brightness(2)}100%{opacity:1;filter:drop-shadow(0 0 6px #8ec5ff)}}
@keyframes hx-smoke{0%{opacity:0;translate:0 0;scale:.6}30%{opacity:1}100%{opacity:0;translate:6px -60%;scale:1.4}}
@keyframes hx-sway{0%,100%{rotate:0deg}25%{rotate:3deg}60%{rotate:-2.5deg}}
@keyframes hx-toast{0%,100%{rotate:0deg;translate:0 0}45%{rotate:-12deg;translate:0 -8%}}
@keyframes hx-spot-ping{0%,100%{opacity:.35;scale:.9}50%{opacity:1;scale:1}}
@keyframes hx-aura{0%{opacity:0;scale:.7}35%{opacity:1;scale:1}100%{opacity:.55;scale:1.05}}
@keyframes hx-glow{0%{opacity:0;scale:.6}30%{opacity:1;scale:1}100%{opacity:.35;scale:1.1}}
@keyframes hx-ring-turn{0%{opacity:0;rotate:0deg}20%{opacity:1}100%{opacity:.4;rotate:120deg}}
@keyframes hx-ripple{0%{opacity:1;scale:.3}100%{opacity:0;scale:3.4}}
@keyframes hx-mote{0%{opacity:0;translate:0 0}20%{opacity:1}100%{opacity:0;translate:var(--dx,10px) var(--dy,-40px)}}
@keyframes hx-gust{0%{opacity:0;translate:-30% 0}40%{opacity:.8}100%{opacity:0;translate:30% 0}}
@keyframes hx-wind{from{translate:-6% 0}to{translate:6% 0}}
@keyframes hx-rush{0%{opacity:0;scale:.6}25%{opacity:1}100%{opacity:0;scale:1.8}}
@keyframes hx-shout{0%{opacity:0;scale:.2}20%{opacity:1}100%{opacity:0;scale:2.6}}
@keyframes hx-shroud{0%{opacity:0}20%,70%{opacity:1}100%{opacity:0}}
@keyframes hx-void{0%{opacity:0}25%,65%{opacity:1}100%{opacity:0}}

@media(max-width:760px){
  .hx-act{max-width:none}.hx-act-art{width:110px}
  .hx-sacrament,.hx-greatdoor{grid-template-columns:1fr;gap:22px}.hx-greatdoor-stage{order:-1}
  .hx-shout{grid-template-columns:1fr;padding:28px 22px;gap:18px}.hx-shout-medallion{width:120px}
  .hx-questbar{left:10px;bottom:10px}.hx-questbar-sockets{width:58px;height:58px}
}
@media(prefers-reduced-motion:reduce){
  .hx-act *,.hx-spot *,.hx-spot-line,.hx-fx *,.hx-sacrament *,.hx-greatdoor *,.hx-screen,.hx-screen *,.hx-questbar *{animation:none!important;transition:none!important}
  .hx-screen{display:none}body.hx-shaking main{animation:none}
}

/* round 5 hooks (the Den, the Library): sprites and effect images over the photos, a reward with the line, a locked spot,
   the closing screen, and the crest standing in for an emblem until its art arrives */
.hx-fx-sprite{position:absolute;aspect-ratio:1;translate:-50% -50%;background-repeat:no-repeat;transition:opacity .5s}
.hx-fx-sprite.is-gone{opacity:0}
.hx-fx-overlay{position:absolute;aspect-ratio:1;translate:-50% -50%;background:center/contain no-repeat;animation:hx-glow 3.4s ease-out forwards}
.hx-fx-overlay.is-cover{left:0!important;top:0!important;width:100%!important;height:auto;max-height:100%;aspect-ratio:16/9;translate:none;background-size:cover}   /* the photo's own frame, not the caption below it */
.hx-spot-line .hx-spot-reward{float:left;width:66px;height:66px;object-fit:contain;margin:-2px 12px 2px 0;filter:drop-shadow(0 4px 8px #000)}
.hx-spot-line .hx-spot-cell{display:block;background-repeat:no-repeat}
.hx-spot-line .hx-spot-locked{display:none}
.hx-spot-line.is-locked .hx-spot-locked{display:inline}.hx-spot-line.is-locked .hx-spot-open{display:none}
/* round 5 parchments (quests.php "write"): the contract and the pages are blank art; the words are written on them */
.hx-spot-line:has(.hx-spot-writ){left:50%;right:auto;top:50%;bottom:auto;translate:-50% -50%;width:min(460px,80%);padding:0;background:none;border:0;animation-name:hx-writ-in}
.hx-spot-line:has(.is-page){width:min(340px,52%)}
.hx-spot-paper{position:relative;display:block;container-type:inline-size;background:center/contain no-repeat;filter:drop-shadow(0 12px 20px #000000d0)}
.hx-spot-paper.is-contract{aspect-ratio:900/618}
.hx-spot-paper.is-page{aspect-ratio:1}
.hx-spot-ink{position:absolute;display:block;font:italic clamp(11px,3.7cqi,17px)/1.38 'Cormorant Garamond',Georgia,serif;color:#3a2414}
.hx-spot-paper.is-contract .hx-spot-ink{left:9%;right:31%;top:15%}
.hx-spot-paper.is-page .hx-spot-ink{left:28%;right:28%;top:28%;font-size:clamp(9px,4.1cqi,15px);text-align:center;hyphens:auto;overflow-wrap:break-word}
.hx-spot-line .hx-spot-ink b{display:block;margin:0 0 .4em;font:600 1.12em/1.2 'Cormorant Garamond',Georgia,serif;color:#24160b}
@keyframes hx-writ-in{from{opacity:0;scale:.86;rotate:-2deg}to{opacity:1;scale:1;rotate:0deg}}
/* round 5 emblems: one socket per secret (acts.php houseActTracker, the <name>-slots strip: empty emblem + 5 sockets) */
.hx-questbar-sockets{width:72px;height:72px}
.hx-questbar-sockets i{position:absolute;inset:0;background:var(--strip) 0 0/600% 100% no-repeat}
.hx-questbar-sockets [data-hx-socket]{opacity:0;scale:1.35;transition:opacity .45s ease,scale .7s cubic-bezier(.2,.7,.3,1.4)}
.hx-questbar-sockets [data-hx-socket].is-on{opacity:1;scale:1}
.hx-questbar-sockets [data-hx-socket="0"]{background-position:20% 0;transform-origin:50% 24%}
.hx-questbar-sockets [data-hx-socket="1"]{background-position:40% 0;transform-origin:25% 43.5%}
.hx-questbar-sockets [data-hx-socket="2"]{background-position:60% 0;transform-origin:75% 43.5%}
.hx-questbar-sockets [data-hx-socket="3"]{background-position:80% 0;transform-origin:35% 70%}
.hx-questbar-sockets [data-hx-socket="4"]{background-position:100% 0;transform-origin:65% 70%}
.hx-spot.is-denied span{animation:hx-deny .45s ease}
.hx-screen-finale{background:radial-gradient(circle at 50% 42%,#00000000 0,#000000d0 62%),var(--screen-img,none) center 36%/auto min(58vh,560px) no-repeat,#000000e8;animation:hx-shroud 4.8s ease forwards}
.hx-screen-finale p{top:80%;color:#e8d3a6}
.hx-questbar-fallback .hx-questbar-emblem img{padding:4px}
.hx-questbar-fallback .hx-questbar-emblem>img:first-child{filter:grayscale(1) brightness(.4)}
@keyframes hx-deny{0%,100%{translate:0 0}25%{translate:-5px 0}50%{translate:4px 0}75%{translate:-2px 0}}
/* round 6 props (quests.php $round6): sizes for their shapes, and what each does once clicked. The pairs are not
   pixel-identical, so the crossfade is slow enough to read as one object changing */
.hx-act-lamp .hx-act-art,.hx-act-hourglass .hx-act-art,.hx-act-rose .hx-act-art,.hx-act-soulgem .hx-act-art{width:118px;aspect-ratio:1/2}
.hx-act-nirnroot .hx-act-art,.hx-act-mushlamp .hx-act-art,.hx-act-torchbugs .hx-act-art{width:150px;aspect-ratio:2/3}
.hx-act-scales .hx-act-art,.hx-act-statuette .hx-act-art,.hx-act-armillary .hx-act-art,.hx-act-inkwell .hx-act-art,.hx-act-rootbook .hx-act-art{width:180px;aspect-ratio:1}
.hx-act-chest .hx-act-art{width:210px;aspect-ratio:1}
.hx-act-summons .hx-act-art{width:220px;aspect-ratio:4/3}.hx-act-catalogue .hx-act-art{width:240px;aspect-ratio:3/2}
.hx-act-summons.is-done .hx-act-art{width:min(460px,100%);aspect-ratio:5/3}.hx-act-catalogue.is-done .hx-act-art{width:min(480px,100%);aspect-ratio:3/2}
.hx-act-hourglass .hx-act-art>img,.hx-act-rose .hx-act-art>img{transition-duration:2.6s}
.hx-act-lamp.is-done .hx-act-after{filter:drop-shadow(0 0 22px #ffb35a99) drop-shadow(0 12px 18px #000b)}
.hx-act-statuette.is-done .hx-act-after{filter:drop-shadow(0 0 16px #5fd4d088) drop-shadow(0 12px 18px #000b)}
.hx-act-nirnroot.is-done .hx-act-after{filter:drop-shadow(0 0 20px #bfe6ff99);animation:hx-chime 1.8s ease-out}
.hx-act-mushlamp.is-done .hx-act-after{filter:drop-shadow(0 0 22px #3fe0b088)}
.hx-act-armillary.is-done .hx-act-art>img{transform-origin:50% 90%;animation:hx-sway 2.6s ease-in-out}
.hx-act-armillary.is-done .hx-act-after{filter:drop-shadow(0 0 18px #5aa8ff99) drop-shadow(0 12px 18px #000b)}
.hx-act-soulgem.is-done .hx-act-after{filter:drop-shadow(0 0 22px #c9a6ffaa)}
.hx-act-inkwell.is-done .hx-act-after{filter:drop-shadow(0 0 14px #7fb8ff66) drop-shadow(0 12px 18px #000b)}
.hx-act-torchbugs.is-done .hx-act-art::before,.hx-act-torchbugs.is-done .hx-act-art::after{content:'';position:absolute;left:44%;top:18%;width:6px;height:6px;border-radius:50%;background:#f2ff9a;box-shadow:0 0 10px 3px #d8ff5a99;animation:hx-bug 3.4s ease-out forwards;z-index:1}
.hx-act-torchbugs.is-done .hx-act-art::after{left:58%;animation-delay:.5s;animation-duration:3.9s}
.hx-paper-invite{inset:20% 40% 20% 10%;font-size:clamp(15px,1.3vw,19px)}
.hx-paper-catalogue{inset:20% 54% 32% 16%;display:grid;place-items:center;text-align:center;font-size:clamp(12px,1vw,15px);line-height:1.3}
@keyframes hx-chime{0%{transform:scale(1)}30%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes hx-bug{0%{opacity:0;translate:0 0}15%{opacity:1}100%{opacity:0;translate:var(--bx,-30px) -220px}}

/* round 6 interludes (acts.php): Vile's Wager and the Arcane Enchanter, laid out like the Black Sacrament */
.hx-game{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:44px;align-items:center;margin:70px auto 80px}
.hx-enchanter{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr)}
.hx-game-copy h2{font:400 clamp(32px,3.2vw,48px)/1.1 var(--hx-title);margin:16px 0}
.hx-game-copy>p{font:14px/1.8 Arial,sans-serif;color:var(--hx-muted)}
.hx-game-copy>.hx-game-status{min-height:1.5em;margin:14px 0 0;font:italic 19px/1.4 'Cormorant Garamond',Georgia,serif;color:var(--hx-ink)}
.hx-game-stage{position:relative;aspect-ratio:1664/944;overflow:hidden;border:1px solid #ffffff14;background:#000}
.hx-game-scene,.hx-enchanter-lit{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-wager-cup{position:absolute;width:9%;padding:0;border:0;background:none;translate:-50% -100%;cursor:pointer;z-index:2;transition:left .38s cubic-bezier(.5,0,.3,1),transform .45s cubic-bezier(.3,.7,.3,1)}
.hx-wager-cup img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 8px #000c)}
.hx-wager-cup:disabled{cursor:default}
.hx-wager-cup:not(:disabled):hover{transform:translateY(-5%)}
.hx-wager-cup:not(:disabled) img{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--hx-accent) 60%,transparent)) drop-shadow(0 10px 8px #000c)}
.hx-wager-cup:focus-visible{outline:2px solid var(--hx-accent);outline-offset:4px}
.hx-wager-cup.is-up{transform:translateY(-82%) rotate(-7deg)}
.hx-wager-coin{position:absolute;width:3.6%;translate:-50% -100%;opacity:0;transition:opacity .3s;filter:drop-shadow(0 3px 3px #000)}
.hx-wager-coin.is-shown{opacity:1}
.hx-wager-gotcha{position:absolute;right:7%;top:9%;width:7%;opacity:0;pointer-events:none;filter:drop-shadow(0 0 18px #e8c36a)}
.hx-wager.is-gotcha .hx-wager-gotcha{animation:hx-gotcha 1.6s cubic-bezier(.2,.7,.3,1) forwards}
.hx-wager-talk{margin:16px 0 0}
.hx-wager-talk span{display:block;margin:6px 0;font:italic 19px/1.4 'Cormorant Garamond',Georgia,serif;color:var(--hx-ink)}
.hx-wager-talk b{margin-right:6px;font:400 13px/1 var(--hx-title);font-style:normal;letter-spacing:.06em;color:var(--hx-accent)}
.hx-wager-talk i{font-style:italic}
.hx-enchanter-lit{opacity:0;transition:opacity 1.6s ease}
.hx-enchanter.is-done .hx-enchanter-lit{opacity:1}
.hx-enchanter-gem,.hx-enchanter-circlet{position:absolute;translate:-50% -50%;opacity:0;transform:translateY(-35%);filter:drop-shadow(0 6px 6px #000c);transition:opacity .6s ease,transform .7s cubic-bezier(.3,.7,.3,1.3),filter 1.2s ease;z-index:2}
.hx-enchanter-gem.is-placed,.hx-enchanter-circlet.is-placed{opacity:1;transform:none}
.hx-enchanter.is-done .hx-enchanter-gem{opacity:0;transform:translateY(-45%) scale(.6);filter:brightness(3) drop-shadow(0 0 22px #c9a6ff);transition-duration:1.8s}
.hx-enchanter.is-done .hx-enchanter-circlet{filter:drop-shadow(0 0 16px #7fbaff) brightness(1.3)}
.hx-enchanter-burst{position:absolute;left:66.7%;top:53.3%;width:42%;translate:-50% -50%;opacity:0;pointer-events:none;z-index:3}
.hx-enchanter.is-done .hx-enchanter-burst{animation:hx-ench-burst 1.6s cubic-bezier(.2,.6,.3,1) forwards}
.hx-enchanter-steps{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 16px}
.hx-enchanter-item{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 8px;border:1px solid color-mix(in srgb,var(--hx-accent) 45%,transparent);border-radius:40px;background:#08090dcc;color:var(--hx-ink);font:italic 17px/1.2 'Cormorant Garamond',Georgia,serif;cursor:pointer;transition:opacity .4s,border-color .3s}
.hx-enchanter-item:hover{border-color:var(--hx-accent)}
.hx-enchanter-item img{width:34px;height:34px;object-fit:contain}
.hx-enchanter-item:disabled{opacity:.4;cursor:default}
.hx-enchanter-item:focus-visible{outline:2px solid var(--hx-accent);outline-offset:3px}
@keyframes hx-gotcha{0%{opacity:0;transform:translateY(40%) rotateY(0)}40%{opacity:1}100%{opacity:1;transform:translateY(0) rotateY(720deg)}}
@keyframes hx-ench-burst{0%{opacity:0;scale:.4}18%{opacity:1}100%{opacity:0;scale:1.3}}
@media(max-width:760px){
  .hx-game,.hx-enchanter{grid-template-columns:1fr;gap:22px}.hx-enchanter .hx-game-stage{order:-1}
  .hx-wager-cup{width:12%}
}
@media(prefers-reduced-motion:reduce){.hx-game *{animation:none!important;transition:none!important}}
/* buttons in the interludes (a <button class="hx-enter"> has no colour of its own), and wide opened props let their cue wrap */
.hx-game .hx-enter{color:var(--hx-ink);cursor:pointer}
.hx-game .hx-enter:disabled{opacity:.45;cursor:default}
.hx-act-thing{flex-wrap:wrap}