:root {
  color-scheme: dark;
  --bg: #070909;
  --ink: #e9ece9;
  --muted: #969f9a;
  --danger: #7e1518;
  --door-w: min(72vw, 330px);
  --door-h: min(57vh, 540px);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--bg); overflow: hidden; }
body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  color: var(--ink);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
button { font: inherit; }
[hidden] { display: none !important; }
.game {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(92,108,100,.10), transparent 42%),
    linear-gradient(#0b0d0d, #050606 72%);
  isolation: isolate;
}
.noise {
  position: absolute; inset: -60px; z-index: 30; pointer-events: none; opacity: .12;
  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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  animation: noiseShift .28s steps(2) infinite;
}
@keyframes noiseShift { 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-1%)} 75%{transform:translate(2%,2%)} }
.alarm-glow { position:absolute; inset:0; z-index:3; pointer-events:none; background:radial-gradient(circle at 12% 12%, rgba(156,19,22,.19), transparent 20%); animation: alarm 5.6s infinite; }
@keyframes alarm { 0%,87%,100%{opacity:.18} 89%,92%{opacity:.72} 90%,94%{opacity:.06} }
.hud { position:absolute; inset: max(16px, env(safe-area-inset-top)) 18px auto; z-index:40; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; pointer-events:none; }
.hud-left { display:grid; gap:3px; }
.eyebrow { font-size:10px; letter-spacing:.22em; color:#9ca69f; text-transform:uppercase; }
#doorCount { font-size:14px; letter-spacing:.11em; font-variant-numeric: tabular-nums; }
.wing-label { max-width:42vw; text-align:right; color:#66706b; font-size:10px; letter-spacing:.14em; }
.corridor { position:absolute; inset:0; overflow:hidden; perspective:900px; background:linear-gradient(90deg,#080a0a,#111414 48%,#080a0a); }
.wall { position:absolute; top:0; bottom:0; width:28%; background:linear-gradient(90deg, #111515, #080a0a); opacity:.78; }
.wall-left { left:0; clip-path:polygon(0 0,100% 13%,100% 86%,0 100%); }
.wall-right { right:0; clip-path:polygon(0 13%,100% 0,100% 100%,0 86%); transform:scaleX(-1); }
.ceiling-line { position:absolute; top:22%; left:15%; width:70%; height:2px; background:#333b38; box-shadow:0 0 22px rgba(190,215,202,.06); }
.floor { position:absolute; left:17%; right:17%; bottom:-8%; height:40%; transform:perspective(420px) rotateX(61deg); transform-origin:bottom; background:repeating-linear-gradient(90deg,#171b19 0 1px,transparent 1px 56px),repeating-linear-gradient(0deg,#171b19 0 1px,#090b0a 1px 56px); opacity:.6; }
.door-rig { position:absolute; left:50%; top:51%; width:var(--door-w); height:var(--door-h); transform:translate(-50%,-50%); z-index:10; perspective:1000px; }
.peek-room { position:absolute; inset:6px; border-radius:3px; overflow:hidden; background:radial-gradient(circle at 55% 46%, #1b2622 0 8%, #08100e 30%, #020303 72%); box-shadow:inset 0 0 60px #000; }
.peek-room.danger { background:radial-gradient(circle at 50% 45%, #4b1718 0 5%, #150506 26%, #020202 74%); }
.peek-room.safe { background:radial-gradient(circle at 55% 34%, #24372f 0 4%, #0b1411 27%, #020303 76%); }
.peek-room.dead { background:linear-gradient(#101211,#040505); }
.peek-light { position:absolute; width:36%; height:80%; left:32%; top:8%; background:linear-gradient(90deg,transparent,rgba(207,225,215,.12),transparent); filter:blur(10px); }
.peek-symbol { position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); font-size:64px; opacity:.24; filter:blur(.3px); }
.peek-caption { position:absolute; left:8%; right:8%; bottom:9%; text-align:center; font-size:11px; letter-spacing:.08em; color:#7e8983; opacity:.88; }
.door-frame { position:absolute; inset:-14px -15px -6px; z-index:1; pointer-events:none; filter:drop-shadow(0 14px 20px #000); }
.frame-top,.frame-left,.frame-right { position:absolute; background:linear-gradient(#242925,#0a0c0b); border:1px solid #333936; }
.frame-top{height:22px;left:0;right:0;top:0}.frame-left{width:21px;left:0;top:0;bottom:0}.frame-right{width:21px;right:0;top:0;bottom:0}
.door { position:absolute; inset:0; z-index:4; transform-style:preserve-3d; transform-origin:0 50%; border:1px solid #313632; border-radius:2px; background:linear-gradient(100deg,#171b19 0%,#262c28 45%,#121513 100%); box-shadow:inset -18px 0 30px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.04), 0 20px 30px rgba(0,0,0,.72); cursor:grab; will-change:transform,filter,opacity; outline:none; }
.door:active { cursor:grabbing; }
.door:focus-visible { box-shadow:0 0 0 2px #a2aea7, 0 20px 30px rgba(0,0,0,.72); }
.door-grain { position:absolute; inset:0; opacity:.28; background:repeating-linear-gradient(90deg,transparent 0 24px,rgba(255,255,255,.025) 25px,transparent 27px),linear-gradient(110deg,transparent 30%,rgba(255,255,255,.025),transparent 60%); }
.door-plate { position:absolute; top:11%; left:50%; transform:translateX(-50%); min-width:72px; padding:5px 9px 4px; text-align:center; font:600 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; color:#b5beb8; border:1px solid #414844; background:#111412; box-shadow:0 4px 8px #000; }
.handle-wrap { position:absolute; right:12%; top:52%; width:50px; height:44px; }
.handle-base { position:absolute; width:26px; height:26px; right:0; top:8px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#767f79,#303632 46%,#111 72%); box-shadow:0 3px 8px #000; }
.handle { position:absolute; right:13px; top:18px; width:43px; height:9px; border-radius:8px 2px 2px 8px; transform-origin:right center; background:linear-gradient(#8c958f,#343b37 48%,#161918); box-shadow:0 4px 7px #000; }
.scratch-a,.scratch-b { position:absolute; height:1px; background:#6e7671; opacity:.24; transform:rotate(-18deg); }
.scratch-a{width:34%;left:12%;top:36%}.scratch-b{width:21%;left:18%;top:41%}
.blood-mark { position:absolute; left:7%; bottom:5%; width:52px; height:18px; opacity:0; background:radial-gradient(ellipse,#5f1012 0 20%,transparent 68%); filter:blur(1px); transition:opacity .35s; }
.blood-mark.show{opacity:.85}
.gesture-hint { position:absolute; inset:-34px; z-index:8; display:grid; grid-template:48px 1fr 48px/48px 1fr 48px; place-items:center; pointer-events:none; color:#6f7973; font:600 20px/1 ui-monospace,monospace; transition:opacity .5s; }
.gesture-hint.used { opacity:0; }
.hint-up{grid-area:1/2}.hint-left{grid-area:2/1}.hint-center{grid-area:2/2;font-size:9px;letter-spacing:.18em;color:#87918b}.hint-right{grid-area:2/3}.hint-down{grid-area:3/2}
.clue-strip { position:absolute; left:50%; bottom:max(24px,calc(env(safe-area-inset-bottom) + 10px)); z-index:25; transform:translateX(-50%); width:min(88vw,480px); min-height:42px; display:flex; align-items:center; gap:10px; padding:10px 13px; border:1px solid rgba(120,132,125,.18); background:rgba(7,9,8,.72); backdrop-filter:blur(10px); color:#aeb7b1; font-size:12px; line-height:1.5; letter-spacing:.02em; }
.clue-dot { width:5px; height:5px; border-radius:50%; flex:none; background:#6f1719; box-shadow:0 0 9px #8b1a1d; }
.protagonist-line { position:absolute; left:50%; top:19%; z-index:22; width:min(84vw,520px); transform:translateX(-50%); margin:0; text-align:center; color:#d9dfdb; font-size:15px; line-height:1.7; text-shadow:0 2px 8px #000; opacity:0; transition:opacity .35s; pointer-events:none; }
.protagonist-line.show{opacity:1}
.story-card { position:absolute; left:50%; top:25%; z-index:24; transform:translateX(-50%); width:min(84vw,430px); padding:13px 15px; border-left:2px solid #74181a; background:rgba(7,9,8,.92); box-shadow:0 14px 38px rgba(0,0,0,.42); }
.story-kind { color:#8c9690; font-size:9px; letter-spacing:.2em; }
.story-card p { margin:7px 0 0; color:#c7cec9; font-size:12px; line-height:1.65; }
.overlay { position:absolute; inset:0; z-index:100; display:grid; place-items:center; padding:26px; background:radial-gradient(circle at 50% 42%,rgba(26,31,28,.96),rgba(3,4,4,.99) 68%); }
.overlay-inner { width:min(100%,420px); text-align:center; }
.intro-inner h1 { margin:10px 0 6px; font-size:clamp(38px,11vw,64px); letter-spacing:.04em; }
.intro-copy { margin:0 0 24px; color:#afb8b2; font-size:14px; }
.intro-door-icon { width:80px; height:124px; margin:0 auto 30px; padding:6px; border:3px solid #4a514d; border-bottom:0; }
.intro-door-icon span { display:block; width:100%; height:100%; border:1px solid #343a36; background:linear-gradient(110deg,#1c211e,#0c0f0d); transform-origin:left center; animation:introDoor 2.7s ease-in-out infinite; }
@keyframes introDoor { 0%,30%{transform:perspective(300px) rotateY(0)} 55%,70%{transform:perspective(300px) rotateY(-48deg)} 100%{transform:perspective(300px) rotateY(0)} }
.primary-btn { width:100%; min-height:52px; border:1px solid #626c66; background:#dce2de; color:#0b0d0c; font-weight:800; letter-spacing:.04em; border-radius:2px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.primary-btn:active { transform:translateY(1px) scale(.995); }
.microcopy { margin:14px 0 0; color:#636c67; font-size:10px; line-height:1.5; }
.threat { position:absolute; inset:0; z-index:90; overflow:hidden; background:radial-gradient(circle at 50% 46%,rgba(96,13,16,.46),rgba(0,0,0,.82) 64%); }
.zombie { position:absolute; left:50%; top:47%; width:min(78vw,360px); height:min(68vh,560px); transform:translate(-50%,-50%) scale(.72); animation:zRush .34s cubic-bezier(.15,.8,.2,1) forwards; filter:drop-shadow(0 18px 30px #000); }
@keyframes zRush { to{transform:translate(-50%,-50%) scale(1.08)} }
.z-head { position:absolute; left:25%; top:4%; width:50%; height:43%; border-radius:44% 44% 40% 42%; background:radial-gradient(circle at 50% 32%,#4d5b4f,#1d251f 64%,#080a08); border:1px solid #606a61; box-shadow:inset 18px -18px 36px #050606; }
.z-head i { position:absolute; top:38%; width:20%; height:9%; border-radius:50%; background:#d8d7bf; box-shadow:0 0 12px #a7a482; }
.z-head i:first-child{left:19%; transform:rotate(11deg)}.z-head i:last-child{right:19%; transform:rotate(-11deg)}
.z-mouth { position:absolute; left:38%; top:31%; width:24%; height:12%; border:2px solid #7a8580; border-top:0; border-radius:0 0 50% 50%; background:#120506; box-shadow:inset 0 7px 0 #2b0a0b; }
.z-hand { position:absolute; top:48%; width:22%; height:42%; border-radius:45% 45% 22% 22%; background:linear-gradient(#3f4b42,#141a16); }
.hand-a{left:5%;transform:rotate(18deg)}.hand-b{right:5%;transform:rotate(-18deg)}
.threat-copy { position:absolute; left:50%; bottom:18%; transform:translateX(-50%); width:100%; text-align:center; text-shadow:0 2px 10px #000; }
.threat-copy strong{display:block;font-size:48px;letter-spacing:.16em}.threat-copy span{display:block;margin-top:5px;color:#e7d9d9;font-size:13px}
.threat-timer { position:absolute; left:10%; right:10%; bottom:12%; height:4px; background:#280b0c; }
.threat-timer i { display:block; height:100%; width:100%; background:#b7c2bc; transform-origin:left; }
.terminal-card { margin:22px 0; padding:18px 20px; text-align:left; border:1px solid #4d5b53; background:#07100b; color:#86ad95; font:12px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace; box-shadow:inset 0 0 30px rgba(30,97,59,.12); }
.terminal-card strong{display:block;margin:4px 0 8px;color:#c4e0cd;font-size:26px}.terminal-status{border-top:1px solid #294333;padding-top:8px;color:#8ed09f}
.ending-inner h2 { margin:18px 0 12px; font-size:32px; line-height:1.35; }
.ending-inner p:not(.eyebrow):not(.microcopy) { color:#abb4ae; line-height:1.8; font-size:13px; }
.ending-dialogue { color:#e5e8e6 !important; font-size:16px !important; }
.flash { position:absolute; inset:0; z-index:120; background:#d9dedb; opacity:0; pointer-events:none; }
.flash.go { animation:flash .28s ease-out; }
@keyframes flash{0%{opacity:.72}100%{opacity:0}}
.game.shake { animation:shake .32s linear; }
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-7px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(4px,2px)}}
@media (max-height: 650px) {
  :root { --door-h: 56vh; --door-w: min(58vw,280px); }
  .clue-strip{bottom:10px}.protagonist-line{top:16%}.hud{top:10px}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}