@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#0d0d13;--surface:#171821;--surface2:#211d26;--text:#eee4d7;--muted:#afa3a1;--gold:#d7ad77;--gold2:#f2d9aa;--line:#66564c;--scarlet:#bf5366;--green:#9fc8b6;--purple:#b794d7;--serif:'Cinzel',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif}
*{box-sizing:border-box}html{min-height:100%;color-scheme:dark}body{margin:0;background:radial-gradient(ellipse at 48% -20%,#50343f 0%,transparent 47%),radial-gradient(circle at 80% 75%,#222638,transparent 54%),#0b0d14;color:var(--text);font-family:var(--sans);transition:background 3s;min-height:100vh}body.phase-corrupt{background:radial-gradient(ellipse at 45% -20%,#662b39,transparent 55%),radial-gradient(ellipse at 85% 80%,#3d2531,transparent 53%),#120e16}body.phase-infernal{background:radial-gradient(ellipse at 48% -20%,#842831,transparent 51%),radial-gradient(ellipse at 85% 80%,#3b121a,transparent 53%),#10080d;--scarlet:#f16b77;--line:#8a4851}
.grain{position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
.site-shell{max-width:1670px;margin:0 auto;padding:0 clamp(15px,3.3vw,48px) 14px;min-height:100vh;display:flex;flex-direction:column;position:relative}.masthead{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #90725857;gap:18px;flex:none}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-seal{display:grid;place-items:center;width:44px;height:44px;border:1px solid #927259;border-radius:50%;box-shadow:inset 0 0 0 4px #9d70592b;font:27px var(--serif);color:var(--gold);flex:none}.brand-name{font:600 15px var(--serif);letter-spacing:.2em;color:#f5ddbb;display:block}.brand-sub{font-size:8px;letter-spacing:.29em;color:#bba79a;text-transform:uppercase;display:block;margin-top:5px}.mast-actions{display:flex;align-items:center;gap:10px}.icon-button{border:1px solid #63534f;background:#17151c;color:#dec6ac;border-radius:50%;height:40px;width:40px;cursor:pointer;font-size:20px}.icon-button:hover{border-color:#e4b67c}.clock{display:flex;gap:12px;align-items:center;padding:7px 17px 7px 12px;border-right:1px solid #70605b}.clock[hidden]{display:none}.clock-label{font-size:9px;line-height:1.4;letter-spacing:.18em;color:#b1a49f;max-width:60px}.clock-number{font:27px var(--serif);font-variant-numeric:tabular-nums;color:var(--gold2);min-width:111px}.clock.danger .clock-number{color:#ff8189;animation:blink 1.4s infinite}@keyframes blink{50%{opacity:.65}}
main{flex:1}.site-footer{text-align:center;color:#8f8587;font:9px var(--sans);letter-spacing:.16em;padding:21px 0 9px;text-transform:uppercase}.eyebrow{font:700 10px var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}.display{font:500 clamp(41px,7vw,92px)/1.04 var(--serif);letter-spacing:-.065em;margin:12px 0;color:#f4e5d0;text-shadow:0 9px 30px #000b}.display i{font-style:normal;color:var(--gold);display:block}.heading{font:500 clamp(27px,3vw,43px)/1.16 var(--serif);margin:9px 0;color:#f6dfc2}.subheading{font:500 23px var(--serif);margin:5px 0 16px}.lead{color:#cfc1b9;font:16px/1.75 Georgia,serif;max-width:630px}.muted{color:var(--muted)}.tiny{font-size:11px;color:#c3aea3;line-height:1.6}.ornament{font:24px Georgia;color:#cba16d;letter-spacing:.4em;margin:18px 0}.rule{height:1px;background:linear-gradient(90deg,transparent,#735b51,transparent);margin:15px 0}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #f0d69d;outline-offset:3px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid #d9b17e;background:linear-gradient(130deg,#ebc996,#b9855b);color:#211617;letter-spacing:.12em;font-size:11px;font-weight:800;text-transform:uppercase;min-height:47px;padding:12px 19px;box-shadow:0 7px 24px #0005;transition:filter .2s,transform .2s}.btn:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}.btn.outline{color:#efd4ac;background:#27212a;border-color:#8a735e;box-shadow:none}.btn.ghost{color:#cbb5a3;background:transparent;border:1px solid #635451;box-shadow:none}.btn.danger{color:#fff0ee;background:linear-gradient(130deg,#8b293a,#51202d);border-color:#b75a69}.btn.small{font-size:10px;padding:9px 13px;min-height:36px}.btn.block{width:100%}.btnrow{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.landing{min-height:calc(100vh - 150px);display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:30px clamp(0px,2vw,25px)}.hero-copy{max-width:700px}.hero-art{height:570px;min-height:440px;position:relative;overflow:hidden;border:1px solid #6c4e4a;box-shadow:0 40px 90px #000b;background:radial-gradient(circle at 51% 20%,#c59e7660,transparent 25%),linear-gradient(165deg,#342e3b,#0c111a 70%)}.hero-art:before{content:"";position:absolute;left:15%;right:15%;bottom:0;height:80%;border:13px solid #4e3f43;border-bottom:0;border-radius:48% 48% 0 0;background:repeating-linear-gradient(90deg,#261d23 0 21px,#3a2930 22px 26px,#15151d 27px 34px);box-shadow:0 0 0 6px #1d1a22,0 0 0 9px #7c5d50,inset 0 0 70px #090b12}.hero-art:after{content:"✥";position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);color:#eecf89;font:130px var(--serif);text-shadow:0 0 50px #c8a37199}.hero-fog{position:absolute;left:-30%;right:-30%;bottom:-15%;height:38%;background:radial-gradient(ellipse,#c1a2a056,transparent 65%);filter:blur(18px);z-index:2}.hero-side{max-width:550px;margin-top:10px}.fact-strip{display:flex;flex-wrap:wrap;gap:14px 26px;margin:29px 0 34px;color:#bdb0ab;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.fact-strip b{color:#deae76;font-weight:400}
.panel{border:1px solid #655452;background:linear-gradient(145deg,#23212add,#11141cea);box-shadow:0 15px 40px #0004;min-width:0}.pad{padding:21px}.setup{padding:34px 0 45px;max-width:1060px;margin:auto}.setup .lead{margin-top:4px}.setup-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;margin:22px 0}.setup-fields{padding:26px}.form-label{display:block;font-size:10px;font-weight:800;letter-spacing:.17em;color:#d7b68e;text-transform:uppercase;margin:0 0 8px}.field{display:block;width:100%;height:47px;padding:11px 13px;background:#101219;border:1px solid #716058;color:#f6e8d2;border-radius:2px}.field:focus{border-color:#dfba84}.field-group{margin-bottom:17px}.player-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.option-line{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:#d4c2b5}.option-line input{accent-color:#d1a574}.setup-note{padding:23px;background:linear-gradient(155deg,#2d262c,#15161d)}.setup-note .sigil{font:65px var(--serif);text-align:center;color:#c4a57d;padding:10px}.setup-note p{font:italic 15px/1.75 Georgia,serif;color:#d1bbb0}.setup-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:18px}
.handoff,.registration,.end-screen{max-width:920px;margin:34px auto;text-align:center}.handoff{min-height:570px;display:flex;flex-direction:column;justify-content:center;align-items:center}.handoff .seal{font:110px var(--serif);color:#d3a36b;margin:15px 0;text-shadow:0 0 90px #a65f4770}.handoff .lead{margin:5px auto 20px}.private-book{max-width:790px;margin:15px auto 35px;padding:35px;background:linear-gradient(115deg,#32251f,#241b1a 6%,#e0c497 7%,#eed7a9 52%,#ddbc8a 95%,#321e1d 97%);color:#241916;box-shadow:inset 0 0 0 2px #aa855b,0 24px 60px #0009;text-align:left;min-height:490px}.private-book .eyebrow{color:#75502e}.private-book .heading{color:#392520;font-size:33px}.private-book .field{background:#f9eac9;border:1px solid #957452;color:#2a1e1a}.private-book .form-label{color:#74502e}.private-book .option-line{color:#3c2b24}.private-book p{font:16px/1.6 Georgia,serif}.private-book .pact{background:#9e40311c;padding:13px 17px;margin:18px 0;border-left:3px solid #7b302c}.private-book .btn{background:#34252b;color:#f8deb8;border-color:#654a39}.private-book .private-foot{font:italic 13px Georgia,serif;color:#805e44;margin-top:19px;text-align:center}
.game-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0 17px}.game-top h1{font:500 clamp(22px,2.5vw,34px) var(--serif);margin:5px 0 0}.phase-badge{font:700 10px var(--sans);letter-spacing:.15em;padding:11px 15px;border:1px solid #ac8764;color:#e4c19b;background:#45302440;text-transform:uppercase}.phase-badge.infernal{color:#ffb6b8;border-color:#c65064;background:#551e2d}.game-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,.85fr);gap:18px;align-items:stretch}.board-panel{overflow:hidden}.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 17px;border-bottom:1px solid #6c5550}.board-toolbar h2{font:18px var(--serif);margin:0}.board-toolbar small{color:#b2a09c;font-size:11px}.board-wrap{background:radial-gradient(circle at 50% 20%,#44404b30,transparent 40%),#11141a;position:relative}.board-wrap svg{display:block;width:100%;height:auto;max-height:650px}.board-infernal{background:radial-gradient(circle at 50% 20%,#7f313b55,transparent 60%),#1c0b13}.board-legend{display:flex;flex-wrap:wrap;gap:8px 18px;padding:13px 16px;border-top:1px solid #5d4b47;color:#b6aaa7;font-size:10px}.legend-mark{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}.room-node,.tile-node{cursor:pointer}.room-node:hover rect,.room-node.reachable rect{stroke:#f7d5a0;filter:drop-shadow(0 0 5px #ebbb6c66)}.tile-node.reachable circle{fill:#e5c083;stroke:#fff5c2;filter:drop-shadow(0 0 7px #eecb8baa)}.tile-node:hover circle{stroke:#fff7d7;stroke-width:3}.room-node.solved rect{fill:#2d352b}.room-node .marker{font-size:10px;letter-spacing:.05em}.flesh-wall{filter:drop-shadow(0 0 10px #ee647f88)}.player-token{pointer-events:none;filter:drop-shadow(0 1px 4px #000c)}.player-token text{font-size:10px;font-weight:800;fill:#17131a;dominant-baseline:middle;text-anchor:middle}.board-phase-mark{font-size:13px;letter-spacing:.23em;font-weight:700;text-anchor:middle;fill:#9f8584}
.sidebar{display:flex;flex-direction:column;gap:14px}.turn-card{border:1px solid #ae815e;background:linear-gradient(145deg,#40302a,#1c2029);padding:19px}.turn-title{display:flex;align-items:center;gap:10px}.token-dot{width:28px;height:28px;border-radius:50%;flex:none;border:2px solid #f0dec9;box-shadow:0 0 0 3px #ffffff11}.turn-card h3{font:22px var(--serif);margin:2px 0}.turn-meta{margin-top:14px;display:flex;justify-content:space-between;gap:15px;color:#bfb4ab;font-size:11px}.die-row{display:flex;gap:12px;align-items:center;margin-top:16px}.die-face{width:70px;height:70px;display:grid;place-items:center;border:1px solid #b99a75;background:#e6d3b5;color:#291d20;font:45px var(--serif);box-shadow:0 3px 15px #0007}.turn-controls{display:grid;gap:8px;flex:1}.turn-help{font:italic 12px/1.6 Georgia,serif;color:#bdaea5;margin-top:12px;min-height:40px}.side-block h3{font:19px var(--serif);margin:0 0 15px}.key-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.key{background:#10131a;border:1px solid #574e50;color:#746e73;min-height:42px;display:grid;place-items:center;font:25px Georgia,serif}.key.obtained{background:#413020;border-color:#d4a666;color:#f3cc85;text-shadow:0 0 12px #e5b57288}.clue-meter{height:7px;background:#413a3f;margin:12px 0 8px;overflow:hidden}.clue-meter span{display:block;height:100%;background:#98bdb0;transition:width .4s}.chip-row{display:flex;flex-wrap:wrap;gap:7px}.chip{padding:5px 8px;border:1px solid #63534f;background:#211f29;color:#cbbcb3;font-size:10px}.chip.dead{opacity:.5;text-decoration:line-through}.chip.current{border-color:#e1b27b;color:#f5d4a7}.chip.trapped{border-color:#aa85cb;color:#d3b4e8}.guardian-card{display:grid;grid-template-columns:91px minmax(0,1fr);gap:15px;align-items:center}.guardian-face{width:87px;height:112px;background:radial-gradient(ellipse at 50% 45%,#574751 10%,#15151c 68%);border:1px solid #705553;position:relative;overflow:hidden}.guardian-face:before{content:"";position:absolute;left:20px;top:13px;width:48px;height:110px;border-radius:45% 45% 9% 9%;background:linear-gradient(95deg,#16131a,#51414a,#120f14);box-shadow:0 0 20px #9b5f4972}.guardian-face:after{content:"··";position:absolute;left:30px;top:46px;color:#f19c8f;letter-spacing:7px;font:bold 28px Georgia;text-shadow:0 0 12px #ff757a}.phase-infernal .guardian-face:before{background:linear-gradient(95deg,#411019,#bd4a4b,#230d14);transform:scaleX(1.3)}.phase-infernal .guardian-face:after{color:#ff3f5c;text-shadow:0 0 20px #ff1f54}.guardian-card p{color:#d1bdb6;font:italic 13px/1.6 Georgia,serif;margin:4px 0 0}
.status-line{padding:12px 15px;border:1px solid #584d4b;background:#12141c;color:#c2afa7;font-size:11px;margin-top:15px}.feed{max-height:124px;overflow:auto;font-size:11px;line-height:1.65;color:#a89c96}.feed p{margin:3px 0;border-left:2px solid #6d5146;padding-left:8px}.test-strip{margin-top:12px;border:1px dashed #86624c;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.test-strip span{font-size:10px;color:#dabb95}
.modal-cover{position:fixed;inset:0;background:#050509db;display:flex;align-items:center;justify-content:center;z-index:90;padding:15px;overflow-y:auto;backdrop-filter:blur(7px)}.modal{width:min(720px,100%);max-height:calc(100vh - 28px);overflow-y:auto;border:1px solid #b18a6a;background:radial-gradient(ellipse at 50% -15%,#51353d,#19161e 60%);box-shadow:0 25px 100px #000,0 0 0 7px #4c342729;padding:clamp(22px,3vw,40px);position:relative;text-align:center;animation:materialize .5s ease-out}.modal.wide{width:min(910px,100%)}.modal.private{border-color:#d8b381}.modal.ominous{border-color:#c15b67;background:radial-gradient(ellipse at 50% 0,#6c2735,#160c16 65%)}@keyframes materialize{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-title{font:500 clamp(26px,4vw,40px) var(--serif);color:#f1d3ab;margin:12px 0 15px}.modal.ominous .modal-title{color:#ffc4c7}.modal p{font:16px/1.7 Georgia,serif;color:#d3bfb4;margin:10px auto 18px;max-width:650px}.modal blockquote{font:italic clamp(18px,2.3vw,24px)/1.65 Georgia,serif;color:#f0d5bc;margin:18px auto;padding:16px;border-left:2px solid #b78862;background:#ffffff07;text-align:left}.modal-symbol{font:60px var(--serif);color:#e5b67f;text-shadow:0 0 45px #eaa46f55}.modal-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:23px}.puzzle-prompt{font:italic 20px/1.7 Georgia,serif;color:#ebd4c4;margin:15px 0 25px}.answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:620px;margin:14px auto}.answer-choice{min-height:53px;padding:11px;border:1px solid #8a6758;background:#33282b;color:#eed8c1;transition:background .2s}.answer-choice:hover{background:#5b3a36;border-color:#e4ac7e}.answer-input{width:min(370px,100%);min-height:52px;background:#100f16;color:#efddc1;border:1px solid #9e7961;text-align:center;font:23px var(--serif);padding:10px}.runes{font:26px Georgia,serif;letter-spacing:.33em;color:#b6a6d8;margin:15px 0;padding:15px;border:1px solid #655778;background:#171425}.clue-paper{padding:17px;background:#d4b98b;color:#3b2921;text-align:left;box-shadow:inset 0 0 16px #916e45;font:17px/1.65 Georgia,serif;margin:18px auto}.clue-paper p{color:#3b2921;font-size:17px}.door-picks{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:18px 0}.door-picks button{background:#3c2e26;color:#eac088;border:1px solid #b08b5c;min-width:64px;height:66px;font:22px Georgia;cursor:pointer}.door-picks button:disabled{opacity:.35}.door-progress{min-height:36px;font:22px var(--serif);letter-spacing:.12em;color:#e5c492;margin:15px 0}.warning{color:#f2a7a8!important}.success{color:#a5ddbb!important}.subtle-link{border:0;background:transparent;color:#b9ab9e;text-decoration:underline;font-size:11px;cursor:pointer}.end-screen{min-height:calc(100vh - 180px);display:flex;flex-direction:column;justify-content:center;align-items:center}.end-screen .display{font-size:clamp(40px,6vw,76px);max-width:950px}.end-screen .lead{margin:12px auto 24px}.end-screen.lost .display{color:#e69da2}.locked-hint{color:#cebdab;font:italic 12px Georgia,serif}
@media(max-width:1130px){.game-layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.turn-card{grid-row:span 2}.landing{grid-template-columns:1fr 390px}.hero-art{height:500px}.board-wrap svg{max-height:none}}
@media(max-width:760px){.masthead{height:72px}.brand-name{font-size:11px}.brand-sub{font-size:7px}.brand-seal{height:35px;width:35px;font-size:19px}.clock{padding:3px;gap:6px}.clock-label{display:none}.clock-number{font-size:18px;min-width:70px}.icon-button{height:32px;width:32px;font-size:16px}.landing{grid-template-columns:1fr;padding:30px 0}.hero-art{height:275px;min-height:275px;grid-row:1;max-width:440px;width:100%;margin:auto}.hero-art:before{height:90%}.hero-art:after{font-size:90px}.setup-main{grid-template-columns:1fr}.setup-note{display:none}.player-inputs{grid-template-columns:1fr}.private-book{padding:26px 22px}.sidebar{grid-template-columns:1fr}.turn-card{grid-row:auto}.game-top{flex-wrap:wrap}.modal-cover{align-items:flex-start}.modal{padding:23px 17px}.answer-grid{grid-template-columns:1fr}.board-legend{gap:6px}.game-top h1{font-size:23px}}
.apparition-scene{height:180px;position:relative;margin:15px 0 19px;overflow:hidden;background:radial-gradient(ellipse at center bottom,#44313d,transparent 68%),linear-gradient(#14131b,#09090f);border:1px solid #6d4753;isolation:isolate}.apparition-scene:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 45px,#9a728113 46px 49px,transparent 50px 76px);opacity:.5}.apparition-architecture{position:absolute;left:29%;right:29%;height:190px;top:15px;border:7px solid #473741;border-bottom:0;border-radius:45% 45% 0 0;box-shadow:inset 0 0 30px #000,0 0 30px #000}.apparition-shadow{position:absolute;left:calc(50% - 32px);top:30px;height:157px;width:64px;background:linear-gradient(95deg,#080811,#3d2932,#09070e);border-radius:40% 40% 0 0;clip-path:polygon(44% 0,58% 0,74% 11%,78% 24%,95% 58%,100% 100%,0 100%,7% 58%,23% 24%,27% 11%);filter:drop-shadow(0 0 25px #e59d8366);animation:emerge 1.6s both}.apparition-eyes{position:absolute;left:calc(50% - 11px);top:89px;height:3px;width:24px;background:linear-gradient(90deg,#f3afa0 0 24%,transparent 24% 73%,#f3afa0 74%);filter:drop-shadow(0 0 7px #ff777c);animation:emerge 2s both}.apparition-scene span{position:absolute;bottom:7px;left:0;right:0;font:italic 11px Georgia,serif;color:#cab1ae;z-index:2}.apparition-scene.inside-room .apparition-architecture{border-radius:10px 10px 0 0;border-color:#5d4143}.phase-infernal .apparition-shadow{background:linear-gradient(95deg,#2a0c15,#842f3b,#160911);transform:scaleX(1.4)}.phase-infernal .apparition-eyes{background:linear-gradient(90deg,#ff4c6b 0 24%,transparent 24% 73%,#ff4c6b 74%)}.apparition-scene.vanishing .apparition-shadow,.apparition-scene.vanishing .apparition-eyes{animation:vanish .65s forwards}@keyframes emerge{0%{opacity:0;filter:blur(13px)}100%{opacity:1;filter:blur(0)}}@keyframes vanish{0%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(17px)}}
.player-token.targetable{pointer-events:visiblePainted;cursor:crosshair}.player-token.targetable circle{stroke-width:3;stroke:#e9abbd}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Illustrated edition: painted environments and the Guardian's metamorphosis. */
.hero-art{background:linear-gradient(180deg,#0a0a12aa 0%,#100e1800 35%,#05060d77 100%),url('assets/mansion-entrance.webp') center center/cover no-repeat}
.hero-art::before,.hero-art::after{display:none}
.hero-fog{background:radial-gradient(ellipse,#bca8bb65,transparent 66%);filter:blur(21px)}
.guardian-face{background:#16131a url('assets/guardian-human.webp') center 17%/cover no-repeat;box-shadow:inset 0 0 14px #0008}
.guardian-face::before{position:absolute;inset:0;width:100%;height:100%;left:0;top:0;border-radius:0;background:url('assets/guardian-demon.webp') center 17%/cover no-repeat;box-shadow:none;opacity:0;transition:opacity 2s ease}
.guardian-face::after{display:none}
.phase-corrupt .guardian-face::before{opacity:var(--corruption-opacity,0)}
.phase-infernal .guardian-face::before{opacity:1;transform:none}
.apparition-scene{background:radial-gradient(ellipse at center,#4b273178,transparent 75%),linear-gradient(#0c0d13aa,#07080ccc),url('assets/mansion-entrance.webp') center 44%/cover no-repeat}
.apparition-shadow{left:calc(50% - 84px);top:0;height:185px;width:168px;border-radius:0;background:url('assets/guardian-human.webp') center 15%/cover no-repeat;clip-path:none;mask-image:linear-gradient(#000 0%,#000 67%,transparent 100%);filter:drop-shadow(0 0 25px #e59d8340);animation:emerge 1.6s both}
.apparition-shadow::before{content:"";position:absolute;inset:0;background:url('assets/guardian-demon.webp') center 15%/cover no-repeat;opacity:0;transition:opacity 2s ease}
.phase-corrupt .apparition-shadow::before{opacity:var(--corruption-opacity,0)}
.phase-infernal .apparition-shadow{background:url('assets/guardian-human.webp') center 15%/cover no-repeat;transform:none}
.phase-infernal .apparition-shadow::before{opacity:1}
.apparition-eyes{display:none}
.room-scene{width:100%;height:clamp(145px,24vh,230px);margin:8px auto 15px;position:relative;overflow:hidden;border:1px solid #9c755d;background:#15141a;box-shadow:0 8px 25px #0009,inset 0 0 20px #0007}
.room-scene img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 47%}
.room-scene-corrupted{opacity:0;transition:opacity 1.8s linear}
.phase-corrupt .room-scene-corrupted{opacity:var(--corruption-opacity,0)}
.phase-infernal .room-scene-corrupted{opacity:1}
.room-scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#110b15a8,transparent 21%,transparent 79%,#110b15a8),linear-gradient(180deg,#0f0d1400 55%,#0f0d14aa)}
.room-puzzle .modal-title{margin:4px 0 10px}
.room-puzzle .room-narration{margin:7px auto 12px;font-size:14px;line-height:1.4}
.room-puzzle .puzzle-prompt{margin:14px 0 20px}
.board-room-original,.board-room-corrupted{pointer-events:none}
.board-room-corrupted{opacity:0;transition:opacity 1.6s}
.phase-corrupt .board-room-corrupted{opacity:var(--corruption-opacity,0)}
.phase-infernal .board-room-corrupted{opacity:1}
.room-text-scrim{fill:#080910;opacity:.62;pointer-events:none}
.room-outline{pointer-events:none}
.room-node.solved .room-text-scrim{fill:#080910;opacity:.62}
.room-node.solved .room-outline{fill:none}
.room-node:hover .room-outline,.room-node.reachable .room-outline{stroke:#f7d5a0;filter:drop-shadow(0 0 4px #edbd77)}
.flesh-wall image{pointer-events:none}
@media(min-width:900px){.room-scene{height:225px}.room-puzzle .answer-grid{margin-top:10px}}

/* The Host's dice are explicitly rolled by the people at the table. */
.host-die-stage{border:1px solid #855a62;background:linear-gradient(145deg,#251a26,#15111c);padding:16px 17px 18px;max-width:580px;margin:17px auto 0;box-shadow:inset 0 1px 30px #0006}
.host-die-stage .eyebrow{color:#f0b7ad;font-weight:700}
.host-die-visual{width:74px;height:74px;background:linear-gradient(145deg,#fae5c9,#cda782);border:2px solid #8e5b4c;border-radius:11px;margin:10px auto 12px;box-shadow:inset 3px 4px 7px #ffffff88,inset -6px -8px 12px #78492c66,0 9px 17px #000b;color:#321e25;font:700 48px/70px Georgia,serif;transform-origin:50% 50%}
.host-die-visual.tumbling{animation:roll-host-die .7s ease-in-out infinite}
@keyframes roll-host-die{0%{transform:rotate(0deg) scale(1)}25%{transform:rotate(-32deg) scale(1.09)}50%{transform:rotate(120deg) scale(.96)}75%{transform:rotate(245deg) scale(1.04)}100%{transform:rotate(360deg) scale(1)}}
.modal .host-die-tip{font:italic 13px/1.4 Georgia,serif;margin:8px auto 11px;color:#e5c8b4}
.host-die-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;max-width:445px;margin:auto}
.host-die-number{border:1px solid #b28d70;border-radius:5px;background:#44303b;color:#f3dfcb;min-width:0;height:49px;cursor:pointer;font:700 24px Georgia,serif;box-shadow:0 3px 0 #1a1018;transition:background .18s,transform .18s}
.host-die-number:hover:not(:disabled),.host-die-number:focus-visible{background:#884452;transform:translateY(-2px);outline:2px solid #eed2a3;outline-offset:1px}
.host-die-number:disabled,.host-die-launch:disabled{opacity:.5;cursor:wait}
.dice-separator{font:italic 12px Georgia,serif;color:#ad9a95;margin:13px 0 11px}
.host-die-launch{font-size:13px;max-width:280px;width:100%;min-height:43px}
.host-first-roll{font:17px Georgia,serif;margin:12px auto;color:#d4b6ac}
.host-first-roll strong{display:inline-block;padding:8px 16px;margin-left:8px;border:1px solid #ae7e63;color:#ffe0ab;background:#3b2b34;font-size:27px}
.fate-table{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:570px;margin:0 auto;text-align:left}
.fate-table span{font-size:12px;color:#eacbb6;padding:8px 9px;border:1px solid #64424f;background:#251820}
@media(max-width:600px){.host-die-stage{padding:13px 10px}.host-die-options{gap:4px}.host-die-number{height:41px;font-size:19px}.fate-table{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.host-die-visual.tumbling{animation:none}}

/* A single lightning flash heralds the Host, followed by his thunder fade. */
body.lightning-flash::after{content:"";position:fixed;inset:0;z-index:115;pointer-events:none;background:radial-gradient(ellipse at 52% 35%,#f4f0e9,#bfc9d8 50%,#909aa2);animation:one-lightning-flash .51s ease-out forwards}
@keyframes one-lightning-flash{0%{opacity:.56}28%{opacity:.19}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){body.lightning-flash::after{animation:none;opacity:.1}}
.room-sound-caption{font:italic 11px Georgia,serif;color:#c6b3b1;margin:-8px auto 6px;letter-spacing:.045em}
.host-auto-stage{padding:10px;margin:10px auto;max-width:420px;border:1px solid #885866;background:#20141e}
.host-auto-stage .host-die-visual{margin:7px auto}
.modal .host-auto-stage p{font:italic 14px Georgia,serif;margin:9px auto;color:#e6bfb5}

/* Desktop play-table layout: fixed viewport, wide map, compact persistent sidebar. */
@media(min-width:1150px) and (min-height:700px){
  body.game-active{height:100dvh;overflow:hidden}
  body.game-active .site-shell{width:100%;max-width:none;height:100dvh;min-height:0;padding:0 clamp(12px,1.25vw,25px)}
  body.game-active .masthead{height:55px}
  body.game-active .brand-seal{height:35px;width:35px;font-size:20px}
  body.game-active .brand-name{font-size:13px}
  body.game-active .clock{padding:4px 12px}
  body.game-active .clock-number{font-size:23px}
  body.game-active .icon-button{height:35px;width:35px}
  body.game-active .site-footer{display:none}
  body.game-active #app{display:flex;flex-direction:column;flex:1;min-height:0}
  body.game-active .game-top{padding:6px 0;min-height:56px;flex:none}
  body.game-active .game-top h1{font-size:clamp(20px,2vw,28px);margin:1px 0 0}
  body.game-active .game-top .eyebrow{font-size:9px}
  body.game-active .phase-badge{font-size:9px;padding:8px 12px}
  body.game-active .game-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(280px,.85fr);gap:10px;flex:1;min-height:0;align-items:stretch}
  body.game-active .board-panel{min-height:0;display:flex;flex-direction:column}
  body.game-active .board-toolbar{flex:none;padding:8px 12px}
  body.game-active .board-toolbar h2{font-size:15px}
  body.game-active .board-wrap{flex:1;min-height:0;display:flex;justify-content:center;align-items:center}
  body.game-active .board-wrap svg{height:100%;width:100%;max-height:none}
  body.game-active .board-legend{flex:none;padding:7px 12px;gap:7px 12px;font-size:9px}
  body.game-active .sidebar{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;min-height:0;overflow-y:auto;scrollbar-width:thin;align-content:stretch}
  body.game-active .sidebar .panel.pad{padding:11px}
  body.game-active .turn-card{padding:12px}
  body.game-active .turn-card h3{font-size:19px}
  body.game-active .turn-meta{margin-top:5px}
  body.game-active .die-row{margin-top:7px;gap:10px}
  body.game-active .die-face{width:51px;height:51px;font-size:32px;flex:none}
  body.game-active .turn-help{min-height:0;margin-top:6px;font-size:11px;line-height:1.35}
  body.game-active .sidebar .btn{min-height:33px;padding:7px 9px;font-size:10px}
  body.game-active .sidebar .btnrow{gap:6px}
  body.game-active .sidebar .turn-controls{gap:5px}
  body.game-active .sidebar .eyebrow{font-size:8px;letter-spacing:.16em}
  body.game-active .sidebar .rule{margin:7px 0}
  body.game-active .sidebar .side-block h3{font-size:16px;margin:3px 0 8px}
  body.game-active .sidebar .tiny{font-size:10px;line-height:1.32;margin:6px 0}
  body.game-active .sidebar .key-grid{gap:5px}
  body.game-active .sidebar .key{min-height:31px;font-size:19px}
  body.game-active .sidebar .clue-meter{margin:7px 0 5px;height:6px}
  body.game-active .sidebar .chip-row{gap:4px}
  body.game-active .sidebar .chip{font-size:9px;padding:3px 5px}
  body.game-active .sidebar .panel.pad:last-child{display:flex;flex-direction:column;min-height:0;overflow:hidden}
  body.game-active .sidebar .guardian-card{grid-template-columns:60px minmax(0,1fr);gap:10px}
  body.game-active .sidebar .guardian-face{width:59px;height:74px}
  body.game-active .sidebar .guardian-card h3{font-size:17px;margin:2px 0 4px}
  body.game-active .sidebar .guardian-card p{font-size:11px;line-height:1.28}
  body.game-active .sidebar .feed{flex:1;max-height:none;min-height:35px;overflow:auto}
  body.game-active .sidebar .feed p{font-size:10px;margin:2px 0}
  body.game-active .test-strip{flex:none;margin-top:4px;padding:2px 10px;min-height:30px}
  body.game-active .test-strip .btn{min-height:24px;padding:3px 8px}
}

/* A key is a magical artifact with its own color, not a generic inventory glyph. */
.key.obtained{border-color:var(--key-color);color:var(--key-color);background:radial-gradient(circle at center,color-mix(in srgb,var(--key-color) 17%,#17131d),#10121c 78%);box-shadow:inset 0 0 12px color-mix(in srgb,var(--key-color) 22%,transparent),0 0 8px color-mix(in srgb,var(--key-color) 35%,transparent);text-shadow:0 0 12px var(--key-color);animation:key-glimmer 3.3s ease-in-out infinite}
.key.obtained .key-glyph{filter:drop-shadow(0 0 5px var(--key-color));transform:rotate(-25deg);display:inline-block}
.magic-key{color:var(--key-color)!important;text-shadow:0 0 15px var(--key-color),0 0 55px var(--key-color)!important;animation:key-glimmer 3.3s ease-in-out infinite}
.door-picks button{border-color:var(--key-color);color:var(--key-color);text-shadow:0 0 9px var(--key-color);box-shadow:0 0 10px color-mix(in srgb,var(--key-color) 22%,transparent)}
@keyframes key-glimmer{0%,100%{filter:brightness(.88)}50%{filter:brightness(1.45)}}
@media(prefers-reduced-motion:reduce){.key.obtained,.magic-key{animation:none}}

/* Hover over a room to glimpse its story without revealing its hidden reward. */
.room-node{transform-box:fill-box;transform-origin:center;transition:transform .19s ease,filter .19s ease}
.room-node:hover{transform:scale(1.08);filter:drop-shadow(0 0 12px #e3b18299)}
.room-peek{position:absolute;z-index:9;top:8px;left:8px;width:282px;max-width:50%;background:#17141d;box-shadow:0 15px 38px #000e,0 0 0 1px #aa765c;border:1px solid #b38e6b;pointer-events:none;overflow:hidden;text-align:left;animation:peek-appear .18s ease-out}
.room-peek[hidden]{display:none}
.room-peek-art{height:124px;position:relative;overflow:hidden;background:#1d1720}
.room-peek-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room-peek-art .room-peek-infernal{opacity:0;transition:opacity .4s}
.phase-corrupt .room-peek-infernal{opacity:var(--corruption-opacity,0)}
.phase-infernal .room-peek-infernal{opacity:1}
.room-peek-art::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,#14111cc9)}
.room-peek-copy{padding:10px 13px 13px}
.room-peek-copy .eyebrow{font-size:8px;letter-spacing:.17em;color:#d5ad82}
.room-peek-copy h3{font:20px var(--serif);color:#f0d5b3;margin:5px 0}
.room-peek-copy p{font:italic 12px/1.4 Georgia,serif;color:#dfc6b8;margin:5px 0 7px}
.room-peek-copy span{font:9px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#b1a2aa}
@keyframes peek-appear{from{opacity:0;transform:translateY(5px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:900px){.room-peek{display:none}}
@media(prefers-reduced-motion:reduce){.room-node,.room-peek{transition:none;animation:none}}

/* Harbinger-like physical board-game paths: individually carved stone slabs. */
.corridor-tile .corridor-slab{filter:drop-shadow(0 1px 2px #000b);transition:fill .15s,stroke .15s,filter .15s;pointer-events:all}
.corridor-tile .corridor-inlay,.corridor-tile path{pointer-events:none}
.tile-node.corridor-tile.reachable .corridor-slab{fill:#8f7350;stroke:#ffe2a4;stroke-width:2.5;filter:drop-shadow(0 0 8px #ffe3aa88)}
.tile-node.corridor-tile:hover .corridor-slab{fill:#a68b5b;stroke:#fff3bb;stroke-width:3;filter:drop-shadow(0 0 11px #fff2bbaa)}
.board-infernal .corridor-tile .corridor-slab{filter:drop-shadow(0 1px 2px #000b) drop-shadow(0 0 3px #a04a5377)}
.board-infernal .tile-node.corridor-tile.reachable .corridor-slab{fill:#994451;stroke:#ffb0a2;filter:drop-shadow(0 0 10px #ef636699)}

/* An illustrated vortex replaces the old abstract black-hole marker. */
.tile-node.void-well{cursor:pointer;filter:drop-shadow(0 0 8px #a15bf5aa)}
.tile-node.void-well .well-aura{fill:#29113e;stroke:#a77dd9;animation:well-pulse 3.6s ease-in-out infinite}
.tile-node.void-well.reachable .well-aura{fill:#29113e;stroke:#f3c1ff;stroke-width:2;filter:drop-shadow(0 0 10px #c87aff)}
.tile-node.void-well circle:last-child{fill:transparent;stroke:none}
.tile-node.void-well .well-image{transform-box:fill-box;transform-origin:center;transition:transform .22s ease-out;pointer-events:none}
.tile-node.void-well:hover .well-image{transform:scale(1.2)}
.board-infernal .void-well .well-image{filter:hue-rotate(40deg) saturate(1.45)}
@keyframes well-pulse{0%,100%{opacity:.82}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.void-well .well-aura{animation:none}.void-well .well-image{transition:none}}

/* Full-screen cinematic beats. Their layer exists outside the gameplay/modal mounts,
   so the underlying turn and its unsaved user interaction remain untouched. */
#cinematicLayer{--cinema-color:#e8cc88;position:fixed;inset:0;z-index:600;pointer-events:none}
#cinematicLayer:has(.cinematic){pointer-events:auto}
.cinematic{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:#06040a;color:#fff4e8;text-align:center;animation:cinema-enter .2s ease-out both}
.cinematic.cinematic-leaving{animation:cinema-leave .33s ease-in both}
.cinema-skip{position:absolute;right:clamp(12px,3vw,42px);bottom:clamp(12px,2.4vh,28px);z-index:20;padding:10px 15px;background:#0909108a;border:1px solid #d7bbad6e;color:#f4e1d5;font:600 11px var(--sans);letter-spacing:.11em;cursor:pointer;text-transform:uppercase;backdrop-filter:blur(8px)}
.cinema-skip:hover,.cinema-skip:focus-visible{background:#4c3037;border-color:#fff2d5;outline:2px solid #ffecb7;outline-offset:2px}
.cinema-foreground{position:absolute;left:5%;right:5%;z-index:11;text-shadow:0 4px 28px #000,0 1px 8px #000;animation:cinema-words 1.1s ease-out both}
.cinema-foreground-low{bottom:clamp(70px,10vh,140px)}
.cinema-eyebrow{font:700 clamp(10px,1.35vw,15px) var(--sans);letter-spacing:.37em;text-transform:uppercase;color:#f1b7a8;margin-bottom:10px}
.cinema-foreground h2{font:500 clamp(30px,6.6vw,100px)/1.04 var(--serif);margin:0 auto 9px;letter-spacing:.045em;max-width:1100px;text-transform:uppercase}
.cinema-foreground p{font:italic clamp(15px,2.3vw,28px) Georgia,serif;margin:10px auto 0;max-width:940px;color:#f2e5e2}
.cinema-foreground span{font:600 clamp(10px,1.1vw,13px) var(--sans);letter-spacing:.2em}
@keyframes cinema-enter{from{opacity:0}to{opacity:1}}
@keyframes cinema-leave{to{opacity:0;filter:blur(13px)}}
@keyframes cinema-words{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}

/* The player falls into the illustrated violet well, until it swallows the viewport. */
.cinema-well{background:radial-gradient(ellipse at center,#30134d 0%,#090416 46%,#000 100%)}
.cinema-abyss-glow{position:absolute;inset:-30%;background:repeating-conic-gradient(from 8deg at center,#9b49ed66 0 8deg,transparent 9deg 25deg,#321156aa 30deg 41deg,transparent 42deg 66deg);mask-image:radial-gradient(circle,#000,transparent 67%);opacity:.45;animation:cinema-spiral 9s linear infinite}
.cinema-well-tunnel{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(78vw,83vh);aspect-ratio:1;display:grid;place-items:center;animation:cinema-plunge 2.9s cubic-bezier(.33,.04,.74,1) both}
.cinema-well-tunnel img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 0 55px #7d36ec)}
.cinema-well .cinema-foreground h2{color:#e9c6ff;text-shadow:0 0 40px #9454c5,0 5px 26px #000}
@keyframes cinema-spiral{to{transform:rotate(360deg)}}
@keyframes cinema-plunge{0%{transform:scale(.48) rotate(-30deg);opacity:.35}32%{transform:scale(1) rotate(0);opacity:1}74%{transform:scale(2.5) rotate(80deg)}100%{transform:scale(4.9) rotate(160deg);filter:blur(4px)}}

/* Flesh tears into the passage: a wet, pulsating close-up. */
.cinema-wall{background:radial-gradient(ellipse at center,#9e263f,#2a0814 65%,#080107)}
.cinema-flesh-veins{position:absolute;inset:-15%;opacity:.75;background:repeating-radial-gradient(ellipse at 35% 45%,transparent 0 40px,#c83e5270 47px,#180510 56px,transparent 64px 97px);animation:cinema-breathe 1.12s ease-in-out infinite alternate}
.cinema-wall-art{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;opacity:.87;filter:contrast(1.25) saturate(1.45) brightness(.67);animation:cinema-flesh-lunge 2.65s ease-out both}
.cinema-flesh-flash{position:absolute;inset:0;background:#f05a6a;mix-blend-mode:screen;animation:cinema-flesh-flashes 2.6s steps(1) both}
.cinema-wall .cinema-foreground h2{color:#ffd1c7;text-shadow:0 0 38px #a80039,0 5px 18px #000}
@keyframes cinema-breathe{to{transform:scale(1.12);opacity:.96}}
@keyframes cinema-flesh-lunge{0%{transform:scale(.57);opacity:0;filter:blur(25px) brightness(.15)}20%{transform:scale(1.28);opacity:1;filter:blur(0) brightness(.7)}62%{transform:scale(1.5);filter:brightness(.95) saturate(1.5)}100%{transform:scale(1.72);filter:brightness(.4) saturate(1.3)}}
@keyframes cinema-flesh-flashes{0%,11%,40%,100%{opacity:0}8%,32%{opacity:.23}9%,34%{opacity:.05}}

/* Lightning discloses a huge close-up of the Host, progressively less human. */
.cinema-guardian{background:radial-gradient(circle at center,#34202d,#05040a 77%)}
.cinema-guardian-frame{position:absolute;inset:-20% 7% -22%;overflow:hidden;mask-image:linear-gradient(transparent 0%,#000 13%,#000 67%,transparent 94%);animation:cinema-face-surge 2.8s ease-out both}
.cinema-guardian-frame img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:center 17%;filter:contrast(1.28) saturate(.82) brightness(.74)}
.cinema-guardian-frame .cinema-host-demon{opacity:0}
.cinema-guardian.corrupt .cinema-host-demon{opacity:var(--corruption-opacity,.35)}
.cinema-guardian.infernal .cinema-host-demon{opacity:1}
.cinema-lightning{position:absolute;inset:0;z-index:7;background:#eaf4ff;mix-blend-mode:screen;pointer-events:none;animation:cinema-lightning 2.65s steps(1) both}
.cinema-guardian .cinema-foreground h2{color:#f9dfd3;text-shadow:0 0 40px #923d50,0 0 9px #000}
@keyframes cinema-face-surge{0%{transform:scale(1.9);opacity:0;filter:blur(28px)}13%{transform:scale(1.45);opacity:1;filter:blur(4px)}38%{transform:scale(1.16);filter:blur(0)}100%{transform:scale(1.08);filter:brightness(.68)}}
@keyframes cinema-lightning{0%{opacity:.95}3%{opacity:.02}6%{opacity:.8}8%{opacity:0}24%{opacity:0}26%{opacity:.96}29%{opacity:0}48%{opacity:0}50%{opacity:.58}52%,100%{opacity:0}}

/* A magical artifact gets a premium reward sting and screen-filling rays. */
.cinema-key{background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--cinema-color) 28%,#070b18),#050916 69%,#020206)}
.cinema-key-rays{position:absolute;width:150vmax;height:150vmax;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--cinema-color) 42%,transparent) 0deg 4deg,transparent 6deg 22deg);mask-image:radial-gradient(circle,transparent 0 13%,#0006 30%,transparent 63%);animation:cinema-spiral 16s linear infinite}
.cinema-key-rings{position:absolute;left:50%;top:45%;translate:-50% -50%;width:min(72vmin,580px);aspect-ratio:1;border:2px solid var(--cinema-color);border-radius:50%;box-shadow:0 0 55px var(--cinema-color),inset 0 0 90px color-mix(in srgb,var(--cinema-color) 24%,transparent);animation:cinema-reward-ring 2.85s ease-out both}
.cinema-key-art{position:absolute;top:8%;left:50%;translate:-50% 0;width:min(28vw,240px);height:min(55vh,420px);overflow:visible;stroke:var(--cinema-color);stroke-width:11;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px #fff9) drop-shadow(0 0 27px var(--cinema-color));animation:cinema-reward-key 2.9s cubic-bezier(.18,.68,.2,1) both}
.cinema-key-art path:first-of-type{fill:color-mix(in srgb,var(--cinema-color) 70%,#fff);stroke:#fff8df}
.cinema-key .cinema-key-copy{bottom:clamp(70px,7vh,105px)}
.cinema-key .cinema-foreground h2{color:#fff;text-shadow:0 0 13px #fff8,0 0 48px var(--cinema-color),0 4px 20px #000}
.cinema-key .cinema-foreground .cinema-eyebrow,.cinema-key .cinema-foreground p{color:var(--cinema-color)}
.cinema-key .cinema-foreground span{display:inline-block;margin-top:13px;color:#f7e9da}
@keyframes cinema-reward-ring{0%{transform:scale(.1);opacity:0}26%{transform:scale(.72);opacity:.9}70%{opacity:.75}100%{transform:scale(2.8);opacity:0}}
@keyframes cinema-reward-key{0%{transform:translateY(60px) scale(.3) rotate(-24deg);opacity:0}38%{transform:translateY(-23px) scale(1.15) rotate(10deg);opacity:1}58%{transform:translateY(0) scale(1) rotate(0)}100%{transform:translateY(-9px) scale(1.08)}}
@media(max-width:700px){.cinema-guardian-frame{inset:-14% -35% -10%}.cinema-key-art{top:12%;width:160px;height:44vh}.cinema-foreground h2{font-size:clamp(28px,9vw,62px)}.cinema-foreground p{font-size:15px}.cinema-eyebrow{letter-spacing:.19em}}
@media(prefers-reduced-motion:reduce){.cinematic,.cinematic *{animation:none!important;transition:none!important}.cinema-lightning{display:none}}

/* The Host: one character, three distinct painted stages and a landscape-safe close-up. */
.guardian-face{background-image:url('assets/guardian-human-v2.webp');background-position:center 27%}
.guardian-face::before{background-image:url('assets/guardian-metamorphosis.webp');background-position:center 27%}
.phase-corrupt .guardian-face::before{opacity:1}
.phase-infernal .guardian-face{background-image:url('assets/guardian-demon-v2.webp')}
.phase-infernal .guardian-face::before{opacity:0}
.apparition-shadow{background-image:url('assets/guardian-human-v2.webp');background-position:center 27%}
.apparition-shadow::before{background-image:url('assets/guardian-metamorphosis.webp');background-position:center 27%}
.phase-corrupt .apparition-shadow::before{opacity:1}
.phase-infernal .apparition-shadow{background-image:url('assets/guardian-demon-v2.webp');background-position:center 27%}
.phase-infernal .apparition-shadow::before{opacity:0}
.cinema-guardian-frame{position:absolute;inset:0;margin:auto;overflow:visible;width:min(66vw,800px);height:100dvh;max-height:100%;mask-image:linear-gradient(to bottom,#000 0%,#000 79%,transparent 99%);animation:cinema-host-reveal 2.8s ease-out both}
.cinema-guardian-frame img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;filter:contrast(1.16) brightness(.87);transition:opacity 1s ease}
.cinema-guardian-frame .cinema-host-human{opacity:1}
.cinema-guardian-frame .cinema-host-middle,.cinema-guardian-frame .cinema-host-demon{opacity:0}
.cinema-guardian.corrupt .cinema-host-middle{opacity:1}
.cinema-guardian.corrupt .cinema-host-human{opacity:0}
.cinema-guardian.infernal .cinema-host-human,.cinema-guardian.infernal .cinema-host-middle{opacity:0}
.cinema-guardian.infernal .cinema-host-demon{opacity:1}
@keyframes cinema-host-reveal{0%{opacity:0;filter:blur(15px);transform:scale(.92)}18%{opacity:1;filter:blur(1px);transform:scale(1)}65%{transform:scale(1)}100%{transform:scale(1);filter:brightness(.76)}}
@media(max-width:700px){.cinema-guardian-frame{inset:0;width:min(92vw,800px);height:100dvh}.cinema-guardian-frame img{object-fit:contain}}

/* Stage direction for the two timed transformations. */
.cinema-bells{background:radial-gradient(ellipse at 50% 40%,#621e30,#150b16 65%,#05040a)}
.cinema-midnight-clock{position:absolute;width:min(80vmin,650px);aspect-ratio:1;border:10px double #c7a57b;border-radius:50%;box-shadow:inset 0 0 100px #070208,0 0 90px #901f38,0 0 0 38px #76233a33;display:grid;place-items:center;animation:cinema-clock-twist 4s ease-in-out both}
.cinema-midnight-clock::before{content:"";position:absolute;inset:12%;border:2px solid #b98879;border-radius:50%;box-shadow:0 0 24px #ff577d80}
.cinema-midnight-clock span{font:clamp(70px,17vmin,145px) Georgia,serif;color:#edd2b0;text-shadow:0 0 35px #f76689}
.cinema-midnight-hand{position:absolute;z-index:1;width:5px;height:40%;top:10%;left:calc(50% - 2px);background:linear-gradient(#f3dbb6,#ac5261);transform-origin:bottom center;animation:cinema-hand-twist 3.8s cubic-bezier(.2,.3,.2,1) both}
.cinema-midnight-fractures{position:absolute;inset:-20%;background:repeating-conic-gradient(from 20deg,#dd345f33 0 7deg,transparent 8deg 28deg);mask-image:radial-gradient(circle,transparent 25%,#000 63%,transparent 73%);animation:cinema-spiral 17s linear infinite}
@keyframes cinema-clock-twist{0%{opacity:0;transform:scale(.7) rotate(-28deg)}25%{opacity:1;transform:scale(1)}80%{transform:scale(1.13) rotate(6deg)}100%{transform:scale(1.3) rotate(8deg);opacity:.8}}
@keyframes cinema-hand-twist{0%{transform:rotate(0)}100%{transform:rotate(720deg)}}
.cinema-infernal{background:radial-gradient(circle at 50% 45%,#5c1936 2%,#260a21 48%,#05020c)}
.cinema-infernal-miasma{position:absolute;inset:-40%;background:radial-gradient(ellipse at 32% 50%,#a92570a3,transparent 39%),radial-gradient(ellipse at 69% 58%,#5f2494a3,transparent 44%);filter:blur(55px);animation:hell-miasma 4s ease-in-out infinite alternate}
.cinema-infernal-portrait{opacity:.7;filter:saturate(1.2) brightness(.7)}
.cinema-hell-cracks{position:absolute;inset:0;background:repeating-linear-gradient(126deg,transparent 0 8%,#e8388255 8.25% 8.42%,transparent 8.6% 18%);mask-image:radial-gradient(ellipse at center,transparent 20%,#000 94%);animation:cinema-hell-wake 4s ease-out both}
@keyframes cinema-hell-wake{0%{opacity:0;transform:scale(1.6)}25%{opacity:1}100%{transform:scale(1);opacity:.55}}
@keyframes hell-miasma{to{transform:translate(-5%,6%) rotate(-6deg);opacity:.6}}
.cinema-bells .cinema-foreground h2{color:#ffe0cc;text-shadow:0 0 40px #e94669}
.cinema-infernal .cinema-foreground h2{color:#ffadbc;text-shadow:0 0 48px #bd1954}

/* Board weather. Overlays never intercept tiles, tokens, hover or dice. */
.weather-world{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none;isolation:isolate;border-radius:6px}
.weather-rain{position:absolute;inset:-12%;opacity:.18;background:repeating-linear-gradient(104deg,transparent 0 8px,#c2ced728 9px 10px,transparent 11px 28px);background-size:130px 190px;animation:weather-rain 1.4s linear infinite;transform:skew(-9deg)}
@keyframes weather-rain{to{background-position:-130px 380px}}
.weather-lightning{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 64% 7%,#fff 0%,#d8ebffbb 25%,transparent 84%);mix-blend-mode:screen}
.weather-lightning::after{content:"";position:absolute;left:64%;top:-10%;width:16%;height:76%;background:linear-gradient(155deg,transparent 0 22%,#fff 22% 24%,transparent 25% 47%,#ffffffd9 48% 50%,transparent 51%);filter:drop-shadow(0 0 18px #b6ddff)}
.weather-lightning.striking{animation:weather-lightning-strike .9s steps(1) both}
@keyframes weather-lightning-strike{0%,8%,24%,36%,100%{opacity:0}2%,13%{opacity:.55}29%{opacity:.38}}
.phase-corrupt .weather-lightning{background:radial-gradient(ellipse at 64% 7%,#ffd5dc 0%,#ed244cbb 29%,transparent 84%)}
.phase-corrupt .weather-lightning::after{filter:drop-shadow(0 0 28px #ff113d);background:linear-gradient(155deg,transparent 0 22%,#ff9cad 22% 24%,transparent 25% 47%,#eb164c 48% 50%,transparent 51%)}
.weather-mist{position:absolute;inset:-30%;opacity:0;background:radial-gradient(ellipse at 22% 65%,#c5136588,transparent 40%),radial-gradient(ellipse at 76% 43%,#7934ba99,transparent 44%),radial-gradient(ellipse at 48% 90%,#670e2a88,transparent 50%);filter:blur(32px);animation:weather-mist-drift 13s ease-in-out infinite alternate;transition:opacity 4s}
@keyframes weather-mist-drift{0%{transform:translate(-8%,4%) scale(1)}100%{transform:translate(10%,-5%) scale(1.15)}}
.weather-phantom{position:absolute;width:13%;aspect-ratio:.65;border-radius:47% 47% 40% 40%;background:radial-gradient(ellipse at center,#c8a4d83b,transparent 69%);filter:blur(1.5px);opacity:0;transition:opacity 4s;animation:phantom-sway 13s ease-in-out infinite alternate}
.weather-phantom i{position:absolute;top:30%;width:16%;height:8%;border-radius:50%;background:#fff4ff7d;filter:blur(3px);box-shadow:0 0 10px #e4b2ff}
.weather-phantom i:first-child{left:29%}.weather-phantom i:nth-child(2){right:29%}
.weather-phantom b{position:absolute;top:47%;left:43%;width:15%;height:19%;border-radius:52%;background:#e2b4ff35;filter:blur(4px)}
.phantom-one{left:9%;top:18%;animation-delay:-4s}.phantom-two{right:9%;top:45%;animation-delay:-8s;transform:scale(.75)}.phantom-three{left:44%;bottom:7%;animation-delay:-2s;transform:scale(.5)}
@keyframes phantom-sway{0%{translate:-12px 12px;filter:blur(4px)}100%{translate:20px -18px;filter:blur(2px)}}
.phase-corrupt .weather-rain{opacity:.12;filter:sepia(.6) hue-rotate(-45deg)}
.phase-infernal .weather-rain,.phase-infernal .weather-lightning{display:none!important}
.phase-infernal .weather-mist{opacity:.74}
.phase-infernal .weather-phantom{opacity:.25}
.phase-infernal .phantom-two{opacity:.16}.phase-infernal .phantom-three{opacity:.12}
.player-registration{background:#100f17a8;border:1px solid #715b534d;padding:12px 12px 1px}
.player-registration .field-group{margin-bottom:13px}
@media(prefers-reduced-motion:reduce){.weather-world *{animation:none!important}.weather-rain{opacity:.08}}

/* Twelve genuinely separate corrupted-stage illustrations; no direct mansion-to-hell crossfade. */
.room-scene-transition,.room-peek-transition{opacity:0;transition:opacity 1.1s ease}
.board-room-transition{opacity:0;pointer-events:none;transition:opacity 1.1s ease}
.phase-corrupt .room-scene-transition,.phase-corrupt .room-peek-transition,.phase-corrupt .board-room-transition{opacity:1}
.phase-corrupt .room-scene-corrupted,.phase-corrupt .board-room-corrupted,.phase-corrupt .room-peek-infernal{opacity:0}
.phase-infernal .room-scene-transition,.phase-infernal .board-room-transition,.phase-infernal .room-peek-transition{opacity:0}
.phase-infernal .room-scene-corrupted,.phase-infernal .board-room-corrupted,.phase-infernal .room-peek-infernal{opacity:1}
.room-peek-art .room-peek-transition{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.corridor-tile.reachable .corridor-slab{filter:drop-shadow(0 0 3px #fff2be88)}
.corridor-tile:hover{filter:drop-shadow(0 0 9px #eacb8f);outline:none}

/* The servant keeps his eyes on the registration desk, but never comments on its secrets. */
.butler-watch{height:clamp(190px,31vh,280px);position:relative;margin:-23px -23px 21px;overflow:hidden;background:#100e13;border-bottom:1px solid #a98667}
.butler-watch img{width:100%;height:100%;object-fit:cover;object-position:center 21%;filter:brightness(.72) contrast(1.08);animation:butler-breathing 9s ease-in-out infinite alternate}
.butler-watch::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#151016 0%,transparent 55%)}
.butler-watch span{position:absolute;bottom:12px;z-index:2;left:0;right:0;text-align:center;color:#dcbf96;letter-spacing:.22em;font:700 10px var(--sans);text-shadow:0 2px 7px #000}
@keyframes butler-breathing{0%{transform:scale(1);filter:brightness(.74)}100%{transform:scale(1.045);filter:brightness(.85)}}
.butler-private-watcher{position:fixed;right:max(20px,calc((100vw - 1520px)/2));top:21vh;width:clamp(160px,15vw,270px);height:min(62vh,610px);pointer-events:none;opacity:.78;filter:drop-shadow(0 15px 40px #000c);overflow:hidden;mask-image:linear-gradient(#000 0 64%,transparent 98%)}
.butler-private-watcher img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:brightness(.6);animation:butler-breathing 9s ease-in-out infinite alternate}
.butler-private-watcher span{position:absolute;left:0;right:0;bottom:22%;text-align:center;font:italic 14px Georgia,serif;color:#d5b9a2;text-shadow:0 1px 8px #000}
.butler-handoff{display:block;width:110px;height:138px;object-fit:cover;object-position:center 20%;border:1px solid #af8968;box-shadow:0 0 30px #2d1116a8;margin:0 auto 15px;mask-image:linear-gradient(#000 0 80%,transparent)}
@media(max-width:1050px){.butler-private-watcher{display:none}}

/* Opening tracking shot: manor exterior -> approaching doors -> butler in the entrance hall. */
.cinema-intro{background:#03050b;perspective:1100px}
.cinema-intro-exterior{position:absolute;inset:0;background:url('assets/mansion-exterior.webp') center center/cover no-repeat;animation:intro-approach 7.15s cubic-bezier(.16,.17,.6,1) both}
.cinema-intro-interior{position:absolute;inset:0;background:linear-gradient(#05040d55,#050409aa),url('assets/mansion-entrance.webp') center center/cover no-repeat;animation:intro-hall-enter 7.15s ease-out both}
.cinema-intro-doors{position:absolute;inset:0;z-index:3;display:flex;perspective:850px;animation:intro-doors-visible 7.15s steps(1) both}
.cinema-intro-doors div{width:50%;height:100%;border:14px ridge #21130f;background:repeating-linear-gradient(90deg,#1a100e 0 45px,#3b2720 46px 52px,#1d1514 54px 120px);box-shadow:inset 0 0 150px #000,0 0 90px #000a}
.cinema-intro-doors div:first-child{transform-origin:left center;animation:intro-door-left 7.15s ease-in-out both}
.cinema-intro-doors div:nth-child(2){transform-origin:right center;animation:intro-door-right 7.15s ease-in-out both}
.cinema-intro-butler{position:absolute;z-index:4;left:50%;top:0;transform:translateX(-50%);width:min(44vw,520px);height:100%;object-fit:contain;object-position:center bottom;mask-image:linear-gradient(transparent 0%,#000 13%,#000 81%,transparent 100%);animation:intro-servant-greet 7.15s ease-out both}
.cinema-intro-title{position:absolute;z-index:5;bottom:clamp(65px,9vh,120px);text-shadow:0 4px 30px #000,0 0 24px #000;text-align:center;animation:intro-caption 7.15s ease-out both}
.cinema-intro-title span{display:block;letter-spacing:.33em;color:#e5b77a;font:700 11px var(--sans)}
.cinema-intro-title h2{font:500 clamp(30px,5vw,65px) Georgia,serif;margin:15px 0;color:#f9e6c4}
@keyframes intro-approach{0%{transform:scale(1);filter:brightness(.52);opacity:1}38%{transform:scale(1.56);filter:brightness(.82);opacity:1}57%{transform:scale(2.7);opacity:0}100%{opacity:0}}
@keyframes intro-hall-enter{0%,54%{opacity:0;transform:scale(1.22)}72%,100%{opacity:1;transform:scale(1)}}
@keyframes intro-doors-visible{0%,49%{opacity:0}50%,82%{opacity:1}90%,100%{opacity:0}}
@keyframes intro-door-left{0%,53%{transform:rotateY(0)}85%,100%{transform:rotateY(-105deg)}}
@keyframes intro-door-right{0%,53%{transform:rotateY(0)}85%,100%{transform:rotateY(105deg)}}
@keyframes intro-servant-greet{0%,70%{opacity:0;transform:translateX(-50%) scale(.93)}86%,100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes intro-caption{0%,77%{opacity:0;translate:0 25px}91%,100%{opacity:1;translate:0 0}}

/* Reconstructing the secret manuscript; the signature is obscured until all pieces join. */
.cinema-reveal{background:radial-gradient(ellipse at 50% 58%,#39271c,#0a0710 77%)}
.cinema-document-glow{position:absolute;inset:-25%;background:repeating-conic-gradient(from 0deg,#cbb08624 0 5deg,transparent 6deg 23deg);mask-image:radial-gradient(circle,transparent 8%,#000 44%,transparent 72%);animation:cinema-spiral 20s linear infinite}
.cinema-manuscript{position:relative;width:min(89vw,900px);height:min(70vh,580px);display:grid;place-items:center;isolation:isolate}
.cinema-manuscript::before{content:"";position:absolute;inset:8% 11%;background:linear-gradient(132deg,#e8cfa1,#c19e74);border:10px solid #785b3a;box-shadow:inset 0 0 60px #77543d,0 12px 75px #000;opacity:0;animation:manuscript-assemble 4.7s ease-out both}
.cinema-manuscript-piece{position:absolute;display:grid;place-items:center;width:29%;height:23%;background:linear-gradient(132deg,#d7be91,#9b7855);clip-path:polygon(4% 6%,88% 0,100% 95%,0% 100%);color:#342a29;font:clamp(12px,1.3vw,19px) Georgia,serif;letter-spacing:.08em;box-shadow:0 6px 30px #000a;animation:manuscript-piece 4.7s cubic-bezier(.2,.7,.1,1) both}
.fragment-0{--fx:-84%;--fy:-128%;--rot:-31deg}.fragment-1{--fx:110%;--fy:-110%;--rot:26deg}.fragment-2{--fx:-137%;--fy:14%;--rot:45deg}.fragment-3{--fx:131%;--fy:12%;--rot:-38deg}.fragment-4{--fx:-68%;--fy:125%;--rot:29deg}.fragment-5{--fx:81%;--fy:128%;--rot:-20deg}
.cinema-reveal-name{position:relative;z-index:4;display:grid;gap:14px;text-align:center;animation:manuscript-name 4.7s ease-out both}
.cinema-reveal-name span{font:700 10px var(--sans);letter-spacing:.2em;color:#5d322a}
.cinema-reveal-name strong{font:700 clamp(35px,7vw,90px) Georgia,serif;color:#721b24;text-shadow:0 0 17px #fa789288}
.cinema-reveal .cinema-foreground h2{color:#f3ddbc;text-shadow:0 0 20px #10090a}
@keyframes manuscript-assemble{0%,53%{opacity:0;transform:scale(.5)}62%,100%{opacity:1;transform:scale(1)}}
@keyframes manuscript-piece{0%{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--rot)) scale(.8)}15%{opacity:1}65%{transform:translate(0,0) rotate(0) scale(1)}78%{opacity:1}100%{opacity:0}}
@keyframes manuscript-name{0%,64%{opacity:0;filter:blur(16px);transform:scale(.8)}80%,100%{opacity:1;filter:blur(0);transform:scale(1)}}

/* A spectral sentence: the Host reaches out, absorbs a soul, leaving a skull in the mist. */
.cinema-soul{background:#09040e}
.cinema-soul-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%;animation:soul-sentence-approach 3.55s ease-out both}
.cinema-soul-stream{position:absolute;left:-30%;top:8%;width:85%;height:85%;background:radial-gradient(ellipse at center,#b89af586 0%,#6e37b344 24%,transparent 65%);mix-blend-mode:screen;filter:blur(42px);animation:soul-spiral 3.55s ease-in-out both}
.cinema-soul-flare{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 44%,#e4baff75,transparent 45%);mix-blend-mode:screen;animation:soul-blast 3.55s steps(1) both}
.cinema-soul .cinema-foreground h2{color:#f8e0f8;text-shadow:0 0 35px #b569ff}
.cinema-soul:not(.infernal) .cinema-soul-art{filter:brightness(.62) saturate(.82)}
@keyframes soul-sentence-approach{0%{transform:scale(1.22);opacity:0;filter:blur(15px)}26%{opacity:1;filter:blur(0)}67%{transform:scale(1.05)}100%{transform:scale(1.12);opacity:.73}}
@keyframes soul-spiral{0%{transform:translateX(-38%) scale(.25);opacity:.1}52%{transform:translateX(18%) scale(1.2);opacity:1}100%{transform:translateX(92%) scale(.18);opacity:0}}
@keyframes soul-blast{0%,40%,49%,100%{opacity:0}42%{opacity:.8}46%{opacity:.18}}
@media(max-width:700px){.cinema-intro-butler{width:85vw}.cinema-manuscript-piece{font-size:11px}.cinema-soul-art{object-position:59% center}}
@media(prefers-reduced-motion:reduce){.butler-watch img,.butler-private-watcher img{animation:none}.cinema-intro-exterior{opacity:0}.cinema-intro-interior,.cinema-intro-butler{opacity:1}}

/* Individual chromatic souls: anonymous silhouettes, never facial likenesses. */
.player-registration{position:relative;border-top:3px solid var(--reg-player-color,#78627d);box-shadow:inset 0 0 25px color-mix(in srgb,var(--reg-player-color) 8%,transparent)}
.player-color-swatch{position:absolute;top:13px;right:14px;width:16px;height:16px;border-radius:50%;background:var(--reg-player-color);box-shadow:0 0 17px var(--reg-player-color),0 0 0 2px #11161c}
.player-token .token-halo{filter:drop-shadow(0 0 6px currentColor)}
.player-token .token-figure,.player-token .token-head{filter:drop-shadow(0 0 3px #f1c6ff66)}
.player-token.targetable .token-halo{stroke-width:3}
.soul-figure{--soul-color:#bda8d0;position:relative;display:block;flex:none;width:clamp(40px,7vw,85px);height:clamp(125px,27vh,235px);filter:drop-shadow(0 0 12px var(--soul-color));transform-origin:50% 85%}
.soul-figure i{position:absolute;display:block;background:#04060c;border:2px solid var(--soul-color);box-shadow:inset 3px 0 8px color-mix(in srgb,var(--soul-color) 21%,transparent),0 0 14px color-mix(in srgb,var(--soul-color) 46%,transparent)}
.soul-head{width:32%;height:19%;left:34%;top:3%;border-radius:48% 48% 45% 43%}
.soul-body{width:55%;height:42%;left:22.5%;top:23%;border-radius:27% 27% 15% 15%;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
.soul-arm{width:17%;height:43%;top:27%;border-radius:30px}
.soul-arm.left{left:13%;transform:rotate(10deg)}.soul-arm.right{right:13%;transform:rotate(-10deg)}
.soul-leg{width:20%;height:39%;top:59%;border-radius:4px 4px 12px 12px}.soul-leg.left{left:28%;transform:rotate(3deg)}.soul-leg.right{right:28%;transform:rotate(-3deg)}
.cinema-soul-company{position:absolute;z-index:4;display:flex;align-items:end;justify-content:center;gap:clamp(8px,2.8vw,42px);width:100%;left:0;bottom:12%;perspective:800px}
.cinema-soul-company .soul-figure:nth-child(even){transform:scale(.92)}
.cinema-well-falling{position:absolute;z-index:4;left:calc(50% - 42px);top:20%;animation:anonymous-fall 2.85s ease-in forwards}
.cinema-well-falling .soul-figure{width:70px;height:205px}
.cinema-soul-victim{position:absolute;z-index:3;left:24%;bottom:18%;animation:anonymous-extracted 3.55s ease-in forwards}
.cinema-soul-victim .soul-figure{width:72px;height:214px}
@keyframes anonymous-fall{0%{opacity:1;transform:translateY(-15vh) scale(1.1) rotate(-8deg)}56%{opacity:1}100%{opacity:0;transform:translateY(54vh) scale(.09) rotate(360deg)}}
@keyframes anonymous-extracted{0%,25%{opacity:1;transform:scale(1)}55%{opacity:1;filter:blur(1px)}100%{opacity:0;transform:translate(30vw,-21vh) scale(.06) rotate(50deg);filter:blur(15px)}}

/* Rich photographic doorway reveal replaces the artificial flat folding rectangles. */
.cinema-intro-entry{position:absolute;inset:0;background:url('assets/grand-entry-open.webp') center center/cover no-repeat;z-index:2;animation:intro-photographic-doors 7.15s ease-in-out both}
.cinema-intro-interior{z-index:3;animation:intro-photographic-interior 7.15s ease-in-out both}
.cinema-intro-butler{z-index:4}
@keyframes intro-photographic-doors{0%,40%{opacity:0;transform:scale(1.03);filter:brightness(.3) blur(10px)}57%{opacity:1;transform:scale(1.14);filter:brightness(.8) blur(0)}73%{opacity:1;transform:scale(1.39);filter:brightness(.94)}91%,100%{opacity:0;transform:scale(1.7)}}
@keyframes intro-photographic-interior{0%,70%{opacity:0;transform:scale(1.17)}93%,100%{opacity:1;transform:scale(1)}}

/* Relocated flesh barriers dissolve on the map and reform in their new spot. */
.flesh-wall-reappearing{transform-box:fill-box;transform-origin:center;animation:flesh-map-appear 1.35s ease-out both}
.flesh-wall-departing{transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 14px #e95881);animation:flesh-map-disperse 1.35s ease-in both}
@keyframes flesh-map-appear{0%,38%{opacity:0;transform:scale(.28);filter:blur(10px)}57%{opacity:.7;transform:scale(1.35);filter:blur(3px)}82%,100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes flesh-map-disperse{0%{opacity:1;transform:scale(1)}35%{opacity:.8;transform:scale(1.37);filter:blur(2px)}80%,100%{opacity:0;transform:scale(.08);filter:blur(12px)}}

/* The last decision belongs to the infiltrator; dark and light outcomes diverge. */
.impostor-choice-avatar{display:flex;justify-content:center;max-height:145px;overflow:hidden;margin:0 0 10px}
.impostor-choice-avatar .soul-figure{height:150px;width:58px}
.impostor-choice-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.impostor-choice-actions .btn{min-height:90px;line-height:1.45;padding:15px;white-space:normal}
.impostor-choice-actions .btn.danger{background:linear-gradient(110deg,#772231,#3d1527);border-color:#d46673;color:#ffe5e3}

/* Fullscreen multi-act epilogues. Distinct dawn, betrayal and infernal ritual. */
.cinema-epilogue{background:#080610}
.epilogue-sunrise,.epilogue-shadows,.epilogue-betrayal-hall,.epilogue-last-ritual,.epilogue-cycle{position:absolute;inset:0;background-size:cover;background-position:center}
.epilogue-sunrise{background-image:linear-gradient(transparent 35%,#211a1270 100%),url('assets/mansion-dawn.webp');animation:epilogue-dawn-appear 10.5s both}
.epilogue-shadows{z-index:2;background:linear-gradient(#0a0711a8,#2307158a),url('assets/guardian-demon-v2.webp') center 40%/contain no-repeat;animation:epilogue-darkness-retreat 10.5s both}
.epilogue-defiance{position:absolute;z-index:6;bottom:20%;left:calc(50% - 30px);animation:epilogue-hero-stand 10.5s both}
.epilogue-defiance .soul-figure{width:70px;height:205px}
.epilogue-soul-company.liberated{animation:epilogue-survivors-approach 10.5s ease-out both}
.cinema-epilogue .cinema-soul-company.liberated{animation:epilogue-survivors-approach 10.5s ease-out both}
.epilogue-betrayal-hall{background-image:radial-gradient(ellipse at center,#6c243755,#0e0615bb),url('assets/infernal-room-hd-10.webp');animation:epilogue-hell-breathe 10.5s ease-in-out both}
.epilogue-black-gates{position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(90deg,#06050a 0%,transparent 11%,transparent 89%,#06050a 100%);animation:epilogue-seal-gate 10.5s both}
.cinema-epilogue .cinema-soul-company.devoured{bottom:13%;animation:epilogue-devour 10.5s both}
.epilogue-apostate{position:absolute;bottom:19%;left:calc(50% - 40px);z-index:5;animation:epilogue-traitor-rise 10.5s both}
.epilogue-apostate .soul-figure{height:215px;width:78px}
.epilogue-apostate::before,.epilogue-apostate::after{content:"";position:absolute;top:30%;width:118px;height:90px;background:radial-gradient(ellipse,#d43c5e66,transparent 70%);filter:blur(15px);z-index:-1;animation:epilogue-wing 1.8s ease-in-out infinite alternate}
.epilogue-apostate::before{right:60%;transform:rotate(24deg)}.epilogue-apostate::after{left:60%;transform:rotate(-24deg)}
.epilogue-last-ritual{background-image:radial-gradient(ellipse at 51% 49%,#8f1e3899,#08050c 71%),url('assets/infernal-room-hd-10.webp');animation:epilogue-hell-breathe 14.8s both}
.epilogue-final-host{position:absolute;z-index:3;right:0;top:0;width:100%;height:100%;object-fit:cover;object-position:65% 35%;animation:epilogue-host-act 14.8s ease-out both}
.epilogue-underworld{position:absolute;z-index:3;inset:0;animation:epilogue-victims-act 14.8s both}
.epilogue-underworld .cinema-soul-company{bottom:0}
.epilogue-charon{position:absolute;z-index:4;right:0;top:0;width:100%;height:100%;object-fit:cover;object-position:65% 40%;animation:epilogue-charon-act 14.8s both}
.epilogue-cycle{z-index:5;background:linear-gradient(#0b0b1080,#100d1055),url('assets/mansion-exterior.webp') center/cover no-repeat;animation:epilogue-cycle-act 14.8s both}
.epilogue-story{position:absolute;z-index:8;left:4%;right:4%;top:10%;display:flex;flex-direction:column;align-items:center;gap:16px;font:700 clamp(18px,2.8vw,32px) Georgia,serif;letter-spacing:.07em;line-height:1.3;text-shadow:0 3px 14px #000,0 0 23px #000}
.epilogue-story strong{font:700 clamp(27px,5vw,67px) Georgia,serif;color:#f5dcb9}
.epilogue-story span{font:italic clamp(16px,2.2vw,28px)/1.5 Georgia,serif;color:#e9d4c6;max-width:780px}
.epilogue-story.first{animation:epilogue-act-one 10.5s both}
.epilogue-story.last{animation:epilogue-act-last 10.5s both}
.cinema-epilogue:has(.epilogue-final-host) .epilogue-story.first{animation:epilogue-ritual-first 14.8s both}
.cinema-epilogue:has(.epilogue-final-host) .epilogue-story.middle{animation:epilogue-ritual-middle 14.8s both}
.cinema-epilogue:has(.epilogue-final-host) .epilogue-story.last{animation:epilogue-ritual-last 14.8s both}
@keyframes epilogue-dawn-appear{0%,22%{opacity:0;transform:scale(1.07)}47%,100%{opacity:1;transform:scale(1)}}
@keyframes epilogue-darkness-retreat{0%,16%{opacity:1}46%,100%{opacity:0}}
@keyframes epilogue-survivors-approach{0%,30%{opacity:0;transform:translateY(18vh) scale(.76)}50%,100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes epilogue-hero-stand{0%,5%{opacity:0;transform:translateY(20vh)}15%,43%{opacity:1;transform:translateY(0)}64%,100%{opacity:0}}
@keyframes epilogue-hell-breathe{0%{transform:scale(1);filter:brightness(.5)}50%{transform:scale(1.17);filter:brightness(.8)}100%{transform:scale(1.24);filter:brightness(.42)}}
@keyframes epilogue-seal-gate{0%,12%{transform:scaleX(.7);opacity:0}26%{opacity:1;transform:scaleX(1.7)}100%{opacity:1;transform:scaleX(2.6)}}
@keyframes epilogue-devour{0%,30%{opacity:1;transform:translateY(0) scale(1)}68%,100%{opacity:0;transform:translateY(90vh) scale(.35);filter:blur(23px)}}
@keyframes epilogue-traitor-rise{0%,30%{opacity:0;transform:scale(.65) translateY(18vh)}55%,100%{opacity:1;transform:scale(1.25) translateY(0)}}
@keyframes epilogue-wing{from{opacity:.4;filter:blur(18px)}to{opacity:1;filter:blur(7px)}}
@keyframes epilogue-host-act{0%,8%{opacity:0;filter:blur(20px);transform:scale(1.2)}23%,32%{opacity:1;filter:blur(0);transform:scale(1)}42%,100%{opacity:0;transform:scale(1.07)}}
@keyframes epilogue-victims-act{0%,11%{opacity:0}22%,40%{opacity:1;transform:translateY(0)}43%,100%{opacity:0;transform:translateY(35vh)}}
@keyframes epilogue-charon-act{0%,38%{opacity:0;filter:blur(18px);transform:scale(1.2)}51%,64%{opacity:1;filter:blur(0);transform:scale(1)}71%,100%{opacity:0;transform:scale(1.07)}}
@keyframes epilogue-cycle-act{0%,69%{opacity:0}77%,100%{opacity:1}}
@keyframes epilogue-act-one{0%,10%{opacity:0;transform:translateY(20px)}19%,37%{opacity:1;transform:translateY(0)}48%,100%{opacity:0}}
@keyframes epilogue-act-last{0%,45%{opacity:0;transform:translateY(20px)}57%,100%{opacity:1;transform:translateY(0)}}
@keyframes epilogue-ritual-first{0%,8%{opacity:0}18%,31%{opacity:1}38%,100%{opacity:0}}
@keyframes epilogue-ritual-middle{0%,40%{opacity:0}50%,63%{opacity:1}70%,100%{opacity:0}}
@keyframes epilogue-ritual-last{0%,75%{opacity:0}84%,100%{opacity:1}}

/* Epilogue page remains readable after its full-screen prologue finishes. */
.end-screen{max-width:1150px;min-height:calc(100dvh - 100px);margin:5px auto;padding:22px 22px 46px;position:relative;isolation:isolate}
.ending-art{position:absolute;inset:0;z-index:-1;border-radius:7px;overflow:hidden}
.ending-art.dawn{background:linear-gradient(#090a0b92,#0a0b0a96),url('assets/mansion-dawn.webp') center/cover no-repeat}
.ending-art.ruined{background:linear-gradient(#170613aa,#08060bee),url('assets/infernal-room-hd-10.webp') center/cover no-repeat}
.ending-art.ritual{background:#110710}
.ending-art.ritual img{position:absolute;top:0;width:60%;height:100%;object-fit:cover;opacity:.25;filter:blur(2px)}
.ending-art.ritual img:first-child{left:0}.ending-art.ritual img:nth-child(2){right:0}
.ending-art .cinema-soul-company{z-index:1;opacity:.38;bottom:0}
.end-screen .display,.end-screen .lead,.end-screen .eyebrow,.end-screen .ending-survivors,.end-screen>.btn{z-index:2;position:relative;text-shadow:0 3px 20px #000}
.ending-survivors{font:italic 14px/1.8 Georgia,serif;max-width:750px;padding:5px 16px 15px}

@media(max-width:720px){.impostor-choice-actions{grid-template-columns:1fr}.impostor-choice-actions .btn{min-height:62px}.cinema-soul-company{gap:4px;bottom:19%}.cinema-soul-company .soul-figure{width:clamp(30px,10vw,50px);height:clamp(105px,23vh,175px)}.epilogue-story{top:14%}.epilogue-story span{font-size:15px}.end-screen{min-height:calc(100dvh - 120px)}}
@media(prefers-reduced-motion:reduce){.flesh-wall-reappearing,.flesh-wall-departing{animation:none}.flesh-wall-departing{display:none}.cinema-intro-entry{opacity:0;animation:none}.cinema-intro-interior{opacity:1}.epilogue-sunrise,.epilogue-cycle{opacity:1;animation:none}.epilogue-final-host,.epilogue-charon,.epilogue-shadows{opacity:0;animation:none}.cinema-soul-company{opacity:1;animation:none}}

/* Cinematic photographic adult shadows replace the former diagrammatic stick figures. */
.soul-figure{filter:none;isolation:isolate}
.soul-figure img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;pointer-events:none;filter:drop-shadow(0 0 2px var(--soul-color)) drop-shadow(0 0 7px color-mix(in srgb,var(--soul-color) 70%,transparent));}
.soul-figure::after{content:"";position:absolute;inset:15% 10% 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--soul-color) 18%,transparent),transparent 63%);filter:blur(18px)}
.token-portrait{pointer-events:none;filter:drop-shadow(0 0 2px var(--token-color)) drop-shadow(0 0 4px var(--token-color));}
.player-token .token-halo{filter:drop-shadow(0 0 3px var(--token-color))}

/* The Host, still fully human, delivers the rules once the butler has left. */
.cinema-welcome{background:#08060d}
.cinema-host-welcome-hall{position:absolute;inset:0;background:linear-gradient(90deg,#08070df0 0%,#150b15d9 42%,#06040788 100%),url('assets/mansion-entrance.webp') center/cover no-repeat;animation:host-welcome-hall 15.8s both}
.cinema-host-welcome-portrait{position:absolute;right:1%;top:0;width:min(66vw,1050px);height:100%;object-fit:contain;object-position:right center;mask-image:linear-gradient(90deg,transparent 0%,#000 21%,#000 93%,transparent 100%);animation:host-welcome-portrait 15.8s ease-out both}
.cinema-host-welcome-flash{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;background:radial-gradient(ellipse at 72% 40%,#fdf4e5cc,transparent 58%);animation:host-welcome-flash 15.8s steps(1) both}
.cinema-welcome-copy{position:absolute;z-index:8;left:clamp(24px,6vw,140px);top:15%;width:min(54vw,780px);display:flex;flex-direction:column;align-items:flex-start;gap:13px;text-align:left;text-shadow:0 3px 17px #000,0 1px 30px #000}
.cinema-welcome-copy span{font:700 11px var(--sans);color:#ddb58d;letter-spacing:.28em;animation:host-welcome-line 15.8s both}
.cinema-welcome-copy h2{font:500 clamp(33px,4.2vw,77px)/1.08 Georgia,serif;letter-spacing:.025em;color:#ffdfbd;max-width:720px;margin:0 0 10px;animation:host-welcome-line 15.8s both}
.cinema-welcome-copy p{font:italic clamp(18px,2.1vw,28px)/1.55 Georgia,serif;color:#ecd5cb;max-width:640px;margin:0;animation:host-welcome-subtitle 15.8s both}
.cinema-welcome-copy p:nth-of-type(2){animation:host-welcome-threat 15.8s both}
.cinema-welcome-copy strong{font:700 clamp(20px,3vw,41px) Georgia,serif;letter-spacing:.09em;color:#ffc1a9;margin-top:20px;animation:host-welcome-command 15.8s both}
@keyframes host-welcome-hall{0%{filter:brightness(.3) blur(8px);transform:scale(1.1)}20%,100%{filter:brightness(.9) blur(0);transform:scale(1)}}
@keyframes host-welcome-portrait{0%{opacity:0;transform:translateX(18%) scale(1.06);filter:brightness(.3)}17%{opacity:1;transform:translateX(0) scale(1.01);filter:brightness(.79)}100%{opacity:1;transform:scale(1.12);filter:brightness(.72)}}
@keyframes host-welcome-flash{0%,2%,6%,100%{opacity:0}3%{opacity:.9}4%{opacity:.16}5%{opacity:.7}}
@keyframes host-welcome-line{0%,7%{opacity:0;transform:translateY(20px)}18%,100%{opacity:1;transform:translateY(0)}}
@keyframes host-welcome-subtitle{0%,26%{opacity:0;transform:translateY(14px)}38%,100%{opacity:1;transform:translateY(0)}}
@keyframes host-welcome-threat{0%,48%{opacity:0;transform:translateY(14px)}60%,100%{opacity:1;transform:translateY(0)}}
@keyframes host-welcome-command{0%,74%{opacity:0;transform:scale(.85)}85%,100%{opacity:1;transform:scale(1)}}
@media(max-width:820px){.cinema-host-welcome-portrait{width:100vw;right:-25vw;opacity:.42;object-position:70% center}.cinema-welcome-copy{left:7%;top:13%;width:88%;gap:10px}.cinema-welcome-copy h2{max-width:450px}.cinema-welcome-copy p{max-width:510px}.cinema-welcome-copy strong{margin-top:7px}}
@media(prefers-reduced-motion:reduce){.cinema-host-welcome-portrait,.cinema-welcome-copy *{animation:none!important;opacity:1!important}}

/* Individual boons and collectible mystery boxes. */
.power-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:10px 0 0}
.power-strip span{display:block;border:1px solid #786077;border-radius:4px;background:linear-gradient(135deg,#3a294c,#1b1b28);padding:5px 2px;text-align:center;font-size:12px;font-weight:700;color:#f0d7ff;cursor:help;white-space:nowrap}
.board-item-box{filter:drop-shadow(0 0 8px #b58afc);animation:box-glow 2.6s ease-in-out infinite}
.board-item-box text{font-family:Georgia,serif}
@keyframes box-glow{50%{filter:drop-shadow(0 0 17px #efccff);opacity:.8}}
.answer-choice:disabled{color:#85777a!important;background:#17151d!important;border-color:#48383f!important;text-decoration:line-through;cursor:not-allowed;opacity:.42}
.die-face.die-shaking{animation:die-shaking .52s cubic-bezier(.2,.7,.3,1)}
.die-face.die-holding{animation:die-holding .22s ease-in-out infinite alternate;box-shadow:0 0 18px #c09d73}
@keyframes die-holding{from{transform:rotate(-13deg) translateY(-2px)}to{transform:rotate(13deg) translateY(-9px)}}
@keyframes die-shaking{0%{transform:rotate(0deg)}15%{transform:rotate(-18deg) translateY(-5px)}45%{transform:rotate(23deg) translateY(-15px)}70%{transform:rotate(-12deg)}100%{transform:rotate(0deg)}}
.cinema-power{background:radial-gradient(ellipse at 50% 56%,#47366d 0%,#1a1239 36%,#07040d 76%)}
.cinema-power-glow{position:absolute;inset:-25%;background:conic-gradient(from 45deg,transparent,#b9a2ff22,transparent,#fff5db55,transparent,#b9a2ff22,transparent);animation:power-rays 2.8s ease-out both;filter:blur(12px)}
.cinema-power-symbol{position:absolute;z-index:4;left:50%;top:42%;transform:translate(-50%,-50%);width:min(30vw,260px);height:min(30vw,260px);border:3px solid #edddff;border-radius:19%;background:radial-gradient(circle at 35% 30%,#ae92fa,#4e2e85 65%,#161126);display:grid;place-items:center;font:900 clamp(80px,15vw,180px) Georgia,serif;color:#fff4dc;text-shadow:0 0 22px #fff,0 0 70px #dac0ff;box-shadow:0 0 50px #b49eff,0 0 130px #9b70e977,inset 0 0 45px #dfccff99;animation:power-appear 2.8s ease-out both}
@keyframes power-rays{0%{opacity:0;transform:scale(.3) rotate(-60deg)}40%{opacity:1}100%{opacity:.4;transform:scale(1.15) rotate(45deg)}}
@keyframes power-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(-25deg)}34%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(5deg)}60%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(1.03)}}
.cinema-walltrap{background:radial-gradient(ellipse at center,#96263c,#1b0610 65%,#050207)}
.cinema-wall-grasp{filter:brightness(.5) sepia(.6) saturate(2.2);animation:wall-grasp 3.2s both}
.cinema-trapped-soul{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:145px;height:270px;filter:drop-shadow(0 0 12px #ff5268);animation:trapped-soul 3.2s both}
.cinema-trapped-soul .soul-figure{width:145px;height:270px}
.cinema-walltrap .cinema-flesh-veins{z-index:5;mix-blend-mode:screen;opacity:.75}
@keyframes wall-grasp{0%{transform:scale(1.8);opacity:.3}35%{transform:scale(1.2);opacity:.72}72%{transform:scale(1.65);opacity:.95}100%{transform:scale(1.4);opacity:.75}}
@keyframes trapped-soul{0%{opacity:0;transform:translate(-50%,-45%) scale(1.2)}25%{opacity:1}65%{transform:translate(-50%,-50%) scale(.9)}85%{filter:drop-shadow(0 0 30px #ff273a);transform:translate(-50%,-50%) scale(.7)}100%{opacity:.25;transform:translate(-50%,-50%) scale(.55)}}
.cinema-soul-victim .cinema-soul-skeleton{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.96);filter:drop-shadow(0 0 12px #e1d6c2);animation:soul-bones 3.55s ease-in forwards}
.cinema-soul-victim .soul-figure{animation:soul-flesh-fall 3.55s forwards}
@keyframes soul-bones{0%,45%{opacity:0;transform:scale(.7)}67%{opacity:.75;transform:scale(1)}85%{opacity:1;transform:scale(1.05)}100%{opacity:.05;transform:scale(.8)}}
@keyframes soul-flesh-fall{0%,35%{opacity:1;filter:brightness(1)}60%{opacity:.75;filter:brightness(2) saturate(0)}80%,100%{opacity:0;filter:brightness(3) blur(11px)}}
@media(prefers-reduced-motion:reduce){.cinema-power-symbol,.cinema-power-glow,.cinema-soul-skeleton,.cinema-trapped-soul,.cinema-wall-grasp{animation:none!important;opacity:1!important}}
.cinema-epilogue:has(.epilogue-final-host) .epilogue-last-ritual,.cinema-epilogue:has(.epilogue-final-host) .epilogue-final-host,.cinema-epilogue:has(.epilogue-final-host) .epilogue-underworld,.cinema-epilogue:has(.epilogue-final-host) .epilogue-charon,.cinema-epilogue:has(.epilogue-final-host) .epilogue-cycle,.cinema-epilogue:has(.epilogue-final-host) .epilogue-story{animation-duration:70s}

/* Antiquarian oracle-card treatment: engraved brass, smoky vellum, and living seals. */
.arcane-card{--card-light:#c7b7ff;--card-dark:#45305d;position:relative;width:min(30vw,245px);aspect-ratio:0.65;isolation:isolate;overflow:hidden;border-radius:9px;border:3px double #bca174;color:#f9ecd5;background:radial-gradient(ellipse at 50% 41%,var(--card-dark),transparent 55%),repeating-linear-gradient(35deg,#100d1b,#1d1725 2px,#231a26 5px,#110e16 9px);box-shadow:inset 0 0 0 3px #2e1b23,inset 0 0 25px #000,0 12px 27px #0008,0 0 22px color-mix(in srgb,var(--card-light),transparent 75%);font-family:var(--serif)}
.arcane-card::before{content:"";position:absolute;inset:-16%;background:conic-gradient(from -21deg,transparent 0 12%,#d3b27b0b 13% 14%,transparent 15% 38%,#e9c98624 39% 40%,transparent 41% 61%,#e3b16b18 62% 63%,transparent 64% 100%);filter:blur(1px);z-index:-1;animation:card-magic 12s linear infinite}
.arcane-card::after{content:"✦";position:absolute;inset:9px;border:1px solid #ae9067;border-radius:4px;color:#dec49c;font-size:15px;text-align:right;padding:6px;text-shadow:0 0 12px var(--card-light);pointer-events:none}
.arcane-fifty{--card-light:#85cfea;--card-dark:#173f59}
.arcane-retry{--card-light:#e3b778;--card-dark:#68402b}
.arcane-extra{--card-light:#c5a0f5;--card-dark:#4f285b}
.arcane-escape{--card-light:#87dfbd;--card-dark:#164b47}
.arcane-card-inner{position:absolute;inset:17px 14px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;border:1px solid #8b6d4c80;padding:12px 5px 16px;background:linear-gradient(180deg,#0c0d1688,transparent 40%,#06060cb9);text-align:center}
.arcane-ornament{font:15px Georgia,serif;letter-spacing:.55em;color:#ebc995;text-shadow:0 0 9px #eac8a3}
.arcane-card-halo{width:min(17vw,144px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;margin:auto;position:relative;background:radial-gradient(circle,var(--card-dark) 0 44%,#080d19 47% 53%,#d4b985 54% 55%,transparent 56%);border:1px solid #7f6b64;box-shadow:0 0 32px var(--card-light),inset 0 0 18px var(--card-light);transform:rotate(-5deg)}
.arcane-card-halo::before{content:"✧ ✦ ✧";position:absolute;inset:-14px;border:1px dashed #e3bf82a8;border-radius:50%;display:grid;place-items:start center;padding-top:1px;color:#ead7a7;font:12px Georgia,serif;animation:arcane-ring 18s linear infinite}
.arcane-card-halo span{font:700 clamp(54px,8vw,98px) Georgia,serif;color:#f6e5c3;text-shadow:0 0 15px var(--card-light),0 0 35px var(--card-light);line-height:1}
.arcane-card-name{font:600 clamp(14px,1.6vw,20px)/1.18 var(--serif);text-shadow:0 2px 5px #000;max-width:95%;text-transform:uppercase;letter-spacing:.03em}
.arcane-card-motto{font:italic clamp(9px,.9vw,12px)/1.3 Georgia,serif;letter-spacing:.09em;color:#dabf92;margin:8px 0}
.arcane-card-footer{font:8px Georgia,serif;letter-spacing:.24em;color:#9f8d79}
@keyframes arcane-ring{to{transform:rotate(360deg)}}
@keyframes card-magic{to{transform:rotate(360deg)}}
.cinema-power-card{position:absolute;z-index:5;left:50%;top:44%;transform:translate(-50%,-50%);animation:arcane-reveal 3.2s ease-out both;filter:drop-shadow(0 0 34px #e7bb9a66)}
.cinema-power-card .arcane-card{width:clamp(165px,22vw,260px)}
@keyframes arcane-reveal{0%{opacity:0;transform:translate(-50%,-50%) rotateY(110deg) scale(.25)}28%{opacity:1;transform:translate(-50%,-50%) rotateY(-18deg) scale(1.15)}56%{transform:translate(-50%,-50%) rotateY(0) scale(1)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
.power-strip{gap:5px;margin-top:9px}
.power-slot{position:relative;min-width:0;cursor:pointer;display:block;padding:0;border:0;background:transparent;color:inherit;text-align:center;appearance:none;transition:transform .15s ease,filter .15s ease}
.power-slot:hover,.power-slot:focus-visible{transform:translateY(-3px);filter:brightness(1.2) drop-shadow(0 0 6px #c6a4ee88)}
.power-slot:focus-visible{outline:2px solid #f5d48e;outline-offset:3px}
.power-slot.power-empty{opacity:.64}
.power-slot.power-armed .arcane-card{border-color:#ffdea2!important;box-shadow:0 0 13px #eac87780,inset 0 0 12px #eac87750!important}
.power-slot .power-ready{position:absolute;bottom:-11px;left:1px;right:1px;z-index:4;padding:2px 1px;background:#483525;border:1px solid #f0c583;border-radius:2px;color:#ffe7b3;font:700 7px/1 var(--sans);letter-spacing:.05em;pointer-events:none}
.power-strip:has(.power-ready){margin-bottom:18px}
.power-strip-help{font:italic 10px/1.25 Georgia,serif;color:#c9b49e;margin:5px 0 0}
.arcane-roster{display:grid;gap:5px;margin:7px 0 12px}
.arcane-roster-row{display:grid;grid-template-columns:minmax(0,90px) 1fr;align-items:center;gap:7px;padding:5px 7px;border:1px solid #635464;background:#15151d;border-radius:4px}
.arcane-roster-row.current{border-color:#c4a577;background:#382a31}
.arcane-roster-name{font:600 10px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arcane-roster-powers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.arcane-roster-count{border:1px solid #645568;background:#22202b;border-radius:3px;padding:3px 1px;font:600 10px/1.15 var(--sans);color:#918894;text-align:center;white-space:nowrap}
.arcane-roster-count.has-power{color:#f5ddaf;border-color:#a48972;background:#433342}
.arcane-roster-count.armed{color:#fff0c9;border-color:#e5c178;background:#62492f}
.power-effect-note{border:1px solid #c5a67188;background:#44352a78;color:#f7e4bf;padding:8px 12px;border-radius:5px;font:600 12px/1.3 var(--sans)}
.power-strip .arcane-card.arcane-compact{width:100%;height:80px;aspect-ratio:auto;border-width:2px;border-radius:3px;box-shadow:inset 0 0 8px #000,0 1px 8px #0006}
.power-strip .arcane-card-inner{inset:4px 3px;padding:2px 1px;justify-content:space-between}
.power-strip .arcane-card::after,.power-strip .arcane-ornament,.power-strip .arcane-card-motto,.power-strip .arcane-card-footer{display:none}
.power-strip .arcane-card-halo{width:35px;margin:3px auto 1px;box-shadow:0 0 9px var(--card-light)}
.power-strip .arcane-card-halo::before{display:none}
.power-strip .arcane-card-halo span{font:700 24px Georgia,serif;background:none;border:0;padding:0;color:#f9ebd8;white-space:normal}
.power-strip .arcane-card-name{font:600 7px/1.1 var(--serif);letter-spacing:0;margin:0 auto 3px}
.power-strip .power-count{position:absolute;display:block;right:-2px;top:-5px;padding:1px 5px;background:#f4d6a7;border:1px solid #5a3822;border-radius:20px;box-shadow:0 1px 5px #000;color:#37222c;font:bold 12px var(--sans);z-index:3}
.seal-choice-card{display:flex;justify-content:center;margin:12px auto 0}
.seal-choice-card .arcane-card{width:132px}
.seal-choice-card .arcane-card-inner{inset:9px 8px;padding:5px}
.seal-choice-card .arcane-card-halo{width:75px}
.seal-choice-card .arcane-card-halo span{font-size:44px}
.seal-choice-card .arcane-card-name{font-size:12px}
.seal-choice-card .arcane-card-motto{font-size:8px}
.seal-rescue-list{display:grid;gap:5px;margin:7px 0 10px}
.seal-rescue-list .eyebrow{margin-bottom:2px}
.seal-rescue-action{font-size:10px!important;white-space:normal;text-align:left}
.void-well.well-active{filter:drop-shadow(0 0 9px #f5345a);animation:well-threat 1.8s ease-in-out infinite}
.void-well.well-latent{filter:drop-shadow(0 0 4px #a483d1);opacity:.85}
.void-well.well-active .well-image{filter:hue-rotate(48deg) saturate(1.7) contrast(1.15)}
@keyframes well-threat{50%{filter:drop-shadow(0 0 17px #ff4b74)}}
.cinema-rescue{background:radial-gradient(ellipse at 48% 47%,#1f5372,#091521 48%,#060914 80%)}
.cinema-rescue-beam{position:absolute;z-index:3;left:45%;top:-10%;height:115%;width:12%;background:linear-gradient(90deg,transparent,#8ce8ff9c,#f6efda,transparent);filter:blur(12px);transform:rotate(15deg);animation:rescue-beam 3.1s ease-out both}
.cinema-rescue-well{opacity:.73;animation:rescue-well-shrink 3.1s both}
.cinema-rescue-figures{position:absolute;z-index:5;left:50%;top:46%;display:flex;gap:40px;align-items:center;transform:translate(-50%,-50%)}
.cinema-rescue-figures .soul-figure{width:80px;height:215px;animation:rescue-figure 3.1s ease-out both}
.cinema-rescue-figures .soul-figure.saved{animation:rescue-rising 3.1s ease-out both}
@keyframes rescue-beam{0%{opacity:0;transform:rotate(15deg) scaleX(.15)}36%{opacity:1;transform:rotate(15deg) scaleX(1.5)}80%,100%{opacity:0;transform:rotate(15deg) scaleX(3)}}
@keyframes rescue-well-shrink{0%{transform:scale(1.2)}100%{transform:scale(.6);opacity:.16}}
@keyframes rescue-figure{0%{opacity:0;filter:brightness(.4)}27%,100%{opacity:1;filter:brightness(1)}}
@keyframes rescue-rising{0%{opacity:0;transform:translateY(25vh) scale(.4);filter:blur(16px)}52%{opacity:1;transform:translateY(-12px) scale(1.15);filter:blur(0)}100%{transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.arcane-card::before,.arcane-card-halo::before,.cinema-power-card,.cinema-rescue-beam,.cinema-rescue-figures .soul-figure,.void-well.well-active{animation:none!important}}

/* The board is a camera viewport: preserve the architectural aspect ratio while travelling. */
.board-wrap{overflow:hidden;aspect-ratio:1510/1200;isolation:isolate;touch-action:pan-y}
.board-camera-world{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 50%;will-change:transform;z-index:1}
.board-camera-world svg{display:block;width:100%;height:100%;max-height:none;object-fit:contain}
.board-camera-controls{position:absolute;right:12px;bottom:12px;z-index:15;display:flex;gap:6px;padding:4px;border:1px solid #d6b27b6b;border-radius:999px;background:#100d19d9;box-shadow:0 8px 25px #000b;backdrop-filter:blur(9px)}
.camera-button{border:1px solid transparent;border-radius:999px;padding:7px 11px;background:transparent;color:#ddcbb5;cursor:pointer;font:600 11px var(--sans);transition:background .3s,color .3s,border-color .3s}
.camera-button:hover{background:#79654e57;color:#fff5da}
.camera-button.camera-current{border-color:#bb9c66;background:linear-gradient(135deg,#7b5737,#412b30);color:#fff0d4}
@media(min-width:1150px) and (min-height:700px){body.game-active .board-wrap{aspect-ratio:auto;flex:1;min-height:0}}
@media(max-width:760px){.board-camera-controls{right:6px;bottom:6px;gap:2px;padding:3px}.camera-button{font-size:9px;padding:6px 8px}}

/* Studio-voice captions sit above cinematics, never block any interactions. */
.voice-subtitle{position:fixed;z-index:680;left:50%;bottom:clamp(18px,5.8vh,64px);transform:translateX(-50%);width:min(850px,calc(100vw - 30px));border:1px solid #d8bb847a;border-radius:8px;background:linear-gradient(135deg,#080912ef,#1b1420ec);padding:14px 23px 16px;box-shadow:0 10px 35px #000d,0 0 35px #b69c6022;backdrop-filter:blur(12px);pointer-events:none;text-align:center;animation:caption-appear .25s ease-out}
.voice-subtitle[hidden]{display:none}
.voice-subtitle-speaker{display:block;margin-bottom:7px;color:#dcbf8f;font:700 10px var(--sans);letter-spacing:.24em;text-transform:uppercase}
.voice-subtitle-text{margin:0;color:#fff3e6;font:italic clamp(13px,1.5vw,18px)/1.55 Georgia,serif;text-shadow:0 1px 6px #000}
@keyframes caption-appear{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:700px){.voice-subtitle{bottom:11px;padding:9px 14px}.voice-subtitle-speaker{font-size:8px;margin-bottom:3px;letter-spacing:.17em}.voice-subtitle-text{font-size:13px;line-height:1.36}}
@media(prefers-reduced-motion:reduce){.voice-subtitle{animation:none}.board-camera-world{transition:none!important}}

/* Distinct Trivial-Pursuit-inspired square cells: one straight readable chain per corridor. */
.corridor-tile .corridor-slab{filter:drop-shadow(0 0 1px #000);shape-rendering:geometricPrecision}
.corridor-tile .corridor-inlay{filter:none;shape-rendering:crispEdges}
.tile-node.corridor-tile.reachable .corridor-slab{fill:#806746;stroke:#f9dd9a;stroke-width:2.6;filter:drop-shadow(0 0 5px #f8d68b7a)}
.tile-node.corridor-tile.reachable .corridor-inlay{stroke:#ffeabd;stroke-width:1.7}
.tile-node.corridor-tile:hover .corridor-slab{stroke:#fff0c2;stroke-width:2.7;filter:drop-shadow(0 0 5px #ffedb1)}
.tile-node.void-well .well-cell{filter:drop-shadow(0 0 3px #9877cd8c)}
.tile-node.void-well.well-active .well-cell{fill:#491321;stroke:#f77792}
.tile-node.void-well.reachable .well-cell{stroke:#fff2bf;stroke-width:3}
.board-item-box{filter:drop-shadow(0 0 4px #d4b0f5a4);cursor:pointer;pointer-events:auto}
.board-item-box:hover{filter:drop-shadow(0 0 9px #e4b8ff)}

/* Las maldiciones utilizan el mismo ritual de carta arcana, teñido de sangre. */
.arcane-curse_skip,.arcane-curse_bound{--card-light:#f36e80;--card-dark:#481320;border-color:#ca526b;background:radial-gradient(ellipse at 50% 41%,#71202b,transparent 58%),repeating-linear-gradient(35deg,#18090f,#280e18 3px,#3b1321 7px)}
.cinema-curse-embers{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 43%,#ad273363,transparent 61%),repeating-linear-gradient(140deg,transparent 0 52px,#ed5b6612 54px 57px);animation:curse-flicker 1.3s ease-in-out infinite alternate}
.cinema-curse-card{filter:drop-shadow(0 0 38px #d93955aa)}
.guardian-result-card{display:flex;justify-content:center;margin:12px auto 4px}
.guardian-result-card .arcane-card{width:110px}
.guardian-result-card .arcane-card-inner{inset:7px 6px;padding:4px}
.guardian-result-card .arcane-card-halo{width:51px}
.guardian-result-card .arcane-card-halo span{font-size:30px}
.guardian-result-card .arcane-card-name{font-size:10px}
.guardian-result-card .arcane-card-motto,.guardian-result-card .arcane-card-footer{display:none}
.guardian-negative .arcane-card{animation:curse-card-pulse 1.6s ease-in-out infinite alternate}
@keyframes curse-flicker{to{opacity:.6;filter:brightness(1.4)}}
@keyframes curse-card-pulse{to{box-shadow:0 0 30px #fa4969aa,inset 0 0 16px #7f122b}}

/* Fichas de calavera y apariciones animadas de los Caminantes sin Alma. */
.walker-token{pointer-events:none;filter:drop-shadow(0 0 8px #a7c5a6);animation:walker-token-breathe 2.8s ease-in-out infinite}
.walker-token text{font-family:Georgia,serif;paint-order:stroke;stroke:#23291f;stroke-width:.6}
@keyframes walker-token-breathe{50%{filter:drop-shadow(0 0 13px #daefc4);opacity:.78}}
.room-node.room-sealed{filter:drop-shadow(0 0 8px #ef4a68b9)}
.room-node.room-sealed .room-outline{stroke:#ef667c;stroke-width:3}
.walker-status{display:grid;gap:3px;margin:6px 0 11px;padding:8px 10px;border:1px solid #778571;background:linear-gradient(110deg,#19231c,#24202a);border-radius:5px}
.walker-status span{font:700 9px var(--sans);letter-spacing:.12em;color:#d5e4bd}
.walker-status strong{font:600 12px var(--serif);color:#f4ead1}
.walker-status small{font:10px/1.4 var(--sans);color:#aeb6a7}
.cinema-undead-fog{position:absolute;inset:-10%;background:radial-gradient(ellipse at 50% 75%,#7b9e826b,transparent 45%),radial-gradient(ellipse at 50% 30%,#372c427d,transparent 66%);filter:blur(14px);animation:undead-fog 3s ease-in-out both}
.cinema-undead-ground{position:absolute;left:25%;width:50%;height:22%;bottom:9%;background:radial-gradient(ellipse,#000e 0 20%,#61735d77 29%,transparent 74%);transform:scaleX(.2);animation:undead-breach 2.7s ease-out both}
.cinema-undead-ground.undead-origin-wall{height:75%;top:0;left:46%;width:12%;border-left:12px solid #695c59;border-right:12px solid #30232a;clip-path:polygon(10% 0,70% 20%,25% 48%,85% 75%,0 100%);background:#302329;animation:undead-wall-rift 3s ease-out both}
.cinema-undead-figure{position:absolute;z-index:5;top:14%;left:calc(50% - 100px);width:200px;height:66%;filter:drop-shadow(0 0 24px #b9d8b377)}
.cinema-undead-figure svg{position:absolute;inset:0;width:100%;height:100%;stroke:#d9d9c8;filter:drop-shadow(0 0 8px #9bba8e)}
.cinema-undead-figure::before{content:"";position:absolute;z-index:-1;inset:9% 12% 8%;background:linear-gradient(130deg,#1b201e,#39453a 35%,#171d1d 63%,#15131b);clip-path:polygon(27% 0,76% 4%,94% 35%,82% 52%,89% 100%,8% 100%,15% 58%,4% 34%);opacity:.95}
.undead-rising{animation:walker-rise 3.1s ease-out both}
.undead-shattering{animation:walker-shatter 2.6s ease-out both}
.undead-devoured{animation:walker-devour 3s ease-in both}
.cinema-undead-shards{position:absolute;inset:20% 0 0;text-align:center;font:90px Georgia,serif;color:#e7e2c8;text-shadow:0 0 30px #d7e7bd;animation:walker-shards 2.5s ease-out both}
.cinema-wall-pulled{position:absolute;z-index:5;left:30%;top:28%;transform:scale(1.2);animation:wall-gravity 2.9s ease-in both}
.walker-duel-crest{font:76px Georgia,serif;color:#d5d9b6;text-shadow:0 0 27px #839c86;text-align:center;margin:4px auto 12px}
.walker-duel-modal .host-die-options{margin-top:8px}
@keyframes undead-fog{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1.12)}}
@keyframes undead-breach{30%{transform:scaleX(1)}100%{transform:scaleX(1.4);opacity:.7}}
@keyframes undead-wall-rift{0%{opacity:0;transform:scaleX(.08)}45%{opacity:1;transform:scaleX(1.8)}100%{transform:scaleX(1.2)}}
@keyframes walker-rise{0%{opacity:0;transform:translateY(75%) scale(.55);filter:blur(17px)}50%{opacity:1}100%{transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes walker-shatter{0%,35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.6) rotate(25deg);filter:blur(28px)}}
@keyframes walker-shards{0%,35%{opacity:0;transform:scale(.6)}62%{opacity:1;transform:scale(1.6)}100%{opacity:0;transform:scale(3.5) rotate(120deg)}}
@keyframes walker-devour{0%{opacity:1;transform:translateX(-35%) scale(1)}100%{opacity:0;transform:translateX(75%) scale(.08) rotate(26deg)}}
@keyframes wall-gravity{0%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateX(65vw) scale(.15) rotate(18deg)}}
@media(prefers-reduced-motion:reduce){.cinema-curse-embers,.guardian-negative .arcane-card,.walker-token,.cinema-undead-fog,.cinema-undead-ground,.cinema-undead-figure,.cinema-undead-shards,.cinema-wall-pulled{animation:none!important}}

/* An accessible, spoiler-free rulebook before private guest registration. */
.guide{max-width:1120px;margin:0 auto 45px;padding:clamp(23px,4vw,48px);border:1px solid #a7865f;background:radial-gradient(ellipse at top right,#6b4a354d,transparent 55%),linear-gradient(145deg,#211a1d,#10151c 70%);box-shadow:0 20px 75px #030406ba,0 0 0 5px #a7865f18;animation:materialize .48s ease-out}
.guide-header{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:26px;border-bottom:1px solid #8a735b7b;padding-bottom:20px}
.guide-header .heading{margin:9px 0 7px;color:#f1dab1}.guide-header p{max-width:680px;color:#d4c2b1;font:16px/1.65 Georgia,serif}
.guide-chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.guide-chapter{background:#13151cbf;border:1px solid #68574b;min-width:0;align-self:start;transition:border-color .2s,background .2s}
.guide-chapter[open]{border-color:#d8ab70;background:#241e23}
.guide-chapter summary{list-style:none;display:flex;align-items:center;gap:13px;min-height:69px;padding:14px 16px;cursor:pointer;color:#e9d8bd}
.guide-chapter summary::-webkit-details-marker{display:none}
.guide-chapter summary:focus-visible{outline:2px solid #f2ca8c;outline-offset:3px}
.guide-chapter summary strong{font:600 14px/1.35 var(--serif);flex:1;letter-spacing:.015em}
.guide-number{font:700 23px Georgia,serif;color:#b99a73;opacity:.85}
.guide-chevron{font-size:19px;color:#d6ba91;transform:rotate(0);transition:transform .2s}
.guide-chapter[open] .guide-chevron{transform:rotate(180deg)}
.guide-chapter p{color:#d8c9bc;font:14px/1.7 var(--sans);margin:0;padding:0 18px 20px}
.guide-chapter p strong{color:#ffe1ac}
.guide-final{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;padding-top:23px;margin-top:22px;border-top:1px solid #7b6858}
.guide-final span{font:italic 16px Georgia,serif;color:#dac6a5}
.clock-still-running{font:600 11px/1.5 var(--sans);letter-spacing:.055em;color:#dbac8c;margin:-10px 0 17px}

/* The physical exit: two giant carved wooden leaves, arch and six live locks. */
.gate-modal{background:radial-gradient(ellipse at 50% 35%,#584134,#15141a 72%);border-color:#d3ac72}
.gate-modal .modal-title{color:#f4dfb5;text-shadow:0 3px 14px #000;letter-spacing:.075em}
.grand-gate{--gate-width:min(100%,570px);width:var(--gate-width);height:clamp(270px,36vh,365px);position:relative;margin:17px auto 17px;isolation:isolate;overflow:hidden;border:13px solid #333139;border-bottom:10px solid #81705c;border-radius:46% 46% 3% 3%/23% 23% 2% 2%;background:#060b0f;box-shadow:0 0 0 4px #a58b6a,0 0 0 10px #28222a,0 25px 45px #000d,inset 0 0 30px #000}
.grand-gate::before{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;background:linear-gradient(90deg,#0008 0 3%,transparent 11% 89%,#0009 98%),linear-gradient(180deg,#0d0c13ba 0%,transparent 32%,#0009 100%)}
.grand-gate-halo{position:absolute;inset:-25%;z-index:0;background:radial-gradient(ellipse at 50% 50%,#fdfcdd,#e6e3c7 29%,#9db2b6 56%,#161923 88%);opacity:.12}
.grand-gate-light{position:absolute;z-index:0;inset:0;background:radial-gradient(ellipse at 50% 67%,#fffef7,#eef6ed 25%,#c7e5f2 51%,#e9c89e 79%,#9c8191);opacity:.2}
.grand-gate-left,.grand-gate-right{position:absolute;z-index:2;top:0;bottom:0;width:50.3%;background:repeating-linear-gradient(90deg,transparent 0 25px,#08070b9c 26px 30px,transparent 31px 54px),radial-gradient(ellipse at 60% 35%,#584331,#241c20 74%);border:4px ridge #917454;box-shadow:inset 0 0 33px #040608d6,0 0 4px #d9b277;transition:transform 1s}
.grand-gate-left{left:0;transform-origin:left center;border-right:3px solid #d3af77}
.grand-gate-right{right:0;transform-origin:right center;border-left:3px solid #d3af77}
.grand-gate-left::after,.grand-gate-right::after{content:"";position:absolute;inset:11% 13%;border:3px double #a78c65;background:repeating-linear-gradient(180deg,transparent 0 35px,#aa82532c 36px 40px);box-shadow:inset 0 0 19px #0008}
.gate-leaf-carving{position:absolute;z-index:2;top:30%;left:32%;font:100px/1 var(--serif);color:#c4a16b61;text-shadow:0 0 10px #0a060c;transform:scaleX(.8)}
.grand-gate-arch{position:absolute;z-index:5;inset:-3px -3px auto;height:23%;border-top:15px ridge #756455;border-left:4px solid #baa17a;border-right:4px solid #baa17a;border-radius:49% 49% 0 0/100% 100% 0 0;box-shadow:inset 0 8px 8px #08080b88;pointer-events:none}
.grand-gate-locks{position:absolute;z-index:6;inset:24% 13% 10%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);row-gap:7px;justify-items:center;align-items:center;pointer-events:none}
.grand-gate-lock{width:58px;height:53px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:2px double #a58b69;border-radius:42% 42% 18% 18%;color:#cab18d;background:radial-gradient(ellipse at 40% 20%,#8b7054,#18151a 85%);box-shadow:0 3px 12px #0009,inset 0 0 0 2px #33291f}
.grand-gate-lock b{font:27px/1 Georgia,serif}.grand-gate-lock small{font:8px/1.2 var(--sans);letter-spacing:.15em}
.grand-gate-lock.gate-lock-awakened{color:var(--key-color);border-color:var(--key-color);text-shadow:0 0 14px var(--key-color);box-shadow:0 0 19px var(--key-color),inset 0 0 22px #ffe5a066;animation:gate-lock-glow 1.3s ease-out both}
.grand-gate-threshold{position:absolute;bottom:0;left:0;right:0;height:11px;z-index:7;background:linear-gradient(#b7a389,#3b3538)}
.gate-instruction{font:italic 14px/1.5 Georgia,serif;color:#d5c3ad;margin:9px auto 14px}
.gate-modal .clue-paper{max-width:730px;margin:14px auto;padding:12px 20px}.gate-modal .clue-paper p{font-size:15px;line-height:1.45}
.gate-modal .door-picks{margin:16px auto 6px;gap:10px}
.gate-modal .door-picks button{height:74px;min-width:95px;position:relative;border:2px solid var(--key-color);border-radius:6px;background:radial-gradient(circle at center,#624d33,#211921);font-size:28px;transition:transform .2s,filter .2s}
.gate-modal .door-picks button:hover:not(:disabled){transform:translateY(-4px);filter:brightness(1.25)}
.gate-modal .door-picks button:focus-visible{outline:3px solid #fff4cb;outline-offset:3px}
.gate-modal .door-picks button:disabled{opacity:.25;filter:grayscale(1)}
.cinema-gate-open{background:radial-gradient(ellipse at 50% 60%,#8d7f7d,#11121b 56%,#050509)}
.gate-cinema-atmosphere{position:absolute;inset:0;background:linear-gradient(#0a0d1b8c,#100d13a6),url('assets/mansion-entrance.webp') center/cover no-repeat;filter:brightness(.54)}
.cinema-gate-open .grand-gate{--gate-width:min(80vw,880px);height:min(77vh,730px);margin:4vh auto 0;box-shadow:0 0 0 8px #bba789,0 20px 120px #000b;animation:gate-cinema-approach 6.7s ease-in-out both}
.cinema-gate-open .grand-gate-left{animation:gate-leaf-open-left 6.7s ease-in-out both}
.cinema-gate-open .grand-gate-right{animation:gate-leaf-open-right 6.7s ease-in-out both}
.cinema-gate-open .grand-gate-light{opacity:1;animation:gate-light-bloom 6.7s ease-out both}
.cinema-gate-open .grand-gate-halo{opacity:.85;animation:gate-light-bloom 6.7s ease-out both}
.cinema-gate-open .grand-gate-locks{animation:gate-lock-disappear 6.7s ease-out both}
.gate-cinema-radiance{position:absolute;z-index:12;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 52%,#fffff9 0%,#fffef2d9 37%,#f8e9ca66 70%,transparent 95%);animation:gate-world-illuminate 6.7s ease-in both}
.cinema-gate-copy{z-index:16;bottom:6%!important;color:#fff9ee;text-shadow:0 3px 16px #271f23,0 0 12px #3b2a22}
.cinema-gate-copy h2{color:#fffdfa}
.epilogue-purelight{position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 35%,#fffdf4c7,transparent 68%);animation:epilogue-purelight-fade 10.5s both}
@keyframes gate-lock-glow{0%{filter:brightness(4);transform:scale(1.2)}100%{filter:brightness(1);transform:scale(1)}}
@keyframes gate-cinema-approach{0%{transform:scale(.75);filter:brightness(.4)}35%{transform:scale(1);filter:brightness(1)}100%{transform:scale(1.12);filter:brightness(1.4)}}
@keyframes gate-leaf-open-left{0%,36%{transform:perspective(650px) rotateY(0)}82%,100%{transform:perspective(650px) rotateY(-93deg)}}
@keyframes gate-leaf-open-right{0%,36%{transform:perspective(650px) rotateY(0)}82%,100%{transform:perspective(650px) rotateY(93deg)}}
@keyframes gate-light-bloom{0%,34%{opacity:.1;filter:brightness(.3)}65%{opacity:1;filter:brightness(1.5)}100%{opacity:1;filter:brightness(3)}}
@keyframes gate-lock-disappear{0%,38%{opacity:1}53%{opacity:0}100%{opacity:0}}
@keyframes gate-world-illuminate{0%,45%{opacity:0}85%{opacity:.38}100%{opacity:.98}}
@keyframes epilogue-purelight-fade{0%{opacity:.9}35%{opacity:.6}100%{opacity:.24}}

/* Redesigned soulless walker: one high-detail creature across duels and cinematics. */
.cinema-undead-figure{top:0;left:calc(50% - min(25vw,230px));width:min(50vw,460px);height:92%;filter:drop-shadow(0 0 22px #acc29f6f)}
.cinema-undead-figure::before{display:none}
.cinema-undead-figure .undead-character-portrait{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 23px #141c17)}
.walker-duel-modal{width:min(740px,100%);background:radial-gradient(ellipse at 50% 18%,#364239,#20161f 63%);border:1px solid #a89d7f}
.walker-encounter-art{height:clamp(240px,37vh,360px);position:relative;overflow:hidden;margin:13px auto 17px;border:1px solid #566b5c;background:radial-gradient(ellipse at 50% 42%,#788b7554,#101619 58%,#090b0e);box-shadow:inset 0 0 42px #000c,0 12px 35px #0009}
.walker-encounter-art::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#0506087e,transparent 23% 77%,#07080988),linear-gradient(0deg,#080b0ce8,transparent 38%);pointer-events:none}
.walker-encounter-art .undead-character-portrait{display:block;position:absolute;height:135%;width:100%;top:-16%;left:0;object-fit:contain;object-position:center 30%;filter:drop-shadow(0 0 18px #a2bcb95e);animation:walker-encounter-breathe 4s ease-in-out infinite alternate}
.walker-encounter-art span{position:absolute;z-index:3;bottom:13px;left:0;right:0;font:700 12px var(--serif);letter-spacing:.24em;color:#e4dcc7;text-shadow:0 2px 12px #000}
.walker-encounter-fog{position:absolute;z-index:2;inset:0;background:linear-gradient(0deg,#929d7655,transparent 39%);animation:undead-fog 3s ease-out}
.walker-encounter-art.walker-vanquished .undead-character-portrait{opacity:.4;filter:grayscale(1) blur(2px)}
.walker-encounter-art.walker-victorious .undead-character-portrait{transform:scale(1.1);filter:drop-shadow(0 0 24px #d3d1ab)}
.walker-duel-modal .modal-title{color:#f1e4cc}
@keyframes walker-encounter-breathe{0%{transform:translateY(2%) scale(.98)}100%{transform:translateY(-1%) scale(1.045)}}
@media(max-width:760px){.guide-chapters{grid-template-columns:1fr}.guide-header{flex-direction:column}.grand-gate{height:295px}.grand-gate-lock{width:45px;height:45px}.gate-modal .door-picks button{min-width:74px;height:68px}.cinema-gate-open .grand-gate{--gate-width:90vw;height:67vh}.cinema-undead-figure{left:24%;width:52%;height:84%}}
@media(prefers-reduced-motion:reduce){.grand-gate-opening .grand-gate-left{animation:none;transform:perspective(650px) rotateY(-93deg)}.grand-gate-opening .grand-gate-right{animation:none;transform:perspective(650px) rotateY(93deg)}.cinema-gate-open .grand-gate,.gate-cinema-radiance,.cinema-gate-open .grand-gate-light,.cinema-gate-open .grand-gate-locks,.epilogue-purelight,.walker-encounter-art .undead-character-portrait{animation:none}.cinema-gate-open .grand-gate-locks{opacity:0}.gate-cinema-radiance{opacity:.8}}