:root{
  --amber:#e8c37a;
  --blood:#8a1220;
  --paper:#d8cdb0;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#fff;
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","SimHei",sans-serif;
  cursor:default;user-select:none;-webkit-user-select:none;}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;}
.hidden{display:none !important;}

/* ---------- generic overlays ---------- */
#fade{position:fixed;inset:0;background:#000;opacity:1;pointer-events:none;z-index:60;
  transition:opacity 1.2s ease;}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:40;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,.22) 3px,rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;}
.vhs-noise{position:fixed;inset:0;pointer-events:none;z-index:41;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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noiseShift .12s steps(2) infinite;}
@keyframes noiseShift{0%{transform:translate(0,0)}50%{transform:translate(-4%,3%)}100%{transform:translate(2%,-2%)}}

/* ---------- VHS camcorder overlay ---------- */
#vhs-overlay{position:fixed;inset:0;pointer-events:none;z-index:42;
  text-shadow:0 0 4px rgba(255,255,255,.5);
  font-family:"Courier New",monospace;color:#f4f4f4;letter-spacing:1px;
  filter:drop-shadow(0 0 1px #fff);}
#vhs-overlay::after{content:"";position:fixed;inset:0;pointer-events:none;
  box-shadow:inset 0 0 200px 40px rgba(0,0,0,.85);}
#rec{position:absolute;top:26px;right:34px;font-size:22px;font-weight:bold;
  display:flex;align-items:center;gap:8px;}
.rec-dot{width:14px;height:14px;border-radius:50%;background:#ff2020;
  box-shadow:0 0 8px #ff2020;animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0}}
#timestamp{position:absolute;bottom:28px;right:34px;font-size:20px;text-align:right;line-height:1.35;}
#battery{position:absolute;top:26px;left:34px;font-size:18px;letter-spacing:2px;}
#tape-label{position:absolute;bottom:28px;left:34px;font-size:18px;}
.tracking{position:fixed;left:0;right:0;height:60px;z-index:43;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.14),rgba(255,255,255,0));
  filter:blur(1px);opacity:.5;animation:trackRoll 7s linear infinite;}
@keyframes trackRoll{0%{top:-10%}100%{top:110%}}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:30;}
#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);
  font-size:26px;color:rgba(255,255,255,.55);transition:.15s;}
#crosshair.active{color:var(--amber);transform:translate(-50%,-60%) scale(1.5);}
#prompt{position:absolute;top:58%;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);border:1px solid rgba(232,195,122,.5);
  padding:6px 16px;font-size:15px;color:var(--amber);border-radius:2px;white-space:nowrap;}
#prompt .key{display:inline-block;border:1px solid var(--amber);border-radius:3px;
  padding:0 6px;margin-right:8px;font-weight:bold;}

#objective{position:absolute;top:70px;left:34px;max-width:320px;
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0));
  padding:12px 16px;border-left:2px solid var(--amber);}
.obj-title{font-size:13px;color:var(--amber);letter-spacing:3px;margin-bottom:8px;opacity:.9;}
#task-list{list-style:none;}
#task-list li{font-size:14px;color:#ddd;margin:5px 0;padding-left:22px;position:relative;
  line-height:1.4;transition:.4s;}
#task-list li::before{content:"□";position:absolute;left:0;color:#999;}
#task-list li.done{color:#6b6b6b;text-decoration:line-through;}
#task-list li.done::before{content:"■";color:var(--amber);}
#task-list li.active{color:#fff;text-shadow:0 0 6px rgba(232,195,122,.5);}

#subtitle{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);
  max-width:70%;text-align:center;font-size:18px;color:#f0e6d0;white-space:pre-line;
  text-shadow:0 2px 6px #000,0 0 2px #000;line-height:1.5;}

#sanity-wrap{position:absolute;bottom:30px;left:34px;display:flex;align-items:center;gap:10px;}
#sanity-label{font-size:12px;color:var(--blood);letter-spacing:2px;}
#sanity-bar{width:150px;height:8px;background:rgba(255,255,255,.12);border:1px solid rgba(138,18,32,.6);}
#sanity-fill{height:100%;width:100%;background:linear-gradient(90deg,#8a1220,#d13a4a);transition:width .5s;}

/* ---------- Note reading ---------- */
#note-overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;}
#note-paper{width:min(520px,80vw);background:var(--paper);color:#221;
  padding:48px 44px;box-shadow:0 20px 80px #000;
  background-image:linear-gradient(rgba(120,90,40,.06),rgba(120,90,40,.06));
  font-family:"SimSun","Songti SC","NSimSun",serif;transform:rotate(-.6deg);}
#note-text{font-size:19px;line-height:2;white-space:pre-wrap;min-height:120px;}
.note-close{margin-top:28px;text-align:right;font-size:13px;color:#877;}

/* ---------- Title ---------- */
#title-screen{position:fixed;inset:0;z-index:70;background:radial-gradient(ellipse at center,#0a0a0c 0%,#000 80%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.title-inner{text-align:center;z-index:2;animation:fadeUp 2s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.title-jp{font-size:84px;letter-spacing:14px;color:#f2ecdd;font-family:"SimSun","Songti SC","KaiTi",serif;
  text-shadow:0 0 30px rgba(138,18,32,.6),2px 2px 0 #300;animation:flick 5s infinite;}
@keyframes flick{0%,97%,100%{opacity:1}98%{opacity:.3}99%{opacity:.8}}
.title-en{font-size:20px;letter-spacing:12px;color:var(--blood);margin-top:6px;}
.title-sub{font-size:15px;color:#9a9a9a;margin-top:22px;letter-spacing:4px;}
#start-btn{margin-top:48px;background:transparent;border:1px solid var(--amber);
  color:var(--amber);font-size:18px;letter-spacing:8px;padding:14px 46px;cursor:pointer;
  transition:.3s;font-family:inherit;}
#start-btn:hover{background:var(--amber);color:#000;box-shadow:0 0 30px rgba(232,195,122,.6);}
.title-hint{margin-top:40px;font-size:13px;color:#777;line-height:2;letter-spacing:2px;}
.title-credit{margin-top:26px;font-size:11px;color:#444;letter-spacing:2px;}

/* ---------- Loading ---------- */
#loading{position:fixed;inset:0;z-index:65;background:#000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;}
.load-text{font-size:20px;letter-spacing:6px;color:var(--amber);}
.dots{animation:dots 1.2s steps(4) infinite;}
@keyframes dots{0%{opacity:.2}50%{opacity:1}}
.load-bar{width:260px;height:4px;background:rgba(255,255,255,.1);}
#load-fill{height:100%;width:0;background:var(--amber);transition:width .3s;}

/* ---------- Pause ---------- */
#pause-screen{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.8);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);}
.pause-inner{text-align:center;}
.pause-title{font-size:40px;letter-spacing:10px;color:#eee;
  font-family:"SimSun","KaiTi",serif;}
.pause-hint{margin-top:20px;font-size:15px;color:#999;letter-spacing:3px;
  animation:blink2 1.6s infinite;}
@keyframes blink2{50%{opacity:.3}}

/* ---------- Jumpscare ---------- */
#jumpscare{position:fixed;inset:0;z-index:90;background:#000;
  display:flex;align-items:center;justify-content:center;}
#jumpscare img{width:100%;height:100%;object-fit:cover;}

/* ---------- Ending ---------- */
#ending{position:fixed;inset:0;z-index:80;background:#000;
  display:flex;align-items:center;justify-content:center;}
#ending-text{font-size:34px;letter-spacing:8px;color:#e6ddc8;text-align:center;
  font-family:"SimSun","Songti SC","KaiTi",serif;line-height:2;
  opacity:0;transition:opacity 3s;white-space:pre-wrap;}
#ending-text.show{opacity:1;}
#restart{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);
  background:transparent;border:1px solid var(--amber);color:var(--amber);
  font-size:16px;letter-spacing:6px;padding:12px 36px;cursor:pointer;
  font-family:inherit;opacity:0;animation:fadeIn 2s 3s forwards;transition:.3s;}
#restart:hover{background:var(--amber);color:#000;}
@keyframes fadeIn{to{opacity:1;}}