@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Noto+Serif+JP:wght@400;600;700&display=swap');
:root{--ink:#d7d0c7;--dim:#85807c;--blood:#a82127;--bg:#050507;--line:rgba(210,200,190,.2)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:'Noto Serif JP',serif}button{font:inherit;color:inherit;cursor:pointer}#game{position:relative;width:100%;height:100%;background:#070709;overflow:hidden}.screen{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s ease;z-index:2}.screen.visible{opacity:1;visibility:visible}.screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 30%,transparent 70%,rgba(0,0,0,.4)),radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.78) 100%)}#noise{position:absolute;inset:0;z-index:10;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}#vignette{position:absolute;inset:0;z-index:9;pointer-events:none;box-shadow:inset 0 0 13vw 5vw #000}.title-mark{letter-spacing:.32em;color:#77716d;font-size:11px;margin-bottom:25px}.title-mark,.title-screen h1,.tagline,.title-screen button,.warning{position:relative;z-index:1}.title-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 55%,#171719 0%,#070709 55%,#000 100%)}.title-screen:before{content:'04:13';position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);font:600 min(38vw,380px)/1 'Cormorant Garamond';letter-spacing:-.08em;color:rgba(150,140,135,.035)}h1{font:500 clamp(54px,10vw,136px)/.85 'Cormorant Garamond',serif;letter-spacing:.08em;margin:0;color:#eee8df;text-shadow:0 0 35px rgba(255,255,255,.12)}h1 span{color:var(--blood)}h1 b{font-weight:500;color:#aaa39b}.tagline{font-size:clamp(12px,1.6vw,16px);letter-spacing:.25em;margin:28px 0 42px;color:#aaa39d}.primary{background:transparent;border:1px solid rgba(215,208,199,.5);padding:15px 38px;letter-spacing:.18em;font-size:13px;transition:.3s}.primary:hover{background:#eee8df;color:#070709;border-color:#eee8df}.warning{font-size:10px;color:#65605c;margin-top:20px;letter-spacing:.1em}.title-footer{position:absolute;bottom:25px;color:#464341;font:10px Arial;letter-spacing:.18em;z-index:1}.hud{position:absolute;top:0;left:0;right:0;height:65px;padding:24px 4vw;display:flex;justify-content:space-between;z-index:3;font-size:11px;color:#918d89;letter-spacing:.12em}.hud span{color:#55514f}.hud #clock{font-family:monospace;color:#b4aea8}.scene{position:absolute;inset:0;perspective:680px;overflow:hidden;background:#09090b}.hallway{position:absolute;inset:0;transform-style:preserve-3d;animation:drift 9s ease-in-out infinite alternate}.wall{position:absolute;top:0;height:100%;width:55%;background:linear-gradient(90deg,#151417,#29272a 45%,#111114);transform-origin:center}.wall.left{left:-18%;transform:rotateY(29deg)}.wall.right{right:-18%;transform:rotateY(-29deg)}.ceiling{position:absolute;top:-15%;left:16%;width:68%;height:55%;background:linear-gradient(#1e1b1e,#0b0a0d);clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);border-bottom:1px solid #383239}.floor{position:absolute;bottom:-8%;left:15%;width:70%;height:57%;background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(190,175,165,.05) 9.2% 9.5%),linear-gradient(165deg,#201d20,#050506 80%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:perspective(500px) rotateX(58deg);transform-origin:bottom;border-top:1px solid #29252a}.end-wall{position:absolute;top:22%;left:37%;width:26%;height:42%;background:linear-gradient(90deg,#0a090b,#252226 48%,#08080a);box-shadow:0 0 45px #000}.door{position:absolute;z-index:1;top:29%;width:7%;height:25%;border:2px solid #342e31;background:#0e0d10;box-shadow:inset 0 0 20px #000}.door-a{left:29%;transform:skewY(9deg)}.door-b{right:29%;transform:skewY(-9deg)}.door:after{content:'04';position:absolute;top:8%;left:44%;font:10px monospace;color:#4d4143}.shadow{position:absolute;z-index:2;top:39%;left:48%;width:5%;height:24%;background:#010101;filter:blur(5px);opacity:0;transition:opacity 1s;transform:scaleX(.7)}.shadow.visible{opacity:.95;animation:watch 4s ease-in-out}.shadow:after{content:'';position:absolute;top:8%;left:20%;width:18%;height:4px;background:#8f1c20;box-shadow:10px 0 #8f1c20;opacity:.65}.breath{position:absolute;z-index:2;top:49%;left:50%;width:0;height:0;box-shadow:0 0 70px 30px rgba(210,210,210,.18);opacity:0}.breath.visible{animation:breath 4s ease-in-out}.bottom-ui{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:22px 4vw;display:flex;align-items:end;justify-content:space-between;background:linear-gradient(transparent,rgba(0,0,0,.72));font-size:11px;letter-spacing:.1em}.status{display:flex;align-items:center;gap:10px;color:#aaa}.meter{width:110px;height:3px;background:#332d2f}.meter i{display:block;width:100%;height:100%;background:#a48a85;transition:width .4s}.objective{text-align:center;display:flex;flex-direction:column;gap:5px;color:#746e6a}.objective strong{font-weight:400;color:#c7c0b9}.inventory{color:#807876}.message{position:absolute;left:50%;bottom:20%;transform:translateX(-50%);z-index:5;max-width:80%;text-align:center;font-size:13px;letter-spacing:.12em;color:#d4cdc5;text-shadow:0 2px 7px #000;opacity:0;transition:opacity .5s}.message.show{opacity:1}.interact{position:absolute;right:4vw;bottom:100px;z-index:5;border:1px solid var(--line);background:rgba(10,8,10,.55);padding:11px 15px;font-size:11px;letter-spacing:.12em;opacity:0;pointer-events:none}.interact.active{opacity:1;pointer-events:auto}.interact span{font:10px monospace;color:#817a75;margin-left:8px}.ending-screen{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 45%,#180d10,#050507 66%)}.ending-inner{position:relative;z-index:1;text-align:center;max-width:600px;padding:30px}.ending-inner h2{font-size:clamp(28px,5vw,54px);font-weight:400;letter-spacing:.1em;margin:20px 0;color:#e1d7d0}.ending-inner p{font-size:13px;line-height:2.2;color:#99908c;letter-spacing:.08em}.ending-kicker{color:#8e1c21;font-size:11px;letter-spacing:.35em}.ending-stats{margin:34px auto;color:#716967;font:11px monospace;letter-spacing:.1em}.share{display:block;margin-top:25px;color:#716967;text-decoration:none;font-size:11px}.share:hover{color:#ddd}.screen.shake{animation:shake .2s 3}.mobile-controls{display:none}@keyframes drift{to{transform:translateX(1.5%)}}@keyframes watch{0%,100%{transform:scaleX(.7) translateY(8px)}50%{transform:scaleX(.9) translateY(0)}}@keyframes breath{0%,100%{opacity:0;transform:scale(.7)}45%{opacity:.7;transform:scale(1.5)}}@keyframes shake{25%{transform:translate(3px,-2px)}50%{transform:translate(-3px,2px)}75%{transform:translate(2px,2px)}}@media(max-width:600px){.hud{padding:18px 18px;font-size:9px}.hud .chapter span{display:none}.bottom-ui{padding:15px 18px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.objective{grid-column:1/-1;grid-row:1;text-align:left}.status{grid-column:1;grid-row:2}.inventory{grid-column:2;grid-row:2;text-align:right}.meter{width:70px}.interact{right:18px;bottom:105px}.mobile-controls{position:absolute;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:5px;left:18px;bottom:95px;z-index:5}.mobile-controls button{border:1px solid rgba(210,200,190,.18);background:rgba(10,8,10,.5);font-size:23px;color:#aaa}.mobile-controls button:nth-child(1){grid-column:1;grid-row:2}.mobile-controls button:nth-child(2){grid-column:2;grid-row:1}.mobile-controls button:nth-child(3){grid-column:3;grid-row:2}.mobile-controls button:nth-child(4){grid-column:2;grid-row:2}.title-mark{font-size:9px}.tagline{letter-spacing:.12em}.warning{font-size:9px}.door-a{left:18%}.door-b{right:18%}}

/* v1.1.0 動的演出：歩行の踏み込みと微細ジャンプスケア */
#red-glow{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(circle at 50% 48%,rgba(180,20,25,.25),transparent 18%);opacity:0;mix-blend-mode:screen}
#red-glow.pulse{animation:redPulse .28s ease-out}
#micro-scare{position:absolute;inset:0;z-index:12;display:grid;place-items:center;pointer-events:none;background:rgba(45,0,3,0);opacity:0}
#micro-scare.active{animation:microScare .23s steps(2,end)}
.scare-face{position:relative;width:min(23vw,180px);aspect-ratio:1/.82;opacity:0;filter:blur(2px);transform:scale(.4)}
#micro-scare.active .scare-face{animation:facePop .23s steps(2,end)}
.scare-face i{position:absolute;top:32%;width:18%;height:10%;background:#d9c8bd;box-shadow:0 0 18px #c51d29}
.scare-face i:first-child{left:22%;transform:rotate(8deg)}.scare-face i:nth-child(2){right:22%;transform:rotate(-8deg)}
.scare-face b{position:absolute;left:28%;right:28%;bottom:22%;height:18%;border-bottom:5px solid #b31a22;border-radius:0 0 50% 50%}
.hallway.step-in{animation:stepIn .7s cubic-bezier(.2,.8,.2,1)}
.hallway.step-back{animation:stepBack .45s ease-out}
@keyframes stepIn{0%{transform:scale(1)}45%{transform:scale(1.06) translateZ(25px)}100%{transform:scale(1)}}
@keyframes stepBack{0%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes redPulse{0%{opacity:.8}100%{opacity:0}}
@keyframes microScare{0%{opacity:0;background:rgba(45,0,3,0)}25%{opacity:1;background:rgba(45,0,3,.28)}100%{opacity:0;background:rgba(45,0,3,0)}}
@keyframes facePop{0%{opacity:0;transform:scale(.4)}30%{opacity:.8;transform:scale(1.15)}100%{opacity:0;transform:scale(.8)}}