@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{--bg:#040707;--fg:#e8efeb;--muted:#87948f;--dim:#56635f;--accent:#b8d8c5;--accent2:#759c89;--danger:#d46e64;--line:rgba(184,216,197,.18);--panel:rgba(5,10,10,.91);--panel2:rgba(9,15,14,.82);--brightness:1;--ui-scale:1}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}body{cursor:default}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid var(--accent);outline-offset:4px}.screen{position:absolute;inset:0;display:none;z-index:20}.screen.active{display:flex}.screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 30%,transparent 70%,rgba(0,0,0,.24));opacity:.75}.title-wrap{position:relative;z-index:2;margin:auto;width:min(980px,88vw);padding:7vh 0 12vh}.brand-mark{width:52px;height:52px;position:relative;margin-bottom:30px;opacity:.9}.brand-mark span,.brand-mark i,.brand-mark b{position:absolute;display:block;border:1px solid var(--accent)}.brand-mark span{width:38px;height:38px;left:0;top:7px;border-radius:50%;border-right-color:transparent}.brand-mark i{width:27px;height:27px;right:0;top:0;border-radius:50%;border-color:var(--accent2)}.brand-mark b{width:7px;height:7px;left:23px;top:23px;background:var(--accent);border:0;border-radius:50%;box-shadow:0 0 20px rgba(184,216,197,.6)}.eyebrow{font-size:10px;line-height:1.4;letter-spacing:.26em;color:var(--muted);margin:0 0 17px}.title-wrap h1{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(74px,12vw,156px);font-weight:400;line-height:.76;letter-spacing:-.055em;margin:0 0 31px;text-shadow:0 18px 70px rgba(0,0,0,.95)}.title-wrap h1 span{color:var(--accent);font-style:italic}.tagline{max-width:590px;color:#aeb9b4;font-size:12px;line-height:1.9;margin:0 0 34px}.tagline em{color:#788680;font-style:normal}.menu-stack{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.menu-btn{display:flex!important;align-items:center;justify-content:space-between;gap:30px;text-align:left}.menu-btn small{font-size:8px;letter-spacing:.1em;opacity:.48;font-weight:400}.primary-btn,.secondary-btn{min-width:270px;min-height:50px;padding:13px 16px;border:1px solid var(--accent);cursor:pointer;letter-spacing:.14em;font-size:10px;font-weight:600;transition:background .18s,transform .18s,border-color .18s,box-shadow .18s}.primary-btn{background:var(--accent);color:#07100b}.primary-btn:hover:not(:disabled),.primary-btn:focus-visible{background:#d9eee1;transform:translateX(4px);box-shadow:0 8px 35px rgba(184,216,197,.08)}.primary-btn:disabled{opacity:.35;cursor:not-allowed;background:rgba(184,216,197,.1);color:#9aa9a2}.secondary-btn{background:rgba(184,216,197,.035);color:#dce8e2;border-color:rgba(184,216,197,.32)}.secondary-btn:hover,.secondary-btn:focus-visible{background:rgba(184,216,197,.1);border-color:var(--accent);transform:translateX(4px)}.text-btn{background:none;border:0;color:#8e9b95;padding:12px 0;cursor:pointer;letter-spacing:.18em;font-size:9px}.text-btn:hover,.text-btn:focus-visible{color:#f0f5f2}.menu-link{margin-left:3px}.danger{color:#b96b64}.danger:hover{color:#efaaa2}.title-meta{position:absolute;z-index:2;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:24px;white-space:nowrap;color:#53615c;font-size:8px;letter-spacing:.18em}.title-meta span+span:before{content:'·';margin-right:24px;color:#36413d}.menu-noise{position:absolute;inset:0;opacity:.05;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(255,255,255,.05) 3px);mix-blend-mode:screen}.panel{position:relative;z-index:2;margin:auto;width:min(620px,90vw);max-height:min(86vh,760px);overflow:auto;padding:36px;background:linear-gradient(145deg,rgba(11,17,16,.94),rgba(4,9,9,.94));border:1px solid var(--line);box-shadow:0 40px 120px rgba(0,0,0,.75),inset 0 1px rgba(255,255,255,.025)}.panel.compact{text-align:left;width:min(480px,90vw)}.panel h2{font-family:'DM Serif Display',Georgia,serif;font-size:56px;font-weight:400;line-height:.9;letter-spacing:-.04em;margin:0 0 17px}.panel-copy{color:#88958f;font-size:11px;line-height:1.7;margin:0 0 25px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:25px}.close-btn{width:42px;height:42px;background:none;border:1px solid transparent;color:#7d8b85;font-size:27px;cursor:pointer}.close-btn:hover,.close-btn:focus-visible{border-color:var(--line);color:#fff}.result-line{width:48px;height:1px;background:var(--accent);margin-bottom:24px;box-shadow:0 0 16px rgba(184,216,197,.25)}.settings-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 -36px;padding:0 36px}.settings-tab{border:0;border-bottom:1px solid transparent;background:none;color:#66746e;padding:12px 8px 11px;font-size:8px;letter-spacing:.13em;cursor:pointer}.settings-tab:hover,.settings-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.settings-body{padding-top:6px}.settings-page{display:none}.settings-page.active{display:block}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:25px;margin:22px 0 9px}.setting-row strong,.setting-toggle strong{display:block;color:#dce5e0;font-size:10px;letter-spacing:.06em;font-weight:500}.setting-row small,.setting-toggle small{display:block;color:#66736e;font-size:8px;line-height:1.5;margin-top:4px}.setting-row output{color:var(--accent);font-size:9px;letter-spacing:.1em;white-space:nowrap}.range{width:100%;margin:0 0 14px;accent-color:var(--accent);height:22px}.setting-row select{width:140px;padding:9px 10px;background:#0a1110;color:#dce7e1;border:1px solid #293630}.status-pill{border:1px solid rgba(184,216,197,.25);padding:6px 8px;color:#8aa79a;font-size:7px;letter-spacing:.12em}.control-grid{display:grid;grid-template-columns:110px 1fr;gap:0;border-top:1px solid var(--line);margin-top:25px}.control-grid span,.control-grid small{padding:11px 0;border-bottom:1px solid rgba(184,216,197,.08)}.control-grid span{font-size:9px;color:#dce6e1}.control-grid small{font-size:8px;color:#65736d;text-align:right;letter-spacing:.12em}.setting-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:20px;margin:18px 0!important;padding:13px 0;border-bottom:1px solid rgba(184,216,197,.08);cursor:pointer}.setting-toggle input{position:absolute;opacity:0;pointer-events:none}.setting-toggle i{width:38px;height:20px;border:1px solid #3b4943;border-radius:20px;position:relative;transition:.2s;flex:0 0 auto}.setting-toggle i:after{content:'';position:absolute;width:12px;height:12px;left:3px;top:3px;background:#56635e;border-radius:50%;transition:.2s}.setting-toggle input:checked+i{border-color:var(--accent)}.setting-toggle input:checked+i:after{transform:translateX(18px);background:var(--accent)}.settings-note{margin:23px 0 0;color:#4f5c57;font-size:8px;letter-spacing:.08em}.credits-list{border-top:1px solid var(--line);margin:8px 0 25px}.credits-list div{padding:17px 0;border-bottom:1px solid rgba(184,216,197,.08)}.credits-list span{display:block;color:#dce6e1;font-size:10px;letter-spacing:.1em}.credits-list small{display:block;color:#63716b;font-size:8px;margin-top:6px;line-height:1.5}.credits-panel .menu-btn{min-width:150px}.pause-panel .menu-stack,.result-panel .menu-stack{align-items:flex-start}.pause-panel h2,.result-panel h2{font-size:62px}.pause-panel .primary-btn,.result-panel .primary-btn{min-width:230px}
#vignette{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.52) 100%)}#grain{position:absolute;inset:-50%;z-index:6;pointer-events:none;opacity:.035;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='.7'/%3E%3C/svg%3E");animation:grain .3s steps(2) infinite}@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(1%,-.5%)}50%{transform:translate(-.5%,1%)}75%{transform:translate(.5%,.5%)}100%{transform:translate(-1%,-1%)}}#hud{position:absolute;inset:0;z-index:10;pointer-events:none}.hidden{display:none!important}.hud-card{position:absolute;top:28px;left:30px;max-width:min(430px,42vw);border-left:2px solid var(--accent);padding:9px 15px;background:rgba(4,8,8,.36);backdrop-filter:blur(5px)}.hud-label{display:block;font-size:7px;letter-spacing:.2em;color:#718079;margin-bottom:6px}.hud-card strong{font-size:11px;font-weight:500}.signal{position:absolute;top:30px;right:30px;display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:.15em;color:#697670}.signal b{color:#bdc9c4}.signal b.on{color:var(--accent)}.signal em{font-style:normal;font-size:7px;letter-spacing:.12em;color:#9aa7a2;border-left:1px solid #39443f;padding-left:8px}.crosshair{position:absolute;left:50%;top:50%;width:4px;height:4px;border:1px solid rgba(230,240,235,.65);transform:translate(-50%,-50%);border-radius:50%;transition:transform .12s,opacity .12s}.prompt{position:absolute;left:50%;bottom:27%;transform:translateX(-50%);font-size:9px;letter-spacing:.1em;color:#d8e0dc;text-shadow:0 2px 10px #000;background:rgba(4,7,7,.22);padding:7px 10px;opacity:.95}.subtitle{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);max-width:650px;width:max-content;max-width:80vw;text-align:center;font-size:11px;line-height:1.6;color:#e0e8e4;text-shadow:0 2px 12px #000;background:rgba(3,6,6,.32);padding:7px 11px}.echo-meter{position:absolute;bottom:28px;right:30px;width:150px;font-size:7px;letter-spacing:.15em;color:#6f7d77}.echo-meter div,.noise-meter div{height:3px;background:#202a26;margin-top:8px}.echo-meter i,.noise-meter i{display:block;width:100%;height:100%;background:var(--accent);transform-origin:left}.noise-meter{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);width:110px;font-size:7px;letter-spacing:.15em;color:#697670}.inventory{position:absolute;bottom:29px;left:30px;font-size:8px;letter-spacing:.15em;color:#66736e}.inventory b{color:#c4cfca;margin-left:9px}.loading{position:absolute;inset:0;background:#030506;z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;font-size:9px;letter-spacing:.24em}.loading:before{content:'BLACKWATER / 03:17 AM';color:#52615b;font-size:8px;letter-spacing:.2em;margin-bottom:3px}.loading i{width:160px;height:1px;background:#29322f;overflow:hidden;position:relative}.loading i:after{content:'';position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);animation:load 1.1s ease-in-out infinite}@keyframes load{to{transform:translateX(100%)}}
.mobile-help{position:absolute;top:76px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.12em;color:#8d9894;text-align:center;z-index:15}.mobile-help:not(.hidden){display:block}.mobile-controls{position:absolute;inset:0;z-index:18;pointer-events:none}.joystick{position:absolute;left:22px;bottom:28px;width:128px;height:128px;border:1px solid rgba(210,225,218,.28);border-radius:50%;background:rgba(7,12,12,.22);pointer-events:auto;touch-action:none}.joystick:after{content:'';position:absolute;inset:22px;border:1px solid rgba(210,225,218,.12);border-radius:50%}.joystick i{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;background:rgba(183,215,196,.45);border:1px solid rgba(230,245,237,.55);transform:translate(-50%,-50%)}.mobile-action-stack{position:absolute;right:20px;bottom:25px;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:auto}.mobile-action{width:58px;height:58px;border-radius:50%;border:1px solid rgba(220,235,229,.38);background:rgba(7,12,12,.55);color:#e2ece7;font-weight:700;letter-spacing:.08em;touch-action:manipulation}.mobile-action:active{background:rgba(183,215,196,.3);transform:scale(.96)}.echo-action{border-color:rgba(145,200,170,.65)}.sprint-action{width:70px;height:42px;border-radius:20px;font-size:9px}.mobile-controls.hidden{display:none!important}
@media(max-width:760px){.title-wrap{width:88vw;padding:4vh 0 13vh}.title-wrap h1{font-size:20vw}.brand-mark{margin-bottom:20px}.tagline{font-size:10px}.title-meta{width:92vw;justify-content:center;gap:8px;white-space:normal;text-align:center;line-height:1.7}.title-meta span+span:before{margin-right:8px}.hud-card{left:15px;top:15px;max-width:60vw;padding:7px 10px}.hud-card strong{font-size:10px}.signal{right:12px;top:15px;font-size:7px}.echo-meter{bottom:22px;right:12px;width:120px}.noise-meter{bottom:22px;width:85px}.inventory{bottom:22px;left:12px}.prompt{bottom:20%;font-size:8px}.subtitle{bottom:14%;width:86%;font-size:10px}.panel{padding:25px;width:92vw}.settings-tabs{margin:0 -25px;padding:0 25px;overflow:auto}.settings-tab{white-space:nowrap}.panel h2{font-size:47px}.menu-btn{min-width:100%;}.title-wrap .menu-btn{min-width:min(100%,330px)}.primary-btn,.secondary-btn{min-height:48px}}
@media(hover:none) and (pointer:coarse){body{touch-action:none}button{min-height:44px}.mobile-controls{padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.joystick{left:calc(18px + env(safe-area-inset-left));bottom:calc(22px + env(safe-area-inset-bottom))}.mobile-action-stack{right:calc(16px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom))}}
body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.brightness-layer{position:fixed;inset:0;z-index:4;pointer-events:none;background:#fff;mix-blend-mode:soft-light;opacity:0}.subtitle-large{font-size:14px!important}.subtitle-small{font-size:9px!important}

/* Stage 7 content pass */
.inventory{display:flex;flex-direction:column;gap:5px;min-width:150px;padding:9px 11px;border-left:1px solid rgba(184,216,197,.24);background:rgba(4,8,8,.24)}
.inventory span{font-size:7px;letter-spacing:.2em;color:#718079}.inventory b{margin:0;color:#dce7e1;font-size:9px}.inventory em{font-style:normal;color:#65736d;font-size:7px;letter-spacing:.12em}
.flashlight-status{position:absolute;right:30px;bottom:29px;font-size:7px;letter-spacing:.16em;color:#6e7b75}.flashlight-status b{color:#bcd6ca;margin-left:5px}.flashlight-status.off b{color:#8d3b37}
#jumpscare{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0;background:radial-gradient(circle at center,rgba(130,0,0,.1),rgba(0,0,0,.95) 75%);overflow:hidden}
#jumpscare.active{opacity:1}#jumpscare.violent{animation:jolt .055s steps(2) infinite;background:radial-gradient(circle at center,rgba(145,0,0,.34),rgba(0,0,0,.98) 72%)}
.jumpscare-creature{position:absolute;left:50%;top:50%;width:230px;height:360px;transform:translate(-50%,-46%);filter:drop-shadow(0 0 28px rgba(0,0,0,.95));opacity:.98}
.jumpscare-creature:before{content:'';position:absolute;inset:0 28px 20px;background:#020303;border-radius:48% 48% 22% 22%;transform:scaleX(.82)}
.jumpscare-creature i{position:absolute;top:90px;width:24px;height:12px;background:#d9fff0;box-shadow:0 0 25px #b5ffe1;z-index:2}.jumpscare-creature i:first-child{left:67px;transform:rotate(9deg)}.jumpscare-creature i:nth-child(2){right:67px;transform:rotate(-9deg)}
.jumpscare-creature b{position:absolute;left:50%;top:155px;width:94px;height:120px;transform:translateX(-50%);border-radius:45% 45% 50% 50%;background:#000;box-shadow:inset 0 -30px 0 rgba(80,0,0,.35);z-index:2}.jumpscare-creature b:after{content:'';position:absolute;left:18px;right:18px;top:30px;height:58px;border-radius:50%;background:repeating-linear-gradient(0deg,#c7ddd4 0 5px,#111 5px 10px);box-shadow:0 0 18px rgba(220,255,240,.3)}
.jumpscare-flash{position:absolute;inset:0;background:#effff7;opacity:0;animation:scareflash 1.15s ease-out}.active .jumpscare-flash{opacity:.2}@keyframes scareflash{0%{opacity:.95}7%{opacity:.05}16%{opacity:.75}100%{opacity:0}}
@keyframes jolt{0%{transform:translate(0,0)}25%{transform:translate(9px,-5px)}50%{transform:translate(-7px,6px)}75%{transform:translate(5px,4px)}100%{transform:translate(-4px,-3px)}}
.flashlight-action{border-color:rgba(238,255,245,.55)}.crouch-action{border-color:rgba(160,180,170,.38)}
@media(max-width:760px){.flashlight-status{right:12px;bottom:78px}.inventory{bottom:72px;left:12px}.jumpscare-creature{width:190px;height:310px}.mobile-action-stack{gap:7px}.mobile-action{width:52px;height:52px}.sprint-action{width:66px;height:40px}}

.inventory-panel{position:absolute;left:50%;top:50%;z-index:22;transform:translate(-50%,-50%) scale(.96);width:min(360px,88vw);padding:28px;background:rgba(3,7,7,.94);border:1px solid rgba(184,216,197,.2);box-shadow:0 20px 80px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}.inventory-panel.active{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}.inventory-panel h3{font-family:'DM Serif Display',Georgia,serif;font-size:42px;font-weight:400;margin:0 0 18px}.inventory-panel #inventory-list{border-top:1px solid rgba(184,216,197,.12)}.inventory-panel #inventory-list div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid rgba(184,216,197,.08)}.inventory-panel #inventory-list b{font-size:9px;color:#dce7e1}.inventory-panel #inventory-list small{font-size:7px;color:#66746e;text-align:right}.inventory-panel>small{display:block;margin-top:18px;color:#596660;font-size:7px;letter-spacing:.1em}
.bind-list{display:grid;gap:6px;margin-top:12px}.bind-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 10px;border:1px solid rgba(184,216,197,.08);background:rgba(255,255,255,.015)}.bind-row span{font-size:8px;letter-spacing:.12em;color:#b9c5c0}.bind-btn{min-width:76px;height:34px;padding:0 12px;border:1px solid rgba(184,216,197,.2);background:rgba(7,12,12,.65);color:#dce7e1;font:600 8px 'IBM Plex Mono',monospace;letter-spacing:.12em;cursor:pointer}.bind-btn:hover,.bind-btn:focus-visible{border-color:rgba(184,216,197,.55);outline:none;background:rgba(184,216,197,.08)}.bind-btn.listening{border-color:#b9d8c8;color:#07100d;background:#b9d8c8;animation:bindpulse .8s ease-in-out infinite alternate}.bind-help{margin:14px 0 0;font-size:8px;line-height:1.6;color:#62706a}.bind-help b{color:#b9c9c2}@keyframes bindpulse{to{box-shadow:0 0 0 4px rgba(185,216,200,.08)}}