/* ============================================================
   DATANG TAK DIUNDANG (3D) — style.css
   DOM overlay styling. The world is rendered in #c3d.
   ============================================================ */

:root {
  --bg: #050507;
  --bg2: #0b0b10;
  --red: #a4161a;
  --red-bright: #e5383b;
  --amber: #e8a33d;
  --amber-dim: #8a5a1e;
  --green-crt: #9ef01a;
  --bone: #d8d4c8;
  --chat-bg: rgba(8, 8, 12, 0.72);
  --font-ui: "Segoe UI", system-ui, sans-serif;
  --font-creep: Georgia, "Times New Roman", serif;
  --font-mono: "Consolas", "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--bone);
  font-family: var(--font-ui);
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}

button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

.screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  z-index: 10;
}

/* ============ 3D CANVAS + PER-ACT COLOR GRADE ============ */
#game { display: block; background: #000; }
#c3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; transition: filter 2.5s; }
body.act-1 #c3d { filter: saturate(1.06) contrast(1.05) brightness(1.02); }
body.act-2 #c3d { filter: saturate(0.8) contrast(1.12) brightness(0.9) hue-rotate(-8deg); }
body.act-3 #c3d { filter: saturate(0.72) contrast(1.2) brightness(0.86) hue-rotate(-14deg); }
body.echoing #c3d { filter: sepia(0.45) saturate(0.9) contrast(1.12) brightness(1.04); }

/* ============ CAMCORDER FRAME (diegetic stream camera) ============ */
#camcorder { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.cam-corner {
  position: absolute; width: 34px; height: 34px;
  border: 2.5px solid rgba(216, 212, 200, 0.5);
}
.cam-tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.cam-tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.cam-bl { bottom: 80px; left: 12px; border-right: none; border-top: none; }
.cam-br { bottom: 80px; right: 12px; border-left: none; border-top: none; }
#cam-stamp {
  position: absolute; bottom: 88px; left: 22px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px;
  color: rgba(216, 212, 200, 0.66); text-shadow: 0 0 6px #000;
}
#cam-mode {
  position: absolute; bottom: 88px; right: 22px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px;
  color: rgba(158, 240, 26, 0.55); text-shadow: 0 0 6px #000;
}
#speedrun-timer {
  position: absolute; bottom: 110px; left: 22px;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 2px;
  color: rgba(232, 163, 61, 0.85); text-shadow: 0 0 8px #000;
}

/* ============ LETTERBOX (memory echoes) ============ */
.letterbox {
  position: absolute; left: 0; right: 0; height: 0; background: #000;
  z-index: 8; transition: height 0.9s cubic-bezier(.4,0,.2,1); pointer-events: none;
}
#letterbox-top { top: 0; }
#letterbox-bottom { bottom: 0; }
body.echoing #letterbox-top, body.echoing #letterbox-bottom { height: 9vh; }

/* ============ BOOT SCREEN ============ */
#boot-screen { background: #000; flex-direction: column; }
.boot-inner { text-align: center; animation: bootFlicker 4s infinite; }
.boot-logo {
  font-family: var(--font-mono); color: #777; font-size: 14px;
  letter-spacing: 4px; margin-bottom: 38px;
}
.boot-rec { color: var(--red-bright); animation: recBlink 1.2s steps(2) infinite; }
@keyframes recBlink { 50% { opacity: 0.1; } }
.boot-title {
  font-family: var(--font-mono); font-size: clamp(14px, 2.2vw, 22px);
  color: var(--bone); letter-spacing: 3px; margin-bottom: 40px; font-weight: 400;
}
.boot-langs { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.btn-lang {
  background: transparent; border: 1px solid #444; color: var(--bone);
  font-family: var(--font-mono); font-size: 16px; letter-spacing: 2px;
  padding: 16px 30px; transition: all 0.2s;
}
.btn-lang:hover {
  border-color: var(--red-bright); color: var(--red-bright);
  box-shadow: 0 0 24px rgba(229, 56, 59, 0.35); text-shadow: 0 0 8px var(--red-bright);
}
.boot-warn { margin-top: 56px; color: #595959; font-size: 13px; line-height: 2; font-family: var(--font-mono); }
@keyframes bootFlicker {
  0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.6; }
  94% { opacity: 1; } 96% { opacity: 0.75; } 97% { opacity: 1; }
}

/* ============ TITLE SCREEN ============ */
#title-screen {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(120, 20, 20, 0.25), transparent 60%),
    radial-gradient(ellipse at 50% 0%, rgba(20, 24, 40, 0.5), transparent 70%),
    var(--bg);
  flex-direction: column;
}
.title-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rain-drop {
  position: absolute; top: -120px; width: 1px;
  background: linear-gradient(transparent, rgba(160, 170, 200, 0.25));
  animation: rainFall linear infinite;
}
@keyframes rainFall { to { transform: translateY(120vh); } }
.title-inner { text-align: center; z-index: 2; padding: 20px; }
.title-pre {
  font-family: var(--font-mono); color: #6e6e78; letter-spacing: 6px;
  font-size: clamp(10px, 1.4vw, 14px); margin-bottom: 18px; text-transform: uppercase;
}
.title-main {
  font-family: var(--font-creep); font-size: clamp(38px, 8vw, 100px);
  color: var(--red-bright); letter-spacing: 6px; font-weight: 700;
  text-shadow: 0 0 40px rgba(164, 22, 26, 0.6), 0 4px 0 #3a0506;
  margin-bottom: 14px; line-height: 1.05;
}
.title-sub {
  color: #8e8a80; font-size: clamp(13px, 1.8vw, 18px); font-style: italic;
  font-family: var(--font-creep); margin-bottom: 44px;
}
.title-menu { display: flex; flex-direction: column; gap: 13px; align-items: center; }
.btn-menu {
  background: transparent; border: 1px solid #3c3c46; color: var(--bone);
  font-family: var(--font-mono); letter-spacing: 3px; font-size: 16px;
  padding: 13px 44px; min-width: 290px; transition: all 0.18s;
}
.btn-menu:hover {
  border-color: var(--amber); color: var(--amber);
  box-shadow: 0 0 18px rgba(232, 163, 61, 0.25);
}
.btn-menu-small { font-size: 12px; min-width: 210px; padding: 9px 20px; opacity: 0.7; }
.streamer-row {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  border-top: 1px solid #26262e; border-bottom: 1px solid #26262e;
  padding: 10px 0; margin: 2px 0;
}
.streamer-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 4px;
  color: #6a6a78;
}
.title-credit { margin-top: 40px; color: #44444c; font-size: 11px; font-family: var(--font-mono); letter-spacing: 2px; }

/* ============ HOW TO PLAY ============ */
#how-screen { background: var(--bg); }
.how-inner {
  max-width: 660px; padding: 40px; border: 1px solid #2c2c34;
  background: var(--bg2); max-height: 82vh; overflow-y: auto;
}
.how-inner h2 { font-family: var(--font-creep); color: var(--amber); letter-spacing: 2px; margin-bottom: 22px; font-size: 26px; }
.how-inner ul { list-style: none; }
.how-inner li { padding: 9px 0; color: #b9b5aa; font-size: 15px; line-height: 1.55; border-bottom: 1px dashed #23232b; }
.how-inner li b { color: var(--bone); }
.how-inner .btn-menu { margin-top: 26px; }

/* ============ INTRO ============ */
#intro-screen { background: #000; flex-direction: column; }
.intro-text {
  max-width: 760px; padding: 30px; font-family: var(--font-creep);
  font-size: clamp(16px, 2.2vw, 22px); line-height: 1.9; color: #c9c5b9;
  text-align: center; white-space: pre-wrap;
}
.btn-skip {
  position: absolute; bottom: 28px; right: 32px; background: transparent;
  border: 1px solid #333; color: #777; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 2px; padding: 8px 18px;
}
.btn-skip:hover { color: var(--bone); border-color: #666; }

/* ============ CROSSHAIR / PROMPTS ============ */
#crosshair {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: rgba(216, 212, 200, 0.65); z-index: 6; pointer-events: none;
  box-shadow: 0 0 5px rgba(0,0,0,0.8);
}
#crosshair.on-target { background: var(--amber); box-shadow: 0 0 9px var(--amber); }
#interact-prompt {
  position: absolute; left: 50%; top: 56%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: clamp(15px, 1.4vw, 18px); letter-spacing: 2px;
  color: var(--bone); background: rgba(8, 8, 12, 0.72); padding: 7px 16px;
  border: 1px solid rgba(232, 163, 61, 0.5); border-radius: 4px; z-index: 6;
  pointer-events: none; text-shadow: 0 0 6px #000;
}
#interact-prompt .key-cap {
  display: inline-block; background: #2a2a34; border: 1px solid #55555f;
  border-radius: 3px; padding: 0 7px; margin-right: 8px; color: var(--amber);
}
#lock-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 16px; letter-spacing: 3px;
  color: var(--bone); background: rgba(5, 5, 8, 0.85); padding: 18px 34px;
  border: 1px solid #3c3c46; border-radius: 6px; z-index: 8; pointer-events: none;
  text-align: center; line-height: 2;
}

/* ============ SUBTITLES (memory echoes) ============ */
#subtitle-bar {
  position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%);
  width: min(820px, 90vw); z-index: 9; text-align: center; pointer-events: none;
}
#subtitle-text {
  /* the echoes carry the whole story — sized for a 480p phone stream */
  display: inline-block; font-family: var(--font-creep); font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.55; color: #f4e9c8; background: rgba(4, 4, 8, 0.82);
  padding: 10px 22px; border-radius: 4px; white-space: pre-wrap;
  text-shadow: 0 2px 6px #000;
}
#subtitle-text .sub-name { color: var(--amber); font-style: italic; }
#echo-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(20, 14, 2, 0.5) 100%);
  box-shadow: inset 0 0 180px rgba(232, 163, 61, 0.18);
}

/* ============ STREAM UI ============ */
#stream-ui { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
#stream-top {
  position: absolute; top: 14px; left: 16px; display: flex; gap: 14px;
  align-items: center; font-family: var(--font-mono); font-size: 15px; flex-wrap: wrap;
}
#memory-counter { font-size: 15px; font-weight: 700; }
#live-badge {
  background: var(--red); color: #fff; padding: 4px 10px; border-radius: 3px;
  font-weight: 700; letter-spacing: 1px; display: flex; align-items: center; gap: 6px;
}
#live-badge.offline { background: #333; color: #999; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: recBlink 1.6s steps(2) infinite; }
#viewer-count { color: var(--bone); text-shadow: 0 0 6px #000; }
#viewer-count.surge { color: var(--green-crt); }
#game-clock { color: var(--amber); letter-spacing: 2px; text-shadow: 0 0 8px #000; font-size: 15px; font-weight: 700; }
#game-clock.danger { color: var(--red-bright); animation: clockPulse 1s infinite; }
@keyframes clockPulse { 50% { opacity: 0.5; } }
#memory-counter { color: #c9b8e8; text-shadow: 0 0 8px #000; letter-spacing: 1px; }

#battery-ind { display: flex; align-items: center; gap: 6px; color: var(--bone); }
#battery-bar {
  display: inline-block; width: 46px; height: 10px; border: 1px solid #777;
  border-radius: 2px; overflow: hidden; background: #111;
}
#battery-fill { display: block; height: 100%; width: 100%; background: var(--green-crt); transition: width 0.5s, background 0.5s; }
#battery-fill.low { background: var(--red-bright); }

#chat-box {
  /* the stream, not the monitor, is the real display — sized for compression */
  position: absolute; right: 14px; top: 52px; width: 330px; max-height: 44vh;
  overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}
#chat-messages { display: flex; flex-direction: column; gap: 5px; }
.chat-msg {
  background: var(--chat-bg); border-left: 2px solid #3a3a44;
  padding: 6px 10px; font-size: 16px; line-height: 1.4; border-radius: 0 3px 3px 0;
  color: #c7c3b8; animation: chatIn 0.25s ease-out; word-wrap: break-word;
}
.chat-msg .chat-user { font-weight: 700; margin-right: 5px; }
.chat-msg.chat-ghost {
  background: rgba(40, 0, 0, 0.85); border-left-color: var(--red-bright);
  color: var(--red-bright); font-family: var(--font-mono);
  font-size: 19px; letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(229, 56, 59, 0.9), 0 0 22px rgba(229, 56, 59, 0.5);
  animation: chatGhostIn 0.4s ease-out;
}

/* signal intrusion: ghost chat lines echo LARGE in the upper third */
#ghost-intrusion {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: clamp(20px, 2.4vw, 30px);
  color: var(--red-bright); letter-spacing: 4px; text-align: center;
  text-shadow: 0 0 16px rgba(229, 56, 59, 0.9); pointer-events: none;
  opacity: 0; z-index: 40; max-width: 80vw;
}
#ghost-intrusion.show { animation: intrusion 2.1s steps(8) forwards; }
@keyframes intrusion {
  0% { opacity: 0; transform: translateX(-50%) skewX(0); }
  8% { opacity: 0.95; transform: translateX(-50.4%) skewX(-2deg); }
  30% { opacity: 0.85; transform: translateX(-49.7%) skewX(1deg); }
  70% { opacity: 0.85; transform: translateX(-50.2%) skewX(0); }
  100% { opacity: 0; transform: translateX(-50%) skewX(0.5deg); }
}
.chat-msg.chat-sys { border-left-color: var(--amber); color: var(--amber-dim); font-style: italic; }
@keyframes chatIn { from { opacity: 0; transform: translateX(20px); } }
@keyframes chatGhostIn {
  0% { opacity: 0; transform: scale(1.15); filter: blur(3px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* ============ FEAR METER ============ */
#fear-wrap { position: absolute; left: 16px; top: 52px; z-index: 7; display: flex; align-items: center; gap: 8px; pointer-events: none; }
#fear-label { font-size: 17px; filter: grayscale(0.4); }
#fear-meter { width: 120px; height: 9px; background: rgba(20, 20, 26, 0.8); border: 1px solid #3a3a44; border-radius: 5px; overflow: hidden; }
#fear-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #5e4a1e, var(--amber), var(--red-bright)); transition: width 0.7s; }
#fear-wrap.panic #fear-label { animation: fearShake 0.3s infinite; }
@keyframes fearShake {
  0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, -2px); }
}

/* ============ HUD BUTTONS ============ */
#hud-buttons { position: absolute; bottom: 86px; right: 16px; z-index: 8; display: flex; flex-direction: column; gap: 10px; }
.hud-btn { width: 46px; height: 46px; font-size: 20px; background: rgba(12, 12, 18, 0.7); border: 1px solid #3a3a44; border-radius: 6px; transition: all 0.2s; }
.hud-btn:hover { border-color: var(--amber); box-shadow: 0 0 12px rgba(232, 163, 61, 0.3); }
.hud-btn.active { border-color: var(--amber); background: rgba(70, 50, 14, 0.6); }

/* ============ DIALOGUE ============ */
#dialogue {
  position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%);
  width: min(720px, 86vw); background: rgba(6, 6, 10, 0.88);
  border: 1px solid #2e2e38; border-radius: 6px; padding: 18px 26px;
  z-index: 9; cursor: pointer; backdrop-filter: blur(3px);
}
#dialogue-text { font-family: var(--font-creep); font-size: 17px; line-height: 1.65; color: #d5d1c5; min-height: 28px; white-space: pre-wrap; }
#dialogue-text .d-em { color: var(--red-bright); }
#dialogue-text .d-item { color: var(--amber); font-weight: 700; }
#dialogue-more { position: absolute; bottom: 6px; right: 14px; color: var(--amber); font-size: 12px; animation: bobble 1s infinite; transition: opacity 0.3s; }
#dialogue.typing #dialogue-more { opacity: 0.12; animation: none; }
@keyframes bobble { 50% { transform: translateY(3px); } }

/* ============ INVENTORY ============ */
#inventory-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 72px;
  background: linear-gradient(transparent, rgba(4, 4, 8, 0.95) 30%);
  display: flex; align-items: center; justify-content: center; z-index: 8;
  pointer-events: none;
}
#inventory-slots { display: flex; gap: 10px; pointer-events: auto; }
.inv-slot {
  width: 52px; height: 52px; background: rgba(16, 16, 22, 0.85);
  border: 1px solid #34343e; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  transition: all 0.18s; position: relative;
}
.inv-slot svg { width: 38px; height: 38px; pointer-events: none; }
.inv-slot:hover { border-color: var(--amber); transform: translateY(-4px); }
.inv-slot.selected { border-color: var(--amber); box-shadow: 0 0 16px rgba(232, 163, 61, 0.5); transform: translateY(-6px); background: rgba(60, 44, 14, 0.7); }
.inv-slot.flash-new { animation: invNew 0.9s ease-out 2; }
@keyframes invNew { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 22px var(--amber); border-color: var(--amber); } }
.inv-tooltip {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  background: #15151c; border: 1px solid #3c3c46; padding: 5px 11px;
  font-size: 12px; white-space: nowrap; border-radius: 4px; pointer-events: none;
  opacity: 0; transition: opacity 0.15s; z-index: 20; color: var(--bone);
}
.inv-slot:hover .inv-tooltip { opacity: 1; }

/* ============ JOURNAL ============ */
#journal { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; }
.journal-page {
  width: min(580px, 90vw); max-height: 80vh; overflow-y: auto;
  background: linear-gradient(160deg, #181610, #100f0b);
  border: 1px solid #4a4232; padding: 34px 38px; position: relative;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
}
.journal-page h3 { font-family: var(--font-creep); color: var(--amber); letter-spacing: 2px; font-size: 18px; margin: 18px 0 10px; border-bottom: 1px solid #3a3424; padding-bottom: 6px; }
.journal-page h3:first-child { margin-top: 0; }
.j-obj { padding: 7px 0 7px 24px; position: relative; color: #c4c0b2; font-size: 14px; line-height: 1.5; }
.j-obj::before { content: "☐"; position: absolute; left: 0; color: var(--amber-dim); }
.j-obj.done { color: #5d594e; text-decoration: line-through; }
.j-obj.done::before { content: "☑"; color: #4c6b2f; }
.j-mem {
  padding: 8px 12px; margin: 7px 0; border-left: 2px solid #6a5a9e;
  font-size: 13px; color: #b3aecf; background: rgba(60, 50, 100, 0.12); line-height: 1.5;
}
.j-mem.locked { color: #4c4856; border-left-color: #34303e; background: rgba(30, 28, 40, 0.2); font-style: italic; }
.j-clue {
  padding: 8px 12px; margin: 7px 0; background: rgba(60, 50, 28, 0.18);
  border-left: 2px solid var(--amber-dim); font-size: 13px; color: #b3ae9f;
  font-family: var(--font-mono); line-height: 1.5;
}
.btn-close { position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: #8a8578; font-size: 20px; transition: color 0.2s; }
.btn-close:hover { color: var(--red-bright); }

/* ============ MODAL (puzzles & closeups) ============ */
#modal { position: absolute; inset: 0; z-index: 32; background: rgba(0, 0, 0, 0.82); display: flex; align-items: center; justify-content: center; }
#modal-content { position: relative; max-width: 92vw; max-height: 86vh; }
#btn-modal-close { top: 14px; right: 18px; font-size: 26px; z-index: 5; position: absolute; background: rgba(0,0,0,0.5); border-radius: 50%; width: 38px; height: 38px; }

.puzzle-box {
  background: linear-gradient(170deg, #14131a, #0a0a10);
  border: 1px solid #38343e; padding: 30px 36px; border-radius: 8px;
  min-width: min(480px, 88vw); text-align: center;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.95), inset 0 0 40px rgba(0,0,0,0.5);
}
.puzzle-box h3 { font-family: var(--font-creep); color: var(--amber); margin-bottom: 8px; letter-spacing: 2px; font-size: 21px; }
.puzzle-box .puzzle-desc { color: #97927f; font-size: 13.5px; margin-bottom: 22px; line-height: 1.6; }
.puzzle-area { display: flex; justify-content: center; margin-bottom: 18px; }
.puzzle-feedback { min-height: 22px; font-family: var(--font-mono); font-size: 13px; }
.puzzle-feedback.ok { color: var(--green-crt); }
.puzzle-feedback.bad { color: var(--red-bright); animation: fearShake 0.3s 2; }

.dial-row { display: flex; gap: 14px; }
.dial { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dial button { background: #1c1b24; border: 1px solid #3c3a46; color: var(--amber); width: 44px; height: 30px; font-size: 15px; }
.dial button:hover { background: #2c2a38; }
.dial .dial-val {
  width: 48px; height: 56px; background: #060608; border: 1px solid #4c4856;
  color: var(--bone); font-family: var(--font-mono); font-size: 30px;
  display: flex; align-items: center; justify-content: center; border-radius: 4px;
  box-shadow: inset 0 4px 14px rgba(0,0,0,0.9);
}

.keypad { display: grid; grid-template-columns: repeat(3, 64px); gap: 9px; }
.keypad button { height: 52px; background: #16151d; border: 1px solid #3a3846; color: var(--bone); font-size: 19px; font-family: var(--font-mono); border-radius: 5px; }
.keypad button:hover { background: #262433; border-color: var(--amber); }
.keypad-display {
  grid-column: 1 / -1; height: 50px; background: #02050b; border: 1px solid #2a3a2a;
  color: var(--green-crt); font-family: var(--font-mono); font-size: 26px;
  display: flex; align-items: center; justify-content: center; letter-spacing: 9px;
  border-radius: 4px; text-shadow: 0 0 9px rgba(158, 240, 26, 0.6);
}

.name-input {
  background: #060608; border: 1px solid #5c2a2a; color: var(--red-bright);
  font-family: var(--font-mono); font-size: 24px; letter-spacing: 6px;
  text-align: center; padding: 13px 18px; width: min(360px, 80vw);
  text-transform: uppercase; border-radius: 4px; outline: none;
}
.name-input:focus { box-shadow: 0 0 24px rgba(164, 22, 26, 0.5); }

.btn-puzzle {
  background: rgba(164, 22, 26, 0.18); border: 1px solid var(--red);
  color: var(--bone); font-family: var(--font-mono); letter-spacing: 3px;
  padding: 12px 34px; margin-top: 14px; font-size: 14px; transition: all 0.2s;
}
.btn-puzzle:hover { background: rgba(164, 22, 26, 0.5); box-shadow: 0 0 20px rgba(164, 22, 26, 0.4); }

.opt-grid { display: grid; gap: 10px; justify-content: center; }
.opt-tile {
  background: #14131a; border: 1px solid #38343e; border-radius: 6px;
  cursor: pointer; transition: all 0.15s; padding: 6px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.opt-tile:hover { border-color: var(--amber); transform: scale(1.05); }
.opt-tile svg { pointer-events: none; }
.opt-tile .opt-label { font-size: 11px; color: #97927f; margin-top: 4px; font-family: var(--font-mono); }

.seq-display { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; min-height: 44px; }
.seq-cell { width: 44px; height: 44px; border: 1px dashed #4a4656; border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.seq-cell.filled { border-style: solid; border-color: var(--amber-dim); background: #1a1822; }

.paper {
  background: linear-gradient(165deg, #c9c0a8, #a89e85 90%);
  color: #2b261c; padding: 34px 40px; max-width: min(540px, 86vw);
  font-family: var(--font-creep); line-height: 1.75; font-size: 15.5px;
  box-shadow: 0 14px 60px rgba(0, 0, 0, 0.95); transform: rotate(-0.6deg);
  max-height: 75vh; overflow-y: auto; white-space: pre-wrap;
}
.paper h4 { margin-bottom: 12px; font-size: 18px; letter-spacing: 1px; }
.paper .paper-red { color: #7c1410; font-weight: 700; }
.paper .paper-scrawl { font-family: var(--font-creep); font-style: italic; font-size: 19px; color: #5c1410; transform: rotate(-1.2deg); display: inline-block; }

/* ============ HIDE MINI-GAME ============ */
#hide-overlay { position: absolute; inset: 0; z-index: 40; background: #000; }
#hide-slats {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0.97) 0 11%, rgba(10, 8, 8, 0.25) 11% 14%);
  z-index: 3; pointer-events: none;
}
#hide-instruction {
  position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); color: var(--red-bright); font-size: 17px;
  letter-spacing: 4px; z-index: 5; text-align: center; line-height: 2;
  text-shadow: 0 0 12px rgba(229, 56, 59, 0.8); animation: clockPulse 1.2s infinite;
}
#hide-ghost-layer { position: absolute; inset: 0; z-index: 2; }

/* ============ JUMPSCARE ============ */
#jumpscare-layer {
  position: absolute; inset: 0; z-index: 60; background: #000;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#jumpscare-layer svg { width: 100%; height: 100%; }
.js-shake { animation: jsShake 0.08s infinite; }
@keyframes jsShake {
  0% { transform: translate(0, 0) scale(1.02); } 25% { transform: translate(-14px, 8px) scale(1.05); }
  50% { transform: translate(11px, -12px) scale(1.03); } 75% { transform: translate(-8px, -9px) scale(1.06); }
  100% { transform: translate(13px, 10px) scale(1.04); }
}

/* ============ VHS / CRT OVERLAY ============ */
#vhs-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
#vhs-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, 0.14) 2px 4px);
  mix-blend-mode: multiply;
}
/* base grain lives in the shader post pass (js/post.js) when it runs (body.post-on);
   this element carries the fallback grain on WebGL1/degraded machines and the
   heavy glitch-burst static everywhere */
#vhs-noise { position: absolute; inset: 0; opacity: 0.05; overflow: hidden; }
/* display:none, not opacity:0 — the invisible layer was still compositing an
   infinite steps() animation on every machine running the shader grain */
body.post-on #vhs-noise { display: none; }
body.post-on.glitching #vhs-noise { display: block; opacity: 0.3; }
#vhs-noise::before {
  content: ""; position: absolute; inset: -18%;
  background-image: repeating-conic-gradient(#000 0 0.0004%, #fff 0 0.0008%);
  animation: vhsNoise 0.25s steps(3) infinite;
}
@keyframes vhsNoise {
  0% { transform: translate(0, 0); } 33% { transform: translate(-2%, 1.4%); }
  66% { transform: translate(1.7%, -2.2%); } 100% { transform: translate(-1%, 2%); }
}
#vhs-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.55) 100%); }
body.glitching #vhs-noise { opacity: 0.3; }
body.glitching #c3d { animation: glitchShift 0.12s steps(2) infinite; }
@keyframes glitchShift {
  0% { transform: translate(0) skewX(0); filter: hue-rotate(0); }
  50% { transform: translate(-5px, 2px) skewX(1.5deg); filter: hue-rotate(-30deg) saturate(2); }
  100% { transform: translate(4px, -2px) skewX(-1deg); filter: hue-rotate(20deg); }
}

.glitchable { position: relative; }
body.glitching .glitchable::before,
body.glitching .glitchable::after { content: attr(data-text); position: absolute; inset: 0; }
body.glitching .glitchable::before { color: #0ff; transform: translate(-3px, 1px); opacity: 0.6; clip-path: inset(20% 0 40% 0); }
body.glitching .glitchable::after { color: #f00; transform: translate(3px, -1px); opacity: 0.6; clip-path: inset(55% 0 15% 0); }

body.shake-hard { animation: jsShake 0.09s 6; }

/* pickup card — taking a thing is a moment */
#item-card {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; z-index: 12; opacity: 0;
}
#item-card.show { animation: itemCard 1.1s ease-out forwards; }
@keyframes itemCard {
  0% { opacity: 0; transform: translate(-50%, -38%) scale(0.7); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -56%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -64%) scale(1.02); }
}
#item-card .item-card-icon svg { width: 54px; height: 54px; filter: drop-shadow(0 0 14px rgba(232,163,61,0.5)); }
#item-card .item-card-name {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 3px;
  color: #e8a33d; text-shadow: 0 0 8px #000; margin-top: 4px;
}

/* night-cam auto-gain fallback when the shader path is off (WebGL1/degraded) */
body.nightcam #c3d { filter: brightness(1.55) saturate(0.45) sepia(0.15) hue-rotate(60deg) contrast(0.92); }
body.red-pulse #vhs-vignette { background: radial-gradient(ellipse at center, transparent 35%, rgba(120, 6, 8, 0.55) 100%); }

/* Fake browser-freeze scare */
body.fake-freeze * { animation-play-state: paused !important; transition: none !important; }
body.fake-freeze #vhs-noise::before { animation-play-state: paused !important; }

/* ============ DEATH SCREEN ============ */
#death-screen {
  position: absolute; inset: 0; z-index: 70; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}
#death-title {
  font-family: var(--font-creep); color: var(--red-bright); font-size: clamp(34px, 6vw, 64px);
  letter-spacing: 8px; margin-bottom: 18px;
  text-shadow: 0 0 50px rgba(164, 22, 26, 0.8);
  animation: deathIn 2.2s ease-out;
}
@keyframes deathIn {
  0% { opacity: 0; transform: scale(2.6); filter: blur(14px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
#death-text { color: #8a8578; font-family: var(--font-creep); font-style: italic; margin-bottom: 38px; font-size: 17px; }

/* ============ ENDING ============ */
#ending-screen { background: #000; }
.ending-inner { text-align: center; max-width: 720px; padding: 30px; animation: endingFade 3s ease-out; }
@keyframes endingFade { from { opacity: 0; } }
#ending-tag { font-family: var(--font-mono); color: #6e6e78; letter-spacing: 5px; font-size: 13px; margin-bottom: 16px; text-transform: uppercase; }
#ending-title { font-family: var(--font-creep); font-size: clamp(34px, 6.5vw, 68px); letter-spacing: 4px; margin-bottom: 26px; }
#ending-title.end-good { color: var(--amber); text-shadow: 0 0 44px rgba(232, 163, 61, 0.5); }
#ending-title.end-bad { color: var(--red-bright); text-shadow: 0 0 44px rgba(164, 22, 26, 0.7); }
#ending-title.end-secret { color: #9b7ede; text-shadow: 0 0 44px rgba(155, 126, 222, 0.6); }
#ending-text { font-family: var(--font-creep); font-size: 17px; line-height: 1.9; color: #b9b5aa; margin-bottom: 30px; white-space: pre-wrap; }
#ending-stats { font-family: var(--font-mono); font-size: 13px; color: #5d594e; line-height: 2; margin-bottom: 34px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 760px) {
  #chat-box { width: 170px; top: 46px; }
  .chat-msg { font-size: 10.5px; }
  #fear-meter { width: 80px; }
  .btn-menu { min-width: 230px; font-size: 14px; }
  #dialogue { bottom: 84px; padding: 13px 17px; }
  #dialogue-text { font-size: 14.5px; }
  .inv-slot { width: 44px; height: 44px; }
  .inv-slot svg { width: 32px; height: 32px; }
  #hud-buttons { bottom: 78px; }
  .puzzle-box { padding: 20px 16px; min-width: 0; }
  .keypad { grid-template-columns: repeat(3, 56px); }
}