@font-face {
  font-family: "Minecraft";
  src: url("../assets/fonts/Monocraft.ttf") format("truetype");
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* 16:9 stage that always covers the window, so the door hitbox stays on the door */
#stage, .cover {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}

#room {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Closed door cut out of closed_light.mp4 (x 1106, y 566, 372x712 px of the 2560x1440 frame),
   laid exactly over the doorway. Soft edges blend it into the room video. */
#door-closed {
  position: absolute;
  left: calc(1106 / 2560 * 100%);
  top: calc(566 / 1440 * 100%);
  width: calc(372 / 2560 * 100%);
  height: calc(712 / 1440 * 100%);
  visibility: hidden;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 2%, #000 98%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 2%, #000 98%, transparent);
  mask-composite: intersect;
}
#door-closed.visible { visibility: visible; }

#room-dark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  pointer-events: none;
}
body.power-out #room-dark { display: block; }
#room-dracula {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  pointer-events: none;
}
#room-dracula.visible { display: block; }
body.power-out #room-dracula { display: none; }

body.power-out #room,
body.power-out #door-closed { display: none; }
body.power-out #door,
body.power-out #cam-bar { display: none; }

/* ---------- Power meter ---------- */
#power-ui {
  position: fixed;
  left: 2.5vw;
  bottom: 3vh;
  z-index: 6;
  font-family: "Minecraft", monospace;
  font-size: clamp(14px, 1.45vw, 26px);
  line-height: 1.5;
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
  pointer-events: none;
  user-select: none;
}
#usage-bars { display: inline-flex; gap: 0.18em; vertical-align: -0.15em; }
#usage-bars i {
  display: none;
  width: 0.55em;
  height: 1em;
  box-shadow: 2px 2px 0 #3f3f3f;
}
#usage-bars i:nth-child(1) { background: #3ccf3c; }
#usage-bars i:nth-child(2) { background: #e5d43a; }
#usage-bars i:nth-child(3) { background: #e04040; }
#usage-bars i.on { display: inline-block; }

/* Dark oak door, measured from the room footage (percent of the frame) */
#door {
  position: absolute;
  left: 44.2%;
  top: 41.3%;
  width: 11.8%;
  height: 41.4%;
  cursor: pointer;
}

/* Camera monitor animation, drawn on a canvas over the whole room */
#cam-monitor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* While the camera is up (or moving) it blocks clicks on the room */
#cam-monitor.active { pointer-events: auto; }

/* Thin, wide bar near the bottom, like FNAF / FNAF 2 */
#cam-bar {
  position: fixed;
  left: 50%;
  bottom: 3vh;
  transform: translateX(-50%);
  width: 56vw;
  height: 6vh;
  min-height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}
#cam-bar svg {
  height: 70%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 3;
}

/* ---------- Camera system ---------- */
#cam-view {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: none;
  background: #000;
}
#cam-view.visible { display: block; }

.cam-feed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* hidden feeds stay loaded (not display:none), so a video never pops in before it has a
     picture ready - some graphics cards flash a blank blue frame when that happens */
  visibility: hidden;
}
.cam-feed.visible { visibility: visible; }

/* Moving TV static, drawn small and stretched for a grainy look */
#cam-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
/* complete static: covers the picture entirely */
#cam-static.full { mix-blend-mode: normal; }

#cam-panel {
  position: absolute;
  right: 2.5vw;
  bottom: 11vh;
  width: clamp(220px, 24vw, 420px);
  font-family: "Minecraft", monospace;
  color: #fff;
}

#cam-name {
  font-size: clamp(16px, 1.7vw, 30px);
  text-shadow: 2px 2px 0 #3f3f3f;
  margin-bottom: 0.6em;
}

#cam-map { width: 100%; display: block; overflow: visible; }

#cam-map .floors rect { fill: rgba(10, 12, 14, 0.72); }
#cam-map .floors .you-room { fill: rgba(255, 255, 255, 0.10); }
#cam-map .outside {
  fill: rgba(10, 12, 14, 0.35);
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 2;
  stroke-dasharray: 7 5;
}
#cam-map .walls {
  fill: none;
  stroke: #fff;
  stroke-width: 3.5;
  stroke-linecap: square;
}
#cam-map .door  { stroke: #fff; stroke-width: 1.5; fill: none; }
#cam-map .swing { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; fill: none; stroke-dasharray: 2 2; }
#cam-map .counter { fill: rgba(255, 255, 255, 0.35); }
#cam-map .ladder { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.5; }
#cam-map .ladder-link { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.5; stroke-dasharray: 3 3; }

#cam-map .floor-label, #cam-map .area-label {
  fill: rgba(255, 255, 255, 0.55);
  font-size: 10px;
}
#cam-map .you {
  fill: #fff;
  font-size: 11px;
  text-anchor: middle;
}

#cam-map .cam-btn { cursor: pointer; }
#cam-map .cam-cone { fill: rgba(255, 255, 255, 0.13); }
#cam-map .cam-btn rect {
  fill: #5c5c5c;
  stroke: #e0e0e0;
  stroke-width: 1.5;
}
#cam-map .cam-btn text {
  fill: #fff;
  font-size: 9px;
  text-anchor: middle;
  pointer-events: none;
}
#cam-map .cam-btn:hover rect { fill: #7a7a7a; }
#cam-map .cam-btn.selected .cam-cone { fill: rgba(90, 230, 90, 0.28); }
#cam-map .cam-btn.selected rect {
  fill: #2f9e2f;
  animation: cam-blink 1s steps(1) infinite;
}
@keyframes cam-blink {
  50% { fill: #1c5e1c; }
}

/* Hour digit window: lets the 5 roll up into a 6 at the end of the night */
#hour-window {
  display: inline-block;
  height: 1.3em;
  line-height: 1.3em;
  overflow: hidden;
  vertical-align: bottom;
  padding-right: 0.08em;
  margin-right: -0.08em;
}
#hour-reel { display: block; }
#hour-reel > span { display: block; height: 1.3em; }

#clock {
  position: fixed;
  top: 28px;
  right: 40px;
  font-family: "Minecraft", monospace;
  font-size: clamp(24px, 3.2vw, 52px);
  color: #fff;
  text-shadow: 3px 3px 0 #3f3f3f;
  user-select: none;
  pointer-events: none;
  z-index: 5;
  line-height: 1.3em;
  white-space: nowrap;
}
#clock.ending {
  right: auto;
  transform: translate(-50%, -50%);
  z-index: 16;
  text-shadow: 0.06em 0.06em 0 #3f3f3f;
}

/* ---------- 6 AM cutscene ---------- */
#end-overlay {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 3s ease-in;
}
#end-overlay.visible { opacity: 1; pointer-events: auto; }

#confetti {
  position: fixed;
  inset: 0;
  z-index: 17;
  pointer-events: none;
  display: none;
}
#confetti.visible { display: block; }

#end-caption {
  position: fixed;
  left: 50%;
  top: 72%;
  transform: translateX(-50%);
  z-index: 17;
  font-family: "Minecraft", monospace;
  font-size: clamp(12px, 1.1vw, 18px);
  color: #777;
  opacity: 0;
  transition: opacity 1.5s;
  pointer-events: none;
  white-space: nowrap;
}
#end-caption.visible { opacity: 1; }

#fade {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10;
  pointer-events: none;
}
body.started #fade { animation: fade-in 3s ease-in forwards; }

/* Black screen shown until the first click (browsers need a click before playing sound) */
#start-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Minecraft", monospace;
  font-size: clamp(20px, 2.4vw, 40px);
  cursor: pointer;
  user-select: none;
}
#start-screen.loading { cursor: progress; }

@keyframes fade-in {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ---------- Death cutscene ---------- */
#death {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  background: #000;
  overflow: hidden;
  cursor: default;
}
#death.active { display: block; }
#death > * { position: absolute; }
#death-meme {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
#death-dracula-frame { opacity: 0; }
#death-dracula {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#death-red {
  inset: 0;
  background: #ff1010;
  opacity: 0;
}
#death-red.on { opacity: 1; }
#death-red.fade-out { opacity: 0; transition: opacity 1s ease-in; }

/* Minecraft-style death screen */
#death-text {
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: "Minecraft", monospace;
  font-size: clamp(44px, 6vw, 110px);
  color: #fff;
  text-shadow: 0.07em 0.07em 0 #3f0000;
  white-space: nowrap;
  display: none;
}
#death-text small {
  display: block;
  margin-top: 0.6em;
  font-size: 0.28em;
  color: #ffd6d6;
  text-shadow: 0.1em 0.1em 0 #3f0000;
}
#death-text.on { display: block; }

/* ---------- Ghost ---------- */
#ghost-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
.ghost-layer {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.ghost-source {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.death-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flashlight: a warm pool of light on the doorway */
#flashlight {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 22% 38% at 50% 62%,
              rgba(255, 244, 214, 0.42) 0%, rgba(255, 236, 196, 0.2) 45%, rgba(255, 236, 196, 0) 100%);
  transition: opacity 0.08s;
}
#flashlight.on { opacity: 1; }

/* ---------- Controls reminder (left side) ---------- */
#controls {
  position: fixed;
  left: 2.5vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  font-family: "Minecraft", monospace;
  font-size: clamp(11px, 0.95vw, 17px);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
  pointer-events: none;
  user-select: none;
  transition: opacity 1.5s ease-out;
}
#controls.gone { opacity: 0; }   /* fades away 10 s into the night */
#controls b {
  display: inline-block;
  min-width: 3.6em;
  padding: 0 0.35em;
  margin-right: 0.5em;
  text-align: center;
  font-weight: normal;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.35);
}

/* ---------- Door broken by the ghost ---------- */
#door.jammed { cursor: not-allowed; }

.shake { animation: shake 0.55s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { translate: -3px 1px; }
  20%, 80% { translate: 6px -2px; }
  30%, 50%, 70% { translate: -10px 3px; }
  40%, 60% { translate: 10px -3px; }
  100% { translate: 0 0; }
}

#break-flash {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse 30% 45% at 50% 60%, rgba(214, 186, 140, 0.75), rgba(150, 120, 85, 0.35) 70%, rgba(150, 120, 85, 0.2));
  opacity: 0;
}
#break-flash.on { animation: dust 0.9s ease-out; }
@keyframes dust {
  0% { opacity: 1; }
  100% { opacity: 0; }
}