@font-face { font-family: system-ui; src: local("Arial"); }
:root {
  --red: #d41018;
  --dim-red: #7b080e;
  --bone: #ddd8ce;
  --ink: #050507;
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#020203; color:var(--bone); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
body { user-select:none; }
button { font:inherit; }
#game-root, #game-root canvas { width:100%; height:100%; display:block; }
#game-root canvas { outline:none; }
.screen { position:fixed; inset:0; z-index:40; display:grid; place-items:center; opacity:0; visibility:hidden; pointer-events:none; background:radial-gradient(circle at 50% 45%, rgba(40,4,7,.38), rgba(0,0,0,.95) 56%), linear-gradient(120deg,#030304,#090103); transition:opacity .35s ease, visibility .35s; }
.screen::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px); background-size:100% 4px; opacity:.35; pointer-events:none; }
.screen.visible { opacity:1; visibility:visible; pointer-events:auto; }
.panel { position:relative; width:min(860px, calc(100vw - 32px)); border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,rgba(11,11,13,.91),rgba(2,2,3,.94)); padding:clamp(28px,6vw,68px); box-shadow:0 0 0 1px rgba(140,0,8,.28), 0 35px 120px #000, inset 0 0 90px rgba(120,0,0,.08); clip-path:polygon(0 0,98% 0,100% 7%,100% 100%,2% 100%,0 93%); }
.hero-panel { text-align:center; }
.compact-panel { max-width:630px; text-align:center; }
.eyebrow { color:#a8a2a0; font-size:clamp(10px,1.3vw,13px); letter-spacing:.28em; text-transform:uppercase; margin-bottom:18px; }
h1 { margin:0; color:#eee9df; font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size:clamp(64px,10vw,132px); line-height:.72; letter-spacing:-.035em; text-shadow:0 0 2px #fff, 0 0 30px rgba(198,0,10,.25), 5px 4px 0 #250006; }
h1 span { color:var(--red); letter-spacing:.05em; }
h2 { margin:0 0 14px; font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size:clamp(56px,10vw,104px); line-height:.9; letter-spacing:.04em; color:#e7e1d8; text-shadow:4px 4px 0 #260005; }
.tagline { margin:30px auto 25px; color:#aaa4a0; font-size:clamp(14px,2vw,18px); letter-spacing:.16em; text-transform:uppercase; }
.primary-button { border:1px solid rgba(255,255,255,.25); color:#fff7ef; background:linear-gradient(180deg,#bd0b14,#72050b); padding:16px 28px; min-width:250px; cursor:pointer; letter-spacing:.13em; font-weight:800; text-transform:uppercase; box-shadow:0 0 35px rgba(190,0,10,.22); transition:filter .2s, transform .2s, box-shadow .2s; }
.primary-button:hover { filter:brightness(1.24); transform:translateY(-2px); box-shadow:0 0 55px rgba(220,0,12,.4); }
.primary-button:active { transform:translateY(1px); }
.control-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px 20px; margin:30px auto 0; max-width:700px; color:#777; font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.control-grid b { color:#cfcbc2; }
.warning, .best-time { margin:24px auto 0; max-width:660px; color:#5e5b5a; font-size:10px; line-height:1.6; text-transform:uppercase; letter-spacing:.05em; }
.best-time { color:#8f151a; margin-top:8px; }
.end-stats { margin:22px auto 30px; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#271014; border:1px solid #271014; max-width:440px; }
.end-stats span { background:#09090a; padding:12px; color:#767170; font-size:11px; text-transform:uppercase; }
.end-stats b { color:#d8d2ca; display:block; font-size:20px; margin-top:4px; }
.hud { position:fixed; inset:0; z-index:10; pointer-events:none; transition:opacity .25s; }
.hud.hidden { opacity:0; visibility:hidden; }
.hud-top { position:absolute; top:25px; left:28px; right:28px; display:flex; justify-content:space-between; align-items:flex-start; }
.objective { max-width:min(560px,70vw); color:#d5d1ca; font-size:12px; letter-spacing:.15em; text-transform:uppercase; text-shadow:0 2px 4px #000; }
.objective::before { content:"OBJECTIVE // "; color:#9c0a11; }
.timer { color:#777; font-size:15px; letter-spacing:.15em; }
.hud-bottom-left { position:absolute; left:28px; bottom:28px; width:min(330px,45vw); }
.stat-row { display:grid; grid-template-columns:70px 1fr 34px; align-items:center; gap:10px; margin-top:8px; color:#8f8a85; font-size:10px; letter-spacing:.08em; }
.stat-row b { color:#dbd7d0; text-align:right; }
.bar { height:6px; border:1px solid rgba(255,255,255,.17); background:rgba(0,0,0,.62); padding:1px; transform:skewX(-18deg); }
.bar i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#6a0208,#e4121c); box-shadow:0 0 10px rgba(220,0,10,.55); transition:width .2s; }
.bar.stamina i { background:linear-gradient(90deg,#4d4f49,#d4d3c4); box-shadow:none; }
.inventory { display:flex; gap:20px; margin-top:12px; color:#726d69; font-size:10px; letter-spacing:.09em; }
.inventory b { color:#d1ccc5; }
.hud-bottom-right { position:absolute; right:28px; bottom:28px; text-align:right; }
.ammo { display:flex; justify-content:flex-end; align-items:baseline; gap:7px; font-family:Impact, sans-serif; text-shadow:0 2px 8px #000; }
.ammo b { color:#e0dcd5; font-size:48px; font-weight:400; line-height:.9; }
.ammo span { color:#78736f; font-size:18px; }
.ammo.low b { color:#d10a13; animation:ammoPulse .5s infinite alternate; }
@keyframes ammoPulse { to { opacity:.55; } }
.battery { margin-top:10px; color:#6f6b68; font-size:9px; letter-spacing:.08em; }
.battery-shell { width:100px; height:7px; margin:5px 0 0 auto; border:1px solid #555; padding:1px; background:#000; }
.battery-shell i { display:block; height:100%; width:100%; background:#b4b3a8; transition:width .3s; }
.crosshair { position:absolute; left:50%; top:50%; width:34px; height:34px; transform:translate(-50%,-50%); transition:transform .1s; }
.crosshair i { position:absolute; background:rgba(230,226,216,.85); box-shadow:0 0 3px #000; }
.crosshair i:nth-child(1) { width:1px; height:7px; left:50%; top:0; }
.crosshair i:nth-child(2) { width:1px; height:7px; left:50%; bottom:0; }
.crosshair i:nth-child(3) { height:1px; width:7px; top:50%; left:0; }
.crosshair i:nth-child(4) { height:1px; width:7px; top:50%; right:0; }
.crosshair.fire { transform:translate(-50%,-50%) scale(1.45); }
.hitmarker { position:absolute; left:50%; top:50%; transform:translate(-50%,-53%) rotate(45deg) scale(.6); color:white; font:28px Arial; opacity:0; transition:opacity .08s, transform .08s; text-shadow:0 0 5px #000; }
.hitmarker.show { opacity:1; transform:translate(-50%,-53%) rotate(45deg) scale(1); }
.interaction { position:absolute; left:50%; top:58%; transform:translateX(-50%); color:#ded8cf; font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-align:center; text-shadow:0 2px 7px #000; }
.interaction b { color:#d10c15; border:1px solid #751016; padding:3px 6px; background:rgba(15,0,0,.65); }
.message { position:absolute; left:50%; top:23%; transform:translate(-50%,-8px); opacity:0; color:#e0dbd4; font-size:13px; letter-spacing:.15em; text-transform:uppercase; text-align:center; text-shadow:0 3px 12px #000; transition:opacity .25s, transform .25s; }
.message.show { opacity:1; transform:translate(-50%,0); }
.threat { position:absolute; left:50%; bottom:19%; transform:translateX(-50%); color:#b90912; font-size:10px; letter-spacing:.35em; opacity:0; transition:opacity .3s; animation:threatPulse .8s infinite alternate; text-shadow:0 0 10px #d00; }
.threat.show { opacity:1; }
@keyframes threatPulse { to { opacity:.25; } }
#grain { position:fixed; inset:-40%; z-index:20; pointer-events:none; opacity:.08; background-image:url('assets/grime.png'); background-size:360px 360px; animation:grain .2s steps(2) infinite; mix-blend-mode:screen; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(3%,-2%)} 50%{transform:translate(-2%,4%)} 75%{transform:translate(4%,2%)} 100%{transform:translate(-3%,-4%)} }
#vignette { position:fixed; inset:0; z-index:18; pointer-events:none; background:radial-gradient(circle,transparent 25%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.9) 115%); }
#damage-flash { position:fixed; inset:0; z-index:19; pointer-events:none; opacity:0; background:radial-gradient(circle,transparent 25%,rgba(150,0,5,.7)); mix-blend-mode:screen; }
#blood-screen { position:fixed; inset:0; z-index:19; pointer-events:none; opacity:0; background:url('assets/blood.png') center/cover; mix-blend-mode:screen; transition:opacity .35s; }
.letterbox { position:fixed; left:0; right:0; height:0; background:#000; z-index:21; pointer-events:none; transition:height .5s; }
#letterbox-top { top:0; } #letterbox-bottom { bottom:0; }
body.cinematic .letterbox { height:8vh; }
#jumpscare { position:fixed; inset:0; z-index:35; visibility:hidden; opacity:0; background:#000; pointer-events:none; transform:scale(1.25); }
#jumpscare img { width:100%; height:100%; object-fit:cover; filter:contrast(1.45) saturate(.55); }
#jumpscare .jumpscare-noise { position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 2px,transparent 2px 5px); mix-blend-mode:screen; }
#jumpscare.active { visibility:visible; animation:jump .42s steps(2); }
@keyframes jump { 0%{opacity:0;transform:scale(1.6) rotate(-2deg)} 10%{opacity:1} 35%{transform:scale(1.05) rotate(1deg)} 70%{opacity:1;transform:scale(1.2) rotate(-1deg)} 100%{opacity:0;transform:scale(1.45)} }
body.low-health #vignette { background:radial-gradient(circle,transparent 14%,rgba(70,0,0,.45) 55%,rgba(0,0,0,.96) 105%); animation:heartbeatVignette .7s infinite alternate; }
@keyframes heartbeatVignette { to { transform:scale(1.03); } }
@media (max-width:700px) {
  .control-grid { grid-template-columns:repeat(2,1fr); }
  .hud-top { top:15px; left:16px; right:16px; }
  .hud-bottom-left { left:16px; bottom:17px; width:52vw; }
  .hud-bottom-right { right:16px; bottom:17px; }
  .stat-row { grid-template-columns:55px 1fr 25px; gap:6px; }
  .ammo b { font-size:38px; }
}