@font-face {
  font-family: "Minecraft";
  src: url("../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%);
  opacity: 0;                /* faded, not switched (see the note on #room-dark below) */
  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 { opacity: 0.995; }

/* The doorway pictures (Dracula, Patryk, lights out) are always rendered and only faded in/out.
   Switching them on/off over the room video made some graphics cards flash blue/cyan. */
#room-dark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
/* Who's standing in the doorway: only the doorway part of the picture (x 1090, y 490,
   400x740 px of the 2560x1440 frame, soft edges baked in), so the room video and its
   flickering torch keep playing around it. */
.doorway {
  position: absolute;
  left: calc(1090 / 2560 * 100%);
  top: calc(490 / 1440 * 100%);
  width: calc(400 / 2560 * 100%);
  height: calc(740 / 1440 * 100%);
  opacity: 0;
  pointer-events: none;
}
.doorway.visible { opacity: 1; }
body.power-out #room-dark { opacity: 1; }
body.power-out .doorway { opacity: 0; }
body.power-out #door,
body.power-out #cam-bar { display: none; }

/* Videos are drawn 0.5% see-through (invisible to the eye). This keeps the browser from
   handing them to the graphics card's separate video layer, whose switching caused the
   blue/cyan flashes on some PCs. */
video { opacity: 0.995; }

/* ---------- 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; }

/* the real Patryk, laid over the outside or corridor camera (position set in patryk.js) */
#patryk-cam {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#patryk-cam.visible { opacity: 1; }

/* ---------- Minecraft-style chat (bottom-left, above the power meter) ---------- */
#chat {
  position: fixed;
  left: 2.5vw;
  bottom: calc(3vh + clamp(14px, 1.45vw, 26px) * 3.4);
  z-index: 6;
  max-width: min(46vw, 640px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: "Minecraft", monospace;
  font-size: clamp(11px, 0.95vw, 17px);
  line-height: 1.45;
  pointer-events: none;
  user-select: none;
}
#chat .line {
  padding: 0.05em 0.45em;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
  transition: opacity 2s;
}
#chat .line.system { color: #ffff55; text-shadow: 2px 2px 0 #3f3f15; }
#chat .line.old { opacity: 0; }

/* 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: 40;
  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; }
}

/* =================== SCREENS AROUND THE NIGHTS =================== */

/* ---------- Main menu (FNAF style) ---------- */
#menu {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: #000;
  display: none;
  overflow: hidden;
  font-family: "Minecraft", monospace;
  color: #fff;
  user-select: none;
}
#menu.on { display: block; }
/* The background slowly pans across / zooms into three pictures in turn (menu.js) */
#menu-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#menu-img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 50% 50%;
  opacity: 0.6;
  will-change: transform;
}
#menu-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}
#menu-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 4px),
              radial-gradient(ellipse at 60% 50%, transparent 40%, rgba(0, 0, 0, 0.75) 100%);
}
#menu-content {
  position: absolute;
  left: 6vw;
  top: 8vh;
}
#menu h1 {
  margin: 0 0 7vh;
  font-weight: normal;
  font-size: clamp(34px, 4.6vw, 84px);
  line-height: 1.15;
  text-shadow: 0.06em 0.06em 0 #2a0000;
  animation: title-flicker 6s infinite;
}
@keyframes title-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.55; }
  94% { opacity: 1; }
  96% { opacity: 0.7; }
}
#menu-options {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(18px, 2vw, 34px);
  line-height: 2;
}
#menu-options li {
  cursor: pointer;
  position: relative;
  padding-left: 2.2em;
  color: #ddd;
}
#menu-options li span { color: #999; font-size: 0.7em; margin-left: 0.6em; }
#menu-options li.active { color: #fff; }
#menu-options li.active::before {
  content: ">>";
  position: absolute;
  left: 0;
}
#menu-version {
  position: absolute;
  left: 2vw;
  bottom: 2vh;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
}
#menu-howto {
  position: absolute;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(560px, 46vw);
  padding: 1.6em 1.8em;
  background: rgba(0, 0, 0, 0.82);
  border: 2px solid rgba(255, 255, 255, 0.35);
  font-size: clamp(13px, 1.05vw, 18px);
  line-height: 1.6;
  display: none;
  cursor: pointer;
}
#menu-howto.on { display: block; }
#menu-howto h2, #menu-howto h3 { font-weight: normal; margin: 0 0 0.6em; }
#menu-howto h2 { font-size: 1.6em; }
#menu-howto h3 { font-size: 1.15em; margin-top: 1.2em; }
#menu-howto p { margin: 0 0 0.4em; color: #ddd; }
#menu-howto .keys div { color: #bbb; }
#menu-howto .keys b {
  display: inline-block;
  min-width: 4.2em;
  font-weight: normal;
  color: #fff;
}
#menu-howto .close { margin-top: 1.4em; font-size: 0.85em; color: #888; }

/* ---------- Phone call before night 1 ---------- */
#phone {
  position: fixed;
  inset: 0;
  z-index: 34;
  background: #000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 12vw;
  text-align: center;
  font-family: "Minecraft", monospace;
  color: #fff;
  user-select: none;
}
#phone.on { display: flex; animation: fade-from-black 1.2s ease-out; }
@keyframes fade-from-black { from { opacity: 0; } to { opacity: 1; } }
#phone .label {
  font-size: clamp(12px, 1vw, 16px);
  color: #888;
  margin-bottom: 2.5em;
  letter-spacing: 0.1em;
}
#phone .en { font-size: clamp(15px, 1.45vw, 26px); line-height: 1.6; margin: 0 0 1.4em; }
#phone .pl { font-size: clamp(13px, 1.15vw, 20px); line-height: 1.6; margin: 0; color: #9a9a9a; }
#phone .prompt {
  margin-top: 3em;
  font-size: clamp(13px, 1.1vw, 18px);
  opacity: 0;
}
#phone .prompt.on { animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }

/* ---------- "12 AM / Noc N" card ---------- */
#night-card {
  position: fixed;
  inset: 0;
  z-index: 33;
  background: #000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Minecraft", monospace;
  color: #fff;
  user-select: none;
  transition: opacity 0.8s;
}
#night-card.on { display: flex; }
#night-card.out { opacity: 0; pointer-events: none; }
#night-card .time { font-size: clamp(40px, 5vw, 90px); }
#night-card .night { font-size: clamp(22px, 2.4vw, 42px); color: #ccc; margin-top: 0.4em; }

/* ---------- End-of-night statistics ---------- */
body.show-stats #clock,
body.show-stats #end-caption,
body.show-stats #confetti { opacity: 0 !important; transition: opacity 1s; }
#night-stats {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 18;
  width: min(620px, 86vw);
  font-family: "Minecraft", monospace;
  color: #fff;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s;
}
#night-stats.on { opacity: 1; pointer-events: auto; cursor: pointer; }
#night-stats h2 { font-weight: normal; font-size: clamp(26px, 2.8vw, 48px); margin: 0 0 1.2em; }
#night-stats .rows { font-size: clamp(14px, 1.3vw, 22px); line-height: 2; }
#night-stats .rows div { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
#night-stats .rows span { color: #bbb; }
#night-stats .rows b { font-weight: normal; }
#night-stats .prompt {
  margin-top: 2.2em;
  font-size: clamp(12px, 1.05vw, 17px);
  animation: blink 1.4s steps(1) infinite;
}

/* =================== EXTRA MECHANICS =================== */

/* Lightning on the outside camera */
#lightning {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #f4f7ff;
  opacity: 0;
}
#lightning.on { animation: lightning 0.7s ease-out; }
@keyframes lightning {
  0% { opacity: 0; }
  6% { opacity: 0.85; }
  18% { opacity: 0.1; }
  30% { opacity: 0.6; }
  100% { opacity: 0; }
}

/* A camera with no signal */
#cam-broken {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  display: none;
  text-align: center;
  font-family: "Minecraft", monospace;
  color: #fff;
  text-shadow: 3px 3px 0 #000;
  pointer-events: none;
}
#cam-broken.on { display: block; }
#cam-broken .title { font-size: clamp(30px, 3.6vw, 64px); animation: blink 1.4s steps(1) infinite; }
#cam-broken .hint { font-size: clamp(13px, 1.2vw, 20px); margin-top: 0.8em; }
#cam-broken .bar {
  width: min(360px, 40vw);
  height: 14px;
  margin: 1.2em auto 0;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, 0.6);
}
#cam-broken .bar i { display: block; height: 100%; width: 0; background: #5ae65a; }
#cam-map .cam-btn.broken rect { fill: #8a2020; }
#cam-map .cam-btn.broken.selected rect { animation: cam-blink-broken 1s steps(1) infinite; }
@keyframes cam-blink-broken { 50% { fill: #4a1010; } }