@font-face {
  font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/russo-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/russo-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F;
}

:root {
  --accent: #8f1d1d;
  --accent-bright: #c43a2f;
  --bone: #b8b2a6;
  --dim: #5c574d;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: 'Russo One', sans-serif; color: var(--bone); user-select: none; }

#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.screen { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.hidden { display: none !important; }

/* ---------- LOADING ---------- */
#loading { background: #030303; flex-direction: column; }
.load-box { text-align: center; }
.load-title { font-size: 64px; letter-spacing: 12px; color: #1a1a1a; text-shadow: 0 0 30px rgba(143,29,29,.25); animation: loadpulse 2.4s ease-in-out infinite; }
@keyframes loadpulse { 0%,100% { color:#161616; } 50% { color:#3a3531; } }
.load-bar { width: 320px; height: 2px; background: #181614; margin: 38px auto 14px; }
#load-fill { width: 0%; height: 100%; background: var(--accent); box-shadow: 0 0 12px var(--accent-bright); transition: width .3s; }
#load-status { font-size: 11px; letter-spacing: 3px; color: var(--dim); }

/* ---------- MENU ---------- */
#menu { flex-direction: column; background: #000; }
.menu-bg { position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: brightness(.85) saturate(.7); animation: bgdrift 40s ease-in-out infinite alternate; }
@keyframes bgdrift { from { transform: scale(1.02) translateX(-6px);} to { transform: scale(1.09) translateX(8px);} }
.menu-vignette { position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 25%, rgba(0,0,0,.88) 78%, #000 100%); }
.menu-content { position: relative; z-index: 2; text-align: center; }
.menu-sub { font-size: 12px; letter-spacing: 6px; color: var(--dim); margin-bottom: 10px; }
.menu-title { font-size: 96px; letter-spacing: 16px; color: #cfc8ba; text-shadow: 0 0 40px rgba(0,0,0,.9), 0 2px 0 #000; }
.accent { color: var(--accent-bright); text-shadow: 0 0 25px rgba(196,58,47,.5); }
.menu-tag { margin-top: 6px; font-size: 14px; letter-spacing: 3px; color: #6e675c; font-style: italic; }
.menu-buttons { margin-top: 48px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.mbtn { font-family: inherit; font-size: 17px; letter-spacing: 5px; padding: 13px 56px; min-width: 320px;
  color: var(--bone); background: rgba(8,7,6,.55); border: 1px solid #2e2a25; cursor: pointer;
  transition: all .18s ease; position: relative; backdrop-filter: blur(2px); }
.mbtn:hover { border-color: var(--accent-bright); color: #fff; background: rgba(64,12,10,.45);
  box-shadow: 0 0 24px rgba(143,29,29,.35), inset 0 0 18px rgba(143,29,29,.12); letter-spacing: 7px; }
.menu-foot { margin-top: 54px; font-size: 11px; letter-spacing: 4px; color: #4a453d; }

.flicker-slow { animation: flick 7s linear infinite; }
@keyframes flick {
  0%, 86%, 90%, 94%, 100% { opacity: 1; }
  87%, 89% { opacity: .35; }
  92%, 93.5% { opacity: .6; }
}

/* ---------- PAUSE / SETTINGS / ABOUT ---------- */
.pause-blur { position: absolute; inset: 0; background: rgba(0,0,0,.78); backdrop-filter: blur(6px); }
.pause-title { font-size: 44px; letter-spacing: 12px; color: #cfc8ba; margin-bottom: 8px; }
.settings-box, .about-box { background: rgba(10,9,8,.7); border: 1px solid #2a2622; padding: 44px 60px; }
.setting-row { display: flex; align-items: center; gap: 18px; margin: 22px 0; font-size: 13px; letter-spacing: 2px; }
.setting-row label { width: 190px; text-align: left; color: #948d80; }
.setting-row span { width: 36px; color: var(--accent-bright); }
input[type=range] { width: 220px; accent-color: var(--accent-bright); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent-bright); }
.about-box { max-width: 640px; }
.about-text { text-align: left; font-size: 14px; line-height: 1.75; color: #9b948a; font-family: Georgia, serif; }
.about-text p { margin-bottom: 12px; }
.about-text b { color: var(--accent-bright); }
.controls { margin: 18px auto 6px; border-collapse: collapse; font-family: 'Russo One'; font-size: 12px; }
.controls td { padding: 4px 18px; border: 1px solid #262220; letter-spacing: 2px; }
.controls td:first-child { color: var(--accent-bright); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px;
  background: rgba(255,255,255,.35); border-radius: 50%; }
#interact-hint { position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
  font-size: 15px; letter-spacing: 3px; color: #d8d2c4; text-shadow: 0 0 8px #000, 0 0 3px #000;
  background: rgba(0,0,0,.45); padding: 8px 22px; border: 1px solid rgba(184,178,166,.25); }
#hud-bottom { position: absolute; left: 28px; right: 28px; bottom: 22px; display: flex; justify-content: space-between; align-items: flex-end; }
.hud-bars { display: flex; flex-direction: column; gap: 8px; }
.hud-bar { display: flex; align-items: center; gap: 10px; }
.hud-bar-label { font-size: 9px; letter-spacing: 2px; color: rgba(148,141,128,.7); width: 64px; }
.hud-bar-track { width: 150px; height: 3px; background: rgba(255,255,255,.08); }
#stamina-fill { height: 100%; width: 100%; background: rgba(184,178,166,.55); transition: width .15s linear; }
#battery-fill { height: 100%; width: 100%; background: rgba(196,58,47,.6); transition: width .4s linear; }
#fuse-counter { font-size: 20px; letter-spacing: 3px; color: rgba(216,210,196,.8); text-shadow: 0 0 10px #000; }
#subtitle { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); white-space: nowrap;
  font-family: Georgia, serif; font-style: italic; font-size: 17px; color: rgba(190,182,170,.85);
  text-shadow: 0 0 10px #000, 0 1px 2px #000; letter-spacing: 1px; }

/* ---------- NOTE ---------- */
#note-overlay { background: rgba(0,0,0,.72); z-index: 60; }
.note-paper { width: 460px; max-width: 90vw; background: linear-gradient(160deg, #cfc5ab, #b3a98e 70%, #a2987d);
  color: #2c2417; padding: 44px 42px; box-shadow: 0 24px 80px rgba(0,0,0,.9);
  font-family: Georgia, serif; transform: rotate(-1.2deg); position: relative; }
.note-paper::before { content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 26px, rgba(60,45,20,.08) 27px); }
#note-text { font-size: 15.5px; line-height: 1.7; white-space: pre-wrap; position: relative; }
.note-close { margin-top: 26px; font-family: 'Russo One'; font-size: 10px; letter-spacing: 3px; color: #6d5f44; text-align: right; }

/* ---------- JUMPSCARE ---------- */
#jumpscare { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; align-items: center; justify-content: center; }
#jumpscare-img { width: 115vmax; height: 115vmax; object-fit: cover; animation: scare .9s steps(1) forwards, scarezoom .9s ease-in forwards; }
@keyframes scarezoom { from { transform: scale(.92) } to { transform: scale(1.25) translate(2%, -2%) } }
@keyframes scare {
  0% { filter: brightness(1.3) contrast(1.2); } 12% { filter: brightness(.4); }
  18% { filter: brightness(1.5) contrast(1.4) saturate(.6); } 30% { filter: brightness(.7); }
  38% { filter: brightness(1.6); } 100% { filter: brightness(1.2) contrast(1.3); }
}

/* ---------- DEATH / WIN ---------- */
#death { background: radial-gradient(circle at 50% 60%, #160202 0%, #000 75%); z-index: 95; }
.death-content, .win-content { text-align: center; animation: fadein 2.2s ease both; }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.death-title { font-size: 64px; letter-spacing: 10px; color: var(--accent-bright);
  text-shadow: 0 0 50px rgba(196,58,47,.55); animation: deathpulse 3s ease-in-out infinite; }
@keyframes deathpulse { 0%,100% { text-shadow: 0 0 35px rgba(196,58,47,.4) } 50% { text-shadow: 0 0 70px rgba(196,58,47,.8) } }
.death-stats { margin: 26px 0 10px; font-size: 13px; letter-spacing: 3px; color: var(--dim); line-height: 2; }
#win { background: radial-gradient(circle at 50% 40%, #0a0e08 0%, #000 80%); z-index: 95; }
.win-title { font-size: 58px; letter-spacing: 12px; color: #aab59a; text-shadow: 0 0 40px rgba(140,170,120,.25); }
.win-sub { margin-top: 14px; font-family: Georgia, serif; font-style: italic; font-size: 16px; color: #6e6a5e; }

/* damage vignette flash */
#damage-vignette { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(120,10,5,.55) 100%); transition: opacity .25s; }

@media (max-width: 760px) {
  .menu-title { font-size: 52px; letter-spacing: 8px; }
  .mbtn { min-width: 240px; font-size: 14px; }
}