*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#07080b;--text:#ede9e1;--muted:#8d9198;--warm:#cfb27d;--blue:#8195ae}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}
body{user-select:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
.screen{position:fixed;inset:0;opacity:0;pointer-events:none;transition:opacity 1.15s ease}
.screen.active{opacity:1;pointer-events:auto}
#grain,#vignette{position:fixed;inset:0;pointer-events:none;z-index:1000}
#grain{opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E")}
#vignette{background:radial-gradient(circle at center,transparent 45%,rgba(0,0,0,.5) 100%)}

/* opening */
#opening{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(85,105,135,.16),transparent 40%),#07080b}
.opening-glow{position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(130,150,175,.08);filter:blur(90px);animation:glow 5s ease-in-out infinite}
.opening-content{position:relative;z-index:2;width:min(90%,560px);text-align:center;animation:rise 1.5s ease both}
.eyebrow{font-size:10px;letter-spacing:.35em;color:#777b83;margin-bottom:22px}
.opening-content h1{margin:0;font:400 clamp(58px,14vw,110px)/.95 Georgia,serif;letter-spacing:-.05em}
.intro-copy{margin-top:32px;font-size:14px;line-height:1.85;color:#c4c3c0}
.intro-copy p{margin:0}
.intro-copy p:nth-child(2){opacity:.58}
.enter-btn{margin-top:38px;padding:14px 38px;border:1px solid rgba(255,255,255,.24);font-size:11px;letter-spacing:.24em;transition:.35s}
.enter-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.55)}
.lang-switch{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:28px;font-size:11px;color:#666}
.lang{color:#666}.lang.active{color:#f1eee7}
.creator{margin-top:44px;font-size:10px;color:#50535a}

/* room */
.room{background:linear-gradient(180deg,#10131a 0%,#0e1016 60%,#090a0d 100%);perspective:1100px}
.room:before{content:"";position:absolute;inset:0 0 28% 0;background:linear-gradient(115deg,rgba(255,255,255,.015),transparent 35%,rgba(255,255,255,.018))}
.ambient{position:absolute;border-radius:50%;filter:blur(55px);pointer-events:none}
.ambient.blue{width:46vw;height:46vw;right:-10vw;top:-5vw;background:rgba(95,120,160,.08)}
.ambient.warm{width:35vw;height:35vw;left:35%;bottom:8%;background:rgba(200,155,90,.05)}
.hud{position:absolute;top:26px;left:28px;right:28px;display:flex;justify-content:space-between;z-index:30;font-size:9px;letter-spacing:.32em;color:#5f646c}
.object{position:absolute;z-index:10;cursor:pointer;transition:transform .4s ease,filter .35s ease,opacity .5s ease;outline:none}
.object:hover,.object:focus-visible{filter:brightness(1.12)}
.object:active{transform:scale(.98)}
.window{right:7%;top:10%;width:39%;height:46%;border:9px solid #181a20;background:#0c1521;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.3)}
.sky{position:absolute;inset:0;background:linear-gradient(#0a1220,#142538 70%,#1c1b22)}
.sky:after{content:"";position:absolute;right:17%;top:23%;width:8px;height:8px;border-radius:50%;background:#d3b878;box-shadow:0 0 18px rgba(211,184,120,.55)}
.city{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,#0b0d12)}
.city i{position:absolute;bottom:0;width:14%;background:#0c0f14}
.city i:nth-child(1){left:4%;height:52%}.city i:nth-child(2){left:20%;height:74%}.city i:nth-child(3){left:38%;height:42%}.city i:nth-child(4){left:55%;height:68%}.city i:nth-child(5){left:70%;height:49%}.city i:nth-child(6){left:83%;height:78%}.city i:nth-child(7){right:-8%;height:35%}
.rain{position:absolute;inset:-90px;background:repeating-linear-gradient(105deg,transparent 0 19px,rgba(190,210,230,.12) 20px 21px,transparent 22px 42px);animation:rain 1.1s linear infinite}
.window-cross{position:absolute;background:rgba(255,255,255,.09)}.window-cross.v{top:0;bottom:0;width:2px;left:50%}.window-cross.h{left:0;right:0;height:2px;top:55%}
.window-clue{position:absolute;left:0;right:0;bottom:15px;text-align:center;font-size:9px;letter-spacing:.22em;color:transparent;transition:.5s}

/* clock */
.clock{left:8%;top:18%;width:88px;height:88px;border-radius:50%;background:#ded9cb;box-shadow:0 10px 28px rgba(0,0,0,.4)}
.clock-face{position:relative;width:100%;height:100%;border-radius:50%}
.n{position:absolute;color:#222;font-size:8px;font-weight:700}.n12{left:42px;top:6px}.n3{right:7px;top:40px}.n6{left:42px;bottom:6px}.n9{left:7px;top:40px}
.hand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;background:#262626;border-radius:3px}.h1{height:23px;width:3px;transform:translateX(-50%) rotate(92deg)}.h2{height:32px;width:2px;transform:translateX(-50%) rotate(9deg)}.sec{height:38px;width:1px;background:#86544f;animation:sec 60s linear infinite}.pin{position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#202020}

/* portrait */
.portrait-frame{left:30%;top:17%;width:110px;height:150px;padding:9px;background:#16181d;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.portrait{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 30%,#4b5058,#11131a 60%)}
.portrait-bg{position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.07),transparent 45%)}
.portrait-person{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:70px;height:125px;filter:drop-shadow(0 12px 10px rgba(0,0,0,.35))}
.portrait-head{position:absolute;left:50%;top:0;transform:translateX(-50%);width:43px;height:49px;background:#0a0b0e;border-radius:49% 49% 46% 46%}
.portrait-body{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:74px;height:85px;background:#0a0b0e;border-radius:40px 40px 0 0}
.portrait-shine{position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.1),transparent 42%)}
.portrait-caption{position:absolute;bottom:-23px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.35em;color:#5d6269}

/* radio */
.radio{left:8%;bottom:29%;width:148px;height:78px;padding:12px;background:#1b1b19;border:1px solid #35332c;border-radius:7px;box-shadow:0 15px 30px rgba(0,0,0,.45)}
.radio-screen{height:22px;padding:3px 8px;background:#0d120e;color:#91a878;font:11px monospace}
.radio-grill{position:absolute;left:66px;right:12px;top:15px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.radio-grill i{height:4px;background:#0f1010}
.radio-dial{position:absolute;left:14px;bottom:10px;width:12px;height:12px;border:2px solid #777;border-radius:50%}.radio-light{position:absolute;right:12px;bottom:10px;width:5px;height:5px;border-radius:50%;background:#444;transition:.4s}.radio.active .radio-light{background:#c77c55;box-shadow:0 0 12px rgba(199,124,85,.6)}

/* note */
.note{left:39%;bottom:17%;width:132px;height:88px;transform:rotate(-4deg)}
.paper{height:100%;padding:17px 12px;background:#d7d0bc;color:#272520;box-shadow:0 8px 24px rgba(0,0,0,.5);font:10px/1.65 Georgia,serif}
.paper span{display:block}.paper span+span{margin-top:6px}

/* lamp + table */
.lamp{right:24%;bottom:25%;width:95px;height:200px}
.shade{width:70px;height:57px;margin:auto;background:#b8a680;clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);transition:.5s}
.lamp-neck{width:5px;height:107px;margin:auto;background:#6e6d68}.lamp-base{width:62px;height:11px;margin:-2px auto 0;border-radius:50%;background:#4a4945}.lamp-light{position:absolute;left:-35px;top:-25px;width:165px;height:165px;border-radius:50%;background:rgba(217,180,107,.07);filter:blur(30px);transition:.6s}.lamp.on .shade{filter:brightness(1.25)}.lamp.on .lamp-light{background:rgba(217,180,107,.12)}
.table{position:absolute;left:24%;bottom:23%;width:43%;height:70px;z-index:4}.table-top{position:absolute;left:0;right:0;top:0;height:14px;background:#302a21;border:1px solid #4a4034}.table-leg{position:absolute;top:14px;width:8px;height:58px;background:#27231d}.table-leg.left{left:5%}.table-leg.right{right:5%}

/* door */
.door{right:-6px;bottom:11%;width:145px;height:315px;background:linear-gradient(90deg,#17181c,#0e1013);border:2px solid #2e3137;box-shadow:-18px 25px 40px rgba(0,0,0,.5);overflow:hidden}
.door-panel{position:absolute;left:18px;right:18px;height:1px;background:rgba(255,255,255,.055)}.p1{top:33%}.p2{top:64%}.door-handle{position:absolute;left:16px;top:52%;width:8px;height:8px;border-radius:50%;background:#89857e}.door-light{position:absolute;left:-80px;top:0;bottom:0;width:80px;background:linear-gradient(90deg,transparent,rgba(223,203,165,.16));opacity:0;transition:1s}.door.unlocked{border-color:#80755a;box-shadow:-18px 25px 40px rgba(0,0,0,.6),0 0 35px rgba(207,178,125,.1)}.door.unlocked .door-light{opacity:1;animation:doorLight 2.3s ease forwards}.door-label{position:absolute;top:-25px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.3em;color:#777b82}

/* messages + modal */
.message{position:fixed;left:50%;bottom:8%;transform:translateX(-50%);z-index:50;max-width:min(86%,620px);padding:10px 18px;text-align:center;font-size:13px;line-height:1.65;letter-spacing:.02em;color:#ddd;opacity:0;pointer-events:none;transition:.4s}.message.show{opacity:1}
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.45s}.modal.open{opacity:1;pointer-events:auto}.modal-backdrop{position:absolute;inset:0;background:rgba(4,5,8,.7);backdrop-filter:blur(10px)}.modal-card{position:relative;z-index:2;width:min(88%,460px);padding:30px;background:rgba(18,19,24,.97);border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 80px rgba(0,0,0,.55)}.modal-close{position:absolute;right:13px;top:8px;font-size:25px;color:#666}.modal-title{font:34px Georgia,serif;margin-bottom:15px}.modal-body{color:#aaa;font-size:14px;line-height:1.8}.modal-action{margin-top:20px;padding:12px 20px;border:1px solid rgba(255,255,255,.18);font-size:10px;letter-spacing:.2em}

/* encounter + transition */
.encounter,.transition{position:fixed;inset:0;z-index:300;opacity:0;pointer-events:none;transition:opacity .9s}.encounter.show,.transition.show{opacity:1;pointer-events:auto}.encounter{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(77,89,105,.12),#050609 63%)}.encounter-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(217,195,155,.07),transparent 23%);animation:pulse 5s ease-in-out infinite}.encounter-card{position:relative;z-index:2;text-align:center;width:min(86%,420px)}.eyes{width:45px;height:12px;margin:0 auto 28px;border-top:1px solid #97999f;position:relative}.eyes:after{content:"";position:absolute;left:17px;top:-4px;width:5px;height:5px;border-radius:50%;background:#c6c0b0;box-shadow:20px 0 #c6c0b0}.small,.transition-small{font-size:8px;letter-spacing:.35em;color:#6f747b}.encounter-card h2{font:400 58px Georgia,serif;margin:9px 0 17px}.encounter-card p{margin:0 auto;max-width:320px;color:#9ea2a8;font-size:14px;line-height:1.8}.continue-btn{margin-top:28px;padding:13px 25px;border:1px solid rgba(255,255,255,.18);font-size:10px;letter-spacing:.2em}
.transition{display:flex;align-items:center;justify-content:center;background:#050608}.transition:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 60% 45%,rgba(220,202,165,.22),transparent 25%);animation:doorPulse 3s ease forwards}.transition-content{position:relative;text-align:center;width:min(86%,500px)}.transition-content h2{font:400 46px Georgia,serif;margin:12px 0}.transition-content p{color:#9699a1;font-size:14px;line-height:1.7}

/* audio */
.audio-notice{position:fixed;right:18px;bottom:18px;z-index:500}.audio-notice button{font-size:9px;letter-spacing:.16em;color:#555;background:rgba(10,11,14,.55);padding:8px 10px;border:1px solid rgba(255,255,255,.07);border-radius:30px}

/* mobile */
@media (max-width:700px){
  .hud{top:19px;left:18px;right:18px;font-size:8px}
  .window{right:5%;top:11%;width:49%;height:39%}
  .clock{left:7%;top:18%;width:73px;height:73px}
  .portrait-frame{left:30%;top:17%;width:88px;height:122px}
  .radio{left:6%;bottom:29%;width:132px;height:72px}
  .note{left:38%;bottom:16%;width:116px;height:78px}
  .lamp{right:22%;bottom:24%;transform:scale(.82)}
  .table{left:21%;bottom:22%;width:45%}
  .door{width:116px;height:280px}
  .message{font-size:12px;bottom:7%}
}
@media (max-height:680px){
  .window{height:34%}.door{height:250px}.lamp{transform:scale(.72)}
}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes glow{50%{transform:scale(1.1);opacity:.75}}
@keyframes rain{from{transform:translateY(-20px)}to{transform:translateY(60px)}}
@keyframes sec{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes pulse{50%{opacity:.55;transform:scale(1.03)}}
@keyframes doorLight{from{transform:translateX(0)}to{transform:translateX(250px)}}
@keyframes doorPulse{0%{opacity:0;transform:scale(.6)}35%{opacity:1}100%{opacity:0;transform:scale(1.15)}}