:root{
  --ink:#c9c2b4;
  --bg:#050505;
  --blood:#5a0a0a;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:'Special Elite',monospace;cursor:default}

/* film grain overlay */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .3s steps(2) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-3%,2%)}100%{transform:translate(2%,-1%)}}

/* vignette */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;box-shadow:inset 0 0 200px 60px #000}

.hidden{display:none!important}

/* enter screen */
.enter-screen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#1a0808 0%,#000 70%);
  z-index:100;text-align:center;padding:2rem;
}
.enter-inner{max-width:560px}
.enter-title{font-family:'Creepster',cursive;font-size:clamp(3rem,10vw,6rem);color:#8b1a1a;letter-spacing:.05em;text-shadow:0 0 30px #5a0a0a;line-height:.9}
.enter-sub{margin-top:1.2rem;font-size:1.05rem;line-height:1.7;opacity:.8;font-style:italic}
.enter-warn{margin-top:1.5rem;font-size:.85rem;color:#8a7a5a;opacity:.7}
.enter-btn{
  margin-top:2rem;padding:.9rem 2.5rem;font-family:'Special Elite',monospace;font-size:1.1rem;
  background:transparent;color:var(--ink);border:1px solid #4a3a2a;letter-spacing:.2em;
  cursor:pointer;transition:all .4s;
}
.enter-btn:hover{background:#1a0a0a;color:#c0392b;border-color:#5a0a0a;box-shadow:0 0 20px #5a0a0a}

/* story */
.story{height:100%;width:100%;position:relative}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:.35}
.scene-img{max-width:80%;max-height:60vh;object-fit:cover;filter:grayscale(.8) contrast(1.1) brightness(.5);border:1px solid #2a1a1a}
.caption{margin-top:.8rem;font-size:.8rem;opacity:.5;font-style:italic}

.text-block{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:2rem;text-align:center}
.narration{font-size:clamp(1.2rem,3.5vw,2rem);line-height:1.6;max-width:700px;opacity:0;transform:translateY(10px);animation:fadeUp 1.4s forwards}
@keyframes fadeUp{to{opacity:.92;transform:translateY(0)}}
.final-line{font-style:italic;color:#a04a4a}

/* scare */
.scare{position:fixed;inset:0;z-index:5000;background:#000;display:flex;align-items:center;justify-content:center}
.scare-img{width:100%;height:100%;object-fit:cover;animation:scarePulse .08s steps(2) infinite;filter:contrast(1.4) brightness(1.1)}
@keyframes scarePulse{0%{transform:scale(1.0) translate(0,0)}100%{transform:scale(1.03) translate(-4px,3px)}}

/* flash */
.flash{position:fixed;inset:0;z-index:6000;background:#fff;opacity:0;pointer-events:none}

/* end card */
.end-card{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;z-index:200;text-align:center;padding:2rem}
.end-text{font-size:1.4rem;line-height:1.8;max-width:500px;opacity:0;animation:fadeUp 1.8s forwards}
.end-text.small{font-size:1rem;margin-top:1rem;opacity:0;animation:fadeUp 1.8s .8s forwards;font-style:italic;color:#6a5a4a}
.small-btn{margin-top:2.5rem;font-size:.9rem;padding:.7rem 2rem}

/* shake on narration */
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-3px,1px)}75%{transform:translate(3px,-1px)}}