@charset "UTF-8";
:root{color-scheme:dark;--room-black:#10110e;--room-white:#eee8dc;--room-muted:#c8c0b1;--room-line:#655b49}
*{box-sizing:border-box}
body{margin:0;background:var(--room-black);color:var(--room-white);font:16px/1.65 system-ui,sans-serif}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:5px}
p{color:var(--room-muted)}
h1,h2{color:#eee8dc;font-family:Georgia,serif;font-weight:400;line-height:1.08}
h1{font-size:clamp(44px,9vw,92px);margin:.2em 0 .35em;letter-spacing:-.065em}
h2{font-size:clamp(30px,5vw,56px);letter-spacing:-.045em}
img{max-width:100%;height:auto;display:block}
.skip-link{position:absolute;left:1rem;top:-10rem;background:#fff;color:#000;padding:.5rem 1rem;z-index:2}
.skip-link:focus{top:1rem}
.room-top,.room-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px clamp(18px,5vw,72px);border-bottom:1px solid var(--room-line);font:12px/1.5 ui-monospace,monospace}
.room-top a:first-child{letter-spacing:.2em;text-decoration:none}
.room-top a:last-child,.room-foot{color:var(--room-muted)}
.room-top a:first-child{margin-inline-end:auto}
.room-sound:not([hidden]){display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--room-line);background:#151512;color:#eee8dc;font-size:19px;cursor:pointer}
.room-sound:focus-visible{outline:2px solid #fff;outline-offset:2px}
.room-foot{border-bottom:0;border-top:1px solid var(--room-line)}
.room-cover,.room-content{width:min(calc(100% - 40px),840px);margin:auto}
.room-cover{text-align:center;padding:36px 0 64px}
.room-cover>img{width:min(100%,400px);margin:0 auto;background:var(--room-black)}
.room-label{font:700 12px/1.5 ui-monospace,monospace;letter-spacing:.22em;text-transform:uppercase}
.room-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin-top:24px}
.room-button{display:inline-block;background:var(--room-white);color:#080808;padding:12px 20px;font-weight:700;text-decoration:none}
.room-content{padding:44px 0 66px}
.room-level{min-height:70vh}
.room-intro{font-size:clamp(17px,2vw,22px);max-width:66ch}
.room-poster{position:relative;isolation:isolate;max-width:520px;margin:auto;display:grid;place-items:center;overflow:hidden;border:1px solid var(--room-line);aspect-ratio:1}
.room-poster img{position:absolute;width:100%;opacity:.26;z-index:-1}
.room-poster h1{font-size:clamp(37px,8vw,74px)}
code{color:#fff}


.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.room-scene{min-height:calc(100svh - 116px);display:grid;place-content:center;justify-items:center;gap:20px;padding:32px 20px}
.door-scene{position:relative;isolation:isolate;width:min(100%,960px);min-height:auto;margin:24px auto;padding:0;display:block;overflow:hidden;user-select:none}
.door-scene img,.wall-scene img,.tape-scene img{width:100%;max-width:960px}
.door-scene>img{transition:filter .18s}
.door-panel{position:absolute;left:37.1875%;top:21%;width:25.625%;height:55.25%;background:linear-gradient(100deg,#353535,#131313);box-shadow:inset 0 0 0 1px #272727,3px 0 8px #000;transform:translateX(var(--door-shift,0%));touch-action:none;transition:transform .3s ease,filter .18s;cursor:default}
.door-panel::before{content:"";position:absolute;inset:4% 5.5%;border:1px solid #4c4c4c;pointer-events:none}
.door-panel.is-dragging{transition:filter .18s}
.door-panel.is-opening{transition:transform .65s ease-in-out}
.door-handle{position:absolute;left:83%;top:55%;width:35%;height:27%;min-width:44px;min-height:44px;padding:0;border:0;background:none;transform:translate(-50%,-50%);display:grid;place-items:center;cursor:default;touch-action:manipulation}
.door-handle span{width:57%;height:8%;min-height:4px;background:linear-gradient(#888,#343434);border-radius:9px;box-shadow:0 2px 5px #000;transform-origin:85% 50%}
.door-scuffs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.035;transition:opacity .18s}
.door-scuffs path{fill:none;stroke:#b0aaa0;stroke-width:1.2}
.door-scene.is-lit>img,.door-scene.is-lit .door-panel{filter:brightness(1.9)}
.door-scene.is-lit .door-scuffs{opacity:.8}
.door-bolt{position:absolute;left:37.2%;width:7%;height:11%;min-width:44px;min-height:44px;padding:0;border:0;background:none;transform:translate(-50%,-50%);display:grid;place-items:center;cursor:default;touch-action:manipulation}
.door-bolt-upper{top:32%}.door-bolt-lower{top:65%}
.door-bolt::before{content:"";position:absolute;width:76%;height:36%;background:linear-gradient(#62605b,#272623);border:1px solid #78756e;box-shadow:0 2px 3px #000}
.door-bolt span{position:relative;width:36%;aspect-ratio:1;background:linear-gradient(135deg,#9a968c,#373530 60%,#777269);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);transition:transform .45s,opacity .45s}
.door-bolt span::after{content:"";position:absolute;inset:40% 21%;background:#242321;border-top:1px solid #b6b0a1;transform:rotate(-25deg)}
.door-bolt::after{content:"";position:absolute;width:12%;aspect-ratio:1;border-radius:50%;background:#080808;z-index:-1}
.door-bolt.is-removed span{transform:translate(-80%,200%) rotate(-240deg);opacity:0}
.door-bolt.is-removed::before{opacity:.35}.door-bolt.is-removed{pointer-events:none}
.door-panel:focus-visible,.door-handle:focus-visible,.door-bolt:focus-visible{outline:2px solid #c8c2b5;outline-offset:3px}
.door-status{position:absolute;bottom:0;left:5%;width:90%;margin:0;text-align:center;font-size:13px}
.door-panel.is-stuck{animation:door-rattle .25s}.door-handle.is-pulled span{animation:handle-rattle .35s}
@keyframes door-rattle{25%,75%{transform:translateX(2px)}50%{transform:translateX(-2px)}}
@keyframes handle-rattle{35%{transform:rotate(16deg)}70%{transform:rotate(-5deg)}}
@media(prefers-reduced-motion:reduce){.door-scene *{animation:none!important;transition:none!important}}
.offline-scene h1{font:700 clamp(44px,10vw,112px)/1 ui-monospace,monospace;letter-spacing:.13em}
.surveillance{width:calc(100% - 40px)}
.feed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.feed-grid figure{position:relative;margin:0;background:#0d0d0d;border:1px solid #383838;overflow:hidden}
.feed-grid figure>img:first-child{filter:brightness(calc(.85 + var(--exposure,0)*1.8))}
.feed-marks{position:absolute;top:0;left:0;width:100%;height:auto;fill:none;stroke:#a29c8d;stroke-width:3;opacity:.72;pointer-events:none}
.feed-marks text{fill:#a29c8d;stroke:none;font:12px ui-monospace,monospace;letter-spacing:.12em}
.feed-arrow{opacity:0;stroke:#ddd5bd;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #1a1610)}
.feed-key:not([hidden]){display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.feed-key span{display:flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid #48443b;color:#d4cbbc;font:14px ui-monospace,monospace}
.feed-key svg{width:28px;height:28px;fill:none;stroke:#d4cbbc;stroke-width:3}
.feed-grid figcaption{display:flex;justify-content:space-between;gap:4px;padding:6px 10px;font:11px/1.4 ui-monospace,monospace;letter-spacing:.05em}
.scene-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0;color:var(--room-muted);font:13px/1.5 ui-monospace,monospace}
.scene-control input{accent-color:#eee}
.scene-control input[type=range]{min-width:0;flex:1}
.scene-control input:focus-visible,.scene-button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.scene-hint{margin-top:16px;font-size:14px;color:#b8b8b8}
.scene-button{display:inline-block;min-height:44px;padding:10px 18px;border:1px solid #a99a7a;background:#151512;color:#f0e6d1;font:14px/1.6 ui-monospace,monospace;cursor:pointer;text-decoration:none}
.scene-button:hover,.scene-button[aria-pressed=true]{background:#e1d4b9;color:#171612}
body:has(.intercom-scene){
  background:#484139;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22grain%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.63%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Cpath%20d%3D%22M0%200h180v180H0z%22%20filter%3D%22url(%23grain)%22%20opacity%3D%22.25%22%2F%3E%3C%2Fsvg%3E"),
    radial-gradient(ellipse at 50% 35%,#d8cbb1 0%,#9a8d79 48%,#302923 100%);
  background-blend-mode:multiply,normal;
}
body:has(.intercom-scene) :is(.room-top,.room-foot){background:#171310ed}
.intercom-scene{grid-template-columns:minmax(0,1fr);gap:14px;padding-block:clamp(30px,7vh,72px)}
.intercom-scene .intercom-graffiti{
  width:min(100%,1100px);
  margin:0 0 clamp(16px,4vw,38px);
  color:#411914;
  font:700 clamp(29px,7.8vw,108px)/1.03 "Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  letter-spacing:-.06em;
  text-align:center;
  text-shadow:1px 1px #24100f88;
  transform:rotate(-3deg);
}
.intercom-graffiti span{display:block}
.intercom-graffiti span:nth-child(2){transform:translateX(3%) rotate(2deg)}
.intercom-graffiti span:nth-child(3){transform:rotate(-2deg)}
.intercom-scene img{width:min(180px,48vw);height:auto}
.intercom-scene audio{max-width:100%}
.intercom-scene p{margin:0}
.wall-scene,.tape-scene{padding-top:0}
.blood-register{max-width:720px;margin:clamp(12px,3vw,28px) auto 0;padding:18px 22px;color:#d45d58;font:italic 600 clamp(16px,2.1vw,21px)/1.5 "Segoe Print","Bradley Hand",cursive;text-align:left;text-shadow:1px 1px 1px #3c0808,-1px 0 1px #6c1111;transform:rotate(-1deg)}
.blood-register p{margin:0 0 .7em}.blood-register p:first-child{color:#e17770;letter-spacing:.04em}.blood-register p:last-child{margin-bottom:0}
.tape-scene{position:relative}
.reel-download{position:absolute;inset-inline-end:12px;inset-block-end:12px;display:grid;place-items:center;width:44px;height:44px;color:var(--room-muted);text-decoration:none}
.type-scene{display:grid;align-content:center;min-height:68vh}
.type-specimen{display:grid;position:relative;min-height:110px;place-items:center;border-bottom:1px solid #444}
.type-specimen h1{margin:0;color:#eee;font:900 clamp(27px,7vw,73px)/1 Georgia,serif;letter-spacing:.15em;transform:skewX(-9deg);text-shadow:3px 0 #777,-2px 1px #555}
.type-paragraph{max-width:58ch;margin:30px auto 0;color:#c5c5c5;font:clamp(16px,2vw,19px)/1.8 Georgia,serif}
.plan-stage{position:relative;overflow:hidden;border:1px solid #555;background:#161616;isolation:isolate}
.plan-stage img{width:100%;height:auto}
.plan-stage img+img{position:absolute;inset:0;opacity:.8;cursor:grab;touch-action:none;transform:translate(24%,-18%) rotate(90deg)}
.plan-stage img+img:active{cursor:grabbing}
.plan-digits{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:#fff;font:700 8px ui-monospace,monospace;text-anchor:middle;paint-order:stroke;stroke:#111;stroke-width:1px}
.plan-digits circle{fill:#141414;stroke:none}
.aperture-clue{display:block;width:min(100%,480px);margin:0 auto 24px;fill:none;stroke:#c9b28a;stroke-width:1.2}
.plan-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plan-controls label{display:grid;gap:8px;margin:16px 0 0}
.directory-scene{max-width:560px}
.directory-scene>.room-label{text-align:center}
.directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.directory-grid>*{display:grid;place-items:center;align-content:center;min-height:90px;margin:0;border:1px solid #303030;background:#090909}
.directory-grid figure{background:#161616}
.directory-grid img{width:min(100%,86px)}
.directory-grid figcaption{font:16px/1.6 ui-monospace,monospace;padding-bottom:8px}
@media(max-width:480px){.feed-grid{gap:6px}.feed-grid figcaption{font-size:9px;padding:5px}.plan-controls{grid-template-columns:1fr;gap:0}}



.register-scene,.finish-scene{max-width:600px;min-height:65vh}
.register-scene h2,.finish-scene h2{font-size:clamp(32px,6vw,56px);margin:12px 0}
#room-register{display:grid;gap:15px;padding:22px;border:1px solid #555;background:#101010;margin:24px 0}
#room-register label{display:grid;gap:6px}
#room-register input{min-width:0;width:100%;padding:10px 12px;color:#eee;background:#080808;border:1px solid #777;font:inherit}
#room-register :focus-visible{outline:2px solid #fff;outline-offset:3px}
#room-register button{justify-self:start;border:0;font:inherit;font-weight:700;cursor:pointer}
#room-register button:disabled{opacity:.55;cursor:default}
.corridor-form{display:grid;gap:12px;padding:clamp(16px,4vw,26px);border:1px solid #444;background:#101010;margin:20px 0}
.corridor-form h3,.corridor-form [role=status]{margin:0}
.corridor-form [role=status]:empty{display:none}
.corridor-form label{display:grid;gap:6px}
.corridor-form input{width:100%;min-width:0;padding:10px 12px;color:#eee;background:#080808;border:1px solid #777;font:inherit}
.corridor-form button{justify-self:start;cursor:pointer}
.corridor-form button:disabled{opacity:.55;cursor:default}
#corridor-code{overflow-wrap:anywhere;font:700 1rem/1.6 ui-monospace,monospace;color:#f2e2b5}
.portrait-grid,.property-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
.portrait-grid figure,.property-grid figure{margin:0;background:#121212;border:1px solid #444}
.portrait-grid a{display:block}
.portrait-grid img,.property-grid img{width:100%}
.portrait-grid figcaption,.property-grid figcaption{padding:10px;text-align:center;font:13px/1.5 ui-monospace,monospace}
.vacant{display:inline-block;transform:rotate(-7deg);border:1px solid #777;padding:3px 8px}
.night-scene{max-width:720px}
.night-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,4vw,40px)}
.night-pair .room-label{text-align:center}
.night-window,.night-reflection{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;padding:5px;background:#262626;border:1px solid #555}
.night-pane,.night-reflection span{display:grid;place-items:center;aspect-ratio:1;min-width:0}
.night-pane{background:radial-gradient(circle,#c9c9c9,#343434)}
.night-pane.dark-pane{background:#070707;box-shadow:inset 0 0 0 1px #505050}
.night-reflection span{background:linear-gradient(140deg,#252525,#101010);color:#e8e8e8;font:700 clamp(13px,3vw,28px)/1 ui-monospace,monospace}
.night-inscription{color:#d0d0d0;font-family:ui-monospace,monospace}
.scene-controls{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.inspection-report{max-width:640px;background:#d2d2d2;color:#111;padding:clamp(18px,5vw,40px);margin:0 auto 20px}
.inspection-report p{color:inherit}
.property-grid img{max-width:122px;margin:0 auto}
.property-grid b{display:block;color:#fff}
.property-tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.property-tags li{background:#d1d1d1;color:#181818;padding:8px 12px;font:13px/1.4 ui-monospace,monospace}
.duct-scene{max-width:570px}
.duct-grille{height:200px;border:8px solid #303030;background:repeating-linear-gradient(0deg,#090909 0 12px,#5a5a5a 12px 15px,#252525 15px 24px);margin-bottom:20px}
.duct-scene audio{max-width:100%}
.typing-scene{max-width:640px}
.typing-steps{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;gap:3px;padding:0}
.typing-steps li{display:grid;align-content:start;gap:2px;min-height:calc(56px + var(--step,0)*10px);padding:5px 3px;text-align:center;background:#181818;border-top:3px solid #555;font-size:clamp(11px,2.4vw,16px)}
.typing-steps small{font-size:clamp(9px,1.8vw,12px)}
.typing-steps li:nth-child(2){--step:1}
.typing-steps li:nth-child(3){--step:2}
.typing-steps li:nth-child(4){--step:3}
.typing-steps li:nth-child(5){--step:4}
.typing-steps li:nth-child(6){--step:5}
.typing-steps li[aria-current]{border-color:#eee}
.typing-steps li.is-complete{background:#163623;border-color:#67d993;color:#d4ffe3}
.typing-word{min-height:2.4em;margin:0;color:#fff;font:700 clamp(22px,6vw,36px)/1.5 ui-monospace,monospace}
.typing-controls{display:flex;flex-wrap:wrap;gap:8px}
#typing-entry{flex:1;min-width:0;padding:8px;color:#fff;background:#121212;border:1px solid #aaa;font:inherit}
#typing-status,#typing-clock{min-height:1.65em;margin:6px 0}
.typing-confetti{position:fixed;inset:0;z-index:10;overflow:hidden;pointer-events:none}
.typing-confetti span{position:absolute;width:8px;height:12px;animation:typing-confetti-burst both}
@keyframes typing-confetti-burst{
  0%{opacity:0;transform:translate(0,0) rotate(0);animation-timing-function:cubic-bezier(.1,.75,.2,1)}
  8%{opacity:1}
  42%{transform:translate(var(--launch-x),var(--launch-y)) rotate(360deg);animation-timing-function:ease-in}
  78%{opacity:1}
  100%{opacity:0;transform:translate(var(--fall-x),30vh) rotate(var(--spin))}
}
@media(prefers-reduced-motion:reduce){.typing-confetti{display:none}}
.typing-pool dt{font-weight:700}
.typing-pool dd{margin:0 0 8px;color:var(--room-muted)}
.paper-scene{max-width:640px}
.cipher-paper{display:grid;grid-template-columns:repeat(5,1fr);aspect-ratio:2.5;background:#f2eee5;box-shadow:0 8px 25px #0009;margin:18px 0;padding:6px}
.cipher-paper button{position:relative;isolation:isolate;--lens-size:clamp(46px,9vw,78px);border:0;min-height:46px;padding:0;background:none;color:#292219;font:700 clamp(22px,6vw,42px)/1 ui-monospace,monospace;cursor:crosshair}
.cipher-paper button.is-lit{z-index:1;cursor:none}
.cipher-paper button.is-lit::before,.cipher-paper button.is-lit>span{position:absolute;pointer-events:none}
.cipher-paper button.is-lit::before{content:"";left:calc(var(--lens-x,50%) + var(--lens-size)*.29);top:calc(var(--lens-y,50%) + var(--lens-size)*.26);width:calc(var(--lens-size)*.43);height:9px;border:1px solid #242522;border-radius:3px;background:linear-gradient(#686964,#252623);box-shadow:0 3px 4px #201b1659;transform:rotate(45deg);transform-origin:0 50%}
.cipher-paper button.is-lit>span{left:var(--lens-x,50%);top:var(--lens-y,50%);transform:translate(-50%,-50%);display:grid;place-items:center;width:var(--lens-size);aspect-ratio:1;border:3px solid #383934;border-radius:50%;background:radial-gradient(circle at 31% 23%,#fff 0 9%,transparent 35%),radial-gradient(circle at 44% 40%,#fffdf1,#eee1b1 72%,#c6b784);box-shadow:0 0 0 1px #f6efda,inset 0 0 5px #4a3b2873,0 5px 10px #2b231b66;font-size:1.17em}
.cipher-paper button.is-lit.is-burned>span{background:radial-gradient(circle at 44% 40%,#ffedbd,#dc9f61 70%,#a46441);color:#291811}
.cipher-paper button:focus-visible{outline:2px solid #7c5536;outline-offset:-3px}
#paper-word{flex:1;min-width:0;padding:8px;color:#fff;background:#121212;border:1px solid #aaa;font:inherit}
#paper-status{min-height:1.65em}
.control-scene{max-width:720px}
.signal-frame{margin:18px 0;border:1px solid #454545;background:#111;padding:8px}
.signal-image{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.signal-image:focus-visible{outline:2px solid #fff;outline-offset:2px}
.signal-frame img{width:100%;height:auto}
.signal-frame figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 0 0;font:12px/1.4 ui-monospace,monospace;color:var(--room-muted)}
.signal-clue{color:#111;font-size:50%}
body.signal-lit{background:#fff;color:#111}
.signal-lit .signal-frame{background:#fff}
.signal-lit p,.signal-lit .room-label,.signal-lit .signal-frame figcaption{color:#333}
#signal-entry{flex:1;min-width:0;padding:8px;color:#fff;background:#121212;border:1px solid #aaa;font:inherit}
#signal-status{min-height:1.65em}
.wrong-route-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,5vw,50px);padding:40px 0 0}
.wrong-route-doors span{aspect-ratio:.58;background:linear-gradient(125deg,#141414,#080808);border:2px solid #454545;border-bottom:0}
.scratched-address{text-align:center;font:clamp(12px,4vw,22px)/1.5 ui-monospace,monospace;letter-spacing:.06em;transform:rotate(-2deg)}
@media(max-width:540px){.property-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.night-pane{transition:none}}


.night-answer{display:flex;align-items:end;flex-wrap:wrap;gap:10px;margin-top:24px}
.night-answer label{display:grid;gap:5px;min-width:0}
.night-answer input{width:min(100%,240px);padding:10px 12px;background:#101010;color:#eee;border:1px solid #777;font:inherit}
.night-answer button:disabled{opacity:.55;cursor:default}
.night-answer [role=status]{flex-basis:100%;margin:0}
#night-answer-status{white-space:pre-line}

.inspection-printer{border-top:1px solid #aaa;padding-top:14px}

.inspection-printer img{width:100%;border:1px solid #888}
#inspection-timer{font-variant-numeric:tabular-nums;margin:10px 0}

.maintenance-door{display:grid;align-content:center;justify-items:center;gap:10px;padding:3px;text-align:center;font:clamp(8px,2vw,13px)/1.2 ui-monospace,monospace}
.maintenance-door i{font-style:normal;border:1px solid #777;padding:3px}
.property-tags small{display:block;font-weight:bold}

.jigsaw-scene{max-width:920px}
.jigsaw-board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;border:1px solid #555;background:#333}
.jigsaw-tile{display:block;position:relative;aspect-ratio:1;width:100%;padding:0;border:0;background:#161616;cursor:pointer;overflow:hidden;touch-action:manipulation}
.jigsaw-tile img{width:100%;height:100%;pointer-events:none}
.jigsaw-tile[aria-pressed=true]::after{content:"";position:absolute;inset:2px;border:3px solid #fff;pointer-events:none}
.jigsaw-tile:focus-visible{z-index:1;outline:2px solid #fff;outline-offset:-4px}
.jigsaw-scene button:disabled{opacity:.55;cursor:default}

.jigsaw-clock{text-align:center;margin:0 0 18px}
.jigsaw-clock .room-label{margin:0 0 3px}
#jigsaw-timer{margin:0;color:#f2f2f2;font:700 clamp(52px,11vw,88px)/1 ui-monospace,monospace;font-variant-numeric:tabular-nums}

.jigsaw-tile.jigsaw-correct::after{content:"";position:absolute;inset:0;border:3px solid #50ee86;background:#25bd5152;pointer-events:none;animation:jigsaw-check .85s ease-out}
@keyframes jigsaw-check{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.jigsaw-tile.jigsaw-correct::after{animation:none}}

.letter-scene {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  justify-items: end;
  min-height: calc(100svh - 85px);
  padding: clamp(36px, 6vw, 92px) clamp(24px, 8vw, 130px);
  overflow: hidden;
  background: #10110e;
}
.letter-backdrop, .letter-scene::before { position: absolute; inset: 0; width: 100%; height: 100%; }
.letter-backdrop { z-index: -2; object-fit: cover; object-position: 32% 55%; }
.letter-scene::before {
  content: "";
  z-index: -1;
  background: linear-gradient(90deg, #07070610 16%, #09090728 42%, #0c0d0beb 79%), linear-gradient(0deg, #0b0b0ac9, transparent 38%);
}
.letter-story { width: min(100%, 520px); }
.letter-story h1 {
  color: #eee8dc;
  font: 400 clamp(49px, 7.5vw, 98px)/.98 Georgia, serif;
  letter-spacing: -.065em;
  margin: 0 0 14px;
}
.letter-lead, .letter-close {
  color: #ded7c8;
  font: 400 clamp(15px, 1.6vw, 18px)/1.6 Georgia, serif;
  margin: 0;
  max-width: 46ch;
}
.letter-paper {
  position: relative;
  isolation: isolate;
  margin: 24px 0 20px;
  padding: clamp(23px, 4vw, 44px) clamp(23px, 4.5vw, 46px);
  background: #d9ccb0;
  background-image: linear-gradient(104deg, #f7ecd339, transparent 32%, #7a5c3020 89%),
    linear-gradient(180deg, transparent 54%, #6b54391c 54.3%, #fff6dc53 54.7%, transparent 55.3%);
  box-shadow: inset 0 0 20px #69503644, 0 16px 40px #0009;
  border: 1px solid #b9a988;
  border-radius: 2px 6px 4px 2px;
  transform: rotate(-1deg);
}
.letter-paper p { color: #29251e; font: 500 clamp(16px, 1.8vw, 20px)/1.45 ui-monospace, monospace; margin: 0 0 13px; }
.letter-paper p:last-child { margin-bottom: 0; }
.letter-paper strong { color: #6a2a23; }
.letter-enter {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  min-height: 48px;
  padding: 10px 17px;
  margin-top: 23px;
  border: 1px solid #a99a7a;
  background: #151512e8;
  color: #f0e6d1;
  font: 600 13px/1.4 ui-monospace, monospace;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.letter-enter:hover { background: #e1d4b9; color: #171612; }
.letter-enter span { font-size: 20px; line-height: 1; }
@media (max-width: 720px) {
  .letter-scene { justify-items: center; align-items: end; padding-top: clamp(132px, 29vw, 240px); }
  .letter-backdrop { object-position: 25% center; }
  .letter-scene::before { background: linear-gradient(180deg, #0909080f, #0c0d0bd6 26%, #0c0d0bf5 80%); }
  .letter-story h1 { font-size: clamp(46px, 12vw, 76px); }
}
@media (prefers-reduced-motion: reduce) { .letter-enter { transition: none; } }

.room-set {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: start;
  min-height: calc(100svh - 85px);
  padding: 20px 0 clamp(36px, 5vw, 76px);
  background: #12110e;
  --set-wash: #0c0c0a99;
  --set-light: #c4ad83;
}
.room-set-backdrop, .room-set::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.room-set-backdrop { z-index: -2; object-fit: cover; object-position: var(--set-focus, center); }
.room-set::before {
  content: "";
  z-index: -1;
  background: linear-gradient(180deg, #0b0b0ad6, transparent 37%, #080807da),
    radial-gradient(ellipse at 50% 53%, var(--set-wash) 18%, #0b0b0a15 78%);
}
.room-set--entrance { --set-focus: 33% 53%; }
.room-set--service { --set-focus: 48% 44%; --set-light: #caad81; }
.room-set--archive { --set-focus: 43% 55%; --set-wash: #110e0bd1; }
.room-set--stairs { --set-focus: 75% 56%; --set-light: #dfbf95; }
.room-set--control { --set-focus: 52% 45%; --set-wash: #0a1415a8; --set-light: #a2c7bf; }
.room-set-content { width: min(calc(100% - 36px), 1120px); margin-inline: auto; min-width: 0; }
.room-set-title { margin: 0 auto clamp(32px, 5vw, 60px); max-width: 840px; text-align: center; font-size: clamp(30px, 4vw, 48px); text-shadow: 0 2px 12px #000; }
.room-set-story {
  width: min(100%, 58ch);
  margin: 0 auto clamp(18px, 3vw, 32px);
  color: #e0d8c8;
  font: 400 clamp(16px, 1.7vw, 21px)/1.55 Georgia, serif;
  text-align: center;
  text-shadow: 0 2px 12px #000;
}
.room-set-content > .room-content,
.room-set-content > .room-scene { margin-block: 0; padding-block: 0; min-height: 0; }
.room-set-content > .room-content { width: min(100%, 840px); }
.room-set-content > .surveillance { width: 100%; }
.room-set-content > .jigsaw-scene { width: min(100%, 920px); }
.room-set-content > .door-scene { width: min(100%, 820px); box-shadow: 0 24px 60px #0009; }
.room-set-content > .tape-scene { padding-bottom: 36px; }
.room-set-content > .type-scene { min-height: min(44vh, 400px); }
.room-set-content > .offline-scene { min-height: min(49vh, 440px); }
.room-set .offline-scene h1 {
  color: #b2cfc2;
  text-shadow: 0 0 26px #6ac2a585;
  padding: 30px clamp(20px, 6vw, 76px);
  border: 1px solid #54716977;
  background: #071010d9;
  box-shadow: inset 0 0 35px #000d, 0 22px 62px #000b;
}
.room-set .intercom-graffiti { color: #e0b39a; text-shadow: 0 4px 16px #000, 2px 1px #421d15; }
.room-set .room-label, .room-set .scene-control { color: var(--set-light); }
.room-set :is(.register-scene, .paper-scene, .typing-scene, .control-scene, .duct-scene) {
  padding: clamp(18px, 3.2vw, 36px);
  background: #100f0de6;
  border: 1px solid #b9a47b4d;
  box-shadow: 0 24px 60px #0009;
}
.room-set :is(.register-scene, .paper-scene, .control-scene, .inspection-report, .lost-scene) h2 {
  color: #eee8dc;
  font: 400 clamp(30px, 5vw, 56px)/1.03 Georgia, serif;
  letter-spacing: -.045em;
  margin: 10px 0 16px;
}
.room-set .inspection-report {
  background: #e1d6bd;
  box-shadow: inset 0 0 24px #74674a38, 0 22px 60px #000a;
  border: 1px solid #b9a982;
  margin-bottom: 0;
}
.room-set .inspection-report :is(h2, .room-label) { color: #2e281e; }
.room-set .inspection-report .room-label { letter-spacing: .19em; }
.room-set .portrait-grid { gap: clamp(10px, 2vw, 24px); }
.room-set .portrait-grid figure {
  background: #151311;
  border: 1px solid #73644f;
  box-shadow: inset 0 0 0 3px #262016, 0 12px 26px #0008;
  padding: 5px;
}
.room-set .portrait-grid figcaption { color: #ddd1ba; }
.room-set .property-grid figure { background: #201a13ed; border-color: #88755788; }
.room-set .property-tags li { background: #dfd0ac; border: 1px solid #9d8a67; }
.room-set .night-window, .room-set .night-reflection { border-color: #a4977880; box-shadow: 0 14px 32px #0009; }
.room-set .plan-stage, .room-set .jigsaw-board { box-shadow: 0 16px 46px #000a; }
.room-set .wrong-route-doors span { border-color: #7d6a4b; box-shadow: inset 0 0 16px #000b; }
.room-set .signal-frame { border-color: #70988e88; }
.signal-lit .room-set { background: #fff; }
.signal-lit .room-set-backdrop, .signal-lit .room-set::before { visibility: hidden; }
.signal-lit .room-set .control-scene { background: #fff; border-color: #ccc; box-shadow: none; }
.signal-lit .room-set :is(.room-set-title, .room-set-story, .control-scene h2, .room-label) { color: #111; text-shadow: none; }
@media (max-width: 640px) {
  .room-set { padding-block: 18px 40px; }
  .room-set-content { width: calc(100% - 28px); }
  .room-set-story { margin-bottom: 18px; }
  .room-set .portrait-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .room-set .portrait-grid figcaption { padding: 8px 1px; font-size: 10px; }
  .room-set .intercom-graffiti { font-size: clamp(24px, 7.8vw, 48px); }
}


.dead-end-scene { position: relative; isolation: isolate; }
.dead-end-scene::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(#0009, #000b), url("art/endless-corridor.png") center / cover no-repeat; }
.dead-end-scene > * { text-shadow: 0 2px 8px #000; }

.corridor-mail { margin-top: 28px; border: 1px solid #796c55; background: #151512; box-shadow: 0 16px 45px #0009; font: 14px/1.5 ui-monospace, monospace; }
.corridor-mail-title { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; background: #302b23; color: #e8dbc2; letter-spacing: .12em; font-size: 12px; }
.corridor-mail dl { margin: 0; }
.corridor-mail dl > div { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 16px; border-bottom: 1px solid #4b4337; }
.corridor-mail dt { width: 7ch; color: #aa9b80; }
.corridor-mail dd { margin: 0; color: #eee8dc; overflow-wrap: anywhere; }
.corridor-mail p { margin: 0; padding: 24px 16px; }
.corridor-mail > a { margin: 0 16px 16px; }

.hint-chest{position:fixed;right:clamp(12px,2vw,26px);bottom:clamp(12px,2vw,26px);z-index:30}.hint-open{display:grid;place-items:center;width:62px;height:62px;padding:5px;border:1px solid #8c7553;border-radius:10px;background:#0c0b09e8;box-shadow:0 3px 18px #000;cursor:pointer}.hint-open svg{width:48px;height:48px;filter:drop-shadow(0 0 5px #9c421f)}.hint-open:hover{border-color:#e5cc9b}.hint-open:focus-visible,.hint-dialog button:focus-visible{outline:2px solid #fff;outline-offset:3px}.hint-dialog{width:min(90vw,420px);padding:28px;border:1px solid #9d8158;background:#18130f;color:#eee8dc;box-shadow:0 10px 40px #000}.hint-dialog::backdrop{background:#000b}.hint-dialog h2{margin:0 0 .5em;font-size:2rem}.hint-dialog p{color:#eee8dc}.hint-dialog button{margin:6px 8px 0 0;padding:.7rem 1rem;border:1px solid #a68d66;background:#2b211a;color:#eee8dc;cursor:pointer}