:root {
  --brightness: 100%;
  --contrast: 110%;
  --danger: #b31322;
  --safe: #54b96c;
  --amber: #e4b85d;
  --glass: rgba(8, 18, 19, 0.74);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020403;
  color: #e7e0cf;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.app {
  position: relative;
  width: 100vw;
  height: 100vh;
  filter: brightness(var(--brightness)) contrast(var(--contrast));
  background: #020403;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
}

.screen.active {
  display: block;
}

.vignette,
.crt-lines,
.flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
}

.vignette {
  background: radial-gradient(circle at 50% 45%, transparent 30%, rgba(0, 0, 0, 0.45) 62%, rgba(0, 0, 0, 0.92) 100%);
}

.crt-lines {
  z-index: 82;
  opacity: 0.16;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: screen;
}

.flash {
  opacity: 0;
  background: #e8f3df;
}

.flash.on {
  animation: flashBlink 170ms ease-out;
}

.primary-btn,
.ghost-btn {
  width: 190px;
  min-height: 46px;
  border-radius: 4px;
  border: 1px solid rgba(231, 224, 207, 0.45);
  color: #f7f0dd;
  background: rgba(7, 10, 9, 0.88);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.primary-btn {
  background: #8f121b;
  border-color: #e0524f;
}

.primary-btn:hover,
.ghost-btn:hover {
  transform: translateY(-1px);
  background: #2b3430;
}

.primary-btn:hover {
  background: #ad1724;
}

.hidden {
  display: none;
}

.menu-screen {
  background: linear-gradient(#050908, #121210 65%, #050403);
}

.menu-room {
  position: absolute;
  inset: 0;
  perspective: 900px;
}

.menu-room::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px) 0 0 / 88px 100%,
    radial-gradient(circle at 50% 24%, rgba(190, 168, 96, 0.16), transparent 34%);
}

.menu-window,
.room-window {
  position: absolute;
  top: 18vh;
  width: 18vw;
  min-width: 150px;
  height: 28vh;
  border: 10px solid #151a18;
  background:
    linear-gradient(rgba(74, 96, 88, 0.2), rgba(2, 6, 7, 0.7)),
    repeating-linear-gradient(90deg, transparent, transparent 36px, rgba(255,255,255,0.08) 38px);
  box-shadow: inset 0 0 35px #010101, 0 0 24px rgba(0,0,0,0.7);
}

.menu-window.left {
  left: 11vw;
}

.menu-window.right {
  right: 13vw;
}

.menu-desk,
.desk {
  position: absolute;
  left: 12vw;
  right: 12vw;
  bottom: 0;
  height: 24vh;
  background: linear-gradient(180deg, #1d1712, #080604);
  border-top: 5px solid #32261b;
  box-shadow: 0 -26px 50px rgba(0,0,0,0.55);
}

.menu-monitor {
  position: absolute;
  left: calc(50% - 130px);
  bottom: 20vh;
  width: 260px;
  height: 155px;
  border: 15px solid #080b0a;
  background: radial-gradient(circle at center, rgba(39, 119, 101, 0.26), #020404 62%);
  box-shadow: 0 0 45px rgba(29, 119, 98, 0.18);
}

.monitor-light {
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(100, 214, 176, 0.2);
}

.menu-keyboard {
  position: absolute;
  left: calc(50% - 170px);
  bottom: 12vh;
  width: 340px;
  height: 38px;
  transform: skewX(-16deg);
  background: repeating-linear-gradient(90deg, #080908, #080908 18px, #131514 19px, #131514 30px);
}

.menu-panel {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 5;
  display: flex;
  width: min(420px, 88vw);
  transform: translate(-50%, -50%);
  align-items: center;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

.chapter {
  margin: 0;
  color: #d4b36b;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(54px, 10vw, 114px);
  line-height: 0.9;
  text-shadow: 0 0 22px rgba(222, 54, 60, 0.28);
}

.settings-screen,
.loading-screen,
.cutscene-screen,
.gameover-screen {
  background:
    radial-gradient(circle at center, rgba(56, 63, 54, 0.2), transparent 42%),
    linear-gradient(#060908, #010202);
}

.settings-panel,
.loading-box,
.dialogue-box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(460px, 90vw);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(231, 224, 207, 0.2);
  background: var(--glass);
  padding: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}

.settings-panel {
  display: grid;
  gap: 18px;
}

.settings-panel h2 {
  margin: 0;
}

.settings-panel label {
  display: grid;
  gap: 8px;
}

.check-row {
  grid-template-columns: 22px 1fr;
  align-items: center;
}

input[type="range"] {
  accent-color: #b9342e;
}

.loading-title {
  margin-bottom: 18px;
  font-size: 18px;
}

.loading-bar {
  height: 12px;
  overflow: hidden;
  border: 1px solid #53635d;
  background: #070a09;
}

.loading-bar span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #7c171c, #d8b05a);
}

.loading-tip {
  min-height: 42px;
  color: #bfb8a6;
}

.phone-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.phone {
  width: 190px;
  height: 92px;
  border-radius: 14px 14px 6px 6px;
  background: linear-gradient(#2b2e2a, #090a09);
  box-shadow: 0 0 52px rgba(228,184,93,0.16);
}

.phone::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 42px;
  margin: -48px 0 0 -20px;
  border-radius: 50px;
  background: #121513;
  box-shadow: inset 0 -8px 20px #020202;
  animation: phoneShake 900ms infinite;
}

.phone-wire {
  position: absolute;
  width: 220px;
  height: 80px;
  margin-top: 140px;
  border-bottom: 3px dashed rgba(231,224,207,0.25);
  border-radius: 50%;
}

.dialogue-box {
  top: auto;
  bottom: 7vh;
  transform: translateX(-50%);
}

.speaker {
  margin: 0 0 8px;
  color: var(--amber);
  font-weight: 700;
}

#dialogueText {
  min-height: 68px;
  margin: 0 0 18px;
  line-height: 1.55;
}

.game-screen {
  background: #030504;
}

.security-room {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(183, 147, 69, 0.19), transparent 22%),
    linear-gradient(90deg, rgba(0,0,0,0.52), transparent 28%, transparent 72%, rgba(0,0,0,0.52)),
    linear-gradient(#111613, #050604 70%);
}

.security-room::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px) 0 0 / 94px 100%,
    linear-gradient(0deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 100% 74px;
}

.ceiling-lamp {
  position: absolute;
  left: 50%;
  top: 0;
  width: 130px;
  height: 80px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(244, 204, 111, 0.65), rgba(124, 81, 38, 0.14) 48%, transparent 70%);
  animation: lampFlicker 5s infinite;
}

.fan-shadow {
  position: absolute;
  left: 50%;
  top: 8vh;
  width: 420px;
  height: 420px;
  margin-left: -210px;
  opacity: 0.13;
  background: conic-gradient(from 0deg, transparent, #000 18deg, transparent 36deg, transparent 120deg, #000 138deg, transparent 156deg, transparent 240deg, #000 258deg, transparent 276deg);
  animation: fanSpin 1.8s linear infinite;
}

.window-a {
  left: 6vw;
}

.window-b {
  right: 6vw;
}

.back-wall {
  position: absolute;
  right: 7vw;
  bottom: 30vh;
  z-index: 3;
  display: grid;
  gap: 10px;
}

.door-control {
  display: grid;
  width: 122px;
  height: 42px;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 9px;
  border: 1px solid #48534f;
  border-radius: 3px;
  color: #ded8c9;
  background: rgba(8, 12, 11, 0.9);
}

.door-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--safe);
  box-shadow: 0 0 12px var(--safe);
}

.door-control.closed .door-light {
  background: var(--danger);
  box-shadow: 0 0 12px var(--danger);
}

.door-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.electronic-door {
  position: absolute;
  top: 18vh;
  width: 10vw;
  min-width: 86px;
  height: 58vh;
  transform: translateY(-105%);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 18%, rgba(0,0,0,0.28) 50%),
    repeating-linear-gradient(0deg, #252b29, #252b29 18px, #151918 20px);
  border: 2px solid #434c47;
  box-shadow: 0 12px 38px rgba(0,0,0,0.75);
  transition: transform 360ms cubic-bezier(.2,.9,.2,1);
}

.electronic-door.closed {
  transform: translateY(0);
}

.electronic-door[data-door-panel="0"] {
  left: 36vw;
}

.electronic-door[data-door-panel="1"] {
  left: 48vw;
}

.electronic-door[data-door-panel="2"] {
  left: 60vw;
}

.desk {
  left: 0;
  right: 0;
  height: 25vh;
}

.desk-glow {
  position: absolute;
  left: 50%;
  bottom: 12vh;
  width: min(420px, 80vw);
  height: 140px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(49, 180, 143, 0.14), transparent 65%);
}

.cctv-computer {
  position: absolute;
  left: calc(50% - 115px);
  bottom: 16vh;
  width: 230px;
  height: 110px;
  border: 12px solid #070a09;
  background: #03100f;
}

.power-dot {
  position: absolute;
  right: 8px;
  bottom: -24px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #52d76e;
  box-shadow: 0 0 12px #52d76e;
}

.camera-monitor {
  position: absolute;
  left: 50%;
  bottom: -102vh;
  z-index: 30;
  width: min(980px, 94vw);
  height: min(680px, 86vh);
  transform: translateX(-50%);
  transition: bottom 260ms cubic-bezier(.16,.82,.21,1);
}

.camera-monitor.open {
  bottom: 4vh;
}

.camera-shell {
  width: 100%;
  height: 100%;
  padding: 18px;
  border: 12px solid #050706;
  border-radius: 5px;
  background: #111614;
  box-shadow: 0 0 90px rgba(0,0,0,0.86), inset 0 0 18px rgba(255,255,255,0.04);
}

.camera-view {
  position: relative;
  height: calc(100% - 118px);
  overflow: hidden;
  border: 1px solid rgba(180, 235, 207, 0.22);
  background-color: #07100f;
  background-position: center;
  background-size: cover;
}

.camera-view::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.64;
}

.camera-view.cam-0::before { background: linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.64)), repeating-linear-gradient(90deg, #283b32 0 80px, #1d2d27 80px 160px), linear-gradient(0deg, #3d4935, #0c1512 54%); }
.camera-view.cam-1::before { background: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.7)), radial-gradient(circle at 30% 30%, rgba(223,196,98,.24), transparent 16%), repeating-linear-gradient(0deg, #17211f 0 64px, #24302d 66px 70px); }
.camera-view.cam-2::before { background: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.68)), radial-gradient(circle at 50% 22%, rgba(198,226,201,.18), transparent 20%), linear-gradient(90deg, transparent 38%, #d8d1b9 39% 60%, transparent 61%), linear-gradient(#1a2422, #050706); }
.camera-view.cam-3::before { background: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.78)), repeating-linear-gradient(90deg, #111715 0 42px, #24251f 46px 50px), radial-gradient(circle at 82% 46%, rgba(124, 153, 98, .28), transparent 18%); }
.camera-view.cam-4::before { background: linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.72)), linear-gradient(90deg, #101614, #2b2b24 35% 65%, #111614), repeating-linear-gradient(0deg, transparent 0 44px, rgba(255,255,255,.08) 46px 48px); }
.camera-view.cam-5::before { background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.68)), linear-gradient(90deg, #060808, #353830 48%, #070909), repeating-linear-gradient(0deg, #111 0 30px, #191d1b 32px 60px); }
.camera-view.cam-6::before { background: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.7)), linear-gradient(90deg, #070909, #26261f 50%, #060808), radial-gradient(circle at 50% 12%, rgba(221,185,80,.34), transparent 11%); }
.camera-view.cam-7::before { background: linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,.74)), linear-gradient(90deg, #090b0b, #1d2d27 47%, #090b0b), repeating-linear-gradient(90deg, transparent 0 84px, rgba(255,255,255,.06) 86px 88px); }
.camera-view.cam-8::before { background: linear-gradient(rgba(0,0,0,.36), rgba(0,0,0,.72)), radial-gradient(circle at 20% 62%, rgba(78, 168, 147, .22), transparent 18%), linear-gradient(#171919, #030505); }
.camera-view.cam-9::before { background: linear-gradient(rgba(0,0,0,.26), rgba(0,0,0,.68)), linear-gradient(90deg, #232118 0 14%, #0d1512 15% 80%, #252319 81%), repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.05) 40px); }
.camera-view.cam-10::before { background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.74)), linear-gradient(90deg, #111614, #33352d 36% 64%, #111614), radial-gradient(circle at 50% 20%, rgba(223,203,132,.2), transparent 16%); }

.camera-static {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.22;
  background-image: radial-gradient(circle, rgba(255,255,255,.85) 1px, transparent 1px);
  background-size: 4px 4px;
  animation: staticShift 160ms steps(2) infinite;
}

.camera-glitch {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0.16;
  background: repeating-linear-gradient(0deg, transparent 0 28px, rgba(149, 255, 217, 0.16) 30px, transparent 33px);
  animation: glitchSlide 1.4s infinite;
}

.camera-monitor.danger .camera-glitch {
  opacity: 0.36;
  animation-duration: 520ms;
}

.intruder-shadow {
  position: absolute;
  left: 56%;
  bottom: 3%;
  z-index: 2;
  width: 96px;
  height: 250px;
  display: none;
  transform: translateX(-50%);
  border-radius: 42% 42% 10% 10%;
  background: linear-gradient(#050505, #010101);
  box-shadow: 0 0 28px rgba(0,0,0,0.86);
}

.intruder-shadow::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 28px;
  width: 15px;
  height: 8px;
  background: #d8ccb7;
  box-shadow: 44px 0 #d8ccb7;
}

.intruder-shadow.visible {
  display: block;
  animation: shadowJitter 1.2s infinite;
}

.camera-overlay {
  position: absolute;
  inset: 16px;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #dcefe7;
  text-shadow: 0 0 8px #000;
}

.camera-overlay strong,
.camera-overlay span {
  display: block;
}

#recordingDot {
  color: #ff4b4b;
  animation: recPulse 1s infinite;
}

.camera-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.camera-buttons button {
  min-height: 38px;
  border: 1px solid rgba(180, 235, 207, 0.24);
  border-radius: 3px;
  color: #cfe0d8;
  background: #0b1110;
}

.camera-buttons button.active {
  border-color: #d8b05a;
  color: #fff4ce;
  background: #312817;
}

.hud {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 18px;
  z-index: 50;
  display: grid;
  grid-template-columns: 110px minmax(150px, 260px) minmax(150px, 260px);
  gap: 12px;
  align-items: center;
  pointer-events: none;
}

.timebox,
.meter {
  min-height: 42px;
  border: 1px solid rgba(231,224,207,.18);
  background: rgba(3, 6, 5, 0.74);
  padding: 9px 12px;
}

.timebox {
  color: #f5dda1;
  font-weight: 700;
}

.meter {
  display: grid;
  grid-template-columns: 72px 1fr 42px;
  align-items: center;
  gap: 8px;
}

.meter label,
.meter b {
  font-size: 13px;
}

.meter span {
  height: 10px;
  overflow: hidden;
  background: #151a18;
}

.meter i {
  display: block;
  width: 0;
  height: 100%;
  background: #d8b05a;
}

.meter.fear i {
  background: #b31322;
}

.breath-warning {
  position: absolute;
  left: 50%;
  top: 84px;
  z-index: 45;
  display: none;
  transform: translateX(-50%);
  color: #ffb0a8;
  font-size: 13px;
  letter-spacing: 2px;
  text-shadow: 0 0 12px #b31322;
}

.breath-warning.visible {
  display: block;
  animation: recPulse 800ms infinite;
}

.space-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 45;
  transform: translateX(-50%);
  color: rgba(231,224,207,.72);
  font-size: 13px;
}

.gameover-screen {
  z-index: 90;
  text-align: center;
}

.jumpscare-face {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(440px, 86vw);
  height: min(560px, 70vh);
  transform: translate(-50%, -50%);
  border-radius: 44% 44% 18% 18%;
  background: radial-gradient(circle at 35% 32%, #fff7dd 0 5%, transparent 7%), radial-gradient(circle at 65% 32%, #fff7dd 0 5%, transparent 7%), linear-gradient(#060606, #010101);
  box-shadow: 0 0 80px rgba(179, 19, 34, 0.5);
  animation: scareJitter 120ms infinite;
}

.jumpscare-face::after {
  content: "";
  position: absolute;
  left: 32%;
  top: 62%;
  width: 36%;
  height: 12%;
  background: #e6d7c7;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 76% 28%, 65% 100%, 53% 28%, 42% 100%, 30% 28%, 18% 100%);
}

.gameover-screen h2,
.gameover-screen p,
.gameover-screen button {
  position: relative;
  z-index: 2;
}

.gameover-screen h2 {
  margin: 68vh 0 10px;
  font-size: clamp(38px, 9vw, 76px);
  color: #ffdad6;
}

.gameover-screen p {
  color: #d8cbb4;
}

@keyframes flashBlink {
  0% { opacity: 0; }
  24% { opacity: 0.92; }
  100% { opacity: 0; }
}

@keyframes phoneShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-2px) rotate(-1deg); }
  75% { transform: translateX(2px) rotate(1deg); }
}

@keyframes lampFlicker {
  0%, 92%, 100% { opacity: 1; }
  94% { opacity: .42; }
  96% { opacity: .82; }
}

@keyframes fanSpin {
  to { transform: rotate(360deg); }
}

@keyframes staticShift {
  to { transform: translate(4px, -4px); }
}

@keyframes glitchSlide {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(16px); }
  45% { transform: translateX(-10px); }
  52% { transform: translateX(12px); }
}

@keyframes shadowJitter {
  0%, 100% { transform: translateX(-50%); }
  50% { transform: translateX(-53%); }
}

@keyframes recPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@keyframes scareJitter {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-48%, -51%) scale(1.03); }
}

@media (max-width: 760px) {
  .hud {
    grid-template-columns: 1fr;
    right: auto;
    width: min(340px, calc(100vw - 28px));
  }

  .camera-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .camera-monitor {
    height: 82vh;
  }

  .back-wall {
    right: 3vw;
    bottom: 28vh;
  }

  .door-control {
    width: 98px;
  }
}