:root{
  --blood:#8a0303;
  --blood-bright:#c81111;
  --bone:#cfc8b8;
  --ash:#9aa0a6;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  width:100%;height:100%;overflow:hidden;background:#000;
  font-family:'Special Elite','Courier New',monospace;
  color:var(--bone);cursor:default;user-select:none;
}
body{position:fixed;inset:0;}

#game-container{position:fixed;inset:0;z-index:1;}
#game-container canvas{display:block;width:100%!important;height:100%!important;}

/* ---------- Atmospheric overlays ---------- */
#vignette{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse at center,
     rgba(0,0,0,0) 32%,
     rgba(0,0,0,0.55) 72%,
     rgba(0,0,0,0.96) 100%);
  mix-blend-mode:multiply;
}
#dmg-vignette{
  position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,
     rgba(120,0,0,0) 40%,
     rgba(140,0,0,0.35) 78%,
     rgba(90,0,0,0.85) 100%);
  transition:opacity .35s ease;
}
#grain{
  position:fixed;inset:-50%;z-index:7;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .4s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-5%,3%)}
  50%{transform:translate(4%,-4%)}75%{transform:translate(-3%,-2%)}
  100%{transform:translate(3%,4%)}
}
#scanlines{
  position:fixed;inset:0;z-index:7;pointer-events:none;opacity:.12;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,.6) 3px,rgba(0,0,0,0) 4px);
}
#flash{
  position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0;background:#fff;
}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;}
#hud.hidden{display:none;}
#crosshair{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(220,210,200,.55);font-size:22px;line-height:1;text-shadow:0 0 4px #000;
}
#top-left{position:absolute;top:18px;left:20px;font-size:14px;letter-spacing:2px;}
#objective{color:var(--bone);text-shadow:0 0 6px #000,0 0 2px #000;margin-bottom:12px;}
#relic-count{color:var(--blood-bright);font-weight:bold;}
.bat-label{display:inline-block;width:54px;font-size:11px;color:var(--ash);letter-spacing:2px;}
#battery-wrap,#sanity-wrap{display:flex;align-items:center;margin-bottom:7px;}
#battery-bar,#sanity-bar{
  width:160px;height:9px;border:1px solid rgba(180,180,180,.35);
  background:rgba(0,0,0,.5);box-shadow:0 0 6px #000;
}
#battery-fill{height:100%;width:100%;background:linear-gradient(90deg,#3a3,#7e7);transition:width .2s linear,background .3s;}
#sanity-fill{height:100%;width:100%;background:linear-gradient(90deg,#600,#c22);transition:width .25s linear;}
#rec{
  position:absolute;top:18px;right:22px;font-size:13px;letter-spacing:3px;color:#d6d0c4;
  text-shadow:0 0 6px #000;
}
#rec .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#e00;margin-right:7px;vertical-align:middle;animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:.15}}
#interact{
  position:absolute;bottom:16%;left:50%;transform:translateX(-50%);
  font-size:17px;letter-spacing:3px;color:#fff;text-shadow:0 0 8px #000;
  padding:6px 14px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);
}
#interact.hidden{display:none;}
#message{
  position:absolute;bottom:11%;left:50%;transform:translateX(-50%);
  font-size:18px;color:var(--bone);text-shadow:0 0 10px #000,0 0 4px var(--blood);
  opacity:0;transition:opacity .5s;text-align:center;max-width:80%;letter-spacing:1px;
}
#message.show{opacity:1;}

/* ---------- Screens ---------- */
.screen{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.86);text-align:center;}
.screen.hidden{display:none;}
#menu{background:#000;}
#menu::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 62% at 50% 44%, rgba(26,22,26,.92) 0%, rgba(7,7,9,.96) 55%, #000 100%);
  animation:menupulse 7s ease-in-out infinite;}
@keyframes menupulse{0%,100%{opacity:.82}50%{opacity:1}}

/* ---- minimalist creepy start page ---- */
.menu-inner.minimal{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:820px;}
.minimal .kicker{font-family:'Special Elite',monospace;font-size:12px;letter-spacing:12px;color:#56524b;margin:0 0 34px;}
.minimal .title{
  font-family:'Special Elite',serif;font-weight:400;
  font-size:74px;line-height:1;letter-spacing:24px;text-indent:24px;
  color:#dcd7cc;margin:0;
  text-shadow:0 0 24px rgba(150,10,10,.4), 0 0 70px rgba(80,0,0,.3), 0 2px 3px #000;
}
.minimal .tagline{font-family:'Special Elite',monospace;font-size:14px;letter-spacing:6px;color:#857d70;margin:28px 0 0;font-style:italic;}
.minimal .enter{
  margin:56px 0 0;background:transparent;border:0;cursor:pointer;pointer-events:auto;
  font-family:'Special Elite',monospace;font-size:20px;letter-spacing:14px;text-indent:14px;color:#9a958c;
  padding:12px 24px;animation:breathe 2.8s ease-in-out infinite;transition:color .25s,text-shadow .25s,letter-spacing .25s;
}
.minimal .enter:hover{color:#fff;text-shadow:0 0 18px rgba(200,20,20,.75);letter-spacing:18px;}
@keyframes breathe{0%,100%{opacity:.42}50%{opacity:1}}
.minimal .controls-line{font-family:'Special Elite',monospace;font-size:11px;letter-spacing:3px;color:#4c4842;margin:78px 0 0;}
.minimal .warn-line{font-family:'Special Elite',monospace;font-size:11px;letter-spacing:2px;color:#6d4a31;margin:14px 0 0;}
#death{background:radial-gradient(circle at center,rgba(40,0,0,.85),rgba(0,0,0,.97));}
#win{background:radial-gradient(circle at center,rgba(20,20,30,.8),rgba(0,0,0,.96));}

.menu-inner,.loading-inner{max-width:680px;padding:30px;}
.title{
  font-family:'Nosifer','Impact',sans-serif;color:var(--blood);
  font-size:84px;line-height:1;letter-spacing:4px;
  text-shadow:0 0 18px rgba(160,0,0,.8),0 0 40px rgba(120,0,0,.5),3px 3px 0 #000;
}
.title.small{font-size:54px;}
.subtitle{font-family:'Special Elite';color:var(--ash);letter-spacing:8px;margin:14px 0 26px;font-size:15px;}
.story{font-size:17px;line-height:1.7;color:#d8d2c6;max-width:560px;margin:0 auto 28px;letter-spacing:.5px;}
.story.big{font-size:30px;letter-spacing:6px;color:#bbb;}
.red{color:var(--blood-bright);font-weight:bold;text-shadow:0 0 8px var(--blood);}
.blood{color:var(--blood-bright);text-shadow:0 0 26px var(--blood),0 0 60px rgba(160,0,0,.6);}
.win-title{color:#9fb6c9;text-shadow:0 0 18px rgba(120,160,200,.7);font-size:64px;}

.btn{
  font-family:'Special Elite';cursor:pointer;pointer-events:auto;
  background:transparent;color:var(--bone);border:1px solid var(--blood);
  padding:14px 34px;font-size:18px;letter-spacing:4px;margin:8px;
  transition:all .2s;text-shadow:0 0 6px #000;
}
.btn:hover{background:var(--blood);color:#fff;box-shadow:0 0 22px var(--blood);transform:scale(1.04);}
.btn.ghost{border-color:#555;color:#888;}
.btn.ghost:hover{background:#222;color:#bbb;box-shadow:none;}

.controls{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin:26px auto 18px;
  color:var(--ash);font-size:13px;letter-spacing:1px;max-width:520px;}
.controls b{color:var(--bone);}
.vol{display:flex;align-items:center;gap:12px;justify-content:center;color:var(--ash);
  font-size:13px;letter-spacing:2px;margin:6px 0 16px;}
.vol input{pointer-events:auto;accent-color:var(--blood);width:160px;}
.warn{color:#a8744a;font-size:12px;letter-spacing:1px;max-width:520px;margin:0 auto;}

/* loading */
#load-bar,#load-fill{height:8px;}
#load-bar{width:320px;margin:22px auto 12px;border:1px solid #333;background:#0a0a0a;}
#load-fill{width:0%;background:linear-gradient(90deg,#600,var(--blood-bright));transition:width .2s;}
#load-text{color:var(--ash);font-size:13px;letter-spacing:3px;}

/* ---------- Title fx ---------- */
.flicker{animation:flick 4s infinite;}
@keyframes flick{
  0%,19%,21%,23%,80%,100%{opacity:1;}
  20%,22%{opacity:.25;}81%{opacity:.4;}82%{opacity:1;}
}
.glitch{font-family:'Nosifer';color:var(--blood);font-size:40px;letter-spacing:6px;
  text-shadow:0 0 16px rgba(160,0,0,.7);}

/* ---------- Jumpscare ---------- */
#jumpscare{position:fixed;inset:0;z-index:40;background:#000;display:flex;align-items:center;justify-content:center;}
#jumpscare.hidden{display:none;}
#jumpscare img{width:100%;height:100%;object-fit:cover;}
#jumpscare.shake{animation:js-shake .07s infinite;}
@keyframes js-shake{
  0%{transform:translate(0,0) scale(1.08)}
  25%{transform:translate(-22px,14px) scale(1.14)}
  50%{transform:translate(20px,-16px) scale(1.06)}
  75%{transform:translate(-14px,-18px) scale(1.16)}
  100%{transform:translate(16px,12px) scale(1.1)}
}

/* peripheral sighting */
#sighting{position:fixed;inset:0;z-index:25;pointer-events:none;}
#sighting.hidden{display:none;}
#sighting img{position:absolute;height:78%;bottom:0;opacity:0;filter:brightness(.7) contrast(1.1);}
#sighting.show img{animation:peek 1.1s ease;}
@keyframes peek{0%{opacity:0}30%{opacity:.85}70%{opacity:.8}100%{opacity:0}}

#preload{position:absolute;width:0;height:0;overflow:hidden;opacity:0;}

.hidden{display:none!important;}

/* small non-blocking "look" hint shown until the pointer is captured */
#resume-hint{background:transparent;pointer-events:none;align-items:flex-end;justify-content:center;padding-bottom:9%;}
#resume-hint .menu-inner{padding:0;}
#resume-hint .story.big{
  font-size:17px;letter-spacing:5px;color:#d8d2c6;
  background:rgba(0,0,0,.55);padding:11px 24px;border:1px solid rgba(180,180,180,.28);
  box-shadow:0 0 24px rgba(0,0,0,.85);animation:hintpulse 1.5s ease-in-out infinite;
}
@keyframes hintpulse{50%{opacity:.4}}

@media (max-width:640px){
  .title{font-size:48px;}.win-title{font-size:40px;}
  .story{font-size:15px;}#battery-bar,#sanity-bar{width:120px;}
}