:root{--amber:#e8a94a;--bone:#e9e0cc;--ink:#07060a;--blood:#7a1d1d}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}body{background:var(--ink);color:var(--bone);font-family:Georgia,"Times New Roman",serif;overflow-x:hidden}
body.intro-on{overflow:hidden}
a{color:inherit}
#intro{position:fixed;inset:0;z-index:100;background:#040306;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity 1.2s}
#intro.done{opacity:0;pointer-events:none}
.door-scene{position:relative;width:min(46vh,70vw);height:min(86vh,130vw);transform-origin:50% 56%;animation:push 6.2s cubic-bezier(.6,0,.85,.3) forwards}
.door{position:absolute;inset:0;background:linear-gradient(90deg,#1a120c,#2a1d13 30%,#22170f 70%,#120c08);border:6px solid #0c0806;box-shadow:inset 0 0 80px #000;animation:flick 4s infinite}
.panel{position:absolute;left:12%;right:12%;border:3px solid #0e0a07;box-shadow:inset 0 0 30px #000}.p1{top:8%;height:30%}.p2{top:62%;height:30%}
.plate{position:absolute;top:43%;left:50%;transform:translateX(-50%);width:20%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c9a25e,#5a4220 70%);display:flex;align-items:center;justify-content:center;font-size:min(5vh,7vw);color:#1a1008;font-weight:bold;box-shadow:0 0 20px #e8a94a33}
.keyhole-wrap{position:absolute;left:50%;top:53%;transform:translateX(-50%);width:6%}
.keyhole{width:100%;fill:#000;filter:drop-shadow(0 0 6px #e8a94a)}
.keyhole path{fill:#f2c271;animation:hole 6.2s forwards}
.knob{position:absolute;right:9%;top:52%;width:7%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#d6b06a,#3a2810)}
.underglow{position:absolute;left:0;right:0;bottom:-4px;height:6px;background:var(--amber);filter:blur(6px);animation:flick 2.3s infinite}
.porch{position:absolute;left:50%;top:-14%;width:60%;height:30%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0,#f0b45588,transparent 70%);animation:flick 3.1s infinite;pointer-events:none}
.intro-line{position:absolute;bottom:8vh;letter-spacing:.3em;text-transform:uppercase;font-size:.8rem;opacity:0;animation:fadeio 4s .6s forwards}
#skip{position:absolute;right:24px;bottom:24px;background:none;border:1px solid #e9e0cc44;color:var(--bone);padding:.5em 1em;font:inherit;cursor:pointer;letter-spacing:.2em}
@keyframes push{0%{transform:scale(1)}35%{transform:scale(1.25)}100%{transform:scale(38)}}
@keyframes hole{0%,50%{fill:#1a0f06}100%{fill:#ffd690}}
@keyframes fadeio{0%{opacity:0}40%,70%{opacity:.8}100%{opacity:0}}
@keyframes flick{0%,100%{opacity:1}7%{opacity:.75}9%{opacity:1}52%{opacity:.9}54%{opacity:.55}56%{opacity:1}}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-5%,3%)}66%{transform:translate(4%,-4%)}}
.vignette{position:fixed;inset:0;z-index:89;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 45%,#000 100%)}
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;justify-content:space-between;align-items:center;padding:18px 4vw;background:linear-gradient(#000c,transparent)}
.logo{text-decoration:none;letter-spacing:.35em;font-size:.8rem}.logo b{color:var(--amber)}
.nav nav a{margin-left:1.6em;text-decoration:none;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7}.nav nav a:hover{opacity:1;color:var(--amber)}
.room{position:relative;min-height:100vh;padding:16vh 6vw 10vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.room:after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:2px;background:var(--amber);filter:blur(5px);opacity:.5;animation:flick 3.7s infinite}
.fog{position:absolute;inset:-20% -30%;pointer-events:none;opacity:.35;background:radial-gradient(ellipse at 20% 60%,#9aa3b022,transparent 50%),radial-gradient(ellipse at 80% 40%,#9aa3b01c,transparent 55%);filter:blur(20px);animation:drift 40s linear infinite alternate}
.f2{animation-duration:55s;animation-direction:alternate-reverse}
@keyframes drift{to{translate:12% 0}}
.hero{background:radial-gradient(ellipse at 30% 20%,#2a1a0c 0,transparent 55%),#07060a}
.hero-inner{display:flex;gap:6vw;align-items:center;max-width:1200px;flex-wrap:wrap;justify-content:center}
.cover-frame{width:min(440px,80vw);box-shadow:0 0 0 1px #e8a94a33,0 30px 90px #000,0 0 120px #e8a94a22;animation:flick 6s infinite}
.cover-frame img{width:100%;display:block}
.hero-text{max-width:460px;text-align:left}
.kicker,.room-label{letter-spacing:.35em;text-transform:uppercase;font-size:.72rem;color:var(--amber);opacity:.8;margin-bottom:1em}
h1{font-size:clamp(3rem,8vw,6rem);font-weight:normal;line-height:.95;letter-spacing:.02em;text-shadow:0 0 40px #e8a94a44}
h2{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:normal;margin-bottom:.8em}
.sub{margin:.6em 0 1.4em;letter-spacing:.25em;text-transform:uppercase;font-size:.85rem;opacity:.8}
.blurb,.prose{line-height:1.7;opacity:.85;max-width:560px}.small{font-size:.95rem;margin-bottom:1.5em}
.cta{display:flex;gap:1em;flex-wrap:wrap;margin-top:2em}.center{justify-content:center}
.btn{padding:.9em 1.5em;border:1px solid var(--amber);color:var(--amber);text-decoration:none;letter-spacing:.18em;text-transform:uppercase;font-size:.75rem;transition:.3s}
.btn:hover{background:var(--amber);color:#000;box-shadow:0 0 30px #e8a94a66}.btn.ghost{border-color:#e9e0cc55;color:var(--bone)}
.tracks{background:linear-gradient(#07060a,#0d0a0d 50%,#07060a)}
.doorlight{position:absolute;left:50%;top:0;bottom:0;width:30vw;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#e8a94a0a,transparent)}
.tracklist{list-style:none;font-size:clamp(1.2rem,2.6vw,1.8rem);text-align:left}
.tracklist li{padding:.55em 0;border-bottom:1px solid #e9e0cc18;opacity:0;transform:translateY(20px);transition:1s}
.tracklist li.in{opacity:1;transform:none}.tracklist span{color:var(--amber);font-size:.6em;margin-right:1.4em;letter-spacing:.2em}
.push{transition:transform .1s linear}
.play{background:#050407}
.game-wrap{position:relative;width:min(960px,94vw);aspect-ratio:16/9;border:1px solid #e8a94a44;box-shadow:0 0 80px #e8a94a18}
#game{width:100%;height:100%;image-rendering:pixelated;display:block;background:#000;touch-action:none}
.touch{display:none;position:absolute;inset:auto 0 8px;justify-content:space-between;padding:0 8px;pointer-events:none}
.touch button{pointer-events:auto;background:#0008;border:1px solid #e8a94a66;color:var(--amber);font:inherit;font-size:.8rem;width:64px;height:52px;border-radius:8px;touch-action:none}
@media (hover:none){.touch{display:flex}}
.keys{margin-top:1em;font-size:.75rem;letter-spacing:.12em;opacity:.55}
footer{margin-top:10vh;font-size:.7rem;letter-spacing:.2em;opacity:.4}
@media(max-width:700px){.hero-text{text-align:center}.cta{justify-content:center}.nav nav a{margin-left:.8em;font-size:.6rem}}
@media(prefers-reduced-motion:reduce){.door-scene{animation-duration:.01s}.fog,.grain{animation:none}}
.tagline{font-style:italic;font-size:1.15rem;letter-spacing:.12em;color:#e9e0cc;opacity:0;margin-bottom:1.2em;text-shadow:0 0 18px #e8a94a55}body:not(.intro-on) .tagline{animation:tagin 3s .8s forwards,tagflick 5s 3.8s infinite}@keyframes tagin{to{opacity:.6}}@keyframes tagflick{0%,100%{opacity:.6}48%{opacity:.6}50%{opacity:.2}52%{opacity:.55}54%{opacity:.15}57%{opacity:.6}}
.intro-line{font-style:italic;letter-spacing:.2em;text-transform:none;font-size:1rem}
.h1-sub{display:block;font-size:.45em;letter-spacing:.08em;opacity:.85}